Merge branch 'main' of usebruno/bruno into workspaces

.coderabbit.yaml

@@ -23,19 +23,6 @@ reviews:
     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:

.github/CODEOWNERS

@@ -1 +1 @@
-* @helloanoop @maintainer-bruno @bijin-bruno @lohit-bruno @naman-bruno @sid-bruno
+* @helloanoop @maintainer-bruno @bijin-bruno @lohit-bruno @naman-bruno

.github/actions/auth/oauth1/linux/run-auth-e2e-tests/action.yml

@@ -1,19 +0,0 @@
-name: 'Run Auth E2E Tests - Linux'
-description: 'Run Auth E2E tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run Auth E2E tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        xvfb-run npm run test:e2e:auth
-
-    - name: Upload Playwright Report
-      if: ${{ !cancelled() }}
-      uses: actions/upload-artifact@v4
-      with:
-        name: playwright-report-auth-linux
-        path: playwright-report/
-        retention-days: 30

.github/actions/auth/oauth1/linux/run-oauth1-cli-tests/action.yml

@@ -1,30 +0,0 @@
-name: 'Run OAuth1 CLI Tests - Linux'
-description: 'Run OAuth1 CLI tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run BRU format CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        BRU_CLI="../../../../../../packages/bruno-cli/bin/bru.js"
-
-        # navigate to BRU test collection directory
-        cd tests/auth/oauth1/fixtures/collections/bru
-
-        echo "=== BRU Format Collection Run ==="
-        node $BRU_CLI run --env Local --output junit-bru.xml --format junit
-
-    - name: Run YML format CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        BRU_CLI="../../../../../../packages/bruno-cli/bin/bru.js"
-
-        # navigate to YML test collection directory
-        cd tests/auth/oauth1/fixtures/collections/yml
-
-        echo "=== YML Format Collection Run ==="
-        node $BRU_CLI run --env Local --output junit-yml.xml --format junit

.github/actions/auth/oauth1/linux/setup-feature-specific-deps/action.yml

@@ -1,15 +0,0 @@
-name: 'Setup Auth Feature Dependencies - Linux'
-description: 'Setup feature-specific dependencies for auth tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Install additional OS dependencies for auth tests
-      shell: bash
-      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
-
-        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

.github/actions/auth/oauth1/linux/start-test-server/action.yml

@@ -1,16 +0,0 @@
-name: 'Start Test Server - Linux'
-description: 'Start the bruno-tests mock server for OAuth1 CLI tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Start test server
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        cd packages/bruno-tests
-
-        echo "starting test server in background"
-        node src/index.js &
-
-        echo "server started with PID: $!"

.github/actions/auth/oauth1/macos/run-auth-e2e-tests/action.yml

@@ -1,17 +0,0 @@
-name: 'Run Auth E2E Tests - macOS'
-description: 'Run Auth E2E tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run Auth E2E tests
-      shell: bash
-      run: |
-        npm run test:e2e:auth
-
-    - name: Upload Playwright Report
-      if: ${{ !cancelled() }}
-      uses: actions/upload-artifact@v4
-      with:
-        name: playwright-report-auth-macos
-        path: playwright-report/
-        retention-days: 30

.github/actions/auth/oauth1/macos/run-oauth1-cli-tests/action.yml

@@ -1,30 +0,0 @@
-name: 'Run OAuth1 CLI Tests - macOS'
-description: 'Run OAuth1 CLI tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run BRU format CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        BRU_CLI="../../../../../../packages/bruno-cli/bin/bru.js"
-
-        # navigate to BRU test collection directory
-        cd tests/auth/oauth1/fixtures/collections/bru
-
-        echo "=== BRU Format Collection Run ==="
-        node $BRU_CLI run --env Local --output junit-bru.xml --format junit
-
-    - name: Run YML format CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        BRU_CLI="../../../../../../packages/bruno-cli/bin/bru.js"
-
-        # navigate to YML test collection directory
-        cd tests/auth/oauth1/fixtures/collections/yml
-
-        echo "=== YML Format Collection Run ==="
-        node $BRU_CLI run --env Local --output junit-yml.xml --format junit

.github/actions/auth/oauth1/macos/start-test-server/action.yml

@@ -1,16 +0,0 @@
-name: 'Start Test Server - macOS'
-description: 'Start the bruno-tests mock server for OAuth1 CLI tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Start test server
-      shell: bash
-      run: |
-        set -euo pipefail
-
-        cd packages/bruno-tests
-
-        echo "starting test server in background"
-        node src/index.js &
-
-        echo "server started with PID: $!"

.github/actions/auth/oauth1/windows/run-auth-e2e-tests/action.yml

@@ -1,17 +0,0 @@
-name: 'Run Auth E2E Tests - Windows'
-description: 'Run Auth E2E tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run Auth E2E tests
-      shell: pwsh
-      run: |
-        npm run test:e2e:auth
-
-    - name: Upload Playwright Report
-      if: ${{ !cancelled() }}
-      uses: actions/upload-artifact@v4
-      with:
-        name: playwright-report-auth-windows
-        path: playwright-report/
-        retention-days: 30

.github/actions/auth/oauth1/windows/run-oauth1-cli-tests/action.yml

@@ -1,34 +0,0 @@
-name: 'Run OAuth1 CLI Tests - Windows'
-description: 'Run OAuth1 CLI tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run BRU format CLI tests
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-        $ErrorActionPreference = "Stop"
-
-        $BRU_CLI = "..\..\..\..\..\..\packages\bruno-cli\bin\bru.js"
-
-        # navigate to BRU test collection directory
-        Set-Location tests\auth\oauth1\fixtures\collections\bru
-
-        Write-Host "=== BRU Format Collection Run ==="
-        $process = Start-Process -FilePath "node" -ArgumentList "$BRU_CLI run --env Local --output junit-bru.xml --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        if ($process.ExitCode -ne 0) { exit 1 }
-
-    - name: Run YML format CLI tests
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-        $ErrorActionPreference = "Stop"
-
-        $BRU_CLI = "..\..\..\..\..\..\packages\bruno-cli\bin\bru.js"
-
-        # navigate to YML test collection directory
-        Set-Location tests\auth\oauth1\fixtures\collections\yml
-
-        Write-Host "=== YML Format Collection Run ==="
-        $process = Start-Process -FilePath "node" -ArgumentList "$BRU_CLI run --env Local --output junit-yml.xml --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        if ($process.ExitCode -ne 0) { exit 1 }

.github/actions/auth/oauth1/windows/start-test-server/action.yml

@@ -1,14 +0,0 @@
-name: 'Start Test Server - Windows'
-description: 'Start the bruno-tests mock server for OAuth1 CLI tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Start test server
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-
-        Set-Location packages\bruno-tests
-
-        Write-Host "starting test server in background"
-        Start-Process -FilePath "node" -ArgumentList "src\index.js" -PassThru -WindowStyle Hidden

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

@@ -1,10 +1,5 @@
 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:
@@ -14,13 +9,12 @@ 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

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

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

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

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

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

@@ -1,78 +0,0 @@
-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/auth-tests.yml

@@ -1,79 +0,0 @@
-name: Auth Tests
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  oauth1-tests-for-linux:
-    name: OAuth 1.0 Auth Tests - Linux
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Setup Feature Dependencies
-        uses: ./.github/actions/auth/oauth1/linux/setup-feature-specific-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/linux/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/linux/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/linux/run-oauth1-cli-tests
-
-  oauth1-tests-for-macos:
-    name: OAuth 1.0 Auth Tests - macOS
-    timeout-minutes: 60
-    runs-on: macos-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/macos/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/macos/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/macos/run-oauth1-cli-tests
-
-  oauth1-tests-for-windows:
-    name: OAuth 1.0 Auth Tests - Windows
-    timeout-minutes: 60
-    runs-on: windows-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Auth E2E Tests
-        uses: ./.github/actions/auth/oauth1/windows/run-auth-e2e-tests
-
-      - name: Start Test Server
-        uses: ./.github/actions/auth/oauth1/windows/start-test-server
-
-      - name: Run OAuth1 CLI Tests
-        uses: ./.github/actions/auth/oauth1/windows/run-oauth1-cli-tests

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

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

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

@@ -43,7 +43,7 @@ jobs:
           bru run --env Prod --output junit.xml --format junit --sandbox developer
 
       - name: Publish Test Report
-        uses: dorny/test-reporter@v3
+        uses: dorny/test-reporter@v2
         if: success() || failure()
         with:
           name: Test Report

.github/workflows/tests.yml

@@ -1,10 +1,9 @@
 name: Tests
 on:
-  workflow_dispatch:
   push:
-    branches: [main, 'release/v*']
+    branches: [main]
   pull_request:
-    branches: [main, 'release/v*']
+    branches: [main]
 
 jobs:
   unit-test:
@@ -15,12 +14,50 @@ jobs:
       contents: read
     steps:
       - uses: actions/checkout@v6
+      - 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
 
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
+      # 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-schema-types
+          npm run build --workspace=packages/bruno-filestore
 
-      - name: Run Unit Tests
-        uses: ./.github/actions/tests/run-unit-tests
+      - 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
 
   cli-test:
     name: CLI Tests
@@ -31,12 +68,35 @@ jobs:
       contents: read
     steps:
       - uses: actions/checkout@v6
+      - uses: actions/setup-node@v5
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: './package-lock.json'
 
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
 
-      - name: Run CLI Tests
-        uses: ./.github/actions/tests/run-cli-tests
+      - 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-schema-types
+          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 --sandbox developer
 
       - name: Publish Test Report
         uses: EnricoMi/publish-unit-test-result-action@v2
@@ -45,38 +105,46 @@ 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@v6
+    - uses: actions/checkout@v6
+    - 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
 
-      - 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: Install dependencies for test collection environment
+      run: |
+        npm ci --prefix packages/bruno-tests/collection
 
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
+    - 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: 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
+    - name: Run Playwright tests
+      run: |
+        xvfb-run npm run test:e2e
+    - uses: actions/upload-artifact@v5
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -48,23 +48,15 @@ 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
+packages/bruno-converters/dist

.npmrc

@@ -1 +0,0 @@
-min-release-age=10

.nvmrc

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

.prettierrc.json

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

CODING_STANDARDS.md

@@ -6,7 +6,7 @@
 
 - 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.
+- Stick to single quotes for strings. Double quotes are cool elsewhere, but here we go single.
 
 - Always add semicolons at the end of statements. It's like putting a period at the end of a sentence – clarity matters.
 
@@ -66,18 +66,7 @@ Remember, these rules are here to make our codebase harmonious. If something doe
 
 - 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
-- Avoid mixed controlled and uncontrolled state in React components. A component is either controlled or uncontrolled. State needs a single source of truth instead of being computed by props and then recomputed internally.
-- SHOULD: Use derived state variables instead of adding unneeded `React.useState` / `useState` hooks.
-
+- Styled Component CSS might also change layout but tailwind classes shouldn't define colors. 
 
 ## Readability and Abstractions
 

docs/playwright-testing-guide.md

@@ -324,7 +324,7 @@ test('should create and execute HTTP request', async ({ page, createTmpDir }) =>
   await page.getByRole('button', { name: 'Create' }).click();
 
   // Execute request
-  await page.getByTestId('send-arrow-icon').click();
+  await page.locator('#send-request').getByRole('img').nth(2).click();
 
   // Verify response
   await expect(page.getByRole('main')).toContainText('200 OK');

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![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)

docs/readme/readme_fa.md

@@ -3,7 +3,7 @@
 
 ### برونو یا Bruno - محیط توسعه متن باز برای تست و توسعه API ها
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

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%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

eslint.config.js

@@ -18,9 +18,7 @@ module.exports = runESMImports().then(() => defineConfig([
       '**/dist/**/*',
       '**/*.bru',
       'packages/bruno-js/src/sandbox/bundle-browser-rollup.js',
-      'packages/bruno-app/public/static/**/*',
-      'packages/bruno-app/.next/**/*',
-      'packages/bruno-electron/web/**/*'
+      'packages/bruno-app/public/static/**/*'
     ]
   },
   {
@@ -117,18 +115,6 @@ module.exports = runESMImports().then(() => defineConfig([
       'no-undef': 'error'
     }
   },
-  {
-    // 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'],
@@ -178,8 +164,7 @@ module.exports = runESMImports().then(() => defineConfig([
       }
     },
     rules: {
-      'no-undef': 'error',
-      'no-case-declarations': 'error'
+      'no-undef': 'error'
     }
   },
   {

package.json

@@ -23,21 +23,15 @@
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
-    "@opencollection/types": "0.9.1",
     "@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.39.4",
+    "eslint": "^9.26.0",
     "eslint-plugin-diff": "^2.0.3",
     "fs-extra": "^11.1.1",
     "globals": "^16.1.0",
@@ -49,20 +43,19 @@
     "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": "node ./scripts/dev.js",
+    "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
     "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",
@@ -78,13 +71,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:e2e:auth": "playwright test --project=auth",
-    "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",
+    "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
+    "lint": "node --max_old_space_size=4096 $(npx which eslint)",
+    "lint:fix": "node --max_old_space_size=4096 $(npx which eslint) --fix",
     "prepare": "husky"
   },
   "nano-staged": {
@@ -93,17 +85,11 @@
     ]
   },
   "overrides": {
-    "axios":"1.13.6",
-    "rollup": "3.30.0",
-    "pbkdf2":"3.1.5",
+    "rollup": "3.29.5",
     "electron-store": {
       "conf": {
         "json-schema-typed": "8.0.1"
       }
     }
-  },
-  "dependencies": {
-    "ajv": "^8.17.1",
-    "git-url-parse": "^14.1.0"
   }
 }

packages/bruno-app/.babelrc

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

packages/bruno-app/.gitignore

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

packages/bruno-app/.prettierrc.json

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

packages/bruno-app/package.json

@@ -8,8 +8,8 @@
     "build": "rsbuild build -m production",
     "preview": "rsbuild preview",
     "test": "jest",
-    "storybook": "storybook dev -p 6006 --config-dir storybook",
-    "build-storybook": "storybook build --config-dir storybook"
+    "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
+    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.15",
@@ -27,7 +27,6 @@
     "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",
@@ -39,25 +38,22 @@
     "github-markdown-css": "^5.2.0",
     "graphiql": "3.7.1",
     "graphql": "^16.6.0",
-    "graphql-request": "4.2.0",
+    "graphql-request": "^3.7.0",
     "hexy": "^0.3.5",
     "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
     "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",
@@ -65,10 +61,9 @@
     "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.14.1",
+    "qs": "^6.11.0",
     "query-string": "^7.0.1",
     "react": "19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -83,27 +78,23 @@
     "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": {
     "@babel/core": "^7.27.1",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.22.0",
     "@rsbuild/core": "^1.1.2",
     "@rsbuild/plugin-babel": "^1.0.3",
-    "@rsbuild/plugin-node-polyfill": "1.2.0",
+    "@rsbuild/plugin-node-polyfill": "^1.2.0",
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",

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

@@ -1,713 +0,0 @@
-: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/src/components/ApiSpecPanel/FileEditor/CodeEditor/Plugins/Yaml/index.js

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

@@ -1,77 +0,0 @@
-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};
-  }
-
-  .CodeMirror-matchingbracket {
-    background: ${(props) => props.theme.status.success.background} !important;
-    text-decoration: unset;
-  }
-
-  .CodeMirror-nonmatchingbracket {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-    background: ${(props) => props.theme.status.danger.background} !important;
-    text-decoration: unset;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,128 +0,0 @@
-/**
- *  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-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

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

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

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

@@ -1,123 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useSelector } from 'react-redux';
-import { IconDeviceFloppy, IconLoader2 } from '@tabler/icons';
-import CodeEditor from './FileEditor/CodeEditor/index';
-import Swagger from './Renderers/Swagger';
-import { useDragResize } from 'hooks/useDragResize';
-
-const MIN_LEFT_PANE_WIDTH = 300;
-const MIN_RIGHT_PANE_WIDTH = 450;
-
-/**
- * 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                (fn)      Called with current editor content on save (editable mode only)
- *  - leftPaneWidth         (number|null) Persisted left pane width in px; null = use 50/50 default
- *  - onLeftPaneWidthChange (fn)      Persist the new width (called on mouseup / double-click / resize-clamp)
- */
-const SpecViewer = ({ content, readOnly, onSave, leftPaneWidth, onLeftPaneWidthChange }) => {
-  const { displayedTheme, theme } = useTheme();
-  const preferences = useSelector((state) => state.app.preferences);
-
-  const [editorContent, setEditorContent] = useState(content);
-
-  useEffect(() => {
-    setEditorContent(content);
-  }, [content]);
-
-  const hasChanges = !readOnly && editorContent !== content;
-
-  const handleSave = () => {
-    if (onSave) onSave(editorContent);
-  };
-
-  const mainSectionRef = useRef(null);
-  const { dragging, dragWidth, dragbarProps } = useDragResize({
-    containerRef: mainSectionRef,
-    width: leftPaneWidth,
-    onWidthChange: onLeftPaneWidthChange,
-    minLeft: MIN_LEFT_PANE_WIDTH,
-    minRight: MIN_RIGHT_PANE_WIDTH
-  });
-
-  const effectiveWidth = dragging ? dragWidth : leftPaneWidth;
-  const leftPaneStyle = effectiveWidth != null
-    ? { width: `${effectiveWidth}px`, flexShrink: 0 }
-    : { flex: '1 1 50%', minWidth: 0 };
-
-  const [swaggerReady, setSwaggerReady] = useState(false);
-
-  useEffect(() => {
-    setSwaggerReady(false);
-  }, [content]);
-
-  const handleSwaggerComplete = useCallback(() => {
-    // Double rAF: wait for one full paint cycle so Swagger is actually on screen
-    // before hiding the loader — avoids a flash of unrendered content.
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => setSwaggerReady(true));
-    });
-  }, []);
-
-  return (
-    <section
-      ref={mainSectionRef}
-      className={`main flex flex-grow pl-4 relative ${dragging ? 'dragging' : ''}`}
-    >
-      <div
-        className="api-spec-left-pane flex flex-grow relative h-full"
-        style={leftPaneStyle}
-      >
-        <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 className="dragbar-wrapper" {...dragbarProps}>
-        <div className="dragbar-handle" />
-      </div>
-      <div
-        className="api-spec-right-pane relative"
-        style={{ flex: '1 1 50%', minWidth: 0 }}
-      >
-        <div style={{ visibility: swaggerReady ? 'visible' : 'hidden', height: '100%' }}>
-          <Swagger spec={content} onComplete={handleSwaggerComplete} />
-        </div>
-        {!swaggerReady && (
-          <div
-            className="absolute inset-0 flex items-center justify-center gap-2"
-            style={{ background: theme.bg }}
-          >
-            <div className="flex items-center justify-center gap-2 opacity-70">
-              <IconLoader2 size={20} className="animate-spin" />
-              <span>Generating preview…</span>
-            </div>
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
-
-export default SpecViewer;

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

@@ -1,51 +0,0 @@
-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;
-  }
-
-  section.main.dragging {
-    cursor: col-resize;
-    user-select: none;
-  }
-
-  div.dragbar-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 10px;
-    min-width: 10px;
-    padding: 0;
-    cursor: col-resize;
-    background: transparent;
-    position: relative;
-    flex-shrink: 0;
-
-    div.dragbar-handle {
-      display: flex;
-      height: 100%;
-      width: 1px;
-      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
-    }
-
-    &:hover div.dragbar-handle {
-      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,98 +0,0 @@
-import React, { forwardRef, useRef, useCallback } 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, updateApiSpecPanelLeftPaneWidth } 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, leftPaneWidth } = apiSpec || {};
-
-  const handleLeftPaneWidthChange = useCallback(
-    (w) => {
-      if (!uid) return;
-      dispatch(updateApiSpecPanelLeftPaneWidth({ uid, leftPaneWidth: w }));
-    },
-    [dispatch, uid]
-  );
-
-  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 }))}
-        leftPaneWidth={leftPaneWidth ?? null}
-        onLeftPaneWidthChange={handleLeftPaneWidthChange}
-      />
-    </StyledWrapper>
-  );
-};
-
-export default ApiSpecPanel;

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

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

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

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

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

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

@@ -1,33 +1,17 @@
-import React, { useMemo } from 'react';
-import { IconCaretDown, IconForms, IconBraces, IconCode, IconFileText, IconDatabase, IconFile, IconX } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import React, { useRef, forwardRef } from 'react';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
 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 }
-    ]
-  }
+  { key: 'multipartForm', label: 'Multipart Form', category: 'Form' },
+  { key: 'formUrlEncoded', label: 'Form URL Encoded', category: 'Form' },
+  { key: 'json', label: 'JSON', category: 'Raw' },
+  { key: 'xml', label: 'XML', category: 'Raw' },
+  { key: 'text', label: 'TEXT', category: 'Raw' },
+  { key: 'sparql', label: 'SPARQL', category: 'Raw' },
+  { key: 'file', label: 'File / Binary', category: 'Other' },
+  { key: 'none', label: 'None', category: 'Other' }
 ];
 
 const BodyModeSelector = ({
@@ -37,39 +21,62 @@ const BodyModeSelector = ({
   disabled = false,
   className = '',
   wrapperClassName = '',
+  showCategories = true,
   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]);
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
+        {humanizeRequestBodyMode(currentMode)}
+        {' '}
+        <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeSelect = (mode) => {
+    dropdownTippyRef.current.hide();
+    onModeChange(mode);
+  };
+
+  // Group modes by category for rendering
+  const groupedModes = modes.reduce((acc, mode) => {
+    const category = mode.category || 'Other';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(mode);
+    return acc;
+  }, {});
 
   return (
-    <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>
+    <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'} ${wrapperClassName}`}>
+      <Dropdown
+        onCreate={onDropdownCreate}
+        icon={<Icon />}
+        placement={placement}
+        disabled={disabled}
+        className={className}
+      >
+        {Object.entries(groupedModes).map(([category, categoryModes]) => (
+          <React.Fragment key={category}>
+            {showCategories && <div className="label-item font-medium">{category}</div>}
+            {categoryModes.map((mode) => (
+              <div
+                key={mode.key}
+                className="dropdown-item"
+                onClick={() => onModeSelect(mode.key)}
+              >
+                {mode.label}
+              </div>
+            ))}
+          </React.Fragment>
+        ))}
+      </Dropdown>
+    </div>
   );
 };
 

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

@@ -1,5 +1,4 @@
 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';
@@ -22,8 +21,7 @@ const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
         <CodeEditor
           mode="text/plain"
           theme={displayedTheme}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
+          font={preferences.codeFont || 'default'}
           value={parsedParams}
           onEdit={handleEdit}
           onSave={onSave}
@@ -31,7 +29,7 @@ const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
         />
       </div>
       <div className="flex btn-action justify-between items-center mt-3">
-        <button className="text-link select-none ml-auto" data-testid="key-value-edit-toggle" onClick={onToggle}>
+        <button className="text-link select-none ml-auto" onClick={onToggle}>
           Key/Value Edit
         </button>
       </div>

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

@@ -36,12 +36,12 @@ const StyledWrapper = styled.div`
 
   /* Style line numbers when there's a lint issue */
   .CodeMirror-lint-line-error .CodeMirror-linenumber {
-    color: ${(props) => props.theme.colors.text.danger} !important;
+    color: #d32f2f !important;
     text-decoration: underline;
   }
 
   .CodeMirror-lint-line-warning .CodeMirror-linenumber {
-    color: ${(props) => props.theme.colors.text.warning} !important;
+    color: #f57c00 !important;
     text-decoration: underline;
   }
 
@@ -116,7 +116,7 @@ const StyledWrapper = styled.div`
     span.cm-atom {
       color: ${(props) => props.theme.codemirror.tokens.atom} !important;
     }
-    span.cm-variable, span.cm-variable-2 {
+    span.cm-variable {
       color: ${(props) => props.theme.codemirror.tokens.variable} !important;
     }
     span.cm-keyword {
@@ -128,20 +128,14 @@ const StyledWrapper = styled.div`
     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: ${(props) => props.theme.codemirror.variable.valid} !important;
+    color: #5fad89 !important; /* Soft sage */
   }
   .cm-variable-invalid {
-    color: ${(props) => props.theme.codemirror.variable.invalid} !important;
+    color: #d17b7b !important; /* Soft coral */
   }
 
   .CodeMirror-search-hint {
@@ -151,14 +145,8 @@ const StyledWrapper = styled.div`
   
   //matching bracket fix
   .CodeMirror-matchingbracket {
-    background: ${(props) => props.theme.status.success.background} !important;
-    text-decoration: unset;
-  }
-
-  .CodeMirror-nonmatchingbracket {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-    background: ${(props) => props.theme.status.danger.background} !important;
-    text-decoration: unset;
+    background: #5cc0b48c !important;
+    text-decoration:unset;
   }
 
   .cm-search-line-highlight {

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

@@ -5,10 +5,10 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import React, { createRef } from 'react';
-import { debounce, isEqual } from 'lodash';
+import React from 'react';
+import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
+import { setupAutoComplete } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
@@ -16,15 +16,7 @@ import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
 import { setupLinkAware } from 'utils/codemirror/linkAware';
 import { setupLintErrorTooltip } from 'utils/codemirror/lint-errors';
-import CodeMirrorSearch from 'components/CodeMirrorSearch/index';
-import {
-  applyEditorState,
-  captureEditorState,
-  getDocKey,
-  readPersistedEditorState,
-  writePersistedEditorState
-} from './state-persistence';
-import { usePersistenceScope } from 'hooks/usePersistedState/PersistedScopeProvider';
+import CodeMirrorSearch from 'components/CodeMirrorSearch';
 
 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -32,7 +24,7 @@ window.JSHINT = JSHINT;
 
 const TAB_SIZE = 2;
 
-class CodeEditor extends React.Component {
+export default class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -42,7 +34,6 @@ class CodeEditor extends React.Component {
     this.cachedValue = props.value || '';
     this.variables = {};
     this.searchResultsCountElementId = 'search-results-count';
-    this.searchBarRef = createRef();
 
     this.lintOptions = {
       esversion: 11,
@@ -56,24 +47,8 @@ class CodeEditor extends React.Component {
     };
   }
 
-  // Thin wrapper around the pure getDocKey helper from state-persistence.js.
-  // Kept on the class so the rest of the lifecycle code reads naturally.
-  _getDocKey() {
-    return getDocKey(this.props);
-  }
-
   componentDidMount() {
     const variables = getAllVariables(this.props.collection, this.props.item);
-    /**
-     * No-op. We claim Cmd-Enter / Ctrl-Enter here only to suppress CodeMirror's
-     * sublime keymap default (insertLineAfter), which would otherwise insert a
-     * newline. sendRequest dispatch is owned by Mousetrap — the editor input has
-     * the `mousetrap` class (added below) so the global
-     * useKeybinding('sendRequest', …) in RequestTabPanel handles it, and only
-     * in request tabs. Falling through with CodeMirror.Pass when onRun is absent
-     * would re-introduce the newline in collection/folder-level editors.
-     */
-    const runShortcut = () => {};
 
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
@@ -98,32 +73,46 @@ class CodeEditor extends React.Component {
       scrollbarStyle: 'overlay',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
+        'Cmd-Enter': () => {
+          if (this.props.onRun) {
+            this.props.onRun();
+          }
+        },
+        'Ctrl-Enter': () => {
+          if (this.props.onRun) {
+            this.props.onRun();
+          }
+        },
+        'Cmd-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
+        'Ctrl-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
         'Cmd-F': (cm) => {
-          this.setState({ searchBarVisible: true }, () => {
-            this.searchBarRef.current?.focus();
-          });
+          if (!this.state.searchBarVisible) {
+            this.setState({ searchBarVisible: true });
+          }
         },
         'Ctrl-F': (cm) => {
-          this.setState({ searchBarVisible: true }, () => {
-            this.searchBarRef.current?.focus();
-          });
+          if (!this.state.searchBarVisible) {
+            this.setState({ searchBarVisible: true });
+          }
         },
-        'Cmd-H': this.props.readOnly ? false : 'replace',
-        'Ctrl-H': this.props.readOnly ? false : 'replace',
-        'Cmd-Enter': runShortcut,
-        'Ctrl-Enter': runShortcut,
+        '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': (cm) => {
-          showRootHints(cm, this.props.showHintsFor);
-        },
-        'Cmd-Space': (cm) => {
-          showRootHints(cm, this.props.showHintsFor);
-        },
+        'Ctrl-Space': 'autocomplete',
+        'Cmd-Space': 'autocomplete',
         'Ctrl-Y': 'foldAll',
         'Cmd-Y': 'foldAll',
         'Ctrl-I': 'unfoldAll',
@@ -201,49 +190,10 @@ class CodeEditor extends React.Component {
     });
 
     if (editor) {
-      // CM5 was constructed with props.value, so the editor already shows the
-      // right content. Read this tab's previously persisted view state from
-      // localStorage and apply it on top — restores folds, cursor, selection,
-      // undo history, and scroll position.
-      const docKey = getDocKey(this.props);
-      this._currentDocKey = docKey;
-      this.cachedValue = editor.getValue();
-      applyEditorState(
-        editor,
-        readPersistedEditorState({ scope: this.props.persistenceScope, key: docKey }),
-        this.cachedValue
-      );
-
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
-
-      // Persist view state immediately when the user folds or unfolds — without
-      // this, a fold only gets saved on the next tab switch / unmount. That
-      // makes the persistence feel "delayed" or random, especially across
-      // sub-tab switches that don't change the docKey or unmount the editor.
-      // Debounced so rapid fold/unfold (e.g. Cmd-Y to fold all) doesn't write
-      // to localStorage on every event.
-      this._persistViewStateDebounced = debounce(() => {
-        if (!this.editor || !this._currentDocKey) return;
-        writePersistedEditorState({
-          scope: this.props.persistenceScope,
-          key: this._currentDocKey,
-          state: captureEditorState(this.editor)
-        });
-      }, 250);
-      editor.on('fold', this._persistViewStateDebounced);
-      editor.on('unfold', this._persistViewStateDebounced);
-
+      editor.on('scroll', this.onScroll);
       editor.scrollTo(null, this.props.initialScroll);
-      this._lastScrollTop = this.props.initialScroll || 0;
-      editor.on('scroll', () => {
-        const wrapper = editor.getWrapperElement();
-        if (wrapper && wrapper.offsetParent === null) return;
-        this._lastScrollTop = editor.getScrollInfo().top;
-        if (this.props.onScroll && typeof this.props.onScroll === 'function') {
-          this.props.onScroll(this._lastScrollTop);
-        }
-      });
       this.addOverlay();
 
       const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
@@ -263,12 +213,6 @@ class CodeEditor extends React.Component {
 
       // Setup lint error tooltip on line number hover
       this.cleanupLintErrorTooltip = setupLintErrorTooltip(editor);
-
-      // Add mousetrap class so Mousetrap captures shortcuts even when CodeMirror is focused
-      const cmInput = editor.getInputField();
-      if (cmInput) {
-        cmInput.classList.add('mousetrap');
-      }
     }
   }
 
@@ -284,52 +228,9 @@ class CodeEditor extends React.Component {
       this.editor.options.jump.schema = this.props.schema;
       CodeMirror.signal(this.editor, 'change', this.editor);
     }
-    if (this.editor) {
-      // Two distinct update paths:
-      //   1. Doc key changed → tab switch → snapshot outgoing state, load new content, restore incoming state
-      //   2. Same doc, value changed → external content update → setValue (view state resets)
-      const newDocKey = getDocKey(this.props);
-      const docKeyChanged = newDocKey !== this._currentDocKey;
-
-      if (docKeyChanged) {
-        // Path 1 — tab switch.
-        // Snapshot the outgoing tab's view state to localStorage so a future
-        // visit can restore it. Then setValue the incoming content and apply
-        // any view state previously persisted for the incoming tab.
-        if (this._currentDocKey) {
-          writePersistedEditorState({
-            scope: this.props.persistenceScope,
-            key: this._currentDocKey,
-            state: captureEditorState(this.editor)
-          });
-        }
-        this.cachedValue = String(this?.props?.value ?? '');
-        this.editor.setValue(String(this.props.value) || '');
-        this._currentDocKey = newDocKey;
-        applyEditorState(
-          this.editor,
-          readPersistedEditorState({ scope: this.props.persistenceScope, key: newDocKey }),
-          this.cachedValue
-        );
-        // setValue resets the editor's mode-overlay state — re-apply the
-        // brunovariables overlay and re-evaluate lint config for the new content.
-        this.addOverlay();
-        this.editor.setOption(
-          'lint',
-          this.props.mode && this.editor.getValue().trim().length > 0 ? this.lintOptions : false
-        );
-      } else if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue) {
-        // Path 2 — same tab, new external value (e.g. a fresh response arrived
-        // while this tab was active). Update content; view state resets because
-        // line positions no longer correspond to anything. Invalidate the
-        // persisted snapshot too, since the saved cursor/folds/history reflect
-        // the prior content.
-        const cursor = this.editor.getCursor();
-        this.cachedValue = String(this?.props?.value ?? '');
-        this.editor.setValue(String(this.props.value) || '');
-        this.editor.setCursor(cursor);
-        writePersistedEditorState({ scope: this.props.persistenceScope, key: this._currentDocKey, state: null });
-      }
+    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.editor) {
@@ -374,38 +275,13 @@ class CodeEditor extends React.Component {
 
   componentWillUnmount() {
     if (this.editor) {
-      if (this.props.onScroll) {
-        this.props.onScroll(this._lastScrollTop);
-      }
-
-      // Snapshot view state to localStorage before tearing down the editor so
-      // the next mount of a CodeEditor with this docKey can restore folds,
-      // cursor, selection, undo history, and scroll position.
-      if (this._currentDocKey) {
-        writePersistedEditorState({
-          scope: this.props.persistenceScope,
-          key: this._currentDocKey,
-          state: captureEditorState(this.editor)
-        });
-      }
-
       this.editor?._destroyLinkAware?.();
       this.editor.off('change', this._onEdit);
-
-      // Tear down the debounced fold-persistence listener. Cancel any pending
-      // call so it can't fire after we've already snapshotted state above.
-      if (this._persistViewStateDebounced) {
-        this.editor.off('fold', this._persistViewStateDebounced);
-        this.editor.off('unfold', this._persistViewStateDebounced);
-        this._persistViewStateDebounced.cancel?.();
-      }
+      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;
     }
   }
@@ -422,10 +298,6 @@ class CodeEditor extends React.Component {
         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 })}
@@ -453,6 +325,8 @@ class CodeEditor extends React.Component {
     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);
@@ -463,12 +337,3 @@ class CodeEditor extends React.Component {
     }
   };
 }
-
-const CodeEditorWithPersistenceScope = React.forwardRef((props, ref) => {
-  const persistenceScope = usePersistenceScope();
-  return <CodeEditor {...props} persistenceScope={persistenceScope} ref={ref} />;
-});
-
-CodeEditorWithPersistenceScope.displayName = 'CodeEditor';
-
-export default CodeEditorWithPersistenceScope;

packages/bruno-app/src/components/CodeEditor/state-persistence.js

@@ -1,129 +0,0 @@
-/*
- * CodeEditor view-state persistence — extracted for testability.
- *
- * Why this exists:
- * Every tab switch causes CodeMirror's setValue() to wipe folds, cursor,
- * selection, undo history, and scroll position. To preserve them, we serialize
- * the relevant pieces to localStorage under a stable key for each editor and
- * re-apply them on mount / tab switch. CodeMirror exposes a JSON-serializable
- * representation of its undo stack via getHistory()/setHistory(), which is what
- * makes Cmd-Z continue working across switches.
- *
- * Note: we deliberately do NOT persist the content itself — the canonical value
- * lives in Redux (props.value). We only persist the editor's "view" state on
- * top of that content. If content has drifted between save and restore, fold
- * positions are applied leniently (foldCode silently no-ops on invalid lines)
- * and history is skipped to avoid an inconsistent undo stack.
- */
-
-export const STORAGE_PREFIX = 'persisted::';
-export const DEFAULT_PERSISTENCE_SCOPE = 'global';
-export const STORAGE_SEGMENT = 'codeeditor';
-
-export const getScopedStorageKey = (scope, key) => {
-  const resolvedScope = scope || DEFAULT_PERSISTENCE_SCOPE;
-  return `${STORAGE_PREFIX}${resolvedScope}::${STORAGE_SEGMENT}::${key}`;
-};
-
-// Identifies which Doc state belongs to a given CodeEditor instance.
-//
-// Callers can pass an explicit `docKey` prop when the auto-derived key would
-// collide — e.g. Pre-Request vs Post-Response script editors share the same
-// item/mode/readOnly and need an extra disambiguator.
-//
-// Auto-derived parts:
-//   id       — distinguishes different tabs (requests or collections)
-//   mode     — distinguishes editors within the same tab (e.g. JSON body vs JS script)
-//   readOnly — distinguishes response viewer (ro) from body editor (rw) when modes match
-export const getDocKey = (props) => {
-  if (props.docKey) return props.docKey;
-  const id = props.item?.uid || props.collection?.uid || 'default';
-  const mode = props.mode || 'default';
-  const readOnly = props.readOnly ? 'ro' : 'rw';
-  return `${id}:${mode}:${readOnly}`;
-};
-
-export const readPersistedEditorState = ({ scope, key }) => {
-  try {
-    const raw = localStorage.getItem(getScopedStorageKey(scope, key));
-    return raw ? JSON.parse(raw) : null;
-  } catch {
-    return null;
-  }
-};
-
-export const writePersistedEditorState = ({ scope, key, state }) => {
-  try {
-    const storageKey = getScopedStorageKey(scope, key);
-    if (state == null) {
-      localStorage.removeItem(storageKey);
-    } else {
-      localStorage.setItem(storageKey, JSON.stringify(state));
-    }
-  } catch {
-    // localStorage may be unavailable or full (Chromium ~10 MB cap). Editor
-    // state is non-critical — content lives in Redux — so silently ignore.
-  }
-};
-
-export const captureEditorState = (editor) => {
-  if (!editor) return null;
-  const doc = editor.getDoc();
-  const folds = editor
-    .getAllMarks()
-    .filter((m) => m.__isFold)
-    .map((m) => m.find())
-    .filter(Boolean)
-    .map((range) => range.from);
-  return {
-    contentLength: doc.getValue().length,
-    cursor: doc.getCursor(),
-    selections: doc.listSelections(),
-    history: doc.getHistory(),
-    folds,
-    scrollY: editor.getScrollInfo().top
-  };
-};
-
-export const applyEditorState = (editor, state, currentContent) => {
-  if (!editor || !state) return;
-  const doc = editor.getDoc();
-  const contentMatches = state.contentLength === (currentContent || '').length;
-
-  // History/cursor/selection only make sense if content didn't drift — applying
-  // a stale undo stack to different content would let Cmd-Z replay edits that
-  // no longer correspond to anything visible.
-  if (contentMatches) {
-    if (state.history) {
-      try { doc.setHistory(state.history); } catch {}
-    }
-    if (state.cursor) {
-      try { doc.setCursor(state.cursor); } catch {}
-    }
-    if (state.selections && state.selections.length) {
-      try { doc.setSelections(state.selections); } catch {}
-    }
-  }
-  // Folds are cheap and lenient — try them either way.
-  // Sort innermost-first (line desc): when folds are nested, applying the
-  // inner one before the outer one is safer because brace-fold's findRange
-  // re-scans the line text. With outer-first, deeply nested arrays inside a
-  // folded object can fail to refold (issue specific to JSON arrays where
-  // the helper's lookback can land on the wrong opening character once the
-  // outer block is collapsed).
-  if (state.folds && state.folds.length) {
-    const sorted = [...state.folds].sort(
-      (a, b) => b.line - a.line || b.ch - a.ch
-    );
-    editor.operation(() => {
-      sorted.forEach((from) => {
-        try {
-          editor.foldCode(from, null, 'fold');
-        } catch {}
-      });
-    });
-  }
-  if (state.scrollY != null) {
-    try { editor.scrollTo(null, state.scrollY); } catch {}
-  }
-};

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

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

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

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

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

@@ -1,61 +0,0 @@
-import styled from 'styled-components';
-import { rgba } from 'polished';
-
-const StyledWrapper = styled.div`
-  .code-snippet {
-    font-family: monospace;
-    font-size: ${(props) => props.theme.font.size.xs};
-    line-height: 1.4;
-    overflow-x: auto;
-    border-radius: ${(props) => props.theme.border.radius.base};
-    background-color: ${(props) => props.theme.background.elevated};
-    border: 1px solid ${(props) => props.theme.border.border2};
-  }
-
-  .code-line {
-    display: flex;
-    align-items: stretch;
-  }
-
-  .code-line.highlighted-error {
-    background-color: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
-    border-left: 3px solid ${(props) => props.theme.colors.text.danger};
-  }
-
-  .code-line.highlighted-warning {
-    background-color: ${(props) => rgba(props.theme.colors.text.warning, 0.1)};
-    border-left: 3px solid ${(props) => props.theme.colors.text.warning};
-  }
-
-  .code-line:not(.highlighted-error):not(.highlighted-warning) {
-    border-left: 3px solid transparent;
-  }
-
-  .code-line-number {
-    min-width: 2.5rem;
-    text-align: right;
-    padding: 0 0.5rem;
-    color: ${(props) => props.theme.colors.text.muted};
-    user-select: none;
-    flex-shrink: 0;
-  }
-
-  .code-line-content {
-    white-space: pre;
-    padding: 0 0.5rem;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .code-line-separator {
-    border-left: 3px solid transparent;
-  }
-
-  .separator-content {
-    color: ${(props) => props.theme.colors.text.muted};
-    user-select: none;
-    padding: 0 0.5rem;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const renderLine = (line, highlightClass, hunkIdx) => {
-  const isHighlighted = line.isHighlighted || line.isError;
-  const key = hunkIdx != null ? `${hunkIdx}-${line.lineNumber}` : line.lineNumber;
-  return (
-    <div
-      key={key}
-      className={`code-line ${isHighlighted ? highlightClass : ''}`}
-      data-testid={isHighlighted ? 'code-line-error' : 'code-line'}
-    >
-      <span className="code-line-number">{line.lineNumber}</span>
-      <span className="code-line-content">
-        {isHighlighted ? '> ' : '  '}{line.content}
-      </span>
-    </div>
-  );
-};
-
-const CodeSnippet = ({ lines, hunks, variant = 'error' }) => {
-  const highlightClass = variant === 'warning' ? 'highlighted-warning' : 'highlighted-error';
-
-  if (hunks?.length) {
-    return (
-      <StyledWrapper>
-        <div className="code-snippet" data-testid="code-snippet">
-          {hunks.map((hunk, idx) => (
-            <React.Fragment key={idx}>
-              {hunk.hasSeparatorBefore && (
-                <div className="code-line code-line-separator">
-                  <span className="code-line-number"></span>
-                  <span className="code-line-content separator-content">{'\u22EE'}</span>
-                </div>
-              )}
-              {hunk.lines.map((line) => renderLine(line, highlightClass, idx))}
-            </React.Fragment>
-          ))}
-        </div>
-      </StyledWrapper>
-    );
-  }
-
-  if (!lines?.length) return null;
-
-  return (
-    <StyledWrapper>
-      <div className="code-snippet" data-testid="code-snippet">
-        {lines.map((line) => renderLine(line, highlightClass))}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default CodeSnippet;

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

@@ -1,140 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
-import CodeSnippet from './index';
-
-const theme = {
-  font: { size: { xs: '0.75rem' } },
-  background: { elevated: '#f5f5f5' },
-  border: { border2: '#e0e0e0', radius: { base: '4px' } },
-  colors: { text: { danger: '#ef4444', warning: '#f59e0b', muted: '#999' } }
-};
-
-const renderWithTheme = (component) => {
-  return render(
-    <ThemeProvider theme={theme}>
-      {component}
-    </ThemeProvider>
-  );
-};
-
-const sampleLines = [
-  { lineNumber: 3, content: 'const a = 1;', isHighlighted: false },
-  { lineNumber: 4, content: 'undefinedVar.foo();', isHighlighted: true },
-  { lineNumber: 5, content: 'const b = 2;', isHighlighted: false }
-];
-
-describe('CodeSnippet', () => {
-  it('should render nothing when lines is empty', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={[]} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('should render nothing when lines is null', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={null} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('should render all lines with line numbers', () => {
-    renderWithTheme(<CodeSnippet lines={sampleLines} />);
-    expect(screen.getByText('3')).toBeInTheDocument();
-    expect(screen.getByText('4')).toBeInTheDocument();
-    expect(screen.getByText('5')).toBeInTheDocument();
-  });
-
-  it('should apply error highlight class by default', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={sampleLines} variant="error" />);
-    const highlightedLine = container.querySelector('.highlighted-error');
-    expect(highlightedLine).toBeInTheDocument();
-  });
-
-  it('should apply warning highlight class when variant is warning', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={sampleLines} variant="warning" />);
-    const highlightedLine = container.querySelector('.highlighted-warning');
-    expect(highlightedLine).toBeInTheDocument();
-    expect(container.querySelector('.highlighted-error')).not.toBeInTheDocument();
-  });
-
-  it('should show > prefix on highlighted line for accessibility', () => {
-    const { container } = renderWithTheme(<CodeSnippet lines={sampleLines} />);
-    const codeLineContents = container.querySelectorAll('.code-line-content');
-    // The highlighted line (index 1) should start with "> "
-    expect(codeLineContents[1].textContent).toContain('> ');
-    // Non-highlighted lines should not have ">"
-    expect(codeLineContents[0].textContent).not.toContain('>');
-  });
-
-  it('should also support isError property for backward compatibility', () => {
-    const linesWithIsError = [
-      { lineNumber: 1, content: 'line 1', isError: false },
-      { lineNumber: 2, content: 'error line', isError: true },
-      { lineNumber: 3, content: 'line 3', isError: false }
-    ];
-    const { container } = renderWithTheme(<CodeSnippet lines={linesWithIsError} />);
-    expect(container.querySelector('.highlighted-error')).toBeInTheDocument();
-  });
-
-  describe('hunks prop', () => {
-    const sampleHunks = [
-      {
-        hasSeparatorBefore: false,
-        lines: [
-          { lineNumber: 1, content: 'const a = true;', isHighlighted: false },
-          { lineNumber: 2, content: 'pm.vault.get();', isHighlighted: true },
-          { lineNumber: 3, content: 'const b = false;', isHighlighted: false }
-        ]
-      },
-      {
-        hasSeparatorBefore: true,
-        lines: [
-          { lineNumber: 10, content: 'const x = null;', isHighlighted: false },
-          { lineNumber: 11, content: 'pm.cookies.jar();', isHighlighted: true },
-          { lineNumber: 12, content: 'const y = undefined;', isHighlighted: false }
-        ]
-      }
-    ];
-
-    it('should render all lines from all hunks', () => {
-      renderWithTheme(<CodeSnippet hunks={sampleHunks} variant="warning" />);
-      // line numbers
-      expect(screen.getByText('1')).toBeInTheDocument();
-      expect(screen.getByText('2')).toBeInTheDocument();
-      expect(screen.getByText('10')).toBeInTheDocument();
-      expect(screen.getByText('11')).toBeInTheDocument();
-      // content
-      expect(screen.getByText(/const a = true;/)).toBeInTheDocument();
-      expect(screen.getByText(/pm\.vault\.get\(\);/)).toBeInTheDocument();
-      expect(screen.getByText(/const x = null;/)).toBeInTheDocument();
-      expect(screen.getByText(/pm\.cookies\.jar\(\);/)).toBeInTheDocument();
-    });
-
-    it('should render separator between hunks when hasSeparatorBefore is true', () => {
-      const { container } = renderWithTheme(<CodeSnippet hunks={sampleHunks} variant="warning" />);
-      const separators = container.querySelectorAll('.code-line-separator');
-      expect(separators).toHaveLength(1);
-      // separator should appear between the two hunks, not before the first
-      const allRows = container.querySelectorAll('.code-line, .code-line-separator');
-      const separatorIndex = Array.from(allRows).findIndex((el) => el.classList.contains('code-line-separator'));
-      // first hunk has 3 lines (indices 0-2), separator should be at index 3
-      expect(separatorIndex).toBe(3);
-    });
-
-    it('should render the ellipsis character in separator', () => {
-      const { container } = renderWithTheme(<CodeSnippet hunks={sampleHunks} variant="warning" />);
-      const separator = container.querySelector('.separator-content');
-      expect(separator.textContent).toBe('\u22EE');
-    });
-
-    it('should apply warning highlights within hunks', () => {
-      const { container } = renderWithTheme(<CodeSnippet hunks={sampleHunks} variant="warning" />);
-      const highlighted = container.querySelectorAll('.highlighted-warning');
-      expect(highlighted).toHaveLength(2);
-    });
-
-    it('should render nothing when hunks is empty array', () => {
-      const { container } = renderWithTheme(<CodeSnippet hunks={[]} />);
-      expect(container.firstChild).toBeNull();
-    });
-  });
-});

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

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

@@ -57,31 +57,29 @@ const ApiKeyAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Key</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Key</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={apikeyAuth.key || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAuthChange('key', val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Value</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Value</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={apikeyAuth.value || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAuthChange('value', val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Add To</label>
+      <label className="block font-medium mb-2">Add To</label>
       <div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           <div

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

@@ -7,13 +7,21 @@ const Wrapper = styled.div`
     background: transparent;
 
     .auth-mode-label {
-      color: ${(props) => props.theme.primary.text};
-
-      .caret {
-        color: rgb(140, 140, 140);
-        fill: rgb(140, 140, 140);
-      }
+      color: ${(props) => props.theme.colors.text.yellow};
     }
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .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, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,82 +9,113 @@ import StyledWrapper from './StyledWrapper';
 
 const AuthMode = ({ collection }) => {
   const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
   const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
 
-  const onModeChange = useCallback((value) => {
+  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) => {
     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: 'oauth1',
-      label: 'OAuth 1.0',
-      onClick: () => onModeChange('oauth1')
-    },
-    {
-      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">
-        <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} />
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('awsv4');
+            }}
+          >
+            AWS Sig v4
           </div>
-        </MenuDropdown>
+          <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>
       </div>
     </StyledWrapper>
   );

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

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

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

@@ -123,20 +123,19 @@ const AwsV4Auth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Access Key ID</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.accessKeyId || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAccessKeyIdChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-3 flex items-center">
+      <label className="block font-medium mb-2">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-2 flex items-center">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -144,56 +143,51 @@ 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 mb-1">Session Token</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Session Token</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.sessionToken || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleSessionTokenChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Service</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Service</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.service || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleServiceChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Region</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Region</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.region || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleRegionChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Profile Name</label>
-      <div className="single-line-editor-wrapper">
+      <label className="block font-medium mb-2">Profile Name</label>
+      <div className="single-line-editor-wrapper mb-2">
         <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,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {

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

@@ -47,19 +47,18 @@ const BasicAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Username</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={basicAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Password</label>
+      <label className="block font-medium mb-2">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={basicAuth.password || ''}
@@ -68,7 +67,6 @@ 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,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {

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

@@ -33,7 +33,7 @@ const BearerAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Token</label>
+      <label className="block font-medium mb-2">Token</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={bearerToken}
@@ -42,7 +42,6 @@ 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,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {

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

@@ -47,19 +47,18 @@ const DigestAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Username</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={digestAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Password</label>
+      <label className="block font-medium mb-2">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={digestAuth.password || ''}
@@ -68,7 +67,6 @@ 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,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {

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

@@ -64,20 +64,19 @@ const NTLMAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Username</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={ntlmAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Password</label>
-      <div className="single-line-editor-wrapper mb-3 flex items-center">
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -85,12 +84,11 @@ const NTLMAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
-          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block mb-1">Domain</label>
+      <label className="block font-medium mb-2">Domain</label>
       <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={ntlmAuth.domain || ''}
@@ -98,7 +96,6 @@ const NTLMAuth = ({ collection }) => {
           onSave={handleSave}
           onChange={(val) => handleDomainChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
     </StyledWrapper>

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import OAuth1 from 'components/RequestPane/Auth/OAuth1';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-
-const CollectionOAuth1 = ({ collection }) => {
-  const dispatch = useDispatch();
-  const request = collection.draft?.root
-    ? get(collection, 'draft.root.request', {})
-    : get(collection, 'root.request', {});
-
-  const save = () => dispatch(saveCollectionSettings(collection.uid));
-
-  return (
-    <OAuth1
-      collection={collection}
-      request={request}
-      save={save}
-      updateAuth={updateCollectionAuth}
-    />
-  );
-};
-
-export default CollectionOAuth1;