feat(hooks): refactor to initialise hook-manager only once per req execution

- Eliminated unused imports from collection.js to clean up the codebase.
- Added functionality to send UI updates after executing collection-level hooks in network/index.js, improving responsiveness and user experience.

.github/workflows/tests.yml

@@ -58,6 +58,8 @@ jobs:
         run: npm run test --workspace=packages/bruno-converters
       - name: Test Package bruno-electron
         run: npm run test --workspace=packages/bruno-electron
+      - name: Test Package bruno-requests
+        run: npm run test --workspace=packages/bruno-requests
 
   cli-test:
     name: CLI Tests
@@ -98,12 +100,19 @@ jobs:
           npm install
           node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit --sandbox developer
 
+      - name: Run comprehensive hooks tests
+        run: |
+          cd packages/bruno-tests/hooks-comprehensive-tests
+          node ../../bruno-cli/bin/bru.js run --env Prod --output junit-hooks.xml --format junit
+
       - name: Publish Test Report
         uses: EnricoMi/publish-unit-test-result-action@v2
         if: always()
         with:
           check_name: CLI Test Results
-          files: packages/bruno-tests/collection/junit.xml
+          files: |
+            packages/bruno-tests/collection/junit.xml
+            packages/bruno-tests/hooks-comprehensive-tests/junit-hooks.xml
           comment_mode: always
   e2e-test:
     name: Playwright E2E Tests

.gitignore

@@ -48,12 +48,14 @@ yarn-error.log*
 bruno.iml
 .idea
 .vscode
+.cursor
 
 # Playwright
 /blob-report/
 
 # Development plan files
 CLAUDE.md
+AGENTS.md
 *.plan.md
 
 # packages dist

docs/readme/readme_ar.md

@@ -3,7 +3,7 @@
 
 ### برونو - بيئة تطوير مفتوحة المصدر لاستكشاف واختبار واجهات برمجة التطبيقات (APIs).
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_bn.md

@@ -3,7 +3,7 @@
 
 ### ব্রুনো - API অন্বেষণ এবং পরীক্ষা করার জন্য ওপেনসোর্স IDE।
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_cn.md

@@ -3,7 +3,7 @@
 
 ### Bruno - 开源 IDE，用于探索和测试 API。
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_de.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Opensource IDE zum Erkunden und Testen von APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_es.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE de código abierto para explorar y probar APIs.
 
-[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Actividad de Commits](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_fa.md

@@ -3,7 +3,7 @@
 
 ### برونو یا Bruno - محیط توسعه متن باز برای تست و توسعه API ها
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_fr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE Opensource pour explorer et tester des APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_it.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Opensource IDE per esplorare e testare gli APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ja.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API の検証・動作テストのためのオープンソース IDE.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ka.md

@@ -3,7 +3,7 @@
 
 ### ბრუნო - ღია წყაროების IDE API-ების შესწავლისა და ტესტირებისათვის.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_kr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API 탐색 및 테스트를 위한 오픈소스 IDE.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_nl.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Open source IDE voor het verkennen en testen van API's.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_pl.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Otwartoźródłowe IDE do eksploracji i testów APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_pt_br.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE de código aberto para explorar e testar APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ro.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Mediu integrat de dezvoltare cu sursă deschisă pentru explorarea și testarea API-urilor.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ru.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE с открытым исходным кодом для изучения и тестирования API.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_tr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API'leri keşfetmek ve test etmek için açık kaynaklı IDE.
 
-[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ua.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE із відкритим кодом для тестування та дослідження API
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_zhtw.md

@@ -3,7 +3,7 @@
 
 ### Bruno - 探索和測試 API 的開源 IDE 工具
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

package-lock.json

@@ -42,6 +42,7 @@
         "@types/node": "^22.14.1",
         "@typescript-eslint/parser": "^8.39.0",
         "concurrently": "^8.2.2",
+        "cross-env": "10.1.0",
         "eslint": "^9.26.0",
         "eslint-plugin-diff": "^2.0.3",
         "fs-extra": "^11.1.1",
@@ -3771,6 +3772,13 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
       "license": "MIT"
     },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -6458,56 +6466,6 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@postman/form-data": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@postman/form-data/-/form-data-3.1.1.tgz",
-      "integrity": "sha512-vjh8Q2a8S6UCm/KKs31XFJqEEgmbjBmpPNVV2eVav6905wyFAwaUOBGA1NPBI4ERH9MMZc6w0umFgM6WbEPMdg==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@postman/tough-cookie": {
-      "version": "4.1.3-postman.1",
-      "resolved": "https://registry.npmjs.org/@postman/tough-cookie/-/tough-cookie-4.1.3-postman.1.tgz",
-      "integrity": "sha512-txpgUqZOnWYnUHZpHjkfb0IwVH4qJmyq77pPnJLlfhMtdCLMFTEeQHlzQiK906aaNCe4NEB5fGJHo9uzGbFMeA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@postman/tough-cookie/node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/@postman/tunnel-agent": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/@postman/tunnel-agent/-/tunnel-agent-0.6.4.tgz",
-      "integrity": "sha512-CJJlq8V7rNKhAw4sBfjixKpJW00SHqebqNUQKxMoepgeWZIbdPcD+rguRcivGhS4N12PymDcKgUgSD4rVC+RjQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/@prantlf/jsonlint": {
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/@prantlf/jsonlint/-/jsonlint-16.0.0.tgz",
@@ -11429,15 +11387,6 @@
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
       "license": "MIT"
     },
-    "node_modules/asn1": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
-      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
     "node_modules/asn1.js": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -11476,6 +11425,7 @@
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -11626,15 +11576,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/aws4": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
@@ -12028,15 +11969,6 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "license": "MIT"
     },
-    "node_modules/bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -12229,15 +12161,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/brotli": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
-      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.1.2"
-      }
-    },
     "node_modules/browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -12750,12 +12673,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
-      "license": "Apache-2.0"
-    },
     "node_modules/chai": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.5.0.tgz",
@@ -13963,22 +13880,21 @@
       }
     },
     "node_modules/cross-env": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.1"
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
       },
       "bin": {
-        "cross-env": "src/bin/cross-env.js",
-        "cross-env-shell": "src/bin/cross-env-shell.js"
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
       },
       "engines": {
-        "node": ">=10.14",
-        "npm": ">=6",
-        "yarn": ">=1"
+        "node": ">=20"
       }
     },
     "node_modules/cross-fetch": {
@@ -14375,18 +14291,6 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
-    "node_modules/dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -15110,22 +15014,6 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
-    "node_modules/ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
-      "license": "MIT",
-      "dependencies": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
-    "node_modules/ecc-jsbn/node_modules/jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "license": "MIT"
-    },
     "node_modules/ecdsa-sig-formatter": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -16424,12 +16312,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "license": "MIT"
-    },
     "node_modules/extract-files": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/extract-files/-/extract-files-9.0.0.tgz",
@@ -16555,6 +16437,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
@@ -17037,15 +16920,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-9.1.0.tgz",
@@ -17524,15 +17398,6 @@
         "node": ">=6.0"
       }
     },
-    "node_modules/getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0"
-      }
-    },
     "node_modules/github-markdown-css": {
       "version": "5.8.1",
       "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-5.8.1.tgz",
@@ -17815,57 +17680,12 @@
         "@grpc/grpc-js": "^1.12.6"
       }
     },
-    "node_modules/har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/har-validator": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-      "deprecated": "this library is no longer supported",
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^6.12.3",
-        "har-schema": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/har-validator-compiled": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/har-validator-compiled/-/har-validator-compiled-1.0.0.tgz",
       "integrity": "sha512-dher7nFSx+Ef6OoqVveLClh8itAR3vd8Qx70Lh/hEgP1iGeARAolbci7Y8JBrHIYgFCT6xRdvvL16AR9Zh07Dw==",
       "license": "MIT"
     },
-    "node_modules/har-validator/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/har-validator/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "license": "MIT"
-    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -18338,20 +18158,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/http-signature": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
-      "integrity": "sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==",
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^2.0.2",
-        "sshpk": "^1.14.1"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/http2-wrapper": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
@@ -19168,12 +18974,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "license": "MIT"
-    },
     "node_modules/is-valid-path": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-valid-path/-/is-valid-path-0.1.1.tgz",
@@ -19236,12 +19036,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-      "license": "MIT"
-    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -20822,12 +20616,6 @@
         "node": "*"
       }
     },
-    "node_modules/json-schema": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "license": "(AFL-2.1 OR BSD-3-Clause)"
-    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -20851,7 +20639,9 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "license": "ISC"
+      "dev": true,
+      "license": "ISC",
+      "optional": true
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -20892,44 +20682,6 @@
         "node": "*"
       }
     },
-    "node_modules/jsprim": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
-      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.4.0",
-        "verror": "1.10.0"
-      }
-    },
-    "node_modules/jsprim/node_modules/extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT"
-    },
-    "node_modules/jsprim/node_modules/verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      }
-    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -22030,15 +21782,6 @@
         "node": ">= 6.0.0"
       }
     },
-    "node_modules/mustache": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
-      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
-      "license": "MIT",
-      "bin": {
-        "mustache": "bin/mustache"
-      }
-    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -22259,44 +22002,6 @@
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "license": "MIT"
     },
-    "node_modules/node-vault": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/node-vault/-/node-vault-0.10.2.tgz",
-      "integrity": "sha512-//uc9/YImE7Dx0QHdwMiAzLaOumiKUnOUP8DymgtkZ8nsq6/V2LKvEu6kw91Lcruw8lWUfj4DO7CIXNPRWBuuA==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.4",
-        "mustache": "^4.2.0",
-        "postman-request": "^2.88.1-postman.33",
-        "tv4": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 16.0.0"
-      }
-    },
-    "node_modules/node-vault/node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/node-vault/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -22367,15 +22072,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -23090,12 +22786,6 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "license": "MIT"
     },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "license": "MIT"
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -24075,57 +23765,6 @@
         "node": ">=15.0.0"
       }
     },
-    "node_modules/postman-request": {
-      "version": "2.88.1-postman.40",
-      "resolved": "https://registry.npmjs.org/postman-request/-/postman-request-2.88.1-postman.40.tgz",
-      "integrity": "sha512-uE4AiIqhjtHKp4pj9ei7fkdfNXEX9IqDBlK1plGAQne6y79UUlrTdtYLhwXoO0AMOvqyl9Ar+BU6Eo6P/MPgfg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@postman/form-data": "~3.1.1",
-        "@postman/tough-cookie": "~4.1.3-postman.1",
-        "@postman/tunnel-agent": "^0.6.4",
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.12.0",
-        "brotli": "^1.3.3",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "har-validator": "~5.1.3",
-        "http-signature": "~1.3.1",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "^2.1.35",
-        "oauth-sign": "~0.9.0",
-        "performance-now": "^2.1.0",
-        "qs": "~6.5.3",
-        "safe-buffer": "^5.1.2",
-        "stream-length": "^1.0.2",
-        "uuid": "^8.3.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      }
-    },
-    "node_modules/postman-request/node_modules/qs": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/postman-request/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -24427,6 +24066,7 @@
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
       "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "punycode": "^2.3.1"
@@ -24471,6 +24111,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -27386,37 +27027,6 @@
       "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
       "license": "BSD-3-Clause"
     },
-    "node_modules/sshpk": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
-      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
-      "license": "MIT",
-      "dependencies": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
-      },
-      "bin": {
-        "sshpk-conv": "bin/sshpk-conv",
-        "sshpk-sign": "bin/sshpk-sign",
-        "sshpk-verify": "bin/sshpk-verify"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sshpk/node_modules/jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "license": "MIT"
-    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -27587,21 +27197,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/stream-length": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/stream-length/-/stream-length-1.0.2.tgz",
-      "integrity": "sha512-aI+qKFiwoDV4rsXiS7WRoCt+v2RX1nUj17+KJC5r2gfh5xoSJIfP6Y3Do/HtvesFcTSWthIuJ3l1cvKQY/+nZg==",
-      "license": "WTFPL",
-      "dependencies": {
-        "bluebird": "^2.6.2"
-      }
-    },
-    "node_modules/stream-length/node_modules/bluebird": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz",
-      "integrity": "sha512-UfFSr22dmHPQqPP9XWHRhq+gWnHCYguQGkXQlbyPtW5qTnhFWA8/iXg765tH0cAjy7l/zPJ1aBTO0g5XgA7kvQ==",
-      "license": "MIT"
-    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -29184,12 +28779,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-      "license": "Unlicense"
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -29454,6 +29043,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -30477,7 +30067,7 @@
         "polished": "^4.3.1",
         "posthog-node": "4.2.1",
         "prettier": "^2.7.1",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
         "query-string": "^7.0.1",
         "react": "19.0.0",
         "react-copy-to-clipboard": "^5.1.0",
@@ -30492,6 +30082,7 @@
         "react-player": "^2.16.0",
         "react-redux": "^7.2.9",
         "react-tooltip": "^5.5.2",
+        "react-virtuoso": "^4.18.1",
         "sass": "^1.46.0",
         "semver": "^7.7.1",
         "shell-quote": "^1.8.3",
@@ -31863,6 +31454,25 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "packages/bruno-app/node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "packages/bruno-app/node_modules/electron-to-chromium": {
       "version": "1.5.157",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.157.tgz",
@@ -31932,6 +31542,31 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "packages/bruno-app/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "packages/bruno-app/node_modules/react-virtuoso": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.18.1.tgz",
+      "integrity": "sha512-KF474cDwaSb9+SJ380xruBB4P+yGWcVkcu26HtMqYNMTYlYbrNy8vqMkE+GpAApPPufJqgOLMoWMFG/3pJMXUA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18 || >= 19",
+        "react-dom": ">=16 || >=17 || >= 18 || >=19"
+      }
+    },
     "packages/bruno-app/node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -32017,7 +31652,7 @@
         "iconv-lite": "^0.6.3",
         "js-yaml": "^4.1.1",
         "lodash": "^4.17.21",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
         "socks-proxy-agent": "^8.0.2",
         "xmlbuilder": "^15.1.1",
         "yargs": "^17.6.2"
@@ -33067,6 +32702,21 @@
         "node": ">=12"
       }
     },
+    "packages/bruno-cli/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "packages/bruno-common": {
       "name": "@usebruno/common",
       "version": "0.1.0",
@@ -33652,9 +33302,9 @@
       "license": "MIT"
     },
     "packages/bruno-converters/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -33757,7 +33407,7 @@
         "lodash": "^4.17.21",
         "mime-types": "^2.1.35",
         "nanoid": "3.3.8",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
         "socks-proxy-agent": "^8.0.2",
         "tough-cookie": "^6.0.0",
         "uuid": "^9.0.0",
@@ -35243,6 +34893,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "packages/bruno-electron/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "packages/bruno-electron/node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -35492,7 +35157,6 @@
         "moment": "^2.29.4",
         "nanoid": "3.3.8",
         "node-fetch": "^2.7.0",
-        "node-vault": "^0.10.2",
         "path": "^0.12.7",
         "quickjs-emscripten": "^0.29.2",
         "tv4": "^1.3.0",
@@ -35607,7 +35271,10 @@
         "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",
+        "socks-proxy-agent": "~8.0.5",
         "system-ca": "^2.0.1",
         "tough-cookie": "^6.0.0",
         "ws": "^8.18.3"
@@ -35707,9 +35374,7 @@
       "version": "0.7.0",
       "license": "MIT",
       "dependencies": {
-        "nanoid": "3.3.8"
-      },
-      "peerDependencies": {
+        "nanoid": "3.3.8",
         "yup": "^0.32.11"
       }
     },
@@ -36004,4 +35669,4 @@
       }
     }
   }
-}
+}

package.json

@@ -36,6 +36,7 @@
     "@types/node": "^22.14.1",
     "@typescript-eslint/parser": "^8.39.0",
     "concurrently": "^8.2.2",
+    "cross-env": "10.1.0",
     "eslint": "^9.26.0",
     "eslint-plugin-diff": "^2.0.3",
     "fs-extra": "^11.1.1",
@@ -78,12 +79,13 @@
     "build:electron:rpm": "./scripts/build-electron.sh rpm",
     "build:electron:snap": "./scripts/build-electron.sh snap",
     "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:ssl": "playwright test --project=ssl",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "lint": "node --max_old_space_size=4096 $(npx which eslint)",
-    "lint:fix": "node --max_old_space_size=4096 $(npx which eslint) --fix",
+    "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"
   },
   "nano-staged": {

packages/bruno-app/package.json

@@ -69,7 +69,7 @@
     "polished": "^4.3.1",
     "posthog-node": "4.2.1",
     "prettier": "^2.7.1",
-    "qs": "^6.11.0",
+    "qs": "^6.14.1",
     "query-string": "^7.0.1",
     "react": "19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -84,6 +84,7 @@
     "react-player": "^2.16.0",
     "react-redux": "^7.2.9",
     "react-tooltip": "^5.5.2",
+    "react-virtuoso": "^4.18.1",
     "sass": "^1.46.0",
     "semver": "^7.7.1",
     "shell-quote": "^1.8.3",

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

@@ -18,9 +18,9 @@ import ImportWorkspace from 'components/WorkspaceSidebar/ImportWorkspace';
 
 import IconBottombarToggle from 'components/Icons/IconBottombarToggle/index';
 import StyledWrapper from './StyledWrapper';
-import { toTitleCase } from 'utils/common/index';
 import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
 import { isMacOS, isWindowsOS, isLinuxOS } from 'utils/common/platform';
+import classNames from 'classnames';
 
 const getOsClass = () => {
   if (isMacOS()) return 'os-mac';
@@ -29,6 +29,12 @@ const getOsClass = () => {
   return 'os-other';
 };
 
+// Helper to get display name for workspace
+export const getWorkspaceDisplayName = (name) => {
+  if (!name) return 'Untitled Workspace';
+  return name;
+};
+
 const AppTitleBar = () => {
   const dispatch = useDispatch();
   const [isFullScreen, setIsFullScreen] = useState(false);
@@ -115,7 +121,7 @@ const AppTitleBar = () => {
   const WorkspaceName = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="workspace-name-container" {...props}>
-        <span className="workspace-name">{toTitleCase(activeWorkspace?.name) || 'Default Workspace'}</span>
+        <span data-testid="workspace-name" className={classNames('workspace-name', { 'italic text-muted': !activeWorkspace?.name })}>{getWorkspaceDisplayName(activeWorkspace?.name)}</span>
         <IconChevronDown size={14} stroke={1.5} className="chevron-icon" />
       </div>
     );
@@ -127,7 +133,7 @@ const AppTitleBar = () => {
 
   const handleWorkspaceSwitch = (workspaceUid) => {
     dispatch(switchWorkspace(workspaceUid));
-    toast.success(`Switched to ${workspaces.find((w) => w.uid === workspaceUid)?.name}`);
+    toast.success(`Switched to ${getWorkspaceDisplayName(workspaces.find((w) => w.uid === workspaceUid)?.name)}`);
   };
 
   const handleOpenWorkspace = async () => {
@@ -178,7 +184,7 @@ const AppTitleBar = () => {
 
       return {
         id: workspace.uid,
-        label: toTitleCase(workspace.name),
+        label: getWorkspaceDisplayName(workspace.name),
         onClick: () => handleWorkspaceSwitch(workspace.uid),
         className: `workspace-item ${isActive ? 'active' : ''}`,
         rightSection: (
@@ -190,11 +196,7 @@ const AppTitleBar = () => {
                 label={isPinned ? 'Unpin workspace' : 'Pin workspace'}
                 size="sm"
               >
-                {isPinned ? (
-                  <IconPinned size={14} stroke={1.5} />
-                ) : (
-                  <IconPin size={14} stroke={1.5} />
-                )}
+                {isPinned ? <IconPinned size={14} stroke={1.5} /> : <IconPin size={14} stroke={1.5} />}
               </ActionIcon>
             )}
             {isActive && <IconCheck size={16} stroke={1.5} className="check-icon" />}
@@ -247,12 +249,7 @@ const AppTitleBar = () => {
       <div className="titlebar-content">
         {/* Left section: Home + Workspace */}
         <div className="titlebar-left">
-          <ActionIcon
-            onClick={handleHomeClick}
-            label="Home"
-            size="lg"
-            className="home-button"
-          >
+          <ActionIcon onClick={handleHomeClick} label="Home" size="lg" className="home-button">
             <IconHome size={16} stroke={1.5} />
           </ActionIcon>
 

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

@@ -8,7 +8,7 @@
 import React from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import { setupAutoComplete } from 'utils/codemirror/autocomplete';
+import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
@@ -111,8 +111,12 @@ export default class CodeEditor extends React.Component {
             : cm.replaceSelection('  ', 'end');
         },
         'Shift-Tab': 'indentLess',
-        'Ctrl-Space': 'autocomplete',
-        'Cmd-Space': 'autocomplete',
+        'Ctrl-Space': (cm) => {
+          showRootHints(cm, this.props.showHintsFor);
+        },
+        'Cmd-Space': (cm) => {
+          showRootHints(cm, this.props.showHintsFor);
+        },
         'Ctrl-Y': 'foldAll',
         'Cmd-Y': 'foldAll',
         'Ctrl-I': 'unfoldAll',

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

@@ -11,6 +11,7 @@ import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
 import Button from 'ui/Button';
+import { headerNameRegex, headerValueRegex } from 'utils/common/regex';
 
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
@@ -32,6 +33,22 @@ const Headers = ({ collection }) => {
 
   const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
+  const getRowError = useCallback((row, index, key) => {
+    if (key === 'name') {
+      if (!row.name || row.name.trim() === '') return null;
+      if (!headerNameRegex.test(row.name)) {
+        return 'Header name cannot contain spaces or newlines';
+      }
+    }
+    if (key === 'value') {
+      if (!row.value) return null;
+      if (!headerValueRegex.test(row.value)) {
+        return 'Header value cannot contain newlines';
+      }
+    }
+    return null;
+  }, []);
+
   const columns = [
     {
       key: 'name',
@@ -101,6 +118,7 @@ const Headers = ({ collection }) => {
         rows={headers}
         onChange={handleHeadersChange}
         defaultRow={defaultRow}
+        getRowError={getRowError}
       />
       <div className="flex justify-end mt-2">
         <button className="text-link select-none" onClick={toggleBulkEditMode}>

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

@@ -2,24 +2,44 @@ import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
-import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
+import { updateCollectionRequestScript, updateCollectionResponseScript, updateCollectionHooksScript } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
+import StatusDot from 'components/StatusDot';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
 
 const Script = ({ collection }) => {
   const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('pre-request');
   const preRequestEditorRef = useRef(null);
   const postResponseEditorRef = useRef(null);
+  const hooksEditorRef = useRef(null);
   const requestScript = collection.draft?.root ? get(collection, 'draft.root.request.script.req', '') : get(collection, 'root.request.script.req', '');
   const responseScript = collection.draft?.root ? get(collection, 'draft.root.request.script.res', '') : get(collection, 'root.request.script.res', '');
+  const hooks = collection.draft?.root ? get(collection, 'draft.root.request.script.hooks', '') : get(collection, 'root.request.script.hooks', '');
+
+  // Default to post-response if pre-request script is empty
+  const getInitialTab = () => {
+    const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+    return hasPreRequestScript ? 'pre-request' : 'post-response';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab);
+  const prevCollectionUidRef = useRef(collection.uid);
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  // Update active tab only when switching to a different collection
+  useEffect(() => {
+    if (prevCollectionUidRef.current !== collection.uid) {
+      prevCollectionUidRef.current = collection.uid;
+      const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+      setActiveTab(hasPreRequestScript ? 'pre-request' : 'post-response');
+    }
+  }, [collection.uid, requestScript]);
+
   // Refresh CodeMirror when tab becomes visible
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -27,6 +47,8 @@ const Script = ({ collection }) => {
         preRequestEditorRef.current.editor.refresh();
       } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
         postResponseEditorRef.current.editor.refresh();
+      } else if (activeTab === 'hooks' && hooksEditorRef.current?.editor) {
+        hooksEditorRef.current.editor.refresh();
       }
     }, 0);
 
@@ -51,6 +73,13 @@ const Script = ({ collection }) => {
     );
   };
 
+  const onHooksEdit = (value) => {
+    dispatch(updateCollectionHooksScript({
+      hooks: value,
+      collectionUid: collection.uid
+    }));
+  };
+
   const handleSave = () => {
     dispatch(saveCollectionSettings(collection.uid));
   };
@@ -63,8 +92,18 @@ const Script = ({ collection }) => {
 
       <Tabs value={activeTab} onValueChange={setActiveTab}>
         <TabsList>
-          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
-          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+          <TabsTrigger value="pre-request">
+            Pre Request
+            {requestScript && requestScript.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="post-response">
+            Post Response
+            {responseScript && responseScript.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="hooks">
+            Hooks
+            {hooks && hooks.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="pre-request" className="mt-2">
@@ -96,6 +135,21 @@ const Script = ({ collection }) => {
             showHintsFor={['req', 'res', 'bru']}
           />
         </TabsContent>
+
+        <TabsContent value="hooks" className="mt-2">
+          <CodeEditor
+            ref={hooksEditorRef}
+            collection={collection}
+            value={hooks || ''}
+            theme={displayedTheme}
+            onEdit={onHooksEdit}
+            mode="javascript"
+            onSave={handleSave}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            showHintsFor={['req', 'res', 'bru']}
+          />
+        </TabsContent>
       </Tabs>
 
       <div className="mt-12">

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

@@ -29,7 +29,7 @@ const CollectionSettings = ({ collection }) => {
   };
 
   const root = collection?.draft?.root || collection?.root;
-  const hasScripts = root?.request?.script?.res || root?.request?.script?.req;
+  const hasScripts = root?.request?.script?.res || root?.request?.script?.req || root?.request?.script?.hooks;
   const hasTests = root?.request?.tests;
   const hasDocs = root?.docs;
 

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

@@ -259,10 +259,6 @@ const StyledWrapper = styled.div`
     height: 400px;
     display: flex;
     flex-direction: column;
-    
-    pre {
-      padding: 8px !important;
-    }
 
     .w-full.h-full.relative.flex {
       height: 100% !important;
@@ -321,7 +317,7 @@ const StyledWrapper = styled.div`
       height: 100% !important;
       max-height: 400px !important;
       padding: 0.5rem !important;
-      
+
       .network-logs-pre {
         color: ${(props) => props.theme.console.messageColor} !important;
         font-size: ${(props) => props.theme.font.size.xs} !important;

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

@@ -179,15 +179,34 @@ const EditableTable = ({
     const value = column.getValue ? column.getValue(row) : row[column.key];
     const error = getRowError?.(row, rowIndex, column.key);
 
+    const errorIcon = error && !isEmpty ? (
+      <span>
+        <IconAlertCircle
+          data-tooltip-id={`error-${row.uid}-${column.key}`}
+          className="text-red-600 cursor-pointer ml-1"
+          size={20}
+        />
+        <Tooltip
+          className="tooltip-mod"
+          id={`error-${row.uid}-${column.key}`}
+          html={error}
+        />
+      </span>
+    ) : null;
+
     if (column.render) {
-      return column.render({
-        row,
-        value,
-        rowIndex,
-        isLastEmptyRow: isEmpty,
-        onChange: (newValue) => handleValueChange(row.uid, column.key, newValue),
-        error
-      });
+      return (
+        <div className="flex items-center">
+          {column.render({
+            row,
+            value,
+            rowIndex,
+            isLastEmptyRow: isEmpty,
+            onChange: (newValue) => handleValueChange(row.uid, column.key, newValue)
+          })}
+          {errorIcon}
+        </div>
+      );
     }
 
     return (
@@ -204,20 +223,7 @@ const EditableTable = ({
           placeholder={isEmpty ? column.placeholder || column.name : ''}
           onChange={(e) => handleValueChange(row.uid, column.key, e.target.value)}
         />
-        {error && !isEmpty && (
-          <span>
-            <IconAlertCircle
-              data-tooltip-id={`error-${row.uid}-${column.key}`}
-              className="text-red-600 cursor-pointer"
-              size={20}
-            />
-            <Tooltip
-              className="tooltip-mod"
-              id={`error-${row.uid}-${column.key}`}
-              html={error}
-            />
-          </span>
-        )}
+        {errorIcon}
       </div>
     );
   }, [isLastEmptyRow, getRowError, handleValueChange]);

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

@@ -59,7 +59,7 @@ const CreateEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
   return (
     <Portal>
       <Modal
-        size="sm"
+        size="md"
         title="Create Environment"
         confirmText="Create"
         handleConfirm={onSubmit}

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useMemo, useEffect } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
 import cloneDeep from 'lodash/cloneDeep';
 import { get } from 'lodash';
 import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
@@ -18,14 +19,28 @@ import { getGlobalEnvironmentVariables, flattenItems, isItemARequest } from 'uti
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 import { sensitiveFields } from './constants';
 
+const TableRow = React.memo(({ children, item }) => <tr key={item.uid} data-testid={`env-var-row-${item.name}`}>{children}</tr>, (prevProps, nextProps) => {
+  const prevUid = prevProps?.item?.uid;
+  const nextUid = nextProps?.item?.uid;
+  return prevUid === nextUid && prevProps.children === nextProps.children;
+});
+
+const MIN_H = 35 * 2; // 2 rows worth of height
+
 const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
 
+  const [tableHeight, setTableHeight] = React.useState(MIN_H);
+
   const environmentsDraft = collection?.environmentsDraft;
   const hasDraftForThisEnv = environmentsDraft?.environmentUid === environment.uid;
 
+  const handleTotalHeightChanged = React.useCallback((h) => {
+    setTableHeight(h);
+  }, []);
+
   // Track environment changes for draft restoration
   const prevEnvUidRef = React.useRef(null);
   const mountedRef = React.useRef(false);
@@ -384,111 +399,114 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
 
   return (
     <StyledWrapper>
-      <div className="table-container">
-        <table>
-          <thead>
-            <tr>
-              <td className="text-center"></td>
-              <td>Name</td>
-              <td>Value</td>
-              <td className="text-center">Secret</td>
-              <td></td>
-            </tr>
-          </thead>
-          <tbody>
-            {formik.values.map((variable, index) => {
-              const isLastRow = index === formik.values.length - 1;
-              const isEmptyRow = !variable.name || variable.name.trim() === '';
-              const isLastEmptyRow = isLastRow && isEmptyRow;
+      <TableVirtuoso
+        className="table-container"
+        style={{ height: tableHeight }}
+        components={{ TableRow }}
+        data={formik.values}
+        totalListHeightChanged={handleTotalHeightChanged}
+        fixedHeaderContent={() => (
+          <tr>
+            <td className="text-center"></td>
+            <td>Name</td>
+            <td>Value</td>
+            <td className="text-center">Secret</td>
+            <td></td>
+          </tr>
+        )}
+        fixedItemHeight={35}
+        computeItemKey={(index, variable) => variable.uid}
+        itemContent={(index, variable) => {
+          const isLastRow = index === formik.values.length - 1;
+          const isEmptyRow = !variable.name || variable.name.trim() === '';
+          const isLastEmptyRow = isLastRow && isEmptyRow;
 
-              return (
-                <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
-                  <td className="text-center">
-                    {!isLastEmptyRow && (
-                      <input
-                        type="checkbox"
-                        className="mousetrap"
-                        name={`${index}.enabled`}
-                        checked={variable.enabled}
-                        onChange={formik.handleChange}
-                      />
-                    )}
-                  </td>
-                  <td>
-                    <div className="flex items-center">
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        className="mousetrap"
-                        id={`${index}.name`}
-                        name={`${index}.name`}
-                        value={variable.name}
-                        placeholder={isLastEmptyRow ? 'Name' : ''}
-                        onChange={(e) => handleNameChange(index, e)}
-                        onBlur={() => handleNameBlur(index)}
-                        onKeyDown={(e) => handleNameKeyDown(index, e)}
-                      />
-                      <ErrorMessage name={`${index}.name`} index={index} />
-                    </div>
-                  </td>
-                  <td className="flex flex-row flex-nowrap items-center">
-                    <div className="overflow-hidden grow w-full relative">
-                      <MultiLineEditor
-                        theme={storedTheme}
-                        collection={_collection}
-                        name={`${index}.value`}
-                        value={variable.value}
-                        placeholder={isLastEmptyRow ? 'Value' : ''}
-                        isSecret={variable.secret}
-                        readOnly={typeof variable.value !== 'string'}
-                        onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
-                        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"
-                        />
-                      </span>
-                    )}
-                    {!variable.secret && hasSensitiveUsage(variable.name) && (
-                      <SensitiveFieldWarning
-                        fieldName={variable.name}
-                        warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
-                      />
-                    )}
-                  </td>
-                  <td className="text-center">
-                    {!isLastEmptyRow && (
-                      <input
-                        type="checkbox"
-                        className="mousetrap"
-                        name={`${index}.secret`}
-                        checked={variable.secret}
-                        onChange={formik.handleChange}
-                      />
-                    )}
-                  </td>
-                  <td>
-                    {!isLastEmptyRow && (
-                      <button onClick={() => handleRemoveVar(variable.uid)}>
-                        <IconTrash strokeWidth={1.5} size={18} />
-                      </button>
-                    )}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
+          return (
+            <>
+              <td className="text-center">
+                {!isLastEmptyRow && (
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${index}.enabled`}
+                    checked={variable.enabled}
+                    onChange={formik.handleChange}
+                  />
+                )}
+              </td>
+              <td>
+                <div className="flex items-center">
+                  <input
+                    type="text"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    spellCheck="false"
+                    className="mousetrap"
+                    id={`${index}.name`}
+                    name={`${index}.name`}
+                    value={variable.name}
+                    placeholder={isLastEmptyRow ? 'Name' : ''}
+                    onChange={(e) => handleNameChange(index, e)}
+                    onBlur={() => handleNameBlur(index)}
+                    onKeyDown={(e) => handleNameKeyDown(index, e)}
+                  />
+                  <ErrorMessage name={`${index}.name`} index={index} />
+                </div>
+              </td>
+              <td className="flex flex-row flex-nowrap items-center">
+                <div className="overflow-hidden grow w-full relative">
+                  <MultiLineEditor
+                    theme={storedTheme}
+                    collection={_collection}
+                    name={`${index}.value`}
+                    value={variable.value}
+                    placeholder={isLastEmptyRow ? 'Value' : ''}
+                    isSecret={variable.secret}
+                    readOnly={typeof variable.value !== 'string'}
+                    onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                    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"
+                    />
+                  </span>
+                )}
+                {!variable.secret && hasSensitiveUsage(variable.name) && (
+                  <SensitiveFieldWarning
+                    fieldName={variable.name}
+                    warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
+                  />
+                )}
+              </td>
+              <td className="text-center">
+                {!isLastEmptyRow && (
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${index}.secret`}
+                    checked={variable.secret}
+                    onChange={formik.handleChange}
+                  />
+                )}
+              </td>
+              <td>
+                {!isLastEmptyRow && (
+                  <button onClick={() => handleRemoveVar(variable.uid)}>
+                    <IconTrash strokeWidth={1.5} size={18} />
+                  </button>
+                )}
+              </td>
+            </>
+          );
+        }}
+      />
 
       <div className="button-container">
         <div className="flex items-center">

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

@@ -191,9 +191,12 @@ const StyledWrapper = styled.div`
       display: flex;
       align-items: center;
       flex: 1;
+      min-width: 0;
+      overflow: hidden;
       
       .environment-name-input {
         flex: 1;
+        min-width: 0;
         background: transparent;
         border: none;
         outline: none;
@@ -210,12 +213,14 @@ const StyledWrapper = styled.div`
         display: flex;
         gap: 2px;
         margin-left: 4px;
+        flex-shrink: 0;
       }
     }
 
     &.creating {
       .environment-name-input {
         flex: 1;
+        min-width: 0;
         background: transparent;
         border: none;
         outline: none;
@@ -232,6 +237,7 @@ const StyledWrapper = styled.div`
         display: flex;
         gap: 2px;
         margin-left: 4px;
+        flex-shrink: 0;
       }
     }
 

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

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 import StyledWrapper from './StyledWrapper';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import OAuth2AuthorizationCode from 'components/RequestPane/Auth/OAuth2/AuthorizationCode/index';
-import { updateFolderAuth } from 'providers/ReduxStore/slices/collections';
+import { updateFolderAuth as _updateFolderAuth } from 'providers/ReduxStore/slices/collections';
 import { useDispatch } from 'react-redux';
 import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/PasswordCredentials/index';
 import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
@@ -20,7 +20,7 @@ import AwsV4Auth from 'components/RequestPane/Auth/AwsV4Auth';
 import { humanizeRequestAuthMode, getTreePathFromCollectionToItem } from 'utils/collections/index';
 import Button from 'ui/Button';
 
-const GrantTypeComponentMap = ({ collection, folder }) => {
+const GrantTypeComponentMap = ({ collection, folder, updateFolderAuth }) => {
   const dispatch = useDispatch();
 
   const save = () => {
@@ -90,6 +90,13 @@ const Auth = ({ collection, folder }) => {
     dispatch(saveFolderRoot(collection.uid, folder.uid));
   };
 
+  const updateFolderAuth = ({ itemUid, ...rest }) => {
+    return _updateFolderAuth({
+      ...rest,
+      folderUid: folder.uid
+    });
+  };
+
   const getAuthView = () => {
     switch (authMode) {
       case 'basic': {
@@ -178,7 +185,7 @@ const Auth = ({ collection, folder }) => {
               collection={collection}
               item={folder}
             />
-            <GrantTypeComponentMap collection={collection} folder={folder} />
+            <GrantTypeComponentMap collection={collection} folder={folder} updateFolderAuth={updateFolderAuth} />
           </>
         );
       }

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

@@ -11,6 +11,7 @@ import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
 import Button from 'ui/Button';
+import { headerNameRegex, headerValueRegex } from 'utils/common/regex';
 
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
@@ -36,6 +37,22 @@ const Headers = ({ collection, folder }) => {
 
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
 
+  const getRowError = useCallback((row, index, key) => {
+    if (key === 'name') {
+      if (!row.name || row.name.trim() === '') return null;
+      if (!headerNameRegex.test(row.name)) {
+        return 'Header name cannot contain spaces or newlines';
+      }
+    }
+    if (key === 'value') {
+      if (!row.value) return null;
+      if (!headerValueRegex.test(row.value)) {
+        return 'Header value cannot contain newlines';
+      }
+    }
+    return null;
+  }, []);
+
   const columns = [
     {
       key: 'name',
@@ -106,6 +123,7 @@ const Headers = ({ collection, folder }) => {
         rows={headers}
         onChange={handleHeadersChange}
         defaultRow={defaultRow}
+        getRowError={getRowError}
       />
       <div className="flex justify-end mt-2">
         <button className="text-link select-none" onClick={toggleBulkEditMode}>

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

@@ -2,24 +2,44 @@ import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
-import { updateFolderRequestScript, updateFolderResponseScript } from 'providers/ReduxStore/slices/collections';
+import { updateFolderRequestScript, updateFolderResponseScript, updateFolderHooksScript } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
+import StatusDot from 'components/StatusDot';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
 
 const Script = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('pre-request');
   const preRequestEditorRef = useRef(null);
   const postResponseEditorRef = useRef(null);
+  const hooksEditorRef = useRef(null);
   const requestScript = folder.draft ? get(folder, 'draft.request.script.req', '') : get(folder, 'root.request.script.req', '');
   const responseScript = folder.draft ? get(folder, 'draft.request.script.res', '') : get(folder, 'root.request.script.res', '');
+  const hooks = folder.draft ? get(folder, 'draft.request.script.hooks', '') : get(folder, 'root.request.script.hooks', '');
+
+  // Default to post-response if pre-request script is empty
+  const getInitialTab = () => {
+    const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+    return hasPreRequestScript ? 'pre-request' : 'post-response';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab);
+  const prevFolderUidRef = useRef(folder.uid);
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  // Update active tab only when switching to a different folder
+  useEffect(() => {
+    if (prevFolderUidRef.current !== folder.uid) {
+      prevFolderUidRef.current = folder.uid;
+      const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+      setActiveTab(hasPreRequestScript ? 'pre-request' : 'post-response');
+    }
+  }, [folder.uid, requestScript]);
+
   // Refresh CodeMirror when tab becomes visible
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -27,6 +47,8 @@ const Script = ({ collection, folder }) => {
         preRequestEditorRef.current.editor.refresh();
       } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
         postResponseEditorRef.current.editor.refresh();
+      } else if (activeTab === 'hooks' && hooksEditorRef.current?.editor) {
+        hooksEditorRef.current.editor.refresh();
       }
     }, 0);
 
@@ -53,6 +75,14 @@ const Script = ({ collection, folder }) => {
     );
   };
 
+  const onHooksEdit = (value) => {
+    dispatch(updateFolderHooksScript({
+      hooks: value,
+      collectionUid: collection.uid,
+      folderUid: folder.uid
+    }));
+  };
+
   const handleSave = () => {
     dispatch(saveFolderRoot(collection.uid, folder.uid));
   };
@@ -65,8 +95,18 @@ const Script = ({ collection, folder }) => {
 
       <Tabs value={activeTab} onValueChange={setActiveTab}>
         <TabsList>
-          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
-          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+          <TabsTrigger value="pre-request">
+            Pre Request
+            {requestScript && requestScript.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="post-response">
+            Post Response
+            {responseScript && responseScript.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="hooks">
+            Hooks
+            {hooks && hooks.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="pre-request" className="mt-2">
@@ -98,6 +138,21 @@ const Script = ({ collection, folder }) => {
             showHintsFor={['req', 'res', 'bru']}
           />
         </TabsContent>
+
+        <TabsContent value="hooks" className="mt-2">
+          <CodeEditor
+            ref={hooksEditorRef}
+            collection={collection}
+            value={hooks || ''}
+            theme={displayedTheme}
+            onEdit={onHooksEdit}
+            mode="javascript"
+            onSave={handleSave}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            showHintsFor={['req', 'res', 'bru']}
+          />
+        </TabsContent>
       </Tabs>
 
       <div className="mt-12">

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

@@ -21,7 +21,7 @@ const FolderSettings = ({ collection, folder }) => {
   }
 
   const folderRoot = folder?.draft || folder?.root;
-  const hasScripts = folderRoot?.request?.script?.res || folderRoot?.request?.script?.req;
+  const hasScripts = folderRoot?.request?.script?.res || folderRoot?.request?.script?.req || folderRoot?.request?.script?.hooks;
   const hasTests = folderRoot?.request?.tests;
 
   const headers = folderRoot?.request?.headers || [];

packages/bruno-app/src/components/Preferences/Display/Font/index.js

@@ -6,7 +6,7 @@ import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 
-const Font = ({ close }) => {
+const Font = () => {
   const dispatch = useDispatch();
   const preferences = useSelector((state) => state.app.preferences);
   const isInitialMount = useRef(true);

packages/bruno-app/src/components/Preferences/General/StyledWrapper.js

@@ -2,6 +2,22 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   color: ${(props) => props.theme.text};
+
+  .text-link {
+    color: ${(props) => props.theme.colors.text.link};
+    text-decoration: none;
+    font-size: 0.8125rem;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  form.bruno-form {
+    label {
+      font-size: 0.8125rem;
+    }
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/Preferences/General/index.js

@@ -11,7 +11,7 @@ import toast from 'react-hot-toast';
 import path from 'utils/common/path';
 import { IconTrash } from '@tabler/icons';
 
-const General = ({ close }) => {
+const General = () => {
   const preferences = useSelector((state) => state.app.preferences);
   const dispatch = useDispatch();
   const inputFileCaCertificateRef = useRef();

packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js

@@ -2,12 +2,12 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   table {
-    width: 100%;
+    width: 80%;
     border-collapse: collapse;
 
     thead,
     td {
-      border: 2px solid ${(props) => props.theme.table.border};
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
@@ -17,7 +17,7 @@ const StyledWrapper = styled.div`
     }
 
     td {
-      padding: 4px 8px;
+      padding: 6px 10px;
       font-size: ${(props) => props.theme.font.size.sm};
     }
 
@@ -25,6 +25,7 @@ const StyledWrapper = styled.div`
       font-weight: 500;
       padding: 10px;
       text-align: left;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
   }
 
@@ -35,11 +36,13 @@ const StyledWrapper = styled.div`
   .key-button {
     display: inline-block;
     color: ${(props) => props.theme.table.input.color};
+    opacity: 0.7;
     border-radius: 4px;
     padding: 1px 5px;
     font-family: monospace;
     margin-right: 8px;
     border: 1px solid #ccc;
+    border-bottom: 1.44px solid ${(props) => props.theme.table.input.border};
   }
 `;
 

packages/bruno-app/src/components/Preferences/ProxySettings/index.js

@@ -291,12 +291,14 @@ const ProxySettings = ({ close }) => {
                 Auth
               </label>
               <input
+                id="config.auth.disabled"
                 type="checkbox"
                 name="config.auth.disabled"
                 checked={!formik.values.config.auth.disabled}
                 onChange={(e) => {
                   formik.setFieldValue('config.auth.disabled', !e.target.checked);
                 }}
+                className="mousetrap mr-0"
               />
             </div>
             <div>

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.tabs {
-    padding: 8px;
+    padding: 12px;
     min-width: 160px;
 
     div.tab {
@@ -28,10 +28,10 @@ const StyledWrapper = styled.div`
 
       &.active {
         color: ${(props) => props.theme.text} !important;
-        background: ${(props) => props.theme.modal.title.bg};
+        background: ${(props) => props.theme.tabs.secondary.active.bg};
 
         &:hover {
-          background: ${(props) => props.theme.modal.title.bg} !important;
+          background: ${(props) => props.theme.tabs.secondary.active.bg} !important;
         }
       }
     }
@@ -39,9 +39,9 @@ const StyledWrapper = styled.div`
 
   section.tab-panel {
     min-height: 70vh;
-    max-height: 70vh;
     overflow-y: auto;
-    width: clamp(300px, 45vw, 550px);
+    flex-grow: 1;
+    padding: 12px;
   }
 
   input[type="checkbox"],
@@ -50,6 +50,24 @@ const StyledWrapper = styled.div`
     cursor: pointer;
   }
 
+  .textbox {
+    line-height: 1.5;
+    padding: 0.45rem;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
+    color: ${(props) => props.theme.text};
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
+      outline: none !important;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
   .section-header {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.muted};

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

@@ -1,7 +1,16 @@
-import Modal from 'components/Modal/index';
 import classnames from 'classnames';
-import React, { useState } from 'react';
-import { IconSettings, IconPalette, IconBrowser, IconUserCircle, IconKeyboard, IconZoomQuestion, IconSquareLetterB } from '@tabler/icons';
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateActivePreferencesTab } from 'providers/ReduxStore/slices/app';
+import {
+  IconSettings,
+  IconPalette,
+  IconBrowser,
+  IconUserCircle,
+  IconKeyboard,
+  IconZoomQuestion,
+  IconSquareLetterB
+} from '@tabler/icons';
 
 import Support from './Support';
 import General from './General';
@@ -13,8 +22,13 @@ import Beta from './Beta';
 
 import StyledWrapper from './StyledWrapper';
 
-const Preferences = ({ onClose }) => {
-  const [tab, setTab] = useState('general');
+const Preferences = () => {
+  const dispatch = useDispatch();
+  const tab = useSelector((state) => state.app.activePreferencesTab);
+
+  const setTab = (tab) => {
+    dispatch(updateActivePreferencesTab({ tab }));
+  };
 
   const getTabClassname = (tabName) => {
     return classnames(`tab select-none ${tabName}`, {
@@ -25,27 +39,27 @@ const Preferences = ({ onClose }) => {
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'general': {
-        return <General close={onClose} />;
+        return <General />;
       }
 
       case 'themes': {
-        return <Themes close={onClose} />;
+        return <Themes />;
       }
 
       case 'proxy': {
-        return <Proxy close={onClose} />;
+        return <Proxy />;
       }
 
       case 'display': {
-        return <Display close={onClose} />;
+        return <Display />;
       }
 
       case 'keybindings': {
-        return <Keybindings close={onClose} />;
+        return <Keybindings />;
       }
 
       case 'beta': {
-        return <Beta close={onClose} />;
+        return <Beta />;
       }
 
       case 'support': {
@@ -55,42 +69,47 @@ const Preferences = ({ onClose }) => {
   };
 
   return (
-    <StyledWrapper>
-      <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className="flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2">
-          <div className="flex flex-col items-center tabs" role="tablist">
-            <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
-              <IconSettings size={16} strokeWidth={1.5} />
-              General
-            </div>
-            <div className={getTabClassname('themes')} role="tab" onClick={() => setTab('themes')}>
-              <IconPalette size={16} strokeWidth={1.5} />
-              Themes
-            </div>
-            <div className={getTabClassname('display')} role="tab" onClick={() => setTab('display')}>
-              <IconBrowser size={16} strokeWidth={1.5} />
-              Display
-            </div>
-            <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
-              <IconUserCircle size={16} strokeWidth={1.5} />
-              Proxy
-            </div>
-            <div className={getTabClassname('keybindings')} role="tab" onClick={() => setTab('keybindings')}>
-              <IconKeyboard size={16} strokeWidth={1.5} />
-              Keybindings
-            </div>
-            <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
-              <IconZoomQuestion size={16} strokeWidth={1.5} />
-              Support
-            </div>
-            <div className={getTabClassname('beta')} role="tab" onClick={() => setTab('beta')}>
-              <IconSquareLetterB size={16} strokeWidth={1.5} />
-              Beta
-            </div>
+    <StyledWrapper className="h-full">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="flex flex-col items-center tabs tablist" role="tablist">
+          <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
+            <IconSettings size={16} strokeWidth={1.5} />
+            General
+          </div>
+          <div className={getTabClassname('themes')} role="tab" onClick={() => setTab('themes')}>
+            <IconPalette size={16} strokeWidth={1.5} />
+            Themes
+          </div>
+          <div className={getTabClassname('display')} role="tab" onClick={() => setTab('display')}>
+            <IconBrowser size={16} strokeWidth={1.5} />
+            Display
+          </div>
+          <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
+            <IconUserCircle size={16} strokeWidth={1.5} />
+            Proxy
+          </div>
+          <div className={getTabClassname('keybindings')} role="tab" onClick={() => setTab('keybindings')}>
+            <IconKeyboard size={16} strokeWidth={1.5} />
+            Keybindings
+          </div>
+          <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
+            <IconZoomQuestion size={16} strokeWidth={1.5} />
+            Support
+          </div>
+          <div className={getTabClassname('beta')} role="tab" onClick={() => setTab('beta')}>
+            <IconSquareLetterB size={16} strokeWidth={1.5} />
+            Beta
           </div>
-          <section className="flex flex-grow ps-2 pe-4 pt-2 pb-6 tab-panel">{getTabPanel(tab)}</section>
         </div>
-      </Modal>
+        <section
+          className="flex flex-grow ps-2 pe-4 pt-2 pb-6 p-[12px] tab-panel"
+          role="tabpanel"
+          id={`${tab}-panel`}
+          aria-labelledby={`${tab}-tab`}
+        >
+          {getTabPanel(tab)}
+        </section>
+      </div>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js

@@ -61,7 +61,7 @@ const ApiKeyAuth = ({ item, collection, updateAuth, request, save }) => {
   }, [apikeyAuth]);
 
   return (
-    <StyledWrapper className="mt-2 w-full">
+    <StyledWrapper className="w-full">
       <label className="block mb-1">Key</label>
       <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor

packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js

@@ -52,7 +52,7 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
   };
 
   return (
-    <StyledWrapper className="mt-2 w-full">
+    <StyledWrapper className="w-full">
       <label className="block mb-1">Username</label>
       <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor

packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js

@@ -38,7 +38,7 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
   };
 
   return (
-    <StyledWrapper className="mt-2 w-full">
+    <StyledWrapper className="w-full">
       <label className="block mb-1">Token</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js

@@ -73,7 +73,7 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
 
   return (
     <StyledWrapper>
-      <div className="flex items-center gap-2.5 my-4">
+      <div className="flex items-center gap-2.5 mb-4">
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconKey size={14} className="oauth2-icon" />
         </div>

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/index.js

@@ -47,7 +47,7 @@ const OAuth2 = ({ item, collection }) => {
   let request = item.draft ? get(item, 'draft.request', {}) : get(item, 'request', {});
 
   return (
-    <StyledWrapper className="mt-2 w-full">
+    <StyledWrapper className="w-full">
       <GrantTypeSelector item={item} request={request} updateAuth={updateAuth} collection={collection} />
       <GrantTypeComponentMap item={item} collection={collection} />
     </StyledWrapper>

packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.js

@@ -52,7 +52,7 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
   };
 
   return (
-    <StyledWrapper className="mt-2 w-full">
+    <StyledWrapper className="w-full">
       <label className="block mb-1">Username</label>
       <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.js

@@ -6,7 +6,6 @@ const StyledWrapper = styled.div`
     display: flex;
     align-items: center;
     height: 100%;
-    margin-right: 0.5rem;
   }
 
   .method-dropdown-trigger {

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/StyledWrapper.js

@@ -60,7 +60,7 @@ const StyledWrapper = styled.div`
 
   .proto-file-dropdown-reflection-message {
     padding: 0.5rem 0.75rem;
-    color: ${(props) => props.theme.overlay.overlay1};
+    color: ${(props) => props.theme.colors.text.muted};
     margin-bottom: 0.5rem;
   }
 `;

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js

@@ -300,7 +300,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
           <span className="text-xs font-medium" style={{ color: theme.request.grpc }}>gRPC</span>
         </div>
       </div>
-      <div className="flex items-center w-full input-container h-full relative">
+      <div className="flex items-center w-full input-container h-full relative overflow-auto">
         <SingleLineEditor
           ref={editorRef}
           value={url}
@@ -313,117 +313,118 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
           item={item}
         />
 
+      </div>
+
+      <div className="flex items-center h-full mx-2 gap-3" id="send-request">
         <MethodDropdown
           grpcMethods={grpcMethods}
           selectedGrpcMethod={selectedGrpcMethod}
           onMethodSelect={handleGrpcMethodSelect}
           onMethodDropdownCreate={onMethodDropdownCreate}
         />
-        <div className="flex items-center h-full mr-2 gap-3" id="send-request">
-          <ProtoFileDropdown
-            collection={collection}
-            item={item}
-            isReflectionMode={isReflectionMode}
-            protoFilePath={protoFilePath}
-            showProtoDropdown={showProtoDropdown}
-            setShowProtoDropdown={setShowProtoDropdown}
-            onProtoDropdownCreate={onProtoDropdownCreate}
-            onReflectionModeToggle={handleReflectionModeToggle}
-            onProtoFileLoad={handleProtoFileLoad}
+        <ProtoFileDropdown
+          collection={collection}
+          item={item}
+          isReflectionMode={isReflectionMode}
+          protoFilePath={protoFilePath}
+          showProtoDropdown={showProtoDropdown}
+          setShowProtoDropdown={setShowProtoDropdown}
+          onProtoDropdownCreate={onProtoDropdownCreate}
+          onReflectionModeToggle={handleReflectionModeToggle}
+          onProtoFileLoad={handleProtoFileLoad}
+        />
+
+        <div
+          className="infotip"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (isReflectionMode) {
+              handleReflection(url, true);
+            } else if (protoFilePath) {
+              handleProtoFileLoad(protoFilePath, true);
+            } else {
+              toast.error('No proto file selected');
+            }
+          }}
+        >
+          <IconRefresh
+            color={theme.requestTabs.icon.color}
+            strokeWidth={1.5}
+            size={20}
+            className={`${(isReflectionMode ? reflectionManagement.isLoadingMethods : protoFileManagement.isLoadingMethods) ? 'animate-spin' : 'cursor-pointer'}`}
+            data-testid="refresh-methods-icon"
           />
-
-          <div
-            className="infotip"
-            onClick={(e) => {
-              e.stopPropagation();
-              if (isReflectionMode) {
-                handleReflection(url, true);
-              } else if (protoFilePath) {
-                handleProtoFileLoad(protoFilePath, true);
-              } else {
-                toast.error('No proto file selected');
-              }
-            }}
-          >
-            <IconRefresh
-              color={theme.requestTabs.icon.color}
-              strokeWidth={1.5}
-              size={20}
-              className={`${(isReflectionMode ? reflectionManagement.isLoadingMethods : protoFileManagement.isLoadingMethods) ? 'animate-spin' : 'cursor-pointer'}`}
-              data-testid="refresh-methods-icon"
-            />
-            <span className="infotip-text text-xs">
-              {isReflectionMode ? 'Refresh server reflection' : 'Refresh proto file methods'}
-            </span>
-          </div>
-
-          <div
-            className="infotip"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleGrpcurl(url);
-            }}
-          >
-            <IconCode
-              color={theme.requestTabs.icon.color}
-              strokeWidth={1.5}
-              size={20}
-            />
-            <span className="infotip-text text-xs">Generate grpcurl command</span>
-          </div>
-
-          <div
-            className="infotip"
-            onClick={(e) => {
-              e.stopPropagation();
-              if (!item.draft) return;
-              onSave();
-            }}
-          >
-            <IconDeviceFloppy
-              color={item.draft ? theme.draftColor : theme.requestTabs.icon.color}
-              strokeWidth={1.5}
-              size={20}
-              className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
-            />
-            <span className="infotip-text text-xs">
-              Save <span className="shortcut">({saveShortcut})</span>
-            </span>
-          </div>
-
-          {isConnectionActive && isStreamingMethod && (
-            <div className="connection-controls relative flex items-center h-full gap-3">
-              <div className="infotip" onClick={handleCancelConnection} data-testid="grpc-cancel-connection-button">
-                <IconX color={theme.requestTabs.icon.color} strokeWidth={1.5} size={20} className="cursor-pointer" />
-                <span className="infotip-text text-xs">Cancel</span>
-              </div>
-
-              {isClientStreamingMethod && (
-                <div onClick={handleEndConnection} data-testid="grpc-end-connection-button">
-                  <IconCheck
-                    color={theme.colors.text.green}
-                    strokeWidth={2}
-                    size={20}
-                    className="cursor-pointer"
-                  />
-                </div>
-              )}
-            </div>
-          )}
-
-          {(!isConnectionActive || !isStreamingMethod) && (
-            <div
-              className="cursor-pointer"
-              data-testid="grpc-send-request-button"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleRun(e);
-              }}
-            >
-              <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={20} />
-            </div>
-          )}
+          <span className="infotip-text text-xs">
+            {isReflectionMode ? 'Refresh server reflection' : 'Refresh proto file methods'}
+          </span>
         </div>
+
+        <div
+          className="infotip"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleGrpcurl(url);
+          }}
+        >
+          <IconCode
+            color={theme.requestTabs.icon.color}
+            strokeWidth={1.5}
+            size={20}
+          />
+          <span className="infotip-text text-xs">Generate grpcurl command</span>
+        </div>
+
+        <div
+          className="infotip"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (!item.draft) return;
+            onSave();
+          }}
+        >
+          <IconDeviceFloppy
+            color={item.draft ? theme.draftColor : theme.requestTabs.icon.color}
+            strokeWidth={1.5}
+            size={20}
+            className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
+          />
+          <span className="infotip-text text-xs">
+            Save <span className="shortcut">({saveShortcut})</span>
+          </span>
+        </div>
+
+        {isConnectionActive && isStreamingMethod && (
+          <div className="connection-controls relative flex items-center h-full gap-3">
+            <div className="infotip" onClick={handleCancelConnection} data-testid="grpc-cancel-connection-button">
+              <IconX color={theme.requestTabs.icon.color} strokeWidth={1.5} size={20} className="cursor-pointer" />
+              <span className="infotip-text text-xs">Cancel</span>
+            </div>
+
+            {isClientStreamingMethod && (
+              <div onClick={handleEndConnection} data-testid="grpc-end-connection-button">
+                <IconCheck
+                  color={theme.colors.text.green}
+                  strokeWidth={2}
+                  size={20}
+                  className="cursor-pointer"
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        {(!isConnectionActive || !isStreamingMethod) && (
+          <div
+            className="cursor-pointer"
+            data-testid="grpc-send-request-button"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleRun(e);
+            }}
+          >
+            <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={20} />
+          </div>
+        )}
       </div>
       {isConnectionActive && isStreamingMethod && (
         <div className="connection-status-strip"></div>

packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/index.js

@@ -76,6 +76,9 @@ const GrpcAuth = ({ item, collection }) => {
 
   const getAuthView = () => {
     switch (authMode) {
+      case 'none': {
+        return <div>No Auth</div>;
+      }
       case 'basic': {
         return <BasicAuth collection={collection} item={item} updateAuth={updateAuth} request={request} save={save} />;
       }
@@ -98,7 +101,7 @@ const GrpcAuth = ({ item, collection }) => {
         if (source && supportedGrpcAuthModes.includes(source.auth?.mode)) {
           return (
             <>
-              <div className="flex flex-row w-full mt-2 gap-2">
+              <div className="flex flex-row w-full gap-2">
                 <div>Auth inherited from {source.name}: </div>
                 <div className="inherit-mode-text">{humanizeRequestAuthMode(source.auth?.mode)}</div>
               </div>
@@ -107,7 +110,7 @@ const GrpcAuth = ({ item, collection }) => {
         } else {
           return (
             <>
-              <div className="flex flex-row w-full mt-2 gap-2">
+              <div className="flex flex-row w-full gap-2">
                 <div>Inherited auth not supported by gRPC. Using no auth instead.</div>
               </div>
             </>
@@ -122,9 +125,6 @@ const GrpcAuth = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full overflow-y-scroll">
-      <div className="flex flex-grow justify-start items-center">
-        <GrpcAuthMode item={item} collection={collection} />
-      </div>
       {getAuthView()}
     </StyledWrapper>
   );

packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js

@@ -1,35 +1,6 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.tabs {
-    div.tab {
-      padding: 6px 0px;
-      border: none;
-      border-bottom: solid 2px transparent;
-      margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: ${(props) => props.theme.colors.text.subtext0};
-      cursor: pointer;
-
-      &:focus,
-      &:active,
-      &:focus-within,
-      &:focus-visible,
-      &:target {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-
-      &.active {
-        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-      }
-
-      .content-indicator {
-        color: ${(props) => props.theme.text}
-      }
-    }
-  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/RequestPane/GrpcRequestPane/index.js

@@ -1,34 +1,37 @@
-import React from 'react';
-import classnames from 'classnames';
+import React, { useMemo, useCallback, useEffect, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import GrpcBody from 'components/RequestPane/GrpcBody';
 import GrpcAuth from './GrpcAuth/index';
+import GrpcAuthMode from './GrpcAuth/GrpcAuthMode/index';
 import StatusDot from 'components/StatusDot/index';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
-import StyledWrapper from './StyledWrapper';
-import { find, get } from 'lodash';
+import find from 'lodash/find';
 import Documentation from 'components/Documentation/index';
-import { useEffect } from 'react';
 import { getPropertyFromDraftOrRequest } from 'utils/collections/index';
+import ResponsiveTabs from 'ui/ResponsiveTabs';
+import StyledWrapper from './StyledWrapper';
 
 const GrpcRequestPane = ({ item, collection, handleRun }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+  const rightContentRef = useRef(null);
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  const requestPaneTab = focusedTab?.requestPaneTab;
 
-  const selectTab = (tab) => {
+  const selectTab = useCallback((tab) => {
     dispatch(
       updateRequestPaneTab({
         uid: item.uid,
         requestPaneTab: tab
       })
     );
-  };
+  }, [dispatch, item.uid]);
 
-  const getTabPanel = (tab) => {
-    switch (tab) {
+  const tabPanel = useMemo(() => {
+    switch (requestPaneTab) {
       case 'body': {
         return <GrpcBody item={item} collection={collection} hideModeSelector={true} hidePrettifyButton={true} handleRun={handleRun} />;
       }
@@ -45,22 +48,7 @@ const GrpcRequestPane = ({ item, collection, handleRun }) => {
         return <div className="mt-4">404 | Not found</div>;
       }
     }
-  };
-
-  if (!activeTabUid) {
-    return <div>Something went wrong</div>;
-  }
-
-  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
-    return <div className="pb-4 px-4">An error occurred!</div>;
-  }
-
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === focusedTab.requestPaneTab
-    });
-  };
+  }, [requestPaneTab, item, collection, handleRun]);
 
   const body = getPropertyFromDraftOrRequest(item, 'request.body');
   const headers = getPropertyFromDraftOrRequest(item, 'request.headers');
@@ -74,44 +62,80 @@ const GrpcRequestPane = ({ item, collection, handleRun }) => {
   const request = item.draft ? item.draft.request : item.request;
   const isClientStreaming = request.methodType === 'client-streaming' || request.methodType === 'bidi-streaming';
 
+  const allTabs = useMemo(() => {
+    const getMessageIndicator = () => {
+      if (grpcMessagesCount > 0) {
+        return isClientStreaming ? (
+          <sup className="ml-[.125rem] font-medium">{grpcMessagesCount}</sup>
+        ) : (
+          <StatusDot />
+        );
+      }
+      return null;
+    };
+
+    return [
+      {
+        key: 'body',
+        label: 'Message',
+        indicator: getMessageIndicator()
+      },
+      {
+        key: 'headers',
+        label: 'Metadata',
+        indicator: activeHeadersLength > 0 ? <sup className="ml-[.125rem] font-medium">{activeHeadersLength}</sup> : null
+      },
+      {
+        key: 'auth',
+        label: 'Auth',
+        indicator: auth?.mode && auth.mode !== 'none' ? <StatusDot type="default" /> : null
+      },
+      {
+        key: 'docs',
+        label: 'Docs',
+        indicator: docs && docs.length > 0 ? <StatusDot type="default" /> : null
+      }
+    ];
+  }, [grpcMessagesCount, isClientStreaming, activeHeadersLength, auth?.mode, docs]);
+
+  // Initialize tab to 'body' if no tab is currently set
   useEffect(() => {
-    // Only set the tab to 'body' if no tab is currently set
-    if (!focusedTab?.requestPaneTab) {
+    if (activeTabUid && focusedTab?.uid && !requestPaneTab) {
       selectTab('body');
     }
-  }, []);
+  }, [activeTabUid, focusedTab?.uid, requestPaneTab, selectTab]);
+
+  // Return error for truly missing active/focused tabs
+  if (!activeTabUid || !focusedTab?.uid) {
+    return <div className="pb-4 px-4">An error occurred!</div>;
+  }
+
+  // Return null during initialization while requestPaneTab is being set by useEffect
+  if (!requestPaneTab) {
+    return null;
+  }
+
+  const rightContent = requestPaneTab === 'auth' ? (
+    <div ref={rightContentRef} className="flex flex-grow justify-start items-center">
+      <GrpcAuthMode item={item} collection={collection} />
+    </div>
+  ) : null;
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center tabs" role="tablist">
-        <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
-          Message
-          {grpcMessagesCount > 0 && (
-            isClientStreaming ? (
-              <sup className="ml-[.125rem] font-medium">{grpcMessagesCount}</sup>
-            ) : (
-              <StatusDot />
-            )
-          )}
-        </div>
-        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
-          Metadata
-          {activeHeadersLength > 0 && <sup className="ml-[.125rem] font-medium">{activeHeadersLength}</sup>}
-        </div>
-        <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
-          Auth
-          {auth.mode !== 'none' && <StatusDot type="default" />}
-        </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
-          Docs
-          {docs && docs.length > 0 && <StatusDot type="default" />}
-        </div>
-      </div>
+      <ResponsiveTabs
+        tabs={allTabs}
+        activeTab={requestPaneTab}
+        onTabSelect={selectTab}
+        rightContent={rightContent}
+        rightContentRef={rightContent ? rightContentRef : null}
+      />
+
       <section
-        className={classnames('flex w-full flex-1 h-full mt-4')}
+        className="flex w-full flex-1 h-full mt-4"
       >
         <HeightBoundContainer>
-          {getTabPanel(focusedTab.requestPaneTab)}
+          {tabPanel}
         </HeightBoundContainer>
       </section>
     </StyledWrapper>

packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js

@@ -87,7 +87,7 @@ const HttpRequestPane = ({ item, collection }) => {
   );
 
   const indicators = useMemo(() => {
-    const hasScriptError = item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage;
+    const hasScriptError = item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage || item.hooksScriptErrorMessage;
     const hasTestError = item.testScriptErrorMessage;
 
     return {
@@ -96,7 +96,7 @@ const HttpRequestPane = ({ item, collection }) => {
       headers: activeCounts.headers > 0 ? <sup className="font-medium">{activeCounts.headers}</sup> : null,
       auth: auth.mode !== 'none' ? <StatusDot /> : null,
       vars: activeCounts.vars > 0 ? <sup className="font-medium">{activeCounts.vars}</sup> : null,
-      script: (script.req || script.res) ? (hasScriptError ? <StatusDot type="error" /> : <StatusDot />) : null,
+      script: (script.req || script.res || script.hooks) ? (hasScriptError ? <StatusDot type="error" /> : <StatusDot />) : null,
       assert: activeCounts.assertions > 0 ? <sup className="font-medium">{activeCounts.assertions}</sup> : null,
       tests: tests?.length > 0 ? (hasTestError ? <StatusDot type="error" /> : <StatusDot />) : null,
       docs: docs?.length > 0 ? <StatusDot /> : null,

packages/bruno-app/src/components/RequestPane/QueryUrl/index.js

@@ -95,7 +95,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
 
     const curlCommandRegex = /^\s*curl\s/i;
     if (!curlCommandRegex.test(pastedData)) {
-      toast.error('Invalid cURL command');
+      // Not a curl command, allow normal paste behavior
       return;
     }
     event.preventDefault();
@@ -375,7 +375,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
       </div>
       <div
         id="request-url"
-        className="h-full w-full flex flex-row input-container"
+        className="h-full w-full flex flex-row input-container overflow-auto"
       >
         <SingleLineEditor
           ref={editorRef}
@@ -391,53 +391,54 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           item={item}
           showNewlineArrow={true}
         />
-        <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
-          <div
-            title="Generate Code"
-            className="infotip mr-3"
-            onClick={(e) => {
-              handleGenerateCode(e);
-            }}
-          >
-            <IconCode color={theme.requestTabs.icon.color} strokeWidth={1.5} size={20} className="cursor-pointer" />
-            <span className="infotiptext text-xs">Generate Code</span>
-          </div>
-          <div
-            title="Save Request"
-            className="infotip mr-3"
-            onClick={(e) => {
-              e.stopPropagation();
-              if (!hasChanges) return;
-              onSave();
-            }}
-          >
-            <IconDeviceFloppy
-              color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
-              strokeWidth={1.5}
-              size={20}
-              className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
-            />
-            <span className="infotiptext text-xs">
-              Save <span className="shortcut">({saveShortcut})</span>
-            </span>
-          </div>
-          {isLoading || item.response?.stream?.running ? (
-            <IconSquareRoundedX
-              color={theme.requestTabPanel.url.iconDanger}
-              strokeWidth={1.5}
-              size={20}
-              data-testid="cancel-request-icon"
-              onClick={handleCancelRequest}
-            />
-          ) : (
-            <IconArrowRight
-              color={theme.requestTabPanel.url.icon}
-              strokeWidth={1.5}
-              size={20}
-              data-testid="send-arrow-icon"
-            />
-          )}
+
+      </div>
+      <div className="flex items-center h-full mx-2 gap-3 cursor-pointer" id="send-request" onClick={handleRun}>
+        <div
+          title="Generate Code"
+          className="infotip"
+          onClick={(e) => {
+            handleGenerateCode(e);
+          }}
+        >
+          <IconCode color={theme.requestTabs.icon.color} strokeWidth={1.5} size={20} className="cursor-pointer" />
+          <span className="infotiptext text-xs">Generate Code</span>
         </div>
+        <div
+          title="Save Request"
+          className="infotip"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (!hasChanges) return;
+            onSave();
+          }}
+        >
+          <IconDeviceFloppy
+            color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
+            strokeWidth={1.5}
+            size={20}
+            className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
+          />
+          <span className="infotiptext text-xs">
+            Save <span className="shortcut">({saveShortcut})</span>
+          </span>
+        </div>
+        {isLoading || item.response?.stream?.running ? (
+          <IconSquareRoundedX
+            color={theme.requestTabPanel.url.iconDanger}
+            strokeWidth={1.5}
+            size={20}
+            data-testid="cancel-request-icon"
+            onClick={handleCancelRequest}
+          />
+        ) : (
+          <IconArrowRight
+            color={theme.requestTabPanel.url.icon}
+            strokeWidth={1.5}
+            size={20}
+            data-testid="send-arrow-icon"
+          />
+        )}
       </div>
       {generateCodeItemModalOpen && (
         <GenerateCodeItem

packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js

@@ -10,6 +10,7 @@ import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from '../../BulkEditor';
+import { headerNameRegex, headerValueRegex } from 'utils/common/regex';
 
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
@@ -38,6 +39,22 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
     }));
   }, [dispatch, collection.uid, item.uid]);
 
+  const getRowError = useCallback((row, index, key) => {
+    if (key === 'name') {
+      if (!row.name || row.name.trim() === '') return null;
+      if (!headerNameRegex.test(row.name)) {
+        return 'Header name cannot contain spaces or newlines';
+      }
+    }
+    if (key === 'value') {
+      if (!row.value) return null;
+      if (!headerValueRegex.test(row.value)) {
+        return 'Header value cannot contain newlines';
+      }
+    }
+    return null;
+  }, []);
+
   const toggleBulkEditMode = () => {
     setIsBulkEditMode(!isBulkEditMode);
   };
@@ -49,7 +66,7 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
       isKeyField: true,
       placeholder: 'Name',
       width: '30%',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange, isLastEmptyRow }) => (
         <SingleLineEditor
           value={value || ''}
           theme={storedTheme}
@@ -67,7 +84,7 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
       key: 'value',
       name: 'Value',
       placeholder: 'Value',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange, isLastEmptyRow }) => (
         <SingleLineEditor
           value={value || ''}
           theme={storedTheme}
@@ -110,6 +127,7 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
         rows={headers || []}
         onChange={handleHeadersChange}
         defaultRow={defaultRow}
+        getRowError={getRowError}
         reorderable={true}
         onReorder={handleHeaderDrag}
       />

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

@@ -2,22 +2,42 @@ import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
-import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/slices/collections';
+import { updateRequestScript, updateResponseScript, updateRequestHooksScript } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
+import StatusDot from 'components/StatusDot';
 
 const Script = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('pre-request');
   const preRequestEditorRef = useRef(null);
   const postResponseEditorRef = useRef(null);
+  const hooksEditorRef = useRef(null);
   const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
+  const hooks = item.draft ? get(item, 'draft.request.script.hooks', '') : get(item, 'request.script.hooks', '');
+
+  // Default to post-response if pre-request script is empty
+  const getInitialTab = () => {
+    const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+    return hasPreRequestScript ? 'pre-request' : 'post-response';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab);
+  const prevItemUidRef = useRef(item.uid);
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  // Update active tab only when switching to a different item
+  useEffect(() => {
+    if (prevItemUidRef.current !== item.uid) {
+      prevItemUidRef.current = item.uid;
+      const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+      setActiveTab(hasPreRequestScript ? 'pre-request' : 'post-response');
+    }
+  }, [item.uid, requestScript]);
+
   // Refresh CodeMirror when tab becomes visible
   useEffect(() => {
     // Small delay to ensure DOM is updated
@@ -26,6 +46,8 @@ const Script = ({ item, collection }) => {
         preRequestEditorRef.current.editor.refresh();
       } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
         postResponseEditorRef.current.editor.refresh();
+      } else if (activeTab === 'hooks' && hooksEditorRef.current?.editor) {
+        hooksEditorRef.current.editor.refresh();
       }
     }, 0);
 
@@ -52,15 +74,36 @@ const Script = ({ item, collection }) => {
     );
   };
 
+  const onHooksEdit = (value) => {
+    dispatch(updateRequestHooksScript({
+      hooks: value,
+      itemUid: item.uid,
+      collectionUid: collection.uid
+    }));
+  };
+
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
+  const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+  const hasPostResponseScript = responseScript && responseScript.trim().length > 0;
+
   return (
     <div className="w-full h-full flex flex-col">
       <Tabs value={activeTab} onValueChange={setActiveTab}>
         <TabsList>
-          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
-          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+          <TabsTrigger value="pre-request">
+            Pre Request
+            {hasPreRequestScript && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="post-response">
+            Post Response
+            {hasPostResponseScript && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="hooks">
+            Hooks
+            {hooks && hooks.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="pre-request" className="mt-2" dataTestId="pre-request-script-editor">
@@ -94,6 +137,22 @@ const Script = ({ item, collection }) => {
             showHintsFor={['req', 'res', 'bru']}
           />
         </TabsContent>
+
+        <TabsContent value="hooks" className="mt-2" dataTestId="hooks-editor">
+          <CodeEditor
+            ref={hooksEditorRef}
+            collection={collection}
+            value={hooks || ''}
+            theme={displayedTheme}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            onEdit={onHooksEdit}
+            mode="javascript"
+            onRun={onRun}
+            onSave={onSave}
+            showHintsFor={['req', 'res', 'bru']}
+          />
+        </TabsContent>
       </Tabs>
     </div>
   );

packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js

@@ -1,34 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.tabs {
-    div.tab {
-      padding: 6px 0px;
-      border: none;
-      border-bottom: solid 2px transparent;
-      margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: ${(props) => props.theme.colors.text.subtext0};
-      cursor: pointer;
 
-      &:focus,
-      &:active,
-      &:focus-within,
-      &:focus-visible,
-      &:target {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-
-      &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-      }
-
-      .content-indicator {
-        color: ${(props) => props.theme.text}
-      }
-    }
-  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/index.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
-import WSAuthMode from './WSAuthMode';
 import BearerAuth from '../../Auth/BearerAuth';
 import BasicAuth from '../../Auth/BasicAuth';
 import ApiKeyAuth from '../../Auth/ApiKeyAuth';
@@ -68,6 +67,9 @@ const WSAuth = ({ item, collection }) => {
 
   const getAuthView = () => {
     switch (authMode) {
+      case 'none': {
+        return <div>No Auth</div>;
+      }
       case 'basic': {
         return <BasicAuth collection={collection} item={item} updateAuth={updateAuth} request={request} save={save} />;
       }
@@ -80,7 +82,7 @@ const WSAuth = ({ item, collection }) => {
       case 'oauth2': {
         return (
           <>
-            <div className="flex flex-row w-full mt-2 gap-2">
+            <div className="flex flex-row w-full gap-2">
               <div>
                 OAuth 2 not <strong>yet</strong> supported by WebSockets. Using no auth instead.
               </div>
@@ -91,11 +93,22 @@ const WSAuth = ({ item, collection }) => {
       case 'inherit': {
         const source = getEffectiveAuthSource();
 
+        // Check if inherited auth is OAuth2 - not supported for WebSockets
+        if (source?.auth?.mode === 'oauth2') {
+          return (
+            <>
+              <div className="flex flex-row w-full mt-2 gap-2">
+                OAuth 2 not <strong>yet</strong> supported by WebSockets. Using no auth instead.
+              </div>
+            </>
+          );
+        }
+
         // Only show inherited auth if it's one of the supported types
         if (source && supportedAuthModes.includes(source.auth?.mode)) {
           return (
             <>
-              <div className="flex flex-row w-full mt-2 gap-2">
+              <div className="flex flex-row w-full gap-2">
                 <div> Auth inherited from {source.name}: </div>
                 <div className="inherit-mode-text">{humanizeRequestAuthMode(source.auth?.mode)}</div>
               </div>
@@ -104,7 +117,7 @@ const WSAuth = ({ item, collection }) => {
         } else {
           return (
             <>
-              <div className="flex flex-row w-full mt-2 gap-2">
+              <div className="flex flex-row w-full gap-2">
                 <div>Inherited auth not supported by WebSockets. Using no auth instead.</div>
               </div>
             </>
@@ -119,9 +132,6 @@ const WSAuth = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full overflow-y-scroll">
-      <div className="flex flex-grow justify-start items-center">
-        <WSAuthMode item={item} collection={collection} />
-      </div>
       {getAuthView()}
     </StyledWrapper>
   );

packages/bruno-app/src/components/RequestPane/WSRequestPane/index.js

@@ -1,16 +1,17 @@
-import classnames from 'classnames';
+import React, { useMemo, useCallback, useRef } from 'react';
 import Documentation from 'components/Documentation/index';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import StatusDot from 'components/StatusDot/index';
 import { find } from 'lodash';
 import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
-import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
+import ResponsiveTabs from 'ui/ResponsiveTabs';
 import { getPropertyFromDraftOrRequest } from 'utils/collections/index';
 import WsBody from '../WsBody/index';
 import StyledWrapper from './StyledWrapper';
 import WSAuth from './WSAuth';
+import WSAuthMode from './WSAuth/WSAuthMode';
 import WSSettingsPane from '../WSSettingsPane/index';
 
 const WSRequestPane = ({ item, collection, handleRun }) => {
@@ -18,15 +19,59 @@ const WSRequestPane = ({ item, collection, handleRun }) => {
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
 
-  const selectTab = (tab) => {
-    dispatch(updateRequestPaneTab({
-      uid: item.uid,
-      requestPaneTab: tab
-    }));
-  };
+  const rightContentRef = useRef(null);
 
-  const getTabPanel = (tab) => {
-    switch (tab) {
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  const requestPaneTab = focusedTab?.requestPaneTab;
+
+  const selectTab = useCallback(
+    (tab) => {
+      dispatch(updateRequestPaneTab({
+        uid: item.uid,
+        requestPaneTab: tab
+      }));
+    },
+    [dispatch, item.uid]
+  );
+
+  const headers = getPropertyFromDraftOrRequest(item, 'request.headers');
+  const docs = getPropertyFromDraftOrRequest(item, 'request.docs');
+  const auth = getPropertyFromDraftOrRequest(item, 'request.auth');
+
+  const activeHeadersLength = headers.filter((header) => header.enabled).length;
+
+  const allTabs = useMemo(() => {
+    return [
+      {
+        key: 'body',
+        label: 'Message',
+        indicator: null
+      },
+      {
+        key: 'headers',
+        label: 'Headers',
+        indicator: activeHeadersLength > 0 ? <sup className="ml-[.125rem] font-medium">{activeHeadersLength}</sup> : null
+      },
+      {
+        key: 'auth',
+        label: 'Auth',
+        indicator: auth.mode !== 'none' ? <StatusDot type="default" /> : null
+      },
+      {
+        key: 'settings',
+        label: 'Settings',
+        indicator: null
+      },
+      {
+        key: 'docs',
+        label: 'Docs',
+        indicator: docs && docs.length > 0 ? <StatusDot type="default" /> : null
+      }
+    ];
+  }, [activeHeadersLength, auth.mode, docs]);
+
+  const tabPanel = useMemo(() => {
+    switch (requestPaneTab) {
       case 'body': {
         return (
           <WsBody
@@ -54,61 +99,30 @@ const WSRequestPane = ({ item, collection, handleRun }) => {
         return <div className="mt-4">404 | Not found</div>;
       }
     }
-  };
+  }, [requestPaneTab, item, collection, handleRun]);
 
-  if (!activeTabUid) {
-    return <div>Something went wrong</div>;
-  }
-
-  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
+  if (!activeTabUid || !focusedTab?.uid || !requestPaneTab) {
     return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === focusedTab.requestPaneTab
-    });
-  };
-
-  const headers = getPropertyFromDraftOrRequest(item, 'request.headers');
-  const docs = getPropertyFromDraftOrRequest(item, 'request.docs');
-  const auth = getPropertyFromDraftOrRequest(item, 'request.auth');
-
-  const activeHeadersLength = headers.filter((header) => header.enabled).length;
-
-  useEffect(() => {
-    if (!focusedTab?.requestPaneTab) {
-      selectTab('body');
-    }
-  }, []);
+  const rightContent = requestPaneTab === 'auth' ? (
+    <div ref={rightContentRef} className="flex flex-grow justify-start items-center">
+      <WSAuthMode item={item} collection={collection} />
+    </div>
+  ) : null;
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center tabs" role="tablist">
-        <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
-          Message
-        </div>
-        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
-          Headers
-          {activeHeadersLength > 0 && <sup className="ml-[.125rem] font-medium">{activeHeadersLength}</sup>}
-        </div>
-        <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
-          Auth
-          {auth.mode !== 'none' && <StatusDot type="default" />}
-        </div>
-        <div className={getTabClassname('settings')} role="tab" onClick={() => selectTab('settings')}>
-          Settings
-        </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
-          Docs
-          {docs && docs.length > 0 && <StatusDot type="default" />}
-        </div>
-      </div>
-      <section
-        className={classnames('flex w-full flex-1 h-full mt-4')}
-      >
-        <HeightBoundContainer>{getTabPanel(focusedTab.requestPaneTab)}</HeightBoundContainer>
+      <ResponsiveTabs
+        tabs={allTabs}
+        activeTab={requestPaneTab}
+        onTabSelect={selectTab}
+        rightContent={rightContent}
+        rightContentRef={rightContent ? rightContentRef : null}
+      />
+
+      <section className="flex w-full flex-1 h-full mt-4">
+        <HeightBoundContainer>{tabPanel}</HeightBoundContainer>
       </section>
     </StyledWrapper>
   );

packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js

@@ -123,7 +123,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
   return (
     <StyledWrapper>
       <div className="flex items-center h-full">
-        <div className="flex items-center input-container flex-1 w-full input-container pr-2 h-full relative">
+        <div className="flex items-center input-container flex-1 w-full h-full relative">
           <div className="flex items-center justify-center px-[10px]">
             <span className="text-xs font-medium method-ws">WS</span>
           </div>
@@ -138,9 +138,9 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
             collection={collection}
             item={item}
           />
-          <div className="flex items-center h-full mr-2 cursor-pointer">
+          <div className="flex items-center h-full cursor-pointer gap-3 mx-3">
             <div
-              className="infotip mr-3"
+              className="infotip"
               onClick={(e) => {
                 e.stopPropagation();
                 if (!hasChanges) return;
@@ -159,7 +159,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
             </div>
 
             {connectionStatus === 'connected' && (
-              <div className="connection-controls relative flex items-center h-full gap-3 mr-3">
+              <div className="connection-controls relative flex items-center h-full">
                 <div className="infotip" onClick={(e) => handleDisconnect(e, true)}>
                   <IconPlugConnectedX
                     color={theme.colors.text.danger}
@@ -173,7 +173,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
             )}
 
             {connectionStatus !== 'connected' && (
-              <div className="connection-controls relative flex items-center h-full gap-3 mr-3">
+              <div className="connection-controls relative flex items-center h-full">
                 <div className="infotip" onClick={handleConnect}>
                   <IconPlugConnected
                     className={classnames('cursor-pointer', {

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

@@ -33,6 +33,7 @@ import WSResponsePane from 'components/ResponsePane/WsResponsePane';
 import { useTabPaneBoundaries } from 'hooks/useTabPaneBoundaries/index';
 import ResponseExample from 'components/ResponseExample';
 import WorkspaceHome from 'components/WorkspaceHome';
+import Preferences from 'components/Preferences';
 import EnvironmentSettings from 'components/Environments/EnvironmentSettings';
 import GlobalEnvironmentSettings from 'components/Environments/GlobalEnvironmentSettings';
 
@@ -171,13 +172,17 @@ const RequestTabPanel = () => {
   }, [isConsoleOpen, isVerticalLayout]);
 
   if (!activeTabUid || !focusedTab) {
-    return <WorkspaceHome />;
+    return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
   if (focusedTab.type === 'global-environment-settings') {
     return <GlobalEnvironmentSettings />;
   }
 
+  if (focusedTab.type === 'preferences') {
+    return <Preferences />;
+  }
+
   if (!focusedTab.uid || !focusedTab.collectionUid) {
     return <div className="pb-4 px-4">An error occurred!</div>;
   }

packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js

@@ -12,6 +12,10 @@ import ActionIcon from 'ui/ActionIcon';
 const CollectionToolBar = ({ collection }) => {
   const dispatch = useDispatch();
 
+  if (!collection) {
+    return null;
+  }
+
   const handleRun = () => {
     dispatch(
       addTab({

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js

@@ -93,7 +93,7 @@ const ExampleTab = ({ tab, collection }) => {
           onSaveAndClose={() => {
             // For examples, we don't have a separate save action
             // The changes are saved automatically when the request is saved
-            dispatch(saveRequest(item.uid, collection.uid));
+            dispatch(saveRequest(item.uid, collection.uid, true));
             dispatch(closeTabs({
               tabUids: [tab.uid]
             }));

packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js

@@ -61,6 +61,14 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra
           </>
         );
       }
+      case 'preferences': {
+        return (
+          <>
+            <IconSettings size={14} strokeWidth={1.5} className="special-tab-icon flex-shrink-0" />
+            <span className="ml-1 tab-name">Preferences</span>
+          </>
+        );
+      }
     }
   };
 

packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

@@ -172,7 +172,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
     setShowConfirmGlobalEnvironmentClose(true);
   };
 
-  if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'environment-settings', 'global-environment-settings'].includes(tab.type)) {
+  if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'environment-settings', 'global-environment-settings', 'preferences'].includes(tab.type)) {
     return (
       <StyledWrapper
         className={`flex items-center justify-between tab-container px-2 ${tab.preview ? 'italic' : ''}`}

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

@@ -14,6 +14,10 @@ const Wrapper = styled.div`
     z-index: 0;
   }
 
+  .scroll-chevrons.hidden {
+    display: none;
+  }
+
   .tabs-scroll-container {
     overflow-x: auto;
     overflow-y: clip;
@@ -192,10 +196,6 @@ const Wrapper = styled.div`
     }
   }
 
-  &.has-chevrons ul {
-    padding-left: 0;
-  }
-
   .special-tab-icon {
     color: ${(props) => props.theme.primary.text};
   }

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

@@ -44,7 +44,7 @@ const RequestTabs = () => {
   }, []);
 
   const activeTab = find(tabs, (t) => t.uid === activeTabUid);
-  const activeCollection = find(collections, (c) => c.uid === activeTab?.collectionUid);
+  const activeCollection = find(collections, (c) => c?.uid === activeTab?.collectionUid);
   const collectionRequestTabs = filter(tabs, (t) => t.collectionUid === activeTab?.collectionUid);
 
   useEffect(() => {
@@ -52,7 +52,7 @@ const RequestTabs = () => {
 
     const checkOverflow = () => {
       if (tabsRef.current && scrollContainerRef.current) {
-        const hasOverflow = tabsRef.current.scrollWidth > scrollContainerRef.current.clientWidth;
+        const hasOverflow = tabsRef.current.scrollWidth > scrollContainerRef.current.clientWidth + 1;
         setShowChevrons(hasOverflow);
       }
     };
@@ -103,27 +103,21 @@ const RequestTabs = () => {
     });
   };
 
-  const getRootClassname = () => {
-    return classnames({
-      'has-chevrons': showChevrons
-    });
-  };
   // Todo: Must support ephemeral requests
   return (
-    <StyledWrapper className={getRootClassname()}>
+    <StyledWrapper>
       {newRequestModalOpen && (
         <NewRequest collectionUid={activeCollection?.uid} onClose={() => setNewRequestModalOpen(false)} />
       )}
       {collectionRequestTabs && collectionRequestTabs.length ? (
         <>
-          <CollectionToolBar collection={activeCollection} />
+          {activeCollection && <CollectionToolBar collection={activeCollection} />}
           <div className="flex items-center gap-2 pl-2" ref={collectionTabsRef}>
-
-            {showChevrons ? (
+            <div className={classnames('scroll-chevrons', { hidden: !showChevrons })}>
               <ActionIcon size="lg" onClick={leftSlide} aria-label="Left Chevron" style={{ marginBottom: '3px' }}>
                 <IconChevronLeft size={18} strokeWidth={1.5} />
               </ActionIcon>
-            ) : null}
+            </div>
             {/* Moved to post mvp */}
             {/* <li className="select-none new-tab mr-1" onClick={createNewTab}>
               <div className="flex items-center home-icon-container">
@@ -175,11 +169,11 @@ const RequestTabs = () => {
               </ActionIcon>
             )}
 
-            {showChevrons ? (
+            <div className={classnames('scroll-chevrons', { hidden: !showChevrons })}>
               <ActionIcon size="lg" onClick={rightSlide} aria-label="Right Chevron" style={{ marginBottom: '3px' }}>
                 <IconChevronRight size={18} strokeWidth={1.5} />
               </ActionIcon>
-            ) : null}
+            </div>
             {/* Moved to post mvp */}
             {/* <li className="select-none new-tab choose-request">
                 <div className="flex items-center">

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js

@@ -61,7 +61,7 @@ const ResponseExampleUrlBar = ({ item, collection, editMode, onSave, exampleUid
 
         <div
           id="response-example-url"
-          className="response-example-url flex items-center flex-1 h-6"
+          className="response-example-url flex items-center flex-1 h-6 min-w-0 overflow-hidden"
         >
           <SingleLineEditor
             value={url}

packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js

@@ -1,5 +1,8 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import get from 'lodash/get';
+import find from 'lodash/find';
+import { useDispatch, useSelector } from 'react-redux';
+import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
 import Tab from 'components/Tab';
 import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
 import StatusCode from 'components/ResponsePane/StatusCode';
@@ -10,7 +13,20 @@ import StyledWrapper from './StyledWrapper';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
 
 const ResponseExampleResponsePane = ({ item, collection, editMode, exampleUid, onSave }) => {
-  const [activeTab, setActiveTab] = useState('response');
+  const dispatch = useDispatch();
+  const tabs = useSelector((state) => state.tabs.tabs);
+  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+
+  // Get the focused tab for reading persisted tab state
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  const activeTab = focusedTab?.responsePaneTab || 'response';
+
+  const selectTab = (tab) => {
+    dispatch(updateResponsePaneTab({
+      uid: exampleUid,
+      responsePaneTab: tab
+    }));
+  };
 
   const exampleData = useMemo(() => {
     return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid) || {};
@@ -67,7 +83,7 @@ const ResponseExampleResponsePane = ({ item, collection, editMode, exampleUid, o
             name={tab.name}
             label={tab.label}
             isActive={activeTab === tab.name}
-            onClick={setActiveTab}
+            onClick={selectTab}
             count={tab.count}
           />
         ))}

packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef } from 'react';
 import find from 'lodash/find';
-import classnames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
 import Overlay from '../Overlay';
@@ -15,13 +14,14 @@ import StyledWrapper from './StyledWrapper';
 import ResponseTrailers from './ResponseTrailers';
 import GrpcQueryResult from './GrpcQueryResult';
 import ResponseLayoutToggle from '../ResponseLayoutToggle';
-import Tab from 'components/Tab';
+import ResponsiveTabs from 'ui/ResponsiveTabs';
 
 const GrpcResponsePane = ({ item, collection }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
   const isLoading = ['queued', 'sending'].includes(item.requestState);
+  const rightContentRef = useRef(null);
 
   const requestTimeline = [...(collection?.timeline || [])].filter((obj) => {
     if (obj.itemUid === item.uid) return true;
@@ -38,6 +38,38 @@ const GrpcResponsePane = ({ item, collection }) => {
 
   const response = item.response || {};
 
+  const metadataCount = Array.isArray(response.metadata) ? response.metadata.length : 0;
+  const trailersCount = Array.isArray(response.trailers) ? response.trailers.length : 0;
+  const responsesCount = Array.isArray(response.responses) ? response.responses.length : 0;
+
+  const allTabs = [
+    {
+      key: 'response',
+      label: 'Response',
+      indicator:
+        responsesCount > 0 ? (
+          <sup data-testid="grpc-tab-response-count" className="ml-1 font-medium">
+            {responsesCount}
+          </sup>
+        ) : null
+    },
+    {
+      key: 'headers',
+      label: 'Metadata',
+      indicator: metadataCount > 0 ? <sup className="ml-1 font-medium">{metadataCount}</sup> : null
+    },
+    {
+      key: 'trailers',
+      label: 'Trailers',
+      indicator: trailersCount > 0 ? <sup className="ml-1 font-medium">{trailersCount}</sup> : null
+    },
+    {
+      key: 'timeline',
+      label: 'Timeline',
+      indicator: null
+    }
+  ];
+
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'response': {
@@ -83,66 +115,40 @@ const GrpcResponsePane = ({ item, collection }) => {
     return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
-  const tabConfig = [
-    {
-      name: 'response',
-      label: 'Response',
-      count: Array.isArray(response.responses) ? response.responses.length : 0
-    },
-    {
-      name: 'headers',
-      label: 'Metadata',
-      count: Array.isArray(response.metadata) ? response.metadata.length : 0
-    },
-    {
-      name: 'trailers',
-      label: 'Trailers',
-      count: Array.isArray(response.trailers) ? response.trailers.length : 0
-    },
-    {
-      name: 'timeline',
-      label: 'Timeline'
-    }
-  ];
+  const rightContent = !isLoading ? (
+    <div ref={rightContentRef} className="flex items-center">
+      {focusedTab?.responsePaneTab === 'timeline' ? (
+        <>
+          <ResponseLayoutToggle />
+          <ClearTimeline item={item} collection={collection} />
+        </>
+      ) : item?.response ? (
+        <>
+          <ResponseLayoutToggle />
+          <ResponseClear item={item} collection={collection} />
+          <GrpcStatusCode
+            status={response.statusCode}
+            text={response.statusText}
+            details={response.statusDescription}
+          />
+          <ResponseTime duration={response.duration} />
+        </>
+      ) : null}
+    </div>
+  ) : null;
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist" data-testid="grpc-response-tabs">
-        {tabConfig.map((tab) => (
-          <Tab
-            key={tab.name}
-            name={tab.name}
-            label={tab.label}
-            isActive={focusedTab.responsePaneTab === tab.name}
-            onClick={selectTab}
-            count={tab.count}
-          />
-        ))}
-        {!isLoading ? (
-          <div className="flex flex-grow justify-end items-center">
-            {focusedTab?.responsePaneTab === 'timeline' ? (
-              <>
-                <ResponseLayoutToggle />
-                <ClearTimeline item={item} collection={collection} />
-              </>
-            ) : item?.response ? (
-              <>
-                <ResponseLayoutToggle />
-                <ResponseClear item={item} collection={collection} />
-                <GrpcStatusCode
-                  status={response.statusCode}
-                  text={response.statusText}
-                  details={response.statusDescription}
-                />
-                <ResponseTime duration={response.duration} />
-              </>
-            ) : null}
-          </div>
-        ) : null}
+      <div className="px-4">
+        <ResponsiveTabs
+          tabs={allTabs}
+          activeTab={focusedTab.responsePaneTab}
+          onTabSelect={selectTab}
+          rightContent={rightContent}
+          rightContentRef={rightContentRef}
+        />
       </div>
-      <section
-        className="flex flex-col flex-grow pl-3 pr-4 h-0 mt-4"
-      >
+      <section className="flex flex-col flex-grow px-4 h-0 mt-4">
         {isLoading ? <Overlay item={item} collection={collection} /> : null}
         {!item?.response ? (
           focusedTab?.responsePaneTab === 'timeline' && requestTimeline?.length ? (

packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js

@@ -10,12 +10,14 @@ const LargeResponseWarning = ({ item, responseSize, onRevealResponse }) => {
   const { ipcRenderer } = window;
   const response = item.response || {};
 
-  const saveResponseToFile = () => {
+  const downloadResponseToFile = () => {
     return new Promise((resolve, reject) => {
       ipcRenderer
-        .invoke('renderer:save-response-to-file', response, item.requestSent.url)
-        .then(() => {
-          toast.success('Response saved to file');
+        .invoke('renderer:save-response-to-file', response, item.requestSent.url, item.pathname)
+        .then((result) => {
+          if (result && result.success) {
+            toast.success('Response downloaded to file');
+          }
           resolve();
         })
         .catch((err) => {
@@ -72,13 +74,13 @@ const LargeResponseWarning = ({ item, responseSize, onRevealResponse }) => {
         <Button
           icon={<IconDownload size={18} strokeWidth={1.5} />}
           iconPosition="left"
-          onClick={saveResponseToFile}
+          onClick={downloadResponseToFile}
           disabled={!response.dataBuffer}
-          title="Save response to file"
+          title="Download response to file"
           color="secondary"
           size="sm"
         >
-          Save
+          Download
         </Button>
         <Button
           icon={<IconCopy size={18} strokeWidth={1.5} />}

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { isValidHtml } from 'utils/common/index';
-import { escapeHtml, isValidHtmlSnippet } from 'utils/response/index';
+import { escapeHtml } from 'utils/response/index';
 
 const HtmlPreview = React.memo(({ data, baseUrl }) => {
   const webviewContainerRef = useRef(null);
@@ -31,7 +30,7 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => {
     return () => mutationObserver.disconnect();
   }, []);
 
-  if (isValidHtml(data) || isValidHtmlSnippet(data)) {
+  const renderHtmlPreview = (data, baseUrl, isDragging, webviewContainerRef) => {
     const htmlContent = data.includes('<head>')
       ? data.replace('<head>', `<head><base href="${escapeHtml(baseUrl)}">`)
       : `<head><base href="${escapeHtml(baseUrl)}"></head>${data}`;
@@ -52,7 +51,7 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => {
         />
       </div>
     );
-  }
+  };
 
   // For all other data types, render safely as formatted text
   let displayContent = '';
@@ -60,18 +59,12 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => {
     displayContent = String(data);
   } else if (typeof data === 'object') {
     displayContent = JSON.stringify(data, null);
-  } else if (typeof data === 'string') {
-    displayContent = data;
   } else {
     displayContent = String(data);
   }
 
   return (
-    <pre
-      className="bg-white font-mono text-[13px] whitespace-pre-wrap break-words overflow-auto overflow-x-hidden p-4 text-[#24292f] w-full max-w-full h-full box-border relative"
-    >
-      {displayContent}
-    </pre>
+    <>{renderHtmlPreview(displayContent, baseUrl, isDragging, webviewContainerRef)}</>
   );
 });
 

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -49,11 +49,11 @@ export const useInitialResponseFormat = (dataBuffer, headers) => {
 
     // Wait until both content types are available
     if (detectedContentType === null || contentType === undefined) {
-      return { initialFormat: null, initialTab: null };
+      return { initialFormat: null, initialTab: null, contentType: contentType };
     }
 
     const initial = getDefaultResponseFormat(contentType);
-    return { initialFormat: initial.format, initialTab: initial.tab };
+    return { initialFormat: initial.format, initialTab: initial.tab, contentType: contentType };
   }, [dataBuffer, headers]);
 };
 
@@ -66,6 +66,7 @@ export const useResponsePreviewFormatOptions = (dataBuffer, headers) => {
     const byteFormatTypes = ['image', 'video', 'audio', 'pdf', 'zip'];
 
     const isByteFormatType = (contentType) => {
+      if (contentType.toLowerCase().includes('svg')) return false; // SVG is text-based
       return byteFormatTypes.some((type) => contentType.includes(type));
     };
 
@@ -203,7 +204,7 @@ const QueryResult = ({
                 dataBuffer={dataBuffer}
                 formattedData={formattedData}
                 item={item}
-                contentType={contentType}
+                contentType={detectedContentType ?? contentType}
                 previewMode={previewMode}
                 codeMirrorMode={codeMirrorMode}
                 collection={collection}

packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js

@@ -112,7 +112,7 @@ const ResponseBookmark = forwardRef(({ item, collection, responseSize, children
     }));
 
     // Save the request
-    await dispatch(saveRequest(item.uid, collection.uid));
+    await dispatch(saveRequest(item.uid, collection.uid, true));
 
     // Task middleware will track this and open the example in a new tab once the file is reloaded
     dispatch(insertTaskIntoQueue({

packages/bruno-app/src/components/ResponsePane/ResponseDownload/index.js

@@ -24,7 +24,12 @@ const ResponseDownload = forwardRef(({ item, children }, ref) => {
     return new Promise((resolve, reject) => {
       ipcRenderer
         .invoke('renderer:save-response-to-file', response, item?.requestSent?.url, item.pathname)
-        .then(resolve)
+        .then((result) => {
+          if (result && result.success) {
+            toast.success('Response downloaded to file');
+          }
+          resolve();
+        })
         .catch((err) => {
           toast.error(get(err, 'error.message') || 'Something went wrong!');
           reject(err);

packages/bruno-app/src/components/ResponsePane/ScriptError/index.js

@@ -4,9 +4,10 @@ import ErrorBanner from 'ui/ErrorBanner';
 const ScriptError = ({ item, onClose }) => {
   const preRequestError = item?.preRequestScriptErrorMessage;
   const postResponseError = item?.postResponseScriptErrorMessage;
+  const hooksError = item?.hookScriptErrorMessage;
   const testScriptError = item?.testScriptErrorMessage;
 
-  if (!preRequestError && !postResponseError && !testScriptError) return null;
+  if (!preRequestError && !postResponseError && !testScriptError && !hooksError) return null;
 
   const errors = [];
 
@@ -24,6 +25,13 @@ const ScriptError = ({ item, onClose }) => {
     });
   }
 
+  if (hooksError) {
+    errors.push({
+      title: 'Hooks Script Error',
+      message: hooksError
+    });
+  }
+
   if (testScriptError) {
     errors.push({
       title: 'Test Script Error',

packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js

@@ -245,7 +245,7 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
   };
 
   return (
-    <StyledWrapper className={`${eventClass} pl-1`}>
+    <StyledWrapper className={`${eventClass} pl-1 mb-2`}>
       <div className="event-header" onClick={toggleCollapse}>
         {isCollapsed ? <IconChevronRight size={16} strokeWidth={1.5} /> : <IconChevronDown size={16} strokeWidth={1.5} />}
         <div className="event-icon-container">

packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js

@@ -53,6 +53,17 @@ const StyledWrapper = styled.div`
     align-items: center;
     margin-left: 10px;
   }
+
+  div.tabs .action-icon {
+    color: ${(props) => props.theme.dropdown.iconColor};
+    opacity: 0.8;
+
+    &:hover {
+      color: ${(props) => props.theme.text};
+      opacity: 1;
+      background-color: ${(props) => props.theme.workspace.button.bg};
+    }
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  overflow-y: auto;
+  flex: 1;
+  min-height: 0; 
+  height: 100%;
 
   .empty-state {
     padding: 1rem;

packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js

@@ -1,13 +1,11 @@
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback, memo } from 'react';
 import classnames from 'classnames';
 import StyledWrapper from './StyledWrapper';
 import { IconExclamationCircle, IconChevronRight, IconInfoCircle, IconChevronDown, IconArrowUpRight, IconArrowDownLeft } from '@tabler/icons';
 import CodeEditor from 'components/CodeEditor/index';
 import { useTheme } from 'providers/Theme';
-import { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useRef } from 'react';
-import { useEffect } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 
 const getContentMeta = (content) => {
   if (typeof content === 'object') {
@@ -61,8 +59,7 @@ const TypeIcon = ({ type }) => {
   }[type];
 };
 
-const WSMessageItem = ({ message, inFocus }) => {
-  const [isOpen, setIsOpen] = useState(false);
+const WSMessageItem = memo(({ message, isOpen, onToggle }) => {
   const [showHex, setShowHex] = useState(false);
   const preferences = useSelector((state) => state.app.preferences);
   const { displayedTheme } = useTheme();
@@ -82,21 +79,23 @@ const WSMessageItem = ({ message, inFocus }) => {
     const dateDiff = Date.now() - new Date(message.timestamp).getTime();
     if (dateDiff < 1000 * 10) {
       setIsNew(true);
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         notified.current = true;
         setIsNew(false);
       }, 2500);
+      return () => clearTimeout(timer);
     }
-  }, [message]);
+  }, [message.timestamp]);
 
   const canOpenMessage = !isInfo && !isError;
 
+  const handleToggle = () => {
+    if (!canOpenMessage) return;
+    onToggle?.(message.timestamp);
+  };
+
   return (
     <div
-      ref={(node) => {
-        if (!node) return;
-        if (inFocus) node.scrollIntoView();
-      }}
       className={classnames('ws-message flex flex-col p-2', {
         'ws-incoming': isIncoming,
         'ws-outgoing': isOutgoing,
@@ -111,10 +110,7 @@ const WSMessageItem = ({ message, inFocus }) => {
           'cursor-pointer': canOpenMessage,
           'cursor-not-allowed': !canOpenMessage
         })}
-        onClick={(e) => {
-          if (!canOpenMessage) return;
-          setIsOpen(!isOpen);
-        }}
+        onClick={handleToggle}
       >
         <div className="flex min-w-0 shrink">
           <span className="message-type-icon">
@@ -176,23 +172,87 @@ const WSMessageItem = ({ message, inFocus }) => {
       )}
     </div>
   );
-};
+});
+
+const WSMessagesList = ({ messages = [] }) => {
+  const virtuosoRef = useRef(null);
+  const [scrollerElement, setScrollerElement] = useState(null);
+  const [openMessages, setOpenMessages] = useState(new Set());
+  const userScrolledAwayRef = useRef(false);
+
+  // Toggle message open/closed state by timestamp
+  const handleMessageToggle = useCallback((timestamp) => {
+    setOpenMessages((prev) => {
+      const next = new Set(prev);
+      if (next.has(timestamp)) {
+        next.delete(timestamp);
+      } else {
+        next.add(timestamp);
+      }
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!scrollerElement) return;
+
+    const handleWheel = (e) => {
+      // deltaY < 0 means scrolling up
+      if (e.deltaY < 0) {
+        userScrolledAwayRef.current = true;
+      }
+    };
+
+    scrollerElement.addEventListener('wheel', handleWheel, { passive: true });
+
+    return () => {
+      scrollerElement.removeEventListener('wheel', handleWheel);
+    };
+  }, [scrollerElement]);
+
+  const handleAtBottomStateChange = useCallback((atBottom) => {
+    if (atBottom) {
+      // User scrolled back to bottom, re-enable auto-scroll
+      userScrolledAwayRef.current = false;
+    }
+  }, []);
+
+  const followOutput = useCallback((isAtBottom) => {
+    // Don't auto-scroll if user has scrolled away or has messages open
+    if (userScrolledAwayRef.current || openMessages.size > 0) {
+      return false;
+    }
+    if (isAtBottom) {
+      return 'smooth';
+    }
+    return false;
+  }, [openMessages.size]);
+
+  const renderItem = useCallback((_, msg) => {
+    const isOpen = openMessages.has(msg.timestamp);
+    return <WSMessageItem message={msg} isOpen={isOpen} onToggle={handleMessageToggle} />;
+  }, [openMessages, handleMessageToggle]);
+
+  const computeItemKey = useCallback((_, msg) => {
+    return msg.seq ?? msg.timestamp;
+  }, []);
 
-const WSMessagesList = ({ order = -1, messages = [] }) => {
   if (!messages.length) {
     return <StyledWrapper><div className="empty-state">No messages yet.</div></StyledWrapper>;
   }
 
-  // sort based on order, seq was newly added and might be missing in some cases and when missing,
-  // the timestamp will be used instead
-  const ordered = messages.toSorted((x, y) => ((x.seq ?? x.timestamp) - (y.seq ?? y.timestamp)) * (-order));
-
   return (
     <StyledWrapper className="ws-messages-list flex flex-col">
-      {ordered.map((msg, idx, src) => {
-        const inFocus = order === -1 ? src.length - 1 === idx : idx === 0;
-        return <WSMessageItem key={msg.seq ? msg.seq : msg.timestamp} inFocus={inFocus} id={idx} message={msg} />;
-      })}
+      <Virtuoso
+        ref={virtuosoRef}
+        scrollerRef={setScrollerElement}
+        data={messages}
+        itemContent={renderItem}
+        computeItemKey={computeItemKey}
+        followOutput={followOutput}
+        initialTopMostItemIndex={messages.length - 1}
+        atBottomStateChange={handleAtBottomStateChange}
+      />
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useRef } from 'react';
 import find from 'lodash/find';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
@@ -11,13 +11,12 @@ import ClearTimeline from '../ClearTimeline';
 import ResponseClear from '../ResponseClear';
 import StyledWrapper from './StyledWrapper';
 import ResponseLayoutToggle from '../ResponseLayoutToggle';
-import Tab from 'components/Tab';
+import ResponsiveTabs from 'ui/ResponsiveTabs';
 import WSMessagesList from './WSMessagesList';
-import WSResponseSortOrder from './WSResponseSortOrder';
 import WSResponseHeaders from './WSResponseHeaders';
 
 const WSResult = ({ response }) => {
-  return <WSMessagesList order={response?.sortOrder} messages={response.responses || []} />;
+  return <WSMessagesList messages={response.responses || []} />;
 };
 
 const WSResponsePane = ({ item, collection }) => {
@@ -25,6 +24,7 @@ const WSResponsePane = ({ item, collection }) => {
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
   const isLoading = ['queued', 'sending'].includes(item.requestState);
+  const rightContentRef = useRef(null);
 
   const requestTimeline = [...(collection?.timeline || [])].filter((obj) => {
     if (obj.itemUid === item.uid) return true;
@@ -39,6 +39,29 @@ const WSResponsePane = ({ item, collection }) => {
 
   const response = item.response || {};
 
+  const messagesCount = Array.isArray(response.responses) ? response.responses.length : 0;
+  const headersCount = response.headers ? Object.keys(response.headers).length : 0;
+
+  const allTabs = useMemo(() => {
+    return [
+      {
+        key: 'response',
+        label: 'Messages',
+        indicator: messagesCount > 0 ? <sup className="ml-1 font-medium">{messagesCount}</sup> : null
+      },
+      {
+        key: 'headers',
+        label: 'Headers',
+        indicator: headersCount > 0 ? <sup className="ml-1 font-medium">{headersCount}</sup> : null
+      },
+      {
+        key: 'timeline',
+        label: 'Timeline',
+        indicator: null
+      }
+    ];
+  }, [messagesCount, headersCount]);
+
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'response': {
@@ -81,62 +104,40 @@ const WSResponsePane = ({ item, collection }) => {
     return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
-  const tabConfig = [
-    {
-      name: 'response',
-      label: 'Messages',
-      count: Array.isArray(response.responses) ? response.responses.length : 0
-    },
-    {
-      name: 'headers',
-      label: 'Headers',
-      count: response.headers ? Object.keys(response.headers).length : 0
-    },
-    {
-      name: 'timeline',
-      label: 'Timeline'
-    }
-  ];
+  const rightContent = !isLoading ? (
+    <div ref={rightContentRef} className="flex items-center">
+      {focusedTab?.responsePaneTab === 'timeline' ? (
+        <>
+          <ResponseLayoutToggle />
+          <ClearTimeline item={item} collection={collection} />
+        </>
+      ) : item?.response ? (
+        <>
+          <ResponseLayoutToggle />
+          <ResponseClear item={item} collection={collection} />
+          <WSStatusCode
+            status={response.statusCode}
+            text={response.statusText}
+            details={response.statusDescription}
+          />
+          <ResponseTime duration={response.duration} />
+        </>
+      ) : null}
+    </div>
+  ) : null;
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist">
-        {tabConfig.map((tab) => (
-          <Tab
-            key={tab.name}
-            name={tab.name}
-            label={tab.label}
-            isActive={focusedTab.responsePaneTab === tab.name}
-            onClick={selectTab}
-            count={tab.count}
-          />
-        ))}
-        {!isLoading ? (
-          <div className="flex flex-grow justify-end items-center">
-            {focusedTab?.responsePaneTab === 'timeline' ? (
-              <>
-                <ResponseLayoutToggle />
-                <ClearTimeline item={item} collection={collection} />
-              </>
-            ) : item?.response ? (
-              <>
-                <ResponseLayoutToggle />
-                <ResponseClear item={item} collection={collection} />
-                <WSResponseSortOrder item={item} collection={collection} />
-                <WSStatusCode
-                  status={response.statusCode}
-                  text={response.statusText}
-                  details={response.statusDescription}
-                />
-                <ResponseTime duration={response.duration} />
-              </>
-            ) : null}
-          </div>
-        ) : null}
+      <div className="px-4">
+        <ResponsiveTabs
+          tabs={allTabs}
+          activeTab={focusedTab.responsePaneTab}
+          onTabSelect={selectTab}
+          rightContent={rightContent}
+          rightContentRef={rightContentRef}
+        />
       </div>
-      <section
-        className="flex flex-col flex-grow pl-3 pr-4 h-0 mt-4"
-      >
+      <section className="flex flex-col flex-grow px-4 h-0 mt-4">
         {isLoading ? <Overlay item={item} collection={collection} /> : null}
         {!item?.response ? (
           focusedTab?.responsePaneTab === 'timeline' && requestTimeline?.length ? (

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

@@ -42,9 +42,12 @@ const ResponsePane = ({ item, collection }) => {
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
 
   // Initialize format and tab only once when data loads.
-  const { initialFormat, initialTab } = useInitialResponseFormat(response?.dataBuffer, response?.headers);
+  const { initialFormat, initialTab, contentType } = useInitialResponseFormat(response?.dataBuffer, response?.headers);
   const previewFormatOptions = useResponsePreviewFormatOptions(response?.dataBuffer, response?.headers);
 
+  // Track previous response headers to detect when content-type changes
+  const previousContentRef = useRef(contentType);
+
   const persistedFormat = focusedTab?.responseFormat;
   const persistedViewTab = focusedTab?.responseViewTab;
 
@@ -56,13 +59,19 @@ const ResponsePane = ({ item, collection }) => {
     if (!focusedTab || initialFormat === null || initialTab === null) {
       return;
     }
-    if (persistedFormat === null) {
+
+    // Check if response headers (content-type) changed using deep comparison
+    const contentTypeChanged = contentType !== previousContentRef.current;
+    if (contentTypeChanged) {
+      previousContentRef.current = contentType;
+    }
+    if (contentTypeChanged || persistedFormat === null) {
       dispatch(updateResponseFormat({ uid: item.uid, responseFormat: initialFormat }));
     }
-    if (persistedViewTab === null) {
+    if (contentTypeChanged || persistedViewTab === null) {
       dispatch(updateResponseViewTab({ uid: item.uid, responseViewTab: initialTab }));
     }
-  }, [initialFormat, initialTab, persistedFormat, persistedViewTab, focusedTab, item.uid, dispatch]);
+  }, [contentType, initialFormat, initialTab, persistedFormat, persistedViewTab, focusedTab, item.uid, dispatch]);
 
   const handleFormatChange = useCallback((newFormat) => {
     dispatch(updateResponseFormat({ uid: item.uid, responseFormat: newFormat }));
@@ -77,10 +86,10 @@ const ResponsePane = ({ item, collection }) => {
   });
 
   useEffect(() => {
-    if (item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage || item?.testScriptErrorMessage) {
+    if (item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage || item?.testScriptErrorMessage || item?.hookScriptErrorMessage) {
       setShowScriptErrorCard(true);
     }
-  }, [item?.preRequestScriptErrorMessage, item?.postResponseScriptErrorMessage, item?.testScriptErrorMessage]);
+  }, [item?.preRequestScriptErrorMessage, item?.postResponseScriptErrorMessage, item?.testScriptErrorMessage, item?.hookScriptErrorMessage]);
 
   const selectTab = (tab) => {
     dispatch(
@@ -107,7 +116,7 @@ const ResponsePane = ({ item, collection }) => {
   }, [response.size, response.dataBuffer]);
   const responseHeadersCount = typeof response.headers === 'object' ? Object.entries(response.headers).length : 0;
 
-  const hasScriptError = item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage || item?.testScriptErrorMessage;
+  const hasScriptError = item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage || item?.testScriptErrorMessage || item?.hookScriptErrorMessage;
 
   const allTabs = useMemo(() => {
     return [

packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js

@@ -21,17 +21,17 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const { requestSent, responseReceived, testResults, assertionResults, preRequestTestResults, postResponseTestResults, error } = item;
 
   useEffect(() => {
-    if (item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage || item?.testScriptErrorMessage) {
+    if (item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage || item?.testScriptErrorMessage || item?.hookScriptErrorMessage) {
       setShowScriptErrorCard(true);
     }
-  }, [item?.preRequestScriptErrorMessage, item?.postResponseScriptErrorMessage, item?.testScriptErrorMessage]);
+  }, [item?.preRequestScriptErrorMessage, item?.postResponseScriptErrorMessage, item?.testScriptErrorMessage, item?.hookScriptErrorMessage]);
 
   const headers = get(item, 'responseReceived.headers', []);
   const status = get(item, 'responseReceived.status', 0);
   const size = get(item, 'responseReceived.size', 0);
   const duration = get(item, 'responseReceived.duration', 0);
 
-  const hasScriptError = item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage || item?.testScriptErrorMessage;
+  const hasScriptError = item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage || item?.testScriptErrorMessage || item?.hookScriptErrorMessage;
 
   const selectTab = (tab) => setSelectedTab(tab);
 

packages/bruno-app/src/components/RunnerResults/index.jsx

@@ -310,7 +310,7 @@ export default function RunnerResults({ collection }) {
             <div className="flex flex-row gap-2">
               <Button
                 type="submit"
-                disabled={shouldDisableCollectionRun || (configureMode && selectedRequestItems.length === 0) || isCollectionLoading}
+                disabled={shouldDisableCollectionRun || (configureMode && selectedRequestItems.length === 0) || isCollectionLoading || runnerInfo.status === 'started'}
                 onClick={runCollection}
               >
                 {configureMode && selectedRequestItems.length > 0

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

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  position: relative;
+
+  .search-icon {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .close-icon {
+    color: ${(props) => props.theme.colors.text.muted};
+    cursor: pointer;
+
+    &:hover {
+      color: ${(props) => props.theme.text};
+    }
+  }
+
+  input#search-input {
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
+    color: ${(props) => props.theme.text};
+
+    &:focus {
+      outline: none;
+      border-color: ${(props) => props.theme.input.focusBorder};
+    }
+
+    &::placeholder {
+      color: ${(props) => props.theme.input.placeholder.color};
+      opacity: ${(props) => props.theme.input.placeholder.opacity};
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconSearch, IconX } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
 
 const SearchInput = ({
   searchText,
@@ -17,9 +18,9 @@ const SearchInput = ({
   };
 
   return (
-    <div className={`relative px-2 ${className}`}>
+    <StyledWrapper className={`px-2 ${className}`}>
       <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-        <span className="text-gray-500">
+        <span className="search-icon">
           <IconSearch size={16} strokeWidth={1.5} />
         </span>
       </div>
@@ -50,7 +51,7 @@ const SearchInput = ({
           </span>
         </div>
       )}
-    </div>
+    </StyledWrapper>
   );
 };
 

packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js

@@ -20,7 +20,14 @@ const CloneCollection = ({ onClose, collectionUid }) => {
   const [isEditing, toggleEditing] = useState(false);
   const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));
   const preferences = useSelector((state) => state.app.preferences);
-  const defaultLocation = get(preferences, 'general.defaultCollectionLocation', '');
+  const workspaces = useSelector((state) => state.workspaces?.workspaces || []);
+  const workspaceUid = useSelector((state) => state.workspaces?.activeWorkspaceUid);
+  const activeWorkspace = workspaces.find((w) => w.uid === workspaceUid);
+  const isDefaultWorkspace = activeWorkspace?.type === 'default';
+
+  const defaultLocation = isDefaultWorkspace
+    ? get(preferences, 'general.defaultCollectionLocation', '')
+    : (activeWorkspace?.pathname ? `${activeWorkspace.pathname}/collections` : '');
   const { name } = collection;
 
   const formik = useFormik({

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js

@@ -17,8 +17,10 @@ const DeleteResponseExampleModal = ({ onClose, example, item, collection }) => {
       collectionUid: collection.uid,
       exampleUid: example.uid
     }));
-    dispatch(saveRequest(item.uid, collection.uid));
-    onClose();
+    dispatch(saveRequest(item.uid, collection.uid, true))
+      .then(() => {
+        onClose();
+      });
   };
 
   return (

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js

@@ -86,7 +86,7 @@ const ExampleItem = ({ example, item, collection }) => {
     }));
 
     // Save the request
-    await dispatch(saveRequest(item.uid, collection.uid));
+    await dispatch(saveRequest(item.uid, collection.uid, true));
 
     // Task middleware will track this and open the example in a new tab once the file is reloaded
     dispatch(insertTaskIntoQueue({
@@ -125,8 +125,11 @@ const ExampleItem = ({ example, item, collection }) => {
         name: newName
       }
     }));
-    dispatch(saveRequest(item.uid, collection.uid));
-    setShowRenameModal(false);
+    dispatch(saveRequest(item.uid, collection.uid, true))
+      .then(() => {
+        toast.success(`Example renamed to "${newName}"`);
+        setShowRenameModal(false);
+      });
   };
 
   // Build menu items for MenuDropdown

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js

@@ -110,12 +110,14 @@ const GenerateCodeItem = ({ collectionUid, item, onClose, isExample = false, exa
   // Resolve auth inheritance
   const resolvedRequest = resolveInheritedAuth(item, collection);
 
-  // Create the final item for code generation
+  // requestData.request contains either the normal request or example request data.
+  // We explicitly set auth from resolvedRequest to ensure inherited auth
+  // (from folders/collection) is resolved correctly in generated code.
   const finalItem = {
     ...item,
     request: {
-      ...resolvedRequest,
       ...requestData.request,
+      auth: resolvedRequest.auth,
       url: finalUrl
     }
   };

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/interpolation.js

@@ -1,12 +1,29 @@
-import { interpolate } from '@usebruno/common';
+import { interpolate, interpolateObject } from '@usebruno/common';
 import { cloneDeep } from 'lodash';
 
+export const interpolateAuth = (auth, variables = {}) => {
+  if (!auth) return auth;
+  return interpolateObject(auth, variables);
+};
+
 export const interpolateHeaders = (headers = [], variables = {}) => {
-  return headers.map((header) => ({
-    ...header,
-    name: interpolate(header.name, variables),
-    value: interpolate(header.value, variables)
-  }));
+  if (!headers) return [];
+  return headers.map((header) => {
+    if (header.enabled) {
+      return interpolateObject(header, variables);
+    }
+    return header;
+  });
+};
+
+export const interpolateParams = (params = [], variables = {}) => {
+  if (!params) return [];
+  return params.map((param) => {
+    if (param.enabled) {
+      return interpolateObject(param, variables);
+    }
+    return param;
+  });
 };
 
 export const interpolateBody = (body, variables = {}) => {

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/interpolation.spec.js

@@ -1,48 +1,139 @@
-import { interpolateHeaders, interpolateBody } from './interpolation';
+import { interpolateAuth, interpolateHeaders, interpolateBody, interpolateParams } from './interpolation';
 
 describe('interpolation utils', () => {
+  describe('interpolateAuth', () => {
+    it('should interpolate auth object', () => {
+      const auth = {
+        mode: 'basic',
+        basic: {
+          username: '{{user}}',
+          password: '{{pass}}'
+        }
+      };
+      const variables = { user: 'admin', pass: 'secret' };
+
+      const result = interpolateAuth(auth, variables);
+
+      expect(result).toEqual({
+        mode: 'basic',
+        basic: {
+          username: 'admin',
+          password: 'secret'
+        }
+      });
+    });
+
+    it('should return null for null auth', () => {
+      expect(interpolateAuth(null, {})).toBeNull();
+    });
+
+    it('should return undefined for undefined auth', () => {
+      expect(interpolateAuth(undefined, {})).toBeUndefined();
+    });
+  });
+
   describe('interpolateHeaders', () => {
-    it('should interpolate variables in header name and value while preserving other props', () => {
+    it('should interpolate header names and values', () => {
       const headers = [
-        { uid: '1', name: 'X-{{var}}', value: 'value-{{var}}', enabled: true }
+        { name: 'X-{{headerName}}', value: '{{headerValue}}', enabled: true },
+        { name: 'Content-Type', value: 'application/json', enabled: true }
       ];
-      const variables = { var: 'test' };
+      const variables = { headerName: 'Custom', headerValue: 'test-value' };
 
       const result = interpolateHeaders(headers, variables);
+
       expect(result).toEqual([
-        {
-          uid: '1',
-          name: 'X-test',
-          value: 'value-test',
-          enabled: true
-        }
+        { name: 'X-Custom', value: 'test-value', enabled: true },
+        { name: 'Content-Type', value: 'application/json', enabled: true }
       ]);
     });
+
+    it('should return empty array for empty headers', () => {
+      expect(interpolateHeaders([], {})).toEqual([]);
+    });
   });
 
   describe('interpolateBody', () => {
-    it('should interpolate JSON body strings and keep formatting', () => {
+    it('should return null for null body', () => {
+      expect(interpolateBody(null, {})).toBeNull();
+    });
+
+    it('should interpolate JSON body with escaping', () => {
       const body = {
         mode: 'json',
-        json: '{"name": "{{username}}"}'
+        json: '{"name": "{{name}}", "count": {{count}}}'
       };
-      const variables = { username: 'bruno' };
+      const variables = { name: 'Test', count: 42 };
 
       const result = interpolateBody(body, variables);
-      expect(result.json).toBe('{\n  "name": "bruno"\n}');
+
+      expect(result.mode).toBe('json');
+      expect(JSON.parse(result.json)).toEqual({ name: 'Test', count: 42 });
     });
 
     it('should interpolate text body', () => {
-      const body = {
-        mode: 'text',
-        text: 'Hello {{name}}'
-      };
+      const body = { mode: 'text', text: 'Hello {{name}}' };
       const result = interpolateBody(body, { name: 'World' });
       expect(result.text).toBe('Hello World');
     });
 
-    it('should return null when body is null', () => {
-      expect(interpolateBody(null, { a: 1 })).toBeNull();
+    it('should interpolate xml body', () => {
+      const body = { mode: 'xml', xml: '<user>{{name}}</user>' };
+      const result = interpolateBody(body, { name: 'Alice' });
+      expect(result.xml).toBe('<user>Alice</user>');
+    });
+
+    it('should interpolate formUrlEncoded body for enabled params only', () => {
+      const body = {
+        mode: 'formUrlEncoded',
+        formUrlEncoded: [
+          { name: 'key1', value: '{{val1}}', enabled: true },
+          { name: 'key2', value: '{{val2}}', enabled: false }
+        ]
+      };
+      const variables = { val1: 'value1', val2: 'value2' };
+
+      const result = interpolateBody(body, variables);
+
+      expect(result.formUrlEncoded[0].value).toBe('value1');
+      expect(result.formUrlEncoded[1].value).toBe('{{val2}}');
+    });
+
+    it('should interpolate multipartForm body for enabled text params only', () => {
+      const body = {
+        mode: 'multipartForm',
+        multipartForm: [
+          { name: 'field1', value: '{{val}}', type: 'text', enabled: true },
+          { name: 'field2', value: '{{val}}', type: 'file', enabled: true }
+        ]
+      };
+      const variables = { val: 'interpolated' };
+
+      const result = interpolateBody(body, variables);
+
+      expect(result.multipartForm[0].value).toBe('interpolated');
+      expect(result.multipartForm[1].value).toBe('{{val}}');
+    });
+  });
+
+  describe('interpolateParams', () => {
+    it('should interpolate param names and values', () => {
+      const params = [
+        { name: '{{paramName}}', value: '{{paramValue}}', enabled: true },
+        { name: 'static', value: '{{val}}', enabled: false }
+      ];
+      const variables = { paramName: 'key', paramValue: 'value', val: 'skipped' };
+
+      const result = interpolateParams(params, variables);
+
+      expect(result[0].name).toBe('key');
+      expect(result[0].value).toBe('value');
+      expect(result[1].name).toBe('static');
+      expect(result[1].value).toBe('{{val}}');
+    });
+
+    it('should return empty array for empty params', () => {
+      expect(interpolateParams([], {})).toEqual([]);
     });
   });
 });