CDN docs url changes (#8466)

Co-authored-by: bruno-sachin <bruno-sachin@brunos-MacBook-Air.local>

.gitattributes

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

.github/CODEOWNERS

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

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -49,14 +49,21 @@ body:
   - type: textarea
     attributes:
       label: Describe the bug
-      description: A clear and concise description of the bug and how it's effecting your work along with steps to reproduce. 
+      description: A clear and concise description of the bug and how it's affecting your work
     validations:
       required: true
 
   - type: textarea
     attributes:
-      label: .bru file to reproduce the bug
-      description: Attach your .bru file here that can reproduce the problem.
+      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
     validations:
       required: false
 

.github/ISSUE_TEMPLATE/config.yaml

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+name: 'Setup Auth Feature Dependencies - Linux'
+description: 'Setup feature-specific dependencies for auth tests on Linux'
+runs:
+  using: 'composite'
+  steps:
+    - name: Install additional OS dependencies for auth tests
+      shell: bash
+      run: |
+        sudo apt-get update
+        sudo apt-get --no-install-recommends install -y \
+          libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
+          xvfb
+
+        CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
+        if [[ -f "$CHROME_SANDBOX" ]]; then
+          sudo chown root "$CHROME_SANDBOX"
+          sudo chmod 4755 "$CHROME_SANDBOX"
+        fi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,6 +5,10 @@ inputs:
     description: 'Skip building libraries'
     required: false
     default: 'false'
+  shell:
+    description: 'Shell to use (bash, pwsh)'
+    required: false
+    default: 'bash'
 runs:
   using: 'composite'
   steps:
@@ -16,12 +20,12 @@ runs:
         cache-dependency-path: './package-lock.json'
 
     - name: Install node dependencies
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm ci --legacy-peer-deps
 
     - name: Build libraries
       if: inputs.skip-build != 'true'
-      shell: bash
+      shell: ${{ inputs.shell }}
       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
+        name: playwright-report-linux-ssl
         path: playwright-report/
         retention-days: 30

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

@@ -11,5 +11,8 @@ runs:
           libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
           xvfb libxml2-utils
 
-        sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
-        sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+        CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
+        if [[ -f "$CHROME_SANDBOX" ]]; then
+          sudo chown root "$CHROME_SANDBOX"
+          sudo chmod 4755 "$CHROME_SANDBOX"
+        fi

.github/actions/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
+        name: playwright-report-macos-ssl
         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
+        name: playwright-report-windows-ssl
         path: playwright-report/
         retention-days: 30

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

@@ -0,0 +1,38 @@
+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,20 +1,41 @@
 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: Run Local Testbench
-      shell: bash
+    - 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 }}
       run: |
         npm start --workspace=packages/bruno-tests &
         sleep 5
-
-    - name: Install Test Collection Dependencies
-      shell: bash
-      run: npm ci --prefix packages/bruno-tests/collection
-
-    - name: Run CLI Tests
-      shell: bash
-      run: |
+        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
+      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,19 +4,23 @@ 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: bash
+      shell: ${{ inputs.shell }}
       run: npm ci --prefix packages/bruno-tests/collection
 
     - name: Run Playwright Tests (Ubuntu)
       if: inputs.os == 'ubuntu'
       shell: bash
-      run: xvfb-run npm run test:e2e
+      run: xvfb-run dbus-run-session -- npm run test:e2e
 
     - name: Run Playwright Tests
       if: inputs.os != 'ubuntu'
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm run test:e2e

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

@@ -1,48 +1,53 @@
 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: bash
-      run: npm run test --workspace=packages/bruno-js
+      shell: ${{ inputs.shell }}
+      run: npm run test:ci --workspace=packages/bruno-js
 
     - name: Test Package bruno-cli
-      shell: bash
-      run: npm run test --workspace=packages/bruno-cli
+      shell: ${{ inputs.shell }}
+      run: npm run test:ci --workspace=packages/bruno-cli
 
     - name: Test Package bruno-query
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm run test --workspace=packages/bruno-query
 
     - name: Test Package bruno-lang
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm run test --workspace=packages/bruno-lang
 
     - name: Test Package bruno-schema
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm run test --workspace=packages/bruno-schema
 
     - name: Test Package bruno-app
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm run test --workspace=packages/bruno-app
 
     - name: Test Package bruno-common
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm run test --workspace=packages/bruno-common
 
     - name: Test Package bruno-converters
-      shell: bash
-      run: npm run test --workspace=packages/bruno-converters
+      shell: ${{ inputs.shell }}
+      run: npm run test:ci --workspace=packages/bruno-converters
 
     - name: Test Package bruno-electron
-      shell: bash
-      run: npm run test --workspace=packages/bruno-electron
+      shell: ${{ inputs.shell }}
+      run: npm run test:ci --workspace=packages/bruno-electron
 
     - name: Test Package bruno-requests
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm run test --workspace=packages/bruno-requests
 
     - name: Test Package bruno-filestore
-      shell: bash
+      shell: ${{ inputs.shell }}
       run: npm run test --workspace=packages/bruno-filestore

.github/workflows/benchmarks.yml

@@ -0,0 +1,91 @@
+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,8 +40,11 @@ jobs:
       - name: Install npm dependencies
         run: |
           npm ci --legacy-peer-deps
-          sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
-          sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+          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: Install test collection dependencies
         run: npm ci --prefix packages/bruno-tests/collection

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

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

.github/workflows/ssl-tests.yml

@@ -1,91 +0,0 @@
-name: SSL Tests
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  tests-for-linux:
-    name: SSL Tests - Linux
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@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

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

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

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

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

@@ -51,10 +51,17 @@ bruno.iml
 .cursor
 .claude
 .codex
+.agents
+.agent
+skills-lock.json
 
 # Playwright
 /blob-report/
 
+# Benchmark results (generated at runtime)
+tests/benchmarks/results/
+/benchmark-report/
+
 # Development plan files
 CLAUDE.md
 AGENTS.md
@@ -64,4 +71,4 @@ AGENTS.md
 packages/bruno-filestore/dist
 packages/bruno-requests/dist
 packages/bruno-schema-types/dist
-packages/bruno-converters/dist
+packages/bruno-converters/dist

.npmrc

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

CODING_STANDARDS.md

@@ -59,6 +59,47 @@ 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 
 
@@ -75,6 +116,8 @@ Remember, these rules are here to make our codebase harmonious. If something doe
   - Avoid: `import * as React from "react";` then `React.useCallback(...)`
 - Add `data-testid` to testable elements for Playwright
 - Co-locate utilities that are truly component-specific next to the component, otherwise place shared items under a common folder
+- Avoid mixed controlled and uncontrolled state in React components. A component is either controlled or uncontrolled. State needs a single source of truth instead of being computed by props and then recomputed internally.
+- SHOULD: Use derived state variables instead of adding unneeded `React.useState` / `useState` hooks.
 
 
 ## Readability and Abstractions

docs/playwright-testing-guide.md

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

eslint.config.js

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

package.json

@@ -23,7 +23,6 @@
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
-    "@opencollection/types": "~0.8.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -31,19 +30,22 @@
     "@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.26.0",
+    "eslint": "^9.39.4",
     "eslint-plugin-diff": "^2.0.3",
     "fs-extra": "^11.1.1",
     "globals": "^16.1.0",
     "husky": "^9.1.7",
     "jest": "^29.2.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
     "nano-staged": "^0.8.0",
     "playwright": "^1.51.1",
     "pretty-quick": "^3.1.3",
@@ -80,8 +82,11 @@
     "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",
+    "test:e2e": "playwright test --project=default --project=system-pac",
     "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"
@@ -92,7 +97,9 @@
     ]
   },
   "overrides": {
-    "rollup": "3.29.5",
+    "axios": "1.16.0",
+    "rollup": "3.30.0",
+    "pbkdf2": "3.1.5",
     "electron-store": {
       "conf": {
         "json-schema-typed": "8.0.1"
@@ -103,4 +110,4 @@
     "ajv": "^8.17.1",
     "git-url-parse": "^14.1.0"
   }
-}
+}

packages/bruno-app/.babelrc

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

packages/bruno-app/jest.config.js

@@ -1,8 +1,7 @@
 module.exports = {
   rootDir: '.',
   transform: {
-    '^.+\\.[jt]sx?$': '<rootDir>/jest/transformers/babel-with-esm-replacements.cjs'
-    // '^.+\\.[jt]sx?$': [require("./jest/transformers/with-replacements.cjs"),'babel-jest']
+    '^.+\\.[jt]sx?$': 'babel-jest'
   },
   transformIgnorePatterns: [
     '/node_modules/(?!strip-json-comments|nanoid|xml-formatter)/'

packages/bruno-app/jest.setup.js

@@ -1,3 +1,19 @@
+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/jest/transformers/babel-with-esm-replacements.cjs

@@ -1,8 +0,0 @@
-const babelJest = require('babel-jest')
-
-module.exports = {
-  process(sourceText, sourcePath, options) {
-    const transformer = babelJest.createTransformer();
-    return transformer.process(sourceText.replace(`import.meta.env.MODE`, 'test'), sourcePath, options)
-  }
-};

packages/bruno-app/package.json

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

packages/bruno-app/rsbuild.config.mjs

@@ -38,6 +38,9 @@ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -683,8 +683,6 @@ 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,14 +1,75 @@
+import { memo } from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import StyledWrapper from './StyledWrapper';
+import { serializeBody } from './serializeBody';
 
-const Swagger = ({ spec }) => {
+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} />
+        <SwaggerUI
+          spec={spec}
+          onComplete={onComplete}
+          requestInterceptor={requestInterceptor}
+        />
       </div>
     </StyledWrapper>
   );
 };
 
-export default Swagger;
+export default memo(Swagger);

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

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

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

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

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

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

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

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

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

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

@@ -52,6 +52,14 @@ 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);
     });
@@ -138,14 +146,18 @@ 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 {
-      await dispatch(openWorkspaceDialog());
-      toast.success('Workspace opened successfully');
+      const result = await dispatch(openWorkspaceDialog());
+      if (result) {
+        toast.success('Workspace opened successfully');
+      }
     } catch (error) {
       toast.error(error.message || 'Failed to open workspace');
     }
@@ -160,7 +172,6 @@ const AppTitleBar = () => {
 
     try {
       await dispatch(createWorkspaceWithUniqueName(defaultLocation));
-      toast.success('Workspace created!');
     } catch (error) {
       toast.error(error?.message || 'Failed to create workspace');
     }

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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,6 +45,15 @@ 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;
@@ -151,14 +160,46 @@ const StyledWrapper = styled.div`
   
   //matching bracket fix
   .CodeMirror-matchingbracket {
-    background: #5cc0b48c !important;
-    text-decoration:unset;
+    background: ${(props) => props.theme.status.success.background} !important;
+    text-decoration: unset;
+  }
+
+  .CodeMirror-nonmatchingbracket {
+    color: ${(props) => props.theme.colors.text.danger} !important;
+    background: ${(props) => props.theme.status.danger.background} !important;
+    text-decoration: unset;
   }
 
   .cm-search-line-highlight {
     background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
   }
 
+  @keyframes cm-error-line-flash {
+    0%, 60% {
+      background-color: ${(props) => props.theme.status.danger.background};
+    }
+    100% {
+      background-color: transparent;
+    }
+  }
+
+  .CodeMirror .cm-error-line-flash {
+    background-color: transparent;
+    animation: cm-error-line-flash 3s ease-in-out;
+  }
+
+  .CodeMirror .cm-error-line-flash-gutter {
+    color: ${(props) => props.theme.colors.text.danger} !important;
+    font-weight: 600;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .CodeMirror .cm-error-line-flash {
+      animation: none;
+      background-color: ${(props) => props.theme.status.danger.background};
+    }
+  }
+
   .cm-search-match {
     background: rgba(255, 193, 7, 0.25);
   }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -51,6 +51,11 @@ const AuthMode = ({ collection }) => {
       label: 'NTLM Auth',
       onClick: () => onModeChange('ntlm')
     },
+    {
+      id: 'oauth1',
+      label: 'OAuth 1.0',
+      onClick: () => onModeChange('oauth1')
+    },
     {
       id: 'oauth2',
       label: 'OAuth 2.0',
@@ -70,13 +75,13 @@ const AuthMode = ({ collection }) => {
 
   return (
     <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
+      <div className="inline-flex items-center cursor-pointer auth-mode-selector" data-testid="auth-mode-selector">
         <MenuDropdown
           items={menuItems}
           placement="bottom-end"
           selectedItemId={authMode}
         >
-          <div className="flex items-center justify-center auth-mode-label select-none">
+          <div className="flex items-center justify-center auth-mode-label select-none" data-testid="auth-mode-label">
             {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
           </div>
         </MenuDropdown>

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

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

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

@@ -12,6 +12,7 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
 import NTLMAuth from './NTLMAuth';
+import OAuth1 from './Oauth1';
 import Button from 'ui/Button';
 
 const Auth = ({ collection }) => {
@@ -37,6 +38,9 @@ const Auth = ({ collection }) => {
       case 'ntlm': {
         return <NTLMAuth collection={collection} />;
       }
+      case 'oauth1': {
+        return <OAuth1 collection={collection} />;
+      }
       case 'oauth2': {
         return <OAuth2 collection={collection} />;
       }

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

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

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

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

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

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

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

@@ -8,6 +8,7 @@ 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();
@@ -126,6 +127,8 @@ 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

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

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

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

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

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

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

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

@@ -5,10 +5,11 @@ 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: 'http', requestUrl: '' };
+  const initialPresets = { requestType: DEFAULT_PRESET_REQUEST_TYPE, requestUrl: '' };
 
   // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig
   const currentPresets = collection.draft?.brunoConfig
@@ -47,12 +48,13 @@ 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="http"
-              checked={(currentPresets.requestType || 'http') === 'http'}
+              value={PRESET_REQUEST_TYPES.HTTP}
+              checked={(currentPresets.requestType || DEFAULT_PRESET_REQUEST_TYPE) === PRESET_REQUEST_TYPES.HTTP}
             />
             <label htmlFor="http" className="ml-1 cursor-pointer select-none">
               HTTP
@@ -60,12 +62,13 @@ const PresetsSettings = ({ collection }) => {
 
             <input
               id="graphql"
+              data-testid="presets-request-type-graphql"
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
               onChange={handleRequestTypeChange}
-              value="graphql"
-              checked={(currentPresets.requestType || 'http') === 'graphql'}
+              value={PRESET_REQUEST_TYPES.GRAPHQL}
+              checked={(currentPresets.requestType || DEFAULT_PRESET_REQUEST_TYPE) === PRESET_REQUEST_TYPES.GRAPHQL}
             />
             <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
               GraphQL
@@ -73,12 +76,13 @@ const PresetsSettings = ({ collection }) => {
 
             <input
               id="grpc"
+              data-testid="presets-request-type-grpc"
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
               onChange={handleRequestTypeChange}
-              value="grpc"
-              checked={(currentPresets.requestType || 'http') === 'grpc'}
+              value={PRESET_REQUEST_TYPES.GRPC}
+              checked={(currentPresets.requestType || DEFAULT_PRESET_REQUEST_TYPE) === PRESET_REQUEST_TYPES.GRPC}
             />
             <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
               gRPC
@@ -86,12 +90,13 @@ const PresetsSettings = ({ collection }) => {
 
             <input
               id="ws"
+              data-testid="presets-request-type-ws"
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
               onChange={handleRequestTypeChange}
-              value="ws"
-              checked={(currentPresets.requestType || 'http') === 'ws'}
+              value={PRESET_REQUEST_TYPES.WS}
+              checked={(currentPresets.requestType || DEFAULT_PRESET_REQUEST_TYPE) === PRESET_REQUEST_TYPES.WS}
             />
             <label htmlFor="ws" className="ml-1 cursor-pointer select-none">
               WebSocket
@@ -106,6 +111,7 @@ 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"
@@ -123,7 +129,7 @@ const PresetsSettings = ({ collection }) => {
         </div>
 
         <div className="mt-6">
-          <Button type="button" size="sm" onClick={handleSave}>
+          <Button type="button" size="sm" data-testid="presets-save-btn" onClick={handleSave}>
             Save
           </Button>
         </div>

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

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

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

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

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

@@ -1,19 +1,25 @@
-import React from 'react';
+import React, { useMemo, 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();
+  const testsEditorRef = useRef(null);
   const tests = collection.draft?.root ? get(collection, 'draft.root.request.tests', '') : get(collection, 'root.request.tests', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
+  const [testsScroll, setTestsScroll] = usePersistedState({ key: `collection-tests-scroll-${collection.uid}`, default: 0 });
 
   const onEdit = (value) => {
     dispatch(
@@ -26,20 +32,35 @@ 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>
-      <CodeEditor
-        collection={collection}
-        value={tests || ''}
-        theme={displayedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onSave={handleSave}
-        font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
-        showHintsFor={['req', 'res', 'bru']}
-      />
+      <div className="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>
 
       <div className="mt-6">
         <Button type="submit" size="sm" onClick={handleSave}>

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

@@ -1,18 +1,31 @@
 import React, { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+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';
 import { variableNameRegex } from 'utils/common/regex';
 import { setCollectionVars } from 'providers/ReduxStore/slices/collections/index';
 
-const VarsTable = ({ collection, vars, varType }) => {
+const VarsTable = ({ collection, vars, varType, initialScroll = 0 }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
+  const tabs = useSelector((state) => state.tabs.tabs);
+  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+
+  // Get column widths from Redux
+  const focusedTab = tabs?.find((t) => t.uid === activeTabUid);
+  const collectionVarsWidths = focusedTab?.tableColumnWidths?.['collection-vars'] || {};
+
+  const handleColumnWidthsChange = (tableId, widths) => {
+    dispatch(updateTableColumnWidths({ uid: activeTabUid, tableId, widths }));
+  };
 
   const onSave = () => dispatch(saveCollectionSettings(collection.uid));
 
@@ -46,15 +59,31 @@ const VarsTable = ({ collection, vars, varType }) => {
         </div>
       ),
       placeholder: varType === 'request' ? 'Value' : 'Expr',
-      render: ({ value, onChange }) => (
-        <MultiLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={onSave}
-          onChange={onChange}
-          collection={collection}
-          placeholder={!value ? (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>
       )
     }
   ];
@@ -68,11 +97,16 @@ const VarsTable = ({ collection, vars, varType }) => {
   return (
     <StyledWrapper className="w-full">
       <EditableTable
+        tableId="collection-vars"
+        testId={`collection-vars-${varType === 'response' ? 'res' : 'req'}`}
         columns={columns}
         rows={vars}
         onChange={handleVarsChange}
         defaultRow={defaultRow}
         getRowError={getRowError}
+        columnWidths={collectionVarsWidths}
+        onColumnWidthsChange={(widths) => handleColumnWidthsChange('collection-vars', widths)}
+        initialScroll={initialScroll}
       />
     </StyledWrapper>
   );