fix(snapshot): active workspace restoration from snapshot (#8392)

* feat(workspaces): implement active workspace restoration from snapshot

- Added a new action to restore the active workspace from a snapshot.
- Integrated workspace restoration into IPC events for improved user experience.
- Refactored workspace loading logic to prioritize valid workspaces and handle invalid paths.
- Introduced utility functions for workspace path validation and normalization.
- Added tests to ensure correct functionality of workspace restoration and validation logic.

* feat(snapshot): refactor snapshot serialization and add environment preservation logic

- Moved snapshot serialization logic to a new file for better organization.
- Implemented environment preservation for collections during snapshot serialization.
- Added utility functions to handle collection environment checks and serialization.
- Introduced tests to validate the new serialization behavior and environment preservation.
- Enhanced existing tests to cover edge cases for unmounted collections and environment persistence.

* Add tests for missing and invalid environment files

* feat(snapshot): refactor devTools normalization and add saveToken to IPC handler

* refactor(snapshot): remove saveToken from IPC handler for renderer:snapshot:save

* feat(snapshot): implement collection deduplication logic in SnapshotManager and add corresponding tests

* feat(snapshot): enhance workspace-specific environment handling for shared collections

* feat(snapshot): remove sourceWorkspacePathname from snapshot serialization and related tests

* feat(snapshot): remove sourceWorkspacePathname from SnapshotManager and add tests for shared collection environment restoration

* feat(snapshot): refactor collection deduplication tests and enhance snapshot seeding utility

* feat(snapshot): enhance workspace path normalization and improve snapshot environment tests

---------

Co-authored-by: engineering-bruno <engineering@usebruno.com>

.coderabbit.yaml

@@ -39,7 +39,8 @@ reviews:
     - path: 'tests/**/**.*'
       instructions: |
         Review the following e2e test code written using the Playwright test library. Ensure that:
-        - Follow best practices for Playwright code and e2e automation
+        - Follow the guidance in `docs/playwright-testing-guide.md` - the canonical E2E guide (structure, fixtures, best practices).
+        - For anything the guide above doesn't cover, follow standard Playwright and e2e automation best practices
         - Try to reduce usage of `page.waitForTimeout();` in code unless absolutely necessary and the locator cannot be found using existing `expect()` playwright calls
         - Avoid using `page.pause()` in code
         - Use locator variables for locators

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

@@ -1,79 +0,0 @@
-name: Auth Tests
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  oauth1-tests-for-linux:
-    name: OAuth 1.0 Auth Tests - Linux
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Setup Feature Dependencies
-        uses: ./.github/actions/auth/oauth1/linux/setup-feature-specific-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/linux/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/linux/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/linux/run-oauth1-cli-tests
-
-  oauth1-tests-for-macos:
-    name: OAuth 1.0 Auth Tests - macOS
-    timeout-minutes: 60
-    runs-on: macos-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/macos/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/macos/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/macos/run-oauth1-cli-tests
-
-  oauth1-tests-for-windows:
-    name: OAuth 1.0 Auth Tests - Windows
-    timeout-minutes: 60
-    runs-on: windows-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/windows/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/windows/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/windows/run-oauth1-cli-tests

.github/workflows/benchmarks.yml

@@ -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/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

@@ -58,6 +58,10 @@ skills-lock.json
 # Playwright
 /blob-report/
 
+# Benchmark results (generated at runtime)
+tests/benchmarks/results/
+/benchmark-report/
+
 # Development plan files
 CLAUDE.md
 AGENTS.md

CODING_STANDARDS.md

@@ -35,10 +35,10 @@
 Remember, these rules are here to make our codebase harmonious. If something doesn't fit perfectly, let's chat about it. Happy coding! 🚀
 
 
-## Tests 
+## Tests
 
 - Add tests for any new functionality or meaningful changes. If code is added, removed, or significantly modified, corresponding tests should be updated or created.
- 
+
 - Prioritise high-value tests over maximum coverage. Focus on testing behaviour that is critical, complex, or likely to break—don’t chase coverage numbers for their own sake.
 
 - Write behaviour-driven tests, not implementation-driven ones. Tests should validate real expected output and observable behaviour, not internal details or mocked-out logic unless absolutely necessary.
@@ -59,13 +59,56 @@ 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
 
-## UI Specific instructions 
+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.
+
+6. Centralise locators and actions in page modules under `tests/utils/page/*` — never inline raw selectors in a spec. See the **Best Practices** section of `docs/playwright-testing-guide.md` for the page-module pattern and `buildCommonLocators` usage.
+
+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
 
 ### React
 
-- Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any react component using the styled component 
-- Styled Components are used as wrappers to define both self and children components style, tailwind classes are used specifically for layout based styles. 
+- Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any react component using the styled component
+- Styled Components are used as wrappers to define both self and children components style, tailwind classes are used specifically for layout based styles.
 - Styled Component CSS might also change layout but tailwind classes shouldn't define colors.
 - MUST: Prefer custom hooks for business logic, data fetching, and side-effects.
 - MUST: Avoid `useEffect` unless absolutely needed. Prefer derived state, event handlers.
@@ -87,3 +130,4 @@ Remember, these rules are here to make our codebase harmonious. If something doe
 - Follow functional programming but just enough to be readable, we don't need to go as deep as ADTs and Monads, we want to keep the code pipeline obvious and easy for everyone to read and contribute to.
 - Avoid single line abstractions where all that's being done is increasing the call stack with one additional function.
 - Add in meaningful comments instead of obvious ones where complex code flow is explained properly.
+- Avoid optional chaining (`?.`) where it doesn't make sense — it hides whether a value can genuinely be null and works against TypeScript's guarantees. Only use it when the null case is handled right there (fallback, early return, or guard); otherwise fix the type or narrow first.

docs/playwright-testing-guide.md

@@ -45,7 +45,7 @@ npm run test:codegen
 2. Playwright Inspector opens in a separate window
 3. You interact with the Bruno UI
 4. Actions are recorded and converted to test code
-5. The generated test file is saved in `e2e-tests/`
+5. The generated test file is saved in `tests/`
 
 ### Codegen Workflow
 
@@ -97,20 +97,24 @@ test('Test with temporary data', async ({ page, createTmpDir }) => {
 ### Directory Structure
 
 ```
-e2e-tests/
-├── 001-sanity-tests/          # Basic functionality tests
-│   ├── 001-home-screen.spec.ts
-│   └── 002-create-new-collection-and-new-request.spec.ts
-├── 002-feature-tests/         # Specific feature tests
-├── 003-integration-tests/     # Complex workflow tests
-└── bruno-testbench/           # Test utilities and helpers
+tests/
+├── common/                             # Basic functionality tests
+│   ├── home-screen.spec.ts
+│   └── create-new-collection.spec.ts
+├── feature-a/                          # Specific feature tests
+├── utils/                              # Test utilities and helpers
+│   ├── page/
+│   │   ├── locators.ts                # common locators and merged sub feature locators
+│   │   ├── actions.ts                 # common actions
+│   │   ├── feature-a.ts               # Feature A specific locator builder and actions
+│   │   └── feature-b.ts               # Feature B specific locator builder and actions
 ```
 
 ### Naming Conventions
 
 - **Files**: Use descriptive names with `.spec.ts` extension
 - **Tests**: Use clear, descriptive test names
-- **Folders**: Use numbered prefixes for ordering
+- **Folders**: Use for grouping the tests
 
 ### Test File Template
 
@@ -167,10 +171,10 @@ test('Test with multiple fixtures', async ({ page, createTmpDir, electronApp })
 npm run test:e2e
 
 # Run specific test file
-npx playwright test e2e-tests/001-sanity-tests/001-home-screen.spec.ts
+npx playwright test tests/common/home-screen.spec.ts
 
 # Run tests in a specific folder
-npx playwright test e2e-tests/001-sanity-tests/
+npx playwright test tests/folder-a/
 ```
 
 ### Advanced Options
@@ -192,113 +196,253 @@ npx playwright test --debug
 npx playwright test --trace on
 ```
 
-### CI/CD Integration
-
-```bash
-# Install browsers for CI
-npx playwright install
-
-# Run tests in CI mode
-npm run test:e2e
-```
-
 ## Best Practices
 
-### 1. Use Semantic Selectors
+### 1. Centralize Locators and Actions in Page Modules
+
+**Never inline raw `page.locator(...)` / `page.getByTestId(...)` selectors in a spec.** Locators and the interactions that use them live in **page modules** under `tests/utils/page/*`, and specs consume them through the shared builders and exported actions. This keeps selectors single-sourced, so a UI change is fixed in one place instead of across every spec.
+
+**A page module owns one section.** Each file under `tests/utils/page/*` covers a single UI section/domain and exports *both* a locator builder and the actions for that section, co-located. [`mounting.ts`](../tests/utils/page/mounting.ts) is the reference shape — `buildCollectionTreeLocators(page)` lives alongside its actions (`waitForCollectionMount`, `openCollectionFromPath`, `getCollectionTreeStructure`, …) in one file.
+
+**New section → new file → link into common.** Create a new page module for a new section rather than growing the inline object in `locators.ts`, then map its locator builder into `buildCommonLocators` so specs get it for free. This is **required** for every new page module.
+
+A spec builds locators once and destructures the groups it needs — no per-section imports at the call site:
+
+```typescript
+import { test, expect } from '../../playwright';
+import { buildCommonLocators, createCollection, createRequest, closeAllCollections } from '../utils/page';
+
+test('should rename a request via the sidebar', async ({ page, createTmpDir }) => {
+  const { sidebar, actions, dropdown } = buildCommonLocators(page);
+  const testDir = await createTmpDir('rename-test');
+
+  await createCollection(page, 'My Collection', testDir);
+  await createRequest(page, 'Test Request', 'My Collection');
+
+  await sidebar.request('Test Request').hover();
+  await actions.collectionItemActions('Test Request').click();
+  await dropdown.item('Rename').click();
+
+  await closeAllCollections(page);
+});
+```
+
+Defining a new page module (locator builder **and** its actions in one file):
+
+```typescript
+// tests/utils/page/notifications.ts — one file owns the "notifications" section
+import { test, Page } from '../../../playwright';
+
+export const buildNotificationLocators = (page: Page) => ({
+  toast: (text: string) => page.getByTestId('notification-toast').filter({ hasText: text }),
+  dismissButton: () => page.getByTestId('notification-dismiss')
+});
+
+export const dismissNotification = async (page: Page, text: string) => {
+  await test.step(`Dismiss notification "${text}"`, async () => {
+    const notifications = buildNotificationLocators(page);
+    await notifications.toast(text).waitFor({ state: 'visible' });
+    await notifications.dismissButton().click();
+  });
+};
+```
+
+Then link the builder into `buildCommonLocators` so every spec can reach it:
+
+```typescript
+// tests/utils/page/locators.ts
+import { buildNotificationLocators } from './notifications';
+
+export const buildCommonLocators = (page: Page) => ({
+  runner: () => page.getByTestId('run-button'),
+  sidebar: { /* … */ },
+  notifications: buildNotificationLocators(page),   // now buildCommonLocators(page).notifications
+  // …
+});
+```
+
+**Scope of enforcement:**
+
+- **Strict for new tests** — any new spec must go through this pattern; no direct selectors, no duplicated inline queries.
+- **Lenient for existing tests** — small tweaks to an existing spec need not refactor its existing selectors. But if you rewrite or substantially modify a large portion of a spec, extract its selectors and interactions into a page module as part of the change.
+- **Don't retro-link existing modules right now** — some already-extracted modules (e.g. [`mounting.ts`](../tests/utils/page/mounting.ts)) aren't wired into `buildCommonLocators` yet; leave them until their specs are next reworked. The rules above apply going forward, not as a migration mandate.
+- **Long-term goal** — every section is a page module and every module is reachable from `buildCommonLocators`, so locators and actions stay consistent and single-sourced.
+
+### 2. Use Semantic Selectors
+
+Applies to the selectors written *inside* a page module (`locators.ts` or a section file), not the spec.
 
 **Preferred:**
 
 ```typescript
-await page.getByRole('button', { name: 'Create' }).click();
-await page.getByLabel('Collection Name').fill('test');
-await page.getByText('Success message').toBeVisible();
+page.getByTestId('collection-name');
+page.getByRole('button', { name: 'Create' });
+page.getByLabel('Collection Name');
 ```
 
 **Avoid:**
 
 ```typescript
-await page.locator('.btn-primary').click();
-await page.locator('#collection-name').fill('test');
+page.locator('.btn-primary');
+page.locator('#collection-name');
 ```
 
-### 2. Create Isolated Tests
+### 3. Keep `defaultPreferences` in Sync with App Preferences
 
-Each test should be independent and not rely on other tests:
+E2E launches seed a fresh userData dir from the `defaultPreferences` mock in [`playwright/index.ts`](../playwright/index.ts) (merged into any `init-user-data/preferences.json`). **Whenever you add or change a key in the app's `preferences.json` schema/defaults, add a matching default to that mock** — otherwise tests run against unset preferences and diverge from real app behaviour.
 
 ```typescript
-test('should create collection', async ({ page, createTmpDir }) => {
-  const testDir = await createTmpDir('collection-test');
+// playwright/index.ts
+const defaultPreferences = {
+  preferences: {
+    onboarding: {
+      hasLaunchedBefore: true,
+      hasSeenWelcomeModal: true,
+      lastSeenVersion: version
+    }
+    // ← add the default for any new preferences.json key here
+  }
+};
+```
 
-  // Test creates its own data
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('test-collection');
-  await page.getByLabel('Location').fill(testDir);
+### 4. Create Isolated Tests
 
-  // Clean up happens automatically via createTmpDir
+Each test should be independent and not rely on other tests — its own temp dir, its own data, deterministic cleanup:
+
+```typescript
+import { test, expect } from '../../playwright';
+import { buildCommonLocators, createCollection, closeAllCollections } from '../utils/page';
+
+test('should create a collection', async ({ page, createTmpDir }) => {
+  const { sidebar } = buildCommonLocators(page);
+  const testDir = await createTmpDir('collection-test');   // isolated per test
+
+  await createCollection(page, 'test-collection', testDir);
+  await expect(sidebar.collection('test-collection')).toBeVisible();
+
+  await closeAllCollections(page);   // deterministic cleanup
 });
 ```
 
-### 3. Add Meaningful Assertions
+### 5. Add Meaningful Assertions
 
-Always verify the expected outcomes:
+Always verify the expected outcome through locators from a page module:
 
 ```typescript
-test('should save request successfully', async ({ page }) => {
+import { test, expect } from '../../playwright';
+import { buildCommonLocators, createCollection, createRequest, saveRequest, closeAllCollections } from '../utils/page';
+
+test('should save a request', async ({ page, createTmpDir }) => {
+  const { tabs } = buildCommonLocators(page);
+  const testDir = await createTmpDir('save-test');
+
   // Arrange
-  await page.getByLabel('Create Collection').click();
+  await createCollection(page, 'Save Test', testDir);
+  await createRequest(page, 'Get Ping', 'Save Test', { url: 'http://localhost:8081/ping', method: 'GET' });
 
   // Act
-  await page.getByRole('button', { name: 'Save' }).click();
+  await saveRequest(page);
 
-  // Assert
-  await expect(page.getByText('Request saved successfully')).toBeVisible();
-  await expect(page.getByRole('tab', { name: 'GET request' })).toBeVisible();
+  // Assert — the tab is open and no longer shows the unsaved-changes indicator
+  await expect(tabs.requestTab('Get Ping')).toBeVisible();
+  await expect(tabs.draftIndicator()).toBeHidden();
+
+  await closeAllCollections(page);
 });
 ```
 
-### 4. Handle Async Operations
+### 6. Keep Assertions in Specs, Not Actions
+
+`expect(...)` belongs in the spec, that's where the test's intent and its pass/fail criteria must be visible. Action helpers in `tests/utils/page/*` perform interactions and synchronize state; they must **not** assert the test's expectations. An action that asserts hides pass/fail logic behind a reusable helper and forces every caller to accept that one expectation.
+
+**Actions synchronize with `waitFor`; specs verify with `expect`.** When an action needs the UI to reach a state before its next step (a modal to open, a spinner to clear), wait with Playwright's wait utilities like `locator.waitFor({ state })`, `page.waitForLoadState()` etc., not `expect`. `waitFor` synchronizes so the next action is reliable; `expect` decides whether the test passes and stays in the spec.
 
 ```typescript
-test('should wait for network requests', async ({ page }) => {
-  // Wait for specific network request
-  await page.waitForResponse((response) => response.url().includes('/api/endpoint'));
+// tests/utils/page/collection.ts — the action WAITS, it does not assert
+export const openRenameModal = async (page: Page, requestName: string) => {
+  await test.step(`Open rename modal for "${requestName}"`, async () => {
+    const { sidebar, actions, dropdown } = buildCommonLocators(page);
+    await sidebar.request(requestName).hover();
+    await actions.collectionItemActions(requestName).click();
+    await dropdown.item('Rename').click();
+    // Synchronization, not assertion — wait until the modal is ready to interact with
+    await page.locator('.bruno-modal').filter({ hasText: 'Rename Request' }).waitFor({ state: 'visible' });
+  });
+};
+```
 
-  // Or wait for element to be stable
-  await page.waitForSelector('[data-testid="loading"]', { state: 'hidden' });
+```typescript
+// the spec OWNS the assertion
+test('renames a request', async ({ page, createTmpDir }) => {
+  const { modal } = buildCommonLocators(page);
+  // … arrange: create collection + request …
+
+  await openRenameModal(page, 'Test Request');
+
+  await expect(modal.title('Rename Request')).toBeVisible();   // expect lives here, in the spec
 });
 ```
 
-### 5. Use Test Data Management
+### 7. Handle Async Operations
+
+Prefer auto-retrying assertions and action helpers that encapsulate the wait; never wait on a raw inline selector.
 
 ```typescript
+import { test, expect } from '../../playwright';
+import { buildCommonLocators, sendRequestAndWaitForResponse } from '../utils/page';
+
+test('should wait for async operations', async ({ page }) => {
+  const { response } = buildCommonLocators(page);
+
+  // Action helpers wrap "do the thing + wait for its result"
+  await sendRequestAndWaitForResponse(page, 200);
+
+  // Auto-retrying assertions wait until the condition holds — no hardcoded sleeps
+  await expect(response.statusCode()).toContainText('200');
+  await expect(response.pane()).toBeVisible();
+
+  // page.waitForResponse targets the network (not the DOM), so it's fine to use directly.
+  // Avoid page.waitForSelector('[data-testid="…"]') — wait on a locator from a page module instead.
+});
+```
+
+### 8. Use Test Data Management
+
+```typescript
+import { test, expect } from '../../playwright';
+import { buildCommonLocators, openCollection } from '../utils/page';
+
 test('should work with test data', async ({ page, createTmpDir }) => {
+  const { sidebar } = buildCommonLocators(page);
   const testDir = await createTmpDir('test-data');
 
   // Create test files
   await fs.writeFile(path.join(testDir, 'test.bru'), testContent);
 
-  // Use in test
-  await page.getByLabel('Open Collection').click();
-  await page.getByText(testDir).click();
+  // Use in test — actions/locators come from page modules, not raw selectors
+  await openCollection(page, 'test-data');
+  await expect(sidebar.collection('test-data')).toBeVisible();
 });
 ```
 
 ## Examples
 
+All examples use `buildCommonLocators` for locators and the exported action helpers from `tests/utils/page` — see [Best Practices §1](#1-centralize-locators-and-actions-in-page-modules).
+
 ### Example 1: Basic Collection Creation
 
 ```typescript
 import { test, expect } from '../../playwright';
+import { buildCommonLocators, createCollection, closeAllCollections } from '../utils/page';
 
 test('should create a new collection', async ({ page, createTmpDir }) => {
+  const { sidebar } = buildCommonLocators(page);
   const testDir = await createTmpDir('new-collection');
 
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('My Test Collection');
-  await page.getByLabel('Location').fill(testDir);
-  await page.getByRole('button', { name: 'Create' }).click();
+  await createCollection(page, 'My Test Collection', testDir);
 
-  await expect(page.getByText('My Test Collection')).toBeVisible();
+  await expect(sidebar.collection('My Test Collection')).toBeVisible();
+  await closeAllCollections(page);
 });
 ```
 
@@ -306,28 +450,29 @@ test('should create a new collection', async ({ page, createTmpDir }) => {
 
 ```typescript
 import { test, expect } from '../../playwright';
+import {
+  buildCommonLocators,
+  createCollection,
+  createRequest,
+  sendRequestAndWaitForResponse,
+  closeAllCollections
+} from '../utils/page';
 
-test('should create and execute HTTP request', async ({ page, createTmpDir }) => {
+test('should create and execute an HTTP request', async ({ page, createTmpDir }) => {
+  const { response } = buildCommonLocators(page);
   const testDir = await createTmpDir('request-test');
 
-  // Create collection
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('Request Test');
-  await page.getByLabel('Location').fill(testDir);
-  await page.getByRole('button', { name: 'Create' }).click();
+  await createCollection(page, 'Request Test', testDir);
+  await createRequest(page, 'Ping', 'Request Test', {
+    url: 'http://localhost:8081/ping',
+    method: 'GET'
+  });
 
-  // Create request
-  await page.locator('#create-new-tab').getByRole('img').click();
-  await page.getByPlaceholder('Request Name').fill('Test Request');
-  await page.locator('#new-request-url .CodeMirror').click();
-  await page.locator('textarea').fill('http://localhost:8081/ping');
-  await page.getByRole('button', { name: 'Create' }).click();
+  // Sends the active request and asserts the status code in one step
+  await sendRequestAndWaitForResponse(page, 200);
 
-  // Execute request
-  await page.getByTestId('send-arrow-icon').click();
-
-  // Verify response
-  await expect(page.getByRole('main')).toContainText('200 OK');
+  await expect(response.statusCode()).toContainText('200');
+  await closeAllCollections(page);
 });
 ```
 
@@ -335,29 +480,25 @@ test('should create and execute HTTP request', async ({ page, createTmpDir }) =>
 
 ```typescript
 import { test, expect } from '../../playwright';
+import {
+  buildCommonLocators,
+  createCollection,
+  createEnvironment,
+  addEnvironmentVariable,
+  closeAllCollections
+} from '../utils/page';
 
 test('should create and use environment variables', async ({ page, createTmpDir }) => {
+  const { environment } = buildCommonLocators(page);
   const testDir = await createTmpDir('env-test');
 
-  // Setup collection
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('Environment Test');
-  await page.getByLabel('Location').fill(testDir);
-  await page.getByRole('button', { name: 'Create' }).click();
+  await createCollection(page, 'Environment Test', testDir);
 
-  // Create environment
-  await page.getByRole('button', { name: 'Environments' }).click();
-  await page.getByRole('button', { name: 'Add Environment' }).click();
-  await page.getByLabel('Environment Name').fill('Development');
-  await page.getByRole('button', { name: 'Create' }).click();
+  await createEnvironment(page, 'Development');
+  await addEnvironmentVariable(page, { name: 'API_URL', value: 'http://localhost:3000' });
 
-  // Add variable
-  await page.getByRole('button', { name: 'Add Variable' }).click();
-  await page.getByLabel('Variable Name').fill('API_URL');
-  await page.getByLabel('Variable Value').fill('http://localhost:3000');
-  await page.getByRole('button', { name: 'Save' }).click();
-
-  await expect(page.getByText('API_URL')).toBeVisible();
+  await expect(environment.varRow('API_URL')).toBeVisible();
+  await closeAllCollections(page);
 });
 ```
 
@@ -377,10 +518,14 @@ test('should create and use environment variables', async ({ page, createTmpDir
 
 2. **Tests Timing Out**
 
+   First find out *why* it's slow - a timeout is usually a symptom, not the problem. Replace hardcoded waits with auto-retrying assertions, wait on the app-ready signal (`[data-app-state="loaded"]`), and use action helpers that wait for their own result. Bumping the timeout hides the real issue and slows the suite for everyone.
+
+   Only raise the timeout when the test genuinely does long-running work (large import, a slow real endpoint) - and scope it to that test, not globally:
+
    ```typescript
-   // Increase timeout for specific test
-   test('slow test', async ({ page }) => {
-     test.setTimeout(60000); // 60 seconds
+   // Justified: this test imports a very large collection that legitimately takes ~40s.
+   test('imports a large collection', async ({ page }) => {
+     test.setTimeout(60000); // 60s — the work is genuinely long, not a masked flake
      // Test steps
    });
    ```
@@ -412,7 +557,7 @@ test('should create and use environment variables', async ({ page, createTmpDir
 npx playwright test --debug
 
 # Run specific test in debug mode
-npx playwright test --debug e2e-tests/001-sanity-tests/001-home-screen.spec.ts
+npx playwright test --debug tests/common/home-screen.spec.ts
 ```
 
 ### Trace Analysis
@@ -431,11 +576,11 @@ The Playwright configuration is in `playwright.config.ts`:
 
 ```typescript
 export default defineConfig({
-  testDir: './e2e-tests',
-  fullyParallel: false,
+  testDir: './tests',
+  fullyParallel: tue,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 1 : 0,
-  workers: process.env.CI ? undefined : 1,
+  retries: process.env.CI ? 2 : 0,
+  workers: undefined,
 
   projects: [
     {

package-lock.json

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

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.9.1",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -31,10 +30,13 @@
     "@storybook/react": "^10.1.10",
     "@storybook/react-webpack5": "^10.1.10",
     "@stylistic/eslint-plugin": "^5.3.1",
+    "@types/adm-zip": "^0.5.8",
     "@types/jest": "^29.5.11",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
     "@typescript-eslint/parser": "^8.39.0",
+    "adm-zip": "^0.5.17",
     "concurrently": "^8.2.2",
     "cross-env": "10.1.0",
     "eslint": "^9.39.4",
@@ -43,7 +45,7 @@
     "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,9 +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"
@@ -93,9 +97,9 @@
     ]
   },
   "overrides": {
-    "axios":"1.13.6",
+    "axios": "1.16.0",
     "rollup": "3.30.0",
-    "pbkdf2":"3.1.5",
+    "pbkdf2": "3.1.5",
     "electron-store": {
       "conf": {
         "json-schema-typed": "8.0.1"

packages/bruno-app/jest.setup.js

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

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

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/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');
     }

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/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;
@@ -165,6 +174,32 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
   }
 
+  @keyframes cm-error-line-flash {
+    0%, 60% {
+      background-color: ${(props) => props.theme.status.danger.background};
+    }
+    100% {
+      background-color: transparent;
+    }
+  }
+
+  .CodeMirror .cm-error-line-flash {
+    background-color: transparent;
+    animation: cm-error-line-flash 3s ease-in-out;
+  }
+
+  .CodeMirror .cm-error-line-flash-gutter {
+    color: ${(props) => props.theme.colors.text.danger} !important;
+    font-weight: 600;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .CodeMirror .cm-error-line-flash {
+      animation: none;
+      background-color: ${(props) => props.theme.status.danger.background};
+    }
+  }
+
   .cm-search-match {
     background: rgba(255, 193, 7, 0.25);
   }

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

@@ -6,9 +6,12 @@
  */
 
 import React, { createRef } from 'react';
+import { useSelector } from 'react-redux';
 import { debounce, isEqual } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
+import { setupAiAutocomplete } from 'utils/codemirror/aiGhostText';
+import { buildAutocompleteContext } from 'utils/ai';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
@@ -16,6 +19,7 @@ import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
 import { setupLinkAware } from 'utils/codemirror/linkAware';
 import { setupLintErrorTooltip } from 'utils/codemirror/lint-errors';
+import { setupCodeMirrorResizeRefresh } from 'utils/codemirror/resize';
 import CodeMirrorSearch from 'components/CodeMirrorSearch/index';
 import {
   applyEditorState,
@@ -64,13 +68,16 @@ class CodeEditor extends React.Component {
 
   componentDidMount() {
     const variables = getAllVariables(this.props.collection, this.props.item);
-    const runShortcut = () => {
-      if (this.props.onRun) {
-        this.props.onRun();
-        return;
-      }
-      return CodeMirror.Pass;
-    };
+    /**
+     * 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 || '',
@@ -256,6 +263,24 @@ 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
@@ -266,6 +291,8 @@ class CodeEditor extends React.Component {
       if (cmInput) {
         cmInput.classList.add('mousetrap');
       }
+
+      this.cleanupResizeRefresh = setupCodeMirrorResizeRefresh(editor, this._node);
     }
   }
 
@@ -386,6 +413,7 @@ class CodeEditor extends React.Component {
         });
       }
 
+      this.aiAutocompleteCleanup?.();
       this.editor?._destroyLinkAware?.();
       this.editor.off('change', this._onEdit);
 
@@ -399,6 +427,7 @@ class CodeEditor extends React.Component {
 
       // Clean up lint error tooltip
       this.cleanupLintErrorTooltip?.();
+      this.cleanupResizeRefresh?.();
 
       const wrapper = this.editor.getWrapperElement();
       wrapper?.parentNode?.removeChild(wrapper);
@@ -463,7 +492,15 @@ class CodeEditor extends React.Component {
 
 const CodeEditorWithPersistenceScope = React.forwardRef((props, ref) => {
   const persistenceScope = usePersistenceScope();
-  return <CodeEditor {...props} persistenceScope={persistenceScope} ref={ref} />;
+  const aiPreferences = useSelector((state) => state.app.preferences?.ai);
+  return (
+    <CodeEditor
+      {...props}
+      persistenceScope={persistenceScope}
+      aiPreferences={aiPreferences}
+      ref={ref}
+    />
+  );
 });
 
 CodeEditorWithPersistenceScope.displayName = 'CodeEditor';

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

@@ -2,6 +2,7 @@ import React, { useMemo, useCallback } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
 import MenuDropdown from 'ui/MenuDropdown';
+import StatusBadge from 'ui/StatusBadge/index';
 import { useDispatch } from 'react-redux';
 import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -66,6 +67,17 @@ const AuthMode = ({ collection }) => {
       label: 'API Key',
       onClick: () => onModeChange('apikey')
     },
+    {
+      id: 'akamai-edgegrid',
+      label: (
+        <span className="flex items-center gap-2">
+          Akamai EdgeGrid
+          <StatusBadge status="info" size="xs">Beta</StatusBadge>
+        </span>
+      ),
+      ariaLabel: 'Akamai EdgeGrid (Beta)',
+      onClick: () => onModeChange('akamai-edgegrid')
+    },
     {
       id: 'none',
       label: 'No Auth',
@@ -75,13 +87,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/EdgeGridAuth/StyledWrapper.js

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

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

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

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

@@ -8,6 +8,7 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
 import ApiKeyAuth from './ApiKeyAuth/';
+import EdgeGridAuth from './EdgeGridAuth';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
@@ -50,6 +51,9 @@ const Auth = ({ collection }) => {
       case 'apikey': {
         return <ApiKeyAuth collection={collection} />;
       }
+      case 'akamai-edgegrid': {
+        return <EdgeGridAuth collection={collection} />;
+      }
     }
   };
 

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

@@ -4,11 +4,13 @@ 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 { useRef } 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';
@@ -25,6 +27,8 @@ const Docs = ({ collection }) => {
   const isEditing = focusedTab?.docsEditing || false;
   const docs = collection.draft?.root ? get(collection, 'draft.root.docs', '') : get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
+  const docsContext = useMemo(() => buildDocsContextFromCollection(collection), [collection]);
+  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, null), [collection]);
 
   // StyledWrapper has overflow-y: auto — use null selector.
   // Preview mode: hook tracks wrapper scroll. Edit mode: CodeEditor's onScroll/initialScroll.
@@ -85,18 +89,21 @@ 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')}
-          initialScroll={scroll}
-          onScroll={setScroll}
-        />
+        <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="pl-1">
           <div className="h-[1px] min-h-[500px]">

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

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

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconShare, IconBook } from '@tabler/icons';
-import { areItemsLoading, getItemsLoadStats } from 'utils/collections/index';
+import { IconFolder, IconWorld, IconApi, IconShare, IconBook, IconTag } from '@tabler/icons';
+import { areItemsLoading, getItemsLoadStats, getCollectionVersion } from 'utils/collections/index';
 import { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import ShareCollection from 'components/ShareCollection/index';
 import GenerateDocumentation from 'components/Sidebar/Collections/Collection/GenerateDocumentation';
+import ChangeCollectionVersion from 'components/Sidebar/Collections/Collection/ChangeCollectionVersion';
 import { addTab } from 'providers/ReduxStore/slices/tabs';
 import StyledWrapper from './StyledWrapper';
+import Migration from '../Migration';
 
 const Info = ({ collection }) => {
   const dispatch = useDispatch();
@@ -17,6 +19,9 @@ const Info = ({ collection }) => {
   const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
   const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
   const [showGenerateDocumentationModal, setShowGenerateDocumentationModal] = useState(false);
+  const [showChangeVersionModal, setShowChangeVersionModal] = useState(false);
+
+  const collectionVersion = getCollectionVersion(collection);
 
   const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
 
@@ -44,6 +49,22 @@ const Info = ({ collection }) => {
             </div>
           </div>
 
+          <div className="flex items-start group cursor-pointer" onClick={() => setShowChangeVersionModal(true)} data-testid="info-version-row">
+            <div className="icon-box version flex-shrink-0 p-3 rounded-lg">
+              <IconTag className="w-5 h-5" stroke={1.5} />
+            </div>
+            <div className="ml-4 h-full flex flex-col justify-start">
+              <div className="font-medium h-fit my-auto">Version</div>
+              <div className="flex items-center gap-2">
+                {collectionVersion
+                  ? <span className="text-muted" data-testid="info-version-value">{collectionVersion}</span>
+                  : <span className="text-muted italic" data-testid="info-version-value">Not Set</span>}
+                <span className="group-hover:underline text-link" data-testid="info-version-change">change</span>
+              </div>
+            </div>
+          </div>
+          {showChangeVersionModal && <ChangeCollectionVersion collectionUid={collection.uid} onClose={() => setShowChangeVersionModal(false)} />}
+
           {/* Environments Row */}
           <div className="flex items-start">
             <div className="icon-box environments flex-shrink-0 p-3 rounded-lg">
@@ -126,6 +147,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/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,8 +1,10 @@
-import React, { 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';
@@ -13,6 +15,7 @@ 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();
@@ -59,6 +62,20 @@ const Script = ({ collection }) => {
     return () => clearTimeout(timer);
   }, [activeTab]);
 
+  useFocusErrorLine({
+    uid: collection.uid,
+    editorRef: preRequestEditorRef,
+    scriptPhase: 'pre-request',
+    isVisible: activeTab === 'pre-request'
+  });
+
+  useFocusErrorLine({
+    uid: collection.uid,
+    editorRef: postResponseEditorRef,
+    scriptPhase: 'post-response',
+    isVisible: activeTab === 'post-response'
+  });
+
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateCollectionRequestScript({
@@ -85,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">
@@ -108,39 +127,57 @@ const Script = ({ collection }) => {
         </TabsList>
 
         <TabsContent value="pre-request" className="mt-2" dataTestId="collection-pre-request-script-editor">
-          <CodeEditor
-            ref={preRequestEditorRef}
-            collection={collection}
-            docKey="collection-script:pre-request"
-            value={requestScript || ''}
-            theme={displayedTheme}
-            onEdit={onRequestScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'bru']}
-            initialScroll={preReqScroll}
-            onScroll={setPreReqScroll}
-          />
+          <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" dataTestId="collection-post-response-script-editor">
-          <CodeEditor
-            ref={postResponseEditorRef}
-            collection={collection}
-            docKey="collection-script:post-response"
-            value={responseScript || ''}
-            theme={displayedTheme}
-            onEdit={onResponseScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'res', 'bru']}
-            initialScroll={postResScroll}
-            onScroll={setPostResScroll}
-          />
+          <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/Tests/index.js

@@ -1,13 +1,16 @@
-import React, { useRef } 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();
@@ -29,24 +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
-        ref={testsEditorRef}
-        collection={collection}
-        docKey="collection-tests"
-        value={tests || ''}
-        theme={displayedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onSave={handleSave}
-        font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
-        showHintsFor={['req', 'res', 'bru']}
-        initialScroll={testsScroll}
-        onScroll={setTestsScroll}
-      />
+      <div className="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

@@ -5,6 +5,8 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 import { updateTableColumnWidths } from 'providers/ReduxStore/slices/tabs';
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
+import DataTypeSelector from 'components/DataTypeSelector';
+import { valueToString } from '@usebruno/common/utils';
 import EditableTable from 'components/EditableTable';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
@@ -57,15 +59,31 @@ const VarsTable = ({ collection, vars, varType, initialScroll = 0 }) => {
         </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>
       )
     }
   ];
@@ -80,6 +98,7 @@ const VarsTable = ({ collection, vars, varType, initialScroll = 0 }) => {
     <StyledWrapper className="w-full">
       <EditableTable
         tableId="collection-vars"
+        testId={`collection-vars-${varType === 'response' ? 'res' : 'req'}`}
         columns={columns}
         rows={vars}
         onChange={handleVarsChange}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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