fix: allow popus in notification iframes

This is to allow is to allow users to open pages (like bruno downloads) from the app

.github/workflows/tests.yml

@@ -5,14 +5,13 @@ on:
   pull_request:
     branches: [main]
 
-permissions:
-  contents: read
-
 jobs:
   unit-test:
     name: Unit Tests
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -52,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

package-lock.json

@@ -50,7 +50,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -787,7 +786,6 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
       "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -818,7 +816,6 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -836,7 +833,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@babel/generator": {
@@ -1116,7 +1112,6 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
       "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.9",
@@ -7083,7 +7078,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
       "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
@@ -7096,7 +7090,6 @@
       "version": "12.2.3",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
       "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/linkify-it": "*",
@@ -7107,7 +7100,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/ms": {
@@ -7199,6 +7191,13 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/verror": {
       "version": "1.10.10",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.10.tgz",
@@ -8586,7 +8585,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/boolean": {
@@ -9417,6 +9415,229 @@
         "node": "*"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+      "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "encoding-sniffer": "^0.2.0",
+        "htmlparser2": "^9.1.0",
+        "parse5": "^7.1.2",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^6.19.5",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.17"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/cheerio-select/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/cheerio/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/cheerio/node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -10115,7 +10336,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cookie": {
@@ -10583,7 +10803,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
       "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">= 6"
@@ -11256,6 +11475,15 @@
         "domelementtype": "1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz",
+      "integrity": "sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -11718,13 +11946,25 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
       }
     },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz",
+      "integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -12739,7 +12979,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -17377,7 +17616,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0"
@@ -17782,6 +18020,106 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream/node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -21170,7 +21508,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
       "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/scheduler": {
@@ -23213,7 +23550,7 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -23229,6 +23566,15 @@
       "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
       "license": "MIT"
     },
+    "node_modules/undici": {
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.1.tgz",
+      "integrity": "sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
@@ -23757,6 +24103,27 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -23898,6 +24265,28 @@
         "node": ">= 16"
       }
     },
+    "node_modules/xml2js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
+      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/xml2js/node_modules/xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/xmlbuilder": {
       "version": "15.1.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
@@ -24019,7 +24408,7 @@
     },
     "packages/bruno-app": {
       "name": "@usebruno/app",
-      "version": "0.3.0",
+      "version": "1.39.0",
       "dependencies": {
         "@babel/preset-env": "^7.26.0",
         "@fontsource/inter": "^5.0.15",
@@ -24030,11 +24419,11 @@
         "@usebruno/common": "0.1.0",
         "@usebruno/graphql-docs": "0.1.0",
         "@usebruno/schema": "0.7.0",
-        "axios": "1.7.5",
         "classnames": "^2.3.1",
         "codemirror": "5.65.2",
         "codemirror-graphql": "2.1.1",
         "cookie": "0.7.1",
+        "dompurify": "^3.2.4",
         "escape-html": "^1.0.3",
         "file": "^0.2.2",
         "file-dialog": "^0.0.8",
@@ -24044,7 +24433,7 @@
         "graphiql": "3.7.1",
         "graphql": "^16.6.0",
         "graphql-request": "^3.7.0",
-        "httpsnippet": "^3.0.6",
+        "httpsnippet": "^3.0.9",
         "i18next": "24.1.2",
         "idb": "^7.0.0",
         "immer": "^9.0.15",
@@ -24079,6 +24468,7 @@
         "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",
@@ -24136,6 +24526,17 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "packages/bruno-app/node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "packages/bruno-cli": {
       "name": "@usebruno/cli",
       "version": "1.16.0",
@@ -24147,7 +24548,7 @@
         "@usebruno/lang": "0.12.0",
         "@usebruno/vm2": "^3.9.13",
         "aws4-axios": "^3.3.0",
-        "axios": "1.7.5",
+        "axios": "1.7.7",
         "axios-ntlm": "^1.4.2",
         "chai": "^4.3.7",
         "chalk": "^3.0.0",
@@ -24168,6 +24569,16 @@
         "bru": "bin/bru.js"
       }
     },
+    "packages/bruno-cli/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "packages/bruno-cli/node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -24210,7 +24621,7 @@
         "@usebruno/vm2": "^3.9.13",
         "about-window": "^1.15.2",
         "aws4-axios": "^3.3.0",
-        "axios": "1.7.5",
+        "axios": "1.7.7",
         "axios-ntlm": "^1.4.2",
         "chai": "^4.3.7",
         "chokidar": "^3.5.3",
@@ -24247,6 +24658,17 @@
         "dmg-license": "^1.0.11"
       }
     },
+    "packages/bruno-electron/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "packages/bruno-electron/node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -24341,10 +24763,11 @@
         "ajv": "^8.12.0",
         "ajv-formats": "^2.1.1",
         "atob": "^2.1.2",
-        "axios": "1.7.5",
+        "axios": "1.7.7",
         "btoa": "^1.2.1",
         "chai": "^4.3.7",
         "chai-string": "^1.5.0",
+        "cheerio": "^1.0.0",
         "crypto-js": "^4.1.1",
         "json-query": "^2.2.2",
         "lodash": "^4.17.21",
@@ -24354,7 +24777,8 @@
         "node-vault": "^0.10.2",
         "path": "^0.12.7",
         "quickjs-emscripten": "^0.29.2",
-        "uuid": "^9.0.0"
+        "uuid": "^9.0.0",
+        "xml2js": "^0.6.2"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^23.0.2",
@@ -24368,6 +24792,16 @@
         "@usebruno/vm2": "^3.9.13"
       }
     },
+    "packages/bruno-js/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "packages/bruno-js/node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -24445,7 +24879,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "axios": "1.7.5",
+        "axios": "1.7.7",
         "body-parser": "1.20.3",
         "cookie-parser": "^1.4.6",
         "cors": "^2.8.5",
@@ -24459,6 +24893,16 @@
         "multer": "^1.4.5-lts.1"
       }
     },
+    "packages/bruno-tests/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "packages/bruno-tests/node_modules/fast-xml-parser": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.1.tgz",

package.json

@@ -36,6 +36,7 @@
     "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",

packages/bruno-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usebruno/app",
-  "version": "0.3.0",
+  "version": "1.39.0",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev",
@@ -20,11 +20,11 @@
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
     "@usebruno/schema": "0.7.0",
-    "axios": "1.7.5",
     "classnames": "^2.3.1",
     "codemirror": "5.65.2",
     "codemirror-graphql": "2.1.1",
     "cookie": "0.7.1",
+    "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
     "file": "^0.2.2",
     "file-dialog": "^0.0.8",
@@ -34,7 +34,7 @@
     "graphiql": "3.7.1",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
-    "httpsnippet": "^3.0.6",
+    "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
@@ -69,6 +69,7 @@
     "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",

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

@@ -8,6 +8,8 @@ const StyledWrapper = styled.div`
     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 */
@@ -26,6 +28,10 @@ const StyledWrapper = styled.div`
 
   .CodeMirror-dialog {
     overflow: visible;
+    position: relative;
+    top: unset;
+    left: unset;
+
     input {
       background: transparent;
       border: 1px solid #d3d6db;

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

@@ -74,13 +74,16 @@ if (!SERVER_RENDERED) {
     'bru.setNextRequest(requestName)',
     'req.disableParsingResponseJson()',
     'bru.getRequestVar(key)',
+    'bru.runRequest(requestPathName)',
+    'bru.getAssertionResults()',
+    'bru.getTestResults()',
     'bru.sleep(ms)',
     'bru.getGlobalEnvVar(key)',
     'bru.setGlobalEnvVar(key, value)',
     'bru.runner',
     'bru.runner.setNextRequest(requestName)',
     'bru.runner.skipRequest()',
-    'bru.runner.stopExecution()'
+    'bru.runner.stopExecution()',
   ];
   CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
     const cursor = editor.getCursor();
@@ -194,8 +197,20 @@ export default class CodeEditor extends React.Component {
         'Cmd-Y': 'foldAll',
         'Ctrl-I': 'unfoldAll',
         'Cmd-I': 'unfoldAll',
-        'Ctrl-/': 'toggleComment',
-        'Cmd-/': 'toggleComment'
+        '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: {
         widget: (from, to) => {

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/Docs/StyledWrapper.js

@@ -1,14 +1,9 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.CodeMirror {
-    .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,35 +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 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"
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-          />
-          <button type="submit" className="submit btn btn-sm btn-secondary my-6" onClick={onSave}>
-            Save
-          </button>
+      <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}
+          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/StyledWrapper.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  table {
-    td {
-      &:first-child {
-        width: 120px;
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;

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,56 @@
+import React from 'react';
+import { getTotalRequestCountInCollection } from 'utils/collections/';
+import { IconFolder, IconFileOff, IconWorld, IconApi } from '@tabler/icons';
+
+const Info = ({ collection }) => {
+  const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
+
+  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">
+                {totalRequestsInCollection} request{totalRequestsInCollection !== 1 ? 's' : ''} in collection
+              </div>
+            </div>
+          </div>
+        </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,50 @@
+import React from 'react';
+import { flattenItems } from "utils/collections";
+import { IconAlertTriangle } from '@tabler/icons';
+import StyledWrapper from "./StyledWrapper";
+
+const RequestsNotLoaded = ({ collection }) => {
+  const flattenedItems = flattenItems(collection.items);
+  const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading);
+
+  if (!itemsFailedLoading?.length) {
+    return null;
+  }
+
+  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}>
+                <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

@@ -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
-            <InfoTip
-              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>
-            `}
-              infotipId="request-var"
-            />
+            </InfoTip>
           </label>
           <div className="flex items-center">
             <label className="flex items-center">

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/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/Vars/StyledWrapper.js

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  max-width: 800px;
+
   div.title {
     color: var(--color-tab-inactive);
   }

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

@@ -89,7 +89,7 @@ const VarsTable = ({ collection, vars, varType }) => {
               <td>
                 <div className="flex items-center">
                   <span>Expr</span>
-                  <InfoTip text="You can write any valid JS Template Literal here" infotipId="request-var" />
+                  <InfoTip content="You can write any valid JS Template Literal here" infotipId="request-var" />
                 </div>
               </td>
             )}

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

@@ -12,12 +12,11 @@ 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 (
@@ -97,6 +96,9 @@ const CollectionSettings = ({ collection }) => {
 
   const getTabPanel = (tab) => {
     switch (tab) {
+      case 'overview': {
+        return <Overview collection={collection} />;
+      }
       case 'headers': {
         return <Headers collection={collection} />;
       }
@@ -128,12 +130,6 @@ const CollectionSettings = ({ collection }) => {
           />
         );
       }
-      case 'docs': {
-        return <Docs collection={collection} />;
-      }
-      case 'info': {
-        return <Info collection={collection} />;
-      }
     }
   };
 
@@ -146,6 +142,9 @@ 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>}
@@ -177,13 +176,6 @@ const CollectionSettings = ({ collection }) => {
           Client Certificates
           {clientCertConfig.length > 0 && <ContentIndicator />}
         </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
-          Docs
-          {hasDocs && <ContentIndicator />}
-        </div>
-        <div className={getTabClassname('info')} role="tab" onClick={() => setTab('info')}>
-          Info
-        </div>
       </div>
       <section className="mt-4 h-full">{getTabPanel(tab)}</section>
     </StyledWrapper>

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

@@ -78,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/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/Vars/VarsTable/index.js

@@ -88,7 +88,7 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
               <td>
                 <div className="flex items-center">
                   <span>Expr</span>
-                  <InfoTip text="You can write any valid JS expression here" infotipId="response-var" />
+                  <InfoTip content="You can write any valid JS expression here" infotipId="response-var" />
                 </div>
               </td>
             )}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip as ReactInfoTip } from 'react-tooltip';
 
-const InfoTip = ({ text, infotipId }) => {
+const InfoTip = ({ html: _ignored, infotipId, ...props }) => {
   return (
     <>
       <svg
@@ -17,7 +17,7 @@ const InfoTip = ({ text, infotipId }) => {
         <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
         <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
       </svg>
-      <ReactInfoTip anchorId={infotipId} html={text} />
+      <ReactInfoTip anchorId={infotipId} {...props} />
     </>
   );
 };

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

@@ -9,7 +9,6 @@ const StyledMarkdownBodyWrapper = styled.div`
     box-sizing: border-box;
     height: 100%;
     margin: 0 auto;
-    padding-top: 0.5rem;
     font-size: 0.875rem;
 
     h1 {
@@ -55,7 +54,7 @@ const StyledMarkdownBodyWrapper = styled.div`
       height: 1px;
       padding: 0;
       margin: 24px 0;
-      background-color: var(--color-border-default);
+      background-color: var(--color-sidebar-collection-item-active-indent-border);
       border: 0;
     }
 
@@ -80,12 +79,6 @@ const StyledMarkdownBodyWrapper = styled.div`
       }
     }
   }
-
-  @media (max-width: 767px) {
-    .markdown-body {
-      padding: 15px;
-    }
-  }
 `;
 
 export default StyledMarkdownBodyWrapper;

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

@@ -62,7 +62,7 @@ const Modal = ({
   confirmText,
   cancelText,
   handleCancel,
-  handleConfirm,
+  handleConfirm = () => {},
   children,
   confirmDisabled,
   hideCancel,
@@ -92,7 +92,7 @@ const Modal = ({
   };
 
   useFocusTrap(modalRef);
-  
+
   const closeModal = (args) => {
     setIsClosing(true);
     setTimeout(() => handleCancel(args), closeModalFadeTimeout);
@@ -103,7 +103,7 @@ const Modal = ({
     return () => {
       document.removeEventListener('keydown', handleKeydown);
     };
-  }, [disableEscapeKey, document]);
+  }, [disableEscapeKey, document, handleConfirm]);
 
   let classes = 'bruno-modal';
   if (isClosing) {

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import StyledWrapper from './StyleWrapper';
 import Modal from 'components/Modal/index';
 import { useEffect } from 'react';
+import { useApp } from 'providers/App';
 import {
   fetchNotifications,
   markAllNotificationsAsRead,
@@ -11,18 +12,18 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { humanizeDate, relativeDate } from 'utils/common';
 import ToolHint from 'components/ToolHint';
-import { useTheme } from 'providers/Theme';
+import DOMPurify from 'dompurify';
 
 const PAGE_SIZE = 5;
 
 const Notifications = () => {
   const dispatch = useDispatch();
+  const { version } = useApp();
   const notifications = useSelector((state) => state.notifications.notifications);
 
   const [showNotificationsModal, setShowNotificationsModal] = useState(false);
   const [selectedNotification, setSelectedNotification] = useState(null);
   const [pageNumber, setPageNumber] = useState(1);
-  const { storedTheme } = useTheme();
 
   const notificationsStartIndex = (pageNumber - 1) * PAGE_SIZE;
   const notificationsEndIndex = pageNumber * PAGE_SIZE;
@@ -30,7 +31,9 @@ const Notifications = () => {
   const unreadNotifications = notifications.filter((notification) => !notification.read);
 
   useEffect(() => {
-    dispatch(fetchNotifications());
+    dispatch(fetchNotifications({
+      currentVersion: version
+    }));
   }, []);
 
   useEffect(() => {
@@ -66,6 +69,13 @@ const Notifications = () => {
     dispatch(markNotificationAsRead({ notificationId: notification?.id }));
   };
 
+  const getSanitizedDescription = (description) => {
+    return DOMPurify.sanitize(encodeURIComponent(description), {
+      ALLOWED_TAGS: ['a', 'ul', 'img', 'li', 'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      ALLOWED_ATTR: ['href', 'style', 'target', 'src', 'alt']
+    });
+  };
+
   const modalCustomHeader = (
     <div className="flex flex-row gap-8">
       <div>NOTIFICATIONS</div>
@@ -90,7 +100,9 @@ const Notifications = () => {
       <a
         className="relative cursor-pointer"
         onClick={() => {
-          dispatch(fetchNotifications());
+          dispatch(fetchNotifications({
+            currentVersion: version
+          }));
           setShowNotificationsModal(true);
         }}
         aria-label="Check all Notifications"
@@ -179,10 +191,11 @@ const Notifications = () => {
                   <div className="w-full notification-date text-xs mb-4">
                     {humanizeDate(selectedNotification?.date)}
                   </div>
-                  <div
-                    className="flex w-full flex-col flex-wrap h-fit"
-                    dangerouslySetInnerHTML={{ __html: selectedNotification?.description }}
-                  ></div>
+                  <iframe
+                    src={`data:text/html,${getSanitizedDescription(selectedNotification?.description)}`}
+                    sandbox="allow-popups"
+                    style={{ width: '100%', height: '100%' }}
+                  ></iframe>
                 </div>
               </div>
             ) : (

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

@@ -0,0 +1,65 @@
+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(2) {
+        width: 45%;
+      }
+
+      &:nth-child(3) {
+        width: 25%;
+      }
+
+      &:nth-child(4) {
+        width: 70px;
+      }
+    }
+  }
+
+  .btn-add-param {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    color: ${(props) => props.theme.table.input.color};
+    background: transparent;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='radio'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react';
+import { get, cloneDeep, isArray } from 'lodash';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { addFile as _addFile, updateFile, deleteFile } from 'providers/ReduxStore/slices/collections/index';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import FilePickerEditor from 'components/FilePickerEditor/index';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+
+const FileBody = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const params = item.draft ? get(item, 'draft.request.body.file') : get(item, 'request.body.file');
+
+  const [enabledFileUid, setEnableFileUid] = useState(params && params.length ? params[0].uid : '');
+
+  const addFile = () => {
+    dispatch(
+      _addFile({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+
+  const handleParamChange = (e, _param, type) => {
+    const param = cloneDeep(_param);
+    switch (type) {
+      case 'filePath': {
+        param.filePath = e.target.filePath;
+        param.contentType = "";
+        break;
+      }
+      case 'contentType': {
+        param.contentType = e.target.contentType;
+        break;
+      }
+      case 'selected': {
+        param.selected = e.target.selected;
+        setEnableFileUid(param.uid)
+        break;
+      }
+    }
+    dispatch(
+      updateFile({
+        param: param,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleRemoveParams = (param) => {
+    dispatch(
+      deleteFile({
+        paramUid: param.uid,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <table>
+        <thead>
+          <tr>
+            <td>
+              <div className="flex items-center justify-center">File</div>
+            </td>
+            <td>
+              <div className="flex items-center justify-center">Content-Type</div>
+            </td>
+            <td>
+              <div className="flex items-center justify-center">Selected</div>
+            </td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid}>
+                    <td>
+                      <FilePickerEditor
+                        isSingleFilePicker={true}
+                        value={param.filePath}
+                        onChange={(path) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                filePath: path
+                              }
+                            },
+                            param,
+                            'filePath'
+                          )
+                        }
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <SingleLineEditor
+                        className="flex items-center justify-center"
+                        onSave={onSave}
+                        theme={storedTheme}
+                        placeholder="Auto"
+                        value={param.contentType}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                contentType: newValue
+                              }
+                            },
+                            param,
+                            'contentType'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center">
+                        <input
+                          key={param.uid}
+                          type="radio"
+                          name="selected"
+                          checked={enabledFileUid === param.uid || param.selected}
+                          tabIndex="-1"
+                          className="mr-1 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'selected')}
+                        />
+                      </div>
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center">
+                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
+      <div>
+        <button className="btn-add-param text-link pr-2 pt-3 select-none" onClick={addFile}>
+          + Add File
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default FileBody;

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

@@ -154,7 +154,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         </div>
         <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
       </div>
-      <section className="flex w-full mt-5 flex-1">{getTabPanel(focusedTab.requestPaneTab)}</section>
+      <section className="flex w-full mt-5 flex-1 relative">{getTabPanel(focusedTab.requestPaneTab)}</section>
     </StyledWrapper>
   );
 };

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

@@ -49,7 +49,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <StyledWrapper className="w-full relative">
+    <>
       <button
         className="btn-add-param text-link px-4 py-4 select-none absolute top-0 right-0 z-10"
         onClick={onPrettify}
@@ -68,7 +68,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
         onRun={onRun}
         onSave={onSave}
       />
-    </StyledWrapper>
+    </>
   );
 };
 

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

@@ -176,8 +176,7 @@ const QueryParams = ({ item, collection }) => {
         </button>
         <div className="mb-2 title text-xs flex items-stretch">
           <span>Path</span>
-          <InfoTip
-            text={`
+          <InfoTip infotipId="path-param-InfoTip">
             <div>
               Path variables are automatically added whenever the
               <code className="font-mono mx-2">:name</code>
@@ -186,9 +185,7 @@ const QueryParams = ({ item, collection }) => {
                 https://example.com/v1/users/<span>:id</span>
               </code>
             </div>
-          `}
-            infotipId="path-param-InfoTip"
-          />
+          </InfoTip>
         </div>
         <table>
           <thead>

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

@@ -128,6 +128,15 @@ const RequestBodyMode = ({ item, collection }) => {
             SPARQL
           </div>
           <div className="label-item font-medium">Other</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('file');
+            }}
+          >
+            File / Binary
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {

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

@@ -8,6 +8,7 @@ import { useTheme } from 'providers/Theme';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
+import FileBody from '../FileBody/index';
 
 const RequestBody = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -62,6 +63,10 @@ const RequestBody = ({ item, collection }) => {
     );
   }
 
+  if (bodyMode === 'file') {
+    return <FileBody item={item} collection={collection}/>
+  }
+
   if (bodyMode === 'formUrlEncoded') {
     return <FormUrlEncodedParams item={item} collection={collection} />;
   }
@@ -72,4 +77,4 @@ const RequestBody = ({ item, collection }) => {
 
   return <StyledWrapper className="w-full">No Body</StyledWrapper>;
 };
-export default RequestBody;
+export default RequestBody;

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

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
-  }
-`;
-
-export default StyledWrapper;

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

@@ -5,7 +5,6 @@ import CodeEditor from 'components/CodeEditor';
 import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
 
 const Tests = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -28,19 +27,17 @@ const Tests = ({ item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <StyledWrapper className="w-full">
-      <CodeEditor
-        collection={collection}
-        value={tests || ''}
-        theme={displayedTheme}
-        font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
-        onEdit={onEdit}
-        mode="javascript"
-        onRun={onRun}
-        onSave={onSave}
-      />
-    </StyledWrapper>
+    <CodeEditor
+      collection={collection}
+      value={tests || ''}
+      theme={displayedTheme}
+      font={get(preferences, 'font.codeFont', 'default')}
+      fontSize={get(preferences, 'font.codeFontSize')}
+      onEdit={onEdit}
+      mode="javascript"
+      onRun={onRun}
+      onSave={onSave}
+    />
   );
 };
 

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

@@ -98,7 +98,7 @@ const VarsTable = ({ item, collection, vars, varType }) => {
           ) : (
               <div className="flex items-center">
                 <span>Expr</span>
-                <InfoTip text="You can write any valid JS expression here" infotipId="response-var" />
+                <InfoTip content="You can write any valid JS expression here" infotipId="response-var" />
               </div>
           ), accessor: 'value', width: '46%' },
           { name: '', accessor: '', width: '14%' }

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.card {
+    background: ${(props) => props.theme.requestTabPanel.card.bg};
+    border: 1px solid ${(props) => props.theme.requestTabPanel.card.border};
+
+    div.hr {
+      border-bottom: 1px solid ${(props) => props.theme.requestTabPanel.card.hr};
+      height: 1px;
+    }
+
+    div.border-top {
+      border-top: 1px solid ${(props) => props.theme.requestTabPanel.card.border};
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,47 @@
+import { IconLoader2, IconFile } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const RequestIsLoading = ({ item }) => {
+  return <StyledWrapper>
+    <div className='flex flex-col p-4'>
+      <div className='card shadow-sm rounded-md p-4 w-[600px]'>
+        <div>
+          <div className='font-medium flex items-center gap-2 pb-4'>
+            <IconFile size={16} strokeWidth={1.5} className="text-gray-400" />
+            File Info
+          </div>
+          <div className='hr'/>
+
+          <div className='flex items-center mt-2'>
+            <span className='w-12 mr-2 text-muted'>Name:</span>
+            <div>
+              {item?.name}
+            </div>
+          </div>
+          
+          <div className='flex items-center mt-1'>
+            <span className='w-12 mr-2 text-muted'>Path:</span>
+            <div className='break-all'>
+              {item?.pathname}
+            </div>
+          </div>
+          
+          <div className='flex items-center mt-1 pb-4'>
+            <span className='w-12 mr-2 text-muted'>Size:</span>
+            <div>
+              {item?.size?.toFixed?.(2)} MB
+            </div>
+          </div>
+
+          <div className='hr'/>
+          <div className='flex items-center gap-2 mt-4'>
+            <IconLoader2 className="animate-spin" size={16} strokeWidth={2} />
+            <span>Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </StyledWrapper>
+}
+
+export default RequestIsLoading;

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.card {
+    background: ${(props) => props.theme.requestTabPanel.card.bg};
+    border: 1px solid ${(props) => props.theme.requestTabPanel.card.border};
+
+    div.hr {
+      border-bottom: 1px solid ${(props) => props.theme.requestTabPanel.card.hr};
+      height: 1px;
+    }
+
+    div.border-top {
+      border-top: 1px solid ${(props) => props.theme.requestTabPanel.card.border};
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,83 @@
+import { IconLoader2, IconFile, IconAlertTriangle } from '@tabler/icons';
+import { loadRequest, loadRequestViaWorker } from 'providers/ReduxStore/slices/collections/actions';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+
+const RequestNotLoaded = ({ collection, item }) => {
+  const dispatch = useDispatch();
+  const handleLoadRequestViaWorker = () => {
+    !item?.loading && dispatch(loadRequestViaWorker({ collectionUid: collection?.uid, pathname: item?.pathname }));
+  }
+
+  const handleLoadRequest = () => {
+    !item?.loading && dispatch(loadRequest({ collectionUid: collection?.uid, pathname: item?.pathname }));
+  }
+
+  return <StyledWrapper>
+    <div className='flex flex-col p-4'>
+      <div className='card shadow-sm rounded-md p-4 w-[685px]'>
+        <div>
+          <div className='font-medium flex items-center gap-2 pb-4'>
+            <IconFile size={16} strokeWidth={1.5} className="text-gray-400" />
+            File Info
+          </div>
+          <div className='hr'/>
+
+          <div className='flex items-center mt-2'>
+            <span className='w-12 mr-2 text-muted'>Name:</span>
+            <div>{item?.name}</div>
+          </div>
+          
+          <div className='flex items-center mt-1'>
+            <span className='w-12 mr-2 text-muted'>Path:</span>
+            <div className='break-all'>{item?.pathname}</div>
+          </div>
+          
+          <div className='flex items-center mt-1 pb-4'>
+            <span className='w-12 mr-2 text-muted'>Size:</span>
+            <div>{item?.size?.toFixed?.(2)} MB</div>
+          </div>
+
+          {!item?.error && (
+            <div className='flex flex-col'>
+              <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>The request wasn't loaded due to its large size. Please try again with the following options:</span>
+              </div>
+              <div className='flex flex-row mt-6 gap-2 items-center w-full'>
+                  <button 
+                    className={`submit btn btn-sm btn-secondary w-fit h-fit flex flex-row gap-2 ${item?.loading? 'opacity-50 cursor-blocked': ''}`} 
+                    onClick={handleLoadRequestViaWorker}
+                  >
+                    Load in background
+                  </button>
+                <p>(Runs in background)</p>
+              </div>
+              <div className='flex flex-row mt-6 items-center gap-2 w-full'>
+                  <button 
+                    className={`submit btn btn-sm btn-secondary w-fit h-fit flex flex-row gap-2 ${item?.loading? 'opacity-50 cursor-blocked': ''}`} 
+                    onClick={handleLoadRequest}
+                  >
+                    Force load
+                  </button>
+                  <p>(May cause the app to freeze temporarily while it runs)</p>
+              </div>
+            </div>
+          )}
+
+          {item?.loading && (
+            <>
+              <div className='hr mt-4'/>
+              <div className='flex items-center gap-2 mt-4'>
+                <IconLoader2 className="animate-spin" size={16} strokeWidth={2} />
+                <span>Loading...</span>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  </StyledWrapper>
+}
+
+export default RequestNotLoaded;

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

@@ -22,6 +22,9 @@ import SecuritySettings from 'components/SecuritySettings';
 import FolderSettings from 'components/FolderSettings';
 import { getGlobalEnvironmentVariables, getGlobalEnvironmentVariablesMasked } from 'utils/collections/index';
 import { produce } from 'immer';
+import CollectionOverview from 'components/CollectionSettings/Overview';
+import RequestNotLoaded from './RequestNotLoaded';
+import RequestIsLoading from './RequestIsLoading';
 
 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
@@ -153,6 +156,11 @@ const RequestTabPanel = () => {
   if (focusedTab.type === 'collection-settings') {
     return <CollectionSettings collection={collection} />;
   }
+
+  if (focusedTab.type === 'collection-overview') {
+    return <CollectionOverview collection={collection} />;
+  }
+
   if (focusedTab.type === 'folder-settings') {
     const folder = findItemInCollection(collection, focusedTab.folderUid);
     return <FolderSettings collection={collection} folder={folder} />;
@@ -167,6 +175,14 @@ const RequestTabPanel = () => {
     return <RequestNotFound itemUid={activeTabUid} />;
   }
 
+  if (item?.partial) {
+    return <RequestNotLoaded item={item} collection={collection} />
+  }
+
+  if (item?.loading) {
+    return <RequestIsLoading item={item} />
+  }
+
   const handleRun = async () => {
     dispatch(sendRequest(item, collection.uid)).catch((err) =>
       toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {

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

@@ -35,7 +35,7 @@ const CollectionToolBar = ({ collection }) => {
   const viewCollectionSettings = () => {
     dispatch(
       addTab({
-        uid: uuid(),
+        uid: collection.uid,
         collectionUid: collection.uid,
         type: 'collection-settings'
       })

packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js

@@ -2,10 +2,18 @@ import React from 'react';
 import CloseTabIcon from './CloseTabIcon';
 import { IconVariable, IconSettings, IconRun, IconFolder, IconShieldLock } from '@tabler/icons';
 
-const SpecialTab = ({ handleCloseClick, type, tabName }) => {
+const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick }) => {
   const getTabInfo = (type, tabName) => {
     switch (type) {
       case 'collection-settings': {
+        return (
+          <div onDoubleClick={handleDoubleClick} className="flex items-center flex-nowrap overflow-hidden">
+            <IconSettings size={18} strokeWidth={1.5} className="text-yellow-600" />
+            <span className="ml-1 leading-6">Collection</span>
+          </div>
+        );
+      }
+      case 'collection-overview': {
         return (
           <>
             <IconSettings size={18} strokeWidth={1.5} className="text-yellow-600" />
@@ -23,7 +31,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName }) => {
       }
       case 'folder-settings': {
         return (
-          <div className="flex items-center flex-nowrap overflow-hidden">
+          <div onDoubleClick={handleDoubleClick} className="flex items-center flex-nowrap overflow-hidden">
             <IconFolder size={18} strokeWidth={1.5} className="text-yellow-600 min-w-[18px]" />
             <span className="ml-1 leading-6 truncate">{tabName || 'Folder'}</span>
           </div>

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, Fragment } from 'react';
 import get from 'lodash/get';
-import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { closeTabs, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
@@ -70,16 +70,16 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
   };
 
   const folder = folderUid ? findItemInCollection(collection, folderUid) : null;
-  if (['collection-settings', 'folder-settings', 'variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
+  if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
     return (
       <StyledWrapper
-        className="flex items-center justify-between tab-container px-1"
+        className={`flex items-center justify-between tab-container px-1 ${tab.preview ? "italic" : ""}`}
         onMouseUp={handleMouseUp} // Add middle-click behavior here
       >
         {tab.type === 'folder-settings' ? (
-          <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} tabName={folder?.name} />
+          <SpecialTab handleCloseClick={handleCloseClick} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} tabName={folder?.name} />
         ) : (
-          <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} />
+          <SpecialTab handleCloseClick={handleCloseClick} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} />
         )}
       </StyledWrapper>
     );
@@ -144,8 +144,9 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
         />
       )}
       <div
-        className="flex items-baseline tab-label pl-2"
+        className={`flex items-baseline tab-label pl-2 ${tab.preview ? "italic" : ""}`}
         onContextMenu={handleRightClick}
+        onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
         onMouseUp={(e) => {
           if (!item.draft) return handleMouseUp(e);
 

packages/bruno-app/src/components/RunnerResults/index.jsx

@@ -9,6 +9,7 @@ import { IconRefresh, IconCircleCheck, IconCircleX, IconCheck, IconX, IconRun }
 import slash from 'utils/common/slash';
 import ResponsePane from './ResponsePane';
 import StyledWrapper from './StyledWrapper';
+import { areItemsLoading } from 'utils/collections';
 
 const getRelativePath = (fullPath, pathname) => {
   // convert to unix style path
@@ -106,6 +107,8 @@ export default function RunnerResults({ collection }) {
     return (item.status !== 'error' && item.testStatus === 'fail') || item.assertionStatus === 'fail';
   });
 
+  let isCollectionLoading = areItemsLoading(collection);
+
   if (!items || !items.length) {
     return (
       <StyledWrapper className="px-4 pb-4">
@@ -116,7 +119,7 @@ export default function RunnerResults({ collection }) {
         <div className="mt-6">
           You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
         </div>
-
+        {isCollectionLoading ? <div className='my-1 danger'>Requests in this collection are still loading.</div> : null}
         <div className="mt-6">
           <label>Delay (in ms)</label>
           <input

packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js

@@ -127,7 +127,7 @@ const CloneCollection = ({ onClose, collection }) => {
           <label htmlFor="collection-folder-name" className="flex items-center mt-3">
             <span className="font-semibold">Folder Name</span>
             <InfoTip
-              text="This folder will be created under the selected location"
+              content="This folder will be created under the selected location"
               infotipId="collection-folder-name-infotip"
             />
           </label>

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemIcon/StyledWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .partial {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+  .error {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemIcon/index.js

@@ -0,0 +1,21 @@
+import RequestMethod from "../RequestMethod";
+import { IconLoader2, IconAlertTriangle, IconAlertCircle } from '@tabler/icons';
+import StyledWrapper from "./StyledWrapper";
+
+const CollectionItemIcon = ({ item }) => {
+  if (item?.error) {
+    return <StyledWrapper><IconAlertCircle className="w-fit mr-2 error" size={18} strokeWidth={1.5} /></StyledWrapper>;
+  }
+
+  if (item?.loading) {
+    return <IconLoader2 className="animate-spin w-fit mr-2" size={18} strokeWidth={1.5} />;
+  }
+
+  if (item?.partial) {
+    return <StyledWrapper><IconAlertTriangle size={18} className="w-fit mr-2 partial" strokeWidth={1.5} /></StyledWrapper>;
+  }
+
+  return <RequestMethod item={item} />;
+};
+
+export default CollectionItemIcon;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/StyledWrapper.js

@@ -4,6 +4,9 @@ const Wrapper = styled.div`
   .bruno-modal-content {
     padding-bottom: 1rem;
   }
+  .warning {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
 `;
 
 export default Wrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js

@@ -7,6 +7,7 @@ import { addTab } from 'providers/ReduxStore/slices/tabs';
 import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/actions';
 import { flattenItems } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
+import { areItemsLoading } from 'utils/collections';
 
 const RunCollectionItem = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
@@ -32,6 +33,10 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
   const flattenedItems = flattenItems(item ? item.items : collection.items);
   const recursiveRunLength = getRequestsCount(flattenedItems);
 
+  const isFolderLoading = areItemsLoading(item);
+  console.log(item);
+  console.log(isFolderLoading);
+
   return (
     <StyledWrapper>
       <Modal size="md" title="Collection Runner" hideFooter={true} handleCancel={onClose}>
@@ -44,13 +49,12 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
               <span className="ml-1 text-xs">({runLength} requests)</span>
             </div>
             <div className="mb-8">This will only run the requests in this folder.</div>
-
             <div className="mb-1">
               <span className="font-medium">Recursive Run</span>
               <span className="ml-1 text-xs">({recursiveRunLength} requests)</span>
             </div>
-            <div className="mb-8">This will run all the requests in this folder and all its subfolders.</div>
-
+            <div className={isFolderLoading ? "mb-2" : "mb-8"}>This will run all the requests in this folder and all its subfolders.</div>
+            {isFolderLoading ? <div className='mb-8 warning'>Requests in this folder are still loading.</div> : null}
             <div className="flex justify-end bruno-modal-footer">
               <span className="mr-3">
                 <button type="button" onClick={onClose} className="btn btn-md btn-close">

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -5,13 +5,12 @@ import classnames from 'classnames';
 import { useDrag, useDrop } from 'react-dnd';
 import { IconChevronRight, IconDots } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
-import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
-import { moveItem, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { addTab, focusTab, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
+import { moveItem, showInFolder, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { collectionFolderClicked } from 'providers/ReduxStore/slices/collections';
 import Dropdown from 'components/Dropdown';
 import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
-import RequestMethod from './RequestMethod';
 import RenameCollectionItem from './RenameCollectionItem';
 import CloneCollectionItem from './CloneCollectionItem';
 import DeleteCollectionItem from './DeleteCollectionItem';
@@ -24,13 +23,16 @@ import { hideHomePage } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
 import NetworkError from 'components/ResponsePane/NetworkError/index';
-import { uuid } from 'utils/common';
+import { findItemInCollection } from 'utils/collections';
+import CollectionItemIcon from './CollectionItemIcon';
+import { scrollToTheActiveTab } from 'utils/tabs';
 
 const CollectionItem = ({ item, collection, searchText }) => {
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
   const isSidebarDragging = useSelector((state) => state.app.isDragging);
   const dispatch = useDispatch();
+  const collectionItemRef = useRef(null);
 
   const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
   const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
@@ -39,38 +41,35 @@ const CollectionItem = ({ item, collection, searchText }) => {
   const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
   const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
   const [runCollectionModalOpen, setRunCollectionModalOpen] = useState(false);
-  const [itemIsCollapsed, setItemisCollapsed] = useState(item.collapsed);
+
+  const hasSearchText = searchText && searchText?.trim()?.length;
+  const itemIsCollapsed = hasSearchText ? false : item.collapsed;
 
   const [{ isDragging }, drag] = useDrag({
-    type: `COLLECTION_ITEM_${collection.uid}`,
+    type: `collection-item-${collection.uid}`,
     item: item,
     collect: (monitor) => ({
       isDragging: monitor.isDragging()
-    })
+    }),
+    options: {
+      dropEffect: "move"
+    }
   });
 
   const [{ isOver }, drop] = useDrop({
-    accept: `COLLECTION_ITEM_${collection.uid}`,
+    accept: `collection-item-${collection.uid}`,
     drop: (draggedItem) => {
-      if (draggedItem.uid !== item.uid) {
-        dispatch(moveItem(collection.uid, draggedItem.uid, item.uid));
-      }
+      dispatch(moveItem(collection.uid, draggedItem.uid, item.uid));
     },
     canDrop: (draggedItem) => {
       return draggedItem.uid !== item.uid;
     },
     collect: (monitor) => ({
-      isOver: monitor.isOver()
-    })
+      isOver: monitor.isOver(),
+    }),
   });
 
-  useEffect(() => {
-    if (searchText && searchText.length) {
-      setItemisCollapsed(false);
-    } else {
-      setItemisCollapsed(item.collapsed);
-    }
-  }, [searchText, item]);
+  drag(drop(collectionItemRef));
 
   const dropdownTippyRef = useRef();
   const MenuIcon = forwardRef((props, ref) => {
@@ -90,13 +89,6 @@ const CollectionItem = ({ item, collection, searchText }) => {
     'item-hovered': isOver
   });
 
-  const scrollToTheActiveTab = () => {
-    const activeTab = document.querySelector('.request-tab.active');
-    if (activeTab) {
-      activeTab.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  };
-
   const handleRun = async () => {
     dispatch(sendRequest(item, collection.uid)).catch((err) =>
       toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
@@ -106,10 +98,13 @@ const CollectionItem = ({ item, collection, searchText }) => {
   };
 
   const handleClick = (event) => {
+    if (event.detail != 1) return;
     //scroll to the active tab
     setTimeout(scrollToTheActiveTab, 50);
-
-    if (isItemARequest(item)) {
+  
+    const isRequest = isItemARequest(item);
+  
+    if (isRequest) {
       dispatch(hideHomePage());
       if (itemIsOpenedInTabs(item, tabs)) {
         dispatch(
@@ -119,20 +114,21 @@ const CollectionItem = ({ item, collection, searchText }) => {
         );
         return;
       }
+  
       dispatch(
         addTab({
           uid: item.uid,
           collectionUid: collection.uid,
-          requestPaneTab: getDefaultRequestPaneTab(item)
+          requestPaneTab: getDefaultRequestPaneTab(item),
+          type: 'request',
         })
       );
-      return;
-    }
+    } else {
       dispatch(
         addTab({
           uid: item.uid,
           collectionUid: collection.uid,
-          type: 'folder-settings'
+          type: 'folder-settings',
         })
       );
       dispatch(
@@ -141,9 +137,12 @@ const CollectionItem = ({ item, collection, searchText }) => {
           collectionUid: collection.uid
         })
       );
+    }
   };
 
-  const handleFolderCollapse = () => {
+  const handleFolderCollapse = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
     dispatch(
       collectionFolderClicked({
         itemUid: item.uid,
@@ -163,10 +162,6 @@ const CollectionItem = ({ item, collection, searchText }) => {
     }
   };
 
-  const handleDoubleClick = (event) => {
-    setRenameItemModalOpen(true);
-  };
-
   let indents = range(item.depth);
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
   const isFolder = isItemAFolder(item);
@@ -187,6 +182,10 @@ const CollectionItem = ({ item, collection, searchText }) => {
     }
   }
 
+  const handleDoubleClick = (event) => {
+    dispatch(makeTabPermanent({ uid: item.uid }))
+  };
+
   // we need to sort request items by seq property
   const sortRequestItems = (items = []) => {
     return items.sort((a, b) => a.seq - b.seq);
@@ -227,6 +226,13 @@ const CollectionItem = ({ item, collection, searchText }) => {
     }
   };
 
+  const handleShowInFolder = () => {
+    dispatch(showInFolder(item.pathname)).catch((error) => {
+      console.error('Error opening the folder', error);
+      toast.error('Error opening the folder');
+    });
+  };
+
   const requestItems = sortRequestItems(filter(item.items, (i) => isItemARequest(i)));
   const folderItems = sortFolderItems(filter(item.items, (i) => isItemAFolder(i)));
 
@@ -253,7 +259,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
       {generateCodeItemModalOpen && (
         <GenerateCodeItem collection={collection} item={item} onClose={() => setGenerateCodeItemModalOpen(false)} />
       )}
-      <div className={itemRowClassName} ref={(node) => drag(drop(node))}>
+      <div className={itemRowClassName} ref={collectionItemRef}>
         <div className="flex items-center h-full w-full">
           {indents && indents.length
             ? indents.map((i) => {
@@ -280,6 +286,9 @@ const CollectionItem = ({ item, collection, searchText }) => {
             style={{
               paddingLeft: 8
             }}
+            onClick={handleClick}
+            onContextMenu={handleRightClick}
+            onDoubleClick={handleDoubleClick}
           >
             <div style={{ width: 16, minWidth: 16 }}>
               {isFolder ? (
@@ -294,12 +303,9 @@ const CollectionItem = ({ item, collection, searchText }) => {
             </div>
 
             <div 
-              className="ml-1 flex items-center overflow-hidden flex-1" 
-              onClick={handleClick}
-              onContextMenu={handleRightClick}
-              onDoubleClick={handleDoubleClick}
+              className="ml-1 flex w-full h-full items-center overflow-hidden"
             >
-              <RequestMethod item={item} />
+              <CollectionItemIcon item={item} />
               <span className="item-name" title={item.name}>
                 {item.name}
               </span>
@@ -378,6 +384,15 @@ const CollectionItem = ({ item, collection, searchText }) => {
                   Generate Code
                 </div>
               )}
+              <div
+                className="dropdown-item"
+                onClick={(e) => {
+                  dropdownTippyRef.current.hide();
+                  handleShowInFolder();
+                }}
+              >
+                Show in Folder
+              </div>
               <div
                 className="dropdown-item delete-item"
                 onClick={(e) => {
@@ -421,4 +436,4 @@ const CollectionItem = ({ item, collection, searchText }) => {
   );
 };
 
-export default CollectionItem;
+export default CollectionItem;

packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js

@@ -12,6 +12,17 @@ const Wrapper = styled.div`
       transform: rotateZ(90deg);
     }
 
+    &.item-hovered {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+      .collection-actions {
+        .dropdown {
+          div[aria-expanded='false'] {
+            visibility: visible;
+          }
+        }
+      }
+    }
+
     .collection-actions {
       .dropdown {
         div[aria-expanded='true'] {

packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js

@@ -2,25 +2,26 @@ import React, { useState, forwardRef, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { uuid } from 'utils/common';
 import filter from 'lodash/filter';
-import { useDrop } from 'react-dnd';
-import { IconChevronRight, IconDots } from '@tabler/icons';
+import { useDrop, useDrag } from 'react-dnd';
+import { IconChevronRight, IconDots, IconLoader2 } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
-import { collectionClicked } from 'providers/ReduxStore/slices/collections';
-import { moveItemToRootOfCollection } from 'providers/ReduxStore/slices/collections/actions';
-import { useDispatch } from 'react-redux';
-import { addTab } from 'providers/ReduxStore/slices/tabs';
+import { collapseCollection } from 'providers/ReduxStore/slices/collections';
+import { mountCollection, moveItemToRootOfCollection, moveCollectionAndPersist } from 'providers/ReduxStore/slices/collections/actions';
+import { useDispatch, useSelector } from 'react-redux';
+import { addTab, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
 import CollectionItem from './CollectionItem';
 import RemoveCollection from './RemoveCollection';
 import ExportCollection from './ExportCollection';
 import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
-import { isItemAFolder, isItemARequest, transformCollectionToSaveToExportAsFile } from 'utils/collections';
-import exportCollection from 'utils/collections/export';
+import { isItemAFolder, isItemARequest } from 'utils/collections';
 
 import RenameCollection from './RenameCollection';
 import StyledWrapper from './StyledWrapper';
-import CloneCollection from './CloneCollection/index';
+import CloneCollection from './CloneCollection';
+import { areItemsLoading, findItemInCollection } from 'utils/collections';
+import { scrollToTheActiveTab } from 'utils/tabs';
 
 const Collection = ({ collection, searchText }) => {
   const [showNewFolderModal, setShowNewFolderModal] = useState(false);
@@ -29,8 +30,10 @@ const Collection = ({ collection, searchText }) => {
   const [showCloneCollectionModalOpen, setShowCloneCollectionModalOpen] = useState(false);
   const [showExportCollectionModal, setShowExportCollectionModal] = useState(false);
   const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false);
-  const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed);
+  const tabs = useSelector((state) => state.tabs.tabs);
   const dispatch = useDispatch();
+  const isLoading = areItemsLoading(collection);
+  const collectionRef = useRef(null);
 
   const menuDropdownTippyRef = useRef();
   const onMenuDropdownCreate = (ref) => (menuDropdownTippyRef.current = ref);
@@ -52,31 +55,53 @@ const Collection = ({ collection, searchText }) => {
     );
   };
 
-  useEffect(() => {
-    if (searchText && searchText.length) {
-      setCollectionIsCollapsed(false);
-    } else {
-      setCollectionIsCollapsed(collection.collapsed);
+  const ensureCollectionIsMounted = () => {
+    if (collection.mountStatus === 'unmounted') {
+      dispatch(mountCollection({
+        collectionUid: collection.uid,
+        collectionPathname: collection.pathname,
+        brunoConfig: collection.brunoConfig
+      }));
     }
-  }, [searchText, collection]);
+  }
+
+  const hasSearchText = searchText && searchText?.trim()?.length;
+  const collectionIsCollapsed = hasSearchText ? false : collection.collapsed;
 
   const iconClassName = classnames({
     'rotate-90': !collectionIsCollapsed
   });
 
   const handleClick = (event) => {
-    dispatch(collectionClicked(collection.uid));
+    if (event.detail != 1) return;
+    // Check if the click came from the chevron icon
+    const isChevronClick = event.target.closest('svg')?.classList.contains('chevron-icon');
+    setTimeout(scrollToTheActiveTab, 50);
+    
+    ensureCollectionIsMounted();
+
+    dispatch(collapseCollection(collection.uid));
+  
+    if(!isChevronClick) {
+      dispatch(
+        addTab({
+          uid: collection.uid,
+          collectionUid: collection.uid,
+          type: 'collection-settings',
+        })
+      );
+    }
   };
 
-  const handleCollapseCollection = () => {
-    dispatch(collectionClicked(collection.uid));
-    dispatch(
-      addTab({
-        uid: uuid(),
-        collectionUid: collection.uid,
-        type: 'collection-settings'
-      })
-    );
+  const handleDoubleClick = (event) => {
+    dispatch(makeTabPermanent({ uid: collection.uid }))
+  };
+
+  const handleCollectionCollapse = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    ensureCollectionIsMounted();
+    dispatch(collapseCollection(collection.uid));
   }
 
   const handleRightClick = (event) => {
@@ -93,33 +118,58 @@ const Collection = ({ collection, searchText }) => {
   const viewCollectionSettings = () => {
     dispatch(
       addTab({
-        uid: uuid(),
+        uid: collection.uid,
         collectionUid: collection.uid,
         type: 'collection-settings'
       })
     );
   };
 
+  const isCollectionItem = (itemType) => {
+    return itemType.startsWith('collection-item');
+  };
+  
+  const [{ isDragging }, drag] = useDrag({
+    type: "collection",
+    item: collection,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    options: {
+      dropEffect: "move"
+    }
+  });
+  
   const [{ isOver }, drop] = useDrop({
-    accept: `COLLECTION_ITEM_${collection.uid}`,
-    drop: (draggedItem) => {
-      dispatch(moveItemToRootOfCollection(collection.uid, draggedItem.uid));
+    accept: ["collection", `collection-item-${collection.uid}`],
+    drop: (draggedItem, monitor) => {
+      const itemType = monitor.getItemType();
+      if (isCollectionItem(itemType)) {
+        dispatch(moveItemToRootOfCollection(collection.uid, draggedItem.uid))
+      } else {
+        dispatch(moveCollectionAndPersist({draggedItem, targetItem: collection}));
+      }
     },
     canDrop: (draggedItem) => {
-      // todo need to make sure that draggedItem belongs to the collection
-      return true;
+      return draggedItem.uid !== collection.uid;
     },
     collect: (monitor) => ({
-      isOver: monitor.isOver()
-    })
+      isOver: monitor.isOver(),
+    }),
   });
 
+  drag(drop(collectionRef));
+
   if (searchText && searchText.length) {
     if (!doesCollectionHaveItemsMatchingSearchText(collection, searchText)) {
       return null;
     }
   }
 
+  const collectionRowClassName = classnames('flex py-1 collection-name items-center', {
+      'item-hovered': isOver
+    });
+
   // we need to sort request items by seq property
   const sortRequestItems = (items = []) => {
     return items.sort((a, b) => a.seq - b.seq);
@@ -149,22 +199,26 @@ const Collection = ({ collection, searchText }) => {
       {showCloneCollectionModalOpen && (
         <CloneCollection collection={collection} onClose={() => setShowCloneCollectionModalOpen(false)} />
       )}
-      <div className="flex py-1 collection-name items-center" ref={drop}>
+      <div className={collectionRowClassName}
+      ref={collectionRef}
+      >
         <div
           className="flex flex-grow items-center overflow-hidden"
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          onContextMenu={handleRightClick}
         >
           <IconChevronRight
             size={16}
             strokeWidth={2}
-            className={iconClassName}
+            className={`chevron-icon ${iconClassName}`}
             style={{ width: 16, minWidth: 16, color: 'rgb(160 160 160)' }}
-            onClick={handleClick}
+            onClick={handleCollectionCollapse}
           />
-          <div className="ml-1" id="sidebar-collection-name"    
-            onClick={handleCollapseCollection}
-            onContextMenu={handleRightClick}>
+          <div className="ml-1" id="sidebar-collection-name">
             {collection.name}
           </div>
+          {isLoading ? <IconLoader2 className="animate-spin mx-1" size={18} strokeWidth={1.5} /> : null}
         </div>
         <div className="collection-actions">
           <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">

packages/bruno-app/src/components/Sidebar/Collections/index.js

@@ -8,12 +8,10 @@ import {
   IconSortDescendingLetters,
   IconX
 } from '@tabler/icons';
-import Collection from '../Collections/Collection';
+import Collection from './Collection';
 import CreateCollection from '../CreateCollection';
 import StyledWrapper from './StyledWrapper';
 import CreateOrOpenCollection from './CreateOrOpenCollection';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { sortCollections } from 'providers/ReduxStore/slices/collections/actions';
 
 // todo: move this to a separate folder
@@ -119,9 +117,7 @@ const Collections = () => {
         {collections && collections.length
           ? collections.map((c) => {
               return (
-                <DndProvider backend={HTML5Backend} key={c.uid}>
-                  <Collection searchText={searchText} collection={c} key={c.uid} />
-                </DndProvider>
+                <Collection searchText={searchText} collection={c} key={c.uid} />
               );
             })
           : null}

packages/bruno-app/src/components/Sidebar/CreateCollection/index.js

@@ -120,7 +120,7 @@ const CreateCollection = ({ onClose }) => {
           <label htmlFor="collection-folder-name" className="flex items-center mt-3">
             <span className="font-semibold">Folder Name</span>
             <InfoTip
-              text="This folder will be created under the selected location"
+              content="This folder will be created under the selected location"
               infotipId="collection-folder-name-infotip"
             />
           </label>

packages/bruno-app/src/components/Sidebar/ImportCollection/index.js

@@ -68,7 +68,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
     );
   };
   return (
-    <Modal size="sm" title="Import Collection" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+    <Modal size="sm" title="Import Collection" hideFooter={true} handleCancel={onClose}>
       <div className="flex flex-col">
         <h3 className="text-sm">Select the type of your existing collection :</h3>
         <div className="mt-4 grid grid-rows-2 grid-flow-col gap-2">

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

@@ -5,6 +5,7 @@ import Preferences from 'components/Preferences';
 import Cookies from 'components/Cookies';
 import ToolHint from 'components/ToolHint';
 import GoldenEdition from './GoldenEdition';
+import { useApp } from 'providers/App';
 
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
@@ -20,7 +21,7 @@ const Sidebar = () => {
   const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
   const preferencesOpen = useSelector((state) => state.app.showPreferences);
   const [goldenEditionOpen, setGoldenEditionOpen] = useState(false);
-
+  const { version } = useApp();
   const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
   const [cookiesOpen, setCookiesOpen] = useState(false);
 
@@ -184,7 +185,7 @@ const Sidebar = () => {
                   Star
                 </GitHubButton> */}
               </div>
-              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.36.0</div>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v{version}</div>
             </div>
           </div>
         </div>

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

@@ -34,7 +34,7 @@ const ToolHint = ({
       <StyledWrapper theme={appliedTheme}>
         <ReactToolHint
           anchorId={toolhintId}
-          html={text}
+          content={text}
           className="toolhint"
           offset={offset}
           place={place}

packages/bruno-app/src/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './pages/index';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 
 const rootElement = document.getElementById('root');
 
@@ -8,7 +10,9 @@ if (rootElement) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <React.StrictMode>
-      <App />
+      <DndProvider backend={HTML5Backend}>
+        <App />
+      </DndProvider>
     </React.StrictMode>
   );
 }

packages/bruno-app/src/providers/App/index.js

@@ -6,11 +6,12 @@ import ConfirmAppClose from './ConfirmAppClose';
 import useIpcEvents from './useIpcEvents';
 import useTelemetry from './useTelemetry';
 import StyledWrapper from './StyledWrapper';
+import { version } from '../../../package.json';
 
 export const AppContext = React.createContext();
 
 export const AppProvider = (props) => {
-  useTelemetry();
+  useTelemetry({ version });
   useIpcEvents();
 
   const dispatch = useDispatch();
@@ -37,7 +38,7 @@ export const AppProvider = (props) => {
   }, []);
 
   return (
-    <AppContext.Provider {...props} value="appProvider">
+    <AppContext.Provider {...props} value={{ version }}>
       <StyledWrapper>
         <ConfirmAppClose />
         {props.children}
@@ -46,4 +47,12 @@ export const AppProvider = (props) => {
   );
 };
 
+export const useApp = () => {
+  const context = React.useContext(AppContext);
+  if (!context) {
+    throw new Error('useApp must be used within an AppProvider');
+  }
+  return context;
+};
+
 export default AppProvider;

packages/bruno-app/src/providers/App/useTelemetry.js

@@ -42,7 +42,7 @@ const getAnonymousTrackingId = () => {
   return id;
 };
 
-const trackStart = () => {
+const trackStart = (version) => {
   if (isPlaywrightTestRunning()) {
     return;
   }
@@ -58,16 +58,18 @@ const trackStart = () => {
     event: 'start',
     properties: {
       os: platformLib.os.family,
-      version: '1.38.1'
+      version: version
     }
   });
 };
 
-const useTelemetry = () => {
+const useTelemetry = ({ version }) => {
   useEffect(() => {
-    trackStart();
-    setInterval(trackStart, 24 * 60 * 60 * 1000);
-  }, []);
+    if (posthogApiKey && posthogApiKey.length) {
+      trackStart(version);
+      setInterval(trackStart, 24 * 60 * 60 * 1000);
+    }
+  }, [posthogApiKey]);
 };
 
 export default useTelemetry;

packages/bruno-app/src/providers/ReduxStore/index.js

@@ -6,12 +6,13 @@ import collectionsReducer from './slices/collections';
 import tabsReducer from './slices/tabs';
 import notificationsReducer from './slices/notifications';
 import globalEnvironmentsReducer from './slices/global-environments';
+import { draftDetectMiddleware } from './middlewares/draft/middleware';
 
 const isDevEnv = () => {
   return import.meta.env.MODE === 'development';
 };
 
-let middleware = [tasksMiddleware.middleware];
+let middleware = [tasksMiddleware.middleware, draftDetectMiddleware];
 if (isDevEnv()) {
   middleware = [...middleware, debugMiddleware.middleware];
 }

packages/bruno-app/src/providers/ReduxStore/middlewares/draft/middleware.js

@@ -0,0 +1,56 @@
+import { handleMakeTabParmanent } from "./utils";
+
+const actionsToIntercept = [
+  'collections/requestUrlChanged',
+  'collections/updateAuth',
+  'collections/addQueryParam',
+  'collections/moveQueryParam',
+  'collections/updateQueryParam',
+  'collections/deleteQueryParam',
+  'collections/updatePathParam',
+  'collections/addRequestHeader',
+  'collections/updateRequestHeader',
+  'collections/deleteRequestHeader',
+  'collections/moveRequestHeader',
+  'collections/addFormUrlEncodedParam',
+  'collections/updateFormUrlEncodedParam',
+  'collections/deleteFormUrlEncodedParam',
+  'collections/moveFormUrlEncodedParam',
+  'collections/addMultipartFormParam',
+  'collections/updateMultipartFormParam',
+  'collections/deleteMultipartFormParam',
+  'collections/moveMultipartFormParam',
+  'collections/updateRequestAuthMode',
+  'collections/updateRequestBodyMode',
+  'collections/updateRequestBody',
+  'collections/updateRequestGraphqlQuery',
+  'collections/updateRequestGraphqlVariables',
+  'collections/updateRequestScript',
+  'collections/updateResponseScript',
+  'collections/updateRequestTests',
+  'collections/updateRequestMethod',
+  'collections/addAssertion',
+  'collections/updateAssertion',
+  'collections/deleteAssertion',
+  'collections/moveAssertion',
+  'collections/addVar',
+  'collections/updateVar',
+  'collections/deleteVar',
+  'collections/moveVar',
+  'collections/addFolderHeader',
+  'collections/updateFolderHeader',
+  'collections/deleteFolderHeader',
+  'collections/addFolderVar',
+  'collections/updateFolderVar',
+  'collections/deleteFolderVar',
+  'collections/updateRequestDocs',
+  'collections/runRequestEvent', // TODO: This doesn't necessarily related to a draft state, need to rethink.
+];
+
+export const draftDetectMiddleware = ({ dispatch, getState }) => (next) => (action) => {
+  if (actionsToIntercept.includes(action.type)) {
+    const state = getState();
+    handleMakeTabParmanent(state, action, dispatch);
+  }
+  return next(action);
+};

packages/bruno-app/src/providers/ReduxStore/middlewares/draft/utils.js

@@ -0,0 +1,21 @@
+import { makeTabPermanent } from "providers/ReduxStore/slices/tabs";
+import { findCollectionByUid, findItemInCollection } from "utils/collections/index";
+import find from 'lodash/find';
+
+function handleMakeTabParmanent(state, action, dispatch) {
+  const tabs = state.tabs.tabs;
+  const activeTabUid = state.tabs.activeTabUid;
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  const itemUid = action.payload.itemUid || action.payload.folderUid
+  const collection = findCollectionByUid(state.collections.collections, action.payload.collectionUid);
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && focusedTab.preview == true) {
+      dispatch(makeTabPermanent({ uid: itemUid }));
+    }
+  }
+}
+
+export {
+  handleMakeTabParmanent
+}

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -21,8 +21,9 @@ import {
   transformRequestToSaveToFilesystem
 } from 'utils/collections';
 import { uuid, waitForNextTick } from 'utils/common';
-import { PATH_SEPARATOR, getDirectoryName } from 'utils/common/platform';
+import { PATH_SEPARATOR, getDirectoryName, isWindowsPath } from 'utils/common/platform';
 import { cancelNetworkRequest, sendNetworkRequest } from 'utils/network';
+import { callIpc } from 'utils/common/ipc';
 
 import {
   collectionAddEnvFileEvent as _collectionAddEnvFileEvent,
@@ -30,6 +31,8 @@ import {
   removeCollection as _removeCollection,
   selectEnvironment as _selectEnvironment,
   sortCollections as _sortCollections,
+  updateCollectionMountStatus,
+  moveCollection,
   requestCancelled,
   resetRunResults,
   responseReceived,
@@ -42,7 +45,6 @@ import { closeAllCollectionTabs } from 'providers/ReduxStore/slices/tabs';
 import { resolveRequestFilename } from 'utils/common/platform';
 import { parsePathParams, parseQueryParams, splitOnFirst } from 'utils/url/index';
 import { sendCollectionOauth2Request as _sendCollectionOauth2Request } from 'utils/network/index';
-import { name } from 'file-loader';
 import slash from 'utils/common/slash';
 import { getGlobalEnvironmentVariables } from 'utils/collections/index';
 import { findCollectionByPathname, findEnvironmentInCollectionByName } from 'utils/collections/index';
@@ -161,7 +163,6 @@ export const saveFolderRoot = (collectionUid, folderUid) => (dispatch, getState)
     if (!folder) {
       return reject(new Error('Folder not found'));
     }
-    console.log(collection);
 
     const { ipcRenderer } = window;
 
@@ -170,7 +171,6 @@ export const saveFolderRoot = (collectionUid, folderUid) => (dispatch, getState)
       pathname: folder.pathname,
       root: folder.root
     };
-    console.log(folderData);
 
     ipcRenderer
       .invoke('renderer:save-folder-root', folderData)
@@ -494,7 +494,7 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
       );
       if (!reqWithSameNameExists) {
         const dirname = getDirectoryName(item.pathname);
-        const fullName = path.join(dirname, filename);
+        const fullName = isWindowsPath(item.pathname) ? path.win32.join(dirname, filename) : path.join(dirname, filename);
         const { ipcRenderer } = window;
         const requestItems = filter(parentItem.items, (i) => i.type !== 'folder');
         itemToSave.seq = requestItems ? requestItems.length + 1 : 1;
@@ -759,7 +759,8 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
           xml: null,
           sparql: null,
           multipartForm: null,
-          formUrlEncoded: null
+          formUrlEncoded: null,
+          file: null
         },
         auth: auth ?? {
           mode: 'none'
@@ -1039,14 +1040,17 @@ export const browseDirectory = () => (dispatch, getState) => {
 };
 
 export const browseFiles =
-  (filters = []) =>
-  (dispatch, getState) => {
+  (filters, properties) =>
+  (_dispatch, _getState) => {
     const { ipcRenderer } = window;
 
     return new Promise((resolve, reject) => {
-      ipcRenderer.invoke('renderer:browse-files', filters).then(resolve).catch(reject);
+      ipcRenderer
+        .invoke('renderer:browse-files', filters, properties)
+        .then(resolve)
+        .catch(reject);
     });
-  };
+};
 
 export const updateBrunoConfig = (brunoConfig, collectionUid) => (dispatch, getState) => {
   const state = getState();
@@ -1148,6 +1152,22 @@ export const importCollection = (collection, collectionLocation) => (dispatch, g
   });
 };
 
+export const moveCollectionAndPersist = ({ draggedItem, targetItem }) => (dispatch, getState) => {
+  dispatch(moveCollection({ draggedItem, targetItem }));
+
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+    const state = getState();
+
+    const collectionPaths = state.collections.collections.map((collection) => collection.pathname);
+
+    ipcRenderer
+      .invoke('renderer:update-collection-paths', collectionPaths) 
+      .then(resolve)
+      .catch(reject);
+  });
+};
+
 export const saveCollectionSecurityConfig = (collectionUid, securityConfig) => (dispatch, getState) => {
   return new Promise((resolve, reject) => {
     const { ipcRenderer } = window;
@@ -1192,4 +1212,38 @@ export const hydrateCollectionWithUiStateSnapshot = (payload) => (dispatch, getS
         reject(error);
       }
     });
-  };
+  };
+
+export const loadRequestViaWorker = ({ collectionUid, pathname }) => (dispatch, getState) => {
+  return new Promise(async (resolve, reject) => {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('renderer:load-request-via-worker', { collectionUid, pathname }).then(resolve).catch(reject);
+  });
+};
+
+export const loadRequest = ({ collectionUid, pathname }) => (dispatch, getState) => {
+  return new Promise(async (resolve, reject) => {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('renderer:load-request', { collectionUid, pathname }).then(resolve).catch(reject);
+  });
+};
+
+export const mountCollection = ({ collectionUid, collectionPathname, brunoConfig }) => (dispatch, getState) => {
+  dispatch(updateCollectionMountStatus({ collectionUid, mountStatus: 'mounting' }));
+  return new Promise(async (resolve, reject) => {
+    callIpc('renderer:mount-collection', { collectionUid, collectionPathname, brunoConfig })
+      .then(() => dispatch(updateCollectionMountStatus({ collectionUid, mountStatus: 'mounted' })))
+      .then(resolve)
+      .catch(() => {
+        dispatch(updateCollectionMountStatus({ collectionUid, mountStatus: 'unmounted' }));
+        reject();
+      });
+  });
+};
+
+  export const showInFolder = (collectionPath) => () => {
+    return new Promise((resolve, reject) => {
+      const { ipcRenderer } = window;
+      ipcRenderer.invoke('renderer:show-in-folder', collectionPath).then(resolve).catch(reject);
+    });
+  };

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -1,10 +1,10 @@
 import { uuid } from 'utils/common';
-import { find, map, forOwn, concat, filter, each, cloneDeep, get, set } from 'lodash';
+import { find, map, forOwn, concat, filter, each, cloneDeep, get, set, findIndex } from 'lodash';
 import { createSlice } from '@reduxjs/toolkit';
 import {
   addDepth,
   areItemsTheSameExceptSeqUpdate,
-  collapseCollection,
+  collapseAllItemsInCollection,
   deleteItemInCollection,
   deleteItemInCollectionByPathname,
   findCollectionByPathname,
@@ -18,6 +18,8 @@ import {
 import { parsePathParams, parseQueryParams, splitOnFirst, stringifyQueryParams } from 'utils/url';
 import { getDirectoryName, getSubdirectoriesFromRoot, PATH_SEPARATOR } from 'utils/common/platform';
 import toast from 'react-hot-toast';
+import mime from 'mime-types';
+import path from 'node:path';
 
 const initialState = {
   collections: [],
@@ -32,9 +34,13 @@ export const collectionsSlice = createSlice({
       const collectionUids = map(state.collections, (c) => c.uid);
       const collection = action.payload;
 
-      collection.settingsSelectedTab = 'headers';
+      collection.settingsSelectedTab = 'overview';
       collection.folderLevelSettingsSelectedTab = {};
 
+      // Collection mount status is used to track the mount status of the collection
+      // values can be 'unmounted', 'mounting', 'mounted'
+      collection.mountStatus = 'unmounted';
+
       // TODO: move this to use the nextAction approach
       // last action is used to track the last action performed on the collection
       // this is optional
@@ -44,12 +50,18 @@ export const collectionsSlice = createSlice({
       collection.importedAt = new Date().getTime();
       collection.lastAction = null;
 
-      collapseCollection(collection);
+      collapseAllItemsInCollection(collection);
       addDepth(collection.items);
       if (!collectionUids.includes(collection.uid)) {
         state.collections.push(collection);
       }
     },
+    updateCollectionMountStatus: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+      if (collection) {
+        collection.mountStatus = action.payload.mountStatus;
+      }
+    },
     setCollectionSecurityConfig: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
       if (collection) {
@@ -88,6 +100,12 @@ export const collectionsSlice = createSlice({
           break;
       }
     },
+    moveCollection: (state, action) => {
+      const { draggedItem, targetItem } = action.payload;
+      state.collections = state.collections.filter((i) => i.uid !== draggedItem.uid); // Remove dragged item
+      const targetItemIndex = state.collections.findIndex((i) => i.uid === targetItem.uid); // Find target item
+      state.collections.splice(targetItemIndex, 0, draggedItem); // Insert dragged-item above target-item
+    },
     updateLastAction: (state, action) => {
       const { collectionUid, lastAction } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
@@ -358,7 +376,7 @@ export const collectionsSlice = createSlice({
         collection.items.push(item);
       }
     },
-    collectionClicked: (state, action) => {
+    collapseCollection: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload);
 
       if (collection) {
@@ -885,6 +903,76 @@ export const collectionsSlice = createSlice({
         }
       }
     },
+    addFile: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+    
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+    
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          item.draft.request.body.file = item.draft.request.body.file || [];
+    
+          item.draft.request.body.file.push({
+            uid: uuid(),
+            filePath: '',
+            contentType: '',
+            selected: false
+          });
+        }
+      }
+    },
+    updateFile: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+    
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+    
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+    
+          const param = find(item.draft.request.body.file, (p) => p.uid === action.payload.param.uid);
+    
+          if (param) {
+            const contentType = mime.contentType(path.extname(action.payload.param.filePath));
+            param.filePath = action.payload.param.filePath;
+            param.contentType = action.payload.param.contentType || contentType || '';
+            param.selected = action.payload.param.selected;
+    
+            item.draft.request.body.file = item.draft.request.body.file.map((p) => {
+              p.selected = p.uid === param.uid;
+              return p;
+            });
+          }
+        }
+      }
+    },
+    deleteFile: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+      
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+        
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          
+          item.draft.request.body.file = filter(
+            item.draft.request.body.file,
+            (p) => p.uid !== action.payload.paramUid
+          );
+    
+          if (item.draft.request.body.file.length > 0) {
+            item.draft.request.body.file[0].selected = true;
+          }
+        }
+      }
+    },
     updateRequestAuthMode: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -941,6 +1029,10 @@ export const collectionsSlice = createSlice({
               item.draft.request.body.sparql = action.payload.content;
               break;
             }
+            case 'file': {
+              item.draft.request.body.file = action.payload.content;
+              break;
+            }
             case 'formUrlEncoded': {
               item.draft.request.body.formUrlEncoded = action.payload.content;
               break;
@@ -1582,7 +1674,7 @@ export const collectionsSlice = createSlice({
               name: directoryName,
               collapsed: true,
               type: 'folder',
-              items: []
+              items: [],
             };
             currentSubItems.push(childItem);
           }
@@ -1604,6 +1696,10 @@ export const collectionsSlice = createSlice({
             currentItem.filename = file.meta.name;
             currentItem.pathname = file.meta.pathname;
             currentItem.draft = null;
+            currentItem.partial = file.partial;
+            currentItem.loading = file.loading;
+            currentItem.size = file.size;
+            currentItem.error = file.error;
           } else {
             currentSubItems.push({
               uid: file.data.uid,
@@ -1613,7 +1709,11 @@ export const collectionsSlice = createSlice({
               request: file.data.request,
               filename: file.meta.name,
               pathname: file.meta.pathname,
-              draft: null
+              draft: null,
+              partial: file.partial,
+              loading: file.loading,
+              size: file.size,
+              error: file.error
             });
           }
         }
@@ -1667,6 +1767,12 @@ export const collectionsSlice = createSlice({
           // we don't want to lose the draft in this case
           if (areItemsTheSameExceptSeqUpdate(item, file.data)) {
             item.seq = file.data.seq;
+            if (item?.draft) {
+              item.draft.seq = file.data.seq;
+            }
+            if (item?.draft && areItemsTheSameExceptSeqUpdate(item?.draft, file.data)) {
+              item.draft = null;
+            }
           } else {
             item.name = file.data.name;
             item.type = file.data.type;
@@ -1890,6 +1996,7 @@ export const collectionsSlice = createSlice({
 
 export const {
   createCollection,
+  updateCollectionMountStatus,
   setCollectionSecurityConfig,
   brunoConfigUpdateEvent,
   renameCollection,
@@ -1913,7 +2020,7 @@ export const {
   saveRequest,
   deleteRequestDraft,
   newEphemeralHttpRequest,
-  collectionClicked,
+  collapseCollection,
   collectionFolderClicked,
   requestUrlChanged,
   updateAuth,
@@ -1933,6 +2040,9 @@ export const {
   addMultipartFormParam,
   updateMultipartFormParam,
   deleteMultipartFormParam,
+  addFile,
+  updateFile,
+  deleteFile,
   moveMultipartFormParam,
   updateRequestAuthMode,
   updateRequestBodyMode,
@@ -1984,7 +2094,8 @@ export const {
   runFolderEvent,
   resetCollectionRunner,
   updateRequestDocs,
-  updateFolderDocs
+  updateFolderDocs,
+  moveCollection
 } = collectionsSlice.actions;
 
 export default collectionsSlice.reducer;

packages/bruno-app/src/providers/ReduxStore/slices/notifications.js

@@ -1,7 +1,7 @@
 import toast from 'react-hot-toast';
 import { createSlice } from '@reduxjs/toolkit';
 import { getAppInstallDate } from 'utils/common/platform';
-
+import semver from 'semver';
 const getReadNotificationIds = () => {
   try {
     let readNotificationIdsString = window.localStorage.getItem('bruno.notifications.read');
@@ -27,6 +27,26 @@ const initialState = {
   readNotificationIds: getReadNotificationIds() || []
 };
 
+export const filterNotificationsByVersion = (notifications, currentVersion) => {
+  try {
+    if (!notifications) return [];
+
+    if (!currentVersion) return notifications;
+
+    return notifications.filter(notification => {
+      const { minVersion, maxVersion } = notification;
+      if (!minVersion && !maxVersion) return true;
+      if (!minVersion) return semver.lte(currentVersion, maxVersion);
+      if (!maxVersion) return semver.gte(currentVersion, minVersion);
+
+      return semver.gte(currentVersion, minVersion) && semver.lte(currentVersion, maxVersion);
+    });
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};
+
 export const notificationSlice = createSlice({
   name: 'notifications',
   initialState,
@@ -86,13 +106,14 @@ export const notificationSlice = createSlice({
 export const { setNotifications, setFetchingStatus, markNotificationAsRead, markAllNotificationsAsRead } =
   notificationSlice.actions;
 
-export const fetchNotifications = () => (dispatch, getState) => {
+export const fetchNotifications = ({currentVersion}) => (dispatch, getState) => {
   return new Promise((resolve) => {
     const { ipcRenderer } = window;
     dispatch(setFetchingStatus(true));
     ipcRenderer
       .invoke('renderer:fetch-notifications')
       .then((notifications) => {
+        notifications = filterNotificationsByVersion(notifications, currentVersion);
         dispatch(setNotifications({ notifications }));
         dispatch(setFetchingStatus(false));
         resolve(notifications);

packages/bruno-app/src/providers/ReduxStore/slices/notifications.spec.js

@@ -0,0 +1,133 @@
+const { filterNotificationsByVersion } = require('./notifications');
+
+describe('filterNotificationsByVersion - basic', () => {
+  it('should filter notifications by version', () => {
+    const notifications = [{ minVersion: '1.0.0', maxVersion: '1.1.0' }];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([{ minVersion: '1.0.0', maxVersion: '1.1.0' }]);
+  });
+
+  it('should gracefully handle no notifications', () => {
+    const notifications = [];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([]);
+  });
+
+  it('should gracefully handle notifications are undefined', () => {
+    const notifications = undefined;
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([]);
+  });
+
+  it('should gracefully handle scenario when no current version is provided', () => {
+    const notifications = [{ minVersion: '1.0.0', maxVersion: '1.1.0' }];
+    const filteredNotifications = filterNotificationsByVersion(notifications);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should gracefully handle scenario minVersion is undefined', () => {
+    const notifications = [{ minVersion: undefined, maxVersion: '1.1.0' }];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should gracefully handle scenario maxVersion is undefined', () => {
+    const notifications = [{ minVersion: '1.0.0', maxVersion: undefined }];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should gracefully handle scenario minVersion and maxVersion are undefined', () => {
+    const notifications = [{ minVersion: undefined, maxVersion: undefined }];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+});
+
+describe('filterNotificationsByVersion - semver', () => {
+  it('should filter out notifications outside version range', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: '1.1.0' },  // should be included
+      { minVersion: '2.0.0', maxVersion: '2.1.0' },  // should be filtered out
+      { minVersion: '0.5.0', maxVersion: '0.9.0' }   // should be filtered out
+    ];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([
+      { minVersion: '1.0.0', maxVersion: '1.1.0' }
+    ]);
+  });
+
+  it('should handle mixed valid and invalid version ranges', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: '2.0.0' },  // should be included
+      { minVersion: '3.0.0', maxVersion: '4.0.0' },  // should be filtered out
+      { minVersion: '1.5.0', maxVersion: '1.8.0' },  // should be included
+      { minVersion: '0.1.0', maxVersion: '0.5.0' }   // should be filtered out
+    ];
+    const currentVersion = '1.6.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([
+      { minVersion: '1.0.0', maxVersion: '2.0.0' },
+      { minVersion: '1.5.0', maxVersion: '1.8.0' }
+    ]);
+  });
+
+  it('should handle edge cases of version ranges', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: '1.0.0' },  // should be included
+      { minVersion: '1.0.1', maxVersion: '2.0.0' },  // should be filtered out
+      { minVersion: '0.9.9', maxVersion: '1.0.0' }   // should be included
+    ];
+    const currentVersion = '1.0.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([
+      { minVersion: '1.0.0', maxVersion: '1.0.0' },
+      { minVersion: '0.9.9', maxVersion: '1.0.0' }
+    ]);
+  });
+});
+
+describe('filterNotificationsByVersion - undefined version bounds', () => {
+  it('should include notifications when minVersion is undefined and current version is below maxVersion', () => {
+    const notifications = [
+      { minVersion: undefined, maxVersion: '2.0.0' }
+    ];
+    const currentVersion = '1.5.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should exclude notifications when minVersion is undefined and current version is above maxVersion', () => {
+    const notifications = [
+      { minVersion: undefined, maxVersion: '2.0.0' }
+    ];
+    const currentVersion = '2.1.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([]);
+  });
+
+  it('should include notifications when maxVersion is undefined and current version is above minVersion', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: undefined }
+    ];
+    const currentVersion = '2.0.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should exclude notifications when maxVersion is undefined and current version is below minVersion', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: undefined }
+    ];
+    const currentVersion = '0.9.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([]);
+  });
+});

packages/bruno-app/src/providers/ReduxStore/slices/tabs.js

@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { findIndex } from 'lodash';
 import filter from 'lodash/filter';
 import find from 'lodash/find';
 import last from 'lodash/last';
@@ -19,31 +20,59 @@ export const tabsSlice = createSlice({
   initialState,
   reducers: {
     addTab: (state, action) => {
-      const alreadyExists = find(state.tabs, (tab) => tab.uid === action.payload.uid);
-      if (alreadyExists) {
+      const { uid, collectionUid, type, requestPaneTab, preview } = action.payload;
+      const nonReplaceableTabTypes = [
+        "variables",
+        "collection-runner",
+        "security-settings",
+      ];
+    
+      const existingTab = find(state.tabs, (tab) => tab.uid === uid);
+      if (existingTab) {
+        state.activeTabUid = existingTab.uid;
         return;
       }
 
-      if (
-        ['variables', 'collection-settings', 'collection-runner', 'security-settings'].includes(action.payload.type)
-      ) {
-        const tab = tabTypeAlreadyExists(state.tabs, action.payload.collectionUid, action.payload.type);
-        if (tab) {
-          state.activeTabUid = tab.uid;
+      if (nonReplaceableTabTypes.includes(type)) {
+        const existingTab = tabTypeAlreadyExists(state.tabs, collectionUid, type);
+        if (existingTab) {
+          state.activeTabUid = existingTab.uid;
           return;
         }
       }
 
+      const lastTab = state.tabs[state.tabs.length - 1];
+      if (state.tabs.length > 0 && lastTab.preview) {
+        state.tabs[state.tabs.length - 1] = {
+          uid,
+          collectionUid,
+          requestPaneWidth: null,
+          requestPaneTab: requestPaneTab || 'params',
+          responsePaneTab: 'response',
+          type: type || 'request',
+          preview: preview !== undefined
+            ? preview
+          : !nonReplaceableTabTypes.includes(type),
+          ...(uid ? { folderUid: uid } : {})
+        }
+
+        state.activeTabUid = uid;
+        return
+      }
+    
       state.tabs.push({
-        uid: action.payload.uid,
-        collectionUid: action.payload.collectionUid,
+        uid,
+        collectionUid,
         requestPaneWidth: null,
-        requestPaneTab: action.payload.requestPaneTab || 'params',
+        requestPaneTab: requestPaneTab || 'params',
         responsePaneTab: 'response',
-        type: action.payload.type || 'request',
-        ...(action.payload.uid ? { folderUid: action.payload.uid } : {})
+        type: type || 'request',
+        ...(uid ? { folderUid: uid } : {}),
+        preview: preview !== undefined
+            ? preview
+          : !nonReplaceableTabTypes.includes(type)
       });
-      state.activeTabUid = action.payload.uid;
+      state.activeTabUid = uid;
     },
     focusTab: (state, action) => {
       state.activeTabUid = action.payload.uid;
@@ -124,6 +153,15 @@ export const tabsSlice = createSlice({
       const collectionUid = action.payload.collectionUid;
       state.tabs = filter(state.tabs, (t) => t.collectionUid !== collectionUid);
       state.activeTabUid = null;
+    },
+    makeTabPermanent: (state, action) => {
+      const { uid } = action.payload;
+      const tab = find(state.tabs, (t) => t.uid === uid);
+      if (tab) {
+        tab.preview = false;
+      } else{
+        console.error("Tab not found!")
+      }
     }
   }
 });
@@ -136,7 +174,8 @@ export const {
   updateRequestPaneTab,
   updateResponsePaneTab,
   closeTabs,
-  closeAllCollectionTabs
+  closeAllCollectionTabs,
+  makeTabPermanent
 } = tabsSlice.actions;
 
-export default tabsSlice.reducer;
+export default tabsSlice.reducer;

packages/bruno-app/src/themes/dark.js

@@ -114,7 +114,25 @@ const darkTheme = {
     responseStatus: '#ccc',
     responseOk: '#8cd656',
     responseError: '#f06f57',
-    responseOverlayBg: 'rgba(30, 30, 30, 0.6)'
+    responseOverlayBg: 'rgba(30, 30, 30, 0.6)',
+
+    card: {
+      bg: '#252526',
+      border: 'transparent',
+      borderDark: '#8cd656',
+      hr: '#424242'
+    },
+
+    cardTable: {
+      border: '#333',
+      bg: '#252526',
+      table: {
+        thead: {
+          bg: '#3D3D3D',
+          color: '#ccc'
+        }
+      }
+    }
   },
 
   collection: {

packages/bruno-app/src/themes/light.js

@@ -114,7 +114,22 @@ const lightTheme = {
     responseStatus: 'rgb(117 117 117)',
     responseOk: '#047857',
     responseError: 'rgb(185, 28, 28)',
-    responseOverlayBg: 'rgba(255, 255, 255, 0.6)'
+    responseOverlayBg: 'rgba(255, 255, 255, 0.6)',
+    card: {
+      bg: '#fff',
+      border: '#f4f4f4',
+      hr: '#f4f4f4'
+    },
+    cardTable: {
+      border: '#efefef',
+      bg: '#fff',
+      table: {
+        thead: {
+          bg: 'rgb(249, 250, 251)',
+          color: 'rgb(75 85 99)'
+        }
+      }
+    }
   },
 
   collection: {

packages/bruno-app/src/utils/codegenerator/har.js

@@ -14,6 +14,8 @@ const createContentType = (mode) => {
       return 'application/json';
     case 'multipartForm':
       return 'multipart/form-data';
+    case 'file':
+      return 'application/octet-stream';
     default:
       return '';
   }
@@ -60,22 +62,51 @@ const createPostData = (body, type) => {
   }
 
   const contentType = createContentType(body.mode);
-  if (body.mode === 'formUrlEncoded' || body.mode === 'multipartForm') {
-    return {
-      mimeType: contentType,
-      params: body[body.mode]
-        .filter((param) => param.enabled)
-        .map((param) => ({
-          name: param.name,
-          value: param.value,
-          ...(param.type === 'file' && { fileName: param.value })
-        }))
-    };
-  } else {
-    return {
-      mimeType: contentType,
-      text: body[body.mode]
-    };
+
+  switch (body.mode) {
+    case 'formUrlEncoded':
+      return {
+        mimeType: contentType,
+        text: new URLSearchParams(
+          body[body.mode]
+            .filter((param) => param.enabled)
+            .reduce((acc, param) => {
+              acc[param.name] = param.value;
+              return acc;
+            }, {})
+        ).toString(),
+        params: body[body.mode]
+          .filter((param) => param.enabled)
+          .map((param) => ({
+            name: param.name,
+            value: param.value
+          }))
+      };
+    case 'multipartForm':
+      return {
+        mimeType: contentType,
+        params: body[body.mode]
+          .filter((param) => param.enabled)
+          .map((param) => ({
+            name: param.name,
+            value: param.value,
+            ...(param.type === 'file' && { fileName: param.value })
+          }))
+      };
+    case 'file':
+      return {
+        mimeType: body[body.mode].filter((param) => param.enabled)[0].contentType,
+        params: body[body.mode]
+          .filter((param) => param.selected)
+          .map((param) => ({
+            value: param.filePath,
+          }))
+      };
+    default:
+      return {
+        mimeType: contentType,
+        text: body[body.mode]
+      };
   }
 };
 
@@ -89,6 +120,7 @@ export const buildHarRequest = ({ request, headers, type }) => {
     queryString: createQuery(request.params),
     postData: createPostData(request.body, type),
     headersSize: 0,
-    bodySize: 0
+    bodySize: 0,
+    binary: true
   };
 };

packages/bruno-app/src/utils/collections/export.js

@@ -14,6 +14,7 @@ export const deleteUidsInItems = (items) => {
       each(get(item, 'request.vars.assertions'), (a) => delete a.uid);
       each(get(item, 'request.body.multipartForm'), (param) => delete param.uid);
       each(get(item, 'request.body.formUrlEncoded'), (param) => delete param.uid);
+      each(get(item, 'request.body.file'), (param) => delete param.uid);
     }
 
     if (item.items && item.items.length) {

packages/bruno-app/src/utils/collections/index.js

@@ -1,13 +1,4 @@
-import get from 'lodash/get';
-import each from 'lodash/each';
-import find from 'lodash/find';
-import findIndex from 'lodash/findIndex';
-import isString from 'lodash/isString';
-import map from 'lodash/map';
-import filter from 'lodash/filter';
-import sortBy from 'lodash/sortBy';
-import isEqual from 'lodash/isEqual';
-import cloneDeep from 'lodash/cloneDeep';
+import {cloneDeep, isEqual, sortBy, filter, map, isString, findIndex, find, each, get } from 'lodash';
 import { uuid } from 'utils/common';
 import path from 'path';
 import slash from 'utils/common/slash';
@@ -34,7 +25,7 @@ export const addDepth = (items = []) => {
   depth(items, 1);
 };
 
-export const collapseCollection = (collection) => {
+export const collapseAllItemsInCollection = (collection) => {
   collection.collapsed = true;
 
   const collapseItem = (items) => {
@@ -47,7 +38,7 @@ export const collapseCollection = (collection) => {
     });
   };
 
-  collapseItem(collection.items, 1);
+  collapseItem(collection.items);
 };
 
 export const sortItems = (collection) => {
@@ -136,6 +127,16 @@ export const findEnvironmentInCollectionByName = (collection, name) => {
   return find(collection.environments, (e) => e.name === name);
 };
 
+export const areItemsLoading = (folder) => {
+  let flattenedItems = flattenItems(folder.items);
+  return flattenedItems?.reduce((isLoading, i) => {
+    if (i?.loading) {
+      isLoading = true;
+    }
+    return isLoading;
+  }, false);
+}
+
 export const moveCollectionItem = (collection, draggedItem, targetItem) => {
   let draggedItemParent = findParentItemInCollection(collection, draggedItem.uid);
 
@@ -271,6 +272,17 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
     });
   };
 
+  const copyFileParams = (params = []) => {
+    return map(params, (param) => {
+      return {
+        uid: param.uid,
+        filePath: param.filePath,
+        contentType: param.contentType,
+        selected: param.selected
+      }
+    });
+  }
+
   const copyItems = (sourceItems, destItems) => {
     each(sourceItems, (si) => {
       if (!isItemAFolder(si) && !isItemARequest(si) && si.type !== 'js') {
@@ -298,7 +310,8 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
             graphql: si.request.body.graphql,
             sparql: si.request.body.sparql,
             formUrlEncoded: copyFormUrlEncodedParams(si.request.body.formUrlEncoded),
-            multipartForm: copyMultipartFormParams(si.request.body.multipartForm)
+            multipartForm: copyMultipartFormParams(si.request.body.multipartForm),
+            file: copyFileParams(si.request.body.file)
           },
           script: si.request.script,
           vars: si.request.vars,
@@ -651,6 +664,10 @@ export const humanizeRequestBodyMode = (mode) => {
       label = 'SPARQL';
       break;
     }
+    case 'file': {
+      label = 'File / Binary';
+      break;
+    }
     case 'formUrlEncoded': {
       label = 'Form URL Encoded';
       break;
@@ -751,6 +768,7 @@ export const refreshUidsInItem = (item) => {
   each(get(item, 'request.params'), (param) => (param.uid = uuid()));
   each(get(item, 'request.body.multipartForm'), (param) => (param.uid = uuid()));
   each(get(item, 'request.body.formUrlEncoded'), (param) => (param.uid = uuid()));
+  each(get(item, 'request.body.file'), (param) => (param.uid = uuid()));
 
   return item;
 };
@@ -761,11 +779,13 @@ export const deleteUidsInItem = (item) => {
   const headers = get(item, 'request.headers', []);
   const bodyFormUrlEncoded = get(item, 'request.body.formUrlEncoded', []);
   const bodyMultipartForm = get(item, 'request.body.multipartForm', []);
+  const file = get(item, 'request.body.file', []);
 
   params.forEach((param) => delete param.uid);
   headers.forEach((header) => delete header.uid);
   bodyFormUrlEncoded.forEach((param) => delete param.uid);
   bodyMultipartForm.forEach((param) => delete param.uid);
+  file.forEach((param) => delete param.uid);
 
   return item;
 };
@@ -991,4 +1011,4 @@ const mergeVars = (collection, requestTreePath = []) => {
     folderVariables,
     requestVariables
   };
-};
+};

packages/bruno-app/src/utils/common/codemirror.js

@@ -159,6 +159,8 @@ export const getCodeMirrorModeBasedOnContentType = (contentType, body) => {
 
   if (contentType.includes('json')) {
     return 'application/ld+json';
+  } else if (contentType.includes('image')) {
+    return 'application/image';
   } else if (contentType.includes('xml')) {
     return 'application/xml';
   } else if (contentType.includes('html')) {
@@ -169,8 +171,6 @@ export const getCodeMirrorModeBasedOnContentType = (contentType, body) => {
     return 'application/xml';
   } else if (contentType.includes('yaml')) {
     return 'application/yaml';
-  } else if (contentType.includes('image')) {
-    return 'application/image';
   } else {
     return 'application/text';
   }

packages/bruno-app/src/utils/common/index.js

@@ -94,6 +94,8 @@ export const getContentType = (headers) => {
     if (contentType && contentType.length) {
       if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?json/.test(contentType[0])) {
         return 'application/ld+json';
+      } else if (typeof contentType[0] === 'string' && /^image\/svg\+xml/i.test(contentType[0])) {
+        return 'image/svg+xml';
       } else if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?xml/.test(contentType[0])) {
         return 'application/xml';
       }

packages/bruno-app/src/utils/common/ipc.js

@@ -0,0 +1,14 @@
+/**
+ * Wrapper for ipcRenderer.invoke that handles error cases
+ * @param {string} channel - The IPC channel name
+ * @param {...any} args - Arguments to pass to the channel
+ * @returns {Promise} - Resolves with the result or rejects with error
+ */
+export const callIpc = (channel, ...args) => {
+  const { ipcRenderer } = window;
+  if (!ipcRenderer) {
+    return Promise.reject(new Error('IPC Renderer not available'));
+  }
+
+  return ipcRenderer.invoke(channel, ...args);
+};

packages/bruno-app/src/utils/common/platform.js

@@ -24,11 +24,25 @@ export const getSubdirectoriesFromRoot = (rootPath, pathname) => {
   return relativePath ? relativePath.split(path.sep) : [];
 };
 
-export const getDirectoryName = (pathname) => {
-  // convert to unix style path
-  pathname = slash(pathname);
 
-  return path.dirname(pathname);
+export const isWindowsPath = (pathname) => {
+
+  if (!isWindowsOS()) {
+    return false;
+  }
+
+  // Check for Windows drive letter format (e.g., "C:\")
+  const hasDriveLetter = /^[a-zA-Z]:\\/.test(pathname);
+  
+  // Check for UNC path format (e.g., "\\server\share") a.k.a. network path || WSL path
+  const isUNCPath = pathname.startsWith('\\\\');
+
+  return hasDriveLetter || isUNCPath;
+};
+
+
+export const getDirectoryName = (pathname) => {
+  return isWindowsPath(pathname) ? path.win32.dirname(pathname) : path.dirname(pathname);
 };
 
 export const isWindowsOS = () => {

packages/bruno-app/src/utils/curl/curl-to-json.js

@@ -9,6 +9,7 @@
 import parseCurlCommand from './parse-curl';
 import * as querystring from 'query-string';
 import * as jsesc from 'jsesc';
+import * as path from 'path';
 
 function getContentType(headers = {}) {
   const contentType = Object.keys(headers).find((key) => key.toLowerCase() === 'content-type');
@@ -99,9 +100,30 @@ function getMultipleDataString(request, parsedQueryString) {
 function getFilesString(request) {
   const data = {};
 
-  data.files = {};
   data.data = {};
 
+  if (request.isDataBinary) {
+    let filePath = '';
+
+    if (request.data.startsWith('@')) {
+      filePath = request.data.slice(1);
+    } else {
+      filePath = request.data;
+    }
+
+    data.data = [
+      {
+        filePath: repr(filePath),
+        contentType: request.headers['Content-Type'],
+        selected: true,
+      }
+    ];
+
+    return data;
+  }
+
+  data.files = {};
+
   for (const multipartKey in request.multipartUploads) {
     const multipartValue = request.multipartUploads[multipartKey];
     if (multipartValue.startsWith('@')) {
@@ -140,6 +162,7 @@ const curlToJson = (curlCommand) => {
   requestJson.url = request.urlWithoutQuery;
   requestJson.raw_url = request.url;
   requestJson.method = request.method;
+  requestJson.isDataBinary = request.isDataBinary;
 
   if (request.cookies) {
     const cookies = {};
@@ -161,12 +184,10 @@ const curlToJson = (curlCommand) => {
 
   if (request.query) {
     requestJson.queries = getQueries(request);
-  }
-
-  if (typeof request.data === 'string' || typeof request.data === 'number') {
-    Object.assign(requestJson, getDataString(request));
-  } else if (request.multipartUploads) {
+  } else if (request.multipartUploads || request.isDataBinary) {
     Object.assign(requestJson, getFilesString(request));
+  } else if (typeof request.data === 'string' || typeof request.data === 'number') {
+    Object.assign(requestJson, getDataString(request));
   }
 
   if (request.insecure) {

packages/bruno-app/src/utils/curl/curl-to-json.spec.js

@@ -86,4 +86,38 @@ describe('curlToJson', () => {
       method: 'get'
     });
   });
+
+  it('should return a parse a curl with a post body with binary file type', () => {
+    const curlCommand = `curl 'https://www.usebruno.com'
+    -H 'Accept: application/json, text/plain, */*'
+    -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8'
+    -H 'Content-Type: application/json;charset=utf-8'
+    -H 'Origin: https://www.usebruno.com'
+    -H 'Referer: https://www.usebruno.com/'
+    --data-binary '@/path/to/file'
+    `;
+
+    const result = curlToJson(curlCommand);
+
+    expect(result).toEqual({
+      url: 'https://www.usebruno.com',
+      raw_url: 'https://www.usebruno.com',
+      method: 'post',
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Accept-Language': 'en-US,en;q=0.9,hi;q=0.8',
+        'Content-Type': 'application/json;charset=utf-8',
+        Origin: 'https://www.usebruno.com',
+        Referer: 'https://www.usebruno.com/'
+      },
+      isDataBinary: true,
+      data: [
+        {
+          filePath: '/path/to/file',
+          contentType: 'application/json;charset=utf-8',
+          selected: true
+        }
+      ]
+    });
+  });
 });

packages/bruno-app/src/utils/curl/index.js

@@ -50,14 +50,18 @@ export const getRequestFromCurlCommand = (curlCommand, requestType = 'http-reque
       sparql: null,
       multipartForm: null,
       formUrlEncoded: null,
-      graphql: null
+      graphql: null,
+      file: null
     };
 
     if (parsedBody && contentType && typeof contentType === 'string') {
       if (requestType === 'graphql-request' && (contentType.includes('application/json') || contentType.includes('application/graphql'))) {
         body.mode = 'graphql';
         body.graphql = parseGraphQL(parsedBody);
-      } else if (contentType.includes('application/json')) {
+      } else if (requestType === 'http-request' && request.isDataBinary) {
+        body.mode = 'file';
+        body.file = parsedBody;
+      }else if (contentType.includes('application/json')) {
         body.mode = 'json';
         body.json = convertToCodeMirrorJson(parsedBody);
       } else if (contentType.includes('xml')) {

packages/bruno-app/src/utils/importers/common.js

@@ -35,6 +35,7 @@ export const updateUidsInCollection = (_collection) => {
       each(get(item, 'request.assertions'), (a) => (a.uid = uuid()));
       each(get(item, 'request.body.multipartForm'), (param) => (param.uid = uuid()));
       each(get(item, 'request.body.formUrlEncoded'), (param) => (param.uid = uuid()));
+      each(get(item, 'request.body.file'), (param) => (param.uid = uuid()));
 
       if (item.items && item.items.length) {
         updateItemUids(item.items);

packages/bruno-app/src/utils/importers/openapi-collection.js

@@ -229,26 +229,27 @@ const transformOpenapiRequestItem = (request) => {
   return brunoRequestItem;
 };
 
-const resolveRefs = (spec, components = spec?.components, visitedItems = new Set()) => {
+const resolveRefs = (spec, components = spec?.components, cache = new Map()) => {
   if (!spec || typeof spec !== 'object') {
     return spec;
   }
 
+  if (cache.has(spec)) {
+    return cache.get(spec);
+  }
+
   if (Array.isArray(spec)) {
-    return spec.map((item) => resolveRefs(item, components, visitedItems));
+    return spec.map(item => resolveRefs(item, components, cache));
   }
 
   if ('$ref' in spec) {
     const refPath = spec.$ref;
 
-    if (visitedItems.has(refPath)) {
-      return spec;
-    } else {
-      visitedItems.add(refPath);
+    if (cache.has(refPath)) {
+      return cache.get(refPath);
     }
 
     if (refPath.startsWith('#/components/')) {
-      // Local reference within components
       const refKeys = refPath.replace('#/components/', '').split('/');
       let ref = components;
 
@@ -256,25 +257,26 @@ const resolveRefs = (spec, components = spec?.components, visitedItems = new Set
         if (ref && ref[key]) {
           ref = ref[key];
         } else {
-          // Handle invalid references gracefully?
           return spec;
         }
       }
 
-      return resolveRefs(ref, components, visitedItems);
-    } else {
-      // Handle external references (not implemented here)
-      // You would need to fetch the external reference and resolve it.
-      // Example: Fetch and resolve an external reference from a URL.
+      cache.set(refPath, {});
+      const resolved = resolveRefs(ref, components, cache);
+      cache.set(refPath, resolved);
+      return resolved;
     }
+    return spec;
   }
 
-  // Recursively resolve references in nested objects
-  for (const prop in spec) {
-    spec[prop] = resolveRefs(spec[prop], components, new Set(visitedItems));
+  const resolved = {};
+  cache.set(spec, resolved);
+
+  for (const [key, value] of Object.entries(spec)) {
+    resolved[key] = resolveRefs(value, components, cache);
   }
 
-  return spec;
+  return resolved;
 };
 
 const groupRequestsByTags = (requests) => {

packages/bruno-app/src/utils/importers/postman-collection.js

@@ -181,6 +181,7 @@ const importPostmanV2CollectionItem = (brunoParent, item, parentAuth, options) =
   brunoParent.items = brunoParent.items || [];
   const folderMap = {};
   const requestMap = {};
+  const requestMethods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS', 'TRACE']
 
   each(item, (i) => {
     if (isItemAFolder(i)) {
@@ -230,6 +231,11 @@ const importPostmanV2CollectionItem = (brunoParent, item, parentAuth, options) =
 
     } else {
       if (i.request) {
+        if(!requestMethods.includes(i?.request?.method.toUpperCase())){
+          console.warn("Unexpected request.method")
+          return;
+        }
+
         const baseRequestName = i.name;
         let requestName = baseRequestName;
         let count = 1;
@@ -422,7 +428,7 @@ const importPostmanV2CollectionItem = (brunoParent, item, parentAuth, options) =
             brunoRequestItem.request.auth.mode = 'apikey';    
             brunoRequestItem.request.auth.apikey = {
               key: authValues.key,
-              value: authValues.value,
+              value: authValues.value?.toString(), // Convert the value to a string as Postman's schema does not rigidly define the type of it,
               placement: "header" //By default we are placing the apikey values in headers!
             }    
           }

packages/bruno-app/src/utils/importers/translators/postman_translation.js

@@ -24,6 +24,10 @@ const replacements = {
   'postman\\.setEnvironmentVariable\\(': 'bru.setEnvVar(',
   'postman\\.getEnvironmentVariable\\(': 'bru.getEnvVar(',
   'postman\\.clearEnvironmentVariable\\(': 'bru.deleteEnvVar(',
+  'pm\\.execution\\.skipRequest\\(\\)': 'bru.runner.skipRequest()',
+  'pm\\.execution\\.skipRequest': 'bru.runner.skipRequest',
+  'pm\\.execution\\.setNextRequest\\(null\\)': 'bru.runner.stopExecution()',
+  'pm\\.execution\\.setNextRequest\\(\'null\'\\)': 'bru.runner.stopExecution()',
 };
 
 const extendedReplacements = Object.keys(replacements).reduce((acc, key) => {
@@ -50,7 +54,7 @@ export const postmanTranslation = (script, logCallback) => {
     }
     if (modifiedScript.includes('pm.') || modifiedScript.includes('postman.')) {
       modifiedScript = modifiedScript.replace(/^(.*(pm\.|postman\.).*)$/gm, '// $1');
-      logCallback?.();
+      //logCallback?.();
     }
     return modifiedScript;
   } catch (e) {

packages/bruno-app/src/utils/tabs/index.js

@@ -11,3 +11,10 @@ export const isItemAFolder = (item) => {
 export const itemIsOpenedInTabs = (item, tabs) => {
   return find(tabs, (t) => t.uid === item.uid);
 };
+
+export const scrollToTheActiveTab = () => {
+  const activeTab = document.querySelector('.request-tab.active');
+  if (activeTab) {
+    activeTab.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+};

packages/bruno-cli/package.json

@@ -52,7 +52,7 @@
     "@usebruno/lang": "0.12.0",
     "@usebruno/vm2": "^3.9.13",
     "aws4-axios": "^3.3.0",
-    "axios": "1.7.5",
+    "axios": "1.7.7",
     "axios-ntlm": "^1.4.2",
     "chai": "^4.3.7",
     "chalk": "^3.0.0",
@@ -66,7 +66,6 @@
     "qs": "^6.11.0",
     "socks-proxy-agent": "^8.0.2",
     "tough-cookie": "^4.1.3",
-    "@usebruno/vm2": "^3.9.13",
     "xmlbuilder": "^15.1.1",
     "yargs": "^17.6.2"
   }

packages/bruno-cli/src/commands/run.js

@@ -11,6 +11,7 @@ const { rpad } = require('../utils/common');
 const { bruToJson, getOptions, collectionBruToJson } = require('../utils/bru');
 const { dotenvToJson } = require('@usebruno/lang');
 const constants = require('../constants');
+const { findItemInCollection } = require('../utils/collection');
 const command = 'run [filename]';
 const desc = 'Run a request';
 
@@ -18,6 +19,7 @@ const printRunSummary = (results) => {
   let totalRequests = 0;
   let passedRequests = 0;
   let failedRequests = 0;
+  let skippedRequests = 0;
   let totalAssertions = 0;
   let passedAssertions = 0;
   let failedAssertions = 0;
@@ -49,7 +51,10 @@ const printRunSummary = (results) => {
         failedAssertions += 1;
       }
     }
-    if (!hasAnyTestsOrAssertions && result.error) {
+    if (!hasAnyTestsOrAssertions && result.skipped) {
+      skippedRequests += 1;
+    }
+    else if (!hasAnyTestsOrAssertions && result.error) {
       failedRequests += 1;
     } else {
       passedRequests += 1;
@@ -62,6 +67,9 @@ const printRunSummary = (results) => {
   if (failedRequests > 0) {
     requestSummary += `, ${chalk.red(`${failedRequests} failed`)}`;
   }
+  if (skippedRequests > 0) {
+    requestSummary += `, ${chalk.magenta(`${skippedRequests} skipped`)}`;
+  }
   requestSummary += `, ${totalRequests} total`;
 
   let assertSummary = `${rpad('Tests:', maxLength)} ${chalk.green(`${passedTests} passed`)}`;
@@ -84,6 +92,7 @@ const printRunSummary = (results) => {
     totalRequests,
     passedRequests,
     failedRequests,
+    skippedRequests,
     totalAssertions,
     passedAssertions,
     failedAssertions,
@@ -144,7 +153,7 @@ const createCollectionFromPath = (collectionPath) => {
           });
         }
       }
-      return currentDirItems
+      return currentDirItems;
     };
     collection.items = traverse(collectionPath);
     return collection;
@@ -634,6 +643,34 @@ const handler = async function (argv) {
     }
 
     const runtime = getJsSandboxRuntime(sandbox);
+
+    const runSingleRequestByPathname = async (relativeItemPathname) => {
+      return new Promise(async (resolve, reject) => {
+        let itemPathname = path.join(collectionPath, relativeItemPathname);
+        if (itemPathname && !itemPathname?.endsWith('.bru')) {
+          itemPathname = `${itemPathname}.bru`;
+        }
+        const bruJson = cloneDeep(findItemInCollection(collection, itemPathname));
+        if (bruJson) {
+          const res = await runSingleRequest(
+            itemPathname,
+            bruJson,
+            collectionPath,
+            runtimeVariables,
+            envVars,
+            processEnvVars,
+            brunoConfig,
+            collectionRoot,
+            runtime,
+            collection,
+            runSingleRequestByPathname
+          );
+          resolve(res?.response);
+        }
+        reject(`bru.runRequest: invalid request path - ${itemPathname}`);
+      });
+    }
+
     let currentRequestIndex = 0;
     let nJumps = 0; // count the number of jumps to avoid infinite loops
     while (currentRequestIndex < bruJsons.length) {
@@ -651,7 +688,8 @@ const handler = async function (argv) {
         brunoConfig,
         collectionRoot,
         runtime,
-        collection
+        collection,
+        runSingleRequestByPathname
       );
 
       results.push({
@@ -701,6 +739,11 @@ const handler = async function (argv) {
 
       // determine next request
       const nextRequestName = result?.nextRequestName;
+
+      if (result?.shouldStopRunnerExecution) {
+        break;
+      }
+      
       if (nextRequestName !== undefined) {
         nJumps++;
         if (nJumps > 10000) {

packages/bruno-cli/src/reporters/junit.js

@@ -62,7 +62,10 @@ const makeJUnitOutput = async (results, outputPath) => {
         suite.testcase.push(testcase);
       });
 
-    if (result.error) {
+    if (result?.skipped) {
+      suite['@skipped'] = 1;
+    }
+    else if (result.error) {
       suite['@errors'] = 1;
       suite['@tests'] = 1;
       suite.testcase = [

packages/bruno-cli/src/runner/prepare-request.js

@@ -36,7 +36,7 @@ const prepareRequest = (item = {}, collection = {}) => {
   };
 
   const collectionAuth = get(collection, 'root.request.auth');
-  if (collectionAuth && request.auth.mode === 'inherit') {
+  if (collectionAuth && request.auth?.mode === 'inherit') {
     if (collectionAuth.mode === 'basic') {
       axiosRequest.auth = {
         username: get(collectionAuth, 'basic.username'),
@@ -47,9 +47,27 @@ const prepareRequest = (item = {}, collection = {}) => {
     if (collectionAuth.mode === 'bearer') {
       axiosRequest.headers['Authorization'] = `Bearer ${get(collectionAuth, 'bearer.token')}`;
     }
+
+    if (collectionAuth.mode === 'apikey') {
+      if (collectionAuth.apikey?.placement === 'header') {
+        axiosRequest.headers[collectionAuth.apikey?.key] = collectionAuth.apikey?.value;
+      }
+      
+      if (collectionAuth.apikey?.placement === 'queryparams') {
+        if (axiosRequest.url && collectionAuth.apikey?.key) {
+          try {
+            const urlObj = new URL(request.url);
+            urlObj.searchParams.set(collectionAuth.apikey?.key, collectionAuth.apikey?.value);
+            axiosRequest.url = urlObj.toString();
+          } catch (error) {
+            console.error('Invalid URL:', request.url, error);
+          }
+        }
+      }
+    }
   }
 
-  if (request.auth) {
+  if (request.auth && request.auth.mode !== 'inherit') {
     if (request.auth.mode === 'basic') {
       axiosRequest.auth = {
         username: get(request, 'auth.basic.username'),

packages/bruno-cli/src/runner/run-single-request.js

@@ -40,11 +40,13 @@ const runSingleRequest = async function (
   brunoConfig,
   collectionRoot,
   runtime,
-  collection
+  collection,
+  runSingleRequestByPathname
 ) {
   try {
     let request;
     let nextRequestName;
+    let shouldStopRunnerExecution = false;
     let item = {
       pathname: path.join(collectionPath, filename),
       ...bruJson
@@ -68,11 +70,41 @@ const runSingleRequest = async function (
         collectionPath,
         onConsoleLog,
         processEnvVars,
-        scriptingConfig
+        scriptingConfig,
+        runSingleRequestByPathname
       );
       if (result?.nextRequestName !== undefined) {
         nextRequestName = result.nextRequestName;
       }
+
+      if (result?.stopExecution) {
+        shouldStopRunnerExecution = true;
+      }
+
+      if (result?.skipRequest) {
+        return {
+          test: {
+            filename: filename
+          },
+          request: {
+            method: request.method,
+            url: request.url,
+            headers: request.headers,
+            data: request.data
+          },
+          response: {
+            status: 'skipped',
+            statusText: 'request skipped via pre-request script',
+            data: null,
+            responseTime: 0
+          },
+          error: 'Request has been skipped from pre-request script',
+          skipped: true,
+          assertionResults: [],
+          testResults: [],
+          shouldStopRunnerExecution
+        };
+      }
     }
 
     // interpolate variables inside request
@@ -233,7 +265,30 @@ const runSingleRequest = async function (
     if (!options.disableCookies) {
       const cookieString = getCookieStringForUrl(request.url);
       if (cookieString && typeof cookieString === 'string' && cookieString.length) {
-        request.headers['cookie'] = cookieString;
+        const existingCookieHeaderName = Object.keys(request.headers).find(
+            name => name.toLowerCase() === 'cookie'
+        );
+        const existingCookieString = existingCookieHeaderName ? request.headers[existingCookieHeaderName] : '';
+    
+        // Helper function to parse cookies into an object
+        const parseCookies = (str) => str.split(';').reduce((cookies, cookie) => {
+            const [name, ...rest] = cookie.split('=');
+            if (name && name.trim()) {
+                cookies[name.trim()] = rest.join('=').trim();
+            }
+            return cookies;
+        }, {});
+    
+        const mergedCookies = {
+            ...parseCookies(existingCookieString),
+            ...parseCookies(cookieString),
+        };
+    
+        const combinedCookieString = Object.entries(mergedCookies)
+            .map(([name, value]) => `${name}=${value}`)
+            .join('; ');
+    
+        request.headers[existingCookieHeaderName || 'Cookie'] = combinedCookieString;
       }
     }
 
@@ -255,7 +310,7 @@ const runSingleRequest = async function (
       
       let axiosInstance = makeAxiosInstance();
       if (request.ntlmConfig) {
-        axiosInstance=NtlmClient(request.ntlmConfig,axiosInstance)
+        axiosInstance=NtlmClient(request.ntlmConfig,axiosInstance.defaults)
         delete request.ntlmConfig;
       }
     
@@ -323,7 +378,8 @@ const runSingleRequest = async function (
           error: err?.message || err?.errors?.map(e => e?.message)?.at(0) || err?.code || 'Request Failed!',
           assertionResults: [],
           testResults: [],
-          nextRequestName: nextRequestName
+          nextRequestName: nextRequestName,
+          shouldStopRunnerExecution
         };
       }
     }
@@ -363,11 +419,16 @@ const runSingleRequest = async function (
         collectionPath,
         null,
         processEnvVars,
-        scriptingConfig
+        scriptingConfig,
+        runSingleRequestByPathname
       );
       if (result?.nextRequestName !== undefined) {
         nextRequestName = result.nextRequestName;
       }
+
+      if (result?.stopExecution) {
+        shouldStopRunnerExecution = true;
+      }
     }
 
     // run assertions
@@ -408,13 +469,18 @@ const runSingleRequest = async function (
         collectionPath,
         null,
         processEnvVars,
-        scriptingConfig
+        scriptingConfig,
+        runSingleRequestByPathname
       );
       testResults = get(result, 'results', []);
 
       if (result?.nextRequestName !== undefined) {
         nextRequestName = result.nextRequestName;
       }
+
+      if (result?.stopExecution) {
+        shouldStopRunnerExecution = true;
+      }
     }
 
     if (testResults?.length) {
@@ -447,7 +513,8 @@ const runSingleRequest = async function (
       error: null,
       assertionResults,
       testResults,
-      nextRequestName: nextRequestName
+      nextRequestName: nextRequestName,
+      shouldStopRunnerExecution
     };
   } catch (err) {
     console.log(chalk.red(stripExtension(filename)) + chalk.dim(` (${err.message})`));

packages/bruno-cli/src/utils/collection.js

@@ -204,5 +204,6 @@ module.exports = {
   mergeHeaders,
   mergeVars,
   mergeScripts,
+  findItemInCollection,
   getTreePathFromCollectionToItem
 }

packages/bruno-cli/tests/runner/prepare-request.spec.js

@@ -1,5 +1,4 @@
-const { describe, it, expect } = require('@jest/globals');
-
+const { describe, it, expect, beforeEach } = require('@jest/globals');
 const prepareRequest = require('../../src/runner/prepare-request');
 
 describe('prepare-request: prepareRequest', () => {
@@ -22,4 +21,144 @@ describe('prepare-request: prepareRequest', () => {
       expect(result.data).toEqual(expected);
     });
   });
+
+  describe('Properly maps inherited auth from collectionRoot', () => {
+    // Initialize Test Fixtures
+    let collection, item;
+
+    beforeEach(() => {
+      collection = {
+        name: 'Test Collection',
+        root: {
+          request: {
+            auth: {}
+          }
+        }
+      };
+
+      item = {
+        name: 'Test Request',
+        type: 'http-request',
+        request: {
+          method: 'GET',
+          headers: [],
+          params: [],
+          url: 'https://usebruno.com',
+          auth: {
+            mode: 'inherit'
+          },
+          script: {
+            req: 'console.log("Pre Request")',
+            res: 'console.log("Post Response")'
+          }
+        }
+      };
+    });
+
+    describe('API Key Authentication', () => {
+      it('If collection auth is apikey in header', () => {
+        collection.root.request.auth = {
+          mode: "apikey",
+          apikey: {
+            key: "x-api-key",
+            value: "{{apiKey}}",
+            placement: "header"
+          }
+        };
+
+        const result = prepareRequest(item, collection);
+        expect(result.headers).toHaveProperty('x-api-key', '{{apiKey}}');
+      });
+
+      it('If collection auth is apikey in header and request has existing headers', () => {
+        collection.root.request.auth = {
+          mode: "apikey",
+          apikey: {
+            key: "x-api-key",
+            value: "{{apiKey}}",
+            placement: "header"
+          }
+        };
+
+        item.request.headers.push({ name: 'Content-Type', value: 'application/json', enabled: true });
+        const result = prepareRequest(item, collection);
+        expect(result.headers).toHaveProperty('Content-Type', 'application/json');
+        expect(result.headers).toHaveProperty('x-api-key', '{{apiKey}}');
+      });
+
+      it('If collection auth is apikey in query parameters', () => {
+        collection.root.request.auth = {
+          mode: "apikey",
+          apikey: {
+            key: "x-api-key",
+            value: "{{apiKey}}",
+            placement: "queryparams"
+          }
+        };
+
+        const urlObj = new URL(item.request.url);
+        urlObj.searchParams.set(collection.root.request.auth.apikey.key, collection.root.request.auth.apikey.value);
+
+        const expected = urlObj.toString();
+        const result = prepareRequest(item, collection);
+        expect(result.url).toEqual(expected);
+      });
+    });
+
+    describe('Basic Authentication', () => {
+      it('If collection auth is basic auth', () => {
+        collection.root.request.auth = {
+          mode: 'basic',
+          basic: {
+            username: 'testUser',
+            password: 'testPass123'
+          }
+        };
+
+        const result = prepareRequest(item, collection);
+        const expected = { username: 'testUser', password: 'testPass123' };
+        expect(result.auth).toEqual(expected);
+      });
+    });
+
+    describe('Bearer Token Authentication', () => {
+      it('If collection auth is bearer token', () => {
+        collection.root.request.auth = {
+          mode: 'bearer',
+          bearer: {
+            token: 'token'
+          }
+        };
+
+        const result = prepareRequest(item, collection);
+        expect(result.headers).toHaveProperty('Authorization', 'Bearer token');
+      });
+
+      it('If collection auth is bearer token and request has existing headers', () => {
+        collection.root.request.auth = {
+          mode: 'bearer',
+          bearer: {
+            token: 'token'
+          }
+        };
+
+        item.request.headers.push({ name: 'Content-Type', value: 'application/json', enabled: true });
+
+        const result = prepareRequest(item, collection);
+        expect(result.headers).toHaveProperty('Authorization', 'Bearer token');
+        expect(result.headers).toHaveProperty('Content-Type', 'application/json');
+      });
+    });
+
+    describe('No Authentication', () => {
+      it('If request does not have auth configured', () => {
+        delete item.request.auth;
+        let result;
+        expect(() => {
+          result = prepareRequest(item, collection);
+        }).not.toThrow();
+        expect(result).toBeDefined();
+      });
+    });
+  });
 });