feat: include pinned data in filtering for more accurate results in env variables search (#7513)

* refactor: optimize formik value handling and improve save conditions

* fix

.gitattributes

@@ -1,2 +0,0 @@
-# Force LF line endings for all text files
-* text=auto eol=lf

.github/CODEOWNERS

@@ -1 +1 @@
-* @helloanoop @bijin-bruno @lohit-bruno @naman-bruno @sid-bruno @vijayh-bruno @utkarsh-bruno @sanish-bruno
+* @helloanoop @maintainer-bruno @bijin-bruno @lohit-bruno @naman-bruno

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -49,21 +49,14 @@ body:
   - type: textarea
     attributes:
       label: Describe the bug
-      description: A clear and concise description of the bug and how it's affecting your work
+      description: A clear and concise description of the bug and how it's effecting your work along with steps to reproduce. 
     validations:
       required: true
 
   - type: textarea
     attributes:
-      label: Steps to reproduce
-      description: The exact steps that can be performed to reproduce the issue
-    validations:
-      required: true
-
-  - type: textarea
-    attributes:
-      label: Collection to reproduce 
-      description: If possible, please attach the collection where the bug is present
+      label: .bru file to reproduce the bug
+      description: Attach your .bru file here that can reproduce the problem.
     validations:
       required: false
 

.github/ISSUE_TEMPLATE/config.yaml

@@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: Discussions
     url: https://github.com/usebruno/bruno/discussions

.github/actions/auth/oauth1/linux/run-auth-e2e-tests/action.yml

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

.github/actions/auth/oauth1/linux/run-oauth1-cli-tests/action.yml

@@ -1,30 +0,0 @@
-name: 'Run OAuth1 CLI Tests - Linux'
-description: 'Run OAuth1 CLI tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run BRU format CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        BRU_CLI="../../../../../../packages/bruno-cli/bin/bru.js"
-
-        # navigate to BRU test collection directory
-        cd tests/auth/oauth1/fixtures/collections/bru
-
-        echo "=== BRU Format Collection Run ==="
-        node $BRU_CLI run --env Local --output junit-bru.xml --format junit
-
-    - name: Run YML format CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        BRU_CLI="../../../../../../packages/bruno-cli/bin/bru.js"
-
-        # navigate to YML test collection directory
-        cd tests/auth/oauth1/fixtures/collections/yml
-
-        echo "=== YML Format Collection Run ==="
-        node $BRU_CLI run --env Local --output junit-yml.xml --format junit

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

@@ -1,18 +0,0 @@
-name: 'Setup Auth Feature Dependencies - Linux'
-description: 'Setup feature-specific dependencies for auth tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Install additional OS dependencies for auth tests
-      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
-
-        CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-        if [[ -f "$CHROME_SANDBOX" ]]; then
-          sudo chown root "$CHROME_SANDBOX"
-          sudo chmod 4755 "$CHROME_SANDBOX"
-        fi

.github/actions/auth/oauth1/linux/start-test-server/action.yml

@@ -1,16 +0,0 @@
-name: 'Start Test Server - Linux'
-description: 'Start the bruno-tests mock server for OAuth1 CLI tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Start test server
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        cd packages/bruno-tests
-
-        echo "starting test server in background"
-        node src/index.js &
-
-        echo "server started with PID: $!"

.github/actions/auth/oauth1/macos/run-auth-e2e-tests/action.yml

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

.github/actions/auth/oauth1/macos/run-oauth1-cli-tests/action.yml

@@ -1,30 +0,0 @@
-name: 'Run OAuth1 CLI Tests - macOS'
-description: 'Run OAuth1 CLI tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run BRU format CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        BRU_CLI="../../../../../../packages/bruno-cli/bin/bru.js"
-
-        # navigate to BRU test collection directory
-        cd tests/auth/oauth1/fixtures/collections/bru
-
-        echo "=== BRU Format Collection Run ==="
-        node $BRU_CLI run --env Local --output junit-bru.xml --format junit
-
-    - name: Run YML format CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        BRU_CLI="../../../../../../packages/bruno-cli/bin/bru.js"
-
-        # navigate to YML test collection directory
-        cd tests/auth/oauth1/fixtures/collections/yml
-
-        echo "=== YML Format Collection Run ==="
-        node $BRU_CLI run --env Local --output junit-yml.xml --format junit

.github/actions/auth/oauth1/macos/start-test-server/action.yml

@@ -1,16 +0,0 @@
-name: 'Start Test Server - macOS'
-description: 'Start the bruno-tests mock server for OAuth1 CLI tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Start test server
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        cd packages/bruno-tests
-
-        echo "starting test server in background"
-        node src/index.js &
-
-        echo "server started with PID: $!"

.github/actions/auth/oauth1/windows/run-auth-e2e-tests/action.yml

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

.github/actions/auth/oauth1/windows/run-oauth1-cli-tests/action.yml

@@ -1,34 +0,0 @@
-name: 'Run OAuth1 CLI Tests - Windows'
-description: 'Run OAuth1 CLI tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run BRU format CLI tests
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-        $ErrorActionPreference = "Stop"
-
-        $BRU_CLI = "..\..\..\..\..\..\packages\bruno-cli\bin\bru.js"
-
-        # navigate to BRU test collection directory
-        Set-Location tests\auth\oauth1\fixtures\collections\bru
-
-        Write-Host "=== BRU Format Collection Run ==="
-        $process = Start-Process -FilePath "node" -ArgumentList "$BRU_CLI run --env Local --output junit-bru.xml --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        if ($process.ExitCode -ne 0) { exit 1 }
-
-    - name: Run YML format CLI tests
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-        $ErrorActionPreference = "Stop"
-
-        $BRU_CLI = "..\..\..\..\..\..\packages\bruno-cli\bin\bru.js"
-
-        # navigate to YML test collection directory
-        Set-Location tests\auth\oauth1\fixtures\collections\yml
-
-        Write-Host "=== YML Format Collection Run ==="
-        $process = Start-Process -FilePath "node" -ArgumentList "$BRU_CLI run --env Local --output junit-yml.xml --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        if ($process.ExitCode -ne 0) { exit 1 }

.github/actions/auth/oauth1/windows/start-test-server/action.yml

@@ -1,14 +0,0 @@
-name: 'Start Test Server - Windows'
-description: 'Start the bruno-tests mock server for OAuth1 CLI tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Start test server
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-
-        Set-Location packages\bruno-tests
-
-        Write-Host "starting test server in background"
-        Start-Process -FilePath "node" -ArgumentList "src\index.js" -PassThru -WindowStyle Hidden

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

@@ -5,10 +5,6 @@ inputs:
     description: 'Skip building libraries'
     required: false
     default: 'false'
-  shell:
-    description: 'Shell to use (bash, pwsh)'
-    required: false
-    default: 'bash'
 runs:
   using: 'composite'
   steps:
@@ -20,12 +16,12 @@ runs:
         cache-dependency-path: './package-lock.json'
 
     - name: Install node dependencies
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm ci --legacy-peer-deps
 
     - name: Build libraries
       if: inputs.skip-build != 'true'
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: |
         npm run build:graphql-docs
         npm run build:bruno-query

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

@@ -7,13 +7,13 @@ runs:
       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-ssl
+        name: playwright-report-linux
         path: playwright-report/
         retention-days: 30

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

@@ -11,8 +11,5 @@ runs:
           libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
           xvfb libxml2-utils
 
-        CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-        if [[ -f "$CHROME_SANDBOX" ]]; then
-          sudo chown root "$CHROME_SANDBOX"
-          sudo chmod 4755 "$CHROME_SANDBOX"
-        fi
+        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-ssl-e2e-tests/action.yml

@@ -12,6 +12,6 @@ runs:
       if: ${{ !cancelled() }}
       uses: actions/upload-artifact@v4
       with:
-        name: playwright-report-macos-ssl
+        name: playwright-report-macos
         path: playwright-report/
         retention-days: 30

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

@@ -12,6 +12,6 @@ runs:
       if: ${{ !cancelled() }}
       uses: actions/upload-artifact@v4
       with:
-        name: playwright-report-windows-ssl
+        name: playwright-report-windows
         path: playwright-report/
         retention-days: 30

.github/actions/tests/run-benchmark-tests/action.yml

@@ -1,38 +0,0 @@
-name: 'Run Benchmark Tests'
-description: 'Run Playwright benchmark tests and compare against baseline'
-inputs:
-  os:
-    description: 'Operating system (ubuntu, macos, windows)'
-    default: 'ubuntu'
-  update-baseline:
-    description: 'Update baseline instead of comparing'
-    default: 'false'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run Benchmark Tests (Ubuntu)
-      if: inputs.os == 'ubuntu'
-      shell: bash
-      run: xvfb-run npm run test:benchmark
-
-    - name: Run Benchmark Tests
-      if: inputs.os != 'ubuntu'
-      shell: bash
-      run: npm run test:benchmark
-
-    - name: Update Baseline
-      if: inputs.update-baseline == 'true'
-      shell: bash
-      run: >-
-        node tests/benchmarks/utils/compare.js
-        --results tests/benchmarks/results/mounting.json
-        --baseline tests/benchmarks/mounting/baseline.${{ inputs.os }}.json
-        --update-baseline
-
-    - name: Compare Against Baseline
-      if: inputs.update-baseline != 'true'
-      shell: bash
-      run: >-
-        node tests/benchmarks/utils/compare.js
-        --results tests/benchmarks/results/mounting.json
-        --baseline tests/benchmarks/mounting/baseline.${{ inputs.os }}.json

.github/actions/tests/run-cli-tests/action.yml

@@ -1,41 +1,20 @@
 name: 'Run CLI Tests'
 description: 'Setup dependencies, start local testbench and run CLI tests'
-inputs:
-  shell:
-    description: 'Shell to use (bash, pwsh)'
-    required: false
-    default: 'bash'
 runs:
   using: 'composite'
   steps:
-    - name: Install Test Collection Dependencies
-      shell: ${{ inputs.shell }}
-      run: npm ci --prefix packages/bruno-tests/collection
-
-    - name: Run Local Testbench and CLI Tests
-      if: inputs.shell != 'pwsh'
-      shell: ${{ inputs.shell }}
+    - name: Run Local Testbench
+      shell: bash
       run: |
         npm start --workspace=packages/bruno-tests &
         sleep 5
-        cd packages/bruno-tests/collection
-        node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit --sandbox developer
 
-    - name: Run Local Testbench and CLI Tests - Windows
-      if: inputs.shell == 'pwsh'
-      shell: pwsh
+    - name: Install Test Collection Dependencies
+      shell: bash
+      run: npm ci --prefix packages/bruno-tests/collection
+
+    - name: Run CLI Tests
+      shell: bash
       run: |
-        $process = Start-Process "npm.cmd" `
-          -ArgumentList "start","--workspace=packages/bruno-tests" `
-          -NoNewWindow `
-          -PassThru
-
-        Start-Sleep -Seconds 5
-
-        if ($process.HasExited) {
-          Write-Error "Server exited early"
-          exit 1
-        }
-
         cd packages/bruno-tests/collection
         node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit --sandbox developer

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

@@ -4,23 +4,19 @@ inputs:
   os:
     description: 'Operating system (ubuntu, macos, windows)'
     default: 'ubuntu'
-  shell:
-    description: 'Shell to use (bash, pwsh)'
-    required: false
-    default: 'bash'
 runs:
   using: 'composite'
   steps:
     - name: Install Test Collection Dependencies
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm ci --prefix packages/bruno-tests/collection
 
     - name: Run Playwright Tests (Ubuntu)
       if: inputs.os == 'ubuntu'
       shell: bash
-      run: xvfb-run dbus-run-session -- npm run test:e2e
+      run: xvfb-run npm run test:e2e
 
     - name: Run Playwright Tests
       if: inputs.os != 'ubuntu'
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm run test:e2e

.github/actions/tests/run-unit-tests/action.yml

@@ -1,53 +1,48 @@
 name: 'Run Unit Tests'
 description: 'Setup dependencies and run unit tests for all packages'
-inputs:
-  shell:
-    description: 'Shell to use (bash, pwsh)'
-    required: false
-    default: 'bash'
 runs:
   using: 'composite'
   steps:
     - name: Test Package bruno-js
-      shell: ${{ inputs.shell }}
-      run: npm run test:ci --workspace=packages/bruno-js
+      shell: bash
+      run: npm run test --workspace=packages/bruno-js
 
     - name: Test Package bruno-cli
-      shell: ${{ inputs.shell }}
-      run: npm run test:ci --workspace=packages/bruno-cli
+      shell: bash
+      run: npm run test --workspace=packages/bruno-cli
 
     - name: Test Package bruno-query
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm run test --workspace=packages/bruno-query
 
     - name: Test Package bruno-lang
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm run test --workspace=packages/bruno-lang
 
     - name: Test Package bruno-schema
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm run test --workspace=packages/bruno-schema
 
     - name: Test Package bruno-app
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm run test --workspace=packages/bruno-app
 
     - name: Test Package bruno-common
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm run test --workspace=packages/bruno-common
 
     - name: Test Package bruno-converters
-      shell: ${{ inputs.shell }}
-      run: npm run test:ci --workspace=packages/bruno-converters
+      shell: bash
+      run: npm run test --workspace=packages/bruno-converters
 
     - name: Test Package bruno-electron
-      shell: ${{ inputs.shell }}
-      run: npm run test:ci --workspace=packages/bruno-electron
+      shell: bash
+      run: npm run test --workspace=packages/bruno-electron
 
     - name: Test Package bruno-requests
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm run test --workspace=packages/bruno-requests
 
     - name: Test Package bruno-filestore
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm run test --workspace=packages/bruno-filestore

.github/workflows/benchmarks.yml

@@ -1,91 +0,0 @@
-name: Benchmarks
-on:
-  workflow_dispatch:
-    inputs:
-      update-baseline:
-        description: 'Update baseline with current results instead of comparing'
-        type: boolean
-        default: false
-  pull_request:
-    branches: [main, 'release/v*']
-
-jobs:
-  benchmark:
-    name: Performance Benchmarks (${{ matrix.os }})
-    timeout-minutes: 60
-    runs-on: ${{ matrix.os }}
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-24.04, macos-latest, windows-latest]
-        include:
-          - os: ubuntu-24.04
-            os-name: ubuntu
-          - os: macos-latest
-            os-name: macos
-          - os: windows-latest
-            os-name: windows
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Install System Dependencies (Ubuntu)
-        if: matrix.os-name == 'ubuntu'
-        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
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Configure Chrome Sandbox
-        if: matrix.os-name == 'ubuntu'
-        run: |
-          CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-          if [[ -f "$CHROME_SANDBOX" ]]; then
-            sudo chown root "$CHROME_SANDBOX"
-            sudo chmod 4755 "$CHROME_SANDBOX"
-          fi
-
-      - name: Run Benchmark Tests
-        uses: ./.github/actions/tests/run-benchmark-tests
-        with:
-          os: ${{ matrix.os-name }}
-          update-baseline: ${{ github.event.inputs.update-baseline || 'false' }}
-
-      - name: Upload Benchmark Results
-        uses: actions/upload-artifact@v6
-        if: ${{ !cancelled() }}
-        with:
-          name: benchmark-results-${{ matrix.os-name }}
-          path: |
-            tests/benchmarks/results/
-            benchmark-report/
-          retention-days: 30
-
-      - name: Commit Updated Baseline
-        if: github.event.inputs.update-baseline == 'true'
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add tests/benchmarks/mounting/baseline.${{ matrix.os-name }}.json
-          git diff --staged --quiet || git commit -m "chore: update ${{ matrix.os-name }} benchmark baseline" && git push
-
-      - name: Comment Benchmark Results on PR
-        if: github.event_name == 'pull_request' && !cancelled()
-        continue-on-error: true
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const run = require('./tests/benchmarks/utils/pr-comment.js');
-            await run({
-              github,
-              context,
-              resultsPath: 'tests/benchmarks/results/mounting.json',
-              baselinePath: 'tests/benchmarks/mounting/baseline.${{ matrix.os-name }}.json',
-              title: 'Benchmark Results — Collection Mount (${{ matrix.os-name }})'
-            });

.github/workflows/flaky-test-detector.yml

@@ -40,11 +40,8 @@ jobs:
       - name: Install npm dependencies
         run: |
           npm ci --legacy-peer-deps
-          CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-          if [[ -f "$CHROME_SANDBOX" ]]; then
-            sudo chown root "$CHROME_SANDBOX"
-            sudo chmod 4755 "$CHROME_SANDBOX"
-          fi
+          sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+          sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
 
       - name: Install test collection dependencies
         run: npm ci --prefix packages/bruno-tests/collection

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

@@ -43,7 +43,7 @@ jobs:
           bru run --env Prod --output junit.xml --format junit --sandbox developer
 
       - name: Publish Test Report
-        uses: dorny/test-reporter@v3
+        uses: dorny/test-reporter@v2
         if: success() || failure()
         with:
           name: Test Report

.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@v6
+
+      - 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@v6
+
+      - 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@v6
+      
+      - 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-linux.yml

@@ -1,146 +0,0 @@
-name: Linux Tests
-on:
-  workflow_dispatch:
-  push:
-    branches: [main, 'release/v*']
-  pull_request:
-    branches: [main, 'release/v*']
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  unit-test:
-    name: Unit Tests (Linux)
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Unit Tests
-        uses: ./.github/actions/tests/run-unit-tests
-
-  cli-test:
-    name: CLI Tests (Linux)
-    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run CLI Tests
-        uses: ./.github/actions/tests/run-cli-tests
-
-      - name: Publish Test Report
-        uses: EnricoMi/publish-unit-test-result-action@v2
-        if: always()
-        with:
-          check_name: CLI Test Results (Linux)
-          files: packages/bruno-tests/collection/junit.xml
-          comment_mode: always
-          check_run: false
-
-  e2e-test:
-    name: Playwright E2E Tests (Linux)
-    timeout-minutes: 240
-    runs-on: ubuntu-24.04
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Install System Dependencies (Ubuntu)
-        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 \
-            gsettings-desktop-schemas dbus-x11
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Configure Chrome Sandbox
-        run: |
-          CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-          if [[ -f "$CHROME_SANDBOX" ]]; then
-            sudo chown root "$CHROME_SANDBOX"
-            sudo chmod 4755 "$CHROME_SANDBOX"
-          fi
-
-      - name: Run E2E Tests
-        uses: ./.github/actions/tests/run-e2e-tests
-        with:
-          os: ubuntu
-
-      - name: Upload Playwright Report
-        uses: actions/upload-artifact@v6
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report-linux
-          path: playwright-report/
-          retention-days: 30
-
-  ssl-test:
-    name: SSL Tests (Linux)
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - 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
-
-  oauth1-tests:
-    name: OAuth 1.0 Auth Tests (Linux)
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Setup Feature Dependencies
-        uses: ./.github/actions/auth/oauth1/linux/setup-feature-specific-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/linux/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/linux/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/linux/run-oauth1-cli-tests

.github/workflows/tests-macos.yml

@@ -1,127 +0,0 @@
-name: macOS Tests
-on:
-  workflow_dispatch:
-  push:
-    branches: [main, 'release/v*']
-  pull_request:
-    branches: [main, 'release/v*']
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  unit-test:
-    name: Unit Tests (macOS)
-    timeout-minutes: 60
-    runs-on: macos-latest
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Unit Tests
-        uses: ./.github/actions/tests/run-unit-tests
-
-  cli-test:
-    name: CLI Tests (macOS)
-    runs-on: macos-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run CLI Tests
-        uses: ./.github/actions/tests/run-cli-tests
-
-      - name: Publish Test Report
-        uses: EnricoMi/publish-unit-test-result-action/macos@v2
-        if: always()
-        with:
-          check_name: CLI Test Results (macOS)
-          files: packages/bruno-tests/collection/junit.xml
-          comment_mode: off
-          check_run: false
-
-  e2e-test:
-    name: Playwright E2E Tests (macOS)
-    timeout-minutes: 240
-    runs-on: macos-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run E2E Tests
-        uses: ./.github/actions/tests/run-e2e-tests
-        with:
-          os: macos
-
-      - name: Upload Playwright Report
-        uses: actions/upload-artifact@v6
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report-macos
-          path: playwright-report/
-          retention-days: 30
-
-  ssl-test:
-    name: SSL Tests (macOS)
-    timeout-minutes: 60
-    runs-on: macos-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - 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
-
-  oauth1-tests:
-    name: OAuth 1.0 Auth Tests (macOS)
-    timeout-minutes: 60
-    runs-on: macos-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/macos/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/macos/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/macos/run-oauth1-cli-tests

.github/workflows/tests-windows.yml

@@ -1,138 +0,0 @@
-name: Windows Tests
-on:
-  workflow_dispatch:
-  push:
-    branches: [main, 'release/v*']
-  pull_request:
-    branches: [main, 'release/v*']
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  unit-test:
-    name: Unit Tests (Windows)
-    if: false # @TODO: Temporarily disabled. Remove this once the tests are fixed.
-    timeout-minutes: 60
-    runs-on: windows-latest
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-        with:
-          shell: pwsh
-
-      - name: Run Unit Tests
-        uses: ./.github/actions/tests/run-unit-tests
-        with:
-          shell: pwsh
-
-  cli-test:
-    name: CLI Tests (Windows)
-    runs-on: windows-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-        with:
-          shell: pwsh
-
-      - name: Run CLI Tests
-        uses: ./.github/actions/tests/run-cli-tests
-        with:
-          shell: pwsh
-
-      - name: Publish Test Report
-        uses: EnricoMi/publish-unit-test-result-action/windows@v2
-        if: always()
-        with:
-          check_name: CLI Test Results (Windows)
-          files: packages/bruno-tests/collection/junit.xml
-          comment_mode: off
-          check_run: false
-
-  e2e-test:
-    name: Playwright E2E Tests (Windows)
-    timeout-minutes: 240
-    runs-on: windows-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-        with:
-          shell: pwsh
-
-      - name: Run E2E Tests
-        uses: ./.github/actions/tests/run-e2e-tests
-        with:
-          os: windows
-          shell: pwsh
-
-      - name: Upload Playwright Report
-        uses: actions/upload-artifact@v6
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report-windows
-          path: playwright-report/
-          retention-days: 30
-
-  ssl-test:
-    name: SSL Tests (Windows)
-    timeout-minutes: 60
-    runs-on: windows-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-        with:
-          shell: pwsh
-
-      - 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
-
-  oauth1-tests:
-    name: OAuth 1.0 Auth Tests (Windows)
-    timeout-minutes: 60
-    runs-on: windows-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/windows/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/windows/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/windows/run-oauth1-cli-tests

.github/workflows/tests.yml

@@ -0,0 +1,82 @@
+name: Tests
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, 'release/v*']
+  pull_request:
+    branches: [main, 'release/v*']
+
+jobs:
+  unit-test:
+    name: Unit Tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
+
+      - name: Run Unit Tests
+        uses: ./.github/actions/tests/run-unit-tests
+
+  cli-test:
+    name: CLI Tests
+    runs-on: ubuntu-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
+
+      - name: Run CLI Tests
+        uses: ./.github/actions/tests/run-cli-tests
+
+      - name: Publish Test Report
+        uses: EnricoMi/publish-unit-test-result-action@v2
+        if: always()
+        with:
+          check_name: CLI Test Results
+          files: packages/bruno-tests/collection/junit.xml
+          comment_mode: always
+
+  e2e-test:
+    name: Playwright E2E Tests
+    timeout-minutes: 60
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Install System Dependencies (Ubuntu)
+        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
+
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
+
+      - name: Configure Chrome Sandbox
+        run: |
+          sudo chown root node_modules/electron/dist/chrome-sandbox
+          sudo chmod 4755 node_modules/electron/dist/chrome-sandbox
+
+      - name: Run playwright Tests
+        uses: ./.github/actions/tests/run-e2e-tests
+        with:
+          os: ubuntu
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v6
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -58,10 +58,6 @@ skills-lock.json
 # Playwright
 /blob-report/
 
-# Benchmark results (generated at runtime)
-tests/benchmarks/results/
-/benchmark-report/
-
 # Development plan files
 CLAUDE.md
 AGENTS.md
@@ -71,4 +67,4 @@ AGENTS.md
 packages/bruno-filestore/dist
 packages/bruno-requests/dist
 packages/bruno-schema-types/dist
-packages/bruno-converters/dist
+packages/bruno-converters/dist

.npmrc

@@ -1 +0,0 @@
-min-release-age=10

CODING_STANDARDS.md

@@ -59,47 +59,6 @@ Remember, these rules are here to make our codebase harmonious. If something doe
 
 - Tests should be fast enough to run continuously. Avoid long-running operations unless absolutely necessary; prefer lightweight fixtures and isolated units.
 
-### E2E Tests 
-
-When reviewing Electron-specific Playwright tests, treat `<project-root>/tests/**` as the canonical location for specs, typically matching `<project-root>/tests/**/*.spec.{ts,js}`. For broader Playwright workflow guidance, also refer to `docs/playwright-testing-guide.md`.
-
-Goal: rewrite or critique the tests so they are genuinely behavioural, maintainable, and safely parallelizable.
-
-Rules:
-1. Tests must verify user-visible behaviour, not implementation details.
-   - Prefer assertions on UI state, persisted data, windows, dialogs, filesystem effects, and app-level outcomes.
-   - Avoid hardcoded waits, brittle selectors, fake internal state checks, and “click then expect mock called” tests unless the user behaviour is the point.
-
-2. Tests must be Electron-aware.
-   - Use Electron app launch patterns correctly.
-   - Handle main window, secondary windows, dialogs, menus, native prompts, clipboard, file pickers, and IPC-driven UI behaviour through observable outcomes.
-   - Do not reach into app internals unless absolutely necessary for setup or controlled test fixtures.
-
-3. Tests must be parallel-safe.
-   - No shared user data directories.
-   - No shared ports, files, DBs, caches, clipboard assumptions, or global app state.
-   - Each test gets isolated temp paths, unique workspace/project names, and deterministic cleanup.
-   - Avoid test ordering assumptions.
-
-4. No hardcoded mess.
-   - Replace magic timeouts with event-driven waits.
-   - Replace brittle text/index selectors with role, label, test id, or stable user-facing selectors.
-   - Replace duplicated setup with fixtures.
-   - Replace hardcoded absolute paths with temp dirs.
-   - Replace random sleeps with waiting for actual app signals.
-
-5. Every test should follow this shape:
-   - Arrange: create isolated fixture state.
-   - Act: perform real user actions.
-   - Assert: verify observable behavioural outcome.
-   - Cleanup: remove isolated resources.
-
-For each test file:
-- Identify behavioural vs non-behavioural tests.
-- Flag brittle selectors, hardcoded waits, shared state, serial dependencies, and fake assertions.
-- Rewrite the tests using Playwright best practices for Electron.
-- Make them parallel-ready.
-- Explain briefly why each rewrite is better.
 
 ## UI Specific instructions 
 
@@ -116,8 +75,6 @@ For each test file:
   - Avoid: `import * as React from "react";` then `React.useCallback(...)`
 - Add `data-testid` to testable elements for Playwright
 - Co-locate utilities that are truly component-specific next to the component, otherwise place shared items under a common folder
-- Avoid mixed controlled and uncontrolled state in React components. A component is either controlled or uncontrolled. State needs a single source of truth instead of being computed by props and then recomputed internally.
-- SHOULD: Use derived state variables instead of adding unneeded `React.useState` / `useState` hooks.
 
 
 ## Readability and Abstractions

docs/playwright-testing-guide.md

@@ -324,7 +324,7 @@ test('should create and execute HTTP request', async ({ page, createTmpDir }) =>
   await page.getByRole('button', { name: 'Create' }).click();
 
   // Execute request
-  await page.getByTestId('send-arrow-icon').click();
+  await page.locator('#send-request').getByRole('img').nth(2).click();
 
   // Verify response
   await expect(page.getByRole('main')).toContainText('200 OK');

eslint.config.js

@@ -178,8 +178,7 @@ module.exports = runESMImports().then(() => defineConfig([
       }
     },
     rules: {
-      'no-undef': 'error',
-      'no-case-declarations': 'error'
+      'no-undef': 'error'
     }
   },
   {

package.json

@@ -23,6 +23,7 @@
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
+    "@opencollection/types": "~0.8.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -30,22 +31,19 @@
     "@storybook/react": "^10.1.10",
     "@storybook/react-webpack5": "^10.1.10",
     "@stylistic/eslint-plugin": "^5.3.1",
-    "@types/adm-zip": "^0.5.8",
     "@types/jest": "^29.5.11",
-    "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
     "@typescript-eslint/parser": "^8.39.0",
-    "adm-zip": "^0.5.17",
     "concurrently": "^8.2.2",
     "cross-env": "10.1.0",
-    "eslint": "^9.39.4",
+    "eslint": "^9.26.0",
     "eslint-plugin-diff": "^2.0.3",
     "fs-extra": "^11.1.1",
     "globals": "^16.1.0",
     "husky": "^9.1.7",
     "jest": "^29.2.0",
-    "lodash-es": "^4.17.23",
+    "lodash-es": "^4.17.21",
     "nano-staged": "^0.8.0",
     "playwright": "^1.51.1",
     "pretty-quick": "^3.1.3",
@@ -82,11 +80,8 @@
     "watch:common": "npm run watch --workspace=packages/bruno-common",
     "watch:requests": "npm run watch --workspace=packages/bruno-requests",
     "test:codegen": "node playwright/codegen.ts",
-    "test:e2e": "playwright test --project=default --project=system-pac",
+    "test:e2e": "playwright test --project=default",
     "test:e2e:ssl": "playwright test --project=ssl",
-    "test:e2e:auth": "playwright test --project=auth",
-    "test:e2e:sanity": "playwright test --project=default --project=system-pac --grep @sanity",
-    "test:benchmark": "playwright test --config=playwright.benchmark.config.ts",
     "lint": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" npx eslint",
     "lint:fix": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" npx eslint --fix",
     "prepare": "husky"
@@ -97,9 +92,7 @@
     ]
   },
   "overrides": {
-    "axios": "1.16.0",
-    "rollup": "3.30.0",
-    "pbkdf2": "3.1.5",
+    "rollup": "3.29.5",
     "electron-store": {
       "conf": {
         "json-schema-typed": "8.0.1"
@@ -110,4 +103,4 @@
     "ajv": "^8.17.1",
     "git-url-parse": "^14.1.0"
   }
-}
+}

packages/bruno-app/.babelrc

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

packages/bruno-app/jest.setup.js

@@ -1,19 +1,3 @@
-global.ResizeObserver = class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-};
-
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn()
-  }))
-});
-
 jest.mock('nanoid', () => {
   return {
     nanoid: () => {}

packages/bruno-app/package.json

@@ -27,7 +27,6 @@
     "codemirror": "5.65.2",
     "codemirror-graphql": "2.1.1",
     "cookie": "0.7.1",
-    "diff": "^5.2.0",
     "diff2html": "^3.4.47",
     "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
@@ -40,7 +39,7 @@
     "github-markdown-css": "^5.2.0",
     "graphiql": "3.7.1",
     "graphql": "^16.6.0",
-    "graphql-request": "4.2.0",
+    "graphql-request": "^3.7.0",
     "hexy": "^0.3.5",
     "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
@@ -55,7 +54,7 @@
     "jsonschema": "^1.5.0",
     "know-your-http-well": "^0.5.0",
     "linkify-it": "^5.0.0",
-    "lodash": "4.18.1",
+    "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",
     "mime-types": "^3.0.2",
@@ -87,7 +86,7 @@
     "react-virtuoso": "^4.18.1",
     "sass": "^1.46.0",
     "semver": "^7.7.1",
-    "shell-quote": "^1.8.4",
+    "shell-quote": "^1.8.3",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "swagger-ui-react": "^5.31.0",
@@ -101,10 +100,9 @@
     "@babel/core": "^7.27.1",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.22.0",
     "@rsbuild/core": "^1.1.2",
     "@rsbuild/plugin-babel": "^1.0.3",
-    "@rsbuild/plugin-node-polyfill": "1.2.0",
+    "@rsbuild/plugin-node-polyfill": "^1.2.0",
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",

packages/bruno-app/rsbuild.config.mjs

@@ -38,9 +38,6 @@ export default defineConfig({
             dynamicImportMode: "eager",
           },
         },
-        rules: [
-          { test: /\.md$/, type: 'asset/source' }
-        ]
       },
       ignoreWarnings: [
         (warning) =>  warning.message.includes('Critical dependency: the request of a dependency is an expression') && warning?.moduleDescriptor?.name?.includes('flow-parser')

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

@@ -1,317 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  z-index: 10;
-
-  .ai-assist-trigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid transparent;
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
-    opacity: 0.7;
-
-    &:hover,
-    &.open {
-      opacity: 1;
-      color: ${(props) => props.theme.colors.accent};
-      background: ${(props) => props.theme.colors.accent}10;
-      border-color: ${(props) => props.theme.input.border};
-    }
-
-    &:focus-visible {
-      outline: 2px solid ${(props) => props.theme.colors.accent}55;
-      outline-offset: 1px;
-    }
-  }
-
-`;
-
-// Tippy renders the popup into document.body, outside StyledWrapper's subtree.
-export const PopupWrapper = styled.div`
-  width: 360px;
-  background: ${(props) => props.theme.bg};
-  border: 1px solid ${(props) => props.theme.input.border};
-  border-radius: ${(props) => props.theme.border.radius.md};
-  overflow: hidden;
-
-  .popup-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 8px 10px;
-    border-bottom: 1px solid ${(props) => props.theme.input.border};
-  }
-
-  .popup-title {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 11px;
-    font-weight: 600;
-    color: ${(props) => props.theme.text};
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-
-    svg {
-      color: ${(props) => props.theme.colors.accent};
-    }
-  }
-
-  .popup-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: none;
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    transition: background-color 0.15s ease, color 0.15s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.input.bg};
-      color: ${(props) => props.theme.text};
-    }
-  }
-
-  .popup-body {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .popup-input {
-    width: 100%;
-    padding: 8px 10px;
-    font-size: 12px;
-    font-family: inherit;
-    line-height: 1.4;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid ${(props) => props.theme.input.border};
-    background: ${(props) => props.theme.input.bg};
-    color: ${(props) => props.theme.text};
-    resize: vertical;
-    outline: none;
-    transition: border-color 0.15s ease;
-
-    &::placeholder {
-      color: ${(props) => props.theme.colors.text.muted};
-      opacity: 0.85;
-    }
-
-    &:focus {
-      border-color: ${(props) => props.theme.input.focusBorder};
-    }
-
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-  }
-
-  .popup-suggestions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .suggestion-chip {
-    padding: 3px 8px;
-    font-size: 11px;
-    border: 1px solid ${(props) => props.theme.input.border};
-    border-radius: 999px;
-    background: ${(props) => props.theme.input.bg};
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
-
-    &:hover:not(:disabled) {
-      color: ${(props) => props.theme.text};
-      border-color: ${(props) => props.theme.colors.accent}80;
-      background: ${(props) => props.theme.colors.accent}10;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .popup-error {
-    padding: 6px 8px;
-    font-size: 11px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    color: ${(props) => props.theme.colors.text.danger};
-    background: ${(props) => props.theme.colors.bg.danger}15;
-  }
-
-  .popup-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 8px 10px;
-    border-top: 1px solid ${(props) => props.theme.input.border};
-  }
-
-  .popup-hint {
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .popup-loading {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .loading-spinner {
-    width: 12px;
-    height: 12px;
-    border: 2px solid ${(props) => props.theme.input.border};
-    border-top-color: ${(props) => props.theme.colors.accent};
-    border-radius: 50%;
-    animation: ai-assist-spin 0.7s linear infinite;
-  }
-
-  @keyframes ai-assist-spin {
-    to { transform: rotate(360deg); }
-  }
-
-  .btn-generate {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 12px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid ${(props) => props.theme.colors.accent};
-    background: ${(props) => props.theme.colors.accent};
-    color: white;
-    cursor: pointer;
-    transition: opacity 0.15s ease;
-
-    &:hover:not(:disabled) {
-      opacity: 0.88;
-    }
-
-    &:disabled {
-      opacity: 0.45;
-      cursor: not-allowed;
-    }
-  }
-
-  .btn-stop {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 5px 12px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid ${(props) => props.theme.input.border};
-    background: ${(props) => props.theme.input.bg};
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease;
-
-    &:hover {
-      border-color: ${(props) => props.theme.colors.text.danger};
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .btn-secondary {
-    padding: 5px 12px;
-    font-size: 12px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid ${(props) => props.theme.input.border};
-    background: transparent;
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-
-    &:hover:not(:disabled) {
-      background: ${(props) => props.theme.input.bg};
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .preview-section {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .preview-label {
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .preview-code {
-    max-height: 220px;
-    overflow: auto;
-    padding: 8px 10px;
-    font-family: ${(props) => props.theme.font.monospace || 'monospace'};
-    font-size: 11.5px;
-    line-height: 1.5;
-    color: ${(props) => props.theme.text};
-    background: ${(props) => props.theme.input.bg};
-    border: 1px solid ${(props) => props.theme.input.border};
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    white-space: pre;
-  }
-
-  .preview-modes {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .preview-mode-btn {
-    padding: 2px 6px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid transparent;
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    font-size: 11px;
-
-    &.active {
-      color: ${(props) => props.theme.text};
-      border-color: ${(props) => props.theme.input.border};
-      background: ${(props) => props.theme.input.bg};
-    }
-
-    &:hover:not(.active) {
-      color: ${(props) => props.theme.text};
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,302 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import get from 'lodash/get';
-import Tippy from '@tippyjs/react';
-import { IconStars, IconX, IconArrowBackUp, IconPlayerStop } from '@tabler/icons';
-import { aiGenerateScript, stopAiGeneration } from 'utils/ai';
-import StyledWrapper, { PopupWrapper } from './StyledWrapper';
-
-const SUGGESTIONS = {
-  'tests': [
-    { label: 'Status 200', prompt: 'Add a test asserting the response status code is 200' },
-    { label: 'JSON body', prompt: 'Add tests validating the JSON response body structure and key fields' },
-    { label: 'Headers', prompt: 'Add a test checking the content-type response header' },
-    { label: 'Response time', prompt: 'Add a test asserting the response time is below 1000ms' }
-  ],
-  'pre-request': [
-    { label: 'Auth header', prompt: 'Set an Authorization header from an environment token variable' },
-    { label: 'Timestamp', prompt: 'Set a variable named "timestamp" containing the current epoch ms' },
-    { label: 'Random ID', prompt: 'Set a variable named "requestId" containing a random UUID-style id' }
-  ],
-  'post-response': [
-    { label: 'Save token', prompt: 'Extract a token from the response body and save it to an environment variable' },
-    { label: 'Save id', prompt: 'Extract the primary id from the response body and save it to a variable' },
-    { label: 'Log response', prompt: 'Log the response status and a short summary of the body' }
-  ],
-  'docs': [
-    { label: 'Overview', prompt: 'Write an overview section describing the purpose and key features' },
-    { label: 'Request', prompt: 'Document the request method, URL, headers, parameters, and body' },
-    { label: 'Examples', prompt: 'Add request and response examples with sample JSON' },
-    { label: 'Errors', prompt: 'Document common error responses and status codes' }
-  ],
-  'app-request': [
-    { label: 'Send button', prompt: 'Add a button that calls ctx.sendRequest() and displays the response status, headers, and pretty-printed body' },
-    { label: 'Form for body', prompt: 'Build a form whose fields override the request body, then send it with ctx.sendRequest({ variables }) and show the result' },
-    { label: 'Response viewer', prompt: 'Render ctx.response with collapsible JSON and a banner showing status and response time; update on ctx.onResponseUpdate' },
-    { label: 'Test results', prompt: 'List ctx.testResults and ctx.assertionResults with pass/fail badges; refresh on ctx.onResultsUpdate' }
-  ],
-  'app-collection': [
-    { label: 'Request list', prompt: 'List all requests from ctx.listRequests() with their method and url, and a Run button next to each that calls ctx.runRequest(pathname)' },
-    { label: 'Dashboard', prompt: 'Build a small dashboard that runs every request from ctx.listRequests() on load and shows status code, response time, and a pass/fail dot for each' },
-    { label: 'Form runner', prompt: 'Render a form, and on submit call ctx.runRequest(pathname, { variables }) for a chosen request and display the response' },
-    { label: 'Variables panel', prompt: 'Show ctx.variables in a table and allow editing values via ctx.setRuntimeVariable(key, value); react to ctx.onVariablesUpdate' }
-  ]
-};
-
-const TITLES = {
-  'tests': 'Generate Tests',
-  'pre-request': 'Generate Pre-Request Script',
-  'post-response': 'Generate Post-Response Script',
-  'docs': 'Generate Documentation',
-  'app-request': 'Generate App',
-  'app-collection': 'Generate App'
-};
-
-const PREVIEW_LABELS = {
-  'docs': 'Preview · replaces current documentation',
-  'app-request': 'Preview · replaces current app',
-  'app-collection': 'Preview · replaces current app'
-};
-
-const isValidType = (t) => SUGGESTIONS[t] !== undefined;
-
-const AIAssist = ({ scriptType, currentScript, requestContext, docsContext, variables, onApply }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [prompt, setPrompt] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [generated, setGenerated] = useState(null);
-  const streamIdRef = useRef(null);
-  const tippyRef = useRef(null);
-
-  // Focus the prompt textarea when coming back from preview
-  useEffect(() => {
-    if (isOpen && generated == null) {
-      tippyRef.current?.popper?.querySelector('.popup-input')?.focus();
-    }
-  }, [isOpen, generated]);
-
-  // handle Escape key to close the popup
-  useEffect(() => {
-    if (!isOpen) return;
-    const onKeyDown = (e) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation();
-        tippyRef.current?.hide();
-      }
-    };
-    document.addEventListener('keydown', onKeyDown, true);
-    return () => document.removeEventListener('keydown', onKeyDown, true);
-  }, [isOpen]);
-
-  const preferences = useSelector((state) => state.app.preferences);
-  const isAiEnabled = get(preferences, 'ai.enabled', false);
-
-  const suggestions = useMemo(() => SUGGESTIONS[scriptType] || [], [scriptType]);
-  const title = TITLES[scriptType] || 'Generate with AI';
-  const previewLabel = PREVIEW_LABELS[scriptType] || 'Preview · replaces current script';
-
-  const close = useCallback(() => {
-    tippyRef.current?.hide();
-  }, []);
-
-  const handleGenerate = useCallback(
-    async (overridePrompt) => {
-      const text = (overridePrompt ?? prompt).trim();
-      if (!text || isLoading) return;
-      setIsLoading(true);
-      setError(null);
-
-      const streamId = `sparkle-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-      streamIdRef.current = streamId;
-
-      try {
-        const result = await aiGenerateScript({
-          scriptType,
-          prompt: text,
-          currentScript: currentScript || '',
-          requestContext,
-          docsContext,
-          variables,
-          streamId
-        });
-        if (result?.stopped) {
-          return;
-        }
-        if (result?.error) {
-          setError(result.error);
-          return;
-        }
-        if (result?.content) {
-          setGenerated(result.content);
-        } else {
-          setError('No content was generated. Try rephrasing your prompt.');
-        }
-      } catch (err) {
-        setError(err?.message || 'Failed to generate script');
-      } finally {
-        streamIdRef.current = null;
-        setIsLoading(false);
-      }
-    },
-    [prompt, isLoading, scriptType, currentScript, requestContext, docsContext, variables]
-  );
-
-  const handleStop = useCallback(() => {
-    if (streamIdRef.current) {
-      stopAiGeneration(streamIdRef.current);
-    }
-  }, []);
-
-  const handleApply = useCallback(() => {
-    if (generated == null) return;
-    onApply(generated);
-    setGenerated(null);
-    setPrompt('');
-    close();
-  }, [generated, onApply, close]);
-
-  const handleBackToPrompt = useCallback(() => {
-    setGenerated(null);
-    setError(null);
-  }, []);
-
-  if (!isAiEnabled || !isValidType(scriptType)) return null;
-
-  return (
-    <StyledWrapper>
-      <Tippy
-        interactive
-        trigger="click"
-        placement="bottom-end"
-        arrow={false}
-        animation={false}
-        maxWidth="none"
-        appendTo={() => document.body}
-        onCreate={(instance) => (tippyRef.current = instance)}
-        onShow={(instance) => {
-          setIsOpen(true);
-          // rAF so the popup content is in the DOM
-          requestAnimationFrame(() => instance.popper?.querySelector('.popup-input')?.focus());
-        }}
-        onHide={() => {
-          setIsOpen(false);
-          setError(null);
-        }}
-        render={(attrs) => (
-          <PopupWrapper className="ai-assist-popup" role="dialog" aria-label={title} tabIndex={-1} {...attrs}>
-            <div className="popup-header">
-              <span className="popup-title">
-                <IconStars size={12} strokeWidth={1.75} />
-                {title}
-              </span>
-              <button className="popup-close" onClick={close} type="button" aria-label="Close">
-                <IconX size={14} />
-              </button>
-            </div>
-
-            {generated == null ? (
-              <>
-                <div className="popup-body">
-                  <textarea
-                    className="popup-input"
-                    value={prompt}
-                    onChange={(e) => setPrompt(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        handleGenerate();
-                      }
-                    }}
-                    placeholder="Describe what you want to generate..."
-                    rows={3}
-                    disabled={isLoading}
-                  />
-
-                  {!isLoading && !prompt && suggestions.length > 0 && (
-                    <div className="popup-suggestions">
-                      {suggestions.map((s) => (
-                        <button
-                          key={s.label}
-                          className="suggestion-chip"
-                          type="button"
-                          onClick={() => handleGenerate(s.prompt)}
-                          disabled={isLoading}
-                        >
-                          {s.label}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-
-                  {error && <div className="popup-error">{error}</div>}
-                </div>
-
-                <div className="popup-footer">
-                  {isLoading ? (
-                    <span className="popup-loading">
-                      <span className="loading-spinner" />
-                      Generating...
-                    </span>
-                  ) : (
-                    <span className="popup-hint">Enter to generate · Shift+Enter for newline</span>
-                  )}
-                  {isLoading ? (
-                    <button
-                      className="btn-stop"
-                      type="button"
-                      onClick={handleStop}
-                      title="Stop generating"
-                    >
-                      <IconPlayerStop size={12} /> Stop
-                    </button>
-                  ) : (
-                    <button
-                      className="btn-generate"
-                      type="button"
-                      onClick={() => handleGenerate()}
-                      disabled={!prompt.trim()}
-                    >
-                      Generate
-                    </button>
-                  )}
-                </div>
-              </>
-            ) : (
-              <>
-                <div className="popup-body">
-                  <div className="preview-section">
-                    <span className="preview-label">{previewLabel}</span>
-                    <pre className="preview-code">{generated}</pre>
-                  </div>
-                </div>
-
-                <div className="popup-footer">
-                  <button className="btn-secondary" type="button" onClick={handleBackToPrompt}>
-                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-                      <IconArrowBackUp size={12} /> Back
-                    </span>
-                  </button>
-                  <button className="btn-generate" type="button" onClick={handleApply}>
-                    Apply
-                  </button>
-                </div>
-              </>
-            )}
-          </PopupWrapper>
-        )}
-      >
-        <button
-          className={`ai-assist-trigger ${isOpen ? 'open' : ''}`}
-          title={title}
-          type="button"
-          aria-label={title}
-        >
-          <IconStars size={14} strokeWidth={1.75} />
-        </button>
-      </Tippy>
-    </StyledWrapper>
-  );
-};
-
-export default AIAssist;

packages/bruno-app/src/components/AIAssist/index.spec.js

@@ -1,404 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import { ThemeProvider } from 'styled-components';
-import { aiGenerateScript, stopAiGeneration } from 'utils/ai';
-import AIAssist from './index';
-
-jest.mock('utils/ai', () => ({
-  aiGenerateScript: jest.fn(),
-  stopAiGeneration: jest.fn()
-}));
-
-const theme = {
-  bg: '#1e1e1e',
-  text: '#ffffff',
-  border: { radius: { sm: '4px', md: '6px' } },
-  colors: {
-    accent: '#6366f1',
-    text: { muted: '#9ca3af', danger: '#ef4444' },
-    bg: { danger: '#ef4444' }
-  },
-  input: {
-    border: '#374151',
-    bg: '#111827',
-    focusBorder: '#6366f1'
-  },
-  font: { monospace: 'monospace' }
-};
-
-const createStore = (aiEnabled = true) => configureStore({
-  reducer: {
-    app: (state = { preferences: { ai: { enabled: aiEnabled } } }) => state
-  }
-});
-
-const defaultProps = {
-  scriptType: 'tests',
-  currentScript: 'test("ok", () => {});',
-  onApply: jest.fn()
-};
-
-const renderAIAssist = ({
-  props = {},
-  aiEnabled = true
-} = {}) => {
-  const mergedProps = { ...defaultProps, ...props };
-  return render(
-    <Provider store={createStore(aiEnabled)}>
-      <ThemeProvider theme={theme}>
-        <AIAssist {...mergedProps} />
-      </ThemeProvider>
-    </Provider>
-  );
-};
-
-const openPopup = () => {
-  fireEvent.click(screen.getByRole('button', { name: 'Generate Tests' }));
-};
-
-describe('AIAssist', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    aiGenerateScript.mockResolvedValue({ content: 'test("generated", () => {});' });
-  });
-
-  describe('visibility', () => {
-    it('renders nothing when AI is disabled', () => {
-      const { container } = renderAIAssist({ aiEnabled: false });
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('renders nothing for an unsupported script type', () => {
-      const { container } = renderAIAssist({ props: { scriptType: 'unknown-type' } });
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('renders the trigger when AI is enabled and the script type is supported', () => {
-      renderAIAssist();
-      expect(screen.getByRole('button', { name: 'Generate Tests' })).toBeInTheDocument();
-    });
-  });
-
-  describe('titles', () => {
-    it.each([
-      ['tests', 'Generate Tests'],
-      ['pre-request', 'Generate Pre-Request Script'],
-      ['post-response', 'Generate Post-Response Script'],
-      ['docs', 'Generate Documentation']
-    ])('uses the correct title for %s', (scriptType, title) => {
-      renderAIAssist({ props: { scriptType } });
-      expect(screen.getByRole('button', { name: title })).toBeInTheDocument();
-    });
-  });
-
-  describe('popup interactions', () => {
-    it('opens and closes the popup from the trigger and close button', () => {
-      renderAIAssist();
-      openPopup();
-
-      expect(screen.getByRole('dialog', { name: 'Generate Tests' })).toBeInTheDocument();
-
-      fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-      expect(screen.queryByRole('dialog', { name: 'Generate Tests' })).not.toBeInTheDocument();
-    });
-
-    it('renders the popup into document.body as a portal', () => {
-      renderAIAssist();
-      openPopup();
-      const dialog = screen.getByRole('dialog', { name: 'Generate Tests' });
-      const tippyRoot = dialog.closest('[data-tippy-root]');
-      expect(tippyRoot).not.toBeNull();
-      expect(tippyRoot.parentElement).toBe(document.body);
-    });
-
-    it('closes the popup when Escape is pressed', () => {
-      renderAIAssist();
-      openPopup();
-
-      fireEvent.keyDown(document, { key: 'Escape' });
-      expect(screen.queryByRole('dialog', { name: 'Generate Tests' })).not.toBeInTheDocument();
-    });
-
-    it('closes the popup when clicking outside', () => {
-      renderAIAssist();
-      openPopup();
-
-      fireEvent.mouseDown(document.body);
-      expect(screen.queryByRole('dialog', { name: 'Generate Tests' })).not.toBeInTheDocument();
-    });
-  });
-
-  describe('prompt view', () => {
-    it('shows suggestion chips when the prompt is empty', () => {
-      renderAIAssist();
-      openPopup();
-
-      expect(screen.getByRole('button', { name: 'Status 200' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'JSON body' })).toBeInTheDocument();
-    });
-
-    it('shows docs suggestions for the docs script type', () => {
-      renderAIAssist({ props: { scriptType: 'docs', currentScript: '# Overview' } });
-      fireEvent.click(screen.getByRole('button', { name: 'Generate Documentation' }));
-
-      expect(screen.getByRole('button', { name: 'Overview' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Request' })).toBeInTheDocument();
-    });
-
-    it('hides suggestions once the user starts typing', () => {
-      renderAIAssist();
-      openPopup();
-
-      fireEvent.change(screen.getByPlaceholderText('Describe what you want to generate...'), {
-        target: { value: 'Add a status test' }
-      });
-
-      expect(screen.queryByRole('button', { name: 'Status 200' })).not.toBeInTheDocument();
-    });
-
-    it('keeps Generate disabled until the prompt has text', () => {
-      renderAIAssist();
-      openPopup();
-
-      expect(screen.getByRole('button', { name: 'Generate' })).toBeDisabled();
-
-      fireEvent.change(screen.getByPlaceholderText('Describe what you want to generate...'), {
-        target: { value: 'Add a status test' }
-      });
-
-      expect(screen.getByRole('button', { name: 'Generate' })).toBeEnabled();
-    });
-  });
-
-  describe('generation flow', () => {
-    it('generates from a suggestion chip', async () => {
-      renderAIAssist();
-      openPopup();
-
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      await waitFor(() => {
-        expect(aiGenerateScript).toHaveBeenCalledWith(expect.objectContaining({
-          scriptType: 'tests',
-          prompt: 'Add a test asserting the response status code is 200',
-          currentScript: 'test("ok", () => {});',
-          requestContext: undefined,
-          streamId: expect.any(String)
-        }));
-      });
-
-      expect(screen.getByText('test("generated", () => {});')).toBeInTheDocument();
-    });
-
-    it('passes docs context for folder and collection documentation', async () => {
-      const docsContext = {
-        scope: 'folder',
-        name: 'Users',
-        collectionName: 'Pet Store API',
-        folders: [{ name: 'Admin', requestCount: 1, subfolderCount: 0 }],
-        requests: [{ name: 'List Users', method: 'GET', url: '{{base}}/users' }]
-      };
-
-      renderAIAssist({ props: { scriptType: 'docs', currentScript: '', docsContext } });
-      fireEvent.click(screen.getByRole('button', { name: 'Generate Documentation' }));
-      fireEvent.click(screen.getByRole('button', { name: 'Overview' }));
-
-      await waitFor(() => {
-        expect(aiGenerateScript).toHaveBeenCalledWith(expect.objectContaining({
-          scriptType: 'docs',
-          prompt: 'Write an overview section describing the purpose and key features',
-          currentScript: '',
-          requestContext: undefined,
-          docsContext
-        }));
-      });
-    });
-
-    it('generates from the prompt input and passes request context', async () => {
-      const requestContext = {
-        method: 'GET',
-        url: 'https://api.example.com/users',
-        headers: [],
-        params: [],
-        body: null
-      };
-
-      renderAIAssist({ props: { requestContext } });
-      openPopup();
-
-      fireEvent.change(screen.getByPlaceholderText('Describe what you want to generate...'), {
-        target: { value: 'Add auth header test' }
-      });
-      fireEvent.click(screen.getByRole('button', { name: 'Generate' }));
-
-      await waitFor(() => {
-        expect(aiGenerateScript).toHaveBeenCalledWith(expect.objectContaining({
-          scriptType: 'tests',
-          prompt: 'Add auth header test',
-          currentScript: 'test("ok", () => {});',
-          requestContext
-        }));
-      });
-    });
-
-    it('generates when pressing Enter', async () => {
-      renderAIAssist();
-      openPopup();
-
-      const textarea = screen.getByPlaceholderText('Describe what you want to generate...');
-      fireEvent.change(textarea, { target: { value: 'Add response time test' } });
-      fireEvent.keyDown(textarea, { key: 'Enter' });
-
-      await waitFor(() => {
-        expect(aiGenerateScript).toHaveBeenCalledWith(expect.objectContaining({
-          scriptType: 'tests',
-          prompt: 'Add response time test',
-          currentScript: 'test("ok", () => {});',
-          requestContext: undefined
-        }));
-      });
-    });
-
-    it('does not generate when pressing Shift+Enter (allows newline)', () => {
-      renderAIAssist();
-      openPopup();
-
-      const textarea = screen.getByPlaceholderText('Describe what you want to generate...');
-      fireEvent.change(textarea, { target: { value: 'Add response time test' } });
-      fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true });
-
-      expect(aiGenerateScript).not.toHaveBeenCalled();
-    });
-
-    it('shows a loading state while generation is in progress', async () => {
-      let resolveGenerate;
-      aiGenerateScript.mockImplementation(() => new Promise((resolve) => {
-        resolveGenerate = resolve;
-      }));
-
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      expect(screen.getByText('Generating...')).toBeInTheDocument();
-
-      resolveGenerate({ content: 'test("done", () => {});' });
-
-      await waitFor(() => {
-        expect(screen.getByText('test("done", () => {});')).toBeInTheDocument();
-      });
-    });
-
-    it('shows a Stop button during generation and cancels via streamId', async () => {
-      let resolveGenerate;
-      aiGenerateScript.mockImplementation(() => new Promise((resolve) => {
-        resolveGenerate = resolve;
-      }));
-
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      const stopButton = await screen.findByRole('button', { name: /stop/i });
-      expect(stopButton).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Generate' })).not.toBeInTheDocument();
-
-      const passedStreamId = aiGenerateScript.mock.calls[0][0].streamId;
-      expect(passedStreamId).toEqual(expect.any(String));
-
-      fireEvent.click(stopButton);
-      expect(stopAiGeneration).toHaveBeenCalledWith(passedStreamId);
-
-      resolveGenerate({ stopped: true });
-
-      await waitFor(() => {
-        expect(screen.queryByRole('button', { name: /stop/i })).not.toBeInTheDocument();
-      });
-      expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Generate' })).toBeInTheDocument();
-    });
-
-    it('shows an API error without entering preview mode', async () => {
-      aiGenerateScript.mockResolvedValue({ error: 'Provider unavailable' });
-
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('Provider unavailable')).toBeInTheDocument();
-      });
-      expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument();
-    });
-
-    it('shows a fallback error when no content is returned', async () => {
-      aiGenerateScript.mockResolvedValue({});
-
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('No content was generated. Try rephrasing your prompt.')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('preview and apply', () => {
-    const showPreview = async () => {
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument();
-      });
-    };
-
-    it('uses the script preview label for script types', async () => {
-      await showPreview();
-      expect(screen.getByText('Preview · replaces current script')).toBeInTheDocument();
-    });
-
-    it('uses the documentation preview label for docs', async () => {
-      aiGenerateScript.mockResolvedValue({ content: '# API Docs' });
-
-      renderAIAssist({ props: { scriptType: 'docs', currentScript: '# Existing' } });
-      fireEvent.click(screen.getByRole('button', { name: 'Generate Documentation' }));
-      fireEvent.click(screen.getByRole('button', { name: 'Overview' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('Preview · replaces current documentation')).toBeInTheDocument();
-      });
-      expect(screen.getByText('# API Docs')).toBeInTheDocument();
-    });
-
-    it('applies generated content and closes the popup', async () => {
-      const onApply = jest.fn();
-      renderAIAssist({ props: { onApply } });
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-
-      expect(onApply).toHaveBeenCalledWith('test("generated", () => {});');
-      expect(screen.queryByRole('dialog', { name: 'Generate Tests' })).not.toBeInTheDocument();
-    });
-
-    it('returns to the prompt view when Back is clicked', async () => {
-      await showPreview();
-
-      fireEvent.click(screen.getByRole('button', { name: 'Back' }));
-
-      expect(screen.getByPlaceholderText('Describe what you want to generate...')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Status 200' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument();
-    });
-  });
-});

packages/bruno-app/src/components/AiChatSidebar/AssistantCodeBlock.js

@@ -1,46 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import { IconCopy, IconCheck } from '@tabler/icons';
-
-const AssistantCodeBlock = ({ content, language, isOpen, isStreaming, isLast }) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const preRef = useRef(null);
-
-  useEffect(() => {
-    if (isStreaming && isOpen && preRef.current) {
-      preRef.current.scrollTop = preRef.current.scrollHeight;
-    }
-  }, [content, isStreaming, isOpen]);
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(content);
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
-    }
-  };
-
-  return (
-    <div className="assistant-code-block">
-      <div className="assistant-code-block__header">
-        <div className="assistant-code-block__meta">
-          <span className="assistant-code-block__lang">{language || 'code'}</span>
-          {isOpen && <span className="assistant-code-block__spinner" />}
-        </div>
-        <button className="assistant-code-block__btn" onClick={handleCopy} title="Copy">
-          {isCopied ? <IconCheck size={12} /> : <IconCopy size={12} />}
-          {isCopied ? 'Copied' : 'Copy'}
-        </button>
-      </div>
-      <pre ref={preRef} className="assistant-code-block__body">
-        <code className={`language-${language || 'text'}`}>
-          {content}
-          {isStreaming && isLast && <span className="cursor">|</span>}
-        </code>
-      </pre>
-    </div>
-  );
-};
-
-export default AssistantCodeBlock;

packages/bruno-app/src/components/AiChatSidebar/DiffView/StyledWrapper.js

@@ -1,298 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  margin-top: 8px;
-  border-radius: ${(props) => props.theme.border.radius.base};
-  overflow: hidden;
-  border: 1px solid ${(props) => props.theme.border.border1};
-  background: ${(props) => props.theme.codemirror.bg};
-
-  &.accepted {
-    border-color: ${(props) => props.theme.colors.text.green};
-  }
-
-  &.rejected {
-    opacity: 0.5;
-  }
-
-  .diff-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 6px 10px;
-    background: ${(props) => props.theme.background.mantle};
-    border-bottom: 1px solid ${(props) => props.theme.border.border1};
-    gap: 8px;
-    flex-wrap: nowrap;
-  }
-
-  .diff-title {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    font-weight: 500;
-    color: ${(props) => props.theme.colors.text.muted};
-    flex-shrink: 0;
-
-    .diff-icon {
-      color: ${(props) => props.theme.brand};
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .diff-content-type {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    padding: 1px 6px;
-    border-radius: 3px;
-    background: ${(props) => props.theme.background.surface0};
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .diff-stats {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    font-weight: 500;
-
-    .stat {
-      padding: 1px 5px;
-      border-radius: 4px;
-    }
-    .additions {
-      background: ${(props) => props.theme.status.success.background};
-      color: ${(props) => props.theme.colors.text.green};
-    }
-    .deletions {
-      background: ${(props) => props.theme.status.danger.background};
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .diff-actions {
-    display: flex;
-    gap: 6px;
-    flex-shrink: 0;
-    margin-left: auto;
-  }
-
-  .diff-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 4px 8px;
-    font-size: 11px;
-    font-weight: 500;
-    border: 1px solid transparent;
-    border-radius: ${(props) => props.theme.border.radius.base};
-    cursor: pointer;
-    white-space: nowrap;
-
-    &.accept {
-      background: ${(props) => props.theme.brand};
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-
-      &:hover:not(:disabled) {
-        opacity: 0.9;
-      }
-
-      &:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-    }
-
-    &.reject {
-      background: transparent;
-      color: ${(props) => props.theme.colors.text.muted};
-      border-color: ${(props) => props.theme.border.border1};
-
-      &:hover {
-        background: ${(props) => props.theme.status.danger.background};
-        color: ${(props) => props.theme.colors.text.danger};
-        border-color: ${(props) => props.theme.status.danger.background};
-      }
-    }
-  }
-
-  .status-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
-    font-size: 11px;
-    border-radius: ${(props) => props.theme.border.radius.base};
-    font-weight: 500;
-
-    &.accepted {
-      background: ${(props) => props.theme.status.success.background};
-      color: ${(props) => props.theme.colors.text.green};
-    }
-
-    &.rejected {
-      background: ${(props) => props.theme.status.danger.background};
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .diff-warning {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 10px;
-    font-size: 11px;
-    border-bottom: 1px solid ${(props) => props.theme.border.border1};
-
-    &.warn {
-      background: ${(props) => props.theme.status.warning.background};
-      color: ${(props) => props.theme.status.warning.text};
-    }
-
-    &.error {
-      background: ${(props) => props.theme.status.danger.background};
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .diff-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 4px 8px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-    background: transparent;
-    border: none;
-    border-top: 1px solid ${(props) => props.theme.border.border1};
-    cursor: pointer;
-    width: 100%;
-
-    &:hover {
-      background: ${(props) => props.theme.background.surface0};
-      color: ${(props) => props.theme.text};
-    }
-  }
-
-  .diff-content {
-    max-height: 300px;
-    overflow: auto;
-    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-    font-size: 11px;
-    line-height: 1.5;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: ${(props) => props.theme.border.border1};
-      border-radius: 2px;
-    }
-  }
-
-  .diff-line {
-    padding: 0 8px 0 4px;
-    white-space: pre;
-    display: flex;
-    min-height: 18px;
-    line-height: 18px;
-
-    .line-number {
-      width: 24px;
-      text-align: right;
-      padding-right: 8px;
-      color: ${(props) => props.theme.colors.text.muted};
-      user-select: none;
-      flex-shrink: 0;
-      opacity: 0.5;
-    }
-
-    .line-prefix {
-      width: 12px;
-      flex-shrink: 0;
-    }
-
-    .line-content {
-      flex: 1;
-      overflow-x: auto;
-    }
-
-    &.added {
-      background: ${(props) => props.theme.status.success.background};
-      .line-content { color: ${(props) => props.theme.colors.text.green}; }
-      .line-prefix { color: ${(props) => props.theme.colors.text.green}; font-weight: 600; }
-    }
-
-    &.removed {
-      background: ${(props) => props.theme.status.danger.background};
-      .line-content { color: ${(props) => props.theme.colors.text.danger}; }
-      .line-prefix { color: ${(props) => props.theme.colors.text.danger}; font-weight: 600; }
-    }
-
-    &.unchanged {
-      .line-content { color: ${(props) => props.theme.colors.text.muted}; }
-      .line-prefix { opacity: 0; }
-    }
-  }
-
-  .expand-marker {
-    display: flex;
-    align-items: center;
-    padding: 0 8px 0 4px;
-    min-height: 22px;
-    background: ${(props) => props.theme.background.mantle};
-
-    .expand-gutter {
-      width: 24px;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      padding-right: 4px;
-    }
-
-    .expand-buttons {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-    }
-
-    .expand-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 11px;
-      padding: 0;
-      background: transparent;
-      border: none;
-      color: ${(props) => props.theme.colors.text.muted};
-      cursor: pointer;
-      opacity: 0.6;
-
-      &:hover {
-        color: ${(props) => props.theme.text};
-        opacity: 1;
-      }
-    }
-
-    .expand-line {
-      flex: 1;
-      height: 1px;
-      background: ${(props) => props.theme.border.border1};
-      margin-left: 8px;
-    }
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/AiChatSidebar/DiffView/index.js

@@ -1,210 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { diffLines } from 'diff';
-import { IconCheck, IconX, IconCode, IconChevronDown, IconChevronUp } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-
-const CONTEXT_LINES = 2;
-const EXPAND_CHUNK_SIZE = 20;
-
-const DiffView = ({ originalCode, newCode, onAccept, onReject, status, contentTypeLabel, warning, disableAccept }) => {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [expandedFromTop, setExpandedFromTop] = useState({});
-  const [expandedFromBottom, setExpandedFromBottom] = useState({});
-
-  const diffResult = useMemo(() => {
-    const changes = diffLines(originalCode || '', newCode || '');
-    let additions = 0;
-    let deletions = 0;
-    let lineNumber = 1;
-
-    const lines = changes.flatMap((part) => {
-      const partLines = part.value.split('\n');
-      if (partLines[partLines.length - 1] === '') partLines.pop();
-
-      return partLines.map((line) => {
-        const entry = { content: line, lineNumber: null };
-        if (part.added) {
-          additions += 1;
-          entry.type = 'added';
-          entry.lineNumber = lineNumber++;
-        } else if (part.removed) {
-          deletions += 1;
-          entry.type = 'removed';
-        } else {
-          entry.type = 'unchanged';
-          entry.lineNumber = lineNumber++;
-        }
-        return entry;
-      });
-    });
-
-    return { lines, additions, deletions };
-  }, [originalCode, newCode]);
-
-  const hunks = useMemo(() => {
-    const { lines } = diffResult;
-    if (lines.length === 0) return [];
-
-    const changedIndices = new Set();
-    lines.forEach((line, idx) => {
-      if (line.type === 'added' || line.type === 'removed') changedIndices.add(idx);
-    });
-
-    const visibleIndices = new Set();
-    changedIndices.forEach((idx) => {
-      for (let i = Math.max(0, idx - CONTEXT_LINES); i <= Math.min(lines.length - 1, idx + CONTEXT_LINES); i++) {
-        visibleIndices.add(i);
-      }
-    });
-
-    const result = [];
-    let i = 0;
-    while (i < lines.length) {
-      if (visibleIndices.has(i)) {
-        result.push({ type: 'line', data: lines[i], index: i });
-        i += 1;
-      } else {
-        const start = i;
-        while (i < lines.length && !visibleIndices.has(i)) i += 1;
-        result.push({
-          type: 'collapsed',
-          startIndex: start,
-          count: i - start,
-          lines: lines.slice(start, i)
-        });
-      }
-    }
-    return result;
-  }, [diffResult]);
-
-  const expandUp = (startIndex, totalLines) => {
-    setExpandedFromTop((prev) => {
-      const current = prev[startIndex] || 0;
-      const bottomExpanded = expandedFromBottom[startIndex] || 0;
-      const remaining = totalLines - current - bottomExpanded;
-      return { ...prev, [startIndex]: Math.min(current + EXPAND_CHUNK_SIZE, current + remaining) };
-    });
-  };
-
-  const expandDown = (startIndex, totalLines) => {
-    setExpandedFromBottom((prev) => {
-      const current = prev[startIndex] || 0;
-      const topExpanded = expandedFromTop[startIndex] || 0;
-      const remaining = totalLines - topExpanded - current;
-      return { ...prev, [startIndex]: Math.min(current + EXPAND_CHUNK_SIZE, current + remaining) };
-    });
-  };
-
-  if (diffResult.additions === 0 && diffResult.deletions === 0) return null;
-
-  const renderActions = () => {
-    if (status === 'accepted') {
-      return (
-        <span className="status-badge accepted">
-          <IconCheck size={12} /> Applied
-        </span>
-      );
-    }
-    if (status === 'rejected') {
-      return (
-        <span className="status-badge rejected">
-          <IconX size={12} /> Dismissed
-        </span>
-      );
-    }
-    return (
-      <div className="diff-actions">
-        <button className="diff-btn reject" onClick={onReject} title="Dismiss changes">
-          <IconX size={12} />
-        </button>
-        <button className="diff-btn accept" onClick={onAccept} title="Apply changes" disabled={disableAccept}>
-          <IconCheck size={12} /> Apply
-        </button>
-      </div>
-    );
-  };
-
-  const renderLine = (line, key) => (
-    <div key={key} className={`diff-line ${line.type}`}>
-      <span className="line-number">{line.type !== 'removed' ? line.lineNumber : ''}</span>
-      <span className="line-prefix">{line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '}</span>
-      <span className="line-content">{line.content || ' '}</span>
-    </div>
-  );
-
-  const renderHunks = () =>
-    hunks.map((hunk, idx) => {
-      if (hunk.type === 'line') return renderLine(hunk.data, `line-${hunk.index}`);
-
-      const topCount = expandedFromTop[hunk.startIndex] || 0;
-      const bottomCount = expandedFromBottom[hunk.startIndex] || 0;
-      const remainingCount = hunk.count - topCount - bottomCount;
-
-      const topLines = hunk.lines.slice(0, topCount);
-      const bottomLines = hunk.lines.slice(hunk.count - bottomCount);
-      const isAtTop = idx === 0;
-      const isAtBottom = idx === hunks.length - 1;
-
-      return (
-        <React.Fragment key={`collapsed-${hunk.startIndex}`}>
-          {topLines.map((line, lineIdx) => renderLine(line, `top-${hunk.startIndex}-${lineIdx}`))}
-
-          {remainingCount > 0 && (
-            <div className="expand-marker">
-              <div className="expand-gutter">
-                <div className="expand-buttons">
-                  {!isAtTop && (
-                    <button className="expand-btn" onClick={() => expandUp(hunk.startIndex, hunk.count)} title="Expand up">
-                      <IconChevronUp size={10} />
-                    </button>
-                  )}
-                  {!isAtBottom && (
-                    <button className="expand-btn" onClick={() => expandDown(hunk.startIndex, hunk.count)} title="Expand down">
-                      <IconChevronDown size={10} />
-                    </button>
-                  )}
-                </div>
-              </div>
-              <div className="expand-line" />
-            </div>
-          )}
-
-          {bottomLines.map((line, lineIdx) => renderLine(line, `bottom-${hunk.startIndex}-${lineIdx}`))}
-        </React.Fragment>
-      );
-    });
-
-  return (
-    <StyledWrapper className={status || ''}>
-      <div className="diff-header">
-        <div className="diff-title">
-          <span className="diff-icon"><IconCode size={12} /></span>
-          {contentTypeLabel && <span className="diff-content-type">{contentTypeLabel}</span>}
-          <div className="diff-stats">
-            <span className="stat additions">+{diffResult.additions}</span>
-            <span className="stat deletions">-{diffResult.deletions}</span>
-          </div>
-        </div>
-        {renderActions()}
-      </div>
-
-      {warning && (
-        <div className={`diff-warning ${disableAccept ? 'error' : 'warn'}`}>
-          {warning}
-        </div>
-      )}
-
-      {isExpanded && <div className="diff-content">{renderHunks()}</div>}
-
-      <button className="diff-toggle" onClick={() => setIsExpanded((v) => !v)}>
-        {isExpanded ? (
-          <><IconChevronUp size={12} /> Hide</>
-        ) : (
-          <><IconChevronDown size={12} /> Show ({diffResult.additions + diffResult.deletions})</>
-        )}
-      </button>
-    </StyledWrapper>
-  );
-};
-
-export default DiffView;

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

@@ -1,831 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  flex-shrink: 0;
-  height: 100%;
-
-  .ai-sidebar {
-    width: 420px;
-    height: 100%;
-    background: ${(props) => props.theme.bg};
-    border-left: 1px solid ${(props) => props.theme.border.border1};
-    display: flex;
-    flex-direction: column;
-  }
-
-  .ai-sidebar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 12px;
-    border-bottom: 1px solid ${(props) => props.theme.border.border1};
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-    }
-
-    .header-icon {
-      color: ${(props) => props.theme.brand};
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-    }
-
-    .header-method {
-      font-size: 9px;
-      font-weight: 600;
-      text-transform: uppercase;
-      padding: 2px 6px;
-      border-radius: 4px;
-      flex-shrink: 0;
-      background: ${(props) => props.theme.background.surface0};
-      display: flex;
-      align-items: center;
-
-      &.method-get { color: ${(props) => props.theme.request.methods.get}; }
-      &.method-post { color: ${(props) => props.theme.request.methods.post}; }
-      &.method-put { color: ${(props) => props.theme.request.methods.put}; }
-      &.method-delete { color: ${(props) => props.theme.request.methods.delete}; }
-      &.method-patch { color: ${(props) => props.theme.request.methods.patch}; }
-      &.method-options { color: ${(props) => props.theme.request.methods.options}; }
-      &.method-head { color: ${(props) => props.theme.request.methods.head}; }
-      &.method-grpc { color: ${(props) => props.theme.request.grpc}; }
-      &.method-ws { color: ${(props) => props.theme.request.ws}; }
-      &.method-gql { color: ${(props) => props.theme.request.gql}; }
-      &.method-app { color: ${(props) => props.theme.brand}; }
-    }
-
-    .header-title {
-      font-size: 13px;
-      color: ${(props) => props.theme.text};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: flex;
-      align-items: center;
-    }
-
-    .chat-switcher-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2px;
-      background: transparent;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      color: ${(props) => props.theme.colors.text.muted};
-      flex-shrink: 0;
-
-      &:hover {
-        background: ${(props) => props.theme.background.surface0};
-        color: ${(props) => props.theme.text};
-      }
-    }
-
-    .header-actions {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-    }
-
-    .history-wrap {
-      position: relative;
-    }
-
-    .icon-btn {
-      position: relative;
-      padding: 6px;
-      background: transparent;
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      color: ${(props) => props.theme.colors.text.muted};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        background: ${(props) => props.theme.background.surface0};
-        color: ${(props) => props.theme.text};
-      }
-
-      &.is-active {
-        background: ${(props) => props.theme.background.surface0};
-        color: ${(props) => props.theme.text};
-      }
-
-      &:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      &.close-btn:hover {
-        background: ${(props) => props.theme.status.danger.background};
-        color: ${(props) => props.theme.colors.text.danger};
-      }
-
-    }
-  }
-
-  .history-popover {
-    position: absolute;
-    top: calc(100% + 6px);
-    right: 0;
-    z-index: 20;
-    width: 300px;
-    max-height: 320px;
-    overflow-y: auto;
-    background: ${(props) => props.theme.bg};
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 8px;
-    box-shadow: ${(props) => props.theme.shadow.md};
-    padding: 4px;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: ${(props) => props.theme.scrollbar.color};
-      border-radius: 2px;
-    }
-
-    &__empty {
-      padding: 16px;
-      text-align: center;
-      font-size: 11px;
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    &__item {
-      display: flex;
-      align-items: stretch;
-      gap: 2px;
-      border-radius: 4px;
-
-      &:hover {
-        background: ${(props) => props.theme.background.surface0};
-      }
-
-      &.is-active {
-        background: ${(props) => props.theme.background.surface0};
-      }
-    }
-
-    &__title {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 2px;
-      padding: 6px 8px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      text-align: left;
-      color: ${(props) => props.theme.text};
-    }
-
-    &__title-text {
-      display: block;
-      width: 100%;
-      font-size: 12px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &__meta {
-      font-size: 10px;
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    &__delete {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 8px;
-      background: transparent;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      color: ${(props) => props.theme.colors.text.muted};
-
-      &:hover {
-        background: ${(props) => props.theme.status.danger.background};
-        color: ${(props) => props.theme.colors.text.danger};
-      }
-    }
-  }
-
-  .ai-sidebar-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: ${(props) => props.theme.scrollbar.color};
-      border-radius: 2px;
-    }
-  }
-
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 24px 16px;
-    animation: fadeIn 0.3s ease;
-
-    .empty-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 10px;
-      background: ${(props) => props.theme.brand};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-      margin-bottom: 12px;
-    }
-
-    h3 {
-      font-size: 14px;
-      font-weight: 600;
-      margin: 0 0 4px 0;
-      color: ${(props) => props.theme.text};
-    }
-
-    > p {
-      color: ${(props) => props.theme.colors.text.muted};
-      font-size: 12px;
-      margin: 0 0 16px 0;
-      line-height: 1.4;
-    }
-
-    .suggestions-title {
-      font-size: 11px;
-      color: ${(props) => props.theme.colors.text.muted};
-      margin: 0 0 8px 0;
-      font-weight: 500;
-    }
-
-    .suggestion-chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      justify-content: center;
-    }
-
-    .suggestion-chip {
-      padding: 5px 10px;
-      background: ${(props) => props.theme.background.surface0};
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: 12px;
-      font-size: 11px;
-      color: ${(props) => props.theme.text};
-      cursor: pointer;
-
-      &:hover {
-        border-color: ${(props) => props.theme.brand};
-        color: ${(props) => props.theme.brand};
-      }
-    }
-  }
-
-  .message {
-    animation: slideIn 0.25s ease;
-
-    &.user .message-content {
-      background: ${(props) => props.theme.background.mantle};
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: 8px;
-      padding: 8px 12px;
-      font-size: 13px;
-      line-height: 1.4;
-      color: ${(props) => props.theme.text};
-    }
-
-    &.assistant .message-content {
-      color: ${(props) => props.theme.text};
-    }
-  }
-
-  .message-status {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    margin-bottom: 6px;
-    color: ${(props) => props.theme.colors.text.muted};
-
-    &__spinner {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      border: 2px solid ${(props) => props.theme.brand};
-      border-top-color: transparent;
-      animation: spin 0.9s linear infinite;
-      flex-shrink: 0;
-    }
-  }
-
-  .tool-activity-log {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    margin: 6px 0;
-    padding: 4px 0;
-
-    &.completed {
-      opacity: 0.7;
-    }
-  }
-
-  .tool-activity-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-    line-height: 1.6;
-    padding: 1px 0;
-
-    .tool-activity-indicator {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 14px;
-      height: 14px;
-      flex-shrink: 0;
-    }
-
-    &.done .tool-activity-indicator {
-      color: ${(props) => props.theme.colors.text.green};
-    }
-
-    &.active {
-      color: ${(props) => props.theme.text};
-
-      .tool-activity-indicator {
-        color: ${(props) => props.theme.brand};
-      }
-    }
-
-    .tool-activity-spinner {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      border: 1.5px solid ${(props) => props.theme.brand};
-      border-top-color: transparent;
-      animation: spin 0.9s linear infinite;
-      display: block;
-    }
-  }
-
-  .message-cancelled {
-    margin-top: 8px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .assistant-code-block {
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 8px;
-    background: ${(props) => props.theme.codemirror.bg};
-    overflow: hidden;
-    margin: 8px 0;
-
-    &__header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      padding: 6px 8px;
-      border-bottom: 1px solid ${(props) => props.theme.border.border1};
-    }
-
-    &__meta {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 10px;
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    &__lang {
-      text-transform: lowercase;
-    }
-
-    &__spinner {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      border: 2px solid ${(props) => props.theme.brand};
-      border-top-color: transparent;
-      animation: spin 0.9s linear infinite;
-      flex-shrink: 0;
-    }
-
-    &__btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 3px 6px;
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: 4px;
-      background: ${(props) => props.theme.background.mantle};
-      font-size: 10px;
-      font-weight: 500;
-      color: ${(props) => props.theme.text};
-      cursor: pointer;
-
-      &:hover {
-        border-color: ${(props) => props.theme.brand};
-        color: ${(props) => props.theme.brand};
-      }
-    }
-
-    &__body {
-      margin: 0;
-      padding: 10px 12px;
-      overflow: auto;
-      max-height: 240px;
-      font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-      font-size: 11px;
-      line-height: 1.5;
-      white-space: pre;
-    }
-
-    .cursor {
-      display: inline-block;
-      animation: blink 1s infinite;
-      color: ${(props) => props.theme.brand};
-      margin-left: 1px;
-    }
-  }
-
-  .prose.markdown-body {
-    font-size: 13px;
-    line-height: 1.5;
-
-    .cursor {
-      display: inline-block;
-      animation: blink 1s infinite;
-      color: ${(props) => props.theme.brand};
-      margin-left: 1px;
-    }
-
-    p {
-      margin: 0 0 8px 0;
-      font-size: 13px;
-      &:last-child { margin-bottom: 0; }
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-      margin: 10px 0 6px 0;
-      font-weight: 600;
-      line-height: 1.3;
-      &:first-child { margin-top: 0; }
-    }
-
-    h1 { font-size: 1.3em; }
-    h2 { font-size: 1.2em; }
-    h3 { font-size: 1.1em; }
-
-    ul, ol {
-      margin: 6px 0;
-      padding-left: 16px;
-    }
-
-    li {
-      margin: 4px 0;
-      font-size: 13px;
-    }
-
-    code {
-      background: ${(props) => props.theme.codemirror.bg};
-      padding: 2px 5px;
-      border-radius: 4px;
-      font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-      font-size: 0.9em;
-    }
-
-    pre, .code-block {
-      background: ${(props) => props.theme.codemirror.bg};
-      padding: 10px 12px;
-      border-radius: 6px;
-      overflow-x: auto;
-      margin: 8px 0;
-      border: 1px solid ${(props) => props.theme.border.border1};
-
-      code {
-        background: none;
-        padding: 0;
-        font-size: 11px;
-        line-height: 1.5;
-      }
-    }
-
-    blockquote {
-      border-left: 2px solid ${(props) => props.theme.brand};
-      margin: 8px 0;
-      padding: 4px 0 4px 10px;
-      color: ${(props) => props.theme.colors.text.muted};
-      background: ${(props) => props.theme.background.surface0};
-      border-radius: 0 4px 4px 0;
-    }
-
-    a {
-      color: ${(props) => props.theme.textLink};
-      text-decoration: none;
-      &:hover { text-decoration: underline; }
-    }
-
-    strong { font-weight: 600; }
-    em { font-style: italic; }
-
-    hr {
-      border: none;
-      border-top: 1px solid ${(props) => props.theme.border.border1};
-      margin: 10px 0;
-    }
-
-    table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 8px 0;
-      font-size: 12px;
-    }
-
-    th, td {
-      border: 1px solid ${(props) => props.theme.border.border1};
-      padding: 6px 8px;
-      text-align: left;
-    }
-
-    th {
-      background: ${(props) => props.theme.codemirror.bg};
-      font-weight: 600;
-    }
-  }
-
-  .processing-indicator {
-    padding: 8px 10px;
-    background: ${(props) => props.theme.background.surface0};
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 8px;
-    animation: slideIn 0.2s ease;
-
-    .processing-content {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 6px;
-    }
-
-    .processing-icon {
-      width: 20px;
-      height: 20px;
-      border-radius: 4px;
-      background: ${(props) => props.theme.background.surface1};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: ${(props) => props.theme.brand};
-    }
-
-    .processing-label {
-      font-size: 12px;
-      font-weight: 500;
-      color: ${(props) => props.theme.text};
-    }
-
-    .processing-dots {
-      display: flex;
-      gap: 3px;
-      margin-left: 2px;
-
-      span {
-        width: 3px;
-        height: 3px;
-        background: ${(props) => props.theme.brand};
-        border-radius: 50%;
-        animation: dotBounce 1.4s infinite ease-in-out both;
-
-        &:nth-child(1) { animation-delay: -0.32s; }
-        &:nth-child(2) { animation-delay: -0.16s; }
-      }
-    }
-
-    .processing-bar {
-      height: 2px;
-      background: ${(props) => props.theme.border.border1};
-      border-radius: 1px;
-      overflow: hidden;
-
-      .processing-bar-fill {
-        height: 100%;
-        width: 30%;
-        background: ${(props) => props.theme.brand};
-        border-radius: 1px;
-        animation: progressSlide 1.5s infinite ease-in-out;
-      }
-    }
-  }
-
-  .error-message {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    padding: 8px 10px;
-    background: ${(props) => props.theme.status.danger.background};
-    border: 1px solid ${(props) => props.theme.status.danger.border};
-    border-radius: 6px;
-
-    .error-icon {
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      background: ${(props) => props.theme.colors.text.danger};
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
-      font-size: 11px;
-      flex-shrink: 0;
-    }
-
-    .error-text {
-      color: ${(props) => props.theme.colors.text.danger};
-      font-size: 12px;
-      line-height: 1.4;
-    }
-  }
-
-  .ai-sidebar-input {
-    padding: 12px;
-    border-top: 1px solid ${(props) => props.theme.border.border1};
-
-    .no-models-warning {
-      padding: 10px 12px;
-      font-size: 12px;
-      color: ${(props) => props.theme.colors.text.muted};
-      background: ${(props) => props.theme.input.bg};
-      border: 1px dashed ${(props) => props.theme.border.border1};
-      border-radius: 6px;
-      text-align: center;
-      line-height: 1.4;
-    }
-
-    .input-container {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 8px;
-      background: ${(props) => props.theme.bg};
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: 8px;
-
-      &:focus-within {
-        border-color: ${(props) => props.theme.brand};
-      }
-    }
-
-    textarea {
-      width: 100%;
-      padding: 0;
-      margin: 4px 0;
-      border: none;
-      background: transparent;
-      color: ${(props) => props.theme.text};
-      font-size: 13px;
-      font-family: inherit;
-      line-height: 1.4;
-      resize: none;
-      outline: none;
-      max-height: 100px;
-
-      &::placeholder {
-        color: ${(props) => props.theme.colors.text.muted};
-      }
-
-      &:disabled {
-        opacity: 0.6;
-      }
-    }
-
-    .input-actions {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .model-selector {
-      position: relative;
-    }
-
-    .model-btn {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 6px 4px 8px;
-      background: transparent;
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: ${(props) => props.theme.border.radius.base};
-      font-size: 11px;
-      font-weight: 500;
-      color: ${(props) => props.theme.text};
-      cursor: pointer;
-
-      svg:first-child {
-        color: ${(props) => props.theme.brand};
-      }
-
-      &:hover {
-        border-color: ${(props) => props.theme.border.border2};
-      }
-    }
-
-    .send-btn, .stop-btn {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 8px;
-      border: none;
-      border-radius: 4px;
-      font-size: 11px;
-      font-weight: 500;
-      cursor: pointer;
-    }
-
-    .send-btn {
-      background: ${(props) => props.theme.brand};
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-
-      &:hover {
-        opacity: 0.9;
-      }
-
-      &:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-    }
-
-    .stop-btn {
-      background: ${(props) => props.theme.colors.text.danger};
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-  }
-
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes slideIn {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-  }
-
-  @keyframes dotBounce {
-    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-    40% { transform: scale(1); opacity: 1; }
-  }
-
-  @keyframes progressSlide {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(400%); }
-  }
-
-  @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/AiChatSidebar/constants.js

@@ -1,54 +0,0 @@
-export const PROCESSING_STAGES = [
-  { id: 'sending', label: 'Sending request', icon: 'send' },
-  { id: 'thinking', label: 'AI is thinking', icon: 'sparkles' },
-  { id: 'generating', label: 'Generating response', icon: 'wand' },
-  { id: 'applying', label: 'Preparing changes', icon: 'code' }
-];
-
-export const CONTENT_TYPE_LABELS = {
-  'app': 'App',
-  'tests': 'Tests',
-  'pre-request': 'Script',
-  'post-response': 'Script',
-  'docs': 'Docs'
-};
-
-export const SUGGESTIONS_BY_TYPE = {
-  'app': [
-    { label: 'Create a form for this request', prompt: 'Create a simple form to send this request' },
-    { label: 'Add a loading spinner', prompt: 'Add a loading spinner while the request is pending' },
-    { label: 'Show response in a table', prompt: 'Display the response data in a table' },
-    { label: 'Add error handling', prompt: 'Add error handling with user-friendly messages' }
-  ],
-  'tests': [
-    { label: 'Generate basic tests', prompt: 'Generate tests for status code, response body, and headers' },
-    { label: 'Test response structure', prompt: 'Write tests to validate the response body structure and data types' },
-    { label: 'Test error cases', prompt: 'Write tests for common error scenarios' },
-    { label: 'Test response time', prompt: 'Add a test to verify response time is acceptable' }
-  ],
-  'pre-request': [
-    { label: 'Add authentication', prompt: 'Add authorization header from environment variable' },
-    { label: 'Set dynamic variables', prompt: 'Set dynamic request variables like timestamp or unique ID' },
-    { label: 'Conditional logic', prompt: 'Add conditional logic to modify the request based on environment' }
-  ],
-  'post-response': [
-    { label: 'Extract to variables', prompt: 'Extract data from response and save to environment variables' },
-    { label: 'Store auth token', prompt: 'Extract auth token from response and save for future requests' },
-    { label: 'Log response', prompt: 'Log response status and body for debugging' },
-    { label: 'Transform response', prompt: 'Transform and process the response data' }
-  ],
-  'docs': [
-    { label: 'Generate full docs', prompt: 'Generate comprehensive API documentation for this endpoint' },
-    { label: 'Document parameters', prompt: 'Document all request parameters, headers, and body' },
-    { label: 'Add examples', prompt: 'Add request and response examples' },
-    { label: 'Document errors', prompt: 'Document common error responses and status codes' }
-  ]
-};
-
-export const PLACEHOLDER_BY_TYPE = {
-  'tests': { empty: 'Describe the tests you want...', filled: 'Ask to modify or add tests...' },
-  'pre-request': { empty: 'Describe the script you want...', filled: 'Ask to modify the script...' },
-  'post-response': { empty: 'Describe the script you want...', filled: 'Ask to modify the script...' },
-  'docs': { empty: 'Describe the documentation...', filled: 'Ask to update the docs...' },
-  'app': { empty: 'Describe the app you want to create...', filled: 'Ask to modify your app...' }
-};

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

@@ -1,864 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  IconX,
-  IconPlayerStop,
-  IconCheck,
-  IconCode,
-  IconWand,
-  IconStars,
-  IconCornerDownLeft,
-  IconChevronDown,
-  IconHistory,
-  IconPlus,
-  IconTrash
-} from '@tabler/icons';
-import get from 'lodash/get';
-import find from 'lodash/find';
-import MenuDropdown from 'ui/MenuDropdown';
-import { focusTab } from 'providers/ReduxStore/slices/tabs';
-import {
-  closeAiSidebar,
-  sendAiMessage,
-  stopAiStream,
-  setChatBinding,
-  startNewConversation,
-  refreshChatHistory,
-  openConversation,
-  removeConversation,
-  setMessageCodeStatus
-} from 'providers/ReduxStore/slices/chat';
-import {
-  updateAppCode,
-  updateRequestTests,
-  updateRequestScript,
-  updateResponseScript,
-  updateRequestDocs,
-  updateFolderRequestScript,
-  updateFolderResponseScript,
-  updateFolderTests,
-  updateFolderDocs,
-  updateCollectionRequestScript,
-  updateCollectionResponseScript,
-  updateCollectionTests,
-  updateCollectionDocs
-} from 'providers/ReduxStore/slices/collections';
-import { findItemInCollection, isItemAFolder, isItemARequest } from 'utils/collections';
-import { buildAiVariablesPayload, getAiStatus } from 'utils/ai';
-
-import StyledWrapper from './StyledWrapper';
-import DiffView from './DiffView';
-import AssistantCodeBlock from './AssistantCodeBlock';
-import { PROCESSING_STAGES, CONTENT_TYPE_LABELS, SUGGESTIONS_BY_TYPE, PLACEHOLDER_BY_TYPE } from './constants';
-import { renderMarkdown, parseMessageSegments } from './utils';
-
-const SELECTED_MODEL_LS_KEY = 'bruno.ai.chat.selectedModel';
-const AUTO_MODEL_ID = '';
-
-const ToolActivityGroup = ({ activities }) => {
-  if (!activities?.length) return null;
-  const allDone = activities.every((a) => a.done);
-  return (
-    <div className={`tool-activity-log ${allDone ? 'completed' : ''}`}>
-      {activities.map((activity, i) => (
-        <div key={i} className={`tool-activity-item ${activity.done ? 'done' : 'active'}`}>
-          <span className="tool-activity-indicator">
-            {activity.done ? <IconCheck size={10} /> : <span className="tool-activity-spinner" />}
-          </span>
-          <span>{activity.label}{!activity.done ? '…' : ''}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const buildMessageTimeline = (cleanedContent, activities) => {
-  if (!activities?.length) {
-    return cleanedContent ? [{ type: 'text', content: cleanedContent }] : [];
-  }
-  if (!cleanedContent) return [{ type: 'tools', activities }];
-
-  const groups = [];
-  for (const activity of activities) {
-    const offset = Math.min(activity.textOffset || 0, cleanedContent.length);
-    const last = groups[groups.length - 1];
-    if (last && last.offset === offset) last.activities.push(activity);
-    else groups.push({ offset, activities: [activity] });
-  }
-
-  const parts = [];
-  let cursor = 0;
-  for (const group of groups) {
-    if (group.offset > cursor) {
-      parts.push({ type: 'text', content: cleanedContent.substring(cursor, group.offset) });
-    }
-    parts.push({ type: 'tools', activities: group.activities });
-    cursor = Math.max(cursor, group.offset);
-  }
-  if (cursor < cleanedContent.length) {
-    parts.push({ type: 'text', content: cleanedContent.substring(cursor) });
-  }
-  return parts;
-};
-
-const formatRelativeTime = (timestamp) => {
-  if (!timestamp) return '';
-  const diff = Date.now() - timestamp;
-  const minute = 60 * 1000;
-  const hour = 60 * minute;
-  const day = 24 * hour;
-  if (diff < minute) return 'just now';
-  if (diff < hour) return `${Math.floor(diff / minute)}m ago`;
-  if (diff < day) return `${Math.floor(diff / hour)}h ago`;
-  if (diff < 7 * day) return `${Math.floor(diff / day)}d ago`;
-  return new Date(timestamp).toLocaleDateString();
-};
-
-const HistoryPopover = ({ items, activeId, onPick, onDelete, onClose }) => {
-  const popoverRef = useRef(null);
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (popoverRef.current && !popoverRef.current.contains(e.target)) {
-        onClose();
-      }
-    };
-    const handleKey = (e) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('mousedown', handleClick);
-    document.addEventListener('keydown', handleKey);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-      document.removeEventListener('keydown', handleKey);
-    };
-  }, [onClose]);
-
-  return (
-    <div className="history-popover" ref={popoverRef} role="menu">
-      {items.length === 0 ? (
-        <div className="history-popover__empty">No past conversations</div>
-      ) : (
-        items.map((item) => (
-          <div
-            key={item.id}
-            className={`history-popover__item ${item.id === activeId ? 'is-active' : ''}`}
-            role="menuitem"
-          >
-            <button className="history-popover__title" onClick={() => onPick(item.id)} title={item.title}>
-              <span className="history-popover__title-text">{item.title || '(untitled)'}</span>
-              <span className="history-popover__meta">{formatRelativeTime(item.updatedAt)}</span>
-            </button>
-            <button
-              className="history-popover__delete"
-              onClick={(e) => {
-                e.stopPropagation(); onDelete(item.id);
-              }}
-              title="Delete conversation"
-              aria-label="Delete conversation"
-            >
-              <IconTrash size={12} />
-            </button>
-          </div>
-        ))
-      )}
-    </div>
-  );
-};
-
-const AiChatSidebar = ({ collection }) => {
-  const dispatch = useDispatch();
-  const [input, setInput] = useState('');
-  const [processingStage, setProcessingStage] = useState(null);
-  const [availableModels, setAvailableModels] = useState([]);
-  const [selectedModel, setSelectedModel] = useState(() => {
-    try { return localStorage.getItem(SELECTED_MODEL_LS_KEY) ?? AUTO_MODEL_ID; } catch { return AUTO_MODEL_ID; }
-  });
-  const [historyOpen, setHistoryOpen] = useState(false);
-  const messagesEndRef = useRef(null);
-  const messagesContainerRef = useRef(null);
-  const isNearBottomRef = useRef(true);
-  const textareaRef = useRef(null);
-
-  const isOpen = useSelector((state) => state.chat.isOpen);
-  const allChats = useSelector((state) => state.chat.chats);
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const preferences = useSelector((state) => state.app.preferences);
-  const aiEnabled = get(preferences, 'ai.enabled', false);
-
-  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  const activeItem = focusedTab && collection ? findItemInCollection(collection, activeTabUid) : null;
-
-  const aiContext = useMemo(() => {
-    if (!focusedTab || !collection) return null;
-    if (activeItem && (isItemARequest(activeItem) || activeItem.type === 'app')) {
-      return { kind: 'request', item: activeItem, pathname: activeItem.pathname || '', name: activeItem.name || 'Untitled' };
-    }
-    if (activeItem && isItemAFolder(activeItem)) {
-      return { kind: 'folder', folder: activeItem, pathname: activeItem.pathname || '', name: activeItem.name || 'Untitled' };
-    }
-    // Anything else (collection-settings, runner, variables, openapi-sync,
-    // .js files in File Mode …) falls back to the collection root so the AI
-    // button always opens a useful chat instead of a no-op.
-    return { kind: 'collection', pathname: collection.pathname || '', name: collection.name || 'Untitled Collection' };
-  }, [focusedTab, collection, activeItem]);
-
-  const currentChat = allChats[activeTabUid] || { messages: [], isLoading: false, error: null, historyList: [] };
-  const { messages, isLoading, error, historyList, conversationId } = currentChat;
-
-  useEffect(() => {
-    if (!isOpen || !aiEnabled) return;
-    let cancelled = false;
-    getAiStatus()
-      .then((status) => {
-        if (cancelled) return;
-        setAvailableModels(status?.availableModels || []);
-      })
-      .catch(() => {
-        if (!cancelled) setAvailableModels([]);
-      });
-    return () => { cancelled = true; };
-  }, [isOpen, aiEnabled, preferences?.ai]);
-
-  // Auto = empty string. We don't auto-correct to the first model — let the
-  // backend pick, so users get smart defaults that adapt as providers change.
-  useEffect(() => {
-    if (selectedModel === AUTO_MODEL_ID) return;
-    if (availableModels.length === 0) return;
-    if (availableModels.some((m) => m.id === selectedModel)) return;
-    setSelectedModel(AUTO_MODEL_ID);
-    try { localStorage.setItem(SELECTED_MODEL_LS_KEY, AUTO_MODEL_ID); } catch {}
-  }, [availableModels, selectedModel]);
-
-  const requestName = aiContext?.name || activeItem?.name || 'Untitled';
-  const requestMethod = useMemo(() => {
-    if (aiContext?.kind === 'folder') return 'FOLDER';
-    if (aiContext?.kind === 'collection') return 'ROOT';
-    if (!activeItem) return 'GET';
-    if (activeItem.type === 'grpc-request') return 'GRPC';
-    if (activeItem.type === 'ws-request') return 'WS';
-    if (activeItem.type === 'graphql-request') return 'GQL';
-    if (activeItem.type === 'app') return 'APP';
-    const appOn = activeItem.draft
-      ? get(activeItem, 'draft.app.enabled', false)
-      : get(activeItem, 'app.enabled', false);
-    if (appOn) return 'APP';
-    return activeItem.draft
-      ? get(activeItem, 'draft.request.method', 'GET')
-      : get(activeItem, 'request.method', 'GET');
-  }, [aiContext?.kind, activeItem]);
-
-  // contentType drives the AI prompt, the diff target, and which entry of
-  // allContent the backend treats as "active". For requests it follows the
-  // request-pane tab. For folders / collections we read the settings sub-tab
-  // (and the inner pre/post script split for the Script sub-tab).
-  const requestPaneTab = focusedTab?.requestPaneTab;
-  const scriptPaneTab = focusedTab?.scriptPaneTab;
-  const contentType = useMemo(() => {
-    if (aiContext?.kind === 'folder') {
-      const sub = collection?.folderLevelSettingsSelectedTab?.[aiContext.folder.uid];
-      if (sub === 'test') return 'tests';
-      if (sub === 'docs') return 'docs';
-      if (sub === 'script') return scriptPaneTab === 'post-response' ? 'post-response' : 'pre-request';
-      return 'pre-request';
-    }
-    if (aiContext?.kind === 'collection') {
-      const sub = collection?.settingsSelectedTab;
-      if (sub === 'tests') return 'tests';
-      if (sub === 'overview') return 'docs';
-      if (sub === 'script') return scriptPaneTab === 'post-response' ? 'post-response' : 'pre-request';
-      return 'pre-request';
-    }
-    switch (requestPaneTab) {
-      case 'tests': return 'tests';
-      case 'script': return scriptPaneTab === 'post-response' ? 'post-response' : 'pre-request';
-      case 'docs': return 'docs';
-      default: return 'app';
-    }
-  }, [aiContext, collection?.folderLevelSettingsSelectedTab, collection?.settingsSelectedTab, requestPaneTab, scriptPaneTab]);
-
-  // Bind the chat to the active context's pathname so the history list
-  // reflects this specific request/folder/collection and persistence keys stay
-  // stable across sessions. Restoring the most recent conversation happens
-  // once per tab — if the user explicitly starts a new chat, we don't
-  // auto-replace it.
-  const restoredOnceRef = useRef({});
-  useEffect(() => {
-    if (!isOpen || !aiContext || !collection) return;
-    dispatch(setChatBinding({
-      tabUid: activeTabUid,
-      pathname: aiContext.pathname,
-      collectionUid: collection.uid,
-      contentType
-    }));
-    dispatch(refreshChatHistory(activeTabUid));
-  }, [isOpen, aiContext?.pathname, collection?.uid, activeTabUid, contentType, dispatch]);
-
-  // First-open restore: if this tab has no conversation yet and there's a
-  // saved one for the same file, load the most recent.
-  useEffect(() => {
-    if (!isOpen || !activeTabUid) return;
-    if (restoredOnceRef.current[activeTabUid]) return;
-    if (currentChat.conversationId) return;
-    if (currentChat.messages?.length > 0) return;
-    if (!historyList || historyList.length === 0) return;
-    restoredOnceRef.current[activeTabUid] = true;
-    dispatch(openConversation(activeTabUid, historyList[0].id));
-  }, [isOpen, activeTabUid, currentChat.conversationId, currentChat.messages?.length, historyList, dispatch]);
-
-  const allContent = useMemo(() => {
-    if (!aiContext) return {};
-    if (aiContext.kind === 'request') {
-      const item = aiContext.item;
-      const draft = item.draft;
-      const draftAppCode = get(item, 'draft.app.code');
-      return {
-        'app': draftAppCode != null ? draftAppCode : get(item, 'app.code', ''),
-        'tests': draft ? get(draft, 'request.tests', '') : get(item, 'request.tests', ''),
-        'pre-request': draft ? get(draft, 'request.script.req', '') : get(item, 'request.script.req', ''),
-        'post-response': draft ? get(draft, 'request.script.res', '') : get(item, 'request.script.res', ''),
-        'docs': draft ? get(draft, 'request.docs', '') : get(item, 'request.docs', '')
-      };
-    }
-    if (aiContext.kind === 'folder') {
-      const folder = aiContext.folder;
-      const root = folder.draft || folder.root || {};
-      return {
-        'tests': get(root, 'request.tests', ''),
-        'pre-request': get(root, 'request.script.req', ''),
-        'post-response': get(root, 'request.script.res', ''),
-        'docs': get(root, 'docs', '')
-      };
-    }
-    // collection
-    const root = collection?.draft?.root || collection?.root || {};
-    return {
-      'tests': get(root, 'request.tests', ''),
-      'pre-request': get(root, 'request.script.req', ''),
-      'post-response': get(root, 'request.script.res', ''),
-      'docs': get(root, 'docs', '')
-    };
-  }, [aiContext, collection?.draft?.root, collection?.root]);
-
-  const currentContent = allContent[contentType] || '';
-
-  // requestContext (URL/method/headers/response shape) only makes sense for
-  // HTTP-style request items. Folder, collection, and App chats skip it —
-  // App items live under kind: 'request' but have no URL/method to surface.
-  const requestContext = useMemo(() => {
-    if (aiContext?.kind !== 'request' || !isItemARequest(aiContext.item)) return null;
-    const item = aiContext.item;
-    const draft = item.draft;
-    return {
-      url: draft ? get(item, 'draft.request.url', '') : get(item, 'request.url', ''),
-      method: draft ? get(item, 'draft.request.method', '') : get(item, 'request.method', ''),
-      headers: draft ? get(item, 'draft.request.headers', []) : get(item, 'request.headers', []),
-      params: draft ? get(item, 'draft.request.params', []) : get(item, 'request.params', []),
-      body: draft ? get(item, 'draft.request.body', null) : get(item, 'request.body', null),
-      docs: draft ? get(item, 'draft.request.docs', null) : get(item, 'request.docs', null),
-      responseStatus: get(item, 'response.status', null),
-      responseData: get(item, 'response.data', null)
-    };
-  }, [aiContext]);
-
-  // Variables payload is collection-scoped — works for request, folder, and
-  // collection chats alike. Each entry is { name, value, scope, secret }; the
-  // model gets a name-only preview in the prompt and can call search_variables
-  // to fetch values (secrets come back redacted).
-  const aiVariables = useMemo(() => {
-    if (aiContext?.kind === 'request') return buildAiVariablesPayload(collection, aiContext.item);
-    if (aiContext?.kind === 'folder') return buildAiVariablesPayload(collection, aiContext.folder);
-    return buildAiVariablesPayload(collection, null);
-  }, [collection, aiContext]);
-
-  const chatsWithMessages = useMemo(() => {
-    if (!collection) return [];
-    return Object.entries(allChats)
-      .filter(([, chat]) => chat.messages?.length > 0)
-      .map(([tabUid, chat]) => {
-        if (tabUid === collection.uid) {
-          return { id: tabUid, name: collection.name || 'Untitled Collection', method: 'ROOT', messageCount: chat.messages.length };
-        }
-        const item = findItemInCollection(collection, tabUid);
-        if (!item) return null;
-        if (isItemAFolder(item)) {
-          return { id: tabUid, name: item.name || 'Untitled', method: 'FOLDER', messageCount: chat.messages.length };
-        }
-        const method = item.draft
-          ? get(item, 'draft.request.method', 'GET')
-          : get(item, 'request.method', 'GET');
-        return {
-          id: tabUid,
-          name: item.name || 'Untitled',
-          method,
-          messageCount: chat.messages.length
-        };
-      })
-      .filter(Boolean);
-  }, [allChats, collection]);
-
-  const scrollToBottom = useCallback((behavior = 'smooth') => {
-    messagesEndRef.current?.scrollIntoView({ behavior });
-  }, []);
-
-  const handleMessagesScroll = useCallback(() => {
-    const el = messagesContainerRef.current;
-    if (!el) return;
-    isNearBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
-  }, []);
-
-  useEffect(() => {
-    if (!isNearBottomRef.current) return;
-    const behavior = messages.some((m) => m.isStreaming) ? 'auto' : 'smooth';
-    scrollToBottom(behavior);
-  }, [messages, scrollToBottom]);
-
-  useEffect(() => {
-    if (isOpen) textareaRef.current?.focus();
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (!isLoading) {
-      setProcessingStage(null);
-      return;
-    }
-    const last = messages[messages.length - 1];
-    if (last?.isStreaming && last.content) setProcessingStage('generating');
-    else if (last?.isStreaming) setProcessingStage('thinking');
-    else setProcessingStage('sending');
-  }, [isLoading, messages]);
-
-  const handleTextareaChange = (e) => {
-    setInput(e.target.value);
-    const el = textareaRef.current;
-    if (el) {
-      el.style.height = 'auto';
-      el.style.height = Math.min(el.scrollHeight, 150) + 'px';
-    }
-  };
-
-  const handleSubmit = async (e) => {
-    e?.preventDefault();
-    if (!input.trim() || isLoading || availableModels.length === 0) return;
-
-    const text = input.trim();
-    setInput('');
-    setProcessingStage('sending');
-    if (textareaRef.current) textareaRef.current.style.height = 'auto';
-
-    try {
-      await dispatch(sendAiMessage(activeTabUid, text, allContent, requestContext, selectedModel, contentType, aiVariables));
-      setProcessingStage('applying');
-      setTimeout(() => setProcessingStage(null), 500);
-    } catch (err) {
-      console.error('Failed to send AI message:', err);
-      setProcessingStage(null);
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
-  const handleStop = () => {
-    dispatch(stopAiStream(activeTabUid));
-    setProcessingStage(null);
-  };
-
-  const handleApplyCode = (code, originalCode, messageIndex, msgContentType, writeIndex) => {
-    if (!aiContext || code == null) return;
-    const targetType = msgContentType || contentType;
-
-    // Bail if the live buffer has drifted from what the AI based the diff on.
-    // The DiffView already disables the button in this case, but guarding here
-    // too means the keyboard / programmatic path can't blow away local edits.
-    const liveContent = allContent[targetType] || '';
-    if (originalCode != null && liveContent !== originalCode) {
-      return;
-    }
-
-    if (aiContext.kind === 'request') {
-      const payload = { itemUid: aiContext.item.uid, collectionUid: collection.uid };
-      switch (targetType) {
-        case 'tests': dispatch(updateRequestTests({ ...payload, tests: code })); break;
-        case 'pre-request': dispatch(updateRequestScript({ ...payload, script: code })); break;
-        case 'post-response': dispatch(updateResponseScript({ ...payload, script: code })); break;
-        case 'docs': dispatch(updateRequestDocs({ ...payload, docs: code })); break;
-        default: dispatch(updateAppCode({ ...payload, code })); break;
-      }
-    } else if (aiContext.kind === 'folder') {
-      const payload = { folderUid: aiContext.folder.uid, collectionUid: collection.uid };
-      switch (targetType) {
-        case 'tests': dispatch(updateFolderTests({ ...payload, tests: code })); break;
-        case 'pre-request': dispatch(updateFolderRequestScript({ ...payload, script: code })); break;
-        case 'post-response': dispatch(updateFolderResponseScript({ ...payload, script: code })); break;
-        case 'docs': dispatch(updateFolderDocs({ ...payload, docs: code })); break;
-        // Folders / collections have no 'app' equivalent. Bail rather than
-        // marking the diff accepted when nothing was dispatched.
-        default: return;
-      }
-    } else {
-      const payload = { collectionUid: collection.uid };
-      switch (targetType) {
-        case 'tests': dispatch(updateCollectionTests({ ...payload, tests: code })); break;
-        case 'pre-request': dispatch(updateCollectionRequestScript({ ...payload, script: code })); break;
-        case 'post-response': dispatch(updateCollectionResponseScript({ ...payload, script: code })); break;
-        case 'docs': dispatch(updateCollectionDocs({ ...payload, docs: code })); break;
-        default: return;
-      }
-    }
-
-    dispatch(setMessageCodeStatus({
-      tabUid: activeTabUid,
-      messageIndex,
-      status: 'accepted',
-      writeIndex
-    }));
-  };
-
-  const handleRejectCode = (messageIndex, writeIndex) => {
-    dispatch(setMessageCodeStatus({
-      tabUid: activeTabUid,
-      messageIndex,
-      status: 'rejected',
-      writeIndex
-    }));
-  };
-
-  const handleNewChat = () => {
-    setHistoryOpen(false);
-    restoredOnceRef.current[activeTabUid] = true; // suppress restore
-    dispatch(startNewConversation({ tabUid: activeTabUid, contentType }));
-    textareaRef.current?.focus();
-  };
-
-  const handlePickConversation = (id) => {
-    setHistoryOpen(false);
-    restoredOnceRef.current[activeTabUid] = true;
-    dispatch(openConversation(activeTabUid, id));
-  };
-
-  const handleDeleteConversation = (id) => {
-    dispatch(removeConversation(activeTabUid, id));
-  };
-
-  const handleClose = () => dispatch(closeAiSidebar());
-  const handleSwitchChat = (tabUid) => dispatch(focusTab({ uid: tabUid }));
-
-  const handleSuggestionClick = (suggestion) => {
-    setInput(suggestion);
-    textareaRef.current?.focus();
-  };
-
-  const handleModelSelect = (modelId) => {
-    setSelectedModel(modelId);
-    try { localStorage.setItem(SELECTED_MODEL_LS_KEY, modelId); } catch {}
-  };
-
-  const selectedModelLabel = useMemo(() => {
-    if (selectedModel === AUTO_MODEL_ID) return 'Auto';
-    return availableModels.find((m) => m.id === selectedModel)?.label || 'Auto';
-  }, [availableModels, selectedModel]);
-
-  const ModelSelectorTrigger = forwardRef((props, ref) => (
-    <div ref={ref} className="model-btn" {...props}>
-      <IconStars size={14} strokeWidth={1.75} />
-      <span>{selectedModelLabel}</span>
-      <IconChevronDown size={12} />
-    </div>
-  ));
-  ModelSelectorTrigger.displayName = 'ModelSelectorTrigger';
-
-  const modelMenuItems = useMemo(
-    () => [
-      { id: AUTO_MODEL_ID, label: 'Auto', onClick: () => handleModelSelect(AUTO_MODEL_ID) },
-      ...availableModels.map((model) => ({
-        id: model.id,
-        label: model.label,
-        onClick: () => handleModelSelect(model.id)
-      }))
-    ],
-    [availableModels]
-  );
-
-  const hasActiveStream = messages.some((m) => m.isStreaming);
-
-  const renderProcessingIndicator = () => {
-    if (!processingStage || processingStage === 'thinking' || hasActiveStream) return null;
-    const stage = PROCESSING_STAGES.find((s) => s.id === processingStage) || PROCESSING_STAGES[0];
-    return (
-      <div className="processing-indicator">
-        <div className="processing-content">
-          <div className="processing-icon">
-            {stage.icon === 'sparkles' && <IconStars size={12} />}
-            {stage.icon === 'wand' && <IconWand size={12} />}
-            {stage.icon === 'code' && <IconCode size={12} />}
-            {stage.icon === 'send' && <IconCornerDownLeft size={12} />}
-          </div>
-          <span className="processing-label">{stage.label}</span>
-          <div className="processing-dots"><span></span><span></span><span></span></div>
-        </div>
-        <div className="processing-bar"><div className="processing-bar-fill"></div></div>
-      </div>
-    );
-  };
-
-  const renderMessage = (msg, index) => {
-    const isUser = msg.role === 'user';
-    const isStreaming = msg.isStreaming;
-    const activities = msg.toolActivity || [];
-    const hasPendingTool = activities.some((a) => !a.done);
-    const content = msg.content || '';
-
-    const showThinking = isStreaming && !content && activities.length === 0;
-    const showWorking = isStreaming && activities.length > 0 && !hasPendingTool;
-    const timeline = buildMessageTimeline(content, activities);
-
-    return (
-      <div key={index} className={`message ${msg.role} ${isStreaming ? 'streaming' : ''}`}>
-        <div className="message-content">
-          {isUser ? content : (
-            <>
-              {showThinking && (
-                <div className="message-status">
-                  <span className="message-status__spinner" />
-                  <span>Thinking…</span>
-                </div>
-              )}
-
-              {timeline.map((part, partIndex) => {
-                if (part.type === 'tools') {
-                  return <ToolActivityGroup key={`tools-${partIndex}`} activities={part.activities} />;
-                }
-                const segments = parseMessageSegments(part.content);
-                const isLastTextPart = !timeline.slice(partIndex + 1).some((p) => p.type === 'text');
-                return (
-                  <React.Fragment key={`text-${partIndex}`}>
-                    {segments.map((segment, segIndex) => {
-                      const isLastSegment = isLastTextPart && segIndex === segments.length - 1;
-                      if (segment.type === 'code') {
-                        return (
-                          <AssistantCodeBlock
-                            key={`p${partIndex}-s${segIndex}`}
-                            content={segment.content}
-                            language={segment.language}
-                            isOpen={segment.isOpen}
-                            isStreaming={isStreaming}
-                            isLast={isLastSegment}
-                          />
-                        );
-                      }
-                      return (
-                        <div key={`p${partIndex}-s${segIndex}`} className="prose markdown-body">
-                          <div dangerouslySetInnerHTML={{ __html: renderMarkdown(segment.content) }} />
-                          {isStreaming && isLastSegment && <span className="cursor">|</span>}
-                        </div>
-                      );
-                    })}
-                  </React.Fragment>
-                );
-              })}
-
-              {showWorking && (
-                <div className="message-status">
-                  <span className="message-status__spinner" />
-                  <span>Working…</span>
-                </div>
-              )}
-
-              {!isStreaming && msg.writes?.length > 0 && msg.writes.map((write, writeIdx) => {
-                if (write.content === write.originalContent) return null;
-                const liveContent = allContent[write.type] || '';
-                const isStale = liveContent !== write.originalContent;
-                const notRead = !write.wasRead;
-                return (
-                  <DiffView
-                    key={`write-${writeIdx}`}
-                    originalCode={write.originalContent || ''}
-                    newCode={write.content}
-                    contentTypeLabel={CONTENT_TYPE_LABELS[write.type] || write.type}
-                    warning={
-                      notRead ? 'Content was not read first — changes may overwrite unrelated edits'
-                        : isStale ? 'Content has been modified since AI read it'
-                          : null
-                    }
-                    disableAccept={isStale || notRead}
-                    onAccept={() => handleApplyCode(write.content, write.originalContent, index, write.type, writeIdx)}
-                    onReject={() => handleRejectCode(index, writeIdx)}
-                    status={write.status}
-                  />
-                );
-              })}
-
-              {!isStreaming && !msg.writes && msg.code && msg.originalCode && msg.code !== msg.originalCode && (
-                <DiffView
-                  originalCode={msg.originalCode || ''}
-                  newCode={msg.code}
-                  onAccept={() => handleApplyCode(msg.code, msg.originalCode, index, msg.contentType)}
-                  onReject={() => handleRejectCode(index)}
-                  status={msg.codeStatus}
-                />
-              )}
-
-              {!isStreaming && msg.cancelled && (
-                <div className="message-cancelled"><em>Cancelled</em></div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  const renderEmptyState = () => {
-    const suggestions = SUGGESTIONS_BY_TYPE[contentType] || SUGGESTIONS_BY_TYPE.app;
-    return (
-      <div className="empty-state">
-        <div className="empty-icon"><IconStars size={20} /></div>
-        <h3>AI Assistant</h3>
-        <p>Ask me to generate or modify code, tests, scripts, and docs.</p>
-        <div className="suggestions">
-          <p className="suggestions-title">Try asking:</p>
-          <div className="suggestion-chips">
-            {suggestions.map((s, i) => (
-              <button key={i} className="suggestion-chip" onClick={() => handleSuggestionClick(s.prompt)}>
-                {s.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  if (!isOpen) return null;
-  if (!aiContext) return null;
-
-  const placeholders = PLACEHOLDER_BY_TYPE[contentType] || PLACEHOLDER_BY_TYPE.app;
-  const placeholder = currentContent ? placeholders.filled : placeholders.empty;
-  const historyCount = historyList?.length || 0;
-
-  return (
-    <StyledWrapper>
-      <div className="ai-sidebar">
-        <div className="ai-sidebar-header">
-          <div className="header-left">
-            <IconStars size={18} className="header-icon" />
-            <span className={`header-method method-${(requestMethod || 'get').toLowerCase()}`}>{requestMethod}</span>
-            <span className="header-title">{requestName}</span>
-            {chatsWithMessages.length > 1 && (
-              <MenuDropdown
-                items={chatsWithMessages.map((chat) => ({
-                  id: chat.id,
-                  label: `${chat.method} · ${chat.name}`,
-                  onClick: () => handleSwitchChat(chat.id)
-                }))}
-                placement="bottom-start"
-                selectedItemId={activeTabUid}
-              >
-                <button className="chat-switcher-btn" title="Switch chat">
-                  <IconChevronDown size={14} />
-                </button>
-              </MenuDropdown>
-            )}
-          </div>
-          <div className="header-actions">
-            <button
-              className="icon-btn"
-              onClick={handleNewChat}
-              title="New chat"
-              disabled={isLoading || messages.length === 0}
-            >
-              <IconPlus size={14} />
-            </button>
-            <div className="history-wrap">
-              <button
-                className={`icon-btn ${historyOpen ? 'is-active' : ''}`}
-                onClick={() => setHistoryOpen((v) => !v)}
-                title="History"
-                disabled={historyCount === 0}
-              >
-                <IconHistory size={14} />
-              </button>
-              {historyOpen && (
-                <HistoryPopover
-                  items={historyList || []}
-                  activeId={conversationId}
-                  onPick={handlePickConversation}
-                  onDelete={handleDeleteConversation}
-                  onClose={() => setHistoryOpen(false)}
-                />
-              )}
-            </div>
-            <button className="icon-btn close-btn" onClick={handleClose} title="Close">
-              <IconX size={14} />
-            </button>
-          </div>
-        </div>
-
-        <div className="ai-sidebar-messages" ref={messagesContainerRef} onScroll={handleMessagesScroll}>
-          {messages.length === 0 ? renderEmptyState() : (
-            <>
-              {messages.map(renderMessage)}
-              {renderProcessingIndicator()}
-            </>
-          )}
-          {error && (
-            <div className="error-message">
-              <div className="error-icon">!</div>
-              <div className="error-text">{error}</div>
-            </div>
-          )}
-          <div ref={messagesEndRef} />
-        </div>
-
-        <div className="ai-sidebar-input">
-          {availableModels.length === 0 ? (
-            <div className="no-models-warning">
-              No AI models available. Configure a provider and enable models in Preferences &gt; AI.
-            </div>
-          ) : (
-            <div className="input-container">
-              <textarea
-                ref={textareaRef}
-                value={input}
-                onChange={handleTextareaChange}
-                onKeyDown={handleKeyDown}
-                placeholder={placeholder}
-                disabled={isLoading}
-                rows={1}
-              />
-              <div className="input-actions">
-                <div className="model-selector">
-                  <MenuDropdown items={modelMenuItems} placement="top-start" selectedItemId={selectedModel}>
-                    <ModelSelectorTrigger />
-                  </MenuDropdown>
-                </div>
-                {isLoading ? (
-                  <button className="stop-btn" onClick={handleStop} title="Stop generating">
-                    <IconPlayerStop size={12} /> Stop
-                  </button>
-                ) : (
-                  <button
-                    className="send-btn"
-                    onClick={handleSubmit}
-                    title="Send (Enter)"
-                    disabled={!input.trim()}
-                  >
-                    Send <IconCornerDownLeft size={12} />
-                  </button>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default AiChatSidebar;

packages/bruno-app/src/components/AiChatSidebar/utils.js

@@ -1,63 +0,0 @@
-import MarkdownIt from 'markdown-it';
-
-const SAFE_LANG = /^[a-z0-9_+#.-]+$/i;
-const safeLanguage = (lang) => (lang && SAFE_LANG.test(lang) ? lang : 'text');
-
-const md = new MarkdownIt({
-  html: false,
-  breaks: true,
-  linkify: true,
-  highlight: (str, lang) =>
-    `<pre class="code-block"><code class="language-${safeLanguage(lang)}">${md.utils.escapeHtml(str)}</code></pre>`
-});
-
-export const renderMarkdown = (content) => md.render(content || '');
-
-export const parseMessageSegments = (content = '') => {
-  if (!content) return [];
-
-  const segments = [];
-  let cursor = 0;
-  let inCode = false;
-  let language = '';
-
-  while (cursor <= content.length) {
-    const fenceIndex = content.indexOf('```', cursor);
-
-    if (fenceIndex === -1) {
-      const chunk = content.slice(cursor);
-      if (inCode || chunk) {
-        segments.push({
-          type: inCode ? 'code' : 'text',
-          content: chunk,
-          language,
-          isOpen: inCode
-        });
-      }
-      break;
-    }
-
-    if (!inCode) {
-      const textChunk = content.slice(cursor, fenceIndex);
-      if (textChunk) {
-        segments.push({ type: 'text', content: textChunk });
-      }
-      const fenceEnd = fenceIndex + 3;
-      const lineEnd = content.indexOf('\n', fenceEnd);
-      language = (lineEnd === -1 ? content.slice(fenceEnd) : content.slice(fenceEnd, lineEnd)).trim();
-      inCode = true;
-      cursor = lineEnd === -1 ? content.length : lineEnd + 1;
-    } else {
-      const codeChunk = content.slice(cursor, fenceIndex);
-      if (codeChunk.trim()) {
-        segments.push({ type: 'code', content: codeChunk, language, isOpen: false });
-      }
-      inCode = false;
-      language = '';
-      cursor = fenceIndex + 3;
-      if (content[cursor] === '\n') cursor += 1;
-    }
-  }
-
-  return segments.filter((seg) => seg.content && seg.content.trim());
-};

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

@@ -61,17 +61,6 @@ const StyledWrapper = styled.div`
   .cm-variable-invalid {
     color: ${(props) => props.theme.codemirror.variable.invalid};
   }
-
-  .CodeMirror-matchingbracket {
-    background: ${(props) => props.theme.status.success.background} !important;
-    text-decoration: unset;
-  }
-
-  .CodeMirror-nonmatchingbracket {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-    background: ${(props) => props.theme.status.danger.background} !important;
-    text-decoration: unset;
-  }
 `;
 
 export default StyledWrapper;

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

@@ -57,6 +57,16 @@ export default class CodeEditor extends React.Component {
       scrollbarStyle: 'overlay',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
+        'Cmd-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
+        'Ctrl-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
         'Cmd-F': 'findPersistent',
         'Ctrl-F': 'findPersistent',
         'Cmd-H': 'replace',

packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/StyledWrapper.js

@@ -683,6 +683,8 @@ const StyledWrapper = styled.div`
 
       .copy-to-clipboard {
         button {
+          background: ${(props) => props.theme.background.mantle};
+          border: 1px solid ${(props) => props.theme.border.border1};
           border-radius: 3px;
         }
       }

packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js

@@ -1,75 +1,14 @@
-import { memo } from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import StyledWrapper from './StyledWrapper';
-import { serializeBody } from './serializeBody';
 
-const serializeHeaders = (headers) => {
-  if (!headers) return {};
-  if (typeof headers.entries === 'function') {
-    const out = {};
-    for (const [k, v] of headers.entries()) out[k] = v;
-    return out;
-  }
-  return { ...headers };
-};
-
-const proxiedFetch = async (url, options = {}) => {
-  const result = await window.ipcRenderer.invoke('renderer:swagger-fetch', {
-    url,
-    method: options.method || 'GET',
-    headers: serializeHeaders(options.headers),
-    body: serializeBody(options.body)
-  });
-
-  if (result.error) {
-    const err = new TypeError(result.message);
-    err.code = result.code;
-    throw err;
-  }
-
-  // The Response constructor throws if a null-body status carries a body.
-  const nullBodyStatus = [101, 204, 205, 304].includes(result.status);
-  const bodyBytes = !nullBodyStatus && result.bodyBase64
-    ? Uint8Array.from(atob(result.bodyBase64), (c) => c.charCodeAt(0))
-    : null;
-
-  // Build Headers manually so multi-value response headers (e.g. Set-Cookie,
-  // which axios returns as string[]) end up as repeated entries rather than
-  // joined via toString(). new Headers({ 'set-cookie': ['a','b'] }) coerces
-  // the array to "a,b", which is invalid Set-Cookie syntax.
-  const responseHeaders = new Headers();
-  for (const [name, value] of Object.entries(result.headers || {})) {
-    if (Array.isArray(value)) {
-      value.forEach((v) => responseHeaders.append(name, String(v)));
-    } else if (value != null) {
-      responseHeaders.append(name, String(value));
-    }
-  }
-
-  return new Response(bodyBytes, {
-    status: result.status,
-    statusText: result.statusText,
-    headers: responseHeaders
-  });
-};
-
-const requestInterceptor = (req) => {
-  req.userFetch = proxiedFetch;
-  return req;
-};
-
-const Swagger = ({ spec, onComplete }) => {
+const Swagger = ({ spec }) => {
   return (
     <StyledWrapper>
       <div className="swagger-root w-full">
-        <SwaggerUI
-          spec={spec}
-          onComplete={onComplete}
-          requestInterceptor={requestInterceptor}
-        />
+        <SwaggerUI spec={spec} />
       </div>
     </StyledWrapper>
   );
 };
 
-export default memo(Swagger);
+export default Swagger;

packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/serializeBody.js

@@ -1,83 +0,0 @@
-// Serializes a SwaggerUI fetch body for transport across the renderer ↔ main
-// IPC bridge in `renderer:swagger-fetch`. Only types that survive Electron's
-// structured-clone serialization (and that our axios bridge knows how to send
-// as an HTTP body) are supported. Multipart / binary types throw so the user
-// gets a clear message in the SwaggerUI response panel instead of a silent
-// failure.
-
-const detectBodyType = (body) => {
-  if (body == null) return 'null';
-  if (typeof body === 'string') return 'string';
-  if (typeof FormData !== 'undefined' && body instanceof FormData) return 'FormData';
-  if (typeof File !== 'undefined' && body instanceof File) return 'File';
-  if (typeof Blob !== 'undefined' && body instanceof Blob) return 'Blob';
-  if (typeof URLSearchParams !== 'undefined' && body instanceof URLSearchParams) return 'URLSearchParams';
-  if (typeof ArrayBuffer !== 'undefined' && body instanceof ArrayBuffer) return 'ArrayBuffer';
-  if (ArrayBuffer.isView && ArrayBuffer.isView(body)) return body.constructor?.name || 'TypedArray';
-  if (typeof ReadableStream !== 'undefined' && body instanceof ReadableStream) return 'ReadableStream';
-  return typeof body;
-};
-
-export const UNSUPPORTED_BODY_TYPE_CODE = 'UNSUPPORTED_BODY_TYPE';
-
-// Mapping from Web API class name (the raw detected type) to the user-facing
-// subject used in the error message. SwaggerUI itself supports these body
-// types fine; the limitation is Bruno's renderer↔main IPC bridge, not Swagger.
-const BODY_TYPE_LABEL_MAP = {
-  File: 'File upload',
-  Blob: 'Binary file upload',
-  FormData: 'Multipart form data',
-  ArrayBuffer: 'Binary data',
-  ReadableStream: 'Streaming upload'
-};
-
-const mapBodyTypeToLabel = (typeName) => {
-  if (BODY_TYPE_LABEL_MAP[typeName]) return BODY_TYPE_LABEL_MAP[typeName];
-  // TypedArrays (Uint8Array, Float32Array, etc.) share a label.
-  if (typeof typeName === 'string' && typeName.endsWith('Array')) return 'Binary data';
-  return 'This request body type';
-};
-
-export const UNSUPPORTED_BODY_MESSAGE = (typeName) =>
-  `${mapBodyTypeToLabel(typeName)} via the Swagger Try-it-out panel isn't supported in Bruno yet. `
-  + `Supported body types: JSON, URL-encoded forms, plain text. `
-  + `Create a Bruno request to test this endpoint.`;
-
-// Build a TypeError that carries the detected type as a property so downstream
-// catchers can branch on `err.code` / `err.bodyType` instead of regex-parsing
-// the message. `err.bodyType` keeps the raw Web API class name for diagnostics;
-// the user-visible message uses the friendly subject above.
-const unsupportedBodyError = (typeName) => {
-  const err = new TypeError(UNSUPPORTED_BODY_MESSAGE(typeName));
-  err.code = UNSUPPORTED_BODY_TYPE_CODE;
-  err.bodyType = typeName;
-  return err;
-};
-
-export const serializeBody = (body) => {
-  const typeName = detectBodyType(body);
-
-  switch (typeName) {
-    case 'null':
-      return undefined;
-    case 'string':
-      return body;
-    case 'URLSearchParams':
-      return body.toString();
-    case 'FormData':
-    case 'File':
-    case 'Blob':
-    case 'ArrayBuffer':
-    case 'ReadableStream':
-      throw unsupportedBodyError(typeName);
-    default:
-      // TypedArrays land here (Uint8Array, etc.) — also unsupported by the bridge.
-      if (ArrayBuffer.isView && ArrayBuffer.isView(body)) {
-        throw unsupportedBodyError(typeName);
-      }
-      // Plain objects, numbers, booleans — pass through. SwaggerUI rarely sends
-      // these as body directly (it stringifies JSON before fetch), but keep the
-      // path open rather than rejecting unexpectedly.
-      return body;
-  }
-};

packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/serializeBody.spec.js

@@ -1,95 +0,0 @@
-import { serializeBody, UNSUPPORTED_BODY_MESSAGE, UNSUPPORTED_BODY_TYPE_CODE } from './serializeBody';
-
-// Helper: invoke serializeBody and return the thrown error (or fail).
-const catchSerializeError = (body) => {
-  try {
-    serializeBody(body);
-  } catch (err) {
-    return err;
-  }
-  throw new Error('expected serializeBody to throw');
-};
-
-describe('serializeBody', () => {
-  describe('supported body types', () => {
-    it('returns undefined for null', () => {
-      expect(serializeBody(null)).toBeUndefined();
-    });
-
-    it('returns undefined for undefined', () => {
-      expect(serializeBody(undefined)).toBeUndefined();
-    });
-
-    it('returns string bodies as-is', () => {
-      expect(serializeBody('{"name":"doggie"}')).toBe('{"name":"doggie"}');
-      expect(serializeBody('plain text')).toBe('plain text');
-    });
-
-    it('stringifies URLSearchParams', () => {
-      const params = new URLSearchParams({ a: '1', b: '2' });
-      expect(serializeBody(params)).toBe('a=1&b=2');
-    });
-  });
-
-  describe('unsupported body types (BRU-3300)', () => {
-    it('throws TypeError for FormData using "Multipart form data" subject', () => {
-      const fd = new FormData();
-      fd.append('file', new Blob(['x']));
-      expect(() => serializeBody(fd)).toThrow(TypeError);
-      expect(() => serializeBody(fd)).toThrow(/Multipart form data/);
-      expect(() => serializeBody(fd)).toThrow(/Create a Bruno request/);
-    });
-
-    it('throws TypeError for Blob using "Binary file upload" subject', () => {
-      const blob = new Blob(['payload']);
-      expect(() => serializeBody(blob)).toThrow(TypeError);
-      expect(() => serializeBody(blob)).toThrow(/Binary file upload/);
-    });
-
-    it('throws TypeError for File using "File upload" subject', () => {
-      const file = new File(['payload'], 'test.txt', { type: 'text/plain' });
-      expect(() => serializeBody(file)).toThrow(TypeError);
-      expect(() => serializeBody(file)).toThrow(/File upload/);
-    });
-
-    it('throws TypeError for ArrayBuffer using "Binary data" subject', () => {
-      const buf = new ArrayBuffer(8);
-      expect(() => serializeBody(buf)).toThrow(TypeError);
-      expect(() => serializeBody(buf)).toThrow(/Binary data/);
-    });
-
-    it('throws TypeError for TypedArray using "Binary data" subject', () => {
-      const u8 = new Uint8Array([1, 2, 3]);
-      expect(() => serializeBody(u8)).toThrow(TypeError);
-      expect(() => serializeBody(u8)).toThrow(/Binary data/);
-    });
-
-    it('message attributes the limitation to Bruno, not Swagger', () => {
-      expect(UNSUPPORTED_BODY_MESSAGE('FormData')).toMatch(/isn't supported in Bruno yet/);
-    });
-
-    it('message lists supported alternatives', () => {
-      expect(UNSUPPORTED_BODY_MESSAGE('FormData')).toMatch(/JSON, URL-encoded forms, plain text/);
-    });
-  });
-
-  describe('error metadata preservation (Bijin review feedback)', () => {
-    it('attaches err.code = UNSUPPORTED_BODY_TYPE so callers can branch programmatically', () => {
-      const err = catchSerializeError(new FormData());
-      expect(err.code).toBe(UNSUPPORTED_BODY_TYPE_CODE);
-      expect(UNSUPPORTED_BODY_TYPE_CODE).toBe('UNSUPPORTED_BODY_TYPE');
-    });
-
-    it('attaches err.bodyType naming the specific unsupported type', () => {
-      expect(catchSerializeError(new FormData()).bodyType).toBe('FormData');
-      expect(catchSerializeError(new Blob(['x'])).bodyType).toBe('Blob');
-      expect(catchSerializeError(new File(['x'], 'a.txt')).bodyType).toBe('File');
-      expect(catchSerializeError(new ArrayBuffer(4)).bodyType).toBe('ArrayBuffer');
-      expect(catchSerializeError(new Uint8Array([1, 2])).bodyType).toBe('Uint8Array');
-    });
-
-    it('thrown error is still a TypeError instance', () => {
-      expect(catchSerializeError(new FormData())).toBeInstanceOf(TypeError);
-    });
-  });
-});

packages/bruno-app/src/components/ApiSpecPanel/SpecViewer.js

@@ -1,31 +1,26 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, Suspense } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useSelector } from 'react-redux';
-import { IconDeviceFloppy, IconLoader2 } from '@tabler/icons';
+import { IconDeviceFloppy } from '@tabler/icons';
 import CodeEditor from './FileEditor/CodeEditor/index';
 import Swagger from './Renderers/Swagger';
-import { useDragResize } from 'hooks/useDragResize';
-
-const MIN_LEFT_PANE_WIDTH = 300;
-const MIN_RIGHT_PANE_WIDTH = 450;
 
 /**
  * Shared split-pane spec viewer: CodeEditor (left) + Swagger preview (right).
  *
  * Props:
- *  - content               (string)  The spec content (YAML/JSON string)
- *  - readOnly              (boolean) If true, editor is not editable and save icon is hidden
- *  - onSave                (fn)      Called with current editor content on save (editable mode only)
- *  - leftPaneWidth         (number|null) Persisted left pane width in px; null = use 50/50 default
- *  - onLeftPaneWidthChange (fn)      Persist the new width (called on mouseup / double-click / resize-clamp)
+ *  - content    (string)   The spec content (YAML/JSON string)
+ *  - readOnly   (boolean)  If true, editor is not editable and save icon is hidden
+ *  - onSave     (function) Called with current editor content on save (editable mode only)
  */
-const SpecViewer = ({ content, readOnly, onSave, leftPaneWidth, onLeftPaneWidthChange }) => {
+const SpecViewer = ({ content, readOnly, onSave }) => {
   const { displayedTheme, theme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const [editorContent, setEditorContent] = useState(content);
 
+  // Sync editor when saved content changes from outside (e.g. after save completes)
   useEffect(() => {
     setEditorContent(content);
   }, [content]);
@@ -36,85 +31,38 @@ const SpecViewer = ({ content, readOnly, onSave, leftPaneWidth, onLeftPaneWidthC
     if (onSave) onSave(editorContent);
   };
 
-  const mainSectionRef = useRef(null);
-  const { dragging, dragWidth, dragbarProps } = useDragResize({
-    containerRef: mainSectionRef,
-    width: leftPaneWidth,
-    onWidthChange: onLeftPaneWidthChange,
-    minLeft: MIN_LEFT_PANE_WIDTH,
-    minRight: MIN_RIGHT_PANE_WIDTH
-  });
-
-  const effectiveWidth = dragging ? dragWidth : leftPaneWidth;
-  const leftPaneStyle = effectiveWidth != null
-    ? { width: `${effectiveWidth}px`, flexShrink: 0 }
-    : { flex: '1 1 50%', minWidth: 0 };
-
-  const [swaggerReady, setSwaggerReady] = useState(false);
-
-  useEffect(() => {
-    setSwaggerReady(false);
-  }, [content]);
-
-  const handleSwaggerComplete = useCallback(() => {
-    // Double rAF: wait for one full paint cycle so Swagger is actually on screen
-    // before hiding the loader — avoids a flash of unrendered content.
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => setSwaggerReady(true));
-    });
-  }, []);
-
   return (
-    <section
-      ref={mainSectionRef}
-      className={`main flex flex-grow pl-4 relative ${dragging ? 'dragging' : ''}`}
-    >
-      <div
-        className="api-spec-left-pane flex flex-grow relative h-full"
-        style={leftPaneStyle}
-      >
-        <CodeEditor
-          theme={displayedTheme}
-          value={readOnly ? content : editorContent}
-          readOnly={readOnly ? 'nocursor' : false}
-          onEdit={readOnly ? undefined : (val) => setEditorContent(val)}
-          onSave={readOnly ? undefined : handleSave}
-          mode="yaml"
-          font={get(preferences, 'font.codeFont', 'default')}
-        />
-        {!readOnly && onSave && (
-          <IconDeviceFloppy
-            onClick={handleSave}
-            color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
-            strokeWidth={1.5}
-            size={22}
-            className={`absolute right-0 top-0 m-4 ${
-              hasChanges ? 'cursor-pointer opacity-100' : 'cursor-default opacity-50'
-            }`}
-          />
-        )}
-      </div>
-      <div className="dragbar-wrapper" {...dragbarProps}>
-        <div className="dragbar-handle" />
-      </div>
-      <div
-        className="api-spec-right-pane relative"
-        style={{ flex: '1 1 50%', minWidth: 0 }}
-      >
-        <div style={{ visibility: swaggerReady ? 'visible' : 'hidden', height: '100%' }}>
-          <Swagger spec={content} onComplete={handleSwaggerComplete} />
-        </div>
-        {!swaggerReady && (
-          <div
-            className="absolute inset-0 flex items-center justify-center gap-2"
-            style={{ background: theme.bg }}
-          >
-            <div className="flex items-center justify-center gap-2 opacity-70">
-              <IconLoader2 size={20} className="animate-spin" />
-              <span>Generating preview…</span>
-            </div>
+    <section className="main flex flex-grow pl-4 relative">
+      <div className="w-full grid grid-cols-2">
+        <div className="col-span-1">
+          <div className="flex flex-grow relative">
+            <CodeEditor
+              theme={displayedTheme}
+              value={readOnly ? content : editorContent}
+              readOnly={readOnly ? 'nocursor' : false}
+              onEdit={readOnly ? undefined : (val) => setEditorContent(val)}
+              onSave={readOnly ? undefined : handleSave}
+              mode="yaml"
+              font={get(preferences, 'font.codeFont', 'default')}
+            />
+            {!readOnly && onSave && (
+              <IconDeviceFloppy
+                onClick={handleSave}
+                color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
+                strokeWidth={1.5}
+                size={22}
+                className={`absolute right-0 top-0 m-4 ${
+                  hasChanges ? 'cursor-pointer opacity-100' : 'cursor-default opacity-50'
+                }`}
+              />
+            )}
           </div>
-        )}
+        </div>
+        <div className="col-span-1">
+          <Suspense fallback="">
+            <Swagger spec={content} />
+          </Suspense>
+        </div>
       </div>
     </section>
   );

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

@@ -17,35 +17,6 @@ const StyledWrapper = styled.div`
   .react-tooltip {
     z-index: 10;
   }
-
-  section.main.dragging {
-    cursor: col-resize;
-    user-select: none;
-  }
-
-  div.dragbar-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 10px;
-    min-width: 10px;
-    padding: 0;
-    cursor: col-resize;
-    background: transparent;
-    position: relative;
-    flex-shrink: 0;
-
-    div.dragbar-handle {
-      display: flex;
-      height: 100%;
-      width: 1px;
-      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
-    }
-
-    &:hover div.dragbar-handle {
-      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
-    }
-  }
 `;
 
 export default StyledWrapper;

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

@@ -1,11 +1,11 @@
-import React, { forwardRef, useRef, useCallback } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import find from 'lodash/find';
 import { useSelector, useDispatch } from 'react-redux';
 import { IconFileCode, IconDots } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 import SpecViewer from './SpecViewer';
 import Dropdown from 'components/Dropdown';
-import { openApiSpec, saveApiSpecToFile, updateApiSpecPanelLeftPaneWidth } from 'providers/ReduxStore/slices/apiSpec';
+import { openApiSpec, saveApiSpecToFile } from 'providers/ReduxStore/slices/apiSpec';
 import { useState } from 'react';
 import CreateApiSpec from 'components/Sidebar/ApiSpecs/CreateApiSpec';
 import toast from 'react-hot-toast';
@@ -21,16 +21,7 @@ const ApiSpecPanel = () => {
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
   let apiSpec = find(apiSpecs, (c) => c.uid === activeApiSpecUid);
-  const { filename, pathname, raw, uid, leftPaneWidth } = apiSpec || {};
-
-  const handleLeftPaneWidthChange = useCallback(
-    (w) => {
-      if (!uid) return;
-      dispatch(updateApiSpecPanelLeftPaneWidth({ uid, leftPaneWidth: w }));
-    },
-    [dispatch, uid]
-  );
-
+  const { filename, pathname, raw, uid } = apiSpec || {};
   if (!uid) {
     return <div className="p-4 opacity-50">API Spec not found!</div>;
   }
@@ -88,8 +79,6 @@ const ApiSpecPanel = () => {
       <SpecViewer
         content={raw}
         onSave={(content) => dispatch(saveApiSpecToFile({ uid, content }))}
-        leftPaneWidth={leftPaneWidth ?? null}
-        onLeftPaneWidthChange={handleLeftPaneWidthChange}
       />
     </StyledWrapper>
   );

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

@@ -52,14 +52,6 @@ const AppTitleBar = () => {
     const { ipcRenderer } = window;
     if (!ipcRenderer) return;
 
-    ipcRenderer.invoke('renderer:window-is-fullscreen')
-      .then((fullscreen) => {
-        setIsFullScreen(fullscreen);
-      })
-      .catch((error) => {
-        console.error('Error getting initial fullscreen state:', error);
-      });
-
     const removeEnterFullScreenListener = ipcRenderer.on('main:enter-full-screen', () => {
       setIsFullScreen(true);
     });
@@ -146,18 +138,14 @@ const AppTitleBar = () => {
   };
 
   const handleWorkspaceSwitch = (workspaceUid) => {
-    if (workspaceUid === activeWorkspaceUid) return;
-
     dispatch(switchWorkspace(workspaceUid));
     toast.success(`Switched to ${getWorkspaceDisplayName(workspaces.find((w) => w.uid === workspaceUid)?.name)}`);
   };
 
   const handleOpenWorkspace = async () => {
     try {
-      const result = await dispatch(openWorkspaceDialog());
-      if (result) {
-        toast.success('Workspace opened successfully');
-      }
+      await dispatch(openWorkspaceDialog());
+      toast.success('Workspace opened successfully');
     } catch (error) {
       toast.error(error.message || 'Failed to open workspace');
     }

packages/bruno-app/src/components/AppTitleBar/index.spec.js

@@ -1,128 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, waitFor, act } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-
-jest.mock('ui/MenuDropdown', () => ({ children }) => <div>{children}</div>);
-jest.mock('ui/ActionIcon', () => ({ children, onClick, label }) => (
-  <button onClick={onClick} aria-label={label}>{children}</button>
-));
-jest.mock('components/ResponsePane/ResponseLayoutToggle', () => () => null);
-
-import AppTitleBar from './index';
-
-const theme = {
-  text: '#333',
-  sidebar: {
-    bg: '#fff',
-    color: '#333',
-    muted: '#888',
-    collection: { item: { hoverBg: '#eee' } }
-  },
-  dropdown: { color: '#333', mutedText: '#888', hoverBg: '#eee' }
-};
-
-const mockStore = configureStore({
-  reducer: {
-    workspaces: (state = { workspaces: [], activeWorkspaceUid: null }) => state,
-    app: (state = { preferences: {}, sidebarCollapsed: false }) => state,
-    logs: (state = { isConsoleOpen: false }) => state
-  }
-});
-
-const renderWithProviders = () => render(
-  <Provider store={mockStore}>
-    <ThemeProvider theme={theme}>
-      <AppTitleBar />
-    </ThemeProvider>
-  </Provider>
-);
-
-const getTitleBar = (container) => container.querySelector('.app-titlebar');
-
-const mockInvokeWithFullscreen = (isFullScreen) => jest.fn((channel) => {
-  if (channel === 'renderer:window-is-fullscreen') return Promise.resolve(isFullScreen);
-  return Promise.resolve(false);
-});
-
-describe('AppTitleBar — fullscreen state sync', () => {
-  let ipcListeners;
-
-  beforeEach(() => {
-    ipcListeners = {};
-    window.ipcRenderer = {
-      invoke: jest.fn().mockResolvedValue(false),
-      send: jest.fn(),
-      on: jest.fn((channel, cb) => {
-        ipcListeners[channel] = cb;
-        return jest.fn();
-      })
-    };
-  });
-
-  afterEach(() => {
-    delete window.ipcRenderer;
-  });
-
-  describe('initial state on mount', () => {
-    it('should query the main process for current fullscreen state', async () => {
-      renderWithProviders();
-      await waitFor(() => {
-        expect(window.ipcRenderer.invoke).toHaveBeenCalledWith('renderer:window-is-fullscreen');
-      });
-    });
-
-    it('should apply fullscreen class when window is already fullscreen at mount', async () => {
-      window.ipcRenderer.invoke = mockInvokeWithFullscreen(true);
-
-      const { container } = renderWithProviders();
-
-      await waitFor(() => {
-        expect(getTitleBar(container)).toHaveClass('fullscreen');
-      });
-    });
-
-    it('should not apply fullscreen class when window is windowed at mount', async () => {
-      const { container } = renderWithProviders();
-
-      await waitFor(() => {
-        expect(window.ipcRenderer.invoke).toHaveBeenCalledWith('renderer:window-is-fullscreen');
-      });
-      expect(getTitleBar(container)).not.toHaveClass('fullscreen');
-    });
-  });
-
-  describe('fullscreen transitions after mount', () => {
-    it('should add fullscreen class on main:enter-full-screen event', async () => {
-      const { container } = renderWithProviders();
-
-      await waitFor(() => {
-        expect(window.ipcRenderer.invoke).toHaveBeenCalledWith('renderer:window-is-fullscreen');
-      });
-
-      act(() => {
-        ipcListeners['main:enter-full-screen']();
-      });
-
-      expect(getTitleBar(container)).toHaveClass('fullscreen');
-    });
-
-    it('should remove fullscreen class on main:leave-full-screen event', async () => {
-      window.ipcRenderer.invoke = mockInvokeWithFullscreen(true);
-
-      const { container } = renderWithProviders();
-
-      await waitFor(() => {
-        expect(getTitleBar(container)).toHaveClass('fullscreen');
-      });
-
-      act(() => {
-        ipcListeners['main:leave-full-screen']();
-      });
-
-      expect(getTitleBar(container)).not.toHaveClass('fullscreen');
-    });
-  });
-});

packages/bruno-app/src/components/AppView/EmptyAppState.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { IconAppWindow } from '@tabler/icons';
-
-const Wrapper = styled.div`
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed ${(props) => props.theme.border.border1};
-  border-radius: 4px;
-  background: ${(props) => props.theme.background.surface0};
-  color: ${(props) => props.theme.colors.text.muted};
-
-  .empty-app-inner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 2rem;
-    text-align: center;
-    max-width: 360px;
-  }
-
-  .empty-app-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: ${(props) => props.theme.text};
-  }
-
-  .empty-app-hint {
-    font-size: 12px;
-    line-height: 1.4;
-  }
-`;
-
-const EmptyAppState = ({ title = 'No app yet', hint }) => (
-  <Wrapper data-testid="empty-app-state">
-    <div className="empty-app-inner">
-      <IconAppWindow size={32} strokeWidth={1.25} />
-      <div className="empty-app-title">{title}</div>
-      {hint ? <div className="empty-app-hint">{hint}</div> : null}
-    </div>
-  </Wrapper>
-);
-
-export default EmptyAppState;

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

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  flex-grow: 1;
-  padding: 0.5rem;
-
-  .app-view-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 0.25rem 0.4rem;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .app-view-toolbar .app-exit-btn {
-    cursor: pointer;
-    padding: 2px 8px;
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 3px;
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-
-    &:hover {
-      color: ${(props) => props.theme.text};
-      border-color: ${(props) => props.theme.text};
-    }
-  }
-
-  .app-webview-container {
-    flex: 1 1 0;
-    min-height: 0;
-    display: flex;
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 4px;
-    overflow: hidden;
-    background: ${(props) => props.theme.background.surface0};
-  }
-
-  .app-webview {
-    width: 100%;
-    height: 100%;
-    flex: 1 1 0;
-    border: 0;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,307 +0,0 @@
-import React, { useRef, useEffect, useCallback, useMemo } from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import { useDispatch } from 'react-redux';
-import { sendNetworkRequest } from 'utils/network/index';
-import {
-  findEnvironmentInCollection,
-  getEnvironmentVariables,
-  getGlobalEnvironmentVariables
-} from 'utils/collections';
-import {
-  responseReceived,
-  appSetRuntimeVariable,
-  toggleAppMode,
-  initRunRequestEvent
-} from 'providers/ReduxStore/slices/collections';
-import { uuid } from 'utils/common';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-import EmptyAppState from './EmptyAppState';
-import {
-  SENTINEL,
-  wrapHtml,
-  toDataUrl,
-  serializeTimeline,
-  projectResponse,
-  useAppWebview
-} from './webview-bridge';
-
-// Request-level ctx bootstrap. Injected into the guest so window.ctx exists
-// before user scripts run.
-const REQUEST_CTX_BOOTSTRAP = `<script>
-(function () {
-  if (window.__brunoBootstrapped) return;
-  window.__brunoBootstrapped = true;
-
-  var SENTINEL = ${JSON.stringify(SENTINEL)};
-  var pending = new Map();
-  var nextRequestId = 0;
-
-  function sendToHost(payload) {
-    try { console.log(SENTINEL + JSON.stringify(payload)); } catch (e) {}
-  }
-
-  var ctx = {
-    theme: 'light',
-    response: null,
-    assertionResults: [],
-    testResults: [],
-    variables: {},
-
-    onThemeChange: null,
-    onResponseUpdate: null,
-    onResultsUpdate: null,
-    onVariablesUpdate: null,
-
-    sendRequest: function (overrides) {
-      return new Promise(function (resolve, reject) {
-        var requestId = ++nextRequestId;
-        pending.set(requestId, { resolve: resolve, reject: reject });
-        sendToHost({ type: 'sendRequest', requestId: requestId, overrides: overrides || {} });
-      });
-    },
-    setRuntimeVariable: function (key, value) {
-      sendToHost({ type: 'setRuntimeVariable', key: String(key), value: value });
-    },
-    log: function () {
-      var args = Array.prototype.slice.call(arguments);
-      sendToHost({ type: 'log', args: args });
-    }
-  };
-  window.ctx = ctx;
-
-  function applyTheme(theme) {
-    ctx.theme = theme || 'light';
-    if (document.body) {
-      document.body.classList.remove('light', 'dark');
-      document.body.classList.add(ctx.theme);
-    }
-  }
-
-  window.__brunoReceive = function (msg) {
-    if (!msg) return;
-    switch (msg.type) {
-      case 'state':
-        applyTheme(msg.theme);
-        ctx.response = msg.response || null;
-        ctx.assertionResults = msg.assertionResults || [];
-        ctx.testResults = msg.testResults || [];
-        ctx.variables = msg.variables || {};
-        break;
-      case 'theme':
-        applyTheme(msg.theme);
-        if (typeof ctx.onThemeChange === 'function') ctx.onThemeChange(ctx.theme);
-        break;
-      case 'responseUpdate':
-        ctx.response = msg.response || null;
-        if (typeof ctx.onResponseUpdate === 'function') ctx.onResponseUpdate(ctx.response);
-        break;
-      case 'results':
-        ctx.assertionResults = msg.assertionResults || [];
-        ctx.testResults = msg.testResults || [];
-        if (typeof ctx.onResultsUpdate === 'function') {
-          ctx.onResultsUpdate({ assertionResults: ctx.assertionResults, testResults: ctx.testResults });
-        }
-        break;
-      case 'variables':
-        ctx.variables = msg.variables || {};
-        if (typeof ctx.onVariablesUpdate === 'function') ctx.onVariablesUpdate(ctx.variables);
-        break;
-      case 'response': {
-        var entry = pending.get(msg.requestId);
-        if (!entry) return;
-        pending.delete(msg.requestId);
-        if (msg.error) entry.reject(new Error(msg.error));
-        else entry.resolve(msg.response);
-        break;
-      }
-    }
-  };
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function () { sendToHost({ type: 'ready' }); });
-  } else {
-    sendToHost({ type: 'ready' });
-  }
-})();
-</script>`;
-
-const buildVariables = (collection) => {
-  const env = getEnvironmentVariables(collection);
-  const global = getGlobalEnvironmentVariables({
-    globalEnvironments: collection?.globalEnvironments || [],
-    activeGlobalEnvironmentUid: collection?.activeGlobalEnvironmentUid
-  });
-  return {
-    ...global,
-    ...env,
-    ...(collection?.collectionVariables || {}),
-    ...(collection?.runtimeVariables || {})
-  };
-};
-
-const AppView = ({ item, collection, code }) => {
-  const dispatch = useDispatch();
-  const { displayedTheme } = useTheme();
-  const src = useMemo(() => toDataUrl(wrapHtml(REQUEST_CTX_BOOTSTRAP, code || '')), [code]);
-
-  const environment = useMemo(
-    () => findEnvironmentInCollection(collection, collection.activeEnvironmentUid),
-    [collection]
-  );
-  const variables = useMemo(() => buildVariables(collection), [collection]);
-  const response = useMemo(() => (item.response ? projectResponse(item.response) : null), [item.response]);
-  const assertionResults = useMemo(() => item.assertionResults || [], [item.assertionResults]);
-  const testResults = useMemo(() => item.testResults || [], [item.testResults]);
-
-  // pushToGuest is produced by useAppWebview, which itself needs handleGuestMessage —
-  // routing through a ref lets the callbacks call the *latest* pushToGuest without
-  // creating a circular useCallback dependency. Without this, the request-id reply
-  // (and error reply) close over the first-render no-op pushToGuest and the guest's
-  // ctx.sendRequest() promise never resolves.
-  const pushToGuestRef = useRef(() => {});
-
-  const handleSendRequest = useCallback(
-    async (requestId, overrides) => {
-      const push = pushToGuestRef.current;
-      try {
-        // Mint a requestUid and register the run so the main process emits its
-        // test/assertion/script events against an id the store recognises — this
-        // is what makes ctx.testResults / ctx.assertionResults populate.
-        const requestUid = uuid();
-        const requestItem = cloneDeep(item.draft || item);
-        requestItem.requestUid = requestUid;
-        dispatch(initRunRequestEvent({ requestUid, itemUid: item.uid, collectionUid: collection.uid }));
-
-        // Variable overrides: accept flat keys or { variables: {...} }.
-        const flatOverrides = overrides && typeof overrides === 'object' ? { ...overrides } : {};
-        const explicitVars = flatOverrides.variables;
-        delete flatOverrides.variables;
-        const mergedRuntime = {
-          ...(collection.runtimeVariables || {}),
-          ...flatOverrides,
-          ...(explicitVars && typeof explicitVars === 'object' ? explicitVars : {})
-        };
-
-        const result = await sendNetworkRequest(requestItem, collection, environment, mergedRuntime);
-
-        // sendNetworkRequest resolves on network/request errors with `error` set —
-        // surface as a guest-side promise rejection rather than a fake success.
-        if (result?.error) {
-          const errorMessage = typeof result.error === 'string'
-            ? result.error
-            : result.error?.message || 'Request failed';
-          push({ type: 'response', requestId, error: errorMessage });
-          return;
-        }
-
-        dispatch(
-          responseReceived({
-            itemUid: item.uid,
-            collectionUid: collection.uid,
-            response: {
-              status: result.status,
-              statusText: result.statusText,
-              headers: result.headers,
-              data: result.data,
-              dataBuffer: result.dataBuffer,
-              size: result.size,
-              duration: result.duration,
-              timeline: serializeTimeline(result.timeline)
-            }
-          })
-        );
-
-        push({ type: 'response', requestId, response: projectResponse(result) });
-      } catch (err) {
-        push({ type: 'response', requestId, error: err?.message || 'Request failed' });
-      }
-    },
-    [item, collection, environment, dispatch]
-  );
-
-  const handleGuestMessage = useCallback(
-    (data) => {
-      switch (data?.type) {
-        case 'ready':
-          break;
-        case 'sendRequest':
-          handleSendRequest(data.requestId, data.overrides);
-          break;
-        case 'setRuntimeVariable':
-          if (typeof data.key === 'string' && data.key.length) {
-            dispatch(appSetRuntimeVariable({ collectionUid: collection.uid, key: data.key, value: data.value }));
-          }
-          break;
-        case 'log':
-          console.log('[app]', ...(data.args || []));
-          break;
-        default:
-          break;
-      }
-    },
-    [handleSendRequest, dispatch, collection.uid]
-  );
-
-  const { domReady, pushToGuest, webviewRef } = useAppWebview(handleGuestMessage);
-  pushToGuestRef.current = pushToGuest;
-
-  // Push a full state snapshot on each readiness transition. Subsequent changes
-  // are handled by the granular effects below; using a ref avoids re-firing
-  // this effect (which would be a needless full re-broadcast).
-  const stateRef = useRef();
-  stateRef.current = { theme: displayedTheme, response, assertionResults, testResults, variables };
-  useEffect(() => {
-    if (!domReady) return;
-    pushToGuest({ type: 'state', ...stateRef.current });
-  }, [domReady, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'theme', theme: displayedTheme });
-  }, [displayedTheme, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'responseUpdate', response });
-  }, [response, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'results', assertionResults, testResults });
-  }, [assertionResults, testResults, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'variables', variables });
-  }, [variables, pushToGuest]);
-
-  const disableApp = useCallback(() => {
-    dispatch(toggleAppMode({ enabled: false, itemUid: item.uid, collectionUid: collection.uid }));
-  }, [dispatch, item.uid, collection.uid]);
-
-  return (
-    <StyledWrapper data-testid="app-view">
-      <div className="app-view-toolbar">
-        <span>App mode - {item.name}</span>
-        <button type="button" className="app-exit-btn" data-testid="app-exit-button" onClick={disableApp}>
-          Exit to editor
-        </button>
-      </div>
-      {code && code.trim().length ? (
-        <div className="app-webview-container">
-          <webview
-            ref={webviewRef}
-            src={src}
-            partition="persist:bruno-app-view"
-            webpreferences="disableDialogs=true, javascript=yes"
-            className="app-webview"
-          />
-        </div>
-      ) : (
-        <EmptyAppState
-          title="No app yet"
-          hint="Switch to the App tab on this request and write some HTML/JS to get started."
-        />
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default AppView;

packages/bruno-app/src/components/AppView/webview-bridge.js

@@ -1,200 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-/*
- * Shared transport for Bruno apps that run inside an Electron <webview>:
- *   host  -> guest : webview.executeJavaScript(`window.__brunoReceive(<json>)`)
- *   guest -> host  : console.log(SENTINEL + json), surfaced via 'console-message'
- *
- * Both the request-level AppView and the standalone CollectionApp use this — they
- * differ only in the bootstrap script (which builds window.ctx) and the message
- * handler the host registers.
- */
-export const SENTINEL = '__BRUNO_APP_MSG__';
-
-// JSON-encode for safe inlining into an executeJavaScript() string literal.
-// U+2028/U+2029 are legal in JSON strings but illegal as raw JS source.
-export const toJsArg = (value) =>
-  JSON.stringify(value === undefined ? null : value)
-    .replace(/</g, '\\u003c')
-    .replace(/[\u2028]/g, '\\u2028')
-    .replace(/[\u2029]/g, '\\u2029');
-
-const FRAGMENT_STYLES = `<style>
-  * { box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    margin: 0;
-    background: #ffffff;
-    color: #1e1e1e;
-    transition: background-color 0.15s, color 0.15s;
-  }
-  body.dark { background: #1e1e1e; color: #e0e0e0; }
-</style>`;
-
-/**
- * Wrap user code into a guest document, injecting the host-supplied bootstrap
- * script as early as possible (right after <head>) so window.ctx exists before
- * any user script runs. Full HTML documents have the bootstrap injected; bare
- * fragments are placed inside a minimal shell.
- */
-export const wrapHtml = (bootstrap, userCode) => {
-  const code = userCode || '';
-  const isFullDocument = /<html[\s>]/i.test(code) || /<!doctype/i.test(code);
-
-  if (isFullDocument) {
-    if (/<head[^>]*>/i.test(code)) {
-      return code.replace(/<head[^>]*>/i, (m) => `${m}${bootstrap}`);
-    }
-    if (/<body[^>]*>/i.test(code)) {
-      return code.replace(/<body[^>]*>/i, (m) => `${m}${bootstrap}`);
-    }
-    return `${bootstrap}${code}`;
-  }
-
-  return `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  ${FRAGMENT_STYLES}
-  ${bootstrap}
-</head>
-<body>
-${code}
-</body>
-</html>`;
-};
-
-export const toDataUrl = (html) =>
-  `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
-
-export const serializeTimeline = (timeline) => {
-  if (!Array.isArray(timeline)) return timeline;
-  return timeline.map((entry) => ({
-    ...entry,
-    timestamp: entry.timestamp instanceof Date ? entry.timestamp.getTime() : entry.timestamp
-  }));
-};
-
-export const projectResponse = (r) => ({
-  status: r?.status ?? null,
-  statusText: r?.statusText ?? null,
-  data: r?.data ?? null,
-  headers: r?.headers ?? null,
-  duration: r?.duration ?? null,
-  size: r?.size ?? null
-});
-
-/**
- * useAppWebview — manages an Electron <webview> guest and provides a typed
- * messaging channel back to the host.
- *
- *   const { domReady, pushToGuest, webviewRef } = useAppWebview(handleGuestMessage);
- *   …
- *   <webview ref={webviewRef} src={…} … />
- *
- * `webviewRef` is a **callback ref** (not an object ref). React invokes it with
- * the element on mount and with `null` on unmount, which is the only way to
- * reliably re-attach listeners when the <webview> is unmounted and remounted —
- * e.g. when CollectionApp's user toggles between Code and Preview views. An
- * object-ref + useEffect approach would not re-fire on remount because the ref
- * object's identity is stable across mounts.
- *
- * pushToGuest({…}) is a no-op until the guest's dom-ready fires (and after a
- * reload, until it fires again). Safe to call eagerly from effects.
- */
-export const useAppWebview = (onGuestMessage) => {
-  const [domReady, setDomReady] = useState(false);
-
-  // Latest DOM element (for pushToGuest) and latest message handler (so the
-  // listener captures fresh state without needing to be re-bound).
-  const webviewElRef = useRef(null);
-  const onGuestMessageRef = useRef(onGuestMessage);
-  onGuestMessageRef.current = onGuestMessage;
-
-  // Outgoing messages sent before the guest is ready are queued and flushed by
-  // the dom-ready effect below. This is critical for guest scripts that call
-  // promise-returning ctx APIs (e.g. ctx.listRequests) at parse time — the host
-  // receives the request via console-message before Electron's `dom-ready`
-  // fires, and without a queue the reply gets dropped and the promise never
-  // resolves.
-  const pendingOutbox = useRef([]);
-
-  const sendToWebview = (webview, msg) => {
-    try {
-      webview.executeJavaScript(
-        `window.__brunoReceive && window.__brunoReceive(${toJsArg(msg)})`
-      ).catch(() => {});
-    } catch (_) {
-      /* webview not yet attached */
-    }
-  };
-
-  const pushToGuest = useCallback(
-    (msg) => {
-      const webview = webviewElRef.current;
-      if (!webview || !domReady) {
-        pendingOutbox.current.push(msg);
-        return;
-      }
-      sendToWebview(webview, msg);
-    },
-    [domReady]
-  );
-
-  // Flush whatever piled up while the guest was still loading.
-  useEffect(() => {
-    if (!domReady) return;
-    const webview = webviewElRef.current;
-    if (!webview) return;
-    const queue = pendingOutbox.current;
-    if (!queue.length) return;
-    pendingOutbox.current = [];
-    for (const msg of queue) sendToWebview(webview, msg);
-  }, [domReady]);
-
-  // Stable callback ref. We stash the per-element listener bag on the element
-  // itself so we can clean up exactly the right listeners on unmount or replace.
-  const webviewRef = useCallback((element) => {
-    const prev = webviewElRef.current;
-    if (prev && prev !== element) {
-      const h = prev.__brunoHandlers;
-      if (h) {
-        prev.removeEventListener('console-message', h.onConsoleMessage);
-        prev.removeEventListener('dom-ready', h.onDomReady);
-        prev.removeEventListener('did-start-loading', h.onStartLoading);
-        prev.__brunoHandlers = null;
-      }
-    }
-
-    // Queued messages belong to the prior guest; drop them on element replace.
-    pendingOutbox.current = [];
-
-    webviewElRef.current = element || null;
-    // dom-ready will fire fresh on the new element; until then pushToGuest no-ops.
-    setDomReady(false);
-
-    if (!element) return;
-
-    const onConsoleMessage = (e) => {
-      const text = e?.message;
-      if (typeof text !== 'string' || !text.startsWith(SENTINEL)) return;
-      try {
-        onGuestMessageRef.current(JSON.parse(text.slice(SENTINEL.length)));
-      } catch (_) {
-        /* not our message */
-      }
-    };
-    const onDomReady = () => setDomReady(true);
-    // A reload (code edit) tears down the guest; reset readiness so the next
-    // dom-ready can flip us back to true.
-    const onStartLoading = () => setDomReady(false);
-
-    element.__brunoHandlers = { onConsoleMessage, onDomReady, onStartLoading };
-    element.addEventListener('console-message', onConsoleMessage);
-    element.addEventListener('dom-ready', onDomReady);
-    element.addEventListener('did-start-loading', onStartLoading);
-  }, []);
-
-  return { domReady, pushToGuest, webviewRef };
-};

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

@@ -31,7 +31,7 @@ const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
         />
       </div>
       <div className="flex btn-action justify-between items-center mt-3">
-        <button className="text-link select-none ml-auto" data-testid="key-value-edit-toggle" onClick={onToggle}>
+        <button className="text-link select-none ml-auto" onClick={onToggle}>
           Key/Value Edit
         </button>
       </div>

packages/bruno-app/src/components/ChangelogTab/CHANGELOG.md

@@ -1,7 +0,0 @@
-# What's New in Bruno
-
-- Various stability and performance improvements.
-
----
-
-For the full release history, see the [Bruno releases page](https://github.com/usebruno/bruno/releases).

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

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-
-  .changelog-header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid ${(props) => props.theme.requestTabs?.border || props.theme.sidebar?.border || 'transparent'};
-    color: ${(props) => props.theme.text};
-
-    .header-version {
-      font-size: ${(props) => props.theme.font?.size?.sm || '0.85em'};
-      color: ${(props) => props.theme.colors?.text?.muted || props.theme.text};
-      opacity: 0.7;
-    }
-  }
-
-  .changelog-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem 1.5rem 2rem 1.5rem;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IconConfetti } from '@tabler/icons';
-import Markdown from 'components/MarkDown';
-import { version } from '../../../package.json';
-import changelogContent from './CHANGELOG.md';
-import StyledWrapper from './StyledWrapper';
-
-const ChangelogTab = () => {
-  return (
-    <StyledWrapper>
-      <div className="changelog-header">
-        <IconConfetti size={18} strokeWidth={1.5} />
-        <span>What's New</span>
-        <span className="header-version">v{version}</span>
-      </div>
-      <div className="changelog-body">
-        <Markdown content={changelogContent} onDoubleClick={() => {}} />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default ChangelogTab;

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

@@ -45,15 +45,6 @@ const StyledWrapper = styled.div`
     text-decoration: underline;
   }
 
-  .cm-ghost-text-ai {
-    opacity: 0.45;
-    color: ${(props) => props.theme.colors.text.muted};
-    font-style: italic;
-    pointer-events: none;
-    user-select: none;
-    white-space: pre;
-  }
-
   /* Removes the glow outline around the folded json */
   .CodeMirror-foldmarker {
     text-shadow: none;
@@ -160,46 +151,14 @@ const StyledWrapper = styled.div`
   
   //matching bracket fix
   .CodeMirror-matchingbracket {
-    background: ${(props) => props.theme.status.success.background} !important;
-    text-decoration: unset;
-  }
-
-  .CodeMirror-nonmatchingbracket {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-    background: ${(props) => props.theme.status.danger.background} !important;
-    text-decoration: unset;
+    background: #5cc0b48c !important;
+    text-decoration:unset;
   }
 
   .cm-search-line-highlight {
     background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
   }
 
-  @keyframes cm-error-line-flash {
-    0%, 60% {
-      background-color: ${(props) => props.theme.status.danger.background};
-    }
-    100% {
-      background-color: transparent;
-    }
-  }
-
-  .CodeMirror .cm-error-line-flash {
-    background-color: transparent;
-    animation: cm-error-line-flash 3s ease-in-out;
-  }
-
-  .CodeMirror .cm-error-line-flash-gutter {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-    font-weight: 600;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .CodeMirror .cm-error-line-flash {
-      animation: none;
-      background-color: ${(props) => props.theme.status.danger.background};
-    }
-  }
-
   .cm-search-match {
     background: rgba(255, 193, 7, 0.25);
   }

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

@@ -6,12 +6,9 @@
  */
 
 import React, { createRef } from 'react';
-import { useSelector } from 'react-redux';
-import { debounce, isEqual } from 'lodash';
+import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
-import { setupAiAutocomplete } from 'utils/codemirror/aiGhostText';
-import { buildAutocompleteContext } from 'utils/ai';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
@@ -19,16 +16,7 @@ import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
 import { setupLinkAware } from 'utils/codemirror/linkAware';
 import { setupLintErrorTooltip } from 'utils/codemirror/lint-errors';
-import { setupCodeMirrorResizeRefresh } from 'utils/codemirror/resize';
 import CodeMirrorSearch from 'components/CodeMirrorSearch/index';
-import {
-  applyEditorState,
-  captureEditorState,
-  getDocKey,
-  readPersistedEditorState,
-  writePersistedEditorState
-} from './state-persistence';
-import { usePersistenceScope } from 'hooks/usePersistedState/PersistedScopeProvider';
 
 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -36,7 +24,7 @@ window.JSHINT = JSHINT;
 
 const TAB_SIZE = 2;
 
-class CodeEditor extends React.Component {
+export default class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -60,24 +48,8 @@ class CodeEditor extends React.Component {
     };
   }
 
-  // Thin wrapper around the pure getDocKey helper from state-persistence.js.
-  // Kept on the class so the rest of the lifecycle code reads naturally.
-  _getDocKey() {
-    return getDocKey(this.props);
-  }
-
   componentDidMount() {
     const variables = getAllVariables(this.props.collection, this.props.item);
-    /**
-     * No-op. We claim Cmd-Enter / Ctrl-Enter here only to suppress CodeMirror's
-     * sublime keymap default (insertLineAfter), which would otherwise insert a
-     * newline. sendRequest dispatch is owned by Mousetrap — the editor input has
-     * the `mousetrap` class (added below) so the global
-     * useKeybinding('sendRequest', …) in RequestTabPanel handles it, and only
-     * in request tabs. Falling through with CodeMirror.Pass when onRun is absent
-     * would re-introduce the newline in collection/folder-level editors.
-     */
-    const runShortcut = () => {};
 
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
@@ -102,6 +74,26 @@ class CodeEditor extends React.Component {
       scrollbarStyle: 'overlay',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
+        'Cmd-Enter': () => {
+          if (this.props.onRun) {
+            this.props.onRun();
+          }
+        },
+        'Ctrl-Enter': () => {
+          if (this.props.onRun) {
+            this.props.onRun();
+          }
+        },
+        'Cmd-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
+        'Ctrl-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
         'Cmd-F': (cm) => {
           this.setState({ searchBarVisible: true }, () => {
             this.searchBarRef.current?.focus();
@@ -112,10 +104,8 @@ class CodeEditor extends React.Component {
             this.searchBarRef.current?.focus();
           });
         },
-        'Cmd-H': this.props.readOnly ? false : 'replace',
-        'Ctrl-H': this.props.readOnly ? false : 'replace',
-        'Cmd-Enter': runShortcut,
-        'Ctrl-Enter': runShortcut,
+        'Cmd-H': 'replace',
+        'Ctrl-H': 'replace',
         'Tab': function (cm) {
           cm.getSelection().includes('\n') || editor.getLine(cm.getCursor().line) == cm.getSelection()
             ? cm.execCommand('indentMore')
@@ -205,49 +195,9 @@ class CodeEditor extends React.Component {
     });
 
     if (editor) {
-      // CM5 was constructed with props.value, so the editor already shows the
-      // right content. Read this tab's previously persisted view state from
-      // localStorage and apply it on top — restores folds, cursor, selection,
-      // undo history, and scroll position.
-      const docKey = getDocKey(this.props);
-      this._currentDocKey = docKey;
-      this.cachedValue = editor.getValue();
-      applyEditorState(
-        editor,
-        readPersistedEditorState({ scope: this.props.persistenceScope, key: docKey }),
-        this.cachedValue
-      );
-
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
-
-      // Persist view state immediately when the user folds or unfolds — without
-      // this, a fold only gets saved on the next tab switch / unmount. That
-      // makes the persistence feel "delayed" or random, especially across
-      // sub-tab switches that don't change the docKey or unmount the editor.
-      // Debounced so rapid fold/unfold (e.g. Cmd-Y to fold all) doesn't write
-      // to localStorage on every event.
-      this._persistViewStateDebounced = debounce(() => {
-        if (!this.editor || !this._currentDocKey) return;
-        writePersistedEditorState({
-          scope: this.props.persistenceScope,
-          key: this._currentDocKey,
-          state: captureEditorState(this.editor)
-        });
-      }, 250);
-      editor.on('fold', this._persistViewStateDebounced);
-      editor.on('unfold', this._persistViewStateDebounced);
-
       editor.scrollTo(null, this.props.initialScroll);
-      this._lastScrollTop = this.props.initialScroll || 0;
-      editor.on('scroll', () => {
-        const wrapper = editor.getWrapperElement();
-        if (wrapper && wrapper.offsetParent === null) return;
-        this._lastScrollTop = editor.getScrollInfo().top;
-        if (this.props.onScroll && typeof this.props.onScroll === 'function') {
-          this.props.onScroll(this._lastScrollTop);
-        }
-      });
       this.addOverlay();
 
       const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
@@ -263,36 +213,10 @@ class CodeEditor extends React.Component {
         autoCompleteOptions
       );
 
-      // AI ghost-text autocomplete (script editors only). Stays inert until
-      // the user has both enabled AI and configured a provider.
-      if (this.props.scriptType) {
-        this.aiAutocompleteCleanup = setupAiAutocomplete(editor, {
-          scriptType: this.props.scriptType,
-          isEnabled: () => {
-            const ai = this.props.aiPreferences;
-            return Boolean(ai?.enabled) && ai?.autocomplete?.enabled !== false;
-          },
-          getTriggerMode: () => this.props.aiPreferences?.autocomplete?.triggerMode || 'debounced',
-          getContext: () => buildAutocompleteContext({
-            item: this.props.item,
-            collection: this.props.collection,
-            scriptType: this.props.scriptType
-          })
-        });
-      }
-
       setupLinkAware(editor);
 
       // Setup lint error tooltip on line number hover
       this.cleanupLintErrorTooltip = setupLintErrorTooltip(editor);
-
-      // Add mousetrap class so Mousetrap captures shortcuts even when CodeMirror is focused
-      const cmInput = editor.getInputField();
-      if (cmInput) {
-        cmInput.classList.add('mousetrap');
-      }
-
-      this.cleanupResizeRefresh = setupCodeMirrorResizeRefresh(editor, this._node);
     }
   }
 
@@ -308,51 +232,18 @@ class CodeEditor extends React.Component {
       this.editor.options.jump.schema = this.props.schema;
       CodeMirror.signal(this.editor, 'change', this.editor);
     }
-    if (this.editor) {
-      // Two distinct update paths:
-      //   1. Doc key changed → tab switch → snapshot outgoing state, load new content, restore incoming state
-      //   2. Same doc, value changed → external content update → setValue (view state resets)
-      const newDocKey = getDocKey(this.props);
-      const docKeyChanged = newDocKey !== this._currentDocKey;
-
-      if (docKeyChanged) {
-        // Path 1 — tab switch.
-        // Snapshot the outgoing tab's view state to localStorage so a future
-        // visit can restore it. Then setValue the incoming content and apply
-        // any view state previously persisted for the incoming tab.
-        if (this._currentDocKey) {
-          writePersistedEditorState({
-            scope: this.props.persistenceScope,
-            key: this._currentDocKey,
-            state: captureEditorState(this.editor)
-          });
-        }
-        this.cachedValue = String(this?.props?.value ?? '');
-        this.editor.setValue(String(this.props.value) || '');
-        this._currentDocKey = newDocKey;
-        applyEditorState(
-          this.editor,
-          readPersistedEditorState({ scope: this.props.persistenceScope, key: newDocKey }),
-          this.cachedValue
-        );
-        // setValue resets the editor's mode-overlay state — re-apply the
-        // brunovariables overlay and re-evaluate lint config for the new content.
-        this.addOverlay();
-        this.editor.setOption(
-          'lint',
-          this.props.mode && this.editor.getValue().trim().length > 0 ? this.lintOptions : false
-        );
-      } else if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue) {
-        // Path 2 — same tab, new external value (e.g. a fresh response arrived
-        // while this tab was active). Update content; view state resets because
-        // line positions no longer correspond to anything. Invalidate the
-        // persisted snapshot too, since the saved cursor/folds/history reflect
-        // the prior content.
+    if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
+      // TODO: temporary fix for keeping cursor state when auto save and new line insertion collide PR#7098
+      const nextValue = this.props.value ?? '';
+      const currentValue = this.editor.getValue();
+      // Skip updating only when focused and editable; read-only editors (e.g. response viewer) must always show new value
+      if (this.editor.hasFocus?.() && currentValue !== nextValue && !this.props.readOnly) {
+        this.cachedValue = currentValue;
+      } else {
         const cursor = this.editor.getCursor();
-        this.cachedValue = String(this?.props?.value ?? '');
-        this.editor.setValue(String(this.props.value) || '');
+        this.cachedValue = nextValue;
+        this.editor.setValue(nextValue);
         this.editor.setCursor(cursor);
-        writePersistedEditorState({ scope: this.props.persistenceScope, key: this._currentDocKey, state: null });
       }
     }
 
@@ -399,35 +290,14 @@ class CodeEditor extends React.Component {
   componentWillUnmount() {
     if (this.editor) {
       if (this.props.onScroll) {
-        this.props.onScroll(this._lastScrollTop);
+        this.props.onScroll(this.editor);
       }
 
-      // Snapshot view state to localStorage before tearing down the editor so
-      // the next mount of a CodeEditor with this docKey can restore folds,
-      // cursor, selection, undo history, and scroll position.
-      if (this._currentDocKey) {
-        writePersistedEditorState({
-          scope: this.props.persistenceScope,
-          key: this._currentDocKey,
-          state: captureEditorState(this.editor)
-        });
-      }
-
-      this.aiAutocompleteCleanup?.();
       this.editor?._destroyLinkAware?.();
       this.editor.off('change', this._onEdit);
 
-      // Tear down the debounced fold-persistence listener. Cancel any pending
-      // call so it can't fire after we've already snapshotted state above.
-      if (this._persistViewStateDebounced) {
-        this.editor.off('fold', this._persistViewStateDebounced);
-        this.editor.off('unfold', this._persistViewStateDebounced);
-        this._persistViewStateDebounced.cancel?.();
-      }
-
       // Clean up lint error tooltip
       this.cleanupLintErrorTooltip?.();
-      this.cleanupResizeRefresh?.();
 
       const wrapper = this.editor.getWrapperElement();
       wrapper?.parentNode?.removeChild(wrapper);
@@ -489,20 +359,3 @@ class CodeEditor extends React.Component {
     }
   };
 }
-
-const CodeEditorWithPersistenceScope = React.forwardRef((props, ref) => {
-  const persistenceScope = usePersistenceScope();
-  const aiPreferences = useSelector((state) => state.app.preferences?.ai);
-  return (
-    <CodeEditor
-      {...props}
-      persistenceScope={persistenceScope}
-      aiPreferences={aiPreferences}
-      ref={ref}
-    />
-  );
-});
-
-CodeEditorWithPersistenceScope.displayName = 'CodeEditor';
-
-export default CodeEditorWithPersistenceScope;

packages/bruno-app/src/components/CodeEditor/state-persistence.js

@@ -1,129 +0,0 @@
-/*
- * CodeEditor view-state persistence — extracted for testability.
- *
- * Why this exists:
- * Every tab switch causes CodeMirror's setValue() to wipe folds, cursor,
- * selection, undo history, and scroll position. To preserve them, we serialize
- * the relevant pieces to localStorage under a stable key for each editor and
- * re-apply them on mount / tab switch. CodeMirror exposes a JSON-serializable
- * representation of its undo stack via getHistory()/setHistory(), which is what
- * makes Cmd-Z continue working across switches.
- *
- * Note: we deliberately do NOT persist the content itself — the canonical value
- * lives in Redux (props.value). We only persist the editor's "view" state on
- * top of that content. If content has drifted between save and restore, fold
- * positions are applied leniently (foldCode silently no-ops on invalid lines)
- * and history is skipped to avoid an inconsistent undo stack.
- */
-
-export const STORAGE_PREFIX = 'persisted::';
-export const DEFAULT_PERSISTENCE_SCOPE = 'global';
-export const STORAGE_SEGMENT = 'codeeditor';
-
-export const getScopedStorageKey = (scope, key) => {
-  const resolvedScope = scope || DEFAULT_PERSISTENCE_SCOPE;
-  return `${STORAGE_PREFIX}${resolvedScope}::${STORAGE_SEGMENT}::${key}`;
-};
-
-// Identifies which Doc state belongs to a given CodeEditor instance.
-//
-// Callers can pass an explicit `docKey` prop when the auto-derived key would
-// collide — e.g. Pre-Request vs Post-Response script editors share the same
-// item/mode/readOnly and need an extra disambiguator.
-//
-// Auto-derived parts:
-//   id       — distinguishes different tabs (requests or collections)
-//   mode     — distinguishes editors within the same tab (e.g. JSON body vs JS script)
-//   readOnly — distinguishes response viewer (ro) from body editor (rw) when modes match
-export const getDocKey = (props) => {
-  if (props.docKey) return props.docKey;
-  const id = props.item?.uid || props.collection?.uid || 'default';
-  const mode = props.mode || 'default';
-  const readOnly = props.readOnly ? 'ro' : 'rw';
-  return `${id}:${mode}:${readOnly}`;
-};
-
-export const readPersistedEditorState = ({ scope, key }) => {
-  try {
-    const raw = localStorage.getItem(getScopedStorageKey(scope, key));
-    return raw ? JSON.parse(raw) : null;
-  } catch {
-    return null;
-  }
-};
-
-export const writePersistedEditorState = ({ scope, key, state }) => {
-  try {
-    const storageKey = getScopedStorageKey(scope, key);
-    if (state == null) {
-      localStorage.removeItem(storageKey);
-    } else {
-      localStorage.setItem(storageKey, JSON.stringify(state));
-    }
-  } catch {
-    // localStorage may be unavailable or full (Chromium ~10 MB cap). Editor
-    // state is non-critical — content lives in Redux — so silently ignore.
-  }
-};
-
-export const captureEditorState = (editor) => {
-  if (!editor) return null;
-  const doc = editor.getDoc();
-  const folds = editor
-    .getAllMarks()
-    .filter((m) => m.__isFold)
-    .map((m) => m.find())
-    .filter(Boolean)
-    .map((range) => range.from);
-  return {
-    contentLength: doc.getValue().length,
-    cursor: doc.getCursor(),
-    selections: doc.listSelections(),
-    history: doc.getHistory(),
-    folds,
-    scrollY: editor.getScrollInfo().top
-  };
-};
-
-export const applyEditorState = (editor, state, currentContent) => {
-  if (!editor || !state) return;
-  const doc = editor.getDoc();
-  const contentMatches = state.contentLength === (currentContent || '').length;
-
-  // History/cursor/selection only make sense if content didn't drift — applying
-  // a stale undo stack to different content would let Cmd-Z replay edits that
-  // no longer correspond to anything visible.
-  if (contentMatches) {
-    if (state.history) {
-      try { doc.setHistory(state.history); } catch {}
-    }
-    if (state.cursor) {
-      try { doc.setCursor(state.cursor); } catch {}
-    }
-    if (state.selections && state.selections.length) {
-      try { doc.setSelections(state.selections); } catch {}
-    }
-  }
-  // Folds are cheap and lenient — try them either way.
-  // Sort innermost-first (line desc): when folds are nested, applying the
-  // inner one before the outer one is safer because brace-fold's findRange
-  // re-scans the line text. With outer-first, deeply nested arrays inside a
-  // folded object can fail to refold (issue specific to JSON arrays where
-  // the helper's lookback can land on the wrong opening character once the
-  // outer block is collapsed).
-  if (state.folds && state.folds.length) {
-    const sorted = [...state.folds].sort(
-      (a, b) => b.line - a.line || b.ch - a.ch
-    );
-    editor.operation(() => {
-      sorted.forEach((from) => {
-        try {
-          editor.foldCode(from, null, 'fold');
-        } catch {}
-      });
-    });
-  }
-  if (state.scrollY != null) {
-    try { editor.scrollTo(null, state.scrollY); } catch {}
-  }
-};

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

@@ -1,61 +0,0 @@
-import styled from 'styled-components';
-import { rgba } from 'polished';
-
-const StyledWrapper = styled.div`
-  .code-snippet {
-    font-family: monospace;
-    font-size: ${(props) => props.theme.font.size.xs};
-    line-height: 1.4;
-    overflow-x: auto;
-    border-radius: ${(props) => props.theme.border.radius.base};
-    background-color: ${(props) => props.theme.background.elevated};
-    border: 1px solid ${(props) => props.theme.border.border2};
-  }
-
-  .code-line {
-    display: flex;
-    align-items: stretch;
-  }
-
-  .code-line.highlighted-error {
-    background-color: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
-    border-left: 3px solid ${(props) => props.theme.colors.text.danger};
-  }
-
-  .code-line.highlighted-warning {
-    background-color: ${(props) => rgba(props.theme.colors.text.warning, 0.1)};
-    border-left: 3px solid ${(props) => props.theme.colors.text.warning};
-  }
-
-  .code-line:not(.highlighted-error):not(.highlighted-warning) {
-    border-left: 3px solid transparent;
-  }
-
-  .code-line-number {
-    min-width: 2.5rem;
-    text-align: right;
-    padding: 0 0.5rem;
-    color: ${(props) => props.theme.colors.text.muted};
-    user-select: none;
-    flex-shrink: 0;
-  }
-
-  .code-line-content {
-    white-space: pre;
-    padding: 0 0.5rem;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .code-line-separator {
-    border-left: 3px solid transparent;
-  }
-
-  .separator-content {
-    color: ${(props) => props.theme.colors.text.muted};
-    user-select: none;
-    padding: 0 0.5rem;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const renderLine = (line, highlightClass, hunkIdx) => {
-  const isHighlighted = line.isHighlighted || line.isError;
-  const key = hunkIdx != null ? `${hunkIdx}-${line.lineNumber}` : line.lineNumber;
-  return (
-    <div
-      key={key}
-      className={`code-line ${isHighlighted ? highlightClass : ''}`}
-      data-testid={isHighlighted ? 'code-line-error' : 'code-line'}
-    >
-      <span className="code-line-number">{line.lineNumber}</span>
-      <span className="code-line-content">
-        {isHighlighted ? '> ' : '  '}{line.content}
-      </span>
-    </div>
-  );
-};
-
-const CodeSnippet = ({ lines, hunks, variant = 'error' }) => {
-  const highlightClass = variant === 'warning' ? 'highlighted-warning' : 'highlighted-error';
-
-  if (hunks?.length) {
-    return (
-      <StyledWrapper>
-        <div className="code-snippet" data-testid="code-snippet">
-          {hunks.map((hunk, idx) => (
-            <React.Fragment key={idx}>
-              {hunk.hasSeparatorBefore && (
-                <div className="code-line code-line-separator">
-                  <span className="code-line-number"></span>
-                  <span className="code-line-content separator-content">{'\u22EE'}</span>
-                </div>
-              )}
-              {hunk.lines.map((line) => renderLine(line, highlightClass, idx))}
-            </React.Fragment>
-          ))}
-        </div>
-      </StyledWrapper>
-    );
-  }
-
-  if (!lines?.length) return null;
-
-  return (
-    <StyledWrapper>
-      <div className="code-snippet" data-testid="code-snippet">
-        {lines.map((line) => renderLine(line, highlightClass))}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default CodeSnippet;

packages/bruno-app/src/components/CodeSnippet/index.spec.js

@@ -1,140 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
-import CodeSnippet from './index';
-
-const theme = {
-  font: { size: { xs: '0.75rem' } },
-  background: { elevated: '#f5f5f5' },
-  border: { border2: '#e0e0e0', radius: { base: '4px' } },
-  colors: { text: { danger: '#ef4444', warning: '#f59e0b', muted: '#999' } }
-};
-
-const renderWithTheme = (component) => {
-  return render(
-    <ThemeProvider theme={theme}>
-      {component}
-    </ThemeProvider>
-  );
-};
-
-const sampleLines = [
-  { lineNumber: 3, content: 'const a = 1;', isHighlighted: false },
-  { lineNumber: 4, content: 'undefinedVar.foo();', isHighlighted: true },
-  { lineNumber: 5, content: 'const b = 2;', isHighlighted: false }
-];
-
-describe('CodeSnippet', () => {
-  it('should render nothing when lines is empty', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={[]} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('should render nothing when lines is null', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={null} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('should render all lines with line numbers', () => {
-    renderWithTheme(<CodeSnippet lines={sampleLines} />);
-    expect(screen.getByText('3')).toBeInTheDocument();
-    expect(screen.getByText('4')).toBeInTheDocument();
-    expect(screen.getByText('5')).toBeInTheDocument();
-  });
-
-  it('should apply error highlight class by default', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={sampleLines} variant="error" />);
-    const highlightedLine = container.querySelector('.highlighted-error');
-    expect(highlightedLine).toBeInTheDocument();
-  });
-
-  it('should apply warning highlight class when variant is warning', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={sampleLines} variant="warning" />);
-    const highlightedLine = container.querySelector('.highlighted-warning');
-    expect(highlightedLine).toBeInTheDocument();
-    expect(container.querySelector('.highlighted-error')).not.toBeInTheDocument();
-  });
-
-  it('should show > prefix on highlighted line for accessibility', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={sampleLines} />);
-    const codeLineContents = container.querySelectorAll('.code-line-content');
-    // The highlighted line (index 1) should start with "> "
-    expect(codeLineContents[1].textContent).toContain('> ');
-    // Non-highlighted lines should not have ">"
-    expect(codeLineContents[0].textContent).not.toContain('>');
-  });
-
-  it('should also support isError property for backward compatibility', () => {
-    const linesWithIsError = [
-      { lineNumber: 1, content: 'line 1', isError: false },
-      { lineNumber: 2, content: 'error line', isError: true },
-      { lineNumber: 3, content: 'line 3', isError: false }
-    ];
-    const { container } = renderWithTheme(<CodeSnippet lines={linesWithIsError} />);
-    expect(container.querySelector('.highlighted-error')).toBeInTheDocument();
-  });
-
-  describe('hunks prop', () => {
-    const sampleHunks = [
-      {
-        hasSeparatorBefore: false,
-        lines: [
-          { lineNumber: 1, content: 'const a = true;', isHighlighted: false },
-          { lineNumber: 2, content: 'pm.vault.get();', isHighlighted: true },
-          { lineNumber: 3, content: 'const b = false;', isHighlighted: false }
-        ]
-      },
-      {
-        hasSeparatorBefore: true,
-        lines: [
-          { lineNumber: 10, content: 'const x = null;', isHighlighted: false },
-          { lineNumber: 11, content: 'pm.cookies.jar();', isHighlighted: true },
-          { lineNumber: 12, content: 'const y = undefined;', isHighlighted: false }
-        ]
-      }
-    ];
-
-    it('should render all lines from all hunks', () => {
-      renderWithTheme(<CodeSnippet hunks={sampleHunks} variant="warning" />);
-      // line numbers
-      expect(screen.getByText('1')).toBeInTheDocument();
-      expect(screen.getByText('2')).toBeInTheDocument();
-      expect(screen.getByText('10')).toBeInTheDocument();
-      expect(screen.getByText('11')).toBeInTheDocument();
-      // content
-      expect(screen.getByText(/const a = true;/)).toBeInTheDocument();
-      expect(screen.getByText(/pm\.vault\.get\(\);/)).toBeInTheDocument();
-      expect(screen.getByText(/const x = null;/)).toBeInTheDocument();
-      expect(screen.getByText(/pm\.cookies\.jar\(\);/)).toBeInTheDocument();
-    });
-
-    it('should render separator between hunks when hasSeparatorBefore is true', () => {
-      const { container } = renderWithTheme(<CodeSnippet hunks={sampleHunks} variant="warning" />);
-      const separators = container.querySelectorAll('.code-line-separator');
-      expect(separators).toHaveLength(1);
-      // separator should appear between the two hunks, not before the first
-      const allRows = container.querySelectorAll('.code-line, .code-line-separator');
-      const separatorIndex = Array.from(allRows).findIndex((el) => el.classList.contains('code-line-separator'));
-      // first hunk has 3 lines (indices 0-2), separator should be at index 3
-      expect(separatorIndex).toBe(3);
-    });
-
-    it('should render the ellipsis character in separator', () => {
-      const { container } = renderWithTheme(<CodeSnippet hunks={sampleHunks} variant="warning" />);
-      const separator = container.querySelector('.separator-content');
-      expect(separator.textContent).toBe('\u22EE');
-    });
-
-    it('should apply warning highlights within hunks', () => {
-      const { container } = renderWithTheme(<CodeSnippet hunks={sampleHunks} variant="warning" />);
-      const highlighted = container.querySelectorAll('.highlighted-warning');
-      expect(highlighted).toHaveLength(2);
-    });
-
-    it('should render nothing when hunks is empty array', () => {
-      const { container } = renderWithTheme(<CodeSnippet hunks={[]} />);
-      expect(container.firstChild).toBeNull();
-    });
-  });
-});

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

@@ -1,84 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  padding: 0.5rem;
-
-  .app-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 0.25rem 0.5rem;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .app-toolbar .view-toggle {
-    display: flex;
-    align-items: center;
-    height: 24px;
-    border: 1px solid ${(props) => props.theme.input.border};
-    border-radius: ${(props) => props.theme.border.radius.base};
-    overflow: hidden;
-  }
-
-  .app-toolbar .view-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 10px;
-    height: 100%;
-    border: none;
-    border-right: 1px solid ${(props) => props.theme.input.border};
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    transition: background 0.15s ease, color 0.15s ease;
-    font-size: 11px;
-
-    &:last-child { border-right: none; }
-
-    &:hover:not(.active) {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-      color: ${(props) => props.theme.text};
-    }
-
-    &.active {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-      color: ${(props) => props.theme.primary.text};
-    }
-  }
-
-  .app-pane {
-    flex: 1 1 0;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .app-pane.code div.CodeMirror {
-    height: 100%;
-  }
-
-  .app-webview-container {
-    flex: 1 1 0;
-    min-height: 0;
-    display: flex;
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 4px;
-    overflow: hidden;
-    background: ${(props) => props.theme.background.surface0};
-  }
-
-  .app-webview {
-    width: 100%;
-    height: 100%;
-    flex: 1 1 0;
-    border: 0;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,396 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import classnames from 'classnames';
-import cloneDeep from 'lodash/cloneDeep';
-import get from 'lodash/get';
-import { useDispatch, useSelector } from 'react-redux';
-import { sendNetworkRequest } from 'utils/network/index';
-import {
-  findEnvironmentInCollection,
-  findItemInCollectionByPathname,
-  flattenItems,
-  getEnvironmentVariables,
-  getGlobalEnvironmentVariables,
-  isItemARequest
-} from 'utils/collections';
-import { uuid } from 'utils/common';
-import {
-  appSetRuntimeVariable,
-  initRunRequestEvent,
-  responseReceived,
-  updateAppCode
-} from 'providers/ReduxStore/slices/collections';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import CodeEditor from 'components/CodeEditor';
-import AIAssist from 'components/AIAssist';
-import { buildAiVariablesPayload, buildDocsContextFromCollection } from 'utils/ai';
-import StyledWrapper from './StyledWrapper';
-import EmptyAppState from '../AppView/EmptyAppState';
-import {
-  SENTINEL,
-  wrapHtml,
-  toDataUrl,
-  serializeTimeline,
-  projectResponse,
-  useAppWebview
-} from '../AppView/webview-bridge';
-
-/*
- * Standalone collection-/folder-level app — a file (.bru/.yml) of type 'app'
- * that lives in the sidebar and opens as its own tab. The user toggles between
- * Code (CodeEditor) and Preview (sandboxed <webview>); preview re-runs whenever
- * the code prop changes.
- *
- * Collection ctx surface differs from the request-level AppView:
- *   shared:  theme, log, variables, setRuntimeVariable, onThemeChange, onVariablesUpdate
- *   added:   collection, listRequests(), runRequest(pathname, overrides?)
- *   dropped: sendRequest, response, assertionResults, testResults
- *             (and their on* hooks — they only make sense for one request)
- */
-
-const COLLECTION_CTX_BOOTSTRAP = `<script>
-(function () {
-  if (window.__brunoBootstrapped) return;
-  window.__brunoBootstrapped = true;
-
-  var SENTINEL = ${JSON.stringify(SENTINEL)};
-  var pending = new Map();
-  var nextReplyId = 0;
-
-  function sendToHost(payload) {
-    try { console.log(SENTINEL + JSON.stringify(payload)); } catch (e) {}
-  }
-
-  function awaitReply(type, extra) {
-    return new Promise(function (resolve, reject) {
-      var replyId = ++nextReplyId;
-      pending.set(replyId, { resolve: resolve, reject: reject });
-      sendToHost(Object.assign({ type: type, replyId: replyId }, extra || {}));
-    });
-  }
-
-  var ctx = {
-    theme: 'light',
-    variables: {},
-    collection: null,
-
-    onThemeChange: null,
-    onVariablesUpdate: null,
-
-    listRequests: function () {
-      return awaitReply('listRequests');
-    },
-    runRequest: function (pathname, overrides) {
-      return awaitReply('runRequest', { pathname: String(pathname || ''), overrides: overrides || {} });
-    },
-    setRuntimeVariable: function (key, value) {
-      sendToHost({ type: 'setRuntimeVariable', key: String(key), value: value });
-    },
-    log: function () {
-      var args = Array.prototype.slice.call(arguments);
-      sendToHost({ type: 'log', args: args });
-    }
-  };
-  window.ctx = ctx;
-
-  function applyTheme(theme) {
-    ctx.theme = theme || 'light';
-    if (document.body) {
-      document.body.classList.remove('light', 'dark');
-      document.body.classList.add(ctx.theme);
-    }
-  }
-
-  window.__brunoReceive = function (msg) {
-    if (!msg) return;
-    switch (msg.type) {
-      case 'state':
-        applyTheme(msg.theme);
-        ctx.variables = msg.variables || {};
-        ctx.collection = msg.collection || null;
-        break;
-      case 'theme':
-        applyTheme(msg.theme);
-        if (typeof ctx.onThemeChange === 'function') ctx.onThemeChange(ctx.theme);
-        break;
-      case 'variables':
-        ctx.variables = msg.variables || {};
-        if (typeof ctx.onVariablesUpdate === 'function') ctx.onVariablesUpdate(ctx.variables);
-        break;
-      case 'collection':
-        ctx.collection = msg.collection || null;
-        break;
-      case 'reply': {
-        var entry = pending.get(msg.replyId);
-        if (!entry) return;
-        pending.delete(msg.replyId);
-        if (msg.error) entry.reject(new Error(msg.error));
-        else entry.resolve(msg.result);
-        break;
-      }
-    }
-  };
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function () { sendToHost({ type: 'ready' }); });
-  } else {
-    sendToHost({ type: 'ready' });
-  }
-})();
-</script>`;
-
-const buildVariables = (collection) => {
-  const env = getEnvironmentVariables(collection);
-  const global = getGlobalEnvironmentVariables({
-    globalEnvironments: collection?.globalEnvironments || [],
-    activeGlobalEnvironmentUid: collection?.activeGlobalEnvironmentUid
-  });
-  return {
-    ...global,
-    ...env,
-    ...(collection?.collectionVariables || {}),
-    ...(collection?.runtimeVariables || {})
-  };
-};
-
-const listRequestSummaries = (collection) =>
-  flattenItems(collection?.items || [])
-    .filter(isItemARequest)
-    .map((it) => ({
-      uid: it.uid,
-      name: it.name,
-      pathname: it.pathname,
-      type: it.type,
-      method: it.request?.method || null,
-      url: it.request?.url || null
-    }));
-
-const CollectionApp = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const { displayedTheme } = useTheme();
-  const preferences = useSelector((state) => state.app.preferences);
-  const [view, setView] = useState('preview');
-
-  const code = item.draft ? get(item, 'draft.app.code', '') : get(item, 'app.code', '');
-
-  // Preview HTML is keyed on the *saved* code so typing doesn't reload the guest
-  // on every keystroke. The user toggles to Preview after saving to see updates.
-  const src = useMemo(
-    () => toDataUrl(wrapHtml(COLLECTION_CTX_BOOTSTRAP, code || '')),
-    [code]
-  );
-
-  const environment = useMemo(
-    () => findEnvironmentInCollection(collection, collection.activeEnvironmentUid),
-    [collection]
-  );
-  const variables = useMemo(() => buildVariables(collection), [collection]);
-  const collectionInfo = useMemo(
-    () => ({ name: collection?.name || null, pathname: collection?.pathname || null }),
-    [collection?.name, collection?.pathname]
-  );
-  const docsContext = useMemo(() => buildDocsContextFromCollection(collection), [collection]);
-  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, null), [collection]);
-
-  const onEdit = useCallback(
-    (value) => dispatch(updateAppCode({ code: value, itemUid: item.uid, collectionUid: collection.uid })),
-    [dispatch, item.uid, collection.uid]
-  );
-  const onSave = useCallback(
-    () => dispatch(saveRequest(item.uid, collection.uid)),
-    [dispatch, item.uid, collection.uid]
-  );
-
-  // Execute a single request by its pathname (returned earlier from listRequests).
-  // Mirrors AppView.handleSendRequest: mints a requestUid, registers the run, merges
-  // overrides into runtime variables, sends, and dispatches responseReceived so the
-  // request's normal Response pane updates too.
-  const runRequestByPath = useCallback(
-    async (pathname, overrides) => {
-      const target = findItemInCollectionByPathname(collection, pathname);
-      if (!target) {
-        throw new Error(`Request not found: ${pathname}`);
-      }
-      if (!isItemARequest(target)) {
-        throw new Error(`Item is not a request: ${pathname}`);
-      }
-
-      const requestUid = uuid();
-      const requestItem = cloneDeep(target.draft || target);
-      requestItem.requestUid = requestUid;
-      dispatch(
-        initRunRequestEvent({ requestUid, itemUid: target.uid, collectionUid: collection.uid })
-      );
-
-      const flat = overrides && typeof overrides === 'object' ? { ...overrides } : {};
-      const explicit = flat.variables;
-      delete flat.variables;
-      const mergedRuntime = {
-        ...(collection.runtimeVariables || {}),
-        ...flat,
-        ...(explicit && typeof explicit === 'object' ? explicit : {})
-      };
-
-      const result = await sendNetworkRequest(requestItem, collection, environment, mergedRuntime);
-
-      if (result?.error) {
-        const errorMessage = typeof result.error === 'string'
-          ? result.error
-          : result.error?.message || 'Request failed';
-        throw new Error(errorMessage);
-      }
-
-      dispatch(
-        responseReceived({
-          itemUid: target.uid,
-          collectionUid: collection.uid,
-          response: {
-            status: result.status,
-            statusText: result.statusText,
-            headers: result.headers,
-            data: result.data,
-            dataBuffer: result.dataBuffer,
-            size: result.size,
-            duration: result.duration,
-            timeline: serializeTimeline(result.timeline)
-          }
-        })
-      );
-
-      return projectResponse(result);
-    },
-    [collection, environment, dispatch]
-  );
-
-  // pushToGuest is produced by useAppWebview, which itself needs handleGuestMessage —
-  // so we can't put it in handleGuestMessage's useCallback deps (circular). Instead
-  // route guest replies through a ref that always points at the latest pushToGuest.
-  // Without this, the callback closes over the first-render pushToGuest (which is a
-  // no-op until dom-ready) and reply messages never reach the guest.
-  const pushToGuestRef = useRef(() => {});
-
-  const handleGuestMessage = useCallback(
-    async (data) => {
-      const push = pushToGuestRef.current;
-      switch (data?.type) {
-        case 'ready':
-          break;
-        case 'log':
-          console.log('[app]', ...(data.args || []));
-          break;
-        case 'setRuntimeVariable':
-          if (typeof data.key === 'string' && data.key.length) {
-            dispatch(
-              appSetRuntimeVariable({ collectionUid: collection.uid, key: data.key, value: data.value })
-            );
-          }
-          break;
-        case 'listRequests': {
-          push({ type: 'reply', replyId: data.replyId, result: listRequestSummaries(collection) });
-          break;
-        }
-        case 'runRequest': {
-          try {
-            const res = await runRequestByPath(data.pathname, data.overrides);
-            push({ type: 'reply', replyId: data.replyId, result: res });
-          } catch (err) {
-            push({ type: 'reply', replyId: data.replyId, error: err?.message || 'runRequest failed' });
-          }
-          break;
-        }
-        default:
-          break;
-      }
-    },
-    [dispatch, collection, runRequestByPath]
-  );
-
-  const { domReady, pushToGuest, webviewRef } = useAppWebview(handleGuestMessage);
-  pushToGuestRef.current = pushToGuest;
-
-  const stateRef = useRef();
-  stateRef.current = { theme: displayedTheme, variables, collection: collectionInfo };
-  useEffect(() => {
-    if (!domReady) return;
-    pushToGuest({ type: 'state', ...stateRef.current });
-  }, [domReady, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'theme', theme: displayedTheme });
-  }, [displayedTheme, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'variables', variables });
-  }, [variables, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'collection', collection: collectionInfo });
-  }, [collectionInfo, pushToGuest]);
-
-  return (
-    <StyledWrapper data-testid="collection-app">
-      <div className="app-toolbar">
-        <span>App - {item.name}</span>
-        <div className="view-toggle" data-testid="collection-app-view-toggle">
-          <button
-            type="button"
-            data-testid="collection-app-view-code"
-            className={classnames('view-btn', { active: view === 'code' })}
-            onClick={() => setView('code')}
-          >
-            Code
-          </button>
-          <button
-            type="button"
-            data-testid="collection-app-view-preview"
-            className={classnames('view-btn', { active: view === 'preview' })}
-            onClick={() => setView('preview')}
-          >
-            Preview
-          </button>
-        </div>
-      </div>
-
-      {view === 'code' ? (
-        <div className="app-pane code relative" data-testid="collection-app-code">
-          <CodeEditor
-            collection={collection}
-            value={code || ''}
-            theme={displayedTheme}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            onEdit={onEdit}
-            onSave={onSave}
-            mode="htmlmixed"
-          />
-          <AIAssist
-            scriptType="app-collection"
-            currentScript={code || ''}
-            docsContext={docsContext}
-            variables={aiVariables}
-            onApply={onEdit}
-          />
-        </div>
-      ) : code && code.trim().length ? (
-        <div className="app-pane app-webview-container" data-testid="collection-app-preview">
-          <webview
-            ref={webviewRef}
-            src={src}
-            partition="persist:bruno-app-view"
-            webpreferences="disableDialogs=true, javascript=yes"
-            className="app-webview"
-          />
-        </div>
-      ) : (
-        <div className="app-pane" data-testid="collection-app-preview">
-          <EmptyAppState
-            title="No app yet"
-            hint="Switch to Code and write some HTML/JS"
-          />
-        </div>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default CollectionApp;

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

@@ -2,7 +2,6 @@ import React, { useMemo, useCallback } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
 import MenuDropdown from 'ui/MenuDropdown';
-import StatusBadge from 'ui/StatusBadge/index';
 import { useDispatch } from 'react-redux';
 import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -52,11 +51,6 @@ const AuthMode = ({ collection }) => {
       label: 'NTLM Auth',
       onClick: () => onModeChange('ntlm')
     },
-    {
-      id: 'oauth1',
-      label: 'OAuth 1.0',
-      onClick: () => onModeChange('oauth1')
-    },
     {
       id: 'oauth2',
       label: 'OAuth 2.0',
@@ -67,17 +61,6 @@ const AuthMode = ({ collection }) => {
       label: 'API Key',
       onClick: () => onModeChange('apikey')
     },
-    {
-      id: 'akamai-edgegrid',
-      label: (
-        <span className="flex items-center gap-2">
-          Akamai EdgeGrid
-          <StatusBadge status="info" size="xs">Beta</StatusBadge>
-        </span>
-      ),
-      ariaLabel: 'Akamai EdgeGrid (Beta)',
-      onClick: () => onModeChange('akamai-edgegrid')
-    },
     {
       id: 'none',
       label: 'No Auth',
@@ -87,13 +70,13 @@ const AuthMode = ({ collection }) => {
 
   return (
     <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer auth-mode-selector" data-testid="auth-mode-selector">
+      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
         <MenuDropdown
           items={menuItems}
           placement="bottom-end"
           selectedItemId={authMode}
         >
-          <div className="flex items-center justify-center auth-mode-label select-none" data-testid="auth-mode-label">
+          <div className="flex items-center justify-center auth-mode-label select-none">
             {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
           </div>
         </MenuDropdown>

packages/bruno-app/src/components/CollectionSettings/Auth/EdgeGridAuth/StyledWrapper.js

@@ -1,97 +0,0 @@
-import styled from 'styled-components';
-import { rgba } from 'polished';
-
-const StyledWrapper = styled.div`
-  label {
-    display: flex;
-    align-items: center;
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
-    color: ${(props) => props.theme.colors.text.subtext1};
-    margin-bottom: 0.5rem;
-  }
-
-  .single-line-editor-wrapper {
-    display: flex;
-    align-items: center;
-    max-width: 400px;
-    margin-bottom: 0.5rem;
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-
-    &:focus-within {
-      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
-    }
-  }
-
-  .advanced-settings-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: fit-content;
-    margin: 1rem 0 0.75rem;
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 600;
-    color: ${(props) => props.theme.colors.text.subtext1};
-    user-select: none;
-
-    .advanced-settings-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0.375rem 0.625rem;
-      border-radius: 0.375rem;
-      background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
-
-      svg {
-        color: ${(props) => props.theme.primary.text};
-      }
-    }
-  }
-
-  .advanced-settings-hint {
-    margin: -0.25rem 0 0.75rem;
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: rgb(107 114 128);
-  }
-
-  .field-info {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    margin-left: 6px;
-    cursor: pointer;
-
-    svg {
-      color: rgb(107 114 128);
-    }
-
-    .field-tooltip {
-      position: absolute;
-      left: 0;
-      bottom: 100%;
-      z-index: 10;
-      width: max-content;
-      max-width: 15rem;
-      margin-bottom: 0.25rem;
-      padding: 0.5rem;
-      border-radius: 0.375rem;
-      background-color: #374151;
-      color: #fff;
-      font-size: 0.75rem;
-      line-height: 1rem;
-      font-weight: 400;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-    }
-
-    &:hover .field-tooltip {
-      opacity: 1;
-    }
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/CollectionSettings/Auth/EdgeGridAuth/index.tsx

@@ -1,165 +0,0 @@
-import { IconAdjustmentsHorizontal, IconInfoCircle } from '@tabler/icons';
-import get from 'lodash/get';
-import React from 'react';
-import { useDispatch } from 'react-redux';
-
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-interface AkamaiEdgeGridAuthValues {
-  accessToken?: string;
-  clientToken?: string;
-  clientSecret?: string;
-  nonce?: string;
-  timestamp?: string;
-  baseURL?: string;
-  headersToSign?: string;
-  maxBodySize?: number | null;
-}
-
-type EdgeGridField = keyof AkamaiEdgeGridAuthValues;
-
-const toMaxBodySize = (value: string): number | null => {
-  if (value === '' || value == null) return null;
-  const num = Number(value);
-  return Number.isNaN(num) ? null : num;
-};
-
-interface AkamaiEdgeGridAuthProps {
-  collection: any;
-}
-
-const FIELDS: Array<{ key: EdgeGridField; label: string; tooltip?: string; isSecret?: boolean }> = [
-  { key: 'accessToken', label: 'Access Token' },
-  { key: 'clientToken', label: 'Client Token' },
-  { key: 'clientSecret', label: 'Client Secret', isSecret: true },
-  { key: 'baseURL', label: 'Base URL', tooltip: 'Defaults to the request URL if not specified.' },
-  {
-    key: 'nonce',
-    label: 'Nonce',
-    tooltip: 'A unique nonce is required per request. Defaults to an auto-generated UUID v4 if not provided.'
-  },
-  {
-    key: 'timestamp',
-    label: 'Timestamp',
-    tooltip:
-      'UTC timestamp of when the request is signed (yyyyMMddTHH:mm:ss+0000). Defaults to current time if not provided.'
-  },
-  {
-    key: 'headersToSign',
-    label: 'Headers to Sign',
-    tooltip: 'Comma-separated list of headers to include in the signature.'
-  },
-  {
-    key: 'maxBodySize',
-    label: 'Max Body Size',
-    tooltip: 'Maximum message body size to include in the signature, in bytes. Defaults to 131072.'
-  }
-];
-
-type EdgeGridFieldConfig = (typeof FIELDS)[number];
-
-// Fields shown up front vs. those grouped under the "Advanced Settings" section
-const BASIC_FIELDS = FIELDS.slice(0, 3);
-const ADVANCED_FIELDS = FIELDS.slice(3);
-
-const EdgeGridAuth: React.FC<AkamaiEdgeGridAuthProps> = ({ collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const edgeGridAuth: AkamaiEdgeGridAuthValues =
-    (collection.draft?.root
-      ? get(collection, 'draft.root.request.auth.akamaiEdgegrid')
-      : get(collection, 'root.request.auth.akamaiEdgegrid')) || {};
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning: showClientSecretWarning, warningMessage: clientSecretWarningMessage } = isSensitive(
-    edgeGridAuth?.clientSecret
-  );
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  const handleFieldChange = (field: EdgeGridField, value: string) => {
-    const content: AkamaiEdgeGridAuthValues = {
-      accessToken: edgeGridAuth.accessToken || '',
-      clientToken: edgeGridAuth.clientToken || '',
-      clientSecret: edgeGridAuth.clientSecret || '',
-      nonce: edgeGridAuth.nonce || '',
-      timestamp: edgeGridAuth.timestamp || '',
-      baseURL: edgeGridAuth.baseURL || '',
-      headersToSign: edgeGridAuth.headersToSign || '',
-      maxBodySize: edgeGridAuth.maxBodySize ?? null
-    };
-
-    if (field === 'maxBodySize') {
-      content.maxBodySize = toMaxBodySize(value);
-    } else {
-      (content as Record<string, unknown>)[field] = value || '';
-    }
-
-    dispatch(
-      updateCollectionAuth({
-        mode: 'akamai-edgegrid',
-        collectionUid: collection.uid,
-        content
-      })
-    );
-  };
-
-  const renderField = ({ key, label, tooltip, isSecret }: EdgeGridFieldConfig) => {
-    const showWarning = isSecret && showClientSecretWarning;
-    const rawValue = edgeGridAuth[key];
-    const fieldValue = rawValue === null || rawValue === undefined ? '' : String(rawValue);
-    return (
-      <div key={key}>
-        <label>
-          {label}
-          {tooltip && (
-            <span className="field-info">
-              <IconInfoCircle size={16} />
-              <span className="field-tooltip">{tooltip}</span>
-            </span>
-          )}
-        </label>
-        <div className="single-line-editor-wrapper">
-          <SingleLineEditor
-            value={fieldValue}
-            theme={storedTheme}
-            onSave={handleSave}
-            onChange={(val: string) => handleFieldChange(key, val)}
-            collection={collection}
-            isSecret={isSecret}
-            isCompact
-          />
-          {showWarning && (
-            <SensitiveFieldWarning fieldName="edgegrid-client-secret" warningMessage={clientSecretWarningMessage} />
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      {BASIC_FIELDS.map(renderField)}
-
-      <div className="advanced-settings-header">
-        <span className="advanced-settings-icon">
-          <IconAdjustmentsHorizontal size={16} />
-        </span>
-        <span>Advanced Settings</span>
-      </div>
-
-      <>
-        {ADVANCED_FIELDS.map(renderField)}
-      </>
-
-    </StyledWrapper>
-  );
-};
-
-export default EdgeGridAuth;

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import OAuth1 from 'components/RequestPane/Auth/OAuth1';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-
-const CollectionOAuth1 = ({ collection }) => {
-  const dispatch = useDispatch();
-  const request = collection.draft?.root
-    ? get(collection, 'draft.root.request', {})
-    : get(collection, 'root.request', {});
-
-  const save = () => dispatch(saveCollectionSettings(collection.uid));
-
-  return (
-    <OAuth1
-      collection={collection}
-      request={request}
-      save={save}
-      updateAuth={updateCollectionAuth}
-    />
-  );
-};
-
-export default CollectionOAuth1;

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

@@ -8,12 +8,10 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
 import ApiKeyAuth from './ApiKeyAuth/';
-import EdgeGridAuth from './EdgeGridAuth';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
 import NTLMAuth from './NTLMAuth';
-import OAuth1 from './Oauth1';
 import Button from 'ui/Button';
 
 const Auth = ({ collection }) => {
@@ -39,9 +37,6 @@ const Auth = ({ collection }) => {
       case 'ntlm': {
         return <NTLMAuth collection={collection} />;
       }
-      case 'oauth1': {
-        return <OAuth1 collection={collection} />;
-      }
       case 'oauth2': {
         return <OAuth2 collection={collection} />;
       }
@@ -51,9 +46,6 @@ const Auth = ({ collection }) => {
       case 'apikey': {
         return <ApiKeyAuth collection={collection} />;
       }
-      case 'akamai-edgegrid': {
-        return <EdgeGridAuth collection={collection} />;
-      }
     }
   };
 

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

@@ -1,25 +1,9 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  position: relative;
-  height: 100%;
-  overflow-y: auto;
 
   .editing-mode {
     cursor: pointer;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background: ${(props) => props.theme.bg};
-    padding: 6px 0;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .markdown-body {
-    height: auto !important;
-    overflow-y: visible !important;
   }
 `;
 

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

@@ -1,43 +1,26 @@
 import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
-import find from 'lodash/find';
 import { updateCollectionDocs, deleteCollectionDraft } from 'providers/ReduxStore/slices/collections';
-import { updateDocsEditing } from 'providers/ReduxStore/slices/tabs';
 import { useTheme } from 'providers/Theme';
-import { useMemo, useRef } from 'react';
+import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
-import AIAssist from 'components/AIAssist';
-import { buildAiVariablesPayload, buildDocsContextFromCollection } from 'utils/ai';
 import StyledWrapper from './StyledWrapper';
 import { IconEdit, IconX, IconFileText } from '@tabler/icons';
 import Button from 'ui/Button/index';
 import ActionIcon from 'ui/ActionIcon/index';
-import { usePersistedState } from 'hooks/usePersistedState';
-import { useTrackScroll } from 'hooks/useTrackScroll';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
   const { displayedTheme } = useTheme();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  const isEditing = focusedTab?.docsEditing || false;
+  const [isEditing, setIsEditing] = useState(false);
   const docs = collection.draft?.root ? get(collection, 'draft.root.docs', '') : get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
-  const docsContext = useMemo(() => buildDocsContextFromCollection(collection), [collection]);
-  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, null), [collection]);
-
-  // StyledWrapper has overflow-y: auto — use null selector.
-  // Preview mode: hook tracks wrapper scroll. Edit mode: CodeEditor's onScroll/initialScroll.
-  const wrapperRef = useRef(null);
-  const [scroll, setScroll] = usePersistedState({ key: `collection-docs-scroll-${collection.uid}`, default: 0 });
-  useTrackScroll({ ref: wrapperRef, onChange: setScroll, enabled: !isEditing, initialValue: scroll });
 
   const toggleViewMode = () => {
-    dispatch(updateDocsEditing({ uid: activeTabUid, docsEditing: !isEditing }));
+    setIsEditing((prev) => !prev);
   };
 
   const onEdit = (value) => {
@@ -65,7 +48,7 @@ const Docs = ({ collection }) => {
   };
 
   return (
-    <StyledWrapper className="h-full w-full relative flex flex-col" ref={wrapperRef}>
+    <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} />
@@ -89,23 +72,18 @@ const Docs = ({ collection }) => {
         </div>
       </div>
       {isEditing ? (
-        <div className="relative flex-1 min-h-0">
-          <CodeEditor
-            collection={collection}
-            theme={displayedTheme}
-            value={docs}
-            onEdit={onEdit}
-            onSave={onSave}
-            mode="application/text"
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            initialScroll={scroll}
-            onScroll={setScroll}
-          />
-          <AIAssist scriptType="docs" currentScript={docs || ''} docsContext={docsContext} variables={aiVariables} onApply={onEdit} />
-        </div>
+        <CodeEditor
+          collection={collection}
+          theme={displayedTheme}
+          value={docs}
+          onEdit={onEdit}
+          onSave={onSave}
+          mode="application/text"
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+        />
       ) : (
-        <div className="pl-1">
+        <div className="h-full overflow-auto pl-1">
           <div className="h-[1px] min-h-[500px]">
             {
               docs?.length > 0

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

@@ -1,10 +1,9 @@
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback } from 'react';
 import get from 'lodash/get';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { setCollectionHeaders } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import { updateTableColumnWidths } from 'providers/ReduxStore/slices/tabs';
 import SingleLineEditor from 'components/SingleLineEditor';
 import EditableTable from 'components/EditableTable';
 import StyledWrapper from './StyledWrapper';
@@ -13,31 +12,16 @@ import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
 import Button from 'ui/Button';
 import { headerNameRegex, headerValueRegex } from 'utils/common/regex';
-import { usePersistedState } from 'hooks/usePersistedState';
-import { useTrackScroll } from 'hooks/useTrackScroll';
 
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
   const headers = collection.draft?.root
     ? get(collection, 'draft.root.request.headers', [])
     : get(collection, 'root.request.headers', []);
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
-  const wrapperRef = useRef(null);
-  const [scroll, setScroll] = usePersistedState({ key: `collection-headers-scroll-${collection.uid}`, default: 0 });
-  useTrackScroll({ ref: wrapperRef, selector: '.collection-settings-content', onChange: setScroll, initialValue: scroll });
-
-  // Get column widths from Redux
-  const focusedTab = tabs?.find((t) => t.uid === activeTabUid);
-  const collectionHeadersWidths = focusedTab?.tableColumnWidths?.['collection-headers'] || {};
-
-  const handleColumnWidthsChange = (tableId, widths) => {
-    dispatch(updateTableColumnWidths({ uid: activeTabUid, tableId, widths }));
-  };
 
   const toggleBulkEditMode = () => {
     setIsBulkEditMode(!isBulkEditMode);
@@ -125,23 +109,19 @@ const Headers = ({ collection }) => {
   }
 
   return (
-    <StyledWrapper className="h-full w-full" ref={wrapperRef}>
+    <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>
       <EditableTable
-        tableId="collection-headers"
         columns={columns}
         rows={headers}
         onChange={handleHeadersChange}
         defaultRow={defaultRow}
         getRowError={getRowError}
-        columnWidths={collectionHeadersWidths}
-        onColumnWidthsChange={(widths) => handleColumnWidthsChange('collection-headers', widths)}
-        initialScroll={scroll}
       />
       <div className="flex justify-end mt-2">
-        <button className="text-link select-none" data-testid="bulk-edit-toggle" onClick={toggleBulkEditMode}>
+        <button className="text-link select-none" onClick={toggleBulkEditMode}>
           Bulk Edit
         </button>
       </div>

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

@@ -39,15 +39,6 @@ const StyledWrapper = styled.div`
       }
     }
 
-    &.version {
-      background-color: ${(props) => rgba(props.theme.colors.text.yellow, 0.1)};
-      border: 1px solid ${(props) => rgba(props.theme.colors.text.yellow, 0.1)};
-
-      svg {
-        color: ${(props) => props.theme.colors.text.yellow};
-      }
-    }
-
     &.generate-docs {
       background-color: ${(props) => rgba(props.theme.accents.primary, 0.08)};
       border: 1px solid ${(props) => rgba(props.theme.accents.primary, 0.09)};

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

@@ -1,15 +1,13 @@
 import React from 'react';
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconShare, IconBook, IconTag } from '@tabler/icons';
-import { areItemsLoading, getItemsLoadStats, getCollectionVersion } from 'utils/collections/index';
+import { IconFolder, IconWorld, IconApi, IconShare, IconBook } from '@tabler/icons';
+import { areItemsLoading, getItemsLoadStats } from 'utils/collections/index';
 import { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import ShareCollection from 'components/ShareCollection/index';
 import GenerateDocumentation from 'components/Sidebar/Collections/Collection/GenerateDocumentation';
-import ChangeCollectionVersion from 'components/Sidebar/Collections/Collection/ChangeCollectionVersion';
 import { addTab } from 'providers/ReduxStore/slices/tabs';
 import StyledWrapper from './StyledWrapper';
-import Migration from '../Migration';
 
 const Info = ({ collection }) => {
   const dispatch = useDispatch();
@@ -19,9 +17,6 @@ const Info = ({ collection }) => {
   const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
   const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
   const [showGenerateDocumentationModal, setShowGenerateDocumentationModal] = useState(false);
-  const [showChangeVersionModal, setShowChangeVersionModal] = useState(false);
-
-  const collectionVersion = getCollectionVersion(collection);
 
   const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
 
@@ -49,22 +44,6 @@ const Info = ({ collection }) => {
             </div>
           </div>
 
-          <div className="flex items-start group cursor-pointer" onClick={() => setShowChangeVersionModal(true)} data-testid="info-version-row">
-            <div className="icon-box version flex-shrink-0 p-3 rounded-lg">
-              <IconTag className="w-5 h-5" stroke={1.5} />
-            </div>
-            <div className="ml-4 h-full flex flex-col justify-start">
-              <div className="font-medium h-fit my-auto">Version</div>
-              <div className="flex items-center gap-2">
-                {collectionVersion
-                  ? <span className="text-muted" data-testid="info-version-value">{collectionVersion}</span>
-                  : <span className="text-muted italic" data-testid="info-version-value">Not Set</span>}
-                <span className="group-hover:underline text-link" data-testid="info-version-change">change</span>
-              </div>
-            </div>
-          </div>
-          {showChangeVersionModal && <ChangeCollectionVersion collectionUid={collection.uid} onClose={() => setShowChangeVersionModal(false)} />}
-
           {/* Environments Row */}
           <div className="flex items-start">
             <div className="icon-box environments flex-shrink-0 p-3 rounded-lg">
@@ -147,8 +126,6 @@ const Info = ({ collection }) => {
             </div>
           </div>
           {showGenerateDocumentationModal && <GenerateDocumentation collectionUid={collection.uid} onClose={() => setShowGenerateDocumentationModal(false)} />}
-
-          <Migration collection={collection} />
         </div>
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/Overview/Migration/MigrateToYmlModal/StyledWrapper.js

@@ -1,40 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .backup-section {
-    border: 1px solid ${(props) => props.theme.border.border2};
-    border-radius: ${(props) => props.theme.border.radius.base};
-    background-color: ${(props) => props.theme.background.mantle};
-    padding: 12px 14px;
-  }
-
-  .backup-section-head {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 6px;
-    color: ${(props) => props.theme.text};
-  }
-
-  .backup-section-title {
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
-    color: ${(props) => props.theme.colors.text.muted};
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-  }
-
-  .backup-section-help {
-    font-size: ${(props) => props.theme.font.size.base};
-    color: ${(props) => props.theme.colors.text.muted};
-    line-height: 1.45;
-    margin: 0 0 10px 0;
-  }
-
-  .backup-section-action {
-    display: flex;
-    justify-content: flex-start;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import toast from 'react-hot-toast';
-import { migrateCollectionToYml } from 'providers/ReduxStore/slices/collections/actions';
-import Modal from 'components/Modal';
-import Portal from 'components/Portal';
-import Button from 'ui/Button';
-import StyledWrapper from './StyledWrapper';
-
-const MigrateToYmlModal = ({ collection, onClose }) => {
-  const dispatch = useDispatch();
-  const [isMigrating, setIsMigrating] = useState(false);
-  const [isExporting, setIsExporting] = useState(false);
-
-  const handleMigrate = () => {
-    setIsMigrating(true);
-    dispatch(migrateCollectionToYml(collection.uid))
-      .catch(() => {})
-      .finally(() => {
-        setIsMigrating(false);
-        onClose();
-      });
-  };
-
-  const handleExportBackup = async () => {
-    if (isExporting) return;
-    setIsExporting(true);
-    try {
-      const { ipcRenderer } = window;
-      const result = await ipcRenderer.invoke('renderer:export-collection-zip', collection.pathname, collection.name);
-      if (result?.success) {
-        toast.success('Collection backup exported');
-      }
-    } catch (error) {
-      toast.error('Failed to export backup: ' + error.message);
-    } finally {
-      setIsExporting(false);
-    }
-  };
-
-  return (
-    <Portal>
-      <StyledWrapper>
-        <Modal
-          size="md"
-          title="Migrate to YML format"
-          confirmText="Migrate"
-          confirmDisabled={isExporting || isMigrating}
-          handleConfirm={handleMigrate}
-          handleCancel={onClose}
-        >
-          <div>
-            <p>
-              This will convert all files in <strong>{collection.name}</strong> from <code>.bru</code> format to <code>.yml</code> format.
-            </p>
-            <div className="mt-4 text-sm text-muted">
-              <p className="font-medium mb-2">What will happen:</p>
-              <ul className="list-disc ml-5 flex flex-col gap-1">
-                <li>All <code>.bru</code> request files will be converted to <code>.yml</code></li>
-                <li>Environment files will be converted to YML format</li>
-                <li><code>bruno.json</code> will be replaced with <code>opencollection.yml</code></li>
-                <li>The collection will be reloaded after migration</li>
-              </ul>
-            </div>
-            <div className="backup-section mt-4">
-              <div className="backup-section-head">
-                <span className="backup-section-title">Backup</span>
-              </div>
-              <p className="backup-section-help">
-                Export this collection as a ZIP archive before migrating, in case you want to restore it later.
-              </p>
-              <div className="backup-section-action">
-                <Button
-                  data-testid="export-collection-backup-button"
-                  size="sm"
-                  color="secondary"
-                  variant="outline"
-                  onClick={handleExportBackup}
-                  disabled={isExporting}
-                >
-                  {isExporting ? 'Exporting…' : 'Export Collection'}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </Modal>
-      </StyledWrapper>
-    </Portal>
-  );
-};
-
-export default MigrateToYmlModal;

packages/bruno-app/src/components/CollectionSettings/Overview/Migration/StyledWrapper.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-import { rgba } from 'polished';
-
-const StyledWrapper = styled.div`
-  .migration-section {
-    padding-top: 1.5rem;
-    margin-top: 1.5rem;
-  }
-
-  .icon-box.migration {
-    background-color: ${(props) => rgba(props.theme.colors.text.yellow, 0.08)};
-    border: 1px solid ${(props) => rgba(props.theme.colors.text.yellow, 0.09)};
-
-    svg {
-      color: ${(props) => props.theme.colors.text.yellow};
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { IconFileCode, IconTransform } from '@tabler/icons';
-import Button from 'ui/Button';
-import MigrateToYmlModal from './MigrateToYmlModal';
-import StyledWrapper from './StyledWrapper';
-
-const Migration = ({ collection }) => {
-  const [showConfirmModal, setShowConfirmModal] = useState(false);
-
-  // Only show for bru format collections
-  if (collection.format !== 'bru') {
-    return null;
-  }
-
-  return (
-    <StyledWrapper>
-      <div className="migration-section">
-        <div className="text-lg font-medium flex items-center gap-2 mb-4">
-          <IconTransform size={20} stroke={1.5} />
-          Migration
-        </div>
-
-        <div className="flex items-start">
-          <div className="icon-box migration flex-shrink-0 p-3 rounded-lg">
-            <IconFileCode className="w-5 h-5" stroke={1.5} />
-          </div>
-          <div className="ml-4">
-            <div className="font-medium">Migrate to YML file format</div>
-            <div className="my-1 text-muted text-sm">
-              This collection is stored in BRU format.{' '}
-              Switch to YML.{' '}
-              <a
-                href="https://blog.usebruno.com/making-yaml-the-default-in-bruno-v3.1"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-link hover:underline"
-              >
-                Learn More &#x2197;
-              </a>
-            </div>
-            <Button
-              data-testid="migrate-collection-to-yml-button"
-              size="sm"
-              color="primary"
-              className="mt-2"
-              onClick={() => setShowConfirmModal(true)}
-            >
-              Convert to YML
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {showConfirmModal && (
-        <MigrateToYmlModal
-          collection={collection}
-          onClose={() => setShowConfirmModal(false)}
-        />
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default Migration;

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

@@ -8,12 +8,10 @@ const Overview = ({ collection }) => {
   return (
     <div className="h-full">
       <div className="grid grid-cols-5 gap-5 h-full">
-        <div className="col-span-2 overflow-clip text-ellipsis">
-          <div className="flex gap-2 items-center min-w-0">
-            <IconBox size={20} stroke={1.5} className="flex-shrink-0" />
-            <span className="overflow-hidden text-lg font-medium whitespace-nowrap text-ellipsis">
-              {collection?.name}
-            </span>
+        <div className="col-span-2">
+          <div className="text-lg font-medium flex items-center gap-2">
+            <IconBox size={20} stroke={1.5} />
+            {collection?.name}
           </div>
           <Info collection={collection} />
           <RequestsNotLoaded collection={collection} />

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

@@ -5,11 +5,10 @@ import { updateCollectionPresets } from 'providers/ReduxStore/slices/collections
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { get } from 'lodash';
 import Button from 'ui/Button';
-import { DEFAULT_PRESET_REQUEST_TYPE, PRESET_REQUEST_TYPES } from 'utils/common/constants';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
-  const initialPresets = { requestType: DEFAULT_PRESET_REQUEST_TYPE, requestUrl: '' };
+  const initialPresets = { requestType: 'http', requestUrl: '' };
 
   // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig
   const currentPresets = collection.draft?.brunoConfig
@@ -48,13 +47,12 @@ const PresetsSettings = ({ collection }) => {
           <div className="flex items-center">
             <input
               id="http"
-              data-testid="presets-request-type-http"
               className="cursor-pointer"
               type="radio"
               name="requestType"
               onChange={handleRequestTypeChange}
-              value={PRESET_REQUEST_TYPES.HTTP}
-              checked={(currentPresets.requestType || DEFAULT_PRESET_REQUEST_TYPE) === PRESET_REQUEST_TYPES.HTTP}
+              value="http"
+              checked={(currentPresets.requestType || 'http') === 'http'}
             />
             <label htmlFor="http" className="ml-1 cursor-pointer select-none">
               HTTP
@@ -62,13 +60,12 @@ const PresetsSettings = ({ collection }) => {
 
             <input
               id="graphql"
-              data-testid="presets-request-type-graphql"
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
               onChange={handleRequestTypeChange}
-              value={PRESET_REQUEST_TYPES.GRAPHQL}
-              checked={(currentPresets.requestType || DEFAULT_PRESET_REQUEST_TYPE) === PRESET_REQUEST_TYPES.GRAPHQL}
+              value="graphql"
+              checked={(currentPresets.requestType || 'http') === 'graphql'}
             />
             <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
               GraphQL
@@ -76,13 +73,12 @@ const PresetsSettings = ({ collection }) => {
 
             <input
               id="grpc"
-              data-testid="presets-request-type-grpc"
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
               onChange={handleRequestTypeChange}
-              value={PRESET_REQUEST_TYPES.GRPC}
-              checked={(currentPresets.requestType || DEFAULT_PRESET_REQUEST_TYPE) === PRESET_REQUEST_TYPES.GRPC}
+              value="grpc"
+              checked={(currentPresets.requestType || 'http') === 'grpc'}
             />
             <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
               gRPC
@@ -90,13 +86,12 @@ const PresetsSettings = ({ collection }) => {
 
             <input
               id="ws"
-              data-testid="presets-request-type-ws"
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
               onChange={handleRequestTypeChange}
-              value={PRESET_REQUEST_TYPES.WS}
-              checked={(currentPresets.requestType || DEFAULT_PRESET_REQUEST_TYPE) === PRESET_REQUEST_TYPES.WS}
+              value="ws"
+              checked={(currentPresets.requestType || 'http') === 'ws'}
             />
             <label htmlFor="ws" className="ml-1 cursor-pointer select-none">
               WebSocket
@@ -111,7 +106,6 @@ const PresetsSettings = ({ collection }) => {
             <div className="flex items-center flex-grow input-container h-full">
               <input
                 id="request-url"
-                data-testid="presets-request-url"
                 type="text"
                 name="requestUrl"
                 placeholder="Request URL"
@@ -129,7 +123,7 @@ const PresetsSettings = ({ collection }) => {
         </div>
 
         <div className="mt-6">
-          <Button type="button" size="sm" data-testid="presets-save-btn" onClick={handleSave}>
+          <Button type="button" size="sm" onClick={handleSave}>
             Save
           </Button>
         </div>

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

@@ -1,21 +1,15 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
-import find from 'lodash/find';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
-import AIAssist from 'components/AIAssist';
-import { buildAiVariablesPayload } from 'utils/ai';
 import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import { updateScriptPaneTab } from 'providers/ReduxStore/slices/tabs';
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 import StatusDot from 'components/StatusDot';
 import { flattenItems, isItemARequest } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
-import { usePersistedState } from 'hooks/usePersistedState';
-import { useFocusErrorLine } from 'hooks/useFocusErrorLine';
 
 const Script = ({ collection }) => {
   const dispatch = useDispatch();
@@ -24,58 +18,40 @@ const Script = ({ collection }) => {
   const requestScript = collection.draft?.root ? get(collection, 'draft.root.request.script.req', '') : get(collection, 'root.request.script.req', '');
   const responseScript = collection.draft?.root ? get(collection, 'draft.root.request.script.res', '') : get(collection, 'root.request.script.res', '');
 
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const focusedTab = find(tabs, (t) => t.uid === collection.uid);
-  const scriptPaneTab = focusedTab?.scriptPaneTab;
-
-  const getDefaultTab = () => {
+  // Default to post-response if pre-request script is empty
+  const getInitialTab = () => {
     const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
     return hasPreRequestScript ? 'pre-request' : 'post-response';
   };
 
-  const activeTab = scriptPaneTab || getDefaultTab();
-
-  const setActiveTab = (tab) => {
-    dispatch(updateScriptPaneTab({ uid: collection.uid, scriptPaneTab: tab }));
-  };
+  const [activeTab, setActiveTab] = useState(getInitialTab);
+  const prevCollectionUidRef = useRef(collection.uid);
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
-  const [preReqScroll, setPreReqScroll] = usePersistedState({ key: `collection-pre-req-scroll-${collection.uid}`, default: 0 });
-  const [postResScroll, setPostResScroll] = usePersistedState({ key: `collection-post-res-scroll-${collection.uid}`, default: 0 });
+  // Update active tab only when switching to a different collection
+  useEffect(() => {
+    if (prevCollectionUidRef.current !== collection.uid) {
+      prevCollectionUidRef.current = collection.uid;
+      const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+      setActiveTab(hasPreRequestScript ? 'pre-request' : 'post-response');
+    }
+  }, [collection.uid, requestScript]);
 
-  // Refresh CodeMirror when tab becomes visible and restore scroll position.
-  // CodeMirror's scrollTo() is silently ignored when the editor is inside a display:none container
-  // (TabsContent hides inactive tabs via display:none). After refresh() recalculates layout, we re-apply scrollTo().
+  // Refresh CodeMirror when tab becomes visible
   useEffect(() => {
     const timer = setTimeout(() => {
       if (activeTab === 'pre-request' && preRequestEditorRef.current?.editor) {
         preRequestEditorRef.current.editor.refresh();
-        preRequestEditorRef.current.editor.scrollTo(null, preReqScroll);
       } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
         postResponseEditorRef.current.editor.refresh();
-        postResponseEditorRef.current.editor.scrollTo(null, postResScroll);
       }
     }, 0);
 
     return () => clearTimeout(timer);
   }, [activeTab]);
 
-  useFocusErrorLine({
-    uid: collection.uid,
-    editorRef: preRequestEditorRef,
-    scriptPhase: 'pre-request',
-    isVisible: activeTab === 'pre-request'
-  });
-
-  useFocusErrorLine({
-    uid: collection.uid,
-    editorRef: postResponseEditorRef,
-    scriptPhase: 'post-response',
-    isVisible: activeTab === 'post-response'
-  });
-
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateCollectionRequestScript({
@@ -102,8 +78,6 @@ const Script = ({ collection }) => {
   const hasPreRequestScriptError = items.some((i) => isItemARequest(i) && i.preRequestScriptErrorMessage);
   const hasPostResponseScriptError = items.some((i) => isItemARequest(i) && i.postResponseScriptErrorMessage);
 
-  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, null), [collection]);
-
   return (
     <StyledWrapper className="w-full flex flex-col h-full">
       <div className="text-xs mb-4 text-muted">
@@ -126,58 +100,34 @@ const Script = ({ collection }) => {
           </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="pre-request" className="mt-2" dataTestId="collection-pre-request-script-editor">
-          <div className="relative h-full">
-            <CodeEditor
-              ref={preRequestEditorRef}
-              collection={collection}
-              docKey="collection-script:pre-request"
-              value={requestScript || ''}
-              theme={displayedTheme}
-              onEdit={onRequestScriptEdit}
-              mode="javascript"
-              onSave={handleSave}
-              font={get(preferences, 'font.codeFont', 'default')}
-              fontSize={get(preferences, 'font.codeFontSize')}
-              showHintsFor={['req', 'bru']}
-              scriptType="pre-request"
-              initialScroll={preReqScroll}
-              onScroll={setPreReqScroll}
-            />
-            <AIAssist
-              scriptType="pre-request"
-              currentScript={requestScript || ''}
-              variables={aiVariables}
-              onApply={onRequestScriptEdit}
-            />
-          </div>
+        <TabsContent value="pre-request" className="mt-2">
+          <CodeEditor
+            ref={preRequestEditorRef}
+            collection={collection}
+            value={requestScript || ''}
+            theme={displayedTheme}
+            onEdit={onRequestScriptEdit}
+            mode="javascript"
+            onSave={handleSave}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            showHintsFor={['req', 'bru']}
+          />
         </TabsContent>
 
-        <TabsContent value="post-response" className="mt-2" dataTestId="collection-post-response-script-editor">
-          <div className="relative h-full">
-            <CodeEditor
-              ref={postResponseEditorRef}
-              collection={collection}
-              docKey="collection-script:post-response"
-              value={responseScript || ''}
-              theme={displayedTheme}
-              onEdit={onResponseScriptEdit}
-              mode="javascript"
-              onSave={handleSave}
-              font={get(preferences, 'font.codeFont', 'default')}
-              fontSize={get(preferences, 'font.codeFontSize')}
-              showHintsFor={['req', 'res', 'bru']}
-              scriptType="post-response"
-              initialScroll={postResScroll}
-              onScroll={setPostResScroll}
-            />
-            <AIAssist
-              scriptType="post-response"
-              currentScript={responseScript || ''}
-              variables={aiVariables}
-              onApply={onResponseScriptEdit}
-            />
-          </div>
+        <TabsContent value="post-response" className="mt-2">
+          <CodeEditor
+            ref={postResponseEditorRef}
+            collection={collection}
+            value={responseScript || ''}
+            theme={displayedTheme}
+            onEdit={onResponseScriptEdit}
+            mode="javascript"
+            onSave={handleSave}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            showHintsFor={['req', 'res', 'bru']}
+          />
         </TabsContent>
       </Tabs>
 

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

@@ -1,10 +1,6 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  .markdown-body {
-    height: auto !important;
-    overflow-y: visible !important;
-  }
   div.tabs {
     div.tab {
       padding: 6px 0px;
@@ -28,8 +24,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
-        font-weight: ${(props) =>
-          props.theme.tabs.active.fontWeight} !important;
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
@@ -50,7 +45,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.colors.text.muted};
   }
 
-  input[type="radio"] {
+  input[type='radio'] {
     cursor: pointer;
     accent-color: ${(props) => props.theme.primary.solid};
   }

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

@@ -1,25 +1,19 @@
-import React, { useMemo, useRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
-import AIAssist from 'components/AIAssist';
-import { buildAiVariablesPayload } from 'utils/ai';
 import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
-import { usePersistedState } from 'hooks/usePersistedState';
-import { useFocusErrorLine } from 'hooks/useFocusErrorLine';
 
 const Tests = ({ collection }) => {
   const dispatch = useDispatch();
-  const testsEditorRef = useRef(null);
   const tests = collection.draft?.root ? get(collection, 'draft.root.request.tests', '') : get(collection, 'root.request.tests', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
-  const [testsScroll, setTestsScroll] = usePersistedState({ key: `collection-tests-scroll-${collection.uid}`, default: 0 });
 
   const onEdit = (value) => {
     dispatch(
@@ -32,35 +26,20 @@ const Tests = ({ collection }) => {
 
   const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
-  useFocusErrorLine({
-    uid: collection.uid,
-    editorRef: testsEditorRef,
-    scriptPhase: 'test'
-  });
-
-  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, null), [collection]);
-
   return (
     <StyledWrapper className="w-full flex flex-col h-full">
       <div className="text-xs mb-4 text-muted">These tests will run any time a request in this collection is sent.</div>
-      <div className="relative h-full">
-        <CodeEditor
-          ref={testsEditorRef}
-          collection={collection}
-          docKey="collection-tests"
-          value={tests || ''}
-          theme={displayedTheme}
-          onEdit={onEdit}
-          mode="javascript"
-          onSave={handleSave}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'res', 'bru']}
-          initialScroll={testsScroll}
-          onScroll={setTestsScroll}
-        />
-        <AIAssist scriptType="tests" currentScript={tests || ''} variables={aiVariables} onApply={onEdit} />
-      </div>
+      <CodeEditor
+        collection={collection}
+        value={tests || ''}
+        theme={displayedTheme}
+        onEdit={onEdit}
+        mode="javascript"
+        onSave={handleSave}
+        font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
+        showHintsFor={['req', 'res', 'bru']}
+      />
 
       <div className="mt-6">
         <Button type="submit" size="sm" onClick={handleSave}>