test: fix test and update default retry in local to 0

tests: run playwright e2e fully parallel (#8313 )
feat: variable data types support (#8046 )
2026-07-03 17:38:36 +00:00 · 2026-06-20 01:19:35 +05:30 · 2026-06-19 19:40:24 +05:30 · 2026-06-19 19:36:59 +05:30 · 2026-06-19 15:10:20 +05:30 · 2026-06-18 21:28:47 +05:30
1056 changed files with 69953 additions and 7039 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Force LF line endings for all text files
+* text=auto eol=lf
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +1 @@
-* @helloanoop @maintainer-bruno @bijin-bruno @lohit-bruno @naman-bruno
+* @helloanoop @maintainer-bruno @bijin-bruno @lohit-bruno @naman-bruno @sid-bruno @vijayh-bruno
--- a/.github/actions/common/setup-node-deps/action.yml
+++ b/.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
--- a/.github/actions/ssl/linux/run-ssl-e2e-tests/action.yml
+++ b/.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
--- a/.github/actions/ssl/macos/run-ssl-e2e-tests/action.yml
+++ b/.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
--- a/.github/actions/ssl/windows/run-ssl-e2e-tests/action.yml
+++ b/.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
--- a/.github/actions/tests/run-benchmark-tests/action.yml
+++ b/.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
--- a/.github/actions/tests/run-cli-tests/action.yml
+++ b/.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
--- a/.github/actions/tests/run-e2e-tests/action.yml
+++ b/.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
--- a/.github/actions/tests/run-unit-tests/action.yml
+++ b/.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
--- a/.github/workflows/auth-tests.yml
+++ b/.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
--- a/.github/workflows/benchmarks.yml
+++ b/.github/workflows/benchmarks.yml
@@ -0,0 +1,88 @@
+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: |
+          sudo chown root node_modules/electron/dist/chrome-sandbox
+          sudo chmod 4755 node_modules/electron/dist/chrome-sandbox
+
+      - 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 }})'
+            });
--- a/.github/workflows/ssl-tests.yml
+++ b/.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
--- a/.github/workflows/tests-linux.yml
+++ b/.github/workflows/tests-linux.yml
@@ -1,4 +1,4 @@
-name: Tests
+name: Linux Tests
 on:
  workflow_dispatch:
  push:
@@ -8,7 +8,7 @@ on:

 jobs:
  unit-test:
-    name: Unit Tests
+    name: Unit Tests (Linux)
    timeout-minutes: 60
    runs-on: ubuntu-latest
    permissions:
@@ -23,7 +23,7 @@ jobs:
        uses: ./.github/actions/tests/run-unit-tests

  cli-test:
-    name: CLI Tests
+    name: CLI Tests (Linux)
    runs-on: ubuntu-latest
    permissions:
      checks: write
@@ -42,13 +42,14 @@ jobs:
        uses: EnricoMi/publish-unit-test-result-action@v2
        if: always()
        with:
-          check_name: CLI Test Results
+          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
-    timeout-minutes: 60
+    name: Playwright E2E Tests (Linux)
+    timeout-minutes: 240
    runs-on: ubuntu-24.04
    steps:
      - uses: actions/checkout@v6
@@ -58,7 +59,8 @@ jobs:
          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
+            xvfb \
+            gsettings-desktop-schemas dbus-x11

      - name: Setup Node Dependencies
        uses: ./.github/actions/common/setup-node-deps
@@ -68,7 +70,7 @@ jobs:
          sudo chown root node_modules/electron/dist/chrome-sandbox
          sudo chmod 4755 node_modules/electron/dist/chrome-sandbox

-      - name: Run playwright Tests
+      - name: Run E2E Tests
        uses: ./.github/actions/tests/run-e2e-tests
        with:
          os: ubuntu
@@ -77,6 +79,61 @@ jobs:
        uses: actions/upload-artifact@v6
        if: ${{ !cancelled() }}
        with:
-          name: playwright-report
+          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
--- a/.github/workflows/tests-macos.yml
+++ b/.github/workflows/tests-macos.yml
@@ -0,0 +1,123 @@
+name: macOS Tests
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, 'release/v*']
+  pull_request:
+    branches: [main, 'release/v*']
+
+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
--- a/.github/workflows/tests-windows.yml
+++ b/.github/workflows/tests-windows.yml
@@ -0,0 +1,134 @@
+name: Windows Tests
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, 'release/v*']
+  pull_request:
+    branches: [main, 'release/v*']
+
+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
--- a/.gitignore
+++ b/.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
@@ -67,4 +71,4 @@ AGENTS.md
 packages/bruno-filestore/dist
 packages/bruno-requests/dist
 packages/bruno-schema-types/dist
-packages/bruno-converters/dist
+packages/bruno-converters/dist
--- a/CODING_STANDARDS.md
+++ b/CODING_STANDARDS.md
@@ -59,6 +59,47 @@ Remember, these rules are here to make our codebase harmonious. If something doe

 - Tests should be fast enough to run continuously. Avoid long-running operations unless absolutely necessary; prefer lightweight fixtures and isolated units.

+### E2E Tests 
+
+When reviewing Electron-specific Playwright tests, treat `<project-root>/tests/**` as the canonical location for specs, typically matching `<project-root>/tests/**/*.spec.{ts,js}`. For broader Playwright workflow guidance, also refer to `docs/playwright-testing-guide.md`.
+
+Goal: rewrite or critique the tests so they are genuinely behavioural, maintainable, and safely parallelizable.
+
+Rules:
+1. Tests must verify user-visible behaviour, not implementation details.
+   - Prefer assertions on UI state, persisted data, windows, dialogs, filesystem effects, and app-level outcomes.
+   - Avoid hardcoded waits, brittle selectors, fake internal state checks, and “click then expect mock called” tests unless the user behaviour is the point.
+
+2. Tests must be Electron-aware.
+   - Use Electron app launch patterns correctly.
+   - Handle main window, secondary windows, dialogs, menus, native prompts, clipboard, file pickers, and IPC-driven UI behaviour through observable outcomes.
+   - Do not reach into app internals unless absolutely necessary for setup or controlled test fixtures.
+
+3. Tests must be parallel-safe.
+   - No shared user data directories.
+   - No shared ports, files, DBs, caches, clipboard assumptions, or global app state.
+   - Each test gets isolated temp paths, unique workspace/project names, and deterministic cleanup.
+   - Avoid test ordering assumptions.
+
+4. No hardcoded mess.
+   - Replace magic timeouts with event-driven waits.
+   - Replace brittle text/index selectors with role, label, test id, or stable user-facing selectors.
+   - Replace duplicated setup with fixtures.
+   - Replace hardcoded absolute paths with temp dirs.
+   - Replace random sleeps with waiting for actual app signals.
+
+5. Every test should follow this shape:
+   - Arrange: create isolated fixture state.
+   - Act: perform real user actions.
+   - Assert: verify observable behavioural outcome.
+   - Cleanup: remove isolated resources.
+
+For each test file:
+- Identify behavioural vs non-behavioural tests.
+- Flag brittle selectors, hardcoded waits, shared state, serial dependencies, and fake assertions.
+- Rewrite the tests using Playwright best practices for Electron.
+- Make them parallel-ready.
+- Explain briefly why each rewrite is better.

 ## UI Specific instructions 

--- a/assets/images/old-run-anywhere.png
+++ b/assets/images/old-run-anywhere.png
--- a/assets/images/run-anywhere.png
+++ b/assets/images/run-anywhere.png
--- a/docs/playwright-testing-guide.md
+++ b/docs/playwright-testing-guide.md
@@ -324,7 +324,7 @@ test('should create and execute HTTP request', async ({ page, createTmpDir }) =>
  await page.getByRole('button', { name: 'Create' }).click();

  // Execute request
-  await page.locator('#send-request').getByRole('img').nth(2).click();
+  await page.getByTestId('send-arrow-icon').click();

  // Verify response
  await expect(page.getByRole('main')).toContainText('200 OK');
--- a/package-lock.json
+++ b/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.0",
        "@playwright/test": "^1.51.1",
        "@rollup/plugin-json": "^6.1.0",
        "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -39,6 +38,7 @@
        "@storybook/react-webpack5": "^10.1.10",
        "@stylistic/eslint-plugin": "^5.3.1",
        "@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",
@@ -50,7 +50,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 +67,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 +6943,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",
@@ -8957,48 +9045,6 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
-    "node_modules/@jitl/quickjs-ffi-types": {
-      "version": "0.29.2",
-      "resolved": "https://registry.npmjs.org/@jitl/quickjs-ffi-types/-/quickjs-ffi-types-0.29.2.tgz",
-      "integrity": "sha512-069uQTiEla2PphXg6UpyyJ4QXHkTj3S9TeXgaMCd8NDYz3ODBw5U/rkg6fhuU8SMpoDrWjEzybmV5Mi2Pafb5w==",
-      "license": "MIT"
-    },
-    "node_modules/@jitl/quickjs-wasmfile-debug-asyncify": {
-      "version": "0.29.2",
-      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-debug-asyncify/-/quickjs-wasmfile-debug-asyncify-0.29.2.tgz",
-      "integrity": "sha512-YdRw2414pFkxzyyoJGv81Grbo9THp/5athDMKipaSBNNQvFE9FGRrgE9tt2DT2mhNnBx1kamtOGj0dX84Yy9bg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jitl/quickjs-ffi-types": "0.29.2"
-      }
-    },
-    "node_modules/@jitl/quickjs-wasmfile-debug-sync": {
-      "version": "0.29.2",
-      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-debug-sync/-/quickjs-wasmfile-debug-sync-0.29.2.tgz",
-      "integrity": "sha512-VgisubjyPMWEr44g+OU0QWGyIxu7VkApkLHMxdORX351cw22aLTJ+Z79DJ8IVrTWc7jh4CBPsaK71RBQDuVB7w==",
-      "license": "MIT",
-      "dependencies": {
-        "@jitl/quickjs-ffi-types": "0.29.2"
-      }
-    },
-    "node_modules/@jitl/quickjs-wasmfile-release-asyncify": {
-      "version": "0.29.2",
-      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-release-asyncify/-/quickjs-wasmfile-release-asyncify-0.29.2.tgz",
-      "integrity": "sha512-sf3luCPr8wBVmGV6UV8Set+ie8wcO6mz5wMvDVO0b90UVCKfgnx65A1JfeA+zaSGoaFyTZ3sEpXSGJU+6qJmLw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jitl/quickjs-ffi-types": "0.29.2"
-      }
-    },
-    "node_modules/@jitl/quickjs-wasmfile-release-sync": {
-      "version": "0.29.2",
-      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-release-sync/-/quickjs-wasmfile-release-sync-0.29.2.tgz",
-      "integrity": "sha512-UFIcbY3LxBRUjEqCHq3Oa6bgX5znt51V5NQck8L2US4u989ErasiMLUjmhq6UPC837Sjqu37letEK/ZpqlJ7aA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jitl/quickjs-ffi-types": "0.29.2"
-      }
-    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.13",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -9642,12 +9688,21 @@
      }
    },
    "node_modules/@opencollection/types": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.9.0.tgz",
-      "integrity": "sha512-2p9Pb1cSpUBvtsnvsHtqxbzmJtUvkfE7r2R/BVWiVG0CRohvuhyClcgb061aa/95TEo0cXdXKLXmtZSGWvf1NA==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.9.1.tgz",
+      "integrity": "sha512-kYJvPSvR9XohCo7qACiCQEbWlvj4KgxM8igrTEhudIxTO1QAy8BBOEUeHLqYeSFz1MSSW1CuWkMJOyw/egr7Gg==",
      "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",
@@ -10090,9 +10145,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": {
@@ -11313,6 +11368,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",
@@ -12332,7 +12393,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",
@@ -12854,6 +12915,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",
@@ -13443,6 +13511,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",
@@ -14116,6 +14193,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",
@@ -14643,9 +14738,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",
@@ -14659,7 +14754,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"
@@ -16147,6 +16242,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",
@@ -16511,7 +16621,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",
@@ -17654,6 +17764,32 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/degenerator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+      "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.13.4",
+        "escodegen": "^2.1.0",
+        "esprima": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/degenerator/node_modules/ast-types": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -18560,7 +18696,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
        "esprima": "^4.0.1",
@@ -18582,7 +18717,6 @@
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=4.0"
@@ -18965,7 +19099,6 @@
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=0.10.0"
@@ -19028,6 +19161,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",
@@ -23416,6 +23558,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",
@@ -23719,15 +23867,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.0",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.0.tgz",
+      "integrity": "sha512-l1mfj2atMqndAHI3ls7XqPxEjV2J9ZkcNyHpoZA3r2T1LLwDB69jgkMWh71YKwhBbK0G2f4WSn05ahmQXVxupA==",
      "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": {
@@ -24678,6 +24826,15 @@
        "node": ">= 10"
      }
    },
+    "node_modules/netmask": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+      "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/new-github-issue-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/new-github-issue-url/-/new-github-issue-url-0.2.1.tgz",
@@ -25190,6 +25347,19 @@
        "node": ">=6"
      }
    },
+    "node_modules/pac-resolver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz",
+      "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==",
+      "license": "MIT",
+      "dependencies": {
+        "degenerator": "^5.0.0",
+        "netmask": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/package-json-from-dist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -26581,7 +26751,7 @@
      "integrity": "sha512-l+fsjYEkTik3m/G0pE7gMr4qBJP84LhK779oQm6MBzhBGpd4By4qieTW+4FUAlNCyzQTynn3Nhsa50c0IELSxQ==",
      "license": "MIT",
      "dependencies": {
-        "axios": "1.13.6",
+        "axios": "1.16.0",
        "rusha": "^0.8.14"
      },
      "engines": {
@@ -26838,9 +27008,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": {
@@ -27054,31 +27224,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/quickjs-emscripten": {
-      "version": "0.29.2",
-      "resolved": "https://registry.npmjs.org/quickjs-emscripten/-/quickjs-emscripten-0.29.2.tgz",
-      "integrity": "sha512-SlvkvyZgarReu2nr4rkf+xz1vN0YDUz7sx4WHz8LFtK6RNg4/vzAGcFjE7nfHYBEbKrzfIWvKnMnxZkctQ898w==",
-      "license": "MIT",
-      "dependencies": {
-        "@jitl/quickjs-wasmfile-debug-asyncify": "0.29.2",
-        "@jitl/quickjs-wasmfile-debug-sync": "0.29.2",
-        "@jitl/quickjs-wasmfile-release-asyncify": "0.29.2",
-        "@jitl/quickjs-wasmfile-release-sync": "0.29.2",
-        "quickjs-emscripten-core": "0.29.2"
-      },
-      "engines": {
-        "node": ">=16.0.0"
-      }
-    },
-    "node_modules/quickjs-emscripten-core": {
-      "version": "0.29.2",
-      "resolved": "https://registry.npmjs.org/quickjs-emscripten-core/-/quickjs-emscripten-core-0.29.2.tgz",
-      "integrity": "sha512-jEAiURW4jGqwO/fW01VwlWqa2G0AJxnN5FBy1xnVu8VIVhVhiaxUfCe+bHqS6zWzfjFm86HoO40lzpteusvyJA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jitl/quickjs-ffi-types": "0.29.2"
-      }
-    },
    "node_modules/ramda": {
      "version": "0.30.1",
      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.30.1.tgz",
@@ -29442,10 +29587,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"
@@ -32764,6 +32908,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",
@@ -32843,7 +32996,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",
@@ -34334,18 +34487,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",
@@ -34396,10 +34537,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",
@@ -34940,6 +35082,7 @@
      "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",
@@ -34950,7 +35093,8 @@
      "devDependencies": {
        "@babel/core": "^7.25.2",
        "@babel/preset-env": "^7.25.4",
-        "@opencollection/types": "0.9.0",
+        "@babel/preset-typescript": "^7.25.0",
+        "@opencollection/types": "0.9.1",
        "@rollup/plugin-alias": "^5.1.0",
        "@rollup/plugin-commonjs": "^23.0.2",
        "@rollup/plugin-node-resolve": "^15.0.1",
@@ -35033,6 +35177,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",
@@ -35047,9 +35193,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",
@@ -35079,7 +35226,8 @@
        "socks-proxy-agent": "^8.0.2",
        "tough-cookie": "^6.0.0",
        "uuid": "^10.0.0",
-        "yup": "^0.32.11"
+        "yup": "^0.32.11",
+        "zod": "^4.1.8"
      },
      "devDependencies": {
        "electron": "~37.6.1",
@@ -35617,6 +35765,7 @@
      "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",
@@ -35625,6 +35774,7 @@
      "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",
@@ -35824,7 +35974,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",
@@ -35837,7 +35987,7 @@
        "nanoid": "3.3.8",
        "node-fetch": "^2.7.0",
        "path": "^0.12.7",
-        "quickjs-emscripten": "^0.29.2",
+        "quickjs-emscripten": "^0.32.0",
        "tv4": "^1.3.0",
        "uuid": "^10.0.0",
        "xml-formatter": "^3.5.0",
@@ -35846,11 +35996,54 @@
      },
      "devDependencies": {
        "@rollup/plugin-commonjs": "^23.0.2",
+        "@rollup/plugin-json": "^6.0.0",
        "@rollup/plugin-node-resolve": "^15.0.1",
        "@rollup/plugin-terser": "^1.0.0",
        "rollup": "3.30.0"
      }
    },
+    "packages/bruno-js/node_modules/@jitl/quickjs-ffi-types": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-ffi-types/-/quickjs-ffi-types-0.32.0.tgz",
+      "integrity": "sha512-v9T+GQpmk43VDJ7d72sf0Nexhk+ArvtUihW27dy7lqAl0zBObFKtSBBIm5RBjwIhE8VwsPPm9PNuvPvNqLWUEg==",
+      "license": "MIT"
+    },
+    "packages/bruno-js/node_modules/@jitl/quickjs-wasmfile-debug-asyncify": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-debug-asyncify/-/quickjs-wasmfile-debug-asyncify-0.32.0.tgz",
+      "integrity": "sha512-EX8zbXwGqCgAE764M+qvkHtyXDi/FUoMBea0JnES7vCM3P7a2+EOZOjGv85wtZ2sJhI1oJ+nekmqpOODFDY+hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
+    "packages/bruno-js/node_modules/@jitl/quickjs-wasmfile-debug-sync": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-debug-sync/-/quickjs-wasmfile-debug-sync-0.32.0.tgz",
+      "integrity": "sha512-LeYWrPGC1uNCTBWvibo3ZLJj0CSVNYUXvJpXMCmuQ5Sap2cCACc3uvGvYV4homHHBAzfw5akoTqMMS4YFRtw+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
+    "packages/bruno-js/node_modules/@jitl/quickjs-wasmfile-release-asyncify": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-release-asyncify/-/quickjs-wasmfile-release-asyncify-0.32.0.tgz",
+      "integrity": "sha512-3oSwPfja12ICz4aIblB58cuY8JlEq5Txt8Cut4VLo+LH47QN+mzCnSgnbB03hWzg1LBcc+VyyI9UOag7a1NF+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
+    "packages/bruno-js/node_modules/@jitl/quickjs-wasmfile-release-sync": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-release-sync/-/quickjs-wasmfile-release-sync-0.32.0.tgz",
+      "integrity": "sha512-BKNDI/TPBfGlLNGYpLrhcDGXmIk4xHm4MRAisOBnOzpXVn9HZWsfmMAc9WMBrAHjvvds6HOikKeaOBKdPdpVrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
    "packages/bruno-js/node_modules/jsonwebtoken": {
      "version": "9.0.3",
      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
@@ -35900,6 +36093,31 @@
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
      "license": "MIT"
    },
+    "packages/bruno-js/node_modules/quickjs-emscripten": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/quickjs-emscripten/-/quickjs-emscripten-0.32.0.tgz",
+      "integrity": "sha512-So0Sqw869y/S2oE3Nuc0uT3Dhqgvsj8FSrwBdsuTosVsG8ME5/OcudU1GxsrIFdFABgy17GHnTVO9TYV/bLQcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-wasmfile-debug-asyncify": "0.32.0",
+        "@jitl/quickjs-wasmfile-debug-sync": "0.32.0",
+        "@jitl/quickjs-wasmfile-release-asyncify": "0.32.0",
+        "@jitl/quickjs-wasmfile-release-sync": "0.32.0",
+        "quickjs-emscripten-core": "0.32.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "packages/bruno-js/node_modules/quickjs-emscripten-core": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/quickjs-emscripten-core/-/quickjs-emscripten-core-0.32.0.tgz",
+      "integrity": "sha512-QFnPfjFey8EqknSrSxe1hZrf1/8z7/6s1QzGOmKo6++02r7QRRX7ZoyNaZh7JuVjWsVW87KnQrbZqnHkOAzUyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
    "packages/bruno-js/node_modules/semver": {
      "version": "7.7.3",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -35932,6 +36150,7 @@
      "version": "0.12.0",
      "license": "MIT",
      "dependencies": {
+        "@usebruno/common": "0.1.0",
        "arcsecond": "^5.0.0",
        "dotenv": "^16.3.1",
        "lodash": "^4.17.21",
@@ -35962,13 +36181,15 @@
        "@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",
        "http-proxy-agent": "~7.0.2",
        "https-proxy-agent": "~7.0.6",
        "is-ip": "^5.0.1",
+        "pac-resolver": "^7.0.1",
+        "quickjs-emscripten": "^0.32.0",
        "shell-env": "^4.0.1",
        "socks-proxy-agent": "~8.0.5",
        "system-ca": "^2.0.1",
@@ -36010,6 +36231,48 @@
        "npm": ">=9.0.0"
      }
    },
+    "packages/bruno-requests/node_modules/@jitl/quickjs-ffi-types": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-ffi-types/-/quickjs-ffi-types-0.32.0.tgz",
+      "integrity": "sha512-v9T+GQpmk43VDJ7d72sf0Nexhk+ArvtUihW27dy7lqAl0zBObFKtSBBIm5RBjwIhE8VwsPPm9PNuvPvNqLWUEg==",
+      "license": "MIT"
+    },
+    "packages/bruno-requests/node_modules/@jitl/quickjs-wasmfile-debug-asyncify": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-debug-asyncify/-/quickjs-wasmfile-debug-asyncify-0.32.0.tgz",
+      "integrity": "sha512-EX8zbXwGqCgAE764M+qvkHtyXDi/FUoMBea0JnES7vCM3P7a2+EOZOjGv85wtZ2sJhI1oJ+nekmqpOODFDY+hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
+    "packages/bruno-requests/node_modules/@jitl/quickjs-wasmfile-debug-sync": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-debug-sync/-/quickjs-wasmfile-debug-sync-0.32.0.tgz",
+      "integrity": "sha512-LeYWrPGC1uNCTBWvibo3ZLJj0CSVNYUXvJpXMCmuQ5Sap2cCACc3uvGvYV4homHHBAzfw5akoTqMMS4YFRtw+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
+    "packages/bruno-requests/node_modules/@jitl/quickjs-wasmfile-release-asyncify": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-release-asyncify/-/quickjs-wasmfile-release-asyncify-0.32.0.tgz",
+      "integrity": "sha512-3oSwPfja12ICz4aIblB58cuY8JlEq5Txt8Cut4VLo+LH47QN+mzCnSgnbB03hWzg1LBcc+VyyI9UOag7a1NF+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
+    "packages/bruno-requests/node_modules/@jitl/quickjs-wasmfile-release-sync": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/@jitl/quickjs-wasmfile-release-sync/-/quickjs-wasmfile-release-sync-0.32.0.tgz",
+      "integrity": "sha512-BKNDI/TPBfGlLNGYpLrhcDGXmIk4xHm4MRAisOBnOzpXVn9HZWsfmMAc9WMBrAHjvvds6HOikKeaOBKdPdpVrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
    "packages/bruno-requests/node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -36033,6 +36296,31 @@
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
      "license": "MIT"
    },
+    "packages/bruno-requests/node_modules/quickjs-emscripten": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/quickjs-emscripten/-/quickjs-emscripten-0.32.0.tgz",
+      "integrity": "sha512-So0Sqw869y/S2oE3Nuc0uT3Dhqgvsj8FSrwBdsuTosVsG8ME5/OcudU1GxsrIFdFABgy17GHnTVO9TYV/bLQcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-wasmfile-debug-asyncify": "0.32.0",
+        "@jitl/quickjs-wasmfile-debug-sync": "0.32.0",
+        "@jitl/quickjs-wasmfile-release-asyncify": "0.32.0",
+        "@jitl/quickjs-wasmfile-release-sync": "0.32.0",
+        "quickjs-emscripten-core": "0.32.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "packages/bruno-requests/node_modules/quickjs-emscripten-core": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/quickjs-emscripten-core/-/quickjs-emscripten-core-0.32.0.tgz",
+      "integrity": "sha512-QFnPfjFey8EqknSrSxe1hZrf1/8z7/6s1QzGOmKo6++02r7QRRX7ZoyNaZh7JuVjWsVW87KnQrbZqnHkOAzUyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jitl/quickjs-ffi-types": "0.32.0"
+      }
+    },
    "packages/bruno-requests/node_modules/tough-cookie": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.0.tgz",
@@ -36070,6 +36358,7 @@
      "version": "0.7.0",
      "license": "MIT",
      "dependencies": {
+        "@usebruno/common": "0.1.0",
        "nanoid": "3.3.8",
        "yup": "^0.32.11"
      }
@@ -36101,7 +36390,7 @@
      "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",
@@ -36369,4 +36658,4 @@
      }
    }
  }
-}
+}
--- a/package.json
+++ b/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.0",
    "@playwright/test": "^1.51.1",
    "@rollup/plugin-json": "^6.1.0",
    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -32,6 +31,7 @@
    "@storybook/react-webpack5": "^10.1.10",
    "@stylistic/eslint-plugin": "^5.3.1",
    "@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",
@@ -43,7 +43,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 +80,10 @@
    "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: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 +94,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"
--- a/packages/bruno-app/jest.setup.js
+++ b/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: () => {}
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -86,7 +86,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",
--- a/packages/bruno-app/rsbuild.config.mjs
+++ b/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')
--- a/packages/bruno-app/src/components/AIAssist/StyledWrapper.js
+++ b/packages/bruno-app/src/components/AIAssist/StyledWrapper.js
@@ -0,0 +1,298 @@
+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;
+    }
+  }
+
+  .ai-assist-popup {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    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-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;
--- a/packages/bruno-app/src/components/AIAssist/index.js
+++ b/packages/bruno-app/src/components/AIAssist/index.js
@@ -0,0 +1,232 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import get from 'lodash/get';
+import { IconStars, IconX, IconArrowBackUp } from '@tabler/icons';
+import { aiGenerateScript } from 'utils/ai';
+import StyledWrapper 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' }
+  ]
+};
+
+const TITLES = {
+  'tests': 'Generate Tests',
+  'pre-request': 'Generate Pre-Request Script',
+  'post-response': 'Generate Post-Response Script'
+};
+
+const isValidType = (t) => SUGGESTIONS[t] !== undefined;
+
+const AIAssist = ({ scriptType, currentScript, requestContext, 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 buttonRef = useRef(null);
+
+  const focusOnMount = useCallback((el) => {
+    el?.focus();
+  }, []);
+
+  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 close = useCallback(() => {
+    setIsOpen(false);
+    setError(null);
+  }, []);
+
+  const attachPopup = useCallback((el) => {
+    if (!el) return undefined;
+    const onDocMouseDown = (e) => {
+      if (!el.contains(e.target) && !buttonRef.current?.contains(e.target)) {
+        close();
+      }
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') close();
+    };
+    document.addEventListener('mousedown', onDocMouseDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocMouseDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [close]);
+
+  const handleGenerate = useCallback(
+    async (overridePrompt) => {
+      const text = (overridePrompt ?? prompt).trim();
+      if (!text || isLoading) return;
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const result = await aiGenerateScript({
+          scriptType,
+          prompt: text,
+          currentScript: currentScript || '',
+          requestContext
+        });
+        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 {
+        setIsLoading(false);
+      }
+    },
+    [prompt, isLoading, scriptType, currentScript, requestContext]
+  );
+
+  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>
+      <button
+        ref={buttonRef}
+        className={`ai-assist-trigger ${isOpen ? 'open' : ''}`}
+        onClick={() => setIsOpen((v) => !v)}
+        title={title}
+        type="button"
+        aria-label={title}
+      >
+        <IconStars size={14} strokeWidth={1.75} />
+      </button>
+
+      {isOpen && (
+        <div ref={attachPopup} className="ai-assist-popup" role="dialog" aria-label={title}>
+          <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
+                  ref={focusOnMount}
+                  className="popup-input"
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                      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</span>
+                )}
+                <button
+                  className="btn-generate"
+                  type="button"
+                  onClick={() => handleGenerate()}
+                  disabled={!prompt.trim() || isLoading}
+                >
+                  Generate
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="popup-body">
+                <div className="preview-section">
+                  <span className="preview-label">Preview · replaces current script</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>
+            </>
+          )}
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default AIAssist;
--- a/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js
@@ -1,14 +1,75 @@
+import { memo } from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import StyledWrapper from './StyledWrapper';
+import { serializeBody } from './serializeBody';

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

-export default Swagger;
+export default memo(Swagger);
--- a/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/serializeBody.js
+++ b/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;
+  }
+};
--- a/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/serializeBody.spec.js
+++ b/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);
+    });
+  });
+});
--- a/packages/bruno-app/src/components/ApiSpecPanel/SpecViewer.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/SpecViewer.js
@@ -1,26 +1,31 @@
-import React, { useState, useEffect, Suspense } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useSelector } from 'react-redux';
-import { IconDeviceFloppy } from '@tabler/icons';
+import { IconDeviceFloppy, IconLoader2 } from '@tabler/icons';
 import CodeEditor from './FileEditor/CodeEditor/index';
 import Swagger from './Renderers/Swagger';
+import { useDragResize } from 'hooks/useDragResize';
+
+const MIN_LEFT_PANE_WIDTH = 300;
+const MIN_RIGHT_PANE_WIDTH = 450;

 /**
 * Shared split-pane spec viewer: CodeEditor (left) + Swagger preview (right).
 *
 * Props:
- *  - content    (string)   The spec content (YAML/JSON string)
- *  - readOnly   (boolean)  If true, editor is not editable and save icon is hidden
- *  - onSave     (function) Called with current editor content on save (editable mode only)
+ *  - content               (string)  The spec content (YAML/JSON string)
+ *  - readOnly              (boolean) If true, editor is not editable and save icon is hidden
+ *  - onSave                (fn)      Called with current editor content on save (editable mode only)
+ *  - leftPaneWidth         (number|null) Persisted left pane width in px; null = use 50/50 default
+ *  - onLeftPaneWidthChange (fn)      Persist the new width (called on mouseup / double-click / resize-clamp)
 */
-const SpecViewer = ({ content, readOnly, onSave }) => {
+const SpecViewer = ({ content, readOnly, onSave, leftPaneWidth, onLeftPaneWidthChange }) => {
  const { displayedTheme, theme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);

  const [editorContent, setEditorContent] = useState(content);

-  // Sync editor when saved content changes from outside (e.g. after save completes)
  useEffect(() => {
    setEditorContent(content);
  }, [content]);
@@ -31,38 +36,85 @@ const SpecViewer = ({ content, readOnly, onSave }) => {
    if (onSave) onSave(editorContent);
  };

+  const mainSectionRef = useRef(null);
+  const { dragging, dragWidth, dragbarProps } = useDragResize({
+    containerRef: mainSectionRef,
+    width: leftPaneWidth,
+    onWidthChange: onLeftPaneWidthChange,
+    minLeft: MIN_LEFT_PANE_WIDTH,
+    minRight: MIN_RIGHT_PANE_WIDTH
+  });
+
+  const effectiveWidth = dragging ? dragWidth : leftPaneWidth;
+  const leftPaneStyle = effectiveWidth != null
+    ? { width: `${effectiveWidth}px`, flexShrink: 0 }
+    : { flex: '1 1 50%', minWidth: 0 };
+
+  const [swaggerReady, setSwaggerReady] = useState(false);
+
+  useEffect(() => {
+    setSwaggerReady(false);
+  }, [content]);
+
+  const handleSwaggerComplete = useCallback(() => {
+    // Double rAF: wait for one full paint cycle so Swagger is actually on screen
+    // before hiding the loader — avoids a flash of unrendered content.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setSwaggerReady(true));
+    });
+  }, []);
+
  return (
-    <section className="main flex flex-grow pl-4 relative">
-      <div className="w-full grid grid-cols-2">
-        <div className="col-span-1">
-          <div className="flex flex-grow relative">
-            <CodeEditor
-              theme={displayedTheme}
-              value={readOnly ? content : editorContent}
-              readOnly={readOnly ? 'nocursor' : false}
-              onEdit={readOnly ? undefined : (val) => setEditorContent(val)}
-              onSave={readOnly ? undefined : handleSave}
-              mode="yaml"
-              font={get(preferences, 'font.codeFont', 'default')}
-            />
-            {!readOnly && onSave && (
-              <IconDeviceFloppy
-                onClick={handleSave}
-                color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
-                strokeWidth={1.5}
-                size={22}
-                className={`absolute right-0 top-0 m-4 ${
-                  hasChanges ? 'cursor-pointer opacity-100' : 'cursor-default opacity-50'
-                }`}
-              />
-            )}
+    <section
+      ref={mainSectionRef}
+      className={`main flex flex-grow pl-4 relative ${dragging ? 'dragging' : ''}`}
+    >
+      <div
+        className="api-spec-left-pane flex flex-grow relative h-full"
+        style={leftPaneStyle}
+      >
+        <CodeEditor
+          theme={displayedTheme}
+          value={readOnly ? content : editorContent}
+          readOnly={readOnly ? 'nocursor' : false}
+          onEdit={readOnly ? undefined : (val) => setEditorContent(val)}
+          onSave={readOnly ? undefined : handleSave}
+          mode="yaml"
+          font={get(preferences, 'font.codeFont', 'default')}
+        />
+        {!readOnly && onSave && (
+          <IconDeviceFloppy
+            onClick={handleSave}
+            color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
+            strokeWidth={1.5}
+            size={22}
+            className={`absolute right-0 top-0 m-4 ${
+              hasChanges ? 'cursor-pointer opacity-100' : 'cursor-default opacity-50'
+            }`}
+          />
+        )}
+      </div>
+      <div className="dragbar-wrapper" {...dragbarProps}>
+        <div className="dragbar-handle" />
+      </div>
+      <div
+        className="api-spec-right-pane relative"
+        style={{ flex: '1 1 50%', minWidth: 0 }}
+      >
+        <div style={{ visibility: swaggerReady ? 'visible' : 'hidden', height: '100%' }}>
+          <Swagger spec={content} onComplete={handleSwaggerComplete} />
+        </div>
+        {!swaggerReady && (
+          <div
+            className="absolute inset-0 flex items-center justify-center gap-2"
+            style={{ background: theme.bg }}
+          >
+            <div className="flex items-center justify-center gap-2 opacity-70">
+              <IconLoader2 size={20} className="animate-spin" />
+              <span>Generating preview…</span>
+            </div>
          </div>
-        </div>
-        <div className="col-span-1">
-          <Suspense fallback="">
-            <Swagger spec={content} />
-          </Suspense>
-        </div>
+        )}
      </div>
    </section>
  );
--- a/packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
@@ -17,6 +17,35 @@ const StyledWrapper = styled.div`
  .react-tooltip {
    z-index: 10;
  }
+
+  section.main.dragging {
+    cursor: col-resize;
+    user-select: none;
+  }
+
+  div.dragbar-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 10px;
+    min-width: 10px;
+    padding: 0;
+    cursor: col-resize;
+    background: transparent;
+    position: relative;
+    flex-shrink: 0;
+
+    div.dragbar-handle {
+      display: flex;
+      height: 100%;
+      width: 1px;
+      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
+    }
+
+    &:hover div.dragbar-handle {
+      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
+    }
+  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/ApiSpecPanel/index.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/index.js
@@ -1,11 +1,11 @@
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useRef, useCallback } from 'react';
 import find from 'lodash/find';
 import { useSelector, useDispatch } from 'react-redux';
 import { IconFileCode, IconDots } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 import SpecViewer from './SpecViewer';
 import Dropdown from 'components/Dropdown';
-import { openApiSpec, saveApiSpecToFile } from 'providers/ReduxStore/slices/apiSpec';
+import { openApiSpec, saveApiSpecToFile, updateApiSpecPanelLeftPaneWidth } from 'providers/ReduxStore/slices/apiSpec';
 import { useState } from 'react';
 import CreateApiSpec from 'components/Sidebar/ApiSpecs/CreateApiSpec';
 import toast from 'react-hot-toast';
@@ -21,7 +21,16 @@ const ApiSpecPanel = () => {
  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);

  let apiSpec = find(apiSpecs, (c) => c.uid === activeApiSpecUid);
-  const { filename, pathname, raw, uid } = apiSpec || {};
+  const { filename, pathname, raw, uid, leftPaneWidth } = apiSpec || {};
+
+  const handleLeftPaneWidthChange = useCallback(
+    (w) => {
+      if (!uid) return;
+      dispatch(updateApiSpecPanelLeftPaneWidth({ uid, leftPaneWidth: w }));
+    },
+    [dispatch, uid]
+  );
+
  if (!uid) {
    return <div className="p-4 opacity-50">API Spec not found!</div>;
  }
@@ -79,6 +88,8 @@ const ApiSpecPanel = () => {
      <SpecViewer
        content={raw}
        onSave={(content) => dispatch(saveApiSpecToFile({ uid, content }))}
+        leftPaneWidth={leftPaneWidth ?? null}
+        onLeftPaneWidthChange={handleLeftPaneWidthChange}
      />
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/AppTitleBar/index.js
+++ b/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);
    });
@@ -144,8 +152,10 @@ const AppTitleBar = () => {

  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');
    }
--- a/packages/bruno-app/src/components/AppTitleBar/index.spec.js
+++ b/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');
+    });
+  });
+});
--- a/packages/bruno-app/src/components/BulkEditor/index.js
+++ b/packages/bruno-app/src/components/BulkEditor/index.js
@@ -31,7 +31,7 @@ const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
        />
      </div>
      <div className="flex btn-action justify-between items-center mt-3">
-        <button className="text-link select-none ml-auto" onClick={onToggle}>
+        <button className="text-link select-none ml-auto" data-testid="key-value-edit-toggle" onClick={onToggle}>
          Key/Value Edit
        </button>
      </div>
--- a/packages/bruno-app/src/components/ChangelogTab/CHANGELOG.md
+++ b/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).
--- a/packages/bruno-app/src/components/ChangelogTab/StyledWrapper.js
+++ b/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;
--- a/packages/bruno-app/src/components/ChangelogTab/index.js
+++ b/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;
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -165,6 +165,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);
  }
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -6,7 +6,7 @@
 */

 import React, { createRef } from 'react';
-import { isEqual, escapeRegExp } from 'lodash';
+import { debounce, isEqual } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
@@ -16,7 +16,16 @@ import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
 import { setupLinkAware } from 'utils/codemirror/linkAware';
 import { setupLintErrorTooltip } from 'utils/codemirror/lint-errors';
+import { setupCodeMirrorResizeRefresh } from 'utils/codemirror/resize';
 import CodeMirrorSearch from 'components/CodeMirrorSearch/index';
+import {
+  applyEditorState,
+  captureEditorState,
+  getDocKey,
+  readPersistedEditorState,
+  writePersistedEditorState
+} from './state-persistence';
+import { usePersistenceScope } from 'hooks/usePersistedState/PersistedScopeProvider';

 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -24,7 +33,7 @@ window.JSHINT = JSHINT;

 const TAB_SIZE = 2;

-export default class CodeEditor extends React.Component {
+class CodeEditor extends React.Component {
  constructor(props) {
    super(props);

@@ -48,8 +57,24 @@ export default class CodeEditor extends React.Component {
    };
  }

+  // Thin wrapper around the pure getDocKey helper from state-persistence.js.
+  // Kept on the class so the rest of the lifecycle code reads naturally.
+  _getDocKey() {
+    return getDocKey(this.props);
+  }
+
  componentDidMount() {
    const variables = getAllVariables(this.props.collection, this.props.item);
+    /**
+     * No-op. We claim Cmd-Enter / Ctrl-Enter here only to suppress CodeMirror's
+     * sublime keymap default (insertLineAfter), which would otherwise insert a
+     * newline. sendRequest dispatch is owned by Mousetrap — the editor input has
+     * the `mousetrap` class (added below) so the global
+     * useKeybinding('sendRequest', …) in RequestTabPanel handles it, and only
+     * in request tabs. Falling through with CodeMirror.Pass when onRun is absent
+     * would re-introduce the newline in collection/folder-level editors.
+     */
+    const runShortcut = () => {};

    const editor = (this.editor = CodeMirror(this._node, {
      value: this.props.value || '',
@@ -84,8 +109,10 @@ export default class CodeEditor extends React.Component {
            this.searchBarRef.current?.focus();
          });
        },
-        'Cmd-H': 'replace',
-        'Ctrl-H': 'replace',
+        'Cmd-H': this.props.readOnly ? false : 'replace',
+        'Ctrl-H': this.props.readOnly ? false : 'replace',
+        'Cmd-Enter': runShortcut,
+        'Ctrl-Enter': runShortcut,
        'Tab': function (cm) {
          cm.getSelection().includes('\n') || editor.getLine(cm.getCursor().line) == cm.getSelection()
            ? cm.execCommand('indentMore')
@@ -175,9 +202,49 @@ export default class CodeEditor extends React.Component {
    });

    if (editor) {
+      // CM5 was constructed with props.value, so the editor already shows the
+      // right content. Read this tab's previously persisted view state from
+      // localStorage and apply it on top — restores folds, cursor, selection,
+      // undo history, and scroll position.
+      const docKey = getDocKey(this.props);
+      this._currentDocKey = docKey;
+      this.cachedValue = editor.getValue();
+      applyEditorState(
+        editor,
+        readPersistedEditorState({ scope: this.props.persistenceScope, key: docKey }),
+        this.cachedValue
+      );
+
      editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
      editor.on('change', this._onEdit);
+
+      // Persist view state immediately when the user folds or unfolds — without
+      // this, a fold only gets saved on the next tab switch / unmount. That
+      // makes the persistence feel "delayed" or random, especially across
+      // sub-tab switches that don't change the docKey or unmount the editor.
+      // Debounced so rapid fold/unfold (e.g. Cmd-Y to fold all) doesn't write
+      // to localStorage on every event.
+      this._persistViewStateDebounced = debounce(() => {
+        if (!this.editor || !this._currentDocKey) return;
+        writePersistedEditorState({
+          scope: this.props.persistenceScope,
+          key: this._currentDocKey,
+          state: captureEditorState(this.editor)
+        });
+      }, 250);
+      editor.on('fold', this._persistViewStateDebounced);
+      editor.on('unfold', this._persistViewStateDebounced);
+
      editor.scrollTo(null, this.props.initialScroll);
+      this._lastScrollTop = this.props.initialScroll || 0;
+      editor.on('scroll', () => {
+        const wrapper = editor.getWrapperElement();
+        if (wrapper && wrapper.offsetParent === null) return;
+        this._lastScrollTop = editor.getScrollInfo().top;
+        if (this.props.onScroll && typeof this.props.onScroll === 'function') {
+          this.props.onScroll(this._lastScrollTop);
+        }
+      });
      this.addOverlay();

      const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
@@ -203,6 +270,8 @@ export default class CodeEditor extends React.Component {
      if (cmInput) {
        cmInput.classList.add('mousetrap');
      }
+
+      this.cleanupResizeRefresh = setupCodeMirrorResizeRefresh(editor, this._node);
    }
  }

@@ -218,11 +287,52 @@ export default class CodeEditor extends React.Component {
      this.editor.options.jump.schema = this.props.schema;
      CodeMirror.signal(this.editor, 'change', this.editor);
    }
-    if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
-      const cursor = this.editor.getCursor();
-      this.cachedValue = String(this?.props?.value ?? '');
-      this.editor.setValue(String(this.props.value) || '');
-      this.editor.setCursor(cursor);
+    if (this.editor) {
+      // Two distinct update paths:
+      //   1. Doc key changed → tab switch → snapshot outgoing state, load new content, restore incoming state
+      //   2. Same doc, value changed → external content update → setValue (view state resets)
+      const newDocKey = getDocKey(this.props);
+      const docKeyChanged = newDocKey !== this._currentDocKey;
+
+      if (docKeyChanged) {
+        // Path 1 — tab switch.
+        // Snapshot the outgoing tab's view state to localStorage so a future
+        // visit can restore it. Then setValue the incoming content and apply
+        // any view state previously persisted for the incoming tab.
+        if (this._currentDocKey) {
+          writePersistedEditorState({
+            scope: this.props.persistenceScope,
+            key: this._currentDocKey,
+            state: captureEditorState(this.editor)
+          });
+        }
+        this.cachedValue = String(this?.props?.value ?? '');
+        this.editor.setValue(String(this.props.value) || '');
+        this._currentDocKey = newDocKey;
+        applyEditorState(
+          this.editor,
+          readPersistedEditorState({ scope: this.props.persistenceScope, key: newDocKey }),
+          this.cachedValue
+        );
+        // setValue resets the editor's mode-overlay state — re-apply the
+        // brunovariables overlay and re-evaluate lint config for the new content.
+        this.addOverlay();
+        this.editor.setOption(
+          'lint',
+          this.props.mode && this.editor.getValue().trim().length > 0 ? this.lintOptions : false
+        );
+      } else if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue) {
+        // Path 2 — same tab, new external value (e.g. a fresh response arrived
+        // while this tab was active). Update content; view state resets because
+        // line positions no longer correspond to anything. Invalidate the
+        // persisted snapshot too, since the saved cursor/folds/history reflect
+        // the prior content.
+        const cursor = this.editor.getCursor();
+        this.cachedValue = String(this?.props?.value ?? '');
+        this.editor.setValue(String(this.props.value) || '');
+        this.editor.setCursor(cursor);
+        writePersistedEditorState({ scope: this.props.persistenceScope, key: this._currentDocKey, state: null });
+      }
    }

    if (this.editor) {
@@ -268,14 +378,34 @@ export default class CodeEditor extends React.Component {
  componentWillUnmount() {
    if (this.editor) {
      if (this.props.onScroll) {
-        this.props.onScroll(this.editor);
+        this.props.onScroll(this._lastScrollTop);
+      }
+
+      // Snapshot view state to localStorage before tearing down the editor so
+      // the next mount of a CodeEditor with this docKey can restore folds,
+      // cursor, selection, undo history, and scroll position.
+      if (this._currentDocKey) {
+        writePersistedEditorState({
+          scope: this.props.persistenceScope,
+          key: this._currentDocKey,
+          state: captureEditorState(this.editor)
+        });
      }

      this.editor?._destroyLinkAware?.();
      this.editor.off('change', this._onEdit);

+      // Tear down the debounced fold-persistence listener. Cancel any pending
+      // call so it can't fire after we've already snapshotted state above.
+      if (this._persistViewStateDebounced) {
+        this.editor.off('fold', this._persistViewStateDebounced);
+        this.editor.off('unfold', this._persistViewStateDebounced);
+        this._persistViewStateDebounced.cancel?.();
+      }
+
      // Clean up lint error tooltip
      this.cleanupLintErrorTooltip?.();
+      this.cleanupResizeRefresh?.();

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

  return (
    <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
+      <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>
--- a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
@@ -1,8 +1,10 @@
 import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
+import find from 'lodash/find';
 import { updateCollectionDocs, deleteCollectionDraft } from 'providers/ReduxStore/slices/collections';
+import { updateDocsEditing } from 'providers/ReduxStore/slices/tabs';
 import { useTheme } from 'providers/Theme';
-import { useState } from 'react';
+import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
@@ -11,16 +13,27 @@ import StyledWrapper from './StyledWrapper';
 import { IconEdit, IconX, IconFileText } from '@tabler/icons';
 import Button from 'ui/Button/index';
 import ActionIcon from 'ui/ActionIcon/index';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useTrackScroll } from 'hooks/useTrackScroll';

 const Docs = ({ collection }) => {
  const dispatch = useDispatch();
  const { displayedTheme } = useTheme();
-  const [isEditing, setIsEditing] = useState(false);
+  const tabs = useSelector((state) => state.tabs.tabs);
+  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  const isEditing = focusedTab?.docsEditing || false;
  const docs = collection.draft?.root ? get(collection, 'draft.root.docs', '') : get(collection, 'root.docs', '');
  const preferences = useSelector((state) => state.app.preferences);

+  // StyledWrapper has overflow-y: auto — use null selector.
+  // Preview mode: hook tracks wrapper scroll. Edit mode: CodeEditor's onScroll/initialScroll.
+  const wrapperRef = useRef(null);
+  const [scroll, setScroll] = usePersistedState({ key: `collection-docs-scroll-${collection.uid}`, default: 0 });
+  useTrackScroll({ ref: wrapperRef, onChange: setScroll, enabled: !isEditing, initialValue: scroll });
+
  const toggleViewMode = () => {
-    setIsEditing((prev) => !prev);
+    dispatch(updateDocsEditing({ uid: activeTabUid, docsEditing: !isEditing }));
  };

  const onEdit = (value) => {
@@ -48,7 +61,7 @@ const Docs = ({ collection }) => {
  };

  return (
-    <StyledWrapper className="h-full w-full relative flex flex-col">
+    <StyledWrapper className="h-full w-full relative flex flex-col" ref={wrapperRef}>
      <div className="flex flex-row w-full justify-between items-center mb-4">
        <div className="text-lg font-medium flex items-center gap-2">
          <IconFileText size={20} strokeWidth={1.5} />
@@ -81,9 +94,11 @@ const Docs = ({ collection }) => {
          mode="application/text"
          font={get(preferences, 'font.codeFont', 'default')}
          fontSize={get(preferences, 'font.codeFontSize')}
+          initialScroll={scroll}
+          onScroll={setScroll}
        />
      ) : (
-        <div className="h-full overflow-auto pl-1">
+        <div className="pl-1">
          <div className="h-[1px] min-h-[500px]">
            {
              docs?.length > 0
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme';
@@ -13,6 +13,8 @@ import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
 import Button from 'ui/Button';
 import { headerNameRegex, headerValueRegex } from 'utils/common/regex';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useTrackScroll } from 'hooks/useTrackScroll';

 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

@@ -25,6 +27,9 @@ const Headers = ({ collection }) => {
    ? get(collection, 'draft.root.request.headers', [])
    : get(collection, 'root.request.headers', []);
  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+  const wrapperRef = useRef(null);
+  const [scroll, setScroll] = usePersistedState({ key: `collection-headers-scroll-${collection.uid}`, default: 0 });
+  useTrackScroll({ ref: wrapperRef, selector: '.collection-settings-content', onChange: setScroll, initialValue: scroll });

  // Get column widths from Redux
  const focusedTab = tabs?.find((t) => t.uid === activeTabUid);
@@ -120,7 +125,7 @@ const Headers = ({ collection }) => {
  }

  return (
-    <StyledWrapper className="h-full w-full">
+    <StyledWrapper className="h-full w-full" ref={wrapperRef}>
      <div className="text-xs mb-4 text-muted">
        Add request headers that will be sent with every request in this collection.
      </div>
@@ -133,9 +138,10 @@ const Headers = ({ collection }) => {
        getRowError={getRowError}
        columnWidths={collectionHeadersWidths}
        onColumnWidthsChange={(widths) => handleColumnWidthsChange('collection-headers', widths)}
+        initialScroll={scroll}
      />
      <div className="flex justify-end mt-2">
-        <button className="text-link select-none" onClick={toggleBulkEditMode}>
+        <button className="text-link select-none" data-testid="bulk-edit-toggle" onClick={toggleBulkEditMode}>
          Bulk Edit
        </button>
      </div>
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
@@ -8,10 +8,12 @@ const Overview = ({ collection }) => {
  return (
    <div className="h-full">
      <div className="grid grid-cols-5 gap-5 h-full">
-        <div className="col-span-2">
-          <div className="text-lg font-medium flex items-center gap-2">
-            <IconBox size={20} stroke={1.5} />
-            {collection?.name}
+        <div className="col-span-2 overflow-clip text-ellipsis">
+          <div className="flex gap-2 items-center min-w-0">
+            <IconBox size={20} stroke={1.5} className="flex-shrink-0" />
+            <span className="overflow-hidden text-lg font-medium whitespace-nowrap text-ellipsis">
+              {collection?.name}
+            </span>
          </div>
          <Info collection={collection} />
          <RequestsNotLoaded collection={collection} />
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
+++ b/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>
--- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@@ -3,6 +3,7 @@ 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 { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { updateScriptPaneTab } from 'providers/ReduxStore/slices/tabs';
@@ -12,6 +13,8 @@ import StatusDot from 'components/StatusDot';
 import { flattenItems, isItemARequest } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';

 const Script = ({ collection }) => {
  const dispatch = useDispatch();
@@ -38,19 +41,40 @@ const Script = ({ collection }) => {
  const { displayedTheme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);

-  // Refresh CodeMirror when tab becomes visible
+  const [preReqScroll, setPreReqScroll] = usePersistedState({ key: `collection-pre-req-scroll-${collection.uid}`, default: 0 });
+  const [postResScroll, setPostResScroll] = usePersistedState({ key: `collection-post-res-scroll-${collection.uid}`, default: 0 });
+
+  // Refresh CodeMirror when tab becomes visible and restore scroll position.
+  // CodeMirror's scrollTo() is silently ignored when the editor is inside a display:none container
+  // (TabsContent hides inactive tabs via display:none). After refresh() recalculates layout, we re-apply scrollTo().
  useEffect(() => {
    const timer = setTimeout(() => {
      if (activeTab === 'pre-request' && preRequestEditorRef.current?.editor) {
        preRequestEditorRef.current.editor.refresh();
+        preRequestEditorRef.current.editor.scrollTo(null, preReqScroll);
      } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
        postResponseEditorRef.current.editor.refresh();
+        postResponseEditorRef.current.editor.scrollTo(null, postResScroll);
      }
    }, 0);

    return () => clearTimeout(timer);
  }, [activeTab]);

+  useFocusErrorLine({
+    uid: collection.uid,
+    editorRef: preRequestEditorRef,
+    scriptPhase: 'pre-request',
+    isVisible: activeTab === 'pre-request'
+  });
+
+  useFocusErrorLine({
+    uid: collection.uid,
+    editorRef: postResponseEditorRef,
+    scriptPhase: 'post-response',
+    isVisible: activeTab === 'post-response'
+  });
+
  const onRequestScriptEdit = (value) => {
    dispatch(
      updateCollectionRequestScript({
@@ -99,34 +123,54 @@ const Script = ({ collection }) => {
          </TabsTrigger>
        </TabsList>

-        <TabsContent value="pre-request" className="mt-2">
-          <CodeEditor
-            ref={preRequestEditorRef}
-            collection={collection}
-            value={requestScript || ''}
-            theme={displayedTheme}
-            onEdit={onRequestScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'bru']}
-          />
+        <TabsContent value="pre-request" className="mt-2" dataTestId="collection-pre-request-script-editor">
+          <div className="relative h-full">
+            <CodeEditor
+              ref={preRequestEditorRef}
+              collection={collection}
+              docKey="collection-script:pre-request"
+              value={requestScript || ''}
+              theme={displayedTheme}
+              onEdit={onRequestScriptEdit}
+              mode="javascript"
+              onSave={handleSave}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              showHintsFor={['req', 'bru']}
+              initialScroll={preReqScroll}
+              onScroll={setPreReqScroll}
+            />
+            <AIAssist
+              scriptType="pre-request"
+              currentScript={requestScript || ''}
+              onApply={onRequestScriptEdit}
+            />
+          </div>
        </TabsContent>

-        <TabsContent value="post-response" className="mt-2">
-          <CodeEditor
-            ref={postResponseEditorRef}
-            collection={collection}
-            value={responseScript || ''}
-            theme={displayedTheme}
-            onEdit={onResponseScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'res', 'bru']}
-          />
+        <TabsContent value="post-response" className="mt-2" dataTestId="collection-post-response-script-editor">
+          <div className="relative h-full">
+            <CodeEditor
+              ref={postResponseEditorRef}
+              collection={collection}
+              docKey="collection-script:post-response"
+              value={responseScript || ''}
+              theme={displayedTheme}
+              onEdit={onResponseScriptEdit}
+              mode="javascript"
+              onSave={handleSave}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              showHintsFor={['req', 'res', 'bru']}
+              initialScroll={postResScroll}
+              onScroll={setPostResScroll}
+            />
+            <AIAssist
+              scriptType="post-response"
+              currentScript={responseScript || ''}
+              onApply={onResponseScriptEdit}
+            />
+          </div>
        </TabsContent>
      </Tabs>

--- a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
@@ -1,19 +1,24 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
+import AIAssist from 'components/AIAssist';
 import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';

 const Tests = ({ collection }) => {
  const dispatch = useDispatch();
+  const testsEditorRef = useRef(null);
  const tests = collection.draft?.root ? get(collection, 'draft.root.request.tests', '') : get(collection, 'root.request.tests', '');

  const { displayedTheme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);
+  const [testsScroll, setTestsScroll] = usePersistedState({ key: `collection-tests-scroll-${collection.uid}`, default: 0 });

  const onEdit = (value) => {
    dispatch(
@@ -26,20 +31,33 @@ const Tests = ({ collection }) => {

  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));

+  useFocusErrorLine({
+    uid: collection.uid,
+    editorRef: testsEditorRef,
+    scriptPhase: 'test'
+  });
+
  return (
    <StyledWrapper className="w-full flex flex-col h-full">
      <div className="text-xs mb-4 text-muted">These tests will run any time a request in this collection is sent.</div>
-      <CodeEditor
-        collection={collection}
-        value={tests || ''}
-        theme={displayedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onSave={handleSave}
-        font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
-        showHintsFor={['req', 'res', 'bru']}
-      />
+      <div className="relative h-full">
+        <CodeEditor
+          ref={testsEditorRef}
+          collection={collection}
+          docKey="collection-tests"
+          value={tests || ''}
+          theme={displayedTheme}
+          onEdit={onEdit}
+          mode="javascript"
+          onSave={handleSave}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'res', 'bru']}
+          initialScroll={testsScroll}
+          onScroll={setTestsScroll}
+        />
+        <AIAssist scriptType="tests" currentScript={tests || ''} onApply={onEdit} />
+      </div>

      <div className="mt-6">
        <Button type="submit" size="sm" onClick={handleSave}>
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/index.js
@@ -5,13 +5,15 @@ 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';
 import { variableNameRegex } from 'utils/common/regex';
 import { setCollectionVars } from 'providers/ReduxStore/slices/collections/index';

-const VarsTable = ({ collection, vars, varType }) => {
+const VarsTable = ({ collection, vars, varType, initialScroll = 0 }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();
  const tabs = useSelector((state) => state.tabs.tabs);
@@ -57,15 +59,31 @@ const VarsTable = ({ collection, vars, varType }) => {
        </div>
      ),
      placeholder: varType === 'request' ? 'Value' : 'Expr',
-      render: ({ value, onChange }) => (
-        <MultiLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={onSave}
-          onChange={onChange}
-          collection={collection}
-          placeholder={!value ? (varType === 'request' ? 'Value' : 'Expr') : ''}
-        />
+      render: ({ row, value, onChange, isLastEmptyRow }) => (
+        <div className="flex items-center w-full gap-2">
+          <div className="flex-1 min-w-0">
+            <MultiLineEditor
+              value={valueToString(value)}
+              theme={storedTheme}
+              onSave={onSave}
+              onChange={onChange}
+              collection={collection}
+              placeholder={value == null || (typeof value === 'string' && value.trim() === '') ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+            />
+          </div>
+          {/* DataTypes apply to literal values, not to the JS expression that produces a post-response value. */}
+          {!isLastEmptyRow && varType === 'request' && (
+            <DataTypeSelector
+              variable={row}
+              theme={storedTheme}
+              collection={collection}
+              onChange={(fields) => {
+                const updated = (vars || []).map((v) => v.uid === row.uid ? { ...v, ...fields } : v);
+                handleVarsChange(updated);
+              }}
+            />
+          )}
+        </div>
      )
    }
  ];
@@ -80,6 +98,7 @@ const VarsTable = ({ collection, vars, varType }) => {
    <StyledWrapper className="w-full">
      <EditableTable
        tableId="collection-vars"
+        testId={`collection-vars-${varType === 'response' ? 'res' : 'req'}`}
        columns={columns}
        rows={vars}
        onChange={handleVarsChange}
@@ -87,6 +106,7 @@ const VarsTable = ({ collection, vars, varType }) => {
        getRowError={getRowError}
        columnWidths={collectionVarsWidths}
        onColumnWidthsChange={(widths) => handleColumnWidthsChange('collection-vars', widths)}
+        initialScroll={initialScroll}
      />
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/index.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import get from 'lodash/get';
 import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
 import Button from 'ui/Button';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useTrackScroll } from 'hooks/useTrackScroll';

 const Vars = ({ collection }) => {
  const dispatch = useDispatch();
@@ -12,15 +14,19 @@ const Vars = ({ collection }) => {
  const responseVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));

+  const wrapperRef = useRef(null);
+  const [scroll, setScroll] = usePersistedState({ key: `collection-vars-scroll-${collection.uid}`, default: 0 });
+  useTrackScroll({ ref: wrapperRef, selector: '.collection-settings-content', onChange: setScroll, initialValue: scroll });
+
  return (
-    <StyledWrapper className="w-full flex flex-col">
+    <StyledWrapper className="w-full flex flex-col" ref={wrapperRef}>
      <div className="flex-1">
        <div className="mb-3 title text-xs">Pre Request</div>
-        <VarsTable collection={collection} vars={requestVars} varType="request" />
+        <VarsTable collection={collection} vars={requestVars} varType="request" initialScroll={scroll} />
      </div>
      <div className="flex-1">
        <div className="mt-3 mb-3 title text-xs">Post Response</div>
-        <VarsTable collection={collection} vars={responseVars} varType="response" />
+        <VarsTable collection={collection} vars={responseVars} varType="response" initialScroll={scroll} />
      </div>
      <div className="mt-6">
        <Button type="submit" size="sm" onClick={handleSave}>
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/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) {
@@ -146,7 +147,7 @@ const CollectionSettings = ({ collection }) => {
          {protobufConfig.protoFiles && protobufConfig.protoFiles.length > 0 && <StatusDot />}
        </div>
      </div>
-      <section className="mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
+      <section className="collection-settings-content mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/DataTypeSelector/StyledWrapper.js
+++ b/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;
--- a/packages/bruno-app/src/components/DataTypeSelector/index.js
+++ b/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);
--- a/packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js
@@ -69,13 +69,22 @@ const StyledWrapper = styled.div`
    height: 100%;
    overflow: hidden;
    min-height: 0; /* Important for proper flex behavior */
+    position: relative;
+  }
+
+  .col-separator {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: ${(props) => props.theme.console.border};
+    pointer-events: none;
+    z-index: 2;
  }

  .requests-header {
    display: grid;
-    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
-    gap: 12px;
-    padding: 4px 16px;
+    padding: 0;
    background: ${(props) => props.theme.console.headerBg};
    border-bottom: 1px solid ${(props) => props.theme.console.border};
    font-size: 10px;
@@ -83,6 +92,39 @@ const StyledWrapper = styled.div`
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
+
+    .header-cell {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      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 {
@@ -94,9 +136,7 @@ const StyledWrapper = styled.div`

  .request-row {
    display: grid;
-    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
-    gap: 12px;
-    padding: 2px 16px;
+    padding: 0;
    cursor: pointer;
    transition: background-color 0.1s ease;
    font-size: ${(props) => props.theme.font.size.sm};
@@ -107,12 +147,19 @@ const StyledWrapper = styled.div`
    }

    &.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};
    }
  }

+  .request-method {
+    padding: 2px 8px 2px 16px;
+  }
+
+  .request-status {
+    padding: 2px 8px;
+  }
+
  .method-badge {
    display: inline-flex;
    align-items: center;
@@ -128,6 +175,7 @@ const StyledWrapper = styled.div`
  }

  .request-domain {
+    padding: 2px 8px;
    color: ${(props) => props.theme.console.messageColor};
    overflow: hidden;
    text-overflow: ellipsis;
@@ -135,6 +183,7 @@ const StyledWrapper = styled.div`
  }

  .request-path {
+    padding: 2px 8px;
    color: ${(props) => props.theme.console.messageColor};
    overflow: hidden;
    text-overflow: ellipsis;
@@ -143,19 +192,26 @@ 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};
  }

  .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;
  }

+  .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};
--- a/packages/bruno-app/src/components/Devtools/Console/NetworkTab/index.js
+++ b/packages/bruno-app/src/components/Devtools/Console/NetworkTab/index.js
@@ -1,12 +1,26 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import {
-  IconNetwork
+  IconNetwork,
+  IconArrowUp,
+  IconArrowDown
 } from '@tabler/icons';
 import {
  setSelectedRequest
 } from 'providers/ReduxStore/slices/logs';
 import StyledWrapper from './StyledWrapper';
+import { getGridTemplate, getSeparatorPositions, sortRequests } from './utils';
+
+// TODO: Columns will be resizable in the future, so width can be null (for auto) or a number (for fixed width)
+const COLUMNS = [
+  { key: 'method', label: 'Method', width: 90, align: 'left' },
+  { key: 'status', label: 'Status', width: 80, align: 'left' },
+  { key: 'domain', label: 'Domain', width: 200, align: 'left' },
+  { key: 'path', label: 'Path', width: null, align: 'left' },
+  { key: 'time', label: 'Time', width: 100, align: 'left' },
+  { key: 'duration', label: 'Duration', width: 120, align: 'right' },
+  { key: 'size', label: 'Size', width: 80, align: 'right' }
+];

 const MethodBadge = ({ method }) => {
  const methodLower = method?.toLowerCase() || 'get';
@@ -28,7 +42,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 +96,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,6 +133,9 @@ const RequestRow = ({ request, isSelected, onClick }) => {

 const NetworkTab = () => {
  const dispatch = useDispatch();
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: null });
+  const gridTemplateColumns = useMemo(() => getGridTemplate(COLUMNS), []);
+  const separatorPositions = useMemo(() => getSeparatorPositions(COLUMNS), []);
  const { networkFilters, selectedRequest } = useSelector((state) => state.logs);
  const collections = useSelector((state) => state.collections.collections);

@@ -150,6 +170,21 @@ const NetworkTab = () => {
    dispatch(setSelectedRequest(request));
  };

+  const handleHeaderClick = (key) => {
+    setSortConfig((prev) => {
+      // If clicking a different column, start with ascending sort
+      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">
@@ -161,26 +196,45 @@ const NetworkTab = () => {
          </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-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) => (
+              {sortedRequests.map((request, index) => (
                <RequestRow
                  key={`${request.collectionUid}-${request.itemUid}-${request.timestamp}-${index}`}
                  request={request}
                  isSelected={selectedRequest?.timestamp === request.timestamp && selectedRequest?.itemUid === request.itemUid}
                  onClick={() => handleRequestClick(request)}
+                  gridTemplateColumns={gridTemplateColumns}
                />
              ))}
            </div>
+
+            {separatorPositions.map((pos, i) =>
+              pos ? (
+                <div
+                  key={i}
+                  className="col-separator"
+                  style={'left' in pos ? { left: `${pos.left}px` } : { right: `${pos.right}px` }}
+                />
+              ) : null
+            )}
          </div>
        )}
      </div>
--- a/packages/bruno-app/src/components/Devtools/Console/NetworkTab/index.spec.js
+++ b/packages/bruno-app/src/components/Devtools/Console/NetworkTab/index.spec.js
@@ -0,0 +1,179 @@
+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 };
+
+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>
+  );
+};
+
+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('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']);
+  });
+});
--- a/packages/bruno-app/src/components/Devtools/Console/NetworkTab/utils.js
+++ b/packages/bruno-app/src/components/Devtools/Console/NetworkTab/utils.js
@@ -0,0 +1,57 @@
+export const getGridTemplate = (columns) =>
+  columns.map((c) => (c.width ? `${c.width}px` : '1fr')).join(' ');
+
+export const getSeparatorPositions = (columns) => {
+  const n = columns.length;
+  const positions = new Array(n - 1).fill(null);
+
+  let leftOffset = 0;
+  for (let i = 0; i < n - 1; i++) {
+    if (columns[i].width === null) break;
+    leftOffset += columns[i].width;
+    positions[i] = { left: leftOffset };
+  }
+
+  let rightOffset = 0;
+  for (let i = n - 1; i > 0; i--) {
+    if (columns[i].width === null) break;
+    rightOffset += columns[i].width;
+    if (positions[i - 1] === null) {
+      positions[i - 1] = { right: rightOffset };
+    }
+  }
+
+  return positions;
+};
+
+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;
+  });
+};
--- a/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
+++ b/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 {
--- a/packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js
+++ b/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;
--- a/packages/bruno-app/src/components/Devtools/Console/index.js
+++ b/packages/bruno-app/src/components/Devtools/Console/index.js
@@ -23,7 +23,8 @@ import {
  setActiveTab,
  clearDebugErrors,
  updateNetworkFilter,
-  toggleAllNetworkFilters
+  toggleAllNetworkFilters,
+  updateRequestDetailsPanelWidth
 } from 'providers/ReduxStore/slices/logs';

 import NetworkTab from './NetworkTab';
@@ -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 = useSelector((state) => state.logs.requestDetailsPanelWidth);
  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) => dispatch(updateRequestDetailsPanelWidth({ requestDetailsPanelWidth: 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">
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@@ -4,12 +4,14 @@ 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 { useState } from 'react';
+import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useTrackScroll } from 'hooks/useTrackScroll';

 const Documentation = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -21,6 +23,10 @@ const Documentation = ({ item, collection }) => {
  const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
  const preferences = useSelector((state) => state.app.preferences);

+  const wrapperRef = useRef(null);
+  const [scroll, setScroll] = usePersistedState({ key: `request-docs-scroll-${item.uid}`, default: 0 });
+  useTrackScroll({ ref: wrapperRef, onChange: setScroll, enabled: !isEditing, initialValue: scroll });
+
  const toggleViewMode = () => {
    dispatch(updateDocsEditing({ uid: activeTabUid, docsEditing: !isEditing }));
  };
@@ -42,7 +48,7 @@ const Documentation = ({ item, collection }) => {
  }

  return (
-    <StyledWrapper className="flex flex-col gap-y-1 h-full w-full relative">
+    <StyledWrapper className="flex flex-col gap-y-1 h-full w-full relative" ref={wrapperRef}>
      <div className="editing-mode" role="tab" onClick={toggleViewMode}>
        {isEditing ? 'Preview' : 'Edit'}
      </div>
@@ -57,6 +63,8 @@ const Documentation = ({ item, collection }) => {
          onEdit={onEdit}
          onSave={onSave}
          mode="application/text"
+          initialScroll={scroll}
+          onScroll={setScroll}
        />
      ) : (
        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -179,6 +179,17 @@ const Wrapper = styled.div`
    }
  }

+  .breadcrumb-collapsed-dropdown {
+    max-width: 250px;
+  }
+
+  .breadcrumb-collapsed-item {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
  .dropdown-separator {
    height: 1px;
    background-color: ${(props) => props.theme.dropdown.separator};
--- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
@@ -1,10 +1,9 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
+  display: block;
+  width: 100%;
+  isolation: isolate;

  &.is-resizing {
    cursor: col-resize !important;
@@ -12,9 +11,9 @@ const StyledWrapper = styled.div`
  }

  .table-container {
-    overflow: auto;
    border-radius: ${(props) => props.theme.border.radius.base};
    border: solid 1px ${(props) => props.theme.border.border0};
+    overflow: clip;
  }

  table {
@@ -80,6 +79,8 @@ const StyledWrapper = styled.div`

  tbody {
    tr {
+      height: 35px;
+      max-height: 35px;
      transition: background 0.1s ease;

      &:last-child td {
@@ -87,6 +88,8 @@ const StyledWrapper = styled.div`
      }

      td {
+        height: 35px;
+        max-height: 35px;
        padding: 1px 10px !important;
        border-top: none !important;
        border-left: none !important;
@@ -96,17 +99,23 @@ const StyledWrapper = styled.div`
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
+        box-sizing: border-box;

-        &:last-child {
-          border-right: none;
+        > div:not(.drag-handle) {
+          height: 33px;
+          max-height: 33px;
+          overflow: hidden;
        }

        /* Handle CodeMirror editors overflow */
        .cm-editor {
          max-width: 100%;
+          height: 33px !important;
+          max-height: 33px !important;

          .cm-scroller {
            overflow: hidden !important;
+            max-height: 33px;
          }

          .cm-content {
@@ -185,12 +194,23 @@ const StyledWrapper = styled.div`
  }

  .drag-handle {
+    opacity: 0;
+    transition: opacity 0.1s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
    .icon-grip,
    .icon-minus {
      color: ${(props) => props.theme.colors.text.muted};
    }
  }

+  tbody tr:hover .drag-handle,
+  tbody tr.drag-over .drag-handle {
+    opacity: 1;
+  }
+
  select {
    background-color: transparent;
    color: ${(props) => props.theme.text};
--- a/packages/bruno-app/src/components/EditableTable/index.js
+++ b/packages/bruno-app/src/components/EditableTable/index.js
@@ -1,10 +1,51 @@
-import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
 import { IconTrash, IconAlertCircle, IconGripVertical, IconMinusVertical } from '@tabler/icons';
 import { Tooltip } from 'react-tooltip';
 import { uuid } from 'utils/common';
 import StyledWrapper from './StyledWrapper';

 const MIN_COLUMN_WIDTH = 80;
+const ROW_HEIGHT = 35;
+
+const findScrollParent = (element) => {
+  let parent = element?.parentElement;
+  while (parent) {
+    const { overflowY } = getComputedStyle(parent);
+    if (overflowY === 'auto' || overflowY === 'scroll') return parent;
+    parent = parent.parentElement;
+  }
+  return null;
+};
+
+const TableRow = React.memo(
+  ({ children, item, context, ...rest }) => {
+    const rowIndex = Number(rest['data-item-index']);
+    const { reorderable, reorderableRowCount, isLastEmptyRow, dragOverRow, onDragStart, onDragOver, onDrop, onDragEnd, onDragLeave, keyColumn } = context;
+    const 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}
+        onDragLeave={canDrag ? (e) => onDragLeave(e, rowIndex) : undefined}
+        onDrop={canDrag ? (e) => onDrop(e, rowIndex) : undefined}
+        onDragEnd={canDrag ? onDragEnd : undefined}
+      >
+        {children}
+      </tr>
+    );
+  }
+);

 const EditableTable = ({
  tableId, // Not being used kept to maintain uniqueness & pass similar in onColumnWidthsChange
@@ -23,15 +64,27 @@ const EditableTable = ({
  showAddRow = true,
  testId = 'editable-table',
  columnWidths,
+  initialScroll = 0,
  onColumnWidthsChange
 }) => {
-  const tableRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const virtuosoRef = useRef(null);
  const emptyRowUidRef = useRef(null);
-  const [hoveredRow, setHoveredRow] = useState(null);
+  const prevRowCountRef = useRef(0);
  const [resizing, setResizing] = useState(null);
  const [tableHeight, setTableHeight] = useState(0);
+  const [scrollParent, setScrollParent] = useState(null);
+  const [dragOverRow, setDragOverRow] = useState(null);
  const widths = columnWidths || {};

+  useLayoutEffect(() => {
+    setScrollParent(findScrollParent(wrapperRef.current));
+  }, []);
+
+  const handleTotalHeightChanged = useCallback((h) => {
+    setTableHeight(h);
+  }, []);
+
  const handleColumnWidthsChange = useCallback((newWidths) => {
    onColumnWidthsChange?.(newWidths);
  }, [onColumnWidthsChange]);
@@ -71,7 +124,7 @@ const EditableTable = ({

    const handleMouseUp = () => {
      // Convert pixel widths to percentages for responsive scaling
-      const table = tableRef.current?.querySelector('table');
+      const table = wrapperRef.current?.querySelector('table');
      if (table) {
        const tableWidth = table.offsetWidth;
        const headerCells = table.querySelectorAll('thead td');
@@ -103,23 +156,6 @@ const EditableTable = ({
    document.addEventListener('mouseup', handleMouseUp);
  }, [columns, showCheckbox, widths, handleColumnWidthsChange]);

-  // Track table height for resize handles
-  useEffect(() => {
-    const table = tableRef.current?.querySelector('table');
-    if (!table) return;
-
-    const updateHeight = () => {
-      setTableHeight(table.offsetHeight);
-    };
-
-    updateHeight();
-
-    const resizeObserver = new ResizeObserver(updateHeight);
-    resizeObserver.observe(table);
-
-    return () => resizeObserver.disconnect();
-  }, [rows.length]);
-
  const getColumnWidth = useCallback((column) => {
    return widths[column.key] || column.width || 'auto';
  }, [widths]);
@@ -134,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;
@@ -143,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)) {
@@ -164,69 +206,45 @@ 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;
    return index === rowsWithEmpty.length - 1 && isEmptyRow(row);
  }, [rowsWithEmpty.length, isEmptyRow, showAddRow]);

+  useEffect(() => {
+    if (rowsWithEmpty.length > prevRowCountRef.current && prevRowCountRef.current > 0) {
+      virtuosoRef.current?.scrollToIndex({
+        index: rowsWithEmpty.length - 1,
+        behavior: 'smooth'
+      });
+    }
+    prevRowCountRef.current = rowsWithEmpty.length;
+  }, [rowsWithEmpty.length]);
+
  const handleValueChange = useCallback((rowUid, key, value) => {
    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);
@@ -245,28 +263,31 @@ const EditableTable = ({
  const handleDragOver = useCallback((e, index) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
-    setHoveredRow(index);
+    setDragOverRow((prev) => (prev === index ? prev : index));
  }, []);

+  const handleDragLeave = useCallback((e, index) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setDragOverRow((prev) => (prev === index ? null : prev));
+  }, []);
+
+  const reorderableRowCount = showAddRow ? rowsWithEmpty.length - 1 : rowsWithEmpty.length;
+
  const handleDrop = useCallback((e, toIndex) => {
    e.preventDefault();
+    setDragOverRow(null);
    const fromIndex = parseInt(e.dataTransfer.getData('text/plain'), 10);
-    if (fromIndex !== toIndex && onReorder) {
-      const reorderableRows = showAddRow ? rowsWithEmpty.slice(0, -1) : rowsWithEmpty;
-      const updatedOrder = [...reorderableRows];
-      const [movedRow] = updatedOrder.splice(fromIndex, 1);
-      if (!movedRow) {
-        setHoveredRow(null);
-        return;
-      }
-      updatedOrder.splice(toIndex, 0, movedRow);
-      onReorder({ updateReorderedItem: updatedOrder.map((row) => row.uid) });
-    }
-    setHoveredRow(null);
+    if (fromIndex === toIndex || !onReorder) return;
+    const reorderableRows = showAddRow ? rowsWithEmpty.slice(0, -1) : rowsWithEmpty;
+    const updatedOrder = [...reorderableRows];
+    const [movedRow] = updatedOrder.splice(fromIndex, 1);
+    if (!movedRow) return;
+    updatedOrder.splice(toIndex, 0, movedRow);
+    onReorder({ updateReorderedItem: updatedOrder.map((row) => row.uid) });
  }, [onReorder, rowsWithEmpty, showAddRow]);

  const handleDragEnd = useCallback(() => {
-    setHoveredRow(null);
+    setDragOverRow(null);
  }, []);

  const renderCell = useCallback((column, row, rowIndex) => {
@@ -323,109 +344,127 @@ const EditableTable = ({
    );
  }, [isLastEmptyRow, getRowError, handleValueChange]);

-  const reorderableRowCount = showAddRow ? rowsWithEmpty.length - 1 : rowsWithEmpty.length;
+  const keyColumn = useMemo(() => columns.find((col) => col.isKeyField), [columns]);
+
+  const virtuosoContext = useMemo(() => ({
+    reorderable,
+    reorderableRowCount,
+    isLastEmptyRow,
+    dragOverRow,
+    keyColumn,
+    onDragStart: handleDragStart,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+    onDragEnd: handleDragEnd
+  }), [reorderable, reorderableRowCount, isLastEmptyRow, dragOverRow, keyColumn, handleDragStart, handleDragOver, handleDragLeave, handleDrop, handleDragEnd]);
+
+  const fixedHeaderContent = useCallback(() => (
+    <tr>
+      {showCheckbox && (
+        <td className="text-center">{checkboxLabel}</td>
+      )}
+      {columns.map((column, colIndex) => (
+        <td
+          key={column.key}
+          style={{ width: getColumnWidth(column) }}
+        >
+          <span className="column-name">{column.name}</span>
+          {colIndex < columns.length - 1 && (
+            <div
+              className={`resize-handle ${resizing === column.key ? 'resizing' : ''}`}
+              style={{ height: tableHeight > 0 ? `${tableHeight}px` : undefined }}
+              onMouseDown={(e) => handleResizeStart(e, column.key)}
+            />
+          )}
+        </td>
+      ))}
+      {showDelete && (
+        <td style={{ width: '60px' }}></td>
+      )}
+    </tr>
+  ), [showCheckbox, checkboxLabel, columns, getColumnWidth, resizing, tableHeight, handleResizeStart, showDelete]);
+
+  const itemContent = useCallback((rowIndex, row) => {
+    const isEmpty = isLastEmptyRow(row, rowIndex);
+    const canDrag = reorderable && !isEmpty && rowIndex < reorderableRowCount;
+
+    return (
+      <>
+        {showCheckbox && (
+          <td className="text-center relative">
+            {reorderable && canDrag && (
+              <div
+                draggable
+                className="drag-handle group absolute z-10 left-[-8px] top-1/2 -translate-y-1/2 p-1 cursor-grab"
+              >
+                <IconGripVertical
+                  size={14}
+                  className="icon-grip hidden group-hover:block"
+                />
+                <IconMinusVertical
+                  size={14}
+                  className="icon-minus block group-hover:hidden"
+                />
+              </div>
+            )}
+            {!isEmpty && (
+              <input
+                type="checkbox"
+                className="mousetrap"
+                data-testid="column-checkbox"
+                checked={row[checkboxKey] ?? true}
+                disabled={disableCheckbox}
+                onChange={(e) => handleCheckboxChange(row.uid, e.target.checked)}
+              />
+            )}
+          </td>
+        )}
+        {columns.map((column) => (
+          <td key={column.key} data-testid={`column-${column.key}`}>
+            {renderCell(column, row, rowIndex)}
+          </td>
+        ))}
+        {showDelete && (
+          <td>
+            {!isEmpty && (
+              <button
+                data-testid="column-delete"
+                onClick={() => handleRemoveRow(row.uid)}
+              >
+                <IconTrash strokeWidth={1.5} size={18} />
+              </button>
+            )}
+          </td>
+        )}
+      </>
+    );
+  }, [showCheckbox, reorderable, reorderableRowCount, isLastEmptyRow, checkboxKey, disableCheckbox, handleCheckboxChange, columns, renderCell, showDelete, handleRemoveRow]);
+
+  const initialTopMostItemIndex = useRef(Math.max(0, Math.floor(initialScroll / ROW_HEIGHT))).current;

  return (
-    <StyledWrapper className={`${showCheckbox ? 'has-checkbox' : 'no-checkbox'} ${resizing ? 'is-resizing' : ''}`}>
-      <div className="table-container" ref={tableRef} data-testid={testId}>
-        <table>
-          <thead>
-            <tr>
-              {showCheckbox && (
-                <td className="text-center">{checkboxLabel}</td>
-              )}
-              {columns.map((column, colIndex) => (
-                <td
-                  key={column.key}
-                  style={{ width: getColumnWidth(column) }}
-                >
-                  <span className="column-name">{column.name}</span>
-                  {colIndex < columns.length - 1 && (
-                    <div
-                      className={`resize-handle ${resizing === column.key ? 'resizing' : ''}`}
-                      style={{ height: tableHeight > 0 ? `${tableHeight}px` : undefined }}
-                      onMouseDown={(e) => handleResizeStart(e, column.key)}
-                    />
-                  )}
-                </td>
-              ))}
-              {showDelete && (
-                <td style={{ width: '60px' }}></td>
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            {rowsWithEmpty.map((row, rowIndex) => {
-              const isEmpty = isLastEmptyRow(row, rowIndex);
-              const canDrag = reorderable && !isEmpty && rowIndex < reorderableRowCount;
-
-              return (
-                <tr
-                  key={row.uid}
-                  draggable={canDrag}
-                  onDragStart={canDrag ? (e) => handleDragStart(e, rowIndex) : undefined}
-                  onDragOver={canDrag ? (e) => handleDragOver(e, rowIndex) : undefined}
-                  onDrop={canDrag ? (e) => handleDrop(e, rowIndex) : undefined}
-                  onDragEnd={canDrag ? handleDragEnd : undefined}
-                  onMouseEnter={() => setHoveredRow(rowIndex)}
-                  onMouseLeave={() => setHoveredRow(null)}
-                >
-                  {showCheckbox && (
-                    <td className="text-center relative">
-                      {reorderable && canDrag && (
-                        <div
-                          draggable
-                          className="drag-handle group absolute z-10 left-[-8px] top-1/2 -translate-y-1/2 p-1 cursor-grab"
-                        >
-                          {hoveredRow === rowIndex && (
-                            <>
-                              <IconGripVertical
-                                size={14}
-                                className="icon-grip hidden group-hover:block"
-                              />
-                              <IconMinusVertical
-                                size={14}
-                                className="icon-minus block group-hover:hidden"
-                              />
-                            </>
-                          )}
-                        </div>
-                      )}
-                      {!isEmpty && (
-                        <input
-                          type="checkbox"
-                          className="mousetrap"
-                          data-testid="column-checkbox"
-                          checked={row[checkboxKey] ?? true}
-                          disabled={disableCheckbox}
-                          onChange={(e) => handleCheckboxChange(row.uid, e.target.checked)}
-                        />
-                      )}
-                    </td>
-                  )}
-                  {columns.map((column) => (
-                    <td key={column.key} data-testid={`column-${column.key}`}>
-                      {renderCell(column, row, rowIndex)}
-                    </td>
-                  ))}
-                  {showDelete && (
-                    <td>
-                      {!isEmpty && (
-                        <button
-                          data-testid="column-delete"
-                          onClick={() => handleRemoveRow(row.uid)}
-                        >
-                          <IconTrash strokeWidth={1.5} size={18} />
-                        </button>
-                      )}
-                    </td>
-                  )}
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
+    <StyledWrapper
+      ref={wrapperRef}
+      data-testid={testId}
+      className={`${showCheckbox ? 'has-checkbox' : 'no-checkbox'} ${resizing ? 'is-resizing' : ''}`}
+    >
+      {scrollParent && (
+        <TableVirtuoso
+          ref={virtuosoRef}
+          className="table-container"
+          customScrollParent={scrollParent}
+          data={rowsWithEmpty}
+          components={{ TableRow }}
+          context={virtuosoContext}
+          defaultItemHeight={ROW_HEIGHT}
+          initialTopMostItemIndex={initialTopMostItemIndex}
+          totalListHeightChanged={handleTotalHeightChanged}
+          computeItemKey={(_, item) => item.uid}
+          fixedHeaderContent={fixedHeaderContent}
+          itemContent={itemContent}
+        />
+      )}
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/EnvironmentVariablesTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EnvironmentVariablesTable/StyledWrapper.js
@@ -15,6 +15,7 @@ const Wrapper = styled.div`
    overflow-y: auto;
    border-radius: 8px;
    border: solid 1px ${(props) => props.theme.border.border0};
+    transition: height 75ms cubic-bezier(0,1.12,.84,.64);
  }

  table {
--- a/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
+++ b/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
@@ -1,33 +1,41 @@
 import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
 import { TableVirtuoso } from 'react-virtuoso';
 import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
+import { IconTrash, IconAlertCircle } 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';
 import { getGlobalEnvironmentVariables } from 'utils/collections';
 import { stripEnvVarUid } from 'utils/environments';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useTrackScroll } from 'hooks/useTrackScroll';

 const MIN_H = 35 * 2;
 const MIN_COLUMN_WIDTH = 80;
+const MIN_ROW_HEIGHT = 35;

 const TableRow = React.memo(
-  ({ children, item }) => (
-    <tr key={item.uid} 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;
  }
 );
@@ -56,7 +64,19 @@ const EnvironmentVariablesTable = ({

  const hasDraftForThisEnv = draft?.environmentUid === environment.uid;

-  const [tableHeight, setTableHeight] = useState(MIN_H);
+  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
+  });
+  const scrollerRef = useRef(null);
+  const [scrollerEl, setScrollerEl] = useState(null);
+  scrollerRef.current = scrollerEl;
+  const initialTopMostItemIndex = useRef(Math.max(0, Math.floor(scroll / MIN_ROW_HEIGHT))).current;
+  useTrackScroll({ ref: scrollerRef, onChange: setScroll, initialValue: scroll, enabled: !!scrollerEl });

  // Use environment UID as part of tableId so each environment has its own column widths
  const tableId = `env-vars-table-${environment.uid}`;
@@ -136,17 +156,21 @@ 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;
+    if (!collection && workspaceProcessEnvVariables) {
+      c.workspaceProcessEnvVariables = workspaceProcessEnvVariables;
+    }
+    return c;
+  }, [collection, globalEnvironmentVariables, workspaceProcessEnvVariables]);

  const initialValues = useMemo(() => {
    const vars = environment.variables || [];
@@ -184,7 +208,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) => {
@@ -372,8 +398,16 @@ const EnvironmentVariablesTable = ({
    const variablesToSave = 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));
+    // Compare against what's on disk: for an ephemeral overlay, that's
+    // `persistedValue`, not the scripted value Redux is holding.
+    const baselineForCompare = (v) => {
+      const stripped = stripEnvVarUid(v);
+      if (v?.ephemeral && v?.persistedValue !== undefined) {
+        stripped.value = v.persistedValue;
+      }
+      return stripped;
+    };
+    const hasChanges = JSON.stringify(variablesToSave.map(stripEnvVarUid)) !== JSON.stringify(savedValues.map(baselineForCompare));
    if (!hasChanges) {
      toast.error('No changes to save');
      return;
@@ -483,6 +517,9 @@ const EnvironmentVariablesTable = ({
        <TableVirtuoso
          className="table-container"
          style={{ height: tableHeight }}
+          scrollerRef={setScrollerEl}
+          initialTopMostItemIndex={initialTopMostItemIndex}
+          overscan={Math.min(30, filteredVariables.length)}
          components={{ TableRow }}
          data={filteredVariables}
          totalListHeightChanged={handleTotalHeightChanged}
@@ -502,7 +539,7 @@ const EnvironmentVariablesTable = ({
              <td></td>
            </tr>
          )}
-          fixedItemHeight={35}
+          defaultItemHeight={35}
          computeItemKey={(virtualIndex, item) => `${environment.uid}-${item.index}`}
          itemContent={(virtualIndex, { variable, index: actualIndex }) => {
            const isLastRow = actualIndex === formik.values.length - 1;
@@ -535,7 +572,7 @@ const EnvironmentVariablesTable = ({
                        id={`${actualIndex}.name`}
                        name={`${actualIndex}.name`}
                        value={variable.name}
-                        placeholder={!variable.value || (typeof variable.value === 'string' && variable.value.trim() === '') ? 'Name' : ''}
+                        placeholder={!variable.name || (typeof variable.name === 'string' && variable.name.trim() === '') ? 'Name' : ''}
                        onChange={(e) => handleNameChange(actualIndex, e)}
                        onFocus={() => handleRowFocus(variable.uid)}
                        onBlur={() => {
@@ -548,21 +585,20 @@ 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}
-                      placeholder={isLastEmptyRow ? '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
@@ -570,17 +606,34 @@ const EnvironmentVariablesTable = ({
                          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(() => {
+                            formik.setFieldValue(formik.values.length, {
+                              uid: uuid(),
+                              name: '',
+                              value: '',
+                              type: 'text',
+                              secret: false,
+                              enabled: true
+                            }, false);
+                          }, 0);
+                        }
                      }}
                      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>
                  )}
@@ -610,6 +663,8 @@ const EnvironmentVariablesTable = ({
        />
      )}

+      {/* We should re-think of these buttons placement in component as we use TableVirtuoso which because of
+      these buttons renders at some transition: height 0.1s ease` */}
      <div className="button-container">
        <div className="flex items-center">
          <button type="button" className="submit" onClick={handleSave} data-testid="save-env">
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
@@ -17,11 +17,15 @@ const EnvironmentListContent = ({
      {environments && environments.length > 0 ? (
        <>
          <div className="environment-list">
-            <div className="dropdown-item no-environment" onClick={() => onEnvironmentSelect(null)}>
+            <div
+              className={`dropdown-item no-environment ${!activeEnvironmentUid ? 'dropdown-item-active' : ''}`}
+              onClick={() => onEnvironmentSelect(null)}
+            >
+              <span className="w-2 shrink-0" />
              <span>No Environment</span>
            </div>
            <ToolHint
-              anchorSelect="[data-tooltip-content]"
+              tooltipId="environment-name-tooltip"
              place="right"
              positionStrategy="fixed"
              tooltipStyle={{
@@ -36,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}
                  >
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -117,6 +117,10 @@ const Wrapper = styled.div`
    overflow: hidden;
  }

+  .no-environment {
+    color: ${(props) => props.theme.colors.text.subtext0};
+  }
+
  .environment-list {
    flex: 1;
    overflow-y: auto;
--- a/packages/bruno-app/src/components/Errors/SaveFileErrorModal/StyledWrapper.js
+++ b/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;
--- a/packages/bruno-app/src/components/Errors/SaveFileErrorModal/index.js
+++ b/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;
--- a/packages/bruno-app/src/components/FileEditor/CodeEditor/StyledWrapper.js
+++ b/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;
--- a/packages/bruno-app/src/components/FileEditor/CodeEditor/index.js
+++ b/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);
+    }
+  };
+}
--- a/packages/bruno-app/src/components/FileEditor/index.js
+++ b/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;
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import path from 'utils/common/path';
+import { getRelativePathWithinBasePath } from 'utils/common/path';
 import { useDispatch } from 'react-redux';
 import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import { IconX, IconUpload, IconFile } from '@tabler/icons';
@@ -48,13 +48,7 @@ const FilePickerEditor = ({
        // If file is in the collection's directory, then we use relative path
        // Otherwise, we use the absolute path
        filePaths = filePaths.map((filePath) => {
-          const collectionDir = collection.pathname;
-
-          if (filePath.startsWith(collectionDir)) {
-            return path.relative(collectionDir, filePath);
-          }
-
-          return filePath;
+          return getRelativePathWithinBasePath(collection.pathname, filePath);
        });

        onChange(isSingleFilePicker ? filePaths[0] : filePaths);
--- a/packages/bruno-app/src/components/FolderSettings/Auth/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Auth/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import get from 'lodash/get';
 import StyledWrapper from './StyledWrapper';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
@@ -18,8 +18,9 @@ import OAuth1 from 'components/RequestPane/Auth/OAuth1';
 import WsseAuth from 'components/RequestPane/Auth/WsseAuth';
 import ApiKeyAuth from 'components/RequestPane/Auth/ApiKeyAuth';
 import AwsV4Auth from 'components/RequestPane/Auth/AwsV4Auth';
-import { humanizeRequestAuthMode, getTreePathFromCollectionToItem } from 'utils/collections/index';
+import { humanizeRequestAuthMode } from 'utils/collections/index';
 import Button from 'ui/Button';
+import { getEffectiveAuthSource } from 'utils/auth';

 const GrantTypeComponentMap = ({ collection, folder, updateFolderAuth }) => {
  const dispatch = useDispatch();
@@ -52,41 +53,6 @@ const Auth = ({ collection, folder }) => {
  let request = get(folderRoot, 'request', {});
  const authMode = get(folderRoot, 'request.auth.mode');

-  const getEffectiveAuthSource = () => {
-    if (authMode !== 'inherit') return null;
-
-    const collectionRoot = collection?.draft?.root || collection?.root || {};
-    const collectionAuth = get(collectionRoot, 'request.auth');
-    let effectiveSource = {
-      type: 'collection',
-      name: 'Collection',
-      auth: collectionAuth
-    };
-
-    // Get path from collection to current folder
-    const folderTreePath = getTreePathFromCollectionToItem(collection, folder);
-
-    // Check parent folders to find closest auth configuration
-    // Skip the last item which is the current folder
-    for (let i = 0; i < folderTreePath.length - 1; i++) {
-      const parentFolder = folderTreePath[i];
-      if (parentFolder.type === 'folder') {
-        const parentFolderRoot = parentFolder?.draft || parentFolder?.root;
-        const folderAuth = get(parentFolderRoot, 'request.auth');
-        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'inherit') {
-          effectiveSource = {
-            type: 'folder',
-            name: parentFolder.name,
-            auth: folderAuth
-          };
-          break;
-        }
-      }
-    }
-
-    return effectiveSource;
-  };
-
  const handleSave = () => {
    dispatch(saveFolderRoot(collection.uid, folder.uid));
  };
@@ -98,6 +64,11 @@ const Auth = ({ collection, folder }) => {
    });
  };

+  const inheritedSource = useMemo(
+    () => (authMode === 'inherit' ? getEffectiveAuthSource(collection, folder) : null),
+    [authMode, folder, collection]
+  );
+
  const getAuthView = () => {
    switch (authMode) {
      case 'basic': {
@@ -202,12 +173,11 @@ const Auth = ({ collection, folder }) => {
        );
      }
      case 'inherit': {
-        const source = getEffectiveAuthSource();
        return (
          <>
            <div className="flex flex-row w-full mt-2 gap-2">
-              <div>Auth inherited from {source.name}: </div>
-              <div className="inherit-mode-text">{humanizeRequestAuthMode(source.auth?.mode)}</div>
+              <div>Auth inherited from {inheritedSource.name}: </div>
+              <div className="inherit-mode-text" data-testid="inherited-auth-mode">{humanizeRequestAuthMode(inheritedSource.auth?.mode)}</div>
            </div>
          </>
        );
--- a/packages/bruno-app/src/components/FolderSettings/AuthMode/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/AuthMode/index.js
@@ -81,14 +81,15 @@ const AuthMode = ({ collection, folder }) => {

  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}
          showTickMark={true}
+          data-testid="auth-mode-dropdown"
        >
-          <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 mr-1" size={14} strokeWidth={2} />
          </div>
        </MenuDropdown>
--- a/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Documentation/StyledWrapper.js
@@ -2,7 +2,6 @@ import styled from 'styled-components';

 const StyledWrapper = styled.div`
  height: 100%;
-  overflow-y: auto;
  position: relative;

  .editing-mode {
--- a/packages/bruno-app/src/components/FolderSettings/Documentation/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Documentation/index.js
@@ -1,24 +1,35 @@
 import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
+import find from 'lodash/find';
 import { updateFolderDocs } from 'providers/ReduxStore/slices/collections';
+import { updateDocsEditing } from 'providers/ReduxStore/slices/tabs';
 import { useTheme } from 'providers/Theme';
-import { useState } from 'react';
+import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import Button from 'ui/Button';
 import StyledWrapper from './StyledWrapper';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useTrackScroll } from 'hooks/useTrackScroll';

 const Documentation = ({ collection, folder }) => {
  const dispatch = useDispatch();
  const { displayedTheme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);
-  const [isEditing, setIsEditing] = useState(false);
+  const tabs = useSelector((state) => state.tabs.tabs);
+  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  const isEditing = focusedTab?.docsEditing || false;
  const docs = folder.draft ? get(folder, 'draft.docs', '') : get(folder, 'root.docs', '');

+  const wrapperRef = useRef(null);
+  const [scroll, setScroll] = usePersistedState({ key: `folder-docs-scroll-${folder.uid}`, default: 0 });
+  useTrackScroll({ ref: wrapperRef, selector: '.folder-settings-content', onChange: setScroll, enabled: !isEditing, initialValue: scroll });
+
  const toggleViewMode = () => {
-    setIsEditing((prev) => !prev);
+    dispatch(updateDocsEditing({ uid: activeTabUid, docsEditing: !isEditing }));
  };

  const onEdit = (value) => {
@@ -38,7 +49,7 @@ const Documentation = ({ collection, folder }) => {
  }

  return (
-    <StyledWrapper className="w-full relative flex flex-col">
+    <StyledWrapper className="w-full relative flex flex-col" ref={wrapperRef}>
      <div className="editing-mode flex justify-between items-center flex-shrink-0" role="tab" onClick={toggleViewMode}>
        {isEditing ? 'Preview' : 'Edit'}
      </div>
@@ -55,6 +66,8 @@ const Documentation = ({ collection, folder }) => {
              font={get(preferences, 'font.codeFont', 'default')}
              fontSize={get(preferences, 'font.codeFontSize')}
              mode="application/text"
+              initialScroll={scroll}
+              onScroll={setScroll}
            />
          </div>
          <div className="mt-6 flex-shrink-0">
--- a/packages/bruno-app/src/components/FolderSettings/Headers/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Headers/StyledWrapper.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';

-const Wrapper = styled.div`
+const StyledWrapper = styled.div`
  table {
    width: 100%;
    border-collapse: collapse;
@@ -53,4 +53,4 @@ const Wrapper = styled.div`
  }
 `;

-export default Wrapper;
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/FolderSettings/Headers/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Headers/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme';
@@ -13,6 +13,8 @@ import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
 import Button from 'ui/Button';
 import { headerNameRegex, headerValueRegex } from 'utils/common/regex';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useTrackScroll } from 'hooks/useTrackScroll';

 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

@@ -25,6 +27,9 @@ const Headers = ({ collection, folder }) => {
    ? get(folder, 'draft.request.headers', [])
    : get(folder, 'root.request.headers', []);
  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+  const wrapperRef = useRef(null);
+  const [scroll, setScroll] = usePersistedState({ key: `folder-headers-scroll-${folder.uid}`, default: 0 });
+  useTrackScroll({ ref: wrapperRef, selector: '.folder-settings-content', onChange: setScroll, initialValue: scroll });

  // Get column widths from Redux
  const focusedTab = tabs?.find((t) => t.uid === activeTabUid);
@@ -125,7 +130,7 @@ const Headers = ({ collection, folder }) => {
  }

  return (
-    <StyledWrapper className="w-full">
+    <StyledWrapper className="w-full" ref={wrapperRef}>
      <div className="text-xs mb-4 text-muted">
        Request headers that will be sent with every request inside this folder.
      </div>
@@ -138,9 +143,10 @@ const Headers = ({ collection, folder }) => {
        getRowError={getRowError}
        columnWidths={folderHeadersWidths}
        onColumnWidthsChange={(widths) => handleColumnWidthsChange('folder-headers', widths)}
+        initialScroll={scroll}
      />
      <div className="flex justify-end mt-2">
-        <button className="text-link select-none" onClick={toggleBulkEditMode}>
+        <button className="text-link select-none" data-testid="bulk-edit-toggle" onClick={toggleBulkEditMode}>
          Bulk Edit
        </button>
      </div>
--- a/packages/bruno-app/src/components/FolderSettings/Script/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Script/index.js
@@ -3,6 +3,7 @@ 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 { updateFolderRequestScript, updateFolderResponseScript } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { updateScriptPaneTab } from 'providers/ReduxStore/slices/tabs';
@@ -12,6 +13,8 @@ import StatusDot from 'components/StatusDot';
 import { flattenItems, isItemARequest } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';

 const Script = ({ collection, folder }) => {
  const dispatch = useDispatch();
@@ -21,7 +24,9 @@ const Script = ({ collection, folder }) => {
  const responseScript = folder.draft ? get(folder, 'draft.request.script.res', '') : get(folder, 'root.request.script.res', '');

  const tabs = useSelector((state) => state.tabs.tabs);
-  const focusedTab = find(tabs, (t) => t.uid === folder.uid);
+  const focusedTab = find(tabs, (tab) => tab.type === 'folder-settings' && (tab.uid === folder.uid || tab.folderUid === folder.uid))
+    || find(tabs, (tab) => tab.type === 'folder-settings' && tab.pathname === folder.pathname);
+  const tabUid = focusedTab?.uid || folder.uid;
  const scriptPaneTab = focusedTab?.scriptPaneTab;

  // Default to post-response if pre-request script is empty (only when scriptPaneTab is null/undefined)
@@ -33,25 +38,46 @@ const Script = ({ collection, folder }) => {
  const activeTab = scriptPaneTab || getDefaultTab();

  const setActiveTab = (tab) => {
-    dispatch(updateScriptPaneTab({ uid: folder.uid, scriptPaneTab: tab }));
+    dispatch(updateScriptPaneTab({ uid: tabUid, scriptPaneTab: tab }));
  };

  const { displayedTheme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);

-  // Refresh CodeMirror when tab becomes visible
+  const [preReqScroll, setPreReqScroll] = usePersistedState({ key: `folder-pre-req-scroll-${folder.uid}`, default: 0 });
+  const [postResScroll, setPostResScroll] = usePersistedState({ key: `folder-post-res-scroll-${folder.uid}`, default: 0 });
+
+  // Refresh CodeMirror when tab becomes visible and restore scroll position.
+  // CodeMirror's scrollTo() is silently ignored when the editor is inside a display:none container
+  // (TabsContent hides inactive tabs via display:none). After refresh() recalculates layout, we re-apply scrollTo().
  useEffect(() => {
    const timer = setTimeout(() => {
      if (activeTab === 'pre-request' && preRequestEditorRef.current?.editor) {
        preRequestEditorRef.current.editor.refresh();
+        preRequestEditorRef.current.editor.scrollTo(null, preReqScroll);
      } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
        postResponseEditorRef.current.editor.refresh();
+        postResponseEditorRef.current.editor.scrollTo(null, postResScroll);
      }
    }, 0);

    return () => clearTimeout(timer);
  }, [activeTab]);

+  useFocusErrorLine({
+    uid: folder.uid,
+    editorRef: preRequestEditorRef,
+    scriptPhase: 'pre-request',
+    isVisible: activeTab === 'pre-request'
+  });
+
+  useFocusErrorLine({
+    uid: folder.uid,
+    editorRef: postResponseEditorRef,
+    scriptPhase: 'post-response',
+    isVisible: activeTab === 'post-response'
+  });
+
  const onRequestScriptEdit = (value) => {
    dispatch(
      updateFolderRequestScript({
@@ -102,34 +128,54 @@ const Script = ({ collection, folder }) => {
          </TabsTrigger>
        </TabsList>

-        <TabsContent value="pre-request" className="mt-2">
-          <CodeEditor
-            ref={preRequestEditorRef}
-            collection={collection}
-            value={requestScript || ''}
-            theme={displayedTheme}
-            onEdit={onRequestScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'bru']}
-          />
+        <TabsContent value="pre-request" className="mt-2" dataTestId="folder-pre-request-script-editor">
+          <div className="relative h-full">
+            <CodeEditor
+              ref={preRequestEditorRef}
+              collection={collection}
+              docKey="folder-script:pre-request"
+              value={requestScript || ''}
+              theme={displayedTheme}
+              onEdit={onRequestScriptEdit}
+              mode="javascript"
+              onSave={handleSave}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              showHintsFor={['req', 'bru']}
+              initialScroll={preReqScroll}
+              onScroll={setPreReqScroll}
+            />
+            <AIAssist
+              scriptType="pre-request"
+              currentScript={requestScript || ''}
+              onApply={onRequestScriptEdit}
+            />
+          </div>
        </TabsContent>

-        <TabsContent value="post-response" className="mt-2">
-          <CodeEditor
-            ref={postResponseEditorRef}
-            collection={collection}
-            value={responseScript || ''}
-            theme={displayedTheme}
-            onEdit={onResponseScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'res', 'bru']}
-          />
+        <TabsContent value="post-response" className="mt-2" dataTestId="folder-post-response-script-editor">
+          <div className="relative h-full">
+            <CodeEditor
+              ref={postResponseEditorRef}
+              collection={collection}
+              docKey="folder-script:post-response"
+              value={responseScript || ''}
+              theme={displayedTheme}
+              onEdit={onResponseScriptEdit}
+              mode="javascript"
+              onSave={handleSave}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              showHintsFor={['req', 'res', 'bru']}
+              initialScroll={postResScroll}
+              onScroll={setPostResScroll}
+            />
+            <AIAssist
+              scriptType="post-response"
+              currentScript={responseScript || ''}
+              onApply={onResponseScriptEdit}
+            />
+          </div>
        </TabsContent>
      </Tabs>

--- a/packages/bruno-app/src/components/FolderSettings/Tests/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Tests/index.js
@@ -1,19 +1,24 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
+import AIAssist from 'components/AIAssist';
 import { updateFolderTests } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';

 const Tests = ({ collection, folder }) => {
  const dispatch = useDispatch();
+  const testsEditorRef = useRef(null);
  const tests = folder.draft ? get(folder, 'draft.request.tests', '') : get(folder, 'root.request.tests', '');

  const { displayedTheme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);
+  const [testsScroll, setTestsScroll] = usePersistedState({ key: `folder-tests-scroll-${folder.uid}`, default: 0 });

  const onEdit = (value) => {
    dispatch(
@@ -27,20 +32,33 @@ const Tests = ({ collection, folder }) => {

  const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));

+  useFocusErrorLine({
+    uid: folder.uid,
+    editorRef: testsEditorRef,
+    scriptPhase: 'test'
+  });
+
  return (
    <StyledWrapper className="w-full flex flex-col h-full">
      <div className="text-xs mb-4 text-muted">These tests will run any time a request in this collection is sent.</div>
-      <CodeEditor
-        collection={collection}
-        value={tests || ''}
-        theme={displayedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onSave={handleSave}
-        font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
-        showHintsFor={['req', 'res', 'bru']}
-      />
+      <div className="relative h-full">
+        <CodeEditor
+          ref={testsEditorRef}
+          collection={collection}
+          docKey="folder-tests"
+          value={tests || ''}
+          theme={displayedTheme}
+          onEdit={onEdit}
+          mode="javascript"
+          onSave={handleSave}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'res', 'bru']}
+          initialScroll={testsScroll}
+          onScroll={setTestsScroll}
+        />
+        <AIAssist scriptType="tests" currentScript={tests || ''} onApply={onEdit} />
+      </div>

      <div className="mt-6">
        <Button type="submit" size="sm" onClick={handleSave}>
--- a/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js
@@ -5,13 +5,15 @@ import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions'
 import { updateTableColumnWidths } from 'providers/ReduxStore/slices/tabs';
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
+import DataTypeSelector from 'components/DataTypeSelector';
+import { valueToString } from '@usebruno/common/utils';
 import EditableTable from 'components/EditableTable';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { variableNameRegex } from 'utils/common/regex';
 import { setFolderVars } from 'providers/ReduxStore/slices/collections/index';

-const VarsTable = ({ folder, collection, vars, varType }) => {
+const VarsTable = ({ folder, collection, vars, varType, initialScroll = 0 }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();
  const tabs = useSelector((state) => state.tabs.tabs);
@@ -62,16 +64,32 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
        </div>
      ),
      placeholder: varType === 'request' ? 'Value' : 'Expr',
-      render: ({ value, onChange }) => (
-        <MultiLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={onSave}
-          onChange={onChange}
-          collection={collection}
-          item={folder}
-          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}
+              item={folder}
+              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>
      )
    }
  ];
@@ -86,6 +104,7 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
    <StyledWrapper className="w-full">
      <EditableTable
        tableId="folder-vars"
+        testId={`folder-vars-${varType === 'response' ? 'res' : 'req'}`}
        columns={columns}
        rows={vars}
        onChange={handleVarsChange}
@@ -93,6 +112,7 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
        getRowError={getRowError}
        columnWidths={folderVarsWidths}
        onColumnWidthsChange={(widths) => handleColumnWidthsChange('folder-vars', widths)}
+        initialScroll={initialScroll}
      />
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/FolderSettings/Vars/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Vars/index.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import get from 'lodash/get';
 import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
 import Button from 'ui/Button';
+import { usePersistedState } from 'hooks/usePersistedState';
+import { useTrackScroll } from 'hooks/useTrackScroll';

 const Vars = ({ collection, folder }) => {
  const dispatch = useDispatch();
@@ -12,15 +14,19 @@ const Vars = ({ collection, folder }) => {
  const responseVars = folder.draft ? get(folder, 'draft.request.vars.res', []) : get(folder, 'root.request.vars.res', []);
  const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));

+  const wrapperRef = useRef(null);
+  const [scroll, setScroll] = usePersistedState({ key: `folder-vars-scroll-${folder.uid}`, default: 0 });
+  useTrackScroll({ ref: wrapperRef, selector: '.folder-settings-content', onChange: setScroll, initialValue: scroll });
+
  return (
-    <StyledWrapper className="w-full flex flex-col">
+    <StyledWrapper className="w-full flex flex-col" ref={wrapperRef}>
      <div>
        <div className="mb-3 title text-xs">Pre Request</div>
-        <VarsTable folder={folder} collection={collection} vars={requestVars} varType="request" />
+        <VarsTable folder={folder} collection={collection} vars={requestVars} varType="request" initialScroll={scroll} />
      </div>
      <div>
        <div className="mt-3 mb-3 title text-xs">Post Response</div>
-        <VarsTable folder={folder} collection={collection} vars={responseVars} varType="response" />
+        <VarsTable folder={folder} collection={collection} vars={responseVars} varType="response" initialScroll={scroll} />
      </div>
      <div className="mt-6">
        <Button type="submit" size="sm" onClick={handleSave}>
--- a/packages/bruno-app/src/components/FolderSettings/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import { updatedFolderSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
 import { useDispatch } from 'react-redux';
@@ -10,7 +10,7 @@ import Vars from './Vars';
 import Documentation from './Documentation';
 import Auth from './Auth';
 import StatusDot from 'components/StatusDot';
-import get from 'lodash/get';
+import { hasEffectiveAuth } from 'utils/auth';

 const FolderSettings = ({ collection, folder }) => {
  const dispatch = useDispatch();
@@ -31,8 +31,11 @@ const FolderSettings = ({ collection, folder }) => {
  const responseVars = folderRoot?.request?.vars?.res || [];
  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;

-  const auth = get(folderRoot, 'request.auth.mode');
-  const hasAuth = auth && auth !== 'none';
+  const folderAuthMode = folder?.draft?.request?.auth?.mode ?? folder?.root?.request?.auth?.mode;
+  const hasAuth = useMemo(
+    () => hasEffectiveAuth(collection, folder),
+    [folder, folderAuthMode, collection]
+  );

  const setTab = (tab) => {
    dispatch(
@@ -95,13 +98,13 @@ const FolderSettings = ({ collection, folder }) => {
          </div>
          <div className={getTabClassname('auth')} role="tab" data-testid="folder-settings-tab-auth" onClick={() => setTab('auth')}>
            Auth
-            {hasAuth && <StatusDot />}
+            {hasAuth && <StatusDot dataTestId="auth" />}
          </div>
          <div className={getTabClassname('docs')} role="tab" data-testid="folder-settings-tab-docs" onClick={() => setTab('docs')}>
            Docs
          </div>
        </div>
-        <section className="flex mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
+        <section className="folder-settings-content flex mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/GlobalSearchModal/index.js
+++ b/packages/bruno-app/src/components/GlobalSearchModal/index.js
@@ -267,14 +267,16 @@ const GlobalSearchModal = ({ isOpen, onClose }) => {
          uid: result.item.uid,
          collectionUid: result.collectionUid,
          requestPaneTab: getDefaultRequestPaneTab(result.item),
-          type: 'request'
+          type: result.item.type,
+          pathname: result.item.pathname
        }));
      }
    } else if (result.type === SEARCH_TYPES.FOLDER) {
      dispatch(addTab({
        uid: result.item.uid,
        collectionUid: result.collectionUid,
-        type: 'folder-settings'
+        type: 'folder-settings',
+        pathname: result.item.pathname
      }));
    } else if (result.type === SEARCH_TYPES.COLLECTION) {
      dispatch(addTab({
--- a/packages/bruno-app/src/components/ManageWorkspace/index.js
+++ b/packages/bruno-app/src/components/ManageWorkspace/index.js
@@ -16,6 +16,7 @@ import StyledWrapper from './StyledWrapper';
 import MenuDropdown from 'ui/MenuDropdown/index';
 import Button from 'ui/Button';
 import { getRevealInFolderLabel } from 'utils/common/platform';
+import { openDevtoolsAndSwitchToTerminal } from 'utils/terminal';

 const ManageWorkspace = () => {
  const dispatch = useDispatch();
@@ -157,6 +158,7 @@ const ManageWorkspace = () => {
                    <MenuDropdown
                      placement="bottom-end"
                      items={[
+                        { id: 'open-in-terminal', label: 'Open in Terminal', onClick: () => openDevtoolsAndSwitchToTerminal(dispatch, workspace.pathname) },
                        { id: 'rename', label: 'Rename', onClick: () => handleRenameClick(workspace) },
                        { id: 'remove', label: 'Remove', onClick: () => handleCloseClick(workspace) }
                      ]}
--- a/packages/bruno-app/src/components/Modal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js
@@ -208,21 +208,35 @@ const Wrapper = styled.div`
      outline-offset: 2px;
    }

-    &:checked {
+    &:checked,
+    &:indeterminate {
      background: ${(props) => props.theme.button2.color.primary.bg};
      border-color: ${(props) => props.theme.button2.color.primary.border};
+    }

-      &::after {
-        content: '';
-        position: absolute;
-        left: 4px;
-        top: 1px;
-        width: 5px;
-        height: 9px;
-        border: solid ${(props) => props.theme.button2.color.primary.text};
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-      }
+    &:checked::after,
+    &:indeterminate::after {
+      content: '';
+      position: absolute;
+    }
+
+    &:checked::after {
+      left: 4px;
+      top: 1px;
+      width: 5px;
+      height: 9px;
+      border: solid ${(props) => props.theme.button2.color.primary.text};
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    &:indeterminate::after {
+      left: 2px;
+      top: 6px;
+      width: 10px;
+      height: 2px;
+      background: ${(props) => props.theme.button2.color.primary.text};
+      border-radius: 2px;
    }
  }
 `;
--- a/packages/bruno-app/src/components/Modal/index.js
+++ b/packages/bruno-app/src/components/Modal/index.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import { IconX } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 import useFocusTrap from 'hooks/useFocusTrap';
 import Button from 'ui/Button';
@@ -12,13 +13,15 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => (
    {handleCancel && !hideClose ? (
      // TODO: Remove data-test-id and use data-testid instead across the codebase.
      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null} data-testid="modal-close-button">
-        ×
+        <IconX size={16} strokeWidth={1.5} />
      </div>
    ) : null}
  </div>
 );

-const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-4">{children}</div>;
+const ModalContent = ({ children, noPadding }) => (
+  <div className={`bruno-modal-content ${noPadding ? '' : 'px-4 py-4'}`}>{children}</div>
+);

 const ModalFooter = ({
  confirmText,
@@ -28,7 +31,9 @@ const ModalFooter = ({
  confirmDisabled,
  hideCancel,
  hideFooter,
-  confirmButtonColor = 'primary'
+  footerLeft,
+  confirmButtonColor = 'primary',
+  dataTestId = 'modal'
 }) => {
  confirmText = confirmText || 'Save';
  cancelText = cancelText || 'Cancel';
@@ -38,23 +43,27 @@ const ModalFooter = ({
  }

  return (
-    <div className="flex justify-end p-4 bruno-modal-footer">
-      <span className={hideCancel ? 'hidden' : 'mr-2'}>
-        <Button type="button" color="secondary" variant="ghost" onClick={handleCancel}>
-          {cancelText}
-        </Button>
-      </span>
-      <span>
-        <Button
-          type="submit"
-          color={confirmButtonColor}
-          disabled={confirmDisabled}
-          onClick={handleSubmit}
-          className="submit"
-        >
-          {confirmText}
-        </Button>
-      </span>
+    <div className="flex justify-between items-center p-4 bruno-modal-footer">
+      <div>{footerLeft}</div>
+      <div className="flex justify-end">
+        <span className={hideCancel ? 'hidden' : 'mr-2'}>
+          <Button type="button" color="secondary" variant="ghost" onClick={handleCancel}>
+            {cancelText}
+          </Button>
+        </span>
+        <span>
+          <Button
+            type="submit"
+            color={confirmButtonColor}
+            disabled={confirmDisabled}
+            onClick={handleSubmit}
+            className="submit"
+            data-testid={`${dataTestId}-submit-btn`}
+          >
+            {confirmText}
+          </Button>
+        </span>
+      </div>
    </div>
  );
 };
@@ -72,12 +81,14 @@ const Modal = ({
  hideCancel,
  hideFooter,
  hideClose,
+  footerLeft,
  disableCloseOnOutsideClick,
  disableEscapeKey,
  onClick,
  closeModalFadeTimeout = 500,
  dataTestId,
-  confirmButtonColor = 'primary'
+  confirmButtonColor = 'primary',
+  noPadding
 }) => {
  const modalRef = useRef(null);
  const [isClosing, setIsClosing] = useState(false);
@@ -141,7 +152,7 @@ const Modal = ({
          handleCancel={() => closeModal({ type: 'icon' })}
          customHeader={customHeader}
        />
-        <ModalContent>{children}</ModalContent>
+        <ModalContent noPadding={noPadding}>{children}</ModalContent>
        <ModalFooter
          confirmText={confirmText}
          cancelText={cancelText}
@@ -150,7 +161,9 @@ const Modal = ({
          confirmDisabled={confirmDisabled}
          hideCancel={hideCancel}
          hideFooter={hideFooter}
+          footerLeft={footerLeft}
          confirmButtonColor={confirmButtonColor}
+          dataTestId={dataTestId}
        />
      </div>

--- a/packages/bruno-app/src/components/MultiLineEditor/index.js
+++ b/packages/bruno-app/src/components/MultiLineEditor/index.js
@@ -30,6 +30,16 @@ class MultiLineEditor extends Component {
    // Initialize CodeMirror as a single line editor
    /** @type {import("codemirror").Editor} */
    const variables = getAllVariables(this.props.collection, this.props.item);
+    /**
+     * No-op. We claim Cmd-Enter / Ctrl-Enter here only to suppress CodeMirror's
+     * sublime keymap default (insertLineAfter), which would otherwise insert a
+     * newline. sendRequest dispatch is owned by Mousetrap — the editor input has
+     * the `mousetrap` class (added below) so the global
+     * useKeybinding('sendRequest', …) in RequestTabPanel handles it, and only
+     * in request tabs. Falling through with CodeMirror.Pass when onRun is absent
+     * would re-introduce the newline in collection/folder-level editors.
+     */
+    const runShortcut = () => {};

    this.editor = CodeMirror(this.editorRef.current, {
      lineWrapping: false,
@@ -47,6 +57,8 @@ class MultiLineEditor extends Component {
      extraKeys: {
        'Cmd-F': () => {},
        'Ctrl-F': () => {},
+        'Cmd-Enter': runShortcut,
+        'Ctrl-Enter': runShortcut,
        // Tabbing disabled to make tabindex work
        'Tab': false,
        'Shift-Tab': false
--- a/packages/bruno-app/src/components/MultipartFileChipsCell/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MultipartFileChipsCell/StyledWrapper.js
@@ -0,0 +1,202 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  position: relative;
+
+  .file-chips-row {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .file-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 6px;
+    border-radius: 6px;
+    background: transparent;
+    border: 1px solid ${(props) => props.theme.input.border};
+    font-size: 12px;
+    line-height: 1;
+    color: ${(props) => props.theme.text};
+    max-width: 140px;
+    min-width: 75px;
+    flex: 0 1 auto;
+    white-space: nowrap;
+  }
+
+  .file-chip-icon {
+    flex: 0 0 auto;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .file-chip-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .file-chip-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1px;
+    color: ${(props) => props.theme.colors.text.muted};
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 3px;
+    flex: 0 0 auto;
+
+    &:hover {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+
+  .file-more-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 4px;
+    background: transparent;
+    border: none;
+    font-size: 12px;
+    line-height: 1;
+    color: ${(props) => props.theme.primary.text};
+    cursor: pointer;
+    flex: 0 0 auto;
+    white-space: nowrap;
+
+    &:hover {
+      color: ${(props) => props.theme.primary.text};
+      opacity: 0.8;
+    }
+  }
+
+  .file-summary-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 6px;
+    border-radius: 6px;
+    background: transparent;
+    border: 1px solid ${(props) => props.theme.input.border};
+    font-size: 12px;
+    line-height: 1;
+    color: ${(props) => props.theme.text};
+    cursor: pointer;
+    flex: 0 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+
+    > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: ${(props) => props.theme.text};
+    }
+
+    > svg {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    &:hover,
+    &:hover > span {
+      color: ${(props) => props.theme.text};
+    }
+
+    &:hover {
+      border-color: ${(props) => props.theme.colors.text.muted};
+      background: ${(props) => props.theme.requestTabs.icon.hoverBg};
+    }
+  }
+
+  .upload-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.15s ease;
+    flex: 0 0 auto;
+    margin-left: auto;
+
+    &:hover {
+      color: ${(props) => props.theme.text};
+    }
+  }
+`;
+
+export const OverflowList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px;
+  max-height: 260px;
+  overflow-y: auto;
+  min-width: 220px;
+  max-width: 360px;
+
+  .overflow-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 6px 8px;
+    border-radius: 4px;
+    background: transparent;
+    font-size: 12px;
+    line-height: 1.2;
+    color: ${(props) => props.theme.text};
+
+    &:hover {
+      background: ${(props) => props.theme.requestTabs.icon.hoverBg};
+    }
+  }
+
+  .overflow-row-icon {
+    flex: 0 0 auto;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .overflow-row-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .overflow-row-remove {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    color: ${(props) => props.theme.colors.text.muted};
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 3px;
+    flex: 0 0 auto;
+
+    &:hover {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/MultipartFileChipsCell/index.js
+++ b/packages/bruno-app/src/components/MultipartFileChipsCell/index.js
@@ -0,0 +1,197 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { IconUpload, IconX, IconFile, IconChevronDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import ToolHint from 'components/ToolHint';
+import path, { normalizePath } from 'utils/common/path';
+import Wrapper, { OverflowList } from './StyledWrapper';
+
+const basename = (filePath) => (filePath ? path.basename(normalizePath(String(filePath))) : '');
+
+const FileEntry = ({ filePath, toolhintId, editMode, onRemove, variant }) => {
+  const [overRemove, setOverRemove] = useState(false);
+  const isChip = variant === 'chip';
+
+  return (
+    <ToolHint
+      text={overRemove ? 'Remove file' : filePath}
+      toolhintId={toolhintId}
+      place={overRemove ? 'bottom-end' : 'bottom-start'}
+      positionStrategy="fixed"
+      tooltipStyle={{ maxWidth: '320px', whiteSpace: 'normal', wordBreak: 'break-all' }}
+      delayShow={overRemove ? 200 : 1000}
+      className={isChip ? 'file-chip' : 'overflow-row'}
+      dataTestId={isChip ? 'multipart-file-chip' : 'multipart-file-overflow-row'}
+    >
+      <IconFile size={14} stroke={1.5} className={isChip ? 'file-chip-icon' : 'overflow-row-icon'} />
+      <span className={isChip ? 'file-chip-name' : 'overflow-row-name'}>
+        {basename(filePath)}
+      </span>
+      {editMode && (
+        <button
+          type="button"
+          data-testid={isChip ? 'multipart-file-chip-remove' : 'multipart-file-overflow-remove'}
+          className={isChip ? 'file-chip-remove' : 'overflow-row-remove'}
+          onMouseEnter={() => setOverRemove(true)}
+          onMouseLeave={() => setOverRemove(false)}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove(filePath);
+          }}
+        >
+          <IconX size={13} stroke={1.5} />
+        </button>
+      )}
+    </ToolHint>
+  );
+};
+
+// Keep in sync with the corresponding CSS values in StyledWrapper.js:
+//   MIN_CHIP_W  ↔ .file-chip { min-width: 75px }
+//   CHIP_GAP    ↔ .file-chips-row { gap: 4px }
+const MIN_CHIP_W = 75;
+const CHIP_GAP = 4;
+const UPLOAD_RESERVE = 28;
+const MORE_CHIP_RESERVE = 56;
+
+const MultipartFileChipsCell = ({ files, onRemove, onAdd, editMode = true }) => {
+  const containerRef = useRef(null);
+  const tooltipPrefix = useRef(`mp-tip-${Math.random().toString(36).slice(2, 10)}`).current;
+  const [visibleCount, setVisibleCount] = useState(files.length);
+  const [summaryOpen, setSummaryOpen] = useState(false);
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    // Measure the td (column-width, stable) rather than the content-sized cell,
+    // which would feed back on visibleCount.
+    const td = container.closest('td') || container.parentElement;
+    if (!td) return;
+
+    const compute = () => {
+      const tdStyle = window.getComputedStyle(td);
+      const padX = parseFloat(tdStyle.paddingLeft) + parseFloat(tdStyle.paddingRight);
+      const total = td.clientWidth - padX;
+      if (files.length === 0) {
+        setVisibleCount(0);
+        return;
+      }
+
+      const allAtMin = files.length * MIN_CHIP_W + Math.max(0, files.length - 1) * CHIP_GAP;
+      if (allAtMin + UPLOAD_RESERVE <= total) {
+        setVisibleCount(files.length);
+        return;
+      }
+
+      const available = total - UPLOAD_RESERVE - MORE_CHIP_RESERVE;
+      const n = Math.max(0, Math.floor((available + CHIP_GAP) / (MIN_CHIP_W + CHIP_GAP)));
+      setVisibleCount(n);
+    };
+
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(td);
+    return () => ro.disconnect();
+  }, [files]);
+
+  const visible = files.slice(0, visibleCount);
+  const overflow = files.slice(visibleCount);
+  const collapsed = visibleCount === 0 && files.length > 0;
+
+  const renderChip = (filePath, idx) => (
+    <FileEntry
+      key={`${filePath}-${idx}`}
+      variant="chip"
+      filePath={filePath}
+      toolhintId={`${tooltipPrefix}-chip-${idx}`}
+      editMode={editMode}
+      onRemove={onRemove}
+    />
+  );
+
+  const renderOverflowList = (list) => (
+    <OverflowList>
+      {list.map((p, i) => (
+        <FileEntry
+          key={`o-${p}-${i}`}
+          variant="overflow"
+          filePath={p}
+          toolhintId={`${tooltipPrefix}-overflow-${i}`}
+          editMode={editMode}
+          onRemove={onRemove}
+        />
+      ))}
+    </OverflowList>
+  );
+
+  return (
+    <Wrapper className="file-value-cell" ref={containerRef}>
+      {collapsed ? (
+        <>
+          <Dropdown
+            placement="bottom-start"
+            appendTo={() => document.body}
+            onMount={() => setSummaryOpen(true)}
+            onHidden={() => setSummaryOpen(false)}
+            icon={(
+              <button
+                type="button"
+                data-testid="multipart-file-summary"
+                className="file-summary-chip"
+                onClick={(e) => e.stopPropagation()}
+                title={`${files.length} file${files.length > 1 ? 's' : ''}`}
+              >
+                <IconFile size={14} stroke={1.5} className="file-chip-icon" />
+                <span>{files.length} file{files.length > 1 ? 's' : ''}</span>
+                <IconChevronDown size={14} stroke={1.5} />
+              </button>
+            )}
+          >
+            {summaryOpen ? renderOverflowList(files) : null}
+          </Dropdown>
+
+        </>
+      ) : (
+        <>
+          <div className="file-chips-row">
+            {visible.map((p, i) => renderChip(p, i))}
+          </div>
+          {overflow.length > 0 && (
+            <Dropdown
+              placement="bottom-end"
+              appendTo={() => document.body}
+              onMount={() => setMoreOpen(true)}
+              onHidden={() => setMoreOpen(false)}
+              icon={(
+                <button
+                  type="button"
+                  data-testid="multipart-file-more"
+                  className="file-more-chip"
+                  onClick={(e) => e.stopPropagation()}
+                  title={`${overflow.length} more file${overflow.length > 1 ? 's' : ''}`}
+                >
+                  +{overflow.length} more
+                </button>
+              )}
+            >
+              {moreOpen ? renderOverflowList(overflow) : null}
+            </Dropdown>
+          )}
+        </>
+      )}
+      {editMode && (
+        <button
+          type="button"
+          data-testid="multipart-file-upload"
+          className="upload-btn ml-1"
+          onClick={onAdd}
+          title="Add files"
+        >
+          <IconUpload size={16} />
+        </button>
+      )}
+    </Wrapper>
+  );
+};
+
+export default MultipartFileChipsCell;
--- a/packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationDetail.js
+++ b/packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationDetail.js
@@ -0,0 +1,95 @@
+import DOMPurify from 'dompurify';
+import { parseToRgb, rgba } from 'polished';
+import { useTheme } from 'providers/Theme';
+import { humanizeDate } from 'utils/common';
+
+// color may be any CSS color (hex, rgb, hsl): solid text on a 15% tinted bg.
+// Falls back to the theme's purple when the supplied color can't be parsed.
+export const getBadgeStyle = (color, theme) => {
+  let badgeColor = theme.colors.text.purple;
+  try {
+    parseToRgb(color);
+    badgeColor = color;
+  } catch {
+    // invalid color; keep the fallback
+  }
+  return {
+    backgroundColor: rgba(badgeColor, 0.15),
+    color: badgeColor
+  };
+};
+
+const getSanitizedDescription = (description) => {
+  return DOMPurify.sanitize(description || '', {
+    ALLOWED_TAGS: ['a', 'ul', 'img', 'li', 'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'br', 'strong', 'em'],
+    ALLOWED_ATTR: ['href', 'style', 'target', 'src', 'alt']
+  });
+};
+
+const NotificationDetail = ({ notification }) => {
+  const { theme } = useTheme();
+
+  // Rendered in a sandboxed iframe (no allow-scripts); theme CSS is inlined
+  // since the iframe doesn't inherit app styles.
+  const buildDescriptionDocument = (description) => {
+    const body = getSanitizedDescription(description);
+    return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <base target="_blank" />
+    <style>
+      html, body { margin: 0; padding: 0; background: ${theme.notifications.bg}; }
+      body {
+        padding: 8px 12px;
+        font-family: Inter, sans-serif;
+        font-size: 12px;
+        line-height: 20px;
+        font-weight: 500;
+        color: ${theme.colors.text.muted};
+        word-break: break-word;
+      }
+      p { margin: 0 0 0.75rem 0; }
+      a { color: ${theme.textLink}; text-decoration: underline; }
+      h1, h2, h3, h4, h5, h6 { font-size: 13px; font-weight: 600; margin: 0 0 0.5rem 0; color: ${theme.text}; }
+      ul { padding-left: 1.25rem; margin: 0 0 0.75rem 0; }
+      img { max-width: 100%; }
+    </style>
+  </head>
+  <body>${body}</body>
+</html>`;
+  };
+
+  if (!notification) {
+    return (
+      <div className="notif-detail">
+        <div className="notif-empty">Select a notification to read more.</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="notif-detail">
+      <div className="notif-detail-header">
+        <div className="notif-detail-meta">
+          {notification.type && (
+            <span className="notif-type-badge" style={getBadgeStyle(notification.color, theme)}>
+              {notification.type}
+            </span>
+          )}
+          <span className="notif-detail-date">{humanizeDate(notification.date)}</span>
+        </div>
+        <div className="notif-detail-title">{notification.title}</div>
+      </div>
+      <iframe
+        key={notification.id}
+        className="notif-detail-body"
+        title="Notification details"
+        sandbox="allow-popups"
+        srcDoc={buildDescriptionDocument(notification.description)}
+      />
+    </div>
+  );
+};
+
+export default NotificationDetail;
--- a/packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationDetail.spec.js
+++ b/packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationDetail.spec.js
@@ -0,0 +1,40 @@
+import { rgba } from 'polished';
+import { getBadgeStyle } from './NotificationDetail';
+
+describe('getBadgeStyle', () => {
+  const theme = { colors: { text: { purple: '#8e44ad' } } };
+
+  it('uses a valid hex color for both text and tinted background', () => {
+    const style = getBadgeStyle('#ff0000', theme);
+    expect(style).toEqual({
+      backgroundColor: rgba('#ff0000', 0.15),
+      color: '#ff0000'
+    });
+  });
+
+  it('accepts rgb color strings', () => {
+    const style = getBadgeStyle('rgb(0, 128, 255)', theme);
+    expect(style.color).toBe('rgb(0, 128, 255)');
+    expect(style.backgroundColor).toBe(rgba('rgb(0, 128, 255)', 0.15));
+  });
+
+  it('accepts hsl color strings', () => {
+    const style = getBadgeStyle('hsl(210, 100%, 50%)', theme);
+    expect(style.color).toBe('hsl(210, 100%, 50%)');
+    expect(style.backgroundColor).toBe(rgba('hsl(210, 100%, 50%)', 0.15));
+  });
+
+  it('falls back to the theme purple for an unparseable color', () => {
+    const style = getBadgeStyle('not-a-color', theme);
+    expect(style).toEqual({
+      backgroundColor: rgba(theme.colors.text.purple, 0.15),
+      color: theme.colors.text.purple
+    });
+  });
+
+  it('falls back to the theme purple when color is undefined', () => {
+    const style = getBadgeStyle(undefined, theme);
+    expect(style.color).toBe(theme.colors.text.purple);
+    expect(style.backgroundColor).toBe(rgba(theme.colors.text.purple, 0.15));
+  });
+});
--- a/packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationList.js
+++ b/packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationList.js
@@ -0,0 +1,35 @@
+import classnames from 'classnames';
+import { relativeDate } from 'utils/common';
+
+const NotificationList = ({ items, selectedId, onSelect }) => {
+  return (
+    <ul className="notif-list">
+      {items.map((notification) => {
+        const isActive = selectedId === notification.id;
+        const isUnread = !notification.read;
+        return (
+          <li
+            key={notification.id}
+            className={classnames('notif-list-item', { active: isActive, unread: isUnread })}
+            role="button"
+            tabIndex={0}
+            onClick={() => onSelect(notification)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                onSelect(notification);
+              }
+            }}
+          >
+            <div className={classnames('notif-item-title', { unread: isUnread })}>{notification.title}</div>
+            <div className="notif-item-date">{relativeDate(notification.date)}</div>
+          </li>
+        );
+      })}
+      {items.length === 0 && <li className="notif-list-empty">No notifications to show.</li>}
+    </ul>
+  );
+};
+
+export default NotificationList;
--- a/packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationTabs.js
+++ b/packages/bruno-app/src/components/Notifications/NotificationsModal/NotificationTabs.js
@@ -0,0 +1,74 @@
+import classnames from 'classnames';
+import { IconDotsVertical } from '@tabler/icons';
+import { useEffect, useRef } from 'react';
+import Dropdown from 'components/Dropdown';
+import { TABS } from '../hooks/useNotifications';
+
+const menuIcon = (
+  <span className="notif-menu-trigger" aria-label="Notifications menu">
+    <IconDotsVertical size={16} strokeWidth={1.5} />
+  </span>
+);
+
+const NotificationTabs = ({ activeTab, unreadCount, onTabChange, onMarkAllRead, onClearAll }) => {
+  const dropdownTippyRef = useRef(null);
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+  const hideDropdown = () => dropdownTippyRef.current?.hide();
+
+  // Clicks inside the detail iframe don't bubble to the parent document, so
+  // tippy's outside-click dismissal never fires. Closing on iframe focus covers it.
+  useEffect(() => {
+    const onWindowBlur = () => {
+      if (document.activeElement?.tagName === 'IFRAME') {
+        hideDropdown();
+      }
+    };
+    window.addEventListener('blur', onWindowBlur);
+    return () => window.removeEventListener('blur', onWindowBlur);
+  }, []);
+
+  return (
+    <div className="notif-tabs">
+      <div className="notif-tab-group">
+        <button
+          type="button"
+          className={classnames('notif-tab', { active: activeTab === TABS.ALL })}
+          onClick={() => onTabChange(TABS.ALL)}
+        >
+          All
+        </button>
+        <button
+          type="button"
+          className={classnames('notif-tab', { active: activeTab === TABS.UNREAD })}
+          onClick={() => onTabChange(TABS.UNREAD)}
+        >
+          Unread
+          {unreadCount > 0 && <span className="notif-tab-badge">{unreadCount}</span>}
+        </button>
+      </div>
+      <Dropdown icon={menuIcon} placement="bottom-end" onCreate={onDropdownCreate}>
+        <div
+          className={classnames('dropdown-item', { disabled: unreadCount === 0 })}
+          onClick={() => {
+            if (unreadCount === 0) return;
+            hideDropdown();
+            onMarkAllRead();
+          }}
+        >
+          Mark all as read
+        </div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            hideDropdown();
+            onClearAll();
+          }}
+        >
+          Clear all
+        </div>
+      </Dropdown>
+    </div>
+  );
+};
+
+export default NotificationTabs;
--- a/packages/bruno-app/src/components/Notifications/NotificationsModal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Notifications/NotificationsModal/StyledWrapper.js
@@ -0,0 +1,267 @@
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 800px;
+  height: 520px;
+  max-width: 100%;
+  max-height: 70vh;
+  overflow: hidden;
+  background-color: ${(props) => props.theme.notifications.bg};
+
+  /* While dragging, stop the detail iframe from swallowing mousemove events,
+     which would otherwise freeze the resize until the cursor re-enters the handle. */
+  &.dragging .notif-detail-body {
+    pointer-events: none;
+  }
+
+  .notif-sidebar {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    background-color: ${(props) => props.theme.notifications.list.bg};
+  }
+
+  .notif-resize-handle {
+    flex: 0 0 1px;
+    cursor: col-resize;
+    background: ${(props) => props.theme.notifications.list.borderBottom};
+    position: relative;
+    user-select: none;
+    transition: background-color 0.15s ease;
+
+    /* widen the hit target without bloating the visible line */
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -3px;
+      right: -3px;
+    }
+
+    &:hover,
+    &.dragging {
+      background: ${(props) => props.theme.colors.text.yellow};
+    }
+  }
+
+  .notif-tabs {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 7px 12px;
+    gap: 6px;
+    border-bottom: 1px solid ${(props) => props.theme.notifications.list.borderBottom};
+  }
+
+  .notif-tab-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .notif-tab {
+    height: 24px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    border: 1px solid ${(props) => props.theme.notifications.list.borderBottom};
+    font-size: 12px;
+    line-height: 20px;
+    font-weight: 400;
+    color: ${(props) => props.theme.text};
+    background: transparent;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+
+    &.active {
+      background-color: ${(props) => props.theme.brand};
+      color: ${(props) => props.theme.background.base};
+      font-weight: 500;
+
+      .notif-tab-badge {
+        background-color: ${(props) => props.theme.background.base};
+        color: ${(props) => props.theme.brand};
+        border-color: ${(props) => props.theme.background.base};
+      }
+    }
+  }
+
+  .notif-tab-badge {
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 999px;
+    border: 1px solid ${(props) => props.theme.notifications.list.borderBottom};
+    background-color: ${(props) => rgba(props.theme.brand, 0.1)};
+    color: ${(props) => props.theme.brand};
+    font-size: 11px;
+    line-height: 14px;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .notif-menu-trigger {
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.muted};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: ${(props) => props.theme.notifications.list.hoverBg};
+    }
+  }
+
+  .notif-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+    background-color: ${(props) => props.theme.notifications.list.bg};
+  }
+
+  .notif-list-empty {
+    padding: 16px 12px;
+    color: ${(props) => props.theme.colors.text.muted};
+    font-size: 12px;
+    font-style: italic;
+    text-align: center;
+  }
+
+  .notif-list-item {
+    position: relative;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-bottom: solid 1px ${(props) => props.theme.notifications.list.borderBottom};
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    &:hover {
+      background-color: ${(props) => props.theme.notifications.list.hoverBg};
+    }
+
+    &.unread {
+      background-color: ${(props) => props.theme.notifications.list.active.bg};
+
+      &:hover {
+        background-color: ${(props) => props.theme.notifications.list.hoverBg};
+      }
+    }
+
+    &.active {
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background-color: ${(props) => props.theme.colors.text.yellow};
+      }
+    }
+  }
+
+  .notif-item-title {
+    color: ${(props) => props.theme.text};
+    font-size: 13px;
+    line-height: 20px;
+    font-weight: 400;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+
+    &.unread {
+      font-weight: 600;
+    }
+  }
+
+  .notif-item-date,
+  .notif-detail-date {
+    color: ${(props) => props.theme.colors.text.muted};
+    font-size: 12px;
+    line-height: 20px;
+    font-weight: 500;
+  }
+
+  .notif-detail {
+    flex: 1;
+    min-width: 0;
+    padding: 6px 6px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .notif-detail-header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 12px;
+  }
+
+  .notif-detail-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 1px;
+    min-height: 24px;
+  }
+
+  .notif-type-badge {
+    height: 24px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    border: 1px solid ${(props) => props.theme.notifications.list.borderBottom};
+    font-size: 12px;
+    line-height: 20px;
+    font-weight: 400;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .notif-detail-title {
+    color: ${(props) => props.theme.text};
+    font-size: 13px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+  .notif-detail-body {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    border: none;
+    background: transparent;
+  }
+
+  .notif-empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    color: ${(props) => props.theme.colors.text.muted};
+    font-size: 13px;
+  }
+
+  .notif-empty-text {
+    font-style: italic;
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/Notifications/NotificationsModal/index.js
+++ b/packages/bruno-app/src/components/Notifications/NotificationsModal/index.js
@@ -0,0 +1,89 @@
+import { useRef } from 'react';
+import classnames from 'classnames';
+import { useDragResize } from 'hooks/useDragResize';
+import { usePersistedState } from 'hooks/usePersistedState';
+import Modal from 'components/Modal/index';
+import Portal from 'components/Portal';
+import StyledWrapper from './StyledWrapper';
+import NotificationTabs from './NotificationTabs';
+import NotificationList from './NotificationList';
+import NotificationDetail from './NotificationDetail';
+
+const DEFAULT_SIDEBAR_WIDTH = 260;
+const SIDEBAR_MIN = 200;
+// Reserved for the detail pane; caps the sidebar at ~420px in the 800px modal.
+const DETAIL_MIN = 380;
+
+const NotificationsModal = ({ notifications, onClose }) => {
+  const {
+    visibleNotifications,
+    listed,
+    unreadCount,
+    activeTab,
+    selectedNotification,
+    onTabChange,
+    onSelect,
+    onMarkAllRead,
+    onClearAll
+  } = notifications;
+
+  const containerRef = useRef(null);
+  const [sidebarWidth, setSidebarWidth] = usePersistedState({
+    key: 'notification-sidebar',
+    default: DEFAULT_SIDEBAR_WIDTH
+  });
+  const { dragging, dragWidth, dragbarProps } = useDragResize({
+    containerRef,
+    width: sidebarWidth,
+    onWidthChange: (w) => setSidebarWidth(w ?? DEFAULT_SIDEBAR_WIDTH),
+    minLeft: SIDEBAR_MIN,
+    minRight: DETAIL_MIN
+  });
+  const effectiveWidth = dragging ? dragWidth : sidebarWidth;
+  const isEmpty = visibleNotifications.length === 0;
+
+  return (
+    <Portal>
+      <Modal
+        size="md"
+        title="Notifications"
+        confirmText="Close"
+        handleConfirm={onClose}
+        handleCancel={onClose}
+        hideFooter={true}
+        disableCloseOnOutsideClick={true}
+        disableEscapeKey={true}
+        noPadding={true}
+      >
+        <StyledWrapper className={classnames('notifications-modal', { dragging })} ref={containerRef}>
+          <div className="notif-sidebar" style={{ width: effectiveWidth, flexBasis: effectiveWidth }}>
+            <NotificationTabs
+              activeTab={activeTab}
+              unreadCount={unreadCount}
+              onTabChange={onTabChange}
+              onMarkAllRead={onMarkAllRead}
+              onClearAll={onClearAll}
+            />
+            <NotificationList items={listed} selectedId={selectedNotification?.id} onSelect={onSelect} />
+          </div>
+          <div
+            className={classnames('notif-resize-handle', { dragging })}
+            {...dragbarProps}
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize sidebar"
+          />
+          {isEmpty ? (
+            <div className="notif-empty">
+              <div className="notif-empty-text">You are all caught up!</div>
+            </div>
+          ) : (
+            <NotificationDetail notification={selectedNotification} />
+          )}
+        </StyledWrapper>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default NotificationsModal;
--- a/Show More
+++ b/Show More