fix: update request cancel icon

* feat: add stop request button in api url bar

* docs: add farsi translation

* fix: handle escaped forward slashes by fast-json-format library upgrade

* refactor: change ui to use one from Websockets

* chore: cleanup

* fix: lint issues

* Replace IconPlayerStop with IconSquareRoundedX

* update json request and response formatting logic

* chore: format changes

* chore: remove un-needed diffs

* chore: sanitize

* bugfix(#5939): curl import fails for custom content-types

* chore: remove un-needed diffs

* chore: enhance response handling for streaming

* fix: disable requestid check for tests and assertions to be updated after streaming result

* chore: housekeeping

* fix: streamline loading and cancel request icon logic

* chore: formatting

* fix: multiple co-pilot changes

* fix: handle in folders

* feat: add WaitGroup utility for managing concurrent tasks

* refactor: remove WaitGroup utility and clean up network IPC logic

* refactor: remove unused setTimeout import and clean up post script execution

* refactor: clean up post-response script execution logic

* undiff

* re-align

* refactor: streamline post-response script execution

- Cleaned up formatting and improved readability of the post-response script execution logic.
- Consolidated parameters in function calls for consistency.

* fix: keep original dataBuffer for saving response

---------

Co-authored-by: adarshajit <adarshajit@gmail.com>
Co-authored-by: sajadoncode <sajadoncode@gmail.com>
Co-authored-by: lohit-bruno <lohit@usebruno.com>
Co-authored-by: Bijin A B <bijin@usebruno.com>
Co-authored-by: Pragadesh-45 <temporaryg7904@gmail.com>
Co-authored-by: Anoop M D <anoop@usebruno.com>
Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
Co-authored-by: Dawid Góra <dawidgora@icloud.com>

.github/workflows/npm-bru-cli.yml

@@ -25,7 +25,7 @@ jobs:
         os: [ubuntu-latest, macos-latest]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'

.github/workflows/ssl-tests.yml

@@ -15,7 +15,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Setup Node Dependencies
         uses: ./.github/actions/common/setup-node-deps
@@ -44,7 +44,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Setup Node Dependencies
         uses: ./.github/actions/common/setup-node-deps
@@ -73,7 +73,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       
       - name: Setup Node Dependencies
         uses: ./.github/actions/common/setup-node-deps

.github/workflows/tests.yml

@@ -13,7 +13,7 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
@@ -66,7 +66,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
@@ -108,7 +108,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-24.04
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: actions/setup-node@v5
       with:
         node-version: v22.11.x

contributing.md

@@ -16,6 +16,7 @@
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
 | [Dutch](docs/contributing/contributing_nl.md)
+| [فارسی](docs/contributing/contributing_fa.md)
 
 ## Let's make Bruno better, together!!
 
@@ -74,6 +75,7 @@ npm run build:bruno-filestore
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js
 ```
+
 ##### Option 2
 
 ```bash
@@ -94,18 +96,22 @@ npm run dev:electron
 ```
 
 ##### Option 2
+
 ```bash
 # 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

docs/contributing/contributing_fa.md

@@ -0,0 +1,92 @@
+[English](../../contributing.md)
+
+## با هم، Bruno را بهتر می‌کنیم!
+
+خوشحالم که قصد دارید Bruno را بهبود ببخشید. در ادامه قوانین و راهنماها برای راه‌اندازی Bruno روی سیستم شما آورده شده است.
+
+### فناوری‌های استفاده‌شده
+
+به فارسی برونو Bruno با استفاده از Next.js و React ساخته شده است. همچنین از Electron برای بسته‌بندی نسخه دسکتاپ (که امکان مجموعه‌های محلی را فراهم می‌کند) استفاده می‌کنیم.
+
+کتابخانه‌هایی که استفاده می‌کنیم:
+
+- CSS - Tailwind استایل
+- Codemirror - ویرایشگر کد
+- Redux - مدیریت وضعیت
+- Tabler Icons - آیکون‌ها
+- formik - فرم‌ها
+- Yup اعتبارسنجی اسکیمـا
+- axios - کلاینت درخواست
+- chokidar - پایش‌گر سیستم فایل
+
+### پیش‌نیازها
+
+شما به [نود v20.x یا اخرین نسخه پایدار](https://nodejs.org/en/) و npm 8.x نیاز دارید. در این پروژه از فضای کاری npm (npm workspaces) استفاده می‌کنیم.
+
+### شروع به کدنویسی
+
+برای راه‌اندازی محیط توسعه محلی به فایل [مستندات توسعه](docs/development_fa.md) مراجعه کنید:
+
+### ارسال Pull Request
+
+1 - لطفاً Pull Requestها (PR) را کوتاه و متمرکز نگه دارید و تنها یک هدف مشخص را دنبال کنند. </br>
+2 - لطفاً از فرمت نام‌گذاری شاخه‌ها استفاده کنید:
+
+- feature/[name]: این شاخه باید شامل یک قابلیت مشخص باشد.
+  - feature/dark-mode : مثال
+- bugfix/[name]: این شاخه باید تنها شامل رفع یک باگ مشخص باشد.
+  - bugfix/bug-1 : مثال
+
+## توسعه
+
+به فارسی برونو یا Bruno به‌صورت یک اپلیکیشن «سنگین» توسعه داده می‌شود. برای اجرا باید ابتدا Next.js را در یک پنجره ترمینال اجرا کنید و سپس اپلیکیشن Electron را در پنجره ترمینال دیگری راه‌اندازی نمایید.
+
+### نیازمندی توسعه
+
+- NodeJS v18
+
+### اجرای محلی
+
+```bash
+# از ورژن NodeJS 18 استفاده کنید
+nvm use
+
+# نصب وابستگی‌ها
+npm i --legacy-peer-deps
+
+# ساخت مستندات GraphQL
+npm run build:graphql-docs
+
+# ساخت bruno-query
+npm run build:bruno-query
+
+# اجرای اپ Next (ترمینال 1)
+npm run dev:web
+
+# اجرای اپ Electron (ترمینال 2)
+npm run dev:electron
+```
+
+### عیب‌یابی
+
+ممکن است هنگام اجرای `npm install` خطای `Unsupported platform` ببینید. برای رفع این مشکل، پوشه `node_modules` و فایل `package-lock.json` را حذف کرده و سپس دوباره `npm install` را اجرا کنید. این کار معمولاً همه پکیج‌های لازم را نصب می‌کند.
+
+```shell
+# حذف پوشه node_modules در زیردایرکتوری‌ها
+find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
+  rm -rf "$dir"
+done
+
+# حذف فایل package-lock.json در زیردایرکتوری‌ها
+find . -type f -name "package-lock.json" -delete
+```
+
+### تست‌ها
+
+```bash
+# اجرای تست‌های schema مربوط به bruno
+npm test --workspace=packages/bruno-schema
+
+# اجرای تست‌ها در همه فضاهای کاری (در صورت وجود)
+npm test --workspaces --if-present
+```

docs/publishing/publishing_fa.md

@@ -0,0 +1,8 @@
+[English](../../publishing.md)
+
+### انتشار Bruno در یک پکیج منیجر جدید
+
+اگرچه کد ما متن‌باز است و همه می‌توانند از آن استفاده کنند، لطفاً قبل از انتشار Bruno در مدیر بسته‌های جدید با ما تماس بگیرید. به عنوان سازنده Bruno، علامت تجاری `Bruno` را برای این پروژه دارم و مایلم توزیع آن را مدیریت کنم. اگر دوست دارید Bruno را در یک مدیر بسته جدید ببینید، لطفاً یک issue در گیت‌هاب ثبت کنید.
+
+اگرچه بیشتر قابلیت‌های ما رایگان و متن‌باز هستند (شامل REST و GraphQL Apis)،
+ما تلاش می‌کنیم بین اصول متن‌باز و توسعه پایدار تعادل مناسبی برقرار کنیم - https://github.com/usebruno/bruno/discussions/269

docs/readme/readme_ar.md

@@ -41,13 +41,6 @@
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### الطبعة الذهبية ✨
-
-غالبية ميزاتنا مجانية ومفتوحة المصدر.
-نحن نسعى لتحقيق توازن متناغم بين [مبادئ الشفافية والاستدامة](https://github.com/usebruno/bruno/discussions/269)
-
-طلبات الشراء لـ [الطبعة الذهبية](https://www.usebruno.com/pricing) ستطلق قريبًا بسعر ~~$19~~ **$9** ! <br/>
-[اشترك هنا](https://usebruno.ck.page/4c65576bd4) لتصلك إشعارات عند الإطلاق.
 
 ### التثبيت
 

docs/readme/readme_cn.md

@@ -37,13 +37,37 @@ Bruno 直接在您的电脑文件夹中存储您的 API 信息。我们使用纯
 
 Bruno 仅限离线使用。我们计划永不向 Bruno 添加云同步功能。我们重视您的数据隐私，并认为它应该留在您的设备上。阅读我们的长期愿景 [点击查看](https://github.com/usebruno/bruno/discussions/269)
 
+[下载 Bruno](https://www.usebruno.com/downloads)
+
 📢 观看我们在印度 FOSS 3.0 会议上的最新演讲 [点击查看](https://www.youtube.com/watch?v=7bSMFpbcPiY)
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
-### 安装
+## 商业版本 ✨
 
-Bruno 可以在我们的 [网站上下载](https://www.usebruno.com/downloads) Mac、Windows 和 Linux 的可执行文件。
+我们的大多数功能都是免费且开源的。
+我们致力于在 [开源与可持续性发展](https://github.com/usebruno/bruno/discussions/269) 之间取得和谐的平衡
+
+欢迎使用我们的 [付费版本](https://www.usebruno.com/pricing) ，看看附加的功能是否对您或团队有所帮助！ <br/>
+
+## 目录
+- [安装](#安装)
+- [特性](#特性)
+    - [跨平台使用 🖥️](#跨平台使用-)
+    - [通过Git协作 👩‍💻🧑‍💻](#通过git协作-)
+- [重要链接 📌](#重要链接-)
+- [展示 🎥](#展示-)
+- [分享评价 📣](#分享评价-)
+- [发布到新的包管理器](#发布到新的包管理器)
+- [联系方式 🌐](#联系方式-)
+- [商标](#商标)
+- [贡献 👩‍💻🧑‍💻](#贡献-)
+- [作者](#作者)
+- [许可证 📄](#许可证-)
+
+## 安装
+
+Bruno 可以在我们的 [网站上下载](https://www.usebruno.com/downloads) 适用于Mac、Windows 和 Linux 的可执行文件。
 
 您也可以通过包管理器如 Homebrew、Chocolatey、Scoop、Snap 和 Apt 安装 Bruno。
 
@@ -58,9 +82,15 @@ choco install bruno
 scoop bucket add extras
 scoop install bruno
 
+# 在 Windows 上用 winget 安装
+winget install Bruno.Bruno
+
 # 在 Linux 上用 Snap 安装
 snap install bruno
 
+# 在 Linux 上用 Flatpak 安装
+flatpak install com.usebruno.Bruno
+
 # 在 Linux 上用 Apt 安装
 sudo mkdir -p /etc/apt/keyrings
 sudo apt update && sudo apt install gpg curl
@@ -73,67 +103,50 @@ echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebr
 sudo apt update && sudo apt install bruno
 ```
 
-### 在 Mac 上通过 Homebrew 安装 🖥️
+## 特性
+
+### 跨平台使用 🖥️
 
 ![bruno](../../assets/images/run-anywhere.png) <br /><br />
 
-### Collaborate 安装 👩‍💻🧑‍💻
+### 通过Git协作 👩‍💻🧑‍💻
 
 或者任何您选择的版本控制系统
 
 ![bruno](../../assets/images/version-control.png) <br /><br />
 
-### 重要链接 📌
+## 重要链接 📌
 
 - [我们的愿景](https://github.com/usebruno/bruno/discussions/269)
-- [路线图](https://github.com/usebruno/bruno/discussions/384)
+- [路线图](https://www.usebruno.com/roadmap)
 - [文档](https://docs.usebruno.com)
 - [Stack Overflow](https://stackoverflow.com/questions/tagged/bruno)
 - [网站](https://www.usebruno.com)
 - [价格](https://www.usebruno.com/pricing)
 - [下载](https://www.usebruno.com/downloads)
-- [GitHub 赞助](https://github.com/sponsors/helloanoop).
 
-### 展示 🎥
+## 展示 🎥
 
 - [Testimonials](https://github.com/usebruno/bruno/discussions/343)
 - [Knowledge Hub](https://github.com/usebruno/bruno/discussions/386)
 - [Scriptmania](https://github.com/usebruno/bruno/discussions/385)
 
-### 支持 ❤️
-
-如果您喜欢 Bruno 并想支持我们的开源工作，请考虑通过 [GitHub Sponsors](https://github.com/sponsors/helloanoop) 来赞助我们。
-
-### 分享评价 📣
+## 分享评价 📣
 
 如果 Bruno 在您的工作和团队中帮助了您，请不要忘记在我们的 GitHub 讨论上分享您的 [评价](https://github.com/usebruno/bruno/discussions/343)
 
-### 发布到新的包管理器
+## 发布到新的包管理器
 
-有关更多信息，请参见 [此处](../publishing/publishing_cn.md) 。
+如需了解更多信息，请参见 [此处](../publishing/publishing_cn.md) 。
 
-### 贡献 👩‍💻🧑‍💻
-
-我很高兴您希望改进 bruno。请查看 [贡献指南](../contributing/contributing_cn.md)。
-
-即使您无法通过代码做出贡献，我们仍然欢迎您提出 BUG 和新的功能需求。
-
-### 作者
-
-<div align="center">
-    <a href="https://github.com/usebruno/bruno/graphs/contributors">
-        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
-    </a>
-</div>
-
-### 联系方式 🌐
+## 联系方式 🌐
 
 [𝕏 (Twitter)](https://twitter.com/use_bruno) <br />
 [Website](https://www.usebruno.com) <br />
 [Discord](https://discord.com/invite/KgcZUncpjq) <br />
 [LinkedIn](https://www.linkedin.com/company/usebruno)
 
-### 商标
+## 商标
 
 **名称**
 
@@ -143,6 +156,20 @@ sudo apt update && sudo apt install bruno
 
 Logo 源自 [OpenMoji](https://openmoji.org/library/emoji-1F436/). License: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
 
-### 许可证 📄
+## 贡献 👩‍💻🧑‍💻
+
+很高兴您希望改进 bruno。请查看 [贡献指南](../contributing/contributing_cn.md)。
+
+即使您无法通过代码做出贡献，我们仍然欢迎您提出 BUG 和新的功能需求。
+
+## 作者
+
+<div align="center">
+    <a href="https://github.com/usebruno/bruno/graphs/contributors">
+        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
+    </a>
+</div>
+
+## 许可证 📄
 
 [MIT](../../license.md)

docs/readme/readme_de.md

@@ -43,13 +43,6 @@ Bruno ist ein reines Offline-Tool. Es gibt keine Pläne, Bruno um eine Cloud-Syn
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### Golden Edition ✨
-
-Die meisten unserer Funktionen sind kostenlos und quelloffen.
-Wir bemühen uns um ein Gleichgewicht zwischen [Open-Source-Prinzipien und Nachhaltigkeit](https://github.com/usebruno/bruno/discussions/269)
-
-Du kannst die [Golden Edition](https://www.usebruno.com/pricing) bestellen **$19**! <br/>
-
 ### Installation
 
 Bruno ist als Download [auf unserer Website](https://www.usebruno.com/downloads) für Mac, Windows und Linux verfügbar.

docs/readme/readme_es.md

@@ -43,13 +43,6 @@ Bruno funciona sin conexión a internet. No tenemos intenciones de añadir sincr
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### Golden Edition ✨
-
-La mayoría de nuestras funcionalidades son gratis y de código abierto.
-Queremos alcanzar un equilibrio en armonía entre los [principios open-source y la sostenibilidad](https://github.com/usebruno/bruno/discussions/269).
-
-¡Puedes reservar la [Golden Edition](https://www.usebruno.com/pricing) por ~~$19~~ **$9**! <br/>
-
 ### Instalación
 
 Bruno está disponible para su descarga [en nuestro sitio web](https://www.usebruno.com/downloads) para Mac, Windows y Linux.

docs/readme/readme_fa.md

@@ -0,0 +1,143 @@
+<br />
+<img src="../../assets/images/logo-transparent.png" width="80"/>
+
+### برونو یا Bruno - محیط توسعه متن باز برای تست و توسعه API ها
+
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
+[![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
+[![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
+[![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
+[![Download](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)
+| **فارسی**
+| [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 و سایر ابزارهای مشابه است.
+
+برونو مجموعه‌های شما را مستقیماً در یک پوشه روی فایل‌سیستم شما ذخیره می‌کند. ما از یک زبان نشانه‌گذاری ساده به نام Bru برای ذخیره اطلاعات درخواست‌های API استفاده می‌کنیم.
+
+شما می‌توانید برای همکاری روی مجموعه‌های 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://www.usebruno.com/downloads) برای مک لینکوس و ویندوز.
+
+همچنین می‌توانید برونو را از طریق مدیر بسته‌هایی مانند Homebrew، Chocolatey، Snap و Apt نصب کنید.
+
+```sh
+# بر روی مک از طریق brew
+brew install bruno
+
+# بر روی ویندوز از طریق Chocolatey
+choco install bruno
+
+# بر روی لینوکس از طریق Snap
+snap install bruno
+
+# بر روی لینوکس از طریق Apt
+sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+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
+```
+
+### روی پلتفرم‌های مختلف کار می‌کند 🖥️
+
+![bruno](/assets/images/run-anywhere.png) <br /><br />
+
+### همکاری از طریق گیت 👩‍💻🧑‍💻
+
+یا هر سیستم کنترل نسخه‌ای که ترجیح می‌دهید
+
+![bruno](/assets/images/version-control.png) <br /><br />
+
+### لینک‌های مهم 📌
+
+- [آخرین نسخه پایدار ما](https://github.com/usebruno/bruno/discussions/269)
+- [نقشه راه](https://github.com/usebruno/bruno/discussions/384)
+- [مستندات](https://docs.usebruno.com)
+- [وبسایت](https://www.usebruno.com)
+- [اشتراک ها](https://www.usebruno.com/pricing)
+- [دانلود](https://www.usebruno.com/downloads)
+
+### ویدیوها 🎥
+
+- [تجربه ها](https://github.com/usebruno/bruno/discussions/343)
+- [مرکز دانش](https://github.com/usebruno/bruno/discussions/386)
+- [اسکریپ مانیا](https://github.com/usebruno/bruno/discussions/385)
+
+### حمایت ❤️
+
+جوون! اگر این پروژه را دوست دارید، روی دکمه ⭐ کلیک کنید!
+
+### تجربه‌های به اشتراک گذاشته‌شده 📣
+
+اگر برونو به شما یا تیمتان کمک کرده است، لطفاً فراموش نکنید تجربه‌های خود را به اشتراک بگذارید. [تجربه‌های خود را در بحث گیت‌هاب ما به اشتراک بگذارید](https://github.com/usebruno/bruno/discussions/343).
+
+### انتشار برونو در یک پکیچ منیجر جدید
+
+لطفا چک بکنید [اینجارو](../../publishing.md) برای اطلاعات بیشتر.
+
+### مشارکت 👩‍💻🧑‍💻
+
+خوشحالم که می‌خواهید برونو را بهتر کنید. لطفا [راهنمای مشارکت را بررسی کنید](../contributing/contributing_fa.md).
+
+حتی اگر نمی‌توانید از طریق کدنویسی مشارکت کنید، در گزارش باگ‌ها و درخواست قابلیت‌های جدید که به حل نیازهای شما کمک می‌کند تردید نکنید.
+
+### نویسنده ها
+
+<div align="center">
+    <a href="https://github.com/usebruno/bruno/graphs/contributors">
+        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
+    </a>
+</div>
+
+### در ارتباط باشید 🌐
+
+[𝕏 (تویتر)](https://twitter.com/use_bruno) <br />
+[وبسایت](https://www.usebruno.com) <br />
+[دیسکورد](https://discord.com/invite/KgcZUncpjq) <br />
+[لینکدین](https://www.linkedin.com/company/usebruno)
+
+### برند
+
+**نام**
+
+به فارسی برونو - `Bruno` یک علامت تجاری ثبت‌شده متعلق به [Anoop M D](https://www.helloanoop.com/)
+
+**لوگو**
+
+لوگو توسط [OpenMoji](https://openmoji.org/library/emoji-1F436/) ساخته شده است. مجوز: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
+
+### مجوز 📄
+
+[MIT](../../license.md)

docs/readme/readme_ja.md

@@ -43,13 +43,6 @@ Bruno はオフラインのみで利用できます。Bruno にクラウド同
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### ゴールデンエディション ✨
-
-機能のほとんどが無料で使用でき、オープンソースとなっています。
-私たちは[オープンソースの原則と長期的な維持](https://github.com/usebruno/bruno/discussions/269)の間でうまくバランスを取ろうと努力しています。
-
-[ゴールデンエディション](https://www.usebruno.com/pricing)を **19 ドル** (買い切り)で購入できます！
-
 ### インストール方法
 
 Bruno は[私たちのウェブサイト](https://www.usebruno.com/downloads)からバイナリをダウンロードできます。Mac, Windows, Linux に対応しています。

docs/readme/readme_ka.md

@@ -43,12 +43,6 @@
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
-### ოქროს გამოცემა ✨
-
-მთავარი ფუნქციების უმეტესობა უფასოა და ღია წყაროა. ჩვენ ვცდილობთ ჰარმონიული ბალანსის დაცვას [ღია წყაროების პრინციპებსა და მდგრადობას შორის](https://github.com/usebruno/bruno/discussions/269)
-
-თქვენ შეგიძლიათ შეიძინოთ [ოქროს გამოცემა](https://www.usebruno.com/pricing) ერთჯერადი გადახდით **19 დოლარად**! <br/>
-
 ### ინსტალაცია
 
 ბრუნო ხელმისაწვდომია როგორც ბინარული ჩამოტვირთვა [ჩვენ的网站上](https://www.usebruno.com/downloads) Mac-ის, Windows-ისა და Linux-ისთვის.

docs/readme/readme_nl.md

@@ -26,13 +26,6 @@ Bruno is uitsluitend offline. Er zijn geen plannen om ooit cloud-synchronisatie
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### Golden Edition ✨
-
-De meeste van onze functies zijn gratis en open source.
-We streven naar een harmonieuze balans tussen [open-source principes en duurzaamheid](https://github.com/usebruno/bruno/discussions/269).
-
-Je kunt de [Golden Edition](https://www.usebruno.com/pricing) kopen voor een eenmalige betaling van **$19**! <br/>
-
 ### Installatie
 
 Bruno is beschikbaar als binaire download [op onze website](https://www.usebruno.com/downloads) voor Mac, Windows en Linux.

docs/readme/readme_pt_br.md

@@ -41,13 +41,6 @@ Bruno é totalmente offline. Não há planos de adicionar sincronização em nuv
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
-### Golden Edition ✨
-
-A grande maioria dos nossos recursos são gratuitos e de código aberto.
-Nós nos esforçamos para encontrar um equilíbrio harmônico entre [princípios de código aberto e sustentabilidade](https://github.com/usebruno/bruno/discussions/269)
-
-Você pode pré encomendar o plano [Golden Edition](https://www.usebruno.com/pricing) por ~~USD $19~~ **USD $9**! <br/>
-
 ### Instalação
 
 Bruno está disponível para download como binário [em nosso site](https://www.usebruno.com/downloads) para Mac, Windows e Linux.

eslint.config.js

@@ -7,14 +7,14 @@ const eslintPluginDiff = require('eslint-plugin-diff');
 let stylistic;
 
 const runESMImports = async () => {
-  stylistic = await import('@stylistic/eslint-plugin').then(d => d.default);
+  stylistic = await import('@stylistic/eslint-plugin').then((d) => d.default);
 };
 
 module.exports = runESMImports().then(() => defineConfig([
   {
     plugins: {
       'diff': fixupPluginRules(eslintPluginDiff),
-      '@stylistic': stylistic,
+      '@stylistic': stylistic
     },
     languageOptions: {
       parser: require('@typescript-eslint/parser'),
@@ -26,6 +26,7 @@ module.exports = runESMImports().then(() => defineConfig([
     files: [
       './eslint.config.js',
       'tests/**/*.{ts,js}',
+      'playwright/**/*.{js,ts}',
       'packages/bruno-app/**/*.{js,jsx,ts}',
       'packages/bruno-app/src/test-utils/mocks/codemirror.js',
       'packages/bruno-cli/**/*.js',
@@ -37,6 +38,7 @@ module.exports = runESMImports().then(() => defineConfig([
       'packages/bruno-lang/**/*.js',
       'packages/bruno-requests/**/*.ts',
       'packages/bruno-requests/**/*.js',
+      'packages/bruno-tests/**/*.{js,ts}'
     ],
     processor: 'diff/diff',
     rules: {
@@ -44,7 +46,7 @@ module.exports = runESMImports().then(() => defineConfig([
         indent: 2,
         quotes: 'single',
         semi: true,
-        jsx: true,
+        jsx: true
       }).rules,
       '@stylistic/comma-dangle': ['error', 'never'],
       '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
@@ -52,7 +54,7 @@ module.exports = runESMImports().then(() => defineConfig([
       '@stylistic/curly-newline': ['error', {
         multiline: true,
         minElements: 2,
-        consistent: true,
+        consistent: true
       }],
       '@stylistic/function-paren-newline': ['error', 'never'],
       '@stylistic/array-bracket-spacing': ['error', 'never'],
@@ -63,7 +65,7 @@ module.exports = runESMImports().then(() => defineConfig([
       '@stylistic/semi-style': ['error', 'last'],
       '@stylistic/max-len': ['off'],
       '@stylistic/jsx-one-expression-per-line': ['off']
-    },
+    }
   },
   {
     files: ["packages/bruno-app/**/*.{js,jsx,ts}"],

package-lock.json

@@ -8232,12 +8232,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/google-protobuf": {
-      "version": "3.15.12",
-      "resolved": "https://registry.npmjs.org/@types/google-protobuf/-/google-protobuf-3.15.12.tgz",
-      "integrity": "sha512-40um9QqwHjRS92qnOaDpL7RmDK15NuZYo9HihiJRbYkMQZlWnuH8AdvbMy8/o6lgLmKbDUKa+OALCltHdbOTpQ==",
-      "license": "MIT"
-    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -8373,9 +8367,9 @@
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.13",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
-      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
       "license": "MIT"
     },
     "node_modules/@types/lodash-es": {
@@ -8388,15 +8382,6 @@
         "@types/lodash": "*"
       }
     },
-    "node_modules/@types/lodash.set": {
-      "version": "4.3.9",
-      "resolved": "https://registry.npmjs.org/@types/lodash.set/-/lodash.set-4.3.9.tgz",
-      "integrity": "sha512-KOxyNkZpbaggVmqbpr82N2tDVTx05/3/j0f50Es1prxrWB0XYf9p3QNxqcbWb7P1Q9wlvsUSlCFnwlPCIJ46PQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/lodash": "*"
-      }
-    },
     "node_modules/@types/markdown-it": {
       "version": "12.2.3",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
@@ -14209,6 +14194,15 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
+    "node_modules/fast-fuzzy": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/fast-fuzzy/-/fast-fuzzy-1.12.0.tgz",
+      "integrity": "sha512-sXxGgHS+ubYpsdLnvOvJ9w5GYYZrtL9mkosG3nfuD446ahvoWEsSKBP7ieGmWIKVLnaxRDgUJkZMdxRgA2Ni+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "graphemesplit": "^2.4.1"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -14225,6 +14219,12 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-json-format": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/fast-json-format/-/fast-json-format-0.4.0.tgz",
+      "integrity": "sha512-HEomBtr2fYaVX3iaRdcVLU7Qd3SQhCYvXlMMM9RNaihfIaj5bIC7ADqw/bAPSg/uyX6FIBPq69ioXq0B4Cb6eA==",
+      "license": "MIT"
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -15168,9 +15168,9 @@
       }
     },
     "node_modules/google-protobuf": {
-      "version": "3.21.4",
-      "resolved": "https://registry.npmjs.org/google-protobuf/-/google-protobuf-3.21.4.tgz",
-      "integrity": "sha512-MnG7N936zcKTco4Jd2PX2U96Kf9PxygAPKBug+74LHzmHXmceN16MmRcdgZv+DGef/S9YvQAfRsNCn4cjf9yyQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/google-protobuf/-/google-protobuf-4.0.0.tgz",
+      "integrity": "sha512-b8wmenhUMf2WNL+xIJ/slvD/hEE6V3nRnG86O2bzkBrMweM9gnqZE1dfXlDjibY3aXJXDNbAHepevYyQ7qWKsQ==",
       "license": "(BSD-3-Clause AND Apache-2.0)"
     },
     "node_modules/gopd": {
@@ -15217,6 +15217,16 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/graphemesplit": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/graphemesplit/-/graphemesplit-2.6.0.tgz",
+      "integrity": "sha512-rG9w2wAfkpg0DILa1pjnjNfucng3usON360shisqIMUBw/87pojcBSrHmeE4UwryAuBih7g8m1oilf5/u8EWdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "js-base64": "^3.6.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/graphiql": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/graphiql/-/graphiql-3.7.1.tgz",
@@ -15287,20 +15297,18 @@
         "node": ">= 6"
       }
     },
-    "node_modules/grpc-reflection-js": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/grpc-reflection-js/-/grpc-reflection-js-0.3.0.tgz",
-      "integrity": "sha512-3lhTlQluPxVgbowCXA3tAZC3RJW+GSOUkguLNYl1QffYRiutUB3RDfPkQFTcrCFJgNiIIxx+iJkr8s3uSp3zWA==",
+    "node_modules/grpc-js-reflection-client": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/grpc-js-reflection-client/-/grpc-js-reflection-client-1.3.0.tgz",
+      "integrity": "sha512-eJ5/m1pXpcheSjOGExktU69WPUKnL4Su3IxGJYYYjy3/w19vE8dH7Wi46G5T92bpM0eZWftjiM5HduX8CjPq9w==",
       "license": "MIT",
       "dependencies": {
-        "@types/google-protobuf": "^3.7.2",
-        "@types/lodash.set": "^4.3.6",
-        "google-protobuf": "^3.12.2",
-        "lodash.set": "^4.3.2",
-        "protobufjs": "^7.2.2"
+        "@types/lodash": "^4.17.15",
+        "lodash": "^4.17.21",
+        "protobufjs": "^7.4.0"
       },
       "peerDependencies": {
-        "@grpc/grpc-js": "^1.0.0"
+        "@grpc/grpc-js": "^1.12.6"
       }
     },
     "node_modules/har-schema": {
@@ -17760,6 +17768,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-base64": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz",
+      "integrity": "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/js-md4": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
@@ -18603,12 +18617,6 @@
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
       "license": "MIT"
     },
-    "node_modules/lodash.set": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
-      "integrity": "sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg==",
-      "license": "MIT"
-    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -20297,18 +20305,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pidusage": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pidusage/-/pidusage-4.0.1.tgz",
-      "integrity": "sha512-yCH2dtLHfEBnzlHUJymR/Z1nN2ePG3m392Mv8TFlTP1B0xkpMQNHAnfkY0n2tAi6ceKO6YWhxYfZ96V4vVkh/g==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/pify": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
@@ -25490,6 +25486,12 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -25915,6 +25917,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -26832,6 +26850,8 @@
         "cookie": "0.7.1",
         "dompurify": "^3.2.4",
         "escape-html": "^1.0.3",
+        "fast-fuzzy": "^1.12.0",
+        "fast-json-format": "~0.4.0",
         "file": "^0.2.2",
         "file-dialog": "^0.0.8",
         "file-saver": "^2.0.5",
@@ -26840,9 +26860,9 @@
         "graphiql": "3.7.1",
         "graphql": "^16.6.0",
         "graphql-request": "^3.7.0",
+        "hexy": "^0.3.5",
         "httpsnippet": "^3.0.9",
         "i18next": "24.1.2",
-        "iconv-lite": "^0.6.3",
         "idb": "^7.0.0",
         "immer": "^9.0.15",
         "jsesc": "^3.0.2",
@@ -30130,7 +30150,8 @@
         "js-yaml": "^4.1.0",
         "jscodeshift": "^17.3.0",
         "lodash": "^4.17.21",
-        "nanoid": "3.3.8"
+        "nanoid": "3.3.8",
+        "xml2js": "^0.6.2"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -30271,7 +30292,6 @@
         "lodash": "^4.17.21",
         "mime-types": "^2.1.35",
         "nanoid": "3.3.8",
-        "pidusage": "^4.0.1",
         "qs": "^6.11.0",
         "socks-proxy-agent": "^8.0.2",
         "tough-cookie": "^6.0.0",
@@ -31986,6 +32006,7 @@
         "cheerio": "^1.0.0",
         "crypto-js": "^4.2.0",
         "json-query": "^2.2.2",
+        "jsonwebtoken": "^9.0.2",
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
         "nanoid": "3.3.8",
@@ -31995,6 +32016,7 @@
         "quickjs-emscripten": "^0.29.2",
         "tv4": "^1.3.0",
         "uuid": "^9.0.0",
+        "xml-formatter": "^3.5.0",
         "xml2js": "^0.6.2"
       },
       "devDependencies": {
@@ -32036,6 +32058,18 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "packages/bruno-js/node_modules/xml-formatter": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/xml-formatter/-/xml-formatter-3.5.0.tgz",
+      "integrity": "sha512-9ij/f2PLIPv+YDywtdztq7U82kYMDa5yPYwpn0TnXnqJRH6Su8RC/oaw91erHe3aSEbfgBaA1hDzReDFb1SVXw==",
+      "license": "MIT",
+      "dependencies": {
+        "xml-parser-xo": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "packages/bruno-lang": {
       "name": "@usebruno/lang",
       "version": "0.12.0",
@@ -32073,7 +32107,8 @@
         "@types/qs": "^6.9.18",
         "axios": "^1.9.0",
         "debug": "^4.4.3",
-        "grpc-reflection-js": "^0.3.0",
+        "google-protobuf": "^4.0.0",
+        "grpc-js-reflection-client": "^1.3.0",
         "is-ip": "^5.0.1",
         "system-ca": "^2.0.1",
         "tough-cookie": "^6.0.0",

packages/bruno-app/package.json

@@ -27,6 +27,8 @@
     "cookie": "0.7.1",
     "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
+    "fast-fuzzy": "^1.12.0",
+    "fast-json-format": "~0.4.0",
     "file": "^0.2.2",
     "file-dialog": "^0.0.8",
     "file-saver": "^2.0.5",
@@ -35,9 +37,9 @@
     "graphiql": "3.7.1",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
+    "hexy": "^0.3.5",
     "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
-    "iconv-lite": "^0.6.3",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "jsesc": "^3.0.2",

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

@@ -4,7 +4,7 @@ import { AccordionItem, AccordionHeader, AccordionContent } from './styledWrappe
 
 const AccordionContext = createContext();
 
-const Accordion = ({ children, defaultIndex }) => {
+const Accordion = ({ children, defaultIndex, dataTestId }) => {
   const [openIndex, setOpenIndex] = useState(defaultIndex);
 
   const toggleItem = (index) => {
@@ -13,7 +13,7 @@ const Accordion = ({ children, defaultIndex }) => {
 
   return (
     <AccordionContext.Provider value={{ openIndex, toggleItem }}>
-      <div>{children}</div>
+      <div data-testid={dataTestId}>{children}</div>
     </AccordionContext.Provider>
   );
 };

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

@@ -0,0 +1,83 @@
+import React, { useRef, forwardRef } from 'react';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import { humanizeRequestBodyMode } from 'utils/collections';
+
+const DEFAULT_MODES = [
+  { key: 'multipartForm', label: 'Multipart Form', category: 'Form' },
+  { key: 'formUrlEncoded', label: 'Form URL Encoded', category: 'Form' },
+  { key: 'json', label: 'JSON', category: 'Raw' },
+  { key: 'xml', label: 'XML', category: 'Raw' },
+  { key: 'text', label: 'TEXT', category: 'Raw' },
+  { key: 'sparql', label: 'SPARQL', category: 'Raw' },
+  { key: 'file', label: 'File / Binary', category: 'Other' },
+  { key: 'none', label: 'None', category: 'Other' }
+];
+
+const BodyModeSelector = ({
+  currentMode,
+  onModeChange,
+  modes = DEFAULT_MODES,
+  disabled = false,
+  className = '',
+  wrapperClassName = '',
+  showCategories = true,
+  placement = 'bottom-end'
+}) => {
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  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(currentMode)}
+        {' '}
+        <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeSelect = (mode) => {
+    dropdownTippyRef.current.hide();
+    onModeChange(mode);
+  };
+
+  // Group modes by category for rendering
+  const groupedModes = modes.reduce((acc, mode) => {
+    const category = mode.category || 'Other';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(mode);
+    return acc;
+  }, {});
+
+  return (
+    <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'} ${wrapperClassName}`}>
+      <Dropdown
+        onCreate={onDropdownCreate}
+        icon={<Icon />}
+        placement={placement}
+        disabled={disabled}
+        className={className}
+      >
+        {Object.entries(groupedModes).map(([category, categoryModes]) => (
+          <React.Fragment key={category}>
+            {showCategories && <div className="label-item font-medium">{category}</div>}
+            {categoryModes.map((mode) => (
+              <div
+                key={mode.key}
+                className="dropdown-item"
+                onClick={() => onModeSelect(mode.key)}
+              >
+                {mode.label}
+              </div>
+            ))}
+          </React.Fragment>
+        ))}
+      </Dropdown>
+    </div>
+  );
+};
+
+export default BodyModeSelector;

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

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .checkbox-container {
+    width: 1rem;
+    height: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  .checkbox-checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    visibility: ${(props) => props.checked ? 'visible' : 'hidden'};
+    pointer-events: none;
+  }
+
+  .checkbox-input {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid ${(props) => {
+      if (props.checked && props.disabled) {
+        return props.theme.colors.text.muted;
+      }
+
+      if (props.checked && !props.disabled) {
+        return props.theme.colors.text.yellow;
+      }
+
+      return props.theme.colors.text.muted;
+    }};
+    border-radius: 4px;
+    background-color: ${(props) => {
+      if (props.checked && !props.disabled) {
+        return props.theme.colors.text.yellow;
+      }
+
+      if (props.checked && props.disabled) {
+        return props.theme.colors.text.muted;
+      }
+
+      return 'transparent';
+    }};
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+    outline: none;
+    box-shadow: none;
+    
+    &:hover:not(:disabled) {
+      opacity: 0.8;
+    }
+    
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px ${(props) => props.theme.colors.text.yellow}40;
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+import IconCheckMark from 'components/Icons/IconCheckMark';
+import { useTheme } from 'providers/Theme';
+
+const Checkbox = ({
+  checked = false,
+  disabled = false,
+  onChange,
+  className = '',
+  id,
+  name,
+  value,
+  dataTestId = 'checkbox'
+}) => {
+  const { theme } = useTheme();
+
+  const handleChange = (e) => {
+    if (!disabled && onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <StyledWrapper checked={checked} disabled={disabled} className={className}>
+      <div className="checkbox-container">
+        <input
+          type="checkbox"
+          id={id}
+          name={name}
+          value={value}
+          checked={checked}
+          disabled={disabled}
+          onChange={handleChange}
+          className="checkbox-input"
+          data-testid={dataTestId}
+        />
+        <IconCheckMark className="checkbox-checkmark" color={theme.examples.checkbox.color} size={14} />
+      </div>
+
+    </StyledWrapper>
+  );
+};
+
+export default Checkbox;

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

@@ -1,6 +1,12 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  &.read-only {
+    div.CodeMirror .CodeMirror-cursor {
+      display: none !important;
+    }
+  }
+
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};

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

@@ -14,7 +14,7 @@ import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
-import CustomSearch from './CustomSearch';
+import CodeMirrorSearch from 'components/CodeMirrorSearch';
 
 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -245,6 +245,10 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('mode', this.props.mode);
     }
 
+    if (this.props.readOnly !== prevProps.readOnly && this.editor) {
+      this.editor.setOption('readOnly', this.props.readOnly);
+    }
+
     this.ignoreChangeEvent = false;
   }
 
@@ -262,12 +266,12 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className="h-full w-full flex flex-col relative graphiql-container"
+        className={`h-full w-full flex flex-col relative graphiql-container ${this.props.readOnly ? 'read-only' : ''}`}
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}
       >
-        <CustomSearch
+        <CodeMirrorSearch
           visible={this.state.searchBarVisible}
           editor={this.editor}
           onClose={() => this.setState({ searchBarVisible: false })}

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

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import debounce from 'lodash/debounce';
 import { IconRegex, IconArrowUp, IconArrowDown, IconX, IconLetterCase, IconLetterW } from '@tabler/icons';
 import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';
@@ -9,7 +8,7 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');
 }
 
-const CustomSearch = ({ visible, editor, onClose }) => {
+const CodeMirrorSearch = ({ visible, editor, onClose }) => {
   const [searchText, setSearchText] = useState('');
   const [regex, setRegex] = useState(false);
   const [caseSensitive, setCaseSensitive] = useState(false);
@@ -199,4 +198,4 @@ const CustomSearch = ({ visible, editor, onClose }) => {
   );
 };
 
-export default CustomSearch;
+export default CodeMirrorSearch;

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

@@ -6,7 +6,7 @@ import Dropdown from 'components/Dropdown';
 import { useTheme } from 'providers/Theme';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { humanizeRequestAPIKeyPlacement } from 'utils/collections';
 
@@ -16,9 +16,9 @@ const ApiKeyAuth = ({ collection }) => {
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const apikeyAuth = get(collection, 'root.request.auth.apikey', {});
+  const apikeyAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.apikey', {}) : get(collection, 'root.request.auth.apikey', {});
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const Icon = forwardRef((props, ref) => {
     return (

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

@@ -11,7 +11,7 @@ const AuthMode = ({ collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = get(collection, 'root.request.auth.mode');
+  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
 
   const Icon = forwardRef((props, ref) => {
     return (

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const AwsV4Auth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
+  const awsv4Auth = collection.draft?.root ? get(collection, 'draft.root.request.auth.awsv4', {}) : get(collection, 'root.request.auth.awsv4', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleAccessKeyIdChange = (accessKeyId) => {
     dispatch(

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BasicAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const basicAuth = get(collection, 'root.request.auth.basic', {});
+  const basicAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.basic', {}) : get(collection, 'root.request.auth.basic', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BearerAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
+  const bearerToken = collection.draft?.root ? get(collection, 'draft.root.request.auth.bearer.token', '') : get(collection, 'root.request.auth.bearer.token', '');
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(bearerToken);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleTokenChange = (token) => {
     dispatch(

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const DigestAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const digestAuth = get(collection, 'root.request.auth.digest', {});
+  const digestAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.digest', {}) : get(collection, 'root.request.auth.digest', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(

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

@@ -6,7 +6,7 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 
@@ -19,11 +19,11 @@ const NTLMAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
+  const ntlmAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.ntlm', {}) : get(collection, 'root.request.auth.ntlm', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
 
   const handleUsernameChange = (username) => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import get from 'lodash/get';
 import StyledWrapper from './StyledWrapper';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import OAuth2AuthorizationCode from 'components/RequestPane/Auth/OAuth2/AuthorizationCode/index';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
 import { useDispatch } from 'react-redux';
@@ -14,10 +14,10 @@ const GrantTypeComponentMap = ({collection }) => {
   const dispatch = useDispatch();
 
   const save = () => {
-    dispatch(saveCollectionRoot(collection.uid));
+    dispatch(saveCollectionSettings(collection.uid));
   };
 
-  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
+  let request = collection.draft?.root ? get(collection, 'draft.root.request', {}) : get(collection, 'root.request', {});
   const grantType = get(request, 'auth.oauth2.grantType', {});
 
   switch (grantType) {
@@ -40,7 +40,7 @@ const GrantTypeComponentMap = ({collection }) => {
 };
 
 const OAuth2 = ({ collection }) => {
-  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
+  let request = collection.draft?.root ? get(collection, 'draft.root.request', {}) : get(collection, 'root.request', {});
 
   return (
     <StyledWrapper className="mt-2 w-full">

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const WsseAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const wsseAuth = get(collection, 'root.request.auth.wsse', {});
+  const wsseAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.wsse', {}) : get(collection, 'root.request.auth.wsse', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleUserChange = (username) => {
     dispatch(

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

@@ -8,17 +8,17 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
 import ApiKeyAuth from './ApiKeyAuth/';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
 import NTLMAuth from './NTLMAuth';
 
 
 const Auth = ({ collection }) => {
-  const authMode = get(collection, 'root.request.auth.mode');
+  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
   const dispatch = useDispatch();
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const getAuthView = () => {
     switch (authMode) {

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

@@ -1,19 +1,30 @@
 import React from 'react';
 import { IconCertificate, IconTrash, IconWorld } from '@tabler/icons';
 import { useFormik } from 'formik';
-import { uuid } from 'utils/common';
 import * as Yup from 'yup';
-import { IconEye, IconEyeOff } from '@tabler/icons';
-import { useState } from 'react';
-
 import StyledWrapper from './StyledWrapper';
 import { useRef } from 'react';
 import path from 'utils/common/path';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning/index';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField/index';
+import { useTheme } from 'styled-components';
+import { useDispatch } from 'react-redux';
+import { updateCollectionClientCertificates } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import get from 'lodash/get';
 
-const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
+const ClientCertSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+
+  // Get client certs from draft if exists, otherwise from brunoConfig
+  const clientCertConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.clientCertificates.certs', [])
+    : get(collection, 'brunoConfig.clientCertificates.certs', []);
   const certFilePathInputRef = useRef();
   const keyFilePathInputRef = useRef();
   const pfxFilePathInputRef = useRef();
+  const { storedTheme } = useTheme();
 
   const formik = useFormik({
     initialValues: {
@@ -62,28 +73,47 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
           passphrase: values.passphrase
         };
       }
-      onUpdate(relevantValues);
+
+      // Add the new cert to the existing certs in draft
+      const updatedCerts = [...clientCertConfig, relevantValues];
+      const clientCertificates = {
+        enabled: true,
+        certs: updatedCerts
+      };
+
+      dispatch(updateCollectionClientCertificates({
+        collectionUid: collection.uid,
+        clientCertificates
+      }));
+
       formik.resetForm();
       resetFileInputFields();
     }
   });
 
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(formik.values.passphrase);
+
   const getFile = (e) => {
     const filePath = window?.ipcRenderer?.getFilePath(e?.files?.[0]);
     if (filePath) {
-      let relativePath = path.relative(root, filePath);
+      let relativePath = path.relative(collection.pathname, filePath);
       formik.setFieldValue(e.name, relativePath);
     }
   };
 
   const resetFileInputFields = () => {
-    certFilePathInputRef.current.value = '';
-    keyFilePathInputRef.current.value = '';
-    pfxFilePathInputRef.current.value = '';
+    if (certFilePathInputRef.current) {
+      certFilePathInputRef.current.value = '';
+    }
+    if (keyFilePathInputRef.current) {
+      keyFilePathInputRef.current.value = '';
+    }
+    if (pfxFilePathInputRef.current) {
+      pfxFilePathInputRef.current.value = '';
+    }
   };
 
-  const [passwordVisible, setPasswordVisible] = useState(false);
-
   const handleTypeChange = (e) => {
     formik.setFieldValue('type', e.target.value);
     if (e.target.value === 'cert') {
@@ -97,6 +127,21 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
     }
   };
 
+  const handleRemove = (indexToRemove) => {
+    const updatedCerts = clientCertConfig.filter((cert, index) => index !== indexToRemove);
+    const clientCertificates = {
+      enabled: true,
+      certs: updatedCerts
+    };
+
+    dispatch(updateCollectionClientCertificates({
+      collectionUid: collection.uid,
+      clientCertificates
+    }));
+  };
+
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+
   return (
     <StyledWrapper className="w-full h-full">
       <div className="text-xs mb-4 text-muted">Add client certificates to be used for specific domains.</div>
@@ -116,9 +161,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                   <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
                   {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
                 </div>
-                <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
+                  <button onClick={() => handleRemove(index)} className="remove-certificate ml-2">
                   <IconTrash size={18} strokeWidth={1.5} />
-                </button>
+                  </button>
               </div>
             </li>
           ))}
@@ -314,30 +359,27 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
             Passphrase
           </label>
           <div className="textbox flex flex-row items-center w-[300px] h-[1.70rem] relative">
-            <input
-              id="passphrase"
-              type={passwordVisible ? 'text' : 'password'}
-              name="passphrase"
-              className="outline-none w-64 bg-transparent"
-              onChange={formik.handleChange}
+            <SingleLineEditor
               value={formik.values.passphrase || ''}
+              theme={storedTheme}
+              onChange={(val) => formik.setFieldValue('passphrase', val)}
+              collection={collection}
+              isSecret={true}
             />
-            <button
-              type="button"
-              className="btn btn-sm absolute right-0 l"
-              onClick={() => setPasswordVisible(!passwordVisible)}
-            >
-              {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
-            </button>
+            {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
           </div>
           {formik.touched.passphrase && formik.errors.passphrase ? (
             <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
           ) : null}
         </div>
-        <div className="mt-6">
+        <div className="mt-6 flex flex-row gap-2 items-center">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Add
           </button>
+          <div className="h-4 border-l border-gray-600"></div>
+          <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+            Save
+          </button>
         </div>
       </form>
     </StyledWrapper>

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

@@ -1,10 +1,10 @@
 import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
-import { updateCollectionDocs } from 'providers/ReduxStore/slices/collections';
+import { updateCollectionDocs, deleteCollectionDraft } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
@@ -14,7 +14,7 @@ const Docs = ({ collection }) => {
   const dispatch = useDispatch();
   const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
-  const docs = get(collection, 'root.docs', '');
+  const docs = collection.draft?.root ? get(collection, 'draft.root.docs', '') : get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
 
   const toggleViewMode = () => {
@@ -31,17 +31,17 @@ const Docs = ({ collection }) => {
   };
 
   const handleDiscardChanges = () => {
-    dispatch(
+    dispatch((
       updateCollectionDocs({
         collectionUid: collection.uid,
         docs: docs
-      })
+      }))
     );
     toggleViewMode();
   }
 
   const onSave = () => {
-    dispatch(saveCollectionRoot(collection.uid));
+    dispatch(saveCollectionSettings(collection.uid));
     toggleViewMode();
   }
 

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

@@ -10,7 +10,7 @@ import {
   deleteCollectionHeader,
   setCollectionHeaders
 } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
@@ -21,7 +21,7 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 const Headers = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const headers = get(collection, 'root.request.headers', []);
+  const headers = collection.draft?.root ? get(collection, 'draft.root.request.headers', []) : get(collection, 'root.request.headers', []);
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
   const toggleBulkEditMode = () => {
@@ -40,7 +40,7 @@ const Headers = ({ collection }) => {
     );
   };
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
   const handleHeaderValueChange = (e, _header, type) => {
     const header = cloneDeep(_header);
     switch (type) {

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

@@ -1,37 +1,44 @@
 import React from 'react';
-import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
-import toast from 'react-hot-toast';
-import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
-import cloneDeep from 'lodash/cloneDeep';
+import { updateCollectionPresets } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { get } from 'lodash';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
-  const {
-    brunoConfig: { presets: presets = {} }
-  } = collection;
+  const initialPresets = { requestType: 'http', requestUrl: '' };
 
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      requestType: presets.requestType || 'http',
-      requestUrl: presets.requestUrl || ''
-    },
-    onSubmit: (newPresets) => {
-      const brunoConfig = cloneDeep(collection.brunoConfig);
-      brunoConfig.presets = newPresets;
-      dispatch(updateBrunoConfig(brunoConfig, collection.uid));
-      toast.success('Collection presets updated');
-    }
-  });
+  // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig
+  const currentPresets = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.presets', initialPresets)
+    : get(collection, 'brunoConfig.presets', initialPresets);
+
+  // Helper to update presets config
+  const updatePresets = (updates) => {
+    const updatedPresets = { ...currentPresets, ...updates };
+    dispatch(updateCollectionPresets({
+      collectionUid: collection.uid,
+      presets: updatedPresets
+    }));
+  };
+
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+
+  const handleRequestTypeChange = (e) => {
+    updatePresets({ requestType: e.target.value });
+  };
+
+  const handleRequestUrlChange = (e) => {
+    updatePresets({ requestUrl: e.target.value });
+  };
 
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">
         These presets will be used as the default values for new requests in this collection.
       </div>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+      <div className="bruno-form">
         <div className="mb-3 flex items-center">
           <label className="settings-label flex  items-center" htmlFor="enabled">
             Request Type
@@ -42,9 +49,9 @@ const PresetsSettings = ({ collection }) => {
               className="cursor-pointer"
               type="radio"
               name="requestType"
-              onChange={formik.handleChange}
+              onChange={handleRequestTypeChange}
               value="http"
-              checked={formik.values.requestType === 'http'}
+              checked={(currentPresets.requestType || 'http') === 'http'}
             />
             <label htmlFor="http" className="ml-1 cursor-pointer select-none">
               HTTP
@@ -55,9 +62,9 @@ const PresetsSettings = ({ collection }) => {
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
-              onChange={formik.handleChange}
+              onChange={handleRequestTypeChange}
               value="graphql"
-              checked={formik.values.requestType === 'graphql'}
+              checked={(currentPresets.requestType || 'http') === 'graphql'}
             />
             <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
               GraphQL
@@ -68,9 +75,9 @@ const PresetsSettings = ({ collection }) => {
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
-              onChange={formik.handleChange}
+              onChange={handleRequestTypeChange}
               value="grpc"
-              checked={formik.values.requestType === 'grpc'}
+              checked={(currentPresets.requestType || 'http') === 'grpc'}
             />
             <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
               gRPC
@@ -93,8 +100,8 @@ const PresetsSettings = ({ collection }) => {
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                onChange={formik.handleChange}
-                value={formik.values.requestUrl || ''}
+                onChange={handleRequestUrlChange}
+                value={currentPresets.requestUrl || ''}
                 style={{ width: '100%' }}
               />
             </div>
@@ -102,11 +109,11 @@ const PresetsSettings = ({ collection }) => {
         </div>
 
         <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
+          <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
             Save
           </button>
         </div>
-      </form>
+      </div>
     </StyledWrapper>
   );
 };

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

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 import {
   IconTrash,
@@ -10,8 +11,10 @@ import {
 import { getBasename } from 'utils/common/path';
 import { Tooltip } from 'react-tooltip';
 import useProtoFileManagement from '../../../hooks/useProtoFileManagement';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 
 const ProtobufSettings = ({ collection }) => {
+  const dispatch = useDispatch();
   const {
     protoFiles,
     importPaths,
@@ -27,6 +30,8 @@ const ProtobufSettings = ({ collection }) => {
   } = useProtoFileManagement(collection);
   const fileInputRef = useRef(null);
 
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+
   // Get file path using the ipcRenderer
   const getProtoFile = async (event) => {
     const files = event?.files;
@@ -164,7 +169,7 @@ const ProtobufSettings = ({ collection }) => {
                       <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
                         <div className="flex items-center">
                           <IconFile size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
-                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100" data-testid="protobuf-proto-file-name">
                             {getBasename(collection.pathname, file.path)}
                           </span>
                           {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
@@ -329,6 +334,12 @@ const ProtobufSettings = ({ collection }) => {
         </div>
       </div>
 
+      <div className="mt-6">
+        <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+
     </StyledWrapper>
   );
 };

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

@@ -1,106 +1,155 @@
-import React, { useEffect } from 'react';
-import { useFormik } from 'formik';
+import React from 'react';
 import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';
-import * as Yup from 'yup';
-import toast from 'react-hot-toast';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { updateCollectionProxy } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { get } from 'lodash';
+import toast from 'react-hot-toast';
 
-const ProxySettings = ({ proxyConfig, onUpdate }) => {
-  const proxySchema = Yup.object({
-    enabled: Yup.string().oneOf(['global', 'true', 'false']),
-    protocol: Yup.string().oneOf(['http', 'https', 'socks4', 'socks5']),
-    hostname: Yup.string()
-      .when('enabled', {
-        is: 'true',
-        then: (hostname) => hostname.required('Specify the hostname for your proxy.'),
-        otherwise: (hostname) => hostname.nullable()
-      })
-      .max(1024),
-    port: Yup.number()
-      .min(1)
-      .max(65535)
-      .typeError('Specify port between 1 and 65535')
-      .nullable()
-      .transform((_, val) => (val ? Number(val) : null)),
-    auth: Yup.object()
-      .when('enabled', {
-        is: 'true',
-        then: Yup.object({
-          enabled: Yup.boolean(),
-          username: Yup.string()
-            .when('enabled', {
-              is: true,
-              then: (username) => username.required('Specify username for proxy authentication.')
-            })
-            .max(1024),
-          password: Yup.string()
-            .when('enabled', {
-              is: true,
-              then: (password) => password.required('Specify password for proxy authentication.')
-            })
-            .max(1024)
-        })
-      })
-      .optional(),
-    bypassProxy: Yup.string().optional().max(1024)
-  });
+const ProxySettings = ({ collection }) => {
+  const dispatch = useDispatch();
+  const initialProxyConfig = { enabled: 'global', protocol: 'http', hostname: '', port: '', auth: { enabled: false, username: '', password: '' }, bypassProxy: '' };
 
-  const formik = useFormik({
-    initialValues: {
-      enabled: proxyConfig.enabled || 'global',
-      protocol: proxyConfig.protocol || 'http',
-      hostname: proxyConfig.hostname || '',
-      port: proxyConfig.port || '',
-      auth: {
-        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
-        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
-        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
-      },
-      bypassProxy: proxyConfig.bypassProxy || ''
-    },
-    validationSchema: proxySchema,
-    onSubmit: (values) => {
-      proxySchema
-        .validate(values, { abortEarly: true })
-        .then((validatedProxy) => {
-          // serialize 'enabled' to boolean
-          if (validatedProxy.enabled === 'true') {
-            validatedProxy.enabled = true;
-          } else if (validatedProxy.enabled === 'false') {
-            validatedProxy.enabled = false;
-          }
+  // Get proxy from draft.brunoConfig if it exists, otherwise from brunoConfig
+  const currentProxyConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.proxy', initialProxyConfig)
+    : get(collection, 'brunoConfig.proxy', initialProxyConfig);
 
-          onUpdate(validatedProxy);
-        })
-        .catch((error) => {
-          let errMsg = error.message || 'Preferences validation error';
-          toast.error(errMsg);
-        });
-    }
-  });
   const [passwordVisible, setPasswordVisible] = useState(false);
 
-  useEffect(() => {
-    formik.setValues({
-      enabled: proxyConfig.enabled === true ? 'true' : proxyConfig.enabled === false ? 'false' : 'global',
-      protocol: proxyConfig.protocol || 'http',
-      hostname: proxyConfig.hostname || '',
-      port: proxyConfig.port || '',
+  const validateHostnameOnChange = (hostname) => {
+    if (hostname && hostname.length > 1024) {
+      toast.error('Hostname must be less than 1024 characters');
+      return false;
+    }
+    return true;
+  };
+
+  const validatePortOnChange = (port) => {
+    if (!port || port === '') {
+      return true; // Allow empty port during typing
+    }
+    const portNum = Number(port);
+    if (isNaN(portNum)) {
+      toast.error('Port must be a valid number');
+      return false;
+    }
+    if (portNum < 1 || portNum > 65535) {
+      toast.error('Port must be between 1 and 65535');
+      return false;
+    }
+    return true;
+  };
+
+  const validateAuthUsernameOnChange = (username) => {
+    if (username && username.length > 1024) {
+      toast.error('Username must be less than 1024 characters');
+      return false;
+    }
+    return true;
+  };
+
+  const validateAuthPasswordOnChange = (password) => {
+    if (password && password.length > 1024) {
+      toast.error('Password must be less than 1024 characters');
+      return false;
+    }
+    return true;
+  };
+
+  const validateBypassProxyOnChange = (bypassProxy) => {
+    if (bypassProxy && bypassProxy.length > 1024) {
+      toast.error('Bypass proxy must be less than 1024 characters');
+      return false;
+    }
+    return true;
+  };
+
+  // Helper to update proxy config
+  const updateProxy = (updates) => {
+    const updatedProxy = { ...currentProxyConfig, ...updates };
+    dispatch(updateCollectionProxy({
+      collectionUid: collection.uid,
+      proxy: updatedProxy
+    }));
+  };
+
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+
+  const handleEnabledChange = (e) => {
+    const value = e.target.value;
+    // Convert string to boolean or keep as 'global'
+    const enabled = value === 'true' ? true : value === 'false' ? false : 'global';
+    updateProxy({ enabled });
+  };
+
+  const handleProtocolChange = (e) => {
+    updateProxy({ protocol: e.target.value });
+  };
+
+  const handleHostnameChange = (e) => {
+    const hostname = e.target.value;
+    if (validateHostnameOnChange(hostname)) {
+      updateProxy({ hostname });
+    }
+  };
+
+  const handlePortChange = (e) => {
+    const port = e.target.value ? Number(e.target.value) : '';
+    if (validatePortOnChange(port)) {
+      updateProxy({ port });
+    }
+  };
+
+  const handleAuthEnabledChange = (e) => {
+    updateProxy({
       auth: {
-        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
-        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
-        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
-      },
-      bypassProxy: proxyConfig.bypassProxy || ''
+        ...currentProxyConfig.auth,
+        enabled: e.target.checked
+      }
     });
-  }, [proxyConfig]);
+  };
+
+  const handleAuthUsernameChange = (e) => {
+    const username = e.target.value;
+    if (validateAuthUsernameOnChange(username)) {
+      updateProxy({
+        auth: {
+          ...currentProxyConfig.auth,
+          username
+        }
+      });
+    }
+  };
+
+  const handleAuthPasswordChange = (e) => {
+    const password = e.target.value;
+    if (validateAuthPasswordOnChange(password)) {
+      updateProxy({
+        auth: {
+          ...currentProxyConfig.auth,
+          password
+        }
+      });
+    }
+  };
+
+  const handleBypassProxyChange = (e) => {
+    const bypassProxy = e.target.value;
+    if (validateBypassProxyOnChange(bypassProxy)) {
+      updateProxy({ bypassProxy });
+    }
+  };
+
+  const enabledValue = currentProxyConfig.enabled === true ? 'true' : currentProxyConfig.enabled === false ? 'false' : 'global';
 
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">Configure proxy settings for this collection.</div>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+      <div className="bruno-form">
         <div className="mb-3 flex items-center">
           <label className="settings-label flex items-center" htmlFor="enabled">
             Config
@@ -120,8 +169,8 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
                 type="radio"
                 name="enabled"
                 value="global"
-                checked={formik.values.enabled === 'global'}
-                onChange={formik.handleChange}
+                checked={enabledValue === 'global'}
+                onChange={handleEnabledChange}
                 className="mr-1"
               />
               global
@@ -130,9 +179,9 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
               <input
                 type="radio"
                 name="enabled"
-                value={'true'}
-                checked={formik.values.enabled === 'true'}
-                onChange={formik.handleChange}
+                value="true"
+                checked={enabledValue === 'true'}
+                onChange={handleEnabledChange}
                 className="mr-1"
               />
               enabled
@@ -141,9 +190,9 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
               <input
                 type="radio"
                 name="enabled"
-                value={'false'}
-                checked={formik.values.enabled === 'false'}
-                onChange={formik.handleChange}
+                value="false"
+                checked={enabledValue === 'false'}
+                onChange={handleEnabledChange}
                 className="mr-1"
               />
               disabled
@@ -160,8 +209,8 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
                 type="radio"
                 name="protocol"
                 value="http"
-                checked={formik.values.protocol === 'http'}
-                onChange={formik.handleChange}
+                checked={(currentProxyConfig.protocol || 'http') === 'http'}
+                onChange={handleProtocolChange}
                 className="mr-1"
               />
               HTTP
@@ -171,8 +220,8 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
                 type="radio"
                 name="protocol"
                 value="https"
-                checked={formik.values.protocol === 'https'}
-                onChange={formik.handleChange}
+                checked={(currentProxyConfig.protocol || 'http') === 'https'}
+                onChange={handleProtocolChange}
                 className="mr-1"
               />
               HTTPS
@@ -182,8 +231,8 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
                 type="radio"
                 name="protocol"
                 value="socks4"
-                checked={formik.values.protocol === 'socks4'}
-                onChange={formik.handleChange}
+                checked={(currentProxyConfig.protocol || 'http') === 'socks4'}
+                onChange={handleProtocolChange}
                 className="mr-1"
               />
               SOCKS4
@@ -193,8 +242,8 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
                 type="radio"
                 name="protocol"
                 value="socks5"
-                checked={formik.values.protocol === 'socks5'}
-                onChange={formik.handleChange}
+                checked={(currentProxyConfig.protocol || 'http') === 'socks5'}
+                onChange={handleProtocolChange}
                 className="mr-1"
               />
               SOCKS5
@@ -214,12 +263,9 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.hostname || ''}
+            onChange={handleHostnameChange}
+            value={currentProxyConfig.hostname || ''}
           />
-          {formik.touched.hostname && formik.errors.hostname ? (
-            <div className="ml-3 text-red-500">{formik.errors.hostname}</div>
-          ) : null}
         </div>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="port">
@@ -234,12 +280,9 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.port}
+            onChange={handlePortChange}
+            value={currentProxyConfig.port || ''}
           />
-          {formik.touched.port && formik.errors.port ? (
-            <div className="ml-3 text-red-500">{formik.errors.port}</div>
-          ) : null}
         </div>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="auth.enabled">
@@ -248,8 +291,8 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
           <input
             type="checkbox"
             name="auth.enabled"
-            checked={formik.values.auth.enabled}
-            onChange={formik.handleChange}
+            checked={currentProxyConfig.auth?.enabled || false}
+            onChange={handleAuthEnabledChange}
           />
         </div>
         <div>
@@ -266,12 +309,9 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck="false"
-              value={formik.values.auth.username}
-              onChange={formik.handleChange}
+              value={currentProxyConfig.auth?.username || ''}
+              onChange={handleAuthUsernameChange}
             />
-            {formik.touched.auth?.username && formik.errors.auth?.username ? (
-              <div className="ml-3 text-red-500">{formik.errors.auth.username}</div>
-            ) : null}
           </div>
           <div className="mb-3 flex items-center">
             <label className="settings-label" htmlFor="auth.password">
@@ -287,8 +327,8 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                value={formik.values.auth.password}
-                onChange={formik.handleChange}
+                value={currentProxyConfig.auth?.password || ''}
+                onChange={handleAuthPasswordChange}
               />
               <button
                 type="button"
@@ -298,9 +338,6 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
                 {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
               </button>
             </div>
-            {formik.touched.auth?.password && formik.errors.auth?.password ? (
-              <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
-            ) : null}
           </div>
         </div>
         <div className="mb-3 flex items-center">
@@ -316,19 +353,16 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.bypassProxy || ''}
+            onChange={handleBypassProxyChange}
+            value={currentProxyConfig.bypassProxy || ''}
           />
-          {formik.touched.bypassProxy && formik.errors.bypassProxy ? (
-            <div className="ml-3 text-red-500">{formik.errors.bypassProxy}</div>
-          ) : null}
         </div>
         <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
+          <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
             Save
           </button>
         </div>
-      </form>
+      </div>
     </StyledWrapper>
   );
 };

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

@@ -1,20 +1,37 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 import StyledWrapper from './StyledWrapper';
 
 const Script = ({ collection }) => {
   const dispatch = useDispatch();
-  const requestScript = get(collection, 'root.request.script.req', '');
-  const responseScript = get(collection, 'root.request.script.res', '');
+  const [activeTab, setActiveTab] = useState('pre-request');
+  const preRequestEditorRef = useRef(null);
+  const postResponseEditorRef = useRef(null);
+  const requestScript = collection.draft?.root ? get(collection, 'draft.root.request.script.req', '') : get(collection, 'root.request.script.req', '');
+  const responseScript = collection.draft?.root ? get(collection, 'draft.root.request.script.res', '') : get(collection, 'root.request.script.res', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  // Refresh CodeMirror when tab becomes visible
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (activeTab === 'pre-request' && preRequestEditorRef.current?.editor) {
+        preRequestEditorRef.current.editor.refresh();
+      } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
+        postResponseEditorRef.current.editor.refresh();
+      }
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [activeTab]);
+
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateCollectionRequestScript({
@@ -34,42 +51,51 @@ const Script = ({ collection }) => {
   };
 
   const handleSave = () => {
-    dispatch(saveCollectionRoot(collection.uid));
+    dispatch(saveCollectionSettings(collection.uid));
   };
 
   return (
-    <StyledWrapper className="w-full flex flex-col h-full">
+    <StyledWrapper className="w-full flex flex-col h-full pt-4">
       <div className="text-xs mb-4 text-muted">
         Write pre and post-request scripts that will run before and after any request in this collection is sent.
       </div>
-      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
-        <CodeEditor
-          collection={collection}
-          value={requestScript || ''}
-          theme={displayedTheme}
-          onEdit={onRequestScriptEdit}
-          mode="javascript"
-          onSave={handleSave}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'bru']}
-        />
-      </div>
-      <div className="flex-1 mt-6">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <CodeEditor
-          collection={collection}
-          value={responseScript || ''}
-          theme={displayedTheme}
-          onEdit={onResponseScriptEdit}
-          mode="javascript"
-          onSave={handleSave}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'res', 'bru']}
-        />
-      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
+          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="pre-request" className="mt-2">
+          <CodeEditor
+            ref={preRequestEditorRef}
+            collection={collection}
+            value={requestScript || ''}
+            theme={displayedTheme}
+            onEdit={onRequestScriptEdit}
+            mode="javascript"
+            onSave={handleSave}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            showHintsFor={['req', 'bru']}
+          />
+        </TabsContent>
+
+        <TabsContent value="post-response" className="mt-2">
+          <CodeEditor
+            ref={postResponseEditorRef}
+            collection={collection}
+            value={responseScript || ''}
+            theme={displayedTheme}
+            onEdit={onResponseScriptEdit}
+            mode="javascript"
+            onSave={handleSave}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            showHintsFor={['req', 'res', 'bru']}
+          />
+        </TabsContent>
+      </Tabs>
 
       <div className="mt-12">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

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

@@ -3,13 +3,13 @@ import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 
 const Tests = ({ collection }) => {
   const dispatch = useDispatch();
-  const tests = get(collection, 'root.request.tests', '');
+  const tests = collection.draft?.root ? get(collection, 'draft.root.request.tests', '') : get(collection, 'root.request.tests', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
@@ -23,7 +23,7 @@ const Tests = ({ collection }) => {
     );
   };
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col h-full">

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

@@ -3,7 +3,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';
@@ -28,7 +28,7 @@ const VarsTable = ({ collection, vars, varType }) => {
     );
   };
 
-  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const onSave = () => dispatch(saveCollectionSettings(collection.uid));
   const handleVarChange = (e, v, type) => {
     const _var = cloneDeep(v);
     switch (type) {

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

@@ -2,14 +2,14 @@ import React from 'react';
 import get from 'lodash/get';
 import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
 
 const Vars = ({ collection }) => {
   const dispatch = useDispatch();
-  const requestVars = get(collection, 'root.request.vars.req', []);
-  const responseVars = get(collection, 'root.request.vars.res', []);
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
+  const responseVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">

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

@@ -1,9 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
 import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import toast from 'react-hot-toast';
-import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
 import { updateSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
 import { useDispatch } from 'react-redux';
 import ProxySettings from './ProxySettings';
@@ -31,61 +28,26 @@ const CollectionSettings = ({ collection }) => {
     );
   };
 
-  const root = collection?.root;
+  const root = collection?.draft?.root || collection?.root;
   const hasScripts = root?.request?.script?.res || root?.request?.script?.req;
   const hasTests = root?.request?.tests;
   const hasDocs = root?.docs;
 
-  const headers = get(collection, 'root.request.headers', []);
+  const headers = collection.draft?.root ? get(collection, 'draft.root.request.headers', []) : get(collection, 'root.request.headers', []);
   const activeHeadersCount = headers.filter((header) => header.enabled).length;
 
-  const requestVars = get(collection, 'root.request.vars.req', []);
-  const responseVars = get(collection, 'root.request.vars.res', []);
+  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
+  const responseVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
   const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
-  const authMode = get(collection, 'root.request.auth', {}).mode || 'none';
+  const authMode = (collection.draft?.root ? get(collection, 'draft.root.request.auth', {}) : get(collection, 'root.request.auth', {})).mode || 'none';
 
-  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
-  const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
-  const protobufConfig = get(collection, 'brunoConfig.protobuf', {});
+  const presets = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.presets', []) : get(collection, 'brunoConfig.presets', []);
+  const hasPresets = presets && presets.requestUrl !== '';
 
-  const onProxySettingsUpdate = (config) => {
-    const brunoConfig = cloneDeep(collection.brunoConfig);
-    brunoConfig.proxy = config;
-    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
-      .then(() => {
-        toast.success('Collection settings updated successfully.');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
-  };
-
-  const onClientCertSettingsUpdate = (config) => {
-    const brunoConfig = cloneDeep(collection.brunoConfig);
-    if (!brunoConfig.clientCertificates) {
-      brunoConfig.clientCertificates = {
-        enabled: true,
-        certs: [config]
-      };
-    } else {
-      brunoConfig.clientCertificates.certs.push(config);
-    }
-    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
-      .then(() => {
-        toast.success('Collection settings updated successfully');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
-  };
-
-  const onClientCertSettingsRemove = (config) => {
-    const brunoConfig = cloneDeep(collection.brunoConfig);
-    brunoConfig.clientCertificates.certs = brunoConfig.clientCertificates.certs.filter(
-      (item) => item.domain != config.domain
-    );
-    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
-      .then(() => {
-        toast.success('Collection settings updated successfully');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
-  };
+  const proxyConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.proxy', {}) : get(collection, 'brunoConfig.proxy', {});
+  const proxyEnabled = proxyConfig.hostname ? true : false;
+  const clientCertConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.clientCertificates.certs', []) : get(collection, 'brunoConfig.clientCertificates.certs', []);
+  const protobufConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.protobuf', {}) : get(collection, 'brunoConfig.protobuf', {});
 
   const getTabPanel = (tab) => {
     switch (tab) {
@@ -111,15 +73,12 @@ const CollectionSettings = ({ collection }) => {
         return <Presets collection={collection} />;
       }
       case 'proxy': {
-        return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
+        return <ProxySettings collection={collection} />;
       }
       case 'clientCert': {
         return (
           <ClientCertSettings
-            root={collection.pathname}
-            clientCertConfig={clientCertConfig}
-            onUpdate={onClientCertSettingsUpdate}
-            onRemove={onClientCertSettingsRemove}
+            collection={collection}
           />
         );
       }
@@ -163,10 +122,11 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
           Presets
+          {hasPresets && <StatusDot />}
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0 && <StatusDot />}
+          {Object.keys(proxyConfig).length > 0 && proxyEnabled && <StatusDot />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates

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

@@ -13,7 +13,7 @@ import {
   IconChevronDown,
   IconTerminal2,
   IconNetwork,
-  IconDashboard,
+  IconDashboard
 } from '@tabler/icons';
 import { 
   closeConsole, 

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

@@ -5,7 +5,7 @@ const StyledWrapper = styled.div`
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: ${props => props.theme.console.bg};
+    background: ${(props) => props.theme.console.bg};
   }
 
   .tab-content-area {
@@ -30,19 +30,19 @@ const StyledWrapper = styled.div`
   .section-header {
     margin-bottom: 20px;
     padding-bottom: 12px;
-    border-bottom: 1px solid ${props => props.theme.console.border};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
 
     h3 {
       margin: 0 0 4px 0;
       font-size: 16px;
       font-weight: 600;
-      color: ${props => props.theme.console.titleColor};
+      color: ${(props) => props.theme.console.titleColor};
     }
 
     p {
       margin: 0;
       font-size: 13px;
-      color: ${props => props.theme.console.textMuted};
+      color: ${(props) => props.theme.console.textMuted};
     }
   }
 
@@ -53,7 +53,7 @@ const StyledWrapper = styled.div`
       margin: 0 0 8px 0;
       font-size: 14px;
       font-weight: 600;
-      color: ${props => props.theme.console.titleColor};
+      color: ${(props) => props.theme.console.titleColor};
     }
   }
 
@@ -65,8 +65,8 @@ const StyledWrapper = styled.div`
   }
 
   .resource-card {
-    background: ${props => props.theme.console.headerBg};
-    border: 1px solid ${props => props.theme.console.border};
+    background: ${(props) => props.theme.console.headerBg};
+    border: 1px solid ${(props) => props.theme.console.border};
     border-radius: 4px;
     padding: 8px;
   }
@@ -76,7 +76,7 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 6px;
     margin-bottom: 6px;
-    color: ${props => props.theme.console.titleColor};
+    color: ${(props) => props.theme.console.titleColor};
   }
 
   .resource-title {
@@ -87,13 +87,13 @@ const StyledWrapper = styled.div`
   .resource-value {
     font-size: 18px;
     font-weight: 600;
-    color: ${props => props.theme.console.titleColor};
+    color: ${(props) => props.theme.console.titleColor};
     margin-bottom: 2px;
   }
 
   .resource-subtitle {
     font-size: 11px;
-    color: ${props => props.theme.console.buttonColor};
+    color: ${(props) => props.theme.console.buttonColor};
   }
 
   .resource-trend {
@@ -112,7 +112,7 @@ const StyledWrapper = styled.div`
     }
 
     &.stable {
-      color: ${props => props.theme.console.buttonColor};
+      color: ${(props) => props.theme.console.buttonColor};
     }
   }
 `;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 import {
@@ -6,13 +6,44 @@ import {
   IconDatabase,
   IconClock,
   IconServer,
-  IconChartLine,
+  IconChartLine
 } from '@tabler/icons';
 
 const Performance = () => {
-  const { systemResources } = useSelector(state => state.performance);
+  const { systemResources } = useSelector((state) => state.performance);
 
-  const formatBytes = bytes => {
+  useEffect(() => {
+    const { ipcRenderer } = window;
+
+    if (!ipcRenderer) {
+      console.warn('IPC Renderer not available');
+      return;
+    }
+
+    const startMonitoring = async () => {
+      try {
+        await ipcRenderer.invoke('renderer:start-system-monitoring', 2000);
+      } catch (error) {
+        console.error('Failed to start system monitoring:', error);
+      }
+    };
+
+    const stopMonitoring = async () => {
+      try {
+        await ipcRenderer.invoke('renderer:stop-system-monitoring');
+      } catch (error) {
+        console.error('Failed to stop system monitoring:', error);
+      }
+    };
+
+    startMonitoring();
+
+    return () => {
+      stopMonitoring();
+    };
+  }, []);
+
+  const formatBytes = (bytes) => {
     if (bytes === 0) return '0 Bytes';
     const k = 1024;
     const sizes = ['Bytes', 'KB', 'MB', 'GB'];
@@ -20,7 +51,7 @@ const Performance = () => {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   };
 
-  const formatUptime = seconds => {
+  const formatUptime = (seconds) => {
     const hours = Math.floor(seconds / 3600);
     const minutes = Math.floor((seconds % 3600) / 60);
     const secs = Math.floor(seconds % 60);

packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/StyledWrapper.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  /* Environment item styling */
+  .environment-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    padding: 0.375rem 0.5rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.15s ease;
+
+    .environment-name {
+      color: ${(props) => props.theme.text};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/index.js

@@ -0,0 +1,269 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import Portal from 'components/Portal/index';
+import Modal from 'components/Modal';
+import { exportBrunoEnvironment } from 'utils/exporters/bruno-environment';
+import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
+import { useDispatch } from 'react-redux';
+import toast from 'react-hot-toast';
+import StyledWrapper from './StyledWrapper';
+
+const ExportEnvironmentModal = ({ onClose, environments = [], environmentType }) => {
+  const dispatch = useDispatch();
+
+  // Helper function to truncate environment names
+  const truncateEnvName = (name) => {
+    if (name.length > 40) {
+      return name.substring(0, 40) + '...';
+    }
+    return name;
+  };
+
+  const [isExporting, setIsExporting] = useState(false);
+  const [filePath, setFilePath] = useState('');
+  const [selectedEnvironments, setSelectedEnvironments] = useState({});
+  const [exportFormat, setExportFormat] = useState(environments.length > 1 ? 'single-file' : 'single-object');
+
+  // Initialize selected environments
+  useEffect(() => {
+    const initialSelection = {};
+
+    // Add all environments and select them by default
+    environments.forEach((env) => {
+      initialSelection[env.uid] = true;
+    });
+
+    setSelectedEnvironments(initialSelection);
+  }, [environments]);
+
+  useEffect(() => {
+    const selectedCount = Object.values(selectedEnvironments).filter(Boolean).length;
+    if (selectedCount <= 1) {
+      setExportFormat('single-object');
+    }
+    if (exportFormat === 'single-object' && selectedCount > 1) {
+      setExportFormat('single-file');
+    }
+  }, [selectedEnvironments]);
+
+  const browse = () => {
+    dispatch(browseDirectory())
+      .then((dirPath) => {
+        if (typeof dirPath === 'string') {
+          setFilePath(dirPath);
+        }
+      })
+      .catch((error) => {
+        setFilePath('');
+        console.error(error);
+      });
+  };
+
+  const handleEnvironmentToggle = (envUid) => {
+    setSelectedEnvironments((prev) => {
+      const newSelection = {
+        ...prev,
+        [envUid]: !prev[envUid]
+      };
+      return newSelection;
+    });
+  };
+
+  const handleSelectAll = () => {
+    const allSelected = environments.every((env) => selectedEnvironments[env.uid]) || false;
+
+    const newSelection = environments.reduce((acc, env) => ({
+      ...acc,
+      [env.uid]: !allSelected
+    }), {}) || {};
+
+    setSelectedEnvironments(newSelection);
+  };
+
+  // Memoized selected environments and count
+  const selectedEnvs = useMemo(() => {
+    return environments.filter((env) => selectedEnvironments[env.uid]) || [];
+  }, [environments, selectedEnvironments]);
+
+  const selectedCount = selectedEnvs.length;
+
+  const exportFormatOptions = useMemo(() => {
+    const isMultiple = selectedCount > 1;
+
+    if (isMultiple) {
+      return [
+        { value: 'single-file', label: 'Single JSON file', description: 'All environments in one JSON array' },
+        { value: 'folder', label: 'Separate files in folder', description: 'Each environment as a separate JSON file', disabled: false }
+      ];
+    }
+
+    return [
+      { value: 'single-object', label: 'Single JSON file', description: 'Export as a single environment JSON object' },
+      { value: 'folder', label: 'Separate files in folder', description: 'Each environment as a separate JSON file', disabled: true }
+    ];
+  }, [selectedCount, exportFormat]);
+
+  const handleExport = async () => {
+    try {
+      setIsExporting(true);
+
+      if (!filePath) {
+        toast.error('Please select a location to save the files');
+        return;
+      }
+
+      if (selectedCount === 0) {
+        toast.error('Please select at least one environment to export');
+        return;
+      }
+
+      await exportBrunoEnvironment({ environments: selectedEnvs, environmentType, filePath, exportFormat });
+
+      const successMessage = exportFormat === 'folder'
+        ? `Environments exported successfully to bruno-${environmentType}-environments folder`
+        : 'Environment(s) exported successfully';
+      toast.success(successMessage);
+      onClose();
+    } catch (error) {
+      console.error('Export error:', error);
+      toast.error(error.message || 'Failed to export environments');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <Portal>
+      <StyledWrapper>
+        <Modal
+          size="md"
+          title="Export Environments"
+          hideFooter={true}
+          handleCancel={onClose}
+        >
+          <div className="py-2">
+            {/* Environments Section */}
+            <div className="mb-4">
+              {environments && environments.length > 0 ? (
+                <div className="flex flex-col h-full">
+                  <div className="flex justify-between items-center mb-2 pb-1">
+                    <h3 className="font-semibold text-sm text-theme">
+                      {environmentType === 'global' ? 'Global Environments' : 'Collection Environments'}
+                    </h3>
+                    <button
+                      type="button"
+                      onClick={handleSelectAll}
+                      className="text-xs text-link px-1 py-0.5 rounded transition-colors"
+                    >
+                      {environments.every((env) => selectedEnvironments[env.uid]) ? 'Deselect All' : 'Select All'}
+                    </button>
+                  </div>
+                  <div className="flex flex-col gap-1 flex-1 overflow-y-auto">
+                    {environments.map((env) => (
+                      <label key={env.uid} className="environment-item">
+                        <input
+                          type="checkbox"
+                          checked={selectedEnvironments[env.uid] || false}
+                          onChange={() => handleEnvironmentToggle(env.uid)}
+                          disabled={isExporting}
+                          className="w-3.5 h-3.5 flex-shrink-0"
+                        />
+                        <span className="environment-name">{truncateEnvName(env.name)}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-col h-full">
+                  <div className="flex justify-between items-center mb-2 pb-1">
+                    <h3 className="font-semibold text-sm text-theme">
+                      {environmentType === 'global' ? 'Global Environments' : 'Collection Environments'}
+                    </h3>
+                  </div>
+                  <div className="flex items-center justify-center flex-1 p-4 text-center">
+                    <span className="text-xs text-muted">
+                      No {environmentType === 'global' ? 'global' : 'collection'} environments
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Export Format Section */}
+            {selectedCount > 0 && (
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-2 text-theme">
+                  Export Format
+                </label>
+                <div className="space-y-2">
+                  {exportFormatOptions.map((option) => (
+                    <label key={option.value} className={`flex items-start p-2 rounded transition-colors ${option.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}>
+                      <input
+                        type="radio"
+                        name="exportFormat"
+                        value={option.value}
+                        checked={exportFormat === option.value}
+                        onChange={(e) => setExportFormat(e.target.value)}
+                        disabled={isExporting || option.disabled}
+                        className={`mt-0.5 mr-3 w-4 h-4 ${option.disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+                      />
+                      <div>
+                        <div className={`text-sm font-medium ${option.disabled ? 'text-muted' : 'text-theme'}`}>{option.label}</div>
+                        <div className="text-xs text-muted">{option.description}</div>
+                      </div>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Location Input Section */}
+            <div className="mb-4">
+              <label htmlFor="export-location" className="block text-sm font-medium mb-2 text-theme">
+                Location
+              </label>
+              <div className="flex flex-col relative items-center">
+                <input
+                  id="export-location"
+                  type="text"
+                  className={`flex-1 textbox w-full ${isExporting || selectedCount <= 0 ? '' : 'cursor-pointer'}`}
+                  title={filePath}
+                  value={filePath}
+                  onClick={browse}
+                  onChange={(e) => setFilePath(e.target.value)}
+                  disabled={isExporting || selectedCount <= 0}
+                  placeholder="Select a target location"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck="false"
+                />
+              </div>
+            </div>
+
+            {/* Export Actions */}
+            <div className="flex justify-end gap-2 mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
+              <button
+                type="button"
+                className="btn btn-sm btn-cancel mt-2 flex items-center"
+                onClick={onClose}
+                disabled={isExporting}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="btn btn-sm btn-secondary mt-2 flex items-center"
+                onClick={handleExport}
+                disabled={isExporting || selectedCount === 0}
+              >
+                {isExporting ? 'Exporting...' : `Export ${selectedCount || ''} Environment${selectedCount !== 1 ? 's' : ''}`}
+              </button>
+            </div>
+          </div>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
+  );
+};
+
+export default ExportEnvironmentModal;

packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/index.js

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import Portal from 'components/Portal';
+import Modal from 'components/Modal';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+import importPostmanEnvironment from 'utils/importers/postman-environment';
+import importBrunoEnvironment from 'utils/importers/bruno-environment';
+import { readMultipleFiles } from 'utils/importers/file-reader';
+import { importEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { toastError } from 'utils/common/error';
+import { IconFileImport } from '@tabler/icons';
+
+const ImportEnvironmentModal = ({ type = 'collection', collection, onClose, onEnvironmentCreated }) => {
+  const dispatch = useDispatch();
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const isGlobal = type === 'global';
+
+  // Validate required props
+  if (!isGlobal && !collection) {
+    console.error('ImportEnvironmentModal: collection prop is required when type is "collection"');
+    return null;
+  }
+  const modalTitle = isGlobal ? 'Import Global Environment' : 'Import Environment';
+  const modalTestId = isGlobal ? 'import-global-environment-modal' : 'import-environment-modal';
+  const importTestId = isGlobal ? 'import-global-environment' : 'import-environment';
+
+  const processEnvironments = async (environments, successMessage) => {
+    const validEnvironments = environments.filter((env) => {
+      if (env.name && env.name !== 'undefined') {
+        return true;
+      } else {
+        toast.error('Failed to import environment: env has no name');
+        return false;
+      }
+    });
+
+    if (validEnvironments.length === 0) {
+      toast.error('No valid environments found to import');
+      return;
+    }
+
+    try {
+      // Process environments sequentially to ensure unique name checking considers previously imported environments
+      let importedCount = 0;
+      for (const environment of validEnvironments) {
+        const action = isGlobal
+          ? addGlobalEnvironment({ name: environment.name, variables: environment.variables })
+          : importEnvironment({ name: environment.name, variables: environment.variables, collectionUid: collection?.uid });
+
+        await dispatch(action);
+        importedCount++;
+      }
+
+      toast.success(`${importedCount > 1 ? `${importedCount} environments` : 'Environment'} imported successfully`);
+    } catch (error) {
+      toast.error('An error occurred while importing the environment(s)');
+      console.error(error);
+      throw error;
+    }
+  };
+
+  const detectEnvironmentFormat = (data) => {
+    // bruno environment `single-object` export type
+    if (data.info && data.info.type === 'bruno-environment') {
+      return 'bruno';
+    } else if (Array.isArray(data)) {
+      // bruno environment`single-file` export type
+      return data.some((env) => env.info && env.info.type === 'bruno-environment') ? 'bruno' : 'postman';
+    } else if (data.id && data.values) {
+      // postman environment
+      return 'postman';
+    }
+    return 'bruno';
+  };
+
+  const handleImportEnvironment = async (files) => {
+    try {
+      // Read and parse all files
+      const parsedFiles = await readMultipleFiles(Array.from(files));
+
+      // Detect format from first file's content
+      const format = detectEnvironmentFormat(parsedFiles[0].content);
+      let environments;
+
+      if (format === 'postman') {
+        environments = await importPostmanEnvironment(parsedFiles);
+      } else {
+        environments = await importBrunoEnvironment(parsedFiles);
+      }
+
+      await processEnvironments(environments);
+      onClose();
+      if (onEnvironmentCreated) {
+        onEnvironmentCreated();
+      }
+    } catch (err) {
+      toastError(err, 'Import environment failed');
+    }
+  };
+
+  const handleFileSelect = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.accept = '.json';
+    input.onchange = (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        handleImportEnvironment(e.target.files);
+      }
+    };
+    input.click();
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      handleImportEnvironment(files);
+    }
+  };
+
+  return (
+    <Portal>
+      <Modal size="md" title={modalTitle} hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId={modalTestId}>
+        <div className="py-2">
+          <div
+            className={`flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed p-12 text-center cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 ${
+              isDragOver
+                ? 'border-amber-400 bg-amber-50 dark:bg-amber-900/20'
+                : 'border-zinc-300 dark:border-zinc-400 hover:border-zinc-400'
+            }`}
+            onClick={handleFileSelect}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            data-testid={importTestId}
+          >
+            <IconFileImport size={64} />
+            <span className="mt-2 block text-sm font-semibold">
+              {isDragOver ? 'Drop your environment files here' : 'Import your environments'}
+            </span>
+            <span className="mt-1 block text-xs text-muted">
+              Drag & drop JSON files/folders or click to browse. Supports both Bruno and Postman formats.
+            </span>
+          </div>
+        </div>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default ImportEnvironmentModal;

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

@@ -11,9 +11,8 @@ import EnvironmentListContent from './EnvironmentListContent/index';
 import EnvironmentSettings from '../EnvironmentSettings';
 import GlobalEnvironmentSettings from 'components/GlobalEnvironments/EnvironmentSettings';
 import CreateEnvironment from '../EnvironmentSettings/CreateEnvironment';
-import ImportEnvironment from '../EnvironmentSettings/ImportEnvironment';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import CreateGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment';
-import ImportGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/ImportEnvironment';
 import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';
 
@@ -242,7 +241,8 @@ const EnvironmentSelector = ({ collection }) => {
       )}
 
       {showImportGlobalModal && (
-        <ImportGlobalEnvironment
+        <ImportEnvironmentModal
+          type="global"
           onClose={() => setShowImportGlobalModal(false)}
           onEnvironmentCreated={() => {
             setShowGlobalSettings(true);
@@ -261,7 +261,8 @@ const EnvironmentSelector = ({ collection }) => {
       )}
 
       {showImportCollectionModal && (
-        <ImportEnvironment
+        <ImportEnvironmentModal
+          type="collection"
           collection={collection}
           onClose={() => setShowImportCollectionModal(false)}
           onEnvironmentCreated={() => {

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

@@ -185,7 +185,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
           </thead>
           <tbody>
             {formik.values.map((variable, index) => (
-              <tr key={variable.uid}>
+              <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
                 <td className="text-center">
                   <input
                     type="checkbox"

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

@@ -4,6 +4,7 @@ import CopyEnvironment from '../../CopyEnvironment';
 import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
+import ToolHint from 'components/ToolHint/index';
 
 const EnvironmentDetails = ({ environment, collection, setIsModified, onClose }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
@@ -30,10 +31,22 @@ const EnvironmentDetails = ({ environment, collection, setIsModified, onClose })
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
           <span className="ml-1 font-semibold break-all">{environment.name}</span>
         </div>
-        <div className="flex gap-x-4 pl-4">
-          <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
-          <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
-          <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} />
+        <div className="flex gap-x-2 pl-2">
+          <ToolHint text="Edit Environment" toolhintId={`edit-${environment.uid}`}>
+            <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
+          </ToolHint>
+          <ToolHint text="Copy Environment" toolhintId={`copy-${environment.uid}`}>
+            <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
+          </ToolHint>
+          <ToolHint text="Delete Environment" toolhintId={`delete-${environment.uid}`}>
+            <IconTrash
+              className="cursor-pointer"
+              size={20}
+              strokeWidth={1.5}
+              onClick={() => setOpenDeleteModal(true)}
+              data-testid="delete-environment-button"
+            />
+          </ToolHint>
         </div>
       </div>
 

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

@@ -3,15 +3,15 @@ import { findEnvironmentInCollection } from 'utils/collections';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
 import CreateEnvironment from '../CreateEnvironment';
-import { IconDownload, IconShieldLock } from '@tabler/icons';
-import ImportEnvironment from '../ImportEnvironment';
+import { IconDownload, IconShieldLock, IconUpload } from '@tabler/icons';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from './ConfirmSwitchEnv';
 import ToolHint from 'components/ToolHint';
 import { isEqual } from 'lodash';
 
-const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified, onClose }) => {
+const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified, onClose, setShowExportModal }) => {
   const { environments } = collection;
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
@@ -96,7 +96,7 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
   return (
     <StyledWrapper>
       {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
-      {openImportModal && <ImportEnvironment collection={collection} onClose={() => setOpenImportModal(false)} />}
+      {openImportModal && <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setOpenImportModal(false)} />}
       {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
 
       <div className="flex">
@@ -129,6 +129,10 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
                 <IconDownload size={12} strokeWidth={2} />
                 <span className="label ml-1 text-xs">Import</span>
               </div>
+              <div className="flex items-center mt-2" onClick={() => setShowExportModal(true)}>
+                <IconUpload size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Export</span>
+              </div>
               <div className="flex items-center mt-2" onClick={() => handleSecretsClick()}>
                 <IconShieldLock size={12} strokeWidth={2} />
                 <span className="label ml-1 text-xs">Managing Secrets</span>

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

@@ -1,64 +0,0 @@
-import React from 'react';
-import Portal from 'components/Portal';
-import Modal from 'components/Modal';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
-import importPostmanEnvironment from 'utils/importers/postman-environment';
-import { importEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { toastError } from 'utils/common/error';
-import { IconDatabaseImport } from '@tabler/icons';
-
-const ImportEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
-  const dispatch = useDispatch();
-
-  const handleImportPostmanEnvironment = () => {
-    importPostmanEnvironment()
-      .then((environments) => {
-        environments
-          .filter((env) =>
-            env.name && env.name !== 'undefined'
-              ? true
-              : () => {
-                  toast.error('Failed to import environment: env has no name');
-                  return false;
-                }
-          )
-          .map((environment) => {
-            dispatch(importEnvironment(environment.name, environment.variables, collection.uid))
-              .then(() => {
-                toast.success('Environment imported successfully');
-              })
-              .catch((error) => {
-                toast.error('An error occurred while importing the environment');
-                console.error(error);
-              });
-          });
-      })
-      .then(() => {
-        onClose();
-        // Call the callback if provided
-        if (onEnvironmentCreated) {
-          onEnvironmentCreated();
-        }
-      })
-      .catch((err) => toastError(err, 'Postman Import environment failed'));
-  };
-
-  return (
-    <Portal>
-      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId="import-environment-modal">
-        <button
-          type="button"
-          onClick={handleImportPostmanEnvironment}
-          className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
-          data-testid="import-postman-environment"
-        >
-          <IconDatabaseImport size={64} />
-          <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>
-        </button>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default ImportEnvironment;

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

@@ -3,8 +3,9 @@ import React, { useState } from 'react';
 import CreateEnvironment from './CreateEnvironment';
 import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
-import ImportEnvironment from './ImportEnvironment';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import { IconFileAlert } from '@tabler/icons';
+import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
 
 export const SharedButton = ({ children, className, onClick }) => {
   return (
@@ -47,6 +48,7 @@ const EnvironmentSettings = ({ collection, onClose }) => {
   const { environments } = collection;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [tab, setTab] = useState('default');
+  const [showExportModal, setShowExportModal] = useState(false);
   if (!environments || !environments.length) {
     return (
       <StyledWrapper>
@@ -54,7 +56,7 @@ const EnvironmentSettings = ({ collection, onClose }) => {
           {tab === 'create' ? (
             <CreateEnvironment collection={collection} onClose={() => setTab('default')} />
           ) : tab === 'import' ? (
-            <ImportEnvironment collection={collection} onClose={() => setTab('default')} />
+            <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setTab('default')} />
           ) : (
             <DefaultTab setTab={setTab} />
           )}
@@ -64,16 +66,26 @@ const EnvironmentSettings = ({ collection, onClose }) => {
   }
 
   return (
-    <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
-      <EnvironmentList
-        selectedEnvironment={selectedEnvironment}
-        setSelectedEnvironment={setSelectedEnvironment}
-        collection={collection}
-        isModified={isModified}
-        setIsModified={setIsModified}
-        onClose={onClose}
-      />
-    </Modal>
+    <StyledWrapper>
+      <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
+        <EnvironmentList
+          selectedEnvironment={selectedEnvironment}
+          setSelectedEnvironment={setSelectedEnvironment}
+          collection={collection}
+          isModified={isModified}
+          setIsModified={setIsModified}
+          onClose={onClose}
+          setShowExportModal={setShowExportModal}
+        />
+      </Modal>
+      {showExportModal && (
+        <ExportEnvironmentModal
+          onClose={() => setShowExportModal(false)}
+          environments={collection.environments}
+          environmentType="collection"
+        />
+      )}
+    </StyledWrapper>
   );
 };
 

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

@@ -5,7 +5,7 @@ import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
 
-const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false }) => {
+const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false, readOnly = false }) => {
   const dispatch = useDispatch();
   const filenames = (isSingleFilePicker ? [value] : value || [])
     .filter((v) => v != null && v != '')
@@ -50,20 +50,24 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
     return filenames.length + ' file(s) selected';
   };
 
+  const buttonClass = `btn btn-secondary px-1 ${readOnly ? 'view-mode' : 'edit-mode'}`;
+
   return filenames.length > 0 ? (
     <div
-      className="btn btn-secondary px-1"
+      className={buttonClass}
       style={{ fontWeight: 400, width: '100%', textOverflow: 'ellipsis', overflowX: 'hidden' }}
       title={title}
     >
-      <button className="align-middle" onClick={clear}>
-        <IconX size={18} />
-      </button>
-      &nbsp;
+      {!readOnly && (
+        <button className="align-middle" onClick={clear}>
+          <IconX size={18} />
+        </button>
+      )}
+      {!readOnly && <>&nbsp;</>}
       {renderButtonText(filenames)}
     </div>
   ) : (
-    <button className="btn btn-secondary px-1" style={{ width: '100%' }} onClick={browse}>
+    <button className={buttonClass} style={{ width: '100%' }} onClick={!readOnly ? browse : undefined} disabled={readOnly}>
       {isSingleFilePicker ? 'Select File' : 'Select Files'}
     </button>
   );

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

@@ -17,7 +17,7 @@ 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';
+import { humanizeRequestAuthMode, getTreePathFromCollectionToItem } from 'utils/collections/index';
 
 const GrantTypeComponentMap = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -26,7 +26,8 @@ const GrantTypeComponentMap = ({ collection, folder }) => {
     dispatch(saveFolderRoot(collection.uid, folder.uid));
   };
 
-  let request = get(folder, 'root.request', {});
+  const folderRoot = folder?.draft || folder?.root;
+  let request = get(folderRoot, 'request', {});
   const grantType = get(request, 'auth.oauth2.grantType', 'authorization_code');
 
   switch (grantType) {
@@ -45,23 +46,15 @@ const GrantTypeComponentMap = ({ collection, folder }) => {
 
 const Auth = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  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 folderRoot = folder?.draft || folder?.root;
+  let request = get(folderRoot, 'request', {});
+  const authMode = get(folderRoot, 'request.auth.mode');
 
   const getEffectiveAuthSource = () => {
     if (authMode !== 'inherit') return null;
 
-    const collectionAuth = get(collection, 'root.request.auth');
+    const collectionRoot = collection?.draft?.root || collection?.root || {};
+    const collectionAuth = get(collectionRoot, 'request.auth');
     let effectiveSource = {
       type: 'collection',
       name: 'Collection',
@@ -69,14 +62,15 @@ const Auth = ({ collection, folder }) => {
     };
 
     // Get path from collection to current folder
-    const folderTreePath = getTreePathFromCollectionToFolder(collection, folder);
+    const folderTreePath = getTreePathFromCollectionToItem(collection, folder);
     
     // Check parent folders to find closest auth configuration
     // Skip the last item which is the current folder
     for (let i = 0; i < folderTreePath.length - 1; i++) {
       const parentFolder = folderTreePath[i];
       if (parentFolder.type === 'folder') {
-        const folderAuth = get(parentFolder, 'root.request.auth');
+        const parentFolderRoot = parentFolder?.draft || parentFolder?.root;
+        const folderAuth = get(parentFolderRoot, 'request.auth');
         if (folderAuth && folderAuth.mode && folderAuth.mode !== 'inherit') {
           effectiveSource = {
             type: 'folder',

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

@@ -11,7 +11,7 @@ const AuthMode = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = get(folder, 'root.request.auth.mode');
+  const authMode = folder.draft ? get(folder, 'draft.request.auth.mode') : get(folder, 'root.request.auth.mode');
 
   const Icon = forwardRef((props, ref) => {
     return (

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

@@ -14,7 +14,7 @@ const Documentation = ({ collection, folder }) => {
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
   const [isEditing, setIsEditing] = useState(false);
-  const docs = get(folder, 'root.docs', '');
+  const docs = folder.draft ? get(folder, 'draft.docs', '') : get(folder, 'root.docs', '');
 
   const toggleViewMode = () => {
     setIsEditing((prev) => !prev);

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

@@ -16,7 +16,7 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 const Headers = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const headers = get(folder, 'root.request.headers', []);
+  const headers = folder.draft ? get(folder, 'draft.request.headers', []) : get(folder, 'root.request.headers', []);
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
   const toggleBulkEditMode = () => {

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

@@ -1,20 +1,37 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateFolderRequestScript, updateFolderResponseScript } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 import StyledWrapper from './StyledWrapper';
 
 const Script = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  const requestScript = get(folder, 'root.request.script.req', '');
-  const responseScript = get(folder, 'root.request.script.res', '');
+  const [activeTab, setActiveTab] = useState('pre-request');
+  const preRequestEditorRef = useRef(null);
+  const postResponseEditorRef = useRef(null);
+  const requestScript = folder.draft ? get(folder, 'draft.request.script.req', '') : get(folder, 'root.request.script.req', '');
+  const responseScript = folder.draft ? get(folder, 'draft.request.script.res', '') : get(folder, 'root.request.script.res', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  // Refresh CodeMirror when tab becomes visible
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (activeTab === 'pre-request' && preRequestEditorRef.current?.editor) {
+        preRequestEditorRef.current.editor.refresh();
+      } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
+        postResponseEditorRef.current.editor.refresh();
+      }
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [activeTab]);
+
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateFolderRequestScript({
@@ -40,38 +57,47 @@ const Script = ({ collection, folder }) => {
   };
 
   return (
-    <StyledWrapper className="w-full flex flex-col h-full">
+    <StyledWrapper className="w-full flex flex-col h-full pt-4">
       <div className="text-xs mb-4 text-muted">
         Pre and post-request scripts that will run before and after any request inside this folder is sent.
       </div>
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Pre Request</div>
-        <CodeEditor
-          collection={collection}
-          value={requestScript || ''}
-          theme={displayedTheme}
-          onEdit={onRequestScriptEdit}
-          mode="javascript"
-          onSave={handleSave}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'bru']}
-        />
-      </div>
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Post Response</div>
-        <CodeEditor
-          collection={collection}
-          value={responseScript || ''}
-          theme={displayedTheme}
-          onEdit={onResponseScriptEdit}
-          mode="javascript"
-          onSave={handleSave}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'res', 'bru']}
-        />
-      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
+          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="pre-request" className="mt-2">
+          <CodeEditor
+            ref={preRequestEditorRef}
+            collection={collection}
+            value={requestScript || ''}
+            theme={displayedTheme}
+            onEdit={onRequestScriptEdit}
+            mode="javascript"
+            onSave={handleSave}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            showHintsFor={['req', 'bru']}
+          />
+        </TabsContent>
+
+        <TabsContent value="post-response" className="mt-2">
+          <CodeEditor
+            ref={postResponseEditorRef}
+            collection={collection}
+            value={responseScript || ''}
+            theme={displayedTheme}
+            onEdit={onResponseScriptEdit}
+            mode="javascript"
+            onSave={handleSave}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            showHintsFor={['req', 'res', 'bru']}
+          />
+        </TabsContent>
+      </Tabs>
 
       <div className="mt-12">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

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

@@ -9,7 +9,7 @@ import StyledWrapper from './StyledWrapper';
 
 const Tests = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  const tests = get(folder, 'root.request.tests', '');
+  const tests = folder.draft ? get(folder, 'draft.request.tests', '') : get(folder, 'root.request.tests', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);

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

@@ -7,8 +7,8 @@ import { useDispatch } from 'react-redux';
 
 const Vars = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  const requestVars = get(folder, 'root.request.vars.req', []);
-  const responseVars = get(folder, 'root.request.vars.res', []);
+  const requestVars = folder.draft ? get(folder, 'draft.request.vars.req', []) : get(folder, 'root.request.vars.req', []);
+  const responseVars = folder.draft ? get(folder, 'draft.request.vars.res', []) : get(folder, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
   return (
     <StyledWrapper className="w-full flex flex-col">

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

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

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

@@ -18,7 +18,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const addButtonRef = useRef(null);
-  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector(state => state.globalEnvironments);
+  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
 
   let _collection = cloneDeep(collection);
 
@@ -125,7 +125,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
           </thead>
           <tbody>
             {formik.values.map((variable, index) => (
-              <tr key={variable.uid}>
+              <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
                 <td className="text-center">
                   <input
                     type="checkbox"
@@ -136,7 +136,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
                   />
                 </td>
                 <td>
-                  <div className="flex items-center">
+                  <div className="flex items-center" data-testid={`env-var-name-${index}`}>
                     <input
                       type="text"
                       autoComplete="off"
@@ -153,7 +153,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
                   </div>
                 </td>
                 <td className="flex flex-row flex-nowrap items-center">
-                  <div className="overflow-hidden grow w-full relative">
+                  <div className="overflow-hidden grow w-full relative" data-testid={`env-var-value-${index}`}>
                     <MultiLineEditor
                       theme={storedTheme}
                       collection={_collection}

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

@@ -4,8 +4,9 @@ import CopyEnvironment from '../../CopyEnvironment';
 import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
+import ToolHint from 'components/ToolHint/index';
 
-const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
+const EnvironmentDetails = ({ environment, setIsModified, collection, allEnvironments }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [openCopyModal, setOpenCopyModal] = useState(false);
@@ -29,15 +30,26 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
           <span className="ml-1 font-semibold break-all">{environment.name}</span>
         </div>
-        <div className="flex gap-x-4 pl-4">
-          <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
-          <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
-          <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} />
+        <div className="flex gap-x-2 pl-2">
+          <ToolHint text="Edit Environment" toolhintId={`edit-${environment.uid}`}>
+            <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
+          </ToolHint>
+          <ToolHint text="Copy Environment" toolhintId={`copy-${environment.uid}`}>
+            <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
+          </ToolHint>
+          <ToolHint text="Delete Environment" toolhintId={`delete-${environment.uid}`}>
+            <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} data-testid="delete-environment-button" />
+          </ToolHint>
         </div>
       </div>
 
       <div>
-        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
+        <EnvironmentVariables
+          environment={environment}
+          setIsModified={setIsModified}
+          collection={collection}
+          allEnvironments={allEnvironments}
+        />
       </div>
     </div>
   );

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

@@ -2,15 +2,15 @@ import React, { useEffect, useState } from 'react';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
 import CreateEnvironment from '../CreateEnvironment';
-import { IconDownload, IconShieldLock } from '@tabler/icons';
+import { IconDownload, IconShieldLock, IconUpload } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from './ConfirmSwitchEnv';
 import ManageSecrets from 'components/Environments/EnvironmentSettings/ManageSecrets/index';
-import ImportEnvironment from '../ImportEnvironment';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import { isEqual } from 'lodash';
 import ToolHint from 'components/ToolHint/index';
 
-const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection }) => {
+const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection, setShowExportModal }) => {
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
   const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
@@ -38,7 +38,7 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
       return;
     }
 
-    const environment = environments?.find(env => env.uid === activeEnvironmentUid) || environments?.[0];
+    const environment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0] || null;
 
     setSelectedEnvironment(environment);
     setOriginalEnvironmentVariables(environment?.variables || []);
@@ -90,6 +90,12 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
     setOpenManageSecretsModal(true);
   };
 
+  const handleExportClick = () => {
+    if (setShowExportModal) {
+      setShowExportModal(true);
+    }
+  };
+
   const handleConfirmSwitch = (saveChanges) => {
     if (!saveChanges) {
       setSwitchEnvConfirmClose(false);
@@ -99,7 +105,7 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
   return (
     <StyledWrapper>
       {openCreateModal && <CreateEnvironment onClose={() => setOpenCreateModal(false)} />}
-      {openImportModal && <ImportEnvironment onClose={() => setOpenImportModal(false)} />}
+      {openImportModal && <ImportEnvironmentModal type="global" onClose={() => setOpenImportModal(false)} />}
       {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
 
       <div className="flex">
@@ -132,6 +138,10 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
                 <IconDownload size={12} strokeWidth={2} />
                 <span className="label ml-1 text-xs">Import</span>
               </div>
+              <div className="flex items-center mt-2" onClick={() => handleExportClick()}>
+                <IconUpload size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Export</span>
+              </div>
               <div className="flex items-center mt-2" onClick={() => handleSecretsClick()}>
                 <IconShieldLock size={12} strokeWidth={2} />
                 <span className="label ml-1 text-xs">Managing Secrets</span>
@@ -144,6 +154,7 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
           setIsModified={setIsModified}
           originalEnvironmentVariables={originalEnvironmentVariables}
           collection={collection}
+          allEnvironments={environments}
         />
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/ImportEnvironment/index.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import Portal from 'components/Portal';
-import Modal from 'components/Modal';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
-import importPostmanEnvironment from 'utils/importers/postman-environment';
-import { toastError } from 'utils/common/error';
-import { IconDatabaseImport } from '@tabler/icons';
-import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import { uuid } from 'utils/common/index';
-
-const ImportEnvironment = ({ onClose, onEnvironmentCreated }) => {
-  const dispatch = useDispatch();
-
-  const handleImportPostmanEnvironment = () => {
-    importPostmanEnvironment()
-      .then((environments) => {
-        environments
-          .filter((env) =>
-            env.name && env.name !== 'undefined'
-              ? true
-              : () => {
-                  toast.error('Failed to import environment: env has no name');
-                  return false;
-                }
-          )
-          .map((environment) => {
-            dispatch(addGlobalEnvironment({ name: environment.name, variables: environment.variables }))
-              .then(() => {
-                toast.success('Global Environment imported successfully');
-              })
-              .catch((error) => {
-                toast.error('An error occurred while importing the environment');
-                console.error(error);
-              });
-          });
-      })
-      .then(() => {
-        onClose();
-        // Call the callback if provided
-        if (onEnvironmentCreated) {
-          onEnvironmentCreated();
-        }
-      })
-      .catch((err) => toastError(err, 'Postman Import environment failed'));
-  };
-
-  return (
-    <Portal>
-      <Modal size="sm" title="Import Global Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId="import-global-environment-modal">
-        <button
-          type="button"
-          onClick={handleImportPostmanEnvironment}
-          className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
-          data-testid="import-postman-global-environment"
-        >
-          <IconDatabaseImport size={64} />
-          <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>
-        </button>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default ImportEnvironment;

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

@@ -4,7 +4,8 @@ import CreateEnvironment from './CreateEnvironment';
 import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
 import { IconFileAlert } from '@tabler/icons';
-import ImportEnvironment from './ImportEnvironment/index';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
+import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
 
 export const SharedButton = ({ children, className, onClick }) => {
   return (
@@ -44,6 +45,7 @@ const EnvironmentSettings = ({ globalEnvironments, collection, activeGlobalEnvir
   const environments = globalEnvironments;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [tab, setTab] = useState('default');
+  const [showExportModal, setShowExportModal] = useState(false);
   if (!environments || !environments.length) {
     return (
       <StyledWrapper>
@@ -51,7 +53,7 @@ const EnvironmentSettings = ({ globalEnvironments, collection, activeGlobalEnvir
           {tab === 'create' ? (
             <CreateEnvironment onClose={() => setTab('default')} />
           ) : tab === 'import' ? (
-            <ImportEnvironment onClose={() => setTab('default')} />
+            <ImportEnvironmentModal type="global" onClose={() => setTab('default')} />
           ) : (
             <DefaultTab setTab={setTab} />
           )}
@@ -61,17 +63,27 @@ const EnvironmentSettings = ({ globalEnvironments, collection, activeGlobalEnvir
   }
 
   return (
-    <Modal size="lg" title="Global Environments" handleCancel={onClose} hideFooter={true}>
-      <EnvironmentList
-        environments={globalEnvironments}
-        activeEnvironmentUid={activeGlobalEnvironmentUid}
-        selectedEnvironment={selectedEnvironment}
-        setSelectedEnvironment={setSelectedEnvironment}
-        isModified={isModified}
-        setIsModified={setIsModified}
-        collection={collection}
-      />
-    </Modal>
+    <StyledWrapper>
+      <Modal size="lg" title="Global Environments" handleCancel={onClose} hideFooter={true}>
+        <EnvironmentList
+          environments={globalEnvironments}
+          activeEnvironmentUid={activeGlobalEnvironmentUid}
+          selectedEnvironment={selectedEnvironment}
+          setSelectedEnvironment={setSelectedEnvironment}
+          isModified={isModified}
+          setIsModified={setIsModified}
+          collection={collection}
+          setShowExportModal={setShowExportModal}
+        />
+      </Modal>
+      {showExportModal && (
+        <ExportEnvironmentModal
+          onClose={() => setShowExportModal(false)}
+          environments={globalEnvironments}
+          environmentType="global"
+        />
+      )}
+    </StyledWrapper>
   );
 };
 

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

@@ -74,7 +74,7 @@ const GlobalSearchModal = ({ isOpen, onClose }) => {
 
         if (isItemARequest(item)) {
           // add an optional check for the item name to prevent a crash if it doesn’t exist.
-          const nameMatch = searchTerms.every(term => (item.name || '').toLowerCase().includes(term));
+          const nameMatch = searchTerms.every((term) => (item.name || '').toLowerCase().includes(term));
           const urlMatch = searchTerms.every(term => (item.request?.url || '').toLowerCase().includes(term));
           const pathMatch = enablePathMatch && searchTerms.every(term => itemPathLower.includes(term));
 

packages/bruno-app/src/components/Icons/ExampleIcon/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const ExampleIcon = ({ color = 'white', size = 16, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g clipPath="url(#clip0_486_1191)">
+        <path d="M2.66699 3.33329C2.66699 3.15648 2.73723 2.98691 2.86225 2.86189C2.98728 2.73686 3.15685 2.66663 3.33366 2.66663H12.667C12.8438 2.66663 13.0134 2.73686 13.1384 2.86189C13.2634 2.98691 13.3337 3.15648 13.3337 3.33329V12.6666C13.3337 12.8434 13.2634 13.013 13.1384 13.138C13.0134 13.2631 12.8438 13.3333 12.667 13.3333H3.33366C3.15685 13.3333 2.98728 13.2631 2.86225 13.138C2.73723 13.013 2.66699 12.8434 2.66699 12.6666V3.33329Z" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M9.33366 5.33337H6.66699V10.6667H9.33366" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M9.33366 8H6.66699" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_486_1191">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+
+  );
+};
+
+export default ExampleIcon;

packages/bruno-app/src/components/Icons/IconCaretDown/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const IconCaretDown = ({ color = '#8C8C8C', ...props }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <g clipPath="url(#clip0_464_9256)">
+        <path d="M10.5444 5.75H4.46004C4.26888 5.7509 4.08142 5.78521 3.91637 5.84952C3.75132 5.91383 3.61447 6.00587 3.51947 6.11647C3.42448 6.22706 3.37466 6.35234 3.375 6.47978C3.37534 6.60723 3.42583 6.73238 3.52142 6.84275L6.56492 10.23C6.66228 10.3372 6.79942 10.4258 6.96311 10.4874C7.1268 10.5489 7.31151 10.5813 7.49945 10.5814C7.68739 10.5816 7.8722 10.5494 8.03608 10.4881C8.19995 10.4267 8.33735 10.3383 8.43504 10.2312L11.4763 6.8465C11.573 6.73635 11.6246 6.61118 11.626 6.48355C11.6273 6.35591 11.5783 6.23028 11.4839 6.11924C11.3895 6.0082 11.253 5.91564 11.088 5.85084C10.9231 5.78603 10.7359 5.75126 10.5444 5.75Z" fill="#8C8C8C" />
+      </g>
+      <defs>
+        <clipPath id="clip0_464_9256">
+          <rect width="9" height="6" fill="white" transform="translate(3 5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default IconCaretDown;

packages/bruno-app/src/components/Icons/IconCheckMark/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const IconCheckMark = ({ color = '#cccccc', size = 16, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M3.3335 8.49996L6.66683 11.8333L13.3335 5.16663" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+export default IconCheckMark;

packages/bruno-app/src/components/Icons/IconEdit/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const IconEdit = ({ color = '#F39D0E', size = 16, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g clipPath="url(#clip0_464_9527)">
+        <path d="M12.6665 13.3332H5.66654L2.85988 10.4665C2.73571 10.3416 2.66602 10.1727 2.66602 9.99654C2.66602 9.82042 2.73571 9.65145 2.85988 9.52654L9.52654 2.85988C9.65145 2.73571 9.82042 2.66602 9.99654 2.66602C10.1727 2.66602 10.3416 2.73571 10.4665 2.85988L13.7999 6.19321C13.924 6.31812 13.9937 6.48709 13.9937 6.66321C13.9937 6.83933 13.924 7.0083 13.7999 7.13321L7.66654 13.3332" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.9998 8.86663L7.7998 4.66663" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_464_9527">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default IconEdit;

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

@@ -9,7 +9,8 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => (
   <div className="bruno-modal-header">
     {customHeader ? customHeader : <>{title ? <div className="bruno-modal-header-title">{title}</div> : null}</>}
     {handleCancel && !hideClose ? (
-      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null} data-test-id="modal-close-button">
+      // TODO: Remove data-test-id and use data-testid instead across the codebase.
+      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null} data-test-id="modal-close-button" data-testid="modal-close-button">
         ×
       </div>
     ) : null}
@@ -25,7 +26,8 @@ const ModalFooter = ({
   handleCancel,
   confirmDisabled,
   hideCancel,
-  hideFooter
+  hideFooter,
+  confirmButtonClass = 'btn-secondary'
 }) => {
   confirmText = confirmText || 'Save';
   cancelText = cancelText || 'Cancel';
@@ -44,7 +46,7 @@ const ModalFooter = ({
       <span>
         <button
           type="submit"
-          className="submit btn btn-md btn-secondary"
+          className={`submit btn btn-md ${confirmButtonClass}`}
           disabled={confirmDisabled}
           onClick={handleSubmit}
         >
@@ -72,7 +74,8 @@ const Modal = ({
   disableEscapeKey,
   onClick,
   closeModalFadeTimeout = 500,
-  dataTestId
+  dataTestId,
+  confirmButtonClass
 }) => {
   const modalRef = useRef(null);
   const [isClosing, setIsClosing] = useState(false);
@@ -138,6 +141,7 @@ const Modal = ({
           confirmDisabled={confirmDisabled}
           hideCancel={hideCancel}
           hideFooter={hideFooter}
+          confirmButtonClass={confirmButtonClass}
         />
       </div>
 

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

@@ -9,14 +9,15 @@ const StyledWrapper = styled.div`
   &.read-only {
     .CodeMirror .CodeMirror-lines {
       cursor: not-allowed !important;
-      user-select: none !important;
-      -webkit-user-select: none !important;
-      -ms-user-select: none !important;
     }
 
     .CodeMirror-line {
       color: ${(props) => props.theme.colors.text.muted} !important;
     }
+
+    .CodeMirror-cursor {
+      display: none !important;
+    }
   }
 
   .CodeMirror {

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

@@ -18,6 +18,7 @@ class MultiLineEditor extends Component {
     this.cachedValue = props.value || '';
     this.editorRef = React.createRef();
     this.variables = {};
+    this.readOnly = props.readOnly || false;
 
     this.state = {
       maskInput: props.isSecret || false // Always mask the input by default (if it's a secret)
@@ -35,7 +36,7 @@ class MultiLineEditor extends Component {
       brunoVarInfo: {
         variables
       },
-      readOnly: this.props.readOnly ? 'nocursor' : false,
+      readOnly: this.props.readOnly,
       tabindex: 0,
       extraKeys: {
         'Ctrl-Enter': () => {
@@ -108,8 +109,11 @@ class MultiLineEditor extends Component {
       if (!this.maskedEditor) this.maskedEditor = new MaskedEditor(this.editor, '*');
       this.maskedEditor.enable();
     } else {
-      this.maskedEditor?.disable();
-      this.maskedEditor = null;
+      if (this.maskedEditor) {
+        this.maskedEditor.disable();
+        this.maskedEditor.destroy();
+        this.maskedEditor = null;
+      }
     }
   };
 
@@ -128,7 +132,7 @@ class MultiLineEditor extends Component {
       this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
     }
     if (this.props.readOnly !== prevProps.readOnly && this.editor) {
-      this.editor.setOption('readOnly', this.props.readOnly ? 'nocursor' : false);
+      this.editor.setOption('readOnly', this.props.readOnly);
     }
     if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
       this.cachedValue = String(this.props.value);
@@ -140,6 +144,9 @@ class MultiLineEditor extends Component {
       // also set the maskInput flag to the new value
       this.setState({ maskInput: this.props.isSecret });
     }
+    if (this.props.readOnly !== prevProps.readOnly && this.editor) {
+      this.editor.setOption('readOnly', this.props.readOnly || false);
+    }
     this.ignoreChangeEvent = false;
   }
 

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

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .radio-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+
+  .radio-input {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 2px solid ${(props) => props.theme.colors.text.muted};
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+    position: relative;
+    outline: none;
+    box-shadow: none;
+    margin: 0;
+    
+    &:checked {
+      border-color: ${(props) => props.theme.colors.text.yellow};
+      background-color: transparent;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        background-color: ${(props) => props.theme.colors.text.yellow};
+      }
+    }
+    
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      border-color: ${(props) => props.theme.colors.text.muted};
+      background-color: transparent;
+      
+      &:checked {
+        border-color: ${(props) => props.theme.colors.text.muted};
+        
+        &::after {
+          background-color: ${(props) => props.theme.colors.text.muted};
+        }
+      }
+    }
+    
+    &:hover:not(:disabled) {
+      opacity: 0.8;
+    }
+  }
+
+  .radio-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    pointer-events: none;
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const RadioButton = ({
+  checked,
+  disabled = false,
+  onChange,
+  name,
+  value,
+  id,
+  className = '',
+  dataTestId = 'radio-button'
+}) => {
+  const handleChange = (e) => {
+    if (!disabled && onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <StyledWrapper>
+      <div className={`radio-container ${className}`}>
+        <input
+          type="radio"
+          id={id}
+          name={name}
+          value={value}
+          checked={checked}
+          disabled={disabled}
+          onChange={handleChange}
+          className="radio-input"
+          data-testid={dataTestId}
+        />
+        <label htmlFor={id} className="radio-label" />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default RadioButton;

packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js

@@ -169,7 +169,6 @@ const AssertionRow = ({
           <SingleLineEditor
             value={value}
             theme={storedTheme}
-            readOnly={true}
             onSave={onSave}
             onChange={(newValue) => {
               handleAssertionChange(

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

@@ -9,6 +9,7 @@ import WsseAuth from './WsseAuth';
 import NTLMAuth from './NTLMAuth';
 import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { useDispatch } from 'react-redux';
 
 import ApiKeyAuth from './ApiKeyAuth';
 import StyledWrapper from './StyledWrapper';
@@ -27,6 +28,7 @@ const getTreePathFromCollectionToItem = (collection, _item) => {
 };
 
 const Auth = ({ item, collection }) => {
+  const dispatch = useDispatch();
   const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
   const requestTreePath = getTreePathFromCollectionToItem(collection, item);
   
@@ -37,13 +39,14 @@ const Auth = ({ item, collection }) => {
 
   // Save function for request level
   const save = () => {
-    return saveRequest(item.uid, collection.uid);
+    return dispatch(saveRequest(item.uid, collection.uid));
   };
 
   const getEffectiveAuthSource = () => {
     if (authMode !== 'inherit') return null;
 
-    const collectionAuth = get(collection, 'root.request.auth');
+    const collectionRoot = collection?.draft?.root || collection?.root || {};
+    const collectionAuth = get(collectionRoot, 'request.auth');
     let effectiveSource = {
       type: 'collection',
       name: 'Collection',

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

@@ -6,9 +6,9 @@ import { updateRequestGraphqlVariables } from 'providers/ReduxStore/slices/colle
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
-import { format, applyEdits } from 'jsonc-parser';
 import { IconWand } from '@tabler/icons';
 import toast from 'react-hot-toast';
+import { prettifyJsonString } from 'utils/common/index';
 
 const GraphQLVariables = ({ variables, item, collection }) => {
   const dispatch = useDispatch();
@@ -19,8 +19,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
   const onPrettify = () => {
     if (!variables) return;
     try {
-      const edits = format(variables, undefined, { tabSize: 2, insertSpaces: true });
-      const prettyVariables = applyEdits(variables, edits);
+      const prettyVariables = prettifyJsonString(variables);
       dispatch(
         updateRequestGraphqlVariables({
           variables: prettyVariables,

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

@@ -12,9 +12,9 @@ import StyledWrapper from './StyledWrapper';
 import { IconSend, IconRefresh, IconWand, IconPlus, IconTrash, IconChevronDown, IconChevronUp } from '@tabler/icons';
 import ToolHint from 'components/ToolHint/index';
 import { toastError } from 'utils/common/error';
-import { format, applyEdits } from 'jsonc-parser';
 import toast from 'react-hot-toast'
 import { getAbsoluteFilePath } from 'utils/common/path';
+import { prettifyJsonString } from 'utils/common/index';
 
 const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCollapsed, onToggleCollapse, handleRun, canClientSendMultipleMessages }) => {
   const dispatch = useDispatch();
@@ -130,8 +130,7 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol
 
   const onPrettify = () => {
     try {
-      const edits = format(content, undefined, { tabSize: 2, insertSpaces: true });
-      const prettyBodyJson = applyEdits(content, edits);
+      const prettyBodyJson = prettifyJsonString(content);
 
       const currentMessages = [...(body.grpc || [])];
       currentMessages[index] = {
@@ -187,6 +186,7 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol
                 onClick={onSend}
                 disabled={!isConnectionActive}
                 className={`p-1 rounded ${isConnectionActive ? 'hover:bg-zinc-200 dark:hover:bg-zinc-600' : 'opacity-50 cursor-not-allowed'} transition-colors`}
+                data-testid={`grpc-send-message-${index}`}
               >
                 <IconSend
                   size={16}
@@ -300,6 +300,7 @@ const GrpcBody = ({ item, collection, handleRun }) => {
       <div
         ref={messagesContainerRef}
         id="grpc-messages-container"
+        data-testid="grpc-messages-container"
         className={`flex-1 ${body.grpc.length === 1 || !canClientSendMultipleMessages ? 'h-full' : 'overflow-y-auto'} ${canClientSendMultipleMessages && 'pb-16'}`}
       >
         {body.grpc
@@ -326,6 +327,7 @@ const GrpcBody = ({ item, collection, handleRun }) => {
             <button
               onClick={addNewMessage}
               className="add-message-btn flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors shadow-md"
+              data-testid="grpc-add-message-button"
             >
               <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
               <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add Message</span>

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

@@ -1,12 +1,14 @@
-import React, { forwardRef } from 'react';
 import { IconChevronDown } from '@tabler/icons';
 import Dropdown from 'components/Dropdown/index';
 import {
-  IconGrpcUnary,
+  IconGrpcBidiStreaming,
   IconGrpcClientStreaming,
   IconGrpcServerStreaming,
-  IconGrpcBidiStreaming
+  IconGrpcUnary
 } from 'components/Icons/Grpc';
+import SearchInput from 'components/SearchInput/index';
+import { search } from 'fast-fuzzy';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 
 const MethodDropdown = ({
   grpcMethods,
@@ -14,6 +16,19 @@ const MethodDropdown = ({
   onMethodSelect,
   onMethodDropdownCreate
 }) => {
+
+  const [searchText, setSearchText] = useState('');
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const searchInputRef = useRef();
+  const listRef = useRef();
+
+  useEffect(() => {
+    const activeItem = listRef.current?.querySelector(`[data-index="${focusedIndex}"]`);
+    if (activeItem) {
+      activeItem.scrollIntoView({ block: 'nearest' });
+    }
+  }, [focusedIndex]);
+
   const groupMethodsByService = (methods) => {
     if (!methods || !methods.length) return {};
 
@@ -58,11 +73,11 @@ const MethodDropdown = ({
 
   const MethodsDropdownIcon = forwardRef((props, ref) => {
     return (
-      <div ref={ref} className="flex items-center justify-center ml-2 cursor-pointer select-none">
+      <div ref={ref} className="flex items-center justify-center ml-2 cursor-pointer select-none" data-testid="grpc-method-dropdown-trigger">
         {selectedGrpcMethod && <div className="mr-2">{getIconForMethodType(selectedGrpcMethod.type)}</div>}
         <span className="text-xs">
           {selectedGrpcMethod ? (
-            <span className="dark:text-neutral-300 text-neutral-700 text-nowrap">
+            <span className="dark:text-neutral-300 text-neutral-700 text-nowrap" data-testid="selected-grpc-method-name">
               {selectedGrpcMethod.path.split('.').at(-1) || selectedGrpcMethod.path}
             </span>
           ) : (
@@ -79,49 +94,125 @@ const MethodDropdown = ({
     onMethodSelect({ path: method.path, type: methodType });
   };
 
+  const filteredMethods = searchText ? search(String(searchText), grpcMethods, { keySelector: (obj) => obj.path }) : grpcMethods;
+
+  const groupedMethods = groupMethodsByService(filteredMethods);
+
+  // Flatten grouped methods for keyboard navigation
+  const flatMethodList = Object.values(groupedMethods).flat();
+
+  const handleKeyDown = (e) => {
+    if (!flatMethodList.length) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setFocusedIndex((prev) =>
+        prev < flatMethodList.length - 1 ? prev + 1 : flatMethodList.length - 1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setFocusedIndex((prev) =>
+        prev >= 0 ? prev - 1 : -1);
+    } else if (e.key === 'Enter' && focusedIndex >= 0) {
+      e.preventDefault();
+      handleGrpcMethodSelect(flatMethodList[focusedIndex]);
+    }
+  };
+
+  const focusSearchInput = () => {
+    setTimeout(() => {
+      if (searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    }, 0); // 0ms to ensure the dropdown is fully rendered and focused
+  };
+
+  const handleDropdownShow = () => {
+    focusSearchInput();
+    setSearchText('');
+    setFocusedIndex(-1);
+  };
+
+  const handleSearchChange = (e) => {
+    // auto focus the first method when the search input is not empty
+    if (e.target.value.trim().length > 0) {
+      setFocusedIndex(0);
+    } else {
+      setFocusedIndex(-1);
+    }
+  };
+
   if (!grpcMethods || grpcMethods.length === 0) {
     return null;
   }
 
   return (
     <div className="flex items-center h-full mr-2" data-testid="grpc-methods-dropdown">
-      <Dropdown onCreate={onMethodDropdownCreate} icon={<MethodsDropdownIcon />} placement="bottom-end" style={{ maxWidth: 'unset' }}>
-        <div className="max-h-96 overflow-y-auto max-w-96 min-w-60" data-testid="grpc-methods-list">
-          {Object.entries(groupMethodsByService(grpcMethods)).map(([serviceName, methods], serviceIndex) => (
-            <div key={serviceIndex} className="service-group mb-2">
+      <Dropdown onCreate={onMethodDropdownCreate} icon={<MethodsDropdownIcon />} placement="bottom-end" style={{ maxWidth: 'unset' }} onShow={handleDropdownShow}>
+        <SearchInput
+          searchText={searchText}
+          setSearchText={setSearchText}
+          placeholder="Search"
+          ref={searchInputRef}
+          onKeyDown={handleKeyDown}
+          onBlur={focusSearchInput}
+          onChange={handleSearchChange}
+          className="mt-2 mb-3 "
+          data-testid="grpc-methods-search-input"
+        />
+        <div ref={listRef} className="max-h-96 overflow-y-auto w-96 min-w-60" data-testid="grpc-methods-list">
+          {Object.entries(groupedMethods).map(([serviceName, methods], serviceIndex) => (
+            <div key={serviceIndex} className="service-group mb-2" onKeyDown={handleKeyDown} tabIndex={0}>
               <div className="service-header px-3 py-1 bg-neutral-100 dark:bg-neutral-800 text-sm font-medium truncate sticky top-0 z-10">
                 {serviceName || 'Default Service'}
               </div>
               <div className="service-methods">
-                {methods.map((method, methodIndex) => (
-                  <div
-                    key={`${serviceIndex}-${methodIndex}`}
-                    className={`py-2 px-3 w-full border-l-2 transition-all duration-200 relative group ${
-                      selectedGrpcMethod && selectedGrpcMethod.path === method.path
-                        ? 'border-yellow-500 bg-yellow-500/20 dark:bg-yellow-900/20'
-                        : 'border-transparent hover:bg-black/5 dark:hover:bg-white/5'
-                    }`}
-                    onClick={() => handleGrpcMethodSelect(method)}
-                    data-testid="grpc-method-item"
-                  >
-                    <div className="flex items-center">
-                      <div className="text-xs mr-3 text-gray-500">
-                        {getIconForMethodType(method.type)}
-                      </div>
-                      <div className="flex flex-col flex-1">
-                        <div className="font-medium text-gray-900 dark:text-gray-100">
-                          {method.methodName}
+                {methods.map((method, methodIndex) => {
+                  const globalMethodIndex
+                    = Object.values(groupedMethods)
+                      .slice(0, serviceIndex)
+                      .reduce((acc, group) => acc + group.length, 0) + methodIndex;
+                  return (
+                    <div
+                      key={`${serviceIndex}-${methodIndex}`}
+                      className={`py-2 px-3 w-full border-l-2 transition-all duration-200 relative group ${
+                        selectedGrpcMethod && selectedGrpcMethod.path === method.path
+                          ? 'border-yellow-500 bg-yellow-500/20 dark:bg-yellow-900/20'
+                          : 'border-transparent hover:bg-black/5 dark:hover:bg-white/5'
+                      } ${focusedIndex === globalMethodIndex
+                        ? 'bg-black/5 dark:bg-white/5' : ''}`}
+                      onClick={() => handleGrpcMethodSelect(method)}
+                      data-index={globalMethodIndex}
+                      data-testid="grpc-method-item"
+                    >
+                      <div className="flex items-center">
+                        <div className="text-xs mr-3 text-gray-500">
+                          {getIconForMethodType(method.type)}
                         </div>
-                        <div className="text-xs text-gray-500">
-                          {method.type}
+                        <div className="flex flex-col flex-1">
+                          <div className="font-medium text-gray-900 dark:text-gray-100">
+                            {method.methodName}
+                          </div>
+                          <div className="text-xs text-gray-500">
+                            {method.type}
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                ))}
+                  );
+                })}
               </div>
             </div>
           ))}
+
+          {filteredMethods.length === 0 && (
+            <div className="py-2 px-3 w-full transition-all duration-200 relative group">
+              <div className="flex items-center">
+                <div className="text-xs mr-3 text-gray-500">
+                  No methods found for the search term
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </Dropdown>
     </div>

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

@@ -39,7 +39,7 @@ const ProtoFileDropdown = ({
       return;
     }
 
-    const { success: addSuccess, relativePath, alreadyExists, error: addError } = await protoFileManagement.addProtoFileToCollection(filePath);
+    const { success: addSuccess, relativePath, alreadyExists, error: addError } = await protoFileManagement.addProtoFileFromRequest(filePath);
     if (!addSuccess) {
       if (addError) {
         toast.error(`Failed to add proto file: ${addError.message}`);
@@ -91,7 +91,7 @@ const ProtoFileDropdown = ({
       return;
     }
 
-    const { success: addSuccess, error: addError } = await protoFileManagement.addImportPathToCollection(directoryPath);
+    const { success: addSuccess, error: addError } = await protoFileManagement.addImportPathFromRequest(directoryPath);
     if (!addSuccess) {
       if (addError) {
         toast.error(`Failed to add import path: ${addError.message}`);
@@ -103,7 +103,7 @@ const ProtoFileDropdown = ({
   };
 
   const handleToggleImportPath = async (index) => {
-    const { success, enabled, error } = await protoFileManagement.toggleImportPath(index);
+    const { success, enabled, error } = await protoFileManagement.toggleImportPathFromRequest(index);
     if (!success) {
       if (error) {
         toast.error(`Failed to toggle import path: ${error.message}`);

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

@@ -346,6 +346,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
               strokeWidth={1.5}
               size={22}
               className={`${(isReflectionMode ? reflectionManagement.isLoadingMethods : protoFileManagement.isLoadingMethods) ? 'animate-spin' : 'cursor-pointer'}`}
+              data-testid="refresh-methods-icon"
             />
             <span className="infotip-text text-xs">
               {isReflectionMode ? 'Refresh server reflection' : 'Refresh proto file methods'}
@@ -388,25 +389,28 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
 
           {isConnectionActive && isStreamingMethod && (
             <div className="connection-controls relative flex items-center h-full gap-3">
-              <div className="infotip" onClick={handleCancelConnection}>
+              <div className="infotip" onClick={handleCancelConnection} data-testid="grpc-cancel-connection-button">
                 <IconX color={theme.requestTabs.icon.color} strokeWidth={1.5} size={22} className="cursor-pointer" />
                 <span className="infotip-text text-xs">Cancel</span>
               </div>
 
-            {isClientStreamingMethod && <div onClick={handleEndConnection}>
-                <IconCheck
-                  color={theme.colors.text.green}
-                  strokeWidth={2}
-                  size={22}
-                  className="cursor-pointer"
-                />
-              </div>}
+              {isClientStreamingMethod && (
+                <div onClick={handleEndConnection} data-testid="grpc-end-connection-button">
+                  <IconCheck
+                    color={theme.colors.text.green}
+                    strokeWidth={2}
+                    size={22}
+                    className="cursor-pointer"
+                  />
+                </div>
+              )}
             </div>
           )}
 
           {(!isConnectionActive || !isStreamingMethod) && (
             <div
               className="cursor-pointer"
+              data-testid="grpc-send-request-button"
               onClick={(e) => {
                 e.stopPropagation();
                 handleRun(e);

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

@@ -48,7 +48,8 @@ const GrpcAuth = ({ item, collection }) => {
   const getEffectiveAuthSource = () => {
     if (authMode !== 'inherit') return null;
 
-    const collectionAuth = get(collection, 'root.request.auth');
+    const collectionRoot = collection?.draft?.root || collection?.root || {};
+    const collectionAuth = get(collectionRoot, 'request.auth');
     let effectiveSource = {
       type: 'collection',
       name: 'Collection',

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

@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
 import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { cancelRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import HttpMethodSelector from './HttpMethodSelector';
 import { useTheme } from 'providers/Theme';
-import { IconDeviceFloppy, IconArrowRight, IconCode } from '@tabler/icons';
+import { IconDeviceFloppy, IconArrowRight, IconCode, IconSquareRoundedX } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { isMacOS } from 'utils/common/platform';
+import { hasRequestChanges } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import GenerateCodeItem from 'components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index';
 import toast from 'react-hot-toast';
@@ -21,9 +22,11 @@ const QueryUrl = ({ item, collection, handleRun }) => {
   const saveShortcut = isMac ? 'Cmd + S' : 'Ctrl + S';
   const editorRef = useRef(null);
   const isGrpc = item.type === 'grpc-request';
+  const isLoading = ['queued', 'sending'].includes(item.requestState);
 
   const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
   const [generateCodeItemModalOpen, setGenerateCodeItemModalOpen] = useState(false);
+  const hasChanges = useMemo(() => hasRequestChanges(item), [item]);
 
   useEffect(() => {
     const el = document.querySelector('.method-selector-container');
@@ -38,9 +41,9 @@ const QueryUrl = ({ item, collection, handleRun }) => {
     if (!editorRef.current?.editor) return;
     const editor = editorRef.current.editor;
     const cursor = editor.getCursor();
-  
+
     const finalUrl = value?.trim() ?? value;
-  
+
     dispatch(
       requestUrlChanged({
         itemUid: item.uid,
@@ -48,7 +51,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
         url: finalUrl
       })
     );
-  
+
     // Restore cursor position only if URL was trimmed
     if (finalUrl !== value) {
       setTimeout(() => {
@@ -78,6 +81,12 @@ const QueryUrl = ({ item, collection, handleRun }) => {
     }
   };
 
+  const handleCancelRequest = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dispatch(cancelRequest(item.cancelTokenUid, item, collection));
+  };
+
   return (
     <StyledWrapper className="flex items-center">
       <div className="flex flex-1 items-center h-full method-selector-container">
@@ -85,7 +94,6 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           <div className="flex items-center justify-center h-full w-16">
             <span className="text-xs text-indigo-500 font-bold">gRPC</span>
           </div>
-          
         ) : (
           <HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
         )}
@@ -118,40 +126,52 @@ const QueryUrl = ({ item, collection, handleRun }) => {
               handleGenerateCode(e);
             }}
           >
-            <IconCode
-              color={theme.requestTabs.icon.color}
-              strokeWidth={1.5}
-              size={22}
-              className={'cursor-pointer'}
-            />
-            <span className="infotiptext text-xs">
-              Generate Code
-            </span>
+            <IconCode color={theme.requestTabs.icon.color} strokeWidth={1.5} size={22} className="cursor-pointer" />
+            <span className="infotiptext text-xs">Generate Code</span>
           </div>
           <div
             title="Save Request"
             className="infotip mr-3"
             onClick={(e) => {
               e.stopPropagation();
-              if (!item.draft) return;
+              if (!hasChanges) return;
               onSave();
             }}
           >
             <IconDeviceFloppy
-              color={item.draft ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+              color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
               strokeWidth={1.5}
               size={22}
-              className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
+              className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
             />
             <span className="infotiptext text-xs">
               Save <span className="shortcut">({saveShortcut})</span>
             </span>
           </div>
-          <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} data-testid="send-arrow-icon" />
+          {isLoading || item.response?.stream?.running ? (
+            <IconSquareRoundedX
+              color={theme.requestTabPanel.url.iconDanger}
+              strokeWidth={1.5}
+              size={22}
+              data-testid="cancel-request-icon"
+              onClick={handleCancelRequest}
+            />
+          ) : (
+            <IconArrowRight
+              color={theme.requestTabPanel.url.icon}
+              strokeWidth={1.5}
+              size={22}
+              data-testid="send-arrow-icon"
+            />
+          )}
         </div>
       </div>
       {generateCodeItemModalOpen && (
-        <GenerateCodeItem collectionUid={collection.uid} 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

@@ -8,7 +8,7 @@ import { humanizeRequestBodyMode } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections/index';
 import { toastError } from 'utils/common/error';
-import { format, applyEdits } from 'jsonc-parser';
+import { prettifyJsonString } from 'utils/common/index';
 import xmlFormat from 'xml-formatter';
 
 const RequestBodyMode = ({ item, collection }) => {
@@ -39,8 +39,7 @@ const RequestBodyMode = ({ item, collection }) => {
   const onPrettify = () => {
     if (body?.json && bodyMode === 'json') {
       try {
-        const edits = format(body.json, undefined, { tabSize: 2, insertSpaces: true });
-        const prettyBodyJson = applyEdits(body.json, edits);
+        const prettyBodyJson = prettifyJsonString(body.json);
         dispatch(
           updateRequestBody({
             content: prettyBodyJson,

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

@@ -1,20 +1,37 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 
 const Script = ({ item, collection }) => {
   const dispatch = useDispatch();
+  const [activeTab, setActiveTab] = useState('pre-request');
+  const preRequestEditorRef = useRef(null);
+  const postResponseEditorRef = useRef(null);
   const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  // Refresh CodeMirror when tab becomes visible
+  useEffect(() => {
+    // Small delay to ensure DOM is updated
+    const timer = setTimeout(() => {
+      if (activeTab === 'pre-request' && preRequestEditorRef.current?.editor) {
+        preRequestEditorRef.current.editor.refresh();
+      } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
+        postResponseEditorRef.current.editor.refresh();
+      }
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [activeTab]);
+
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateRequestScript({
@@ -39,38 +56,46 @@ const Script = ({ item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Pre Request</div>
-        <CodeEditor
-          collection={collection}
-          value={requestScript || ''}
-          theme={displayedTheme}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          onEdit={onRequestScriptEdit}
-          mode="javascript"
-          onRun={onRun}
-          onSave={onSave}
-          showHintsFor={['req', 'bru']}
-        />
-      </div>
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Post Response</div>
-        <CodeEditor
-          collection={collection}
-          value={responseScript || ''}
-          theme={displayedTheme}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          onEdit={onResponseScriptEdit}
-          mode="javascript"
-          onRun={onRun}
-          onSave={onSave}
-          showHintsFor={['req', 'res', 'bru']}
-        />
-      </div>
-    </StyledWrapper>
+    <div className="w-full h-full flex flex-col pt-4">
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
+          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="pre-request" className="mt-2" dataTestId="pre-request-script-editor">
+          <CodeEditor
+            ref={preRequestEditorRef}
+            collection={collection}
+            value={requestScript || ''}
+            theme={displayedTheme}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            onEdit={onRequestScriptEdit}
+            mode="javascript"
+            onRun={onRun}
+            onSave={onSave}
+            showHintsFor={['req', 'bru']}
+          />
+        </TabsContent>
+
+        <TabsContent value="post-response" className="mt-2" dataTestId="post-response-script-editor">
+          <CodeEditor
+            ref={postResponseEditorRef}
+            collection={collection}
+            value={responseScript || ''}
+            theme={displayedTheme}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            onEdit={onResponseScriptEdit}
+            mode="javascript"
+            onRun={onRun}
+            onSave={onSave}
+            showHintsFor={['req', 'res', 'bru']}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
   );
 };
 

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

@@ -40,7 +40,8 @@ const WSAuth = ({ item, collection }) => {
   const getEffectiveAuthSource = () => {
     if (authMode !== 'inherit') return null;
 
-    const collectionAuth = get(collection, 'root.request.auth');
+    const collectionRoot = collection?.draft?.root || collection?.root || {};
+    const collectionAuth = get(collectionRoot, 'request.auth');
     let effectiveSource = {
       type: 'collection',
       name: 'Collection',

packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { autoDetectLang } from 'utils/codemirror/lang-detect';
 import { toastError } from 'utils/common/error';
-import { prettifyJSON } from 'utils/common/index';
+import { prettifyJsonString } from 'utils/common/index';
 import xmlFormat from 'xml-formatter';
 import WSRequestBodyMode from '../BodyMode/index';
 
@@ -105,7 +105,7 @@ export const SingleWSMessage = ({
   const onPrettify = () => {
     if (codeType === 'json') {
       try {
-        const prettyBodyJson = prettifyJSON(content);
+        const prettyBodyJson = prettifyJsonString(content);
         const currentMessages = [...(body.ws || [])];
         currentMessages[index] = {
           ...currentMessages[index],

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

@@ -5,11 +5,12 @@ import SingleLineEditor from 'components/SingleLineEditor/index';
 import { requestUrlChanged } from 'providers/ReduxStore/slices/collections';
 import { wsConnectOnly, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
 import { getPropertyFromDraftOrRequest } from 'utils/collections';
 import { isMacOS } from 'utils/common/platform';
+import { hasRequestChanges } from 'utils/collections';
 import { closeWsConnection, isWsConnectionActive } from 'utils/network/index';
 import StyledWrapper from './StyledWrapper';
 import get from 'lodash/get';
@@ -23,6 +24,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
   const url = getPropertyFromDraftOrRequest(item, 'request.url');
   const response = item.draft ? get(item, 'draft.response', {}) : get(item, 'response', {});
   const saveShortcut = isMacOS() ? '⌘S' : 'Ctrl+S';
+  const hasChanges = useMemo(() => hasRequestChanges(item), [item]);
 
   const showConnectingPulse = isConnecting && response.status !== 'CLOSED';
 
@@ -108,15 +110,15 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
               className="infotip mr-3"
               onClick={(e) => {
                 e.stopPropagation();
-                if (!item.draft) return;
+                if (!hasChanges) return;
                 onSave();
               }}
             >
               <IconDeviceFloppy
-                color={item.draft ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+                color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
                 strokeWidth={1.5}
                 size={22}
-                className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
+                className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
               />
               <span className="infotip-text text-xs">
                 Save <span className="shortcut">({saveShortcut})</span>

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

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { useDispatch } from 'react-redux';
+
+const ExampleNotFound = ({ exampleUid }) => {
+  const dispatch = useDispatch();
+  const [showErrorMessage, setShowErrorMessage] = useState(false);
+
+  const closeTab = () => {
+    dispatch(closeTabs({
+      tabUids: [exampleUid]
+    }));
+  };
+
+  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>Response example no longer exists.</div>
+        <div className="mt-2">
+          This can occur when the example definition in your local file has been deleted or updated.
+        </div>
+      </div>
+      <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
+        Close Tab
+      </button>
+    </div>
+  );
+};
+
+export default ExampleNotFound;

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

@@ -10,7 +10,7 @@ import GrpcResponsePane from 'components/ResponsePane/GrpcResponsePane';
 import Welcome from 'components/Welcome';
 import { findItemInCollection } from 'utils/collections';
 import { updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs';
-import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { cancelRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import RequestNotFound from './RequestNotFound';
 import QueryUrl from 'components/RequestPane/QueryUrl/index';
 import GrpcQueryUrl from 'components/RequestPane/GrpcQueryUrl/index';
@@ -29,9 +29,11 @@ import CollectionOverview from 'components/CollectionSettings/Overview';
 import RequestNotLoaded from './RequestNotLoaded';
 import RequestIsLoading from './RequestIsLoading';
 import FolderNotFound from './FolderNotFound';
+import ExampleNotFound from './ExampleNotFound';
 import WsQueryUrl from 'components/RequestPane/WsQueryUrl';
 import WSRequestPane from 'components/RequestPane/WSRequestPane';
 import WSResponsePane from 'components/ResponsePane/WsResponsePane';
+import ResponseExample from 'components/ResponseExample';
 
 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
@@ -186,6 +188,16 @@ const RequestTabPanel = () => {
     return <div className="pb-4 px-4">Collection not found!</div>;
   }
 
+  if (focusedTab.type === 'response-example') {
+    const item = findItemInCollection(collection, focusedTab.itemUid);
+    const example = item?.examples?.find((ex) => ex.uid === focusedTab.uid);
+
+    if (!example) {
+      return <ExampleNotFound itemUid={focusedTab.itemUid} exampleUid={focusedTab.uid} />;
+    }
+    return <ResponseExample item={item} collection={collection} example={example} />;
+  }
+
   const item = findItemInCollection(collection, activeTabUid);
   const isGrpcRequest = item?.type === 'grpc-request';
   const isWsRequest = item?.type === 'ws-request';
@@ -251,11 +263,17 @@ const RequestTabPanel = () => {
       return;
     }
 
-    dispatch(sendRequest(item, collection.uid)).catch((err) =>
-      toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
-        duration: 5000
-      })
-    );
+    if (item.response?.stream?.running) {
+      dispatch(cancelRequest(item.cancelTokenUid, item, collection)).catch((err) =>
+        toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
+          duration: 5000
+        }));
+    } else if (item.requestState !== 'sending' && item.requestState !== 'queued') {
+      dispatch(sendRequest(item, collection.uid)).catch((err) =>
+        toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
+          duration: 5000
+        }));
+    }
   };
 
   // TODO: reaper, improve selection of panes

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

@@ -0,0 +1,146 @@
+import React, { useState, useRef, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { closeTabs, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
+import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { hasExampleChanges, findItemInCollection } from 'utils/collections';
+import ExampleIcon from 'components/Icons/ExampleIcon';
+import ConfirmRequestClose from '../RequestTab/ConfirmRequestClose';
+import RequestTabNotFound from '../RequestTab/RequestTabNotFound';
+import StyledWrapper from '../RequestTab/StyledWrapper';
+import CloseTabIcon from '../RequestTab/CloseTabIcon';
+import DraftTabIcon from '../RequestTab/DraftTabIcon';
+
+const ExampleTab = ({ tab, collection }) => {
+  const dispatch = useDispatch();
+  const [showConfirmClose, setShowConfirmClose] = useState(false);
+
+  const dropdownTippyRef = useRef();
+
+  // Get item and example data
+  const item = findItemInCollection(collection, tab.itemUid);
+  const example = useMemo(() => item?.examples?.find((ex) => ex.uid === tab.uid), [item?.examples, tab.uid]);
+
+  const hasChanges = useMemo(() => hasExampleChanges(item, tab.uid), [item, tab.uid]);
+
+  const handleCloseClick = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    dispatch(closeTabs({
+      tabUids: [tab.uid]
+    }));
+  };
+
+  const handleRightClick = (_event) => {
+    const menuDropdown = dropdownTippyRef.current;
+    if (!menuDropdown) {
+      return;
+    }
+
+    if (menuDropdown.state.isShown) {
+      menuDropdown.hide();
+    } else {
+      menuDropdown.show();
+    }
+  };
+
+  const handleMouseUp = (e) => {
+    if (e.button === 1) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Close the tab
+      dispatch(closeTabs({
+        tabUids: [tab.uid]
+      }));
+    }
+  };
+
+  if (!item || !example) {
+    return (
+      <StyledWrapper
+        className="flex items-center justify-between tab-container px-1"
+        onMouseUp={(e) => {
+          if (e.button === 1) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            dispatch(closeTabs({ tabUids: [tab.uid] }));
+          }
+        }}
+      >
+        <RequestTabNotFound handleCloseClick={handleCloseClick} />
+      </StyledWrapper>
+    );
+  }
+
+  return (
+    <StyledWrapper className="flex items-center justify-between tab-container px-1">
+      {showConfirmClose && (
+        <ConfirmRequestClose
+          item={item}
+          example={example}
+          onCancel={() => setShowConfirmClose(false)}
+          onCloseWithoutSave={() => {
+            dispatch(deleteRequestDraft({
+              itemUid: item.uid,
+              collectionUid: collection.uid
+            }));
+            dispatch(closeTabs({
+              tabUids: [tab.uid]
+            }));
+            setShowConfirmClose(false);
+          }}
+          onSaveAndClose={() => {
+            // For examples, we don't have a separate save action
+            // The changes are saved automatically when the request is saved
+            dispatch(saveRequest(item.uid, collection.uid));
+            dispatch(closeTabs({
+              tabUids: [tab.uid]
+            }));
+            setShowConfirmClose(false);
+          }}
+        />
+      )}
+      <div
+        className={`flex items-center tab-label pl-2 ${tab.preview ? 'italic' : ''}`}
+        onContextMenu={handleRightClick}
+        onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
+        onMouseUp={(e) => {
+          if (!hasChanges) return handleMouseUp(e);
+
+          if (e.button === 1) {
+            e.stopPropagation();
+            e.preventDefault();
+            setShowConfirmClose(true);
+          }
+        }}
+      >
+        <ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-500 flex-shrink-0" />
+        <span className="tab-name" title={example.name}>
+          {example.name}
+        </span>
+      </div>
+      <div
+        className="flex px-2 close-icon-container"
+        onClick={(e) => {
+          if (!hasChanges) {
+            return handleCloseClick(e);
+          }
+
+          e.stopPropagation();
+          e.preventDefault();
+          setShowConfirmClose(true);
+        }}
+      >
+        {!hasChanges ? (
+          <CloseTabIcon />
+        ) : (
+          <DraftTabIcon />
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ExampleTab;