Merge pull request #5030 from stupidly-logical/fix/gen_code_auth_header

fix: Add null check for collection root in snippet generator #5029

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @helloanoop @maintainer-bruno @lohit-bruno @naman-bruno

.github/workflows/playwright.yml

@@ -1,44 +0,0 @@
-name: Playwright E2E Tests
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  e2e-test:
-    timeout-minutes: 60
-    runs-on: ubuntu-24.04
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: v22.11.x
-    - name: Install dependencies
-      run: |
-        sudo apt-get update
-        sudo apt-get --no-install-recommends install -y \
-          libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
-          xvfb
-        npm ci --legacy-peer-deps
-        sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
-        sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
-
-    - name: Build libraries
-      run: |
-        npm run build:graphql-docs
-        npm run build:bruno-query
-        npm run build:bruno-common
-        npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-        npm run build:bruno-converters
-        npm run build:bruno-requests
-
-    - name: Run Playwright tests
-      run: |
-        xvfb-run npm run test:e2e
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30

.github/workflows/tests.yml

@@ -91,5 +91,47 @@ jobs:
         uses: EnricoMi/publish-unit-test-result-action@v2
         if: always()
         with:
+          check_name: CLI Test Results
           files: packages/bruno-tests/collection/junit.xml
           comment_mode: always
+  e2e-test:
+    name: Playwright E2E Tests
+    timeout-minutes: 60
+    runs-on: ubuntu-24.04
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: v22.11.x
+    - name: Install dependencies
+      run: |
+        sudo apt-get update
+        sudo apt-get --no-install-recommends install -y \
+          libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
+          xvfb
+        npm ci --legacy-peer-deps
+        sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+        sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+
+    - name: Install dependencies for test collection environment
+      run: |
+        npm ci --prefix packages/bruno-tests/collection
+
+    - name: Build libraries
+      run: |
+        npm run build:graphql-docs
+        npm run build:bruno-query
+        npm run build:bruno-common
+        npm run sandbox:bundle-libraries --workspace=packages/bruno-js
+        npm run build:bruno-converters
+        npm run build:bruno-requests
+
+    - name: Run Playwright tests
+      run: |
+        xvfb-run npm run test:e2e
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

contributing.md

@@ -99,14 +99,13 @@ npm run dev
 ```
 
 #### Customize Electron `userData` path
-If `ELECTRON_APP_NAME` env-variable is present and its development mode, then the `appName` and `userData` path is modified accordingly.
+If `ELECTRON_USER_DATA_PATH` env-variable is present and its development mode, then `userData` path is modified accordingly.
 
 e.g.
 ```sh
-ELECTRON_APP_NAME=bruno-dev npm run dev:electron
+ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
 ```
-
-> This doesn't change the name of the window or the names in lot of other places, only the name used by Electron internally.
+This will create a `bruno-test` folder on your Desktop and use it as the `userData` path.
 
 ### Troubleshooting
 

docs/contributing/contributing_es.md

@@ -1,4 +1,4 @@
-[English](../../contributing.md)
+[Inglés](../../contributing.md)
 
 ## ¡Juntos, hagamos a Bruno mejor!
 
@@ -6,58 +6,111 @@ Estamos encantados de que quieras ayudar a mejorar Bruno. A continuación encont
 
 ### Tecnologías utilizadas
 
-Bruno está construido con NextJs y React. También usamos electron para distribuir una versión de escritorio (que soporta colecciones locales).
+Bruno está construido con React y Electron
 
 Librerías que utilizamos:
 
-- CSS - Tailwind
-- Editores de código - Codemirror
+- CSS - Tailwind CSS
+- Editores de código - CodeMirror
 - Manejo del estado - Redux
 - Íconos - Tabler Icons
 - Formularios - formik
 - Validación de esquemas - Yup
 - Cliente de peticiones - axios
 - Monitor del sistema de archivos - chokidar
+- i18n (internacionalización) - i18next
 
 ### Dependencias
 
-Necesitarás [Node v20.x o la última versión LTS](https://nodejs.org/es) y npm 8.x. Ten en cuenta que utilizamos espacios de trabajo de npm en el proyecto.
+> [!IMPORTANT]
+> Necesitarás [Node v22.x o la última versión LTS](https://nodejs.org/es/). Ten en cuenta que Bruno usa los espacios de trabajo de npm
 
 ## Desarrollo
 
-Bruno está siendo desarrollado como una aplicación de escritorio. Para ejecutarlo, primero debes ejecutar la aplicación de nextjs en una terminal y luego ejecutar la aplicación de electron en otra terminal.
+Bruno es una aplicación de escritorio. A continuación se detallan las instrucciones paso a paso para ejecutar Bruno.
 
-### Dependencias
+> Nota: Utilizamos React para el frontend y rsbuild para el servidor de desarrollo.
 
-- NodeJS v18
+### Instalar dependencias
+
+```bash
+# Use la versión 22.x o LTS (Soporte a Largo Plazo) de Node.js
+nvm use 22.11.0
+
+# instalar las dependencias
+npm i --legacy-peer-deps
+```
+
+> ¿Por qué `--legacy-peer-deps`?: Fuerza la instalación ignorando conflictos en dependencias “peer”, evitando errores de árbol de dependencias.
 
 ### Desarrollo local
 
+#### Construir paquetes
+
+##### Opción 1
+
 ```bash
-# Utiliza la versión 18 de nodejs
-nvm use
-
-# Instala las dependencias
-npm i --legacy-peer-deps
-
-# Construye la documentación de graphql
+# construir paquetes
 npm run build:graphql-docs
-
-# Construye bruno-query
 npm run build:bruno-query
+npm run build:bruno-common
+npm run build:bruno-converters
+npm run build:bruno-requests
 
-# Ejecuta la aplicación de nextjs (terminal 1)
+# empaquetar bibliotecas JavaScript del entorno de pruebas aislado
+npm run sandbox:bundle-libraries --workspace=packages/bruno-js
+```
+
+##### Opción 2
+
+```bash
+# instalar dependencias y configurar el entorno
+npm run setup
+```
+
+#### Ejecutar la aplicación
+
+```bash
+# ejecutar aplicación react (terminal 1)
 npm run dev:web
 
-# Ejecuta la aplicación de electron (terminal 2)
+# ejecutar aplicación electron (terminal 2)
 npm run dev:electron
 ```
 
+##### Opción 1
+
+```bash
+# ejecutar aplicación react (terminal 1)
+npm run dev:web
+
+# ejecutar aplicación electron (terminal 2)
+npm run dev:electron
+```
+
+##### Opción 2
+
+```bash
+# ejecutar aplicación electron y react de forma concurrente
+npm run dev
+```
+
+#### Personalizar la ruta `userData` de Electron
+
+Si la variable de entorno `ELECTRON_USER_DATA_PATH` está presente y se encuentra en modo de desarrollo, entonces la ruta `userData` se modifica en consecuencia.
+ejemplo:
+
+```sh
+ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
+```
+
+Esto creará una carpeta llamada `bruno-test` en tu escritorio y la usará como la ruta userData.
+
 ### Solución de problemas
 
-Es posible que encuentres un error de `Unsupported platform` cuando ejecutes `npm install`. Para solucionarlo, debes eliminar la carpeta `node_modules` y el archivo `package-lock.json`, luego, ejecuta `npm install`. Lo anterior debería instalar todos los paquetes necesarios para ejecutar la aplicación.
+Es posible que te encuentres con un error `Unsupported platform` cuando ejecutes `npm install`. Para solucionarlo, tendrás que eliminar las carpetas `node_modules` y el archivo `package-lock.json`, y luego volver a ejecutar `npm install`. Esto debería instalar todos los paquetes necesarios para que la aplicación funcione.
 
-```shell
+```sh
 # Elimina la carpeta node_modules en los subdirectorios
 find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
   rm -rf "$dir"
@@ -69,10 +122,42 @@ find . -type f -name "package-lock.json" -delete
 
 ### Pruebas
 
-```bash
-# ejecutar pruebas de esquema bruno
-npm test --workspace=packages/bruno-schema
+#### Pruebas individuales
 
+```bash
+# ejecutar pruebas de bruno-app
+npm run test --workspace=packages/bruno-app
+
+# ejecutar pruebas de bruno-electron
+npm run test --workspace=packages/bruno-electron
+
+# ejecutar pruebas de bruno-cli
+npm run test --workspace=packages/bruno-cli
+
+# ejecutar pruebas de bruno-common
+npm run test --workspace=packages/bruno-common
+
+# ejecutar pruebas de bruno-converters
+npm run test --workspace=packages/bruno-converters
+
+# ejecutar pruebas de bruno-schema
+npm run test --workspace=packages/bruno-schema
+
+# ejecutar pruebas de bruno-query
+npm run test --workspace=packages/bruno-query
+
+# ejecutar pruebas de bruno-js
+npm run test --workspace=packages/bruno-js
+
+# ejecutar pruebas de bruno-lang
+npm run test --workspace=packages/bruno-lang
+
+# ejecutar pruebas de bruno-toml
+npm run test --workspace=packages/bruno-toml
+```
+#### Pruebas en conjunto
+
+```bash
 # ejecutar pruebas en todos los espacios de trabajo
 npm test --workspaces --if-present
 ```

docs/readme/readme_ar.md

@@ -74,12 +74,11 @@ flatpak install com.usebruno.Bruno
 
 # على نظام Linux عبر Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### التشغيل عبر منصات متعددة 🖥️

docs/readme/readme_bn.md

@@ -59,12 +59,11 @@ snap install bruno
 
 # Apt এর মাধ্যমে লিনাক্সে
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### একাধিক প্ল্যাটফর্মে চালান 🖥️

docs/readme/readme_cn.md

@@ -63,12 +63,11 @@ snap install bruno
 
 # 在 Linux 上用 Apt 安装
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### 在 Mac 上通过 Homebrew 安装 🖥️

docs/readme/readme_de.md

@@ -78,12 +78,11 @@ flatpak install com.usebruno.Bruno
 
 # Auf Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### Einsatz auf verschiedensten Plattformen 🖥️

docs/readme/readme_es.md

@@ -75,12 +75,11 @@ flatpak install com.usebruno.Bruno
 
 # En Linux con Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### Ejecútalo en múltiples plataformas 🖥️

docs/readme/readme_fr.md

@@ -63,12 +63,11 @@ snap install bruno
 
 # Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### Fonctionne sur de multiples plateformes 🖥️

docs/readme/readme_hi.md

@@ -0,0 +1,151 @@
+<br />
+<img src="../../assets/images/logo-transparent.png" width="80"/>
+
+### ब्रूनो - API इंटरफेस (API) का अन्वेषण और परीक्षण करने के लिए एक ओपन-सोर्स विकास वातावरण।
+
+[![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)
+[![कमिट गतिविधि](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)
+[![वेबसाइट](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
+[![डाउनलोड](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
+
+[English](../../readme.md)
+| [Українська](./readme_ua.md)
+| [Русский](./readme_ru.md)
+| [Türkçe](./readme_tr.md)
+| [Deutsch](./readme_de.md)
+| [Français](./readme_fr.md)
+| [Português (BR)](./readme_pt_br.md)
+| [한국어](./readme_kr.md)
+| [বাংলা](./readme_bn.md)
+| [Español](./readme_es.md)
+| [Italiano](./readme_it.md)
+| [Română](./readme_ro.md)
+| [Polski](./readme_pl.md)
+| [简体中文](./readme_cn.md)
+| [正體中文](./readme_zhtw.md)
+| [العربية](./readme_ar.md)
+| [日本語](./readme_ja.md)
+| [ქართული](./readme_ka.md)
+| **हिन्दी**
+
+ब्रूनो एक नया और अभिनव API क्लाइंट है, जिसका उद्देश्य Postman और अन्य समान उपकरणों द्वारा प्रस्तुत स्थिति को बदलना है।
+
+ब्रूनो आपकी कलेक्शनों को सीधे आपकी फाइल सिस्टम के एक फ़ोल्डर में संग्रहीत करता है। हम API अनुरोधों के बारे में जानकारी सहेजने के लिए एक सामान्य टेक्स्ट मार्कअप भाषा, Bru, का उपयोग करते हैं।
+
+आप अपनी API कलेक्शनों पर सहयोग करने के लिए Git या अपनी पसंद के किसी भी संस्करण नियंत्रण प्रणाली का उपयोग कर सकते हैं।
+
+ब्रूनो केवल ऑफ़लाइन उपयोग के लिए है। ब्रूनो में कभी भी क्लाउड-सिंक जोड़ने की कोई योजना नहीं है। हम आपके डेटा की गोपनीयता को महत्व देते हैं और मानते हैं कि इसे आपके डिवाइस पर ही रहना चाहिए। हमारी दीर्घकालिक दृष्टि [यहाँ](https://github.com/usebruno/bruno/discussions/269) पढ़ें।
+
+📢 हमारे हालिया India FOSS 3.0 सम्मेलन में हमारे वार्तालाप को [यहाँ](https://www.youtube.com/watch?v=7bSMFpbcPiY) देखें।
+
+![bruno](/assets/images/landing-2.png) <br /><br />
+
+### गोल्डन संस्करण ✨
+
+हमारी अधिकांश सुविधाएँ मुफ्त और ओपन-सोर्स हैं।
+हम [पारदर्शिता और स्थिरता के सिद्धांतों](https://github.com/usebruno/bruno/discussions/269) के बीच एक सामंजस्यपूर्ण संतुलन प्राप्त करने का प्रयास करते हैं।
+
+[गोल्डन संस्करण](https://www.usebruno.com/pricing) के लिए खरीदारी जल्द ही $9 की कीमत पर उपलब्ध होगी! <br/>
+[यहाँ सदस्यता लें](https://usebruno.ck.page/4c65576bd4) ताकि आपको लॉन्च पर सूचनाएं मिलें।
+
+### स्थापना
+
+ब्रूनो Mac, Windows और Linux के लिए हमारे [वेबसाइट](https://www.usebruno.com/downloads) पर एक बाइनरी डाउनलोड के रूप में उपलब्ध है।
+
+आप ब्रूनो को Homebrew, Chocolatey, Scoop, Snap, Flatpak और Apt जैसे पैकेज प्रबंधकों के माध्यम से भी स्थापित कर सकते हैं।
+
+```sh
+# Mac पर Homebrew के माध्यम से
+brew install bruno
+
+# Windows पर Chocolatey के माध्यम से
+choco install bruno
+
+# Windows पर Scoop के माध्यम से
+scoop bucket add extras
+scoop install bruno
+
+# Linux पर Snap के माध्यम से
+snap install bruno
+
+# Linux पर Flatpak के माध्यम से
+flatpak install com.usebruno.Bruno
+
+# Linux पर Apt के माध्यम से
+sudo mkdir -p /etc/apt/keyrings
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
+
+कई प्लेटफार्मों पर चलाएं 🖥️
+<br /><br />
+
+Git के माध्यम से सहयोग करें 👩‍💻🧑‍💻
+या अपनी पसंद के किसी भी संस्करण नियंत्रण प्रणाली का उपयोग करें
+
+<br /><br />
+
+महत्वपूर्ण लिंक 📌
+हमारी दीर्घकालिक दृष्टि
+
+रोडमैप
+
+प्रलेखन
+
+Stack Overflow
+
+वेबसाइट
+
+मूल्य निर्धारण
+
+डाउनलोड
+
+GitHub प्रायोजक
+
+प्रस्तुतियाँ 🎥
+प्रशंसापत्र
+
+ज्ञान केंद्र
+
+Scriptmania
+
+समर्थन ❤️
+यदि आप ब्रूनो को पसंद करते हैं और हमारे ओपन-सोर्स कार्य का समर्थन करना चाहते हैं, तो कृपया GitHub प्रायोजक के माध्यम से हमें प्रायोजित करने पर विचार करें।
+
+प्रशंसापत्र साझा करें 📣
+यदि ब्रूनो ने आपके और आपकी टीमों के लिए काम में मदद की है, तो कृपया हमारे GitHub चर्चा में अपने प्रशंसापत्र साझा करना न भूलें
+
+नए पैकेज प्रबंधकों में प्रकाशित करना
+अधिक जानकारी के लिए कृपया यहाँ देखें।
+
+हमसे संपर्क करें 🌐
+𝕏 (ट्विटर) <br />
+वेबसाइट <br />
+डिस्कॉर्ड <br />
+लिंक्डइन
+
+ट्रेडमार्क
+नाम
+
+ब्रूनो एक ट्रेडमार्क है जो अनूप एम डी के स्वामित्व में है।
+
+लोगो
+
+लोगो OpenMoji से लिया गया है। लाइसेंस: CC BY-SA 4.0
+
+योगदान 👩‍💻🧑‍💻
+हमें खुशी है कि आप ब्रूनो को बेहतर बनाने में रुचि रखते हैं। कृपया योगदान गाइड देखें।
+
+यदि आप सीधे कोड के माध्यम से योगदान नहीं कर सकते, तो भी कृपया बग्स की रिपोर्ट करने और उन सुविधाओं का अनुरोध करने में संकोच न करें जिन्हें आपकी स्थिति को हल करने के लिए लागू किया जाना चाहिए।
+
+लेखक
+<div align="center"> <a href="https://github.com/usebruno/bruno/graphs/contributors"> <img src="https://contrib.rocks/image?repo=usebruno/bruno" /> </a> </div>
+
+लाइसेंस 📄
+MIT
+

docs/readme/readme_it.md

@@ -59,12 +59,11 @@ snap install bruno
 
 # Su Linux tramite Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### Funziona su diverse piattaforme 🖥️

docs/readme/readme_ja.md

@@ -78,12 +78,11 @@ flatpak install com.usebruno.Bruno
 
 # LinuxでAptを使ってインストール
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### マルチプラットフォームでの実行に対応 🖥️

docs/readme/readme_kr.md

@@ -59,12 +59,11 @@ snap install bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### 여러 플랫폼에서 실행하세요. 🖥️

docs/readme/readme_pl.md

@@ -69,12 +69,11 @@ flatpak install com.usebruno.Bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
 echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+sudo apt update && sudo apt install bruno
 ```
 
 ### Uruchom na wielu platformach 🖥️

docs/readme/readme_pt_br.md

@@ -76,12 +76,11 @@ flatpak install com.usebruno.Bruno
 
 # No Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### Execute em várias plataformas 🖥️

docs/readme/readme_ro.md

@@ -59,12 +59,11 @@ snap install bruno
 
 # Pe Linux cu Apt
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### Utilizați pe mai multe platforme 🖥️

docs/readme/readme_tr.md

@@ -63,12 +63,11 @@ snap install bruno
 
 # Apt aracılığıyla Linux'ta
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### Birden fazla platformda çalıştırın 🖥️

docs/readme/readme_zhtw.md

@@ -63,12 +63,11 @@ snap install bruno
 
 # 在 Linux 上使用 Apt 安裝
 sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg
+sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
 ```
 
 ### 跨多個平台運行 🖥️

e2e-tests/001-sanity-tests/001-home-screen.spec.ts

@@ -0,0 +1,5 @@
+import { test, expect } from '../../playwright';
+
+test('Check if the logo on top left is visible', async ({ page }) => {
+  await expect(page.getByRole('button', { name: 'bruno' })).toBeVisible();
+});

e2e-tests/001-sanity-tests/002-create-new-collection.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '../../playwright';
+
+test('Create new collection and add a simple HTTP request', async ({ page, createTmpDir }) => {
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').click();
+  await page.getByLabel('Name').fill('test-collection');
+  await page.getByLabel('Name').press('Tab');
+  await page.getByLabel('Location').fill(await createTmpDir('test-collection'));
+  await page.getByRole('button', { name: 'Create', exact: true }).click();
+  await page.getByText('test-collection').click();
+  await page.getByLabel('Safe Mode').check();
+  await page.getByRole('button', { name: 'Save' }).click();
+  await page.locator('#create-new-tab').getByRole('img').click();
+  await page.getByPlaceholder('Request Name').fill('r1');
+  await page.getByPlaceholder('Request URL').click();
+  await page.getByPlaceholder('Request URL').fill('http://localhost:8081');
+  await page.getByRole('button', { name: 'Create' }).click();
+  await page.locator('pre').filter({ hasText: 'http://localhost:' }).click();
+  await page.locator('textarea').fill('/ping');
+  await page.locator('#send-request').getByRole('img').nth(2).click();
+
+  await expect(page.getByRole('main')).toContainText('200 OK');
+
+  await page.getByRole('tab', { name: 'GET r1' }).locator('circle').click();
+  await page.getByRole('button', { name: 'Save', exact: true }).click();
+  await page.getByText('GETr1').click();
+  await page.getByRole('button', { name: 'Clear response' }).click();
+  await page.locator('body').press('ControlOrMeta+Enter');
+
+  await expect(page.getByRole('main')).toContainText('200 OK');
+});

e2e-tests/bruno-testbench/init-user-data/preferences.json

@@ -0,0 +1,4 @@
+{
+  "maximized": true,
+  "lastOpenedCollections": ["{{projectRoot}}/packages/bruno-tests/collection"]
+}

e2e-tests/bruno-testbench/run-testbench-requests.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '../../playwright';
+
+test.describe.parallel('Run Testbench Requests', () => {
+  test('Run bruno-testbench in Developer Mode', async ({ pageWithUserData: page }) => {
+    test.setTimeout(2 * 60 * 1000);
+
+    await page.getByText('bruno-testbench').click();
+    await page.getByLabel('Developer Mode(use only if').check();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.locator('.environment-selector').nth(1).click();
+    await page.locator('.dropdown-item').getByText('Prod').click();
+    await page.locator('.collection-actions').hover();
+    await page.locator('.collection-actions .icon').click();
+    await page.getByText('Run', { exact: true }).click();
+    await page.getByRole('button', { name: 'Run Collection' }).click();
+    await page.getByRole('button', { name: 'Run Again' }).waitFor({ timeout: 2 * 60 * 1000 });
+
+    const result = await page.getByText('Total Requests: ').innerText();
+    const [totalRequests, passed, failed, skipped] = result
+      .match(/Total Requests: (\d+), Passed: (\d+), Failed: (\d+), Skipped: (\d+)/)
+      .slice(1);
+
+    await expect(parseInt(failed)).toBe(0);
+    await expect(parseInt(passed)).toBe(parseInt(totalRequests) - parseInt(skipped) - parseInt(failed));
+  });
+
+  test.fixme('Run bruno-testbench in Safe Mode', async ({ pageWithUserData: page }) => {
+    test.setTimeout(2 * 60 * 1000);
+
+    await page.getByText('bruno-testbench').click();
+    await page.getByLabel('Safe Mode').check();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.locator('.environment-selector').nth(1).click();
+    await page.locator('.dropdown-item').getByText('Prod').click();
+    await page.locator('.collection-actions').hover();
+    await page.locator('.collection-actions .icon').click();
+    await page.getByText('Run', { exact: true }).click();
+    await page.getByRole('button', { name: 'Run Collection' }).click();
+    await page.getByRole('button', { name: 'Run Again' }).waitFor({ timeout: 2 * 60 * 1000 });
+
+    const result = await page.getByText('Total Requests: ').innerText();
+    const [totalRequests, passed, failed, skipped] = result
+      .match(/Total Requests: (\d+), Passed: (\d+), Failed: (\d+), Skipped: (\d+)/)
+      .slice(1);
+
+    await expect(parseInt(failed)).toBe(0);
+    await expect(parseInt(passed)).toBe(parseInt(totalRequests) - parseInt(skipped) - parseInt(failed));
+  });
+});

e2e-tests/preferences/verify-support-links-in-preferences.spec.js

@@ -0,0 +1,27 @@
+import { test, expect } from '../../playwright';
+
+test('Should verify all support links with correct URL in preference > Support tab', async ({ page }) => {
+
+   // Open Preferences
+   await page.getByLabel('Open Preferences').click();
+   
+   // Verify Support tab
+   await page.getByRole('tab', { name: 'Support' }).click();
+
+   const locator_twitter = page.getByRole('link', { name: 'Twitter' });
+   expect(await locator_twitter.getAttribute('href')).toEqual('https://twitter.com/use_bruno');
+
+   const locator_github = page.getByRole('link', { name: 'GitHub', exact: true });
+   expect(await locator_github.getAttribute('href')).toEqual('https://github.com/usebruno/bruno');
+
+   const locator_discord = page.getByRole('link', { name: 'Discord', exact: true });
+   expect(await locator_discord.getAttribute('href')).toEqual('https://discord.com/invite/KgcZUncpjq');
+
+   const locator_reportissues = page.getByRole('link', { name: 'Report Issues', exact: true });
+   expect(await locator_reportissues.getAttribute('href')).toEqual('https://github.com/usebruno/bruno/issues');
+
+   const locator_documentation = page.getByRole('link', { name: 'Documentation', exact: true });
+   expect(await locator_documentation.getAttribute('href')).toEqual('https://docs.usebruno.com');
+
+  
+});

e2e-tests/test-app-start.spec.ts

@@ -1,5 +0,0 @@
-import { test, expect } from '../playwright';
-
-test('test-app-start', async ({ page }) => {
-  await expect(page.getByRole('button', { name: 'bruno' })).toBeVisible();
-});

eslint.config.js

@@ -25,6 +25,19 @@ module.exports = defineConfig([
       "no-undef": "error",
     },
   },
+  {
+    // It prevents lint errors when using CommonJS exports (module.exports) in Jest mocks.
+    files: ["packages/bruno-app/src/test-utils/mocks/codemirror.js"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
   {
     files: ["packages/bruno-electron/**/*.{js}"],
     ignores: ["**/*.config.js"],
@@ -38,4 +51,4 @@ module.exports = defineConfig([
       "no-undef": "error",
     },
   }
-]);
+]);

package.json

@@ -40,6 +40,7 @@
     "setup": "node ./scripts/setup.js",
     "watch:converters": "npm run watch --workspace=packages/bruno-converters",
     "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
+    "dev:watch": "node ./scripts/dev-hot-reload.js",
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
     "prettier:web": "npm run prettier --workspace=packages/bruno-app",
@@ -71,4 +72,4 @@
       }
     }
   }
-}
+}

packages/bruno-app/.babelrc

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

packages/bruno-app/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    ['@babel/preset-react', {
+      runtime: 'automatic'
+    }]
+  ],
+  plugins: ['babel-plugin-styled-components']
+};

packages/bruno-app/jest.config.js

@@ -1,5 +1,11 @@
 module.exports = {
   rootDir: '.',
+  transform: {
+    '^.+\\.[jt]sx?$': 'babel-jest',
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!strip-json-comments|nanoid|xml-formatter)/",
+  ],
   moduleNameMapper: {
     '^assets/(.*)$': '<rootDir>/src/assets/$1',
     '^components/(.*)$': '<rootDir>/src/components/$1',
@@ -8,9 +14,17 @@ module.exports = {
     '^api/(.*)$': '<rootDir>/src/api/$1',
     '^pageComponents/(.*)$': '<rootDir>/src/pageComponents/$1',
     '^providers/(.*)$': '<rootDir>/src/providers/$1',
-    '^utils/(.*)$': '<rootDir>/src/utils/$1'
+    '^utils/(.*)$': '<rootDir>/src/utils/$1',
+    '^test-utils/(.*)$': '<rootDir>/src/test-utils/$1'
   },
   clearMocks: true,
   moduleDirectories: ['node_modules', 'src'],
-  testEnvironment: 'node'
-};
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['@testing-library/jest-dom'],
+  setupFiles: [
+    '<rootDir>/jest.setup.js',
+  ],
+  testMatch: [
+    '<rootDir>/src/**/*.spec.[jt]s?(x)'
+  ]
+};

packages/bruno-app/jest.setup.js

@@ -0,0 +1,11 @@
+jest.mock('nanoid', () => {
+  return {
+    nanoid: () => {}
+  };
+});
+
+jest.mock('strip-json-comments', () => {
+  return {
+    stripJsonComments: (str) => str
+  };
+});

packages/bruno-app/jsconfig.json

@@ -6,6 +6,7 @@
     "baseUrl": "./",
     "paths": {
       "assets/*": ["src/assets/*"],
+      "ui/*": ["src/ui/*"],
       "components/*": ["src/components/*"],
       "hooks/*": ["src/hooks/*"],
       "themes/*": ["src/themes/*"],

packages/bruno-app/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@usebruno/app",
   "version": "2.0.0",
+  "license": "MIT",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev",
@@ -11,7 +12,6 @@
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
-    "@babel/preset-env": "^7.26.0",
     "@fontsource/inter": "^5.0.15",
     "@prantlf/jsonlint": "^16.0.0",
     "@reduxjs/toolkit": "^1.8.0",
@@ -73,28 +73,37 @@
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
     "semver": "^7.7.1",
+    "shell-quote": "^1.8.3",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "system": "^2.0.1",
     "url": "^0.11.3",
     "xml-formatter": "^3.5.0",
-    "yargs-parser": "^21.1.1",
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
     "@rsbuild/core": "^1.1.2",
     "@rsbuild/plugin-babel": "^1.0.3",
     "@rsbuild/plugin-node-polyfill": "^1.2.0",
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "autoprefixer": "10.4.20",
+    "babel-jest": "^29.7.0",
     "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
     "css-loader": "7.1.2",
     "file-loader": "^6.2.0",
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "8.4.47",
     "style-loader": "^3.3.1",

packages/bruno-app/rsbuild.config.mjs

@@ -20,6 +20,11 @@ export default defineConfig({
   ],
   source: {
     tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file,
+    exclude: [
+      '**/test-utils/**',
+      '**/*.test.*',
+      '**/*.spec.*'
+    ]
   },
   html: {
     title: 'Bruno'

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

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import CodeEditor from 'components/CodeEditor';
+import { useTheme } from 'providers/Theme';
+import { useSelector } from 'react-redux';
+import { parseBulkKeyValue, serializeBulkKeyValue } from 'utils/common/bulkKeyValueUtils';
+
+const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
+  const preferences = useSelector((state) => state.app.preferences);
+  const { displayedTheme } = useTheme();
+
+  const parsedParams = useMemo(() => serializeBulkKeyValue(params), [params]);
+
+  const handleEdit = (value) => {
+    const parsed = parseBulkKeyValue(value);
+    onChange(parsed);
+  };
+
+  return (
+    <>
+      <div className="h-[200px]">
+        <CodeEditor
+          mode="text/plain"
+          theme={displayedTheme}
+          font={preferences.codeFont || 'default'}
+          value={parsedParams}
+          onEdit={handleEdit}
+          onSave={onSave}
+          onRun={onRun}
+        />
+      </div>
+      <div className="flex btn-action justify-between items-center mt-3">
+        <button className="text-link select-none ml-auto" onClick={onToggle}>
+          Key/Value Edit
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default BulkEditor;

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

@@ -8,117 +8,19 @@
 import React from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
+import { setupAutoComplete } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
 
-let CodeMirror;
-const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+const CodeMirror = require('codemirror');
+window.jsonlint = jsonlint;
+window.JSHINT = JSHINT;
+
 const TAB_SIZE = 2;
 
-if (!SERVER_RENDERED) {
-  CodeMirror = require('codemirror');
-  window.jsonlint = jsonlint;
-  window.JSHINT = JSHINT;
-  //This should be done dynamically if possible
-  const hintWords = [
-    'res',
-    'res.status',
-    'res.statusText',
-    'res.headers',
-    'res.body',
-    'res.responseTime',
-    'res.getStatus()',
-    'res.getStatusText()',
-    'res.getHeader(name)',
-    'res.getHeaders()',
-    'res.getBody()',
-    'res.setBody(data)',
-    'res.getResponseTime()',
-    'req',
-    'req.url',
-    'req.method',
-    'req.headers',
-    'req.body',
-    'req.timeout',
-    'req.getUrl()',
-    'req.setUrl(url)',
-    'req.getMethod()',
-    'req.getAuthMode()',
-    'req.setMethod(method)',
-    'req.getHeader(name)',
-    'req.getHeaders()',
-    'req.setHeader(name, value)',
-    'req.setHeaders(data)',
-    'req.getBody()',
-    'req.setBody(data)',
-    'req.setMaxRedirects(maxRedirects)',
-    'req.getTimeout()',
-    'req.setTimeout(timeout)',
-    'req.getExecutionMode()',
-    'bru',
-    'bru.cwd()',
-    'bru.getEnvName()',
-    'bru.getProcessEnv(key)',
-    'bru.hasEnvVar(key)',
-    'bru.getEnvVar(key)',
-    'bru.getFolderVar(key)',
-    'bru.getCollectionVar(key)',
-    'bru.setEnvVar(key,value)',
-    'bru.deleteEnvVar(key)',
-    'bru.hasVar(key)',
-    'bru.getVar(key)',
-    'bru.setVar(key,value)',
-    'bru.deleteVar(key)',
-    'bru.deleteAllVars()',
-    'bru.setNextRequest(requestName)',
-    'req.disableParsingResponseJson()',
-    'bru.getRequestVar(key)',
-    'bru.runRequest(requestPathName)',
-    'bru.getAssertionResults()',
-    'bru.getTestResults()',
-    'bru.sleep(ms)',
-    'bru.getGlobalEnvVar(key)',
-    'bru.setGlobalEnvVar(key, value)',
-    'bru.runner',
-    'bru.runner.setNextRequest(requestName)',
-    'bru.runner.skipRequest()',
-    'bru.runner.stopExecution()'
-  ];
-  CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
-    const cursor = editor.getCursor();
-    const currentLine = editor.getLine(cursor.line);
-    let startBru = cursor.ch;
-    let endBru = startBru;
-    while (endBru < currentLine.length && /[\w.]/.test(currentLine.charAt(endBru))) ++endBru;
-    while (startBru && /[\w.]/.test(currentLine.charAt(startBru - 1))) --startBru;
-    let curWordBru = startBru != endBru && currentLine.slice(startBru, endBru);
-
-    let start = cursor.ch;
-    let end = start;
-    while (end < currentLine.length && /[\w]/.test(currentLine.charAt(end))) ++end;
-    while (start && /[\w]/.test(currentLine.charAt(start - 1))) --start;
-    const jsHinter = CodeMirror.hint.javascript;
-    let result = jsHinter(editor) || { list: [] };
-    result.to = CodeMirror.Pos(cursor.line, end);
-    result.from = CodeMirror.Pos(cursor.line, start);
-    if (curWordBru) {
-      hintWords.forEach((h) => {
-        if (h.includes('.') == curWordBru.includes('.') && h.startsWith(curWordBru)) {
-          result.list.push(curWordBru.includes('.') ? h.split('.')?.at(-1) : h);
-        }
-      });
-      result.list?.sort();
-    }
-    return result;
-  });
-  CodeMirror.commands.autocomplete = (cm, hint, options) => {
-    cm.showHint({ hint, ...options });
-  };
-}
-
 export default class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -138,12 +40,17 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount() {
+    const variables = getAllVariables(this.props.collection, this.props.item);
+
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
       lineNumbers: true,
       lineWrapping: true,
       tabSize: TAB_SIZE,
       mode: this.props.mode || 'application/ld+json',
+      brunoVarInfo: {
+        variables
+      },
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
@@ -275,30 +182,24 @@ export default class CodeEditor extends React.Component {
       }
       return found;
     });
+    
     if (editor) {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
       this.addOverlay();
-    }
-    if (this.props.mode == 'javascript') {
-      editor.on('keyup', function (cm, event) {
-        const cursor = editor.getCursor();
-        const currentLine = editor.getLine(cursor.line);
-        let start = cursor.ch;
-        let end = start;
-        while (end < currentLine.length && /[^{}();\s\[\]\,]/.test(currentLine.charAt(end))) ++end;
-        while (start && /[^{}();\s\[\]\,]/.test(currentLine.charAt(start - 1))) --start;
-        let curWord = start != end && currentLine.slice(start, end);
-        // Qualify if autocomplete will be shown
-        if (
-          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Meta|Alt|Home|End\s)\w*/.test(event.key) &&
-          curWord.length > 0 &&
-          !/\/\/|\/\*|.*{{|`[^$]*{|`[^{]*$/.test(currentLine.slice(0, end)) &&
-          /(?<!\d)[a-zA-Z\._]$/.test(curWord)
-        ) {
-          CodeMirror.commands.autocomplete(cm, CodeMirror.hint.brunoJS, { completeSingle: false });
-        }
-      });
+      
+      // Setup AutoComplete Helper for all modes
+      const autoCompleteOptions = {
+        showHintsFor: this.props.showHintsFor
+      };
+
+      const getVariables = () => getAllVariables(this.props.collection, this.props.item);
+
+      this.brunoAutoCompleteCleanup = setupAutoComplete(
+        editor,
+        getVariables,
+        autoCompleteOptions
+      );
     }
   }
 
@@ -339,6 +240,9 @@ export default class CodeEditor extends React.Component {
     }
 
     this._unbindSearchHandler();
+    if (this.brunoAutoCompleteCleanup) {
+      this.brunoAutoCompleteCleanup();
+    }
   }
 
   render() {
@@ -363,7 +267,7 @@ export default class CodeEditor extends React.Component {
     let variables = getAllVariables(this.props.collection, this.props.item);
     this.variables = variables;
 
-    defineCodeMirrorBrunoVariablesMode(variables, mode);
+    defineCodeMirrorBrunoVariablesMode(variables, mode, false, this.props.enableVariableHighlighting);
     this.editor.setOption('mode', 'brunovariables');
   };
 

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import CodeEditor from './index';
+import { ThemeProvider } from 'styled-components';
+
+jest.mock('codemirror', () => {
+  const codemirror = require('test-utils/mocks/codemirror');
+  return codemirror;
+});
+
+const MOCK_THEME = {
+  codemirror: {
+    bg: "#1e1e1e",
+    border: "#333",
+  },
+  textLink: "#007acc",
+};
+
+const setupEditorState = (editor, { value, cursorPosition }) => {
+  editor._currentValue = value;
+  editor.getCursor.mockReturnValue({ line: 0, ch: cursorPosition });
+  editor.getRange.mockImplementation((from, to) => {
+    if (from.line === 0 && from.ch === 0 && to.line === 0 && to.ch === cursorPosition) {
+      return value;
+    }
+    return editor._currentValue.slice(from.ch, to.ch);
+  });
+
+  editor.state = {
+    completionActive: null,
+  }
+};
+
+const setupEditorWithRef = () => {
+  const ref = React.createRef();
+  const { rerender } = render(
+    <ThemeProvider theme={MOCK_THEME}>
+      <CodeEditor ref={ref} />
+    </ThemeProvider>
+  );
+  return { ref, rerender };
+};
+
+describe('CodeEditor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.resetModules();
+  });
+
+  it("add CodeEditor related tests here", () => {});
+});

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

@@ -21,12 +21,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: awsv4Auth.region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -38,12 +38,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: awsv4Auth.region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -55,12 +55,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: awsv4Auth.region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -72,12 +72,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: service || '',
+          region: awsv4Auth.region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -89,12 +89,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -106,12 +106,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: awsv4Auth.region || '',
+          profileName: profileName || ''
         }
       })
     );

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

@@ -21,8 +21,8 @@ const BasicAuth = ({ collection }) => {
         mode: 'basic',
         collectionUid: collection.uid,
         content: {
-          username: username,
-          password: basicAuth.password
+          username: username || '',
+          password: basicAuth.password || ''
         }
       })
     );
@@ -34,8 +34,8 @@ const BasicAuth = ({ collection }) => {
         mode: 'basic',
         collectionUid: collection.uid,
         content: {
-          username: basicAuth.username,
-          password: password
+          username: basicAuth.username || '',
+          password: password || ''
         }
       })
     );

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

@@ -21,8 +21,8 @@ const DigestAuth = ({ collection }) => {
         mode: 'digest',
         collectionUid: collection.uid,
         content: {
-          username: username,
-          password: digestAuth.password
+          username: username || '',
+          password: digestAuth.password || ''
         }
       })
     );
@@ -34,8 +34,8 @@ const DigestAuth = ({ collection }) => {
         mode: 'digest',
         collectionUid: collection.uid,
         content: {
-          username: digestAuth.username,
-          password: password
+          username: digestAuth.username || '',
+          password: password || ''
         }
       })
     );

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

@@ -28,9 +28,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: username,
-          password: ntlmAuth.password,
-          domain: ntlmAuth.domain
+          username: username || '',
+          password: ntlmAuth.password || '',
+          domain: ntlmAuth.domain || ''
 
         }
       })
@@ -43,9 +43,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: ntlmAuth.username,
-          password: password,
-          domain: ntlmAuth.domain
+          username: ntlmAuth.username || '',
+          password: password || '',
+          domain: ntlmAuth.domain || ''
         }
       })
     );
@@ -57,9 +57,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: ntlmAuth.username,
-          password: ntlmAuth.password,
-          domain: domain
+          username: ntlmAuth.username || '',
+          password: ntlmAuth.password || '',
+          domain: domain || ''
         }
       })
     );

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

@@ -21,8 +21,8 @@ const WsseAuth = ({ collection }) => {
         mode: 'wsse',
         collectionUid: collection.uid,
         content: {
-          username,
-          password: wsseAuth.password
+          username: username || '',
+          password: wsseAuth.password || ''
         }
       })
     );
@@ -34,8 +34,8 @@ const WsseAuth = ({ collection }) => {
         mode: 'wsse',
         collectionUid: collection.uid,
         content: {
-          username: wsseAuth.username,
-          password
+          username: wsseAuth.username || '',
+          password: password || ''
         }
       })
     );

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

@@ -53,6 +53,7 @@ const Script = ({ collection }) => {
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'bru']}
         />
       </div>
       <div className="flex-1 mt-6">
@@ -66,6 +67,7 @@ const Script = ({ collection }) => {
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'res', 'bru']}
         />
       </div>
 

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

@@ -37,6 +37,7 @@ const Tests = ({ collection }) => {
         onSave={handleSave}
         font={get(preferences, 'font.codeFont', 'default')}
         fontSize={get(preferences, 'font.codeFontSize')}
+        showHintsFor={['req', 'res', 'bru']}
       />
 
       <div className="mt-6">

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

@@ -49,7 +49,7 @@ const CollectionSettings = ({ collection }) => {
   const requestVars = get(collection, 'root.request.vars.req', []);
   const responseVars = get(collection, 'root.request.vars.res', []);
   const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
-  const auth = get(collection, 'root.request.auth', {}).mode;
+  const authMode = get(collection, 'root.request.auth', {}).mode || 'none';
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
@@ -155,7 +155,7 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
-          {auth !== 'none' && <ContentIndicator />}
+          {authMode !== 'none' && <ContentIndicator />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script

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

@@ -11,6 +11,12 @@ const Wrapper = styled.div`
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
   }
+  .inherit-mode-text {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+  .auth-mode-label {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
 `;
 
 export default Wrapper; 

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

@@ -9,6 +9,14 @@ import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/Passwo
 import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
 import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
 import AuthMode from '../AuthMode';
+import BasicAuth from 'components/RequestPane/Auth/BasicAuth';
+import BearerAuth from 'components/RequestPane/Auth/BearerAuth';
+import DigestAuth from 'components/RequestPane/Auth/DigestAuth';
+import NTLMAuth from 'components/RequestPane/Auth/NTLMAuth';
+import WsseAuth from 'components/RequestPane/Auth/WsseAuth';
+import ApiKeyAuth from 'components/RequestPane/Auth/ApiKeyAuth';
+import AwsV4Auth from 'components/RequestPane/Auth/AwsV4Auth';
+import { findItemInCollection, findParentItemInCollection, humanizeRequestAuthMode } from 'utils/collections/index';
 
 const GrantTypeComponentMap = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -37,12 +45,132 @@ const Auth = ({ collection, folder }) => {
   let request = get(folder, 'root.request', {});
   const authMode = get(folder, 'root.request.auth.mode');
 
+  const getTreePathFromCollectionToFolder = (collection, _folder) => {
+    let path = [];
+    let item = findItemInCollection(collection, _folder?.uid);
+    while (item) {
+      path.unshift(item);
+      item = findParentItemInCollection(collection, item?.uid);
+    }
+    return path;
+  };
+
+  const getEffectiveAuthSource = () => {
+    if (authMode !== 'inherit') return null;
+
+    const collectionAuth = get(collection, 'root.request.auth');
+    let effectiveSource = {
+      type: 'collection',
+      name: 'Collection',
+      auth: collectionAuth
+    };
+
+    // Get path from collection to current folder
+    const folderTreePath = getTreePathFromCollectionToFolder(collection, folder);
+    
+    // Check parent folders to find closest auth configuration
+    // Skip the last item which is the current folder
+    for (let i = 0; i < folderTreePath.length - 1; i++) {
+      const parentFolder = folderTreePath[i];
+      if (parentFolder.type === 'folder') {
+        const folderAuth = get(parentFolder, 'root.request.auth');
+        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'none' && folderAuth.mode !== 'inherit') {
+          effectiveSource = {
+            type: 'folder',
+            name: parentFolder.name,
+            auth: folderAuth
+          };
+          break;
+        }
+      }
+    }
+
+    return effectiveSource;
+  };
+
   const handleSave = () => {
     dispatch(saveFolderRoot(collection.uid, folder.uid));
   };
 
   const getAuthView = () => {
     switch (authMode) {
+      case 'basic': {
+        return (
+          <BasicAuth
+            collection={collection}
+            item={folder}
+            updateAuth={updateFolderAuth}
+            request={request}
+            save={() => handleSave()}
+          />
+        );
+      }
+      case 'bearer': {
+        return (
+          <BearerAuth
+            collection={collection}
+            item={folder}
+            updateAuth={updateFolderAuth}
+            request={request}
+            save={() => handleSave()}
+          />
+        );
+      }
+      case 'digest': {
+        return (
+          <DigestAuth
+            collection={collection}
+            item={folder}
+            updateAuth={updateFolderAuth}
+            request={request}
+            save={() => handleSave()}
+          />
+        );
+      }
+      case 'ntlm': {
+        return (
+          <NTLMAuth
+            collection={collection}
+            item={folder}
+            updateAuth={updateFolderAuth}
+            request={request}
+            save={() => handleSave()}
+          />
+        );
+      }
+      case 'wsse': {
+        return (
+          <WsseAuth
+            collection={collection}
+            item={folder}
+            updateAuth={updateFolderAuth}
+            request={request}
+            save={() => handleSave()}
+          />
+        );
+      }
+      case 'apikey': {
+        return (
+          <ApiKeyAuth
+            collection={collection}
+            item={folder}
+            updateAuth={updateFolderAuth}
+            request={request}
+            save={() => handleSave()}
+          />
+        );
+      }
+      case 'awsv4': {
+        return (
+          <AwsV4Auth
+            collection={collection}
+            item={folder}
+            updateAuth={updateFolderAuth}
+            request={request}
+            save={() => handleSave()}
+          />
+        );
+      }
       case 'oauth2': {
         return (
           <>
@@ -56,6 +184,17 @@ const Auth = ({ collection, folder }) => {
           </>
         );
       }
+      case 'inherit': {
+        const source = getEffectiveAuthSource();
+        return (
+          <>
+            <div className="flex flex-row w-full mt-2 gap-2">
+              <div>Auth inherited from {source.name}: </div>
+              <div className="inherit-mode-text">{humanizeRequestAuthMode(source.auth?.mode)}</div>
+            </div>
+          </>
+        );
+      }
       case 'none': {
         return null;
       }
@@ -64,6 +203,7 @@ const Auth = ({ collection, folder }) => {
     }
   };
 
+
   return (
     <StyledWrapper className="w-full">
       <div className="text-xs mb-4 text-muted">

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

@@ -35,6 +35,51 @@ const AuthMode = ({ collection, folder }) => {
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">      
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('awsv4');
+            }}
+          >
+            AWS Sig v4
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('basic');
+            }}
+          >
+            Basic Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('bearer');
+            }}
+          >
+            Bearer Token
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('digest');
+            }}
+          >
+            Digest Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('ntlm');
+            }}
+          >
+            NTLM Auth
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {
@@ -44,6 +89,33 @@ const AuthMode = ({ collection, folder }) => {
           >
             OAuth 2.0
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('wsse');
+            }}
+          >
+            WSSE Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('apikey');
+            }}
+          >
+            API Key
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('inherit');
+            }}
+          >
+            Inherit
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {

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

@@ -9,6 +9,7 @@ import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions'
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection, folder }) => {
@@ -117,6 +118,7 @@ const Headers = ({ collection, folder }) => {
                         }
                         collection={collection}
                         item={folder}
+                        autocomplete={MimeTypes}
                       />
                     </td>
                     <td>

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

@@ -55,6 +55,7 @@ const Script = ({ collection, folder }) => {
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'bru']}
         />
       </div>
       <div className="flex flex-col flex-1 mt-2 gap-y-2">
@@ -68,6 +69,7 @@ const Script = ({ collection, folder }) => {
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'res', 'bru']}
         />
       </div>
 

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

@@ -38,6 +38,7 @@ const Tests = ({ collection, folder }) => {
         onSave={handleSave}
         font={get(preferences, 'font.codeFont', 'default')}
         fontSize={get(preferences, 'font.codeFontSize')}
+        showHintsFor={['req', 'res', 'bru']}
       />
 
       <div className="mt-6">

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

@@ -2,14 +2,10 @@ import React, { Component } from 'react';
 import isEqual from 'lodash/isEqual';
 import { getAllVariables } from 'utils/collections';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
+import { setupAutoComplete } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 
-let CodeMirror;
-const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
-
-if (!SERVER_RENDERED) {
-  CodeMirror = require('codemirror');
-}
+const CodeMirror = require('codemirror');
 
 class MultiLineEditor extends Component {
   constructor(props) {
@@ -78,14 +74,21 @@ class MultiLineEditor extends Component {
         'Shift-Tab': false
       }
     });
-    if (this.props.autocomplete) {
-      this.editor.on('keyup', (cm, event) => {
-        if (!cm.state.completionActive /*Enables keyboard navigation in autocomplete list*/ && event.keyCode != 13) {
-          /*Enter - do not open autocomplete list just after item has been selected in it*/
-          CodeMirror.commands.autocomplete(cm, CodeMirror.hint.anyword, { autocomplete: this.props.autocomplete });
-        }
-      });
-    }
+    
+    // Setup AutoComplete Helper
+    const autoCompleteOptions = {
+      showHintsFor: ['variables'],
+      anywordAutocompleteHints: this.props.autocomplete
+    };
+
+    const getVariables = () => getAllVariables(this.props.collection, this.props.item);
+
+    this.brunoAutoCompleteCleanup = setupAutoComplete(
+      this.editor,
+      getVariables,
+      autoCompleteOptions
+    );
+    
     this.editor.setValue(String(this.props.value) || '');
     this.editor.on('change', this._onEdit);
     this.addOverlay(variables);
@@ -125,12 +128,15 @@ class MultiLineEditor extends Component {
   }
 
   componentWillUnmount() {
+    if (this.brunoAutoCompleteCleanup) {
+      this.brunoAutoCompleteCleanup();
+    }
     this.editor.getWrapperElement().remove();
   }
 
   addOverlay = (variables) => {
     this.variables = variables;
-    defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
+    defineCodeMirrorBrunoVariablesMode(variables, 'text/plain', false, true);
     this.editor.setOption('mode', 'brunovariables');
   };
 

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

@@ -3,6 +3,7 @@ import get from 'lodash/get';
 import { useSelector, useDispatch } from 'react-redux';
 import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
+import toast from 'react-hot-toast';
 
 const Font = ({ close }) => {
   const dispatch = useDispatch();
@@ -31,7 +32,10 @@ const Font = ({ close }) => {
         }
       })
     ).then(() => {
+      toast.success('Preferences saved successfully')
       close();
+    }).catch(() => {
+      toast.error('Failed to save preferences')
     });
   };
 

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

@@ -80,9 +80,9 @@ const General = ({ close }) => {
           storeCookies: newPreferences.storeCookies,
           sendCookies: newPreferences.sendCookies
         }
-      })
-    )
+      }))
       .then(() => {
+        toast.success('Preferences saved successfully')
         close();
       })
       .catch((err) => console.log(err) && toast.error('Failed to update preferences'));

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

@@ -84,7 +84,10 @@ const ProxySettings = ({ close }) => {
             proxy: validatedProxy
           })
         ).then(() => {
+          toast.success('Preferences saved successfully')
           close();
+        }).catch(() => {
+          toast.error('Failed to save preferences')
         });
       })
       .catch((error) => {

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

@@ -5,21 +5,23 @@ import { IconCaretDown } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import { useTheme } from 'providers/Theme';
 import SingleLineEditor from 'components/SingleLineEditor';
-import { updateAuth } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { humanizeRequestAPIKeyPlacement } from 'utils/collections';
 
-const ApiKeyAuth = ({ item, collection }) => {
+const ApiKeyAuth = ({ item, collection, updateAuth, request, save }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const apikeyAuth = item.draft ? get(item, 'draft.request.auth.apikey', {}) : get(item, 'request.auth.apikey', {});
+  const apikeyAuth = get(request, 'auth.apikey', {});
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  
+  const handleSave = () => {
+    save();
+  };
 
   const Icon = forwardRef((props, ref) => {
     return (
@@ -90,7 +92,7 @@ const ApiKeyAuth = ({ item, collection }) => {
           <div
             className="dropdown-item"
             onClick={() => {
-              dropdownTippyRef.current.hide();
+              dropdownTippyRef?.current?.hide();
               handleAuthChange('placement', 'header');
             }}
           >
@@ -99,11 +101,11 @@ const ApiKeyAuth = ({ item, collection }) => {
           <div
             className="dropdown-item"
             onClick={() => {
-              dropdownTippyRef.current.hide();
+              dropdownTippyRef?.current?.hide();
               handleAuthChange('placement', 'queryparams');
             }}
           >
-            Query Params
+            Query Param
           </div>
         </Dropdown>
       </div>

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

@@ -8,14 +8,17 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import StyledWrapper from './StyledWrapper';
 import { update } from 'lodash';
 
-const AwsV4Auth = ({ onTokenChange, item, collection }) => {
+const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const awsv4Auth = item.draft ? get(item, 'draft.request.auth.awsv4', {}) : get(item, 'request.auth.awsv4', {});
+  const awsv4Auth = get(request, 'auth.awsv4', {});
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  
+  const handleSave = () => {
+    save();
+  };
 
   const handleAccessKeyIdChange = (accessKeyId) => {
     dispatch(
@@ -25,11 +28,11 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
         itemUid: item.uid,
         content: {
           accessKeyId: accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: awsv4Auth.region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -42,12 +45,12 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: awsv4Auth.region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -60,12 +63,12 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: awsv4Auth.region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -78,12 +81,12 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: service || '',
+          region: awsv4Auth.region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -96,12 +99,12 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: region,
-          profileName: awsv4Auth.profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: region || '',
+          profileName: awsv4Auth.profileName || ''
         }
       })
     );
@@ -114,12 +117,12 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: profileName
+          accessKeyId: awsv4Auth.accessKeyId || '',
+          secretAccessKey: awsv4Auth.secretAccessKey || '',
+          sessionToken: awsv4Auth.sessionToken || '',
+          service: awsv4Auth.service || '',
+          region: awsv4Auth.region || '',
+          profileName: profileName || ''
         }
       })
     );

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

@@ -7,14 +7,17 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
-const BasicAuth = ({ item, collection }) => {
+const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const basicAuth = item.draft ? get(item, 'draft.request.auth.basic', {}) : get(item, 'request.auth.basic', {});
+  const basicAuth = get(request, 'auth.basic', {});
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  
+  const handleSave = () => {
+    save();
+  };
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -23,8 +26,8 @@ const BasicAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username: username,
-          password: basicAuth.password
+          username: username || '',
+          password: basicAuth.password || ''
         }
       })
     );
@@ -37,8 +40,8 @@ const BasicAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username: basicAuth.username,
-          password: password
+          username: basicAuth.username || '',
+          password: password || ''
         }
       })
     );

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

@@ -7,16 +7,18 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
-const BearerAuth = ({ item, collection }) => {
+const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = item.draft
-    ? get(item, 'draft.request.auth.bearer.token', '')
-    : get(item, 'request.auth.bearer.token', '');
+  // Use the request prop directly like OAuth2ClientCredentials does
+  const bearerToken = get(request, 'auth.bearer.token', '');
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  
+  const handleSave = () => {
+    save();
+  };
 
   const handleTokenChange = (token) => {
     dispatch(

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

@@ -3,18 +3,20 @@ import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
-import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
-const DigestAuth = ({ item, collection }) => {
+const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const digestAuth = item.draft ? get(item, 'draft.request.auth.digest', {}) : get(item, 'request.auth.digest', {});
+  const digestAuth = get(request, 'auth.digest', {});
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  
+  const handleSave = () => {
+    save();
+  };
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -23,8 +25,8 @@ const DigestAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username: username,
-          password: digestAuth.password
+          username: username || '',
+          password: digestAuth.password || ''
         }
       })
     );
@@ -37,8 +39,8 @@ const DigestAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username: digestAuth.username,
-          password: password
+          username: digestAuth.username || '',
+          password: password || ''
         }
       })
     );

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

@@ -7,14 +7,17 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
-const NTLMAuth = ({ item, collection }) => {
+const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const ntlmAuth = item.draft ? get(item, 'draft.request.auth.ntlm', {}) : get(item, 'request.auth.ntlm', {});
+  const ntlmAuth = get(request, 'auth.ntlm', {});
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  
+  const handleSave = () => {
+    save();
+  };
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -23,10 +26,9 @@ const NTLMAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username: username,
-          password: ntlmAuth.password,
-          domain: ntlmAuth.domain
-
+          username: username || '',
+          password: ntlmAuth.password || '',
+          domain: ntlmAuth.domain || ''
         }
       })
     );
@@ -39,9 +41,9 @@ const NTLMAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username: ntlmAuth.username,
-          password: password,
-          domain: ntlmAuth.domain
+          username: ntlmAuth.username || '',
+          password: password || '',
+          domain: ntlmAuth.domain || ''
         }
       })
     );
@@ -54,9 +56,9 @@ const NTLMAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username: ntlmAuth.username,
-          password: ntlmAuth.password,
-          domain: domain
+          username: ntlmAuth.username || '',
+          password: ntlmAuth.password || '',
+          domain: domain || ''
         }
       })
     );

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

@@ -7,14 +7,17 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
-const WsseAuth = ({ item, collection }) => {
+const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const wsseAuth = item.draft ? get(item, 'draft.request.auth.wsse', {}) : get(item, 'request.auth.wsse', {});
+  const wsseAuth = get(request, 'auth.wsse', {});
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  
+  const handleSave = () => {
+    save();
+  };
 
   const handleUserChange = (username) => {
     dispatch(
@@ -23,8 +26,8 @@ const WsseAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username,
-          password: wsseAuth.password
+          username: username || '',
+          password: wsseAuth.password || ''
         }
       })
     );
@@ -37,8 +40,8 @@ const WsseAuth = ({ item, collection }) => {
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          username: wsseAuth.username,
-          password
+          username: wsseAuth.username || '',
+          password: password || ''
         }
       })
     );
@@ -55,6 +58,7 @@ const WsseAuth = ({ item, collection }) => {
           onChange={(val) => handleUserChange(val)}
           onRun={handleRun}
           collection={collection}
+          item={item}
         />
       </div>
 
@@ -67,6 +71,8 @@ const WsseAuth = ({ item, collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           onRun={handleRun}
           collection={collection}
+          item={item}
+          isSecret={true}
         />
       </div>
     </StyledWrapper>

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

@@ -7,6 +7,8 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
 import NTLMAuth from './NTLMAuth';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 
 import ApiKeyAuth from './ApiKeyAuth';
 import StyledWrapper from './StyledWrapper';
@@ -27,6 +29,16 @@ const getTreePathFromCollectionToItem = (collection, _item) => {
 const Auth = ({ item, collection }) => {
   const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
   const requestTreePath = getTreePathFromCollectionToItem(collection, item);
+  
+  // Create a request object to pass to the auth components
+  const request = item.draft 
+    ? get(item, 'draft.request', {})
+    : get(item, 'request', {});
+
+  // Save function for request level
+  const save = () => {
+    return saveRequest(item.uid, collection.uid);
+  };
 
   const getEffectiveAuthSource = () => {
     if (authMode !== 'inherit') return null;
@@ -59,28 +71,28 @@ const Auth = ({ item, collection }) => {
   const getAuthView = () => {
     switch (authMode) {
       case 'awsv4': {
-        return <AwsV4Auth collection={collection} item={item} />;
+        return <AwsV4Auth collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
       }
       case 'basic': {
-        return <BasicAuth collection={collection} item={item} />;
+        return <BasicAuth collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
       }
       case 'bearer': {
-        return <BearerAuth collection={collection} item={item} />;
+        return <BearerAuth collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
       }
       case 'digest': {
-        return <DigestAuth collection={collection} item={item} />;
+        return <DigestAuth collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
       }
       case 'ntlm': {
-        return <NTLMAuth collection={collection} item={item} />;
+        return <NTLMAuth collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
       }      
       case 'oauth2': {
-        return <OAuth2 collection={collection} item={item} />;
+        return <OAuth2 collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
       }
       case 'wsse': {
-        return <WsseAuth collection={collection} item={item} />;
+        return <WsseAuth collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
       }
       case 'apikey': {
-        return <ApiKeyAuth collection={collection} item={item} />;
+        return <ApiKeyAuth collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
       }
       case 'inherit': {
         const source = getEffectiveAuthSource();

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

@@ -18,8 +18,9 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import StyledWrapper from './StyledWrapper';
 import Documentation from 'components/Documentation/index';
 import GraphQLSchemaActions from '../GraphQLSchemaActions/index';
+import HeightBoundContainer from 'ui/HeightBoundContainer';
 
-const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
+const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
@@ -66,7 +67,6 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
             collection={collection}
             theme={displayedTheme}
             schema={schema}
-            width={leftPaneWidth}
             onSave={onSave}
             value={query}
             onRun={onRun}
@@ -154,7 +154,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         </div>
         <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
       </div>
-      <section className="flex w-full mt-5 flex-1 relative">{getTabPanel(focusedTab.requestPaneTab)}</section>
+      <section className="flex w-full mt-5 flex-1 relative">
+        <HeightBoundContainer>{getTabPanel(focusedTab.requestPaneTab)}</HeightBoundContainer>
+      </section>
     </StyledWrapper>
   );
 };

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

@@ -7,8 +7,10 @@ import Dropdown from '../../Dropdown';
 
 const GraphQLSchemaActions = ({ item, collection, onSchemaLoad, toggleDocs }) => {
   const url = item.draft ? get(item, 'draft.request.url', '') : get(item, 'request.url', '');
+  const pathname = item.draft ? get(item, 'draft.pathname', '') : get(item, 'pathname', '');
+  const uid = item.draft ? get(item, 'draft.uid', '') : get(item, 'uid', '');
   const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-  const request = item.draft ? item.draft.request : item.request;
+  const request = item.draft ? { ...item.draft.request, pathname, uid } : { ...item.request, pathname, uid };
 
   let {
     schema,

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

@@ -64,9 +64,11 @@ const GraphQLVariables = ({ variables, item, collection }) => {
         font={get(preferences, 'font.codeFont', 'default')}
         fontSize={get(preferences, 'font.codeFontSize')}
         onEdit={onEdit}
-        mode="javascript"
+        mode="application/json"
         onRun={onRun}
         onSave={onSave}
+        enableVariableHighlighting={true}
+        showHintsFor={['variables']}
       />
     </>
   );

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

@@ -15,6 +15,7 @@ import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
 import { find, get } from 'lodash';
 import Documentation from 'components/Documentation/index';
+import HeightBoundContainer from 'ui/HeightBoundContainer';
 import { useEffect } from 'react';
 
 const ContentIndicator = () => {
@@ -33,7 +34,7 @@ const ErrorIndicator = () => {
   );
 };
 
-const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
+const HttpRequestPane = ({ item, collection }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
@@ -180,7 +181,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
           'mt-5': !isMultipleContentTab
         })}
       >
-        {getTabPanel(focusedTab.requestPaneTab)}
+        <HeightBoundContainer>
+          {getTabPanel(focusedTab.requestPaneTab)}
+        </HeightBoundContainer>
       </section>
     </StyledWrapper>
   );

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

@@ -18,12 +18,7 @@ import { IconWand } from '@tabler/icons';
 
 import onHasCompletion from './onHasCompletion';
 
-let CodeMirror;
-const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
-
-if (!SERVER_RENDERED) {
-  CodeMirror = require('codemirror');
-}
+const CodeMirror = require('codemirror');
 
 const md = new MD();
 const AUTO_COMPLETE_AFTER_KEY = /^[a-zA-Z0-9_@(]$/;

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

@@ -31,7 +31,7 @@ const Wrapper = styled.div`
     }
   }
 
-  .btn-add-param {
+  .btn-action {
     font-size: 0.8125rem;
     &:hover span {
       text-decoration: underline;

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

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import InfoTip from 'components/InfoTip';
 import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import {
   addQueryParam,
   updateQueryParam,
   deleteQueryParam,
   moveQueryParam,
-  updatePathParam
+  updatePathParam,
+  setQueryParams
 } from 'providers/ReduxStore/slices/collections';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -18,6 +19,7 @@ import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collection
 import StyledWrapper from './StyledWrapper';
 import Table from 'components/Table/index';
 import ReorderTable from 'components/ReorderTable';
+import BulkEditor from '../../BulkEditor';
 
 const QueryParams = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -25,6 +27,8 @@ const QueryParams = ({ item, collection }) => {
   const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
   const queryParams = params.filter((param) => param.type === 'query');
   const pathParams = params.filter((param) => param.type === 'path');
+  
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
   const handleAddQueryParam = () => {
     dispatch(
@@ -113,8 +117,31 @@ const QueryParams = ({ item, collection }) => {
     );
   };
 
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkParamsChange = (newParams) => {
+    const paramsWithType = newParams.map((item) => ({ ...item, type: 'query' }));
+    dispatch(setQueryParams({ collectionUid: collection.uid, itemUid: item.uid, params: paramsWithType }));
+  };
+
+  if (isBulkEditMode) {
+    return (
+      <StyledWrapper className="w-full mt-3">
+        <BulkEditor
+          params={queryParams}
+          onChange={handleBulkParamsChange}
+          onToggle={toggleBulkEditMode}
+          onSave={onSave}
+          onRun={handleRun}
+        />
+      </StyledWrapper>
+    );
+  }
+
   return (
-    <StyledWrapper className="w-full flex flex-col absolute">
+    <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
         <div className="mb-1 title text-xs">Query</div>
         <Table
@@ -171,9 +198,14 @@ const QueryParams = ({ item, collection }) => {
           </ReorderTable>
         </Table>
 
-        <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddQueryParam}>
-          +&nbsp;<span>Add Param</span>
-        </button>
+        <div className="flex justify-between mt-2">
+          <button className="btn-action text-link pr-2 py-3 select-none" onClick={handleAddQueryParam}>
+            +&nbsp;<span>Add Param</span>
+          </button>
+          <button className="btn-action text-link select-none" onClick={toggleBulkEditMode}>
+            Bulk Edit
+          </button>
+        </div>
         <div className="mb-2 title text-xs flex items-stretch">
           <span>Path</span>
           <InfoTip infotipId="path-param-InfoTip">

packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js

@@ -21,7 +21,7 @@ const RequestBodyMode = ({ item, collection }) => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
-        {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
+        {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
       </div>
     );
   });
@@ -149,7 +149,7 @@ const RequestBodyMode = ({ item, collection }) => {
         </Dropdown>
       </div>
       {(bodyMode === 'json' || bodyMode === 'xml') && (
-        <button className="ml-1" onClick={onPrettify}>
+        <button className="ml-2" onClick={onPrettify}>
           Prettify
         </button>
       )}

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

@@ -49,7 +49,7 @@ const RequestBody = ({ item, collection }) => {
       <StyledWrapper className="w-full">
         <CodeEditor
           collection={collection}
-          item={item} 
+          item={item}
           theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
@@ -58,13 +58,15 @@ const RequestBody = ({ item, collection }) => {
           onRun={onRun}
           onSave={onSave}
           mode={codeMirrorMode[bodyMode]}
+          enableVariableHighlighting={true}
+          showHintsFor={['variables']}
         />
       </StyledWrapper>
     );
   }
 
   if (bodyMode === 'file') {
-    return <FileBody item={item} collection={collection}/>
+    return <FileBody item={item} collection={collection} />;
   }
 
   if (bodyMode === 'formUrlEncoded') {
@@ -77,4 +79,4 @@ const RequestBody = ({ item, collection }) => {
 
   return <StyledWrapper className="w-full">No Body</StyledWrapper>;
 };
-export default RequestBody;
+export default RequestBody;

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

@@ -22,8 +22,11 @@ const Wrapper = styled.div`
       }
   }
 
-  .btn-add-header {
+  .btn-action {
     font-size: 0.8125rem;
+    &:hover span {
+      text-decoration: underline;
+    }
   }
 
   input[type='text'] {

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { addRequestHeader, updateRequestHeader, deleteRequestHeader, moveRequestHeader } from 'providers/ReduxStore/slices/collections';
+import { addRequestHeader, updateRequestHeader, deleteRequestHeader, moveRequestHeader, setRequestHeaders } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
@@ -12,12 +12,16 @@ import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import Table from 'components/Table/index';
 import ReorderTable from 'components/ReorderTable/index';
+import BulkEditor from '../../BulkEditor';
+
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const RequestHeaders = ({ item, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
+  
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
   const addHeader = () => {
     dispatch(
@@ -75,6 +79,28 @@ const RequestHeaders = ({ item, collection }) => {
       );
     };
 
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkHeadersChange = (newHeaders) => {
+    dispatch(setRequestHeaders({ collectionUid: collection.uid, itemUid: item.uid, headers: newHeaders }));
+  };
+
+  if (isBulkEditMode) {
+    return (
+      <StyledWrapper className="w-full mt-3">
+        <BulkEditor
+          params={headers}
+          onChange={handleBulkHeadersChange}
+          onToggle={toggleBulkEditMode}
+          onSave={onSave}
+          onRun={handleRun}
+        />
+      </StyledWrapper>
+    );
+  }
+
   return (
     <StyledWrapper className="w-full">
       <Table
@@ -153,9 +179,14 @@ const RequestHeaders = ({ item, collection }) => {
             : null}
         </ReorderTable>
       </Table>
-      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
-        + Add Header
-      </button>
+      <div className="flex justify-between mt-2">
+        <button className="btn-action text-link pr-2 py-3 select-none" onClick={addHeader}>
+          + Add Header
+        </button>
+        <button className="btn-action text-link select-none" onClick={toggleBulkEditMode}>
+          Bulk Edit
+        </button>
+      </div>
     </StyledWrapper>
   );
 };

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

@@ -52,6 +52,7 @@ const Script = ({ item, collection }) => {
           mode="javascript"
           onRun={onRun}
           onSave={onSave}
+          showHintsFor={['req', 'bru']}
         />
       </div>
       <div className="flex flex-col flex-1 mt-2 gap-y-2">
@@ -66,6 +67,7 @@ const Script = ({ item, collection }) => {
           mode="javascript"
           onRun={onRun}
           onSave={onSave}
+          showHintsFor={['req', 'res', 'bru']}
         />
       </div>
     </StyledWrapper>

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

@@ -37,6 +37,7 @@ const Tests = ({ item, collection }) => {
       mode="javascript"
       onRun={onRun}
       onSave={onSave}
+      showHintsFor={['req', 'res', 'bru']}
     />
   );
 };

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

@@ -3,9 +3,13 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   &.dragging {
     cursor: col-resize;
+
+    &.vertical-layout {
+      cursor: row-resize;
+    }
   }
 
-  div.drag-request {
+  div.dragbar-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -15,18 +19,47 @@ const StyledWrapper = styled.div`
     cursor: col-resize;
     background: transparent;
 
-    div.drag-request-border {
+    div.dragbar-handle {
       display: flex;
       height: 100%;
       width: 1px;
       border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
     }
 
-    &:hover div.drag-request-border {
+    &:hover div.dragbar-handle {
       border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
     }
   }
 
+  &.vertical-layout {
+    .request-pane {
+      padding-bottom: 0.5rem;
+    }
+
+    .response-pane {
+      padding-top: 0.5rem;
+    }
+
+    div.dragbar-wrapper {
+      width: 100%;
+      height: 10px;
+      cursor: row-resize;
+      padding: 0 1rem;
+
+      div.dragbar-handle {
+        width: 100%;
+        height: 1px;
+        border-left: none;
+        border-top: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
+      }
+
+      &:hover div.dragbar-handle {
+        border-left: none;
+        border-top: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
+      }
+    }
+  }
+
   div.graphql-docs-explorer-container {
     background: white;
     outline: none;

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

@@ -29,7 +29,8 @@ import FolderNotFound from './FolderNotFound';
 
 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
-const DEFAULT_PADDING = 5;
+const MIN_TOP_PANE_HEIGHT = 150;
+const MIN_BOTTOM_PANE_HEIGHT = 150;
 
 const RequestTabPanel = () => {
   if (typeof window == 'undefined') {
@@ -41,6 +42,8 @@ const RequestTabPanel = () => {
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
   const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
   const _collections = useSelector((state) => state.collections.collections);
+  const preferences = useSelector((state) => state.app.preferences);
+  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
 
   // merge `globalEnvironmentVariables` into the active collection and rebuild `collections` immer proxy object
   let collections = produce(_collections, (draft) => {
@@ -64,13 +67,15 @@ const RequestTabPanel = () => {
   let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
   const [leftPaneWidth, setLeftPaneWidth] = useState(
     focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2
-  ); // 2.2 so that request pane is relatively smaller
-  const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
+  ); // 2.2 is intentional to make both panes appear to be of equal width
+  const [topPaneHeight, setTopPaneHeight] = useState(focusedTab?.requestPaneHeight || MIN_TOP_PANE_HEIGHT);
   const [dragging, setDragging] = useState(false);
+  const dragOffset = useRef({ x: 0, y: 0 });
 
   // Not a recommended pattern here to have the child component
   // make a callback to set state, but treating this as an exception
   const docExplorerRef = useRef(null);
+  const mainSectionRef = useRef(null);
   const [schema, setSchema] = useState(null);
   const [showGqlDocs, setShowGqlDocs] = useState(false);
   const onSchemaLoad = (schema) => setSchema(schema);
@@ -85,43 +90,72 @@ const RequestTabPanel = () => {
   };
 
   useEffect(() => {
-    const leftPaneWidth = (screenWidth - asideWidth) / 2.2;
-    setLeftPaneWidth(leftPaneWidth);
-  }, [screenWidth]);
-
-  useEffect(() => {
-    setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
-  }, [screenWidth, asideWidth, leftPaneWidth]);
+    // Initialize vertical heights when switching to vertical layout
+    if (mainSectionRef.current) {
+      const mainRect = mainSectionRef.current.getBoundingClientRect();
+      if (isVerticalLayout) {
+        const initialHeight = mainRect.height / 2;
+        setTopPaneHeight(initialHeight);
+        // In vertical mode, set leftPaneWidth to full container width
+        setLeftPaneWidth(mainRect.width);
+      } else {
+        // In horizontal mode, set to roughly half width
+        setLeftPaneWidth((screenWidth - asideWidth) / 2.2);
+      }
+    }
+  }, [isVerticalLayout, screenWidth, asideWidth]);
 
   const handleMouseMove = (e) => {
-    if (dragging) {
+    if (dragging && mainSectionRef.current) {
       e.preventDefault();
-      let leftPaneXPosition = e.clientX + 2;
-      if (
-        leftPaneXPosition < asideWidth + DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH ||
-        leftPaneXPosition > screenWidth - MIN_RIGHT_PANE_WIDTH
-      ) {
-        return;
+      const mainRect = mainSectionRef.current.getBoundingClientRect();
+
+      if (isVerticalLayout) {
+        const newHeight = e.clientY - mainRect.top - dragOffset.current.y;
+        if (newHeight < MIN_TOP_PANE_HEIGHT || newHeight > mainRect.height - MIN_BOTTOM_PANE_HEIGHT) {
+          return;
+        }
+        
+        setTopPaneHeight(newHeight);
+      } else {
+        const newWidth = e.clientX - mainRect.left - dragOffset.current.x;
+        if (newWidth < MIN_LEFT_PANE_WIDTH || newWidth > mainRect.width - MIN_RIGHT_PANE_WIDTH) {
+          return;
+        }
+        setLeftPaneWidth(newWidth);
       }
-      setLeftPaneWidth(leftPaneXPosition - asideWidth);
-      setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
     }
   };
+
   const handleMouseUp = (e) => {
-    if (dragging) {
+    if (dragging && mainSectionRef.current) {
       e.preventDefault();
       setDragging(false);
-      dispatch(
-        updateRequestPaneTabWidth({
-          uid: activeTabUid,
-          requestPaneWidth: e.clientX - asideWidth - DEFAULT_PADDING
-        })
-      );
+      if (!isVerticalLayout) {
+        const mainRect = mainSectionRef.current.getBoundingClientRect();
+        dispatch(
+          updateRequestPaneTabWidth({
+            uid: activeTabUid,
+            requestPaneWidth: e.clientX - mainRect.left
+          })
+        );
+      }
     }
   };
+
   const handleDragbarMouseDown = (e) => {
     e.preventDefault();
     setDragging(true);
+
+    if (isVerticalLayout) {
+      const dragBar = e.currentTarget;
+      const dragBarRect = dragBar.getBoundingClientRect();
+      dragOffset.current.y = e.clientY - dragBarRect.top;
+    } else {
+      const dragBar = e.currentTarget;
+      const dragBarRect = dragBar.getBoundingClientRect();
+      dragOffset.current.x = e.clientX - dragBarRect.left;
+    }
   };
 
   useEffect(() => {
@@ -132,7 +166,7 @@ const RequestTabPanel = () => {
       document.removeEventListener('mouseup', handleMouseUp);
       document.removeEventListener('mousemove', handleMouseMove);
     };
-  }, [dragging, asideWidth]);
+  }, [dragging]);
 
   if (!activeTabUid) {
     return <Welcome />;
@@ -197,15 +231,19 @@ const RequestTabPanel = () => {
   };
 
   return (
-    <StyledWrapper className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''}`}>
+    <StyledWrapper className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''} ${isVerticalLayout ? 'vertical-layout' : ''}`}>
       <div className="pt-4 pb-3 px-4">
         <QueryUrl item={item} collection={collection} handleRun={handleRun} />
       </div>
-      <section className="main flex flex-grow pb-4 relative">
+      <section ref={mainSectionRef} className={`main flex ${isVerticalLayout ? 'flex-col' : ''} flex-grow pb-4 relative`}>
         <section className="request-pane">
           <div
             className="px-4 h-full"
-            style={{
+            style={isVerticalLayout ? {
+              height: `${Math.max(topPaneHeight, MIN_TOP_PANE_HEIGHT)}px`,
+              minHeight: `${MIN_TOP_PANE_HEIGHT}px`,
+              width: '100%'
+            } : {
               width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`
             }}
           >
@@ -213,7 +251,6 @@ const RequestTabPanel = () => {
               <GraphQLRequestPane
                 item={item}
                 collection={collection}
-                leftPaneWidth={leftPaneWidth}
                 onSchemaLoad={onSchemaLoad}
                 toggleDocs={toggleDocs}
                 handleGqlClickReference={handleGqlClickReference}
@@ -221,17 +258,17 @@ const RequestTabPanel = () => {
             ) : null}
 
             {item.type === 'http-request' ? (
-              <HttpRequestPane item={item} collection={collection} leftPaneWidth={leftPaneWidth} />
+              <HttpRequestPane item={item} collection={collection} />
             ) : null}
           </div>
         </section>
 
-        <div className="drag-request" onMouseDown={handleDragbarMouseDown}>
-          <div className="drag-request-border" />
+        <div className="dragbar-wrapper" onMouseDown={handleDragbarMouseDown}>
+          <div className="dragbar-handle" />
         </div>
 
-        <section className="response-pane flex-grow">
-          <ResponsePane item={item} collection={collection} rightPaneWidth={rightPaneWidth} response={item.response} />
+        <section className="response-pane flex-grow overflow-x-auto">
+          <ResponsePane item={item} collection={collection} response={item.response} />
         </section>
       </section>
 

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

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .warning-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    margin-top: 10%;
+    text-align: center;
+    max-width: 480px;
+  }
+
+  .warning-icon {
+    margin-bottom: 1rem;
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+
+  .warning-title {
+    font-weight: 600;
+    color: ${(props) => props.theme.text};
+    margin-bottom: 1rem;
+  }
+
+  .warning-description {
+    color: ${(props) => props.theme.colors.text.muted};
+
+    .size-highlight {
+      padding: 0.125rem 0.375rem;
+      border-radius: 4px;
+      font-size: 0.8rem;
+    }
+
+    .current-size {
+      color: ${(props) => props.theme.colors.text.danger};
+      background: ${(props) => props.theme.colors.text.danger}15;
+    }
+
+    .supported-size {
+      color: ${(props) => props.theme.colors.text.yellow};
+      background: ${(props) => props.theme.colors.text.yellow}15;
+    }
+  }
+
+  .warning-actions {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  button {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    background: ${(props) => props.theme.button.secondary.bg};
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { IconDownload, IconCopy, IconEye, IconAlertTriangle } from '@tabler/icons';
+import toast from 'react-hot-toast';
+import get from 'lodash/get';
+import StyledWrapper from './StyledWrapper';
+import { formatSize } from 'utils/common/index';
+
+const LargeResponseWarning = ({ item, responseSize, onRevealResponse }) => {
+  const { ipcRenderer } = window;
+  const response = item.response || {};
+
+  const saveResponseToFile = () => {
+    return new Promise((resolve, reject) => {
+      ipcRenderer
+        .invoke('renderer:save-response-to-file', response, item.requestSent.url)
+        .then(() => {
+          toast.success('Response saved to file');
+          resolve();
+        })
+        .catch((err) => {
+          toast.error(get(err, 'error.message') || 'Something went wrong!');
+          reject(err);
+        });
+    });
+  };
+
+  const copyResponse = () => {
+    try {
+      const textToCopy = typeof response.data === 'string'
+        ? response.data
+        : JSON.stringify(response.data, null, 2);
+
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        toast.success('Response copied to clipboard');
+      }).catch(() => {
+        toast.error('Failed to copy response');
+      });
+    } catch (error) {
+      toast.error('Failed to copy response');
+    }
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="warning-container">
+        <div className="warning-icon">
+          <IconAlertTriangle size={45} strokeWidth={2} />
+        </div>
+        <div className="warning-content">
+          <div className="warning-title">
+            Large Response Warning
+          </div>
+          <div className="warning-description">
+            Handling responses over <span className="size-highlight supported-size">{formatSize(10 * 1024 * 1024)}</span> could degrade performance.
+          <br />
+            Size of current response: <span className="size-highlight current-size">{formatSize(responseSize)}</span>
+          </div>
+        </div>
+      </div>
+      <div className="warning-actions">
+        <button
+          className="btn-reveal"
+          onClick={onRevealResponse}
+          title="Show response content"
+        >
+          <IconEye size={18} strokeWidth={1.5} />
+          View
+        </button>
+        <button
+          className="btn-save"
+          onClick={saveResponseToFile}
+          disabled={!response.dataBuffer}
+          title="Save response to file"
+        >
+          <IconDownload size={18} strokeWidth={1.5} />
+          Save
+        </button>
+        <button
+          className="btn-copy"
+          onClick={copyResponse}
+          disabled={!response.data}
+          title="Copy response to clipboard"
+        >
+          <IconCopy size={18} strokeWidth={1.5} />
+          Copy
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default LargeResponseWarning;

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

@@ -22,6 +22,15 @@ const StyledWrapper = styled.div`
       animation: rotateCounterClockwise 1s linear infinite;
     }
   }
+
+  // spinner and request time content looks better centered vertically in vertical layout
+  // while in horizontal layout, it looks better when the content is aligned to the top
+  &.vertical-layout {
+    div.overlay {
+      justify-content: center;
+      padding: 1rem;
+    }
+  }
 `;
 
 export default StyledWrapper;

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

@@ -1,23 +1,25 @@
 import React from 'react';
 import { IconRefresh } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { cancelRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StopWatch from '../../StopWatch';
 import StyledWrapper from './StyledWrapper';
 
 const ResponseLoadingOverlay = ({ item, collection }) => {
   const dispatch = useDispatch();
+  const preferences = useSelector((state) => state.app.preferences);
+  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
 
   const handleCancelRequest = () => {
     dispatch(cancelRequest(item.cancelTokenUid, item, collection));
   };
 
   return (
-    <StyledWrapper className="w-full">
+    <StyledWrapper className={`w-full ${isVerticalLayout ? 'vertical-layout' : ''}`}>
       <div className="overlay">
         <div style={{ marginBottom: 15, fontSize: 26 }}>
           <div style={{ display: 'inline-block', fontSize: 20, marginLeft: 5, marginRight: 5 }}>
-            <StopWatch requestTimestamp={item?.requestSent?.timestamp} />
+            <StopWatch startTime={item?.requestStartTime} />
           </div>
         </div>
         <IconRefresh size={24} className="loading-icon" />

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

@@ -1,12 +1,19 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   padding-top: 20%;
   width: 100%;
 
   .send-icon {
     color: ${(props) => props.theme.requestTabPanel.responseSendIcon};
   }
+
+  &.vertical-layout {
+    padding: 1rem;
+    justify-content: center;
+  }
 `;
 
 export default StyledWrapper;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconSend } from '@tabler/icons';
+import { useSelector } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 import { isMacOS } from 'utils/common/platform';
 
@@ -8,9 +9,11 @@ const Placeholder = () => {
   const sendRequestShortcut = isMac ? 'Cmd + Enter' : 'Ctrl + Enter';
   const newRequestShortcut = isMac ? 'Cmd + B' : 'Ctrl + B';
   const editEnvironmentShortcut = isMac ? 'Cmd + E' : 'Ctrl + E';
+  const preferences = useSelector((state) => state.app.preferences);
+  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
 
   return (
-    <StyledWrapper>
+    <StyledWrapper className={`${isVerticalLayout ? 'vertical-layout' : ''}`}>
       <div className="send-icon flex justify-center" style={{ fontSize: 200 }}>
         <IconSend size={150} strokeWidth={1} />
       </div>

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

@@ -11,6 +11,7 @@ import StyledWrapper from './StyledWrapper';
 import { useState, useMemo, useEffect } from 'react';
 import { useTheme } from 'providers/Theme/index';
 import { getEncoding, uuid } from 'utils/common/index';
+import LargeResponseWarning from '../LargeResponseWarning';
 
 const formatResponse = (data, dataBuffer, encoding, mode, filter) => {
   if (data === undefined || !dataBuffer || !mode) {
@@ -73,10 +74,11 @@ const formatErrorMessage = (error) => {
   return error;
 };
 
-const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEventListener, headers, error }) => {
+const QueryResult = ({ item, collection, data, dataBuffer, disableRunEventListener, headers, error }) => {
   const contentType = getContentType(headers);
   const mode = getCodeMirrorModeBasedOnContentType(contentType, data);
   const [filter, setFilter] = useState(null);
+  const [showLargeResponse, setShowLargeResponse] = useState(false);
   const responseEncoding = getEncoding(headers);
   const formattedData = useMemo(
     () => formatResponse(data, dataBuffer, responseEncoding, mode, filter),
@@ -84,6 +86,25 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
   );
   const { displayedTheme } = useTheme();
 
+  const responseSize = useMemo(() => {
+    const response = item.response || {};
+    if (typeof response.size === 'number') {
+      return response.size;
+    }
+    
+    if (!dataBuffer) return 0;
+
+    try {
+      // dataBuffer is base64 encoded, so we need to calculate the actual size
+      const buffer = Buffer.from(dataBuffer, 'base64');
+      return buffer.length;
+    } catch (error) {
+      return 0;
+    }
+  }, [dataBuffer, item.response]);
+
+  const isLargeResponse = responseSize > 10 * 1024 * 1024; // 10 MB
+
   const debouncedResultFilterOnChange = debounce((e) => {
     setFilter(e.target.value);
   }, 250);
@@ -143,7 +164,6 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
   return (
     <StyledWrapper
       className="w-full h-full relative flex"
-      style={{ maxWidth: width }}
       queryFilterEnabled={queryFilterEnabled}
     >
       <div className="flex justify-end gap-2 text-xs" role="tablist">
@@ -151,7 +171,9 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
       </div>
       {error ? (
         <div>
-          {hasScriptError ? null : <div className="text-red-500">{formatErrorMessage(error)}</div>}
+          {hasScriptError ? null : (
+            <div className="text-red-500" style={{ whiteSpace: 'pre-line' }}>{formatErrorMessage(error)}</div>
+          )}
 
           {error && typeof error === 'string' && error.toLowerCase().includes('self signed certificate') ? (
             <div className="mt-6 muted text-xs">
@@ -160,6 +182,12 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
             </div>
           ) : null}
         </div>
+      ) : isLargeResponse && !showLargeResponse ? (
+        <LargeResponseWarning
+          item={item}
+          responseSize={responseSize}
+          onRevealResponse={() => setShowLargeResponse(true)}
+        />
       ) : (
         <div className="h-full flex flex-col">
           <div className="flex-1 relative">

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  button {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { savePreferences } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from './StyledWrapper';
+
+const IconDockToBottom = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      fill="none"
+    >
+      <path stroke="none" fill="none" d="M0 0h24v24H0z" />
+      <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+      <path d="M4 15l16 0" />
+      <path
+        fill="currentColor"
+        d="M 5.5135136,19.111502 C 5.2542477,18.995986 5.0221761,18.756859 4.8928709,18.47199 4.7922381,18.250288 4.7788524,18.078909 4.7777079,16.997543 l -0.0013,-1.223586 H 12 19.223587 v 1.22675 c 0,1.194609 -0.0039,1.234605 -0.149369,1.526503 -0.09333,0.187285 -0.240773,0.363095 -0.392978,0.46858 l -0.243606,0.168829 -6.373606,0.0129 c -5.2129418,0.0105 -6.4058225,-0.0015 -6.5505114,-0.06597 z"
+      />
+    </svg>
+  );
+};
+
+const IconDockToRight = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      fill="none"
+    >
+      <path fill="none" stroke="none" d="M 0,24 V 0 h 24 v 24 z" />
+      <path d="m 4,20 m 2,0 A 2,2 0 0 1 4,18 V 6 A 2,2 0 0 1 6,4 h 12 a 2,2 0 0 1 2,2 v 12 a 2,2 0 0 1 -2,2 z" />
+      <path d="M 15,20 V 4" />
+      <path
+        fill="currentColor"
+        stroke="currentColor"
+        d="m 19.111502,18.486486 c -0.115516,0.259266 -0.354643,0.491338 -0.639512,0.620643 -0.221702,0.100633 -0.393081,0.114019 -1.474447,0.115163 l -1.223586,0.0013 V 12 4.7764125 h 1.22675 c 1.194609,0 1.234605,0.0039 1.526503,0.14937 0.187285,0.09333 0.363095,0.2407725 0.46858,0.3929775 l 0.168829,0.243606 0.0129,6.373606 c 0.0105,5.212942 -0.0015,6.405822 -0.06597,6.550511 z"
+      />
+    </svg>  
+  );
+};
+
+const ResponseLayoutToggle = () => {
+  const dispatch = useDispatch();
+  const preferences = useSelector((state) => state.app.preferences);
+  const orientation = preferences?.layout?.responsePaneOrientation || 'horizontal';
+
+  const toggleOrientation = () => {
+    const newOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+    const updatedPreferences = {
+      ...preferences,
+      layout: {
+        ...preferences.layout,
+        responsePaneOrientation: newOrientation
+      }
+    };
+    dispatch(savePreferences(updatedPreferences));
+  };
+
+  return (
+    <StyledWrapper className="ml-2 flex items-center">
+      <button 
+        onClick={toggleOrientation} 
+        title={orientation === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'}
+      >
+        {orientation === 'horizontal' ? (
+          <IconDockToBottom />
+        ) : (
+          <IconDockToRight />
+        )}
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default ResponseLayoutToggle;

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

@@ -0,0 +1,173 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, fireEvent} from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { ThemeProvider } from 'providers/Theme';
+import { configureStore, createSlice } from '@reduxjs/toolkit';
+import ResponseLayoutToggle from './index';
+
+const mockSavePreferences = jest.fn((payload) => ({ type: 'app/savePreferences', payload }));
+
+// Mock the savePreferences action
+jest.mock('providers/ReduxStore/slices/app', () => ({
+  savePreferences: (payload) => mockSavePreferences(payload)
+}));
+
+// Mock localStorage
+const mockLocalStorage = {
+  getItem: jest.fn(() => 'dark'),
+  setItem: jest.fn(),
+  removeItem: jest.fn()
+};
+
+// Mock matchMedia
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    })),
+  });
+  Object.defineProperty(window, 'localStorage', {
+    value: mockLocalStorage
+  });
+});
+
+beforeEach(() => {
+  mockSavePreferences.mockClear();
+});
+
+const initialState = {
+  app: {
+    preferences: {
+      layout: {
+        responsePaneOrientation: 'horizontal'
+      }
+    }
+  }
+};
+
+const createTestStore = (initialState) => {
+  const appSlice = createSlice({
+    name: 'app',
+    initialState: initialState.app,
+    reducers: {
+      savePreferences: (state, action) => {
+        state.preferences = action.payload;
+      }
+    }
+  });
+
+  return configureStore({
+    reducer: { app: appSlice.reducer }
+  });
+};
+
+const renderWithProviders = (component, customState = initialState) => {
+  const store = createTestStore(customState);
+  return {
+    store,
+    ...render(
+      <Provider store={store}>
+        <ThemeProvider>
+          {component}
+        </ThemeProvider>
+      </Provider>
+    )
+  };
+};
+
+describe('ResponseLayoutToggle', () => {
+  describe('Initial Render', () => {
+    it('should render with horizontal orientation by default', () => {
+      renderWithProviders(<ResponseLayoutToggle />);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveAttribute('title', 'Switch to vertical layout');
+    });
+
+    it('should render with vertical orientation when specified', () => {
+      const customState = {
+        app: {
+          preferences: {
+            layout: {
+              responsePaneOrientation: 'vertical'
+            }
+          }
+        }
+      };
+      renderWithProviders(<ResponseLayoutToggle />, customState);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveAttribute('title', 'Switch to horizontal layout');
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should switch to vertical layout when clicked in horizontal mode', () => {
+      const { store } = renderWithProviders(<ResponseLayoutToggle />);
+      const button = screen.getByRole('button');
+      
+      // Initial state check
+      expect(button).toHaveAttribute('title', 'Switch to vertical layout');
+      
+      fireEvent.click(button);
+
+      // Check if action was called
+      expect(mockSavePreferences).toHaveBeenCalledWith({
+        layout: {
+          responsePaneOrientation: 'vertical'
+        }
+      });
+
+      // Manually update store to simulate state change
+      store.dispatch(mockSavePreferences({
+        layout: {
+          responsePaneOrientation: 'vertical'
+        }
+      }));
+
+      // Check if button title was updated
+      expect(button).toHaveAttribute('title', 'Switch to horizontal layout');
+    });
+
+    it('should switch to horizontal layout when clicked in vertical mode', () => {
+      const customState = {
+        app: {
+          preferences: {
+            layout: {
+              responsePaneOrientation: 'vertical'
+            }
+          }
+        }
+      };
+      const { store } = renderWithProviders(<ResponseLayoutToggle />, customState);
+      const button = screen.getByRole('button');
+      
+      // Initial state check
+      expect(button).toHaveAttribute('title', 'Switch to horizontal layout');
+      
+      fireEvent.click(button);
+
+      // Check if action was called
+      expect(mockSavePreferences).toHaveBeenCalledWith({
+        layout: {
+          responsePaneOrientation: 'horizontal'
+        }
+      });
+
+      // Manually update store to simulate state change
+      store.dispatch(mockSavePreferences({
+        layout: {
+          responsePaneOrientation: 'horizontal'
+        }
+      }));
+
+      // Check if button title was updated
+      expect(button).toHaveAttribute('title', 'Switch to vertical layout');
+    });
+  });
+});

packages/bruno-app/src/components/ResponsePane/ResponseSize/ResponseSize.spec.js

@@ -0,0 +1,110 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import ResponseSize from './index';
+
+// Create minimal theme with only the properties needed for the component
+const theme = {
+  requestTabPanel: {
+    responseStatus: '#666'
+  }
+};
+
+// Wrap component with theme provider for styled-components
+const renderWithTheme = (component) => {
+  return render(
+    <ThemeProvider theme={theme}>
+      {component}
+    </ThemeProvider>
+  );
+};
+
+describe('ResponseSize', () => {
+  describe('Invalid or excluded size values', () => {
+    it('should not render when size is undefined', () => {
+      const { container } = renderWithTheme(<ResponseSize size={undefined} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is null', () => {
+      const { container } = renderWithTheme(<ResponseSize size={null} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is NaN', () => {
+      const { container } = renderWithTheme(<ResponseSize size={NaN} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is Infinity', () => {
+      const { container } = renderWithTheme(<ResponseSize size={Infinity} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is -Infinity', () => {
+      const { container } = renderWithTheme(<ResponseSize size={-Infinity} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is a string', () => {
+      const { container } = renderWithTheme(<ResponseSize size="1024" />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should not render when size is an object', () => {
+      const { container } = renderWithTheme(<ResponseSize size={{value: 1024}} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+
+  describe('Valid size values', () => {
+    it('should handle zero bytes', () => {
+      renderWithTheme(<ResponseSize size={0} />);
+      const element = screen.getByText(/0B/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^0B$/);
+      expect(element).toHaveAttribute('title', '0B');
+    });
+
+    it('should render bytes when size is less than 1024', () => {
+      renderWithTheme(<ResponseSize size={500} />);
+      const element = screen.getByText(/500B/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^500B$/);
+      expect(element).toHaveAttribute('title', '500B');
+    });
+
+    it('should handle exactly 1024 bytes as size', () => {
+      renderWithTheme(<ResponseSize size={1024} />);
+      const element = screen.getByText(/1024B/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^1024B$/);
+      expect(element).toHaveAttribute('title', '1,024B');
+    });
+
+    it('should render kilobytes when size is greater than 1024', () => {
+      renderWithTheme(<ResponseSize size={1500} />);
+      const element = screen.getByText(/1\.46KB/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^\d+\.\d+KB$/);
+      expect(element).toHaveAttribute('title', '1,500B');
+    });
+
+    it('should handle large size numbers', () => {
+      renderWithTheme(<ResponseSize size={10240} />);
+      const element = screen.getByText(/10\.0KB/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^\d+\.\d+KB$/);
+      expect(element).toHaveAttribute('title', '10,240B');
+    });
+
+    it('should handle decimal size numbers', () => {
+      renderWithTheme(<ResponseSize size={1126.5} />);
+      const element = screen.getByText(/1\.10KB/);
+      expect(element).toBeInTheDocument();
+      expect(element.textContent).toMatch(/^\d+\.\d+KB$/);
+      expect(element).toHaveAttribute('title', '1,126.5B');
+    });
+  });
+});

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

@@ -6,22 +6,48 @@ import StyledWrapper from './StyledWrapper';
 const ScriptError = ({ item, onClose }) => {
   const preRequestError = item?.preRequestScriptErrorMessage;
   const postResponseError = item?.postResponseScriptErrorMessage;
+  const testScriptError = item?.testScriptErrorMessage;
   
-  if (!preRequestError && !postResponseError) return null;
+  if (!preRequestError && !postResponseError && !testScriptError) return null;
   
-  const errorMessage = preRequestError || postResponseError;
-  const errorTitle = preRequestError ? 'Pre-Request Script Error' : 'Post-Response Script Error';
+  const errors = [];
+  
+  if (preRequestError) {
+    errors.push({
+      title: 'Pre-Request Script Error',
+      message: preRequestError
+    });
+  }
+  
+  if (postResponseError) {
+    errors.push({
+      title: 'Post-Response Script Error', 
+      message: postResponseError
+    });
+  }
+  
+  if (testScriptError) {
+    errors.push({
+      title: 'Test Script Error',
+      message: testScriptError
+    });
+  }
   
   return (
     <StyledWrapper className="mt-4 mb-2">
       <div className="flex items-start gap-3 px-4 py-3">
         <div className="flex-1 min-w-0">
-          <div className="error-title">
-            {errorTitle}
-          </div>
-          <div className="error-message">
-            {errorMessage}
-          </div>
+          {errors.map((error, index) => (
+            <div key={index}>
+              {index > 0 && <div className="border-t border-gray-300 my-3 dark:border-gray-600"></div>}
+              <div className="error-title">
+                {error.title}
+              </div>
+              <div className="error-message">
+                {error.message}
+              </div>
+            </div>
+          ))}
         </div>
         <div 
           className="close-button flex-shrink-0 cursor-pointer"

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

@@ -1,6 +1,18 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  color: ${(props) => props.theme.text};
+
+  .test-summary {
+    transition: background-color 0.2s;
+    border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    color: ${(props) => props.theme.text};
+
+    &:hover {
+      background-color: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+    }
+  }
+
   .test-success {
     color: ${(props) => props.theme.colors.text.green};
   }
@@ -9,12 +21,24 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.colors.text.danger};
   }
 
+  .test-success-count {
+    color: ${(props) => props.theme.colors.text.green};
+  }
+
+  .test-failure-count {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+
   .error-message {
     color: ${(props) => props.theme.colors.text.muted};
   }
 
-  .skipped-request {
-    color: ${(props) => props.theme.colors.text.muted};
+  .test-results-list {
+    transition: all 0.3s ease;
+  }
+
+  .dropdown-icon {
+    color: ${(props) => props.theme.sidebar.dropdownIcon.color};
   }
 `;
 

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

@@ -1,63 +1,151 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import StyledWrapper from './StyledWrapper';
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconCircleCheck,
+  IconCircleX
+} from '@tabler/icons';
 
-const TestResults = ({ results, assertionResults }) => {
+const ResultIcon = ({ status }) => (
+  <span className={`inline-flex items-center ${status === 'pass' ? 'test-success' : 'test-failure'}`}>
+    {status === 'pass' ? (
+      <IconCircleCheck size={14} className="mr-1" aria-label="Test passed" />
+    ) : (
+      <IconCircleX size={14} className="mr-1" aria-label="Test failed" />
+    )}
+  </span>
+);
+
+const ErrorMessage = ({ error }) => error && (
+  <>
+    <br />
+    <span className="error-message pl-8" role="alert">
+      {error}
+    </span>
+  </>
+);
+
+const ResultItem = ({ result, type }) => (
+  <div className="test-result-item">
+    <ResultIcon status={result.status} />
+    <span className={result.status === 'pass' ? 'test-success' : 'test-failure'}>
+      {type === 'assertion'
+        ? `${result.lhsExpr}: ${result.rhsExpr}`
+        : result.description
+      }
+    </span>
+    <ErrorMessage error={result.error} />
+  </div>
+);
+
+const TestSection = ({
+  title,
+  results,
+  isExpanded,
+  onToggle,
+  type = 'test'
+}) => {
+  const passedResults = results.filter((result) => result.status === 'pass');
+  const failedResults = results.filter((result) => result.status === 'fail');
+
+  if (results.length === 0) return null;
+
+  return (
+    <div className='mb-4'>
+      <div
+        className="font-medium test-summary flex items-center cursor-pointer hover:bg-opacity-10 hover:bg-gray-500 rounded py-2"
+        onClick={onToggle}
+      >
+        <span className="dropdown-icon mr-2 flex items-center">
+          {isExpanded ?
+            <IconChevronDown size={18} stroke={1.5} /> :
+            <IconChevronRight size={18} stroke={1.5} />
+          }
+        </span>
+        <span className="flex-grow">
+          {title} ({results.length}), Passed: {passedResults.length}, Failed: {failedResults.length}
+        </span>
+      </div>
+      {isExpanded && (
+        <ul className="ml-5">
+          {results.map((result) => (
+            <li key={result.uid} className="py-1">
+              <ResultItem result={result} type={type} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+const TestResults = ({ results, assertionResults, preRequestTestResults, postResponseTestResults }) => {
   results = results || [];
   assertionResults = assertionResults || [];
-  if (!results.length && !assertionResults.length) {
+  preRequestTestResults = preRequestTestResults || [];
+  postResponseTestResults = postResponseTestResults || [];
+
+  const [expandedSections, setExpandedSections] = useState({
+    preRequest: true,
+    tests: true,
+    postResponse: true,
+    assertions: true
+  });
+
+  useEffect(() => {
+    setExpandedSections({
+      preRequest: preRequestTestResults.length > 0,
+      tests: results.length > 0,
+      postResponse: postResponseTestResults.length > 0,
+      assertions: assertionResults.length > 0
+    });
+  }, [results.length, assertionResults.length, preRequestTestResults.length, postResponseTestResults.length]);
+
+  const toggleSection = (section) => {
+    setExpandedSections({
+      ...expandedSections,
+      [section]: !expandedSections[section]
+    });
+  };
+
+  if (!results.length && !assertionResults.length && !preRequestTestResults.length && !postResponseTestResults.length) {
     return <div className="px-3">No tests found</div>;
   }
 
-  const passedTests = results.filter((result) => result.status === 'pass');
-  const failedTests = results.filter((result) => result.status === 'fail');
-
-  const passedAssertions = assertionResults.filter((result) => result.status === 'pass');
-  const failedAssertions = assertionResults.filter((result) => result.status === 'fail');
-
   return (
-    <StyledWrapper className="flex flex-col">
-      <div className="pb-2 font-medium test-summary">
-        Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
-      </div>
-      <ul className="">
-        {results.map((result) => (
-          <li key={result.uid} className="py-1">
-            {result.status === 'pass' ? (
-              <span className="test-success">&#x2714;&nbsp; {result.description}</span>
-            ) : (
-              <>
-                <span className="test-failure">&#x2718;&nbsp; {result.description}</span>
-                <br />
-                <span className="error-message pl-8">{result.error}</span>
-              </>
-            )}
-          </li>
-        ))}
-      </ul>
+    <StyledWrapper className="flex flex-col px-3">
+      <TestSection
+        title="Pre-Request Tests"
+        results={preRequestTestResults}
+        isExpanded={expandedSections.preRequest}
+        onToggle={() => toggleSection('preRequest')}
+        type="test"
+      />
 
-      <div className="py-2 font-medium test-summary">
-        Assertions ({assertionResults.length}/{assertionResults.length}), Passed: {passedAssertions.length}, Failed:{' '}
-        {failedAssertions.length}
-      </div>
-      <ul className="">
-        {assertionResults.map((result) => (
-          <li key={result.uid} className="py-1">
-            {result.status === 'pass' ? (
-              <span className="test-success">
-                &#x2714;&nbsp; {result.lhsExpr}: {result.rhsExpr}
-              </span>
-            ) : (
-              <>
-                <span className="test-failure">
-                  &#x2718;&nbsp; {result.lhsExpr}: {result.rhsExpr}
-                </span>
-                <br />
-                <span className="error-message pl-8">{result.error}</span>
-              </>
-            )}
-          </li>
-        ))}
-      </ul>
+      <TestSection
+        title="Post-Response Tests"
+        results={postResponseTestResults}
+        isExpanded={expandedSections.postResponse}
+        onToggle={() => toggleSection('postResponse')}
+        type="test"
+      />
+
+      <TestSection
+        title="Tests"
+        results={results}
+        isExpanded={expandedSections.tests}
+        onToggle={() => toggleSection('tests')}
+        type="test"
+      />
+
+      <TestSection
+        title="Assertions"
+        results={assertionResults}
+        isExpanded={expandedSections.assertions}
+        onToggle={() => toggleSection('assertions')}
+        type="assertion"
+      />
     </StyledWrapper>
   );
 };

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

@@ -1,9 +1,13 @@
 import React from 'react';
+import { IconCircleCheck, IconCircleX } from '@tabler/icons';
 
-const TestResultsLabel = ({ results, assertionResults }) => {
+const TestResultsLabel = ({ results, assertionResults, preRequestTestResults, postResponseTestResults }) => {
   results = results || [];
   assertionResults = assertionResults || [];
-  if (!results.length && !assertionResults.length) {
+  preRequestTestResults = preRequestTestResults || [];
+  postResponseTestResults = postResponseTestResults || [];
+
+  if (!results.length && !assertionResults.length && !preRequestTestResults.length && !postResponseTestResults.length) {
     return 'Tests';
   }
 
@@ -13,8 +17,14 @@ const TestResultsLabel = ({ results, assertionResults }) => {
   const numberOfAssertions = assertionResults.length;
   const numberOfFailedAssertions = assertionResults.filter((result) => result.status === 'fail').length;
 
-  const totalNumberOfTests = numberOfTests + numberOfAssertions;
-  const totalNumberOfFailedTests = numberOfFailedTests + numberOfFailedAssertions;
+  const numberOfPreRequestTests = preRequestTestResults.length;
+  const numberOfFailedPreRequestTests = preRequestTestResults.filter((result) => result.status === 'fail').length;
+
+  const numberOfPostResponseTests = postResponseTestResults.length;
+  const numberOfFailedPostResponseTests = postResponseTestResults.filter((result) => result.status === 'fail').length;
+
+  const totalNumberOfTests = numberOfTests + numberOfAssertions + numberOfPreRequestTests + numberOfPostResponseTests;
+  const totalNumberOfFailedTests = numberOfFailedTests + numberOfFailedAssertions + numberOfFailedPreRequestTests + numberOfFailedPostResponseTests;
 
   return (
     <div className="flex items-center">

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js

@@ -1,7 +1,7 @@
 import QueryResult from "components/ResponsePane/QueryResult/index";
 import { useState } from "react";
 
-const BodyBlock = ({ collection, data, dataBuffer, headers, error, item, width }) => {
+const BodyBlock = ({ collection, data, dataBuffer, headers, error, item }) => {
   const [isBodyCollapsed, toggleBody] = useState(true);
   return (
     <div className="collapsible-section">
@@ -17,7 +17,6 @@ const BodyBlock = ({ collection, data, dataBuffer, headers, error, item, width }
             <QueryResult
               item={item}
               collection={collection}
-              width={width}
               data={data}
               dataBuffer={dataBuffer}
               headers={headers}

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

@@ -16,7 +16,7 @@ const safeStringifyJSONIfNotString = (obj) => {
 };
 
 
-const Request = ({ collection, request, item, width }) => {
+const Request = ({ collection, request, item }) => {
   let { url, headers, data, dataBuffer, error } = request || {};  
   if (!dataBuffer) {
     dataBuffer = Buffer.from(safeStringifyJSONIfNotString(data))?.toString('base64');
@@ -33,7 +33,7 @@ const Request = ({ collection, request, item, width }) => {
       <Headers headers={headers} type={'request'} />
 
       {/* Body */}
-      <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} width={width} />
+      <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} />
   </div>
   )
 }

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

@@ -16,7 +16,7 @@ const safeStringifyJSONIfNotString = (obj) => {
   }
 };
 
-const Response = ({ collection, response, item, width }) => {
+const Response = ({ collection, response, item }) => {
   let { status, statusCode, statusText, dataBuffer, headers, data, error } = response || {};
   if (!dataBuffer) {
     dataBuffer = Buffer.from(safeStringifyJSONIfNotString(data))?.toString('base64');
@@ -35,7 +35,7 @@ const Response = ({ collection, response, item, width }) => {
     <Headers headers={headers} type={'response'} />
 
     {/* Body */}
-    <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} width={width} />
+    <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} />
   </div>
   )
 }

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

@@ -6,7 +6,7 @@ import Method from "./Common/Method/index";
 import Status from "./Common/Status/index";
 import { RelativeTime } from "./Common/Time/index";
 
-const TimelineItem = ({ timestamp, request, response, item, collection, width, isOauth2 }) => {
+const TimelineItem = ({ timestamp, request, response, item, collection, isOauth2 }) => {
   const [isCollapsed, _toggleCollapse] = useState(false);
   const [activeTab, setActiveTab] = useState('request');
   const toggleCollapse = () => _toggleCollapse(prev => !prev);
@@ -57,15 +57,15 @@ const TimelineItem = ({ timestamp, request, response, item, collection, width, i
         </div>
 
         {/* Tab Content */}
-        <div className="tab-content">
+        <div className="tab-content break-all">
           {/* Request Tab */}
           {activeTab === 'request' && (
-            <Request request={request} item={item} collection={collection} width={width} />
+            <Request request={request} item={item} collection={collection} />
           )}
 
           {/* Response Tab */}
           {activeTab === 'response' && (
-            <Response response={response} item={item} collection={collection} width={width} />
+            <Response response={response} item={item} collection={collection} />
           )}
 
           {/* Network Logs Tab */}

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

@@ -41,7 +41,7 @@ const getEffectiveAuthSource = (collection, item) => {
   return effectiveSource;
 };
 
-const Timeline = ({ collection, item, width }) => {
+const Timeline = ({ collection, item }) => {
   // Get the effective auth source if auth mode is inherit
   const authSource = getEffectiveAuthSource(collection, item);
 
@@ -62,7 +62,6 @@ const Timeline = ({ collection, item, width }) => {
   return (
     <StyledWrapper
       className="pb-4 w-full flex flex-grow flex-col"
-      style={{ maxWidth: width - 60, overflowWrap: 'break-word' }}
     >
       {combinedTimeline.map((event, index) => {
         if (event.type === 'request') {
@@ -76,7 +75,6 @@ const Timeline = ({ collection, item, width }) => {
                 response={response}
                 item={item}
                 collection={collection}
-                width={width}
               />
             </div>
           );
@@ -101,7 +99,6 @@ const Timeline = ({ collection, item, width }) => {
                           response={data?.response}
                           item={item}
                           collection={collection}
-                          width={width - 50}
                           isOauth2={true}
                         />
                       </div>