feat: include pinned data in filtering for more accurate results in env variables search (#7513)

* refactor: optimize formik value handling and improve save conditions

* fix

.coderabbit.yaml

@@ -0,0 +1,79 @@
+# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
+
+language: 'en-US'
+early_access: false
+tone_instructions: 'You are an expert code reviewer in TypeScript, JavaScript, NodeJS, and ElectronJS. You work in an enterprise software developer team, providing concise and clear code review advice. You only elaborate or provide detailed explanations when requested.'
+
+knowledge_base:
+  opt_out: false
+  code_guidelines:
+    enabled: true
+    filePatterns:
+      - '**/CODING_STANDARDS.md'
+
+reviews:
+  profile: 'chill'
+  request_changes_workflow: false
+  high_level_summary: true
+  poem: true
+  review_status: true
+  collapse_walkthrough: false
+  auto_review:
+    enabled: true
+    drafts: false
+    base_branches: ['main', 'release/*']
+  path_instructions:
+    - path: '**/*'
+      instructions: |
+        Bruno is a cross-platform Electron desktop app that runs on macOS, Windows, and Linux. Ensure that all code is OS-agnostic:
+        - File paths must use `path.join()` or `path.resolve()` instead of hardcoded `/` or `\\` separators
+        - Never assume case-sensitive or case-insensitive filesystems
+        - Use `os.homedir()`, `app.getPath()`, or environment-appropriate APIs instead of hardcoded paths like `/home/`, `C:\\Users\\`, or `~/`
+        - Line endings should be handled consistently (be aware of CRLF vs LF issues)
+        - Use `path.sep` or `path.posix`/`path.win32` when platform-specific separators are needed
+        - Shell commands or child_process calls must account for platform differences (e.g., `which` vs `where`, `/bin/sh` vs `cmd.exe`)
+        - File permissions (e.g., `fs.chmod`, `fs.access`) should account for Windows not supporting Unix-style permission bits
+        - Avoid relying on Unix-only signals (e.g., `SIGKILL`) without Windows fallbacks
+        - Use `os.tmpdir()` instead of hardcoding `/tmp`
+        - Environment variable access should handle platform differences (e.g., `HOME` vs `USERPROFILE`)
+    - path: 'tests/**/**.*'
+      instructions: |
+        Review the following e2e test code written using the Playwright test library. Ensure that:
+        - Follow best practices for Playwright code and e2e automation
+        - Try to reduce usage of `page.waitForTimeout();` in code unless absolutely necessary and the locator cannot be found using existing `expect()` playwright calls
+        - Avoid using `page.pause()` in code
+        - Use locator variables for locators
+        - Avoid using test.only
+        - Use multiple assertions
+        - Promote the use of `test.step` as much as possible so the generated reports are easier to read
+        - Ensure that the `fixtures` like the collections are nested inside the `fixtures` folder 
+          
+
+
+          **Fixture Example***: Here's an example of possible fixture and test pair
+          ```
+          .
+          ├── fixtures
+          │   └── collection
+          │       ├── base.bru
+          │       ├── bruno.json
+          │       ├── collection.bru
+          │       ├── ws-test-request-with-headers.bru
+          │       ├── ws-test-request-with-subproto.bru
+          │       └── ws-test-request.bru
+          ├── connection.spec.ts # <- Depends on the collection in ./fixtures/collection
+          ├── headers.spec.ts
+          ├── persistence.spec.ts
+          ├── variable-interpolation
+          │   ├── fixtures
+          │   │   └── collection
+          │   │       ├── environments
+          │   │       ├── bruno.json
+          │   │       └── ws-interpolation-test.bru
+          │   ├── init-user-data
+          │   └── variable-interpolation.spec.ts # <- Depends on the collection in ./variable-interpolation/fixtures/collection
+          └── subproto.spec.ts
+          ```
+
+chat:
+  auto_reply: true

.github/PULL_REQUEST_TEMPLATE.md

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

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

@@ -1,5 +1,10 @@
 name: 'Setup Node Dependencies'
 description: 'Install Node.js and npm dependencies'
+inputs:
+  skip-build:
+    description: 'Skip building libraries'
+    required: false
+    default: 'false'
 runs:
   using: 'composite'
   steps:
@@ -9,12 +14,13 @@ runs:
         node-version: v22.17.0
         cache: 'npm'
         cache-dependency-path: './package-lock.json'
-    
+
     - name: Install node dependencies
       shell: bash
       run: npm ci --legacy-peer-deps
-    
+
     - name: Build libraries
+      if: inputs.skip-build != 'true'
       shell: bash
       run: |
         npm run build:graphql-docs
@@ -23,4 +29,5 @@ runs:
         npm run sandbox:bundle-libraries --workspace=packages/bruno-js
         npm run build:bruno-converters
         npm run build:bruno-requests
+        npm run build:schema-types
         npm run build:bruno-filestore

.github/actions/tests/run-cli-tests/action.yml

@@ -0,0 +1,20 @@
+name: 'Run CLI Tests'
+description: 'Setup dependencies, start local testbench and run CLI tests'
+runs:
+  using: 'composite'
+  steps:
+    - name: Run Local Testbench
+      shell: bash
+      run: |
+        npm start --workspace=packages/bruno-tests &
+        sleep 5
+
+    - name: Install Test Collection Dependencies
+      shell: bash
+      run: npm ci --prefix packages/bruno-tests/collection
+
+    - name: Run CLI Tests
+      shell: bash
+      run: |
+        cd packages/bruno-tests/collection
+        node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit --sandbox developer

.github/actions/tests/run-e2e-tests/action.yml

@@ -0,0 +1,22 @@
+name: 'Run E2E Tests'
+description: 'Setup dependencies, configure environment, and run Playwright E2E tests'
+inputs:
+  os:
+    description: 'Operating system (ubuntu, macos, windows)'
+    default: 'ubuntu'
+runs:
+  using: 'composite'
+  steps:
+    - name: Install Test Collection Dependencies
+      shell: bash
+      run: npm ci --prefix packages/bruno-tests/collection
+
+    - name: Run Playwright Tests (Ubuntu)
+      if: inputs.os == 'ubuntu'
+      shell: bash
+      run: xvfb-run npm run test:e2e
+
+    - name: Run Playwright Tests
+      if: inputs.os != 'ubuntu'
+      shell: bash
+      run: npm run test:e2e

.github/actions/tests/run-unit-tests/action.yml

@@ -0,0 +1,48 @@
+name: 'Run Unit Tests'
+description: 'Setup dependencies and run unit tests for all packages'
+runs:
+  using: 'composite'
+  steps:
+    - name: Test Package bruno-js
+      shell: bash
+      run: npm run test --workspace=packages/bruno-js
+
+    - name: Test Package bruno-cli
+      shell: bash
+      run: npm run test --workspace=packages/bruno-cli
+
+    - name: Test Package bruno-query
+      shell: bash
+      run: npm run test --workspace=packages/bruno-query
+
+    - name: Test Package bruno-lang
+      shell: bash
+      run: npm run test --workspace=packages/bruno-lang
+
+    - name: Test Package bruno-schema
+      shell: bash
+      run: npm run test --workspace=packages/bruno-schema
+
+    - name: Test Package bruno-app
+      shell: bash
+      run: npm run test --workspace=packages/bruno-app
+
+    - name: Test Package bruno-common
+      shell: bash
+      run: npm run test --workspace=packages/bruno-common
+
+    - name: Test Package bruno-converters
+      shell: bash
+      run: npm run test --workspace=packages/bruno-converters
+
+    - name: Test Package bruno-electron
+      shell: bash
+      run: npm run test --workspace=packages/bruno-electron
+
+    - name: Test Package bruno-requests
+      shell: bash
+      run: npm run test --workspace=packages/bruno-requests
+
+    - name: Test Package bruno-filestore
+      shell: bash
+      run: npm run test --workspace=packages/bruno-filestore

.github/scripts/comment-on-flaky-tests.js

@@ -0,0 +1,70 @@
+const fs = require('fs');
+const { execSync } = require('child_process');
+
+// Check if flaky-tests.json exists
+if (!fs.existsSync('flaky-tests.json')) {
+  console.log('No flaky-tests.json found');
+  process.exit(0);
+}
+
+// Get changed files in PR
+let changedFiles = [];
+try {
+  changedFiles = execSync('git diff --name-only origin/main...HEAD')
+    .toString()
+    .split('\n')
+    .filter(f => f.endsWith('.spec.ts'));
+} catch (error) {
+  console.log('Could not determine changed files:', error.message);
+  process.exit(0);
+}
+
+if (changedFiles.length === 0) {
+  console.log('No test files were modified in this PR');
+  process.exit(0);
+}
+
+// Read flaky tests
+const flakyTests = JSON.parse(fs.readFileSync('flaky-tests.json', 'utf8'));
+
+if (flakyTests.length === 0) {
+  console.log('No flaky/failed tests found');
+  process.exit(0);
+}
+
+// Find modified flaky tests
+const modifiedFlakyTests = flakyTests.filter(test =>
+  changedFiles.some(file => test.file.includes(file))
+);
+
+if (modifiedFlakyTests.length === 0) {
+  console.log('No modified test files are flaky');
+  process.exit(0);
+}
+
+// Generate comment markdown
+let comment = '## ⚠️ Warning: You modified flaky/failed test files\n\n';
+comment += 'The following test files you modified have reliability issues:\n\n';
+
+modifiedFlakyTests.forEach(test => {
+  const testType = test.status === 'failed' ? '❌ Failed' : '⚠️ Flaky';
+  comment += `### ${testType}: \`${test.file}\`\n`;
+  comment += `**Test:** ${test.testTitle}\n`;
+  comment += `**Status:** ${test.status}\n`;
+  if (test.retryAttempt > 0) {
+    comment += `**Retry Attempt:** ${test.retryAttempt}\n`;
+  }
+  comment += '\n**To debug locally, run:**\n';
+  comment += '```bash\n';
+  comment += `npx playwright test ${test.file} --repeat-each=5 --workers=1\n`;
+  comment += '```\n\n';
+});
+
+comment += '---\n';
+comment += '**Note:** Flaky tests passed after retrying, failed tests did not pass. ';
+comment += 'Please investigate and fix the root cause before merging.\n';
+
+// Save comment to file for GitHub Action to post
+fs.writeFileSync('pr-comment.md', comment);
+
+console.log(`Found ${modifiedFlakyTests.length} modified flaky tests`);

.github/scripts/detect-flaky-tests.js

@@ -0,0 +1,78 @@
+const fs = require('fs');
+
+
+// Read Playwright JSON report
+const resultsPath = 'playwright-report/results.json';
+
+if (!fs.existsSync(resultsPath)) {
+  console.log('No Playwright results found at', resultsPath);
+  process.exit(0);
+}
+
+const results = JSON.parse(fs.readFileSync(resultsPath, 'utf8'));
+
+// Extract flaky tests
+// A test is flaky if: status === "passed" AND retry > 0
+// A test is failed if: status === "failed"
+// This means it failed initially but passed on retry OR failed completely
+const flakyTests = [];
+
+function traverseSuites(suites) {
+  for (const suite of suites) {
+    // Process specs in this suite
+    for (const spec of suite.specs || []) {
+      for (const test of spec.tests || []) {
+        // Check each test result
+        for (const result of test.results || []) {
+          // Track two types of problematic tests:
+          // 1. Flaky: passed on a retry attempt (retry > 0)
+          // 2. Failed: failed on all attempts
+          if ((result.status === 'passed' && result.retry > 0) || result.status === 'failed') {
+            flakyTests.push({
+              file: spec.file,
+              title: spec.title,
+              testTitle: spec.title,
+              line: spec.line,
+              status: result.status,
+              retryAttempt: result.retry
+            });
+            break; // Only record once per test
+          }
+        }
+      }
+    }
+
+    // Recursively process nested suites
+    if (suite.suites && suite.suites.length > 0) {
+      traverseSuites(suite.suites);
+    }
+  }
+}
+
+traverseSuites(results.suites || []);
+
+// Save flaky tests to JSON
+fs.writeFileSync('flaky-tests.json', JSON.stringify(flakyTests, null, 2));
+
+// Generate markdown report
+let markdown = '## ⚠️ Flaky/Failed Tests Detected\n\n';
+markdown += 'The following tests are problematic:\n\n';
+
+flakyTests.forEach(test => {
+  const testType = test.status === 'failed' ? '❌ Failed' : '⚠️ Flaky';
+  markdown += `### ${testType}: \`${test.file}\`\n`;
+  markdown += `- **Test:** ${test.testTitle}\n`;
+  markdown += `- **Status:** ${test.status}\n`;
+  if (test.retryAttempt > 0) {
+    markdown += `- **Retry Attempt:** ${test.retryAttempt}\n`;
+  }
+  markdown += `- **Debug command:**\n`;
+  markdown += '```bash\n';
+  markdown += `npx playwright test ${test.file} --repeat-each=5 --workers=1\n`;
+  markdown += '```\n\n';
+});
+
+fs.writeFileSync('flaky-report.md', markdown);
+
+console.log(`Found ${flakyTests.length} flaky/failed tests`);
+process.exit(flakyTests.length > 0 ? 1 : 0);

.github/workflows/flaky-test-detector.yml

@@ -0,0 +1,120 @@
+name: Flaky Test Detector
+
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - 'tests/**/*.spec.ts'
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+  checks: write
+
+jobs:
+  detect-flaky-tests:
+    name: Detect Flaky Tests
+    runs-on: ubuntu-24.04
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0  # Need full history to compare with main
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get --no-install-recommends install -y \
+            libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 \
+            libcups2 libgtk-3-0 libasound2t64 xvfb
+
+      - name: Install npm dependencies
+        run: |
+          npm ci --legacy-peer-deps
+          sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+          sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+
+      - name: Install test collection dependencies
+        run: npm ci --prefix packages/bruno-tests/collection
+
+      - name: Build libraries
+        run: |
+          npm run build:graphql-docs
+          npm run build:bruno-query
+          npm run build:bruno-common
+          npm run sandbox:bundle-libraries --workspace=packages/bruno-js
+          npm run build:bruno-converters
+          npm run build:bruno-requests
+          npm run build:schema-types
+          npm run build:bruno-filestore
+
+      - name: Run Playwright tests
+        run: xvfb-run npm run test:e2e
+        continue-on-error: true  # Continue even if tests fail
+
+      - name: Detect flaky tests
+        id: detect
+        run: node .github/scripts/detect-flaky-tests.js
+        continue-on-error: true  # Don't fail workflow if flaky tests found
+
+      - name: Check modified flaky tests
+        id: check-modified
+        run: node .github/scripts/comment-on-flaky-tests.js
+        continue-on-error: true
+
+      - name: Post PR comment
+        if: hashFiles('pr-comment.md') != ''
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+            const comment = fs.readFileSync('pr-comment.md', 'utf8');
+
+            // Check if we already commented
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number
+            });
+
+            const botComment = comments.find(c =>
+              c.user.type === 'Bot' && c.body.includes('Warning: You modified flaky/failed test files')
+            );
+
+            if (botComment) {
+              // Update existing comment
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: botComment.id,
+                body: comment
+              });
+            } else {
+              // Create new comment
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: comment
+              });
+            }
+
+      - name: Upload flaky test artifacts
+        if: always()
+        uses: actions/upload-artifact@v6
+        with:
+          name: flaky-test-results
+          path: |
+            flaky-tests.json
+            flaky-report.md
+            playwright-report/
+          retention-days: 30

.github/workflows/lint-checks.yml

@@ -0,0 +1,26 @@
+name: Lint Checks
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, 'release/v*']
+  pull_request:
+    branches: [main, 'release/v*']
+
+jobs:
+  lint:
+    name: Lint Check
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
+        with:
+          skip-build: 'true'
+
+      - name: Lint Check
+        run: npm run lint
+        env:
+          ESLINT_PLUGIN_DIFF_COMMIT: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}

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

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

.github/workflows/ssl-tests.yml

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

.github/workflows/tests.yml

@@ -1,9 +1,10 @@
 name: Tests
 on:
+  workflow_dispatch:
   push:
-    branches: [main]
+    branches: [main, 'release/v*']
   pull_request:
-    branches: [main]
+    branches: [main, 'release/v*']
 
 jobs:
   unit-test:
@@ -13,50 +14,13 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v5
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-          cache-dependency-path: './package-lock.json'
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
+      - uses: actions/checkout@v6
 
-      # build libraries
-      - name: Build libraries
-        run: |
-          npm run build --workspace=packages/bruno-common
-          npm run build --workspace=packages/bruno-query
-          npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-          npm run build --workspace=packages/bruno-converters
-          npm run build --workspace=packages/bruno-requests
-          npm run build --workspace=packages/bruno-filestore
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
 
-      - name: Lint Check
-        run: npm run lint
-        env:
-          ESLINT_PLUGIN_DIFF_COMMIT: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}
-
-      # tests
-      - name: Test Package bruno-js
-        run: npm run test --workspace=packages/bruno-js
-      - name: Test Package bruno-cli
-        run: npm run test --workspace=packages/bruno-cli
-
-      - name: Test Package bruno-query
-        run: npm run test --workspace=packages/bruno-query
-      - name: Test Package bruno-lang
-        run: npm run test --workspace=packages/bruno-lang
-      - name: Test Package bruno-schema
-        run: npm run test --workspace=packages/bruno-schema
-      - name: Test Package bruno-app
-        run: npm run test --workspace=packages/bruno-app
-      - name: Test Package bruno-common
-        run: npm run test --workspace=packages/bruno-common
-      - name: Test Package bruno-converters
-        run: npm run test --workspace=packages/bruno-converters
-      - name: Test Package bruno-electron
-        run: npm run test --workspace=packages/bruno-electron
+      - name: Run Unit Tests
+        uses: ./.github/actions/tests/run-unit-tests
 
   cli-test:
     name: CLI Tests
@@ -66,35 +30,13 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v5
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-          cache-dependency-path: './package-lock.json'
+      - uses: actions/checkout@v6
 
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
 
-      - name: Build Libraries
-        run: |
-          npm run build --workspace=packages/bruno-query
-          npm run build --workspace=packages/bruno-common
-          npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-          npm run build --workspace=packages/bruno-converters
-          npm run build --workspace=packages/bruno-requests
-          npm run build --workspace=packages/bruno-filestore
-
-      - name: Run Local Testbench
-        run: |
-          npm start --workspace=packages/bruno-tests &
-          sleep 5
-
-      - name: Run tests
-        run: |
-          cd packages/bruno-tests/collection
-          npm install
-          node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit
+      - name: Run CLI Tests
+        uses: ./.github/actions/tests/run-cli-tests
 
       - name: Publish Test Report
         uses: EnricoMi/publish-unit-test-result-action@v2
@@ -103,45 +45,38 @@ jobs:
           check_name: CLI Test Results
           files: packages/bruno-tests/collection/junit.xml
           comment_mode: always
+
   e2e-test:
     name: Playwright E2E Tests
     timeout-minutes: 60
     runs-on: ubuntu-24.04
     steps:
-    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v5
-      with:
-        node-version: v22.11.x
-    - name: Install dependencies
-      run: |
-        sudo apt-get update
-        sudo apt-get --no-install-recommends install -y \
-          libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
-          xvfb
-        npm ci --legacy-peer-deps
-        sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
-        sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
+      - uses: actions/checkout@v6
 
-    - name: Install dependencies for test collection environment
-      run: |
-        npm ci --prefix packages/bruno-tests/collection
+      - name: Install System Dependencies (Ubuntu)
+        run: |
+          sudo apt-get update
+          sudo apt-get --no-install-recommends install -y \
+            libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
+            xvfb
 
-    - name: Build libraries
-      run: |
-        npm run build:graphql-docs
-        npm run build:bruno-query
-        npm run build:bruno-common
-        npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-        npm run build:bruno-converters
-        npm run build:bruno-requests
-        npm run build:bruno-filestore
+      - name: Setup Node Dependencies
+        uses: ./.github/actions/common/setup-node-deps
 
-    - name: Run Playwright tests
-      run: |
-        xvfb-run npm run test:e2e
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - name: Configure Chrome Sandbox
+        run: |
+          sudo chown root node_modules/electron/dist/chrome-sandbox
+          sudo chmod 4755 node_modules/electron/dist/chrome-sandbox
+
+      - name: Run playwright Tests
+        uses: ./.github/actions/tests/run-e2e-tests
+        with:
+          os: ubuntu
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v6
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -48,6 +48,23 @@ yarn-error.log*
 bruno.iml
 .idea
 .vscode
+.cursor
+.claude
+.codex
+.agents
+.agent
+skills-lock.json
 
 # Playwright
 /blob-report/
+
+# Development plan files
+CLAUDE.md
+AGENTS.md
+*.plan.md
+
+# packages dist
+packages/bruno-filestore/dist
+packages/bruno-requests/dist
+packages/bruno-schema-types/dist
+packages/bruno-converters/dist

.nvmrc

@@ -1 +1 @@
-v22.11.0
+v22.12.0

.prettierrc.json

@@ -1,7 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120
-}

CODING_STANDARDS.md

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

contributing.md

@@ -16,6 +16,7 @@
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
 | [Dutch](docs/contributing/contributing_nl.md)
+| [فارسی](docs/contributing/contributing_fa.md)
 
 ## Let's make Bruno better, together!!
 
@@ -69,11 +70,13 @@ npm run build:bruno-query
 npm run build:bruno-common
 npm run build:bruno-converters
 npm run build:bruno-requests
+npm run build:schema-types
 npm run build:bruno-filestore
 
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js
 ```
+
 ##### Option 2
 
 ```bash
@@ -94,18 +97,22 @@ npm run dev:electron
 ```
 
 ##### Option 2
+
 ```bash
 # run electron and react app concurrently
 npm run dev
 ```
 
 #### Customize Electron `userData` path
+
 If `ELECTRON_USER_DATA_PATH` env-variable is present and its development mode, then `userData` path is modified accordingly.
 
 e.g.
+
 ```sh
 ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
 ```
+
 This will create a `bruno-test` folder on your Desktop and use it as the `userData` path.
 
 ### Troubleshooting

docs/contributing/contributing_fa.md

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

docs/publishing/publishing_fa.md

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

docs/readme/readme_ar.md

@@ -3,7 +3,7 @@
 
 ### برونو - بيئة تطوير مفتوحة المصدر لاستكشاف واختبار واجهات برمجة التطبيقات (APIs).
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
@@ -41,13 +41,6 @@
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### الطبعة الذهبية ✨
-
-غالبية ميزاتنا مجانية ومفتوحة المصدر.
-نحن نسعى لتحقيق توازن متناغم بين [مبادئ الشفافية والاستدامة](https://github.com/usebruno/bruno/discussions/269)
-
-طلبات الشراء لـ [الطبعة الذهبية](https://www.usebruno.com/pricing) ستطلق قريبًا بسعر ~~$19~~ **$9** ! <br/>
-[اشترك هنا](https://usebruno.ck.page/4c65576bd4) لتصلك إشعارات عند الإطلاق.
 
 ### التثبيت
 

docs/readme/readme_bn.md

@@ -3,7 +3,7 @@
 
 ### ব্রুনো - API অন্বেষণ এবং পরীক্ষা করার জন্য ওপেনসোর্স IDE।
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_cn.md

@@ -3,7 +3,7 @@
 
 ### Bruno - 开源 IDE，用于探索和测试 API。
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_de.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Opensource IDE zum Erkunden und Testen von APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
@@ -43,13 +43,6 @@ Bruno ist ein reines Offline-Tool. Es gibt keine Pläne, Bruno um eine Cloud-Syn
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### Golden Edition ✨
-
-Die meisten unserer Funktionen sind kostenlos und quelloffen.
-Wir bemühen uns um ein Gleichgewicht zwischen [Open-Source-Prinzipien und Nachhaltigkeit](https://github.com/usebruno/bruno/discussions/269)
-
-Du kannst die [Golden Edition](https://www.usebruno.com/pricing) bestellen **$19**! <br/>
-
 ### Installation
 
 Bruno ist als Download [auf unserer Website](https://www.usebruno.com/downloads) für Mac, Windows und Linux verfügbar.

docs/readme/readme_es.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE de código abierto para explorar y probar APIs.
 
-[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Actividad de Commits](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
@@ -43,13 +43,6 @@ Bruno funciona sin conexión a internet. No tenemos intenciones de añadir sincr
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### Golden Edition ✨
-
-La mayoría de nuestras funcionalidades son gratis y de código abierto.
-Queremos alcanzar un equilibrio en armonía entre los [principios open-source y la sostenibilidad](https://github.com/usebruno/bruno/discussions/269).
-
-¡Puedes reservar la [Golden Edition](https://www.usebruno.com/pricing) por ~~$19~~ **$9**! <br/>
-
 ### Instalación
 
 Bruno está disponible para su descarga [en nuestro sitio web](https://www.usebruno.com/downloads) para Mac, Windows y Linux.

docs/readme/readme_fa.md

@@ -0,0 +1,143 @@
+<br />
+<img src="../../assets/images/logo-transparent.png" width="80"/>
+
+### برونو یا Bruno - محیط توسعه متن باز برای تست و توسعه API ها
+
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
+[![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
+[![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
+[![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
+[![Download](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
+
+[English](../../readme.md)
+| [Українська](./readme_ua.md)
+| [Русский](./readme_ru.md)
+| [Türkçe](./readme_tr.md)
+| [Deutsch](./readme_de.md)
+| [Français](./readme_fr.md)
+| [Português (BR)](./readme_pt_br.md)
+| [한국어](./readme_kr.md)
+| [বাংলা](./readme_bn.md)
+| [Español](./readme_es.md)
+| **فارسی**
+| [Română](./readme_ro.md)
+| [Polski](./readme_pl.md)
+| [简体中文](./readme_cn.md)
+| [正體中文](./readme_zhtw.md)
+| [العربية](./readme_ar.md)
+| [日本語](./readme_ja.md)
+| [ქართული](./readme_ka.md)
+
+برونو یک کلاینت API جدید و نوآورانه است که هدفش تغییر وضعیت فعلی ابزارهایی مانند Postman و سایر ابزارهای مشابه است.
+
+برونو مجموعه‌های شما را مستقیماً در یک پوشه روی فایل‌سیستم شما ذخیره می‌کند. ما از یک زبان نشانه‌گذاری ساده به نام Bru برای ذخیره اطلاعات درخواست‌های API استفاده می‌کنیم.
+
+شما می‌توانید برای همکاری روی مجموعه‌های API خود، از Git یا هر سیستم کنترل نسخه دلخواهتان استفاده کنید.
+
+برونو فقط به صورت آفلاین کار می‌کند. هیچ برنامه‌ای برای اضافه کردن همگام‌سازی ابری به برونو در آینده وجود ندارد. ما به حریم خصوصی داده‌های شما اهمیت می‌دهیم و معتقدیم که باید روی دستگاه خودتان باقی بمانند. می‌توانید چشم‌انداز بلندمدت ما را مطالعه کنید. [اینجا (به انگلیسی)](https://github.com/usebruno/bruno/discussions/269)
+
+📢 جدیدترین ارائه ما را در کنفرانس India FOSS 3.0 تماشا کنید.
+[اینجا](https://www.youtube.com/watch?v=7bSMFpbcPiY)
+
+![bruno](/assets/images/landing-2.png) <br /><br />
+
+### نصب
+
+برونو به صورت یک فایل باینری برای دانلود در دسترس است. [بر روی وبسایت ما](https://www.usebruno.com/downloads) برای مک لینکوس و ویندوز.
+
+همچنین می‌توانید برونو را از طریق مدیر بسته‌هایی مانند Homebrew، Chocolatey، Snap و Apt نصب کنید.
+
+```sh
+# بر روی مک از طریق brew
+brew install bruno
+
+# بر روی ویندوز از طریق Chocolatey
+choco install bruno
+
+# بر روی لینوکس از طریق Snap
+snap install bruno
+
+# بر روی لینوکس از طریق Apt
+sudo mkdir -p /etc/apt/keyrings
+sudo apt update && sudo apt install gpg curl
+curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
+  | gpg --dearmor \
+  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
+sudo chmod 644 /etc/apt/keyrings/bruno.gpg
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
+  | sudo tee /etc/apt/sources.list.d/bruno.list
+sudo apt update && sudo apt install bruno
+```
+
+### روی پلتفرم‌های مختلف کار می‌کند 🖥️
+
+![bruno](/assets/images/run-anywhere.png) <br /><br />
+
+### همکاری از طریق گیت 👩‍💻🧑‍💻
+
+یا هر سیستم کنترل نسخه‌ای که ترجیح می‌دهید
+
+![bruno](/assets/images/version-control.png) <br /><br />
+
+### لینک‌های مهم 📌
+
+- [آخرین نسخه پایدار ما](https://github.com/usebruno/bruno/discussions/269)
+- [نقشه راه](https://github.com/usebruno/bruno/discussions/384)
+- [مستندات](https://docs.usebruno.com)
+- [وبسایت](https://www.usebruno.com)
+- [اشتراک ها](https://www.usebruno.com/pricing)
+- [دانلود](https://www.usebruno.com/downloads)
+
+### ویدیوها 🎥
+
+- [تجربه ها](https://github.com/usebruno/bruno/discussions/343)
+- [مرکز دانش](https://github.com/usebruno/bruno/discussions/386)
+- [اسکریپ مانیا](https://github.com/usebruno/bruno/discussions/385)
+
+### حمایت ❤️
+
+جوون! اگر این پروژه را دوست دارید، روی دکمه ⭐ کلیک کنید!
+
+### تجربه‌های به اشتراک گذاشته‌شده 📣
+
+اگر برونو به شما یا تیمتان کمک کرده است، لطفاً فراموش نکنید تجربه‌های خود را به اشتراک بگذارید. [تجربه‌های خود را در بحث گیت‌هاب ما به اشتراک بگذارید](https://github.com/usebruno/bruno/discussions/343).
+
+### انتشار برونو در یک پکیچ منیجر جدید
+
+لطفا چک بکنید [اینجارو](../../publishing.md) برای اطلاعات بیشتر.
+
+### مشارکت 👩‍💻🧑‍💻
+
+خوشحالم که می‌خواهید برونو را بهتر کنید. لطفا [راهنمای مشارکت را بررسی کنید](../contributing/contributing_fa.md).
+
+حتی اگر نمی‌توانید از طریق کدنویسی مشارکت کنید، در گزارش باگ‌ها و درخواست قابلیت‌های جدید که به حل نیازهای شما کمک می‌کند تردید نکنید.
+
+### نویسنده ها
+
+<div align="center">
+    <a href="https://github.com/usebruno/bruno/graphs/contributors">
+        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
+    </a>
+</div>
+
+### در ارتباط باشید 🌐
+
+[𝕏 (تویتر)](https://twitter.com/use_bruno) <br />
+[وبسایت](https://www.usebruno.com) <br />
+[دیسکورد](https://discord.com/invite/KgcZUncpjq) <br />
+[لینکدین](https://www.linkedin.com/company/usebruno)
+
+### برند
+
+**نام**
+
+به فارسی برونو - `Bruno` یک علامت تجاری ثبت‌شده متعلق به [Anoop M D](https://www.helloanoop.com/)
+
+**لوگو**
+
+لوگو توسط [OpenMoji](https://openmoji.org/library/emoji-1F436/) ساخته شده است. مجوز: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
+
+### مجوز 📄
+
+[MIT](../../license.md)

docs/readme/readme_fr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE Opensource pour explorer et tester des APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_it.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Opensource IDE per esplorare e testare gli APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ja.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API の検証・動作テストのためのオープンソース IDE.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
@@ -43,13 +43,6 @@ Bruno はオフラインのみで利用できます。Bruno にクラウド同
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### ゴールデンエディション ✨
-
-機能のほとんどが無料で使用でき、オープンソースとなっています。
-私たちは[オープンソースの原則と長期的な維持](https://github.com/usebruno/bruno/discussions/269)の間でうまくバランスを取ろうと努力しています。
-
-[ゴールデンエディション](https://www.usebruno.com/pricing)を **19 ドル** (買い切り)で購入できます！
-
 ### インストール方法
 
 Bruno は[私たちのウェブサイト](https://www.usebruno.com/downloads)からバイナリをダウンロードできます。Mac, Windows, Linux に対応しています。

docs/readme/readme_ka.md

@@ -3,7 +3,7 @@
 
 ### ბრუნო - ღია წყაროების IDE API-ების შესწავლისა და ტესტირებისათვის.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
@@ -43,12 +43,6 @@
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
-### ოქროს გამოცემა ✨
-
-მთავარი ფუნქციების უმეტესობა უფასოა და ღია წყაროა. ჩვენ ვცდილობთ ჰარმონიული ბალანსის დაცვას [ღია წყაროების პრინციპებსა და მდგრადობას შორის](https://github.com/usebruno/bruno/discussions/269)
-
-თქვენ შეგიძლიათ შეიძინოთ [ოქროს გამოცემა](https://www.usebruno.com/pricing) ერთჯერადი გადახდით **19 დოლარად**! <br/>
-
 ### ინსტალაცია
 
 ბრუნო ხელმისაწვდომია როგორც ბინარული ჩამოტვირთვა [ჩვენ的网站上](https://www.usebruno.com/downloads) Mac-ის, Windows-ისა და Linux-ისთვის.

docs/readme/readme_kr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API 탐색 및 테스트를 위한 오픈소스 IDE.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_nl.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Open source IDE voor het verkennen en testen van API's.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
@@ -26,13 +26,6 @@ Bruno is uitsluitend offline. Er zijn geen plannen om ooit cloud-synchronisatie
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
-### Golden Edition ✨
-
-De meeste van onze functies zijn gratis en open source.
-We streven naar een harmonieuze balans tussen [open-source principes en duurzaamheid](https://github.com/usebruno/bruno/discussions/269).
-
-Je kunt de [Golden Edition](https://www.usebruno.com/pricing) kopen voor een eenmalige betaling van **$19**! <br/>
-
 ### Installatie
 
 Bruno is beschikbaar als binaire download [op onze website](https://www.usebruno.com/downloads) voor Mac, Windows en Linux.

docs/readme/readme_pl.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Otwartoźródłowe IDE do eksploracji i testów APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_pt_br.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE de código aberto para explorar e testar APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
@@ -41,13 +41,6 @@ Bruno é totalmente offline. Não há planos de adicionar sincronização em nuv
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
-### Golden Edition ✨
-
-A grande maioria dos nossos recursos são gratuitos e de código aberto.
-Nós nos esforçamos para encontrar um equilíbrio harmônico entre [princípios de código aberto e sustentabilidade](https://github.com/usebruno/bruno/discussions/269)
-
-Você pode pré encomendar o plano [Golden Edition](https://www.usebruno.com/pricing) por ~~USD $19~~ **USD $9**! <br/>
-
 ### Instalação
 
 Bruno está disponível para download como binário [em nosso site](https://www.usebruno.com/downloads) para Mac, Windows e Linux.

docs/readme/readme_ro.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Mediu integrat de dezvoltare cu sursă deschisă pentru explorarea și testarea API-urilor.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ru.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE с открытым исходным кодом для изучения и тестирования API.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_tr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API'leri keşfetmek ve test etmek için açık kaynaklı IDE.
 
-[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ua.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE із відкритим кодом для тестування та дослідження API
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_zhtw.md

@@ -3,7 +3,7 @@
 
 ### Bruno - 探索和測試 API 的開源 IDE 工具
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

eslint.config.js

@@ -1,20 +1,32 @@
 // eslint.config.js
-const { defineConfig } = require("eslint/config");
-const globals = require("globals");
+const { defineConfig } = require('eslint/config');
+const globals = require('globals');
 const { fixupPluginRules } = require('@eslint/compat');
 const eslintPluginDiff = require('eslint-plugin-diff');
 
 let stylistic;
 
 const runESMImports = async () => {
-  stylistic = await import('@stylistic/eslint-plugin').then(d => d.default);
+  stylistic = await import('@stylistic/eslint-plugin').then((d) => d.default);
 };
 
 module.exports = runESMImports().then(() => defineConfig([
+  // Global ignores - must be a standalone object with ONLY ignores
+  {
+    ignores: [
+      '**/node_modules/**/*',
+      '**/dist/**/*',
+      '**/*.bru',
+      'packages/bruno-js/src/sandbox/bundle-browser-rollup.js',
+      'packages/bruno-app/public/static/**/*',
+      'packages/bruno-app/.next/**/*',
+      'packages/bruno-electron/web/**/*'
+    ]
+  },
   {
     plugins: {
       'diff': fixupPluginRules(eslintPluginDiff),
-      '@stylistic': stylistic,
+      '@stylistic': stylistic
     },
     languageOptions: {
       parser: require('@typescript-eslint/parser'),
@@ -26,6 +38,7 @@ module.exports = runESMImports().then(() => defineConfig([
     files: [
       './eslint.config.js',
       'tests/**/*.{ts,js}',
+      'playwright/**/*.{js,ts}',
       'packages/bruno-app/**/*.{js,jsx,ts}',
       'packages/bruno-app/src/test-utils/mocks/codemirror.js',
       'packages/bruno-cli/**/*.js',
@@ -33,18 +46,19 @@ module.exports = runESMImports().then(() => defineConfig([
       'packages/bruno-converters/**/*.js',
       'packages/bruno-electron/**/*.js',
       'packages/bruno-filestore/**/*.ts',
+      'packages/bruno-schema-types/**/*.ts',
       'packages/bruno-js/**/*.js',
       'packages/bruno-lang/**/*.js',
       'packages/bruno-requests/**/*.ts',
       'packages/bruno-requests/**/*.js',
+      'packages/bruno-tests/**/*.{js,ts}'
     ],
-    processor: 'diff/diff',
     rules: {
       ...stylistic.configs.customize({
         indent: 2,
         quotes: 'single',
         semi: true,
-        jsx: true,
+        jsx: true
       }).rules,
       '@stylistic/comma-dangle': ['error', 'never'],
       '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
@@ -52,9 +66,9 @@ module.exports = runESMImports().then(() => defineConfig([
       '@stylistic/curly-newline': ['error', {
         multiline: true,
         minElements: 2,
-        consistent: true,
+        consistent: true
       }],
-      '@stylistic/function-paren-newline': ['error', 'never'],
+      '@stylistic/function-paren-newline': ['off'],
       '@stylistic/array-bracket-spacing': ['error', 'never'],
       '@stylistic/arrow-spacing': ['error', { before: true, after: true }],
       '@stylistic/function-call-spacing': ['error', 'never'],
@@ -62,12 +76,14 @@ module.exports = runESMImports().then(() => defineConfig([
       '@stylistic/padding-line-between-statements': ['off'],
       '@stylistic/semi-style': ['error', 'last'],
       '@stylistic/max-len': ['off'],
-      '@stylistic/jsx-one-expression-per-line': ['off']
-    },
+      '@stylistic/jsx-one-expression-per-line': ['off'],
+      '@stylistic/max-statements-per-line': ['off'],
+      '@stylistic/no-mixed-operators': ['off']
+    }
   },
   {
-    files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
-    ignores: ["**/*.config.js", "**/public/**/*"],
+    files: ['packages/bruno-app/**/*.{js,jsx,ts}'],
+    ignores: ['**/*.config.js', '**/public/**/*'],
     languageOptions: {
       globals: {
         ...globals.browser,
@@ -80,114 +96,126 @@ module.exports = runESMImports().then(() => defineConfig([
       },
       parserOptions: {
         ecmaFeatures: {
-          jsx: true,
-        },
-      },
+          jsx: true
+        }
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
     // It prevents lint errors when using CommonJS exports (module.exports) in Jest mocks.
-    files: ["packages/bruno-app/src/test-utils/mocks/codemirror.js"],
+    files: ['packages/bruno-app/src/test-utils/mocks/codemirror.js'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
-      },
+        ...globals.jest
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-cli/**/*.js"],
-    ignores: ["**/*.config.js"],
+    // Storybook config files use CommonJS with __dirname and module.exports
+    files: ['packages/bruno-app/storybook/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    },
+    rules: {
+      'no-undef': 'error'
+    }
+  },
+  {
+    files: ['packages/bruno-cli/**/*.js'],
+    ignores: ['**/*.config.js'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
+        ...globals.jest
       },
       parserOptions: {
-        ecmaVersion: "latest"
-      },
+        ecmaVersion: 'latest'
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-common/**/*.ts"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
+    files: ['packages/bruno-common/**/*.ts'],
+    ignores: ['**/*.config.js', '**/dist/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
+        ...globals.jest
       },
-      parser: require("@typescript-eslint/parser"),
+      parser: require('@typescript-eslint/parser'),
       parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        project: "./packages/bruno-common/tsconfig.json",
-      },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        project: './packages/bruno-common/tsconfig.json'
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-converters/**/*.js"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
+    files: ['packages/bruno-converters/**/*.js'],
+    ignores: ['**/*.config.js', '**/dist/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
+        ...globals.jest
       },
       parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      },
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-electron/**/*.js"],
-    ignores: ["**/*.config.js", "**/web/**/*"],
+    files: ['packages/bruno-electron/**/*.js'],
+    ignores: ['**/*.config.js', '**/web/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
-      },
+        ...globals.jest
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-filestore/**/*.ts"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
+    files: ['packages/bruno-filestore/**/*.ts'],
+    ignores: ['**/*.config.js', '**/dist/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
+        ...globals.jest
       },
-      parser: require("@typescript-eslint/parser"),
+      parser: require('@typescript-eslint/parser'),
       parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        project: "./packages/bruno-filestore/tsconfig.json",
-      },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        project: './packages/bruno-filestore/tsconfig.json'
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-js/**/*.js"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
+    files: ['packages/bruno-js/**/*.js'],
+    ignores: ['**/*.config.js', '**/dist/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
@@ -198,65 +226,65 @@ module.exports = runESMImports().then(() => defineConfig([
         typeDetectGlobalObject: false
       },
       parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      },
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-lang/**/*.js"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
+    files: ['packages/bruno-lang/**/*.js'],
+    ignores: ['**/*.config.js', '**/dist/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
+        ...globals.jest
       },
       parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      },
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-requests/**/*.ts"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
+    files: ['packages/bruno-requests/**/*.ts'],
+    ignores: ['**/*.config.js', '**/dist/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
+        ...globals.jest
       },
-      parser: require("@typescript-eslint/parser"),
+      parser: require('@typescript-eslint/parser'),
       parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        project: "./packages/bruno-requests/tsconfig.json",
-      },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        project: './packages/bruno-requests/tsconfig.json'
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
+      'no-undef': 'error'
+    }
   },
   {
-    files: ["packages/bruno-requests/**/*.js"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
+    files: ['packages/bruno-requests/**/*.js'],
+    ignores: ['**/*.config.js', '**/dist/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
+        ...globals.jest
       },
       parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      },
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+      }
     },
     rules: {
-      "no-undef": "error",
-    },
-  },
+      'no-undef': 'error'
+    }
+  }
 ]));

package.json

@@ -8,6 +8,7 @@
     "packages/bruno-common",
     "packages/bruno-converters",
     "packages/bruno-schema",
+    "packages/bruno-schema-types",
     "packages/bruno-query",
     "packages/bruno-js",
     "packages/bruno-lang",
@@ -22,14 +23,20 @@
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
+    "@opencollection/types": "~0.8.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
+    "@storybook/builder-webpack5": "^10.1.10",
+    "@storybook/react": "^10.1.10",
+    "@storybook/react-webpack5": "^10.1.10",
     "@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",
+    "cross-env": "10.1.0",
     "eslint": "^9.26.0",
     "eslint-plugin-diff": "^2.0.3",
     "fs-extra": "^11.1.1",
@@ -42,25 +49,27 @@
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
     "rimraf": "^6.0.1",
+    "storybook": "^10.1.10",
     "ts-jest": "^29.2.6"
   },
   "scripts": {
     "setup": "node ./scripts/setup.js",
     "watch:converters": "npm run watch --workspace=packages/bruno-converters",
-    "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
+    "dev": "node ./scripts/dev.js",
     "watch": "npm run dev:watch",
     "dev:watch": "node ./scripts/dev-hot-reload.js",
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
-    "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
     "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
+    "storybook": "npm run storybook --workspace=packages/bruno-app",
     "build:bruno-common": "npm run build --workspace=packages/bruno-common",
     "build:bruno-requests": "npm run build --workspace=packages/bruno-requests",
     "build:bruno-filestore": "npm run build --workspace=packages/bruno-filestore",
     "build:bruno-converters": "npm run build --workspace=packages/bruno-converters",
     "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
+    "build:schema-types": "npm run build --workspace=packages/bruno-schema-types",
     "build:electron": "node ./scripts/build-electron.js",
     "build:electron:mac": "./scripts/build-electron.sh mac",
     "build:electron:win": "./scripts/build-electron.sh win",
@@ -69,12 +78,12 @@
     "build:electron:rpm": "./scripts/build-electron.sh rpm",
     "build:electron:snap": "./scripts/build-electron.sh snap",
     "watch:common": "npm run watch --workspace=packages/bruno-common",
+    "watch:requests": "npm run watch --workspace=packages/bruno-requests",
     "test:codegen": "node playwright/codegen.ts",
     "test:e2e": "playwright test --project=default",
     "test:e2e:ssl": "playwright test --project=ssl",
-    "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "lint": "node --max_old_space_size=4096 $(npx which eslint)",
-    "lint:fix": "node --max_old_space_size=4096 $(npx which eslint) --fix",
+    "lint": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" npx eslint",
+    "lint:fix": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" npx eslint --fix",
     "prepare": "husky"
   },
   "nano-staged": {
@@ -89,5 +98,9 @@
         "json-schema-typed": "8.0.1"
       }
     }
+  },
+  "dependencies": {
+    "ajv": "^8.17.1",
+    "git-url-parse": "^14.1.0"
   }
-}
+}

packages/bruno-app/.gitignore

@@ -22,6 +22,7 @@ build
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+*.log
 
 # local env files
 .env.local
@@ -33,4 +34,5 @@ yarn-error.log*
 .next/
 dist/
 
-.env
+.env
+storybook-static/

packages/bruno-app/.prettierrc.json

@@ -1,7 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120
-}

packages/bruno-app/babel.config.js

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

packages/bruno-app/jest.config.js

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

packages/bruno-app/package.json

@@ -8,8 +8,8 @@
     "build": "rsbuild build -m production",
     "preview": "rsbuild preview",
     "test": "jest",
-    "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
-    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
+    "storybook": "storybook dev -p 6006 --config-dir storybook",
+    "build-storybook": "storybook build --config-dir storybook"
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.15",
@@ -21,12 +21,17 @@
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
     "@usebruno/schema": "0.7.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "classnames": "^2.3.1",
     "codemirror": "5.65.2",
     "codemirror-graphql": "2.1.1",
     "cookie": "0.7.1",
+    "diff2html": "^3.4.47",
     "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
+    "fast-fuzzy": "^1.12.0",
+    "fast-json-format": "~0.4.0",
     "file": "^0.2.2",
     "file-dialog": "^0.0.8",
     "file-saver": "^2.0.5",
@@ -35,20 +40,24 @@
     "graphiql": "3.7.1",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
+    "hexy": "^0.3.5",
     "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
-    "iconv-lite": "^0.6.3",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
+    "js-yaml": "^4.1.0",
     "jsesc": "^3.0.2",
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
     "jsonpath-plus": "^10.3.0",
+    "jsonschema": "^1.5.0",
     "know-your-http-well": "^0.5.0",
+    "linkify-it": "^5.0.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",
+    "mime-types": "^3.0.2",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.47",
     "mousetrap": "^1.6.5",
@@ -56,9 +65,10 @@
     "path": "^0.12.7",
     "pdfjs-dist": "4.4.168",
     "platform": "^1.3.6",
+    "polished": "^4.3.1",
     "posthog-node": "4.2.1",
     "prettier": "^2.7.1",
-    "qs": "^6.11.0",
+    "qs": "^6.14.1",
     "query-string": "^7.0.1",
     "react": "19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -73,14 +83,17 @@
     "react-player": "^2.16.0",
     "react-redux": "^7.2.9",
     "react-tooltip": "^5.5.2",
+    "react-virtuoso": "^4.18.1",
     "sass": "^1.46.0",
     "semver": "^7.7.1",
     "shell-quote": "^1.8.3",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
+    "swagger-ui-react": "^5.31.0",
     "system": "^2.0.1",
     "url": "^0.11.3",
     "xml-formatter": "^3.5.0",
+    "xml2js": "^0.6.2",
     "yup": "^0.32.11"
   },
   "devDependencies": {

packages/bruno-app/public/static/diff2Html.min.css

@@ -0,0 +1,713 @@
+:host,
+:root {
+  --d2h-bg-color: #fff;
+  --d2h-border-color: #ddd;
+  --d2h-dim-color: rgba(0, 0, 0, 0.3);
+  --d2h-line-border-color: #eee;
+  --d2h-file-header-bg-color: #f7f7f7;
+  --d2h-file-header-border-color: #d8d8d8;
+  --d2h-empty-placeholder-bg-color: #f1f1f1;
+  --d2h-empty-placeholder-border-color: #e1e1e1;
+  --d2h-selected-color: #c8e1ff;
+  --d2h-ins-bg-color: #dfd;
+  --d2h-ins-border-color: #b4e2b4;
+  --d2h-ins-highlight-bg-color: #97f295;
+  --d2h-ins-label-color: #399839;
+  --d2h-del-bg-color: #fee8e9;
+  --d2h-del-border-color: #e9aeae;
+  --d2h-del-highlight-bg-color: #ffb6ba;
+  --d2h-del-label-color: #c33;
+  --d2h-change-del-color: #fdf2d0;
+  --d2h-change-ins-color: #ded;
+  --d2h-info-bg-color: #f8fafd;
+  --d2h-info-border-color: #d5e4f2;
+  --d2h-change-label-color: #d0b44c;
+  --d2h-moved-label-color: #3572b0;
+  --d2h-dark-color: #e6edf3;
+  --d2h-dark-bg-color: #0d1117;
+  --d2h-dark-border-color: #30363d;
+  --d2h-dark-dim-color: #6e7681;
+  --d2h-dark-line-border-color: #21262d;
+  --d2h-dark-file-header-bg-color: #161b22;
+  --d2h-dark-file-header-border-color: #30363d;
+  --d2h-dark-empty-placeholder-bg-color: hsla(215, 8%, 47%, 0.1);
+  --d2h-dark-empty-placeholder-border-color: #30363d;
+  --d2h-dark-selected-color: rgba(56, 139, 253, 0.1);
+  --d2h-dark-ins-bg-color: rgba(46, 160, 67, 0.15);
+  --d2h-dark-ins-border-color: rgba(46, 160, 67, 0.4);
+  --d2h-dark-ins-highlight-bg-color: rgba(46, 160, 67, 0.4);
+  --d2h-dark-ins-label-color: #3fb950;
+  --d2h-dark-del-bg-color: rgba(248, 81, 73, 0.1);
+  --d2h-dark-del-border-color: rgba(248, 81, 73, 0.4);
+  --d2h-dark-del-highlight-bg-color: rgba(248, 81, 73, 0.4);
+  --d2h-dark-del-label-color: #f85149;
+  --d2h-dark-change-del-color: rgba(210, 153, 34, 0.2);
+  --d2h-dark-change-ins-color: rgba(46, 160, 67, 0.25);
+  --d2h-dark-info-bg-color: rgba(56, 139, 253, 0.1);
+  --d2h-dark-info-border-color: rgba(56, 139, 253, 0.4);
+  --d2h-dark-change-label-color: #d29922;
+  --d2h-dark-moved-label-color: #3572b0;
+}
+.d2h-wrapper {
+  text-align: left;
+}
+.d2h-file-header {
+  background-color: #f7f7f7;
+  background-color: var(--d2h-file-header-bg-color);
+  border-bottom: 1px solid #d8d8d8;
+  border-bottom: 1px solid var(--d2h-file-header-border-color);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
+  height: 35px;
+  padding: 5px 10px;
+}
+.d2h-file-header.d2h-sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.d2h-file-stats {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 14px;
+  margin-left: auto;
+}
+.d2h-lines-added {
+  border: 1px solid #b4e2b4;
+  border: 1px solid var(--d2h-ins-border-color);
+  border-radius: 5px 0 0 5px;
+  color: #399839;
+  color: var(--d2h-ins-label-color);
+  padding: 2px;
+  text-align: right;
+  vertical-align: middle;
+}
+.d2h-lines-deleted {
+  border: 1px solid #e9aeae;
+  border: 1px solid var(--d2h-del-border-color);
+  border-radius: 0 5px 5px 0;
+  color: #c33;
+  color: var(--d2h-del-label-color);
+  margin-left: 1px;
+  padding: 2px;
+  text-align: left;
+  vertical-align: middle;
+}
+.d2h-file-name-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 15px;
+  width: 100%;
+}
+.d2h-file-name {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.d2h-file-wrapper {
+  border: 1px solid #ddd;
+  border: 1px solid var(--d2h-border-color);
+  border-radius: 3px;
+  margin-bottom: 1em;
+}
+.d2h-file-collapse {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  cursor: pointer;
+  display: none;
+  font-size: 12px;
+  justify-content: flex-end;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 1px solid #ddd;
+  border: 1px solid var(--d2h-border-color);
+  border-radius: 3px;
+  padding: 4px 8px;
+}
+.d2h-file-collapse.d2h-selected {
+  background-color: #c8e1ff;
+  background-color: var(--d2h-selected-color);
+}
+.d2h-file-collapse-input {
+  margin: 0 4px 0 0;
+}
+.d2h-diff-table {
+  border-collapse: collapse;
+  font-family: Menlo, Consolas, monospace;
+  font-size: 13px;
+  width: 100%;
+}
+.d2h-files-diff {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+}
+.d2h-file-diff {
+  overflow-y: hidden;
+}
+.d2h-file-diff.d2h-d-none,
+.d2h-files-diff.d2h-d-none {
+  display: none;
+}
+.d2h-file-side-diff {
+  display: inline-block;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  width: 50%;
+}
+.d2h-code-line {
+  padding: 0 8em;
+  width: calc(100% - 16em);
+}
+.d2h-code-line,
+.d2h-code-side-line {
+  display: inline-block;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+}
+.d2h-code-side-line {
+  padding: 0 4.5em;
+  width: calc(100% - 9em);
+}
+.d2h-code-line-ctn {
+  background: none;
+  display: inline-block;
+  padding: 0;
+  word-wrap: normal;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  vertical-align: middle;
+  white-space: pre;
+  width: 100%;
+}
+.d2h-code-line del,
+.d2h-code-side-line del {
+  background-color: #ffb6ba;
+  background-color: var(--d2h-del-highlight-bg-color);
+}
+.d2h-code-line del,
+.d2h-code-line ins,
+.d2h-code-side-line del,
+.d2h-code-side-line ins {
+  border-radius: 0.2em;
+  display: inline-block;
+  margin-top: -1px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.d2h-code-line ins,
+.d2h-code-side-line ins {
+  background-color: #97f295;
+  background-color: var(--d2h-ins-highlight-bg-color);
+  text-align: left;
+}
+.d2h-code-line-prefix {
+  background: none;
+  display: inline;
+  padding: 0;
+  word-wrap: normal;
+  white-space: pre;
+}
+.line-num1 {
+  float: left;
+}
+.line-num1,
+.line-num2 {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0 0.5em;
+  text-overflow: ellipsis;
+  width: 3.5em;
+}
+.line-num2 {
+  float: right;
+}
+.d2h-code-linenumber {
+  background-color: #fff;
+  background-color: var(--d2h-bg-color);
+  border: solid #eee;
+  border: solid var(--d2h-line-border-color);
+  border-width: 0 1px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.3);
+  color: var(--d2h-dim-color);
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  text-align: right;
+  width: 7.5em;
+}
+.d2h-code-linenumber:after {
+  content: '\200b';
+}
+.d2h-code-side-linenumber {
+  background-color: #fff;
+  background-color: var(--d2h-bg-color);
+  border: solid #eee;
+  border: solid var(--d2h-line-border-color);
+  border-width: 0 1px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.3);
+  color: var(--d2h-dim-color);
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: 0 0.5em;
+  position: absolute;
+  text-align: right;
+  text-overflow: ellipsis;
+  width: 4em;
+}
+.d2h-code-side-linenumber:after {
+  content: '\200b';
+}
+.d2h-code-side-emptyplaceholder,
+.d2h-emptyplaceholder {
+  background-color: #f1f1f1;
+  background-color: var(--d2h-empty-placeholder-bg-color);
+  border-color: #e1e1e1;
+  border-color: var(--d2h-empty-placeholder-border-color);
+}
+.d2h-code-line-prefix,
+.d2h-code-linenumber,
+.d2h-code-side-linenumber,
+.d2h-emptyplaceholder {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.d2h-code-linenumber,
+.d2h-code-side-linenumber {
+  direction: rtl;
+}
+.d2h-del {
+  background-color: #fee8e9;
+  background-color: var(--d2h-del-bg-color);
+  border-color: #e9aeae;
+  border-color: var(--d2h-del-border-color);
+}
+.d2h-ins {
+  background-color: #dfd;
+  background-color: var(--d2h-ins-bg-color);
+  border-color: #b4e2b4;
+  border-color: var(--d2h-ins-border-color);
+}
+.d2h-info {
+  background-color: #f8fafd;
+  background-color: var(--d2h-info-bg-color);
+  border-color: #d5e4f2;
+  border-color: var(--d2h-info-border-color);
+  color: rgba(0, 0, 0, 0.3);
+  color: var(--d2h-dim-color);
+}
+.d2h-file-diff .d2h-del.d2h-change {
+  background-color: #fdf2d0;
+  background-color: var(--d2h-change-del-color);
+}
+.d2h-file-diff .d2h-ins.d2h-change {
+  background-color: #ded;
+  background-color: var(--d2h-change-ins-color);
+}
+.d2h-file-list-wrapper {
+  margin-bottom: 10px;
+}
+.d2h-file-list-wrapper a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.d2h-file-list-wrapper a,
+.d2h-file-list-wrapper a:visited {
+  color: #3572b0;
+  color: var(--d2h-moved-label-color);
+}
+.d2h-file-list-header {
+  text-align: left;
+}
+.d2h-file-list-title {
+  font-weight: 700;
+}
+.d2h-file-list-line {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  text-align: left;
+}
+.d2h-file-list {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.d2h-file-list > li {
+  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--d2h-border-color);
+  margin: 0;
+  padding: 5px 10px;
+}
+.d2h-file-list > li:last-child {
+  border-bottom: none;
+}
+.d2h-file-switch {
+  cursor: pointer;
+  display: none;
+  font-size: 10px;
+}
+.d2h-icon {
+  margin-right: 10px;
+  vertical-align: middle;
+  fill: currentColor;
+}
+.d2h-deleted {
+  color: #c33;
+  color: var(--d2h-del-label-color);
+}
+.d2h-added {
+  color: #399839;
+  color: var(--d2h-ins-label-color);
+}
+.d2h-changed {
+  color: #d0b44c;
+  color: var(--d2h-change-label-color);
+}
+.d2h-moved {
+  color: #3572b0;
+  color: var(--d2h-moved-label-color);
+}
+.d2h-tag {
+  background-color: #fff;
+  background-color: var(--d2h-bg-color);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 10px;
+  margin-left: 5px;
+  padding: 0 2px;
+}
+.d2h-deleted-tag {
+  border: 1px solid #c33;
+  border: 1px solid var(--d2h-del-label-color);
+}
+.d2h-added-tag {
+  border: 1px solid #399839;
+  border: 1px solid var(--d2h-ins-label-color);
+}
+.d2h-changed-tag {
+  border: 1px solid #d0b44c;
+  border: 1px solid var(--d2h-change-label-color);
+}
+.d2h-moved-tag {
+  border: 1px solid #3572b0;
+  border: 1px solid var(--d2h-moved-label-color);
+}
+.d2h-dark-color-scheme {
+  background-color: #0d1117;
+  background-color: var(--d2h-dark-bg-color);
+  color: #e6edf3;
+  color: var(--d2h-dark-color);
+}
+.d2h-dark-color-scheme .d2h-file-header {
+  background-color: #161b22;
+  background-color: var(--d2h-dark-file-header-bg-color);
+  border-bottom: #30363d;
+  border-bottom: var(--d2h-dark-file-header-border-color);
+}
+.d2h-dark-color-scheme .d2h-lines-added {
+  border: 1px solid rgba(46, 160, 67, 0.4);
+  border: 1px solid var(--d2h-dark-ins-border-color);
+  color: #3fb950;
+  color: var(--d2h-dark-ins-label-color);
+}
+.d2h-dark-color-scheme .d2h-lines-deleted {
+  border: 1px solid rgba(248, 81, 73, 0.4);
+  border: 1px solid var(--d2h-dark-del-border-color);
+  color: #f85149;
+  color: var(--d2h-dark-del-label-color);
+}
+.d2h-dark-color-scheme .d2h-code-line del,
+.d2h-dark-color-scheme .d2h-code-side-line del {
+  background-color: rgba(248, 81, 73, 0.4);
+  background-color: var(--d2h-dark-del-highlight-bg-color);
+}
+.d2h-dark-color-scheme .d2h-code-line ins,
+.d2h-dark-color-scheme .d2h-code-side-line ins {
+  background-color: rgba(46, 160, 67, 0.4);
+  background-color: var(--d2h-dark-ins-highlight-bg-color);
+}
+.d2h-dark-color-scheme .d2h-diff-tbody {
+  border-color: #30363d;
+  border-color: var(--d2h-dark-border-color);
+}
+.d2h-dark-color-scheme .d2h-code-side-linenumber {
+  background-color: #0d1117;
+  background-color: var(--d2h-dark-bg-color);
+  border-color: #21262d;
+  border-color: var(--d2h-dark-line-border-color);
+  color: #6e7681;
+  color: var(--d2h-dark-dim-color);
+}
+.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
+.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+  background-color: hsla(215, 8%, 47%, 0.1);
+  background-color: var(--d2h-dark-empty-placeholder-bg-color);
+  border-color: #30363d;
+  border-color: var(--d2h-dark-empty-placeholder-border-color);
+}
+.d2h-dark-color-scheme .d2h-code-linenumber {
+  background-color: #0d1117;
+  background-color: var(--d2h-dark-bg-color);
+  border-color: #21262d;
+  border-color: var(--d2h-dark-line-border-color);
+  color: #6e7681;
+  color: var(--d2h-dark-dim-color);
+}
+.d2h-dark-color-scheme .d2h-del {
+  background-color: rgba(248, 81, 73, 0.1);
+  background-color: var(--d2h-dark-del-bg-color);
+  border-color: rgba(248, 81, 73, 0.4);
+  border-color: var(--d2h-dark-del-border-color);
+}
+.d2h-dark-color-scheme .d2h-ins {
+  background-color: rgba(46, 160, 67, 0.15);
+  background-color: var(--d2h-dark-ins-bg-color);
+  border-color: rgba(46, 160, 67, 0.4);
+  border-color: var(--d2h-dark-ins-border-color);
+}
+.d2h-dark-color-scheme .d2h-info {
+  background-color: rgba(56, 139, 253, 0.1);
+  background-color: var(--d2h-dark-info-bg-color);
+  border-color: rgba(56, 139, 253, 0.4);
+  border-color: var(--d2h-dark-info-border-color);
+  color: #6e7681;
+  color: var(--d2h-dark-dim-color);
+}
+.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
+  background-color: rgba(210, 153, 34, 0.2);
+  background-color: var(--d2h-dark-change-del-color);
+}
+.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
+  background-color: rgba(46, 160, 67, 0.25);
+  background-color: var(--d2h-dark-change-ins-color);
+}
+.d2h-dark-color-scheme .d2h-file-wrapper {
+  border: 1px solid #30363d;
+  border: 1px solid var(--d2h-dark-border-color);
+}
+.d2h-dark-color-scheme .d2h-file-collapse {
+  border: 1px solid #0d1117;
+  border: 1px solid var(--d2h-dark-bg-color);
+}
+.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
+  background-color: rgba(56, 139, 253, 0.1);
+  background-color: var(--d2h-dark-selected-color);
+}
+.d2h-dark-color-scheme .d2h-file-list-wrapper a,
+.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
+  color: #3572b0;
+  color: var(--d2h-dark-moved-label-color);
+}
+.d2h-dark-color-scheme .d2h-file-list > li {
+  border-bottom: 1px solid #0d1117;
+  border-bottom: 1px solid var(--d2h-dark-bg-color);
+}
+.d2h-dark-color-scheme .d2h-deleted {
+  color: #f85149;
+  color: var(--d2h-dark-del-label-color);
+}
+.d2h-dark-color-scheme .d2h-added {
+  color: #3fb950;
+  color: var(--d2h-dark-ins-label-color);
+}
+.d2h-dark-color-scheme .d2h-changed {
+  color: #d29922;
+  color: var(--d2h-dark-change-label-color);
+}
+.d2h-dark-color-scheme .d2h-moved {
+  color: #3572b0;
+  color: var(--d2h-dark-moved-label-color);
+}
+.d2h-dark-color-scheme .d2h-tag {
+  background-color: #0d1117;
+  background-color: var(--d2h-dark-bg-color);
+}
+.d2h-dark-color-scheme .d2h-deleted-tag {
+  border: 1px solid #f85149;
+  border: 1px solid var(--d2h-dark-del-label-color);
+}
+.d2h-dark-color-scheme .d2h-added-tag {
+  border: 1px solid #3fb950;
+  border: 1px solid var(--d2h-dark-ins-label-color);
+}
+.d2h-dark-color-scheme .d2h-changed-tag {
+  border: 1px solid #d29922;
+  border: 1px solid var(--d2h-dark-change-label-color);
+}
+.d2h-dark-color-scheme .d2h-moved-tag {
+  border: 1px solid #3572b0;
+  border: 1px solid var(--d2h-dark-moved-label-color);
+}
+@media (prefers-color-scheme: dark) {
+  .d2h-auto-color-scheme {
+    background-color: #0d1117;
+    background-color: var(--d2h-dark-bg-color);
+    color: #e6edf3;
+    color: var(--d2h-dark-color);
+  }
+  .d2h-auto-color-scheme .d2h-file-header {
+    background-color: #161b22;
+    background-color: var(--d2h-dark-file-header-bg-color);
+    border-bottom: #30363d;
+    border-bottom: var(--d2h-dark-file-header-border-color);
+  }
+  .d2h-auto-color-scheme .d2h-lines-added {
+    border: 1px solid rgba(46, 160, 67, 0.4);
+    border: 1px solid var(--d2h-dark-ins-border-color);
+    color: #3fb950;
+    color: var(--d2h-dark-ins-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-lines-deleted {
+    border: 1px solid rgba(248, 81, 73, 0.4);
+    border: 1px solid var(--d2h-dark-del-border-color);
+    color: #f85149;
+    color: var(--d2h-dark-del-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-code-line del,
+  .d2h-auto-color-scheme .d2h-code-side-line del {
+    background-color: rgba(248, 81, 73, 0.4);
+    background-color: var(--d2h-dark-del-highlight-bg-color);
+  }
+  .d2h-auto-color-scheme .d2h-code-line ins,
+  .d2h-auto-color-scheme .d2h-code-side-line ins {
+    background-color: rgba(46, 160, 67, 0.4);
+    background-color: var(--d2h-dark-ins-highlight-bg-color);
+  }
+  .d2h-auto-color-scheme .d2h-diff-tbody {
+    border-color: #30363d;
+    border-color: var(--d2h-dark-border-color);
+  }
+  .d2h-auto-color-scheme .d2h-code-side-linenumber {
+    background-color: #0d1117;
+    background-color: var(--d2h-dark-bg-color);
+    border-color: #21262d;
+    border-color: var(--d2h-dark-line-border-color);
+    color: #6e7681;
+    color: var(--d2h-dark-dim-color);
+  }
+  .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
+  .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+    background-color: hsla(215, 8%, 47%, 0.1);
+    background-color: var(--d2h-dark-empty-placeholder-bg-color);
+    border-color: #30363d;
+    border-color: var(--d2h-dark-empty-placeholder-border-color);
+  }
+  .d2h-auto-color-scheme .d2h-code-linenumber {
+    background-color: #0d1117;
+    background-color: var(--d2h-dark-bg-color);
+    border-color: #21262d;
+    border-color: var(--d2h-dark-line-border-color);
+    color: #6e7681;
+    color: var(--d2h-dark-dim-color);
+  }
+  .d2h-auto-color-scheme .d2h-del {
+    background-color: rgba(248, 81, 73, 0.1);
+    background-color: var(--d2h-dark-del-bg-color);
+    border-color: rgba(248, 81, 73, 0.4);
+    border-color: var(--d2h-dark-del-border-color);
+  }
+  .d2h-auto-color-scheme .d2h-ins {
+    background-color: rgba(46, 160, 67, 0.15);
+    background-color: var(--d2h-dark-ins-bg-color);
+    border-color: rgba(46, 160, 67, 0.4);
+    border-color: var(--d2h-dark-ins-border-color);
+  }
+  .d2h-auto-color-scheme .d2h-info {
+    background-color: rgba(56, 139, 253, 0.1);
+    background-color: var(--d2h-dark-info-bg-color);
+    border-color: rgba(56, 139, 253, 0.4);
+    border-color: var(--d2h-dark-info-border-color);
+    color: #6e7681;
+    color: var(--d2h-dark-dim-color);
+  }
+  .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
+    background-color: rgba(210, 153, 34, 0.2);
+    background-color: var(--d2h-dark-change-del-color);
+  }
+  .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
+    background-color: rgba(46, 160, 67, 0.25);
+    background-color: var(--d2h-dark-change-ins-color);
+  }
+  .d2h-auto-color-scheme .d2h-file-wrapper {
+    border: 1px solid #30363d;
+    border: 1px solid var(--d2h-dark-border-color);
+  }
+  .d2h-auto-color-scheme .d2h-file-collapse {
+    border: 1px solid #0d1117;
+    border: 1px solid var(--d2h-dark-bg-color);
+  }
+  .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
+    background-color: rgba(56, 139, 253, 0.1);
+    background-color: var(--d2h-dark-selected-color);
+  }
+  .d2h-auto-color-scheme .d2h-file-list-wrapper a,
+  .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
+    color: #3572b0;
+    color: var(--d2h-dark-moved-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-file-list > li {
+    border-bottom: 1px solid #0d1117;
+    border-bottom: 1px solid var(--d2h-dark-bg-color);
+  }
+  .d2h-dark-color-scheme .d2h-deleted {
+    color: #f85149;
+    color: var(--d2h-dark-del-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-added {
+    color: #3fb950;
+    color: var(--d2h-dark-ins-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-changed {
+    color: #d29922;
+    color: var(--d2h-dark-change-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-moved {
+    color: #3572b0;
+    color: var(--d2h-dark-moved-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-tag {
+    background-color: #0d1117;
+    background-color: var(--d2h-dark-bg-color);
+  }
+  .d2h-auto-color-scheme .d2h-deleted-tag {
+    border: 1px solid #f85149;
+    border: 1px solid var(--d2h-dark-del-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-added-tag {
+    border: 1px solid #3fb950;
+    border: 1px solid var(--d2h-dark-ins-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-changed-tag {
+    border: 1px solid #d29922;
+    border: 1px solid var(--d2h-dark-change-label-color);
+  }
+  .d2h-auto-color-scheme .d2h-moved-tag {
+    border: 1px solid #3572b0;
+    border: 1px solid var(--d2h-dark-moved-label-color);
+  }
+}

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

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

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

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

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

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

packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/Plugins/Yaml/index.js

@@ -0,0 +1,129 @@
+const yamlPlugin = (cm) => {
+  cm.defineMode('yaml', function () {
+    var cons = ['true', 'false', 'on', 'off', 'yes', 'no'];
+    var keywordRegex = new RegExp('\\b((' + cons.join(')|(') + '))$', 'i');
+
+    return {
+      token: function (stream, state) {
+        var ch = stream.peek();
+        var esc = state.escaped;
+        state.escaped = false;
+        /* comments */
+        if (ch == '#' && (stream.pos == 0 || /\s/.test(stream.string.charAt(stream.pos - 1)))) {
+          stream.skipToEnd();
+          return 'comment';
+        }
+
+        if (stream.match(/^('([^']|\\.)*'?|"([^"]|\\.)*"?)/)) return 'string';
+
+        if (state.literal && stream.indentation() > state.keyCol) {
+          stream.skipToEnd();
+          return 'string';
+        } else if (state.literal) {
+          state.literal = false;
+        }
+        if (stream.sol()) {
+          state.keyCol = 0;
+          state.pair = false;
+          state.pairStart = false;
+          /* document start */
+          if (stream.match('---')) {
+            return 'def';
+          }
+          /* document end */
+          if (stream.match('...')) {
+            return 'def';
+          }
+          /* array list item */
+          if (stream.match(/\s*-\s+/)) {
+            return 'meta';
+          }
+        }
+        /* inline pairs/lists */
+        if (stream.match(/^(\{|\}|\[|\])/)) {
+          if (ch == '{') state.inlinePairs++;
+          else if (ch == '}') state.inlinePairs--;
+          else if (ch == '[') state.inlineList++;
+          else state.inlineList--;
+          return 'meta';
+        }
+
+        /* list separator */
+        if (state.inlineList > 0 && !esc && ch == ',') {
+          stream.next();
+          return 'meta';
+        }
+        /* pairs separator */
+        if (state.inlinePairs > 0 && !esc && ch == ',') {
+          state.keyCol = 0;
+          state.pair = false;
+          state.pairStart = false;
+          stream.next();
+          return 'meta';
+        }
+
+        /* start of value of a pair */
+        if (state.pairStart) {
+          /* block literals */
+          if (stream.match(/^\s*(\||\>)\s*/)) {
+            state.literal = true;
+            return 'meta';
+          }
+          /* references */
+          if (stream.match(/^\s*(\&|\*)[a-z0-9\._-]+\b/i)) {
+            return 'variable-2';
+          }
+          /* numbers */
+          if (state.inlinePairs == 0 && stream.match(/^\s*-?[0-9\.\,]+\s?$/)) {
+            return 'number';
+          }
+          if (state.inlinePairs > 0 && stream.match(/^\s*-?[0-9\.\,]+\s?(?=(,|}))/)) {
+            return 'number';
+          }
+          /* keywords */
+          if (stream.match(keywordRegex)) {
+            return 'keyword';
+          }
+        }
+
+        /* pairs (associative arrays) -> key */
+        if (
+          !state.pair
+          && stream.match(/^\s*(?:[,\[\]{}&*!|>'"%@`][^\s'":]|[^\s,\[\]{}#&*!|>'"%@`])[^#:]*(?=:($|\s))/)
+        ) {
+          state.pair = true;
+          state.keyCol = stream.indentation();
+          return 'atom';
+        }
+        if (state.pair && stream.match(/^:\s*/)) {
+          state.pairStart = true;
+          return 'meta';
+        }
+
+        /* nothing found, continue */
+        state.pairStart = false;
+        state.escaped = ch == '\\';
+        stream.next();
+        return null;
+      },
+      startState: function () {
+        return {
+          pair: false,
+          pairStart: false,
+          keyCol: 0,
+          inlinePairs: 0,
+          inlineList: 0,
+          literal: false,
+          escaped: false
+        };
+      },
+      lineComment: '#',
+      fold: 'indent'
+    };
+  });
+
+  cm.defineMIME('text/x-yaml', 'yaml');
+  cm.defineMIME('text/yaml', 'yaml');
+};
+
+export default yamlPlugin;

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

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.CodeMirror {
+    height: calc(100vh - 9rem);
+    background: ${(props) => props.theme.codemirror.bg};
+    border: solid 1px ${(props) => props.theme.codemirror.border};
+    font-family: ${(props) => (props.font ? props.font : 'default')};
+    font-size: ${(props) => props.theme.font.size.base};
+    line-break: anywhere;
+  }
+
+  .CodeMirror-dialog {
+    overflow: visible;
+    input {
+      background: transparent;
+      border: 1px solid #d3d6db;
+      outline: none;
+      border-radius: 0px;
+    }
+  }
+
+  .CodeMirror-overlayscroll-horizontal div,
+  .CodeMirror-overlayscroll-vertical div {
+    background: #d2d7db;
+  }
+
+  textarea.cm-editor {
+    position: relative;
+  }
+
+  // Todo: dark mode temporary fix
+  // Clean this
+  .CodeMirror.cm-s-monokai {
+    .CodeMirror-overlayscroll-horizontal div,
+    .CodeMirror-overlayscroll-vertical div {
+      background: #444444;
+    }
+  }
+
+  .cm-s-monokai span.cm-property,
+  .cm-s-monokai span.cm-attribute {
+    color: #9cdcfe !important;
+  }
+
+  .cm-s-monokai span.cm-string {
+    color: #ce9178 !important;
+  }
+
+  .cm-s-monokai span.cm-number {
+    color: #b5cea8 !important;
+  }
+
+  .cm-s-monokai span.cm-atom {
+    color: #569cd6 !important;
+  }
+
+  .cm-variable-valid {
+    color: ${(props) => props.theme.codemirror.variable.valid};
+  }
+  .cm-variable-invalid {
+    color: ${(props) => props.theme.codemirror.variable.invalid};
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,138 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+import yamlPlugin from './Plugins/Yaml/index';
+
+let CodeMirror;
+const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+
+if (!SERVER_RENDERED) {
+  CodeMirror = require('codemirror');
+}
+
+export default class CodeEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.cachedValue = props.value || '';
+    this.variables = {};
+    this.lintOptions = {
+      esversion: 11,
+      expr: true,
+      asi: true
+    };
+  }
+
+  componentWillMount() {
+    switch (this.props.mode) {
+      case 'yaml':
+        // YAML linting and hightlighting plugin
+        yamlPlugin(CodeMirror);
+        break;
+      default:
+        break;
+    }
+  }
+
+  componentDidMount() {
+    const editor = (this.editor = CodeMirror(this._node, {
+      value: this.props.value || '',
+      lineNumbers: true,
+      lineWrapping: true,
+      tabSize: 2,
+      mode: this.props.mode || 'application/text',
+      keyMap: 'sublime',
+      autoCloseBrackets: true,
+      matchBrackets: true,
+      showCursorWhenSelecting: true,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
+      lint: this.lintOptions,
+      readOnly: this.props.readOnly,
+      scrollbarStyle: 'overlay',
+      theme: this.props.theme === 'dark' ? 'monokai' : 'default',
+      extraKeys: {
+        'Cmd-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
+        'Ctrl-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
+        'Cmd-F': 'findPersistent',
+        'Ctrl-F': 'findPersistent',
+        'Cmd-H': 'replace',
+        'Ctrl-H': 'replace',
+        'Tab': function (cm) {
+          cm.getSelection().includes('\n') || editor.getLine(cm.getCursor().line) == cm.getSelection()
+            ? cm.execCommand('indentMore')
+            : cm.replaceSelection('  ', 'end');
+        },
+        'Shift-Tab': 'indentLess',
+        'Ctrl-Space': 'autocomplete',
+        'Cmd-Space': 'autocomplete',
+        'Ctrl-Y': 'foldAll',
+        'Cmd-Y': 'foldAll',
+        'Ctrl-I': 'unfoldAll',
+        'Cmd-I': 'unfoldAll'
+      }
+    }));
+    if (editor) {
+      editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
+      editor.on('change', this._onEdit);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    this.ignoreChangeEvent = true;
+    if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
+      this.cachedValue = this.props.value;
+      this.editor.setValue(this.props.value);
+    }
+    if (this.props.theme !== prevProps.theme && this.editor) {
+      this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
+    }
+    this.ignoreChangeEvent = false;
+  }
+
+  componentWillUnmount() {
+    if (this.editor) {
+      this.editor.off('change', this._onEdit);
+      this.editor = null;
+    }
+  }
+
+  render() {
+    if (this.editor) {
+      this.editor.refresh();
+    }
+    return (
+      <StyledWrapper
+        className="h-full w-full graphiql-container"
+        aria-label="Code Editor"
+        font={this.props.font}
+        ref={(node) => {
+          this._node = node;
+        }}
+      />
+    );
+  }
+
+  _onEdit = () => {
+    if (!this.ignoreChangeEvent && this.editor) {
+      this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);
+      this.cachedValue = this.editor.getValue();
+      if (this.props.onEdit) {
+        this.props.onEdit(this.cachedValue);
+      }
+    }
+  };
+}

packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/StyledWrapper.js

@@ -0,0 +1,872 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .swagger-root {
+    height: calc(100vh - 7rem);
+    border-left: solid 1px ${(props) => props.theme.border.border1};
+    overflow-y: auto;
+    background: ${(props) => props.theme.bg};
+    padding-bottom: 20px;
+
+    /* ── Global reset ── */
+    .swagger-ui {
+      font-family: inherit;
+      font-size: ${(props) => props.theme.font.size.base};
+      color: ${(props) => props.theme.text};
+
+      * {
+        border-color: ${(props) => props.theme.border.border1};
+      }
+
+      .auth-container {
+        padding: 0;
+      }
+
+      select {
+        box-shadow: none !important;
+      }
+
+      .wrapper {
+        padding: 0 20px;
+        max-width: none;
+      }
+
+      /* ── Info section ── */
+      .info {
+        margin: 16px 0 12px;
+
+        hgroup.main {
+          margin: 0;
+        }
+
+        .title {
+          font-size: 16px;
+          font-weight: 600;
+          color: ${(props) => props.theme.text};
+
+          small {
+            padding: 2px 6px !important;
+            font-size: 10px;
+            vertical-align: middle;
+            border-radius: 3px;
+
+            pre {
+              color: ${(props) => props.theme.text} !important;
+              font-size: 10px;
+            }
+          }
+        }
+
+        .base-url {
+          font-size: ${(props) => props.theme.font.size.xs};
+          color: ${(props) => props.theme.colors.text.muted};
+        }
+
+        .description {
+          font-size: ${(props) => props.theme.font.size.sm};
+          color: ${(props) => props.theme.colors.text.muted};
+
+          p, li {
+            font-size: ${(props) => props.theme.font.size.sm};
+            color: ${(props) => props.theme.colors.text.muted};
+            margin: 3px 0;
+            line-height: 1.5;
+          }
+
+          h1, h2, h3, h4, h5, h6 {
+            color: ${(props) => props.theme.text};
+          }
+
+          a {
+            color: ${(props) => props.theme.textLink};
+          }
+        }
+      }
+
+      /* Version / OAS badges */
+      .version-stamp span.version {
+        background: ${(props) => props.theme.border.border1} !important;
+        border: 1px solid ${(props) => props.theme.colors.text.muted} !important;
+        color: ${(props) => props.theme.text} !important;
+        font-size: 9px;
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+
+      .version-pragma {
+        font-size: ${(props) => props.theme.font.size.xs};
+        color: ${(props) => props.theme.colors.text.muted};
+      }
+
+      /* ── Tag section headings ── */
+      .opblock-tag-section {
+        .opblock-tag {
+          font-size: ${(props) => props.theme.font.size.md};
+          color: ${(props) => props.theme.text};
+          border-bottom: none;
+          padding: 0;
+
+          &:hover {
+            background: ${(props) => props.theme.background.mantle};
+          }
+
+          a {
+            color: ${(props) => props.theme.text} !important;
+          }
+
+          small {
+            font-size: ${(props) => props.theme.font.size.xs};
+            color: ${(props) => props.theme.colors.text.muted};
+            padding: 0 10px;
+          }
+        }
+      }
+
+      /* ── Operation blocks (GET, POST, PUT, DELETE, PATCH) ── */
+      .opblock {
+        margin: 0 0 8px;
+        border-radius: 4px;
+        border: 1px solid ${(props) => props.theme.border.border1} !important;
+        background: ${(props) => props.theme.bg} !important;
+        box-shadow: none !important;
+
+        .opblock-summary {
+          padding: 6px 10px;
+          border: none !important;
+          background: transparent !important;
+
+          .opblock-summary-method {
+            font-size: 10px;
+            font-weight: 700;
+            padding: 3px 8px;
+            min-width: 50px;
+            text-align: center;
+            border-radius: 3px;
+          }
+
+          .opblock-summary-path {
+            font-size: ${(props) => props.theme.font.size.sm};
+
+            a, span {
+              color: ${(props) => props.theme.text} !important;
+            }
+          }
+
+          .opblock-summary-description {
+            font-size: ${(props) => props.theme.font.size.xs};
+            color: ${(props) => props.theme.colors.text.muted};
+          }
+
+          .opblock-summary-control {
+            svg {
+              fill: ${(props) => props.theme.colors.text.muted};
+              width: 14px;
+              height: 14px;
+            }
+          }
+        }
+
+        .opblock-body {
+          font-size: ${(props) => props.theme.font.size.sm};
+          color: ${(props) => props.theme.text};
+          background: ${(props) => props.theme.bg};
+          border-top: 1px solid ${(props) => props.theme.border.border1};
+
+          .opblock-description-wrapper,
+          .opblock-section {
+            p {
+              color: ${(props) => props.theme.colors.text.muted};
+              font-size: ${(props) => props.theme.font.size.sm};
+            }
+          }
+
+          .tab-header .tab-item {
+            color: ${(props) => props.theme.colors.text.muted};
+
+            &.active {
+              color: ${(props) => props.theme.text};
+            }
+          }
+
+          select {
+            color: ${(props) => props.theme.text};
+            background: ${(props) => props.theme.bg};
+            border: 1px solid ${(props) => props.theme.border.border1};
+            border-radius: 3px;
+            font-size: ${(props) => props.theme.font.size.xs};
+            padding: 2px 6px;
+          }
+
+          input[type="text"] {
+            color: ${(props) => props.theme.text};
+            background: ${(props) => props.theme.bg};
+            border: 1px solid ${(props) => props.theme.border.border1};
+            border-radius: 3px;
+            font-size: ${(props) => props.theme.font.size.sm};
+          }
+        }
+      }
+
+      /* Method badge colors — keep them but tone down */
+      .opblock.opblock-get .opblock-summary-method { background: #61affe; color: #fff; }
+      .opblock.opblock-post .opblock-summary-method { background: #49cc90; color: #fff; }
+      .opblock.opblock-put .opblock-summary-method { background: #fca130; color: #fff; }
+      .opblock.opblock-delete .opblock-summary-method { background: #f93e3e; color: #fff; }
+      .opblock.opblock-patch .opblock-summary-method { background: #50e3c2; color: #000; }
+
+      /* Lock / authorization icons */
+      .authorization__btn {
+
+        svg {
+          fill: ${(props) => props.theme.colors.text.muted};
+          width: 14px;
+          height: 14px;
+        }
+      }
+
+      /* ── Tables ── */
+      table {
+        font-size: ${(props) => props.theme.font.size.sm};
+
+        thead {
+          tr {
+            th {
+              font-size: ${(props) => props.theme.font.size.xs} !important;
+              color: ${(props) => props.theme.colors.text.muted} !important;
+              border-bottom: 1px solid ${(props) => props.theme.border.border1} !important;
+              padding: 6px 0;
+            }
+          }
+        }
+
+        td {
+          padding: 6px 0;
+          border-bottom: 1px solid ${(props) => props.theme.border.border1};
+          color: ${(props) => props.theme.text};
+        }
+      }
+
+      .parameter__name {
+        font-size: ${(props) => props.theme.font.size.sm};
+        color: ${(props) => props.theme.text};
+
+        &.required::after {
+          color: ${(props) => props.theme.colors.text.danger || '#c0392b'};
+          font-size: ${(props) => props.theme.font.size.xs};
+        }
+      }
+
+      .parameter__type {
+        font-size: ${(props) => props.theme.font.size.xs};
+        color: ${(props) => props.theme.colors.text.muted};
+      }
+
+      .parameter__in {
+        font-size: ${(props) => props.theme.font.size.xs};
+        color: ${(props) => props.theme.colors.text.muted};
+      }
+
+      /* ── Models / Schemas ── */
+      section.models {
+        border: 1px solid ${(props) => props.theme.border.border1};
+        border-radius: 4px;
+        background: ${(props) => props.theme.bg};
+        padding-bottom: 0px;
+        margin-bottom: 40px;
+        margin-top: 8px;
+
+        h4 {
+          font-size: ${(props) => props.theme.font.size.sm};
+          color: ${(props) => props.theme.text};
+          border-bottom: none;
+          padding: 6px 10px;
+          margin: 0;
+
+          svg {
+            fill: ${(props) => props.theme.colors.text.muted};
+            width: 16px;
+            height: 16px;
+          }
+        }
+
+        .model-container {
+          background: ${(props) => props.theme.bg} !important;
+          margin: 0;
+          padding: 4px 8px;
+          border-bottom: 1px solid ${(props) => props.theme.border.border1};
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .model-box {
+            background: ${(props) => props.theme.bg} !important;
+            padding: 2px 0;
+          }
+        }
+      }
+
+      .model {
+        font-size: 11px;
+        color: ${(props) => props.theme.text};
+        line-height: 1.4;
+
+        .prop-type {
+          color: ${(props) => props.theme.textLink};
+          font-size: 11px;
+        }
+
+        .prop-format {
+          color: ${(props) => props.theme.colors.text.muted};
+          font-size: 10px;
+        }
+
+        span.prop-enum {
+          display: block;
+          color: ${(props) => props.theme.colors.text.muted};
+          font-size: 10px;
+        }
+      }
+
+      .model-example {
+
+        .tab li {
+          color: ${(props) => props.theme.colors.text.muted} !important;
+        }
+      }
+
+      /* Model expand/collapse toggle */
+      .model-toggle {
+        cursor: pointer;
+        font-size: 10px;
+        color: ${(props) => props.theme.colors.text.muted};
+
+        &::after {
+          color: ${(props) => props.theme.colors.text.muted};
+        }
+      }
+
+      /* Model box inner styling */
+      .model-box {
+        background: ${(props) => props.theme.bg} !important;
+        color: ${(props) => props.theme.text};
+      }
+
+      /* Inner model details */
+      .inner-object {
+        color: ${(props) => props.theme.text};
+      }
+
+      /* Model title (schema name) */
+      .model-title {
+        color: ${(props) => props.theme.text};
+        font-size: 12px;
+        font-weight: 600;
+      }
+
+      /* ── JSON Schema 2020-12 (OpenAPI 3.1) schema overrides ── */
+      .json-schema-2020-12-accordion,
+      .json-schema-2020-12-expand-deep-button,
+      section.models h4 button,
+      .model-box button,
+      .models-control,
+      .opblock-summary,
+      .opblock-summary-control,
+      .opblock-tag {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      button:focus-visible,
+      .opblock-summary:focus-visible,
+      .opblock-tag:focus-visible,
+      .models-control:focus-visible {
+        outline: 2px solid ${(props) => props.theme.textLink} !important;
+        outline-offset: 2px;
+      }
+
+      .json-schema-2020-12__title {
+        font-size: 12px !important;
+        font-weight: 600;
+        color: ${(props) => props.theme.text} !important;
+      }
+
+      .json-schema-2020-12-head {
+        padding: 4px 8px !important;
+        background: ${(props) => props.theme.bg} !important;
+
+        .json-schema-2020-12-accordion {
+          padding: 0 !important;
+          color: ${(props) => props.theme.text} !important;
+          background: transparent !important;
+        }
+
+        /* chevron / arrow icon */
+        .json-schema-2020-12-accordion__icon {
+          fill: ${(props) => props.theme.colors.text.muted} !important;
+        }
+
+        button.json-schema-2020-12-expand-deep-button {
+          font-size: 10px !important;
+          color: ${(props) => props.theme.colors.text.muted} !important;
+          background: transparent !important;
+          padding: 0 4px !important;
+        }
+
+        strong.json-schema-2020-12__attribute--primary {
+          font-size: 11px !important;
+          color: ${(props) => props.theme.textLink} !important;
+          font-weight: normal;
+        }
+      }
+
+      .json-schema-2020-12-body {
+        font-size: 11px !important;
+        margin-left: 16px;
+        color: ${(props) => props.theme.text} !important;
+
+        .json-schema-2020-12-property {
+          margin-left: 8px;
+          color: ${(props) => props.theme.text} !important;
+          border-color: ${(props) => props.theme.border.border1} !important;
+        }
+
+        /* property names */
+        .json-schema-2020-12__title {
+          font-size: 11px !important;
+          font-weight: normal;
+          color: ${(props) => props.theme.text} !important;
+        }
+
+        /* type badges inside expanded schema */
+        strong.json-schema-2020-12__attribute--primary {
+          font-size: 10px !important;
+          color: ${(props) => props.theme.textLink} !important;
+          font-weight: normal;
+        }
+
+        strong.json-schema-2020-12__attribute {
+          font-size: 10px !important;
+          color: ${(props) => props.theme.colors.text.muted} !important;
+          font-weight: normal;
+        }
+      }
+
+      .json-schema-2020-12 {
+        font-size: 11px !important;
+        margin: 0 !important;
+        width: 100%;
+        height: 100%;
+        color: ${(props) => props.theme.text} !important;
+        background: ${(props) => props.theme.bg} !important;
+      }
+
+      /* JSON viewer (Examples section inside schema properties) */
+      .json-schema-2020-12-json-viewer {
+        background: transparent !important;
+        color: ${(props) => props.theme.text} !important;
+      }
+
+      .json-schema-2020-12-json-viewer__name {
+        color: ${(props) => props.theme.text} !important;
+      }
+
+      .json-schema-2020-12-json-viewer__name--secondary {
+        color: ${(props) => props.theme.colors.text.muted} !important;
+        font-weight: normal !important;
+      }
+
+      .json-schema-2020-12-json-viewer__value {
+        color: ${(props) => props.theme.text} !important;
+      }
+
+      .json-schema-2020-12-json-viewer__value--secondary {
+        color: ${(props) => props.theme.colors.text.subtext0} !important;
+      }
+
+      .json-schema-2020-12-json-viewer__value--string,
+      .json-schema-2020-12-json-viewer__value--string.json-schema-2020-12-json-viewer__value--secondary {
+        color: ${(props) => props.theme.colors.text.green} !important;
+      }
+
+      .json-schema-2020-12-json-viewer__value--number,
+      .json-schema-2020-12-json-viewer__value--bigint,
+      .json-schema-2020-12-json-viewer__value--number.json-schema-2020-12-json-viewer__value--secondary,
+      .json-schema-2020-12-json-viewer__value--bigint.json-schema-2020-12-json-viewer__value--secondary {
+        color: ${(props) => props.theme.textLink} !important;
+      }
+
+      .json-schema-2020-12-json-viewer__value--boolean,
+      .json-schema-2020-12-json-viewer__value--boolean.json-schema-2020-12-json-viewer__value--secondary {
+        color: ${(props) => props.theme.colors.text.warning} !important;
+      }
+
+      .json-schema-2020-12-json-viewer__value--null,
+      .json-schema-2020-12-json-viewer__value--undefined {
+        color: ${(props) => props.theme.colors.text.muted} !important;
+      }
+
+      /* enum/keyword example values container */
+      .json-schema-2020-12-keyword--examples,
+      [data-json-schema-keyword="examples"] {
+        color: ${(props) => props.theme.text} !important;
+      }
+
+      /* Model collapse/expand all link */
+      span.model-toggle {
+        color: ${(props) => props.theme.colors.text.muted};
+        font-size: 10px;
+      }
+
+      /* Brace styling in models */
+      .brace-open, .brace-close {
+        color: ${(props) => props.theme.colors.text.muted};
+        font-size: 11px;
+      }
+
+      /* ── Code / Response blocks ── */
+      .microlight {
+        background: ${(props) => props.theme.codemirror.bg} !important;
+        color: ${(props) => props.theme.text} !important;
+        font-size: ${(props) => props.theme.font.size.xs};
+        border-radius: 4px;
+        padding: 8px;
+        border: 1px solid ${(props) => props.theme.border.border1};
+      }
+
+      .highlight-code {
+        background: ${(props) => props.theme.codemirror.bg} !important;
+
+        > .microlight {
+          border: none;
+        }
+      }
+
+      pre {
+        color: ${(props) => props.theme.text};
+        font-size: ${(props) => props.theme.font.size.xs};
+        border-radius: 4px;
+      }
+
+      .response-col_status {
+        font-size: ${(props) => props.theme.font.size.sm};
+        color: ${(props) => props.theme.text};
+      }
+
+      .response-col_description {
+        font-size: ${(props) => props.theme.font.size.sm};
+        color: ${(props) => props.theme.colors.text.muted};
+      }
+
+      .responses-inner {
+        h4, h5 {
+          font-size: ${(props) => props.theme.font.size.sm};
+          color: ${(props) => props.theme.text};
+        }
+      }
+
+      /* ── Buttons ── */
+      .btn {
+        font-size: ${(props) => props.theme.font.size.xs};
+        border-radius: 4px;
+        box-shadow: none !important;
+        color: ${(props) => props.theme.text};
+        border-color: ${(props) => props.theme.border.border1};
+        background: transparent;
+      }
+
+      .btn.authorize {
+        color: ${(props) => props.theme.text};
+        border-color: ${(props) => props.theme.border.border1};
+        background: transparent;
+
+        svg {
+          fill: ${(props) => props.theme.text};
+        }
+
+        span {
+          color: ${(props) => props.theme.text};
+        }
+      }
+
+      .btn.execute {
+        background: ${(props) => props.theme.primary?.solid || props.theme.textLink};
+        color: #fff;
+        border-color: transparent;
+      }
+
+      .btn-group {
+        .btn {
+          background: ${(props) => props.theme.bg};
+          color: ${(props) => props.theme.text};
+        }
+      }
+
+      /* ── Links ── */
+      a {
+        color: ${(props) => props.theme.textLink};
+      }
+
+      /* ── Servers / Scheme container ── */
+      .scheme-container {
+        background: ${(props) => props.theme.background.mantle} !important;
+        border-top: 1px solid ${(props) => props.theme.border.border1};
+        border-bottom: 1px solid ${(props) => props.theme.border.border1};
+        padding: 10px;
+        box-shadow: none !important;
+
+        .schemes-title {
+          font-size: ${(props) => props.theme.font.size.sm};
+          color: ${(props) => props.theme.colors.text.muted};
+        }
+
+        label {
+          font-size: ${(props) => props.theme.font.size.sm};
+          color: ${(props) => props.theme.colors.text.muted};
+        }
+
+        select {
+          font-size: ${(props) => props.theme.font.size.sm};
+          color: ${(props) => props.theme.text};
+          background: ${(props) => props.theme.bg};
+          border: 1px solid ${(props) => props.theme.border.border1};
+          border-radius: 4px;
+          padding: 4px 8px;
+        }
+      }
+
+      /* ── SVGs / icons ── */
+      svg {
+        fill: ${(props) => props.theme.colors.text.muted};
+      }
+
+      svg.arrow {
+        fill: ${(props) => props.theme.text};
+        width: 12px;
+        height: 12px;
+        margin-left: 4px;
+      }
+
+      .expand-operation svg {
+        fill: ${(props) => props.theme.colors.text.muted};
+        width: 14px;
+        height: 14px;
+      }
+
+      /* ── Misc / catch-all ── */
+      .loading-container .loading::after {
+        color: ${(props) => props.theme.colors.text.muted};
+        font-size: ${(props) => props.theme.font.size.sm};
+      }
+
+      .renderedMarkdown p {
+        color: ${(props) => props.theme.colors.text.muted};
+        font-size: ${(props) => props.theme.font.size.sm};
+      }
+
+      .opblock-section-header {
+        background: ${(props) => props.theme.background.mantle} !important;
+        box-shadow: none !important;
+        border-bottom: 1px solid ${(props) => props.theme.border.border1};
+        padding: 6px 10px;
+
+        h4 {
+          font-size: ${(props) => props.theme.font.size.sm};
+          color: ${(props) => props.theme.text};
+        }
+
+        label {
+          font-size: ${(props) => props.theme.font.size.xs};
+          color: ${(props) => props.theme.colors.text.muted};
+        }
+      }
+
+      .copy-to-clipboard {
+        button {
+          background: ${(props) => props.theme.background.mantle};
+          border: 1px solid ${(props) => props.theme.border.border1};
+          border-radius: 3px;
+        }
+      }
+
+      /* Dialog / modal overrides */
+      .dialog-ux {
+        .modal-ux {
+          background: ${(props) => props.theme.bg};
+          border: 1px solid ${(props) => props.theme.border.border1};
+          border-radius: 6px;
+          color: ${(props) => props.theme.text};
+          box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+
+          .modal-ux-header {
+            border-bottom: 1px solid ${(props) => props.theme.border.border1};
+            padding: 12px 0px;
+
+            h3 {
+              font-size: ${(props) => props.theme.font.size.md};
+              font-weight: 600;
+              color: ${(props) => props.theme.text};
+            }
+
+            .close-modal {
+              opacity: 0.6;
+              &:hover { opacity: 1; }
+              svg { fill: ${(props) => props.theme.text}; }
+            }
+          }
+
+          .modal-ux-content {
+            color: ${(props) => props.theme.text};
+            padding: 12px 16px;
+
+            p {
+              font-size: ${(props) => props.theme.font.size.sm};
+              color: ${(props) => props.theme.colors.text.muted};
+            }
+
+            /* Section headings like "api_key (apiKey)" */
+            h4, h5, h6 {
+              font-size: ${(props) => props.theme.font.size.sm};
+              font-weight: 600;
+              color: ${(props) => props.theme.textLink};
+              margin: 12px 0 6px;
+            }
+
+            /* Labels: "Name:", "In:", "Flow:", "Value:", etc. */
+            label {
+              font-size: ${(props) => props.theme.font.size.sm};
+              color: ${(props) => props.theme.text};
+
+              > span {
+                font-size: ${(props) => props.theme.font.size.sm};
+                color: ${(props) => props.theme.colors.text.muted};
+              }
+            }
+
+            /* "Scopes:" heading */
+            .scopes h2 {
+              font-size: ${(props) => props.theme.font.size.sm} !important;
+              font-weight: 500;
+              color: ${(props) => props.theme.text} !important;
+            }
+
+            /* Scope item name + description */
+            .scopes .checkbox {
+              p.name {
+                font-size: ${(props) => props.theme.font.size.sm} !important;
+                color: ${(props) => props.theme.text} !important;
+                font-weight: 500;
+                margin: 0;
+              }
+
+              p.description {
+                font-size: ${(props) => props.theme.font.size.xs} !important;
+                color: ${(props) => props.theme.colors.text.muted} !important;
+                margin: 0;
+              }
+            }
+
+            /* Text inputs */
+            input[type="text"],
+            input[type="password"],
+            input[type="email"] {
+              background: ${(props) => props.theme.background.mantle} !important;
+              color: ${(props) => props.theme.text} !important;
+              border: 1px solid ${(props) => props.theme.border.border1} !important;
+              border-radius: 4px !important;
+              font-size: ${(props) => props.theme.font.size.sm} !important;
+              padding: 6px 10px !important;
+              outline: none !important;
+              box-shadow: none !important;
+
+              &:focus {
+                border-color: ${(props) => props.theme.textLink} !important;
+                outline: none !important;
+                box-shadow: none !important;
+              }
+            }
+
+            /* Checkboxes — custom styled to match theme */
+            input[type="checkbox"] {
+              appearance: none !important;
+              -webkit-appearance: none !important;
+              width: 14px !important;
+              height: 14px !important;
+              min-width: 14px;
+              border: 1px solid ${(props) => props.theme.border.border1} !important;
+              border-radius: 3px !important;
+              background: ${(props) => props.theme.background.mantle} !important;
+              cursor: pointer;
+              position: relative;
+              vertical-align: middle;
+
+              &:checked {
+                background: ${(props) => props.theme.textLink} !important;
+                border-color: ${(props) => props.theme.textLink} !important;
+
+                &::after {
+                  content: '';
+                  position: absolute;
+                  left: 3px;
+                  top: 1px;
+                  width: 5px;
+                  height: 8px;
+                  border: 2px solid #fff;
+                  border-top: none;
+                  border-left: none;
+                  transform: rotate(45deg);
+                }
+              }
+            }
+
+            /* "select all / select none" links */
+            a {
+              font-size: ${(props) => props.theme.font.size.xs};
+              color: ${(props) => props.theme.textLink};
+            }
+
+            /* Dividers between auth sections */
+            hr {
+              border-color: ${(props) => props.theme.border.border1};
+              margin: 12px 0;
+            }
+
+            /* Authorize / Close buttons */
+            .btn-done,
+            .auth-btn-wrapper .btn {
+              font-size: ${(props) => props.theme.font.size.sm};
+              border-radius: 4px;
+              padding: 6px 16px;
+              border: 1px solid ${(props) => props.theme.border.border1};
+              background: transparent;
+              color: ${(props) => props.theme.text};
+              cursor: pointer;
+              outline: none !important;
+              box-shadow: none !important;
+
+              &:hover {
+                background: ${(props) => props.theme.background.mantle};
+              }
+
+              &.modal-btn-operation {
+                background: ${(props) => props.theme.textLink};
+                color: #fff;
+                border-color: transparent;
+
+                &:hover {
+                  opacity: 0.9;
+                }
+              }
+            }
+          }
+        }
+
+        .backdrop-ux {
+          background: rgba(0, 0, 0, 0.5);
+        }
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js

@@ -0,0 +1,14 @@
+import SwaggerUI from 'swagger-ui-react';
+import StyledWrapper from './StyledWrapper';
+
+const Swagger = ({ spec }) => {
+  return (
+    <StyledWrapper>
+      <div className="swagger-root w-full">
+        <SwaggerUI spec={spec} />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Swagger;

packages/bruno-app/src/components/ApiSpecPanel/SpecViewer.js

@@ -0,0 +1,71 @@
+import React, { useState, useEffect, Suspense } from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useSelector } from 'react-redux';
+import { IconDeviceFloppy } from '@tabler/icons';
+import CodeEditor from './FileEditor/CodeEditor/index';
+import Swagger from './Renderers/Swagger';
+
+/**
+ * Shared split-pane spec viewer: CodeEditor (left) + Swagger preview (right).
+ *
+ * Props:
+ *  - content    (string)   The spec content (YAML/JSON string)
+ *  - readOnly   (boolean)  If true, editor is not editable and save icon is hidden
+ *  - onSave     (function) Called with current editor content on save (editable mode only)
+ */
+const SpecViewer = ({ content, readOnly, onSave }) => {
+  const { displayedTheme, theme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
+
+  const [editorContent, setEditorContent] = useState(content);
+
+  // Sync editor when saved content changes from outside (e.g. after save completes)
+  useEffect(() => {
+    setEditorContent(content);
+  }, [content]);
+
+  const hasChanges = !readOnly && editorContent !== content;
+
+  const handleSave = () => {
+    if (onSave) onSave(editorContent);
+  };
+
+  return (
+    <section className="main flex flex-grow pl-4 relative">
+      <div className="w-full grid grid-cols-2">
+        <div className="col-span-1">
+          <div className="flex flex-grow relative">
+            <CodeEditor
+              theme={displayedTheme}
+              value={readOnly ? content : editorContent}
+              readOnly={readOnly ? 'nocursor' : false}
+              onEdit={readOnly ? undefined : (val) => setEditorContent(val)}
+              onSave={readOnly ? undefined : handleSave}
+              mode="yaml"
+              font={get(preferences, 'font.codeFont', 'default')}
+            />
+            {!readOnly && onSave && (
+              <IconDeviceFloppy
+                onClick={handleSave}
+                color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
+                strokeWidth={1.5}
+                size={22}
+                className={`absolute right-0 top-0 m-4 ${
+                  hasChanges ? 'cursor-pointer opacity-100' : 'cursor-default opacity-50'
+                }`}
+              />
+            )}
+          </div>
+        </div>
+        <div className="col-span-1">
+          <Suspense fallback="">
+            <Swagger spec={content} />
+          </Suspense>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SpecViewer;

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .menu-icon {
+    cursor: pointer;
+    color: ${(props) => props.theme.sidebar.dropdownIcon.color};
+  }
+
+  div.dropdown-item.menu-item {
+    color: ${(props) => props.theme.colors.text.danger};
+    &:hover {
+      background-color: ${(props) => props.theme.colors.bg.danger};
+      color: white;
+    }
+  }
+
+  .react-tooltip {
+    z-index: 10;
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,87 @@
+import React, { forwardRef, useRef } from 'react';
+import find from 'lodash/find';
+import { useSelector, useDispatch } from 'react-redux';
+import { IconFileCode, IconDots } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+import SpecViewer from './SpecViewer';
+import Dropdown from 'components/Dropdown';
+import { openApiSpec, saveApiSpecToFile } from 'providers/ReduxStore/slices/apiSpec';
+import { useState } from 'react';
+import CreateApiSpec from 'components/Sidebar/ApiSpecs/CreateApiSpec';
+import toast from 'react-hot-toast';
+
+const ApiSpecPanel = () => {
+  const dispatch = useDispatch();
+
+  const [createApiSpecModalOpen, setCreateApiSpecModalOpen] = useState(false);
+
+  const { apiSpecs, activeApiSpecUid } = useSelector((state) => state.apiSpec);
+
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  let apiSpec = find(apiSpecs, (c) => c.uid === activeApiSpecUid);
+  const { filename, pathname, raw, uid } = apiSpec || {};
+  if (!uid) {
+    return <div className="p-4 opacity-50">API Spec not found!</div>;
+  }
+
+  const MenuIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref}>
+        <IconDots size={22} />
+      </div>
+    );
+  });
+
+  const handleOpenApiSpec = () => {
+    dispatch(openApiSpec()).catch(
+      (err) => console.log(err) && toast.error('An error occurred while opening the API spec')
+    );
+  };
+
+  return (
+    <StyledWrapper className="flex flex-col flex-grow relative">
+      {createApiSpecModalOpen ? <CreateApiSpec onClose={() => setCreateApiSpecModalOpen(false)} /> : null}
+      <div className="p-3 mb-2 w-full flex flex-row justify-between grid grid-cols-3">
+        <div className="flex flex-row justify-start gap-x-4 col-span-1">
+          <div className="flex w-fit items-center cursor-pointer">
+            <IconFileCode size={18} strokeWidth={1.5} />
+            <span className="ml-2 mr-4 font-semibold">API Designer</span>
+          </div>
+        </div>
+        <div className="w-full col-span-1 flex justify-center" title={pathname}>
+          {filename}
+        </div>
+        <div className="menu-icon pr-2 col-span-1 flex justify-end">
+          <Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
+            <div
+              className="dropdown-item"
+              onClick={(e) => {
+                dropdownTippyRef.current.hide();
+                setCreateApiSpecModalOpen(true);
+              }}
+            >
+              Create API Spec
+            </div>
+            <div
+              className="dropdown-item"
+              onClick={(e) => {
+                dropdownTippyRef.current.hide();
+                handleOpenApiSpec();
+              }}
+            >
+              Open API Spec
+            </div>
+          </Dropdown>
+        </div>
+      </div>
+      <SpecViewer
+        content={raw}
+        onSave={(content) => dispatch(saveApiSpecToFile({ uid, content }))}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default ApiSpecPanel;

packages/bruno-app/src/components/AppTitleBar/AppMenu/StyledWrapper.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  -webkit-app-region: no-drag;
+
+  .shortcut {
+    font-size: 11px;
+    color: ${(props) => props.theme.dropdown.mutedText};
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/AppTitleBar/AppMenu/index.js

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { IconMenu2 } from '@tabler/icons';
+import MenuDropdown from 'ui/MenuDropdown';
+import ActionIcon from 'ui/ActionIcon';
+import StyledWrapper from './StyledWrapper';
+
+const AppMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { ipcRenderer } = window;
+
+  const menuItems = [
+    {
+      id: 'file',
+      label: 'File',
+      submenu: [
+        {
+          id: 'open-collection',
+          label: 'Open Collection',
+          onClick: () => ipcRenderer?.invoke('renderer:open-collection')
+        },
+        { type: 'divider', id: 'file-div-1' },
+        {
+          id: 'preferences',
+          label: 'Preferences',
+          rightSection: <span className="shortcut">Ctrl+,</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:open-preferences')
+        },
+        { type: 'divider', id: 'file-div-2' },
+        {
+          id: 'quit',
+          label: 'Quit',
+          rightSection: <span className="shortcut">Alt+F4</span>,
+          onClick: () => ipcRenderer?.send('renderer:window-close')
+        }
+      ]
+    },
+    {
+      id: 'edit',
+      label: 'Edit',
+      submenu: [
+        {
+          id: 'undo',
+          label: 'Undo',
+          rightSection: <span className="shortcut">Ctrl+Z</span>,
+          onClick: () => document.execCommand('undo')
+        },
+        {
+          id: 'redo',
+          label: 'Redo',
+          rightSection: <span className="shortcut">Ctrl+Y</span>,
+          onClick: () => document.execCommand('redo')
+        },
+        { type: 'divider', id: 'edit-div-1' },
+        {
+          id: 'cut',
+          label: 'Cut',
+          rightSection: <span className="shortcut">Ctrl+X</span>,
+          onClick: () => document.execCommand('cut')
+        },
+        {
+          id: 'copy',
+          label: 'Copy',
+          rightSection: <span className="shortcut">Ctrl+C</span>,
+          onClick: () => document.execCommand('copy')
+        },
+        {
+          id: 'paste',
+          label: 'Paste',
+          rightSection: <span className="shortcut">Ctrl+V</span>,
+          onClick: () => document.execCommand('paste')
+        },
+        { type: 'divider', id: 'edit-div-2' },
+        {
+          id: 'select-all',
+          label: 'Select All',
+          rightSection: <span className="shortcut">Ctrl+A</span>,
+          onClick: () => document.execCommand('selectAll')
+        }
+      ]
+    },
+    {
+      id: 'view',
+      label: 'View',
+      submenu: [
+        {
+          id: 'toggle-devtools',
+          label: 'Developer Tools',
+          rightSection: <span className="shortcut">Ctrl+Shift+I</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:toggle-devtools')
+        },
+        { type: 'divider', id: 'view-div-1' },
+        {
+          id: 'reset-zoom',
+          label: 'Reset Zoom',
+          rightSection: <span className="shortcut">Ctrl+0</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:reset-zoom')
+        },
+        {
+          id: 'zoom-in',
+          label: 'Zoom In',
+          rightSection: <span className="shortcut">Ctrl++</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:zoom-in')
+        },
+        {
+          id: 'zoom-out',
+          label: 'Zoom Out',
+          rightSection: <span className="shortcut">Ctrl+-</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:zoom-out')
+        },
+        { type: 'divider', id: 'view-div-2' },
+        {
+          id: 'toggle-fullscreen',
+          label: 'Full Screen',
+          rightSection: <span className="shortcut">F11</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:toggle-fullscreen')
+        }
+      ]
+    },
+    {
+      id: 'help',
+      label: 'Help',
+      submenu: [
+        {
+          id: 'about',
+          label: 'About Bruno',
+          onClick: () => ipcRenderer?.invoke('renderer:open-about')
+        },
+        {
+          id: 'documentation',
+          label: 'Documentation',
+          onClick: () => ipcRenderer?.invoke('renderer:open-docs')
+        }
+      ]
+    }
+  ];
+
+  return (
+    <StyledWrapper>
+      <MenuDropdown
+        opened={isOpen}
+        onChange={setIsOpen}
+        placement="bottom-start"
+        showTickMark={false}
+        items={menuItems}
+      >
+        <ActionIcon label="Menu" size="lg">
+          <IconMenu2 size={16} stroke={1.5} />
+        </ActionIcon>
+      </MenuDropdown>
+    </StyledWrapper>
+  );
+};
+
+export default AppMenu;

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

@@ -0,0 +1,255 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  height: 36px;
+  display: flex;
+  align-items: center;
+  background: ${(props) => props.theme.sidebar.bg};
+  -webkit-app-region: drag;
+  user-select: none;
+
+  .titlebar-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    padding: 0 12px;
+    padding-left: 70px; /* Space for macOS window controls */
+    transition: padding-left 0.15s ease;
+  }
+
+  /* When in full screen, no traffic lights so reduce padding */
+  &.fullscreen .titlebar-content {
+    padding-left: 6px;
+  }
+
+  /* Remove drag region from interactive elements */
+  .workspace-name-container,
+  .dropdown-item,
+  .home-button,
+  .dropdown,
+  button {
+    -webkit-app-region: no-drag;
+  }
+
+  /* Left section */
+  .titlebar-left {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: 10px;
+    -webkit-app-region: no-drag;
+  }
+
+  /* When in full screen, no traffic lights so remove margin-left */
+  &.fullscreen .titlebar-left {
+    margin-left: 0px;
+  }
+
+  /* Workspace Name Dropdown Trigger */
+  .workspace-name-container {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+    }
+
+    .workspace-name {
+      font-size: 13px;
+      font-weight: 500;
+      color: ${(props) => props.theme.sidebar.color};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 180px;
+    }
+
+    .chevron-icon {
+      flex-shrink: 0;
+      color: ${(props) => props.theme.sidebar.muted};
+      transition: transform 0.2s ease;
+    }
+  }
+
+  /* Center section - Bruno branding */
+  .titlebar-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    pointer-events: none;
+
+    .bruno-text {
+      font-size: 13px;
+      font-weight: 600;
+      color: ${(props) => props.theme.text};
+      letter-spacing: 0.5px;
+    }
+  }
+
+  /* Right section */
+  .titlebar-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    -webkit-app-region: no-drag;
+  }
+
+  /* App action buttons container */
+  .titlebar-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  /* Workspace Dropdown Styles */
+  .workspace-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 10px !important;
+    margin: 0 !important;
+
+    &.active {
+      .check-icon {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .pin-btn:not(.pinned) {
+        opacity: 1;
+      }
+    }
+
+    .workspace-name {
+      flex: 1;
+      min-width: 0;
+      font-size: 13px;
+      font-weight: 400;
+      color: ${(props) => props.theme.dropdown.color};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .workspace-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-left: 8px;
+      flex-shrink: 0;
+      pointer-events: none;
+
+      > * {
+        pointer-events: auto;
+      }
+    }
+
+    .check-icon {
+      color: ${(props) => props.theme.workspace?.accent || props.theme.colors?.text?.yellow};
+      flex-shrink: 0;
+    }
+
+    .pin-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      border-radius: 4px;
+      cursor: pointer;
+      color: ${(props) => props.theme.dropdown.mutedText};
+      transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+      opacity: 0;
+
+      &.pinned {
+        opacity: 1;
+      }
+
+      &:hover {
+        background: ${(props) => props.theme.dropdown.hoverBg};
+        color: ${(props) => props.theme.dropdown.mutedText};
+      }
+    }
+  }
+
+  /* Adjust for non-macOS platforms */
+  &:not(.os-mac) .titlebar-content {
+    padding-left: 12px;
+  }
+
+  /* Windows-specific styles */
+  &.os-windows .titlebar-content {
+    padding-right: 0px;
+    padding-left: 0px;
+  }
+
+  &.os-windows .titlebar-left {
+    margin-left: 6px;
+  }
+
+  &.os-linux .titlebar-content {
+    padding-right: 0px;
+    padding-left: 0px;
+  }
+
+  &.os-linux .titlebar-left {
+    margin-left: 6px;
+  }
+
+  .app-menu {
+    margin-left: 8px;
+  }
+
+  /* Custom window control buttons for Windows - always interactive, above modal overlay */
+  .window-controls {
+    display: flex;
+    align-items: stretch;
+    height: 36px;
+    margin-left: 8px;
+    position: relative;
+    z-index: 1000;
+  }
+
+  .window-control-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 100%;
+    border: none;
+    background: transparent;
+    color: ${(props) => props.theme.text};
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+    -webkit-app-region: no-drag;
+
+    &:hover {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+    }
+
+    &:active {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+    }
+
+    &.close:hover {
+      background: #e81123;
+      color: white;
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,347 @@
+import React from 'react';
+import { IconCheck, IconChevronDown, IconFolder, IconHome, IconPin, IconPinned, IconPlus, IconDownload, IconSettings, IconMinus, IconSquare, IconX, IconCopy } from '@tabler/icons';
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { savePreferences, showManageWorkspacePage, toggleSidebarCollapse } from 'providers/ReduxStore/slices/app';
+import { closeConsole, openConsole } from 'providers/ReduxStore/slices/logs';
+import { createWorkspaceWithUniqueName, openWorkspaceDialog, switchWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
+import { sortWorkspaces, toggleWorkspacePin } from 'utils/workspaces';
+import { focusTab } from 'providers/ReduxStore/slices/tabs';
+import get from 'lodash/get';
+
+import Bruno from 'components/Bruno';
+import MenuDropdown from 'ui/MenuDropdown';
+import ActionIcon from 'ui/ActionIcon';
+import IconSidebarToggle from 'components/Icons/IconSidebarToggle';
+import CreateWorkspace from 'components/WorkspaceSidebar/CreateWorkspace';
+import ImportWorkspace from 'components/WorkspaceSidebar/ImportWorkspace';
+
+import IconBottombarToggle from 'components/Icons/IconBottombarToggle/index';
+import AppMenu from './AppMenu';
+import StyledWrapper from './StyledWrapper';
+import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
+import { isMacOS, isWindowsOS, isLinuxOS } from 'utils/common/platform';
+import classNames from 'classnames';
+
+const getOsClass = () => {
+  if (isMacOS()) return 'os-mac';
+  if (isWindowsOS()) return 'os-windows';
+  if (isLinuxOS()) return 'os-linux';
+  return 'os-other';
+};
+
+// Helper to get display name for workspace
+export const getWorkspaceDisplayName = (name) => {
+  if (!name) return 'Untitled Workspace';
+  return name;
+};
+
+const AppTitleBar = () => {
+  const dispatch = useDispatch();
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isMaximized, setIsMaximized] = useState(false);
+  const osClass = getOsClass();
+  const isWindows = osClass === 'os-windows';
+  const isLinux = osClass === 'os-linux';
+  const showWindowControls = isWindows || isLinux;
+
+  // Listen for fullscreen changes
+  useEffect(() => {
+    const { ipcRenderer } = window;
+    if (!ipcRenderer) return;
+
+    const removeEnterFullScreenListener = ipcRenderer.on('main:enter-full-screen', () => {
+      setIsFullScreen(true);
+    });
+
+    const removeLeaveFullScreenListener = ipcRenderer.on('main:leave-full-screen', () => {
+      setIsFullScreen(false);
+    });
+
+    return () => {
+      removeEnterFullScreenListener();
+      removeLeaveFullScreenListener();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!showWindowControls) return;
+    const { ipcRenderer } = window;
+    if (!ipcRenderer) return;
+
+    ipcRenderer.invoke('renderer:window-is-maximized')
+      .then((maximized) => {
+        setIsMaximized(maximized);
+      })
+      .catch((error) => {
+        console.error('Error getting initial maximized state:', error);
+      });
+
+    const removeMaximizedListener = ipcRenderer.on('main:window-maximized', () => {
+      setIsMaximized(true);
+    });
+
+    const removeUnmaximizedListener = ipcRenderer.on('main:window-unmaximized', () => {
+      setIsMaximized(false);
+    });
+
+    return () => {
+      removeMaximizedListener();
+      removeUnmaximizedListener();
+    };
+  }, [showWindowControls]);
+
+  const handleMinimize = useCallback(() => {
+    window.ipcRenderer?.send('renderer:window-minimize');
+  }, []);
+
+  const handleMaximize = useCallback(() => {
+    window.ipcRenderer?.send('renderer:window-maximize');
+    // State will be updated via IPC events from main process (main:window-maximized/main:window-unmaximized)
+  }, []);
+
+  const handleClose = useCallback(() => {
+    window.ipcRenderer?.send('renderer:window-close');
+  }, []);
+
+  // Get workspace info
+  const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
+  const preferences = useSelector((state) => state.app.preferences);
+  const sidebarCollapsed = useSelector((state) => state.app.sidebarCollapsed);
+  const isConsoleOpen = useSelector((state) => state.logs.isConsoleOpen);
+  const activeWorkspace = workspaces.find((w) => w.uid === activeWorkspaceUid);
+
+  // Sort workspaces according to preferences
+  const sortedWorkspaces = useMemo(() => {
+    return sortWorkspaces(workspaces, preferences);
+  }, [workspaces, preferences]);
+
+  const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);
+  const [importWorkspaceModalOpen, setImportWorkspaceModalOpen] = useState(false);
+
+  const WorkspaceName = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="workspace-name-container" {...props}>
+        <span data-testid="workspace-name" className={classNames('workspace-name', { 'italic text-muted': !activeWorkspace?.name })}>{getWorkspaceDisplayName(activeWorkspace?.name)}</span>
+        <IconChevronDown size={14} stroke={1.5} className="chevron-icon" />
+      </div>
+    );
+  });
+
+  const handleHomeClick = () => {
+    const scratchCollectionUid = activeWorkspace?.scratchCollectionUid;
+    if (scratchCollectionUid) {
+      dispatch(focusTab({ uid: `${scratchCollectionUid}-overview` }));
+    }
+  };
+
+  const handleWorkspaceSwitch = (workspaceUid) => {
+    dispatch(switchWorkspace(workspaceUid));
+    toast.success(`Switched to ${getWorkspaceDisplayName(workspaces.find((w) => w.uid === workspaceUid)?.name)}`);
+  };
+
+  const handleOpenWorkspace = async () => {
+    try {
+      await dispatch(openWorkspaceDialog());
+      toast.success('Workspace opened successfully');
+    } catch (error) {
+      toast.error(error.message || 'Failed to open workspace');
+    }
+  };
+
+  const handleCreateWorkspace = useCallback(async () => {
+    const defaultLocation = get(preferences, 'general.defaultLocation', '');
+    if (!defaultLocation) {
+      setCreateWorkspaceModalOpen(true);
+      return;
+    }
+
+    try {
+      await dispatch(createWorkspaceWithUniqueName(defaultLocation));
+    } catch (error) {
+      toast.error(error?.message || 'Failed to create workspace');
+    }
+  }, [preferences, dispatch]);
+
+  const handleManageWorkspaces = () => {
+    dispatch(showManageWorkspacePage());
+  };
+
+  const handleImportWorkspace = () => {
+    setImportWorkspaceModalOpen(true);
+  };
+
+  const handlePinWorkspace = useCallback((workspaceUid, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newPreferences = toggleWorkspacePin(workspaceUid, preferences);
+    dispatch(savePreferences(newPreferences));
+  }, [dispatch, preferences]);
+
+  const handleToggleSidebar = () => {
+    dispatch(toggleSidebarCollapse());
+  };
+
+  const handleToggleDevtools = () => {
+    if (isConsoleOpen) {
+      dispatch(closeConsole());
+    } else {
+      dispatch(openConsole());
+    }
+  };
+
+  // Build workspace menu items
+  const workspaceMenuItems = useMemo(() => {
+    const items = sortedWorkspaces.map((workspace) => {
+      const isActive = workspace.uid === activeWorkspaceUid;
+      const isPinned = preferences?.workspaces?.pinnedWorkspaceUids?.includes(workspace.uid);
+
+      return {
+        id: workspace.uid,
+        label: getWorkspaceDisplayName(workspace.name),
+        onClick: () => handleWorkspaceSwitch(workspace.uid),
+        className: `workspace-item ${isActive ? 'active' : ''}`,
+        rightSection: (
+          <div className="workspace-actions">
+            {workspace.type !== 'default' && (
+              <ActionIcon
+                className={`pin-btn ${isPinned ? 'pinned' : ''}`}
+                onClick={(e) => handlePinWorkspace(workspace.uid, e)}
+                label={isPinned ? 'Unpin workspace' : 'Pin workspace'}
+                size="sm"
+              >
+                {isPinned ? <IconPinned size={14} stroke={1.5} /> : <IconPin size={14} stroke={1.5} />}
+              </ActionIcon>
+            )}
+            {isActive && <IconCheck size={16} stroke={1.5} className="check-icon" />}
+          </div>
+        )
+      };
+    });
+
+    // Add label and action items
+    items.push(
+      { type: 'label', label: 'Workspaces' },
+      {
+        id: 'create-workspace',
+        leftSection: IconPlus,
+        label: 'Create workspace',
+        onClick: handleCreateWorkspace
+      },
+      {
+        id: 'open-workspace',
+        leftSection: IconFolder,
+        label: 'Open workspace',
+        onClick: handleOpenWorkspace
+      },
+      {
+        id: 'import-workspace',
+        leftSection: IconDownload,
+        label: 'Import workspace',
+        onClick: handleImportWorkspace
+      },
+      {
+        id: 'manage-workspaces',
+        leftSection: IconSettings,
+        label: 'Manage workspaces',
+        onClick: handleManageWorkspaces
+      }
+    );
+
+    return items;
+  }, [sortedWorkspaces, activeWorkspaceUid, preferences, handlePinWorkspace, handleCreateWorkspace]);
+
+  return (
+    <StyledWrapper className={`app-titlebar ${osClass} ${isFullScreen ? 'fullscreen' : ''}`}>
+      {createWorkspaceModalOpen && (
+        <CreateWorkspace onClose={() => setCreateWorkspaceModalOpen(false)} />
+      )}
+      {importWorkspaceModalOpen && (
+        <ImportWorkspace onClose={() => setImportWorkspaceModalOpen(false)} />
+      )}
+
+      <div className="titlebar-content">
+        <div className="titlebar-left">
+          {showWindowControls && <AppMenu />}
+
+          <ActionIcon onClick={handleHomeClick} label="Home" size="lg" className="home-button">
+            <IconHome size={16} stroke={1.5} />
+          </ActionIcon>
+
+          {/* Workspace Dropdown */}
+          <MenuDropdown
+            data-testid="workspace-menu"
+            items={workspaceMenuItems}
+            placement="bottom-start"
+            selectedItemId={activeWorkspaceUid}
+          >
+            <WorkspaceName />
+          </MenuDropdown>
+        </div>
+
+        {/* Center section: Bruno logo + text */}
+        <div className="titlebar-center">
+          <Bruno width={18} />
+          <span className="bruno-text">Bruno</span>
+        </div>
+
+        {/* Right section: Action buttons */}
+        <div className="titlebar-right">
+          <div className="titlebar-actions">
+            {/* Toggle sidebar */}
+            <ActionIcon
+              onClick={handleToggleSidebar}
+              label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+              size="lg"
+              data-testid="toggle-sidebar-button"
+            >
+              <IconSidebarToggle collapsed={sidebarCollapsed} size={16} strokeWidth={1.5} />
+            </ActionIcon>
+
+            {/* Toggle devtools */}
+            <ActionIcon
+              onClick={handleToggleDevtools}
+              label={isConsoleOpen ? 'Hide devtools' : 'Show devtools'}
+              size="lg"
+              data-testid="toggle-devtools-button"
+            >
+              <IconBottombarToggle collapsed={!isConsoleOpen} size={16} strokeWidth={1.5} />
+            </ActionIcon>
+
+            <ResponseLayoutToggle />
+          </div>
+
+          {showWindowControls && (
+            <div className="window-controls">
+              <button
+                className="window-control-btn minimize"
+                onClick={handleMinimize}
+                aria-label="Minimize"
+              >
+                <IconMinus size={16} stroke={1} />
+              </button>
+              <button
+                className="window-control-btn maximize"
+                onClick={handleMaximize}
+                aria-label={isMaximized ? 'Restore' : 'Maximize'}
+              >
+                {isMaximized ? <IconCopy size={14} stroke={1} /> : <IconSquare size={14} stroke={1} />}
+              </button>
+              <button
+                className="window-control-btn close"
+                onClick={handleClose}
+                aria-label="Close"
+              >
+                <IconX size={16} stroke={1} />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default AppTitleBar;

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

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  font-size: ${(props) => props.theme.font.size.base};
+
+  .body-mode-selector {
+    background: transparent;
+    border-radius: 3px;
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+      padding-left: 1.5rem !important;
+      display: flex;
+      align-items: center;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .selected-body-mode {
+      color: ${(props) => props.theme.primary.text};
+    }
+
+    .dropdown-icon {
+      display: flex;
+      align-items: center;
+      margin-right: 0.5rem;
+    }
+  }
+
+  .caret {
+    color: ${(props) => props.theme.colors.text.muted};
+    fill: ${(props) => props.theme.colors.text.muted};
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { IconCaretDown, IconForms, IconBraces, IconCode, IconFileText, IconDatabase, IconFile, IconX } from '@tabler/icons';
+import MenuDropdown from 'ui/MenuDropdown';
+import { humanizeRequestBodyMode } from 'utils/collections';
+import StyledWrapper from './StyledWrapper';
+
+const DEFAULT_MODES = [
+  {
+    name: 'Form',
+    options: [
+      { id: 'multipartForm', label: 'Multipart Form', leftSection: IconForms },
+      { id: 'formUrlEncoded', label: 'Form URL Encoded', leftSection: IconForms }
+    ]
+  },
+  {
+    name: 'Raw',
+    options: [
+      { id: 'json', label: 'JSON', leftSection: IconBraces },
+      { id: 'xml', label: 'XML', leftSection: IconCode },
+      { id: 'text', label: 'TEXT', leftSection: IconFileText },
+      { id: 'sparql', label: 'SPARQL', leftSection: IconDatabase }
+    ]
+  },
+  {
+    name: 'Other',
+    options: [
+      { id: 'file', label: 'File / Binary', leftSection: IconFile },
+      { id: 'none', label: 'No Body', leftSection: IconX }
+    ]
+  }
+];
+
+const BodyModeSelector = ({
+  currentMode,
+  onModeChange,
+  modes = DEFAULT_MODES,
+  disabled = false,
+  className = '',
+  wrapperClassName = '',
+  placement = 'bottom-end'
+}) => {
+  // Add onClick handlers to mode options
+  const menuItems = useMemo(() => {
+    return modes.map((group) => ({
+      ...group,
+      options: group.options.map((option) => ({
+        ...option,
+        onClick: () => onModeChange(option.id)
+      }))
+    }));
+  }, [modes, onModeChange]);
+
+  return (
+    <StyledWrapper className={wrapperClassName}>
+      <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'}`}>
+        <MenuDropdown
+          items={menuItems}
+          placement={placement}
+          disabled={disabled}
+          className={className}
+          selectedItemId={currentMode}
+          showGroupDividers={false}
+          groupStyle="select"
+        >
+          <div className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
+            {humanizeRequestBodyMode(currentMode)}
+            {' '}
+            <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
+          </div>
+        </MenuDropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default BodyModeSelector;

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

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

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

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import get from 'lodash/get';
 import CodeEditor from 'components/CodeEditor';
 import { useTheme } from 'providers/Theme';
 import { useSelector } from 'react-redux';
@@ -21,7 +22,8 @@ const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
         <CodeEditor
           mode="text/plain"
           theme={displayedTheme}
-          font={preferences.codeFont || 'default'}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
           value={parsedParams}
           onEdit={handleEdit}
           onSave={onSave}

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

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

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

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

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

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

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

@@ -5,16 +5,18 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import { setupAutoComplete } from 'utils/codemirror/autocomplete';
+import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
-import CodeMirrorSearch from 'components/CodeMirrorSearch';
+import { setupLinkAware } from 'utils/codemirror/linkAware';
+import { setupLintErrorTooltip } from 'utils/codemirror/lint-errors';
+import CodeMirrorSearch from 'components/CodeMirrorSearch/index';
 
 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -32,11 +34,13 @@ export default class CodeEditor extends React.Component {
     this.cachedValue = props.value || '';
     this.variables = {};
     this.searchResultsCountElementId = 'search-results-count';
+    this.searchBarRef = createRef();
 
     this.lintOptions = {
       esversion: 11,
       expr: true,
-      asi: true
+      asi: true,
+      highlightLines: true
     };
 
     this.state = {
@@ -49,19 +53,22 @@ export default class CodeEditor extends React.Component {
 
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
+      placeholder: '...',
       lineNumbers: true,
       lineWrapping: this.props.enableLineWrapping ?? true,
       tabSize: TAB_SIZE,
       mode: this.props.mode || 'application/ld+json',
-      brunoVarInfo: {
-        variables
-      },
+      brunoVarInfo: this.props.enableBrunoVarInfo !== false ? {
+        variables,
+        collection: this.props.collection,
+        item: this.props.item
+      } : false,
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
       showCursorWhenSelecting: true,
       foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
       lint: this.lintOptions,
       readOnly: this.props.readOnly,
       scrollbarStyle: 'overlay',
@@ -88,25 +95,29 @@ export default class CodeEditor extends React.Component {
           }
         },
         'Cmd-F': (cm) => {
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
-          }
+          this.setState({ searchBarVisible: true }, () => {
+            this.searchBarRef.current?.focus();
+          });
         },
         'Ctrl-F': (cm) => {
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
-          }
+          this.setState({ searchBarVisible: true }, () => {
+            this.searchBarRef.current?.focus();
+          });
         },
         'Cmd-H': 'replace',
         'Ctrl-H': 'replace',
-        Tab: function (cm) {
+        'Tab': function (cm) {
           cm.getSelection().includes('\n') || editor.getLine(cm.getCursor().line) == cm.getSelection()
             ? cm.execCommand('indentMore')
             : cm.replaceSelection('  ', 'end');
         },
         'Shift-Tab': 'indentLess',
-        'Ctrl-Space': 'autocomplete',
-        'Cmd-Space': 'autocomplete',
+        'Ctrl-Space': (cm) => {
+          showRootHints(cm, this.props.showHintsFor);
+        },
+        'Cmd-Space': (cm) => {
+          showRootHints(cm, this.props.showHintsFor);
+        },
         'Ctrl-Y': 'foldAll',
         'Cmd-Y': 'foldAll',
         'Ctrl-I': 'unfoldAll',
@@ -145,7 +156,7 @@ export default class CodeEditor extends React.Component {
           } else if (this.props.mode == 'application/xml') {
             var doc = new DOMParser();
             try {
-              //add header element and remove prefix namespaces for DOMParser
+              // add header element and remove prefix namespaces for DOMParser
               var dcm = doc.parseFromString(
                 '<a> ' + internal.replace(/(?<=\<|<\/)\w+:/g, '') + '</a>',
                 'application/xml'
@@ -182,16 +193,15 @@ export default class CodeEditor extends React.Component {
       }
       return found;
     });
-    
+
     if (editor) {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
-      editor.on('scroll', this.onScroll);
       editor.scrollTo(null, this.props.initialScroll);
       this.addOverlay();
 
       const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
-      
+
       // Setup AutoComplete Helper for all modes
       const autoCompleteOptions = {
         showHintsFor: this.props.showHintsFor,
@@ -202,6 +212,11 @@ export default class CodeEditor extends React.Component {
         editor,
         autoCompleteOptions
       );
+
+      setupLinkAware(editor);
+
+      // Setup lint error tooltip on line number hover
+      this.cleanupLintErrorTooltip = setupLintErrorTooltip(editor);
     }
   }
 
@@ -218,8 +233,18 @@ export default class CodeEditor extends React.Component {
       CodeMirror.signal(this.editor, 'change', this.editor);
     }
     if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
-      this.cachedValue = this.props.value;
-      this.editor.setValue(this.props.value);
+      // TODO: temporary fix for keeping cursor state when auto save and new line insertion collide PR#7098
+      const nextValue = this.props.value ?? '';
+      const currentValue = this.editor.getValue();
+      // Skip updating only when focused and editable; read-only editors (e.g. response viewer) must always show new value
+      if (this.editor.hasFocus?.() && currentValue !== nextValue && !this.props.readOnly) {
+        this.cachedValue = currentValue;
+      } else {
+        const cursor = this.editor.getCursor();
+        this.cachedValue = nextValue;
+        this.editor.setValue(nextValue);
+        this.editor.setCursor(cursor);
+      }
     }
 
     if (this.editor) {
@@ -227,6 +252,16 @@ export default class CodeEditor extends React.Component {
       if (!isEqual(variables, this.variables)) {
         this.addOverlay();
       }
+
+      // Update collection and item when they change
+      if (this.props.enableBrunoVarInfo !== false && this.editor.options.brunoVarInfo) {
+        if (!isEqual(this.props.collection, this.editor.options.brunoVarInfo.collection)) {
+          this.editor.options.brunoVarInfo.collection = this.props.collection;
+        }
+        if (!isEqual(this.props.item, this.editor.options.brunoVarInfo.item)) {
+          this.editor.options.brunoVarInfo.item = this.props.item;
+        }
+      }
     }
 
     if (this.props.theme !== prevProps.theme && this.editor) {
@@ -245,13 +280,28 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('mode', this.props.mode);
     }
 
+    if (this.props.readOnly !== prevProps.readOnly && this.editor) {
+      this.editor.setOption('readOnly', this.props.readOnly);
+    }
+
     this.ignoreChangeEvent = false;
   }
 
   componentWillUnmount() {
     if (this.editor) {
+      if (this.props.onScroll) {
+        this.props.onScroll(this.editor);
+      }
+
+      this.editor?._destroyLinkAware?.();
       this.editor.off('change', this._onEdit);
-      this.editor.off('scroll', this.onScroll);
+
+      // Clean up lint error tooltip
+      this.cleanupLintErrorTooltip?.();
+
+      const wrapper = this.editor.getWrapperElement();
+      wrapper?.parentNode?.removeChild(wrapper);
+
       this.editor = null;
     }
   }
@@ -262,12 +312,16 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className="h-full w-full flex flex-col relative graphiql-container"
+        className={`h-full w-full flex flex-col relative graphiql-container ${this.props.readOnly ? 'read-only' : ''}`}
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}
       >
         <CodeMirrorSearch
+          ref={(node) => {
+            if (!node) return;
+            this.searchBarRef.current = node;
+          }}
           visible={this.state.searchBarVisible}
           editor={this.editor}
           onClose={() => this.setState({ searchBarVisible: false })}
@@ -286,12 +340,15 @@ export default class CodeEditor extends React.Component {
     let variables = getAllVariables(this.props.collection, this.props.item);
     this.variables = variables;
 
+    // Update brunoVarInfo with latest variables
+    if (this.props.enableBrunoVarInfo !== false && this.editor.options.brunoVarInfo) {
+      this.editor.options.brunoVarInfo.variables = variables;
+    }
+
     defineCodeMirrorBrunoVariablesMode(variables, mode, false, this.props.enableVariableHighlighting);
     this.editor.setOption('mode', 'brunovariables');
   };
 
-  onScroll = (event) => this.props.onScroll?.(event);
-
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);

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

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

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   .bruno-search-bar {
@@ -9,15 +10,15 @@ const StyledWrapper = styled.div`
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
-    padding: 0 2px;
-    min-height: 36px;
-    background: ${(props) => props.theme.sidebar.search.bg} !important;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.sidebar.search.bg} !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    gap: 0;
+    padding: 1px 3px;
     width: auto;
-    min-width: 180px;
     max-width: 320px;
+    min-height: 22px;
+    background: ${(props) => props.theme.background.base};
+    color: ${(props) => props.theme.text.base};
+    border: solid 1px ${(props) => props.theme.border.border2};
+    border-radius: ${(props) => props.theme.border.radius.sm};
   }
 
   .bruno-search-bar input {
@@ -27,7 +28,7 @@ const StyledWrapper = styled.div`
     border: none;
     outline: none;
     padding: 1px 2px;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     margin: 0 1px;
     height: 28px;
   }
@@ -38,7 +39,7 @@ const StyledWrapper = styled.div`
     padding: 0 1px;
     margin: 0 1px;
     cursor: pointer;
-    color: #aaa;
+    color: ${(props) => props.theme.colors.text.subtext1};
     border-radius: 3px;
     height: 18px;
     width: 18px;
@@ -50,31 +51,18 @@ const StyledWrapper = styled.div`
   .searchbar-result-count {
     min-width: 28px;
     text-align: center;
-    font-size: 11px;
-    color: #aaa;
+    font-size: ${(props) => props.theme.font.size.xs};
+    color: ${(props) => props.theme.colors.text.subtext1};
     margin: 0 8px 0 1px; 
     white-space: nowrap;
   }
 
-  .bruno-search-bar.compact {
-    background: ${(props) => props.theme.codemirror.bg};
-    color: ${(props) => props.theme.codemirror.text || props.theme.text};
-    border: none;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    border-radius: 4px;
-    padding: 1px 3px;
-    min-height: 22px;
-    display: flex;
-    align-items: center;
-    gap: 0;
-  }
-
   .bruno-search-bar input {
     background: transparent;
-    color: inherit;
+    color: ${(props) => props.theme.colors.text.subtext2};
     border: none;
     outline: none;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     padding: 1px 2px;
     min-width: 80px;
   }
@@ -92,7 +80,9 @@ const StyledWrapper = styled.div`
   }
 
   .searchbar-icon-btn.active {
-    color: #f39c12 !important;
+    color: ${(props) => props.theme.brand};
+    background-color: ${(props) => rgba(props.theme.brand, 0.1)};
+    font-weight: 500;
   }
 `;
 

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
 import { IconRegex, IconArrowUp, IconArrowDown, IconX, IconLetterCase, IconLetterW } from '@tabler/icons';
 import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';
@@ -8,7 +8,45 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');
 }
 
-const CodeMirrorSearch = ({ visible, editor, onClose }) => {
+const MAX_MATCHES = 99_999;
+function findSearchMatches(editor, searchText, regex, caseSensitive, wholeWord) {
+  try {
+    let query, options = {};
+    if (regex) {
+      try {
+        query = new RegExp(searchText, caseSensitive ? 'g' : 'gi');
+      } catch (error) {
+        console.warn('Invalid regex provided in search!', error);
+        return [];
+      }
+    } else if (wholeWord) {
+      const escaped = escapeRegExp(searchText);
+      query = new RegExp(`\\b${escaped}\\b`, caseSensitive ? 'g' : 'gi');
+    } else {
+      query = searchText;
+      options = { caseFold: !caseSensitive };
+    }
+
+    const cursor = editor.getSearchCursor(query, { line: 0, ch: 0 }, options);
+    const out = [];
+    while (cursor.findNext()) {
+      out.push({ from: cursor.from(), to: cursor.to() });
+      if (out.length >= MAX_MATCHES) {
+        break;
+      }
+    }
+    return out;
+  } catch (e) {
+    console.error('Search error:', e);
+    return [];
+  }
+}
+
+function createCacheKey(editor, searchText, regex, caseSensitive, wholeWord) {
+  return `${editor.getValue().length}⇴${searchText}⇴${regex}⇴${caseSensitive}⇴${wholeWord}`;
+}
+
+const CodeMirrorSearch = forwardRef(({ visible, editor, onClose }, ref) => {
   const [searchText, setSearchText] = useState('');
   const [regex, setRegex] = useState(false);
   const [caseSensitive, setCaseSensitive] = useState(false);
@@ -19,48 +57,15 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
   const searchMarks = useRef([]);
   const searchLineHighlight = useRef(null);
   const searchMatches = useRef([]);
+  const searchCacheKey = useRef('');
+  const inputRef = useRef(null);
 
-  const debouncedSearchText = useDebounce(searchText, 150);
-
-  const memoizedMatches = useMemo(() => {
-    if (!editor || !visible) return [];
-    if (!debouncedSearchText) return [];
-
-    try {
-      let query, options = {};
-      if (regex) {
-        try {
-          query = new RegExp(debouncedSearchText, caseSensitive ? 'g' : 'gi');
-        } catch {
-          return [];
-        }
-      } else if (wholeWord) {
-        const escaped = escapeRegExp(debouncedSearchText);
-        query = new RegExp(`\\b${escaped}\\b`, caseSensitive ? 'g' : 'gi');
-      } else {
-        query = debouncedSearchText;
-        options = { caseFold: !caseSensitive };
-      }
-
-      const cursor = editor.getSearchCursor(query, { line: 0, ch: 0 }, options);
-      const out = [];
-      while (cursor.findNext()) {
-        out.push({ from: cursor.from(), to: cursor.to() });
-      }
-      return out;
-    } catch (e) {
-      console.error('Search error:', e);
-      return [];
-    }
-  }, [editor, visible, debouncedSearchText, regex, caseSensitive, wholeWord]);
-
+  const debouncedSearchText = useDebounce(searchText, 250);
   const doSearch = useCallback((newIndex = 0) => {
-    if (!editor) return;
+    if (!editor || !visible) {
+      return;
+    }
 
-    // Clear previous marks
-    searchMarks.current.forEach((mark) => mark.clear());
-    searchMarks.current = [];
-    // Clear previous line highlight
     if (searchLineHighlight.current !== null) {
       editor.removeLineClass(searchLineHighlight.current, 'wrap', 'cm-search-line-highlight');
       searchLineHighlight.current = null;
@@ -70,44 +75,100 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
       setMatchCount(0);
       setMatchIndex(0);
       searchMatches.current = [];
+      searchMarks.current.forEach((mark) => mark.clear());
+      searchMarks.current = [];
       return;
     }
 
     try {
-      const matches = memoizedMatches;
-      let matchIndex = matches.length ? Math.max(0, Math.min(newIndex, matches.length - 1)) : 0;
-      matches.forEach((m, i) => {
-        const mark = editor.markText(m.from, m.to, {
-          className: i === matchIndex ? 'cm-search-current' : 'cm-search-match',
-          clearOnEnter: true
-        });
-        searchMarks.current.push(mark);
-      });
+      const newCacheKey = createCacheKey(editor, debouncedSearchText, regex, caseSensitive, wholeWord);
+      const isCacheHit = newCacheKey === searchCacheKey.current;
 
-      if (matches.length) {
-        const currentLine = matches[matchIndex].from.line;
-        editor.addLineClass(currentLine, 'wrap', 'cm-search-line-highlight');
-        searchLineHighlight.current = currentLine;
-
-        editor.scrollIntoView(matches[matchIndex].from, 100);
-        editor.setSelection(matches[matchIndex].from, matches[matchIndex].to);
-      } else {
-        searchLineHighlight.current = null;
+      let matches = searchMatches.current;
+      if (!isCacheHit) {
+        matches = findSearchMatches(editor, debouncedSearchText, regex, caseSensitive, wholeWord);
+        searchMatches.current = matches;
+        searchCacheKey.current = newCacheKey;
+        setMatchCount(matches.length);
       }
 
-      setMatchCount(matches.length);
+      if (!matches.length) {
+        setMatchIndex(0);
+        // Clear previous marks
+        searchMarks.current.forEach((mark) => mark.clear());
+        searchMarks.current = [];
+        return;
+      }
+
+      const matchIndex = Math.max(0, Math.min(newIndex, matches.length - 1));
       setMatchIndex(matchIndex);
-      searchMatches.current = matches;
+
+      if (isCacheHit) {
+        // Clear only old current mark
+        const oldIndex = searchMarks.current.findIndex((mark) => mark.className?.includes('cm-search-current'));
+
+        if (oldIndex !== -1) {
+          searchMarks.current[oldIndex].clear();
+          searchMarks.current.splice(oldIndex, 1);
+        }
+
+        // Add mark to the new current and remark the previous and next
+        const toMark = [
+          // Previous
+          matchIndex > 0 ? matchIndex - 1 : null,
+          // Current
+          matchIndex,
+          // Next
+          matchIndex < matches.length - 1 ? matchIndex + 1 : null
+        ].filter((i) => i !== null);
+
+        toMark.forEach((i) => {
+          const mark = editor.markText(matches[i].from, matches[i].to, {
+            className: i === matchIndex ? 'cm-search-current' : 'cm-search-match',
+            clearOnEnter: true
+          });
+          searchMarks.current.push(mark);
+        });
+      } else {
+        // Clear previous marks
+        searchMarks.current.forEach((mark) => mark.clear());
+        searchMarks.current = [];
+
+        // Mark all on new search
+        matches.forEach((m, i) => {
+          const mark = editor.markText(m.from, m.to, {
+            className: i === matchIndex ? 'cm-search-current' : 'cm-search-match',
+            clearOnEnter: true
+          });
+          searchMarks.current.push(mark);
+        });
+      }
+
+      const currentLine = matches[matchIndex].from.line;
+      editor.addLineClass(currentLine, 'wrap', 'cm-search-line-highlight');
+      searchLineHighlight.current = currentLine;
+
+      editor.scrollIntoView(matches[matchIndex].from, 100);
+      editor.setSelection(matches[matchIndex].from, matches[matchIndex].to);
     } catch (e) {
       console.error('Search error:', e);
       setMatchCount(0);
       setMatchIndex(0);
       searchMatches.current = [];
+      searchCacheKey.current = '';
     }
-  }, [debouncedSearchText, regex, caseSensitive, wholeWord, editor, memoizedMatches]);
+  }, [debouncedSearchText, regex, caseSensitive, wholeWord, editor, visible]);
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }
+  }));
 
   useEffect(() => {
-    doSearch(0, debouncedSearchText);
+    doSearch(0);
   }, [debouncedSearchText, doSearch]);
 
   const handleSearchBarClose = useCallback(() => {
@@ -118,6 +179,7 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
       searchLineHighlight.current = null;
     }
     searchMatches.current = [];
+    searchCacheKey.current = '';
     if (onClose) onClose();
     // Focus the editor after closing the search bar
     if (editor) {
@@ -133,32 +195,27 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
   const handleToggleRegex = () => {
     setRegex((prev) => !prev);
     setMatchIndex(0);
-    doSearch(0);
   };
 
   const handleToggleCase = () => {
     setCaseSensitive((prev) => !prev);
     setMatchIndex(0);
-    doSearch(0);
   };
 
   const handleToggleWholeWord = () => {
     setWholeWord((prev) => !prev);
     setMatchIndex(0);
-    doSearch(0);
   };
 
   const handleNext = () => {
     if (!searchMatches.current || !searchMatches.current.length) return;
-    let next = (matchIndex + 1) % searchMatches.current.length;
-    setMatchIndex(next);
+    const next = (matchIndex + 1) % searchMatches.current.length;
     doSearch(next);
   };
 
   const handlePrev = () => {
     if (!searchMatches.current || !searchMatches.current.length) return;
-    let prev = (matchIndex - 1 + searchMatches.current.length) % searchMatches.current.length;
-    setMatchIndex(prev);
+    const prev = (matchIndex - 1 + searchMatches.current.length) % searchMatches.current.length;
     doSearch(prev);
   };
 
@@ -166,8 +223,9 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
 
   return (
     <StyledWrapper>
-      <div className="bruno-search-bar compact">
+      <div className="bruno-search-bar">
         <input
+          ref={inputRef}
           autoFocus
           type="text"
           value={searchText}
@@ -196,6 +254,6 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
       </div>
     </StyledWrapper>
   );
-};
+});
 
 export default CodeMirrorSearch;

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

@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
@@ -13,7 +14,8 @@ const Wrapper = styled.div`
   }
 
   .auth-placement-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
@@ -37,7 +39,6 @@ const Wrapper = styled.div`
 
     .auth-type-label {
       width: fit-content;
-      color: ${(props) => props.theme.colors.text.yellow};
       justify-content: space-between;
       padding: 0 0.5rem;
     }

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

@@ -6,7 +6,7 @@ import Dropdown from 'components/Dropdown';
 import { useTheme } from 'providers/Theme';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { humanizeRequestAPIKeyPlacement } from 'utils/collections';
 
@@ -16,9 +16,9 @@ const ApiKeyAuth = ({ collection }) => {
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const apikeyAuth = get(collection, 'root.request.auth.apikey', {});
+  const apikeyAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.apikey', {}) : get(collection, 'root.request.auth.apikey', {});
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const Icon = forwardRef((props, ref) => {
     return (
@@ -43,43 +43,45 @@ const ApiKeyAuth = ({ collection }) => {
   };
 
   useEffect(() => {
-    !apikeyAuth?.placement &&
-      dispatch(
-        updateCollectionAuth({
-          mode: 'apikey',
-          collectionUid: collection.uid,
-          content: {
-            placement: 'header'
-          }
-        })
-      );
+    !apikeyAuth?.placement
+    && dispatch(
+      updateCollectionAuth({
+        mode: 'apikey',
+        collectionUid: collection.uid,
+        content: {
+          placement: 'header'
+        }
+      })
+    );
   }, [apikeyAuth]);
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Key</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Key</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={apikeyAuth.key || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAuthChange('key', val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Value</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Value</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={apikeyAuth.value || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAuthChange('value', val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Add To</label>
+      <label className="block mb-1">Add To</label>
       <div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           <div

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

@@ -1,27 +1,19 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
 
   .auth-mode-selector {
     background: transparent;
 
     .auth-mode-label {
-      color: ${(props) => props.theme.colors.text.yellow};
-    }
+      color: ${(props) => props.theme.primary.text};
 
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
+      .caret {
+        color: rgb(140, 140, 140);
+        fill: rgb(140, 140, 140);
+      }
     }
-
-    .label-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-  }
-
-  .caret {
-    color: rgb(140, 140, 140);
-    fill: rgb(140 140 140);
   }
 `;
 

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

@@ -1,7 +1,7 @@
-import React, { useRef, forwardRef } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
+import MenuDropdown from 'ui/MenuDropdown';
 import { useDispatch } from 'react-redux';
 import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,113 +9,77 @@ import StyledWrapper from './StyledWrapper';
 
 const AuthMode = ({ collection }) => {
   const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = get(collection, 'root.request.auth.mode');
+  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
 
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
-        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const onModeChange = (value) => {
+  const onModeChange = useCallback((value) => {
     dispatch(
       updateCollectionAuthMode({
         collectionUid: collection.uid,
         mode: value
       })
     );
-  };
+  }, [dispatch, collection.uid]);
+
+  const menuItems = useMemo(() => [
+    {
+      id: 'awsv4',
+      label: 'AWS Sig v4',
+      onClick: () => onModeChange('awsv4')
+    },
+    {
+      id: 'basic',
+      label: 'Basic Auth',
+      onClick: () => onModeChange('basic')
+    },
+    {
+      id: 'wsse',
+      label: 'WSSE Auth',
+      onClick: () => onModeChange('wsse')
+    },
+    {
+      id: 'bearer',
+      label: 'Bearer Token',
+      onClick: () => onModeChange('bearer')
+    },
+    {
+      id: 'digest',
+      label: 'Digest Auth',
+      onClick: () => onModeChange('digest')
+    },
+    {
+      id: 'ntlm',
+      label: 'NTLM Auth',
+      onClick: () => onModeChange('ntlm')
+    },
+    {
+      id: 'oauth2',
+      label: 'OAuth 2.0',
+      onClick: () => onModeChange('oauth2')
+    },
+    {
+      id: 'apikey',
+      label: 'API Key',
+      onClick: () => onModeChange('apikey')
+    },
+    {
+      id: 'none',
+      label: 'No Auth',
+      onClick: () => onModeChange('none')
+    }
+  ], [onModeChange]);
 
   return (
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('awsv4');
-            }}
-          >
-            AWS Sig v4
+        <MenuDropdown
+          items={menuItems}
+          placement="bottom-end"
+          selectedItemId={authMode}
+        >
+          <div className="flex items-center justify-center auth-mode-label select-none">
+            {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
           </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('basic');
-            }}
-          >
-            Basic Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('wsse');
-            }}
-          >
-            WSSE Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('bearer');
-            }}
-          >
-            Bearer Token
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('digest');
-            }}
-          >
-            Digest Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('ntlm');
-            }}
-          >
-            NTLM Auth
-          </div>          
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('oauth2');
-            }}
-          >
-            OAuth 2.0
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('apikey');
-            }}
-          >
-            API Key
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Auth
-          </div>
-        </Dropdown>
+        </MenuDropdown>
       </div>
     </StyledWrapper>
   );

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

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

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const AwsV4Auth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
+  const awsv4Auth = collection.draft?.root ? get(collection, 'draft.root.request.auth.awsv4', {}) : get(collection, 'root.request.auth.awsv4', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleAccessKeyIdChange = (accessKeyId) => {
     dispatch(
@@ -123,19 +123,20 @@ const AwsV4Auth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Access Key ID</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.accessKeyId || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAccessKeyIdChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2 flex items-center">
+      <label className="block mb-1">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-3 flex items-center">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -143,51 +144,56 @@ const AwsV4Auth = ({ collection }) => {
           onChange={(val) => handleSecretAccessKeyChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block font-medium mb-2">Session Token</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Session Token</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.sessionToken || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleSessionTokenChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Service</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Service</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.service || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleServiceChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Region</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Region</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.region || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleRegionChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Profile Name</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Profile Name</label>
+      <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={awsv4Auth.profileName || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleProfileNameChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
     </StyledWrapper>

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

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

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BasicAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const basicAuth = get(collection, 'root.request.auth.basic', {});
+  const basicAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.basic', {}) : get(collection, 'root.request.auth.basic', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -47,18 +47,19 @@ const BasicAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={basicAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={basicAuth.password || ''}
@@ -67,6 +68,7 @@ const BasicAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
       </div>

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

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

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BearerAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
+  const bearerToken = collection.draft?.root ? get(collection, 'draft.root.request.auth.bearer.token', '') : get(collection, 'root.request.auth.bearer.token', '');
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(bearerToken);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleTokenChange = (token) => {
     dispatch(
@@ -33,7 +33,7 @@ const BearerAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Token</label>
+      <label className="block mb-1">Token</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={bearerToken}
@@ -42,6 +42,7 @@ const BearerAuth = ({ collection }) => {
           onChange={(val) => handleTokenChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
       </div>

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

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

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const DigestAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const digestAuth = get(collection, 'root.request.auth.digest', {});
+  const digestAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.digest', {}) : get(collection, 'root.request.auth.digest', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -47,18 +47,19 @@ const DigestAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={digestAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={digestAuth.password || ''}
@@ -67,6 +68,7 @@ const DigestAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
       </div>

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

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

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

@@ -6,25 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
-
-
-
-
 const NTLMAuth = ({ collection }) => {
-
-
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
+  const ntlmAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.ntlm', {}) : get(collection, 'root.request.auth.ntlm', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -67,26 +60,24 @@ const NTLMAuth = ({ collection }) => {
         }
       })
     );
-  };  
-
-
-
+  };
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={ntlmAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <label className="block mb-1">Password</label>
+      <div className="single-line-editor-wrapper mb-3 flex items-center">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -94,11 +85,12 @@ const NTLMAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block font-medium mb-2">Domain</label>
+      <label className="block mb-1">Domain</label>
       <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={ntlmAuth.domain || ''}
@@ -106,6 +98,7 @@ const NTLMAuth = ({ collection }) => {
           onSave={handleSave}
           onChange={(val) => handleDomainChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
     </StyledWrapper>

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

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

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

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

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

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

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

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const WsseAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const wsseAuth = get(collection, 'root.request.auth.wsse', {});
+  const wsseAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.wsse', {}) : get(collection, 'root.request.auth.wsse', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const handleUserChange = (username) => {
     dispatch(
@@ -47,18 +47,19 @@ const WsseAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={wsseAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUserChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={wsseAuth.password || ''}
@@ -67,6 +68,7 @@ const WsseAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="wsse-password" warningMessage={warningMessage} />}
       </div>

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

@@ -8,17 +8,17 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
 import ApiKeyAuth from './ApiKeyAuth/';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
 import NTLMAuth from './NTLMAuth';
-
+import Button from 'ui/Button';
 
 const Auth = ({ collection }) => {
-  const authMode = get(collection, 'root.request.auth.mode');
+  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
   const dispatch = useDispatch();
 
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   const getAuthView = () => {
     switch (authMode) {
@@ -36,7 +36,7 @@ const Auth = ({ collection }) => {
       }
       case 'ntlm': {
         return <NTLMAuth collection={collection} />;
-      }       
+      }
       case 'oauth2': {
         return <OAuth2 collection={collection} />;
       }
@@ -60,9 +60,9 @@ const Auth = ({ collection }) => {
       </div>
       {getAuthView()}
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

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

@@ -30,11 +30,11 @@ const StyledWrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
       outline: none !important;
     }
   }
@@ -48,32 +48,37 @@ const StyledWrapper = styled.div`
   }
 
   .protocol-https,
-  .protocol-grpcs {
+  .protocol-grpcs,
+  .protocol-wss {
     position: absolute;
     right: 8px;
     top: 0;
     bottom: 0;
-    transition: transform 0.3s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   .protocol-https {
-    animation: slideUpDown 6s infinite;
+    animation: slideUpDown 9s infinite;
     transform: translateY(0);
   }
 
   .protocol-grpcs {
-    animation: slideUpDown 6s infinite 3s;
+    animation: slideUpDown 9s infinite 3s;
+    transform: translateY(100%);
+  }
+
+  .protocol-wss {
+    animation: slideUpDown 9s infinite 6s;
     transform: translateY(100%);
   }
 
   @keyframes slideUpDown {
-    0%, 45% {
+    0%, 30% {
       transform: translateY(0);
     }
-    50%, 95% {
+    33.33%, 97% {
       transform: translateY(100%);
     }
     100% {

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

@@ -1,19 +1,31 @@
 import React from 'react';
 import { IconCertificate, IconTrash, IconWorld } from '@tabler/icons';
 import { useFormik } from 'formik';
-import { uuid } from 'utils/common';
 import * as Yup from 'yup';
-import { IconEye, IconEyeOff } from '@tabler/icons';
-import { useState } from 'react';
-
 import StyledWrapper from './StyledWrapper';
 import { useRef } from 'react';
 import path from 'utils/common/path';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning/index';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField/index';
+import { useTheme } from 'styled-components';
+import { useDispatch } from 'react-redux';
+import { updateCollectionClientCertificates } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import get from 'lodash/get';
+import Button from 'ui/Button';
 
-const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
+const ClientCertSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+
+  // Get client certs from draft if exists, otherwise from brunoConfig
+  const clientCertConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.clientCertificates.certs', [])
+    : get(collection, 'brunoConfig.clientCertificates.certs', []);
   const certFilePathInputRef = useRef();
   const keyFilePathInputRef = useRef();
   const pfxFilePathInputRef = useRef();
+  const { storedTheme } = useTheme();
 
   const formik = useFormik({
     initialValues: {
@@ -28,7 +40,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
       domain: Yup.string()
         .required()
         .trim()
-        .test('not-empty-after-trim', 'Domain is required', value => value && value.trim().length > 0),
+        .test('not-empty-after-trim', 'Domain is required', (value) => value && value.trim().length > 0),
       type: Yup.string().required().oneOf(['cert', 'pfx']),
       certFilePath: Yup.string().when('type', {
         is: (type) => type == 'cert',
@@ -62,28 +74,47 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
           passphrase: values.passphrase
         };
       }
-      onUpdate(relevantValues);
+
+      // Add the new cert to the existing certs in draft
+      const updatedCerts = [...clientCertConfig, relevantValues];
+      const clientCertificates = {
+        enabled: true,
+        certs: updatedCerts
+      };
+
+      dispatch(updateCollectionClientCertificates({
+        collectionUid: collection.uid,
+        clientCertificates
+      }));
+
       formik.resetForm();
       resetFileInputFields();
     }
   });
 
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(formik.values.passphrase);
+
   const getFile = (e) => {
     const filePath = window?.ipcRenderer?.getFilePath(e?.files?.[0]);
     if (filePath) {
-      let relativePath = path.relative(root, filePath);
+      let relativePath = path.relative(collection.pathname, filePath);
       formik.setFieldValue(e.name, relativePath);
     }
   };
 
   const resetFileInputFields = () => {
-    certFilePathInputRef.current.value = '';
-    keyFilePathInputRef.current.value = '';
-    pfxFilePathInputRef.current.value = '';
+    if (certFilePathInputRef.current) {
+      certFilePathInputRef.current.value = '';
+    }
+    if (keyFilePathInputRef.current) {
+      keyFilePathInputRef.current.value = '';
+    }
+    if (pfxFilePathInputRef.current) {
+      pfxFilePathInputRef.current.value = '';
+    }
   };
 
-  const [passwordVisible, setPasswordVisible] = useState(false);
-
   const handleTypeChange = (e) => {
     formik.setFieldValue('type', e.target.value);
     if (e.target.value === 'cert') {
@@ -97,34 +128,49 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
     }
   };
 
+  const handleRemove = (indexToRemove) => {
+    const updatedCerts = clientCertConfig.filter((cert, index) => index !== indexToRemove);
+    const clientCertificates = {
+      enabled: true,
+      certs: updatedCerts
+    };
+
+    dispatch(updateCollectionClientCertificates({
+      collectionUid: collection.uid,
+      clientCertificates
+    }));
+  };
+
+  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+
   return (
     <StyledWrapper className="w-full h-full">
       <div className="text-xs mb-4 text-muted">Add client certificates to be used for specific domains.</div>
 
-      <h1 className="font-semibold">Client Certificates</h1>
+      <h1 className="font-medium">Client Certificates</h1>
       <ul className="mt-4">
         {!clientCertConfig.length
           ? 'No client certificates added'
           : clientCertConfig.map((clientCert, index) => (
-            <li key={`client-cert-${index}`} className="flex items-center available-certificates p-2 rounded-lg mb-2">
-              <div className="flex items-center w-full justify-between">
-                <div className="flex w-full items-center">
-                  <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
-                  {clientCert.domain}
+              <li key={`client-cert-${index}`} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+                <div className="flex items-center w-full justify-between">
+                  <div className="flex w-full items-center">
+                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
+                    {clientCert.domain}
+                  </div>
+                  <div className="flex w-full items-center">
+                    <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
+                    {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
+                  </div>
+                  <button onClick={() => handleRemove(index)} className="remove-certificate ml-2">
+                    <IconTrash size={18} strokeWidth={1.5} />
+                  </button>
                 </div>
-                <div className="flex w-full items-center">
-                  <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
-                  {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
-                </div>
-                <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
-                  <IconTrash size={18} strokeWidth={1.5} />
-                </button>
-              </div>
-            </li>
-          ))}
+              </li>
+            ))}
       </ul>
 
-      <h1 className="font-semibold mt-8 mb-2">Add Client Certificate</h1>
+      <h1 className="font-medium mt-8 mb-2">Add Client Certificate</h1>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="domain">
@@ -135,6 +181,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
               <span className="protocol-placeholder">
                 <span className="protocol-https">https://</span>
                 <span className="protocol-grpcs">grpcs://</span>
+                <span className="protocol-wss">wss://</span>
               </span>
             </div>
             <input
@@ -314,30 +361,27 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
             Passphrase
           </label>
           <div className="textbox flex flex-row items-center w-[300px] h-[1.70rem] relative">
-            <input
-              id="passphrase"
-              type={passwordVisible ? 'text' : 'password'}
-              name="passphrase"
-              className="outline-none w-64 bg-transparent"
-              onChange={formik.handleChange}
+            <SingleLineEditor
               value={formik.values.passphrase || ''}
+              theme={storedTheme}
+              onChange={(val) => formik.setFieldValue('passphrase', val)}
+              collection={collection}
+              isSecret={true}
             />
-            <button
-              type="button"
-              className="btn btn-sm absolute right-0 l"
-              onClick={() => setPasswordVisible(!passwordVisible)}
-            >
-              {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
-            </button>
+            {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
           </div>
           {formik.touched.passphrase && formik.errors.passphrase ? (
             <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
           ) : null}
         </div>
-        <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
+        <div className="mt-6 flex flex-row gap-2 items-center">
+          <Button type="submit" size="sm" data-testid="add-client-cert">
             Add
-          </button>
+          </Button>
+          <div className="h-4 border-l border-gray-600"></div>
+          <Button type="button" size="sm" onClick={handleSave}>
+            Save
+          </Button>
         </div>
       </form>
     </StyledWrapper>

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

@@ -1,20 +1,22 @@
 import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
-import { updateCollectionDocs } from 'providers/ReduxStore/slices/collections';
+import { updateCollectionDocs, deleteCollectionDraft } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
 import { IconEdit, IconX, IconFileText } from '@tabler/icons';
+import Button from 'ui/Button/index';
+import ActionIcon from 'ui/ActionIcon/index';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
   const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
-  const docs = get(collection, 'root.docs', '');
+  const docs = collection.draft?.root ? get(collection, 'draft.root.docs', '') : get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
 
   const toggleViewMode = () => {
@@ -31,41 +33,41 @@ const Docs = ({ collection }) => {
   };
 
   const handleDiscardChanges = () => {
-    dispatch(
+    dispatch((
       updateCollectionDocs({
         collectionUid: collection.uid,
         docs: docs
-      })
+      }))
     );
     toggleViewMode();
-  }
+  };
 
   const onSave = () => {
-    dispatch(saveCollectionRoot(collection.uid));
+    dispatch(saveCollectionSettings(collection.uid));
     toggleViewMode();
-  }
+  };
 
   return (
     <StyledWrapper className="h-full w-full relative flex flex-col">
-      <div className='flex flex-row w-full justify-between items-center mb-4'>
-        <div className='text-lg font-medium flex items-center gap-2'>
+      <div className="flex flex-row w-full justify-between items-center mb-4">
+        <div className="text-lg font-medium flex items-center gap-2">
           <IconFileText size={20} strokeWidth={1.5} />
           Documentation
         </div>
-        <div className='flex flex-row gap-2 items-center justify-center'>
+        <div className="flex flex-row gap-2 items-center justify-center">
           {isEditing ? (
             <>
-              <div className="editing-mode" role="tab" onClick={handleDiscardChanges}>
-                <IconX className="cursor-pointer" size={20} strokeWidth={1.5} />
-              </div>
-              <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}>
+              <Button type="button" color="secondary" onClick={handleDiscardChanges}>
+                Cancel
+              </Button>
+              <Button type="button" onClick={onSave}>
                 Save
-              </button>
+              </Button>
             </>
           ) : (
-            <div className="editing-mode" role="tab" onClick={toggleViewMode}>
-              <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} />
-            </div>
+            <ActionIcon className="editing-mode" onClick={toggleViewMode}>
+              <IconEdit className="cursor-pointer" size={16} strokeWidth={1.5} />
+            </ActionIcon>
           )}
         </div>
       </div>
@@ -81,14 +83,13 @@ const Docs = ({ collection }) => {
           fontSize={get(preferences, 'font.codeFontSize')}
         />
       ) : (
-        <div className='h-full overflow-auto pl-1'>
-          <div className='h-[1px] min-h-[500px]'>
+        <div className="h-full overflow-auto pl-1">
+          <div className="h-[1px] min-h-[500px]">
             {
-              docs?.length > 0 ?
-                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
-                :
-                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
-            }         
+              docs?.length > 0
+                ? <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
+                : <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
+            }
           </div>
         </div>
       )}
@@ -98,7 +99,6 @@ const Docs = ({ collection }) => {
 
 export default Docs;
 
-
 const documentationPlaceholder = `
 Welcome to your collection documentation! This space is designed to help you document your API collection effectively.