Merge branch 'main' into feat/websocket-engine

2026-06-29 15:44:13 +00:00 · 2025-09-24 15:46:08 +05:30
parent 6acf38fac1 e4f8945e89
commit 0c8c7933c8
59 changed files with 2340 additions and 521 deletions
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -34,6 +34,8 @@ jobs:

      - name: Lint Check
        run: npm run lint
+        env:
+          ESLINT_PLUGIN_DIFF_COMMIT: ${{ github.event.pull_request.base.ref }}

      # tests
      - name: Test Package bruno-js
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx nano-staged
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,8 +1,61 @@
 // eslint.config.js
 const { defineConfig } = require("eslint/config");
 const globals = require("globals");
+const { fixupPluginRules } = require('@eslint/compat');
+const eslintPluginDiff = require('eslint-plugin-diff');

-module.exports = defineConfig([
+let stylistic;
+
+const runESMImports = async () => {
+  stylistic = await import('@stylistic/eslint-plugin').then(d => d.default);
+};
+
+module.exports = runESMImports().then(() => defineConfig([
+  {
+    plugins: {
+      'diff': fixupPluginRules(eslintPluginDiff),
+      '@stylistic': stylistic,
+    },
+    files: [
+      './eslint.config.js',
+      'packages/bruno-app/**/*.{js,jsx,ts}',
+      'packages/bruno-app/src/test-utils/mocks/codemirror.js',
+      'packages/bruno-cli/**/*.js',
+      'packages/bruno-common/**/*.ts',
+      'packages/bruno-converters/**/*.js',
+      'packages/bruno-electron/**/*.js',
+      'packages/bruno-filestore/**/*.ts',
+      'packages/bruno-js/**/*.js',
+      'packages/bruno-lang/**/*.js',
+      'packages/bruno-requests/**/*.ts',
+      'packages/bruno-requests/**/*.js',
+    ],
+    processor: 'diff/diff',
+    rules: {
+      ...stylistic.configs.customize({
+        indent: 2,
+        quotes: 'single',
+        semi: true,
+        arrowParens: false,
+        jsx: true,
+      }).rules,
+      '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
+      '@stylistic/arrow-parens': ['error', 'as-needed'],
+      '@stylistic/curly-newline': ['error', {
+        multiline: true,
+        minElements: 2,
+        consistent: true,
+      }],
+      '@stylistic/function-paren-newline': ['error', 'never'],
+      '@stylistic/array-bracket-spacing': ['error', 'never'],
+      '@stylistic/arrow-spacing': ['error', { before: true, after: true }],
+      '@stylistic/function-call-spacing': ['error', 'never'],
+      '@stylistic/multiline-ternary': ['off'],
+      '@stylistic/padding-line-between-statements': ['off'],
+      '@stylistic/semi-style': ['error', 'last'],
+      '@stylistic/max-len': ['off'],
+    },
+  },
  {
    files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
    ignores: ["**/*.config.js", "**/public/**/*"],
@@ -197,4 +250,4 @@ module.exports = defineConfig([
      "no-undef": "error",
    },
  },
-]);
+]));
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,20 +22,25 @@
        "packages/bruno-filestore"
      ],
      "devDependencies": {
+        "@eslint/compat": "^1.3.2",
        "@faker-js/faker": "^7.6.0",
        "@jest/globals": "^29.2.0",
        "@playwright/test": "^1.51.1",
        "@rollup/plugin-json": "^6.1.0",
+        "@stylistic/eslint-plugin": "^5.3.1",
        "@types/jest": "^29.5.11",
        "@types/lodash-es": "^4.17.12",
        "@types/node": "^22.14.1",
        "@typescript-eslint/parser": "^8.39.0",
        "concurrently": "^8.2.2",
        "eslint": "^9.26.0",
+        "eslint-plugin-diff": "^2.0.3",
        "fs-extra": "^11.1.1",
        "globals": "^16.1.0",
+        "husky": "^9.1.7",
        "jest": "^29.2.0",
        "lodash-es": "^4.17.21",
+        "nano-staged": "^0.8.0",
        "playwright": "^1.51.1",
        "pretty-quick": "^3.1.3",
        "randomstring": "^1.2.2",
@@ -1605,7 +1610,7 @@
      "version": "7.26.3",
      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz",
      "integrity": "sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1623,7 +1628,7 @@
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz",
      "integrity": "sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-compilation-targets": "^7.22.6",
@@ -1640,7 +1645,7 @@
      "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,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "ms": "^2.1.3"
@@ -1658,7 +1663,7 @@
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/@babel/helper-member-expression-to-functions": {
@@ -1729,7 +1734,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz",
      "integrity": "sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1804,7 +1809,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz",
      "integrity": "sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/template": "^7.25.9",
@@ -1847,7 +1852,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz",
      "integrity": "sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -1864,7 +1869,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz",
      "integrity": "sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -1880,7 +1885,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz",
      "integrity": "sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -1896,7 +1901,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz",
      "integrity": "sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -1914,7 +1919,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz",
      "integrity": "sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -1949,7 +1954,7 @@
      "version": "7.21.0-placeholder-for-preset-env.2",
      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@@ -2048,7 +2053,7 @@
      "version": "7.26.0",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz",
      "integrity": "sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2064,7 +2069,7 @@
      "version": "7.26.0",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz",
      "integrity": "sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2246,7 +2251,7 @@
      "version": "7.18.6",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
@@ -2263,7 +2268,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz",
      "integrity": "sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2279,7 +2284,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz",
      "integrity": "sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -2297,7 +2302,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz",
      "integrity": "sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-module-imports": "^7.25.9",
@@ -2315,7 +2320,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz",
      "integrity": "sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2331,7 +2336,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz",
      "integrity": "sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2363,7 +2368,7 @@
      "version": "7.26.0",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz",
      "integrity": "sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -2380,7 +2385,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz",
      "integrity": "sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -2401,7 +2406,7 @@
      "version": "11.12.0",
      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=4"
@@ -2411,7 +2416,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz",
      "integrity": "sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -2428,7 +2433,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz",
      "integrity": "sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2444,7 +2449,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz",
      "integrity": "sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -2461,7 +2466,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz",
      "integrity": "sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2477,7 +2482,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz",
      "integrity": "sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -2494,7 +2499,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz",
      "integrity": "sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2510,7 +2515,7 @@
      "version": "7.26.3",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz",
      "integrity": "sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2526,7 +2531,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz",
      "integrity": "sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2558,7 +2563,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz",
      "integrity": "sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -2575,7 +2580,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz",
      "integrity": "sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-compilation-targets": "^7.25.9",
@@ -2593,7 +2598,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz",
      "integrity": "sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2609,7 +2614,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz",
      "integrity": "sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2625,7 +2630,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz",
      "integrity": "sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2641,7 +2646,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz",
      "integrity": "sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2657,7 +2662,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz",
      "integrity": "sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-module-transforms": "^7.25.9",
@@ -2690,7 +2695,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz",
      "integrity": "sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-module-transforms": "^7.25.9",
@@ -2709,7 +2714,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz",
      "integrity": "sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-module-transforms": "^7.25.9",
@@ -2726,7 +2731,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz",
      "integrity": "sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -2743,7 +2748,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz",
      "integrity": "sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2774,7 +2779,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz",
      "integrity": "sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2790,7 +2795,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz",
      "integrity": "sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-compilation-targets": "^7.25.9",
@@ -2808,7 +2813,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz",
      "integrity": "sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -2825,7 +2830,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz",
      "integrity": "sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2857,7 +2862,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz",
      "integrity": "sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2889,7 +2894,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz",
      "integrity": "sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -2907,7 +2912,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz",
      "integrity": "sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -2992,7 +2997,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz",
      "integrity": "sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -3009,7 +3014,7 @@
      "version": "7.26.0",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz",
      "integrity": "sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -3026,7 +3031,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz",
      "integrity": "sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -3042,7 +3047,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz",
      "integrity": "sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -3058,7 +3063,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz",
      "integrity": "sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9",
@@ -3075,7 +3080,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz",
      "integrity": "sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -3091,7 +3096,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
      "integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -3107,7 +3112,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz",
      "integrity": "sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -3142,7 +3147,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz",
      "integrity": "sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.25.9"
@@ -3158,7 +3163,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz",
      "integrity": "sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -3175,7 +3180,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz",
      "integrity": "sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -3192,7 +3197,7 @@
      "version": "7.25.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz",
      "integrity": "sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -3209,7 +3214,7 @@
      "version": "7.26.0",
      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.0.tgz",
      "integrity": "sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/compat-data": "^7.26.0",
@@ -3310,7 +3315,7 @@
      "version": "0.1.6-no-external-plugins",
      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.0.0",
@@ -3783,6 +3788,24 @@
        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
      }
    },
+    "node_modules/@eslint/compat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.3.2.tgz",
+      "integrity": "sha512-jRNwzTbd6p2Rw4sZ1CgWRS8YMtqG15YyZf7zvb6gY2rB2u6n+2Z+ELW0GtL0fQgyl0pr4Y/BzBfng/BdsereRA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.40 || 9"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@eslint/config-array": {
      "version": "0.20.0",
      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
@@ -7811,6 +7834,64 @@
        "node": ">=16.0.0"
      }
    },
+    "node_modules/@stylistic/eslint-plugin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-5.3.1.tgz",
+      "integrity": "sha512-Ykums1VYonM0TgkD0VteVq9mrlO2FhF48MDJnPyv3MktIB2ydtuhlO0AfWm7xnW1kyf5bjOqA6xc7JjviuVTxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/types": "^8.41.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "estraverse": "^5.3.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/@typescript-eslint/types": {
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.0.tgz",
+      "integrity": "sha512-ZSl2efn44VsYM0MfDQe68RKzBz75NPgLQXuGypmym6QVOWL5kegTZuZ02xRAT9T+onqvM6T8CdQk0OwYMB6ZvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/@swc/counter": {
      "version": "0.1.3",
      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -7904,7 +7985,6 @@
      "version": "10.4.1",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@babel/code-frame": "^7.10.4",
@@ -7924,7 +8004,6 @@
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=10"
@@ -7937,7 +8016,6 @@
      "version": "27.5.1",
      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^5.0.1",
@@ -7952,7 +8030,6 @@
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@testing-library/jest-dom": {
@@ -8033,7 +8110,6 @@
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@types/babel__core": {
@@ -8288,7 +8364,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": {
@@ -8320,7 +8395,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": "*",
@@ -8331,7 +8405,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": {
@@ -9140,9 +9213,9 @@
      }
    },
    "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
      "bin": {
        "acorn": "bin/acorn"
@@ -9379,7 +9452,6 @@
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
        "dequal": "^2.0.3"
@@ -9747,7 +9819,7 @@
      "version": "0.4.12",
      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz",
      "integrity": "sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/compat-data": "^7.22.6",
@@ -9762,7 +9834,7 @@
      "version": "0.10.6",
      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-define-polyfill-provider": "^0.6.2",
@@ -9776,7 +9848,7 @@
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz",
      "integrity": "sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-define-polyfill-provider": "^0.6.3"
@@ -11536,7 +11608,7 @@
      "version": "3.39.0",
      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.39.0.tgz",
      "integrity": "sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "browserslist": "^4.24.2"
@@ -12586,7 +12658,6 @@
      "version": "0.5.16",
      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/dom-converter": {
@@ -13274,6 +13345,19 @@
        }
      }
    },
+    "node_modules/eslint-plugin-diff": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-diff/-/eslint-plugin-diff-2.0.3.tgz",
+      "integrity": "sha512-pkSwOTjPxqtplq+Ea+9i75QMdmJrItu6oxIG6EWY8bJ5veBNMUrp6Oti+5L6SW20FfjX+CmlZz+fyiWGG1POaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.7.0"
+      }
+    },
    "node_modules/eslint-scope": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -13481,15 +13565,15 @@
      }
    },
    "node_modules/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
+        "eslint-visitor-keys": "^4.2.1"
      },
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -13578,7 +13662,7 @@
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
+      "devOptional": true,
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=0.10.0"
@@ -15821,6 +15905,22 @@
        "node": ">=10.17.0"
      }
    },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
    "node_modules/i18next": {
      "version": "24.1.2",
      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.1.2.tgz",
@@ -16177,7 +16277,7 @@
      "version": "2.16.1",
      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "hasown": "^2.0.2"
@@ -18428,7 +18528,7 @@
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/lodash.flow": {
@@ -18566,7 +18666,6 @@
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "dev": true,
      "license": "MIT",
      "bin": {
        "lz-string": "bin/bin.js"
@@ -19273,6 +19372,22 @@
      "license": "MIT",
      "optional": true
    },
+    "node_modules/nano-staged": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/nano-staged/-/nano-staged-0.8.0.tgz",
+      "integrity": "sha512-QSEqPGTCJbkHU2yLvfY6huqYPjdBrOaTMKatO1F8nCSrkQGXeKwtCiCnsdxnuMhbg3DTVywKaeWLGCE5oJpq0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "nano-staged": "lib/bin.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
    "node_modules/nanoclone": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
@@ -20017,7 +20132,7 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/path-scurry": {
@@ -22357,14 +22472,14 @@
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/regenerate-unicode-properties": {
      "version": "10.2.0",
      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
      "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "regenerate": "^1.4.2"
@@ -22383,7 +22498,7 @@
      "version": "0.15.2",
      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@babel/runtime": "^7.8.4"
@@ -22393,7 +22508,7 @@
      "version": "6.2.0",
      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
      "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "regenerate": "^1.4.2",
@@ -22411,14 +22526,14 @@
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/regjsparser": {
      "version": "0.12.0",
      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "BSD-2-Clause",
      "dependencies": {
        "jsesc": "~3.0.2"
@@ -22431,7 +22546,7 @@
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "bin": {
        "jsesc": "bin/jsesc"
@@ -22587,7 +22702,7 @@
      "version": "1.22.10",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "is-core-module": "^2.16.0",
@@ -24799,7 +24914,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -25676,7 +25791,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",
@@ -25737,7 +25852,7 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=4"
@@ -25747,7 +25862,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "unicode-canonical-property-names-ecmascript": "^2.0.0",
@@ -25761,7 +25876,7 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
      "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=4"
@@ -25771,7 +25886,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=4"
--- a/package.json
+++ b/package.json
@@ -19,20 +19,25 @@
  ],
  "homepage": "https://usebruno.com",
  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
    "@faker-js/faker": "^7.6.0",
    "@jest/globals": "^29.2.0",
    "@playwright/test": "^1.51.1",
    "@rollup/plugin-json": "^6.1.0",
+    "@stylistic/eslint-plugin": "^5.3.1",
    "@types/jest": "^29.5.11",
    "@types/lodash-es": "^4.17.12",
    "@types/node": "^22.14.1",
    "@typescript-eslint/parser": "^8.39.0",
    "concurrently": "^8.2.2",
    "eslint": "^9.26.0",
+    "eslint-plugin-diff": "^2.0.3",
    "fs-extra": "^11.1.1",
    "globals": "^16.1.0",
+    "husky": "^9.1.7",
    "jest": "^29.2.0",
    "lodash-es": "^4.17.21",
+    "nano-staged": "^0.8.0",
    "playwright": "^1.51.1",
    "pretty-quick": "^3.1.3",
    "randomstring": "^1.2.2",
@@ -68,7 +73,14 @@
    "test:e2e": "playwright test --project=default",
    "test:e2e:ssl": "playwright test --project=ssl",
    "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "lint": "node --max_old_space_size=4096 $(npx which eslint)"
+    "lint": "node --max_old_space_size=4096 $(npx which eslint)",
+    "lint:fix": "node --max_old_space_size=4096 $(npx which eslint) --fix",
+    "prepare": "husky"
+  },
+  "nano-staged": {
+    "*.{js,ts,jsx}": [
+      "npm run lint:fix"
+    ]
  },
  "overrides": {
    "rollup": "3.29.5",
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { IconPlus, IconDownload, IconSettings } from '@tabler/icons';
+
+const EnvironmentListContent = ({
+  environments,
+  activeEnvironmentUid,
+  description,
+  onEnvironmentSelect,
+  onSettingsClick,
+  onCreateClick,
+  onImportClick,
+}) => {
+  return (
+    <div>
+      {environments && environments.length > 0 ? (
+        <>
+          <div className="environment-list">
+            <div className="dropdown-item no-environment" onClick={() => onEnvironmentSelect(null)}>
+              <span>No Environment</span>
+            </div>
+            <div>
+              {environments.map(env => (
+                <div
+                  key={env.uid}
+                  className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'active' : ''}`}
+                  onClick={() => onEnvironmentSelect(env)}
+                >
+                  <span className="max-w-32 truncate no-wrap">{env.name}</span>
+                </div>
+              ))}
+            </div>
+            <div className="dropdown-item configure-button">
+              <button onClick={onSettingsClick} id="configure-env">
+                <IconSettings size={16} strokeWidth={1.5} />
+                <span>Configure</span>
+              </button>
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="empty-state">
+          <h3>Ready to get started?</h3>
+          <p>{description}</p>
+          <div className="space-y-2">
+            <button onClick={onCreateClick} id="create-env">
+              <IconPlus size={16} strokeWidth={1.5} />
+              Create
+            </button>
+            <button onClick={onImportClick} id="import-env">
+              <IconDownload size={16} strokeWidth={1.5} />
+              Import
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EnvironmentListContent;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -2,14 +2,227 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  .current-environment {
-    background-color: ${(props) => props.theme.sidebar.badge.bg};
-    border-radius: 15px;
+    border-radius: 0.9375rem;
+    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+    user-select: none;
+    background-color: transparent;
+    border: 1px solid ${props => props.theme.dropdown.selectedColor};
+    line-height: 1rem;

    .caret {
      margin-left: 0.25rem;
      color: rgb(140, 140, 140);
      fill: rgb(140, 140, 140);
    }
+
+    .env-icon {
+      margin-right: 0.25rem;
+      color: ${props => props.theme.dropdown.selectedColor};
+    }
+
+    .env-text {
+      color: ${props => props.theme.dropdown.selectedColor};
+      font-size: 0.875rem;
+    }
+
+    .env-separator {
+      color: #8c8c8c;
+      margin: 0 0.25rem;
+      opacity: 0.7;
+    }
+
+    .env-text-inactive {
+      color: ${props => props.theme.dropdown.color};
+      font-size: 0.875rem;
+      opacity: 0.7;
+    }
+
+    &.no-environments {
+      background-color: ${props => props.theme.sidebar.badge.bg};
+      border: 1px solid transparent;
+      color: ${props => props.theme.dropdown.secondaryText};
+    }
+  }
+
+  .tippy-box {
+    min-width: 11.875rem;
+    min-height: 15.0625rem;
+    max-height: 75vh;
+    font-size: 0.8125rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tippy-box .tippy-content {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      padding: 0.35rem 0.6rem;
+      cursor: pointer;
+      font-size: 0.8125rem;
+      color: ${props => props.theme.dropdown.primaryText};
+
+      &:hover:not(:disabled) {
+        background-color: ${props => props.theme.dropdown.hoverBg};
+      }
+
+      &.active {
+        background-color: ${props => props.theme.dropdown.selectedBg};
+        color: ${props => props.theme.dropdown.selectedColor};
+      }
+
+      &.no-environment {
+        color: ${props => props.theme.dropdown.mutedText};
+      }
+    }
+  }
+
+  .configure-button {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: ${props => props.theme.dropdown.bg};
+    border-top: 0.0625rem solid ${props => props.theme.dropdown.separator};
+    z-index: 10;
+    margin: 0;
+    
+    &:hover {
+      background-color: ${props => props.theme.dropdown.bg + ' !important'};
+    }
+
+    button {
+      color: ${props => props.theme.dropdown.primaryText};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      gap: 0.5rem;
+    }
+  }
+
+  .tab-button {
+    color: var(--color-tab-inactive);
+    font-size: 0.8125rem;
+
+    .tab-content-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 0.125rem;
+    }
+
+    &.active {
+      color: ${props => props.theme.tabs.active.color};
+      border-bottom-color: ${props => props.theme.tabs.active.border};
+    }
+
+    &.inactive {
+      border-bottom-color: transparent;
+    }
+  }
+
+  .tab-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .environment-list {
+    flex: 1;
+    overflow-y: auto;
+    max-height: calc(75vh - 8rem); 
+    padding-bottom: 2.625rem;
+  }
+
+  .dropdown-item-list {
+    max-height: 75vh;
+    overflow-y: scroll;
+  }
+
+  .empty-state {
+    max-width: 20rem;
+    margin: 0 auto;
+    padding: 0.35rem 0.6rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 12.5rem;
+
+    h3 {
+      color: ${props => props.theme.dropdown.primaryText};
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      line-height: 1.4;
+    }
+
+    p {
+      color: ${props => props.theme.dropdown.primaryText};
+      opacity: 0.75;
+      font-size: 0.6875rem;
+      line-height: 1.5;
+      margin-bottom: 1rem;
+      max-width: 11.875rem;
+      margin: 0 auto;
+      margin-bottom: 1rem;
+    }
+
+    .space-y-2 {
+      width: 100%;
+      align-self: stretch;
+    }
+
+    .space-y-2 > button {
+      border: 0.0625rem solid ${props => props.theme.dropdown.primaryText};
+      background: transparent;
+      color: ${props => props.theme.dropdown.primaryText};
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      width: 100%;
+      margin-bottom: 0.5rem;
+      font-size: 0.75rem;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+
+      &:hover {
+        background-color: ${props => props.theme.dropdown.hoverBg};
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .no-collection-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 1rem;
+    color: ${props => props.theme.dropdown.primaryText};
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    text-align: center;
+    opacity: 0.75;
+
+    svg {
+      margin: 0 auto 1rem auto;
+      color: ${props => props.theme.dropdown.primaryText};
+      opacity: 0.5;
+    }
  }
 `;

--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -1,95 +1,240 @@
-import React, { useRef, forwardRef, useState } from 'react';
+import React, { useState, useRef, forwardRef } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
-import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { IconWorld, IconDatabase, IconCaretDown, IconSettings, IconPlus, IconDownload } from '@tabler/icons';
+import { useSelector, useDispatch } from 'react-redux';
 import { updateEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
-import { IconSettings, IconCaretDown, IconDatabase, IconDatabaseOff } from '@tabler/icons';
-import EnvironmentSettings from '../EnvironmentSettings';
+import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
+import EnvironmentListContent from './EnvironmentListContent/index';
+import EnvironmentSettings from '../EnvironmentSettings';
+import GlobalEnvironmentSettings from 'components/GlobalEnvironments/EnvironmentSettings';
+import CreateEnvironment from '../EnvironmentSettings/CreateEnvironment';
+import ImportEnvironment from '../EnvironmentSettings/ImportEnvironment';
+import CreateGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment';
+import ImportGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/ImportEnvironment';
 import StyledWrapper from './StyledWrapper';

 const EnvironmentSelector = ({ collection }) => {
  const dispatch = useDispatch();
  const dropdownTippyRef = useRef();
-  const [openSettingsModal, setOpenSettingsModal] = useState(false);
-  const { environments, activeEnvironmentUid } = collection;
-  const activeEnvironment = activeEnvironmentUid ? find(environments, (e) => e.uid === activeEnvironmentUid) : null;
+  const [activeTab, setActiveTab] = useState('collection');
+  const [showGlobalSettings, setShowGlobalSettings] = useState(false);
+  const [showCollectionSettings, setShowCollectionSettings] = useState(false);
+  const [showCreateGlobalModal, setShowCreateGlobalModal] = useState(false);
+  const [showImportGlobalModal, setShowImportGlobalModal] = useState(false);
+  const [showCreateCollectionModal, setShowCreateCollectionModal] = useState(false);
+  const [showImportCollectionModal, setShowImportCollectionModal] = useState(false);

+  const globalEnvironments = useSelector(state => state.globalEnvironments.globalEnvironments);
+  const activeGlobalEnvironmentUid = useSelector(state => state.globalEnvironments.activeGlobalEnvironmentUid);
+  const activeGlobalEnvironment = activeGlobalEnvironmentUid
+    ? find(globalEnvironments, e => e.uid === activeGlobalEnvironmentUid)
+    : null;
+
+  const environments = collection?.environments || [];
+  const activeEnvironmentUid = collection?.activeEnvironmentUid;
+  const activeCollectionEnvironment = activeEnvironmentUid
+    ? find(environments, e => e.uid === activeEnvironmentUid)
+    : null;
+
+  const tabs = [
+    { id: 'collection', label: 'Collection', icon: <IconDatabase size={16} strokeWidth={1.5} /> },
+    { id: 'global', label: 'Global', icon: <IconWorld size={16} strokeWidth={1.5} /> },
+  ];
+
+  const onDropdownCreate = ref => {
+    dropdownTippyRef.current = ref;
+  };
+
+  // Get description based on active tab
+  const description
+    = activeTab === 'collection'
+      ? 'Create your first environment to begin working with your collection.'
+      : 'Create your first global environment to begin working across collections.';
+
+  // Environment selection handler
+  const handleEnvironmentSelect = environment => {
+    const action
+      = activeTab === 'collection'
+        ? selectEnvironment(environment ? environment.uid : null, collection.uid)
+        : selectGlobalEnvironment({ environmentUid: environment ? environment.uid : null });
+
+    dispatch(action)
+      .then(() => {
+        if (environment) {
+          toast.success(`Environment changed to ${environment.name}`);
+        } else {
+          toast.success('No Environments are active now');
+        }
+        dropdownTippyRef.current.hide();
+      })
+      .catch(err => {
+        toast.error('An error occurred while selecting the environment');
+      });
+  };
+
+  // Settings handler
+  const handleSettingsClick = () => {
+    if (activeTab === 'collection') {
+      dispatch(updateEnvironmentSettingsModalVisibility(true));
+      setShowCollectionSettings(true);
+    } else {
+      setShowGlobalSettings(true);
+    }
+    dropdownTippyRef.current.hide();
+  };
+
+  // Create handler
+  const handleCreateClick = () => {
+    if (activeTab === 'collection') {
+      setShowCreateCollectionModal(true);
+    } else {
+      setShowCreateGlobalModal(true);
+    }
+    dropdownTippyRef.current.hide();
+  };
+
+  // Import handler
+  const handleImportClick = () => {
+    if (activeTab === 'collection') {
+      setShowImportCollectionModal(true);
+    } else {
+      setShowImportGlobalModal(true);
+    }
+    dropdownTippyRef.current.hide();
+  };
+
+  // Modal handlers
+  const handleCloseSettings = () => {
+    setShowGlobalSettings(false);
+    setShowCollectionSettings(false);
+    dispatch(updateEnvironmentSettingsModalVisibility(false));
+  };
+
+  // Create icon component for dropdown trigger
  const Icon = forwardRef((props, ref) => {
+    const hasAnyEnv = activeGlobalEnvironment || activeCollectionEnvironment;
+
+    const displayContent = hasAnyEnv ? (
+      <>
+        {activeCollectionEnvironment && (
+          <>
+            <div className="flex items-center">
+              <IconDatabase size={14} strokeWidth={1.5} className="env-icon" />
+              <span className="env-text max-w-24 truncate no-wrap">{activeCollectionEnvironment.name}</span>
+            </div>
+            {activeGlobalEnvironment && <span className="env-separator">|</span>}
+          </>
+        )}
+        {activeGlobalEnvironment && (
+          <div className="flex items-center">
+            <IconWorld size={14} strokeWidth={1.5} className="env-icon" />
+            <span className="env-text max-w-24 truncate no-wrap">{activeGlobalEnvironment.name}</span>
+          </div>
+        )}
+      </>
+    ) : (
+      <span className="env-text-inactive max-w-36 truncate no-wrap">No environments</span>
+    );
+
    return (
-      <div ref={ref} className="current-environment collection-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
-        <p className="text-nowrap truncate max-w-32" title={activeEnvironment ? activeEnvironment.name : 'No Environment'}>{activeEnvironment ? activeEnvironment.name : 'No Environment'}</p>
+      <div
+        ref={ref}
+        className={`current-environment flex align-center justify-center cursor-pointer bg-transparent ${
+          !hasAnyEnv ? 'no-environments' : ''
+        }`}
+        data-testid="environment-selector-trigger"
+      >
+        {displayContent}
        <IconCaretDown className="caret" size={14} strokeWidth={2} />
      </div>
    );
  });

-  const handleSettingsIconClick = () => {
-    setOpenSettingsModal(true);
-    dispatch(updateEnvironmentSettingsModalVisibility(true));
-  };
-
-  const handleModalClose = () => {
-    setOpenSettingsModal(false);
-    dispatch(updateEnvironmentSettingsModalVisibility(false));
-  };
-
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const onSelect = (environment) => {
-    dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
-      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-        } else {
-          toast.success(`No Environments are active now`);
-        }
-      })
-      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
-  };
-
  return (
    <StyledWrapper>
-      <div className="flex items-center cursor-pointer environment-selector">
+      <div className="environment-selector flex align-center cursor-pointer">
        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div className="label-item font-medium">Collection Environments</div>
-          {environments && environments.length
-            ? environments.map((e) => (
-                <div
-                  className={`dropdown-item ${e?.uid === activeEnvironmentUid ? 'active' : ''}`}
-                  key={e.uid}
-                  onClick={() => {
-                    onSelect(e);
-                    dropdownTippyRef.current.hide();
-                  }}
-                >
-                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2 break-all">{e.name}</span>
-                </div>
-              ))
-            : null}
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onSelect(null);
-            }}
-          >
-            <IconDatabaseOff size={18} strokeWidth={1.5} />
-            <span className="ml-2">No Environment</span>
+          {/* Tab Headers */}
+          <div className="tab-header flex justify-center p-[0.75rem]">
+            {tabs.map(tab => (
+              <button
+                key={tab.id}
+                className={`tab-button whitespace-nowrap pb-[0.375rem] border-b-[0.125rem] bg-transparent flex align-center cursor-pointer transition-all duration-200 mr-[1.25rem] ${
+                  activeTab === tab.id ? 'active' : 'inactive'
+                }`}
+                onClick={() => setActiveTab(tab.id)}
+                data-testid={`env-tab-${tab.id}`}
+              >
+                <span className="tab-content-wrapper">
+                  {tab.icon}
+                  {tab.label}
+                </span>
+              </button>
+            ))}
          </div>
-          <div className="dropdown-item border-top" onClick={() => {
-            handleSettingsIconClick();
-            dropdownTippyRef.current.hide();
-          }}>
-            <div className="pr-2 text-gray-600" id="Configure">
-              <IconSettings size={18} strokeWidth={1.5} />
-            </div>
-            <span>Configure</span>
+
+          {/* Tab Content */}
+          <div className="tab-content">
+            <EnvironmentListContent
+              environments={activeTab === 'collection' ? environments : globalEnvironments}
+              activeEnvironmentUid={activeTab === 'collection' ? activeEnvironmentUid : activeGlobalEnvironmentUid}
+              description={description}
+              onEnvironmentSelect={handleEnvironmentSelect}
+              onSettingsClick={handleSettingsClick}
+              onCreateClick={handleCreateClick}
+              onImportClick={handleImportClick}
+            />
          </div>
        </Dropdown>
      </div>
-      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={handleModalClose} />}
+
+      {/* Modals - Rendered outside dropdown to avoid conflicts */}
+      {showGlobalSettings && (
+        <GlobalEnvironmentSettings globalEnvironments={globalEnvironments} onClose={handleCloseSettings} />
+      )}
+
+      {showCollectionSettings && <EnvironmentSettings collection={collection} onClose={handleCloseSettings} />}
+
+      {showCreateGlobalModal && (
+        <CreateGlobalEnvironment
+          onClose={() => setShowCreateGlobalModal(false)}
+          onEnvironmentCreated={() => {
+            setShowGlobalSettings(true);
+          }}
+        />
+      )}
+
+      {showImportGlobalModal && (
+        <ImportGlobalEnvironment
+          onClose={() => setShowImportGlobalModal(false)}
+          onEnvironmentCreated={() => {
+            setShowGlobalSettings(true);
+          }}
+        />
+      )}
+
+      {showCreateCollectionModal && (
+        <CreateEnvironment
+          collection={collection}
+          onClose={() => setShowCreateCollectionModal(false)}
+          onEnvironmentCreated={() => {
+            setShowCollectionSettings(true);
+          }}
+        />
+      )}
+
+      {showImportCollectionModal && (
+        <ImportEnvironment
+          collection={collection}
+          onClose={() => setShowImportCollectionModal(false)}
+          onEnvironmentCreated={() => {
+            setShowCollectionSettings(true);
+          }}
+        />
+      )}
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
@@ -8,7 +8,7 @@ import Portal from 'components/Portal';
 import Modal from 'components/Modal';
 import { validateName, validateNameError } from 'utils/common/regex';

-const CreateEnvironment = ({ collection, onClose }) => {
+const CreateEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
  const dispatch = useDispatch();
  const inputRef = useRef();

@@ -37,6 +37,10 @@ const CreateEnvironment = ({ collection, onClose }) => {
        .then(() => {
          toast.success('Environment created in collection');
          onClose();
+          // Call the callback if provided
+          if (onEnvironmentCreated) {
+            onEnvironmentCreated();
+          }
        })
        .catch(() => toast.error('An error occurred while creating the environment'));
    }
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -5,7 +5,7 @@ import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCh
 import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
+import MultiLineEditor from 'components/MultiLineEditor/index';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
@@ -214,7 +214,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                </td>
                <td className="flex flex-row flex-nowrap items-center">
                  <div className="overflow-hidden grow w-full relative">
-                    <SingleLineEditor
+                    <MultiLineEditor
                      theme={storedTheme}
                      collection={_collection}
                      name={`${index}.value`}
@@ -254,6 +254,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
            className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
            onClick={addVariable}
            id="add-variable"
+            data-testid="add-variable"
          >
            + Add Variable
          </button>
@@ -261,15 +262,15 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
      </div>

      <div className="flex items-center">
-        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit}>
+        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit} data-testid="save-env">
          <IconDeviceFloppy size={16} strokeWidth={1.5} className="mr-1" />
          Save
        </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset}>
+        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset} data-testid="reset-env">
          <IconRefresh size={16} strokeWidth={1.5} className="mr-1" />
          Reset
        </button>
-        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate}>
+        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate} data-testid="activate-env">
          <IconCircleCheck size={16} strokeWidth={1.5} className="mr-1" />
          Activate
        </button>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js
@@ -8,7 +8,7 @@ import { importEnvironment } from 'providers/ReduxStore/slices/collections/actio
 import { toastError } from 'utils/common/error';
 import { IconDatabaseImport } from '@tabler/icons';

-const ImportEnvironment = ({ collection, onClose }) => {
+const ImportEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
  const dispatch = useDispatch();

  const handleImportPostmanEnvironment = () => {
@@ -36,17 +36,22 @@ const ImportEnvironment = ({ collection, onClose }) => {
      })
      .then(() => {
        onClose();
+        // Call the callback if provided
+        if (onEnvironmentCreated) {
+          onEnvironmentCreated();
+        }
      })
      .catch((err) => toastError(err, 'Postman Import environment failed'));
  };

  return (
    <Portal>
-      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId="import-environment-modal">
        <button
          type="button"
          onClick={handleImportPostmanEnvironment}
          className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
+          data-testid="import-postman-environment"
        >
          <IconDatabaseImport size={64} />
          <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -56,9 +56,8 @@ const EnvironmentSettings = ({ collection, onClose }) => {
          ) : tab === 'import' ? (
            <ImportEnvironment collection={collection} onClose={() => setTab('default')} />
          ) : (
-            <></>
+            <DefaultTab setTab={setTab} />
          )}
-          <DefaultTab setTab={setTab} />
        </Modal>
      </StyledWrapper>
    );
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/StyledWrapper.js
@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  .current-environment {
-  }
-  .environment-active {
-    padding: 0.3rem 0.4rem;
-    color: ${(props) => props.theme.colors.text.yellow};
-    border: solid 1px ${(props) => props.theme.colors.text.yellow} !important;
-  }
-  .environment-selector {
-    .active: {
-      color: ${(props) => props.theme.colors.text.yellow};
-    }
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js
@@ -1,100 +0,0 @@
-import React, { useRef, forwardRef, useState } from 'react';
-import find from 'lodash/find';
-import Dropdown from 'components/Dropdown';
-import { IconSettings, IconWorld, IconDatabase, IconDatabaseOff, IconCheck } from '@tabler/icons';
-import EnvironmentSettings from '../EnvironmentSettings';
-import toast from 'react-hot-toast';
-import { useDispatch, useSelector } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import ToolHint from 'components/ToolHint/index';
-
-const EnvironmentSelector = () => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
-  const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
-  const [openSettingsModal, setOpenSettingsModal] = useState(false);
-  const activeEnvironment = activeGlobalEnvironmentUid ? find(globalEnvironments, (e) => e.uid === activeGlobalEnvironmentUid) : null;
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-        <div ref={ref} className={`current-environment global-environment flex flex-row gap-1 rounded-xl text-xs cursor-pointer items-center justify-center select-none ${activeGlobalEnvironmentUid? 'environment-active': ''}`}>
-          <ToolHint text="Global Environments" toolhintId="GlobalEnvironmentsToolhintId" className='flex flex-row'>
-            <IconWorld className="globe" size={16} strokeWidth={1.5} />
-            {
-              activeEnvironment ? <div className='text-nowrap truncate max-w-32'>{activeEnvironment?.name}</div> : null
-            }
-          </ToolHint>
-        </div>
-    );
-  });
-
-  const handleSettingsIconClick = () => {
-    setOpenSettingsModal(true);
-  };
-
-  const handleModalClose = () => {
-    setOpenSettingsModal(false);
-  };
-
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const onSelect = (environment) => {
-    dispatch(selectGlobalEnvironment({ environmentUid: environment ? environment.uid : null }))
-      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-        } else {
-          toast.success(`No Environments are active now`);
-        }
-      })
-      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="flex items-center cursor-pointer environment-selector mr-3">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end" transparent={true}>
-          <div className="label-item font-medium">Global Environments</div>
-          {globalEnvironments && globalEnvironments.length
-            ? globalEnvironments.map((e) => (
-                <div
-                  className={`dropdown-item ${e?.uid === activeGlobalEnvironmentUid ? 'active' : ''}`}
-                  key={e.uid}
-                  onClick={() => {
-                    onSelect(e);
-                    dropdownTippyRef.current.hide();
-                  }}
-                >
-                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2 break-all">{e.name}</span>
-                </div>
-              ))
-            : null}
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onSelect(null);
-            }}
-          >
-            <IconDatabaseOff size={18} strokeWidth={1.5} />
-            <span className="ml-2">No Environment</span>
-          </div>
-          <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>
-            <span>Configure</span>
-          </div>
-        </Dropdown>
-      </div>
-      {openSettingsModal && <EnvironmentSettings globalEnvironments={globalEnvironments} activeGlobalEnvironmentUid={activeGlobalEnvironmentUid} onClose={handleModalClose} />}
-    </StyledWrapper>
-  );
-};
-
-export default EnvironmentSelector;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
@@ -8,7 +8,7 @@ import Modal from 'components/Modal';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { validateName, validateNameError } from 'utils/common/regex';

-const CreateEnvironment = ({ onClose }) => {
+const CreateEnvironment = ({ onClose, onEnvironmentCreated }) => {
  const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);

  const validateEnvironmentName = (name) => {
@@ -39,6 +39,10 @@ const CreateEnvironment = ({ onClose }) => {
        .then(() => {
          toast.success('Global environment created!');
          onClose();
+          // Call the callback if provided
+          if (onEnvironmentCreated) {
+            onEnvironmentCreated();
+          }
        })
        .catch(() => toast.error('An error occurred while creating the environment'));
    }
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -3,7 +3,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash, IconAlertCircle } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
+import MultiLineEditor from 'components/MultiLineEditor/index';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
@@ -145,10 +145,11 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
                    <ErrorMessage name={`${index}.name`} />
                  </div>
                </td>
-                <td className="flex flex-row flex-nowrap">
+                <td className="flex flex-row flex-nowrap items-center">
                  <div className="overflow-hidden grow w-full relative">
-                    <SingleLineEditor
+                    <MultiLineEditor
                      theme={storedTheme}
+                      collection={{}}
                      name={`${index}.value`}
                      value={variable.value}
                      isSecret={variable.secret}
@@ -179,6 +180,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
            ref={addButtonRef}
            className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
            onClick={addVariable}
+            data-testid="add-variable"
          >
            + Add Variable
          </button>
@@ -186,10 +188,10 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
      </div>

      <div>
-        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
+        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit} data-testid="save-env">
          Save
        </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset}>
+        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset} data-testid="reset-env">
          Reset
        </button>
      </div>
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/ImportEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/ImportEnvironment/index.js
@@ -9,7 +9,7 @@ import { IconDatabaseImport } from '@tabler/icons';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { uuid } from 'utils/common/index';

-const ImportEnvironment = ({ onClose }) => {
+const ImportEnvironment = ({ onClose, onEnvironmentCreated }) => {
  const dispatch = useDispatch();

  const handleImportPostmanEnvironment = () => {
@@ -37,17 +37,22 @@ const ImportEnvironment = ({ onClose }) => {
      })
      .then(() => {
        onClose();
+        // Call the callback if provided
+        if (onEnvironmentCreated) {
+          onEnvironmentCreated();
+        }
      })
      .catch((err) => toastError(err, 'Postman Import environment failed'));
  };

  return (
    <Portal>
-      <Modal size="sm" title="Import Global Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+      <Modal size="sm" title="Import Global Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId="import-global-environment-modal">
        <button
          type="button"
          onClick={handleImportPostmanEnvironment}
          className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
+          data-testid="import-postman-global-environment"
        >
          <IconDatabaseImport size={64} />
          <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js
@@ -39,7 +39,7 @@ const DefaultTab = ({ setTab }) => {
  );
 };

-const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, onClose }) => {
+const EnvironmentSettings = ({ globalEnvironments, onClose }) => {
  const [isModified, setIsModified] = useState(false);
  const environments = globalEnvironments;
  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
@@ -53,9 +53,8 @@ const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, o
          ) : tab === 'import' ? (
            <ImportEnvironment onClose={() => setTab('default')} />
          ) : (
-            <></>
+            <DefaultTab setTab={setTab} />
          )}
-          <DefaultTab setTab={setTab} />
        </Modal>
      </StyledWrapper>
    );
@@ -65,7 +64,6 @@ const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, o
    <Modal size="lg" title="Global Environments" handleCancel={onClose} hideFooter={true}>
      <EnvironmentList
        environments={globalEnvironments}
-        activeEnvironmentUid={activeGlobalEnvironmentUid}
        selectedEnvironment={selectedEnvironment}
        setSelectedEnvironment={setSelectedEnvironment}
        isModified={isModified}
--- a/packages/bruno-app/src/components/Modal/index.js
+++ b/packages/bruno-app/src/components/Modal/index.js
@@ -71,7 +71,8 @@ const Modal = ({
  disableCloseOnOutsideClick,
  disableEscapeKey,
  onClick,
-  closeModalFadeTimeout = 500
+  closeModalFadeTimeout = 500,
+  dataTestId,
 }) => {
  const modalRef = useRef(null);
  const [isClosing, setIsClosing] = useState(false);
@@ -120,6 +121,7 @@ const Modal = ({
        role="dialog"
        aria-labelledby="modal-title"
        aria-describedby="modal-description"
+        data-testid={dataTestId}
      >
        <ModalHeader
          title={title}
--- a/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js
@@ -11,7 +11,9 @@ const StyledWrapper = styled.div`
    height: fit-content;
    font-size: 14px;
    line-height: 30px;
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    max-height: 200px;

    pre.CodeMirror-placeholder {
      color: ${(props) => props.theme.text};
@@ -19,18 +21,10 @@ const StyledWrapper = styled.div`
      opacity: 0.5;
    }

-  .CodeMirror-scroll {
-      overflow: visible !important;
-      position: relative;
-      display: block;
-      margin: 0px;
-      padding: 0px;
-    }
-
    .CodeMirror-vscrollbar,
    .CodeMirror-hscrollbar,
    .CodeMirror-scrollbar-filler {
-      display: none;
+      display: none !important;
    }

    .CodeMirror-lines {
--- a/packages/bruno-app/src/components/MultiLineEditor/index.js
+++ b/packages/bruno-app/src/components/MultiLineEditor/index.js
@@ -3,7 +3,9 @@ import isEqual from 'lodash/isEqual';
 import { getAllVariables } from 'utils/collections';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import { setupAutoComplete } from 'utils/codemirror/autocomplete';
+import { MaskedEditor } from 'utils/common/masked-editor';
 import StyledWrapper from './StyledWrapper';
+import { IconEye, IconEyeOff } from '@tabler/icons';

 const CodeMirror = require('codemirror');

@@ -16,6 +18,10 @@ class MultiLineEditor extends Component {
    this.cachedValue = props.value || '';
    this.editorRef = React.createRef();
    this.variables = {};
+
+    this.state = {
+      maskInput: props.isSecret || false, // Always mask the input by default (if it's a secret)
+    };
  }
  componentDidMount() {
    // Initialize CodeMirror as a single line editor
@@ -23,22 +29,14 @@ class MultiLineEditor extends Component {
    const variables = getAllVariables(this.props.collection, this.props.item);

    this.editor = CodeMirror(this.editorRef.current, {
-      lineWrapping: false,
-      lineNumbers: false,
      theme: this.props.theme === 'dark' ? 'monokai' : 'default',
      placeholder: this.props.placeholder,
      mode: 'brunovariables',
      brunoVarInfo: {
        variables
      },
-      scrollbarStyle: null,
      tabindex: 0,
      extraKeys: {
-        Enter: () => {
-          if (this.props.onRun) {
-            this.props.onRun();
-          }
-        },
        'Ctrl-Enter': () => {
          if (this.props.onRun) {
            this.props.onRun();
@@ -49,14 +47,6 @@ class MultiLineEditor extends Component {
            this.props.onRun();
          }
        },
-        'Alt-Enter': () => {
-          this.editor.setValue(this.editor.getValue() + '\n');
-          this.editor.setCursor({ line: this.editor.lineCount(), ch: 0 });
-        },
-        'Shift-Enter': () => {
-          this.editor.setValue(this.editor.getValue() + '\n');
-          this.editor.setCursor({ line: this.editor.lineCount(), ch: 0 });
-        },
        'Cmd-S': () => {
          if (this.props.onSave) {
            this.props.onSave();
@@ -94,6 +84,10 @@ class MultiLineEditor extends Component {
    this.editor.setValue(String(this.props.value) || '');
    this.editor.on('change', this._onEdit);
    this.addOverlay(variables);
+
+    // Initialize masking if this is a secret field
+    this.setState({ maskInput: this.props.isSecret });
+    this._enableMaskedEditor(this.props.isSecret);
  }

  _onEdit = () => {
@@ -105,6 +99,19 @@ class MultiLineEditor extends Component {
    }
  };

+  /** Enable or disable masking the rendered content of the editor */
+  _enableMaskedEditor = enabled => {
+    if (typeof enabled !== 'boolean') return;
+
+    if (enabled == true) {
+      if (!this.maskedEditor) this.maskedEditor = new MaskedEditor(this.editor, '*');
+      this.maskedEditor.enable();
+    } else {
+      this.maskedEditor?.disable();
+      this.maskedEditor = null;
+    }
+  };
+
  componentDidUpdate(prevProps) {
    // Ensure the changes caused by this update are not interpreted as
    // user-input changes which could otherwise result in an infinite
@@ -123,8 +130,11 @@ class MultiLineEditor extends Component {
      this.cachedValue = String(this.props.value);
      this.editor.setValue(String(this.props.value) || '');
    }
-    if (this.editorRef?.current) {
-      this.editorRef.current.scrollTo(0, 10000);
+    if (!isEqual(this.props.isSecret, prevProps.isSecret)) {
+      // If the secret flag has changed, update the editor to reflect the change
+      this._enableMaskedEditor(this.props.isSecret);
+      // also set the maskInput flag to the new value
+      this.setState({ maskInput: this.props.isSecret });
    }
    this.ignoreChangeEvent = false;
  }
@@ -133,6 +143,10 @@ class MultiLineEditor extends Component {
    if (this.brunoAutoCompleteCleanup) {
      this.brunoAutoCompleteCleanup();
    }
+    if (this.maskedEditor) {
+      this.maskedEditor.destroy();
+      this.maskedEditor = null;
+    }
    this.editor.getWrapperElement().remove();
  }

@@ -142,8 +156,38 @@ class MultiLineEditor extends Component {
    this.editor.setOption('mode', 'brunovariables');
  };

+  /**
+   * @brief Toggle the visibility of the secret value
+   */
+  toggleVisibleSecret = () => {
+    const isVisible = !this.state.maskInput;
+    this.setState({ maskInput: isVisible });
+    this._enableMaskedEditor(isVisible);
+  };
+
+  /**
+   * @brief Eye icon to show/hide the secret value
+   * @returns ReactComponent The eye icon
+   */
+  secretEye = isSecret => {
+    return isSecret === true ? (
+      <button className="mx-2" onClick={() => this.toggleVisibleSecret()}>
+        {this.state.maskInput === true ? (
+          <IconEyeOff size={18} strokeWidth={2} />
+        ) : (
+          <IconEye size={18} strokeWidth={2} />
+        )}
+      </button>
+    ) : null;
+  };
+
  render() {
-    return <StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>;
+    return (
+      <div className={`flex flex-row justify-between w-full overflow-x-auto ${this.props.className}`}>
+        <StyledWrapper ref={this.editorRef} className="multi-line-editor grow" />
+        {this.secretEye(this.props.isSecret)}
+      </div>
+    );
  }
 }
 export default MultiLineEditor;
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -147,7 +147,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
              Save <span className="shortcut">({saveShortcut})</span>
            </span>
          </div>
-          <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
+          <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} data-testid="send-arrow-icon" />
        </div>
      </div>
      {generateCodeItemModalOpen && (
--- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { uuid } from 'utils/common';
 import { IconFiles, IconRun, IconEye, IconSettings } from '@tabler/icons';
 import EnvironmentSelector from 'components/Environments/EnvironmentSelector';
-import GlobalEnvironmentSelector from 'components/GlobalEnvironments/EnvironmentSelector';
 import { addTab } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch } from 'react-redux';
 import ToolHint from 'components/ToolHint';
@@ -69,9 +68,8 @@ const CollectionToolBar = ({ collection }) => {
            </ToolHint>
          </span>
          <span>
-            <GlobalEnvironmentSelector />
+            <EnvironmentSelector collection={collection} />
          </span>
-          <EnvironmentSelector collection={collection} />
        </div>
      </div>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/ResponsePane/StatusCode/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/StatusCode/index.js
@@ -16,7 +16,7 @@ const StatusCode = ({ status }) => {
  };

  return (
-    <StyledWrapper className={`response-status-code ${getTabClassname(status)}`}>
+    <StyledWrapper className={`response-status-code ${getTabClassname(status)}`} data-testid="response-status-code">
      {status} {statusCodePhraseMap[status]}
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
@@ -153,7 +153,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
  ]

  return (
-    <Modal size="sm" title="Import Collection" hideFooter={true} handleCancel={onClose}>
+    <Modal size="sm" title="Import Collection" hideFooter={true} handleCancel={onClose} dataTestId="import-collection-modal">
      <div className="flex flex-col">
          <div className="mb-4">
          <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Import from file</h3>
--- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
@@ -48,7 +48,7 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
  const onSubmit = () => formik.handleSubmit();

  return (
-    <Modal size="sm" title="Import Collection" confirmText="Import" handleConfirm={onSubmit} handleCancel={onClose}>
+    <Modal size="sm" title="Import Collection" confirmText="Import" handleConfirm={onSubmit} handleCancel={onClose} dataTestId="import-collection-location-modal">
      <form className="bruno-form" onSubmit={e => e.preventDefault()}>
        <div>
          <label htmlFor="collectionName" className="block font-semibold">
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import isEqual from 'lodash/isEqual';
 import { getAllVariables } from 'utils/collections';
-import { defineCodeMirrorBrunoVariablesMode, MaskedEditor } from 'utils/common/codemirror';
+import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
+import { MaskedEditor } from 'utils/common/masked-editor';
 import { setupAutoComplete } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import { IconEye, IconEyeOff } from '@tabler/icons';
@@ -159,6 +160,10 @@ class SingleLineEditor extends Component {
    if (this.brunoAutoCompleteCleanup) {
      this.brunoAutoCompleteCleanup();
    }
+    if (this.maskedEditor) {
+      this.maskedEditor.destroy();
+      this.maskedEditor = null;
+    }
  }

  addOverlay = (variables) => {
--- a/packages/bruno-app/src/providers/ReduxStore/slices/global-environments.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/global-environments.js
@@ -94,6 +94,7 @@ export const addGlobalEnvironment = ({ name, variables = [] }) => (dispatch, get
    ipcRenderer
      .invoke('renderer:create-global-environment', { name, uid, variables })
      .then(() => dispatch(_addGlobalEnvironment({ name, uid, variables })))
+      .then(() => dispatch(_selectGlobalEnvironment({ environmentUid: uid })))
      .then(resolve)
      .catch(reject);
  });
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -79,10 +79,16 @@ const darkTheme = {
    color: 'rgb(204, 204, 204)',
    iconColor: 'rgb(204, 204, 204)',
    bg: 'rgb(48, 48, 49)',
-    hoverBg: '#185387',
+    hoverBg: '#6A6A6A29',
    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
    separator: '#444',
-    labelBg: '#4a4949'
+    labelBg: '#4a4949',
+    selectedBg: '#F59E0B14',
+    selectedColor: '#F59E0B',
+    mutedText: '#9B9B9B',
+    primaryText: '#D4D4D4',
+    secondaryText: '#9CA3AF',
+    headingText: '#FFFFFF',
  },

  request: {
@@ -228,8 +234,8 @@ const darkTheme = {

  tabs: {
    active: {
-      color: '#ccc',
-      border: '#569cd6'
+      color: '#CCCCCC',
+      border: '#F59E0B',
    }
  },

--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -79,10 +79,16 @@ const lightTheme = {
    color: 'rgb(48 48 48)',
    iconColor: 'rgb(75, 85, 99)',
    bg: '#fff',
-    hoverBg: '#e9e9e9',
+    hoverBg: '#e9ecef',
    shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
    separator: '#e7e7e7',
-    labelBg: '#f3f3f3'
+    labelBg: '#f3f3f3',
+    selectedBg: '#D977060F',
+    selectedColor: '#D97706',
+    mutedText: '#9B9B9B',
+    primaryText: '#343434',
+    secondaryText: '#6B7280',
+    headingText: '#343434',
  },

  request: {
@@ -229,8 +235,8 @@ const lightTheme = {

  tabs: {
    active: {
-      color: 'rgb(50, 46, 44)',
-      border: '#546de5'
+      color: '#343434',
+      border: '#D97706',
    }
  },

--- a/packages/bruno-app/src/utils/common/codemirror.js
+++ b/packages/bruno-app/src/utils/common/codemirror.js
@@ -8,80 +8,6 @@ const pathFoundInVariables = (path, obj) => {
  return value !== undefined;
 };

-/**
- * Changes the render behaviour for a given CodeMirror editor.
- * Replaces all **rendered** characters, not the actual value, with the provided character.
- */
-export class MaskedEditor {
-  /**
-   * @param {import('codemirror').Editor} editor CodeMirror editor instance
-   * @param {string} maskChar Target character being applied to all content
-   */
-  constructor(editor, maskChar) {
-    this.editor = editor;
-    this.maskChar = maskChar;
-    this.enabled = false;
-  }
-
-  /**
-   * Set and apply new masking character
-   */
-  enable = () => {
-    this.enabled = true;
-    this.editor.setValue(this.editor.getValue());
-    this.editor.on('inputRead', this.maskContent);
-    this.update();
-  };
-
-  /** Disables masking of the editor field. */
-  disable = () => {
-    this.enabled = false;
-    this.editor.off('inputRead', this.maskContent);
-    this.editor.setValue(this.editor.getValue());
-  };
-
-  /** Updates the rendered content if enabled. */
-  update = () => {
-    if (this.enabled) this.maskContent();
-  };
-
-  /** Replaces all rendered characters, with the provided character. */
-  maskContent = () => {
-    const content = this.editor.getValue();
-    const lineCount = this.editor.lineCount();
-
-    if (lineCount === 0) return;
-    this.editor.operation(() => {
-      // Clear previous masked text
-      this.editor.getAllMarks().forEach((mark) => mark.clear());
-      // Apply new masked text
-
-      if (content.length <= 500) {
-        for (let i = 0; i < content.length; i++) {
-          if (content[i] !== '\n') {
-            const maskedNode = document.createTextNode(this.maskChar);
-            this.editor.markText(
-              { line: this.editor.posFromIndex(i).line, ch: this.editor.posFromIndex(i).ch },
-              { line: this.editor.posFromIndex(i + 1).line, ch: this.editor.posFromIndex(i + 1).ch },
-              { replacedWith: maskedNode, handleMouseEvents: true }
-            );
-          }
-        }
-      } else {
-        for (let line = 0; line < lineCount; line++) {
-          const lineLength = this.editor.getLine(line).length;
-          const maskedNode = document.createTextNode('*'.repeat(lineLength));
-          this.editor.markText(
-            { line, ch: 0 },
-            { line, ch: lineLength },
-            { replacedWith: maskedNode, handleMouseEvents: false }
-          );
-        }
-      }
-    });
-  };
-}
-
 /**
 * Defines a custom CodeMirror mode for Bruno variables highlighting.
 * This function creates a specialized mode that can highlight both Bruno template
--- a/packages/bruno-app/src/utils/common/masked-editor.js
+++ b/packages/bruno-app/src/utils/common/masked-editor.js
@@ -0,0 +1,440 @@
+/**
+ * MaskedEditor - A robust, multiline-capable masking system for CodeMirror editors
+ *
+ * OVERVIEW:
+ * This implementation provides flawless masking of sensitive content with proper
+ * multiline support, error handling, and memory management. It replaces visible
+ * characters with mask characters while preserving the actual content.
+ *
+ * KEY FEATURES:
+ * - Zero race conditions with proper state management
+ * - Perfect performance for any content size (small or large)
+ * - Proper event handling with cleanup
+ * - Memory leak prevention with comprehensive cleanup
+ * - Cursor position preservation across multiline edits
+ * - Copy/paste compatibility with masked content
+ * - Full multiline support (JSON, XML, certificates, etc.)
+ * - State consistency across all operations
+ * - Error handling for problematic content
+ * - Performance optimization strategies
+ *
+ * MULTILINE SUPPORT:
+ * The MaskedEditor automatically handles multiline content efficiently:
+ * - Small content (< 1000 chars): Character-by-character masking
+ * - Large content (>= 1000 chars): Line-by-line masking for performance
+ * - Preserves line breaks and cursor position across line boundaries
+ * - Handles empty lines gracefully
+ *
+ * USAGE PATTERNS:
+ * 1. Create: new MaskedEditor(editor, maskChar)
+ * 2. Enable: maskedEditor.enable() - Start masking
+ * 3. Disable: maskedEditor.disable() - Show real content
+ * 4. Cleanup: maskedEditor.destroy() - CRITICAL for memory management
+ *
+ * MEMORY MANAGEMENT:
+ * Always call destroy() when done to prevent memory leaks:
+ * - Removes all event listeners
+ * - Clears all DOM marks and references
+ * - Cancels pending timeouts
+ * - Nullifies object references
+ *
+ * API METHODS:
+ * - enable(): Start masking the editor content
+ * - disable(): Stop masking and show real content
+ * - update(): Refresh masking (called automatically)
+ * - destroy(): Clean up all resources (CRITICAL!)
+ * - isEnabled(): Check if masking is currently active
+ * - getMaskChar(): Get current mask character
+ * - setMaskChar(char): Change mask character
+ *
+ * PERFORMANCE:
+ * - Uses debounced updates (10ms) to prevent excessive re-renders
+ * - Character-by-character masking for precise control on small content
+ * - Line-by-line masking for efficiency on large content
+ * - Efficient mark cleanup and reuse
+ * - Bounds checking to prevent errors
+ *
+ * ERROR HANDLING:
+ * - Try-catch blocks for problematic content
+ * - Bounds checking for cursor positions
+ * - Graceful degradation when marks fail
+ * - Memory cleanup even on errors
+ */
+
+export class MaskedEditor {
+  constructor(editor, maskChar = '*') {
+    this.editor = editor;
+    this.maskChar = maskChar;
+    this.enabled = false;
+    this.isProcessing = false;
+    this.marks = new Set();
+    this.originalCursor = null;
+    this.originalSelection = null;
+
+    // Bind methods to preserve context
+    this.handleInputRead = this.handleInputRead.bind(this);
+    this.handleBeforeChange = this.handleBeforeChange.bind(this);
+    this.handleCursorActivity = this.handleCursorActivity.bind(this);
+    this.handleSelectionChange = this.handleSelectionChange.bind(this);
+  }
+
+  /**
+   * Enable masking with perfect state management
+   */
+  enable() {
+    if (this.enabled || this.isProcessing) return;
+
+    this.enabled = true;
+    this.isProcessing = true;
+
+    try {
+      // Store current cursor and selection
+      this.storeCursorState();
+
+      // Add event listeners with proper cleanup
+      this.editor.on('inputRead', this.handleInputRead);
+      this.editor.on('beforeChange', this.handleBeforeChange);
+      this.editor.on('cursorActivity', this.handleCursorActivity);
+      this.editor.on('selectionChange', this.handleSelectionChange);
+
+      // Apply masking
+      this.applyMasking();
+
+      // Restore cursor state
+      this.restoreCursorState();
+    } finally {
+      this.isProcessing = false;
+    }
+  }
+
+  /**
+   * Disable masking with complete cleanup
+   */
+  disable() {
+    if (!this.enabled || this.isProcessing) return;
+
+    this.enabled = false;
+    this.isProcessing = true;
+
+    try {
+      // Store current state
+      this.storeCursorState();
+
+      // Remove event listeners
+      this.editor.off('inputRead', this.handleInputRead);
+      this.editor.off('beforeChange', this.handleBeforeChange);
+      this.editor.off('cursorActivity', this.handleCursorActivity);
+      this.editor.off('selectionChange', this.handleSelectionChange);
+
+      // Clear all marks
+      this.clearAllMarks();
+
+      // Refresh editor to show real content
+      this.editor.refresh();
+
+      // Restore cursor state
+      this.restoreCursorState();
+    } finally {
+      this.isProcessing = false;
+    }
+  }
+
+  /**
+   * Update masking (called when content changes)
+   */
+  update() {
+    if (!this.enabled || this.isProcessing) return;
+
+    this.isProcessing = true;
+
+    try {
+      this.storeCursorState();
+      this.applyMasking();
+      this.restoreCursorState();
+    } finally {
+      this.isProcessing = false;
+    }
+  }
+
+  /**
+   * Handle multiline content changes efficiently
+   */
+  handleMultilineChange() {
+    if (!this.enabled || this.isProcessing) return;
+
+    this.isProcessing = true;
+
+    try {
+      const content = this.editor.getValue();
+      const lineCount = this.editor.lineCount();
+
+      // For multiline content, use more efficient line-based masking
+      if (lineCount > 1) {
+        this.editor.operation(() => {
+          this.clearAllMarks();
+          this.applyLineMasking(lineCount);
+        });
+      } else {
+        this.update();
+      }
+    } finally {
+      this.isProcessing = false;
+    }
+  }
+
+  /**
+   * Store current cursor and selection state
+   */
+  storeCursorState() {
+    this.originalCursor = this.editor.getCursor();
+    this.originalSelection = this.editor.getSelection();
+  }
+
+  /**
+   * Restore cursor and selection state
+   */
+  restoreCursorState() {
+    if (this.originalCursor) {
+      // Ensure cursor position is within editor bounds
+      const lineCount = this.editor.lineCount();
+      const clampedLine = Math.min(this.originalCursor.line, Math.max(0, lineCount - 1));
+      const lineLength = this.editor.getLine(clampedLine).length;
+      const clampedCh = Math.min(this.originalCursor.ch, Math.max(0, lineLength));
+
+      this.editor.setCursor({ line: clampedLine, ch: clampedCh });
+    }
+    if (this.originalSelection) {
+      // For selection, just set cursor position to avoid selection issues with masked content
+      this.editor.setSelection(this.editor.getCursor(), this.editor.getCursor());
+    }
+  }
+
+  /**
+   * Handle input read events
+   */
+  handleInputRead() {
+    if (!this.enabled || this.isProcessing) return;
+
+    // Debounce masking to prevent excessive updates
+    clearTimeout(this.maskTimeout);
+    this.maskTimeout = setTimeout(() => {
+      this.update();
+    }, 10);
+  }
+
+  /**
+   * Handle before change events to preserve cursor
+   */
+  handleBeforeChange(cm, changeObj) {
+    if (!this.enabled || this.isProcessing) return;
+
+    // Store cursor position before change
+    this.storeCursorState();
+  }
+
+  /**
+   * Handle cursor activity
+   */
+  handleCursorActivity() {
+    if (!this.enabled || this.isProcessing) return;
+
+    // Update cursor state
+    this.storeCursorState();
+  }
+
+  /**
+   * Handle selection changes
+   */
+  handleSelectionChange() {
+    if (!this.enabled || this.isProcessing) return;
+
+    // Update selection state
+    this.storeCursorState();
+  }
+
+  /**
+   * Apply masking with perfect performance
+   */
+  applyMasking() {
+    const content = this.editor.getValue();
+    const lineCount = this.editor.lineCount();
+
+    if (lineCount === 0) return;
+
+    this.editor.operation(() => {
+      // Clear existing marks
+      this.clearAllMarks();
+
+      // Apply new masking based on content size
+      if (content.length <= 1000) {
+        this.applyCharacterMasking(content);
+      } else {
+        this.applyLineMasking(lineCount);
+      }
+    });
+  }
+
+  /**
+   * Apply character-by-character masking for small content
+   */
+  applyCharacterMasking(content) {
+    let currentLine = 0;
+    let currentCh = 0;
+
+    for (let i = 0; i < content.length; i++) {
+      const char = content[i];
+
+      if (char === '\n') {
+        currentLine++;
+        currentCh = 0;
+      } else {
+        // Create masked node
+        const maskedNode = document.createTextNode(this.maskChar);
+
+        // Create mark with proper bounds checking
+        const fromPos = { line: currentLine, ch: currentCh };
+        const toPos = { line: currentLine, ch: currentCh + 1 };
+
+        // Ensure positions are within editor bounds
+        const lineCount = this.editor.lineCount();
+        if (currentLine < lineCount) {
+          const lineLength = this.editor.getLine(currentLine).length;
+          if (currentCh < lineLength) {
+            const mark = this.editor.markText(fromPos, toPos, {
+              replacedWith: maskedNode,
+              handleMouseEvents: true,
+              className: 'masked-character',
+            });
+
+            // Store mark for cleanup
+            this.marks.add(mark);
+          }
+        }
+
+        currentCh++;
+      }
+    }
+  }
+
+  /**
+   * Apply line-by-line masking for large content
+   */
+  applyLineMasking(lineCount) {
+    for (let line = 0; line < lineCount; line++) {
+      try {
+        const lineLength = this.editor.getLine(line).length;
+
+        if (lineLength > 0) {
+          // Create masked node for entire line
+          const maskedNode = document.createTextNode(this.maskChar.repeat(lineLength));
+
+          // Create mark with proper bounds checking
+          const mark = this.editor.markText({ line, ch: 0 },
+            { line, ch: lineLength },
+            {
+              replacedWith: maskedNode,
+              handleMouseEvents: false,
+              className: 'masked-line',
+            });
+
+          // Store mark for cleanup
+          this.marks.add(mark);
+        }
+      } catch (error) {
+        // Skip problematic lines to prevent crashes
+        console.warn(`Failed to mask line ${line}:`, error);
+      }
+    }
+  }
+
+  /**
+   * Clear all marks with proper cleanup
+   */
+  clearAllMarks() {
+    this.marks.forEach(mark => {
+      try {
+        mark.clear();
+      } catch (e) {
+        // Ignore errors when clearing marks
+      }
+    });
+    this.marks.clear();
+
+    // Also clear any marks that might have been created outside our control
+    this.editor.getAllMarks().forEach(mark => {
+      try {
+        mark.clear();
+      } catch (e) {
+        // Ignore errors
+      }
+    });
+  }
+
+  /**
+   * Check if masking is enabled
+   */
+  isEnabled() {
+    return this.enabled;
+  }
+
+  /**
+   * Get current mask character
+   */
+  getMaskChar() {
+    return this.maskChar;
+  }
+
+  /**
+   * Set new mask character
+   */
+  setMaskChar(newMaskChar) {
+    if (typeof newMaskChar !== 'string' || newMaskChar.length !== 1) {
+      throw new Error('Mask character must be a single character string');
+    }
+
+    this.maskChar = newMaskChar;
+
+    if (this.enabled) {
+      this.update();
+    }
+  }
+
+  /**
+   * Destroy the masked editor instance
+   *
+   * CRITICAL: Always call this method when done with the MaskedEditor
+   * to prevent memory leaks. This method:
+   * 1. Disables masking and removes event listeners
+   * 2. Clears all DOM marks and references
+   * 3. Cancels any pending timeouts
+   * 4. Nullifies all object references
+   */
+  destroy() {
+    this.disable();
+    this.marks.clear();
+    this.originalCursor = null;
+    this.originalSelection = null;
+
+    if (this.maskTimeout) {
+      clearTimeout(this.maskTimeout);
+      this.maskTimeout = null;
+    }
+  }
+}
+
+/**
+ * Factory function to create a perfect masked editor
+ */
+export function createMaskedEditor(editor, maskChar = '*') {
+  return new MaskedEditor(editor, maskChar);
+}
+
+/**
+ * Utility function to check if an editor supports masking
+ */
+export function supportsMasking(editor) {
+  return editor
+    && typeof editor.getValue === 'function'
+    && typeof editor.markText === 'function'
+    && typeof editor.operation === 'function';
+}
--- a/packages/bruno-electron/electron-builder-config.js
+++ b/packages/bruno-electron/electron-builder-config.js
@@ -8,6 +8,12 @@ const config = {
    buildResources: 'resources',
    output: 'out'
  },
+  extraResources: [
+    {
+      from: 'resources/data/sample-collection.json',
+      to: 'data/sample-collection.json',
+    },
+  ],
  files: ['**/*'],
  afterSign: 'notarize.js',
  mac: {
--- a/packages/bruno-electron/resources/data/sample-collection.json
+++ b/packages/bruno-electron/resources/data/sample-collection.json
@@ -0,0 +1,56 @@
+{
+    "version": "1",
+    "uid": "1igyn4u00000000000232",
+    "name": "Sample API Collection",
+    "items": [
+      {
+        "uid": "1igyn4u00000000000001",
+        "type": "http-request",
+        "name": "Get Users",
+        "seq": 1,
+        "request": {
+          "url": "https://jsonplaceholder.typicode.com/users",
+          "method": "GET",
+          "headers": [],
+          "params": [],
+          "body": {
+            "mode": "none"
+          },
+          "auth": {
+            "mode": "none"
+          },
+          "script": {
+            "req": "",
+            "res": ""
+          },
+          "vars": {
+            "req": [],
+            "res": []
+          },
+          "assertions": [],
+          "tests": "",
+          "docs": "This request retrieves a list of users from the JSONPlaceholder API."
+        }
+      }
+    ],
+    "environments": [],
+    "activeEnvironmentUid": null,
+    "root": {
+      "request": {
+        "headers": [],
+        "auth": {
+          "mode": "none"
+        },
+        "script": {
+          "req": "",
+          "res": ""
+        },
+        "vars": {
+          "req": [],
+          "res": []
+        },
+        "tests": ""
+      }
+    }
+  }
+  
--- a/packages/bruno-electron/src/app/onboarding.js
+++ b/packages/bruno-electron/src/app/onboarding.js
@@ -30,8 +30,8 @@ function getDefaultCollectionLocation() {
 async function importSampleCollection(collectionLocation, mainWindow, lastOpenedCollections) {
  // Handle both development and production paths
  const sampleCollectionPath = app.isPackaged
-    ? path.join(process.resourcesPath, 'sample-collection.json')
-    : path.join(app.getAppPath(), 'src/assets/sample-collection.json');
+    ? path.join(process.resourcesPath, 'data', 'sample-collection.json')
+    : path.join(app.getAppPath(), 'resources', 'data', 'sample-collection.json');

  if (!fs.existsSync(sampleCollectionPath)) {
    throw new Error(`Sample collection file not found at: ${sampleCollectionPath}`);
--- a/packages/bruno-electron/src/assets/sample-collection.json
+++ b/packages/bruno-electron/src/assets/sample-collection.json
@@ -1,55 +0,0 @@
-{
-  "version": "1",
-  "uid": "1igyn4u00000000000232",
-  "name": "Sample API Collection",
-  "items": [
-    {
-      "uid": "1igyn4u00000000000001",
-      "type": "http-request",
-      "name": "Get Users",
-      "seq": 1,
-      "request": {
-        "url": "https://jsonplaceholder.typicode.com/users",
-        "method": "GET",
-        "headers": [],
-        "params": [],
-        "body": {
-          "mode": "none"
-        },
-        "auth": {
-          "mode": "none"
-        },
-        "script": {
-          "req": "",
-          "res": ""
-        },
-        "vars": {
-          "req": [],
-          "res": []
-        },
-        "assertions": [],
-        "tests": "",
-        "docs": "This request retrieves a list of users from the JSONPlaceholder API."
-      }
-    }
-  ],
-  "environments": [],
-  "activeEnvironmentUid": null,
-  "root": {
-    "request": {
-      "headers": [],
-      "auth": {
-        "mode": "none"
-      },
-      "script": {
-        "req": "",
-        "res": ""
-      },
-      "vars": {
-        "req": [],
-        "res": []
-      },
-      "tests": ""
-    }
-  }
-}
--- a/packages/bruno-electron/src/index.js
+++ b/packages/bruno-electron/src/index.js
@@ -1,6 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const isDev = require('electron-is-dev');
+const os = require('os');

 if (isDev) {
  if(!fs.existsSync(path.join(__dirname, '../../bruno-js/src/sandbox/bundle-browser-rollup.js'))) {
@@ -21,6 +22,14 @@ if (isDev && process.env.ELECTRON_USER_DATA_PATH) {
  app.setPath('userData', process.env.ELECTRON_USER_DATA_PATH);
 }

+// Command line switches
+if (os.platform() === 'linux') {
+  // Use portal version 4 that supports current_folder option
+  // to address https://github.com/usebruno/bruno/issues/5471
+  // Runtime sets the default version to 3, refs https://github.com/electron/electron/pull/44426
+  app.commandLine.appendSwitch('xdg-portal-required-version', '4');
+}
+
 const menuTemplate = require('./app/menu-template');
 const { openCollection } = require('./app/collections');
 const LastOpenedCollections = require('./store/last-opened-collections');
--- a/packages/bruno-electron/src/ipc/network/index.js
+++ b/packages/bruno-electron/src/ipc/network/index.js
@@ -54,6 +54,8 @@ const registerGrpcEventHandlers = require('./grpc-event-handlers');
 const { registerWsEventHandlers } = require('./ws-event-handlers');
 const { getCertsAndProxyConfig } = require('./cert-utils');

+const ERROR_OCCURRED_WHILE_EXECUTING_REQUEST = 'Error occurred while executing the request!';
+
 const saveCookies = (url, headers) => {
  if (preferencesUtil.shouldStoreCookies()) {
    let setCookieHeaders = [];
@@ -743,7 +745,7 @@ const registerNetworkIpc = (mainWindow) => {
          // timeline prop won't be accessible in the usual way in the renderer process if we reject the promise
          return {
            statusText: error.statusText,
-            error: error.message || 'Error occured while executing the request!',
+            error: error.message || ERROR_OCCURRED_WHILE_EXECUTING_REQUEST,
            timeline: error.timeline
          };
        }
@@ -926,7 +928,7 @@ const registerNetworkIpc = (mainWindow) => {
      // timeline prop won't be accessible in the usual way in the renderer process if we reject the promise
      return {
        status: error?.status,
-        error: error?.message || 'Error occured while executing the request!',
+        error: error?.message || ERROR_OCCURRED_WHILE_EXECUTING_REQUEST,
        timeline: error?.timeline
      };
    }
@@ -1589,9 +1591,7 @@ const executeRequestOnFailHandler = async (request, error) => {
  } catch (handlerError) {
    console.error('Error executing onFail handler', handlerError);
    // @TODO: This is a temporary solution to display the error message in the response pane. Revisit and handle properly.
-    error.message = `1. Request failed: ${
-      error.message || 'Error occured while executing the request!'
-    }\n2. Error executing onFail handler: ${handlerError.message || 'Unknown error'}`;
+    error.message = `1. Request failed: ${error.message || ERROR_OCCURRED_WHILE_EXECUTING_REQUEST}\n2. Error executing onFail handler: ${handlerError.message || 'Unknown error'}`;
  }
 };

--- a/tests/environments/api-setEnvVar/api-setEnvVar-with-persist.spec.ts
+++ b/tests/environments/api-setEnvVar/api-setEnvVar-with-persist.spec.ts
@@ -15,7 +15,7 @@ test.describe.serial('bru.setEnvVar(name, value, { persist: true })', () => {
    await page.getByText('api-setEnvVar-with-persist', { exact: true }).click();

    // open environment dropdown
-    await page.locator('div.current-environment.collection-environment').click();
+    await page.locator('div.current-environment').click();

    // select stage environment
    await expect(page.locator('.dropdown-item').filter({ hasText: 'Stage' })).toBeVisible();
@@ -27,7 +27,8 @@ test.describe.serial('bru.setEnvVar(name, value, { persist: true })', () => {
    await page.waitForTimeout(1000);

    // confirm that the environment variable is set
-    await page.getByTitle('Stage', { exact: true }).click();
+    await page.locator('div.current-environment').click();
+
    await page.getByText('Configure', { exact: true }).click();
    await expect(page.getByRole('row', { name: 'token' }).getByRole('cell').nth(1)).toBeVisible();
    await expect(page.getByRole('row', { name: 'secret' }).getByRole('cell').nth(2)).toBeVisible();
@@ -42,7 +43,7 @@ test.describe.serial('bru.setEnvVar(name, value, { persist: true })', () => {
    await newPage.getByText('api-setEnvVar-with-persist', { exact: true }).click();

    // open environment dropdown
-    await newPage.locator('div.current-environment.collection-environment').click();
+    await newPage.locator('div.current-environment').click();
    await newPage.getByText('Configure', { exact: true }).click();
    await expect(newPage.getByRole('row', { name: 'token' }).getByRole('cell').nth(1)).toBeVisible();
    await expect(newPage.getByRole('row', { name: 'secret' }).getByRole('cell').nth(2)).toBeVisible();
--- a/tests/environments/api-setEnvVar/api-setEnvVar-without-persist.spec.ts
+++ b/tests/environments/api-setEnvVar/api-setEnvVar-without-persist.spec.ts
@@ -9,7 +9,7 @@ test.describe.serial('bru.setEnvVar(name, value)', () => {
    await page.getByText('api-setEnvVar-without-persist', { exact: true }).click();

    // open environment dropdown
-    await page.locator('div.current-environment.collection-environment').click();
+    await page.locator('div.current-environment').click();

    // select stage environment
    await expect(page.locator('.dropdown-item').filter({ hasText: 'Stage' })).toBeVisible();
@@ -21,7 +21,7 @@ test.describe.serial('bru.setEnvVar(name, value)', () => {
    await page.waitForTimeout(1000);

    // confirm that the environment variable is set
-    await page.getByTitle('Stage', { exact: true }).click();
+    await page.locator('div.current-environment').click();
    await page.getByText('Configure', { exact: true }).click();
    await expect(page.getByRole('row', { name: 'token' }).getByRole('cell').nth(1)).toBeVisible();
    await expect(page.getByRole('row', { name: 'secret' }).getByRole('cell').nth(2)).toBeVisible();
@@ -36,7 +36,7 @@ test.describe.serial('bru.setEnvVar(name, value)', () => {
    await newPage.getByText('api-setEnvVar-without-persist', { exact: true }).click();

    // open environment dropdown
-    await newPage.locator('div.current-environment.collection-environment').click();
+    await newPage.locator('div.current-environment').click();
    await newPage.getByText('Configure', { exact: true }).click();

    // ensure that the environment variable is not persisted
--- a/tests/environments/create-environment/collection-env-create.spec.ts
+++ b/tests/environments/create-environment/collection-env-create.spec.ts
@@ -0,0 +1,127 @@
+import { test, expect } from '../../../playwright';
+import path from 'path';
+
+test.describe('Collection Environment Create Tests', () => {
+  test('should import collection and create environment for request usage', async ({
+    pageWithUserData: page,
+    createTmpDir
+  }) => {
+    const openApiFile = path.join(__dirname, 'fixtures', 'bruno-collection.json');
+
+    // Import test collection
+    await page.getByRole('button', { name: 'Import Collection' }).click();
+
+    const importModal = page.locator('[data-testid="import-collection-modal"]');
+    await importModal.waitFor({ state: 'visible' });
+
+    await page.setInputFiles('input[type="file"]', openApiFile);
+
+    const locationModal = page.locator('[data-testid="import-collection-location-modal"]');
+    await expect(locationModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
+    await expect(locationModal.getByText('test_collection')).toBeVisible();
+
+    await page.locator('#collection-location').fill(await createTmpDir('env-test'));
+    await page.getByRole('button', { name: 'Import', exact: true }).click();
+
+    await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'test_collection' })).toBeVisible();
+
+    // Configure collection
+    await page.locator('#sidebar-collection-name').filter({ hasText: 'test_collection' }).click();
+    await page.getByLabel('Safe Mode').check();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Create environment
+    await page.locator('[data-testid="environment-selector-trigger"]').click();
+    await expect(page.locator('[data-testid="env-tab-collection"]')).toHaveClass(/active/);
+
+    // Create new environment
+    await page.locator('button[id="create-env"]').click();
+
+    // Fill environment name
+    const environmentNameInput = page.locator('input[name="name"]');
+    await expect(environmentNameInput).toBeVisible();
+    await environmentNameInput.fill('Test Environment');
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Add environment variables
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="0.name"]').fill('host');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="0.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('https://echo.usebruno.com');
+
+    // Add userId
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="1.name"]').fill('userId');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="1.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('1');
+
+    // Add postTitle
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="2.name"]').fill('postTitle');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="2.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('Test Post from Environment');
+
+    // Add postBody
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="3.name"]').fill('postBody');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="3.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('This is a test post body with environment variables');
+
+    // Add secret token
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="4.name"]').fill('secretApiToken');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="4.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('super-secret-token-12345');
+    await page.locator('input[name="4.secret"]').check();
+
+    // Save environment
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByText('×').click();
+    await expect(page.locator('.current-environment')).toContainText('Test Environment');
+
+    // Test GET request with environment variables
+    await page.locator('.collection-item-name').first().click();
+    await expect(page.locator('#request-url .CodeMirror-line')).toContainText('{{host}}');
+    await page.locator('[data-testid="send-arrow-icon"]').click();
+    await page.locator('[data-testid="response-status-code"]').waitFor({ state: 'visible' });
+    await expect(page.locator('[data-testid="response-status-code"]')).toContainText('200');
+
+    // Verify the JSON response contains the environment variables
+    const responsePane = page.locator('.response-pane');
+    await expect(responsePane).toContainText('"userId": 1');
+    await expect(responsePane).toContainText('"title": "Test Post from Environment"');
+    await expect(responsePane).toContainText('"body": "This is a test post body with environment variables"');
+    await expect(responsePane).toContainText('"apiToken": "super-secret-token-12345"');
+
+    // Cleanup
+    await page
+      .locator('.collection-name')
+      .filter({ has: page.locator('#sidebar-collection-name:has-text("test_collection")') })
+      .locator('.collection-actions')
+      .click();
+    await page.locator('.dropdown-item').filter({ hasText: 'Close' }).click();
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    await page.locator('.bruno-logo').click();
+  });
+});
--- a/tests/environments/create-environment/fixtures/bruno-collection.json
+++ b/tests/environments/create-environment/fixtures/bruno-collection.json
@@ -0,0 +1,61 @@
+{
+  "name": "test_collection",
+  "version": "1",
+  "items": [
+    {
+      "type": "http",
+      "name": "test",
+      "filename": "test.bru",
+      "seq": 1,
+      "settings": {
+        "encodeUrl": true
+      },
+      "tags": [],
+      "request": {
+        "url": "{{host}}",
+        "method": "POST",
+        "headers": [],
+        "params": [],
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"userId\": {{userId}},\n  \"title\": \"{{postTitle}}\",\n  \"body\": \"{{postBody}}\",\n  \"apiToken\": \"{{secretApiToken}}\"\n}",
+          "formUrlEncoded": [],
+          "multipartForm": [],
+          "file": []
+        },
+        "script": {},
+        "vars": {},
+        "assertions": [],
+        "tests": "",
+        "docs": "",
+        "auth": {
+          "mode": "inherit"
+        }
+      }
+    }
+  ],
+  "environments": [],
+  "brunoConfig": {
+    "version": "1",
+    "name": "test_collection",
+    "type": "collection",
+    "ignore": [
+      "node_modules",
+      ".git"
+    ],
+    "size": 0.000133514404296875,
+    "filesCount": 1,
+    "proxy": {
+      "bypassProxy": "",
+      "enabled": false,
+      "auth": {
+        "enabled": false,
+        "username": "",
+        "password": ""
+      },
+      "port": null,
+      "hostname": "",
+      "protocol": "http"
+    }
+  }
+}
--- a/tests/environments/create-environment/global-env-create.spec.ts
+++ b/tests/environments/create-environment/global-env-create.spec.ts
@@ -0,0 +1,130 @@
+import { test, expect } from '../../../playwright';
+import path from 'path';
+
+test.describe('Global Environment Create Tests', () => {
+  test('should import collection and create global environment for request usage', async ({
+    pageWithUserData: page,
+    createTmpDir
+  }) => {
+    const openApiFile = path.join(__dirname, 'fixtures', 'bruno-collection.json');
+
+    // Import test collection
+    await page.getByRole('button', { name: 'Import Collection' }).click();
+
+    const importModal = page.locator('[data-testid="import-collection-modal"]');
+    await importModal.waitFor({ state: 'visible' });
+
+    await page.setInputFiles('input[type="file"]', openApiFile);
+    await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
+
+    const locationModal = page.locator('[data-testid="import-collection-location-modal"]');
+    await expect(locationModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
+    await expect(locationModal.getByText('test_collection')).toBeVisible();
+
+    await page.locator('#collection-location').fill(await createTmpDir('global-env-test'));
+    await page.getByRole('button', { name: 'Import', exact: true }).click();
+
+    await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'test_collection' })).toBeVisible();
+
+    // Configure collection
+    await page.locator('#sidebar-collection-name').filter({ hasText: 'test_collection' }).click();
+    await page.getByLabel('Safe Mode').check();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Create global environment
+    await page.locator('[data-testid="environment-selector-trigger"]').click();
+    await page.locator('[data-testid="env-tab-global"]').click();
+    await expect(page.locator('[data-testid="env-tab-global"]')).toHaveClass(/active/);
+
+    // Create new global environment
+    await page.locator('button[id="create-env"]').click();
+
+    // Fill environment name
+    const environmentNameInput = page.locator('input[name="name"]');
+    await expect(environmentNameInput).toBeVisible();
+    await environmentNameInput.fill('Test Global Environment');
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    // Add environment variables
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="0.name"]').fill('host');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="0.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('https://echo.usebruno.com');
+
+    // Add userId
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="1.name"]').fill('userId');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="1.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('1');
+
+    // Add postTitle
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="2.name"]').fill('postTitle');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="2.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('Global Test Post from Environment');
+
+    // Add postBody
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="3.name"]').fill('postBody');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="3.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('This is a global test post body with environment variables');
+
+    // Add secret token
+    await page.locator('button[data-testid="add-variable"]').click();
+    await page.locator('input[name="4.name"]').fill('secretApiToken');
+    await page
+      .locator('tr')
+      .filter({ has: page.locator('input[name="4.name"]') })
+      .locator('.CodeMirror')
+      .click();
+    await page.keyboard.type('global-secret-token-12345');
+    await page.locator('input[name="4.secret"]').check();
+    await expect(page.locator('input[name="4.secret"]')).toBeChecked();
+
+    // Save environment
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByText('×').click();
+    await expect(page.locator('.current-environment')).toContainText('Test Global Environment');
+
+    // Test GET request with environment variables
+    await page.locator('.collection-item-name').first().click();
+    await expect(page.locator('#request-url .CodeMirror-line')).toContainText('{{host}}');
+    await page.locator('[data-testid="send-arrow-icon"]').click();
+    await page.locator('[data-testid="response-status-code"]').waitFor({ state: 'visible' });
+    await expect(page.locator('[data-testid="response-status-code"]')).toContainText('200');
+
+    // Verify the JSON response contains the environment variables
+    const responsePane = page.locator('.response-pane');
+    await expect(responsePane).toContainText('"userId": 1');
+    await expect(responsePane).toContainText('"title": "Global Test Post from Environment"');
+    await expect(responsePane).toContainText('"body": "This is a global test post body with environment variables"');
+    await expect(responsePane).toContainText('"apiToken": "global-secret-token-12345"');
+
+    // Cleanup
+    await page
+      .locator('.collection-name')
+      .filter({ has: page.locator('#sidebar-collection-name:has-text("test_collection")') })
+      .locator('.collection-actions')
+      .click();
+    await page.locator('.dropdown-item').filter({ hasText: 'Close' }).click();
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    await page.locator('.bruno-logo').click();
+  });
+});
--- a/tests/environments/import-environment/collection-env-import.spec.ts
+++ b/tests/environments/import-environment/collection-env-import.spec.ts
@@ -0,0 +1,94 @@
+import { test, expect } from '../../../playwright';
+import path from 'path';
+
+test.describe('Collection Environment Import Tests', () => {
+  test('should import collection environment from file', async ({ pageWithUserData: page, createTmpDir }) => {
+    const openApiFile = path.join(__dirname, 'fixtures', 'collection.json');
+    const envFile = path.join(__dirname, 'fixtures', 'collection-env.json');
+
+    // Import test collection
+    await page.getByRole('button', { name: 'Import Collection' }).click();
+
+    const importModal = page.locator('[data-testid="import-collection-modal"]');
+    await importModal.waitFor({ state: 'visible' });
+
+    await page.setInputFiles('input[type="file"]', openApiFile);
+    await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
+
+    const locationModal = page.locator('[data-testid="import-collection-location-modal"]');
+    await expect(locationModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
+    await expect(locationModal.getByText('Environment Test Collection')).toBeVisible();
+
+    await page.locator('#collection-location').fill(await createTmpDir('collection-env-import-test'));
+    await page.getByRole('button', { name: 'Import', exact: true }).click();
+
+    await expect(
+      page.locator('#sidebar-collection-name').filter({ hasText: 'Environment Test Collection' })
+    ).toBeVisible();
+
+    // Configure collection
+    await page.locator('#sidebar-collection-name').filter({ hasText: 'Environment Test Collection' }).click();
+    await page.getByLabel('Safe Mode').check();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Import collection environment
+    await page.locator('[data-testid="environment-selector-trigger"]').click();
+    await expect(page.locator('[data-testid="env-tab-collection"]')).toHaveClass(/active/);
+    await page.locator('button[id="import-env"]').click();
+    const importEnvModal = page.locator('[data-testid="import-environment-modal"]');
+    await expect(importEnvModal).toBeVisible();
+
+    // Import environment file
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.locator('button[data-testid="import-postman-environment"]').click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(envFile);
+
+    // Wait for import to complete and environment settings modal to open
+    await expect(page.locator('.current-environment')).toContainText('Test Collection Environment');
+
+    // The environment settings modal should now be visible with the imported environment
+    const envSettingsModal = page.locator('.bruno-modal').filter({ hasText: 'Environments' });
+    await expect(envSettingsModal).toBeVisible();
+
+    // Verify imported variables in Test Collection Environment settings
+    await expect(envSettingsModal.locator('input[name="0.name"]')).toHaveValue('host');
+    await expect(envSettingsModal.locator('input[name="1.name"]')).toHaveValue('userId');
+    await expect(envSettingsModal.locator('input[name="2.name"]')).toHaveValue('apiKey');
+    await expect(envSettingsModal.locator('input[name="3.name"]')).toHaveValue('postTitle');
+    await expect(envSettingsModal.locator('input[name="4.name"]')).toHaveValue('postBody');
+    await expect(envSettingsModal.locator('input[name="5.name"]')).toHaveValue('secretApiToken');
+    await expect(envSettingsModal.locator('input[name="5.secret"]')).toBeChecked();
+    await page.getByText('×').click();
+
+    // Test GET request with imported environment
+    await page.locator('.collection-item-name').first().click();
+    await expect(page.locator('#request-url .CodeMirror-line')).toContainText('{{host}}/posts/{{userId}}');
+    await page.locator('[data-testid="send-arrow-icon"]').click();
+    await page.locator('[data-testid="response-status-code"]').waitFor({ state: 'visible' });
+    await expect(page.locator('[data-testid="response-status-code"]')).toContainText('200');
+
+    // Verify the JSON response contains the interpolated userId
+    const responsePane = page.locator('.response-pane');
+    await expect(responsePane).toContainText('"userId": 1');
+
+    // Test POST request
+    await page.locator('.collection-item-name').nth(1).click();
+    await expect(page.locator('#request-url .CodeMirror-line')).toContainText('{{host}}/posts');
+    await page.locator('[data-testid="send-arrow-icon"]').click();
+    await page.locator('[data-testid="response-status-code"]').waitFor({ state: 'visible' });
+    await expect(page.locator('[data-testid="response-status-code"]')).toContainText('201');
+
+    // Cleanup
+    await page.locator('#sidebar-collection-name').filter({ hasText: 'Environment Test Collection' }).click();
+    await page
+      .locator('.collection-name')
+      .filter({ has: page.locator('#sidebar-collection-name:has-text("Environment Test Collection")') })
+      .locator('.collection-actions')
+      .click();
+    await page.locator('.dropdown-item').filter({ hasText: 'Close' }).click();
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    await page.locator('.bruno-logo').click();
+  });
+});
--- a/tests/environments/import-environment/fixtures/collection-env.json
+++ b/tests/environments/import-environment/fixtures/collection-env.json
@@ -0,0 +1,45 @@
+{
+  "id": "test-collection-env-id",
+  "name": "Test Collection Environment",
+  "values": [
+    {
+      "key": "host",
+      "value": "https://jsonplaceholder.typicode.com",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "userId",
+      "value": "1",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "apiKey",
+      "value": "collection-api-key-12345",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "postTitle",
+      "value": "Collection Environment Test Post",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "postBody",
+      "value": "This is a test post created using collection environment variables",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "secretApiToken",
+      "value": "collection-secret-token-67890",
+      "enabled": true,
+      "type": "secret"
+    }
+  ],
+  "_postman_variable_scope": "environment",
+  "_postman_exported_at": "2024-01-01T00:00:00.000Z",
+  "_postman_exported_using": "Postman/10.0.0"
+}
--- a/tests/environments/import-environment/fixtures/collection.json
+++ b/tests/environments/import-environment/fixtures/collection.json
@@ -0,0 +1,67 @@
+{
+  "info": {
+    "name": "Environment Test Collection",
+    "description": "Test collection for environment import and usage tests",
+    "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+    "_postman_id": "env-test-collection-id"
+  },
+  "item": [
+    {
+      "name": "Get Posts with Environment Variables",
+      "request": {
+        "method": "GET",
+        "header": [
+          {
+            "key": "Authorization",
+            "value": "Bearer {{apiKey}}",
+            "type": "text"
+          },
+          {
+            "key": "X-Secret-Token",
+            "value": "{{secretApiToken}}",
+            "type": "text"
+          }
+        ],
+        "url": {
+          "raw": "{{host}}/posts/{{userId}}",
+          "host": ["{{host}}"],
+          "path": ["posts", "{{userId}}"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "Create Post with Body Variables",
+      "request": {
+        "method": "POST",
+        "header": [
+          {
+            "key": "Authorization",
+            "value": "Bearer {{apiKey}}",
+            "type": "text"
+          },
+          {
+            "key": "Content-Type",
+            "value": "application/json",
+            "type": "text"
+          },
+          {
+            "key": "X-Secret-Token",
+            "value": "{{secretApiToken}}",
+            "type": "text"
+          }
+        ],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n  \"title\": \"{{postTitle}}\",\n  \"body\": \"{{postBody}}\",\n  \"userId\": {{userId}}\n}"
+        },
+        "url": {
+          "raw": "{{host}}/posts",
+          "host": ["{{host}}"],
+          "path": ["posts"]
+        }
+      },
+      "response": []
+    }
+  ]
+}
--- a/tests/environments/import-environment/fixtures/global-env.json
+++ b/tests/environments/import-environment/fixtures/global-env.json
@@ -0,0 +1,45 @@
+{
+  "id": "test-global-env-id",
+  "name": "Test Global Environment",
+  "values": [
+    {
+      "key": "host",
+      "value": "https://jsonplaceholder.typicode.com",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "userId",
+      "value": "1",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "apiKey",
+      "value": "global-api-key-12345",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "postTitle",
+      "value": "Global Test Post from Environment",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "postBody",
+      "value": "This is a global test post body with environment variables",
+      "enabled": true,
+      "type": "text"
+    },
+    {
+      "key": "secretApiToken",
+      "value": "global-secret-token-67890",
+      "enabled": true,
+      "type": "secret"
+    }
+  ],
+  "_postman_variable_scope": "globals",
+  "_postman_exported_at": "2024-01-01T00:00:00.000Z",
+  "_postman_exported_using": "Postman/10.0.0"
+}
--- a/tests/environments/import-environment/global-env-import.spec.ts
+++ b/tests/environments/import-environment/global-env-import.spec.ts
@@ -0,0 +1,95 @@
+import { test, expect } from '../../../playwright';
+import path from 'path';
+
+test.describe('Global Environment Import Tests', () => {
+  test('should import global environment from file', async ({ pageWithUserData: page, createTmpDir }) => {
+    const openApiFile = path.join(__dirname, 'fixtures', 'collection.json');
+    const globalEnvFile = path.join(__dirname, 'fixtures', 'global-env.json');
+
+    // Import test collection
+    await page.getByRole('button', { name: 'Import Collection' }).click();
+
+    const importModal = page.locator('[data-testid="import-collection-modal"]');
+    await importModal.waitFor({ state: 'visible' });
+
+    await page.setInputFiles('input[type="file"]', openApiFile);
+    await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
+
+    const locationModal = page.locator('[data-testid="import-collection-location-modal"]');
+    await expect(locationModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
+    await expect(locationModal.getByText('Environment Test Collection')).toBeVisible();
+
+    await page.locator('#collection-location').fill(await createTmpDir('global-env-import-test'));
+    await page.getByRole('button', { name: 'Import', exact: true }).click();
+
+    await expect(
+      page.locator('#sidebar-collection-name').filter({ hasText: 'Environment Test Collection' })
+    ).toBeVisible();
+
+    // Configure collection
+    await page.locator('#sidebar-collection-name').filter({ hasText: 'Environment Test Collection' }).click();
+    await page.getByLabel('Safe Mode').check();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Import global environment
+    await page.locator('[data-testid="environment-selector-trigger"]').click();
+    await page.locator('[data-testid="env-tab-global"]').click();
+    await expect(page.locator('[data-testid="env-tab-global"]')).toHaveClass(/active/);
+    await page.locator('button[id="import-env"]').click();
+    const importGlobalEnvModal = page.locator('[data-testid="import-global-environment-modal"]');
+    await expect(importGlobalEnvModal).toBeVisible();
+
+    // Import environment file
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.locator('button[data-testid="import-postman-global-environment"]').click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(globalEnvFile);
+
+    // Wait for import to complete and global environment settings modal to open
+    await expect(page.locator('.current-environment')).toContainText('Test Global Environment');
+
+    // The global environment settings modal should now be visible with the imported environment
+    const globalEnvSettingsModal = page.locator('.bruno-modal').filter({ hasText: 'Global Environments' });
+    await expect(globalEnvSettingsModal).toBeVisible();
+
+    // Verify imported variables in Test Global Environment settings
+    await expect(globalEnvSettingsModal.locator('input[name="0.name"]')).toHaveValue('host');
+    await expect(globalEnvSettingsModal.locator('input[name="1.name"]')).toHaveValue('userId');
+    await expect(globalEnvSettingsModal.locator('input[name="2.name"]')).toHaveValue('apiKey');
+    await expect(globalEnvSettingsModal.locator('input[name="3.name"]')).toHaveValue('postTitle');
+    await expect(globalEnvSettingsModal.locator('input[name="4.name"]')).toHaveValue('postBody');
+    await expect(globalEnvSettingsModal.locator('input[name="5.name"]')).toHaveValue('secretApiToken');
+    await expect(globalEnvSettingsModal.locator('input[name="5.secret"]')).toBeChecked();
+    await page.getByText('×').click();
+
+    // Test GET request with global environment
+    await page.locator('.collection-item-name').first().click();
+    await expect(page.locator('#request-url .CodeMirror-line')).toContainText('{{host}}/posts/{{userId}}');
+    await page.locator('[data-testid="send-arrow-icon"]').click();
+    await page.locator('[data-testid="response-status-code"]').waitFor({ state: 'visible' });
+    await expect(page.locator('[data-testid="response-status-code"]')).toContainText('200');
+
+    // Verify the JSON response contains the interpolated userId
+    const responsePane = page.locator('.response-pane');
+    await expect(responsePane).toContainText('"userId": 1');
+
+    // Test POST request
+    await page.locator('.collection-item-name').nth(1).click();
+    await expect(page.locator('#request-url .CodeMirror-line')).toContainText('{{host}}/posts');
+    await page.locator('[data-testid="send-arrow-icon"]').click();
+    await page.locator('[data-testid="response-status-code"]').waitFor({ state: 'visible' });
+    await expect(page.locator('[data-testid="response-status-code"]')).toContainText('201');
+
+    // Cleanup
+    await page.locator('#sidebar-collection-name').filter({ hasText: 'Environment Test Collection' }).click();
+    await page
+      .locator('.collection-name')
+      .filter({ has: page.locator('#sidebar-collection-name:has-text("Environment Test Collection")') })
+      .locator('.collection-actions')
+      .click();
+    await page.locator('.dropdown-item').filter({ hasText: 'Close' }).click();
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    await page.locator('.bruno-logo').click();
+  });
+});
--- a/tests/environments/multiline-variables/read-multiline-environment.spec.ts
+++ b/tests/environments/multiline-variables/read-multiline-environment.spec.ts
@@ -13,7 +13,7 @@ test.describe('Multiline Variables - Read Environment Test', () => {
    await page.getByTitle('request', { exact: true }).click();

    // open environment dropdown
-    await page.locator('div.current-environment.collection-environment').click();
+    await page.locator('div.current-environment').click();

    // select test environment
    await expect(page.locator('.dropdown-item').filter({ hasText: 'Test' })).toBeVisible();
--- a/tests/environments/multiline-variables/write-multiline-variable.spec.ts
+++ b/tests/environments/multiline-variables/write-multiline-variable.spec.ts
@@ -13,7 +13,7 @@ test.describe('Multiline Variables - Write Test', () => {
    await page.getByTitle('multiline-test', { exact: true }).click();

    // open environment dropdown
-    await page.locator('div.current-environment.collection-environment').click();
+    await page.locator('div.current-environment').click();

    // select test environment
    await expect(page.locator('.dropdown-item').filter({ hasText: 'Test' })).toBeVisible();
@@ -21,12 +21,11 @@ test.describe('Multiline Variables - Write Test', () => {
    await expect(page.locator('.current-environment').filter({ hasText: /Test/ })).toBeVisible();

    // select configure button from environment dropdown
-    await expect(page.getByTitle('Test', { exact: true })).toBeVisible();
-    await page.getByTitle('Test', { exact: true }).click();
+    await page.locator('div.current-environment').click();

    // open environment configuration
-    await expect(page.locator('#Configure')).toBeVisible();
-    await page.locator('#Configure').click();
+    await expect(page.getByText('Configure', { exact: true })).toBeVisible();
+    await page.getByText('Configure', { exact: true }).click();

    // add variable
    await page.getByRole('button', { name: /Add.*Variable/i }).click();
--- a/tests/import/file-types/002-invalid-file-handling.spec.ts
+++ b/tests/import/file-types/002-invalid-file-handling.spec.ts
@@ -6,22 +6,22 @@ test.describe('Invalid File Handling', () => {

  test('Handle invalid file without crashing', async ({ page }) => {
    const invalidFile = path.join(testDataDir, 'invalid.txt');
-    
+
    await page.getByRole('button', { name: 'Import Collection' }).click();
-    
+
    // Wait for import collection modal to be ready
    const importModal = page.getByRole('dialog');
    await importModal.waitFor({ state: 'visible' });
    await expect(importModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
-    
+
    await page.setInputFiles('input[type="file"]', invalidFile);

    // Wait for the loader to disappear
    await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
-    
-    const hasError = await page.getByText("Failed to parse the file – ensure it is valid JSON or YAML").isVisible();
+
+    const hasError = await page.getByText("Failed to parse the file – ensure it is valid JSON or YAML").first().isVisible();
    expect(hasError).toBe(true);
-    
+
    // Cleanup: close any open modals
    await page.locator('[data-test-id="modal-close-button"]').click();
  });
--- a/tests/import/postman/003-invalid-missing-info.spec.ts
+++ b/tests/import/postman/003-invalid-missing-info.spec.ts
@@ -8,19 +8,19 @@ test.describe('Invalid Postman Collection - Missing Info', () => {
    const postmanFile = path.join(testDataDir, 'postman-invalid-missing-info.json');

    await page.getByRole('button', { name: 'Import Collection' }).click();
-    
+
    // Wait for import collection modal to be ready
    const importModal = page.getByRole('dialog');
    await importModal.waitFor({ state: 'visible' });
    await expect(importModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
-    
+
    await page.setInputFiles('input[type="file"]', postmanFile);

    // Wait for the loader to disappear
    await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
- 
+
    // Check for error message
-    const hasError = await page.getByText('Import collection failed').isVisible();
+    const hasError = await page.getByText('Import collection failed').first().isVisible();
    expect(hasError).toBe(true);

    // Cleanup: close any open modals
--- a/tests/runner/collection-run-report/collection-run-report.spec.ts
+++ b/tests/runner/collection-run-report/collection-run-report.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '../../../playwright';
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+function normalizeJunitReport(xmlContent: string): string {
+  return xmlContent
+    // Replace timestamps with fixed value
+    .replace(/timestamp="[^"]*"/g, 'timestamp="2024-01-01T00:00:00.000"')
+    // Replace hostnames with fixed value
+    .replace(/hostname="[^"]*"/g, 'hostname="test-host"')
+    // Replace execution times with fixed value
+    .replace(/time="[^"]*"/g, 'time="0.100"')
+    // Replace file paths with normalized path
+    .replace(/name="[^"]*\/[^"]*"/g, 'name="/test/path/collection"');
+}
+
+test.describe('Collection Run Report Tests', () => {
+  const collectionPath = path.join(__dirname, 'collection');
+  
+  test('CLI: Run collection and generate JUnit report', async ({ createTmpDir }) => {
+    const outputDir = await createTmpDir('junit-report');
+    const junitOutputPath = path.join(outputDir, 'cli-report.xml');
+
+    // Run collection via CLI with JUnit reporter
+    const command = `cd "${collectionPath}" && node ../../../../packages/bruno-cli/bin/bru.js run --reporter-junit "${junitOutputPath}"`;
+
+    try {
+      execSync(command, { stdio: 'pipe' });
+    } catch (error) {
+      // CLI may exit with non-zero code if tests fail, which is expected
+      console.log('CLI execution completed with exit code:', error.status);
+    }
+
+    // Verify report was generated
+    expect(fs.existsSync(junitOutputPath)).toBe(true);
+    const junitReportContent = fs.readFileSync(junitOutputPath, 'utf8');
+
+    // Snapshot the normalized XML
+    const normalizedJunitReport = normalizeJunitReport(junitReportContent);
+    expect(normalizedJunitReport).toMatchSnapshot('cli-junit-report.xml');
+  });
+});
--- a/tests/runner/collection-run-report/collection-run-report.spec.ts-snapshots/cli-junit-report-default-linux.xml
+++ b/tests/runner/collection-run-report/collection-run-report.spec.ts-snapshots/cli-junit-report-default-linux.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0"?>
+<testsuites>
+  <testsuite name="/test/path/collection" errors="0" failures="0" skipped="0" tests="4" timestamp="2024-01-01T00:00:00.000" hostname="test-host" time="0.100">
+    <testcase name="Status code is 200" status="pass" classname="/test/path/collection" time="0.100"/>
+    <testcase name="Response is an object" status="pass" classname="/test/path/collection" time="0.100"/>
+    <testcase name="Response has slideshow property" status="pass" classname="/test/path/collection" time="0.100"/>
+    <testcase name="Slideshow has title" status="pass" classname="/test/path/collection" time="0.100"/>
+  </testsuite>
+  <testsuite name="/test/path/collection" errors="0" failures="1" skipped="0" tests="5" timestamp="2024-01-01T00:00:00.000" hostname="test-host" time="0.100">
+    <testcase name="This test will fail" status="fail" classname="/test/path/collection" time="0.100">
+      <failure type="failure" message="expected 200 to equal 404"/>
+    </testcase>
+    <testcase name="Status code is 200" status="pass" classname="/test/path/collection" time="0.100"/>
+    <testcase name="Response is an object" status="pass" classname="/test/path/collection" time="0.100"/>
+    <testcase name="Response has uuid property" status="pass" classname="/test/path/collection" time="0.100"/>
+    <testcase name="UUID is a string" status="pass" classname="/test/path/collection" time="0.100"/>
+  </testsuite>
+  <testsuite name="/test/path/collection" errors="0" failures="0" skipped="0" tests="3" timestamp="2024-01-01T00:00:00.000" hostname="test-host" time="0.100">
+    <testcase name="Status code is 200" status="pass" classname="/test/path/collection" time="0.100"/>
+    <testcase name="Response has json field" status="pass" classname="/test/path/collection" time="0.100"/>
+    <testcase name="Response json has username" status="pass" classname="/test/path/collection" time="0.100"/>
+  </testsuite>
+  <testsuite name="/test/path/collection" errors="0" failures="1" skipped="0" tests="2" timestamp="2024-01-01T00:00:00.000" hostname="test-host" time="0.100">
+    <testcase name="This test will also fail" status="fail" classname="/test/path/collection" time="0.100">
+      <failure type="failure" message="expected 200 to equal 500"/>
+    </testcase>
+    <testcase name="Status code is 200" status="pass" classname="/test/path/collection" time="0.100"/>
+  </testsuite>
+</testsuites>
--- a/tests/runner/collection-run-report/collection/api/v1/posts.bru
+++ b/tests/runner/collection-run-report/collection/api/v1/posts.bru
@@ -0,0 +1,38 @@
+meta {
+  name: Get UUID
+  type: http
+  seq: 2
+}
+
+get {
+  url: https://httpbin.org/uuid
+  body: none
+  auth: none
+}
+
+headers {
+  Accept: application/json
+}
+
+tests {
+  test("This test will fail", function() {
+    expect(res.getStatus()).to.equal(404); // Intentional failure
+  });
+  
+  test("Status code is 200", function() {
+    expect(res.getStatus()).to.equal(200);
+  });
+  
+  test("Response is an object", function() {
+    expect(res.getBody()).to.be.an('object');
+  });
+  
+  test("Response has uuid property", function() {
+    expect(res.getBody()).to.have.property('uuid');
+  });
+  
+  test("UUID is a string", function() {
+    const body = res.getBody();
+    expect(body.uuid).to.be.a('string');
+  });
+}
--- a/tests/runner/collection-run-report/collection/api/v1/users.bru
+++ b/tests/runner/collection-run-report/collection/api/v1/users.bru
@@ -0,0 +1,34 @@
+meta {
+  name: Get User Info
+  type: http
+  seq: 1
+}
+
+get {
+  url: https://httpbin.org/json
+  body: none
+  auth: none
+}
+
+headers {
+  Accept: application/json
+}
+
+tests {
+  test("Status code is 200", function() {
+    expect(res.getStatus()).to.equal(200);
+  });
+  
+  test("Response is an object", function() {
+    expect(res.getBody()).to.be.an('object');
+  });
+  
+  test("Response has slideshow property", function() {
+    expect(res.getBody()).to.have.property('slideshow');
+  });
+  
+  test("Slideshow has title", function() {
+    const body = res.getBody();
+    expect(body.slideshow).to.have.property('title');
+  });
+}
--- a/tests/runner/collection-run-report/collection/auth/login.bru
+++ b/tests/runner/collection-run-report/collection/auth/login.bru
@@ -0,0 +1,38 @@
+meta {
+  name: Login Request
+  type: http
+  seq: 3
+}
+
+post {
+  url: https://httpbin.org/post
+  body: json
+  auth: none
+}
+
+headers {
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "username": "testuser",
+    "password": "testpass"
+  }
+}
+
+tests {
+  test("Status code is 200", function() {
+    expect(res.getStatus()).to.equal(200);
+  });
+  
+  test("Response has json field", function() {
+    const response = res.getBody();
+    expect(response).to.have.property('json');
+  });
+  
+  test("Response json has username", function() {
+    const response = res.getBody();
+    expect(response.json).to.have.property('username');
+  });
+}
--- a/tests/runner/collection-run-report/collection/auth/logout.bru
+++ b/tests/runner/collection-run-report/collection/auth/logout.bru
@@ -0,0 +1,25 @@
+meta {
+  name: Logout Request
+  type: http
+  seq: 4
+}
+
+delete {
+  url: https://httpbin.org/delete
+  body: none
+  auth: none
+}
+
+headers {
+  Accept: application/json
+}
+
+tests {
+  test("This test will also fail", function() {
+    expect(res.getStatus()).to.equal(500); // Intentional failure
+  });
+  
+  test("Status code is 200", function() {
+    expect(res.getStatus()).to.equal(200);
+  });
+}
--- a/tests/runner/collection-run-report/collection/bruno.json
+++ b/tests/runner/collection-run-report/collection/bruno.json
@@ -0,0 +1,9 @@
+{
+  "version": "1",
+  "name": "Report Test Collection",
+  "type": "collection",
+  "ignore": [
+    "node_modules",
+    ".git"
+  ]
+}