feat: support newer Postman export format with collection envelope (#8038)

- Updated the Postman collection importer to handle collections wrapped in a { collection: { ... } } format.
- Enhanced the parsing logic to extract collection info correctly from both legacy and newer formats.
- Added a new test case for importing a Postman v2.1 collection with the wrapped format to ensure compatibility.

.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 @sid-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/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
 
-        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/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/auth-tests.yml

@@ -0,0 +1,79 @@
+name: Auth Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  oauth1-tests-for-linux:
+    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
+
+  oauth1-tests-for-macos:
+    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
+
+  oauth1-tests-for-windows:
+    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/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/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

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 
 

package-lock.json

@@ -30,6 +30,7 @@
         "@eslint/compat": "^1.3.2",
         "@faker-js/faker": "^7.6.0",
         "@jest/globals": "^29.2.0",
+        "@opencollection/types": "0.9.1",
         "@playwright/test": "^1.51.1",
         "@rollup/plugin-json": "^6.1.0",
         "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -37,13 +38,10 @@
         "@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",
@@ -52,7 +50,7 @@
         "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",
@@ -69,84 +67,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@ai-sdk/anthropic": {
-      "version": "3.0.15",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/anthropic/-/anthropic-3.0.15.tgz",
-      "integrity": "sha512-FCNy6pABPe5Qb1VPbdLLIi/XkQN2g/fKUcl1GcXxIU3Ofr+vOND8cyZfH20cMODR523FSGfwswJoJic8skr8qg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "3.0.4",
-        "@ai-sdk/provider-utils": "4.0.8"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.76 || ^4.1.8"
-      }
-    },
-    "node_modules/@ai-sdk/gateway": {
-      "version": "3.0.16",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-3.0.16.tgz",
-      "integrity": "sha512-OOY5CfRJiHvh/8np2vs1RQaCZ5hWv2qOeEmmeiABXK3gLQHUVnCO+1hhoLsZdHM5iElu6M407dAOfyvTsKJqcQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "3.0.4",
-        "@ai-sdk/provider-utils": "4.0.8",
-        "@vercel/oidc": "3.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.76 || ^4.1.8"
-      }
-    },
-    "node_modules/@ai-sdk/openai": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-3.0.12.tgz",
-      "integrity": "sha512-zqLWEKuaKnjXhu7xCw1jgz/+yTbd3F7EtgU4T2Q8BAo8OJC5wZv14l+kwM7Jai7M1/2Y2T/zBkrfiIu+7NsvfQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "3.0.4",
-        "@ai-sdk/provider-utils": "4.0.8"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.76 || ^4.1.8"
-      }
-    },
-    "node_modules/@ai-sdk/provider": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-3.0.4.tgz",
-      "integrity": "sha512-5KXyBOSEX+l67elrEa+wqo/LSsSTtrPj9Uoh3zMbe/ceQX4ucHI3b9nUEfNkGF3Ry1svv90widAt+aiKdIJasQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "json-schema": "^0.4.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@ai-sdk/provider-utils": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-4.0.8.tgz",
-      "integrity": "sha512-ns9gN7MmpI8vTRandzgz+KK/zNMLzhrriiKECMt4euLtQFSBgNfydtagPOX4j4pS1/3KvHF6RivhT3gNQgBZsg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "3.0.4",
-        "@standard-schema/spec": "^1.1.0",
-        "eventsource-parser": "^3.0.6"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.76 || ^4.1.8"
-      }
-    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -6945,16 +6865,6 @@
       "dev": true,
       "license": "(Apache-2.0 AND BSD-3-Clause)"
     },
-    "node_modules/@colors/colors": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
-      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
     "node_modules/@develar/schema-utils": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
@@ -9696,15 +9606,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@opentelemetry/api": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
-      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
@@ -10147,9 +10048,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@protobufjs/utf8": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.1.tgz",
-      "integrity": "sha512-oOAWABowe8EAbMyWKM0tYDKi8Yaox52D+HWZhAIJqQXbqe0xI/GV7FhLWqlEKreMkfDjshR5FKgi3mnle0h6Eg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@radix-ui/primitive": {
@@ -11370,12 +11271,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@standard-schema/spec": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
-      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "license": "MIT"
-    },
     "node_modules/@storybook/addon-webpack5-compiler-babel": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@storybook/addon-webpack5-compiler-babel/-/addon-webpack5-compiler-babel-4.0.0.tgz",
@@ -12395,7 +12290,7 @@
         "@swagger-api/apidom-core": "^1.4.0",
         "@swagger-api/apidom-error": "^1.4.0",
         "@types/ramda": "~0.30.0",
-        "axios": "1.16.0",
+        "axios": "1.13.6",
         "minimatch": "^7.4.3",
         "process": "^0.11.10",
         "ramda": "~0.30.0",
@@ -12680,16 +12575,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/@types/adm-zip": {
-      "version": "0.5.8",
-      "resolved": "https://registry.npmjs.org/@types/adm-zip/-/adm-zip-0.5.8.tgz",
-      "integrity": "sha512-RVVH7QvZYbN+ihqZ4kX/dMiowf6o+Jk1fNwiSdx0NahBJLU787zkULhGhJM8mf/obmLGmgdMM0bXsQTmyfbR7Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -12927,13 +12812,6 @@
         "pretty-format": "^29.0.0"
       }
     },
-    "node_modules/@types/js-yaml": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
-      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/jsdom": {
       "version": "20.0.1",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz",
@@ -13523,15 +13401,6 @@
       "resolved": "packages/bruno-toml",
       "link": true
     },
-    "node_modules/@vercel/oidc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@vercel/oidc/-/oidc-3.1.0.tgz",
-      "integrity": "sha512-Fw28YZpRnA3cAHHDlkt7xQHiJ0fcL+NRcIqsocZQUSmbzeIKRpwttJjik5ZGanXP+vlA4SbTg+AbA3bP363l+w==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
     "node_modules/@vitest/expect": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
@@ -14188,9 +14057,9 @@
       }
     },
     "node_modules/adm-zip": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.17.tgz",
-      "integrity": "sha512-+Ut8d9LLqwEvHHJl1+PIHqoyDxFgVN847JTVM3Izi3xHDWPE4UtzzXysMZQs64DMcrJfBeS/uoEP4AD3HQHnQQ==",
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.16.tgz",
+      "integrity": "sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==",
       "license": "MIT",
       "engines": {
         "node": ">=12.0"
@@ -14205,24 +14074,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/ai": {
-      "version": "6.0.39",
-      "resolved": "https://registry.npmjs.org/ai/-/ai-6.0.39.tgz",
-      "integrity": "sha512-hF05gF4H+IxuilA8kNANVVHQXduTJsJaH74jmlmy8mcQt3NZgPYe2zZNyGBV4DPDYTUDt1h31hbLgQqJTn5LGA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/gateway": "3.0.16",
-        "@ai-sdk/provider": "3.0.4",
-        "@ai-sdk/provider-utils": "4.0.8",
-        "@opentelemetry/api": "1.9.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.76 || ^4.1.8"
-      }
-    },
     "node_modules/ajv": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
@@ -14750,9 +14601,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.0.tgz",
-      "integrity": "sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==",
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
+      "integrity": "sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.11",
@@ -14766,7 +14617,7 @@
       "integrity": "sha512-CS6WE8chZpEDKxv4IFwr5zcG7InMC6Ek0aj2n2tHauBh+8KiYVC4qMn3N2arjR5tnyILQuTGlI0mc83hgWxS4Q==",
       "license": "MIT",
       "dependencies": {
-        "axios": "1.16.0",
+        "axios": "1.13.6",
         "des.js": "^1.1.0",
         "dev-null": "^0.1.1",
         "js-md4": "^0.3.2"
@@ -16254,21 +16105,6 @@
         "node": ">=0.2.5"
       }
     },
-    "node_modules/cli-table3": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.5.tgz",
-      "integrity": "sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==",
-      "license": "MIT",
-      "dependencies": {
-        "string-width": "^4.2.0"
-      },
-      "engines": {
-        "node": "10.* || >= 12.*"
-      },
-      "optionalDependencies": {
-        "@colors/colors": "1.5.0"
-      }
-    },
     "node_modules/cli-truncate": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
@@ -16633,7 +16469,7 @@
         "date-fns": "^2.30.0",
         "lodash": "^4.17.21",
         "rxjs": "^7.8.1",
-        "shell-quote": "^1.8.4",
+        "shell-quote": "^1.8.1",
         "spawn-command": "0.0.2",
         "supports-color": "^8.1.1",
         "tree-kill": "^1.2.2",
@@ -19173,15 +19009,6 @@
         "bare-events": "^2.7.0"
       }
     },
-    "node_modules/eventsource-parser": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.8.tgz",
-      "integrity": "sha512-70QWGkr4snxr0OXLRWsFLeRBIRPuQOvt4s8QYjmUlmlkyTZkRqS7EDVRZtzU3TiyDbXSzaOeF0XUKy8PchzukQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/evp_bytestokey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
@@ -23570,12 +23397,6 @@
         "node": "*"
       }
     },
-    "node_modules/json-schema": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "license": "(AFL-2.1 OR BSD-3-Clause)"
-    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -23879,15 +23700,15 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
     "node_modules/lodash-es": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.0.tgz",
-      "integrity": "sha512-koAgswPPA+UTaPN64Etp+PGP+WT6oqOS2NMi5yDkMaiGw9qY4VxQbQF0mtKMyr4BlTznWyzePV5UpECTJQmSUA==",
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
     "node_modules/lodash.camelcase": {
@@ -26763,7 +26584,7 @@
       "integrity": "sha512-l+fsjYEkTik3m/G0pE7gMr4qBJP84LhK779oQm6MBzhBGpd4By4qieTW+4FUAlNCyzQTynn3Nhsa50c0IELSxQ==",
       "license": "MIT",
       "dependencies": {
-        "axios": "1.16.0",
+        "axios": "1.13.6",
         "rusha": "^0.8.14"
       },
       "engines": {
@@ -27020,9 +26841,9 @@
       }
     },
     "node_modules/protobufjs": {
-      "version": "7.5.8",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.8.tgz",
-      "integrity": "sha512-dvpCIeLPbXZS/Ete7yLaO7RenOdken2NHKykBXbsaGxZT0UTltcarBciw+A78SRQs9iMAAVpsYA+l8b1hTePIA==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.4.0.tgz",
+      "integrity": "sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==",
       "hasInstallScript": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -29599,9 +29420,10 @@
       }
     },
     "node_modules/shell-quote": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.4.tgz",
-      "integrity": "sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz",
+      "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -32617,12 +32439,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/workerpool": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-10.0.2.tgz",
-      "integrity": "sha512-8PCeZlCwu0+8hXruze1ahYNsY+M0LOCmbmySZ9BWWqWIXP9TAXa6FZCxACTDL/0j47pFcC4xW98Gr8nAC5oymg==",
-      "license": "Apache-2.0"
-    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -32926,15 +32742,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/zod": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
-      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "packages/bruno-app": {
       "name": "@usebruno/app",
       "version": "2.0.0",
@@ -32955,7 +32762,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",
@@ -32983,7 +32789,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",
@@ -33015,7 +32821,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",
@@ -34506,6 +34312,18 @@
         "node": ">=10"
       }
     },
+    "packages/bruno-app/node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "packages/bruno-app/node_modules/uc.micro": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
@@ -34556,11 +34374,10 @@
         "@usebruno/lang": "0.12.0",
         "@usebruno/requests": "^0.1.0",
         "aws4-axios": "^3.3.15",
-        "axios": "1.16.0",
+        "axios": "1.13.6",
         "axios-ntlm": "^1.4.2",
         "chai": "^4.3.7",
         "chalk": "^3.0.0",
-        "cli-table3": "^0.6.5",
         "decomment": "^0.9.5",
         "form-data": "4.0.4",
         "fs-extra": "^10.1.0",
@@ -34568,7 +34385,7 @@
         "https-proxy-agent": "^7.0.2",
         "iconv-lite": "^0.6.3",
         "js-yaml": "^4.1.1",
-        "lodash": "4.18.1",
+        "lodash": "^4.17.21",
         "qs": "^6.14.1",
         "socks-proxy-agent": "^8.0.2",
         "xmlbuilder": "^15.1.1",
@@ -35101,18 +34918,16 @@
       "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
-        "@usebruno/common": "^0.1.0",
         "@usebruno/schema": "^0.7.0",
         "js-yaml": "^4.1.1",
         "jscodeshift": "^17.3.0",
-        "lodash": "4.18.1",
+        "lodash": "^4.17.21",
         "nanoid": "3.3.8",
         "xml2js": "^0.6.2"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
         "@babel/preset-env": "^7.25.4",
-        "@babel/preset-typescript": "^7.25.0",
         "@opencollection/types": "0.9.1",
         "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-commonjs": "^23.0.2",
@@ -35196,8 +35011,6 @@
       "name": "bruno",
       "version": "2.0.0",
       "dependencies": {
-        "@ai-sdk/anthropic": "3.0.15",
-        "@ai-sdk/openai": "3.0.12",
         "@aws-sdk/credential-providers": "3.1019.0",
         "@grpc/grpc-js": "^1.13.2",
         "@grpc/proto-loader": "^0.7.13",
@@ -35212,10 +35025,9 @@
         "@usebruno/schema": "0.7.0",
         "about-window": "^1.15.2",
         "adm-zip": "^0.5.16",
-        "ai": "6.0.39",
         "archiver": "^7.0.1",
         "aws4-axios": "^3.3.15",
-        "axios": "1.16.0",
+        "axios": "1.13.6",
         "axios-ntlm": "^1.4.2",
         "chai": "^4.3.7",
         "chokidar": "^3.5.3",
@@ -35237,7 +35049,7 @@
         "iconv-lite": "^0.6.3",
         "is-valid-path": "^0.1.1",
         "js-yaml": "^4.1.1",
-        "lodash": "4.18.1",
+        "lodash": "^4.17.21",
         "mime-types": "^2.1.35",
         "nanoid": "3.3.8",
         "qs": "^6.14.1",
@@ -35245,9 +35057,7 @@
         "socks-proxy-agent": "^8.0.2",
         "tough-cookie": "^6.0.0",
         "uuid": "^10.0.0",
-        "workerpool": "10.0.2",
-        "yup": "^0.32.11",
-        "zod": "^4.1.8"
+        "yup": "^0.32.11"
       },
       "devDependencies": {
         "electron": "~37.6.1",
@@ -35785,16 +35595,14 @@
       "license": "MIT",
       "dependencies": {
         "@types/nanoid": "^2.1.0",
-        "@usebruno/common": "0.1.0",
         "@usebruno/lang": "0.12.0",
         "ajv": "^8.17.1",
-        "lodash": "4.18.1",
+        "lodash": "^4.17.21",
         "yaml": "^2.3.4"
       },
       "devDependencies": {
         "@babel/preset-env": "^7.22.0",
         "@babel/preset-typescript": "^7.22.0",
-        "@opencollection/types": "0.9.1",
         "@rollup/plugin-commonjs": "^23.0.2",
         "@rollup/plugin-json": "^6.1.0",
         "@rollup/plugin-node-resolve": "^15.0.1",
@@ -35994,7 +35802,7 @@
         "ajv": "^8.12.0",
         "ajv-formats": "^2.1.1",
         "atob": "^2.1.2",
-        "axios": "1.16.0",
+        "axios": "1.13.6",
         "btoa": "^1.2.1",
         "chai": "^4.3.7",
         "chai-string": "^1.5.0",
@@ -36002,7 +35810,7 @@
         "crypto-js": "^4.2.0",
         "json-query": "^2.2.2",
         "jsonwebtoken": "^9.0.3",
-        "lodash": "4.18.1",
+        "lodash": "^4.17.21",
         "moment": "^2.29.4",
         "nanoid": "3.3.8",
         "node-fetch": "^2.7.0",
@@ -36170,32 +35978,12 @@
       "version": "0.12.0",
       "license": "MIT",
       "dependencies": {
-        "@usebruno/common": "0.1.0",
         "arcsecond": "^5.0.0",
         "dotenv": "^16.3.1",
-        "lodash": "4.18.1",
+        "lodash": "^4.17.21",
         "ohm-js": "^16.6.0"
       }
     },
-    "packages/bruno-pool": {
-      "name": "@usebruno/pool",
-      "version": "0.1.0",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@usebruno/filestore": "0.1.0",
-        "workerpool": "10.0.2"
-      },
-      "devDependencies": {
-        "@rollup/plugin-commonjs": "23.0.2",
-        "@rollup/plugin-node-resolve": "15.0.1",
-        "@rollup/plugin-typescript": "12.1.2",
-        "@types/node": "^24.1.0",
-        "rollup": "3.30.0",
-        "tslib": "2.8.1",
-        "typescript": "5.4.5"
-      }
-    },
     "packages/bruno-query": {
       "name": "@usebruno/query",
       "version": "0.1.0",
@@ -36220,7 +36008,7 @@
         "@grpc/grpc-js": "^1.13.3",
         "@grpc/proto-loader": "^0.7.15",
         "@types/qs": "^6.9.18",
-        "axios": "1.16.0",
+        "axios": "1.13.6",
         "debug": "^4.4.3",
         "google-protobuf": "^4.0.0",
         "grpc-js-reflection-client": "^1.3.0",
@@ -36397,7 +36185,6 @@
       "version": "0.7.0",
       "license": "MIT",
       "dependencies": {
-        "@usebruno/common": "0.1.0",
         "nanoid": "3.3.8",
         "yup": "^0.32.11"
       }
@@ -36424,22 +36211,12 @@
         "node": ">=14.17"
       }
     },
-    "packages/bruno-storage": {
-      "name": "@usebruno/storage",
-      "version": "0.1.0",
-      "extraneous": true,
-      "license": "MIT",
-      "devDependencies": {
-        "@types/node": "^24.1.0",
-        "typescript": "5.4.5"
-      }
-    },
     "packages/bruno-tests": {
       "name": "@usebruno/tests",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "axios": "1.16.0",
+        "axios": "1.13.6",
         "body-parser": "2.2.0",
         "cookie-parser": "^1.4.6",
         "cors": "^2.8.5",
@@ -36451,7 +36228,7 @@
         "http-proxy": "^1.18.1",
         "js-yaml": "^4.1.1",
         "jsonwebtoken": "^9.0.3",
-        "lodash": "4.18.1",
+        "lodash": "^4.17.21",
         "multer": "^1.4.5-lts.1",
         "ws": "^8.18.3"
       }
@@ -36703,7 +36480,7 @@
       "license": "MIT",
       "dependencies": {
         "@iarna/toml": "^2.2.5",
-        "lodash": "4.18.1"
+        "lodash": "^4.17.21"
       }
     }
   }

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.9.1",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -30,13 +31,10 @@
     "@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",
@@ -45,7 +43,7 @@
     "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,9 @@
     "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 +93,9 @@
     ]
   },
   "overrides": {
-    "axios": "1.16.0",
+    "axios":"1.13.6",
     "rollup": "3.30.0",
-    "pbkdf2": "3.1.5",
+    "pbkdf2":"3.1.5",
     "electron-store": {
       "conf": {
         "json-schema-typed": "8.0.1"

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",
@@ -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",

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/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,72 +1,12 @@
 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 }) => {
   return (
     <StyledWrapper>
       <div className="swagger-root w-full">
-        <SwaggerUI
-          spec={spec}
-          onComplete={onComplete}
-          requestInterceptor={requestInterceptor}
-        />
+        <SwaggerUI spec={spec} onComplete={onComplete} />
       </div>
     </StyledWrapper>
   );

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/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/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;
@@ -174,32 +165,6 @@ const StyledWrapper = styled.div`
     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 { 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,7 +16,6 @@ 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,
@@ -263,24 +259,6 @@ 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
@@ -291,8 +269,6 @@ class CodeEditor extends React.Component {
       if (cmInput) {
         cmInput.classList.add('mousetrap');
       }
-
-      this.cleanupResizeRefresh = setupCodeMirrorResizeRefresh(editor, this._node);
     }
   }
 
@@ -413,7 +389,6 @@ class CodeEditor extends React.Component {
         });
       }
 
-      this.aiAutocompleteCleanup?.();
       this.editor?._destroyLinkAware?.();
       this.editor.off('change', this._onEdit);
 
@@ -427,7 +402,6 @@ class CodeEditor extends React.Component {
 
       // Clean up lint error tooltip
       this.cleanupLintErrorTooltip?.();
-      this.cleanupResizeRefresh?.();
 
       const wrapper = this.editor.getWrapperElement();
       wrapper?.parentNode?.removeChild(wrapper);
@@ -492,15 +466,7 @@ 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}
-    />
-  );
+  return <CodeEditor {...props} persistenceScope={persistenceScope} ref={ref} />;
 });
 
 CodeEditorWithPersistenceScope.displayName = 'CodeEditor';

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

@@ -75,13 +75,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/Docs/index.js

@@ -4,13 +4,11 @@ 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 { useRef } 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';
@@ -27,8 +25,6 @@ const Docs = ({ collection }) => {
   const isEditing = focusedTab?.docsEditing || 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.
@@ -89,21 +85,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')}
+          initialScroll={scroll}
+          onScroll={setScroll}
+        />
       ) : (
         <div className="pl-1">
           <div className="h-[1px] min-h-[500px]">

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

@@ -8,7 +8,6 @@ import ShareCollection from 'components/ShareCollection/index';
 import GenerateDocumentation from 'components/Sidebar/Collections/Collection/GenerateDocumentation';
 import { addTab } from 'providers/ReduxStore/slices/tabs';
 import StyledWrapper from './StyledWrapper';
-import Migration from '../Migration';
 
 const Info = ({ collection }) => {
   const dispatch = useDispatch();
@@ -127,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/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,10 +1,8 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { 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';
@@ -15,7 +13,6 @@ 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();
@@ -62,20 +59,6 @@ const Script = ({ collection }) => {
     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 +85,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">
@@ -127,57 +108,39 @@ const Script = ({ collection }) => {
         </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>
+          <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']}
+            initialScroll={preReqScroll}
+            onScroll={setPreReqScroll}
+          />
         </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>
+          <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']}
+            initialScroll={postResScroll}
+            onScroll={setPostResScroll}
+          />
         </TabsContent>
       </Tabs>
 

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

@@ -1,16 +1,13 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useRef } 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();
@@ -32,35 +29,24 @@ 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
+        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}
+      />
 
       <div className="mt-6">
         <Button type="submit" size="sm" onClick={handleSave}>

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

@@ -5,8 +5,6 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 import { updateTableColumnWidths } from 'providers/ReduxStore/slices/tabs';
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
-import DataTypeSelector from 'components/DataTypeSelector';
-import { valueToString } from '@usebruno/common/utils';
 import EditableTable from 'components/EditableTable';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
@@ -59,31 +57,15 @@ const VarsTable = ({ collection, vars, varType, initialScroll = 0 }) => {
         </div>
       ),
       placeholder: varType === 'request' ? 'Value' : 'Expr',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <div className="flex items-center w-full gap-2">
-          <div className="flex-1 min-w-0">
-            <MultiLineEditor
-              value={valueToString(value)}
-              theme={storedTheme}
-              onSave={onSave}
-              onChange={onChange}
-              collection={collection}
-              placeholder={value == null || (typeof value === 'string' && value.trim() === '') ? (varType === 'request' ? 'Value' : 'Expr') : ''}
-            />
-          </div>
-          {/* DataTypes apply to literal values, not to the JS expression that produces a post-response value. */}
-          {!isLastEmptyRow && varType === 'request' && (
-            <DataTypeSelector
-              variable={row}
-              theme={storedTheme}
-              collection={collection}
-              onChange={(fields) => {
-                const updated = (vars || []).map((v) => v.uid === row.uid ? { ...v, ...fields } : v);
-                handleVarsChange(updated);
-              }}
-            />
-          )}
-        </div>
+      render: ({ value, onChange }) => (
+        <MultiLineEditor
+          value={value || ''}
+          theme={storedTheme}
+          onSave={onSave}
+          onChange={onChange}
+          collection={collection}
+          placeholder={!value ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+        />
       )
     }
   ];
@@ -98,7 +80,6 @@ const VarsTable = ({ collection, vars, varType, initialScroll = 0 }) => {
     <StyledWrapper className="w-full">
       <EditableTable
         tableId="collection-vars"
-        testId={`collection-vars-${varType === 'response' ? 'res' : 'req'}`}
         columns={columns}
         rows={vars}
         onChange={handleVarsChange}

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

@@ -15,7 +15,6 @@ import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
 import StatusDot from 'components/StatusDot';
 import Overview from './Overview/index';
-import { DEFAULT_PRESET_REQUEST_TYPE } from 'utils/common/constants';
 
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
@@ -61,7 +60,7 @@ const CollectionSettings = ({ collection }) => {
     ? get(collection, 'draft.brunoConfig.protobuf', {})
     : get(collection, 'brunoConfig.protobuf', {});
   const presets = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.presets', {}) : get(collection, 'brunoConfig.presets', {});
-  const hasPresets = presets && ((presets.requestType && presets.requestType !== DEFAULT_PRESET_REQUEST_TYPE) || (presets.requestUrl && presets.requestUrl !== ''));
+  const hasPresets = presets && presets.requestUrl !== '';
 
   const getTabPanel = (tab) => {
     switch (tab) {

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

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .type-label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 150px;
-    display: inline-block;
-    font-size: 0.75rem;
-    opacity: 0.7;
-  }
-
-  .caret-icon {
-    opacity: 0.7;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,58 +0,0 @@
-import React from 'react';
-import { IconAlertCircle, IconCaretDown } from '@tabler/icons';
-import { Tooltip } from 'react-tooltip';
-import { BRUNO_VARIABLE_DATATYPES, parseValueByDataType, validateDataTypeValue } from '@usebruno/common/utils';
-import MenuDropdown from 'ui/MenuDropdown';
-import StyledWrapper from './StyledWrapper';
-
-const DataTypeSelector = ({ variable, onChange }) => {
-  const selectedType = variable.dataType || 'string';
-  const coercedValue = parseValueByDataType(variable.value, selectedType);
-  const typeError = validateDataTypeValue(coercedValue, selectedType);
-
-  const handleTypeChange = (type) => {
-    onChange({ dataType: type === 'string' ? undefined : type });
-  };
-
-  const items = BRUNO_VARIABLE_DATATYPES.map((type) => ({
-    id: type,
-    label: type,
-    onClick: () => handleTypeChange(type)
-  }));
-
-  return (
-    <StyledWrapper>
-      <div className="flex items-center relative">
-        <MenuDropdown
-          items={items}
-          selectedItemId={selectedType}
-          placement="bottom-end"
-          showTickMark={true}
-          appendTo={() => document.body}
-        >
-          <div className="flex items-center cursor-pointer select-none">
-            <span className="type-label">{selectedType}</span>
-            <IconCaretDown className="caret-icon ml-1" size={14} strokeWidth={2} />
-          </div>
-        </MenuDropdown>
-        {typeError && (
-          <span className="ml-1">
-            <IconAlertCircle
-              data-tooltip-id={`type-error-${variable.uid}`}
-              className="text-yellow-600 cursor-pointer"
-              size={16}
-            />
-            <Tooltip
-              className="tooltip-mod"
-              id={`type-error-${variable.uid}`}
-              content={typeError}
-              place="top"
-            />
-          </span>
-        )}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default React.memo(DataTypeSelector);

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

@@ -37,7 +37,7 @@ const StyledWrapper = styled.div`
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    min-height: 0;
+    min-height: 0; /* Important for proper flex behavior */
   }
 
   .network-empty {
@@ -68,126 +68,66 @@ const StyledWrapper = styled.div`
     flex-direction: column;
     height: 100%;
     overflow: hidden;
-    min-height: 0;
-    position: relative;
-
-    &.is-resizing {
-      cursor: col-resize;
-      user-select: none;
-    }
+    min-height: 0; /* Important for proper flex behavior */
   }
 
   .requests-header {
     display: grid;
-    flex-shrink: 0;
+    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
+    gap: 12px;
+    padding: 4px 16px;
     background: ${(props) => props.theme.console.headerBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
     font-size: 10px;
     color: ${(props) => props.theme.console.titleColor};
     text-transform: uppercase;
     letter-spacing: 0.5px;
-
-    & > * {
-      min-width: 0;
-      overflow: hidden;
-    }
-
-    .header-cell {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 8px;
-      cursor: pointer;
-      user-select: none;
-
-      &:first-child { padding-left: 16px; }
-      &:last-child  { padding-right: 16px; }
-
-      &:hover {
-        color: ${(props) => props.theme.console.messageColor};
-      }
-
-      span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      svg { flex-shrink: 0; }
-    }
+    flex-shrink: 0;
   }
 
   .requests-list {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    min-height: 0;
+    min-height: 0; /* Important for proper scrolling */
   }
 
   .request-row {
     display: grid;
+    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
+    gap: 12px;
+    padding: 2px 16px;
     cursor: pointer;
     transition: background-color 0.1s ease;
     font-size: ${(props) => props.theme.font.size.sm};
     align-items: center;
 
-    & > * {
-      min-width: 0;
-      overflow: hidden;
+    &:hover {
+      background: ${(props) => props.theme.console.logHoverBg};
     }
 
-    &:hover  { background: ${(props) => props.theme.console.logHoverBg}; }
-
     &.selected {
+      padding-left: 13px;
       background: ${(props) => props.theme.console.logHoverBg};
-      box-shadow: inset 3px 0 0 ${(props) => props.theme.console.checkboxColor};
+      border-left: 3px solid ${(props) => props.theme.console.checkboxColor};
     }
   }
 
-  .col-separator {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    transform: translateX(-2px);
-    cursor: col-resize;
-    z-index: 3;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 1px;
-      height: 100%;
-      background: ${(props) => props.theme.sidebar.dragbar.border};
-    }
-
-    &:hover::after,
-    &.resizing::after {
-      background: ${(props) => props.theme.sidebar.dragbar.activeBorder};
-    }
-  }
-
-  .request-method   { padding: 2px 8px 2px 16px; }
-  .request-status   { padding: 2px 8px; }
-
   .method-badge {
     display: inline-flex;
     align-items: center;
+    justify-content: start;
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    min-width: 45px;
   }
 
-  .status-badge { font-size: ${(props) => props.theme.font.size.sm}; }
+  .status-badge {
+    font-size: ${(props) => props.theme.font.size.sm};
+  }
 
   .request-domain {
-    padding: 2px 8px;
     color: ${(props) => props.theme.console.messageColor};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -195,7 +135,6 @@ const StyledWrapper = styled.div`
   }
 
   .request-path {
-    padding: 2px 8px;
     color: ${(props) => props.theme.console.messageColor};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -204,37 +143,23 @@ const StyledWrapper = styled.div`
   }
 
   .request-time {
-    padding: 2px 8px;
     color: ${(props) => props.theme.console.timestampColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
     font-size: ${(props) => props.theme.font.size.xs};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   .request-duration {
-    padding: 2px 8px;
     color: ${(props) => props.theme.console.messageColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
     font-size: ${(props) => props.theme.font.size.xs};
     text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
-  .text-right { text-align: right; }
-
   .request-size {
-    padding: 2px 8px;
     color: ${(props) => props.theme.console.messageColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
     font-size: ${(props) => props.theme.font.size.xs};
     text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 `;
 

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

@@ -1,27 +1,12 @@
 import React, { useMemo } from 'react';
-import { usePersistedState } from 'hooks/usePersistedState';
 import { useSelector, useDispatch } from 'react-redux';
 import {
-  IconNetwork,
-  IconArrowUp,
-  IconArrowDown
+  IconNetwork
 } from '@tabler/icons';
 import {
   setSelectedRequest
 } from 'providers/ReduxStore/slices/logs';
-import { useResizableColumns } from 'hooks/useResizableColumns';
 import StyledWrapper from './StyledWrapper';
-import { sortRequests } from './utils';
-
-const COLUMNS = [
-  { key: 'method', label: 'Method', width: 80, align: 'left' },
-  { key: 'status', label: 'Status', width: 70, align: 'left' },
-  { key: 'domain', label: 'Domain', width: 180, align: 'left' },
-  { key: 'path', label: 'Path', width: 300, align: 'left' },
-  { key: 'time', label: 'Time', width: 110, align: 'left' },
-  { key: 'duration', label: 'Duration', width: 100, align: 'right' },
-  { key: 'size', label: 'Size', width: 80, align: 'right' }
-];
 
 const MethodBadge = ({ method }) => {
   const methodLower = method?.toLowerCase() || 'get';
@@ -43,7 +28,7 @@ const StatusBadge = ({ status, statusCode }) => {
   );
 };
 
-const RequestRow = ({ request, isSelected, onClick, gridTemplateColumns }) => {
+const RequestRow = ({ request, isSelected, onClick }) => {
   const { data } = request;
   const { request: req, response: res, timestamp } = data;
 
@@ -97,9 +82,6 @@ const RequestRow = ({ request, isSelected, onClick, gridTemplateColumns }) => {
     <div
       className={`request-row ${isSelected ? 'selected' : ''}`}
       onClick={onClick}
-      style={{ gridTemplateColumns }}
-      data-testid="network-request-row"
-
     >
       <div className="request-method">
         <MethodBadge method={req?.method} />
@@ -134,27 +116,12 @@ const RequestRow = ({ request, isSelected, onClick, gridTemplateColumns }) => {
 
 const NetworkTab = () => {
   const dispatch = useDispatch();
-  const [sortConfig, setSortConfig] = usePersistedState({ key: 'devtools-network-sort', default: { key: null, direction: null } });
-  const [savedColWidths, setSavedColWidths] = usePersistedState({ key: 'devtools-network-col-widths', default: null });
-
-  const {
-    containerRef,
-    gridTemplateColumns,
-    separatorPositions,
-    resizingIdx,
-    handleResizeStart
-  } = useResizableColumns({
-    defaultWidths: COLUMNS.map((c) => c.width),
-    initialWidths: savedColWidths,
-    minColWidth: 60,
-    onResizeEnd: setSavedColWidths
-  });
-
   const { networkFilters, selectedRequest } = useSelector((state) => state.logs);
   const collections = useSelector((state) => state.collections.collections);
 
   const allRequests = useMemo(() => {
     const requests = [];
+
     collections.forEach((collection) => {
       if (collection.timeline) {
         collection.timeline
@@ -168,6 +135,7 @@ const NetworkTab = () => {
           });
       }
     });
+
     return requests.sort((a, b) => a.timestamp - b.timestamp);
   }, [collections]);
 
@@ -178,21 +146,10 @@ const NetworkTab = () => {
     });
   }, [allRequests, networkFilters]);
 
-  const handleRequestClick = (request) => dispatch(setSelectedRequest(request));
-
-  const handleHeaderClick = (key) => {
-    setSortConfig((prev) => {
-      if (prev.key !== key) return { key, direction: 'asc' };
-      if (prev.direction === 'asc') return { key, direction: 'desc' };
-      return { key: null, direction: null };
-    });
+  const handleRequestClick = (request) => {
+    dispatch(setSelectedRequest(request));
   };
 
-  const sortedRequests = useMemo(
-    () => sortRequests(filteredRequests, sortConfig.key, sortConfig.direction),
-    [filteredRequests, sortConfig]
-  );
-
   return (
     <StyledWrapper>
       <div className="network-content">
@@ -203,49 +160,27 @@ const NetworkTab = () => {
             <span>Requests will appear here as you make API calls</span>
           </div>
         ) : (
-          <div className={`requests-container${resizingIdx !== null ? ' is-resizing' : ''}`}>
-            <div className="requests-header" style={{ gridTemplateColumns }}>
-              {COLUMNS.map((col) => (
-                <div
-                  key={col.key}
-                  className={`header-cell${col.align === 'right' ? ' text-right' : ''}`}
-                  onClick={() => handleHeaderClick(col.key)}
-                  data-testid={`network-header-${col.key}`}
-                >
-                  <span title={col.label}>{col.label}</span>
-                  {sortConfig.key === col.key && (
-                    sortConfig.direction === 'asc'
-                      ? <IconArrowUp size={14} strokeWidth={2} data-testid="sort-icon-asc" />
-                      : <IconArrowDown size={14} strokeWidth={2} data-testid="sort-icon-desc" />
-                  )}
-                </div>
-              ))}
+          <div className="requests-container">
+            <div className="requests-header">
+              <div>Method</div>
+              <div>Status</div>
+              <div>Domain</div>
+              <div>Path</div>
+              <div>Time</div>
+              <div className="text-right">Duration</div>
+              <div className="text-right">Size</div>
             </div>
 
-            <div ref={containerRef} className="requests-list">
-              {sortedRequests.map((request, index) => (
+            <div className="requests-list">
+              {filteredRequests.map((request, index) => (
                 <RequestRow
                   key={`${request.collectionUid}-${request.itemUid}-${request.timestamp}-${index}`}
                   request={request}
-                  isSelected={
-                    selectedRequest?.timestamp === request.timestamp
-                    && selectedRequest?.itemUid === request.itemUid
-                  }
+                  isSelected={selectedRequest?.timestamp === request.timestamp && selectedRequest?.itemUid === request.itemUid}
                   onClick={() => handleRequestClick(request)}
-                  gridTemplateColumns={gridTemplateColumns}
                 />
               ))}
             </div>
-
-            {separatorPositions.map((left, i) => (
-              <div
-                key={i}
-                className={`col-separator${resizingIdx === i ? ' resizing' : ''}`}
-                style={{ left }}
-                onMouseDown={(e) => handleResizeStart(e, i)}
-                data-testid={`network-col-separator-${i}`}
-              />
-            ))}
           </div>
         )}
       </div>

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

@@ -1,207 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import { ThemeProvider } from 'providers/Theme';
-import NetworkTab from './index';
-
-const makeRequest = (overrides = {}) => ({
-  type: 'request',
-  timestamp: overrides.timestamp ?? 1000,
-  collectionUid: overrides.collectionUid ?? 'col-1',
-  itemUid: overrides.itemUid ?? 'item-1',
-  collectionName: 'Test Collection',
-  data: {
-    request: {
-      method: overrides.method ?? 'GET',
-      url: overrides.url ?? 'https://example.com/api/users'
-    },
-    response: {
-      status: overrides.status ?? 200,
-      statusCode: overrides.statusCode ?? 200,
-      // Use 'in' check so callers can explicitly pass undefined to test missing-value behaviour
-      ...('duration' in overrides ? { duration: overrides.duration } : { duration: 100 }),
-      ...('size' in overrides ? { size: overrides.size } : { size: 512 })
-    },
-    timestamp: overrides.timestamp ?? 1000
-  }
-});
-
-const ALL_FILTERS = { GET: true, POST: true, PUT: true, DELETE: true, PATCH: true, HEAD: true, OPTIONS: true };
-
-beforeEach(() => {
-  localStorage.clear();
-});
-
-const renderNetworkTab = (requests = []) => {
-  const store = configureStore({
-    reducer: {
-      collections: (state = {
-        collections: [{
-          uid: 'col-1',
-          name: 'Test Collection',
-          timeline: requests
-        }]
-      }) => state,
-      logs: (state = {
-        networkFilters: ALL_FILTERS,
-        selectedRequest: null
-      }) => state
-    }
-  });
-
-  return render(
-    <Provider store={store}>
-      <ThemeProvider>
-        <NetworkTab />
-      </ThemeProvider>
-    </Provider>
-  );
-};
-
-beforeEach(() => {
-  localStorage.clear();
-});
-
-describe('sort state cycle', () => {
-  const requests = [
-    makeRequest({ itemUid: 'a', method: 'GET' }),
-    makeRequest({ itemUid: 'b', method: 'POST' })
-  ];
-
-  it('shows no sort icon by default', () => {
-    renderNetworkTab(requests);
-    expect(screen.queryByTestId('sort-icon-asc')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('sort-icon-desc')).not.toBeInTheDocument();
-  });
-
-  it('first click on a column shows ascending icon', () => {
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    expect(screen.getByTestId('sort-icon-asc')).toBeInTheDocument();
-    expect(screen.queryByTestId('sort-icon-desc')).not.toBeInTheDocument();
-  });
-
-  it('second click on same column shows descending icon', () => {
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    expect(screen.getByTestId('sort-icon-desc')).toBeInTheDocument();
-    expect(screen.queryByTestId('sort-icon-asc')).not.toBeInTheDocument();
-  });
-
-  it('third click on same column clears sort', () => {
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    expect(screen.queryByTestId('sort-icon-asc')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('sort-icon-desc')).not.toBeInTheDocument();
-  });
-
-  it('clicking a different column resets to ascending on the new column', () => {
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    fireEvent.click(screen.getByTestId('network-header-method')); // now desc
-    fireEvent.click(screen.getByTestId('network-header-status')); // switch column
-    // Should show asc on status, not desc
-    expect(screen.getByTestId('sort-icon-asc')).toBeInTheDocument();
-    expect(screen.queryByTestId('sort-icon-desc')).not.toBeInTheDocument();
-  });
-
-  it('sort icon only appears on the active column', () => {
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-duration'));
-    // Only one icon total
-    expect(screen.getAllByTestId('sort-icon-asc')).toHaveLength(1);
-  });
-});
-
-describe('sort results', () => {
-  const getRowMethods = () =>
-    screen.getAllByTestId('network-request-row').map((row) =>
-      row.querySelector('.method-badge')?.textContent
-    );
-
-  it('sorts by method ascending (A → Z)', () => {
-    const requests = [
-      makeRequest({ itemUid: '1', method: 'POST' }),
-      makeRequest({ itemUid: '2', method: 'GET' }),
-      makeRequest({ itemUid: '3', method: 'DELETE' })
-    ];
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    expect(getRowMethods()).toEqual(['DELETE', 'GET', 'POST']);
-  });
-
-  it('sorts by method descending (Z → A)', () => {
-    const requests = [
-      makeRequest({ itemUid: '1', method: 'POST' }),
-      makeRequest({ itemUid: '2', method: 'GET' }),
-      makeRequest({ itemUid: '3', method: 'DELETE' })
-    ];
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    expect(getRowMethods()).toEqual(['POST', 'GET', 'DELETE']);
-  });
-
-  it('sorts by status ascending', () => {
-    const requests = [
-      makeRequest({ itemUid: '1', statusCode: 500 }),
-      makeRequest({ itemUid: '2', statusCode: 200 }),
-      makeRequest({ itemUid: '3', statusCode: 404 })
-    ];
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-status'));
-    const rows = screen.getAllByTestId('network-request-row');
-    const statuses = rows.map((r) => r.querySelector('.status-badge')?.textContent);
-    expect(statuses).toEqual(['200', '404', '500']);
-  });
-
-  it('sorts mixed-case methods case-insensitively', () => {
-    const requests = [
-      makeRequest({ itemUid: '1', method: 'post' }),
-      makeRequest({ itemUid: '2', method: 'GET' }),
-      makeRequest({ itemUid: '3', method: 'delete' })
-    ];
-    renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    // MethodBadge always renders uppercase; sort order should treat 'post' == 'POST'
-    expect(getRowMethods()).toEqual(['DELETE', 'GET', 'POST']);
-  });
-
-  it('restores sort config after close and reopen', () => {
-    const requests = [
-      makeRequest({ itemUid: '1', method: 'POST' }),
-      makeRequest({ itemUid: '2', method: 'GET' }),
-      makeRequest({ itemUid: '3', method: 'DELETE' })
-    ];
-
-    // First mount — set sort to method descending
-    const { unmount } = renderNetworkTab(requests);
-    fireEvent.click(screen.getByTestId('network-header-method')); // asc
-    fireEvent.click(screen.getByTestId('network-header-method')); // desc
-    expect(getRowMethods()).toEqual(['POST', 'GET', 'DELETE']);
-    unmount(); // simulate closing devtools
-
-    // Second mount — sort should be restored from localStorage
-    renderNetworkTab(requests);
-    expect(screen.getByTestId('sort-icon-desc')).toBeInTheDocument();
-    expect(getRowMethods()).toEqual(['POST', 'GET', 'DELETE']);
-  });
-
-  it('preserves insertion order when sort is cleared', () => {
-    const requests = [
-      makeRequest({ itemUid: '1', method: 'POST' }),
-      makeRequest({ itemUid: '2', method: 'GET' }),
-      makeRequest({ itemUid: '3', method: 'DELETE' })
-    ];
-    renderNetworkTab(requests);
-    // Sort then clear
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    fireEvent.click(screen.getByTestId('network-header-method'));
-    expect(getRowMethods()).toEqual(['POST', 'GET', 'DELETE']);
-  });
-});

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

@@ -1,31 +0,0 @@
-export const getSortValue = (request, key) => {
-  const { request: req, response: res, timestamp } = request.data;
-  switch (key) {
-    case 'method': return req?.method?.toUpperCase() ?? '';
-    case 'status': return res?.statusCode || res?.status || 0;
-    case 'domain': {
-      try { return new URL(req?.url || '').hostname; } catch { return req?.url || ''; }
-    }
-    case 'path': {
-      try {
-        const u = new URL(req?.url || '');
-        return u.pathname + u.search;
-      } catch { return req?.url || ''; }
-    }
-    case 'time': return timestamp || 0;
-    case 'duration': return res?.duration || 0;
-    case 'size': return res?.size || 0;
-    default: return '';
-  }
-};
-
-export const sortRequests = (requests, key, direction) => {
-  if (!key || !direction) return requests;
-  return [...requests].sort((a, b) => {
-    const valueA = getSortValue(a, key);
-    const valueB = getSortValue(b, key);
-    if (valueA < valueB) return direction === 'asc' ? -1 : 1;
-    if (valueA > valueB) return direction === 'asc' ? 1 : -1;
-    return 0;
-  });
-};

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

@@ -4,8 +4,11 @@ const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  width: 100%;
   background: ${(props) => props.theme.console.contentBg};
+  border-left: 1px solid ${(props) => props.theme.console.border};
+  min-width: 400px;
+  max-width: 600px;
+  width: 40%;
   overflow: hidden;
 
   .panel-header {
@@ -314,7 +317,6 @@ const StyledWrapper = styled.div`
       height: 100% !important;
       max-height: 400px !important;
       padding: 0.5rem !important;
-      overflow: auto !important;
 
       .network-logs-pre {
         color: ${(props) => props.theme.console.messageColor} !important;

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

@@ -144,41 +144,6 @@ const StyledWrapper = styled.div`
     gap: 4px;
   }
 
-  .details-panel-wrapper {
-    position: relative;
-    flex-shrink: 0;
-    height: 100%;
-    display: flex;
-  }
-
-  div.details-drag-handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    cursor: col-resize;
-    background-color: transparent;
-    width: 6px;
-    position: absolute;
-    left: -3px;
-    top: 0;
-    z-index: 10;
-    transition: opacity 0.2s ease;
-
-    div.drag-request-border {
-      width: 1px;
-      height: 100%;
-      border-left: solid 1px ${(props) => props.theme.sidebar.dragbar.border};
-    }
-
-    &:hover div.drag-request-border {
-      width: 1px;
-      height: 100%;
-      border-left: solid 1px ${(props) => props.theme.sidebar.dragbar.activeBorder};
-    }
-  }
-
-
   .action-controls {
     display: flex;
     align-items: center;

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { usePersistedState } from 'hooks/usePersistedState';
 import { useSelector, useDispatch } from 'react-redux';
 import ReactJson from 'react-json-view';
 import { useTheme } from 'providers/Theme';
@@ -34,10 +33,6 @@ import RequestDetailsPanel from './RequestDetailsPanel';
 import ErrorDetailsPanel from './ErrorDetailsPanel';
 import Performance from '../Performance';
 import StyledWrapper from './StyledWrapper';
-import { useResizablePanel } from 'hooks/useResizablePanel';
-
-const MIN_DETAILS_PANEL_WIDTH = 280;
-const MAX_DETAILS_PANEL_WIDTH = 800;
 
 const LogIcon = ({ type }) => {
   const iconProps = { size: 16, strokeWidth: 1.5 };
@@ -386,17 +381,8 @@ const Console = () => {
   const dispatch = useDispatch();
   const { logs, filters, activeTab, selectedRequest, selectedError, networkFilters, debugErrors } = useSelector((state) => state.logs);
   const collections = useSelector((state) => state.collections.collections);
-  const [savedDetailsPanelWidth, setSavedDetailsPanelWidth] = usePersistedState({ key: 'devtools-details-panel-width', default: 400 });
   const consoleRef = useRef(null);
 
-  const { width: detailsPanelWidth, handleDragStart: handleDetailsPanelDragStart } = useResizablePanel({
-    initialWidth: savedDetailsPanelWidth,
-    minWidth: MIN_DETAILS_PANEL_WIDTH,
-    maxWidth: MAX_DETAILS_PANEL_WIDTH,
-    direction: 'right',
-    onResizeEnd: (newWidth) => setSavedDetailsPanelWidth(newWidth)
-  });
-
   const logCounts = logs.reduce((counts, log) => {
     counts[log.type] = (counts[log.type] || 0) + 1;
     return counts;
@@ -628,16 +614,7 @@ const Console = () => {
             <div className="network-main">
               {renderTabContent()}
             </div>
-            <div className="details-panel-wrapper" style={{ width: detailsPanelWidth }}>
-              <div
-                className="details-drag-handle"
-                onMouseDown={handleDetailsPanelDragStart}
-                data-testid="details-panel-drag-handle"
-              >
-                <div className="drag-request-border" />
-              </div>
-              <RequestDetailsPanel />
-            </div>
+            <RequestDetailsPanel />
           </div>
         ) : activeTab === 'debug' && selectedError ? (
           <div className="debug-with-details">

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

@@ -4,13 +4,11 @@ import find from 'lodash/find';
 import { updateRequestDocs } from 'providers/ReduxStore/slices/collections';
 import { updateDocsEditing } from 'providers/ReduxStore/slices/tabs';
 import { useTheme } from 'providers/Theme';
-import { useMemo, useRef } from 'react';
+import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
-import AIAssist from 'components/AIAssist';
-import { buildAiContextPayload } from 'utils/ai';
 import StyledWrapper from './StyledWrapper';
 import { usePersistedState } from 'hooks/usePersistedState';
 import { useTrackScroll } from 'hooks/useTrackScroll';
@@ -44,10 +42,6 @@ const Documentation = ({ item, collection }) => {
   };
 
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const { requestContext, variables: aiVariables } = useMemo(
-    () => buildAiContextPayload(item, collection),
-    [item, collection]
-  );
 
   if (!item) {
     return null;
@@ -60,27 +54,18 @@ const Documentation = ({ item, collection }) => {
       </div>
 
       {isEditing ? (
-        <div className="relative flex-1 min-h-0">
-          <CodeEditor
-            collection={collection}
-            theme={displayedTheme}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            value={docs || ''}
-            onEdit={onEdit}
-            onSave={onSave}
-            mode="application/text"
-            initialScroll={scroll}
-            onScroll={setScroll}
-          />
-          <AIAssist
-            scriptType="docs"
-            currentScript={docs || ''}
-            requestContext={requestContext}
-            variables={aiVariables}
-            onApply={onEdit}
-          />
-        </div>
+        <CodeEditor
+          collection={collection}
+          theme={displayedTheme}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          value={docs || ''}
+          onEdit={onEdit}
+          onSave={onSave}
+          mode="application/text"
+          initialScroll={scroll}
+          onScroll={setScroll}
+        />
       ) : (
         <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
       )}

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

@@ -21,19 +21,17 @@ const findScrollParent = (element) => {
 const TableRow = React.memo(
   ({ children, item, context, ...rest }) => {
     const rowIndex = Number(rest['data-item-index']);
-    const { reorderable, reorderableRowCount, isLastEmptyRow, dragOverRow, onDragStart, onDragOver, onDrop, onDragEnd, onDragLeave, keyColumn } = context;
+    const { reorderable, reorderableRowCount, isLastEmptyRow, dragOverRow, onDragStart, onDragOver, onDrop, onDragEnd, onDragLeave } = context;
     const isEmpty = isLastEmptyRow(item, rowIndex);
     const canDrag = reorderable && !isEmpty && rowIndex < reorderableRowCount;
     const isDragOver = canDrag && dragOverRow === rowIndex;
     const existingClass = rest.className || '';
     const className = isDragOver ? `${existingClass} drag-over`.trim() : existingClass;
-    const rowName = keyColumn ? item?.[keyColumn.key] : undefined;
 
     return (
       <tr
         {...rest}
         className={className}
-        data-row-name={rowName || undefined}
         draggable={canDrag}
         onDragStart={canDrag ? (e) => onDragStart(e, rowIndex) : undefined}
         onDragOver={canDrag ? (e) => onDragOver(e, rowIndex) : undefined}
@@ -170,17 +168,6 @@ const EditableTable = ({
     };
   }, [defaultRow, checkboxKey]);
 
-  const hasAnyValue = useCallback((row) => {
-    for (const col of columns) {
-      const val = col.getValue ? col.getValue(row) : row[col.key];
-      const defaultVal = defaultRow[col.key];
-      if (val && val !== defaultVal && (typeof val !== 'string' || val.trim() !== '')) {
-        return true;
-      }
-    }
-    return false;
-  }, [columns, defaultRow]);
-
   const rowsWithEmpty = useMemo(() => {
     if (!showAddRow) {
       return rows;
@@ -190,11 +177,16 @@ const EditableTable = ({
       return [createEmptyRow()];
     }
 
-    // If the last row is already empty (e.g. a stray empty row loaded from a
-    // pre-existing file), don't append another one — otherwise the table would
-    // render two empty rows at the bottom on the initial render.
-    if (!hasAnyValue(rows[rows.length - 1])) {
-      return rows;
+    const lastRow = rows[rows.length - 1];
+    const keyColumn = columns.find((col) => col.isKeyField);
+
+    if (keyColumn) {
+      const lastRowKeyValue = keyColumn.getValue ? keyColumn.getValue(lastRow) : lastRow[keyColumn.key];
+      const isLastRowEmpty = !lastRowKeyValue || (typeof lastRowKeyValue === 'string' && lastRowKeyValue.trim() === '');
+
+      if (isLastRowEmpty) {
+        return rows;
+      }
     }
 
     if (!emptyRowUidRef.current || rows.some((r) => r.uid === emptyRowUidRef.current)) {
@@ -206,11 +198,15 @@ const EditableTable = ({
       [checkboxKey]: true,
       ...defaultRow
     }];
-  }, [rows, columns, defaultRow, checkboxKey, createEmptyRow, hasAnyValue, showAddRow]);
+  }, [rows, columns, defaultRow, checkboxKey, createEmptyRow, showAddRow]);
 
-  // A row is empty when none of its columns hold a value — the single source of
-  // truth used everywhere (memo guard, persistence filter, last-row rendering).
-  const isEmptyRow = useCallback((row) => !hasAnyValue(row), [hasAnyValue]);
+  const isEmptyRow = useCallback((row) => {
+    const keyColumn = columns.find((col) => col.isKeyField);
+    if (!keyColumn) return false;
+
+    const value = keyColumn.getValue ? keyColumn.getValue(row) : row[keyColumn.key];
+    return !value || (typeof value === 'string' && value.trim() === '');
+  }, [columns]);
 
   const isLastEmptyRow = useCallback((row, index) => {
     if (!showAddRow) return false;
@@ -231,20 +227,50 @@ const EditableTable = ({
     const rowIndex = rowsWithEmpty.findIndex((r) => r.uid === rowUid);
     if (rowIndex === -1) return;
 
-    const updatedRows = rowsWithEmpty.map((row) => {
+    const currentRow = rowsWithEmpty[rowIndex];
+    const isLast = rowIndex === rowsWithEmpty.length - 1;
+    const wasEmpty = isEmptyRow(currentRow);
+
+    const keyColumn = columns.find((col) => col.isKeyField);
+    const isKeyFieldChange = keyColumn && keyColumn.key === key;
+
+    let updatedRows = rowsWithEmpty.map((row) => {
       if (row.uid === rowUid) {
         return { ...row, [key]: value };
       }
       return row;
     });
 
-    // Remove any fully-empty rows from the persisted data. The trailing empty
-    // "add row" is re-added by the rowsWithEmpty memo, so there's always
-    // exactly one empty row at the bottom and never a stray empty row above it.
-    const result = showAddRow ? updatedRows.filter(hasAnyValue) : updatedRows;
+    // Only add a new empty row when the key field is filled
+    if (showAddRow && isLast && wasEmpty && isKeyFieldChange && value && value.trim() !== '') {
+      emptyRowUidRef.current = uuid();
+      updatedRows.push({
+        uid: emptyRowUidRef.current,
+        [checkboxKey]: true,
+        ...defaultRow
+      });
+    }
+
+    const hasAnyValue = (row) => {
+      for (const col of columns) {
+        const val = col.getValue ? col.getValue(row) : row[col.key];
+        const defaultVal = defaultRow[col.key];
+        if (val && val !== defaultVal && (typeof val !== 'string' || val.trim() !== '')) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    const result = updatedRows.filter((row, i) => {
+      if (showAddRow && i === updatedRows.length - 1) {
+        return hasAnyValue(row);
+      }
+      return true;
+    });
 
     onChange(result);
-  }, [rowsWithEmpty, hasAnyValue, onChange, showAddRow]);
+  }, [rowsWithEmpty, columns, onChange, checkboxKey, defaultRow, isEmptyRow, showAddRow]);
 
   const handleCheckboxChange = useCallback((rowUid, checked) => {
     handleValueChange(rowUid, checkboxKey, checked);
@@ -344,20 +370,17 @@ const EditableTable = ({
     );
   }, [isLastEmptyRow, getRowError, handleValueChange]);
 
-  const keyColumn = useMemo(() => columns.find((col) => col.isKeyField), [columns]);
-
   const virtuosoContext = useMemo(() => ({
     reorderable,
     reorderableRowCount,
     isLastEmptyRow,
     dragOverRow,
-    keyColumn,
     onDragStart: handleDragStart,
     onDragOver: handleDragOver,
     onDragLeave: handleDragLeave,
     onDrop: handleDrop,
     onDragEnd: handleDragEnd
-  }), [reorderable, reorderableRowCount, isLastEmptyRow, dragOverRow, keyColumn, handleDragStart, handleDragOver, handleDragLeave, handleDrop, handleDragEnd]);
+  }), [reorderable, reorderableRowCount, isLastEmptyRow, dragOverRow, handleDragStart, handleDragOver, handleDragLeave, handleDrop, handleDragEnd]);
 
   const fixedHeaderContent = useCallback(() => (
     <tr>

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

@@ -1,18 +1,15 @@
 import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
 import { TableVirtuoso } from 'react-virtuoso';
 import cloneDeep from 'lodash/cloneDeep';
-import isEqual from 'lodash/isEqual';
 import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useSelector, useDispatch } from 'react-redux';
 import { updateTableColumnWidths } from 'providers/ReduxStore/slices/tabs';
 import MultiLineEditor from 'components/MultiLineEditor/index';
-import DataTypeSelector from 'components/DataTypeSelector';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { BRUNO_VARIABLE_DATATYPES, valueToString } from '@usebruno/common/utils';
 import { variableNameRegex } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';
@@ -25,27 +22,15 @@ const MIN_H = 35 * 2;
 const MIN_COLUMN_WIDTH = 80;
 const MIN_ROW_HEIGHT = 35;
 
-// Non-secret rows first, then secrets. The tabs save independently, so a stable
-// order keeps the "modified" comparison accurate regardless of which tab saved last.
-const orderVarsBySecret = (vars) => {
-  const nonSecret = [];
-  const secret = [];
-  vars.forEach((v) => (v.secret ? secret : nonSecret).push(v));
-  return [...nonSecret, ...secret];
-};
-
 const TableRow = React.memo(
-  ({ children, item, style, ...rest }) => {
-    const variable = item?.variable ?? item;
-    return (
-      <tr key={variable?.uid} style={style} {...rest} data-testid={`env-var-row-${variable?.name}`}>
-        {children}
-      </tr>
-    );
-  },
+  ({ children, item, style, ...rest }) => (
+    <tr key={item.uid} style={style} {...rest} data-testid={`env-var-row-${item?.name}`}>
+      {children}
+    </tr>
+  ),
   (prevProps, nextProps) => {
-    const prevUid = prevProps?.item?.variable?.uid ?? prevProps?.item?.uid;
-    const nextUid = nextProps?.item?.variable?.uid ?? nextProps?.item?.uid;
+    const prevUid = prevProps?.item?.uid;
+    const nextUid = nextProps?.item?.uid;
     return prevUid === nextUid && prevProps.children === nextProps.children;
   }
 );
@@ -59,10 +44,8 @@ const EnvironmentVariablesTable = ({
   onDraftClear,
   setIsModified,
   renderExtraValueContent,
-  searchQuery = '',
-  variableType = 'variables'
+  searchQuery = ''
 }) => {
-  const isSecretTab = variableType === 'secrets';
   const { storedTheme } = useTheme();
   const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
   const activeWorkspace = useSelector((state) => {
@@ -79,6 +62,7 @@ const EnvironmentVariablesTable = ({
   const rowCount = (environment.variables?.length || 0) + 1;
   const [tableHeight, setTableHeight] = useState(rowCount * MIN_ROW_HEIGHT);
 
+  // We need to add <EditableTable/> component for env table
   const [scroll, setScroll] = usePersistedState({
     key: `persisted::${activeTabUid}::collection-envs-scroll-${environment.uid}`,
     default: 0
@@ -167,29 +151,21 @@ const EnvironmentVariablesTable = ({
   const prevEnvVariablesRef = useRef(environment.variables);
   const mountedRef = useRef(false);
 
+  let _collection = collection ? cloneDeep(collection) : {};
   const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
-  const workspaceProcessEnvVariables = activeWorkspace?.processEnvVariables;
-  // `_collection` flows into every row's MultiLineEditor as the variable-resolution
-  // context. Without memoization, `cloneDeep(collection)` runs on every render —
-  // and Formik triggers a re-render on every keystroke, so a single env edit
-  // session can deep-clone the entire collection 100+ times. That's the
-  // dominant cost behind the test-budget flake.
-  const _collection = useMemo(() => {
-    const c = collection ? cloneDeep(collection) : {};
-    c.globalEnvironmentVariables = globalEnvironmentVariables;
-    c.activeEnvironmentUid = environment.uid;
-    if (!collection && workspaceProcessEnvVariables) {
-      c.workspaceProcessEnvVariables = workspaceProcessEnvVariables;
-    }
-    return c;
-  }, [collection, globalEnvironmentVariables, workspaceProcessEnvVariables, environment.uid]);
+  if (_collection) {
+    _collection.globalEnvironmentVariables = globalEnvironmentVariables;
+  }
+
+  // When collection is null (global/workspace environments), populate process env
+  // variables from the active workspace so that {{process.env.X}} can resolve
+  if (!collection && activeWorkspace?.processEnvVariables) {
+    _collection.workspaceProcessEnvVariables = activeWorkspace.processEnvVariables;
+  }
 
-  // Reuse the previous initialValues when only uids changed but the content is
-  // identical.
-  const initialValuesRef = useRef(null);
   const initialValues = useMemo(() => {
     const vars = environment.variables || [];
-    const next = [
+    return [
       ...vars,
       {
         uid: uuid(),
@@ -200,12 +176,6 @@ const EnvironmentVariablesTable = ({
         enabled: true
       }
     ];
-    const prev = initialValuesRef.current;
-    if (prev && isEqual(prev.map(stripEnvVarUid), next.map(stripEnvVarUid))) {
-      return prev;
-    }
-    initialValuesRef.current = next;
-    return next;
   }, [environment.uid, environment.variables]);
 
   const formik = useFormik({
@@ -229,9 +199,7 @@ const EnvironmentVariablesTable = ({
         secret: Yup.boolean(),
         type: Yup.string(),
         uid: Yup.string(),
-        value: Yup.mixed().nullable(),
-        dataType: Yup.string().oneOf(BRUNO_VARIABLE_DATATYPES).nullable(),
-        annotations: Yup.array().nullable()
+        value: Yup.mixed().nullable()
       })
     ),
     validate: (values) => {
@@ -276,7 +244,7 @@ const EnvironmentVariablesTable = ({
           name: '',
           value: '',
           type: 'text',
-          secret: isSecretTab,
+          secret: false,
           enabled: true
         }
       ]);
@@ -291,18 +259,6 @@ const EnvironmentVariablesTable = ({
     setPinnedData({ query: '', uids: new Set() });
   }, [savedValuesJson]);
 
-  // Keep the trailing empty "add new" row's secret flag in sync with the active
-  // tab, so typing into it creates a variable of the correct type. The empty row
-  // is filtered out of save/draft, so this never affects persisted data.
-  useEffect(() => {
-    const lastIndex = formik.values.length - 1;
-    const last = formik.values[lastIndex];
-    const isEmpty = !last?.name || (typeof last.name === 'string' && last.name.trim() === '');
-    if (last && isEmpty && !!last.secret !== isSecretTab) {
-      formik.setFieldValue(`${lastIndex}.secret`, isSecretTab, false);
-    }
-  }, [isSecretTab, formik.values]);
-
   // Sync modified state
   useEffect(() => {
     const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
@@ -387,7 +343,7 @@ const EnvironmentVariablesTable = ({
               name: '',
               value: '',
               type: 'text',
-              secret: isSecretTab,
+              secret: false,
               enabled: true
             }
           ];
@@ -402,16 +358,12 @@ const EnvironmentVariablesTable = ({
     const isLastRow = index === formik.values.length - 1;
 
     if (isLastRow) {
-      // Pin the newly-named row's secret flag to the active tab synchronously; the
-      // passive sync effect runs after paint and is racy for fast input.
-      formik.setFieldValue(`${index}.secret`, isSecretTab, false);
-
       const newVariable = {
         uid: uuid(),
         name: '',
         value: '',
         type: 'text',
-        secret: isSecretTab,
+        secret: false,
         enabled: true
       };
       setTimeout(() => {
@@ -432,26 +384,17 @@ const EnvironmentVariablesTable = ({
   };
 
   const handleSave = useCallback(() => {
-    const belongsToActiveTab = (variable) => (isSecretTab ? !!variable.secret : !variable.secret);
-
-    const namedValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+    const variablesToSave = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
     const savedValues = environment.variables || [];
 
-    // Save is scoped to the active tab. Only the active tab's rows are persisted; the
-    // other tab keeps its last-saved rows so saving variables never touches secrets and
-    // vice versa.
-    const activeCurrent = namedValues.filter(belongsToActiveTab);
-    const activeSaved = savedValues.filter(belongsToActiveTab);
-    const otherCurrent = namedValues.filter((variable) => !belongsToActiveTab(variable));
-    const otherSaved = savedValues.filter((variable) => !belongsToActiveTab(variable));
-
-    const hasChanges = JSON.stringify(activeCurrent.map(stripEnvVarUid)) !== JSON.stringify(activeSaved.map(stripEnvVarUid));
+    // Compare without UIDs since they can be different but the actual data is the same
+    const hasChanges = JSON.stringify(variablesToSave.map(stripEnvVarUid)) !== JSON.stringify(savedValues.map(stripEnvVarUid));
     if (!hasChanges) {
       toast.error('No changes to save');
       return;
     }
 
-    const hasValidationErrors = activeCurrent.some((variable) => {
+    const hasValidationErrors = variablesToSave.some((variable) => {
       if (!variable.name || variable.name.trim() === '') {
         return true;
       }
@@ -466,182 +409,72 @@ const EnvironmentVariablesTable = ({
       return;
     }
 
-    // Persist the active tab's edits alongside the other tab's last-saved rows (unchanged).
-    const persistedVariables = orderVarsBySecret([...activeCurrent, ...otherSaved]);
-
-    onSave(cloneDeep(persistedVariables))
-      .then(() => {
-        toast.success('Changes saved successfully');
-
-        // Preserve unsaved edits on the other tab across the post-save reinit via the
-        // draft: keep it if the other tab is still dirty, clear it otherwise.
-        const otherDirty
-          = JSON.stringify(otherCurrent.map(stripEnvVarUid)) !== JSON.stringify(otherSaved.map(stripEnvVarUid));
-        const retainedVariables = orderVarsBySecret([...activeCurrent, ...otherCurrent]);
-
-        if (otherDirty) {
-          onDraftChange(cloneDeep(retainedVariables));
-        } else {
-          onDraftClear();
-        }
-
-        formik.resetForm({
-          values: [
-            ...retainedVariables,
-            {
-              uid: uuid(),
-              name: '',
-              value: '',
-              type: 'text',
-              secret: isSecretTab,
-              enabled: true
-            }
-          ]
-        });
-        setIsModified(otherDirty);
-      })
-      .catch((error) => {
-        console.error(error);
-        toast.error('An error occurred while saving the changes');
-      });
-  }, [formik.values, environment.variables, onSave, onDraftChange, onDraftClear, setIsModified, isSecretTab]);
-
-  const handleReset = useCallback(() => {
-    const belongsToActiveTab = (variable) => (isSecretTab ? !!variable.secret : !variable.secret);
-
-    const savedValues = environment.variables || [];
-    const activeSaved = savedValues.filter(belongsToActiveTab);
-    const otherSaved = savedValues.filter((variable) => !belongsToActiveTab(variable));
-    const otherCurrent = formik.values
-      .filter((variable) => variable.name && variable.name.trim() !== '')
-      .filter((variable) => !belongsToActiveTab(variable));
-
-    // Reset is scoped to the active tab: revert its rows to the saved baseline while
-    // leaving the other tab's current (possibly unsaved) edits intact.
-    const resetVariables = orderVarsBySecret([...activeSaved, ...otherCurrent]);
-
-    const otherDirty
-      = JSON.stringify(otherCurrent.map(stripEnvVarUid)) !== JSON.stringify(otherSaved.map(stripEnvVarUid));
-
-    if (otherDirty) {
-      onDraftChange(cloneDeep(resetVariables));
-    } else {
-      onDraftClear();
-    }
-
-    formik.resetForm({
-      values: [
-        ...resetVariables,
-        {
-          uid: uuid(),
-          name: '',
-          value: '',
-          type: 'text',
-          secret: isSecretTab,
-          enabled: true
-        }
-      ]
-    });
-    setIsModified(otherDirty);
-  }, [environment.variables, formik.values, isSecretTab, onDraftChange, onDraftClear, setIsModified]);
-
-  const handleSaveAll = useCallback(() => {
-    const namedValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-    const savedValues = environment.variables || [];
-
-    const persistedVariables = orderVarsBySecret(namedValues);
-
-    const hasChanges
-      = JSON.stringify(persistedVariables.map(stripEnvVarUid)) !== JSON.stringify(savedValues.map(stripEnvVarUid));
-    if (!hasChanges) {
-      toast.error('No changes to save');
-      return;
-    }
-
-    const hasValidationErrors = namedValues.some((variable) => {
-      if (!variable.name || variable.name.trim() === '') {
-        return true;
-      }
-      if (!variableNameRegex.test(variable.name)) {
-        return true;
-      }
-      return false;
-    });
-
-    if (hasValidationErrors) {
-      toast.error('Please fix validation errors before saving');
-      return;
-    }
-
-    onSave(cloneDeep(persistedVariables))
+    onSave(cloneDeep(variablesToSave))
       .then(() => {
         toast.success('Changes saved successfully');
         onDraftClear();
-
-        formik.resetForm({
-          values: [
-            ...persistedVariables,
-            {
-              uid: uuid(),
-              name: '',
-              value: '',
-              type: 'text',
-              secret: isSecretTab,
-              enabled: true
-            }
-          ]
-        });
+        const newValues = [
+          ...variablesToSave,
+          {
+            uid: uuid(),
+            name: '',
+            value: '',
+            type: 'text',
+            secret: false,
+            enabled: true
+          }
+        ];
+        formik.resetForm({ values: newValues });
         setIsModified(false);
       })
       .catch((error) => {
         console.error(error);
         toast.error('An error occurred while saving the changes');
       });
-  }, [formik.values, environment.variables, onSave, onDraftClear, setIsModified, isSecretTab]);
+  }, [formik.values, environment.variables, onSave, onDraftClear, setIsModified]);
+
+  const handleReset = useCallback(() => {
+    const originalVars = environment.variables || [];
+    const resetValues = [
+      ...originalVars,
+      {
+        uid: uuid(),
+        name: '',
+        value: '',
+        type: 'text',
+        secret: false,
+        enabled: true
+      }
+    ];
+    formik.resetForm({ values: resetValues });
+    setIsModified(false);
+  }, [environment.variables, setIsModified]);
 
   const handleSaveRef = useRef(handleSave);
   handleSaveRef.current = handleSave;
-  const handleSaveAllRef = useRef(handleSaveAll);
-  handleSaveAllRef.current = handleSaveAll;
 
   useEffect(() => {
     const handleSaveEvent = () => {
       handleSaveRef.current();
     };
-    const handleSaveAllEvent = () => {
-      handleSaveAllRef.current();
-    };
 
     window.addEventListener('environment-save', handleSaveEvent);
-    window.addEventListener('environment-save-all', handleSaveAllEvent);
 
     return () => {
       window.removeEventListener('environment-save', handleSaveEvent);
-      window.removeEventListener('environment-save-all', handleSaveAllEvent);
     };
   }, []);
 
   const filteredVariables = useMemo(() => {
-    const lastIndex = formik.values.length - 1;
-    // Show only rows belonging to the active tab, but always keep the trailing
-    // empty "add new" row so the user can add a variable/secret on either tab.
-    const tabVariables = formik.values
-      .map((variable, index) => ({ variable, index }))
-      .filter(({ variable, index }) => {
-        const isLastEmptyRow
-          = index === lastIndex && (!variable.name || (typeof variable.name === 'string' && variable.name.trim() === ''));
-        if (isLastEmptyRow) return true;
-        return isSecretTab ? !!variable.secret : !variable.secret;
-      });
-
+    const allVariables = formik.values.map((variable, index) => ({ variable, index }));
     if (!searchQuery?.trim()) {
-      return tabVariables;
+      return allVariables;
     }
 
     const query = searchQuery.toLowerCase().trim();
 
     const effectivePins = pinnedData.query === searchQuery ? pinnedData.uids : new Set();
-    return tabVariables.filter(({ variable }) => {
+    return allVariables.filter(({ variable }) => {
       if (effectivePins.has(variable.uid)) return true;
       const nameMatch = variable.name ? variable.name.toLowerCase().includes(query) : false;
       const valueText
@@ -653,7 +486,7 @@ const EnvironmentVariablesTable = ({
       const valueMatch = valueText.toLowerCase().includes(query);
       return !!(nameMatch || valueMatch);
     });
-  }, [formik.values, searchQuery, pinnedData, isSecretTab]);
+  }, [formik.values, searchQuery, pinnedData]);
 
   const isSearchActive = !!searchQuery?.trim();
 
@@ -683,10 +516,10 @@ const EnvironmentVariablesTable = ({
                 />
               </td>
               <td style={{ width: columnWidths.value }}>Value</td>
+              <td className="text-center">Secret</td>
               <td></td>
             </tr>
           )}
-          defaultItemHeight={35}
           computeItemKey={(virtualIndex, item) => `${environment.uid}-${item.index}`}
           itemContent={(virtualIndex, { variable, index: actualIndex }) => {
             const isLastRow = actualIndex === formik.values.length - 1;
@@ -732,22 +565,28 @@ const EnvironmentVariablesTable = ({
                   </div>
                 </td>
                 <td
-                  className="flex flex-row flex-nowrap items-center gap-2"
+                  className="flex flex-row flex-nowrap items-center"
                   style={{ width: columnWidths.value }}
                 >
                   <div
-                    className="flex-1 min-w-0 relative"
+                    className="overflow-hidden grow w-full relative"
                     onFocus={() => handleRowFocus(variable.uid)}
                   >
                     <MultiLineEditor
                       theme={storedTheme}
                       collection={_collection}
                       name={`${actualIndex}.value`}
-                      value={valueToString(variable.value, 2)}
+                      value={variable.value}
                       placeholder={variable.value == null || (typeof variable.value === 'string' && variable.value.trim() === '') ? 'Value' : ''}
                       isSecret={variable.secret}
+                      readOnly={typeof variable.value !== 'string'}
                       onChange={(newValue) => {
                         formik.setFieldValue(`${actualIndex}.value`, newValue, true);
+                        // Clear ephemeral metadata when user manually edits the value
+                        if (variable.ephemeral) {
+                          formik.setFieldValue(`${actualIndex}.ephemeral`, undefined, false);
+                          formik.setFieldValue(`${actualIndex}.persistedValue`, undefined, false);
+                        }
                         // Append a new empty row when editing value on the last row
                         if (isLastRow) {
                           setTimeout(() => {
@@ -756,7 +595,7 @@ const EnvironmentVariablesTable = ({
                               name: '',
                               value: '',
                               type: 'text',
-                              secret: isSecretTab,
+                              secret: false,
                               enabled: true
                             }, false);
                           }, 0);
@@ -765,22 +604,29 @@ const EnvironmentVariablesTable = ({
                       onSave={handleSave}
                     />
                   </div>
-                  {!isLastEmptyRow && (
-                    <span>
-                      <DataTypeSelector
-                        variable={variable}
-                        theme={storedTheme}
-                        collection={_collection}
-                        onChange={(fields) => {
-                          Object.entries(fields).forEach(([key, val]) => {
-                            formik.setFieldValue(`${actualIndex}.${key}`, val, true);
-                          });
-                        }}
+                  {typeof variable.value !== 'string' && (
+                    <span className="ml-2 flex items-center">
+                      <IconInfoCircle id={`${variable.uid}-disabled-info-icon`} className="text-muted" size={16} />
+                      <Tooltip
+                        anchorId={`${variable.uid}-disabled-info-icon`}
+                        content="Non-string values set via scripts are read-only and can only be updated through scripts."
+                        place="top"
                       />
                     </span>
                   )}
                   {renderExtraValueContent && renderExtraValueContent(variable)}
                 </td>
+                <td className="text-center">
+                  {!isLastEmptyRow && (
+                    <input
+                      type="checkbox"
+                      className="mousetrap"
+                      name={`${actualIndex}.secret`}
+                      checked={variable.secret}
+                      onChange={formik.handleChange}
+                    />
+                  )}
+                </td>
                 <td>
                   {!isLastEmptyRow && (
                     <button onClick={() => handleRemoveVar(variable.uid)}>

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

@@ -33,15 +33,15 @@ const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose,
 
         <div className="flex justify-between mt-6">
           <div>
-            <Button color="danger" onClick={onCloseWithoutSave} data-testid="env-unsaved-close-without-save">
+            <Button color="danger" onClick={onCloseWithoutSave}>
               Don't Save
             </Button>
           </div>
           <div className="flex gap-2">
-            <Button size="sm" color="secondary" variant="ghost" onClick={onCancel} data-testid="env-unsaved-cancel">
+            <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
               Cancel
             </Button>
-            <Button onClick={onSaveAndClose} data-testid="env-unsaved-save-and-close">
+            <Button onClick={onSaveAndClose}>
               Save
             </Button>
           </div>

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

@@ -25,7 +25,7 @@ const EnvironmentListContent = ({
               <span>No Environment</span>
             </div>
             <ToolHint
-              tooltipId="environment-name-tooltip"
+              anchorSelect="[data-tooltip-content]"
               place="right"
               positionStrategy="fixed"
               tooltipStyle={{
@@ -40,7 +40,6 @@ const EnvironmentListContent = ({
                     key={env.uid}
                     className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'dropdown-item-active' : ''}`}
                     onClick={() => onEnvironmentSelect(env)}
-                    data-tooltip-id="environment-name-tooltip"
                     data-tooltip-content={env.name}
                     data-tooltip-hidden={env.name?.length < 90}
                   >

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

@@ -21,14 +21,14 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
     <Portal>
       <StyledWrapper>
         <Modal
-          size="md"
+          size="sm"
           title="Delete Environment"
           confirmText="Delete"
           handleConfirm={onConfirm}
           handleCancel={onClose}
           confirmButtonColor="danger"
         >
-          Are you sure you want to delete <span className="font-medium">{environment.name}</span>?
+          Are you sure you want to delete <span className="font-medium">{environment.name}</span> ?
         </Modal>
       </StyledWrapper>
     </Portal>

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

@@ -9,7 +9,7 @@ import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 import EnvironmentVariablesTable from 'components/EnvironmentVariablesTable';
 import { sensitiveFields } from './constants';
 
-const EnvironmentVariables = ({ environment, setIsModified, collection, searchQuery = '', variableType = 'variables' }) => {
+const EnvironmentVariables = ({ environment, setIsModified, collection, searchQuery = '' }) => {
   const dispatch = useDispatch();
 
   const environmentsDraft = collection?.environmentsDraft;
@@ -92,7 +92,7 @@ const EnvironmentVariables = ({ environment, setIsModified, collection, searchQu
         return (
           <SensitiveFieldWarning
             fieldName={variable.name}
-            warningMessage="This variable is used in sensitive fields. Add it as a secret in the Secrets tab for security"
+            warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
           />
         );
       }
@@ -113,7 +113,6 @@ const EnvironmentVariables = ({ environment, setIsModified, collection, searchQu
       setIsModified={setIsModified}
       renderExtraValueContent={renderExtraValueContent}
       searchQuery={searchQuery}
-      variableType={variableType}
     />
   );
 };

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

@@ -96,17 +96,6 @@ const StyledWrapper = styled.div`
       display: flex;
       align-items: center;
       gap: 2px;
-    }
-  }
-
-  .tabs-container {
-    padding: 0 20px;
-    flex-shrink: 0;
-
-    .env-search-container {
-      display: flex;
-      align-items: center;
-      gap: 2px;
 
       .search-input-wrapper {
         position: relative;
@@ -161,6 +150,30 @@ const StyledWrapper = styled.div`
           }
         }
       }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        color: ${(props) => props.theme.colors.text.muted};
+        background: transparent;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+
+        &:hover {
+          background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+          color: ${(props) => props.theme.text};
+        }
+
+        &:last-child:hover {
+          color: ${(props) => props.theme.colors.text.danger};
+        }
+      }
     }
   }
 
@@ -170,7 +183,6 @@ const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
     padding: 0 20px 20px 20px;
-    margin-top: 16px;
   }
 `;
 

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

@@ -1,6 +1,6 @@
-import { IconCopy, IconEdit, IconTrash, IconCheck, IconX, IconSearch, IconDeviceFloppy } from '@tabler/icons';
+import { IconCopy, IconEdit, IconTrash, IconCheck, IconX, IconSearch } from '@tabler/icons';
 import { useState, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { renameEnvironment, updateEnvironmentColor } from 'providers/ReduxStore/slices/collections/actions';
 import { validateName, validateNameError } from 'utils/common/regex';
 import toast from 'react-hot-toast';
@@ -8,16 +8,8 @@ import CopyEnvironment from 'components/Environments/EnvironmentSettings/CopyEnv
 import DeleteEnvironment from 'components/Environments/EnvironmentSettings/DeleteEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
 import ColorPicker from 'components/ColorPicker';
-import ActionIcon from 'ui/ActionIcon';
-import ResponsiveTabs from 'ui/ResponsiveTabs';
-import { updateTabState } from 'providers/ReduxStore/slices/tabs';
 import StyledWrapper from './StyledWrapper';
 
-const TABS = [
-  { key: 'variables', label: 'Variables' },
-  { key: 'secrets', label: 'Secrets' }
-];
-
 const EnvironmentDetails = ({ environment, setIsModified, collection, searchQuery, setSearchQuery, isSearchExpanded, setIsSearchExpanded, debouncedSearchQuery, searchInputRef }) => {
   const dispatch = useDispatch();
   const environments = collection?.environments || [];
@@ -27,11 +19,7 @@ const EnvironmentDetails = ({ environment, setIsModified, collection, searchQuer
   const [isRenaming, setIsRenaming] = useState(false);
   const [newName, setNewName] = useState('');
   const [nameError, setNameError] = useState('');
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const activeTab = useSelector((state) => state.tabs.tabs.find((t) => t.uid === activeTabUid)?.tabState?.envTab) || 'variables';
-  const setActiveTab = (tab) => dispatch(updateTabState({ uid: activeTabUid, tabState: { envTab: tab } }));
   const inputRef = useRef(null);
-  const rightContentRef = useRef(null);
 
   const validateEnvironmentName = (name) => {
     if (!name || name.trim() === '') {
@@ -145,10 +133,6 @@ const EnvironmentDetails = ({ environment, setIsModified, collection, searchQuer
     dispatch(updateEnvironmentColor(environment.uid, color, collection.uid));
   };
 
-  const handleSaveAll = () => {
-    window.dispatchEvent(new Event('environment-save-all'));
-  };
-
   return (
     <StyledWrapper>
       {openDeleteModal && (
@@ -203,66 +187,48 @@ const EnvironmentDetails = ({ environment, setIsModified, collection, searchQuer
         </div>
         {nameError && isRenaming && <div className="title-error">{nameError}</div>}
         <div className="actions">
-          <ActionIcon label="Rename" onClick={handleRenameClick} data-testid="env-rename-action">
-            <IconEdit size={15} strokeWidth={1.5} />
-          </ActionIcon>
-          <ActionIcon label="Copy" onClick={() => setOpenCopyModal(true)} data-testid="env-copy-action">
-            <IconCopy size={15} strokeWidth={1.5} />
-          </ActionIcon>
-          <ActionIcon label="Delete" onClick={() => setOpenDeleteModal(true)} colorOnHover="danger" data-testid="env-delete-action">
-            <IconTrash size={15} strokeWidth={1.5} />
-          </ActionIcon>
-        </div>
-      </div>
-
-      <div className="tabs-container">
-        <ResponsiveTabs
-          tabs={TABS}
-          activeTab={activeTab}
-          onTabSelect={setActiveTab}
-          rightContent={(
-            <div ref={rightContentRef} className="env-search-container">
-              <ActionIcon label="Save" onClick={handleSaveAll} data-testid="save-all-env">
-                <IconDeviceFloppy size={15} strokeWidth={1.5} />
-              </ActionIcon>
-              {isSearchExpanded ? (
-                <div className="search-input-wrapper">
-                  <IconSearch size={14} strokeWidth={1.5} className="search-icon" />
-                  <input
-                    ref={searchInputRef}
-                    type="text"
-                    placeholder={activeTab === 'secrets' ? 'Search secrets...' : 'Search variables...'}
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    onBlur={handleSearchBlur}
-                    className="search-input"
-                    data-testid="env-search-input"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck="false"
-                  />
-                  {searchQuery && (
-                    <button
-                      className="clear-search"
-                      onClick={handleClearSearch}
-                      onMouseDown={(e) => e.preventDefault()}
-                      title="Clear search"
-                      data-testid="env-clear-search"
-                    >
-                      <IconX size={14} strokeWidth={1.5} />
-                    </button>
-                  )}
-                </div>
-              ) : (
-                <ActionIcon label="Search" onClick={handleSearchIconClick} data-testid="env-search-action">
-                  <IconSearch size={15} strokeWidth={1.5} />
-                </ActionIcon>
+          {isSearchExpanded ? (
+            <div className="search-input-wrapper">
+              <IconSearch size={14} strokeWidth={1.5} className="search-icon" />
+              <input
+                ref={searchInputRef}
+                type="text"
+                placeholder="Search variables..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onBlur={handleSearchBlur}
+                className="search-input"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+              />
+              {searchQuery && (
+                <button
+                  className="clear-search"
+                  onClick={handleClearSearch}
+                  onMouseDown={(e) => e.preventDefault()}
+                  title="Clear search"
+                >
+                  <IconX size={14} strokeWidth={1.5} />
+                </button>
               )}
             </div>
+          ) : (
+            <button onClick={handleSearchIconClick} title="Search variables">
+              <IconSearch size={15} strokeWidth={1.5} />
+            </button>
           )}
-          rightContentRef={rightContentRef}
-        />
+          <button onClick={handleRenameClick} title="Rename">
+            <IconEdit size={15} strokeWidth={1.5} />
+          </button>
+          <button onClick={() => setOpenCopyModal(true)} title="Copy">
+            <IconCopy size={15} strokeWidth={1.5} />
+          </button>
+          <button onClick={() => setOpenDeleteModal(true)} title="Delete">
+            <IconTrash size={15} strokeWidth={1.5} />
+          </button>
+        </div>
       </div>
 
       <div className="content">
@@ -271,7 +237,6 @@ const EnvironmentDetails = ({ environment, setIsModified, collection, searchQuer
           setIsModified={setIsModified}
           collection={collection}
           searchQuery={debouncedSearchQuery}
-          variableType={activeTab}
         />
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js

@@ -45,7 +45,7 @@ const StyledWrapper = styled.div`
       color: ${(props) => props.theme.colors.text.muted};
       cursor: pointer;
       transition: all 0.15s ease;
-
+      
       &:hover {
         background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
         color: ${(props) => props.theme.text};
@@ -79,7 +79,7 @@ const StyledWrapper = styled.div`
       &::placeholder {
         color: ${(props) => props.theme.colors.text.muted};
       }
-
+      
       &:focus {
         outline: none;
         border-color: ${(props) => props.theme.colors.accent};
@@ -111,7 +111,6 @@ const StyledWrapper = styled.div`
     flex-direction: column;
     overflow: hidden;
     padding: 8px;
-    border-right: 1px solid ${(props) => props.theme.border.border0};
   }
 
   .section-header {
@@ -164,7 +163,7 @@ const StyledWrapper = styled.div`
     cursor: pointer;
     border-radius: 6px;
     transition: background 0.15s ease;
-
+    
     .environment-name {
       flex: 1;
       white-space: nowrap;
@@ -217,18 +216,18 @@ const StyledWrapper = styled.div`
     &:hover {
       background: ${(props) => props.theme.workspace.button.bg};
     }
-
+    
     &.active {
       background: ${(props) => props.theme.background.surface0};
       color: ${(props) => props.theme.text};
     }
-
+    
     &.renaming,
     &.creating {
       cursor: default;
       padding: 4px 4px 4px 8px;
       background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-
+      
       &:hover {
         background: ${(props) => props.theme.workspace.button.bg};
       }
@@ -240,7 +239,7 @@ const StyledWrapper = styled.div`
       flex: 1;
       min-width: 0;
       overflow: hidden;
-
+      
       .environment-name-input {
         flex: 1;
         min-width: 0;
@@ -250,12 +249,12 @@ const StyledWrapper = styled.div`
         color: ${(props) => props.theme.text};
         font-size: 13px;
         padding: 2px 4px;
-
+        
         &::placeholder {
           color: ${(props) => props.theme.colors.text.muted};
         }
       }
-
+      
       .inline-actions {
         display: flex;
         gap: 2px;
@@ -274,12 +273,12 @@ const StyledWrapper = styled.div`
         color: ${(props) => props.theme.text};
         font-size: 13px;
         padding: 2px 4px;
-
+        
         &::placeholder {
           color: ${(props) => props.theme.colors.text.muted};
         }
       }
-
+      
       .inline-actions {
         display: flex;
         gap: 2px;
@@ -300,25 +299,25 @@ const StyledWrapper = styled.div`
       border-radius: 4px;
       cursor: pointer;
       transition: all 0.15s ease;
-
+      
       &.save {
         color: ${(props) => props.theme.colors.text.green};
-
+        
         &:hover {
           background: ${(props) => rgba(props.theme.colors.text.green, 0.1)};
         }
       }
-
+      
       &.cancel {
         color: ${(props) => props.theme.colors.text.danger};
-
+        
         &:hover {
           background: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
         }
       }
     }
   }
-
+  
   .env-error {
     padding: 4px 12px;
     margin-top: 4px;

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

@@ -1,33 +1,16 @@
-import React, { useState, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { updateTabState } from 'providers/ReduxStore/slices/tabs';
+import React, { useState } from 'react';
 import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
 import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
 
 const EnvironmentSettings = ({ collection }) => {
-  const dispatch = useDispatch();
   const [isModified, setIsModified] = useState(false);
   const environments = collection?.environments || [];
 
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const persistedEnvUid = useSelector((state) => state.tabs.tabs.find((t) => t.uid === activeTabUid)?.tabState?.envUid);
-
-  // Remember which environment the user last viewed in this tab (via tabState) so navigating away and back preserves it.
-  const selectedEnvironment = useMemo(() => {
+  const [selectedEnvironment, setSelectedEnvironment] = useState(() => {
     if (!environments.length) return null;
-    return (
-      environments.find((env) => env.uid === persistedEnvUid)
-      || environments.find((env) => env.uid === collection?.activeEnvironmentUid)
-      || environments[0]
-    );
-  }, [environments, persistedEnvUid, collection?.activeEnvironmentUid]);
-
-  const setSelectedEnvironment = (env) => {
-    if (!activeTabUid || !env?.uid) return;
-    dispatch(updateTabState({ uid: activeTabUid, tabState: { envUid: env.uid } }));
-  };
-
+    return environments.find((env) => env.uid === collection?.activeEnvironmentUid) || environments[0];
+  });
   const [showExportModal, setShowExportModal] = useState(false);
 
   return (

packages/bruno-app/src/components/Errors/IpcErrorModal/StyledWrapper.js

@@ -4,8 +4,6 @@ const StyledWrapper = styled.div`
   color: ${(props) => props.theme.colors.danger};
   pre {
     color: ${(props) => props.theme.colors.danger};
-    max-height: 60vh;
-    overflow: auto;
   }
 `;
 

packages/bruno-app/src/components/Errors/SaveFileErrorModal/StyledWrapper.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  color: ${(props) => props.theme.colors.danger};
-
-  pre {
-    display: block;
-    overflow-wrap: anywhere;
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/Errors/SaveFileErrorModal/index.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Portal from 'components/Portal';
-import Modal from 'components/Modal';
-import { useState } from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const SaveFileErrorModal = ({ error }) => {
-  const [showModal, setShowModal] = useState(true);
-  return (
-    <>
-      {showModal ? (
-        <Portal>
-          <StyledWrapper>
-            <Modal
-              size="sm"
-              title="Save File Error"
-              hideFooter={true}
-              hideCancel={true}
-              handleCancel={() => {
-                setShowModal(false);
-              }}
-              disableCloseOnOutsideClick={true}
-              disableEscapeKey={true}
-            >
-              <pre className="w-full flex flex-wrap whitespace-pre-wrap">{error}</pre>
-            </Modal>
-          </StyledWrapper>
-        </Portal>
-      ) : null}
-    </>
-  );
-};
-
-export default SaveFileErrorModal;

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

@@ -1,55 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    height: 100%;
-    background: ${(props) => props.theme.codemirror.bg};
-    border: solid 1px ${(props) => props.theme.codemirror.border};
-    font-family: ${(props) => (props.font ? props.font : 'default')};
-    line-break: anywhere;
-  }
-
-  .CodeMirror-overlayscroll-horizontal div,
-  .CodeMirror-overlayscroll-vertical div {
-    background: #d2d7db;
-  }
-
-  textarea.cm-editor {
-    position: relative;
-  }
-
-  // Todo: dark mode temporary fix
-  // Clean this
-  .CodeMirror.cm-s-monokai {
-    .CodeMirror-overlayscroll-horizontal div,
-    .CodeMirror-overlayscroll-vertical div {
-      background: #444444;
-    }
-  }
-
-  .cm-s-monokai span.cm-property,
-  .cm-s-monokai span.cm-attribute {
-    color: #9cdcfe !important;
-  }
-
-  .cm-s-monokai span.cm-string {
-    color: #ce9178 !important;
-  }
-
-  .cm-s-monokai span.cm-number {
-    color: #b5cea8 !important;
-  }
-
-  .cm-s-monokai span.cm-atom {
-    color: #569cd6 !important;
-  }
-
-  .cm-variable-valid {
-    color: green;
-  }
-  .cm-variable-invalid {
-    color: red;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,236 +0,0 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import isEqual from 'lodash/isEqual';
-import { getEnvironmentVariables } from 'utils/collections';
-import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import StyledWrapper from './StyledWrapper';
-import * as jsonlint from '@prantlf/jsonlint';
-import { JSHINT } from 'jshint';
-import CodeMirrorSearch from 'components/CodeMirrorSearch';
-let CodeMirror;
-const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
-
-if (!SERVER_RENDERED) {
-  CodeMirror = require('codemirror');
-  window.jsonlint = jsonlint;
-  window.JSHINT = JSHINT;
-}
-
-export default class CodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-
-    // Keep a cached version of the value, this cache will be updated when the
-    // editor is updated, which can later be used to protect the editor from
-    // unnecessary updates during the update lifecycle.
-    this.cachedValue = props.value || '';
-    this.variables = {};
-
-    this.lintOptions = {
-      esversion: 11,
-      expr: true,
-      asi: true
-    };
-
-    this.state = {
-      searchBarVisible: false
-    };
-  }
-
-  componentDidMount() {
-    const editor = (this.editor = CodeMirror(this._node, {
-      value: this.props.value || '',
-      lineNumbers: true,
-      lineWrapping: true,
-      tabSize: 2,
-      mode: this.props.mode || 'application/ld+json',
-      keyMap: 'sublime',
-      autoCloseBrackets: true,
-      matchBrackets: true,
-      showCursorWhenSelecting: true,
-      foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
-      lint: this.lintOptions,
-      readOnly: this.props.readOnly,
-      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();
-          }
-        },
-        'Shift-Cmd-M': () => {
-          if (this.props.toggleFileMode) {
-            this.props.toggleFileMode();
-          }
-        },
-        'Shift-Ctrl-M': () => {
-          if (this.props.toggleFileMode) {
-            this.props.toggleFileMode();
-          }
-        },
-        'Cmd-F': (cm) => {
-          if (this.state.searchBarVisible) {
-            this._node.querySelector('.bruno-search-bar > input').focus();
-          }
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
-          }
-        },
-        'Ctrl-F': (cm) => {
-          if (this.state.searchBarVisible) {
-            this._node.querySelector('.bruno-search-bar > input').focus();
-          }
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
-          }
-        },
-        'Cmd-H': 'replace',
-        'Ctrl-H': 'replace',
-        'Tab': function (cm) {
-          cm.getSelection().includes('\n') || editor.getLine(cm.getCursor().line) == cm.getSelection()
-            ? cm.execCommand('indentMore')
-            : cm.replaceSelection('  ', 'end');
-        },
-        'Shift-Tab': 'indentLess',
-        'Ctrl-Space': 'autocomplete',
-        'Cmd-Space': 'autocomplete',
-        'Ctrl-Y': 'foldAll',
-        'Cmd-Y': 'foldAll',
-        'Ctrl-I': 'unfoldAll',
-        'Cmd-I': 'unfoldAll',
-        'Esc': () => {
-          if (this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: false });
-          }
-        }
-      }
-    }));
-    if (editor) {
-      editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
-      editor.on('change', this._onEdit);
-      editor.scrollTo(null, this.props.initialScroll);
-      this._lastScrollTop = this.props.initialScroll || 0;
-      editor.on('scroll', this._onScroll);
-      this.addOverlay();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    // Ensure the changes caused by this update are not interpreted as
-    // user-input changes which could otherwise result in an infinite
-    // event loop.
-    this.ignoreChangeEvent = true;
-    if (this.props.schema !== prevProps.schema && this.editor) {
-      this.editor.options.lint.schema = this.props.schema;
-      this.editor.options.hintOptions.schema = this.props.schema;
-      this.editor.options.info.schema = this.props.schema;
-      this.editor.options.jump.schema = this.props.schema;
-      CodeMirror.signal(this.editor, 'change', this.editor);
-    }
-    if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
-      const cursor = this.editor.getCursor();
-      this.cachedValue = this.props.value;
-      this.editor.setValue(this.props.value);
-      this.editor.setCursor(cursor);
-    }
-
-    if (this.editor) {
-      let variables = getEnvironmentVariables(this.props.collection);
-      if (!isEqual(variables, this.variables)) {
-        this.addOverlay();
-      }
-    }
-
-    if (this.props.theme !== prevProps.theme && this.editor) {
-      this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
-    }
-
-    if (this.props.initialScroll !== prevProps.initialScroll && this.editor) {
-      this.editor.scrollTo(null, this.props.initialScroll);
-    }
-    this.ignoreChangeEvent = false;
-  }
-
-  componentWillUnmount() {
-    if (this.editor) {
-      this.editor.off('change', this._onEdit);
-      this.editor.off('scroll', this._onScroll);
-      if (typeof this.props.onScroll === 'function') {
-        this.props.onScroll(this._lastScrollTop || 0);
-      }
-      const editorElement = this.editor.getWrapperElement();
-      if (editorElement && editorElement.parentNode) {
-        editorElement.parentNode.removeChild(editorElement);
-      }
-      this.editor = null;
-      this._node = null;
-    }
-  }
-
-  render() {
-    if (this.editor) {
-      this.editor.refresh();
-    }
-    return (
-      <StyledWrapper
-        className="h-full w-full"
-        aria-label="Code Editor"
-        font={this.props.font}
-      >
-        <CodeMirrorSearch
-          visible={this.state.searchBarVisible}
-          editor={this.editor}
-          onClose={() => this.setState({ searchBarVisible: false })}
-        />
-        <div
-          ref={(node) => {
-            this._node = node;
-          }}
-          style={{ height: '100%' }}
-        />
-      </StyledWrapper>
-    );
-  }
-
-  addOverlay = () => {
-    const mode = this.props.mode || 'application/ld+json';
-    let variables = getEnvironmentVariables(this.props.collection);
-    this.variables = variables;
-
-    defineCodeMirrorBrunoVariablesMode(variables, mode);
-    this.editor.setOption('mode', 'brunovariables');
-  };
-
-  _onEdit = () => {
-    if (!this.ignoreChangeEvent && this.editor) {
-      this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);
-      this.cachedValue = this.editor.getValue();
-      if (this.props.onEdit) {
-        this.props.onEdit(this.cachedValue);
-      }
-    }
-  };
-
-  _onScroll = () => {
-    if (!this.editor) return;
-    const wrapper = this.editor.getWrapperElement();
-    if (wrapper && wrapper.offsetParent === null) return;
-    this._lastScrollTop = this.editor.getScrollInfo().top;
-    if (typeof this.props.onScroll === 'function') {
-      this.props.onScroll(this._lastScrollTop);
-    }
-  };
-}

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

@@ -1,68 +0,0 @@
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
-import CodeEditor from './CodeEditor/index';
-import { saveFile } from 'providers/ReduxStore/slices/collections/actions';
-import { IconDeviceFloppy } from '@tabler/icons';
-import { toggleCollectionFileMode, updateFileContent } from 'providers/ReduxStore/slices/collections';
-import { usePersistedState } from 'hooks/usePersistedState';
-
-const FileEditor = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const { displayedTheme, theme } = useTheme();
-  const preferences = useSelector((state) => state.app.preferences);
-  const [scroll, setScroll] = usePersistedState({ key: `file-mode-scroll-${item.uid}`, default: 0 });
-
-  const content = item.draft ? item.draft.raw : item.raw || '';
-
-  const onEdit = (value) => {
-    dispatch(
-      updateFileContent({
-        content: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const hasChanges = item.draft != null;
-
-  const onSave = () => {
-    if (!hasChanges) return;
-    dispatch(saveFile(content, item?.uid, collection?.uid));
-  };
-
-  const _toggleFileMode = () => {
-    dispatch(toggleCollectionFileMode({ collectionUid: collection.uid }));
-  };
-
-  const editorMode = item?.type == 'js' ? 'javascript' : item?.type == 'json' ? 'javascript' : 'application/text';
-
-  return (
-    <div className="flex flex-grow relative h-full">
-      <CodeEditor
-        collection={collection}
-        theme={displayedTheme}
-        value={content}
-        onEdit={onEdit}
-        onSave={onSave}
-        toggleFileMode={_toggleFileMode}
-        mode={editorMode}
-        font={get(preferences, 'font.codeFont', 'default')}
-        initialScroll={scroll}
-        onScroll={setScroll}
-      />
-      <IconDeviceFloppy
-        onClick={onSave}
-        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>
-  );
-};
-
-export default FileEditor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getRelativePathWithinBasePath } from 'utils/common/path';
+import path from 'utils/common/path';
 import { useDispatch } from 'react-redux';
 import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import { IconX, IconUpload, IconFile } from '@tabler/icons';
@@ -48,7 +48,13 @@ const FilePickerEditor = ({
         // If file is in the collection's directory, then we use relative path
         // Otherwise, we use the absolute path
         filePaths = filePaths.map((filePath) => {
-          return getRelativePathWithinBasePath(collection.pathname, filePath);
+          const collectionDir = collection.pathname;
+
+          if (filePath.startsWith(collectionDir)) {
+            return path.relative(collectionDir, filePath);
+          }
+
+          return filePath;
         });
 
         onChange(isSingleFilePicker ? filePaths[0] : filePaths);

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import StyledWrapper from './StyledWrapper';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
@@ -18,9 +18,8 @@ import OAuth1 from 'components/RequestPane/Auth/OAuth1';
 import WsseAuth from 'components/RequestPane/Auth/WsseAuth';
 import ApiKeyAuth from 'components/RequestPane/Auth/ApiKeyAuth';
 import AwsV4Auth from 'components/RequestPane/Auth/AwsV4Auth';
-import { humanizeRequestAuthMode } from 'utils/collections/index';
+import { humanizeRequestAuthMode, getTreePathFromCollectionToItem } from 'utils/collections/index';
 import Button from 'ui/Button';
-import { getEffectiveAuthSource } from 'utils/auth';
 
 const GrantTypeComponentMap = ({ collection, folder, updateFolderAuth }) => {
   const dispatch = useDispatch();
@@ -53,6 +52,41 @@ const Auth = ({ collection, folder }) => {
   let request = get(folderRoot, 'request', {});
   const authMode = get(folderRoot, 'request.auth.mode');
 
+  const getEffectiveAuthSource = () => {
+    if (authMode !== 'inherit') return null;
+
+    const collectionRoot = collection?.draft?.root || collection?.root || {};
+    const collectionAuth = get(collectionRoot, 'request.auth');
+    let effectiveSource = {
+      type: 'collection',
+      name: 'Collection',
+      auth: collectionAuth
+    };
+
+    // Get path from collection to current folder
+    const folderTreePath = getTreePathFromCollectionToItem(collection, folder);
+
+    // Check parent folders to find closest auth configuration
+    // Skip the last item which is the current folder
+    for (let i = 0; i < folderTreePath.length - 1; i++) {
+      const parentFolder = folderTreePath[i];
+      if (parentFolder.type === 'folder') {
+        const parentFolderRoot = parentFolder?.draft || parentFolder?.root;
+        const folderAuth = get(parentFolderRoot, 'request.auth');
+        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'inherit') {
+          effectiveSource = {
+            type: 'folder',
+            name: parentFolder.name,
+            auth: folderAuth
+          };
+          break;
+        }
+      }
+    }
+
+    return effectiveSource;
+  };
+
   const handleSave = () => {
     dispatch(saveFolderRoot(collection.uid, folder.uid));
   };
@@ -64,11 +98,6 @@ const Auth = ({ collection, folder }) => {
     });
   };
 
-  const inheritedSource = useMemo(
-    () => (authMode === 'inherit' ? getEffectiveAuthSource(collection, folder) : null),
-    [authMode, folder, collection]
-  );
-
   const getAuthView = () => {
     switch (authMode) {
       case 'basic': {
@@ -173,11 +202,12 @@ const Auth = ({ collection, folder }) => {
         );
       }
       case 'inherit': {
+        const source = getEffectiveAuthSource();
         return (
           <>
             <div className="flex flex-row w-full mt-2 gap-2">
-              <div>Auth inherited from {inheritedSource.name}: </div>
-              <div className="inherit-mode-text" data-testid="inherited-auth-mode">{humanizeRequestAuthMode(inheritedSource.auth?.mode)}</div>
+              <div>Auth inherited from {source.name}: </div>
+              <div className="inherit-mode-text">{humanizeRequestAuthMode(source.auth?.mode)}</div>
             </div>
           </>
         );

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

@@ -81,15 +81,14 @@ const AuthMode = ({ collection, folder }) => {
 
   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}
           showTickMark={true}
-          data-testid="auth-mode-dropdown"
         >
-          <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 mr-1" size={14} strokeWidth={2} />
           </div>
         </MenuDropdown>

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

@@ -4,13 +4,11 @@ import find from 'lodash/find';
 import { updateFolderDocs } from 'providers/ReduxStore/slices/collections';
 import { updateDocsEditing } from 'providers/ReduxStore/slices/tabs';
 import { useTheme } from 'providers/Theme';
-import { useMemo, useRef } from 'react';
+import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
-import AIAssist from 'components/AIAssist';
-import { buildAiVariablesPayload, buildDocsContextFromFolder } from 'utils/ai';
 import Button from 'ui/Button';
 import StyledWrapper from './StyledWrapper';
 import { usePersistedState } from 'hooks/usePersistedState';
@@ -45,8 +43,6 @@ const Documentation = ({ collection, folder }) => {
   };
 
   const onSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
-  const docsContext = useMemo(() => buildDocsContextFromFolder(collection, folder), [collection, folder]);
-  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, folder), [collection, folder]);
 
   if (!folder) {
     return null;
@@ -60,7 +56,7 @@ const Documentation = ({ collection, folder }) => {
 
       {isEditing ? (
         <div className="flex flex-col flex-1 min-h-0">
-          <div className="mt-2 flex-1 overflow-auto min-h-0 relative">
+          <div className="mt-2 flex-1 overflow-auto min-h-0">
             <CodeEditor
               collection={collection}
               theme={displayedTheme}
@@ -73,7 +69,6 @@ const Documentation = ({ collection, folder }) => {
               initialScroll={scroll}
               onScroll={setScroll}
             />
-            <AIAssist scriptType="docs" currentScript={docs || ''} docsContext={docsContext} variables={aiVariables} onApply={onEdit} />
           </div>
           <div className="mt-6 flex-shrink-0">
             <Button type="submit" size="sm" onClick={onSave}>

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

@@ -1,10 +1,8 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { 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 { updateFolderRequestScript, updateFolderResponseScript } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { updateScriptPaneTab } from 'providers/ReduxStore/slices/tabs';
@@ -15,7 +13,6 @@ 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, folder }) => {
   const dispatch = useDispatch();
@@ -25,9 +22,7 @@ const Script = ({ collection, folder }) => {
   const responseScript = folder.draft ? get(folder, 'draft.request.script.res', '') : get(folder, 'root.request.script.res', '');
 
   const tabs = useSelector((state) => state.tabs.tabs);
-  const focusedTab = find(tabs, (tab) => tab.type === 'folder-settings' && (tab.uid === folder.uid || tab.folderUid === folder.uid))
-    || find(tabs, (tab) => tab.type === 'folder-settings' && tab.pathname === folder.pathname);
-  const tabUid = focusedTab?.uid || folder.uid;
+  const focusedTab = find(tabs, (t) => t.uid === folder.uid);
   const scriptPaneTab = focusedTab?.scriptPaneTab;
 
   // Default to post-response if pre-request script is empty (only when scriptPaneTab is null/undefined)
@@ -39,7 +34,7 @@ const Script = ({ collection, folder }) => {
   const activeTab = scriptPaneTab || getDefaultTab();
 
   const setActiveTab = (tab) => {
-    dispatch(updateScriptPaneTab({ uid: tabUid, scriptPaneTab: tab }));
+    dispatch(updateScriptPaneTab({ uid: folder.uid, scriptPaneTab: tab }));
   };
 
   const { displayedTheme } = useTheme();
@@ -65,20 +60,6 @@ const Script = ({ collection, folder }) => {
     return () => clearTimeout(timer);
   }, [activeTab]);
 
-  useFocusErrorLine({
-    uid: folder.uid,
-    editorRef: preRequestEditorRef,
-    scriptPhase: 'pre-request',
-    isVisible: activeTab === 'pre-request'
-  });
-
-  useFocusErrorLine({
-    uid: folder.uid,
-    editorRef: postResponseEditorRef,
-    scriptPhase: 'post-response',
-    isVisible: activeTab === 'post-response'
-  });
-
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateFolderRequestScript({
@@ -103,8 +84,6 @@ const Script = ({ collection, folder }) => {
     dispatch(saveFolderRoot(collection.uid, folder.uid));
   };
 
-  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, folder), [collection, folder]);
-
   const items = flattenItems(folder.items || []);
   const hasPreRequestScriptError = items.some((i) => isItemARequest(i) && i.preRequestScriptErrorMessage);
   const hasPostResponseScriptError = items.some((i) => isItemARequest(i) && i.postResponseScriptErrorMessage);
@@ -132,57 +111,39 @@ const Script = ({ collection, folder }) => {
         </TabsList>
 
         <TabsContent value="pre-request" className="mt-2" dataTestId="folder-pre-request-script-editor">
-          <div className="relative h-full">
-            <CodeEditor
-              ref={preRequestEditorRef}
-              collection={collection}
-              docKey="folder-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>
+          <CodeEditor
+            ref={preRequestEditorRef}
+            collection={collection}
+            docKey="folder-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']}
+            initialScroll={preReqScroll}
+            onScroll={setPreReqScroll}
+          />
         </TabsContent>
 
         <TabsContent value="post-response" className="mt-2" dataTestId="folder-post-response-script-editor">
-          <div className="relative h-full">
-            <CodeEditor
-              ref={postResponseEditorRef}
-              collection={collection}
-              docKey="folder-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>
+          <CodeEditor
+            ref={postResponseEditorRef}
+            collection={collection}
+            docKey="folder-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']}
+            initialScroll={postResScroll}
+            onScroll={setPostResScroll}
+          />
         </TabsContent>
       </Tabs>
 

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

@@ -1,16 +1,13 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useRef } 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 { updateFolderTests } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } 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, folder }) => {
   const dispatch = useDispatch();
@@ -33,35 +30,24 @@ const Tests = ({ collection, folder }) => {
 
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
 
-  useFocusErrorLine({
-    uid: folder.uid,
-    editorRef: testsEditorRef,
-    scriptPhase: 'test'
-  });
-
-  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, folder), [collection, folder]);
-
   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="folder-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
+        ref={testsEditorRef}
+        collection={collection}
+        docKey="folder-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}
+      />
 
       <div className="mt-6">
         <Button type="submit" size="sm" onClick={handleSave}>