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

@@ -31,6 +31,9 @@ jobs:
           npm run build --workspace=packages/bruno-converters
           npm run build --workspace=packages/bruno-requests
 
+      - name: Lint Check
+        run: npm run lint
+
       # tests
       - name: Test Package bruno-js
         run: npm run test --workspace=packages/bruno-js
@@ -88,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

.gitignore

@@ -46,4 +46,8 @@ yarn-error.log*
 
 #dev editor
 bruno.iml
-.idea
+.idea
+.vscode
+
+# Playwright
+/blob-report/

contributing.md

@@ -15,15 +15,15 @@
 | [正體中文](docs/contributing/contributing_zhtw.md)
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
-| [Nederlands](docs/contributing/contributing_nl.md)
+| [Dutch](docs/contributing/contributing_nl.md)
 
 ## Let's make Bruno better, together!!
 
-We are happy that you are looking to improve Bruno. Below are the guidelines to get started bringing up Bruno on your computer.
+We are happy that you are looking to improve Bruno. Below are the guidelines to run Bruno on your computer.
 
 ### Technology Stack
 
-Bruno is built using Next.js and React. We also use electron to ship a desktop version (that supports local collections)
+Bruno is built using React and Electron.
 
 Libraries we use
 
@@ -42,30 +42,49 @@ Libraries we use
 
 ## Development
 
-Bruno is being developed as a desktop app. You need to load the app by running the Next.js app in one terminal and then run the electron app in another terminal.
+Bruno is a desktop app. Below are the instructions to run Bruno.
 
+> Note: We use React for the frontend and rsbuild for build and dev server.
 
 ## Install Dependencies
 
 ```bash
-# use nodejs 20 version
+# use nodejs 22 version
 nvm use
 
 # install deps
 npm i --legacy-peer-deps
 ```
 
-### Local Development (Option 1)
+### Local Development
 
-```bash 
+#### Build packages
+
+##### Option 1
+
+```bash
 # build packages
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
+npm run build:bruno-converters
+npm run build:bruno-requests
 
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js
+```
+##### Option 2
 
+```bash
+# install dependencies and setup
+npm run setup
+```
+
+#### Run the app
+
+##### Option 1
+
+```bash
 # run react app (terminal 1)
 npm run dev:web
 
@@ -73,16 +92,21 @@ npm run dev:web
 npm run dev:electron
 ```
 
-### Local Development (Option 2)
-
+##### Option 2
 ```bash
-# install dependencies and setup 
-npm run setup 
-
 # run electron and react app concurrently
 npm run dev
 ```
 
+#### Customize Electron `userData` path
+If `ELECTRON_USER_DATA_PATH` env-variable is present and its development mode, then `userData` path is modified accordingly.
+
+e.g.
+```sh
+ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
+```
+This will create a `bruno-test` folder on your Desktop and use it as the `userData` path.
+
 ### Troubleshooting
 
 You might encounter a `Unsupported platform` error when you run `npm install`. To fix this, you will need to delete `node_modules` and `package-lock.json` and run `npm install`. This should install all the necessary packages needed to run the app.
@@ -101,7 +125,28 @@ find . -type f -name "package-lock.json" -delete
 
 ```bash
 # run bruno-schema tests
-npm test --workspace=packages/bruno-schema
+npm run test --workspace=packages/bruno-schema
+
+# run bruno-query tests
+npm run test --workspace=packages/bruno-query
+
+# run bruno-common tests
+npm run test --workspace=packages/bruno-common
+
+# run bruno-converters tests
+npm run test --workspace=packages/bruno-converters
+
+# run bruno-app tests
+npm run test --workspace=packages/bruno-app
+
+# run bruno-electron tests
+npm run test --workspace=packages/bruno-electron
+
+# run bruno-lang tests
+npm run test --workspace=packages/bruno-lang
+
+# run bruno-toml tests
+npm run test --workspace=packages/bruno-toml
 
 # run tests over all workspaces
 npm test --workspaces --if-present

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/contributing/contributing_hi.md

@@ -40,6 +40,8 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
+npm run build:bruno-converters
+npm run build:bruno-requests
 
 # Next.js ऐप चलाएँ (टर्मिनल 1 पर)
 npm run dev:web

docs/contributing/contributing_ja.md

@@ -40,6 +40,8 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
+npm run build:bruno-converters
+npm run build:bruno-requests
 
 # run next app (terminal 1)
 npm run dev:web

docs/contributing/contributing_kr.md

@@ -40,6 +40,8 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
+npm run build:bruno-converters
+npm run build:bruno-requests
 
 # next 앱 실행 (1번 터미널)
 npm run dev:web

docs/contributing/contributing_nl.md

@@ -40,6 +40,8 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
+npm run build:bruno-converters
+npm run build:bruno-requests
 
 # draai next app (terminal 1)
 npm run dev:web

docs/contributing/contributing_sk.md

@@ -42,6 +42,8 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
+npm run build:bruno-converters
+npm run build:bruno-requests
 
 # spustite ďalšiu aplikáciu (terminál 1)
 npm run dev:web

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

eslint.config.js

@@ -0,0 +1,54 @@
+// eslint.config.js
+const { defineConfig } = require("eslint/config");
+const globals = require("globals");
+
+module.exports = defineConfig([
+  {
+    files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
+    ignores: ["**/*.config.js"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.jest,
+        global: false,
+        require: false,
+        Buffer: false,
+        process: false
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    rules: {
+      "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"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  }
+]);

package.json

@@ -20,14 +20,17 @@
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
-    "@playwright/test": "^1.27.1",
+    "@playwright/test": "^1.51.1",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.14.1",
     "concurrently": "^8.2.2",
+    "eslint": "^9.26.0",
     "fs-extra": "^11.1.1",
-    "husky": "^8.0.3",
+    "globals": "^16.1.0",
     "jest": "^29.2.0",
     "lodash-es": "^4.17.21",
+    "playwright": "^1.51.1",
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
     "rimraf": "^6.0.1",
@@ -35,7 +38,9 @@
   },
   "scripts": {
     "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",
@@ -53,11 +58,11 @@
     "build:electron:deb": "./scripts/build-electron.sh deb",
     "build:electron:rpm": "./scripts/build-electron.sh rpm",
     "build:electron:snap": "./scripts/build-electron.sh snap",
-    "test:codegen": "npm run dev:web & node ./scripts/playwright-codegen.js",
-    "test:e2e": "npx playwright test",
-    "test:report": "npx playwright show-report",
+    "watch:common": "npm run watch --workspace=packages/bruno-common",
+    "test:codegen": "node playwright/codegen.ts",
+    "test:e2e": "playwright test",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "prepare": "husky install"
+    "lint": "node --max_old_space_size=4096 $(npx which eslint)"
   },
   "overrides": {
     "rollup": "3.29.5",
@@ -67,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

@@ -19,7 +19,12 @@ export default defineConfig({
     })
   ],
   source: {
-    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file
+    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file,
+    exclude: [
+      '**/test-utils/**',
+      '**/*.test.*',
+      '**/*.spec.*'
+    ]
   },
   html: {
     title: 'Bruno'
@@ -34,6 +39,16 @@ export default defineConfig({
           },
         },
       },
+      ignoreWarnings: [
+        (warning) =>  warning.message.includes('Critical dependency: the request of a dependency is an expression') && warning?.moduleDescriptor?.name?.includes('flow-parser')
+      ],
+      // Add externals configuration to exclude Node.js libraries
+      externals: {
+        // List specific Node.js modules you want to exclude
+        // Format: 'module-name': 'commonjs module-name'
+        'worker_threads': 'commonjs worker_threads',
+        // 'path': 'commonjs path'
+      }
     },
   }
 });

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/Overview/Info/index.js

@@ -72,7 +72,7 @@ const Info = ({ collection }) => {
               </div>
             </div>
           </div>
-          {showShareCollectionModal && <ShareCollection collection={collection} onClose={handleToggleShowShareCollectionModal(false)} />}
+          {showShareCollectionModal && <ShareCollection collectionUid={collection.uid} onClose={handleToggleShowShareCollectionModal(false)} />}
         </div>
       </div>
     </div>

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/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
@@ -13,11 +13,18 @@ import { variableNameRegex } from 'utils/common/regex';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';
+import { getGlobalEnvironmentVariables } from 'utils/collections';
 
 const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const addButtonRef = useRef(null);
+  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
+
+  let _collection = cloneDeep(collection);
+  
+  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
+  _collection.globalEnvironmentVariables = globalEnvironmentVariables;
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -160,7 +167,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                   <div className="overflow-hidden grow w-full relative">
                     <SingleLineEditor
                       theme={storedTheme}
-                      collection={collection}
+                      collection={_collection}
                       name={`${index}.value`}
                       value={variable.value}
                       isSecret={variable.secret}

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/FolderSettings/index.js

@@ -28,7 +28,7 @@ const FolderSettings = ({ collection, folder }) => {
     tab = folderLevelSettingsSelectedTab[folder?.uid];
   }
 
-  const folderRoot = collection?.items.find((item) => item.uid === folder?.uid)?.root;
+  const folderRoot = folder?.root;
   const hasScripts = folderRoot?.request?.script?.res || folderRoot?.request?.script?.req;
   const hasTests = folderRoot?.request?.tests;
 

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/OAuth2/Oauth2TokenViewer/index.js

@@ -1,6 +1,6 @@
+import { useState, useEffect, useMemo } from "react";
 import { find } from "lodash";
 import StyledWrapper from "./StyledWrapper";
-import { useState, useEffect } from "react";
 import { IconChevronDown, IconChevronRight, IconCopy, IconCheck } from '@tabler/icons';
 import { getAllVariables } from 'utils/collections/index';
 import { interpolate } from '@usebruno/common';

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/QueryUrl/index.js

@@ -140,7 +140,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
         </div>
       </div>
       {generateCodeItemModalOpen && (
-        <GenerateCodeItem collection={collection} item={item} onClose={() => setGenerateCodeItemModalOpen(false)} />
+        <GenerateCodeItem collectionUid={collection.uid} item={item} onClose={() => setGenerateCodeItemModalOpen(false)} />
       )}
     </StyledWrapper>
   );

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/FolderNotFound/index.js

@@ -0,0 +1,42 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { useDispatch } from 'react-redux';
+
+const FolderNotFound = ({ folderUid }) => {
+  const dispatch = useDispatch();
+  const [showErrorMessage, setShowErrorMessage] = useState(false);
+
+  const closeTab = useCallback(() => {
+    dispatch(
+      closeTabs({
+        tabUids: [folderUid]
+      })
+    );
+  }, [dispatch, folderUid]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowErrorMessage(true);
+    }, 300);
+  }, []);
+
+  if (!showErrorMessage) {
+    return null;
+  }
+
+  return (
+    <div className="mt-6 px-6">
+      <div className="p-4 bg-orange-100 border-l-4 border-yellow-500 text-yellow-700">
+        <div>Folder no longer exists.</div>
+        <div className="mt-2">
+          This can happen when the folder was renamed or deleted on your filesystem.
+        </div>
+      </div>
+      <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
+        Close Tab
+      </button>
+    </div>
+  );
+};
+
+export default FolderNotFound; 

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

@@ -25,11 +25,12 @@ import { produce } from 'immer';
 import CollectionOverview from 'components/CollectionSettings/Overview';
 import RequestNotLoaded from './RequestNotLoaded';
 import RequestIsLoading from './RequestIsLoading';
-import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+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 />;
@@ -165,11 +199,7 @@ const RequestTabPanel = () => {
   if (focusedTab.type === 'folder-settings') {
     const folder = findItemInCollection(collection, focusedTab.folderUid);
     if (!folder) {
-      dispatch(
-        closeTabs({
-          tabUids: [activeTabUid]
-        })
-      );
+      return <FolderNotFound folderUid={focusedTab.folderUid} />;
     }
     
     return <FolderSettings collection={collection} folder={folder} />;
@@ -201,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`
             }}
           >
@@ -217,7 +251,6 @@ const RequestTabPanel = () => {
               <GraphQLRequestPane
                 item={item}
                 collection={collection}
-                leftPaneWidth={leftPaneWidth}
                 onSchemaLoad={onSchemaLoad}
                 toggleDocs={toggleDocs}
                 handleGqlClickReference={handleGqlClickReference}
@@ -225,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/RequestTabs/RequestTab/index.js

@@ -76,7 +76,9 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
         className={`flex items-center justify-between tab-container px-1 ${tab.preview ? "italic" : ""}`}
         onMouseUp={handleMouseUp} // Add middle-click behavior here
       >
-        {tab.type === 'folder-settings' ? (
+        {tab.type === 'folder-settings' && !folder ? (
+          <RequestTabNotFound handleCloseClick={handleCloseClick} />
+        ) : tab.type === 'folder-settings' ? (
           <SpecialTab handleCloseClick={handleCloseClick} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} tabName={folder?.name} />
         ) : (
           <SpecialTab handleCloseClick={handleCloseClick} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} />
@@ -261,13 +263,13 @@ function RequestTabMenu({ onDropdownCreate, collectionRequestTabs, tabIndex, col
   return (
     <Fragment>
       {showAddNewRequestModal && (
-        <NewRequest collection={collection} onClose={() => setShowAddNewRequestModal(false)} />
+        <NewRequest collectionUid={collection.uid} onClose={() => setShowAddNewRequestModal(false)} />
       )}
 
       {showCloneRequestModal && (
         <CloneCollectionItem
           item={currentTabItem}
-          collection={collection}
+          collectionUid={collection.uid}
           onClose={() => setShowCloneRequestModal(false)}
         />
       )}

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

@@ -79,7 +79,7 @@ const RequestTabs = () => {
   return (
     <StyledWrapper className={getRootClassname()}>
       {newRequestModalOpen && (
-        <NewRequest collection={activeCollection} onClose={() => setNewRequestModalOpen(false)} />
+        <NewRequest collectionUid={activeCollection?.uid} onClose={() => setNewRequestModalOpen(false)} />
       )}
       {collectionRequestTabs && collectionRequestTabs.length ? (
         <>

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;