chore: deps update - axios, jsonpath-plus, @aws-sdk/credential-providers, express

* Fix: Revert selective JSON parsing where string response is not parsed

- Revert "Merge pull request #3706 from Pragadesh-45/fix/response-format-updates"
  - e897dc1eb0
- Revert "Merge pull request #3676 from pooja-bruno/fix/string-json-response"
  - 1f2bee1f90

* Fix: Revert interpreting Assert RHS-value wrapped in quotes literally

- Revert "Merge pull request #3806 from Pragadesh-45/fix/handle-assert-results"
  - 63d3cb380d
- Revert "Merge pull request #3805 from Pragadesh-45/fix/handle-assert-results"
  - 6abd063749

* Fix: Inconsistent JSON formatting in preview when encoded value is a string

* Fix: Prettify JSON for Res-preview without parsing to avoid JS specific roundings

* Fix(testbench): req.body is always Buffer after the binary req body related changes

* Added `/api/echo/custom` where response can be configured using request itself

* Added tests for validating Assert and Response-preview

Co-authored-by: Pragadesh-45 <temporaryg7904@gmail.com>

* Handle char-encoding in Response-preview and added more tests

* Updated API endpoint in tests to use httpfaker api

* QuickJS (Safe Mode) exec logic to handle template literals similar to Developer Mode

* Safe Mode bru.runRequest to return statusText similar to Developer Mode

---------

Co-authored-by: ramki-bruno <ramki@usebruno.com>
Co-authored-by: Anoop M D <anoop.md1421@gmail.com>

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -6,26 +6,58 @@ body:
     attributes:
       value: |
         Thanks for taking the time to fill out this bug report!
+
+        Before submitting, please make sure you've searched existing issues:
+        👉 [Search existing issues](https://github.com/usebruno/bruno/issues?q=is%3Aissue)
+
   - type: checkboxes
     attributes:
       label: 'I have checked the following:'
       options:
-        - label: I use the newest version of bruno.
-          required: true
-        - label: I've searched existing issues and found nothing related to my issue.
+        - label: "I have searched existing issues and found nothing related to my issue."
           required: true
+
+  - type: checkboxes
+    attributes:
+      label: 'This bug is:'
+      options:
+        - label: making Bruno unusable for me
+          required: false
+        - label: slowing me down but I'm able to continue working
+          required: false
+        - label: annoying
+          required: false
+          
+  - type: input
+    attributes:
+      label: Bruno version
+      description: Please specify the version of Bruno you are using in which the issue occurs.
+      placeholder: 1.38.1
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: Operating System
+      description: Information about the operating system the issue occurs on.
+      placeholder: Windows 11 26100.3037 / macOS 15.1 (24B83) / Linux 6.13.1
+    validations:
+      required: true
+
   - type: textarea
     attributes:
       label: Describe the bug
-      description: A clear and concise description of the bug.
+      description: A clear and concise description of the bug and how it's effecting your work along with steps to reproduce. 
     validations:
       required: true
+
   - type: textarea
     attributes:
       label: .bru file to reproduce the bug
-      description: Attach your .bru file here that can reqroduce the problem.
+      description: Attach your .bru file here that can reproduce the problem.
     validations:
       required: false
+
   - type: textarea
     attributes:
       label: Screenshots/Live demo link

.github/ISSUE_TEMPLATE/FeatureRequest.yaml

@@ -8,13 +8,23 @@ body:
       options:
         - label: I've searched existing issues and found nothing related to my issue.
           required: true
+  - type: checkboxes
+    attributes:
+      label: 'This feature'
+      options:
+        - label: blocks me from using Bruno 
+          required: false
+        - label: would improve my quality of life in Bruno 
+          required: false
+        - label: is something I've never seen an API client do before
+          required: false
   - type: markdown
     attributes:
       value: |
         Suggest an idea for this project.
   - type: textarea
     attributes:
-      label: Describe the feature you want to add
+      label: Describe the feature you want to add, and how it would change your usage of Bruno 
       description: A clear and concise description of the feature you want to be added.
     validations:
       required: true
@@ -23,4 +33,4 @@ body:
       label: Mockups or Images of the feature
       description: Add some images to support your feature.
     validations:
-      required: true
+      required: false

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

@@ -20,7 +20,10 @@ permissions:
 jobs:
   test:
     name: CLI Tests
-    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest]
+    runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3

.github/workflows/tests.yml

@@ -10,6 +10,8 @@ jobs:
     name: Unit Tests
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -49,6 +51,10 @@ jobs:
   cli-test:
     name: CLI Tests
     runs-on: ubuntu-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

.nvmrc

@@ -1 +1 @@
-v20.9.0
+v22.11.0

contributing.md

@@ -15,6 +15,7 @@
 | [正體中文](docs/contributing/contributing_zhtw.md)
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
+| [Nederlands](docs/contributing/contributing_nl.md)
 
 ## Let's make Bruno better, together!!
 
@@ -47,7 +48,7 @@ Bruno is being developed as a desktop app. You need to load the app by running t
 ### Local Development
 
 ```bash
-# use nodejs 18 version
+# use nodejs 20 version
 nvm use
 
 # install deps

docs/contributing/contributing_bn.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| **বাংলা**
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## আসুন ব্রুনোকে আরও ভালো করি, একসাথে!!
 

docs/contributing/contributing_cn.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| **简体中文**
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## 让我们一起改进 Bruno！
 

docs/contributing/contributing_de.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| **Deutsch**
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Lass uns Bruno noch besser machen, gemeinsam!!
 

docs/contributing/contributing_es.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| **Español**
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## ¡Juntos, hagamos a Bruno mejor!
 

docs/contributing/contributing_fr.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| **Français**
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Ensemble, améliorons Bruno !
 

docs/contributing/contributing_hi.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| **हिंदी**
 
 ## आइए मिलकर Bruno को बेहतर बनाएं !!
 

docs/contributing/contributing_it.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| **Italiano**
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Insieme, miglioriamo Bruno!
 

docs/contributing/contributing_ja.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| **日本語**
-| [हिंदी](./contributing_hi.md)
 
 ## 一緒に Bruno をよりよいものにしていきましょう！！
 

docs/contributing/contributing_kr.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| **한국어**
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## 함께 Bruno를 더 좋게 만들어요!!
 

docs/contributing/contributing_nl.md

@@ -0,0 +1,82 @@
+[English](../../contributing.md)
+
+## Laten we Bruno samen beter maken !!
+
+We zijn blij dat je Bruno wilt verbeteren. Hieronder staan de richtlijnen om Bruno op je computer op te zetten.
+
+### Technologiestack
+
+Bruno is gebouwd met Next.js en React. We gebruiken ook Electron om een desktopversie te leveren (die lokale collecties ondersteunt).
+
+Bibliotheken die we gebruiken:
+
+- CSS - Tailwind
+- Code Editors - Codemirror
+- State Management - Redux
+- Iconen - Tabler Icons
+- Formulieren - formik
+- Schema Validatie - Yup
+- Request Client - axios
+- Bestandsysteem Watcher - chokidar
+
+### Afhankelijkheden
+
+Je hebt [Node v18.x of de nieuwste LTS-versie](https://nodejs.org/en/) en npm 8.x nodig. We gebruiken npm workspaces in het project.
+
+## Ontwikkeling
+
+Bruno wordt ontwikkeld als een desktop-app. Je moet de app laden door de Next.js app in één terminal te draaien en daarna de Electron app in een andere terminal te draaien.
+
+### Lokale Ontwikkeling
+
+```bash
+# gebruik voorgeschreven node versie
+nvm use
+
+# installeer afhankelijkheden
+npm i --legacy-peer-deps
+
+# build pakketten
+npm run build:graphql-docs
+npm run build:bruno-query
+npm run build:bruno-common
+
+# draai next app (terminal 1)
+npm run dev:web
+
+# draai electron app (terminal 2)
+npm run dev:electron
+```
+
+### Problemen oplossen
+
+Je kunt een `Unsupported platform`-fout tegenkomen wanneer je `npm install` uitvoert. Om dit te verhelpen, moet je `node_modules` en `package-lock.json` verwijderen en `npm install` uitvoeren. Dit zou alle benodigde afhankelijkheden moeten installeren om de app te draaien.
+
+```shell
+# Verwijder node_modules in subdirectories
+find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
+  rm -rf "$dir"
+done
+
+# Verwijder package-lock in subdirectories
+find . -type f -name "package-lock.json" -delete
+```
+
+### Testen
+
+```bash
+# bruno-schema
+npm test --workspace=packages/bruno-schema
+
+# bruno-lang
+npm test --workspace=packages/bruno-lang
+```
+
+### Pull Requests indienen
+
+- Houd de PR's klein en gefocust op één ding
+- Volg het formaat voor het aanmaken van branches
+  - feature/[feature naam]: Deze branch moet wijzigingen voor een specifieke functie bevatten
+    - Voorbeeld: feature/dark-mode
+  - bugfix/[bug naam]: Deze branch moet alleen bugfixes voor een specifieke bug bevatten
+    - Voorbeeld: bugfix/bug-1

docs/contributing/contributing_pl.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| **Polski**
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Wspólnie uczynijmy Bruno lepszym !!
 

docs/contributing/contributing_pt_br.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| **Português (BR)**
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Vamos tornar o Bruno melhor, juntos!!
 

docs/contributing/contributing_ro.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| **Română**
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Haideţi să îmbunătățim Bruno, împreună!!
 

docs/contributing/contributing_ru.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| **Русский**
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Давайте вместе сделаем Бруно лучше!!!
 

docs/contributing/contributing_tr.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| **Türkçe**
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Bruno'yu birlikte daha iyi hale getirelim!!!
 

docs/contributing/contributing_ua.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| **Українська**
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| [正體中文](./contributing_zhtw.md)
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## Давайте зробимо Bruno краще, разом !!
 

docs/contributing/contributing_zhtw.md

@@ -1,20 +1,4 @@
 [English](../../contributing.md)
-| [Українська](./contributing_ua.md)
-| [Русский](./contributing_ru.md)
-| [Türkçe](./contributing_tr.md)
-| [Deutsch](./contributing_de.md)
-| [Français](./contributing_fr.md)
-| [Português (BR)](./contributing_pt_br.md)
-| [한국어](./contributing_kr.md)
-| [বাংলা](./contributing_bn.md)
-| [Español](./contributing_es.md)
-| [Italiano](./contributing_it.md)
-| [Română](./contributing_ro.md)
-| [Polski](./contributing_pl.md)
-| [简体中文](./contributing_cn.md)
-| **正體中文**
-| [日本語](./contributing_ja.md)
-| [हिंदी](./contributing_hi.md)
 
 ## 讓我們一起來讓 Bruno 變得更好！
 

docs/publishing/publishin_nl.md

@@ -0,0 +1,7 @@
+[English](../../publishing.md)
+
+### Bruno publiceren naar een nieuwe pakketbeheerder
+
+Hoewel onze code open source is en beschikbaar voor iedereen, verzoeken we je vriendelijk om contact met ons op te nemen voordat je publicatie overweegt op nieuwe pakketbeheerders. Als de maker van Bruno houd ik het handelsmerk `Bruno` voor dit project en wil ik het distributieproces beheren. Als je Bruno op een nieuwe pakketbeheerder wilt zien, dien dan een GitHub-issue in.
+
+Hoewel de meerderheid van onze functies gratis en open source zijn (die REST en GraphQL API's dekken), streven we ernaar een harmonieuze balans te vinden tussen open-source principes en duurzaamheid - https://github.com/usebruno/bruno/discussions/269

docs/publishing/publishing_bn.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| [Deutsch](./publishing_de.md)
-| [Français](./publishing_fr.md)
-| [Português (BR)](./publishing_pt_br.md)
-| **বাংলা**
-| [Română](./publishing_ro.md)
-| [Polski](./publishing_pl.md)
-| [简体中文](./publishing_cn.md)
-| [正體中文](./publishing_zhtw.md)
-| [日本語](./publishing_ja.md)
 
 ### ব্রুনোকে নতুন প্যাকেজ ম্যানেজারে প্রকাশ করা
 

docs/publishing/publishing_cn.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| [Deutsch](./publishing_de.md)
-| [Français](./publishing_fr.md)
-| [Português (BR)](./publishing_pt_br.md)
-| [বাংলা](./publishing_bn.md)
-| [Română](./publishing_ro.md)
-| [Polski](./publishing_pl.md)
-| **简体中文**
-| [正體中文](./publishing_zhtw.md)
-| [日本語](./publishing_ja.md)
 
 ### 将 Bruno 发布到新的包管理器
 

docs/publishing/publishing_de.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| **Deutsch**
-| [Français](./publishing_fr.md)
-| [Português (BR)](./publishing_pt_br.md)
-| [বাংলা](./publishing_bn.md)
-| [Română](./publishing_ro.md)
-| [Polski](./publishing_pl.md)
-| [简体中文](./publishing_cn.md)
-| [正體中文](./publishing_zhtw.md)
-| [日本語](./publishing_ja.md)
 
 ### Veröffentlichung von Bruno über neue Paket-Manager
 

docs/publishing/publishing_fr.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| [Deutsch](./publishing_de.md)
-| **Français**
-| [Português (BR)](./publishing_pt_br.md)
-| [বাংলা](./publishing_bn.md)
-| [Română](./publishing_ro.md)
-| [Polski](./publishing_pl.md)
-| [简体中文](./publishing_cn.md)
-| [正體中文](./publishing_zhtw.md)
-| [日本語](./publishing_ja.md)
 
 ### Publier Bruno dans un nouveau gestionnaire de paquets
 

docs/publishing/publishing_ja.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| [Deutsch](./publishing_de.md)
-| [Français](./publishing_fr.md)
-| [Português (BR)](./publishing_pt_br.md)
-| [বাংলা](./publishing_bn.md)
-| [Română](./publishing_ro.md)
-| [Polski](./publishing_pl.md)
-| [简体中文](./publishing_cn.md)
-| [正體中文](./publishing_zhtw.md)
-| **日本語**
 
 ### Bruno を新しいパッケージマネージャに公開する場合の注意
 

docs/publishing/publishing_pl.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| [Deutsch](./publishing_de.md)
-| [Français](./publishing_fr.md)
-| [Português (BR)](./publishing_pt_br.md)
-| [বাংলা](./publishing_bn.md)
-| [Română](./publishing_ro.md)
-| **Polski**
-| [简体中文](./publishing_cn.md)
-| [正體中文](./publishing_zhtw.md)
-| [日本語](./publishing_ja.md)
 
 ### Publikowanie Bruno w nowym menedżerze pakietów
 

docs/publishing/publishing_pt_br.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| [Deutsch](./publishing_de.md)
-| [Français](./publishing_fr.md)
-| **Português (BR)**
-| [বাংলা](./publishing_bn.md)
-| [Română](./publishing_ro.md)
-| [Polski](./publishing_pl.md)
-| [简体中文](./publishing_cn.md)
-| [正體中文](./publishing_zhtw.md)
-| [日本語](./publishing_ja.md)
 
 ### Publicando Bruno em um novo gerenciador de pacotes
 

docs/publishing/publishing_ro.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| [Deutsch](./publishing_de.md)
-| [Français](./publishing_fr.md)
-| [Português (BR)](./publishing_pt_br.md)
-| [বাংলা](./publishing_bn.md)
-| **Română**
-| [Polski](./publishing_pl.md)
-| [简体中文](./publishing_cn.md)
-| [正體中文](./publishing_zhtw.md)
-| [日本語](./publishing_ja.md)
 
 ### Publicarea lui Bruno la un gestionar de pachete nou
 

docs/publishing/publishing_tr.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| **Türkçe**
-| [Deutsch](./publishing_de.md)
-| [Français](./publishing_fr.md)
-| [Português (BR)](./publishing_pt_br.md)
-| [বাংলা](./publishing_bn.md)
-| [Română](./publishing_ro.md)
-| [Polski](./publishing_pl.md)
-| [简体中文](./publishing_cn.md)
-| [正體中文](./publishing_zhtw.md)
-| [日本語](./publishing_ja.md)
 
 ### Bruno'yu yeni bir paket yöneticisine yayınlama
 

docs/publishing/publishing_zhtw.md

@@ -1,14 +1,4 @@
 [English](../../publishing.md)
-| [Türkçe](./publishing_tr.md)
-| [Deutsch](./publishing_de.md)
-| [Français](./publishing_fr.md)
-| [Português (BR)](./publishing_pt_br.md)
-| [বাংলা](./publishing_bn.md)
-| [Română](./publishing_ro.md)
-| [Polski](./publishing_pl.md)
-| [简体中文](./publishing_cn.md)
-| **正體中文**
-| [日本語](./publishing_ja.md)
 
 ### 將 Bruno 發佈到新的套件管理器
 

docs/readme/readme_de.md

@@ -39,7 +39,7 @@ Bruno ist ein reines Offline-Tool. Es gibt keine Pläne, Bruno um eine Cloud-Syn
 
 [Download Bruno](https://www.usebruno.com/downloads)
 
-📢 Sehen Sie sich unseren Vortrag auf der India FOSS 3.0 Conference [hier](https://www.youtube.com/watch?v=7bSMFpbcPiY) an.
+📢 Sieh Dir unseren Vortrag auf der India FOSS 3.0 Conference [hier](https://www.youtube.com/watch?v=7bSMFpbcPiY) an.
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
@@ -48,13 +48,13 @@ Bruno ist ein reines Offline-Tool. Es gibt keine Pläne, Bruno um eine Cloud-Syn
 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)
 
-Sie können die [Golden Edition](https://www.usebruno.com/pricing) vorbestellen ~~$19~~ **$9** ! <br/>
+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.
 
-Sie können Bruno auch über Paketmanager wie Homebrew, Chocolatey, Scoop, Snap, Flatpak und Apt installieren.
+Du kannst Bruno auch über Paketmanager wie Homebrew, Chocolatey, Scoop, Snap, Flatpak und Apt installieren.
 
 ```sh
 # Auf Mac via Homebrew
@@ -123,11 +123,11 @@ Oder einer Versionskontrolle deiner Wahl
 
 ### Unterstützung ❤️
 
-Wuff! Wenn du dieses Projekt magst, klick den ⭐ Button !!
+Wuff! Wenn du dieses Projekt magst, klick auf den ⭐ Button !!
 
 ### Teile Erfahrungsberichte 📣
 
-Wenn Bruno dir und in deinen Teams bei der Arbeit geholfen hat, vergiss bitte nicht, deine [Erfahrungsberichte auf unserer GitHub-Diskussion](https://github.com/usebruno/bruno/discussions/343) zu teilen.
+Wenn Bruno dir und in deinem Team bei der Arbeit geholfen hat, vergiss bitte nicht, deine [Erfahrungsberichte in unserer GitHub-Diskussion](https://github.com/usebruno/bruno/discussions/343) zu teilen.
 
 ### Bereitstellung in neuen Paket-Managern
 

docs/readme/readme_nl.md

@@ -0,0 +1,157 @@
+<br />
+<img src="../../assets/images/logo-transparent.png" width="80"/>
+
+### Bruno - Open source IDE voor het verkennen en testen van API's.
+
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![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) | [Українська](docs/readme/readme_ua.md) | [Русский](docs/readme/readme_ru.md) | [Türkçe](docs/readme/readme_tr.md) | [Deutsch](docs/readme/readme_de.md) | ** Nederlands ** | [Français](docs/readme/readme_fr.md) | [Português (BR)](docs/readme/readme_pt_br.md) | [한국어](docs/readme/readme_kr.md) | [বাংলা](docs/readme/readme_bn.md) | [Español](docs/readme/readme_es.md) | [Italiano](docs/readme/readme_it.md) | [Română](docs/readme/readme_ro.md) | [Polski](docs/readme/readme_pl.md) | [简体中文](docs/readme/readme_cn.md) | [正體中文](docs/readme/readme_zhtw.md) | [العربية](docs/readme/readme_ar.md) | [日本語](docs/readme/readme_ja.md)
+
+Bruno is een nieuwe en innovatieve API-client, gericht op het revolutioneren van de status quo die wordt vertegenwoordigd door Postman en vergelijkbare tools.
+
+Bruno slaat je collecties direct op in een map op je bestandssysteem. We gebruiken een platte tekst opmaaktaal, Bru, om informatie over API-verzoeken op te slaan.
+
+Je kunt Git of elke versiebeheertool naar keuze gebruiken om samen te werken aan je API-collecties.
+
+Bruno is uitsluitend offline. Er zijn geen plannen om ooit cloud-synchronisatie aan Bruno toe te voegen. We waarderen je gegevensprivacy en geloven dat deze op je apparaat moet blijven. Lees onze langetermijnvisie [hier](https://github.com/usebruno/bruno/discussions/269)
+
+[Download Bruno](https://www.usebruno.com/downloads)
+
+📢 Bekijk onze recente presentatie op de India FOSS 3.0 Conference [hier](https://www.youtube.com/watch?v=7bSMFpbcPiY)
+
+![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.
+
+Je kunt Bruno ook installeren via pakketbeheerders zoals Homebrew, Chocolatey, Scoop, Snap, Flatpak en Apt.
+
+```sh
+# Op Mac via Homebrew
+brew install bruno
+
+# Op Windows via Chocolatey
+choco install bruno
+
+# Op Windows via Scoop
+scoop bucket add extras
+scoop install bruno
+
+# Op Windows via winget
+winget install Bruno.Bruno
+
+# Op Linux via Snap
+snap install bruno
+
+# Op Linux via Flatpak
+flatpak install com.usebruno.Bruno
+
+# Op Linux via Apt
+sudo mkdir -p /etc/apt/keyrings
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+
+echo "deb [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
+```
+
+### Draai op meerdere platformen 🖥️
+
+![bruno](/assets/images/run-anywhere.png) <br /><br />
+
+### Samenwerken via Git 👩‍💻🧑‍💻
+
+Of elk versiebeheersysteem naar keuze
+
+![bruno](/assets/images/version-control.png) <br /><br />
+
+### Sponsors
+
+#### Gouden Sponsors
+
+<img src="../../assets/images/sponsors/samagata.png" width="150"/>
+
+#### Zilveren Sponsors
+
+<img src="../../assets/images/sponsors/commit-company.png" width="70"/>
+
+#### Bronzen Sponsors
+
+<a href="https://zuplo.link/bruno">
+    <img src="../../assets/images/sponsors/zuplo.png" width="120"/>
+</a>
+
+### Belangrijke Links 📌
+
+- [Onze Langetermijnvisie](https://github.com/usebruno/bruno/discussions/269)
+- [Roadmap](https://github.com/usebruno/bruno/discussions/384)
+- [Documentatie](https://docs.usebruno.com)
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/bruno)
+- [Website](https://www.usebruno.com)
+- [Prijzen](https://www.usebruno.com/pricing)
+- [Download](https://www.usebruno.com/downloads)
+- [GitHub Sponsors](https://github.com/sponsors/helloanoop)
+
+### Showcase 🎥
+
+- [Getuigenissen](https://github.com/usebruno/bruno/discussions/343)
+- [Kenniscentrum](https://github.com/usebruno/bruno/discussions/386)
+- [Scriptmania](https://github.com/usebruno/bruno/discussions/385)
+
+### Ondersteuning ❤️
+
+Als je Bruno leuk vindt en ons open-source werk wilt ondersteunen, overweeg dan om ons te sponsoren via [GitHub Sponsors](https://github.com/sponsors/helloanoop).
+
+### Deel Getuigenissen 📣
+
+Als Bruno je heeft geholpen op je werk en in je teams, deel dan je [getuigenissen op onze GitHub-discussie](https://github.com/usebruno/bruno/discussions/343).
+
+
+### Blijf in contact 🌐
+
+[𝕏 (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)
+
+### Handelsmerk
+
+**Naam**
+
+`Bruno` is een handelsmerk in bezit van [Anoop M D](https://www.helloanoop.com/).
+
+**Logo**
+
+Het logo is afkomstig van [OpenMoji](https://openmoji.org/library/emoji-1F436/). Licentie: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
+
+### Bijdragen 👩‍💻🧑‍💻
+
+Ik ben blij dat je Bruno wilt verbeteren. Bekijk de [bijdragegids](contributing.md).
+
+Zelfs als je geen bijdragen via code kunt leveren, aarzel dan niet om bugs en functieverzoeken in te dienen die moeten worden geïmplementeerd om jouw gebruiksscenario op te lossen.
+
+### Auteurs
+
+<div align="center">
+    <a href="https://github.com/usebruno/bruno/graphs/contributors">
+        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
+    </a>
+</div>
+
+### Licentie 📄
+
+[MIT](../../license.md)

package.json

@@ -30,11 +30,13 @@
     "ts-jest": "^29.0.5"
   },
   "scripts": {
+    "setup": "node ./scripts/setup.js",
     "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
     "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
+    "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
     "build:bruno-common": "npm run build --workspace=packages/bruno-common",
     "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
@@ -51,10 +53,6 @@
     "prepare": "husky install"
   },
   "overrides": {
-    "rollup":"3.29.4"
-  },
-  "dependencies": {
-    "json-bigint": "^1.0.0",
-    "lossless-json": "^4.0.1"
+    "rollup": "3.29.5"
   }
 }

packages/bruno-app/.babelrc

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

packages/bruno-app/.gitignore

@@ -31,4 +31,6 @@ yarn-error.log*
 
 # next.js
 .next/
-out/
+dist/
+
+.env

packages/bruno-app/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  rootDir: '.',
+  moduleNameMapper: {
+    '^assets/(.*)$': '<rootDir>/src/assets/$1',
+    '^components/(.*)$': '<rootDir>/src/components/$1',
+    '^hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^themes/(.*)$': '<rootDir>/src/themes/$1',
+    '^api/(.*)$': '<rootDir>/src/api/$1',
+    '^pageComponents/(.*)$': '<rootDir>/src/pageComponents/$1',
+    '^providers/(.*)$': '<rootDir>/src/providers/$1',
+    '^utils/(.*)$': '<rootDir>/src/utils/$1'
+  },
+  clearMocks: true,
+  moduleDirectories: ['node_modules', 'src'],
+  testEnvironment: 'node'
+};

packages/bruno-app/next.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  reactStrictMode: false,
-  publicRuntimeConfig: {
-    CI: process.env.CI,
-    PLAYWRIGHT: process.env.PLAYWRIGHT,
-    ENV: process.env.ENV
-  },
-  webpack: (config, { isServer }) => {
-    // Fixes npm packages that depend on `fs` module
-    if (!isServer) {
-      config.resolve.fallback.fs = false;
-    }
-    return config;
-  },
-};

packages/bruno-app/package.json

@@ -1,78 +1,78 @@
 {
   "name": "@usebruno/app",
-  "version": "0.3.0",
+  "version": "1.39.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env ENV=dev next dev -p 3000",
-    "build": "next build && next export",
-    "start": "next start",
-    "lint": "next lint",
+    "dev": "rsbuild dev",
+    "build": "rsbuild build -m production",
+    "preview": "rsbuild preview",
     "test": "jest",
     "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
+    "@babel/preset-env": "^7.26.0",
     "@fontsource/inter": "^5.0.15",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@prantlf/jsonlint": "^16.0.0",
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
     "@usebruno/schema": "0.7.0",
-    "axios": "^1.5.1",
     "classnames": "^2.3.1",
     "codemirror": "5.65.2",
-    "codemirror-graphql": "1.2.5",
-    "cookie": "^0.6.0",
+    "codemirror-graphql": "2.1.1",
+    "cookie": "0.7.1",
+    "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
     "file": "^0.2.2",
     "file-dialog": "^0.0.8",
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "github-markdown-css": "^5.2.0",
-    "graphiql": "^1.5.9",
+    "graphiql": "3.7.1",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
-    "httpsnippet": "^3.0.6",
-    "i18next": "^23.14.0",
+    "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",
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
-    "jsonlint": "^1.6.3",
-    "jsonpath-plus": "^7.2.0",
+    "jsonpath-plus": "^10.3.0",
     "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.47",
     "mousetrap": "^1.6.5",
-    "nanoid": "3.3.4",
-    "next": "12.3.3",
+    "nanoid": "3.3.8",
     "path": "^0.12.7",
-    "pdfjs-dist": "^3.11.174",
+    "pdfjs-dist": "4.4.168",
     "platform": "^1.3.6",
-    "posthog-node": "^2.1.0",
+    "posthog-node": "4.2.1",
     "prettier": "^2.7.1",
     "qs": "^6.11.0",
     "query-string": "^7.0.1",
-    "react": "18.2.0",
+    "react": "19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "18.2.0",
-    "react-github-btn": "^1.4.0",
+    "react-dom": "19.0.0",
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",
-    "react-pdf": "^7.5.1",
-    "react-redux": "^7.2.6",
+    "react-pdf": "9.1.1",
+    "react-player": "^2.16.0",
+    "react-redux": "^7.2.9",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
+    "semver": "^7.7.1",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "system": "^2.0.1",
@@ -82,20 +82,21 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/plugin-transform-spread": "^7.16.7",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/runtime": "^7.16.3",
-    "autoprefixer": "^10.4.17",
-    "babel-loader": "^8.2.3",
+    "@rsbuild/core": "^1.1.2",
+    "@rsbuild/plugin-babel": "^1.0.3",
+    "@rsbuild/plugin-node-polyfill": "^1.2.0",
+    "@rsbuild/plugin-react": "^1.0.7",
+    "@rsbuild/plugin-sass": "^1.1.0",
+    "@rsbuild/plugin-styled-components": "1.1.0",
+    "autoprefixer": "10.4.20",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
+    "css-loader": "7.1.2",
     "file-loader": "^6.2.0",
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.35",
+    "postcss": "8.4.47",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",

packages/bruno-app/rsbuild.config.mjs

@@ -0,0 +1,39 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill'
+
+export default defineConfig({
+  plugins: [
+    pluginNodePolyfill(),
+    pluginReact(),
+    pluginStyledComponents(),
+    pluginSass(),
+    pluginBabel({
+      include: /\.(?:js|jsx|tsx)$/,
+      babelLoaderOptions(opts) {
+        opts.plugins?.unshift('babel-plugin-react-compiler');
+      }
+    })
+  ],
+  source: {
+    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file
+  },
+  html: {
+    title: 'Bruno'
+  },
+  tools: {
+    rspack: {
+      module: {
+        parser: {
+          javascript: {
+            // This loads the JavaScript contents from a library along with the main JavaScript bundle.
+            dynamicImportMode: "eager",
+          },
+        },
+      },
+    },
+  }
+});

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

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useState } from 'react';
+import { IconChevronDown } from '@tabler/icons';
+import { AccordionItem, AccordionHeader, AccordionContent } from './styledWrapper';
+
+const AccordionContext = createContext();
+
+const Accordion = ({ children, defaultIndex }) => {
+  const [openIndex, setOpenIndex] = useState(defaultIndex);
+
+  const toggleItem = (index) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <AccordionContext.Provider value={{ openIndex, toggleItem }}>
+      <div>{children}</div>
+    </AccordionContext.Provider>
+  );
+};
+
+const Item = ({ index, children, ...props }) => {
+  return (
+    <AccordionItem {...props}>
+      {React.Children.map(children, (child) => React.cloneElement(child, { index }))}
+    </AccordionItem>
+  );
+};
+
+export const Header = ({ index, children, ...props }) => {
+  const { openIndex, toggleItem } = useContext(AccordionContext);
+  const isOpen = openIndex === index;
+
+  return (
+    <AccordionHeader onClick={() => toggleItem(index)} {...props} className={isOpen ? 'open' : ''}>
+      <div className="w-full">{children}</div>
+
+      <IconChevronDown
+        className="w-5 h-5 ml-auto"
+        style={{
+          transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
+          transition: 'transform 0.3s ease-in-out'
+        }}
+      />
+    </AccordionHeader>
+  );
+};
+
+const Content = ({ index, children, ...props }) => {
+  const { openIndex } = useContext(AccordionContext);
+  const isOpen = openIndex === index;
+
+  return (
+    <AccordionContent isOpen={isOpen} {...props}>
+      {children}
+    </AccordionContent>
+  );
+};
+
+Accordion.Item = Item;
+Accordion.Header = Header;
+Accordion.Content = Content;
+export default Accordion;

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const AccordionItem = styled.div`
+  border: 1px solid ${(props) => props.theme.input.border};
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+`;
+
+const AccordionHeader = styled.button`
+  width: 100%;
+  display: flex;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  cursor: pointer;
+  font-weight: 500;
+
+  &.open, &:hover {
+    background-color: ${(props) => props.theme.plainGrid.hoverBg};
+  }
+`;
+
+const AccordionContent = styled.div`
+  padding: ${(props) => (props.isOpen ? '1rem' : '0')};
+  max-height: ${(props) => (props.isOpen ? 'auto' : '0')};
+`;
+
+export { AccordionItem, AccordionHeader, AccordionContent };

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

@@ -5,8 +5,20 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
     font-family: ${(props) => (props.font ? props.font : 'default')};
+    font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
     line-break: anywhere;
     flex: 1 1 0;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  /* Removes the glow outline around the folded json */
+  .CodeMirror-foldmarker {
+    text-shadow: none;
+    color: ${(props) => props.theme.textLink};
+    background: none;
+    padding: 0;
+    margin: 0;
   }
 
   .CodeMirror-overlayscroll-horizontal div,
@@ -16,6 +28,16 @@ const StyledWrapper = styled.div`
 
   .CodeMirror-dialog {
     overflow: visible;
+    position: relative;
+    top: unset;
+    left: unset;
+
+    input {
+      background: transparent;
+      border: 1px solid #d3d6db;
+      outline: none;
+      border-radius: 0px;
+    }
   }
 
   #search-results-count {
@@ -68,6 +90,18 @@ const StyledWrapper = styled.div`
   .cm-variable-invalid {
     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;
+  }
 `;
 
 export default StyledWrapper;

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

@@ -6,16 +6,16 @@
  */
 
 import React from 'react';
-import isEqual from 'lodash/isEqual';
-import { getEnvironmentVariables } from 'utils/collections';
+import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import StyledWrapper from './StyledWrapper';
-import jsonlint from 'jsonlint';
+import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
+import { getAllVariables } from 'utils/collections';
 
 let CodeMirror;
-const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 const TAB_SIZE = 2;
 
 if (!SERVER_RENDERED) {
@@ -55,20 +55,35 @@ if (!SERVER_RENDERED) {
     'req.setMaxRedirects(maxRedirects)',
     'req.getTimeout()',
     'req.setTimeout(timeout)',
+    'req.getExecutionMode()',
     'bru',
     'bru.cwd()',
-    'bru.getEnvName(key)',
+    'bru.getEnvName()',
     'bru.getProcessEnv(key)',
     'bru.hasEnvVar(key)',
     'bru.getEnvVar(key)',
+    'bru.getFolderVar(key)',
+    'bru.getCollectionVar(key)',
     'bru.setEnvVar(key,value)',
+    'bru.deleteEnvVar(key)',
     'bru.hasVar(key)',
     'bru.getVar(key)',
     'bru.setVar(key,value)',
     'bru.deleteVar(key)',
+    'bru.deleteAllVars()',
     'bru.setNextRequest(requestName)',
+    'req.disableParsingResponseJson()',
     'bru.getRequestVar(key)',
-    'bru.sleep(ms)'
+    'bru.runRequest(requestPathName)',
+    'bru.getAssertionResults()',
+    'bru.getTestResults()',
+    'bru.sleep(ms)',
+    'bru.getGlobalEnvVar(key)',
+    'bru.setGlobalEnvVar(key, value)',
+    'bru.runner',
+    'bru.runner.setNextRequest(requestName)',
+    'bru.runner.skipRequest()',
+    'bru.runner.stopExecution()'
   ];
   CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
     const cursor = editor.getCursor();
@@ -90,7 +105,7 @@ if (!SERVER_RENDERED) {
     if (curWordBru) {
       hintWords.forEach((h) => {
         if (h.includes('.') == curWordBru.includes('.') && h.startsWith(curWordBru)) {
-          result.list.push(curWordBru.includes('.') ? h.split('.')[1] : h);
+          result.list.push(curWordBru.includes('.') ? h.split('.')?.at(-1) : h);
         }
       });
       result.list?.sort();
@@ -159,11 +174,21 @@ export default class CodeEditor extends React.Component {
           }
         },
         'Cmd-F': (cm) => {
+          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._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();
@@ -182,31 +207,19 @@ export default class CodeEditor extends React.Component {
         'Cmd-Y': 'foldAll',
         'Ctrl-I': 'unfoldAll',
         'Cmd-I': 'unfoldAll',
-        'Cmd-/': (cm) => {
-          // comment/uncomment every selected line(s)
-          const selections = cm.listSelections();
-          selections.forEach((range) => {
-            for (let i = range.from().line; i <= range.to().line; i++) {
-              const selectedLine = cm.getLine(i);
-              // if commented line, remove comment
-              if (selectedLine.trim().startsWith('//')) {
-                cm.replaceRange(
-                  selectedLine.replace(/^(\s*)\/\/\s?/, '$1'),
-                  { line: i, ch: 0 },
-                  { line: i, ch: selectedLine.length }
-                );
-                continue;
-              }
-              // otherwise add comment
-              cm.replaceRange(
-                selectedLine.search(/\S|$/) >= TAB_SIZE
-                  ? ' '.repeat(TAB_SIZE) + '// ' + selectedLine.trim()
-                  : '// ' + selectedLine,
-                { line: i, ch: 0 },
-                { line: i, ch: selectedLine.length }
-              );
-            }
-          });
+        'Ctrl-/': () => {
+          if (['application/ld+json', 'application/json'].includes(this.props.mode)) {
+            this.editor.toggleComment({ lineComment: '//', blockComment: '/*' });
+          } else {
+            this.editor.toggleComment();
+          }
+        },
+        'Cmd-/': () => {
+          if (['application/ld+json', 'application/json'].includes(this.props.mode)) {
+            this.editor.toggleComment({ lineComment: '//', blockComment: '/*' });
+          } else {
+            this.editor.toggleComment();
+          }
         }
       },
       foldOptions: {
@@ -244,17 +257,20 @@ export default class CodeEditor extends React.Component {
         return found;
       }
       let jsonlint = window.jsonlint.parser || window.jsonlint;
-      jsonlint.parseError = function (str, hash) {
-        let loc = hash.loc;
-        found.push({
-          from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
-          to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
-          message: str
-        });
-      };
       try {
         jsonlint.parse(stripJsonComments(text.replace(/(?<!"[^":{]*){{[^}]*}}(?![^"},]*")/g, '1')));
-      } catch (e) {}
+      } catch (error) {
+        const { message, location } = error;
+        const line = location?.start?.line;
+        const column = location?.start?.column;
+        if (line && column) {
+          found.push({
+            from: CodeMirror.Pos(line - 1, column),
+            to: CodeMirror.Pos(line - 1, column),
+            message
+          });
+        }
+      }
       return found;
     });
     if (editor) {
@@ -271,9 +287,9 @@ export default class CodeEditor extends React.Component {
         while (end < currentLine.length && /[^{}();\s\[\]\,]/.test(currentLine.charAt(end))) ++end;
         while (start && /[^{}();\s\[\]\,]/.test(currentLine.charAt(start - 1))) --start;
         let curWord = start != end && currentLine.slice(start, end);
-        //Qualify if autocomplete will be shown
+        // Qualify if autocomplete will be shown
         if (
-          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|\s)\w*/.test(event.key) &&
+          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Meta|Alt|Home|End\s)\w*/.test(event.key) &&
           curWord.length > 0 &&
           !/\/\/|\/\*|.*{{|`[^$]*{|`[^{]*$/.test(currentLine.slice(0, end)) &&
           /(?<!\d)[a-zA-Z\._]$/.test(curWord)
@@ -302,7 +318,7 @@ export default class CodeEditor extends React.Component {
     }
 
     if (this.editor) {
-      let variables = getEnvironmentVariables(this.props.collection);
+      let variables = getAllVariables(this.props.collection, this.props.item);
       if (!isEqual(variables, this.variables)) {
         this.addOverlay();
       }
@@ -329,9 +345,10 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className="h-full w-full flex flex-col relative"
+        className="h-full w-full flex flex-col relative graphiql-container"
         aria-label="Code Editor"
         font={this.props.font}
+        fontSize={this.props.fontSize}
         ref={(node) => {
           this._node = node;
         }}
@@ -341,7 +358,7 @@ export default class CodeEditor extends React.Component {
 
   addOverlay = () => {
     const mode = this.props.mode || 'application/ld+json';
-    let variables = getEnvironmentVariables(this.props.collection);
+    let variables = getAllVariables(this.props.collection, this.props.item);
     this.variables = variables;
 
     defineCodeMirrorBrunoVariablesMode(variables, mode);
@@ -358,6 +375,10 @@ 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
    */
@@ -404,7 +425,8 @@ export default class CodeEditor extends React.Component {
     const searchInput = document.querySelector('.CodeMirror-search-field');
 
     if (searchInput && searchInput.value.length > 0) {
-      const text = new RegExp(searchInput.value, 'gi');
+      // 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;
     }

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

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+
+  .single-line-editor-wrapper {
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+
+  .auth-placement-selector {
+    padding: 0.5rem 0px;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+
+    .dropdown {
+      width: fit-content;
+
+      div[data-tippy-root] {
+        width: fit-content;
+      }
+      .tippy-box {
+        width: fit-content;
+        max-width: none !important;
+
+        .tippy-content: {
+          width: fit-content;
+          max-width: none !important;
+        }
+      }
+    }
+
+    .auth-type-label {
+      width: fit-content;
+      color: ${(props) => props.theme.colors.text.yellow};
+      justify-content: space-between;
+      padding: 0 0.5rem;
+    }
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,109 @@
+import React, { useRef, forwardRef, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import { useTheme } from 'providers/Theme';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { humanizeRequestAPIKeyPlacement } from 'utils/collections';
+
+const ApiKeyAuth = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const apikeyAuth = get(collection, 'root.request.auth.apikey', {});
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-end auth-type-label select-none">
+        {humanizeRequestAPIKeyPlacement(apikeyAuth?.placement)}
+        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const handleAuthChange = (property, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'apikey',
+        collectionUid: collection.uid,
+        content: {
+          ...apikeyAuth,
+          [property]: value
+        }
+      })
+    );
+  };
+
+  useEffect(() => {
+    !apikeyAuth?.placement &&
+      dispatch(
+        updateCollectionAuth({
+          mode: 'apikey',
+          collectionUid: collection.uid,
+          content: {
+            placement: 'header'
+          }
+        })
+      );
+  }, [apikeyAuth]);
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Key</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={apikeyAuth.key || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleAuthChange('key', val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Value</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={apikeyAuth.value || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleAuthChange('value', val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Add To</label>
+      <div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              handleAuthChange('placement', 'header');
+            }}
+          >
+            Header
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              handleAuthChange('placement', 'queryparams');
+            }}
+          >
+            Query Params
+          </div>
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ApiKeyAuth;

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

@@ -52,6 +52,15 @@ const AuthMode = ({ collection }) => {
           >
             Basic Auth
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('wsse');
+            }}
+          >
+            WSSE Auth
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {
@@ -70,6 +79,15 @@ const AuthMode = ({ collection }) => {
           >
             Digest Auth
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('ntlm');
+            }}
+          >
+            NTLM Auth
+          </div>          
           <div
             className="dropdown-item"
             onClick={() => {
@@ -79,6 +97,15 @@ const AuthMode = ({ collection }) => {
           >
             Oauth2
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('apikey');
+            }}
+          >
+            API Key
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+
+
+
+
+const NTLMAuth = ({ collection }) => {
+
+
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+
+  const handleUsernameChange = (username) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        content: {
+          username: username,
+          password: ntlmAuth.password,
+          domain: ntlmAuth.domain
+
+        }
+      })
+    );
+  };
+
+  const handlePasswordChange = (password) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        content: {
+          username: ntlmAuth.username,
+          password: password,
+          domain: ntlmAuth.domain
+        }
+      })
+    );
+  };
+
+  const handleDomainChange = (domain) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        content: {
+          username: ntlmAuth.username,
+          password: ntlmAuth.password,
+          domain: domain
+        }
+      })
+    );
+  };  
+
+
+
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={ntlmAuth.username || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleUsernameChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={ntlmAuth.password || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handlePasswordChange(val)}
+          collection={collection}
+          isSecret={true}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Domain</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={ntlmAuth.domain || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleDomainChange(val)}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default NTLMAuth;

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

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  max-width: 800px;
+`;
 
 export default Wrapper;

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+
+  .single-line-editor-wrapper {
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const WsseAuth = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const wsseAuth = get(collection, 'root.request.auth.wsse', {});
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const handleUserChange = (username) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'wsse',
+        collectionUid: collection.uid,
+        content: {
+          username,
+          password: wsseAuth.password
+        }
+      })
+    );
+  };
+
+  const handlePasswordChange = (password) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'wsse',
+        collectionUid: collection.uid,
+        content: {
+          username: wsseAuth.username,
+          password
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={wsseAuth.username || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleUserChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={wsseAuth.password || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handlePasswordChange(val)}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default WsseAuth;

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

@@ -6,9 +6,13 @@ import AwsV4Auth from './AwsV4Auth';
 import BearerAuth from './BearerAuth';
 import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
+import WsseAuth from './WsseAuth';
+import ApiKeyAuth from './ApiKeyAuth/';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
+import NTLMAuth from './NTLMAuth';
+
 
 const Auth = ({ collection }) => {
   const authMode = get(collection, 'root.request.auth.mode');
@@ -30,9 +34,18 @@ const Auth = ({ collection }) => {
       case 'digest': {
         return <DigestAuth collection={collection} />;
       }
+      case 'ntlm': {
+        return <NTLMAuth collection={collection} />;
+      }       
       case 'oauth2': {
         return <OAuth2 collection={collection} />;
       }
+      case 'wsse': {
+        return <WsseAuth collection={collection} />;
+      }
+      case 'apikey': {
+        return <ApiKeyAuth collection={collection} />;
+      }
     }
   };
 

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

@@ -10,8 +10,9 @@ import StyledWrapper from './StyledWrapper';
 import { useRef } from 'react';
 import path from 'path';
 import slash from 'utils/common/slash';
+import { isWindowsOS } from 'utils/common/platform';
 
-const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
+const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const certFilePathInputRef = useRef();
   const keyFilePathInputRef = useRef();
   const pfxFilePathInputRef = useRef();
@@ -67,7 +68,16 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
   });
 
   const getFile = (e) => {
-    e.files?.[0]?.path && formik.setFieldValue(e.name, e.files?.[0]?.path);
+    const filePath = window?.ipcRenderer?.getFilePath(e?.files?.[0]);
+    if (filePath) {
+      let relativePath;
+      if (isWindowsOS()) {
+        relativePath = slash(path.win32.relative(root, filePath));
+      } else {
+        relativePath = path.posix.relative(root, filePath);
+      }
+      formik.setFieldValue(e.name, relativePath);
+    }
   };
 
   const resetFileInputFields = () => {
@@ -102,10 +112,14 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
           : clientCertConfig.map((clientCert) => (
               <li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
                 <div className="flex items-center w-full justify-between">
-                  <div className="flex items-center">
+                  <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={() => onRemove(clientCert)} className="remove-certificate ml-2">
                     <IconTrash size={18} strokeWidth={1.5} />
                   </button>

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

@@ -1,17 +1,9 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 240px);
 
-    .CodeMirror-scroll {
-      padding-bottom: 0px;
-    }
-  }
   .editing-mode {
     cursor: pointer;
-    color: ${(props) => props.theme.colors.text.yellow};
   }
 `;
 

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

@@ -8,6 +8,7 @@ import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/acti
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
+import { IconEdit, IconX, IconFileText } from '@tabler/icons';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
@@ -29,29 +30,95 @@ const Docs = ({ collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleDiscardChanges = () => {
+    dispatch(
+      updateCollectionDocs({
+        collectionUid: collection.uid,
+        docs: docs
+      })
+    );
+    toggleViewMode();
+  }
+
+  const onSave = () => {
+    dispatch(saveCollectionRoot(collection.uid));
+    toggleViewMode();
+  }
 
   return (
-    <StyledWrapper className="mt-1 h-full w-full relative">
-      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
-        {isEditing ? 'Preview' : 'Edit'}
+    <StyledWrapper className="mt-1 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'>
+          <IconFileText size={20} strokeWidth={1.5} />
+          Documentation
+        </div>
+        <div className='flex flex-row gap-2 items-center justify-center'>
+          {isEditing ? (
+            <>
+              <div className="editing-mode" role="tab" onClick={handleDiscardChanges}>
+                <IconX className="cursor-pointer" size={20} strokeWidth={1.5} />
+              </div>
+              <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}>
+                Save
+              </button>
+            </>
+          ) : (
+            <div className="editing-mode" role="tab" onClick={toggleViewMode}>
+              <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} />
+            </div>
+          )}
+        </div>
       </div>
-
       {isEditing ? (
         <CodeEditor
           collection={collection}
           theme={displayedTheme}
-          value={docs || ''}
+          value={docs}
           onEdit={onEdit}
           onSave={onSave}
           mode="application/text"
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
         />
       ) : (
-        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
+        <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} />
+            }         
+          </div>
+        </div>
       )}
     </StyledWrapper>
   );
 };
 
 export default Docs;
+
+
+const documentationPlaceholder = `
+Welcome to your collection documentation! This space is designed to help you document your API collection effectively.
+
+## Overview
+Use this section to provide a high-level overview of your collection. You can describe:
+- The purpose of these API endpoints
+- Key features and functionalities
+- Target audience or users
+
+## Best Practices
+- Keep documentation up to date
+- Include request/response examples
+- Document error scenarios
+- Add relevant links and references
+
+## Markdown Support
+This documentation supports Markdown formatting! You can use:
+- **Bold** and *italic* text
+- \`code blocks\` and syntax highlighting
+- Tables and lists
+- [Links](https://example.com)
+- And more!
+`;

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
+  max-width: 800px;
+
   table {
     width: 100%;
     border-collapse: collapse;

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-import { getTotalRequestCountInCollection } from 'utils/collections/';
-
-const Info = ({ collection }) => {
-  const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
-
-  return (
-    <StyledWrapper className="w-full flex flex-col h-full">
-      <div className="text-xs mb-4 text-muted">General information about the collection.</div>
-      <table className="w-full border-collapse">
-        <tbody>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Name&nbsp;:</td>
-            <td className="py-2 px-2">{collection.name}</td>
-          </tr>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Location&nbsp;:</td>
-            <td className="py-2 px-2 break-all">{collection.pathname}</td>
-          </tr>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Ignored files&nbsp;:</td>
-            <td className="py-2 px-2 break-all">{collection.brunoConfig?.ignore?.map((x) => `'${x}'`).join(', ')}</td>
-          </tr>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Environments&nbsp;:</td>
-            <td className="py-2 px-2">{collection.environments?.length || 0}</td>
-          </tr>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Requests&nbsp;:</td>
-            <td className="py-2 px-2">{totalRequestsInCollection}</td>
-          </tr>
-        </tbody>
-      </table>
-    </StyledWrapper>
-  );
-};
-
-export default Info;

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

@@ -0,0 +1,82 @@
+import React from "react";
+import { getTotalRequestCountInCollection } from 'utils/collections/';
+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);
+
+  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-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-semibold text-sm">Location</div>
+              <div className="mt-1 text-sm text-muted break-all">
+                {collection.pathname}
+              </div>
+            </div>
+          </div>
+
+          {/* Environments Row */}
+          <div className="flex items-start">
+            <div className="flex-shrink-0 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
+            </div>
+            <div className="ml-4">
+              <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>
+          </div>
+
+          {/* Requests Row */}
+          <div className="flex items-start">
+            <div className="flex-shrink-0 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+              <IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
+            </div>
+            <div className="ml-4">
+              <div className="font-semibold text-sm">Requests</div>
+              <div className="mt-1 text-sm text-muted font-mono">
+                {
+                  isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
+                }
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-start group cursor-pointer" onClick={handleToggleShowShareCollectionModal(true)}>
+            <div className="flex-shrink-0 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
+              <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-semibold text-sm h-fit my-auto">Share</div>
+              <div className="mt-1 text-sm group-hover:underline text-link">
+                Share Collection
+              </div>
+            </div>
+          </div>
+          {showShareCollectionModal && <ShareCollection collection={collection} onClose={handleToggleShowShareCollectionModal(false)} />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Info;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  &.card {
+    background-color: ${(props) => props.theme.requestTabPanel.card.bg};
+
+    .title {
+      border-top: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+      border-left: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+      border-right: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+
+    .table {
+      thead {
+        background-color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.bg};
+        color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.color};
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { flattenItems } from "utils/collections";
+import { IconAlertTriangle } from '@tabler/icons';
+import StyledWrapper from "./StyledWrapper";
+import { useDispatch, useSelector } from 'react-redux';
+import { isItemARequest, itemIsOpenedInTabs } from 'utils/tabs/index';
+import { getDefaultRequestPaneTab } from 'utils/collections/index';
+import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
+import { hideHomePage } from 'providers/ReduxStore/slices/app';
+
+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);
+
+  if (!itemsFailedLoading?.length) {
+    return null;
+  }
+
+  const handleRequestClick = (item) => e => {
+    e.preventDefault();
+    if (isItemARequest(item)) {
+      dispatch(hideHomePage());
+      if (itemIsOpenedInTabs(item, tabs)) {
+        dispatch(
+          focusTab({
+            uid: item.uid
+          })
+        );
+        return;
+      }
+      dispatch(
+        addTab({
+          uid: item.uid,
+          collectionUid: collection.uid,
+          requestPaneTab: getDefaultRequestPaneTab(item)
+        })
+      );
+      return;
+    }
+  }
+
+  return (
+    <StyledWrapper className="w-full card my-2">
+      <div className="flex items-center gap-2 px-3 py-2 title bg-yellow-50 dark:bg-yellow-900/20">
+        <IconAlertTriangle size={16} className="text-yellow-500" />
+        <span className="font-medium">Following requests were not loaded</span>
+      </div>
+      <table className="w-full border-collapse">
+        <thead>
+          <tr>
+            <th className="py-2 px-3 text-left font-medium">
+              Pathname
+            </th>
+            <th className="py-2 px-3 text-left font-medium">
+              Size
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {flattenedItems?.map((item, index) => (
+            item?.partial && !item?.loading ? (
+              <tr key={index} className='cursor-pointer' onClick={handleRequestClick(item)}>
+                <td className="py-1.5 px-3">
+                  {item?.pathname?.split(`${collection?.pathname}/`)?.[1]}
+                </td>
+                <td className="py-1.5 px-3">
+                  {item?.size?.toFixed?.(2)}&nbsp;MB
+                </td>
+              </tr>
+            ) : null
+          ))}
+        </tbody>
+      </table>
+    </StyledWrapper>
+  );
+};
+
+export default RequestsNotLoaded;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .partial {
+    color: ${(props) => props.theme.colors.text.yellow};
+    opacity: 0.8;
+  }
+
+  .loading {
+    color: ${(props) => props.theme.colors.text.muted};
+    opacity: 0.8;
+  }
+
+  .completed {
+    color: ${(props) => props.theme.colors.text.green};
+    opacity: 0.8;
+  }
+
+  .failed {
+    color: ${(props) => props.theme.colors.text.danger};
+    opacity: 0.8;
+  }
+`;
+
+export default StyledWrapper;

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

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

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  max-width: 800px;
+
   .settings-label {
     width: 110px;
   }

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useFormik } from 'formik';
-import Tooltip from 'components/Tooltip';
+import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
@@ -104,18 +104,15 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
         <div className="mb-3 flex items-center">
           <label className="settings-label flex items-center" htmlFor="enabled">
             Config
-            <Tooltip
-              text={`
+            <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>
-            `}
-              tooltipId="request-var"
-            />
+            </InfoTip>
           </label>
           <div className="flex items-center">
             <label className="flex items-center">
@@ -336,4 +333,4 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
   );
 };
 
-export default ProxySettings;
+export default ProxySettings;

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  max-width: 800px;
+
   div.CodeMirror {
     height: inherit;
   }

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

@@ -52,6 +52,7 @@ const Script = ({ collection }) => {
           mode="javascript"
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
         />
       </div>
       <div className="flex-1 mt-6">
@@ -64,6 +65,7 @@ const Script = ({ collection }) => {
           mode="javascript"
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
         />
       </div>
 

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

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  max-width: 800px;
-
   div.tabs {
     div.tab {
       padding: 6px 0px;

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

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
-const StyledWrapper = styled.div``;
+const StyledWrapper = styled.div`
+  max-width: 800px;
+`;
 
 export default StyledWrapper;

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

@@ -36,6 +36,7 @@ const Tests = ({ collection }) => {
         mode="javascript"
         onSave={handleSave}
         font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
       />
 
       <div className="mt-6">

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

@@ -1,12 +1,10 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  table {
-    td {
-      &:first-child {
-        width: 120px;
-      }
-    }
+  max-width: 800px;
+
+  div.title {
+    color: var(--color-tab-inactive);
   }
 `;
 

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

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
+    }
+  }
+
+  .btn-add-var {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    background-color: inherit;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,161 @@
+import React from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import SingleLineEditor from 'components/SingleLineEditor';
+import InfoTip from 'components/InfoTip';
+import StyledWrapper from './StyledWrapper';
+import toast from 'react-hot-toast';
+import { variableNameRegex } from 'utils/common/regex';
+import {
+  addCollectionVar,
+  deleteCollectionVar,
+  updateCollectionVar
+} from 'providers/ReduxStore/slices/collections/index';
+
+const VarsTable = ({ collection, vars, varType }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const addVar = () => {
+    dispatch(
+      addCollectionVar({
+        collectionUid: collection.uid,
+        type: varType
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleVarChange = (e, v, type) => {
+    const _var = cloneDeep(v);
+    switch (type) {
+      case 'name': {
+        const value = e.target.value;
+
+        if (variableNameRegex.test(value) === false) {
+          toast.error(
+            'Variable contains invalid characters! Variables must only contain alpha-numeric characters, "-", "_", "."'
+          );
+          return;
+        }
+
+        _var.name = value;
+        break;
+      }
+      case 'value': {
+        _var.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        _var.enabled = e.target.checked;
+        break;
+      }
+    }
+    dispatch(
+      updateCollectionVar({
+        type: varType,
+        var: _var,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleRemoveVar = (_var) => {
+    dispatch(
+      deleteCollectionVar({
+        type: varType,
+        varUid: _var.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <table>
+        <thead>
+          <tr>
+            <td>Name</td>
+            {varType === 'request' ? (
+              <td>
+                <div className="flex items-center">
+                  <span>Value</span>
+                </div>
+              </td>
+            ) : (
+              <td>
+                <div className="flex items-center">
+                  <span>Expr</span>
+                  <InfoTip content="You can write any valid JS Template Literal here" infotipId="request-var" />
+                </div>
+              </td>
+            )}
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {vars && vars.length
+            ? vars.map((_var) => {
+                return (
+                  <tr key={_var.uid}>
+                    <td>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={_var.name}
+                        className="mousetrap"
+                        onChange={(e) => handleVarChange(e, _var, 'name')}
+                      />
+                    </td>
+                    <td>
+                      <SingleLineEditor
+                        value={_var.value}
+                        theme={storedTheme}
+                        onSave={onSave}
+                        onChange={(newValue) =>
+                          handleVarChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            _var,
+                            'value'
+                          )
+                        }
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center">
+                        <input
+                          type="checkbox"
+                          checked={_var.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleVarChange(e, _var, 'enabled')}
+                        />
+                        <button tabIndex="-1" onClick={() => handleRemoveVar(_var)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
+      <button className="btn-add-var text-link pr-2 py-3 mt-2 select-none" onClick={addVar}>
+        + Add
+      </button>
+    </StyledWrapper>
+  );
+};
+export default VarsTable;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import get from 'lodash/get';
+import VarsTable from './VarsTable';
+import StyledWrapper from './StyledWrapper';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { useDispatch } from 'react-redux';
+
+const Vars = ({ collection }) => {
+  const dispatch = useDispatch();
+  const requestVars = get(collection, 'root.request.vars.req', []);
+  const responseVars = get(collection, 'root.request.vars.res', []);
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  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
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Vars;

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

@@ -12,10 +12,19 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
-import Docs from './Docs';
 import Presets from './Presets';
-import Info from './Info';
 import StyledWrapper from './StyledWrapper';
+import Vars from './Vars/index';
+import DotIcon from 'components/Icons/Dot';
+import Overview from './Overview/index';
+
+const ContentIndicator = () => {
+  return (
+    <sup className="ml-[.125rem] opacity-80 font-medium">
+      <DotIcon width="10"></DotIcon>
+    </sup>
+  );
+};
 
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
@@ -29,10 +38,23 @@ const CollectionSettings = ({ collection }) => {
     );
   };
 
-  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
+  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 = get(collection, 'root.request.headers', []);
+  const activeHeadersCount = headers.filter((header) => header.enabled).length;
+
+  const requestVars = get(collection, 'root.request.vars.req', []);
+  const responseVars = get(collection, 'root.request.vars.res', []);
+  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
+  const auth = get(collection, 'root.request.auth', {}).mode;
+
+  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
 
+
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
     brunoConfig.proxy = config;
@@ -74,9 +96,15 @@ const CollectionSettings = ({ collection }) => {
 
   const getTabPanel = (tab) => {
     switch (tab) {
+      case 'overview': {
+        return <Overview collection={collection} />;
+      }
       case 'headers': {
         return <Headers collection={collection} />;
       }
+      case 'vars': {
+        return <Vars collection={collection} />;
+      }
       case 'auth': {
         return <Auth collection={collection} />;
       }
@@ -95,18 +123,13 @@ const CollectionSettings = ({ collection }) => {
       case 'clientCert': {
         return (
           <ClientCertSettings
+            root={collection.pathname}
             clientCertConfig={clientCertConfig}
             onUpdate={onClientCertSettingsUpdate}
             onRemove={onClientCertSettingsRemove}
           />
         );
       }
-      case 'docs': {
-        return <Docs collection={collection} />;
-      }
-      case 'info': {
-        return <Info collection={collection} />;
-      }
     }
   };
 
@@ -119,32 +142,39 @@ const CollectionSettings = ({ collection }) => {
   return (
     <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
       <div className="flex flex-wrap items-center tabs" role="tablist">
+      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
+          Overview
+        </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
           Headers
+          {activeHeadersCount > 0 && <sup className="ml-1 font-medium">{activeHeadersCount}</sup>}
+        </div>
+        <div className={getTabClassname('vars')} role="tab" onClick={() => setTab('vars')}>
+          Vars
+          {activeVarsCount > 0 && <sup className="ml-1 font-medium">{activeVarsCount}</sup>}
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
+          {auth !== 'none' && <ContentIndicator />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script
+          {hasScripts && <ContentIndicator />}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
+          {hasTests && <ContentIndicator />}
         </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  && <ContentIndicator />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
-        </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
-          Docs
-        </div>
-        <div className={getTabClassname('info')} role="tab" onClick={() => setTab('info')}>
-          Info
+          {clientCertConfig.length > 0 && <ContentIndicator />}
         </div>
       </div>
       <section className="mt-4 h-full">{getTabPanel(tab)}</section>

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div``;
+
+export default StyledWrapper;

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

@@ -0,0 +1,371 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import Modal from 'components/Modal/index';
+import { modifyCookie, addCookie, getParsedCookie, createCookieString } from 'providers/ReduxStore/slices/app';
+import { useDispatch } from 'react-redux';
+import toast from 'react-hot-toast';
+import ToggleSwitch from 'components/ToggleSwitch/index';
+import { IconInfoCircle } from '@tabler/icons';
+import moment from 'moment';
+import 'moment-timezone';
+import { Tooltip } from 'react-tooltip';
+import { isEmpty } from 'lodash';
+
+const removeEmptyValues = (obj) => {
+  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== null && value !== undefined));
+};
+
+const ModifyCookieModal = ({ onClose, domain, cookie }) => {
+  const dispatch = useDispatch();
+  const [isRawMode, setIsRawMode] = useState(false);
+  const [cookieString, setCookieString] = useState('');
+  const initialParseRef = useRef(false);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      ...(cookie ? cookie : {}),
+      key: cookie?.key || '',
+      value: cookie?.value || '',
+      path: cookie?.path || '/',
+      domain: cookie?.domain || domain || '',
+      expires: cookie?.expires ? moment(cookie.expires).format(moment.HTML5_FMT.DATETIME_LOCAL) : '',
+      secure: cookie?.secure || false,
+      httpOnly: cookie?.httpOnly || false
+    },
+    validationSchema: Yup.object({
+      key: Yup.string().required('Key is required'),
+      value: Yup.string().required('Value is required'),
+      domain: Yup.string().required('Domain is required'),
+      secure: Yup.boolean(),
+      httpOnly: Yup.boolean(),
+      expires: Yup.mixed()
+        .nullable()
+        .transform((value) => {
+          if (!value || value === '') return null;
+          return moment(value).isValid() ? moment(value).toDate() : null;
+        })
+        .test('future-date', 'Expiration date must be in the future', (value) => {
+          if (!value) return true;
+          return moment(value).isAfter(moment());
+        })
+    }),
+    onSubmit: (values) => {
+      const modValues = removeEmptyValues({
+        ...(cookie ? cookie : {}),
+        ...values,
+        expires: values.expires
+          ? moment(values.expires).isValid()
+            ? moment(values.expires).toDate()
+            : Infinity
+          : Infinity
+      });
+
+      handleCookieDispatch(cookie, domain, modValues, onClose);
+    }
+  });
+
+  const title = cookie ? 'Modify Cookie' : 'Add Cookie';
+
+  const handleCookieDispatch = (cookie, domain, modValues, onClose) => {
+    if (cookie) {
+      dispatch(modifyCookie(domain, cookie, modValues))
+        .then(() => {
+          toast.success('Cookie modified successfully');
+          onClose();
+        })
+        .catch((err) => {
+          toast.error('An error occurred while modifying cookie');
+          console.error(err);
+        });
+    } else {
+      dispatch(addCookie(domain, modValues))
+        .then(() => {
+          toast.success('Cookie added successfully');
+          onClose();
+        })
+        .catch((err) => {
+          toast.error('An error occurred while adding cookie');
+          console.error(err);
+        });
+    }
+  };
+
+  const onSubmit = async () => {
+    try {
+      if (isRawMode) {
+        const cookieObj = await dispatch(getParsedCookie(cookieString));
+
+        const modifiedCookie = removeEmptyValues({
+          ...formik.values,
+          ...cookieObj,
+          expires: cookieObj?.expires
+            ? moment(cookieObj.expires).isValid()
+              ? moment(cookieObj.expires).toDate()
+              : Infinity
+            : Infinity
+        });
+
+        if (!cookieObj) {
+          toast.error('Please enter a valid cookie string');
+          return;
+        }
+
+        const validationErrors = await formik.setValues(
+          (values) => ({
+            ...values,
+            ...modifiedCookie,
+            expires:
+              modifiedCookie?.expires && moment(modifiedCookie.expires).isValid()
+                ? moment(new Date(modifiedCookie.expires)).format(moment.HTML5_FMT.DATETIME_LOCAL)
+                : ''
+          }),
+          true
+        );
+
+        if (!isEmpty(validationErrors)) {
+          toast.error(Object.values(validationErrors).join("\n"));
+          return;
+        }
+
+        handleCookieDispatch(cookie, domain, modifiedCookie, onClose);
+      } else {
+        formik.handleSubmit();
+      }
+    } catch (error) {
+      const errMsg = error.message || 'An error occurred while parsing cookie string';
+      toast.error(errMsg);
+    }
+  };
+
+  useEffect(() => {
+    if (!isRawMode) return;
+    const loadCookieString = async () => {
+      if (cookie) {
+        const str = await dispatch(createCookieString(cookie));
+        setCookieString(str);
+      }
+      return '';
+    };
+
+    loadCookieString();
+  }, [cookie, isRawMode]);
+
+  // create the cookieString when raw mode is enabled
+  useEffect(() => {
+    if (isRawMode) {
+      const createCookieStr = async () => {
+        const str = await dispatch(createCookieString(formik.values));
+        setCookieString(str);
+      };
+
+      createCookieStr();
+    }
+  }, [isRawMode, formik.values]);
+
+  useEffect(() => {
+    // Reset the ref when raw mode changes
+    if (isRawMode) {
+      initialParseRef.current = false;
+      return;
+    }
+
+    const setParsedCookie = async () => {
+      if (!isRawMode && cookieString && !initialParseRef.current) {
+        initialParseRef.current = true;
+
+        try {
+          const cookieObj = await dispatch(getParsedCookie(cookieString));
+
+          if (!cookieObj) return;
+
+          formik.setValues(
+            (values) => ({
+              ...values,
+              ...removeEmptyValues(cookieObj),
+              expires:
+                cookieObj?.expires && moment(cookieObj.expires).isValid()
+                  ? moment(new Date(cookieObj.expires)).format(moment.HTML5_FMT.DATETIME_LOCAL)
+                  : ''
+            }),
+            true
+          );
+        } catch (error) {
+          const errMsg = error.message || 'An error occurred while parsing cookie string';
+          toast.error(errMsg);
+        }
+      }
+    };
+
+    setParsedCookie();
+  }, [isRawMode, cookieString, dispatch, formik]);
+
+  return (
+    <Modal
+      size="lg"
+      title={title}
+      onClose={onClose}
+      handleCancel={onClose}
+      handleConfirm={onSubmit}
+      customHeader={
+        <div className="flex items-center justify-between w-full">
+          <h2 className="text-sm font-bold">{title}</h2>
+          <div className="ml-auto flex items-center ">
+            <ToggleSwitch
+              className="mr-2"
+              isOn={isRawMode}
+              size="2xs"
+              handleToggle={(e) => {
+                setIsRawMode(e.target.checked);
+              }}
+            />
+            <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 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"
+                className="tooltip-mod"
+                html="Key, Path, and Domain are immutable properties and cannot be modified for existing cookies"
+              />
+            </div>
+            <textarea
+              value={cookieString}
+              onChange={(e) => setCookieString(e.target.value)}
+              className="block textbox w-full h-24"
+              placeholder="key=value; key2=value2"
+            />
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm mb-1">
+                  Domain<span className="text-red-600">*</span>{' '}
+                </label>
+                <input
+                  type="text"
+                  name="domain"
+                  // Auto-focus if its add-new i.e. when domain prop is empty
+                  autoFocus={!domain && !formik.values.domain}
+                  value={formik.values.domain}
+                  onChange={formik.handleChange}
+                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                  disabled={!!cookie}
+                />
+                {formik.touched.domain && formik.errors.domain && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.domain}</div>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm mb-1">Path</label>
+                <input
+                  type="text"
+                  name="path"
+                  value={formik.values.path}
+                  onChange={formik.handleChange}
+                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                  disabled={!!cookie}
+                />
+                {formik.touched.path && formik.errors.path && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.path}</div>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm mb-1">
+                  Key<span className="text-red-600">*</span>{' '}
+                </label>
+                <input
+                  type="text"
+                  name="key"
+                  // Auto focus when add-for-domain i.e. if domain is already prefilled
+                  autoFocus={!!domain && !formik.values.key}
+                  value={formik.values.key}
+                  onChange={formik.handleChange}
+                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                  disabled={!!cookie}
+                />
+                {formik.touched.key && formik.errors.key && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.key}</div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm mb-1">
+                  Value<span className="text-red-600">*</span>{' '}
+                </label>
+                <input
+                  type="text"
+                  name="value"
+                  // Auto-focus when its in edit mode i.e. cookie prop is present
+                  autoFocus={!!cookie}
+                  value={formik.values.value}
+                  onChange={formik.handleChange}
+                  className="block textbox non-passphrase-input w-full"
+                />
+                {formik.touched.value && formik.errors.value && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.value}</div>
+                )}
+              </div>
+            </div>
+
+            {/* Date Picker */}
+            <div className="w-full flex items-end">
+              <div>
+                <label className="block text-sm mb-1">Expiration ({moment.tz.guess()})</label>
+                <input
+                  type="datetime-local"
+                  name="expires"
+                  value={formik.values.expires}
+                  onChange={(e) => {
+                    formik.handleChange(e);
+                  }}
+                  className="block textbox non-passphrase-input w-full"
+                  min={moment().format(moment.HTML5_FMT.DATETIME_LOCAL)}
+                />
+                {formik.touched.expires && formik.errors.expires && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.expires}</div>
+                )}
+              </div>
+
+              {/* Checkboxes */}
+              <div className="flex space-x-4 ml-auto">
+                <label className="flex items-center">
+                  <input
+                    type="checkbox"
+                    name="secure"
+                    checked={formik.values.secure}
+                    onChange={formik.handleChange}
+                    className="mr-2"
+                  />
+                  <span className="text-sm">Secure</span>
+                </label>
+
+                <label className="flex items-center">
+                  <input
+                    type="checkbox"
+                    name="httpOnly"
+                    checked={formik.values.httpOnly}
+                    onChange={formik.handleChange}
+                    className="mr-2"
+                  />
+                  <span className="text-sm">HTTP Only</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        )}
+      </form>
+    </Modal>
+  );
+};
+
+export default ModifyCookieModal;

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

@@ -11,6 +11,65 @@ const Wrapper = styled.div`
       user-select: none;
     }
   }
+
+  &.header {
+    input {
+      padding: 0.3rem 0.5rem;
+    }
+  }
+
+  .textbox {
+    line-height: 1.42857143;
+    border: 1px solid #ccc;
+    padding: 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;
+    }
+  }
+
+  .scroll-box {
+    max-height: 500px;
+    overflow-y: auto;
+
+    background:
+    /* Shadow Cover TOP */
+    linear-gradient(
+      ${(props) => props.theme.modal.body.bg} 20%,
+      rgba(255, 255, 255, 0)
+    ) center top,
+    
+    /* Shadow Cover BOTTOM */
+    linear-gradient(
+      rgba(255, 255, 255, 0),
+      ${(props) => props.theme.modal.body.bg} 80%
+    ) center bottom,
+    
+    /* Shadow TOP */
+    linear-gradient(
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0) 100%
+    ) center top,
+    
+    /* Shadow BOTTOM */
+    linear-gradient(
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.1) 100%
+    ) center bottom;
+
+    background-repeat: no-repeat;
+    background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px;
+    background-attachment: local, local, scroll, scroll;
+  }
 `;
 
 export default Wrapper;

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

@@ -1,53 +1,331 @@
-import React from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Modal from 'components/Modal';
-import { IconTrash } from '@tabler/icons';
-import { deleteCookiesForDomain } from 'providers/ReduxStore/slices/app';
+import Accordion from 'components/Accordion/index';
+import { IconTrash, IconEdit, IconCirclePlus, IconCookieOff, IconAlertTriangle, IconSearch } from '@tabler/icons';
+import { deleteCookiesForDomain, deleteCookie } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
-
+import ModifyCookieModal from 'components/Cookies/ModifyCookieModal/index';
 import StyledWrapper from './StyledWrapper';
+import moment from 'moment';
+import { Tooltip } from 'react-tooltip';
+
+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-semibold">Hold on..</h1>
+    </div>
+    <div className="font-normal mt-4">
+      Are you sure you want to clear all cookies for the domain {domain}?
+    </div>
+
+    <div className="flex justify-between mt-6">
+      <div>
+        <button className="btn btn-sm btn-close" onClick={onClose}>
+          Close
+        </button>
+      </div>
+      <div>
+        <button className="btn btn-sm btn-danger" onClick={onClear}>
+          Clear All
+        </button>
+      </div>
+    </div>
+  </Modal>
+);
+
+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-semibold">Hold on..</h1>
+    </div>
+    <div className="font-normal mt-4">
+      Are you sure you want to delete the cookie {cookieName}?
+    </div>
+
+    <div className="flex justify-between mt-6">
+      <div>
+        <button className="btn btn-sm btn-close" onClick={onClose}>
+          Close
+        </button>
+      </div>
+      <div>
+        <button className="btn btn-sm btn-danger" onClick={onDelete}>
+          Delete
+        </button>
+      </div>
+    </div>
+  </Modal>
+);
 
 const CollectionProperties = ({ onClose }) => {
   const dispatch = useDispatch();
   const cookies = useSelector((state) => state.app.cookies) || [];
+  const [isModifyCookieModalOpen, setIsModifyCookieModalOpen] = useState(false);
+  const [currentDomain, setCurrentDomain] = useState(null);
+  const [cookieToEdit, setCookieToEdit] = useState(null);
 
-  const handleDeleteDomain = (domain) => {
-    dispatch(deleteCookiesForDomain(domain))
-      .then(() => {
-        toast.success('Domain deleted successfully');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to delete domain'));
+  const [domainToClear, setDomainToClear] = useState(null);
+  const [cookieToDelete, setCookieToDelete] = useState(null);
+  const [searchText, setSearchText] = useState(null);
+
+  const handleAddCookie = (domain) => {
+    if(domain) setCurrentDomain(domain);
+    setIsModifyCookieModalOpen(true);
   };
 
+  const handleEditCookie = (domain, cookie) => {
+    setCurrentDomain(domain);
+    setCookieToEdit(cookie);
+    setIsModifyCookieModalOpen(true);
+  };
+
+  const handleClearDomainCookies = (domain) => {
+    setDomainToClear(domain);
+  };
+
+  const clearDomainCookiesAction = () => {
+    dispatch(deleteCookiesForDomain(domainToClear))
+      .then(() => {
+        toast.success('Domain cookies cleared successfully');
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to clear domain cookies'));
+    setDomainToClear(null);
+  };
+
+  const handleDeleteCookie = (domain, path, key) => {
+    setCookieToDelete({ key, domain, path });
+  };
+
+  const deleteCookieAction = () => {
+    if (cookieToDelete) {
+      const { domain, path, key } = cookieToDelete;
+      dispatch(deleteCookie(domain, path, key))
+        .then(() => {
+          toast.success('Cookie deleted successfully');
+        })
+        .catch((err) => console.log(err) && toast.error('Failed to delete cookie'));
+    }
+    setCookieToDelete(null);
+  };
+
+  const filteredCookies = useMemo(() => {
+    if (!searchText) return cookies;
+
+    return cookies.filter((cookie) =>
+      cookie.domain.toLowerCase().includes(searchText.toLowerCase())
+    );
+  }, [cookies, searchText]);
+
+  const shouldShowHeader = cookies && cookies.length > 0;
+
   return (
-    <Modal size="md" title="Cookies" hideFooter={true} handleCancel={onClose}>
-      <StyledWrapper>
-        <table className="w-full border-collapse" style={{ marginTop: '-1rem' }}>
-          <thead>
-            <tr>
-              <th className="py-2 px-2 text-left">Domain</th>
-              <th className="py-2 px-2 text-left">Cookie</th>
-              <th className="py-2 px-2 text-center" style={{ width: 80 }}>
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {cookies.map((cookie) => (
-              <tr key={cookie.domain}>
-                <td className="py-2 px-2">{cookie.domain}</td>
-                <td className="py-2 px-2 break-all">{cookie.cookieString}</td>
-                <td className="text-center">
-                  <button tabIndex="-1" onClick={() => handleDeleteDomain(cookie.domain)}>
-                    <IconTrash strokeWidth={1.5} size={20} />
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </StyledWrapper>
-    </Modal>
+    <>
+      <Modal
+        size="xl"
+        title="Cookies"
+        hideFooter={true}
+        handleCancel={onClose}
+        customHeader={shouldShowHeader ? (
+          <StyledWrapper className="header flex items-center justify-between w-full">
+            <h2 className="text-xs font-medium">Cookies</h2>
+            <input
+              type="search"
+              placeholder="Search by domain"
+              value={searchText || ''}
+              onChange={(e) => setSearchText(e.target.value)}
+              className="block textbox non-passphrase-input ml-auto font-normal"
+            />
+            <button
+              type="submit"
+              className="submit btn btn-sm btn-secondary flex items-center gap-1 mx-4 font-medium"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleAddCookie();
+              }}
+            >
+              <IconCirclePlus strokeWidth={1.5} size={16} />
+              <span>Add Cookie</span>
+            </button>
+          </StyledWrapper>
+        ) : null}
+      >
+        <StyledWrapper>
+          {!cookies || !cookies.length ? (
+            // 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-semibold mt-4">No cookies found</h2>
+              <p className="text-gray-500 mt-2">Add cookies to get started</p>
+              <button
+                type="submit"
+                className="submit btn btn-sm btn-secondary flex items-center gap-1 mt-8"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleAddCookie();
+                }}
+              >
+                <IconCirclePlus strokeWidth={1.5} size={16} />
+                <span>Add Cookie</span>
+              </button>
+            </div>
+          ) : cookies.length && !filteredCookies.length ? (
+            // No search results
+            <div className="flex items-center justify-center flex-col">
+              <IconSearch size={48} />
+              <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>
+          ) : (
+            // Show cookies list
+            <div className="scroll-box">
+              <Accordion defaultIndex={0}>
+                {filteredCookies.map((domainWithCookies, i) => (
+                  <Accordion.Item key={i} index={i}>
+                    <Accordion.Header index={i} className="flex items-center">
+                      <div className="flex items-center">
+                        <span>{domainWithCookies.domain}</span>
+                        <span className="ml-2 text-xs dark:text-gray-300 text-gray-500">
+                          ({domainWithCookies.cookies.length}{' '}
+                          {domainWithCookies.cookies.length === 1 ? 'cookie' : 'cookies'})
+                        </span>
+                        <div className="ml-auto flex items-center gap-2">
+                          <button
+                            type="submit"
+                            className="flex items-center gap-1 text-gray-500 hover:text-gray-950 dark:text-white dark:hover:text-gray-300"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleAddCookie(domainWithCookies.domain);
+                            }}
+                          >
+                            <IconCirclePlus strokeWidth={1.5} size={16} />
+                          </button>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleClearDomainCookies(domainWithCookies.domain);
+                            }}
+                            className="text-gray-950 dark:text-white dark:hover:hover:text-red-600 hover:text-red-600  mr-2"
+                          >
+                            <IconTrash strokeWidth={1.5} size={16} />
+                          </button>
+                        </div>
+                      </div>
+                    </Accordion.Header>
+                    <Accordion.Content index={i}>
+                      <div className="flex items-center justify-between">
+                        <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-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>
+                            {domainWithCookies.cookies.map((cookie) => (
+                              <tr key={cookie.key} className="border-b border-gray-200 dark:border-neutral-600 last:border-none">
+                                <td className="py-2 px-4 truncate">
+                                  <span id={`cookie-key-${cookie.key}`}>{cookie.key}</span>
+                                  <Tooltip
+                                    anchorId={`cookie-key-${cookie.key}`}
+                                    className="tooltip-mod"
+                                    html={cookie.key}
+                                  />
+                                </td>
+                                <td className="py-2 px-4 truncate">
+                                  <span id={`cookie-value-${cookie.key}`}>{cookie.value}</span>
+                                  <Tooltip
+                                    anchorId={`cookie-value-${cookie.key}`}
+                                    className="tooltip-mod"
+                                    html={cookie.value}
+                                  />
+                                </td>
+                                <td className="py-2 px-4 truncate">{cookie.path || '/'}</td>
+                                <td className="py-2 px-4 truncate">
+                                  <span id={`cookie-expires-${cookie.key}`}>
+                                    {cookie.expires && moment(cookie.expires).isValid()
+                                      ? new Date(cookie.expires).toLocaleString()
+                                      : 'Session'}
+                                  </span>
+                                  {cookie.expires && moment(cookie.expires).isValid() && (
+                                    <Tooltip
+                                      anchorId={`cookie-expires-${cookie.key}`}
+                                      className="tooltip-mod"
+                                      html={new Date(cookie.expires).toLocaleString()}
+                                    />
+                                  )}
+                                </td>
+                                <td className="py-2 px-4 text-center">{cookie.secure ? '✓' : ''}</td>
+                                <td className="py-2 px-4 text-center">{cookie.httpOnly ? '✓' : ''}</td>
+                                <td className="py-2 px-4">
+                                  <div className="flex items-center justify-end gap-2">
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleEditCookie(domainWithCookies.domain, cookie);
+                                      }}
+                                      className="text-gray-700  hover:text-gray-950
+                                    dark:text-white dark:hover:text-gray-300"
+                                    >
+                                      <IconEdit strokeWidth={1.5} size={16} />
+                                    </button>
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleDeleteCookie(domainWithCookies.domain, cookie.path, cookie.key);
+                                      }}
+                                      className="text-gray-950 dark:text-white dark:hover:hover:text-red-600  hover:text-red-600"
+                                    >
+                                      <IconTrash strokeWidth={1.5} size={16} />
+                                    </button>
+                                  </div>
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </Accordion.Content>
+                  </Accordion.Item>
+                ))}
+              </Accordion>
+            </div>
+          )}
+        </StyledWrapper>
+      </Modal>
+      {isModifyCookieModalOpen && (
+        <ModifyCookieModal
+          onClose={() => {
+            setCookieToEdit(null);
+            setCurrentDomain(null);
+            setIsModifyCookieModalOpen(false);
+          }}
+          domain={currentDomain}
+          cookie={cookieToEdit}
+        />
+      )}
+      {domainToClear ? (
+        <ClearDomainCookiesModal
+          onClose={() => setDomainToClear(null)}
+          domain={domainToClear}
+          onClear={clearDomainCookiesAction}
+        />
+      ) : null}
+      {cookieToDelete ? (
+        <DeleteCookieModal
+          onClose={() => setCookieToDelete(null)}
+          cookieName={cookieToDelete.key}
+          onDelete={deleteCookieAction}
+        />
+      ) : null}
+    </>
   );
 };
 

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   .editing-mode {
     cursor: pointer;
-    color: ${(props) => props.theme.colors.text.yellow};
   }
 `;
 

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

@@ -47,6 +47,7 @@ const Documentation = ({ item, collection }) => {
           collection={collection}
           theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
           value={docs || ''}
           onEdit={onEdit}
           onSave={onSave}

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

@@ -36,6 +36,13 @@ const Wrapper = styled.div`
         padding: 0.35rem 0.6rem;
         cursor: pointer;
 
+        &.active {
+          color: ${(props) => props.theme.colors.text.yellow} !important;
+          .icon {
+            color: ${(props) => props.theme.colors.text.yellow} !important;
+          }
+        }
+
         .icon {
           color: ${(props) => props.theme.dropdown.iconColor};
         }

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

@@ -2,9 +2,9 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';
 
-const Dropdown = ({ icon, children, onCreate, placement }) => {
+const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
   return (
-    <StyledWrapper className="dropdown">
+    <StyledWrapper className="dropdown" transparent={transparent}>
       <Tippy
         content={children}
         placement={placement || 'bottom-end'}

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

@@ -19,7 +19,7 @@ const EnvironmentSelector = ({ collection }) => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
-        {activeEnvironment ? activeEnvironment.name : 'No Environment'}
+        <p className="text-nowrap truncate max-w-32">{activeEnvironment ? activeEnvironment.name : 'No Environment'}</p>
         <IconCaretDown className="caret" size={14} strokeWidth={2} />
       </div>
     );
@@ -53,10 +53,11 @@ const EnvironmentSelector = ({ collection }) => {
     <StyledWrapper>
       <div className="flex items-center cursor-pointer environment-selector">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div className="label-item font-medium">Collection Environments</div>
           {environments && environments.length
             ? environments.map((e) => (
                 <div
-                  className="dropdown-item"
+                  className={`dropdown-item ${e?.uid === activeEnvironmentUid ? 'active' : ''}`}
                   key={e.uid}
                   onClick={() => {
                     onSelect(e);
@@ -77,7 +78,10 @@ const EnvironmentSelector = ({ collection }) => {
             <IconDatabaseOff size={18} strokeWidth={1.5} />
             <span className="ml-2">No Environment</span>
           </div>
-          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
+          <div className="dropdown-item border-top" onClick={() => {
+            handleSettingsIconClick();
+            dropdownTippyRef.current.hide();
+          }}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>

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

@@ -44,7 +44,7 @@ const CopyEnvironment = ({ collection, environment, onClose }) => {
   return (
     <Portal>
       <Modal size="sm" title={'Copy Environment'} confirmText="Copy" handleConfirm={onSubmit} handleCancel={onClose}>
-        <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
             <label htmlFor="name" className="block font-semibold">
               New Environment Name

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

@@ -10,6 +10,11 @@ import Modal from 'components/Modal';
 const CreateEnvironment = ({ collection, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
+
+ const validateEnvironmentName = (name) => {
+   return !collection?.environments?.some((env) => env?.name?.toLowerCase().trim() === name?.toLowerCase().trim());
+ };
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -17,9 +22,10 @@ const CreateEnvironment = ({ collection, onClose }) => {
     },
     validationSchema: Yup.object({
       name: Yup.string()
-        .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
-        .required('name is required')
+        .min(1, 'Must be at least 1 character')
+        .max(50, 'Must be 50 characters or less')
+        .required('Name is required')
+        .test('duplicate-name', 'Environment already exists', validateEnvironmentName)
     }),
     onSubmit: (values) => {
       dispatch(addEnvironment(values.name, collection.uid))
@@ -50,7 +56,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
         handleConfirm={onSubmit}
         handleCancel={onClose}
       >
-        <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
             <label htmlFor="name" className="block font-semibold">
               Environment Name

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

@@ -39,6 +39,11 @@ const Wrapper = styled.div`
     font-size: 0.8125rem;
   }
 
+  .tooltip-mod {
+    font-size: 11px !important;
+    width: 150px !important;
+  }
+
   input[type='text'] {
     width: 100%;
     border: solid 1px transparent;

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

@@ -1,7 +1,9 @@
-import React from 'react';
-import { IconTrash } from '@tabler/icons';
+import React, { useRef, useEffect } from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
+import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
@@ -9,12 +11,13 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { variableNameRegex } from 'utils/common/regex';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import cloneDeep from 'lodash/cloneDeep';
 import toast from 'react-hot-toast';
+import { Tooltip } from 'react-tooltip';
 
-const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables }) => {
+const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
+  const addButtonRef = useRef(null);
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -58,14 +61,15 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
 
   const ErrorMessage = ({ name }) => {
     const meta = formik.getFieldMeta(name);
-    if (!meta.error) {
+    const id = uuid();
+    if (!meta.error || !meta.touched) {
       return null;
     }
-
     return (
-      <label htmlFor={name} className="text-red-500">
-        {meta.error}
-      </label>
+      <span>
+        <IconAlertCircle id={id} className="text-red-600 cursor-pointer	" size={20} />
+        <Tooltip className="tooltip-mod" anchorId={id} html={meta.error || ''} />
+      </span>
     );
   };
 
@@ -81,10 +85,31 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
     formik.setFieldValue(formik.values.length, newVariable, false);
   };
 
+  const onActivate = () => {
+    dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
+      .then(() => {
+        if (environment) {
+          toast.success(`Environment changed to ${environment.name}`);
+          onClose();
+        } else {
+          toast.success(`No Environments are active now`);
+        }
+      })
+      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
+  };
+
   const handleRemoveVar = (id) => {
     formik.setValues(formik.values.filter((variable) => variable.uid !== id));
   };
 
+  useEffect(() => {
+    if (formik.dirty) {
+      // Smooth scrolling to the changed parameter is temporarily disabled 
+      // due to UX issues when editing the first row in a long list of environment variables.
+      // addButtonRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [formik.values, formik.dirty]);
+
   const handleReset = () => {
     formik.resetForm({ originalEnvironmentVariables });
   };
@@ -115,19 +140,21 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                   />
                 </td>
                 <td>
-                  <input
-                    type="text"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck="false"
-                    className="mousetrap"
-                    id={`${index}.name`}
-                    name={`${index}.name`}
-                    value={variable.name}
-                    onChange={formik.handleChange}
-                  />
-                  <ErrorMessage name={`${index}.name`} />
+                  <div className="flex items-center">
+                    <input
+                      type="text"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      className="mousetrap"
+                      id={`${index}.name`}
+                      name={`${index}.name`}
+                      value={variable.name}
+                      onChange={formik.handleChange}
+                    />
+                    <ErrorMessage name={`${index}.name`} />
+                  </div>
                 </td>
                 <td className="flex flex-row flex-nowrap">
                   <div className="overflow-hidden grow w-full relative">
@@ -159,20 +186,30 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
             ))}
           </tbody>
         </table>
-      </div>
-      <div>
-        <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addVariable}>
-          + Add Variable
-        </button>
+        <div>
+          <button
+            ref={addButtonRef}
+            className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
+            onClick={addVariable}
+          >
+            + Add Variable
+          </button>
+        </div>
       </div>
 
-      <div>
-        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
+      <div className="flex items-center">
+        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit}>
+          <IconDeviceFloppy size={16} strokeWidth={1.5} className="mr-1" />
           Save
         </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset}>
+        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset}>
+          <IconRefresh size={16} strokeWidth={1.5} className="mr-1" />
           Reset
         </button>
+        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate}>
+          <IconCircleCheck size={16} strokeWidth={1.5} className="mr-1" />
+          Activate
+        </button>
       </div>
     </StyledWrapper>
   );

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

@@ -5,7 +5,7 @@ import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
 
-const EnvironmentDetails = ({ environment, collection, setIsModified }) => {
+const EnvironmentDetails = ({ environment, collection, setIsModified, onClose }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [openCopyModal, setOpenCopyModal] = useState(false);
@@ -38,7 +38,7 @@ const EnvironmentDetails = ({ environment, collection, setIsModified }) => {
       </div>
 
       <div>
-        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} />
+        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} onClose={onClose} />
       </div>
     </div>
   );

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

@@ -23,6 +23,10 @@ const StyledWrapper = styled.div`
     padding: 8px 10px;
     border-left: solid 2px transparent;
     text-decoration: none;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &:hover {
       text-decoration: none;

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

@@ -8,8 +8,10 @@ import ImportEnvironment from '../ImportEnvironment';
 import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from './ConfirmSwitchEnv';
+import ToolHint from 'components/ToolHint';
+import { isEqual } from 'lodash';
 
-const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified }) => {
+const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified, onClose }) => {
   const { environments } = collection;
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
@@ -23,6 +25,11 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
 
   useEffect(() => {
     if (selectedEnvironment) {
+      const _selectedEnvironment = environments?.find(env => env?.uid === selectedEnvironment?.uid);
+      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
+      if (hasSelectedEnvironmentChanged) {
+        setSelectedEnvironment(_selectedEnvironment);
+      }
       setOriginalEnvironmentVariables(selectedEnvironment.variables);
       return;
     }
@@ -103,13 +110,15 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
             {environments &&
               environments.length &&
               environments.map((env) => (
-                <div
-                  key={env.uid}
-                  className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
-                  onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
-                >
-                  <span className="break-all">{env.name}</span>
-                </div>
+                <ToolHint key={env.uid} text={env.name} toolhintId={env.uid} place="right">
+                  <div
+                    id={env.uid}
+                    className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
+                    onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
+                  >
+                      <span className="break-all">{env.name}</span>
+                  </div>
+                </ToolHint>
               ))}
             <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
               + <span>Create</span>
@@ -132,6 +141,7 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
           collection={collection}
           setIsModified={setIsModified}
           originalEnvironmentVariables={originalEnvironmentVariables}
+          onClose={onClose}
         />
       </div>
     </StyledWrapper>

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

@@ -22,6 +22,9 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
         .required('name is required')
     }),
     onSubmit: (values) => {
+      if (values.name === environment.name) {
+        return;
+      }
       dispatch(renameEnvironment(values.name, environment.uid, collection.uid))
         .then(() => {
           toast.success('Environment renamed successfully');
@@ -50,7 +53,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
         handleConfirm={onSubmit}
         handleCancel={onClose}
       >
-        <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
             <label htmlFor="name" className="block font-semibold">
               Environment Name

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

@@ -72,6 +72,7 @@ const EnvironmentSettings = ({ collection, onClose }) => {
         collection={collection}
         isModified={isModified}
         setIsModified={setIsModified}
+        onClose={onClose}
       />
     </Modal>
   );

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

@@ -6,10 +6,9 @@ import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
 import slash from 'utils/common/slash';
 
-const FilePickerEditor = ({ value, onChange, collection }) => {
-  value = value || [];
+const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false }) => {
   const dispatch = useDispatch();
-  const filenames = value
+  const filenames = (isSingleFilePicker ? [value] : value || [])
     .filter((v) => v != null && v != '')
     .map((v) => {
       const separator = isWindowsOS() ? '\\' : '/';
@@ -20,7 +19,7 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
   const title = filenames.map((v) => `- ${v}`).join('\n');
 
   const browse = () => {
-    dispatch(browseFiles())
+    dispatch(browseFiles([], [!isSingleFilePicker ? "multiSelections": ""]))
       .then((filePaths) => {
         // If file is in the collection's directory, then we use relative path
         // Otherwise, we use the absolute path
@@ -34,7 +33,7 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
           return filePath;
         });
 
-        onChange(filePaths);
+        onChange(isSingleFilePicker ? filePaths[0] : filePaths);
       })
       .catch((error) => {
         console.error(error);
@@ -42,14 +41,14 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
   };
 
   const clear = () => {
-    onChange([]);
+    onChange(isSingleFilePicker ? '' : []);
   };
 
   const renderButtonText = (filenames) => {
     if (filenames.length == 1) {
       return filenames[0];
     }
-    return filenames.length + ' files selected';
+    return filenames.length + ' file(s) selected';
   };
 
   return filenames.length > 0 ? (
@@ -66,9 +65,9 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
     </div>
   ) : (
     <button className="btn btn-secondary px-1" style={{ width: '100%' }} onClick={browse}>
-      Select Files
+      {isSingleFilePicker ? 'Select File' : 'Select Files'}
     </button>
   );
 };
 
-export default FilePickerEditor;
+export default FilePickerEditor;

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

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
+  .editing-mode {
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
   }
 `;
 

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

@@ -0,0 +1,66 @@
+import 'github-markdown-css/github-markdown.css';
+import get from 'lodash/get';
+import { updateFolderDocs } from 'providers/ReduxStore/slices/collections';
+import { useTheme } from 'providers/Theme';
+import { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
+import Markdown from 'components/MarkDown';
+import CodeEditor from 'components/CodeEditor';
+import StyledWrapper from './StyledWrapper';
+
+const Documentation = ({ collection, folder }) => {
+  const dispatch = useDispatch();
+  const { displayedTheme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
+  const [isEditing, setIsEditing] = useState(false);
+  const docs = get(folder, 'root.docs', '');
+
+  const toggleViewMode = () => {
+    setIsEditing((prev) => !prev);
+  };
+
+  const onEdit = (value) => {
+    dispatch(
+      updateFolderDocs({
+        folderUid: folder.uid,
+        collectionUid: collection.uid,
+        docs: value
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
+
+  if (!folder) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
+      <div className="editing-mode flex justify-between items-center" role="tab" onClick={toggleViewMode}>
+        {isEditing ? 'Preview' : 'Edit'}
+      </div>
+
+      {isEditing ? (
+        <div className="mt-2 flex-1 max-h-[70vh]">
+          <CodeEditor
+            collection={collection}
+            theme={displayedTheme}
+            value={docs || ''}
+            onEdit={onEdit}
+            onSave={onSave}
+            mode="application/text"
+          />
+          <button type="submit" className="submit btn btn-sm btn-secondary my-6" onClick={onSave}>
+            Save
+          </button>
+        </div>
+      ) : (
+        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default Documentation;