fix: update preferences saving method in preferences utility (#5617)

* fix: update preferences saving method in preferences utility

* fix: make markAsLaunched asynchronous and improve error handling in onboarding process

* fix: lint errors

---------

Co-authored-by: Bijin Bruno <bijin@usebruno.com>

.coderabbit.yaml

@@ -1,66 +0,0 @@
-# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
-
-language: 'en-US'
-early_access: false
-tone_instructions: 'You are an expert code reviewer in TypeScript, JavaScript, NodeJS, and ElectronJS. You work in an enterprise software developer team, providing concise and clear code review advice. You only elaborate or provide detailed explanations when requested.'
-
-knowledge_base:
-  opt_out: false
-  code_guidelines:
-    enabled: true
-    filePatterns:
-      - '**/CODING_STANDARDS.md'
-
-reviews:
-  profile: 'chill'
-  request_changes_workflow: false
-  high_level_summary: true
-  poem: true
-  review_status: true
-  collapse_walkthrough: false
-  auto_review:
-    enabled: true
-    drafts: false
-    base_branches: ['main', 'release/*']
-  path_instructions:
-    - path: 'tests/**/**.*'
-      instructions: |
-        Review the following e2e test code written using the Playwright test library. Ensure that:
-        - Follow best practices for Playwright code and e2e automation
-        - Try to reduce usage of `page.waitForTimeout();` in code unless absolutely necessary and the locator cannot be found using existing `expect()` playwright calls
-        - Avoid using `page.pause()` in code
-        - Use locator variables for locators
-        - Avoid using test.only
-        - Use multiple assertions
-        - Promote the use of `test.step` as much as possible so the generated reports are easier to read
-        - Ensure that the `fixtures` like the collections are nested inside the `fixtures` folder 
-          
-
-
-          **Fixture Example***: Here's an example of possible fixture and test pair
-          ```
-          .
-          ├── fixtures
-          │   └── collection
-          │       ├── base.bru
-          │       ├── bruno.json
-          │       ├── collection.bru
-          │       ├── ws-test-request-with-headers.bru
-          │       ├── ws-test-request-with-subproto.bru
-          │       └── ws-test-request.bru
-          ├── connection.spec.ts # <- Depends on the collection in ./fixtures/collection
-          ├── headers.spec.ts
-          ├── persistence.spec.ts
-          ├── variable-interpolation
-          │   ├── fixtures
-          │   │   └── collection
-          │   │       ├── environments
-          │   │       ├── bruno.json
-          │   │       └── ws-interpolation-test.bru
-          │   ├── init-user-data
-          │   └── variable-interpolation.spec.ts # <- Depends on the collection in ./variable-interpolation/fixtures/collection
-          └── subproto.spec.ts
-          ```
-
-chat:
-  auto_reply: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,10 +1,9 @@
-### Description
+# Description
 
 <!-- Explain here the changes your PR introduces and text to help us understand the context of this change. -->
 
-#### Contribution Checklist:
+### Contribution Checklist:
 
-- [ ] **I've used AI significantly to create this pull request**
 - [ ] **The pull request only addresses one issue or adds one feature.**
 - [ ] **The pull request does not introduce any breaking changes**
 - [ ] **I have added screenshots or gifs to help explain the change if applicable.**
@@ -13,6 +12,6 @@
 
 Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
 
-#### Publishing to New Package Managers
+### Publishing to New Package Managers
 
 Please see [here](../publishing.md) for more information.

.github/actions/common/setup-node-deps/action.yml

@@ -23,5 +23,4 @@ runs:
         npm run sandbox:bundle-libraries --workspace=packages/bruno-js
         npm run build:bruno-converters
         npm run build:bruno-requests
-        npm run build:schema-types
         npm run build:bruno-filestore

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

@@ -25,7 +25,7 @@ jobs:
         os: [ubuntu-latest, macos-latest]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
@@ -40,7 +40,7 @@ jobs:
         run: |
           cd packages/bruno-tests/collection
           npm install
-          bru run --env Prod --output junit.xml --format junit --sandbox developer
+          bru run --env Prod --output junit.xml --format junit
 
       - name: Publish Test Report
         uses: dorny/test-reporter@v2

.github/workflows/ssl-tests.yml

@@ -15,7 +15,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
 
       - 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@v6
+      - uses: actions/checkout@v4
 
       - 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@v6
+      - uses: actions/checkout@v4
       
       - 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@v6
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
@@ -30,13 +30,10 @@ jobs:
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
           npm run build --workspace=packages/bruno-converters
           npm run build --workspace=packages/bruno-requests
-          npm run build --workspace=packages/bruno-schema-types
           npm run build --workspace=packages/bruno-filestore
 
       - name: Lint Check
         run: npm run lint
-        env:
-          ESLINT_PLUGIN_DIFF_COMMIT: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}
 
       # tests
       - name: Test Package bruno-js
@@ -67,7 +64,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
@@ -84,7 +81,6 @@ jobs:
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
           npm run build --workspace=packages/bruno-converters
           npm run build --workspace=packages/bruno-requests
-          npm run build --workspace=packages/bruno-schema-types
           npm run build --workspace=packages/bruno-filestore
 
       - name: Run Local Testbench
@@ -96,7 +92,7 @@ jobs:
         run: |
           cd packages/bruno-tests/collection
           npm install
-          node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit --sandbox developer
+          node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit
 
       - name: Publish Test Report
         uses: EnricoMi/publish-unit-test-result-action@v2
@@ -110,7 +106,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-24.04
     steps:
-    - uses: actions/checkout@v6
+    - uses: actions/checkout@v4
     - uses: actions/setup-node@v5
       with:
         node-version: v22.11.x
@@ -136,13 +132,12 @@ jobs:
         npm run sandbox:bundle-libraries --workspace=packages/bruno-js
         npm run build:bruno-converters
         npm run build:bruno-requests
-        npm run build:schema-types
         npm run build:bruno-filestore
 
     - name: Run Playwright tests
       run: |
         xvfb-run npm run test:e2e
-    - uses: actions/upload-artifact@v5
+    - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}
       with:
         name: playwright-report

.gitignore

@@ -51,12 +51,3 @@ bruno.iml
 
 # Playwright
 /blob-report/
-
-# Development plan files
-*.plan.md
-
-# packages dist
-packages/bruno-filestore/dist
-packages/bruno-requests/dist
-packages/bruno-schema-types/dist
-packages/bruno-converters/dist

.husky/pre-commit

@@ -1 +0,0 @@
-npx nano-staged

CODING_STANDARDS.md

@@ -1,78 +0,0 @@
-# Bruno Coding Standards
-
-- No diffs unless an actual change is made, the code changes need to be as minimal as possible, avoid making un-necessary whitespace diffs. This is already handled by eslint but make sure you check your code changes before commiting and raising a PR.
-
-## General Style Rules
-
-- Use 2 spaces for indentation. No tabs, just spaces – keeps everything neat and uniform.
-
-- Stick to single quotes for strings. Double quotes are cool elsewhere, but here we go single.
-
-- Always add semicolons at the end of statements. It's like putting a period at the end of a sentence – clarity matters.
-
-- JSX is enabled, so feel free to use it where it makes sense.
-
-## Punctuation and Spacing
-
-- No trailing commas. Keep it clean, no extra commas hanging around.
-
-- Always use parentheses around parameters in arrow functions. Even for single params – consistency is key.
-
-- For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline.
-
-- No newlines inside function parentheses. Keep 'em tight.
-
-- Space before and after the arrow in arrow functions. `() => {}` is good.
-
-- No space between function name and parentheses. `func()` not `func ()`.
-
-- Semicolons go at the end of the line, not on a new line.
-
-- No strict max length – write readable code, not cramped lines.
-
-- Multiple expressions per line in JSX are fine – flexibility is nice.
-
-Remember, these rules are here to make our codebase harmonious. If something doesn't fit perfectly, let's chat about it. Happy coding! 🚀
-
-
-## Tests 
-
-- Add tests for any new functionality or meaningful changes. If code is added, removed, or significantly modified, corresponding tests should be updated or created.
- 
-- Prioritise high-value tests over maximum coverage. Focus on testing behaviour that is critical, complex, or likely to break—don’t chase coverage numbers for their own sake.
-
-- Write behaviour-driven tests, not implementation-driven ones. Tests should validate real expected output and observable behaviour, not internal details or mocked-out logic unless absolutely necessary.
-
-- Minimise mocking unless it meaningfully increases clarity or isolates external dependencies. Prefer real flows where practical; only mock external services, slow systems, or non-deterministic behaviour.
-
-- Keep tests readable and maintainable. Optimise for clarity over cleverness. Name tests descriptively, keep setup minimal, and avoid unnecessary abstraction.
-
-- Aim for tests that fail usefully. When a test fails, it should clearly indicate what behaviour broke and why.
-
-- Cover both the “happy path” and the realistically problematic paths. Validate expected success behaviour, but also validate error handling, edge cases, and degraded-mode behaviour when appropriate.
-
-- Ensure tests are deterministic and reproducible. No randomness, timing dependencies, or environment-specific assumptions without explicit control.
-
-- Avoid overfitting tests to current behaviour if future flexibility matters. Only assert what needs to be true, not incidental details.
-
-- Use consistent patterns and helper utilities where they improve clarity. Prefer shared test utilities over copy-pasted setup code, but only when it actually reduces complexity.
-
-- Tests should be fast enough to run continuously. Avoid long-running operations unless absolutely necessary; prefer lightweight fixtures and isolated units.
-
-
-## UI Specific instructions 
-
-### React
-
-- Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any react component using the styled component 
-- Styled Components are used as wrappers to define both self and children components style, tailwind classes are used specifically for layout based styles. 
-- Styled Component CSS might also change layout but tailwind classes shouldn't define colors. 
-
-## Readability and Abstractions
-
-- Avoid abstractions unless the exact same code is being used in more than 3 places.
-- Names for functions need to be concise and descriptive.
-- Add in JSDoc comments to add more details to the abstractions if needed.
-- Follow functional programming but just enough to be readable, we don't need to go as deep as ADTs and Monads, we want to keep the code pipeline obvious and easy for everyone to read and contribute to.
-- Avoid single line abstractions where all that's being done is increasing the call stack with one additional function.
-- Add in meaningful comments instead of obvious ones where complex code flow is explained properly.

contributing.md

@@ -16,7 +16,6 @@
 | [日本語](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!!
 
@@ -70,13 +69,11 @@ npm run build:bruno-query
 npm run build:bruno-common
 npm run build:bruno-converters
 npm run build:bruno-requests
-npm run build:schema-types
 npm run build:bruno-filestore
 
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js
 ```
-
 ##### Option 2
 
 ```bash
@@ -97,22 +94,18 @@ 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

@@ -1,92 +0,0 @@
-[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

@@ -1,8 +0,0 @@
-[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,6 +41,13 @@
 
 ![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,37 +37,13 @@ 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 />
 
-## 商业版本 ✨
+### 安装
 
-我们的大多数功能都是免费且开源的。
-我们致力于在 [开源与可持续性发展](https://github.com/usebruno/bruno/discussions/269) 之间取得和谐的平衡
-
-欢迎使用我们的 [付费版本](https://www.usebruno.com/pricing) ，看看附加的功能是否对您或团队有所帮助！ <br/>
-
-## 目录
-- [安装](#安装)
-- [特性](#特性)
-    - [跨平台使用 🖥️](#跨平台使用-)
-    - [通过Git协作 👩‍💻🧑‍💻](#通过git协作-)
-- [重要链接 📌](#重要链接-)
-- [展示 🎥](#展示-)
-- [分享评价 📣](#分享评价-)
-- [发布到新的包管理器](#发布到新的包管理器)
-- [联系方式 🌐](#联系方式-)
-- [商标](#商标)
-- [贡献 👩‍💻🧑‍💻](#贡献-)
-- [作者](#作者)
-- [许可证 📄](#许可证-)
-
-## 安装
-
-Bruno 可以在我们的 [网站上下载](https://www.usebruno.com/downloads) 适用于Mac、Windows 和 Linux 的可执行文件。
+Bruno 可以在我们的 [网站上下载](https://www.usebruno.com/downloads) Mac、Windows 和 Linux 的可执行文件。
 
 您也可以通过包管理器如 Homebrew、Chocolatey、Scoop、Snap 和 Apt 安装 Bruno。
 
@@ -82,15 +58,9 @@ 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
@@ -103,50 +73,67 @@ 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 />
 
-### 通过Git协作 👩‍💻🧑‍💻
+### Collaborate 安装 👩‍💻🧑‍💻
 
 或者任何您选择的版本控制系统
 
 ![bruno](../../assets/images/version-control.png) <br /><br />
 
-## 重要链接 📌
+### 重要链接 📌
 
 - [我们的愿景](https://github.com/usebruno/bruno/discussions/269)
-- [路线图](https://www.usebruno.com/roadmap)
+- [路线图](https://github.com/usebruno/bruno/discussions/384)
 - [文档](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)
 
-## 商标
+### 商标
 
 **名称**
 
@@ -156,20 +143,6 @@ 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,6 +43,13 @@ 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,6 +43,13 @@ 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

@@ -1,143 +0,0 @@
-<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,6 +43,13 @@ 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,6 +43,12 @@
 
 ![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,6 +26,13 @@ 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,6 +41,13 @@ 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

@@ -1,87 +1,11 @@
 // eslint.config.js
-const { defineConfig } = require('eslint/config');
-const globals = require('globals');
-const { fixupPluginRules } = require('@eslint/compat');
-const eslintPluginDiff = require('eslint-plugin-diff');
+const { defineConfig } = require("eslint/config");
+const globals = require("globals");
 
-let stylistic;
-
-const runESMImports = async () => {
-  stylistic = await import('@stylistic/eslint-plugin').then((d) => d.default);
-};
-
-module.exports = runESMImports().then(() => defineConfig([
-  // Global ignores - must be a standalone object with ONLY ignores
+module.exports = defineConfig([
   {
-    ignores: [
-      '**/node_modules/**/*',
-      '**/dist/**/*',
-      '**/*.bru',
-      'packages/bruno-js/src/sandbox/bundle-browser-rollup.js',
-      'packages/bruno-app/public/static/**/*'
-    ]
-  },
-  {
-    plugins: {
-      'diff': fixupPluginRules(eslintPluginDiff),
-      '@stylistic': stylistic
-    },
-    languageOptions: {
-      parser: require('@typescript-eslint/parser'),
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
-    },
-    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',
-      'packages/bruno-common/**/*.ts',
-      'packages/bruno-converters/**/*.js',
-      'packages/bruno-electron/**/*.js',
-      'packages/bruno-filestore/**/*.ts',
-      'packages/bruno-schema-types/**/*.ts',
-      'packages/bruno-js/**/*.js',
-      'packages/bruno-lang/**/*.js',
-      'packages/bruno-requests/**/*.ts',
-      'packages/bruno-requests/**/*.js',
-      'packages/bruno-tests/**/*.{js,ts}'
-    ],
-    rules: {
-      ...stylistic.configs.customize({
-        indent: 2,
-        quotes: 'single',
-        semi: true,
-        jsx: true
-      }).rules,
-      '@stylistic/comma-dangle': ['error', 'never'],
-      '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
-      '@stylistic/arrow-parens': ['error', 'always'],
-      '@stylistic/curly-newline': ['error', {
-        multiline: true,
-        minElements: 2,
-        consistent: true
-      }],
-      '@stylistic/function-paren-newline': ['off'],
-      '@stylistic/array-bracket-spacing': ['error', 'never'],
-      '@stylistic/arrow-spacing': ['error', { before: true, after: true }],
-      '@stylistic/function-call-spacing': ['error', 'never'],
-      '@stylistic/multiline-ternary': ['off'],
-      '@stylistic/padding-line-between-statements': ['off'],
-      '@stylistic/semi-style': ['error', 'last'],
-      '@stylistic/max-len': ['off'],
-      '@stylistic/jsx-one-expression-per-line': ['off'],
-      '@stylistic/max-statements-per-line': ['off'],
-      '@stylistic/no-mixed-operators': ['off']
-    }
-  },
-  {
-    files: ['packages/bruno-app/**/*.{js,jsx,ts}'],
-    ignores: ['**/*.config.js', '**/public/**/*'],
+    files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
+    ignores: ["**/*.config.js", "**/public/**/*"],
     languageOptions: {
       globals: {
         ...globals.browser,
@@ -94,114 +18,114 @@ module.exports = runESMImports().then(() => defineConfig([
       },
       parserOptions: {
         ecmaFeatures: {
-          jsx: true
-        }
-      }
+          jsx: true,
+        },
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
     // It prevents lint errors when using CommonJS exports (module.exports) in Jest mocks.
-    files: ['packages/bruno-app/src/test-utils/mocks/codemirror.js'],
+    files: ["packages/bruno-app/src/test-utils/mocks/codemirror.js"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
-      }
+        ...globals.jest,
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-cli/**/*.js'],
-    ignores: ['**/*.config.js'],
+    files: ["packages/bruno-cli/**/*.js"],
+    ignores: ["**/*.config.js"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
       },
       parserOptions: {
-        ecmaVersion: 'latest'
-      }
-    },
-    rules: {
-      'no-undef': 'error'
-    }
-  },
-  {
-    files: ['packages/bruno-common/**/*.ts'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest
+        ecmaVersion: "latest"
       },
-      parser: require('@typescript-eslint/parser'),
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: './packages/bruno-common/tsconfig.json'
-      }
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-converters/**/*.js'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-common/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-common/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-converters/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
       },
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
-    },
-    rules: {
-      'no-undef': 'error'
-    }
-  },
-  {
-    files: ['packages/bruno-electron/**/*.js'],
-    ignores: ['**/*.config.js', '**/web/**/*'],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest
-      }
-    },
-    rules: {
-      'no-undef': 'error'
-    }
-  },
-  {
-    files: ['packages/bruno-filestore/**/*.ts'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest
+        ecmaVersion: "latest",
+        sourceType: "module",
       },
-      parser: require('@typescript-eslint/parser'),
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: './packages/bruno-filestore/tsconfig.json'
-      }
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-js/**/*.js'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-electron/**/*.js"],
+    ignores: ["**/*.config.js", "**/web/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-filestore/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-filestore/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-js/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
@@ -212,65 +136,65 @@ module.exports = runESMImports().then(() => defineConfig([
         typeDetectGlobalObject: false
       },
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-lang/**/*.js'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-lang/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
       },
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-requests/**/*.ts'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-requests/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
       },
-      parser: require('@typescript-eslint/parser'),
+      parser: require("@typescript-eslint/parser"),
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: './packages/bruno-requests/tsconfig.json'
-      }
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-requests/tsconfig.json",
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-requests/**/*.js'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-requests/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
       },
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
-  }
-]));
+      "no-undef": "error",
+    },
+  },
+]);

package.json

@@ -8,7 +8,6 @@
     "packages/bruno-common",
     "packages/bruno-converters",
     "packages/bruno-schema",
-    "packages/bruno-schema-types",
     "packages/bruno-query",
     "packages/bruno-js",
     "packages/bruno-lang",
@@ -20,25 +19,20 @@
   ],
   "homepage": "https://usebruno.com",
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
-    "@stylistic/eslint-plugin": "^5.3.1",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
     "@typescript-eslint/parser": "^8.39.0",
     "concurrently": "^8.2.2",
     "eslint": "^9.26.0",
-    "eslint-plugin-diff": "^2.0.3",
     "fs-extra": "^11.1.1",
     "globals": "^16.1.0",
-    "husky": "^9.1.7",
     "jest": "^29.2.0",
     "lodash-es": "^4.17.21",
-    "nano-staged": "^0.8.0",
     "playwright": "^1.51.1",
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
@@ -62,7 +56,6 @@
     "build:bruno-converters": "npm run build --workspace=packages/bruno-converters",
     "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
-    "build:schema-types": "npm run build --workspace=packages/bruno-schema-types",
     "build:electron": "node ./scripts/build-electron.js",
     "build:electron:mac": "./scripts/build-electron.sh mac",
     "build:electron:win": "./scripts/build-electron.sh win",
@@ -75,14 +68,7 @@
     "test:e2e": "playwright test --project=default",
     "test:e2e:ssl": "playwright test --project=ssl",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "lint": "node --max_old_space_size=4096 $(npx which eslint)",
-    "lint:fix": "node --max_old_space_size=4096 $(npx which eslint) --fix",
-    "prepare": "husky"
-  },
-  "nano-staged": {
-    "*.{js,ts,jsx}": [
-      "npm run lint:fix"
-    ]
+    "lint": "node --max_old_space_size=4096 $(npx which eslint)"
   },
   "overrides": {
     "rollup": "3.29.5",

packages/bruno-app/babel.config.js

@@ -6,4 +6,4 @@ module.exports = {
     }]
   ],
   plugins: ['babel-plugin-styled-components']
-};
+};

packages/bruno-app/jest.config.js

@@ -1,10 +1,10 @@
 module.exports = {
   rootDir: '.',
   transform: {
-    '^.+\\.[jt]sx?$': 'babel-jest'
+    '^.+\\.[jt]sx?$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    '/node_modules/(?!strip-json-comments|nanoid|xml-formatter)/'
+    "/node_modules/(?!strip-json-comments|nanoid|xml-formatter)/",
   ],
   moduleNameMapper: {
     '^assets/(.*)$': '<rootDir>/src/assets/$1',
@@ -22,9 +22,9 @@ module.exports = {
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['@testing-library/jest-dom'],
   setupFiles: [
-    '<rootDir>/jest.setup.js'
+    '<rootDir>/jest.setup.js',
   ],
   testMatch: [
     '<rootDir>/src/**/*.spec.[jt]s?(x)'
   ]
-};
+};

packages/bruno-app/package.json

@@ -21,16 +21,12 @@
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
     "@usebruno/schema": "0.7.0",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/xterm": "^5.5.0",
     "classnames": "^2.3.1",
     "codemirror": "5.65.2",
     "codemirror-graphql": "2.1.1",
     "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",
@@ -39,9 +35,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",
@@ -50,7 +46,6 @@
     "jsonc-parser": "^3.2.1",
     "jsonpath-plus": "^10.3.0",
     "know-your-http-well": "^0.5.0",
-    "linkify-it": "^5.0.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",

packages/bruno-app/public/theme/dark.js

@@ -1,6 +1,6 @@
 const darkTheme = {
-  'brand': '#546de5',
-  'text': 'rgb(52 52 52)',
+  brand: '#546de5',
+  text: 'rgb(52 52 52)',
   'primary-text': '#ffffff',
   'primary-theme': '#1e1e1e',
   'secondary-text': '#929292',

packages/bruno-app/public/theme/light.js

@@ -1,6 +1,6 @@
 const lightTheme = {
-  'brand': '#546de5',
-  'text': 'rgb(52 52 52)',
+  brand: '#546de5',
+  text: 'rgb(52 52 52)',
   'primary-text': 'rgb(52 52 52)',
   'primary-theme': '#ffffff',
   'secondary-text': '#929292',

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, dataTestId }) => {
+const Accordion = ({ children, defaultIndex }) => {
   const [openIndex, setOpenIndex] = useState(defaultIndex);
 
   const toggleItem = (index) => {
@@ -13,7 +13,7 @@ const Accordion = ({ children, defaultIndex, dataTestId }) => {
 
   return (
     <AccordionContext.Provider value={{ openIndex, toggleItem }}>
-      <div data-testid={dataTestId}>{children}</div>
+      <div>{children}</div>
     </AccordionContext.Provider>
   );
 };

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

@@ -1,83 +0,0 @@
-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/BrunoSupport/index.js

@@ -6,7 +6,7 @@ import StyledWrapper from './StyledWrapper';
 const BrunoSupport = ({ onClose }) => {
   return (
     <StyledWrapper>
-      <Modal size="sm" title="Support" handleCancel={onClose} hideFooter={true}>
+      <Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
         <div className="collection-options">
           <div className="mt-2">
             <a href="https://docs.usebruno.com" target="_blank" className="flex items-end">

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

@@ -1,79 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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,12 +1,6 @@
 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};
@@ -18,33 +12,6 @@ const StyledWrapper = styled.div`
     flex-direction: column-reverse;
   }
 
-  .CodeMirror-placeholder {
-    color: ${(props) => props.theme.text} !important;
-    opacity: 0.5 !important;
-  }
-
-  .CodeMirror-linenumber {
-    text-align: left !important;
-    padding-left: 3px !important;
-  }
-
-  /* Override default lint highlight background when emphasizing the gutter */
-  .CodeMirror-lint-line-error,
-  .CodeMirror-lint-line-warning {
-    background: none !important;
-  }
-
-  /* Style line numbers when there's a lint issue */
-  .CodeMirror-lint-line-error .CodeMirror-linenumber {
-    color: #d32f2f !important;
-    text-decoration: underline;
-  }
-
-  .CodeMirror-lint-line-warning .CodeMirror-linenumber {
-    color: #f57c00 !important;
-    text-decoration: underline;
-  }
-
   /* Removes the glow outline around the folded json */
   .CodeMirror-foldmarker {
     text-shadow: none;
@@ -100,48 +67,41 @@ const StyledWrapper = styled.div`
     }
   }
 
-  .cm-s-default, .cm-s-monokai {
-    span.cm-def {
-      color: ${(props) => props.theme.codemirror.tokens.definition} !important;
-    }
-    span.cm-property {
-      color: ${(props) => props.theme.codemirror.tokens.property} !important;
-    }
-    span.cm-string {
-      color: ${(props) => props.theme.codemirror.tokens.string} !important;
-    }
-    span.cm-number {
-      color: ${(props) => props.theme.codemirror.tokens.number} !important;
-    }
-    span.cm-atom {
-      color: ${(props) => props.theme.codemirror.tokens.atom} !important;
-    }
-    span.cm-variable {
-      color: ${(props) => props.theme.codemirror.tokens.variable} !important;
-    }
-    span.cm-keyword {
-      color: ${(props) => props.theme.codemirror.tokens.keyword} !important;
-    }
-    span.cm-comment {
-      color: ${(props) => props.theme.codemirror.tokens.comment} !important;
-    }
-    span.cm-operator {
-      color: ${(props) => props.theme.codemirror.tokens.operator} !important;
-    }
+  .cm-s-monokai span.cm-property,
+  .cm-s-monokai span.cm-attribute {
+    color: #9cdcfe !important;
+  }
+
+  .cm-s-monokai span.cm-string {
+    color: #ce9178 !important;
+  }
+
+  .cm-s-monokai span.cm-number {
+    color: #b5cea8 !important;
+  }
+
+  .cm-s-monokai span.cm-atom {
+    color: #569cd6 !important;
   }
 
-  /* Variable validation colors */
   .cm-variable-valid {
-    color: #5fad89 !important; /* Soft sage */
+    color: green;
   }
   .cm-variable-invalid {
-    color: #d17b7b !important; /* Soft coral */
+    color: red;
   }
 
   .CodeMirror-search-hint {
     display: inline;
   }
-  
+
+  .cm-s-default span.cm-property {
+    color: #1f61a0 !important;
+  }
+
+  .cm-s-default span.cm-variable {
+    color: #397d13 !important;
+  }
   
   //matching bracket fix
   .CodeMirror-matchingbracket {
@@ -149,42 +109,6 @@ const StyledWrapper = styled.div`
     text-decoration:unset;
   }
 
-  .cm-search-line-highlight {
-    background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
-  }
-
-  .cm-search-match {
-    background: rgba(255, 193, 7, 0.25);
-  }
-
-  .cm-search-current {
-    background: rgba(255, 193, 7, 0.4);
-  }
-
-  .lint-error-tooltip {
-    position: fixed;
-    z-index: 10000;
-    background: ${(props) => props.theme.codemirror.bg};
-    border-radius: ${(props) => props.theme.border.radius.base};
-    padding: 8px 12px;
-    max-width: 400px;
-    box-shadow: ${(props) => props.theme.shadow.sm};
-    font-size: ${(props) => props.theme.font.size.xs};
-    line-height: 1.5;
-    pointer-events: none;
-
-    .lint-tooltip-message {
-      padding: 2px 0;
-    }
-
-    .lint-tooltip-message.error {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-
-    .lint-tooltip-message.warning {
-      color: ${(props) => props.theme.colors.text.warning};
-    }
-  }
 `;
 
 export default StyledWrapper;

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

@@ -14,9 +14,6 @@ import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
-import { setupLinkAware } from 'utils/codemirror/linkAware';
-import { setupLintErrorTooltip } from 'utils/codemirror/lint-errors';
-import CodeMirrorSearch from 'components/CodeMirrorSearch';
 
 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -38,12 +35,7 @@ export default class CodeEditor extends React.Component {
     this.lintOptions = {
       esversion: 11,
       expr: true,
-      asi: true,
-      highlightLines: true
-    };
-
-    this.state = {
-      searchBarVisible: false
+      asi: true
     };
   }
 
@@ -52,22 +44,19 @@ export default class CodeEditor extends React.Component {
 
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
-      placeholder: '...',
       lineNumbers: true,
-      lineWrapping: this.props.enableLineWrapping ?? true,
+      lineWrapping: true,
       tabSize: TAB_SIZE,
       mode: this.props.mode || 'application/ld+json',
-      brunoVarInfo: this.props.enableBrunoVarInfo !== false ? {
-        variables,
-        collection: this.props.collection,
-        item: this.props.item
-      } : false,
+      brunoVarInfo: {
+        variables
+      },
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
       showCursorWhenSelecting: true,
       foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
       lint: this.lintOptions,
       readOnly: this.props.readOnly,
       scrollbarStyle: 'overlay',
@@ -94,18 +83,28 @@ export default class CodeEditor extends React.Component {
           }
         },
         'Cmd-F': (cm) => {
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
+          if (this._isSearchOpen()) {
+            // replace the older search component with the new one
+            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+            search && search.remove();
           }
+          cm.execCommand('findPersistent');
+          this._bindSearchHandler();
+          this._appendSearchResultsCount();
         },
         'Ctrl-F': (cm) => {
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
+          if (this._isSearchOpen()) {
+            // replace the older search component with the new one
+            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+            search && search.remove();
           }
+          cm.execCommand('findPersistent');
+          this._bindSearchHandler();
+          this._appendSearchResultsCount();
         },
         'Cmd-H': 'replace',
         'Ctrl-H': 'replace',
-        'Tab': function (cm) {
+        Tab: function (cm) {
           cm.getSelection().includes('\n') || editor.getLine(cm.getCursor().line) == cm.getSelection()
             ? cm.execCommand('indentMore')
             : cm.replaceSelection('  ', 'end');
@@ -130,11 +129,6 @@ export default class CodeEditor extends React.Component {
           } else {
             this.editor.toggleComment();
           }
-        },
-        'Esc': () => {
-          if (this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: false });
-          }
         }
       },
       foldOptions: {
@@ -151,7 +145,7 @@ export default class CodeEditor extends React.Component {
           } else if (this.props.mode == 'application/xml') {
             var doc = new DOMParser();
             try {
-              // add header element and remove prefix namespaces for DOMParser
+              //add header element and remove prefix namespaces for DOMParser
               var dcm = doc.parseFromString(
                 '<a> ' + internal.replace(/(?<=\<|<\/)\w+:/g, '') + '</a>',
                 'application/xml'
@@ -188,7 +182,7 @@ export default class CodeEditor extends React.Component {
       }
       return found;
     });
-
+    
     if (editor) {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
@@ -197,7 +191,7 @@ export default class CodeEditor extends React.Component {
       this.addOverlay();
 
       const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
-
+      
       // Setup AutoComplete Helper for all modes
       const autoCompleteOptions = {
         showHintsFor: this.props.showHintsFor,
@@ -208,11 +202,6 @@ export default class CodeEditor extends React.Component {
         editor,
         autoCompleteOptions
       );
-
-      setupLinkAware(editor);
-
-      // Setup lint error tooltip on line number hover
-      this.cleanupLintErrorTooltip = setupLintErrorTooltip(editor);
     }
   }
 
@@ -238,16 +227,6 @@ export default class CodeEditor extends React.Component {
       if (!isEqual(variables, this.variables)) {
         this.addOverlay();
       }
-
-      // Update collection and item when they change
-      if (this.props.enableBrunoVarInfo !== false && this.editor.options.brunoVarInfo) {
-        if (!isEqual(this.props.collection, this.editor.options.brunoVarInfo.collection)) {
-          this.editor.options.brunoVarInfo.collection = this.props.collection;
-        }
-        if (!isEqual(this.props.item, this.editor.options.brunoVarInfo.item)) {
-          this.editor.options.brunoVarInfo.item = this.props.item;
-        }
-      }
     }
 
     if (this.props.theme !== prevProps.theme && this.editor) {
@@ -258,32 +237,20 @@ export default class CodeEditor extends React.Component {
       this.editor.scrollTo(null, this.props.initialScroll);
     }
 
-    if (this.props.enableLineWrapping !== prevProps.enableLineWrapping) {
-      this.editor.setOption('lineWrapping', this.props.enableLineWrapping);
-    }
-
-    if (this.props.mode !== prevProps.mode) {
-      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;
   }
 
   componentWillUnmount() {
     if (this.editor) {
-      this.editor?._destroyLinkAware?.();
       this.editor.off('change', this._onEdit);
       this.editor.off('scroll', this.onScroll);
-
-      // Clean up lint error tooltip
-      this.cleanupLintErrorTooltip?.();
-
       this.editor = null;
     }
+
+    this._unbindSearchHandler();
+    if (this.brunoAutoCompleteCleanup) {
+      this.brunoAutoCompleteCleanup();
+    }
   }
 
   render() {
@@ -292,22 +259,14 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className={`h-full w-full flex flex-col relative graphiql-container ${this.props.readOnly ? 'read-only' : ''}`}
+        className="h-full w-full flex flex-col relative graphiql-container"
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}
-      >
-        <CodeMirrorSearch
-          visible={this.state.searchBarVisible}
-          editor={this.editor}
-          onClose={() => this.setState({ searchBarVisible: false })}
-        />
-        <div
-          className={`editor-container${this.state.searchBarVisible ? ' search-bar-visible' : ''}`}
-          ref={(node) => { this._node = node; }}
-          style={{ height: '100%', width: '100%' }}
-        />
-      </StyledWrapper>
+        ref={(node) => {
+          this._node = node;
+        }}
+      />
     );
   }
 
@@ -316,11 +275,6 @@ export default class CodeEditor extends React.Component {
     let variables = getAllVariables(this.props.collection, this.props.item);
     this.variables = variables;
 
-    // Update brunoVarInfo with latest variables
-    if (this.props.enableBrunoVarInfo !== false && this.editor.options.brunoVarInfo) {
-      this.editor.options.brunoVarInfo.variables = variables;
-    }
-
     defineCodeMirrorBrunoVariablesMode(variables, mode, false, this.props.enableVariableHighlighting);
     this.editor.setOption('mode', 'brunovariables');
   };
@@ -336,4 +290,67 @@ export default class CodeEditor extends React.Component {
       }
     }
   };
+
+  _isSearchOpen = () => {
+    return document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+  };
+
+  /**
+   * Bind handler to search input to count number of search results
+   */
+  _bindSearchHandler = () => {
+    const searchInput = document.querySelector('.CodeMirror-search-field');
+
+    if (searchInput) {
+      searchInput.addEventListener('input', this._countSearchResults);
+    }
+  };
+
+  /**
+   * Unbind handler to search input to count number of search results
+   */
+  _unbindSearchHandler = () => {
+    const searchInput = document.querySelector('.CodeMirror-search-field');
+
+    if (searchInput) {
+      searchInput.removeEventListener('input', this._countSearchResults);
+    }
+  };
+
+  /**
+   * Append search results count to search dialog
+   */
+  _appendSearchResultsCount = () => {
+    const dialog = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+
+    if (dialog) {
+      const searchResultsCount = document.createElement('span');
+      searchResultsCount.id = this.searchResultsCountElementId;
+      dialog.appendChild(searchResultsCount);
+
+      this._countSearchResults();
+    }
+  };
+
+  /**
+   * Count search results and update state
+   */
+  _countSearchResults = () => {
+    let count = 0;
+
+    const searchInput = document.querySelector('.CodeMirror-search-field');
+
+    if (searchInput && searchInput.value.length > 0) {
+      // Escape special characters in search input to prevent RegExp crashes. Fixes #3051
+      const text = new RegExp(escapeRegExp(searchInput.value), 'gi');
+      const matches = this.editor.getValue().match(text);
+      count = matches ? matches.length : 0;
+    }
+
+    const searchResultsCountElement = document.querySelector(`#${this.searchResultsCountElementId}`);
+
+    if (searchResultsCountElement) {
+      searchResultsCountElement.innerText = `${count} results`;
+    }
+  };
 }

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

@@ -10,10 +10,10 @@ jest.mock('codemirror', () => {
 
 const MOCK_THEME = {
   codemirror: {
-    bg: '#1e1e1e',
-    border: '#333'
+    bg: "#1e1e1e",
+    border: "#333",
   },
-  textLink: '#007acc'
+  textLink: "#007acc",
 };
 
 const setupEditorState = (editor, { value, cursorPosition }) => {
@@ -27,8 +27,8 @@ const setupEditorState = (editor, { value, cursorPosition }) => {
   });
 
   editor.state = {
-    completionActive: null
-  };
+    completionActive: null,
+  }
 };
 
 const setupEditorWithRef = () => {
@@ -47,5 +47,5 @@ describe('CodeEditor', () => {
     jest.resetModules();
   });
 
-  it('add CodeEditor related tests here', () => {});
-});
+  it("add CodeEditor related tests here", () => {});
+});

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

@@ -1,99 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .bruno-search-bar {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 20;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    padding: 0 2px;
-    min-height: 36px;
-    background: ${(props) => props.theme.sidebar.search.bg} !important;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.sidebar.search.bg} !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    width: auto;
-    min-width: 180px;
-    max-width: 320px;
-  }
-
-  .bruno-search-bar input {
-    min-width: 80px;
-    background: transparent;
-    color: inherit;
-    border: none;
-    outline: none;
-    padding: 1px 2px;
-    font-size: ${(props) => props.theme.font.size.base};
-    margin: 0 1px;
-    height: 28px;
-  }
-
-  .searchbar-icon-btn {
-    background: none;
-    border: none;
-    padding: 0 1px;
-    margin: 0 1px;
-    cursor: pointer;
-    color: #aaa;
-    border-radius: 3px;
-    height: 18px;
-    width: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .searchbar-result-count {
-    min-width: 28px;
-    text-align: center;
-    font-size: ${(props) => props.theme.font.size.xs};
-    color: #aaa;
-    margin: 0 8px 0 1px; 
-    white-space: nowrap;
-  }
-
-  .bruno-search-bar.compact {
-    background: ${(props) => props.theme.codemirror.bg};
-    color: ${(props) => props.theme.codemirror.text || props.theme.text};
-    border: none;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    border-radius: 4px;
-    padding: 1px 3px;
-    min-height: 22px;
-    display: flex;
-    align-items: center;
-    gap: 0;
-  }
-
-  .bruno-search-bar input {
-    background: transparent;
-    color: inherit;
-    border: none;
-    outline: none;
-    font-size: ${(props) => props.theme.font.size.base};
-    padding: 1px 2px;
-    min-width: 80px;
-  }
-
-  .searchbar-icon-btn:focus {
-    outline: 1px solid ${(props) => props.theme.codemirror.border};
-  }
-
-  .bruno-search-bar, .bruno-search-bar input {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-  }
-
-  .cm-search-line-highlight {
-    background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
-  }
-
-  .searchbar-icon-btn.active {
-    color: #f39c12 !important;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,201 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { IconRegex, IconArrowUp, IconArrowDown, IconX, IconLetterCase, IconLetterW } from '@tabler/icons';
-import ToolHint from 'components/ToolHint';
-import StyledWrapper from './StyledWrapper';
-import useDebounce from 'hooks/useDebounce';
-
-function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');
-}
-
-const CodeMirrorSearch = ({ visible, editor, onClose }) => {
-  const [searchText, setSearchText] = useState('');
-  const [regex, setRegex] = useState(false);
-  const [caseSensitive, setCaseSensitive] = useState(false);
-  const [wholeWord, setWholeWord] = useState(false);
-  const [matchIndex, setMatchIndex] = useState(0);
-  const [matchCount, setMatchCount] = useState(0);
-
-  const searchMarks = useRef([]);
-  const searchLineHighlight = useRef(null);
-  const searchMatches = useRef([]);
-
-  const debouncedSearchText = useDebounce(searchText, 150);
-
-  const memoizedMatches = useMemo(() => {
-    if (!editor || !visible) return [];
-    if (!debouncedSearchText) return [];
-
-    try {
-      let query, options = {};
-      if (regex) {
-        try {
-          query = new RegExp(debouncedSearchText, caseSensitive ? 'g' : 'gi');
-        } catch {
-          return [];
-        }
-      } else if (wholeWord) {
-        const escaped = escapeRegExp(debouncedSearchText);
-        query = new RegExp(`\\b${escaped}\\b`, caseSensitive ? 'g' : 'gi');
-      } else {
-        query = debouncedSearchText;
-        options = { caseFold: !caseSensitive };
-      }
-
-      const cursor = editor.getSearchCursor(query, { line: 0, ch: 0 }, options);
-      const out = [];
-      while (cursor.findNext()) {
-        out.push({ from: cursor.from(), to: cursor.to() });
-      }
-      return out;
-    } catch (e) {
-      console.error('Search error:', e);
-      return [];
-    }
-  }, [editor, visible, debouncedSearchText, regex, caseSensitive, wholeWord]);
-
-  const doSearch = useCallback((newIndex = 0) => {
-    if (!editor) return;
-
-    // Clear previous marks
-    searchMarks.current.forEach((mark) => mark.clear());
-    searchMarks.current = [];
-    // Clear previous line highlight
-    if (searchLineHighlight.current !== null) {
-      editor.removeLineClass(searchLineHighlight.current, 'wrap', 'cm-search-line-highlight');
-      searchLineHighlight.current = null;
-    }
-
-    if (!debouncedSearchText) {
-      setMatchCount(0);
-      setMatchIndex(0);
-      searchMatches.current = [];
-      return;
-    }
-
-    try {
-      const matches = memoizedMatches;
-      let matchIndex = matches.length ? Math.max(0, Math.min(newIndex, matches.length - 1)) : 0;
-      matches.forEach((m, i) => {
-        const mark = editor.markText(m.from, m.to, {
-          className: i === matchIndex ? 'cm-search-current' : 'cm-search-match',
-          clearOnEnter: true
-        });
-        searchMarks.current.push(mark);
-      });
-
-      if (matches.length) {
-        const currentLine = matches[matchIndex].from.line;
-        editor.addLineClass(currentLine, 'wrap', 'cm-search-line-highlight');
-        searchLineHighlight.current = currentLine;
-
-        editor.scrollIntoView(matches[matchIndex].from, 100);
-        editor.setSelection(matches[matchIndex].from, matches[matchIndex].to);
-      } else {
-        searchLineHighlight.current = null;
-      }
-
-      setMatchCount(matches.length);
-      setMatchIndex(matchIndex);
-      searchMatches.current = matches;
-    } catch (e) {
-      console.error('Search error:', e);
-      setMatchCount(0);
-      setMatchIndex(0);
-      searchMatches.current = [];
-    }
-  }, [debouncedSearchText, regex, caseSensitive, wholeWord, editor, memoizedMatches]);
-
-  useEffect(() => {
-    doSearch(0, debouncedSearchText);
-  }, [debouncedSearchText, doSearch]);
-
-  const handleSearchBarClose = useCallback(() => {
-    searchMarks.current.forEach((mark) => mark.clear());
-    searchMarks.current = [];
-    if (searchLineHighlight.current !== null && editor) {
-      editor.removeLineClass(searchLineHighlight.current, 'wrap', 'cm-search-line-highlight');
-      searchLineHighlight.current = null;
-    }
-    searchMatches.current = [];
-    if (onClose) onClose();
-    // Focus the editor after closing the search bar
-    if (editor) {
-      setTimeout(() => editor.focus(), 0);
-    }
-  }, [editor, onClose]);
-
-  const handleSearchTextChange = (text) => {
-    setSearchText(text);
-    setMatchIndex(0);
-  };
-
-  const handleToggleRegex = () => {
-    setRegex((prev) => !prev);
-    setMatchIndex(0);
-    doSearch(0);
-  };
-
-  const handleToggleCase = () => {
-    setCaseSensitive((prev) => !prev);
-    setMatchIndex(0);
-    doSearch(0);
-  };
-
-  const handleToggleWholeWord = () => {
-    setWholeWord((prev) => !prev);
-    setMatchIndex(0);
-    doSearch(0);
-  };
-
-  const handleNext = () => {
-    if (!searchMatches.current || !searchMatches.current.length) return;
-    let next = (matchIndex + 1) % searchMatches.current.length;
-    setMatchIndex(next);
-    doSearch(next);
-  };
-
-  const handlePrev = () => {
-    if (!searchMatches.current || !searchMatches.current.length) return;
-    let prev = (matchIndex - 1 + searchMatches.current.length) % searchMatches.current.length;
-    setMatchIndex(prev);
-    doSearch(prev);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <StyledWrapper>
-      <div className="bruno-search-bar compact">
-        <input
-          autoFocus
-          type="text"
-          value={searchText}
-          onChange={(e) => handleSearchTextChange(e.target.value)}
-          placeholder="Search..."
-          spellCheck={false}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) handleNext();
-            if (e.key === 'Enter' && e.shiftKey) handlePrev();
-            if (e.key === 'Escape') handleSearchBarClose();
-          }}
-        />
-        <span className="searchbar-result-count">{matchCount > 0 ? `${matchIndex + 1} / ${matchCount}` : '0 results'}</span>
-        <ToolHint text="Regex search" toolhintId="searchbar-regex-toolhint" place="top">
-          <button className={`searchbar-icon-btn ${regex ? 'active' : ''}`} onClick={handleToggleRegex}><IconRegex size={16} /></button>
-        </ToolHint>
-        <ToolHint text="Case sensitive" toolhintId="searchbar-case-toolhint" place="top">
-          <button className={`searchbar-icon-btn ${caseSensitive ? 'active' : ''}`} onClick={handleToggleCase}><IconLetterCase size={14} /></button>
-        </ToolHint>
-        <ToolHint text="Whole word" toolhintId="searchbar-wholeword-toolhint" place="top">
-          <button className={`searchbar-icon-btn ${wholeWord ? 'active' : ''}`} onClick={handleToggleWholeWord}><IconLetterW size={14} /></button>
-        </ToolHint>
-        <button className="searchbar-icon-btn" title="Previous" onClick={handlePrev}><IconArrowUp size={14} /></button>
-        <button className="searchbar-icon-btn" title="Next" onClick={handleNext}><IconArrowDown size={14} /></button>
-        <button className="searchbar-icon-btn" title="Close" onClick={handleSearchBarClose}><IconX size={14} /></button>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default CodeMirrorSearch;

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } 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 = collection.draft?.root ? get(collection, 'draft.root.request.auth.apikey', {}) : get(collection, 'root.request.auth.apikey', {});
+  const apikeyAuth = get(collection, 'root.request.auth.apikey', {});
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const Icon = forwardRef((props, ref) => {
     return (
@@ -43,16 +43,16 @@ const ApiKeyAuth = ({ collection }) => {
   };
 
   useEffect(() => {
-    !apikeyAuth?.placement
-    && dispatch(
-      updateCollectionAuth({
-        mode: 'apikey',
-        collectionUid: collection.uid,
-        content: {
-          placement: 'header'
-        }
-      })
-    );
+    !apikeyAuth?.placement &&
+      dispatch(
+        updateCollectionAuth({
+          mode: 'apikey',
+          collectionUid: collection.uid,
+          content: {
+            placement: 'header'
+          }
+        })
+      );
   }, [apikeyAuth]);
 
   return (

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: ${(props) => props.theme.font.size.base};
+  font-size: 0.8125rem;
 
   .auth-mode-selector {
     background: transparent;

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 = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
+  const authMode = get(collection, 'root.request.auth.mode');
 
   const Icon = forwardRef((props, ref) => {
     return (
@@ -87,7 +87,7 @@ const AuthMode = ({ collection }) => {
             }}
           >
             NTLM Auth
-          </div>
+          </div>          
           <div
             className="dropdown-item"
             onClick={() => {

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const AwsV4Auth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const awsv4Auth = collection.draft?.root ? get(collection, 'draft.root.request.auth.awsv4', {}) : get(collection, 'root.request.auth.awsv4', {});
+  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleAccessKeyIdChange = (accessKeyId) => {
     dispatch(

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BasicAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const basicAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.basic', {}) : get(collection, 'root.request.auth.basic', {});
+  const basicAuth = get(collection, 'root.request.auth.basic', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BearerAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = collection.draft?.root ? get(collection, 'draft.root.request.auth.bearer.token', '') : get(collection, 'root.request.auth.bearer.token', '');
+  const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(bearerToken);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleTokenChange = (token) => {
     dispatch(

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const DigestAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const digestAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.digest', {}) : get(collection, 'root.request.auth.digest', {});
+  const digestAuth = get(collection, 'root.request.auth.digest', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

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

@@ -6,18 +6,25 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
+
+
+
+
 const NTLMAuth = ({ collection }) => {
+
+
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const ntlmAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.ntlm', {}) : get(collection, 'root.request.auth.ntlm', {});
+  const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -60,7 +67,10 @@ const NTLMAuth = ({ collection }) => {
         }
       })
     );
-  };
+  };  
+
+
+
 
   return (
     <StyledWrapper className="mt-2 w-full">

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
   .single-line-editor-wrapper {
     max-width: 400px;

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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } 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';
@@ -10,14 +10,14 @@ import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCr
 import OAuth2Implicit from 'components/RequestPane/Auth/OAuth2/Implicit/index';
 import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
 
-const GrantTypeComponentMap = ({ collection }) => {
+const GrantTypeComponentMap = ({collection }) => {
   const dispatch = useDispatch();
 
   const save = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
   };
 
-  let request = collection.draft?.root ? get(collection, 'draft.root.request', {}) : get(collection, 'root.request', {});
+  let request = collection.draft ? get(collection, 'draft.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?.root ? get(collection, 'draft.root.request', {}) : get(collection, 'root.request', {});
+  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
 
   return (
     <StyledWrapper className="mt-2 w-full">

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const WsseAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const wsseAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.wsse', {}) : get(collection, 'root.request.auth.wsse', {});
+  const wsseAuth = get(collection, 'root.request.auth.wsse', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUserChange = (username) => {
     dispatch(

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

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

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

@@ -1,30 +1,19 @@
 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 = ({ 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 ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const certFilePathInputRef = useRef();
   const keyFilePathInputRef = useRef();
   const pfxFilePathInputRef = useRef();
-  const { storedTheme } = useTheme();
 
   const formik = useFormik({
     initialValues: {
@@ -39,7 +28,7 @@ const ClientCertSettings = ({ collection }) => {
       domain: Yup.string()
         .required()
         .trim()
-        .test('not-empty-after-trim', 'Domain is required', (value) => value && value.trim().length > 0),
+        .test('not-empty-after-trim', 'Domain is required', value => value && value.trim().length > 0),
       type: Yup.string().required().oneOf(['cert', 'pfx']),
       certFilePath: Yup.string().when('type', {
         is: (type) => type == 'cert',
@@ -73,47 +62,28 @@ const ClientCertSettings = ({ collection }) => {
           passphrase: values.passphrase
         };
       }
-
-      // 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
-      }));
-
+      onUpdate(relevantValues);
       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(collection.pathname, filePath);
+      let relativePath = path.relative(root, filePath);
       formik.setFieldValue(e.name, relativePath);
     }
   };
 
   const resetFileInputFields = () => {
-    if (certFilePathInputRef.current) {
-      certFilePathInputRef.current.value = '';
-    }
-    if (keyFilePathInputRef.current) {
-      keyFilePathInputRef.current.value = '';
-    }
-    if (pfxFilePathInputRef.current) {
-      pfxFilePathInputRef.current.value = '';
-    }
+    certFilePathInputRef.current.value = '';
+    keyFilePathInputRef.current.value = '';
+    pfxFilePathInputRef.current.value = '';
   };
 
+  const [passwordVisible, setPasswordVisible] = useState(false);
+
   const handleTypeChange = (e) => {
     formik.setFieldValue('type', e.target.value);
     if (e.target.value === 'cert') {
@@ -127,49 +97,34 @@ const ClientCertSettings = ({ collection }) => {
     }
   };
 
-  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>
 
-      <h1 className="font-medium">Client Certificates</h1>
+      <h1 className="font-semibold">Client Certificates</h1>
       <ul className="mt-4">
         {!clientCertConfig.length
           ? 'No client certificates added'
           : clientCertConfig.map((clientCert, index) => (
-              <li key={`client-cert-${index}`} className="flex items-center available-certificates p-2 rounded-lg mb-2">
-                <div className="flex items-center w-full justify-between">
-                  <div className="flex w-full items-center">
-                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
-                    {clientCert.domain}
-                  </div>
-                  <div className="flex w-full items-center">
-                    <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
-                    {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
-                  </div>
-                  <button onClick={() => handleRemove(index)} className="remove-certificate ml-2">
-                    <IconTrash size={18} strokeWidth={1.5} />
-                  </button>
+            <li key={`client-cert-${index}`} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+              <div className="flex items-center w-full justify-between">
+                <div className="flex w-full items-center">
+                  <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
+                  {clientCert.domain}
                 </div>
-              </li>
-            ))}
+                <div className="flex w-full items-center">
+                  <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">
+                  <IconTrash size={18} strokeWidth={1.5} />
+                </button>
+              </div>
+            </li>
+          ))}
       </ul>
 
-      <h1 className="font-medium mt-8 mb-2">Add Client Certificate</h1>
+      <h1 className="font-semibold mt-8 mb-2">Add Client Certificate</h1>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="domain">
@@ -359,27 +314,30 @@ const ClientCertSettings = ({ collection }) => {
             Passphrase
           </label>
           <div className="textbox flex flex-row items-center w-[300px] h-[1.70rem] relative">
-            <SingleLineEditor
+            <input
+              id="passphrase"
+              type={passwordVisible ? 'text' : 'password'}
+              name="passphrase"
+              className="outline-none w-64 bg-transparent"
+              onChange={formik.handleChange}
               value={formik.values.passphrase || ''}
-              theme={storedTheme}
-              onChange={(val) => formik.setFieldValue('passphrase', val)}
-              collection={collection}
-              isSecret={true}
             />
-            {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
+            <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>
           </div>
           {formik.touched.passphrase && formik.errors.passphrase ? (
             <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
           ) : null}
         </div>
-        <div className="mt-6 flex flex-row gap-2 items-center">
+        <div className="mt-6">
           <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, deleteCollectionDraft } from 'providers/ReduxStore/slices/collections';
+import { updateCollectionDocs } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } 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 = collection.draft?.root ? get(collection, 'draft.root.docs', '') : get(collection, 'root.docs', '');
+  const docs = get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
 
   const toggleViewMode = () => {
@@ -31,28 +31,28 @@ const Docs = ({ collection }) => {
   };
 
   const handleDiscardChanges = () => {
-    dispatch((
+    dispatch(
       updateCollectionDocs({
         collectionUid: collection.uid,
         docs: docs
-      }))
+      })
     );
     toggleViewMode();
-  };
+  }
 
   const onSave = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
     toggleViewMode();
-  };
+  }
 
   return (
     <StyledWrapper className="h-full w-full relative flex flex-col">
-      <div className="flex flex-row w-full justify-between items-center mb-4">
-        <div className="text-lg font-medium flex items-center gap-2">
+      <div className='flex flex-row w-full justify-between items-center mb-4'>
+        <div className='text-lg font-medium flex items-center gap-2'>
           <IconFileText size={20} strokeWidth={1.5} />
           Documentation
         </div>
-        <div className="flex flex-row gap-2 items-center justify-center">
+        <div className='flex flex-row gap-2 items-center justify-center'>
           {isEditing ? (
             <>
               <div className="editing-mode" role="tab" onClick={handleDiscardChanges}>
@@ -81,13 +81,14 @@ const Docs = ({ collection }) => {
           fontSize={get(preferences, 'font.codeFontSize')}
         />
       ) : (
-        <div className="h-full overflow-auto pl-1">
-          <div className="h-[1px] min-h-[500px]">
+        <div className='h-full overflow-auto pl-1'>
+          <div className='h-[1px] min-h-[500px]'>
             {
-              docs?.length > 0
-                ? <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
-                : <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
-            }
+              docs?.length > 0 ?
+                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
+                :
+                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
+            }         
           </div>
         </div>
       )}
@@ -97,6 +98,7 @@ const Docs = ({ collection }) => {
 
 export default Docs;
 
+
 const documentationPlaceholder = `
 Welcome to your collection documentation! This space is designed to help you document your API collection effectively.
 

packages/bruno-app/src/components/CollectionSettings/Grpc/StyledWrapper.js

@@ -10,4 +10,4 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default StyledWrapper;
+export default StyledWrapper; 

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

@@ -0,0 +1,263 @@
+import React, { useState, useRef, useEffect } 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 { IconTrash, IconFile, IconFileImport, IconAlertCircle } from '@tabler/icons';
+import { getRelativePath, getBasename, getDirPath } from 'utils/common/path';
+import { Tooltip } from 'react-tooltip';
+import { existsSync, resolvePath } from '../../../utils/filesystem';
+
+const GrpcSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+  const {
+    brunoConfig: { grpc: grpcConfig = {} }
+  } = collection;
+
+  const fileInputRef = useRef(null);
+  const [protoFileValidity, setProtoFileValidity] = useState({});
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      protoFiles: grpcConfig.protoFiles || []
+    },
+    onSubmit: (newGrpcConfig) => {
+      const brunoConfig = cloneDeep(collection.brunoConfig);
+      brunoConfig.grpc = newGrpcConfig;
+      dispatch(updateBrunoConfig(brunoConfig, collection.uid));
+      toast.success('gRPC settings updated');
+    }
+  });
+
+  // Get file path using the ipcRenderer
+  const getProtoFile = (event) => {
+    const files = event?.files;
+    if (files && files.length > 0) {
+      const newProtoFiles = [...formik.values.protoFiles];
+      
+      for (let i = 0; i < files.length; i++) {
+        const filePath = window?.ipcRenderer?.getFilePath(files[i]);
+        if (filePath) {
+          const relativePath = getRelativePath(filePath, collection.pathname);
+          const protoFileObj = {
+            path: relativePath,
+            type: 'file'
+          };
+          
+          // Check if this path already exists
+          const exists = newProtoFiles.some(pf => pf.path === protoFileObj.path);
+          if (!exists) {
+            newProtoFiles.push(protoFileObj);
+          }
+        }
+      }
+      
+      formik.setFieldValue('protoFiles', newProtoFiles);
+      // Reset the file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  // Handler for removing a proto file
+  const handleRemoveProtoFile = (index) => {
+    const updatedProtoFiles = [...formik.values.protoFiles];
+    updatedProtoFiles.splice(index, 1);
+    formik.setFieldValue('protoFiles', updatedProtoFiles);
+  };
+
+  // Handle the browse button click
+  const handleBrowseClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  // Check if a proto file path is valid
+  const isProtoFileValid = async (protoFile) => {
+    try {
+      const absolutePath = await resolvePath(protoFile.path, collection.pathname);
+      return await existsSync(absolutePath);
+    } catch (error) {
+      return false;
+    }
+  };
+
+  // Validate all proto files and update state
+  useEffect(() => {
+    const validateProtoFiles = async () => {
+      const validityMap = {};
+      for (const file of formik.values.protoFiles) {
+        validityMap[file.path] = await isProtoFileValid(file);
+      }
+      setProtoFileValidity(validityMap);
+    };
+
+    validateProtoFiles();
+  }, [formik.values.protoFiles, collection.pathname]);
+
+  // Handle replacing an invalid proto file
+  const handleReplaceProtoFile = (index) => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+      // Store the index to replace after file selection
+      fileInputRef.current.dataset.replaceIndex = index;
+    }
+  };
+
+  // Handle file input change
+  const handleFileInputChange = (e) => {
+    const replaceIndex = e.target.dataset.replaceIndex;
+    if (replaceIndex !== undefined) {
+      // Handle replacement
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        const filePath = window?.ipcRenderer?.getFilePath(files[0]);
+        if (filePath) {
+          const relativePath = getRelativePath(filePath, collection.pathname);
+          const updatedProtoFiles = [...formik.values.protoFiles];
+          updatedProtoFiles[replaceIndex] = {
+            path: relativePath,
+            type: 'file'
+          };
+          formik.setFieldValue('protoFiles', updatedProtoFiles);
+        }
+      }
+      delete e.target.dataset.replaceIndex;
+    } else {
+      getProtoFile(e.target);
+    }
+  };
+
+  return (
+    <StyledWrapper className="h-full w-full">
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div className="mb-3">
+          <label className="font-semibold text-sm mb-3 flex items-center" htmlFor="protoFiles">
+            Add Proto Files
+            <span id="proto-files-tooltip" className="ml-2">
+              <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
+            </span>
+            <Tooltip
+              anchorId="proto-files-tooltip"
+              className="tooltip-mod font-normal"
+              html="Keep your proto files within the collection folder or the corresponding git repository to ensure paths remain valid when sharing the collection."
+            />
+          </label>
+          <div className="flex flex-col">
+            {/* Hidden file input for file selection */}
+            <input
+              type="file"
+              ref={fileInputRef}
+              style={{ display: 'none' }}
+              accept=".proto"
+              multiple
+              onChange={handleFileInputChange}
+            />
+            
+            <div className="flex flex-col gap-3">
+              {/* File selection options */}
+              <div className="flex flex-col space-y-3">
+                <div className="flex items-center">
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-secondary flex items-center"
+                    onClick={handleBrowseClick}
+                  >
+                    <IconFileImport size={16} strokeWidth={1.5} className="mr-1" />
+                    Browse for proto files
+                  </button>
+                </div>
+              </div>
+              
+              {/* Divider */}
+              <div className="border-t border-neutral-600 my-2"></div>
+              
+              {/* List of added proto files */}
+              <div>
+                <div className="text-sm font-semibold mb-2 flex items-center">
+                  <IconFile size={16} strokeWidth={1.5} className="mr-1" />
+                  Added Proto Files ({formik.values.protoFiles.length})
+                </div>
+                
+                {formik.values.protoFiles.length === 0 ? (
+                  <div className="text-neutral-500 text-sm italic">No proto files added yet</div>
+                ) : (
+                  <>
+                    {formik.values.protoFiles.some(file => !protoFileValidity[file.path]) && (
+                      <div className="text-xs text-red-500 mb-2 flex items-center bg-red-50 dark:bg-red-900/20 p-2 rounded">
+                        <IconAlertCircle size={14} className="mr-1" />
+                        Some proto files cannot be found at their specified paths. Use the "Replace" option to update their locations.
+                      </div>
+                    )}
+                    <ul className="mt-4">
+                      {formik.values.protoFiles.map((file, index) => {
+                        const isValid = protoFileValidity[file.path];
+                        return (
+                          <li key={index} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+                            <div className="flex items-center w-full justify-between">
+                              <div className="flex w-full items-center">
+                                <IconFile className="mr-2" size={18} strokeWidth={1.5} />
+                                <div
+                                  className="overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px] text-sm"
+                                  title={file.path}
+                                >
+                                  {getBasename(file.path)}
+                                  <span className="text-xs text-neutral-500 ml-2">
+                                    {getDirPath(file.path)}
+                                  </span>
+                                </div>
+                              </div>
+                              <div className="flex w-full items-center justify-end">
+                                {!isValid && (
+                                  <div className="flex items-center mr-2">
+                                    <IconAlertCircle
+                                      size={16}
+                                      className="text-red-500"
+                                      title="Proto file not found. Click to replace."
+                                    />
+                                    <button
+                                      type="button"
+                                      className="text-xs text-red-500 ml-1 hover:underline"
+                                      onClick={() => handleReplaceProtoFile(index)}
+                                    >
+                                      Replace
+                                    </button>
+                                  </div>
+                                )}
+                                <button
+                                  type="button"
+                                  className="remove-certificate ml-2"
+                                  onClick={() => handleRemoveProtoFile(index)}
+                                  title="Remove file"
+                                >
+                                  <IconTrash size={18} strokeWidth={1.5} />
+                                </button>
+                              </div>
+                            </div>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
+    </StyledWrapper>
+  );
+};
+
+export default GrpcSettings; 

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

@@ -6,7 +6,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 500;
+    font-weight: 600;
     table-layout: fixed;
 
     thead,
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: ${(props) => props.theme.font.size.base};
+      font-size: 0.8125rem;
       user-select: none;
     }
     td {
@@ -33,7 +33,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-header {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   input[type='text'] {

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

@@ -10,7 +10,7 @@ import {
   deleteCollectionHeader,
   setCollectionHeaders
 } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } 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 = collection.draft?.root ? get(collection, 'draft.root.request.headers', []) : get(collection, 'root.request.headers', []);
+  const headers = get(collection, 'root.request.headers', []);
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
   const toggleBulkEditMode = () => {
@@ -40,13 +40,12 @@ const Headers = ({ collection }) => {
     );
   };
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
   const handleHeaderValueChange = (e, _header, type) => {
     const header = cloneDeep(_header);
     switch (type) {
       case 'name': {
-        // Strip newlines from header keys
-        header.name = e.target.value.replace(/[\r\n]/g, '');
+        header.name = e.target.value;
         break;
       }
       case 'value': {
@@ -123,7 +122,8 @@ const Headers = ({ collection }) => {
                             },
                             header,
                             'name'
-                          )}
+                          )
+                        }
                         autocomplete={headerAutoCompleteList}
                         collection={collection}
                       />
@@ -142,7 +142,8 @@ const Headers = ({ collection }) => {
                             },
                             header,
                             'value'
-                          )}
+                          )
+                        }
                         collection={collection}
                         autocomplete={MimeTypes}
                       />

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconBox, IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
-import { areItemsLoading, getItemsLoadStats } from 'utils/collections/index';
-import { useState } from 'react';
-import ShareCollection from 'components/ShareCollection/index';
+import { IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
+import { areItemsLoading, getItemsLoadStats } from "utils/collections/index";
+import { useState } from "react";
+import ShareCollection from "components/ShareCollection/index";
 
 const Info = ({ collection }) => {
   const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
@@ -11,23 +11,23 @@ const Info = ({ collection }) => {
   const isCollectionLoading = areItemsLoading(collection);
   const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
   const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
-
+  
   const handleToggleShowShareCollectionModal = (value) => (e) => {
     toggleShowShareCollectionModal(value);
-  };
+  }
 
   return (
     <div className="w-full flex flex-col h-fit">
       <div className="rounded-lg py-6">
-        <div className="grid gap-5">
+        <div className="grid gap-6">
           {/* Location Row */}
           <div className="flex items-start">
             <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
               <IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-medium">Location</div>
-              <div className="mt-1 text-muted break-all text-xs">
+              <div className="font-semibold text-sm">Location</div>
+              <div className="mt-1 text-sm text-muted break-all">
                 {collection.pathname}
               </div>
             </div>
@@ -39,8 +39,8 @@ const Info = ({ collection }) => {
               <IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-medium">Environments</div>
-              <div className="mt-1 text-muted text-xs">
+              <div className="font-semibold text-sm">Environments</div>
+              <div className="mt-1 text-sm text-muted">
                 {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured
               </div>
             </div>
@@ -52,10 +52,10 @@ const Info = ({ collection }) => {
               <IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-medium">Requests</div>
-              <div className="mt-1 text-muted text-xs">
+              <div className="font-semibold text-sm">Requests</div>
+              <div className="mt-1 text-sm text-muted">
                 {
-                  isCollectionLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
+                  isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
                 }
               </div>
             </div>
@@ -66,8 +66,8 @@ const Info = ({ collection }) => {
               <IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
             </div>
             <div className="ml-4 h-full flex flex-col justify-start">
-              <div className="font-medium h-fit my-auto">Share</div>
-              <div className="group-hover:underline text-link text-xs">
+              <div className="font-semibold text-sm h-fit my-auto">Share</div>
+              <div className="mt-1 text-sm group-hover:underline text-link">
                 Share Collection
               </div>
             </div>
@@ -79,4 +79,4 @@ const Info = ({ collection }) => {
   );
 };
 
-export default Info;
+export default Info;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { flattenItems } from 'utils/collections';
+import { flattenItems } from "utils/collections";
 import { IconAlertTriangle } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
+import StyledWrapper from "./StyledWrapper";
 import { useDispatch, useSelector } from 'react-redux';
 import { isItemARequest, itemIsOpenedInTabs } from 'utils/tabs/index';
 import { getDefaultRequestPaneTab } from 'utils/collections/index';
@@ -12,13 +12,13 @@ const RequestsNotLoaded = ({ collection }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
   const flattenedItems = flattenItems(collection.items);
-  const itemsFailedLoading = flattenedItems?.filter((item) => item?.partial && !item?.loading);
+  const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading);
 
   if (!itemsFailedLoading?.length) {
     return null;
   }
 
-  const handleRequestClick = (item) => (e) => {
+  const handleRequestClick = (item) => e => {
     e.preventDefault();
     if (isItemARequest(item)) {
       dispatch(hideHomePage());
@@ -39,7 +39,7 @@ const RequestsNotLoaded = ({ collection }) => {
       );
       return;
     }
-  };
+  }
 
   return (
     <StyledWrapper className="w-full card my-2">
@@ -61,7 +61,7 @@ const RequestsNotLoaded = ({ collection }) => {
         <tbody>
           {flattenedItems?.map((item, index) => (
             item?.partial && !item?.loading ? (
-              <tr key={index} className="cursor-pointer" onClick={handleRequestClick(item)}>
+              <tr key={index} className='cursor-pointer' onClick={handleRequestClick(item)}>
                 <td className="py-1.5 px-3">
                   {item?.pathname?.split(`${collection?.pathname}/`)?.[1]}
                 </td>

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

@@ -1,16 +1,16 @@
-import StyledWrapper from './StyledWrapper';
-import Docs from '../Docs';
-import Info from './Info';
+import StyledWrapper from "./StyledWrapper";
+import Docs from "../Docs";
+import Info from "./Info";
 import { IconBox } from '@tabler/icons';
-import RequestsNotLoaded from './RequestsNotLoaded';
+import RequestsNotLoaded from "./RequestsNotLoaded";
 
 const Overview = ({ collection }) => {
   return (
     <div className="h-full">
-      <div className="grid grid-cols-5 gap-5 h-full">
+      <div className="grid grid-cols-5 gap-4 h-full">
         <div className="col-span-2">
-          <div className="text-lg font-medium flex items-center gap-2">
-            <IconBox size={20} stroke={1.5} />
+          <div className="text-xl font-semibold flex items-center gap-2">
+            <IconBox size={24} stroke={1.5} />
             {collection?.name}
           </div>
           <Info collection={collection} />
@@ -22,6 +22,6 @@ const Overview = ({ collection }) => {
       </div>
     </div>
   );
-};
+}
 
-export default Overview;
+export default Overview;

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

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  max-width: 800px;
+
+  .settings-label {
+    width: 110px;
+  }
+
+  .textbox {
+    border: 1px solid #ccc;
+    padding: 0.15rem 0.45rem;
+    box-shadow: none;
+    border-radius: 0px;
+    outline: none;
+    box-shadow: none;
+    transition: border-color ease-in-out 0.1s;
+    border-radius: 3px;
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      outline: none !important;
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,125 @@
+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 { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
+
+const PresetsSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+  const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
+  const {
+    brunoConfig: { presets: presets = {} }
+  } = collection;
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      requestType: presets.requestType === 'grpc' && !isGrpcEnabled ? 'http' : presets.requestType || 'http',
+      requestUrl: presets.requestUrl || ''
+    },
+    onSubmit: (newPresets) => {
+      // If gRPC is disabled but the preset is set to grpc, change it to http
+      if (!isGrpcEnabled && newPresets.requestType === 'grpc') {
+        newPresets.requestType = 'http';
+      }
+
+      const brunoConfig = cloneDeep(collection.brunoConfig);
+      brunoConfig.presets = newPresets;
+      dispatch(updateBrunoConfig(brunoConfig, collection.uid));
+      toast.success('Collection presets updated');
+    }
+  });
+
+  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="mb-3 flex items-center">
+          <label className="settings-label flex  items-center" htmlFor="enabled">
+            Request Type
+          </label>
+          <div className="flex items-center">
+            <input
+              id="http"
+              className="cursor-pointer"
+              type="radio"
+              name="requestType"
+              onChange={formik.handleChange}
+              value="http"
+              checked={formik.values.requestType === 'http'}
+            />
+            <label htmlFor="http" className="ml-1 cursor-pointer select-none">
+              HTTP
+            </label>
+
+            <input
+              id="graphql"
+              className="ml-4 cursor-pointer"
+              type="radio"
+              name="requestType"
+              onChange={formik.handleChange}
+              value="graphql"
+              checked={formik.values.requestType === 'graphql'}
+            />
+            <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
+              GraphQL
+            </label>
+
+            {isGrpcEnabled && (
+              <>
+                <input
+                  id="grpc"
+                  className="ml-4 cursor-pointer"
+                  type="radio"
+                  name="requestType"
+                  onChange={formik.handleChange}
+                  value="grpc"
+                  checked={formik.values.requestType === 'grpc'}
+                />
+                <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
+                  gRPC
+                </label>
+              </>
+            )}
+          </div>
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="requestUrl">
+            Base URL
+          </label>
+          <div className="flex items-center w-full">
+            <div className="flex items-center flex-grow input-container h-full">
+              <input
+                id="request-url"
+                type="text"
+                name="requestUrl"
+                placeholder="Request URL"
+                className="block textbox"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={formik.handleChange}
+                value={formik.values.requestUrl || ''}
+                style={{ width: '100%' }}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
+    </StyledWrapper>
+  );
+};
+
+export default PresetsSettings;

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

@@ -1,347 +0,0 @@
-import React, { useRef } from 'react';
-import { useDispatch } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-import {
-  IconTrash,
-  IconFile,
-  IconFileImport,
-  IconAlertCircle,
-  IconFolder
-} from '@tabler/icons';
-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,
-    addProtoFileToCollection,
-    addImportPathToCollection,
-    toggleImportPath,
-    browseForProtoFile,
-    browseForImportDirectory,
-    removeProtoFileFromCollection,
-    removeImportPathFromCollection,
-    replaceImportPathInCollection,
-    replaceProtoFileInCollection
-  } = 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;
-    if (files && files.length > 0) {
-      for (let i = 0; i < files.length; i++) {
-        const filePath = window?.ipcRenderer?.getFilePath(files[i]);
-        if (filePath) {
-          await addProtoFileToCollection(filePath);
-        }
-      }
-      // Reset the file input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
-      }
-    }
-  };
-
-  const handleRemoveProtoFile = async (index) => {
-    await removeProtoFileFromCollection(index);
-  };
-
-  const handleBrowseClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  };
-
-  const handleReplaceProtoFile = async (index) => {
-    const result = await browseForProtoFile();
-    if (result.success) {
-      await replaceProtoFileInCollection(index, result.filePath);
-    }
-  };
-
-  const handleReplaceImportPath = async (index) => {
-    const result = await browseForImportDirectory();
-    if (result.success) {
-      await replaceImportPathInCollection(index, result.directoryPath);
-    }
-  };
-
-  const handleFileInputChange = (e) => {
-    getProtoFile(e.target);
-  };
-
-  const getImportPath = async () => {
-    const result = await browseForImportDirectory();
-    if (result.success) {
-      await addImportPathToCollection(result.directoryPath);
-    }
-  };
-
-  const handleRemoveImportPath = async (index) => {
-    await removeImportPathFromCollection(index);
-  };
-
-  const handleToggleImportPath = async (index) => {
-    await toggleImportPath(index);
-  };
-
-  const handleBrowseImportPathClick = () => {
-    getImportPath();
-  };
-
-  return (
-    <StyledWrapper className="h-full w-full">
-      {/* Hidden file input for file selection */}
-      <input
-        type="file"
-        ref={fileInputRef}
-        style={{ display: 'none' }}
-        accept=".proto"
-        multiple
-        onChange={handleFileInputChange}
-      />
-
-      {/* Proto Files Section */}
-      <div className="mb-6" data-testid="protobuf-proto-files-section">
-        <div className="flex items-center justify-between mb-3">
-          <div className="flex items-center">
-            <label className="font-medium flex items-center" htmlFor="protoFiles">
-              Proto Files (
-              {protoFiles.length}
-              )
-              <span id="proto-files-tooltip" className="ml-2">
-                <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
-              </span>
-              <Tooltip
-                anchorId="proto-files-tooltip"
-                className="tooltip-mod font-normal"
-                html="Keep your proto files within the collection folder or the corresponding git repository to ensure paths remain valid when sharing the collection."
-              />
-            </label>
-          </div>
-        </div>
-
-        <div>
-          {protoFiles.some((file) => !file.exists) && (
-            <div className="text-xs text-red-600 dark:text-red-400 mb-2 flex items-center p-2 rounded" data-testid="protobuf-invalid-files-message">
-              <IconAlertCircle size={14} className="mr-1" />
-              Some proto files cannot be found. Use the replace option to update their locations.
-            </div>
-          )}
-
-          <table className="w-full border-collapse" data-testid="protobuf-proto-files-table">
-            <thead>
-              <tr>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
-                  File
-                </th>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
-                  Path
-                </th>
-                <th className="text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {protoFiles.length === 0 ? (
-                <tr>
-                  <td colSpan="3" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
-                    <div className="flex flex-col items-center">
-                      <IconFile size={24} className="text-gray-400 mb-2" />
-                      <span className="text-gray-500 dark:text-gray-400">No proto files added</span>
-                    </div>
-                  </td>
-                </tr>
-              ) : (
-                protoFiles.map((file, index) => {
-                  const isValid = file.exists;
-
-                  return (
-                    <tr key={index}>
-                      <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="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" />}
-                        </div>
-                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
-                        <div className="text-xs text-gray-600 dark:text-gray-400 font-mono">
-                          {file.path}
-                        </div>
-                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2 text-right">
-                        <div className="flex items-center justify-end space-x-1">
-                          {!isValid && (
-                            <button
-                              type="button"
-                              onClick={() => handleReplaceProtoFile(index)}
-                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-1 rounded"
-                              title="Replace file"
-                            >
-                              <IconFileImport size={14} />
-                            </button>
-                          )}
-                          <button
-                            type="button"
-                            onClick={() => handleRemoveProtoFile(index)}
-                            className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 p-1 rounded"
-                            title="Remove file"
-                            data-testid="protobuf-remove-file-button"
-                          >
-                            <IconTrash size={14} />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })
-              )}
-            </tbody>
-          </table>
-          <button type="button" className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleBrowseClick} data-testid="protobuf-add-file-button">
-            + Add Proto File
-          </button>
-        </div>
-      </div>
-
-      {/* Import Paths Section */}
-      <div className="mb-6" data-testid="protobuf-import-paths-section">
-        <div className="flex items-center justify-between mb-3">
-          <div className="flex items-center">
-            <label className="font-medium flex items-center" htmlFor="importPaths">
-              Import Paths (
-              {importPaths.length}
-              )
-              <span id="import-paths-tooltip" className="ml-2">
-                <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
-              </span>
-              <Tooltip
-                anchorId="import-paths-tooltip"
-                className="tooltip-mod font-normal"
-                html="Add directories that contain proto files to be imported. These paths help resolve import statements in your proto files."
-              />
-            </label>
-          </div>
-        </div>
-
-        <div>
-          {importPaths.some((path) => !path.exists) && (
-            <div className="text-xs text-red-600 dark:text-red-400 mb-2 flex items-center p-2 rounded" data-testid="protobuf-invalid-import-paths-message">
-              <IconAlertCircle size={14} className="mr-1" />
-              Some import paths cannot be found at their specified locations.
-            </div>
-          )}
-
-          <table className="w-full border-collapse" data-testid="protobuf-import-paths-table">
-            <thead>
-              <tr>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
-                </th>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
-                  Directory
-                </th>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
-                  Path
-                </th>
-                <th className="text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {importPaths.length === 0 ? (
-                <tr>
-                  <td colSpan="4" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
-                    <div className="flex flex-col items-center">
-                      <IconFolder size={24} className="text-gray-400 mb-2" />
-                      <span className="text-gray-500 dark:text-gray-400">No import paths added</span>
-                    </div>
-                  </td>
-                </tr>
-              ) : (
-                importPaths.map((importPath, index) => {
-                  const isValid = importPath.exists;
-
-                  return (
-                    <tr key={index}>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
-                        <input
-                          type="checkbox"
-                          checked={importPath.enabled}
-                          onChange={() => handleToggleImportPath(index)}
-                          className="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300 dark:border-gray-600 rounded"
-                          title={importPath.enabled ? 'Disable this import path' : 'Enable this import path'}
-                          data-testid="protobuf-import-path-checkbox"
-                        />
-                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
-                        <div className="flex items-center">
-                          <IconFolder size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
-                          <span className="font-medium text-gray-900 dark:text-gray-100">
-                            {getBasename(collection.pathname, importPath.path)}
-                          </span>
-                          {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
-                        </div>
-                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
-                        <div className="text-xs text-gray-600 dark:text-gray-400 font-mono">
-                          {importPath.path}
-                        </div>
-                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2 text-right">
-                        <div className="flex items-center justify-end space-x-1">
-                          {!isValid && (
-                            <button
-                              type="button"
-                              onClick={() => handleReplaceImportPath(index)}
-                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-1 rounded"
-                              title="Replace directory"
-                            >
-                              <IconFileImport size={14} />
-                            </button>
-                          )}
-                          <button
-                            type="button"
-                            onClick={() => handleRemoveImportPath(index)}
-                            className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 p-1 rounded"
-                            title="Remove import path"
-                            data-testid="protobuf-remove-import-path-button"
-                          >
-                            <IconTrash size={14} />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })
-              )}
-            </tbody>
-          </table>
-          <button type="button" className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleBrowseImportPathClick} data-testid="protobuf-add-import-path-button">
-            + Add Import Path
-          </button>
-        </div>
-      </div>
-
-      <div className="mt-6">
-        <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-
-    </StyledWrapper>
-  );
-};
-
-export default ProtobufSettings;

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

@@ -1,164 +1,115 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useFormik } from 'formik';
 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 = ({ collection }) => {
-  const dispatch = useDispatch();
-  const initialProxyConfig = { enabled: 'global', protocol: 'http', hostname: '', port: '', auth: { enabled: false, username: '', password: '' }, bypassProxy: '' };
+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)
+  });
 
-  // 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);
+  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;
+          }
 
+          onUpdate(validatedProxy);
+        })
+        .catch((error) => {
+          let errMsg = error.message || 'Preferences validation error';
+          toast.error(errMsg);
+        });
+    }
+  });
   const [passwordVisible, setPasswordVisible] = useState(false);
 
-  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({
+  useEffect(() => {
+    formik.setValues({
+      enabled: proxyConfig.enabled === true ? 'true' : proxyConfig.enabled === false ? 'false' : 'global',
+      protocol: proxyConfig.protocol || 'http',
+      hostname: proxyConfig.hostname || '',
+      port: proxyConfig.port || '',
       auth: {
-        ...currentProxyConfig.auth,
-        enabled: e.target.checked
-      }
+        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
+        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
+        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
+      },
+      bypassProxy: proxyConfig.bypassProxy || ''
     });
-  };
-
-  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';
+  }, [proxyConfig]);
 
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">Configure proxy settings for this collection.</div>
-      <div className="bruno-form">
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label flex items-center" htmlFor="enabled">
             Config
             <InfoTip infotipId="request-var">
               <div>
                 <ul>
-                  <li><span style={{ width: '50px', display: 'inline-block' }}>global</span> - use global proxy config</li>
-                  <li><span style={{ width: '50px', display: 'inline-block' }}>enabled</span> - use collection proxy config</li>
-                  <li><span style={{ width: '50px', display: 'inline-block' }}>disable</span> - disable proxy</li>
+                  <li><span style={{width: "50px", display: "inline-block"}}>global</span> - use global proxy config</li>
+                  <li><span style={{width: "50px", display: "inline-block"}}>enabled</span> - use collection proxy config</li>
+                  <li><span style={{width: "50px", display: "inline-block"}}>disable</span> - disable proxy</li>
                 </ul>
               </div>
             </InfoTip>
@@ -169,8 +120,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="enabled"
                 value="global"
-                checked={enabledValue === 'global'}
-                onChange={handleEnabledChange}
+                checked={formik.values.enabled === 'global'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               global
@@ -179,9 +130,9 @@ const ProxySettings = ({ collection }) => {
               <input
                 type="radio"
                 name="enabled"
-                value="true"
-                checked={enabledValue === 'true'}
-                onChange={handleEnabledChange}
+                value={'true'}
+                checked={formik.values.enabled === 'true'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               enabled
@@ -190,9 +141,9 @@ const ProxySettings = ({ collection }) => {
               <input
                 type="radio"
                 name="enabled"
-                value="false"
-                checked={enabledValue === 'false'}
-                onChange={handleEnabledChange}
+                value={'false'}
+                checked={formik.values.enabled === 'false'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               disabled
@@ -209,8 +160,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="protocol"
                 value="http"
-                checked={(currentProxyConfig.protocol || 'http') === 'http'}
-                onChange={handleProtocolChange}
+                checked={formik.values.protocol === 'http'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               HTTP
@@ -220,8 +171,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="protocol"
                 value="https"
-                checked={(currentProxyConfig.protocol || 'http') === 'https'}
-                onChange={handleProtocolChange}
+                checked={formik.values.protocol === 'https'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               HTTPS
@@ -231,8 +182,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="protocol"
                 value="socks4"
-                checked={(currentProxyConfig.protocol || 'http') === 'socks4'}
-                onChange={handleProtocolChange}
+                checked={formik.values.protocol === 'socks4'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               SOCKS4
@@ -242,8 +193,8 @@ const ProxySettings = ({ collection }) => {
                 type="radio"
                 name="protocol"
                 value="socks5"
-                checked={(currentProxyConfig.protocol || 'http') === 'socks5'}
-                onChange={handleProtocolChange}
+                checked={formik.values.protocol === 'socks5'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               SOCKS5
@@ -263,9 +214,12 @@ const ProxySettings = ({ collection }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={handleHostnameChange}
-            value={currentProxyConfig.hostname || ''}
+            onChange={formik.handleChange}
+            value={formik.values.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">
@@ -280,9 +234,12 @@ const ProxySettings = ({ collection }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={handlePortChange}
-            value={currentProxyConfig.port || ''}
+            onChange={formik.handleChange}
+            value={formik.values.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">
@@ -291,8 +248,8 @@ const ProxySettings = ({ collection }) => {
           <input
             type="checkbox"
             name="auth.enabled"
-            checked={currentProxyConfig.auth?.enabled || false}
-            onChange={handleAuthEnabledChange}
+            checked={formik.values.auth.enabled}
+            onChange={formik.handleChange}
           />
         </div>
         <div>
@@ -309,9 +266,12 @@ const ProxySettings = ({ collection }) => {
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck="false"
-              value={currentProxyConfig.auth?.username || ''}
-              onChange={handleAuthUsernameChange}
+              value={formik.values.auth.username}
+              onChange={formik.handleChange}
             />
+            {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">
@@ -327,8 +287,8 @@ const ProxySettings = ({ collection }) => {
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                value={currentProxyConfig.auth?.password || ''}
-                onChange={handleAuthPasswordChange}
+                value={formik.values.auth.password}
+                onChange={formik.handleChange}
               />
               <button
                 type="button"
@@ -338,6 +298,9 @@ const ProxySettings = ({ collection }) => {
                 {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">
@@ -353,18 +316,21 @@ const ProxySettings = ({ collection }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={handleBypassProxyChange}
-            value={currentProxyConfig.bypassProxy || ''}
+            onChange={formik.handleChange}
+            value={formik.values.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" onClick={handleSave}>
+          <button type="submit" className="submit btn btn-sm btn-secondary">
             Save
           </button>
         </div>
-      </div>
+      </form>
     </StyledWrapper>
   );
 };
 
-export default ProxySettings;
+export default ProxySettings;

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

@@ -1,37 +1,20 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React 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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } 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 [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 requestScript = get(collection, 'root.request.script.req', '');
+  const responseScript = 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({
@@ -51,51 +34,42 @@ const Script = ({ collection }) => {
   };
 
   const handleSave = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
   };
 
   return (
-    <StyledWrapper className="w-full flex flex-col h-full pt-4">
+    <StyledWrapper className="w-full flex flex-col h-full">
       <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>
-
-      <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="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>
 
       <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 { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 
 const Tests = ({ collection }) => {
   const dispatch = useDispatch();
-  const tests = collection.draft?.root ? get(collection, 'draft.root.request.tests', '') : get(collection, 'root.request.tests', '');
+  const 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(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col h-full">

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

@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 500;
+    font-weight: 600;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: ${(props) => props.theme.font.size.base};
+      font-size: 0.8125rem;
       user-select: none;
     }
     td {
@@ -31,7 +31,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-var {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   input[type='text'] {

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

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

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

@@ -2,20 +2,24 @@ import React from 'react';
 import get from 'lodash/get';
 import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
-import DeprecationWarning from 'components/DeprecationWarning';
 
 const Vars = ({ collection }) => {
   const dispatch = useDispatch();
-  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
+  const requestVars = get(collection, 'root.request.vars.req', []);
+  const responseVars = get(collection, 'root.request.vars.res', []);
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
         <VarsTable collection={collection} vars={requestVars} varType="request" />
       </div>
+      <div className="flex-1">
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <VarsTable collection={collection} vars={responseVars} varType="response" />
+      </div>
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
           Save

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

@@ -1,6 +1,9 @@
 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';
@@ -9,14 +12,17 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
-import Protobuf from './Protobuf';
+import Presets from './Presets';
+import Grpc from './Grpc';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
 import StatusDot from 'components/StatusDot';
 import Overview from './Overview/index';
+import { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
 
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
+  const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
   const tab = collection.settingsSelectedTab;
   const setTab = (tab) => {
     dispatch(
@@ -27,22 +33,61 @@ const CollectionSettings = ({ collection }) => {
     );
   };
 
-  const root = collection?.draft?.root || collection?.root;
+  const root = collection?.root;
   const hasScripts = root?.request?.script?.res || root?.request?.script?.req;
   const hasTests = root?.request?.tests;
   const hasDocs = root?.docs;
 
-  const headers = collection.draft?.root ? get(collection, 'draft.root.request.headers', []) : get(collection, 'root.request.headers', []);
+  const headers = get(collection, 'root.request.headers', []);
   const activeHeadersCount = headers.filter((header) => header.enabled).length;
 
-  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
-  const activeVarsCount = requestVars.filter((v) => v.enabled).length;
-  const authMode = (collection.draft?.root ? get(collection, 'draft.root.request.auth', {}) : get(collection, 'root.request.auth', {})).mode || 'none';
+  const requestVars = get(collection, 'root.request.vars.req', []);
+  const responseVars = get(collection, 'root.request.vars.res', []);
+  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
+  const authMode = get(collection, 'root.request.auth', {}).mode || 'none';
 
-  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 proxyConfig = get(collection, 'brunoConfig.proxy', {});
+  const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
+  const grpcConfig = get(collection, 'brunoConfig.grpc', {});
+
+  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 getTabPanel = (tab) => {
     switch (tab) {
@@ -64,18 +109,24 @@ const CollectionSettings = ({ collection }) => {
       case 'tests': {
         return <Test collection={collection} />;
       }
+      case 'presets': {
+        return <Presets collection={collection} />;
+      }
       case 'proxy': {
-        return <ProxySettings collection={collection} />;
+        return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
       }
       case 'clientCert': {
         return (
           <ClientCertSettings
-            collection={collection}
+            root={collection.pathname}
+            clientCertConfig={clientCertConfig}
+            onUpdate={onClientCertSettingsUpdate}
+            onRemove={onClientCertSettingsRemove}
           />
         );
       }
-      case 'protobuf': {
-        return <Protobuf collection={collection} />;
+      case 'grpc': {
+        return <Grpc collection={collection} />;
       }
     }
   };
@@ -112,18 +163,23 @@ const CollectionSettings = ({ collection }) => {
           Tests
           {hasTests && <StatusDot />}
         </div>
+        <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
+          Presets
+        </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0 && proxyEnabled && <StatusDot />}
+          {Object.keys(proxyConfig).length > 0 && <StatusDot />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
           {clientCertConfig.length > 0 && <StatusDot />}
         </div>
-        <div className={getTabClassname('protobuf')} role="tab" onClick={() => setTab('protobuf')}>
-          Protobuf
-          {protobufConfig.protoFiles && protobufConfig.protoFiles.length > 0 && <StatusDot />}
-        </div>
+        {isGrpcEnabled && (
+          <div className={getTabClassname('grpc')} role="tab" onClick={() => setTab('grpc')}>
+            gRPC
+            {grpcConfig.protoFiles && grpcConfig.protoFiles.length > 0 && <StatusDot />}
+          </div>
+        )}
       </div>
       <section className="mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
     </StyledWrapper>

packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js

@@ -125,7 +125,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
         );
 
         if (!isEmpty(validationErrors)) {
-          toast.error(Object.values(validationErrors).join('\n'));
+          toast.error(Object.values(validationErrors).join("\n"));
           return;
         }
 
@@ -208,9 +208,9 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
       onClose={onClose}
       handleCancel={onClose}
       handleConfirm={onSubmit}
-      customHeader={(
+      customHeader={
         <div className="flex items-center justify-between w-full">
-          <h2 className="font-bold">{title}</h2>
+          <h2 className="text-sm font-bold">{title}</h2>
           <div className="ml-auto flex items-center ">
             <ToggleSwitch
               className="mr-2"
@@ -220,16 +220,16 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                 setIsRawMode(e.target.checked);
               }}
             />
-            <label className="font-normal mr-4 normal-case">Edit Raw</label>
+            <label className="text-sm font-normal mr-4 normal-case">Edit Raw</label>
           </div>
         </div>
-      )}
+      }
     >
       <form onSubmit={(e) => e.preventDefault()} className="px-2">
         {isRawMode ? (
           <div>
             <div className="flex items-center gap-2 mb-1">
-              <label className="block">Set-Cookie String</label>
+              <label className="block text-sm">Set-Cookie String</label>
               <IconInfoCircle id="cookie-raw-info" size={16} strokeWidth={1.5} className="text-gray-400" />
               <Tooltip
                 anchorId="cookie-raw-info"
@@ -248,7 +248,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
           <div className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block mb-1">
+                <label className="block text-sm mb-1">
                   Domain<span className="text-red-600">*</span>{' '}
                 </label>
                 <input
@@ -262,11 +262,11 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   disabled={!!cookie}
                 />
                 {formik.touched.domain && formik.errors.domain && (
-                  <div className="text-red-500 mt-1">{formik.errors.domain}</div>
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.domain}</div>
                 )}
               </div>
               <div>
-                <label className="block mb-1">Path</label>
+                <label className="block text-sm mb-1">Path</label>
                 <input
                   type="text"
                   name="path"
@@ -276,11 +276,11 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   disabled={!!cookie}
                 />
                 {formik.touched.path && formik.errors.path && (
-                  <div className="text-red-500 mt-1">{formik.errors.path}</div>
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.path}</div>
                 )}
               </div>
               <div>
-                <label className="block mb-1">
+                <label className="block text-sm mb-1">
                   Key<span className="text-red-600">*</span>{' '}
                 </label>
                 <input
@@ -294,12 +294,12 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   disabled={!!cookie}
                 />
                 {formik.touched.key && formik.errors.key && (
-                  <div className="text-red-500 mt-1">{formik.errors.key}</div>
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.key}</div>
                 )}
               </div>
 
               <div>
-                <label className="block mb-1">
+                <label className="block text-sm mb-1">
                   Value<span className="text-red-600">*</span>{' '}
                 </label>
                 <input
@@ -312,7 +312,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   className="block textbox non-passphrase-input w-full"
                 />
                 {formik.touched.value && formik.errors.value && (
-                  <div className="text-red-500 mt-1">{formik.errors.value}</div>
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.value}</div>
                 )}
               </div>
             </div>
@@ -320,7 +320,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
             {/* Date Picker */}
             <div className="w-full flex items-end">
               <div>
-                <label className="block mb-1">Expiration ({moment.tz.guess()})</label>
+                <label className="block text-sm mb-1">Expiration ({moment.tz.guess()})</label>
                 <input
                   type="datetime-local"
                   name="expires"
@@ -332,7 +332,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   min={moment().format(moment.HTML5_FMT.DATETIME_LOCAL)}
                 />
                 {formik.touched.expires && formik.errors.expires && (
-                  <div className="text-red-500 mt-1">{formik.errors.expires}</div>
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.expires}</div>
                 )}
               </div>
 
@@ -346,7 +346,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                     onChange={formik.handleChange}
                     className="mr-2"
                   />
-                  <span>Secure</span>
+                  <span className="text-sm">Secure</span>
                 </label>
 
                 <label className="flex items-center">
@@ -357,7 +357,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                     onChange={formik.handleChange}
                     className="mr-2"
                   />
-                  <span>HTTP Only</span>
+                  <span className="text-sm">HTTP Only</span>
                 </label>
               </div>
             </div>

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

@@ -7,7 +7,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: ${(props) => props.theme.font.size.base};
+      font-size: 0.8125rem;
       user-select: none;
     }
   }

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

@@ -14,7 +14,7 @@ const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
   <Modal onClose={onClose} handleCancel={onClose} title="Clear Domain Cookies" hideFooter={true}>
     <div className="flex items-center font-normal">
       <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-      <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
+      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
     </div>
     <div className="font-normal mt-4">
       Are you sure you want to clear all cookies for the domain {domain}?
@@ -39,7 +39,7 @@ const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
   <Modal onClose={onClose} handleCancel={onClose} title="Delete Cookie" hideFooter={true}>
     <div className="flex items-center font-normal">
       <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-      <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
+      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
     </div>
     <div className="font-normal mt-4">
       Are you sure you want to delete the cookie {cookieName}?
@@ -72,7 +72,7 @@ const CollectionProperties = ({ onClose }) => {
   const [searchText, setSearchText] = useState(null);
 
   const handleAddCookie = (domain) => {
-    if (domain) setCurrentDomain(domain);
+    if(domain) setCurrentDomain(domain);
     setIsModifyCookieModalOpen(true);
   };
 
@@ -157,7 +157,7 @@ const CollectionProperties = ({ onClose }) => {
             // No cookies found
             <div className="flex items-center justify-center flex-col">
               <IconCookieOff size={48} strokeWidth={1.5} className="text-gray-500" />
-              <h2 className="text-lg font-medium mt-4">No cookies found</h2>
+              <h2 className="text-lg font-semibold mt-4">No cookies found</h2>
               <p className="text-gray-500 mt-2">Add cookies to get started</p>
               <button
                 type="submit"
@@ -175,7 +175,7 @@ const CollectionProperties = ({ onClose }) => {
             // No search results
             <div className="flex items-center justify-center flex-col">
               <IconSearch size={48} />
-              <h2 className="text-lg font-medium mt-4">No search results</h2>
+              <h2 className="text-lg font-semibold mt-4">No search results</h2>
               <p className="text-gray-500 mt-2">Try a different search term</p>
             </div>
           ) : (
@@ -219,13 +219,13 @@ const CollectionProperties = ({ onClose }) => {
                         <table className="w-full">
                           <thead>
                             <tr className="text-left border-b border-gray-200 dark:border-neutral-600 text-gray-700 dark:text-gray-300">
-                              <th className="py-2 px-4 font-medium w-32">Name</th>
-                              <th className="py-2 px-4 font-medium w-52">Value</th>
-                              <th className="py-2 px-4 font-medium">Path</th>
-                              <th className="py-2 px-4 font-medium">Expires</th>
-                              <th className="py-2 px-4 font-medium text-center">Secure</th>
-                              <th className="py-2 px-4 font-medium text-center">HTTP Only</th>
-                              <th className="py-2 px-4 font-medium text-right w-24">Actions</th>
+                              <th className="py-2 px-4 font-semibold w-32">Name</th>
+                              <th className="py-2 px-4 font-semibold w-52">Value</th>
+                              <th className="py-2 px-4 font-semibold">Path</th>
+                              <th className="py-2 px-4 font-semibold">Expires</th>
+                              <th className="py-2 px-4 font-semibold text-center">Secure</th>
+                              <th className="py-2 px-4 font-semibold text-center">HTTP Only</th>
+                              <th className="py-2 px-4 font-semibold text-right w-24">Actions</th>
                             </tr>
                           </thead>
                           <tbody>

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

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .deprecation-warning {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 8px;
-    gap: 4px;
-    margin-bottom: 8px;
-    background: ${(props) => props.theme.deprecationWarning.bg};
-    border: 1px solid ${(props) => props.theme.deprecationWarning.border};
-    border-radius: 6px;
-
-    .warning-icon {
-      color: ${(props) => props.theme.deprecationWarning.icon};
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-    }
-
-    .warning-text {
-      font-family: 'Inter', sans-serif;
-      font-style: normal;
-      font-size: 14px;
-      line-height: 17px;
-      color: ${(props) => props.theme.deprecationWarning.text};
-
-      a {
-        color: ${(props) => props.theme.textLink};
-        text-decoration: underline;
-
-        &:hover {
-          text-decoration: none;
-        }
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import IconAlertTriangleFilled from '../Icons/IconAlertTriangleFilled';
-import StyledWrapper from './StyledWrapper';
-
-const DeprecationWarning = ({ featureName, learnMoreUrl }) => {
-  return (
-    <StyledWrapper>
-      <div className="deprecation-warning">
-        <IconAlertTriangleFilled className="warning-icon" size={16} />
-        <span className="warning-text">
-          {featureName} will be removed in <strong>v3.0.0</strong>. They are deprecated and will no longer be supported. Learn more in{' '}
-          <a href={learnMoreUrl} target="_blank" rel="noreferrer">this post</a> or contact us at{' '}
-          <a href="mailto:support@usebruno.com">support@usebruno.com</a> with questions.
-        </span>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default DeprecationWarning;

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

@@ -22,12 +22,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 13px;
     font-weight: 500;
 
     .error-count {
       color: ${(props) => props.theme.console.countColor};
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       font-weight: 400;
     }
   }
@@ -73,12 +73,12 @@ const StyledWrapper = styled.div`
 
     p {
       margin: 0;
-      font-size: ${(props) => props.theme.font.size.base};
+      font-size: 14px;
       font-weight: 500;
     }
 
     span {
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       opacity: 0.7;
     }
   }
@@ -98,8 +98,8 @@ const StyledWrapper = styled.div`
     padding: 8px 16px;
     background: ${(props) => props.theme.console.headerBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: ${(props) => props.theme.font.size.xs};
-    font-weight: 500;
+    font-size: 11px;
+    font-weight: 600;
     color: ${(props) => props.theme.console.titleColor};
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -121,7 +121,7 @@ const StyledWrapper = styled.div`
     border-bottom: 1px solid ${(props) => props.theme.console.border};
     cursor: pointer;
     transition: background-color 0.1s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     align-items: center;
 
     &:hover {
@@ -149,15 +149,15 @@ const StyledWrapper = styled.div`
     text-overflow: ellipsis;
     white-space: nowrap;
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
   }
 
   .error-time {
     color: ${(props) => props.theme.console.timestampColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     text-align: right;
   }
 `;
 
-export default StyledWrapper;
+export default StyledWrapper; 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { IconBug } from '@tabler/icons';
-import {
+import { 
   setSelectedError,
   clearDebugErrors
 } from 'providers/ReduxStore/slices/logs';
@@ -10,10 +10,10 @@ import StyledWrapper from './StyledWrapper';
 const ErrorRow = ({ error, isSelected, onClick }) => {
   const formatTime = (timestamp) => {
     const date = new Date(timestamp);
-    return date.toLocaleTimeString('en-US', {
-      hour12: false,
-      hour: '2-digit',
-      minute: '2-digit',
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
       second: '2-digit',
       fractionalSecondDigits: 3
     });
@@ -38,18 +38,18 @@ const ErrorRow = ({ error, isSelected, onClick }) => {
   };
 
   return (
-    <div
+    <div 
       className={`error-row ${isSelected ? 'selected' : ''}`}
       onClick={onClick}
     >
       <div className="error-message" title={error.message}>
         {getShortMessage(error.message)}
       </div>
-
+      
       <div className="error-location" title={error.filename}>
         {getLocation(error)}
       </div>
-
+      
       <div className="error-time">
         {formatTime(error.timestamp)}
       </div>
@@ -59,7 +59,7 @@ const ErrorRow = ({ error, isSelected, onClick }) => {
 
 const DebugTab = () => {
   const dispatch = useDispatch();
-  const { debugErrors, selectedError } = useSelector((state) => state.logs);
+  const { debugErrors, selectedError } = useSelector(state => state.logs);
 
   const handleErrorClick = (error) => {
     dispatch(setSelectedError(error));
@@ -85,7 +85,7 @@ const DebugTab = () => {
               <div>Location</div>
               <div className="text-right">Time</div>
             </div>
-
+            
             <div className="errors-list">
               {debugErrors.map((error, index) => (
                 <ErrorRow
@@ -103,4 +103,4 @@ const DebugTab = () => {
   );
 };
 
-export default DebugTab;
+export default DebugTab; 

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

@@ -26,12 +26,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 13px;
     font-weight: 500;
 
     .error-time {
       color: ${(props) => props.theme.console.countColor};
-      font-size: ${(props) => props.theme.font.size.xs};
+      font-size: 11px;
       font-weight: 400;
     }
   }
@@ -73,7 +73,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     font-weight: 500;
 
     &:hover {
@@ -111,8 +111,8 @@ const StyledWrapper = styled.div`
 
     h4 {
       margin: 0 0 12px 0;
-      font-size: ${(props) => props.theme.font.size.base};
-      font-weight: 500;
+      font-size: 13px;
+      font-weight: 600;
       color: ${(props) => props.theme.console.titleColor};
       text-transform: uppercase;
       letter-spacing: 0.5px;
@@ -131,15 +131,15 @@ const StyledWrapper = styled.div`
     gap: 4px;
 
     label {
-      font-size: ${(props) => props.theme.font.size.xs};
-      font-weight: 500;
+      font-size: 11px;
+      font-weight: 600;
       color: ${(props) => props.theme.console.titleColor};
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
 
     span {
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       color: ${(props) => props.theme.console.messageColor};
       font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
       word-break: break-all;
@@ -167,7 +167,7 @@ const StyledWrapper = styled.div`
 
     p {
       margin: 0;
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       color: ${(props) => props.theme.console.messageColor};
       line-height: 1.4;
     }
@@ -184,7 +184,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     font-weight: 500;
     text-decoration: none;
     align-self: flex-start;
@@ -212,7 +212,7 @@ const StyledWrapper = styled.div`
   .arguments {
     margin: 0;
     padding: 16px;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     line-height: 1.5;
     color: ${(props) => props.theme.console.messageColor};
     background: transparent;
@@ -225,4 +225,4 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default StyledWrapper;
+export default StyledWrapper; 

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import {
+import { 
   IconX,
   IconBug,
   IconFileText,
@@ -15,7 +15,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ErrorInfoTab = ({ error }) => {
   const { version } = useApp();
-
+  
   const formatTimestamp = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleString();
@@ -23,7 +23,7 @@ const ErrorInfoTab = ({ error }) => {
 
   const generateGitHubIssueUrl = () => {
     const title = `Bug: ${error.message.substring(0, 50)}${error.message.length > 50 ? '...' : ''}`;
-
+    
     const body = `## Bug Report
 
 ### Error Details
@@ -66,7 +66,7 @@ ${error.args ? error.args.map((arg, index) => {
 
     const encodedTitle = encodeURIComponent(title);
     const encodedBody = encodeURIComponent(body);
-
+    
     return `https://github.com/usebruno/bruno/issues/new?template=BLANK_ISSUE&title=${encodedTitle}&body=${encodedBody}`;
   };
 
@@ -84,33 +84,33 @@ ${error.args ? error.args.map((arg, index) => {
             <label>Message:</label>
             <span className="error-message-full">{error.message || 'No message available'}</span>
           </div>
-
+          
           {error.filename && (
             <div className="info-item">
               <label>File:</label>
               <span className="file-path">{error.filename}</span>
             </div>
           )}
-
+          
           {error.lineno && (
             <div className="info-item">
               <label>Line:</label>
               <span>{error.lineno}{error.colno ? `:${error.colno}` : ''}</span>
             </div>
           )}
-
+          
           <div className="info-item">
             <label>Timestamp:</label>
             <span>{formatTimestamp(error.timestamp)}</span>
           </div>
         </div>
       </div>
-
+      
       <div className="section">
         <h4>Report Issue</h4>
         <div className="report-section">
           <p>Found a bug? Help us improve Bruno by reporting this error on GitHub.</p>
-          <button
+          <button 
             className="report-button"
             onClick={handleReportIssue}
             title="Report this error on GitHub"
@@ -127,11 +127,11 @@ ${error.args ? error.args.map((arg, index) => {
 const StackTraceTab = ({ error }) => {
   const formatStackTrace = (stack) => {
     if (!stack) return 'Stack trace not available';
-
+    
     return stack
       .split('\n')
-      .map((line) => line.trim())
-      .filter((line) => line.length > 0)
+      .map(line => line.trim())
+      .filter(line => line.length > 0)
       .join('\n');
   };
 
@@ -152,18 +152,18 @@ const StackTraceTab = ({ error }) => {
 const ArgumentsTab = ({ error }) => {
   const formatArguments = (args) => {
     if (!args || args.length === 0) return 'No arguments available';
-
+    
     try {
       return args.map((arg, index) => {
         // Handle special Error object format
         if (arg && typeof arg === 'object' && arg.__type === 'Error') {
           return `[${index}]: Error: ${arg.message}\n  Name: ${arg.name}\n  Stack: ${arg.stack || 'No stack trace'}`;
         }
-
+        
         if (typeof arg === 'object' && arg !== null) {
           return `[${index}]: ${JSON.stringify(arg, null, 2)}`;
         }
-
+        
         return `[${index}]: ${String(arg)}`;
       }).join('\n\n');
     } catch (e) {
@@ -187,7 +187,7 @@ const ArgumentsTab = ({ error }) => {
 
 const ErrorDetailsPanel = () => {
   const dispatch = useDispatch();
-  const { selectedError } = useSelector((state) => state.logs);
+  const { selectedError } = useSelector(state => state.logs);
   const [activeTab, setActiveTab] = useState('info');
 
   if (!selectedError) return null;
@@ -222,8 +222,8 @@ const ErrorDetailsPanel = () => {
           <span>Error Details</span>
           <span className="error-time">({formatTime(selectedError.timestamp)})</span>
         </div>
-
-        <button
+        
+        <button 
           className="close-button"
           onClick={handleClose}
           title="Close details panel"
@@ -233,23 +233,23 @@ const ErrorDetailsPanel = () => {
       </div>
 
       <div className="panel-tabs">
-        <button
+        <button 
           className={`tab-button ${activeTab === 'info' ? 'active' : ''}`}
           onClick={() => setActiveTab('info')}
         >
           <IconFileText size={14} strokeWidth={1.5} />
           Info
         </button>
-
-        <button
+        
+        <button 
           className={`tab-button ${activeTab === 'stack' ? 'active' : ''}`}
           onClick={() => setActiveTab('stack')}
         >
           <IconStack size={14} strokeWidth={1.5} />
           Stack
         </button>
-
-        <button
+        
+        <button 
           className={`tab-button ${activeTab === 'args' ? 'active' : ''}`}
           onClick={() => setActiveTab('args')}
         >
@@ -265,4 +265,4 @@ const ErrorDetailsPanel = () => {
   );
 };
 
-export default ErrorDetailsPanel;
+export default ErrorDetailsPanel; 

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

@@ -22,12 +22,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 13px;
     font-weight: 500;
 
     .request-count {
       color: ${(props) => props.theme.console.countColor};
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       font-weight: 400;
     }
   }
@@ -59,12 +59,12 @@ const StyledWrapper = styled.div`
 
     p {
       margin: 0;
-      font-size: ${(props) => props.theme.font.size.base};
+      font-size: 14px;
       font-weight: 500;
     }
 
     span {
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       opacity: 0.7;
     }
   }
@@ -84,8 +84,8 @@ const StyledWrapper = styled.div`
     padding: 8px 16px;
     background: ${(props) => props.theme.console.headerBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: ${(props) => props.theme.font.size.xs};
-    font-weight: 500;
+    font-size: 11px;
+    font-weight: 600;
     color: ${(props) => props.theme.console.titleColor};
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -107,7 +107,7 @@ const StyledWrapper = styled.div`
     border-bottom: 1px solid ${(props) => props.theme.console.border};
     cursor: pointer;
     transition: background-color 0.1s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     align-items: center;
 
     &:hover {
@@ -127,7 +127,7 @@ const StyledWrapper = styled.div`
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 10px;
-    font-weight: 500;
+    font-weight: 600;
     color: white;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -135,8 +135,8 @@ const StyledWrapper = styled.div`
   }
 
   .status-badge {
-    font-weight: 500;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-weight: 600;
+    font-size: 12px;
   }
 
   .request-domain {
@@ -158,20 +158,20 @@ const StyledWrapper = styled.div`
   .request-time {
     color: ${(props) => props.theme.console.timestampColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
   }
 
   .request-duration {
     color: ${(props) => props.theme.console.messageColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     text-align: right;
   }
 
   .request-size {
     color: ${(props) => props.theme.console.messageColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     text-align: right;
   }
 
@@ -190,7 +190,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
 
     &:hover {
       background: ${(props) => props.theme.console.buttonHoverBg};
@@ -225,7 +225,7 @@ const StyledWrapper = styled.div`
     padding: 8px 12px;
     background: ${(props) => props.theme.console.dropdownHeaderBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     font-weight: 500;
     color: ${(props) => props.theme.console.titleColor};
   }
@@ -235,7 +235,7 @@ const StyledWrapper = styled.div`
     border: none;
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     font-weight: 500;
     padding: 2px 4px;
     border-radius: 2px;
@@ -278,16 +278,16 @@ const StyledWrapper = styled.div`
 
   .filter-option-label {
     color: ${(props) => props.theme.console.optionLabelColor};
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     font-weight: 400;
   }
 
   .filter-option-count {
     color: ${(props) => props.theme.console.optionCountColor};
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     font-weight: 400;
     margin-left: auto;
   }
 `;
 
-export default StyledWrapper;
+export default StyledWrapper; 

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

@@ -1,13 +1,13 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import {
+import { 
   IconFilter,
   IconChevronDown,
-  IconNetwork
+  IconNetwork,
 } from '@tabler/icons';
-import {
-  updateNetworkFilter,
-  toggleAllNetworkFilters,
+import { 
+  updateNetworkFilter, 
+  toggleAllNetworkFilters, 
   setSelectedRequest
 } from 'providers/ReduxStore/slices/logs';
 import StyledWrapper from './StyledWrapper';
@@ -27,8 +27,8 @@ const MethodBadge = ({ method }) => {
   };
 
   return (
-    <span
-      className="method-badge"
+    <span 
+      className="method-badge" 
       style={{ backgroundColor: getMethodColor(method) }}
     >
       {method?.toUpperCase() || 'GET'}
@@ -46,10 +46,10 @@ const StatusBadge = ({ status, statusCode }) => {
   };
 
   const displayStatus = statusCode || status;
-
+  
   return (
-    <span
-      className="status-badge"
+    <span 
+      className="status-badge" 
       style={{ color: getStatusColor(statusCode) }}
     >
       {displayStatus}
@@ -61,7 +61,7 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
-  const allFiltersEnabled = Object.values(filters).every((f) => f);
+  const allFiltersEnabled = Object.values(filters).every(f => f);
   const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
 
   useEffect(() => {
@@ -77,7 +77,7 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
 
   return (
     <div className="filter-dropdown" ref={dropdownRef}>
-      <button
+      <button 
         className="filter-dropdown-trigger"
         onClick={() => setIsOpen(!isOpen)}
         title="Filter requests by method"
@@ -88,21 +88,21 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
         </span>
         <IconChevronDown size={14} strokeWidth={1.5} />
       </button>
-
+      
       {isOpen && (
-        <div className="filter-dropdown-menu right">
+        <div className={`filter-dropdown-menu right`}>
           <div className="filter-dropdown-header">
             <span>Filter by Method</span>
-            <button
+            <button 
               className="filter-toggle-all"
               onClick={() => onToggleAll(!allFiltersEnabled)}
             >
               {allFiltersEnabled ? 'Hide All' : 'Show All'}
             </button>
           </div>
-
+          
           <div className="filter-dropdown-options">
-            {Object.keys(filters).map((method) => (
+            {Object.keys(filters).map(method => (
               <label key={method} className="filter-option">
                 <input
                   type="checkbox"
@@ -126,13 +126,13 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
 const RequestRow = ({ request, isSelected, onClick }) => {
   const { data } = request;
   const { request: req, response: res, timestamp } = data;
-
+  
   const formatTime = (timestamp) => {
     const date = new Date(timestamp);
-    return date.toLocaleTimeString('en-US', {
-      hour12: false,
-      hour: '2-digit',
-      minute: '2-digit',
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
       second: '2-digit',
       fractionalSecondDigits: 3
     });
@@ -174,34 +174,34 @@ const RequestRow = ({ request, isSelected, onClick }) => {
   };
 
   return (
-    <div
+    <div 
       className={`request-row ${isSelected ? 'selected' : ''}`}
       onClick={onClick}
     >
       <div className="request-method">
         <MethodBadge method={req?.method} />
       </div>
-
+      
       <div className="request-status">
         <StatusBadge status={res?.status} statusCode={res?.statusCode} />
       </div>
-
+      
       <div className="request-domain" title={getDomain()}>
         {getDomain()}
       </div>
-
+      
       <div className="request-path" title={getPath()}>
         {getPath()}
       </div>
-
+      
       <div className="request-time">
         {formatTime(timestamp)}
       </div>
-
+      
       <div className="request-duration">
         {formatDuration(res?.duration)}
       </div>
-
+      
       <div className="request-size">
         {formatSize(res?.size)}
       </div>
@@ -211,17 +211,17 @@ const RequestRow = ({ request, isSelected, onClick }) => {
 
 const NetworkTab = () => {
   const dispatch = useDispatch();
-  const { networkFilters, selectedRequest } = useSelector((state) => state.logs);
-  const collections = useSelector((state) => state.collections.collections);
+  const { networkFilters, selectedRequest } = useSelector(state => state.logs);
+  const collections = useSelector(state => state.collections.collections);
 
   const allRequests = useMemo(() => {
     const requests = [];
-
-    collections.forEach((collection) => {
+    
+    collections.forEach(collection => {
       if (collection.timeline) {
         collection.timeline
-          .filter((entry) => entry.type === 'request')
-          .forEach((entry) => {
+          .filter(entry => entry.type === 'request')
+          .forEach(entry => {
             requests.push({
               ...entry,
               collectionName: collection.name,
@@ -230,12 +230,12 @@ const NetworkTab = () => {
           });
       }
     });
-
+    
     return requests.sort((a, b) => a.timestamp - b.timestamp);
   }, [collections]);
 
   const filteredRequests = useMemo(() => {
-    return allRequests.filter((request) => {
+    return allRequests.filter(request => {
       const method = request.data?.request?.method?.toUpperCase() || 'GET';
       return networkFilters[method];
     });
@@ -281,7 +281,7 @@ const NetworkTab = () => {
               <div className="text-right">Duration</div>
               <div className="text-right">Size</div>
             </div>
-
+            
             <div className="requests-list">
               {filteredRequests.map((request, index) => (
                 <RequestRow
@@ -299,4 +299,4 @@ const NetworkTab = () => {
   );
 };
 
-export default NetworkTab;
+export default NetworkTab; 

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

@@ -26,12 +26,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 13px;
     font-weight: 500;
 
     .request-time {
       color: ${(props) => props.theme.console.countColor};
-      font-size: ${(props) => props.theme.font.size.xs};
+      font-size: 11px;
       font-weight: 400;
     }
   }
@@ -73,7 +73,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     font-weight: 500;
 
     &:hover {
@@ -111,8 +111,8 @@ const StyledWrapper = styled.div`
 
     h4 {
       margin: 0;
-      font-size: ${(props) => props.theme.font.size.base};
-      font-weight: 500;
+      font-size: 13px;
+      font-weight: 600;
       color: ${(props) => props.theme.console.titleColor};
       padding-bottom: 4px;
       border-bottom: 1px solid ${(props) => props.theme.console.border};
@@ -131,15 +131,15 @@ const StyledWrapper = styled.div`
     gap: 2px;
 
     .label {
-      font-size: ${(props) => props.theme.font.size.xs};
-      font-weight: 500;
+      font-size: 11px;
+      font-weight: 600;
       color: ${(props) => props.theme.console.countColor};
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
 
     .value {
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       color: ${(props) => props.theme.console.messageColor};
       font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
       word-break: break-all;
@@ -160,7 +160,7 @@ const StyledWrapper = styled.div`
     table {
       width: 100%;
       border-collapse: collapse;
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       background: ${(props) => props.theme.console.headerBg};
 
       thead {
@@ -171,10 +171,10 @@ const StyledWrapper = styled.div`
         
         td {
           padding: 8px 12px;
-          font-weight: 500;
+          font-weight: 600;
           color: ${(props) => props.theme.console.titleColor};
           text-transform: uppercase;
-          font-size: ${(props) => props.theme.font.size.xs};
+          font-size: 11px;
           letter-spacing: 0.5px;
           border-bottom: 1px solid ${(props) => props.theme.console.border};
         }
@@ -209,7 +209,7 @@ const StyledWrapper = styled.div`
   .header-name,
   .timeline-phase {
     color: ${(props) => props.theme.console.countColor};
-    font-weight: 500;
+    font-weight: 600;
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
     min-width: 120px;
   }
@@ -234,7 +234,7 @@ const StyledWrapper = styled.div`
     border-radius: 4px;
     padding: 12px;
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     line-height: 1.4;
     color: ${(props) => props.theme.console.messageColor};
     overflow: auto;
@@ -249,7 +249,7 @@ const StyledWrapper = styled.div`
     text-align: center;
     color: ${(props) => props.theme.console.emptyColor};
     font-style: italic;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     background: ${(props) => props.theme.console.headerBg};
     border: 1px solid ${(props) => props.theme.console.border};
     border-radius: 4px;
@@ -285,7 +285,7 @@ const StyledWrapper = styled.div`
       
       > div {
         color: ${(props) => props.theme.console.buttonColor};
-        font-size: ${(props) => props.theme.font.size.sm} !important;
+        font-size: 12px !important;
         padding: 6px 12px !important;
         border-radius: 4px;
         transition: all 0.2s ease;
@@ -336,7 +336,7 @@ const StyledWrapper = styled.div`
       
       pre {
         color: ${(props) => props.theme.console.messageColor} !important;
-        font-size: ${(props) => props.theme.font.size.xs} !important;
+        font-size: 11px !important;
         line-height: 1.4 !important;
         padding: 12px !important;
       }
@@ -344,4 +344,4 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default StyledWrapper;
+export default StyledWrapper; 

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import {
+import { 
   IconX,
   IconFileText,
   IconArrowRight,
@@ -117,7 +117,7 @@ const ResponseTab = ({ response, request, collection }) => {
         <div className="response-body-container">
           {response?.data || response?.dataBuffer ? (
             <QueryResult
-              item={{ uid: uuid() }}
+              item={{ uid:  uuid()}}
               collection={collection}
               data={response.data}
               dataBuffer={response.dataBuffer}
@@ -155,8 +155,8 @@ const NetworkTab = ({ response }) => {
 
 const RequestDetailsPanel = () => {
   const dispatch = useDispatch();
-  const { selectedRequest } = useSelector((state) => state.logs);
-  const collections = useSelector((state) => state.collections.collections);
+  const { selectedRequest } = useSelector(state => state.logs);
+  const collections = useSelector(state => state.collections.collections);
   const [activeTab, setActiveTab] = useState('request');
 
   if (!selectedRequest) return null;
@@ -164,7 +164,7 @@ const RequestDetailsPanel = () => {
   const { data } = selectedRequest;
   const { request, response } = data;
 
-  const collection = collections.find((c) => c.uid === selectedRequest.collectionUid);
+  const collection = collections.find(c => c.uid === selectedRequest.collectionUid);
 
   const handleClose = () => {
     dispatch(clearSelectedRequest());
@@ -196,8 +196,8 @@ const RequestDetailsPanel = () => {
           <span>Request Details</span>
           <span className="request-time">({formatTime(selectedRequest.timestamp)})</span>
         </div>
-
-        <button
+        
+        <button 
           className="close-button"
           onClick={handleClose}
           title="Close details panel"
@@ -207,23 +207,23 @@ const RequestDetailsPanel = () => {
       </div>
 
       <div className="panel-tabs">
-        <button
+        <button 
           className={`tab-button ${activeTab === 'request' ? 'active' : ''}`}
           onClick={() => setActiveTab('request')}
         >
           <IconArrowRight size={14} strokeWidth={1.5} />
           Request
         </button>
-
-        <button
+        
+        <button 
           className={`tab-button ${activeTab === 'response' ? 'active' : ''}`}
           onClick={() => setActiveTab('response')}
         >
           <IconFileText size={14} strokeWidth={1.5} />
           Response
         </button>
-
-        <button
+        
+        <button 
           className={`tab-button ${activeTab === 'network' ? 'active' : ''}`}
           onClick={() => setActiveTab('network')}
         >
@@ -239,4 +239,4 @@ const RequestDetailsPanel = () => {
   );
 };
 
-export default RequestDetailsPanel;
+export default RequestDetailsPanel; 

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

@@ -37,7 +37,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     font-weight: 500;
     border-radius: 4px 4px 0 0;
 
@@ -89,12 +89,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 13px;
     font-weight: 500;
 
     .log-count {
       color: ${(props) => props.theme.console.countColor};
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       font-weight: 400;
     }
   }
@@ -194,7 +194,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
 
     &:hover {
       background: ${(props) => props.theme.console.buttonHoverBg};
@@ -235,7 +235,7 @@ const StyledWrapper = styled.div`
     padding: 8px 12px;
     background: ${(props) => props.theme.console.dropdownHeaderBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     font-weight: 500;
     color: ${(props) => props.theme.console.titleColor};
   }
@@ -245,7 +245,7 @@ const StyledWrapper = styled.div`
     border: none;
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     font-weight: 500;
     padding: 2px 4px;
     border-radius: 2px;
@@ -288,13 +288,13 @@ const StyledWrapper = styled.div`
 
   .filter-option-label {
     color: ${(props) => props.theme.console.optionLabelColor};
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     font-weight: 400;
   }
 
   .filter-option-count {
     color: ${(props) => props.theme.console.optionCountColor};
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     font-weight: 400;
     margin-left: auto;
   }
@@ -312,12 +312,12 @@ const StyledWrapper = styled.div`
 
     p {
       margin: 0;
-      font-size: ${(props) => props.theme.font.size.base};
+      font-size: 14px;
       font-weight: 500;
     }
 
     span {
-      font-size: ${(props) => props.theme.font.size.sm};
+      font-size: 12px;
       opacity: 0.7;
     }
   }
@@ -333,7 +333,7 @@ const StyledWrapper = styled.div`
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 10px;
-    font-weight: 500;
+    font-weight: 600;
     color: white;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -346,7 +346,7 @@ const StyledWrapper = styled.div`
     gap: 12px;
     padding: 4px 16px;
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: ${(props) => props.theme.font.size.sm};
+    font-size: 12px;
     line-height: 1.4;
     border-left: 2px solid transparent;
     transition: background-color 0.1s ease;
@@ -431,13 +431,13 @@ const StyledWrapper = styled.div`
 
   .log-timestamp {
     color: ${(props) => props.theme.console.timestampColor};
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 11px;
     font-weight: 400;
   }
 
   .log-level {
     font-size: 9px;
-    font-weight: 500;
+    font-weight: 600;
     padding: 2px 4px;
     border-radius: 2px;
     text-transform: uppercase;
@@ -465,7 +465,7 @@ const StyledWrapper = styled.div`
         background: transparent !important;
         
         .object-key-val {
-          font-size: ${(props) => props.theme.font.size.sm} !important;
+          font-size: 12px !important;
         }
         
         .object-key {
@@ -517,4 +517,4 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export default StyledWrapper;
+export default StyledWrapper; 

packages/bruno-app/src/components/Devtools/Console/TerminalTab/SessionList.js

@@ -1,151 +0,0 @@
-import React from 'react';
-import { IconTerminal, IconX } from '@tabler/icons';
-import styled from 'styled-components';
-import ToolHint from 'components/ToolHint/index';
-
-const StyledSessionList = styled.div`
-  .session-list-item {
-    padding: 10px 12px;
-    cursor: pointer;
-    border-bottom: 1px solid ${(props) => props.theme.border || 'rgba(255, 255, 255, 0.05)'};
-    transition: all 0.2s;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    position: relative;
-
-    &:hover {
-      background: ${(props) => props.theme.sidebarHover || 'rgba(255, 255, 255, 0.05)'};
-      
-      .session-close-btn {
-        opacity: 1;
-      }
-    }
-
-    &.active {
-      background: ${(props) => props.theme.sidebarActive || 'rgba(59, 142, 234, 0.12)'};
-      border-left: 2px solid ${(props) => props.theme.brandColor || '#3b8eea'};
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .session-close-btn {
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    opacity: 0;
-    transition: opacity 0.2s;
-    padding: 4px;
-    cursor: pointer;
-    color: ${(props) => props.theme.textSecondary || '#888'};
-    
-    &:hover {
-      color: ${(props) => props.theme.text};
-      background: ${(props) => props.theme.sidebarHover || 'rgba(255, 255, 255, 0.1)'};
-      border-radius: 4px;
-    }
-  }
-
-  .session-name {
-    font-size: 13px;
-    font-weight: 500;
-    color: ${(props) => props.theme.text};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-right: 24px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  .session-icon {
-    flex-shrink: 0;
-    opacity: 0.7;
-  }
-
-  .session-path {
-    font-size: 11px;
-    color: ${(props) => props.theme.textSecondary || '#888'};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;
-
-const SessionList = ({ sessions, activeSessionId, onSelectSession, onCloseSession }) => {
-  const getSessionDisplayInfo = (session) => {
-    if (session.name) {
-      return { name: session.name };
-    }
-
-    if (session.cwd) {
-      // Normalize path and get the last directory name
-      const normalizedPath = session.cwd.replace(/\\/g, '/').replace(/\/$/, '');
-      const pathParts = normalizedPath.split('/').filter((p) => p);
-
-      if (pathParts.length > 0) {
-        const folderName = pathParts[pathParts.length - 1];
-        return { name: folderName };
-      }
-
-      // If it's root or home directory
-      if (normalizedPath === '' || normalizedPath === '/' || normalizedPath.match(/^[A-Z]:\/?$/)) {
-        return { name: 'Root' };
-      }
-    }
-
-    // Fallback: use a cool name based on session ID
-    const shortId = session.sessionId.split('_')[1]?.slice(-6) || session.sessionId.slice(-6);
-    return { name: `Terminal ${shortId}` };
-  };
-
-  const getFullPath = (session) => {
-    if (session.cwd) {
-      return session.cwd;
-    }
-    return '~ (Home Directory)';
-  };
-
-  return (
-    <StyledSessionList>
-      {sessions.map((session) => {
-        const { name } = getSessionDisplayInfo(session);
-        return (
-          <ToolHint
-            key={session.sessionId}
-            text={getFullPath(session)}
-            toolhintId={`session-path-${session.sessionId}`}
-            place="bottom-start"
-            delayShow={100}
-          >
-            <div
-              className={`session-list-item ${activeSessionId === session.sessionId ? 'active' : ''}`}
-              onClick={() => onSelectSession(session.sessionId)}
-            >
-              <div className="session-name">
-                <IconTerminal className="session-icon" size={14} />
-                <span>{name}</span>
-              </div>
-              <div
-                className="session-close-btn"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onCloseSession(session.sessionId);
-                }}
-              >
-                <IconX size={14} />
-              </div>
-            </div>
-          </ToolHint>
-        );
-      })}
-    </StyledSessionList>
-  );
-};
-
-export default SessionList;

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

@@ -1,201 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  color: ${(props) => props.theme.text};
-
-  .xterm-rows {
-    color: ${(props) => props.theme.text} !important;
-  }
-
-  .terminal-content {
-    height: 100%;
-    width: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-  }
-
-  .terminal-sessions-sidebar {
-    width: 200px;
-    min-width: 200px;
-    border-right: 1px solid ${(props) => props.theme.border || 'rgba(255, 255, 255, 0.08)'};
-    background: ${(props) => props.theme.sidebarBackground || props.theme.background};
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-  }
-
-  .terminal-sessions-header {
-    padding: 12px;
-    font-weight: 600;
-    font-size: 13px;
-    color: ${(props) => props.theme.text};
-    border-bottom: 1px solid ${(props) => props.theme.border || 'rgba(255, 255, 255, 0.08)'};
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .terminal-sessions-list {
-    flex: 1;
-    overflow-y: auto;
-
-    /* Custom scrollbar styling - subtle */
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(255, 255, 255, 0.15);
-    }
-  }
-
-  .terminal-session-item {
-    padding: 10px 12px;
-    cursor: pointer;
-    border-bottom: 1px solid ${(props) => props.theme.border};
-    transition: background 0.2s;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    &:hover {
-      background: ${(props) => props.theme.sidebarHover || 'rgba(255, 255, 255, 0.05)'};
-    }
-
-    &.active {
-      background: ${(props) => props.theme.sidebarActive || 'rgba(59, 142, 234, 0.15)'};
-      border-left: 3px solid ${(props) => props.theme.brandColor || '#3b8eea'};
-    }
-  }
-
-  .terminal-session-name {
-    font-size: 13px;
-    font-weight: 500;
-    color: ${(props) => props.theme.text};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .terminal-session-path {
-    font-size: 11px;
-    color: ${(props) => props.theme.textSecondary || '#888'};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .terminal-display-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .terminal-loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    color: #888;
-    font-size: 14px;
-    z-index: 10;
-
-    svg {
-      opacity: 0.7;
-    }
-
-    span {
-      font-weight: 500;
-    }
-  }
-
-  .terminal-container {
-    flex: 1;
-    position: relative;
-    
-    .xterm {
-      height: 100% !important;
-      width: 100% !important;
-      padding: 8px;
-    }
-
-    .xterm-viewport {
-      background: transparent !important;
-    }
-
-    .xterm-screen {
-      background: transparent !important;
-    }
-
-    .xterm-decoration-overview-ruler {
-      display: none;
-    }
-
-    /* Custom scrollbar for terminal */
-    .xterm-viewport::-webkit-scrollbar {
-      width: 8px;
-    }
-
-    .xterm-viewport::-webkit-scrollbar-track {
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 4px;
-    }
-
-    .xterm-viewport::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 4px;
-    }
-
-    .xterm-viewport::-webkit-scrollbar-thumb:hover {
-      background: rgba(255, 255, 255, 0.3);
-    }
-  }
-
-  /* Dark theme adjustments */
-  .xterm-helper-textarea {
-    position: absolute !important;
-    left: -9999px !important;
-    top: -9999px !important;
-  }
-
-  /* Selection styling */
-  .xterm .xterm-selection div {
-    background-color: rgba(255, 255, 255, 0.3) !important;
-  }
-
-  /* Cursor styling */
-  .xterm .xterm-cursor-layer .xterm-cursor {
-    background-color: #d4d4d4 !important;
-  }
-
-  /* Link styling */
-  .xterm .xterm-decoration-link {
-    text-decoration: underline;
-    color: #3b8eea;
-  }
-
-  .xterm .xterm-decoration-link:hover {
-    color: #5ba7f7;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,449 +0,0 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { Terminal } from '@xterm/xterm';
-import { FitAddon } from '@xterm/addon-fit';
-import { IconTerminal2, IconPlus } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-import SessionList from './SessionList';
-import '@xterm/xterm/css/xterm.css';
-
-// Terminal instances per session - Map<sessionId, { terminal, fitAddon, inputDisposable, resizeDisposable }>
-const terminalInstances = new Map();
-
-// Data listeners per session - Map<sessionId, { onData, onExit }>
-const sessionListeners = new Map();
-
-// Parking host for terminal DOM when view unmounts
-let parkingHost = null;
-
-// Export function to get current session ID (for backward compatibility)
-export const getSessionId = () => {
-  // Return the first active session ID if any
-  if (terminalInstances.size > 0) {
-    return Array.from(terminalInstances.keys())[0];
-  }
-  return null;
-};
-
-const ensureParkingHost = () => {
-  if (parkingHost && document.body.contains(parkingHost)) return parkingHost;
-  parkingHost = document.createElement('div');
-  parkingHost.style.display = 'none';
-  parkingHost.setAttribute('data-terminal-parking-host', 'true');
-  document.body.appendChild(parkingHost);
-  return parkingHost;
-};
-
-const createTerminalForSession = (sessionId) => {
-  if (terminalInstances.has(sessionId)) {
-    return terminalInstances.get(sessionId);
-  }
-
-  const terminal = new Terminal({
-    cursorBlink: true,
-    fontSize: 14,
-    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-    theme: {
-      background: '#1e1e1e',
-      foreground: '#d4d4d4',
-      cursor: '#d4d4d4',
-      selection: '#264f78',
-      black: '#1e1e1e',
-      red: '#f14c4c',
-      green: '#23d18b',
-      yellow: '#f5f543',
-      blue: '#3b8eea',
-      magenta: '#d670d6',
-      cyan: '#29b8db',
-      white: '#e5e5e5',
-      brightBlack: '#666666',
-      brightRed: '#f14c4c',
-      brightGreen: '#23d18b',
-      brightYellow: '#f5f543',
-      brightBlue: '#3b8eea',
-      brightMagenta: '#d670d6',
-      brightCyan: '#29b8db',
-      brightWhite: '#e5e5e5'
-    },
-    allowProposedApi: true
-  });
-
-  const fitAddon = new FitAddon();
-  terminal.loadAddon(fitAddon);
-
-  const inputDisposable = terminal.onData((data) => {
-    if (data && sessionId && window.ipcRenderer) {
-      window.ipcRenderer.send('terminal:input', sessionId, data);
-    }
-  });
-
-  const resizeDisposable = terminal.onResize(({ cols, rows }) => {
-    if (sessionId && window.ipcRenderer) {
-      window.ipcRenderer.send('terminal:resize', sessionId, { cols, rows });
-    }
-  });
-
-  const instance = {
-    terminal,
-    fitAddon,
-    inputDisposable,
-    resizeDisposable
-  };
-
-  terminalInstances.set(sessionId, instance);
-
-  // Setup IPC listeners for this session
-  if (window.ipcRenderer && !sessionListeners.has(sessionId)) {
-    const onData = (data) => {
-      if (!data) return;
-      const instance = terminalInstances.get(sessionId);
-      if (instance && instance.terminal) {
-        try {
-          instance.terminal.write(data);
-        } catch (err) {
-          console.warn('Failed to write terminal data:', err);
-        }
-      }
-    };
-
-    const onExit = ({ exitCode, signal } = {}) => {
-      const msg = `\r\n[Process exited with code ${exitCode ?? ''} ${signal ? `(signal ${signal})` : ''}]\r\n`;
-      const instance = terminalInstances.get(sessionId);
-      if (instance && instance.terminal) {
-        try {
-          instance.terminal.write(msg);
-        } catch (err) {
-          console.warn('Failed to write terminal exit message:', err);
-        }
-      }
-      // Cleanup on exit
-      cleanupTerminalInstance(sessionId);
-    };
-
-    window.ipcRenderer.on(`terminal:data:${sessionId}`, onData);
-    window.ipcRenderer.on(`terminal:exit:${sessionId}`, onExit);
-
-    sessionListeners.set(sessionId, { onData, onExit });
-  }
-
-  return instance;
-};
-
-const cleanupTerminalInstance = (sessionId) => {
-  const instance = terminalInstances.get(sessionId);
-  if (instance) {
-    try {
-      if (instance.inputDisposable) instance.inputDisposable.dispose();
-      if (instance.resizeDisposable) instance.resizeDisposable.dispose();
-      if (instance.terminal) {
-        instance.terminal.dispose();
-      }
-    } catch (err) {
-      console.warn('Error disposing terminal instance:', err);
-    }
-    terminalInstances.delete(sessionId);
-  }
-
-  // Remove IPC listeners
-  const listeners = sessionListeners.get(sessionId);
-  if (listeners && window.ipcRenderer) {
-    try {
-      window.ipcRenderer.removeAllListeners(`terminal:data:${sessionId}`);
-      window.ipcRenderer.removeAllListeners(`terminal:exit:${sessionId}`);
-    } catch (err) {
-      console.warn('Error removing IPC listeners:', err);
-    }
-    sessionListeners.delete(sessionId);
-  }
-};
-
-const openTerminalIntoContainer = async (container, sessionId) => {
-  if (!container || !sessionId) return;
-
-  const instance = createTerminalForSession(sessionId);
-  const { terminal, fitAddon } = instance;
-
-  if (!terminal.element) {
-    terminal.open(container);
-  } else {
-    // Move terminal element to new container
-    if (terminal.element.parentElement !== container) {
-      container.appendChild(terminal.element);
-    }
-  }
-
-  await new Promise((resolve) => setTimeout(resolve, 50));
-  try {
-    fitAddon.fit();
-    const { cols, rows } = terminal;
-    if (cols && rows && window.ipcRenderer) {
-      window.ipcRenderer.send('terminal:resize', sessionId, { cols, rows });
-    }
-  } catch (e) {
-    console.warn('Error fitting terminal:', e);
-  }
-};
-
-const TerminalTab = () => {
-  const terminalRef = useRef(null);
-  const [sessions, setSessions] = useState([]);
-  const [activeSessionId, setActiveSessionId] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Load sessions list
-  const loadSessions = useCallback(async (currentActiveSessionId = null) => {
-    if (!window.ipcRenderer) return [];
-
-    try {
-      const sessionList = await window.ipcRenderer.invoke('terminal:list-sessions');
-      setSessions(sessionList);
-
-      // Use functional state updates to get the current activeSessionId
-      setActiveSessionId((prevActiveSessionId) => {
-        const activeId = currentActiveSessionId !== null ? currentActiveSessionId : prevActiveSessionId;
-
-        // Auto-select first session if none selected
-        if (!activeId && sessionList.length > 0) {
-          return sessionList[0].sessionId;
-        }
-
-        // If active session no longer exists, select first available
-        if (activeId && !sessionList.find((s) => s.sessionId === activeId)) {
-          return sessionList.length > 0 ? sessionList[0].sessionId : null;
-        }
-
-        // Keep current selection if it still exists
-        return activeId;
-      });
-
-      return sessionList;
-    } catch (err) {
-      console.error('Failed to load sessions:', err);
-      return [];
-    }
-  }, []);
-
-  // Create new terminal session
-  const createNewSession = useCallback(async (cwd = null) => {
-    if (!window.ipcRenderer) return null;
-
-    try {
-      const options = cwd ? { cwd } : {};
-      const newSessionId = await window.ipcRenderer.invoke('terminal:create', options);
-      if (newSessionId) {
-        await loadSessions(newSessionId);
-        setActiveSessionId(newSessionId);
-        return newSessionId;
-      }
-    } catch (err) {
-      console.error('Failed to create terminal session:', err);
-    }
-    return null;
-  }, [loadSessions]);
-
-  // Listen for requests to open terminal at specific CWD
-  useEffect(() => {
-    const normalizePath = (path) => {
-      if (!path) return '';
-      // Normalize path separators and remove trailing separators for comparison
-      return path.replace(/\\/g, '/').replace(/\/$/, '') || '/';
-    };
-
-    const handleOpenTerminalAtCwd = async (event) => {
-      const { cwd } = event.detail;
-      if (!cwd) return;
-
-      const normalizedCwd = normalizePath(cwd);
-
-      // Check if session already exists at this CWD
-      const sessionList = await window.ipcRenderer.invoke('terminal:list-sessions');
-      const existingSession = sessionList.find((s) => normalizePath(s.cwd) === normalizedCwd);
-
-      if (existingSession) {
-        // Switch to existing session
-        await loadSessions(existingSession.sessionId);
-        setActiveSessionId(existingSession.sessionId);
-      } else {
-        // Create new session at this CWD
-        await createNewSession(cwd);
-      }
-    };
-
-    window.addEventListener('terminal:open-at-cwd', handleOpenTerminalAtCwd);
-
-    return () => {
-      window.removeEventListener('terminal:open-at-cwd', handleOpenTerminalAtCwd);
-    };
-  }, [loadSessions, createNewSession]);
-
-  // Close terminal session
-  const closeSession = async (sessionId) => {
-    if (!window.ipcRenderer) return;
-
-    try {
-      window.ipcRenderer.send('terminal:kill', sessionId);
-      cleanupTerminalInstance(sessionId);
-
-      // Load updated sessions (this will also handle active session switching)
-      const updatedSessions = await loadSessions();
-
-      // If we closed the active session and there are no sessions left, clear selection
-      if (activeSessionId === sessionId && updatedSessions.length === 0) {
-        setActiveSessionId(null);
-      }
-    } catch (err) {
-      console.error('Failed to close terminal session:', err);
-    }
-  };
-
-  // Load sessions on mount and set up polling
-  useEffect(() => {
-    if (!window.ipcRenderer) {
-      setIsLoading(false);
-      return;
-    }
-
-    let mounted = true;
-
-    const initialLoad = async () => {
-      const sessionList = await loadSessions();
-      if (mounted) {
-        setIsLoading(false);
-      }
-    };
-
-    initialLoad();
-
-    // Poll for session updates every 2 seconds
-    // Note: We don't pass currentActiveSessionId here to avoid stale closures
-    // The functional update inside loadSessions will use the current state
-    const pollInterval = setInterval(() => {
-      if (mounted) {
-        loadSessions();
-      }
-    }, 2000);
-
-    return () => {
-      mounted = false;
-      clearInterval(pollInterval);
-    };
-  }, []);
-
-  // Handle terminal display for active session
-  useEffect(() => {
-    if (!activeSessionId || !terminalRef.current) return;
-
-    let mounted = true;
-
-    const setupTerminal = async () => {
-      await openTerminalIntoContainer(terminalRef.current, activeSessionId);
-
-      if (mounted) {
-        const instance = terminalInstances.get(activeSessionId);
-        if (instance && instance.fitAddon) {
-          const onResize = () => {
-            try {
-              instance.fitAddon.fit();
-            } catch (e) {}
-          };
-
-          window.addEventListener('resize', onResize);
-
-          // Initial resize
-          setTimeout(() => {
-            try {
-              instance.fitAddon.fit();
-              const { cols, rows } = instance.terminal;
-              if (cols && rows && window.ipcRenderer) {
-                window.ipcRenderer.send('terminal:resize', activeSessionId, { cols, rows });
-              }
-            } catch (err) {
-              console.warn('Failed to perform initial resize:', err);
-            }
-          }, 100);
-
-          return () => {
-            window.removeEventListener('resize', onResize);
-
-            // Park terminal element when switching sessions
-            if (instance.terminal && instance.terminal.element) {
-              const host = ensureParkingHost();
-              if (instance.terminal.element.parentElement !== host) {
-                host.appendChild(instance.terminal.element);
-              }
-            }
-          };
-        }
-      }
-    };
-
-    const cleanup = setupTerminal();
-
-    return () => {
-      mounted = false;
-      Promise.resolve(cleanup).then((fn) => {
-        if (typeof fn === 'function') fn();
-      });
-    };
-  }, [activeSessionId]);
-
-  return (
-    <StyledWrapper>
-      <div className="terminal-content">
-        {/* Left Sidebar */}
-        <div className="terminal-sessions-sidebar">
-          <div className="terminal-sessions-header">
-            <span>Sessions</span>
-            <IconPlus
-              size={16}
-              style={{ cursor: 'pointer', color: '#888' }}
-              onClick={(e) => {
-                e.stopPropagation();
-                createNewSession();
-              }}
-              title="New Terminal Session"
-            />
-          </div>
-          <div className="terminal-sessions-list">
-            {isLoading ? (
-              <div style={{ padding: '12px', color: '#888', fontSize: '13px' }}>
-                Loading sessions...
-              </div>
-            ) : sessions.length === 0 ? (
-              <div style={{ padding: '12px', color: '#888', fontSize: '13px' }}>
-                No active sessions
-              </div>
-            ) : (
-              <SessionList
-                sessions={sessions}
-                activeSessionId={activeSessionId}
-                onSelectSession={setActiveSessionId}
-                onCloseSession={closeSession}
-              />
-            )}
-          </div>
-        </div>
-
-        {/* Right Terminal Display */}
-        <div className="terminal-display-container">
-          {!activeSessionId && window.ipcRenderer && (
-            <div className="terminal-loading">
-              <IconTerminal2 size={24} strokeWidth={1.5} />
-              <span>No terminal session selected</span>
-            </div>
-          )}
-          <div
-            ref={terminalRef}
-            className="terminal-container"
-            style={{
-              height: '100%',
-              width: '100%',
-              display: activeSessionId ? 'block' : 'none'
-            }}
-          />
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default TerminalTab;

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

@@ -2,41 +2,37 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import ReactJson from 'react-json-view';
 import { useTheme } from 'providers/Theme';
-import {
-  IconX,
-  IconTrash,
+import { 
+  IconX, 
+  IconTrash, 
   IconFilter,
-  IconAlertTriangle,
-  IconAlertCircle,
+  IconAlertTriangle, 
+  IconAlertCircle, 
   IconBug,
   IconCode,
   IconChevronDown,
   IconTerminal2,
-  IconNetwork,
-  IconDashboard
+  IconNetwork
 } from '@tabler/icons';
-import {
-  closeConsole,
-  clearLogs,
-  updateFilter,
+import { 
+  closeConsole, 
+  clearLogs, 
+  updateFilter, 
   toggleAllFilters,
   setActiveTab,
   clearDebugErrors,
   updateNetworkFilter,
   toggleAllNetworkFilters
 } from 'providers/ReduxStore/slices/logs';
-
 import NetworkTab from './NetworkTab';
-import TerminalTab from './TerminalTab';
 import RequestDetailsPanel from './RequestDetailsPanel';
 // import DebugTab from './DebugTab';
 import ErrorDetailsPanel from './ErrorDetailsPanel';
-import Performance from '../Performance';
 import StyledWrapper from './StyledWrapper';
 
 const LogIcon = ({ type }) => {
   const iconProps = { size: 16, strokeWidth: 1.5 };
-
+  
   switch (type) {
     case 'error':
       return <IconAlertCircle className="log-icon error" {...iconProps} />;
@@ -53,20 +49,20 @@ const LogIcon = ({ type }) => {
 
 const LogTimestamp = ({ timestamp }) => {
   const date = new Date(timestamp);
-  const time = date.toLocaleTimeString('en-US', {
-    hour12: false,
-    hour: '2-digit',
-    minute: '2-digit',
+  const time = date.toLocaleTimeString('en-US', { 
+    hour12: false, 
+    hour: '2-digit', 
+    minute: '2-digit', 
     second: '2-digit',
     fractionalSecondDigits: 3
   });
-
+  
   return <span className="log-timestamp">{time}</span>;
 };
 
 const LogMessage = ({ message, args }) => {
   const { displayedTheme } = useTheme();
-
+  
   const formatMessage = (msg, originalArgs) => {
     if (originalArgs && originalArgs.length > 0) {
       return originalArgs.map((arg, index) => {
@@ -85,7 +81,7 @@ const LogMessage = ({ message, args }) => {
                 name={false}
                 style={{
                   backgroundColor: 'transparent',
-                  fontSize: '${(props) => props.theme.font.size.sm}',
+                  fontSize: '12px',
                   fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
                 }}
               />
@@ -99,7 +95,7 @@ const LogMessage = ({ message, args }) => {
   };
 
   const formattedMessage = formatMessage(message, args);
-
+  
   return (
     <span className="log-message">
       {Array.isArray(formattedMessage) ? formattedMessage.map((item, index) => (
@@ -113,7 +109,7 @@ const FilterDropdown = ({ filters, logCounts, onFilterToggle, onToggleAll }) =>
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
-  const allFiltersEnabled = Object.values(filters).every((f) => f);
+  const allFiltersEnabled = Object.values(filters).every(f => f);
   const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
 
   useEffect(() => {
@@ -129,7 +125,7 @@ const FilterDropdown = ({ filters, logCounts, onFilterToggle, onToggleAll }) =>
 
   return (
     <div className="filter-dropdown" ref={dropdownRef}>
-      <button
+      <button 
         className="filter-dropdown-trigger"
         onClick={() => setIsOpen(!isOpen)}
         title="Filter logs by type"
@@ -140,19 +136,19 @@ const FilterDropdown = ({ filters, logCounts, onFilterToggle, onToggleAll }) =>
         </span>
         <IconChevronDown size={14} strokeWidth={1.5} />
       </button>
-
+      
       {isOpen && (
-        <div className="filter-dropdown-menu right">
+        <div className={`filter-dropdown-menu right`}>
           <div className="filter-dropdown-header">
             <span>Filter by Type</span>
-            <button
+            <button 
               className="filter-toggle-all"
               onClick={() => onToggleAll(!allFiltersEnabled)}
             >
               {allFiltersEnabled ? 'Hide All' : 'Show All'}
             </button>
           </div>
-
+          
           <div className="filter-dropdown-options">
             {Object.entries(filters).map(([filterType, enabled]) => (
               <label key={filterType} className="filter-option">
@@ -179,7 +175,7 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
-  const allFiltersEnabled = Object.values(filters).every((f) => f);
+  const allFiltersEnabled = Object.values(filters).every(f => f);
   const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
 
   const getMethodColor = (method) => {
@@ -208,7 +204,7 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
 
   return (
     <div className="filter-dropdown" ref={dropdownRef}>
-      <button
+      <button 
         className="filter-dropdown-trigger"
         onClick={() => setIsOpen(!isOpen)}
         title="Filter requests by method"
@@ -219,19 +215,19 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
         </span>
         <IconChevronDown size={14} strokeWidth={1.5} />
       </button>
-
+      
       {isOpen && (
-        <div className="filter-dropdown-menu right">
+        <div className={`filter-dropdown-menu right`}>
           <div className="filter-dropdown-header">
             <span>Filter by Method</span>
-            <button
+            <button 
               className="filter-toggle-all"
               onClick={() => onToggleAll(!allFiltersEnabled)}
             >
               {allFiltersEnabled ? 'Hide All' : 'Show All'}
             </button>
           </div>
-
+          
           <div className="filter-dropdown-options">
             {Object.entries(filters).map(([method, enabled]) => (
               <label key={method} className="filter-option">
@@ -259,7 +255,7 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
 const ConsoleTab = ({ logs, filters, logCounts, onFilterToggle, onToggleAll, onClearLogs }) => {
   const logsEndRef = useRef(null);
   const prevLogsCountRef = useRef(0);
-
+  
   useEffect(() => {
     // Only scroll when new logs are added, not when switching tabs
     if (logsEndRef.current && logs.length > prevLogsCountRef.current) {
@@ -268,7 +264,7 @@ const ConsoleTab = ({ logs, filters, logCounts, onFilterToggle, onToggleAll, onC
     prevLogsCountRef.current = logs.length;
   }, [logs]);
 
-  const filteredLogs = logs.filter((log) => filters[log.type]);
+  const filteredLogs = logs.filter(log => filters[log.type]);
 
   return (
     <div className="tab-content">
@@ -300,8 +296,8 @@ const ConsoleTab = ({ logs, filters, logCounts, onFilterToggle, onToggleAll, onC
 
 const Console = () => {
   const dispatch = useDispatch();
-  const { logs, filters, activeTab, selectedRequest, selectedError, networkFilters, debugErrors } = useSelector((state) => state.logs);
-  const collections = useSelector((state) => state.collections.collections);
+  const { logs, filters, activeTab, selectedRequest, selectedError, networkFilters, debugErrors } = useSelector(state => state.logs);
+  const collections = useSelector(state => state.collections.collections);
   const consoleRef = useRef(null);
 
   const logCounts = logs.reduce((counts, log) => {
@@ -311,12 +307,12 @@ const Console = () => {
 
   const allRequests = React.useMemo(() => {
     const requests = [];
-
-    collections.forEach((collection) => {
+    
+    collections.forEach(collection => {
       if (collection.timeline) {
         collection.timeline
-          .filter((entry) => entry.type === 'request')
-          .forEach((entry) => {
+          .filter(entry => entry.type === 'request')
+          .forEach(entry => {
             requests.push({
               ...entry,
               collectionName: collection.name,
@@ -325,12 +321,12 @@ const Console = () => {
           });
       }
     });
-
+    
     return requests.sort((a, b) => a.timestamp - b.timestamp);
   }, [collections]);
 
-  const filteredLogs = logs.filter((log) => filters[log.type]);
-  const filteredRequests = allRequests.filter((request) => {
+  const filteredLogs = logs.filter(log => filters[log.type]);
+  const filteredRequests = allRequests.filter(request => {
     const method = request.data?.request?.method?.toUpperCase() || 'GET';
     return networkFilters[method];
   });
@@ -388,10 +384,6 @@ const Console = () => {
         );
       case 'network':
         return <NetworkTab />;
-      case 'performance':
-        return <Performance />;
-      case 'terminal':
-        return <TerminalTab />;
       // case 'debug':
       //   return <DebugTab />;
       default:
@@ -422,7 +414,7 @@ const Console = () => {
               />
             </div>
             <div className="action-controls">
-              <button
+              <button 
                 className="control-button"
                 onClick={handleClearLogs}
                 title="Clear all logs"
@@ -445,14 +437,12 @@ const Console = () => {
             </div>
           </div>
         );
-      case 'terminal':
-        return null; // No controls needed for terminal
       // case 'debug':
       //   return (
       //     <div className="tab-controls">
       //       <div className="action-controls">
       //         {debugErrors.length > 0 && (
-      //           <button
+      //           <button 
       //             className="control-button"
       //             onClick={handleClearDebugErrors}
       //             title="Clear all errors"
@@ -468,47 +458,33 @@ const Console = () => {
     }
   };
 
+
+
   return (
     <StyledWrapper ref={consoleRef}>
-      <div
+      <div 
         className="console-resize-handle"
       />
-
+      
       <div className="console-header">
         <div className="console-tabs">
-          <button
+          <button 
             className={`console-tab ${activeTab === 'console' ? 'active' : ''}`}
             onClick={() => handleTabChange('console')}
           >
             <IconTerminal2 size={16} strokeWidth={1.5} />
             <span>Console</span>
           </button>
-
-          <button
+          
+          <button 
             className={`console-tab ${activeTab === 'network' ? 'active' : ''}`}
             onClick={() => handleTabChange('network')}
           >
             <IconNetwork size={16} strokeWidth={1.5} />
             <span>Network</span>
           </button>
-
-          <button
-            className={`console-tab ${activeTab === 'performance' ? 'active' : ''}`}
-            onClick={() => handleTabChange('performance')}
-          >
-            <IconDashboard size={16} strokeWidth={1.5} />
-            <span>Performance</span>
-          </button>
-
-          <button
-            className={`console-tab ${activeTab === 'terminal' ? 'active' : ''}`}
-            onClick={() => handleTabChange('terminal')}
-          >
-            <IconTerminal2 size={16} strokeWidth={1.5} />
-            <span>Terminal</span>
-          </button>
-
-          {/* <button
+          
+          {/* <button 
             className={`console-tab ${activeTab === 'debug' ? 'active' : ''}`}
             onClick={() => handleTabChange('debug')}
           >
@@ -519,7 +495,7 @@ const Console = () => {
 
         <div className="console-controls">
           {renderTabControls()}
-          <button
+          <button 
             className="control-button close-button"
             onClick={handlecloseConsole}
             title="Close console"
@@ -552,4 +528,4 @@ const Console = () => {
   );
 };
 
-export default Console;
+export default Console; 

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

@@ -1,351 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .tab-content {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background: ${(props) => props.theme.console.bg};
-  }
-
-  .tab-content-area {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-  }
-
-  .overview-container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .overview-section {
-    margin-bottom: 32px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .section-header {
-    margin-bottom: 20px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-
-    h3 {
-      margin: 0 0 4px 0;
-      font-size: 16px;
-      font-weight: 500;
-      color: ${(props) => props.theme.console.titleColor};
-    }
-
-    p {
-      margin: 0;
-      font-size: ${(props) => props.theme.font.size.base};
-      color: ${(props) => props.theme.console.textMuted};
-    }
-  }
-
-    .system-resources {
-    margin-bottom: 16px;
-
-    h2 {
-      margin: 0 0 8px 0;
-      font-size: ${(props) => props.theme.font.size.base};
-      font-weight: 500;
-      color: ${(props) => props.theme.console.titleColor};
-    }
-  }
-
-  .resource-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    gap: 8px;
-    margin-bottom: 16px;
-  }
-
-  .resource-card {
-    background: ${(props) => props.theme.console.headerBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    padding: 8px;
-  }
-
-  .resource-header {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-bottom: 6px;
-    color: ${(props) => props.theme.console.titleColor};
-  }
-
-  .resource-title {
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
-  }
-
-  .resource-value {
-    font-size: 18px;
-    font-weight: 500;
-    color: ${(props) => props.theme.console.titleColor};
-    margin-bottom: 2px;
-  }
-
-  .resource-subtitle {
-    font-size: ${(props) => props.theme.font.size.xs};
-    color: ${(props) => props.theme.console.buttonColor};
-  }
-
-  .resource-trend {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: ${(props) => props.theme.font.size.xs};
-    margin-top: 8px;
-
-    &.up {
-      color: #10b981;
-    }
-
-    &.down {
-      color: #e81123;
-    }
-
-    &.stable {
-      color: ${(props) => props.theme.console.buttonColor};
-    }
-  }
-
-  .performance-header {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    padding: 12px 16px;
-    background: ${(props) => props.theme.console.headerBg};
-  }
-
-  .performance-selector-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .performance-selector-label {
-    font-size: 13px;
-    font-weight: 500;
-    color: ${(props) => props.theme.console.titleColor};
-    user-select: none;
-  }
-
-  .performance-selector {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .performance-select {
-    appearance: none;
-    background: ${(props) => props.theme.console.bg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    padding: 6px 32px 6px 12px;
-    font-size: 13px;
-    font-weight: 500;
-    color: ${(props) => props.theme.console.titleColor};
-    cursor: pointer;
-    outline: none;
-    transition: all 0.2s ease;
-    min-width: 250px;
-    max-width: 400px;
-
-    &:hover {
-      border-color: ${(props) => props.theme.colors.primary};
-    }
-
-    &:focus {
-      border-color: ${(props) => props.theme.colors.primary};
-      box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary}33;
-    }
-
-    option {
-      background: ${(props) => props.theme.console.bg};
-      color: ${(props) => props.theme.console.titleColor};
-      padding: 8px;
-    }
-  }
-
-  .performance-select-icon {
-    position: absolute;
-    right: 10px;
-    pointer-events: none;
-    color: ${(props) => props.theme.console.buttonColor};
-  }
-
-  .processes-table-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-
-    h2 {
-      margin: 0 0 16px 0;
-      font-size: 14px;
-      font-weight: 600;
-      color: ${(props) => props.theme.console.titleColor};
-      flex-shrink: 0;
-    }
-  }
-
-  .no-processes {
-    padding: 32px;
-    text-align: center;
-    color: ${(props) => props.theme.console.buttonColor};
-    font-size: 13px;
-  }
-
-  .processes-table-wrapper {
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-  }
-
-  .processes-table {
-    width: 100%;
-    border-collapse: collapse;
-    background: ${(props) => props.theme.console.headerBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    overflow: hidden;
-
-    thead {
-      background: ${(props) => props.theme.console.bg};
-      border-bottom: 1px solid ${(props) => props.theme.console.border};
-
-      th {
-        padding: 10px 12px;
-        text-align: left;
-        font-size: 12px;
-        font-weight: 600;
-        color: ${(props) => props.theme.console.titleColor};
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-
-        &:first-child {
-          padding-left: 16px;
-        }
-
-        &:last-child {
-          padding-right: 16px;
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        border-bottom: 1px solid ${(props) => props.theme.console.border};
-        transition: background 0.15s ease;
-
-        &:hover {
-          background: ${(props) => props.theme.console.bg};
-        }
-
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-
-      td {
-        padding: 10px 12px;
-        font-size: 13px;
-        color: ${(props) => props.theme.console.textColor};
-
-        &:first-child {
-          padding-left: 16px;
-        }
-
-        &:last-child {
-          padding-right: 16px;
-        }
-      }
-    }
-
-    .pid-cell {
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-      font-size: 12px;
-      color: ${(props) => props.theme.console.buttonColor};
-    }
-
-    .type-cell {
-      .process-type-badge {
-        display: inline-block;
-        padding: 2px 8px;
-        border-radius: 3px;
-        font-size: 11px;
-        font-weight: 500;
-        text-transform: lowercase;
-        background: ${(props) => props.theme.console.border};
-        color: ${(props) => props.theme.console.buttonColor};
-
-        &.Browser {
-          background: rgba(59, 130, 246, 0.2);
-          color: #3b82f6;
-        }
-
-        &.Renderer {
-          background: rgba(16, 185, 129, 0.2);
-          color: #10b981;
-        }
-
-        &.Utility {
-          background: rgba(139, 92, 246, 0.2);
-          color: #8b5cf6;
-        }
-
-        &.Zygote {
-          background: rgba(245, 158, 11, 0.2);
-          color: #f59e0b;
-        }
-
-        &.Sandbox {
-          background: rgba(239, 68, 68, 0.2);
-          color: #ef4444;
-        }
-      }
-    }
-
-    .title-cell {
-      max-width: 300px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .cpu-cell {
-      font-weight: 500;
-
-      .high-cpu {
-        color: #ef4444;
-      }
-
-      .medium-cpu {
-        color: #f59e0b;
-      }
-
-      .low-cpu {
-        color: ${(props) => props.theme.console.buttonColor};
-      }
-    }
-
-    .memory-cell {
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-      font-size: 12px;
-    }
-
-    .created-cell {
-      font-size: 12px;
-      color: ${(props) => props.theme.console.buttonColor};
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,236 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-import {
-  IconCpu,
-  IconDatabase,
-  IconClock,
-  IconServer,
-  IconChevronDown,
-  IconChartLine
-} from '@tabler/icons';
-
-const getProcessOptions = (processes) => {
-  return [
-    { value: 'cumulative', label: 'Cumulative (All Processes)' },
-    ...(processes ?? []).map((process) => ({
-      value: String(process.pid),
-      label: `PID ${process.pid}${process.title ? ` - ${process.title}` : ''}${process.type ? ` (${process.type})` : ''}`
-    }))
-  ];
-};
-
-const Performance = () => {
-  const { systemResources } = useSelector((state) => state.performance);
-  const [selectedPid, setSelectedPid] = useState('cumulative');
-
-  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'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  };
-
-  const formatUptime = (seconds) => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = Math.floor(seconds % 60);
-
-    if (hours > 0) return `${hours}h ${minutes}m ${secs}s`;
-    if (minutes > 0) return `${minutes}m ${secs}s`;
-    return `${secs}s`;
-  };
-
-  const SystemResourceCard = ({ icon: Icon, title, value, subtitle, color = 'default', trend }) => (
-    <div className={`resource-card ${color}`}>
-      <div className="resource-header">
-        <Icon size={20} strokeWidth={1.5} />
-        <span className="resource-title">{title}</span>
-      </div>
-      <div className="resource-value">{value}</div>
-      {subtitle && <div className="resource-subtitle">{subtitle}</div>}
-      {trend && (
-        <div className={`resource-trend ${trend > 0 ? 'up' : trend < 0 ? 'down' : 'stable'}`}>
-          <IconChartLine size={12} strokeWidth={1.5} />
-          <span>
-            {trend > 0 ? '+' : ''}
-            {trend.toFixed(1)}
-            %
-          </span>
-        </div>
-      )}
-    </div>
-  );
-
-  // Get process options for dropdown
-  const processOptions = useMemo(() => getProcessOptions(systemResources.processes), [systemResources.processes]);
-
-  // Get selected process data
-  const selectedProcess = useMemo(() => {
-    if (selectedPid === 'cumulative') {
-      return null; // Show cumulative view
-    }
-    const processes = systemResources.processes || [];
-    return processes.find((p) => String(p.pid) === selectedPid) || null;
-  }, [selectedPid, systemResources.processes]);
-
-  // Reset to cumulative if selected PID no longer exists
-  useEffect(() => {
-    if (selectedPid !== 'cumulative' && !selectedProcess) {
-      setSelectedPid('cumulative');
-    }
-  }, [selectedPid, selectedProcess]);
-
-  const renderCumulativeView = () => (
-    <div className="system-resources">
-      <h2>System Resources</h2>
-      <div className="resource-cards">
-        <SystemResourceCard
-          icon={IconCpu}
-          title="CPU Usage"
-          value={`${systemResources.cpu.toFixed(1)}%`}
-          subtitle="Total CPU usage"
-          color={systemResources.cpu > 80 ? 'danger' : systemResources.cpu > 60 ? 'warning' : 'success'}
-        />
-
-        <SystemResourceCard
-          icon={IconDatabase}
-          title="Memory Usage"
-          value={formatBytes(systemResources.memory)}
-          subtitle="Total memory usage"
-          color={systemResources.memory > (500 * 1024 * 1024) ? 'danger' : 'default'}
-        />
-
-        <SystemResourceCard
-          icon={IconClock}
-          title="Uptime"
-          value={formatUptime(systemResources.uptime)}
-          subtitle="Process runtime"
-          color="info"
-        />
-
-        <SystemResourceCard
-          icon={IconServer}
-          title="Process ID"
-          value={systemResources.pid || 'N/A'}
-          subtitle="Main process PID"
-          color="default"
-        />
-      </div>
-    </div>
-  );
-
-  const renderProcessView = (process) => {
-    if (!process) return null;
-
-    // Calculate uptime for individual process
-    const processUptime = process.creationTime
-      ? (new Date() - new Date(process.creationTime)) / 1000
-      : 0;
-
-    return (
-      <div className="system-resources">
-        <h2>System Resources</h2>
-        <div className="resource-cards">
-          <SystemResourceCard
-            icon={IconCpu}
-            title="CPU Usage"
-            value={`${process.cpu.toFixed(1)}%`}
-            subtitle="Current CPU usage"
-            color={process.cpu > 80 ? 'danger' : process.cpu > 60 ? 'warning' : 'success'}
-          />
-
-          <SystemResourceCard
-            icon={IconDatabase}
-            title="Memory Usage"
-            value={formatBytes(process.memory)}
-            subtitle="Current memory usage"
-            color={process.memory > (500 * 1024 * 1024) ? 'danger' : 'default'}
-          />
-
-          <SystemResourceCard
-            icon={IconClock}
-            title="Uptime"
-            value={formatUptime(processUptime)}
-            subtitle="Process runtime"
-            color="info"
-          />
-
-          <SystemResourceCard
-            icon={IconServer}
-            title="Process ID"
-            value={process.pid}
-            subtitle="Process PID"
-            color="default"
-          />
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="tab-content">
-        <div className="performance-header">
-          <div className="performance-selector-wrapper">
-            <label htmlFor="process-selector" className="performance-selector-label">
-              View:
-            </label>
-            <div className="performance-selector">
-              <select
-                id="process-selector"
-                value={selectedPid}
-                onChange={(e) => setSelectedPid(e.target.value)}
-                className="performance-select"
-              >
-                {processOptions.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-              <IconChevronDown size={16} className="performance-select-icon" />
-            </div>
-          </div>
-        </div>
-        <div className="tab-content-area">
-          {selectedPid === 'cumulative' ? renderCumulativeView() : renderProcessView(selectedProcess)}
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Performance;

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

@@ -18,11 +18,11 @@ const Devtools = ({ mainSectionRef }) => {
 
   const handleDevtoolsResize = useCallback((e) => {
     if (!isResizingDevtools || !mainSectionRef.current) return;
-
+    
     const windowHeight = window.innerHeight;
     const statusBarHeight = 22;
     const mouseY = e.clientY;
-
+    
     // Calculate new devtools height - expanding upward from bottom
     const newHeight = windowHeight - mouseY - statusBarHeight;
     const clampedHeight = Math.min(MAX_DEVTOOLS_HEIGHT, Math.max(MIN_DEVTOOLS_HEIGHT, newHeight));
@@ -43,7 +43,7 @@ const Devtools = ({ mainSectionRef }) => {
       document.addEventListener('mousemove', handleDevtoolsResize);
       document.addEventListener('mouseup', handleDevtoolsResizeEnd);
       document.body.style.userSelect = 'none';
-
+      
       return () => {
         document.removeEventListener('mousemove', handleDevtoolsResize);
         document.removeEventListener('mouseup', handleDevtoolsResizeEnd);
@@ -65,7 +65,7 @@ const Devtools = ({ mainSectionRef }) => {
 
   return (
     <>
-      <div
+      <div 
         onMouseDown={handleDevtoolsResizeStart}
         style={{
           height: '4px',
@@ -85,4 +85,4 @@ const Devtools = ({ mainSectionRef }) => {
   );
 };
 
-export default Devtools;
+export default Devtools; 

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

@@ -8,66 +8,44 @@ const Wrapper = styled.div`
   }
 
   .tippy-box {
-    min-width: 160px;
-    font-size: ${(props) => props.theme.font.size.base};
+    min-width: 135px;
+    font-size: 0.8125rem;
     color: ${(props) => props.theme.dropdown.color};
     background-color: ${(props) => props.theme.dropdown.bg};
-    box-shadow: ${(props) => props.theme.shadow.sm};
-    border-radius: ${(props) => props.theme.border.radius.base};
+    box-shadow: ${(props) => props.theme.dropdown.shadow};
+    border-radius: 3px;
     max-height: 90vh;
     overflow-y: auto;
     max-width: unset !important;
-    padding: 0.25rem;
 
     .tippy-content {
       padding-left: 0;
       padding-right: 0;
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
 
       .label-item {
         display: flex;
         align-items: center;
-        padding: 0.375rem 0.625rem 0.25rem 0.625rem;
-        font-size: 0.6875rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.025em;
-        color: ${(props) => props.theme.dropdown.color};
-        opacity: 0.6;
-        margin-top: 0.25rem;
-        
-        &:first-child {
-          margin-top: 0;
-        }
+        padding: 0.35rem 0.6rem;
+        background-color: ${(props) => props.theme.dropdown.labelBg};
       }
 
       .dropdown-item {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
-        padding: 0.275rem 0.625rem;
+        padding: 0.35rem 0.6rem;
         cursor: pointer;
-        border-radius: 6px;
-        margin: 0.0625rem 0;
-        font-size: 0.8125rem;
 
         &.active {
           color: ${(props) => props.theme.colors.text.yellow} !important;
-          .dropdown-icon {
+          .icon {
             color: ${(props) => props.theme.colors.text.yellow} !important;
           }
         }
 
-        .dropdown-icon {
-          flex-shrink: 0;
-          width: 16px;
-          height: 16px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
+        .icon {
           color: ${(props) => props.theme.dropdown.iconColor};
-          opacity: 0.8;
         }
 
         &:hover:not(:disabled) {
@@ -76,39 +54,13 @@ const Wrapper = styled.div`
 
         &:disabled {
           cursor: not-allowed;
-          opacity: 0.5;
-        }
-
-        &.delete-item {
-          color: ${(props) => props.theme.colors.text.danger};
-          .dropdown-icon {
-            color: ${(props) => props.theme.colors.text.danger};
-          }
-          &:hover {
-            background-color: ${({ theme }) => {
-              const hex = theme.colors.text.danger.replace('#', '');
-              const r = parseInt(hex.substring(0, 2), 16);
-              const g = parseInt(hex.substring(2, 4), 16);
-              const b = parseInt(hex.substring(4, 6), 16);
-              return `rgba(${r}, ${g}, ${b}, 0.04)`; // 4% opacity
-            }} !important;
-
-            color: ${(props) => props.theme.colors.text.danger} !important;
-          }
+          color: gray;
         }
 
         &.border-top {
           border-top: solid 1px ${(props) => props.theme.dropdown.separator};
-          margin-top: 0.25rem;
-          padding-top: 0.375rem;
         }
       }
-
-      .dropdown-separator {
-        height: 1px;
-        background-color: ${(props) => props.theme.dropdown.separator};
-        margin: 0.25rem 0;
-      }
     }
   }
 `;

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

@@ -2,12 +2,7 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';
 
-const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, ...props }) => {
-  // When in controlled mode (visible prop is provided), don't use trigger prop
-  const tippyProps = visible !== undefined
-    ? { ...props, visible, interactive: true, appendTo: 'parent' }
-    : { ...props, trigger: 'click', interactive: true, appendTo: 'parent' };
-
+const Dropdown = ({ icon, children, onCreate, placement, transparent, ...props }) => {
   return (
     <StyledWrapper className="dropdown" transparent={transparent}>
       <Tippy
@@ -16,7 +11,10 @@ const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, .
         animation={false}
         arrow={false}
         onCreate={onCreate}
-        {...tippyProps}
+        interactive={true}
+        trigger="click"
+        appendTo="parent"
+        {...props}
       >
         {icon}
       </Tippy>