Update React coding standards in CODING_STANDARDS.md

Added new coding standards for React components and hooks usage.

.coderabbit.yaml

@@ -23,24 +23,10 @@ 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:
-        - Follow the guidance in `docs/playwright-testing-guide.md` - the canonical E2E guide (structure, fixtures, best practices).
-        - For anything the guide above doesn't cover, follow standard Playwright and e2e automation best practices
+        - Follow best practices for Playwright code and e2e automation
         - Try to reduce usage of `page.waitForTimeout();` in code unless absolutely necessary and the locator cannot be found using existing `expect()` playwright calls
         - Avoid using `page.pause()` in code
         - Use locator variables for locators

.gitattributes

@@ -1,2 +0,0 @@
-# Force LF line endings for all text files
-* text=auto eol=lf

.github/CODEOWNERS

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

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -49,21 +49,14 @@ body:
   - type: textarea
     attributes:
       label: Describe the bug
-      description: A clear and concise description of the bug and how it's affecting your work
+      description: A clear and concise description of the bug and how it's effecting your work along with steps to reproduce. 
     validations:
       required: true
 
   - type: textarea
     attributes:
-      label: Steps to reproduce
-      description: The exact steps that can be performed to reproduce the issue
-    validations:
-      required: true
-
-  - type: textarea
-    attributes:
-      label: Collection to reproduce 
-      description: If possible, please attach the collection where the bug is present
+      label: .bru file to reproduce the bug
+      description: Attach your .bru file here that can reproduce the problem.
     validations:
       required: false
 

.github/ISSUE_TEMPLATE/config.yaml

@@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: Discussions
     url: https://github.com/usebruno/bruno/discussions

.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,18 +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
-
-        CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-        if [[ -f "$CHROME_SANDBOX" ]]; then
-          sudo chown root "$CHROME_SANDBOX"
-          sudo chmod 4755 "$CHROME_SANDBOX"
-        fi

.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,14 +1,5 @@
 name: 'Setup Node Dependencies'
 description: 'Install Node.js and npm dependencies'
-inputs:
-  skip-build:
-    description: 'Skip building libraries'
-    required: false
-    default: 'false'
-  shell:
-    description: 'Shell to use (bash, pwsh)'
-    required: false
-    default: 'bash'
 runs:
   using: 'composite'
   steps:
@@ -18,14 +9,13 @@ runs:
         node-version: v22.17.0
         cache: 'npm'
         cache-dependency-path: './package-lock.json'
-
+    
     - name: Install node dependencies
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: npm ci --legacy-peer-deps
-
+    
     - name: Build libraries
-      if: inputs.skip-build != 'true'
-      shell: ${{ inputs.shell }}
+      shell: bash
       run: |
         npm run build:graphql-docs
         npm run build:bruno-query

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

@@ -7,13 +7,13 @@ runs:
       shell: bash
       run: |
         set -euo pipefail
-
+        
         xvfb-run npm run test:e2e:ssl
 
     - name: Upload Playwright Report
       if: ${{ !cancelled() }}
       uses: actions/upload-artifact@v4
       with:
-        name: playwright-report-linux-ssl
+        name: playwright-report-linux
         path: playwright-report/
         retention-days: 30

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

@@ -11,8 +11,5 @@ runs:
           libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
           xvfb libxml2-utils
 
-        CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-        if [[ -f "$CHROME_SANDBOX" ]]; then
-          sudo chown root "$CHROME_SANDBOX"
-          sudo chmod 4755 "$CHROME_SANDBOX"
-        fi
+        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/ssl/macos/run-ssl-e2e-tests/action.yml

@@ -12,6 +12,6 @@ runs:
       if: ${{ !cancelled() }}
       uses: actions/upload-artifact@v4
       with:
-        name: playwright-report-macos-ssl
+        name: playwright-report-macos
         path: playwright-report/
         retention-days: 30

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

@@ -12,6 +12,6 @@ runs:
       if: ${{ !cancelled() }}
       uses: actions/upload-artifact@v4
       with:
-        name: playwright-report-windows-ssl
+        name: playwright-report-windows
         path: playwright-report/
         retention-days: 30

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

@@ -1,38 +0,0 @@
-name: 'Run Benchmark Tests'
-description: 'Run Playwright benchmark tests and compare against baseline'
-inputs:
-  os:
-    description: 'Operating system (ubuntu, macos, windows)'
-    default: 'ubuntu'
-  update-baseline:
-    description: 'Update baseline instead of comparing'
-    default: 'false'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run Benchmark Tests (Ubuntu)
-      if: inputs.os == 'ubuntu'
-      shell: bash
-      run: xvfb-run npm run test:benchmark
-
-    - name: Run Benchmark Tests
-      if: inputs.os != 'ubuntu'
-      shell: bash
-      run: npm run test:benchmark
-
-    - name: Update Baseline
-      if: inputs.update-baseline == 'true'
-      shell: bash
-      run: >-
-        node tests/benchmarks/utils/compare.js
-        --results tests/benchmarks/results/mounting.json
-        --baseline tests/benchmarks/mounting/baseline.${{ inputs.os }}.json
-        --update-baseline
-
-    - name: Compare Against Baseline
-      if: inputs.update-baseline != 'true'
-      shell: bash
-      run: >-
-        node tests/benchmarks/utils/compare.js
-        --results tests/benchmarks/results/mounting.json
-        --baseline tests/benchmarks/mounting/baseline.${{ inputs.os }}.json

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

@@ -1,41 +0,0 @@
-name: 'Run CLI Tests'
-description: 'Setup dependencies, start local testbench and run CLI tests'
-inputs:
-  shell:
-    description: 'Shell to use (bash, pwsh)'
-    required: false
-    default: 'bash'
-runs:
-  using: 'composite'
-  steps:
-    - name: Install Test Collection Dependencies
-      shell: ${{ inputs.shell }}
-      run: npm ci --prefix packages/bruno-tests/collection
-
-    - name: Run Local Testbench and CLI Tests
-      if: inputs.shell != 'pwsh'
-      shell: ${{ inputs.shell }}
-      run: |
-        npm start --workspace=packages/bruno-tests &
-        sleep 5
-        cd packages/bruno-tests/collection
-        node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit --sandbox developer
-
-    - name: Run Local Testbench and CLI Tests - Windows
-      if: inputs.shell == 'pwsh'
-      shell: pwsh
-      run: |
-        $process = Start-Process "npm.cmd" `
-          -ArgumentList "start","--workspace=packages/bruno-tests" `
-          -NoNewWindow `
-          -PassThru
-
-        Start-Sleep -Seconds 5
-
-        if ($process.HasExited) {
-          Write-Error "Server exited early"
-          exit 1
-        }
-
-        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,26 +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'
-  shell:
-    description: 'Shell to use (bash, pwsh)'
-    required: false
-    default: 'bash'
-runs:
-  using: 'composite'
-  steps:
-    - name: Install Test Collection Dependencies
-      shell: ${{ inputs.shell }}
-      run: npm ci --prefix packages/bruno-tests/collection
-
-    - name: Run Playwright Tests (Ubuntu)
-      if: inputs.os == 'ubuntu'
-      shell: bash
-      run: xvfb-run dbus-run-session -- npm run test:e2e
-
-    - name: Run Playwright Tests
-      if: inputs.os != 'ubuntu'
-      shell: ${{ inputs.shell }}
-      run: npm run test:e2e

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

@@ -1,53 +0,0 @@
-name: 'Run Unit Tests'
-description: 'Setup dependencies and run unit tests for all packages'
-inputs:
-  shell:
-    description: 'Shell to use (bash, pwsh)'
-    required: false
-    default: 'bash'
-runs:
-  using: 'composite'
-  steps:
-    - name: Test Package bruno-js
-      shell: ${{ inputs.shell }}
-      run: npm run test:ci --workspace=packages/bruno-js
-
-    - name: Test Package bruno-cli
-      shell: ${{ inputs.shell }}
-      run: npm run test:ci --workspace=packages/bruno-cli
-
-    - name: Test Package bruno-query
-      shell: ${{ inputs.shell }}
-      run: npm run test --workspace=packages/bruno-query
-
-    - name: Test Package bruno-lang
-      shell: ${{ inputs.shell }}
-      run: npm run test --workspace=packages/bruno-lang
-
-    - name: Test Package bruno-schema
-      shell: ${{ inputs.shell }}
-      run: npm run test --workspace=packages/bruno-schema
-
-    - name: Test Package bruno-app
-      shell: ${{ inputs.shell }}
-      run: npm run test --workspace=packages/bruno-app
-
-    - name: Test Package bruno-common
-      shell: ${{ inputs.shell }}
-      run: npm run test --workspace=packages/bruno-common
-
-    - name: Test Package bruno-converters
-      shell: ${{ inputs.shell }}
-      run: npm run test:ci --workspace=packages/bruno-converters
-
-    - name: Test Package bruno-electron
-      shell: ${{ inputs.shell }}
-      run: npm run test:ci --workspace=packages/bruno-electron
-
-    - name: Test Package bruno-requests
-      shell: ${{ inputs.shell }}
-      run: npm run test --workspace=packages/bruno-requests
-
-    - name: Test Package bruno-filestore
-      shell: ${{ inputs.shell }}
-      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/benchmarks.yml

@@ -1,91 +0,0 @@
-name: Benchmarks
-on:
-  workflow_dispatch:
-    inputs:
-      update-baseline:
-        description: 'Update baseline with current results instead of comparing'
-        type: boolean
-        default: false
-  pull_request:
-    branches: [main, 'release/v*']
-
-jobs:
-  benchmark:
-    name: Performance Benchmarks (${{ matrix.os }})
-    timeout-minutes: 60
-    runs-on: ${{ matrix.os }}
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-24.04, macos-latest, windows-latest]
-        include:
-          - os: ubuntu-24.04
-            os-name: ubuntu
-          - os: macos-latest
-            os-name: macos
-          - os: windows-latest
-            os-name: windows
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Install System Dependencies (Ubuntu)
-        if: matrix.os-name == '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: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Configure Chrome Sandbox
-        if: matrix.os-name == 'ubuntu'
-        run: |
-          CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-          if [[ -f "$CHROME_SANDBOX" ]]; then
-            sudo chown root "$CHROME_SANDBOX"
-            sudo chmod 4755 "$CHROME_SANDBOX"
-          fi
-
-      - name: Run Benchmark Tests
-        uses: ./.github/actions/tests/run-benchmark-tests
-        with:
-          os: ${{ matrix.os-name }}
-          update-baseline: ${{ github.event.inputs.update-baseline || 'false' }}
-
-      - name: Upload Benchmark Results
-        uses: actions/upload-artifact@v6
-        if: ${{ !cancelled() }}
-        with:
-          name: benchmark-results-${{ matrix.os-name }}
-          path: |
-            tests/benchmarks/results/
-            benchmark-report/
-          retention-days: 30
-
-      - name: Commit Updated Baseline
-        if: github.event.inputs.update-baseline == 'true'
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add tests/benchmarks/mounting/baseline.${{ matrix.os-name }}.json
-          git diff --staged --quiet || git commit -m "chore: update ${{ matrix.os-name }} benchmark baseline" && git push
-
-      - name: Comment Benchmark Results on PR
-        if: github.event_name == 'pull_request' && !cancelled()
-        continue-on-error: true
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const run = require('./tests/benchmarks/utils/pr-comment.js');
-            await run({
-              github,
-              context,
-              resultsPath: 'tests/benchmarks/results/mounting.json',
-              baselinePath: 'tests/benchmarks/mounting/baseline.${{ matrix.os-name }}.json',
-              title: 'Benchmark Results — Collection Mount (${{ matrix.os-name }})'
-            });

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

@@ -1,123 +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
-          CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-          if [[ -f "$CHROME_SANDBOX" ]]; then
-            sudo chown root "$CHROME_SANDBOX"
-            sudo chmod 4755 "$CHROME_SANDBOX"
-          fi
-
-      - 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/ssl-tests.yml

@@ -0,0 +1,91 @@
+name: SSL Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  tests-for-linux:
+    name: SSL 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/ssl/linux/setup-feature-specific-deps
+
+      - name: Setup CA Certificates
+        uses: ./.github/actions/ssl/linux/setup-ca-certs
+
+      - name: Run Basic SSL CLI Tests
+        uses: ./.github/actions/ssl/linux/run-basic-ssl-cli-tests
+
+      - name: Run Custom CA Certs CLI Tests
+        uses: ./.github/actions/ssl/linux/run-custom-ca-certs-cli-tests
+
+      - name: Run Custom CA Certs E2E Tests
+        uses: ./.github/actions/ssl/linux/run-ssl-e2e-tests
+
+  tests-for-macos:
+    name: SSL 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: Setup Feature Dependencies
+        uses: ./.github/actions/ssl/macos/setup-feature-specific-deps
+
+      - name: Setup CA Certificates
+        uses: ./.github/actions/ssl/macos/setup-ca-certs
+
+      - name: Run Basic SSL CLI Tests
+        uses: ./.github/actions/ssl/macos/run-basic-ssl-cli-tests
+
+      - name: Run Custom CA Certs CLI Tests
+        uses: ./.github/actions/ssl/macos/run-custom-ca-certs-cli-tests
+
+      - name: Run Custom CA Certs E2E Tests
+        uses: ./.github/actions/ssl/macos/run-ssl-e2e-tests
+
+  tests-for-windows:
+    name: SSL 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: Setup CA Certificates
+        uses: ./.github/actions/ssl/windows/setup-ca-certs
+
+      - name: Run Basic SSL CLI Tests
+        uses: ./.github/actions/ssl/windows/run-basic-ssl-cli-tests
+
+      - name: Run Custom CA Certs CLI Tests
+        uses: ./.github/actions/ssl/windows/run-custom-ca-certs-cli-tests
+
+      - name: Run Custom CA Certs E2E Tests
+        uses: ./.github/actions/ssl/windows/run-ssl-e2e-tests

.github/workflows/tests-linux.yml

@@ -1,146 +0,0 @@
-name: Linux Tests
-on:
-  workflow_dispatch:
-  push:
-    branches: [main, 'release/v*']
-  pull_request:
-    branches: [main, 'release/v*']
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  unit-test:
-    name: Unit Tests (Linux)
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Unit Tests
-        uses: ./.github/actions/tests/run-unit-tests
-
-  cli-test:
-    name: CLI Tests (Linux)
-    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: Run CLI Tests
-        uses: ./.github/actions/tests/run-cli-tests
-
-      - name: Publish Test Report
-        uses: EnricoMi/publish-unit-test-result-action@v2
-        if: always()
-        with:
-          check_name: CLI Test Results (Linux)
-          files: packages/bruno-tests/collection/junit.xml
-          comment_mode: always
-          check_run: false
-
-  e2e-test:
-    name: Playwright E2E Tests (Linux)
-    timeout-minutes: 240
-    runs-on: ubuntu-24.04
-    steps:
-      - uses: actions/checkout@v6
-
-      - 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 \
-            gsettings-desktop-schemas dbus-x11
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Configure Chrome Sandbox
-        run: |
-          CHROME_SANDBOX="${GITHUB_WORKSPACE}/node_modules/electron/dist/chrome-sandbox"
-          if [[ -f "$CHROME_SANDBOX" ]]; then
-            sudo chown root "$CHROME_SANDBOX"
-            sudo chmod 4755 "$CHROME_SANDBOX"
-          fi
-
-      - name: Run E2E 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-linux
-          path: playwright-report/
-          retention-days: 30
-
-  ssl-test:
-    name: SSL 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/ssl/linux/setup-feature-specific-deps
-
-      - name: Setup CA Certificates
-        uses: ./.github/actions/ssl/linux/setup-ca-certs
-
-      - name: Run Basic SSL CLI Tests
-        uses: ./.github/actions/ssl/linux/run-basic-ssl-cli-tests
-
-      - name: Run Custom CA Certs CLI Tests
-        uses: ./.github/actions/ssl/linux/run-custom-ca-certs-cli-tests
-
-      - name: Run Custom CA Certs E2E Tests
-        uses: ./.github/actions/ssl/linux/run-ssl-e2e-tests
-
-  oauth1-tests:
-    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

.github/workflows/tests-macos.yml

@@ -1,127 +0,0 @@
-name: macOS Tests
-on:
-  workflow_dispatch:
-  push:
-    branches: [main, 'release/v*']
-  pull_request:
-    branches: [main, 'release/v*']
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  unit-test:
-    name: Unit Tests (macOS)
-    timeout-minutes: 60
-    runs-on: macos-latest
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run Unit Tests
-        uses: ./.github/actions/tests/run-unit-tests
-
-  cli-test:
-    name: CLI Tests (macOS)
-    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 CLI Tests
-        uses: ./.github/actions/tests/run-cli-tests
-
-      - name: Publish Test Report
-        uses: EnricoMi/publish-unit-test-result-action/macos@v2
-        if: always()
-        with:
-          check_name: CLI Test Results (macOS)
-          files: packages/bruno-tests/collection/junit.xml
-          comment_mode: off
-          check_run: false
-
-  e2e-test:
-    name: Playwright E2E Tests (macOS)
-    timeout-minutes: 240
-    runs-on: macos-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Run E2E Tests
-        uses: ./.github/actions/tests/run-e2e-tests
-        with:
-          os: macos
-
-      - name: Upload Playwright Report
-        uses: actions/upload-artifact@v6
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report-macos
-          path: playwright-report/
-          retention-days: 30
-
-  ssl-test:
-    name: SSL 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: Setup Feature Dependencies
-        uses: ./.github/actions/ssl/macos/setup-feature-specific-deps
-
-      - name: Setup CA Certificates
-        uses: ./.github/actions/ssl/macos/setup-ca-certs
-
-      - name: Run Basic SSL CLI Tests
-        uses: ./.github/actions/ssl/macos/run-basic-ssl-cli-tests
-
-      - name: Run Custom CA Certs CLI Tests
-        uses: ./.github/actions/ssl/macos/run-custom-ca-certs-cli-tests
-
-      - name: Run Custom CA Certs E2E Tests
-        uses: ./.github/actions/ssl/macos/run-ssl-e2e-tests
-
-  oauth1-tests:
-    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

.github/workflows/tests-windows.yml

@@ -1,138 +0,0 @@
-name: Windows Tests
-on:
-  workflow_dispatch:
-  push:
-    branches: [main, 'release/v*']
-  pull_request:
-    branches: [main, 'release/v*']
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  unit-test:
-    name: Unit Tests (Windows)
-    if: false # @TODO: Temporarily disabled. Remove this once the tests are fixed.
-    timeout-minutes: 60
-    runs-on: windows-latest
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-        with:
-          shell: pwsh
-
-      - name: Run Unit Tests
-        uses: ./.github/actions/tests/run-unit-tests
-        with:
-          shell: pwsh
-
-  cli-test:
-    name: CLI Tests (Windows)
-    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
-        with:
-          shell: pwsh
-
-      - name: Run CLI Tests
-        uses: ./.github/actions/tests/run-cli-tests
-        with:
-          shell: pwsh
-
-      - name: Publish Test Report
-        uses: EnricoMi/publish-unit-test-result-action/windows@v2
-        if: always()
-        with:
-          check_name: CLI Test Results (Windows)
-          files: packages/bruno-tests/collection/junit.xml
-          comment_mode: off
-          check_run: false
-
-  e2e-test:
-    name: Playwright E2E Tests (Windows)
-    timeout-minutes: 240
-    runs-on: windows-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-        with:
-          shell: pwsh
-
-      - name: Run E2E Tests
-        uses: ./.github/actions/tests/run-e2e-tests
-        with:
-          os: windows
-          shell: pwsh
-
-      - name: Upload Playwright Report
-        uses: actions/upload-artifact@v6
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report-windows
-          path: playwright-report/
-          retention-days: 30
-
-  ssl-test:
-    name: SSL 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
-        with:
-          shell: pwsh
-
-      - name: Setup CA Certificates
-        uses: ./.github/actions/ssl/windows/setup-ca-certs
-
-      - name: Run Basic SSL CLI Tests
-        uses: ./.github/actions/ssl/windows/run-basic-ssl-cli-tests
-
-      - name: Run Custom CA Certs CLI Tests
-        uses: ./.github/actions/ssl/windows/run-custom-ca-certs-cli-tests
-
-      - name: Run Custom CA Certs E2E Tests
-        uses: ./.github/actions/ssl/windows/run-ssl-e2e-tests
-
-  oauth1-tests:
-    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/tests.yml

@@ -0,0 +1,152 @@
+name: Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  unit-test:
+    name: Unit Tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    permissions:
+      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
+
+      # 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: Lint Check
+        run: npm run lint
+        env:
+          ESLINT_PLUGIN_DIFF_COMMIT: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}
+
+      # tests
+      - name: Test Package bruno-js
+        run: npm run test --workspace=packages/bruno-js
+      - name: Test Package bruno-cli
+        run: npm run test --workspace=packages/bruno-cli
+
+      - name: Test Package bruno-query
+        run: npm run test --workspace=packages/bruno-query
+      - name: Test Package bruno-lang
+        run: npm run test --workspace=packages/bruno-lang
+      - name: Test Package bruno-schema
+        run: npm run test --workspace=packages/bruno-schema
+      - name: Test Package bruno-app
+        run: npm run test --workspace=packages/bruno-app
+      - name: Test Package bruno-common
+        run: npm run test --workspace=packages/bruno-common
+      - name: Test Package bruno-converters
+        run: npm run test --workspace=packages/bruno-converters
+      - name: Test Package bruno-electron
+        run: npm run test --workspace=packages/bruno-electron
+      - name: Test Package bruno-requests
+        run: npm run test --workspace=packages/bruno-requests
+
+  cli-test:
+    name: CLI Tests
+    runs-on: ubuntu-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      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: 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
+        if: always()
+        with:
+          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/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 dependencies for test collection environment
+      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
+    - uses: actions/upload-artifact@v6
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -49,19 +49,10 @@ bruno.iml
 .idea
 .vscode
 .cursor
-.claude
-.codex
-.agents
-.agent
-skills-lock.json
 
 # Playwright
 /blob-report/
 
-# Benchmark results (generated at runtime)
-tests/benchmarks/results/
-/benchmark-report/
-
 # Development plan files
 CLAUDE.md
 AGENTS.md
@@ -71,4 +62,4 @@ AGENTS.md
 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

.prettierrc.json

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

CODING_STANDARDS.md

@@ -35,10 +35,10 @@
 Remember, these rules are here to make our codebase harmonious. If something doesn't fit perfectly, let's chat about it. Happy coding! 🚀
 
 
-## Tests
+## Tests 
 
 - Add tests for any new functionality or meaningful changes. If code is added, removed, or significantly modified, corresponding tests should be updated or created.
-
+ 
 - Prioritise high-value tests over maximum coverage. Focus on testing behaviour that is critical, complex, or likely to break—don’t chase coverage numbers for their own sake.
 
 - Write behaviour-driven tests, not implementation-driven ones. Tests should validate real expected output and observable behaviour, not internal details or mocked-out logic unless absolutely necessary.
@@ -59,56 +59,13 @@ Remember, these rules are here to make our codebase harmonious. If something doe
 
 - Tests should be fast enough to run continuously. Avoid long-running operations unless absolutely necessary; prefer lightweight fixtures and isolated units.
 
-### E2E Tests
 
-When reviewing Electron-specific Playwright tests, treat `<project-root>/tests/**` as the canonical location for specs, typically matching `<project-root>/tests/**/*.spec.{ts,js}`. For broader Playwright workflow guidance, also refer to `docs/playwright-testing-guide.md`.
-
-Goal: rewrite or critique the tests so they are genuinely behavioural, maintainable, and safely parallelizable.
-
-Rules:
-1. Tests must verify user-visible behaviour, not implementation details.
-   - Prefer assertions on UI state, persisted data, windows, dialogs, filesystem effects, and app-level outcomes.
-   - Avoid hardcoded waits, brittle selectors, fake internal state checks, and “click then expect mock called” tests unless the user behaviour is the point.
-
-2. Tests must be Electron-aware.
-   - Use Electron app launch patterns correctly.
-   - Handle main window, secondary windows, dialogs, menus, native prompts, clipboard, file pickers, and IPC-driven UI behaviour through observable outcomes.
-   - Do not reach into app internals unless absolutely necessary for setup or controlled test fixtures.
-
-3. Tests must be parallel-safe.
-   - No shared user data directories.
-   - No shared ports, files, DBs, caches, clipboard assumptions, or global app state.
-   - Each test gets isolated temp paths, unique workspace/project names, and deterministic cleanup.
-   - Avoid test ordering assumptions.
-
-4. No hardcoded mess.
-   - Replace magic timeouts with event-driven waits.
-   - Replace brittle text/index selectors with role, label, test id, or stable user-facing selectors.
-   - Replace duplicated setup with fixtures.
-   - Replace hardcoded absolute paths with temp dirs.
-   - Replace random sleeps with waiting for actual app signals.
-
-5. Every test should follow this shape:
-   - Arrange: create isolated fixture state.
-   - Act: perform real user actions.
-   - Assert: verify observable behavioural outcome.
-   - Cleanup: remove isolated resources.
-
-6. Centralise locators and actions in page modules under `tests/utils/page/*` — never inline raw selectors in a spec. See the **Best Practices** section of `docs/playwright-testing-guide.md` for the page-module pattern and `buildCommonLocators` usage.
-
-For each test file:
-- Identify behavioural vs non-behavioural tests.
-- Flag brittle selectors, hardcoded waits, shared state, serial dependencies, and fake assertions.
-- Rewrite the tests using Playwright best practices for Electron.
-- Make them parallel-ready.
-- Explain briefly why each rewrite is better.
-
-## UI Specific instructions
+## UI Specific instructions 
 
 ### React
 
-- Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any react component using the styled component
-- Styled Components are used as wrappers to define both self and children components style, tailwind classes are used specifically for layout based styles.
+- 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.
@@ -118,8 +75,6 @@ For each test file:
   - 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.
 
 
 ## Readability and Abstractions
@@ -130,4 +85,3 @@ For each test file:
 - Follow functional programming but just enough to be readable, we don't need to go as deep as ADTs and Monads, we want to keep the code pipeline obvious and easy for everyone to read and contribute to.
 - Avoid single line abstractions where all that's being done is increasing the call stack with one additional function.
 - Add in meaningful comments instead of obvious ones where complex code flow is explained properly.
-- Avoid optional chaining (`?.`) where it doesn't make sense — it hides whether a value can genuinely be null and works against TypeScript's guarantees. Only use it when the null case is handled right there (fallback, early return, or guard); otherwise fix the type or narrow first.

docs/playwright-testing-guide.md

@@ -45,7 +45,7 @@ npm run test:codegen
 2. Playwright Inspector opens in a separate window
 3. You interact with the Bruno UI
 4. Actions are recorded and converted to test code
-5. The generated test file is saved in `tests/`
+5. The generated test file is saved in `e2e-tests/`
 
 ### Codegen Workflow
 
@@ -97,24 +97,20 @@ test('Test with temporary data', async ({ page, createTmpDir }) => {
 ### Directory Structure
 
 ```
-tests/
-├── common/                             # Basic functionality tests
-│   ├── home-screen.spec.ts
-│   └── create-new-collection.spec.ts
-├── feature-a/                          # Specific feature tests
-├── utils/                              # Test utilities and helpers
-│   ├── page/
-│   │   ├── locators.ts                # common locators and merged sub feature locators
-│   │   ├── actions.ts                 # common actions
-│   │   ├── feature-a.ts               # Feature A specific locator builder and actions
-│   │   └── feature-b.ts               # Feature B specific locator builder and actions
+e2e-tests/
+├── 001-sanity-tests/          # Basic functionality tests
+│   ├── 001-home-screen.spec.ts
+│   └── 002-create-new-collection-and-new-request.spec.ts
+├── 002-feature-tests/         # Specific feature tests
+├── 003-integration-tests/     # Complex workflow tests
+└── bruno-testbench/           # Test utilities and helpers
 ```
 
 ### Naming Conventions
 
 - **Files**: Use descriptive names with `.spec.ts` extension
 - **Tests**: Use clear, descriptive test names
-- **Folders**: Use for grouping the tests
+- **Folders**: Use numbered prefixes for ordering
 
 ### Test File Template
 
@@ -171,10 +167,10 @@ test('Test with multiple fixtures', async ({ page, createTmpDir, electronApp })
 npm run test:e2e
 
 # Run specific test file
-npx playwright test tests/common/home-screen.spec.ts
+npx playwright test e2e-tests/001-sanity-tests/001-home-screen.spec.ts
 
 # Run tests in a specific folder
-npx playwright test tests/folder-a/
+npx playwright test e2e-tests/001-sanity-tests/
 ```
 
 ### Advanced Options
@@ -196,253 +192,113 @@ npx playwright test --debug
 npx playwright test --trace on
 ```
 
+### CI/CD Integration
+
+```bash
+# Install browsers for CI
+npx playwright install
+
+# Run tests in CI mode
+npm run test:e2e
+```
+
 ## Best Practices
 
-### 1. Centralize Locators and Actions in Page Modules
-
-**Never inline raw `page.locator(...)` / `page.getByTestId(...)` selectors in a spec.** Locators and the interactions that use them live in **page modules** under `tests/utils/page/*`, and specs consume them through the shared builders and exported actions. This keeps selectors single-sourced, so a UI change is fixed in one place instead of across every spec.
-
-**A page module owns one section.** Each file under `tests/utils/page/*` covers a single UI section/domain and exports *both* a locator builder and the actions for that section, co-located. [`mounting.ts`](../tests/utils/page/mounting.ts) is the reference shape — `buildCollectionTreeLocators(page)` lives alongside its actions (`waitForCollectionMount`, `openCollectionFromPath`, `getCollectionTreeStructure`, …) in one file.
-
-**New section → new file → link into common.** Create a new page module for a new section rather than growing the inline object in `locators.ts`, then map its locator builder into `buildCommonLocators` so specs get it for free. This is **required** for every new page module.
-
-A spec builds locators once and destructures the groups it needs — no per-section imports at the call site:
-
-```typescript
-import { test, expect } from '../../playwright';
-import { buildCommonLocators, createCollection, createRequest, closeAllCollections } from '../utils/page';
-
-test('should rename a request via the sidebar', async ({ page, createTmpDir }) => {
-  const { sidebar, actions, dropdown } = buildCommonLocators(page);
-  const testDir = await createTmpDir('rename-test');
-
-  await createCollection(page, 'My Collection', testDir);
-  await createRequest(page, 'Test Request', 'My Collection');
-
-  await sidebar.request('Test Request').hover();
-  await actions.collectionItemActions('Test Request').click();
-  await dropdown.item('Rename').click();
-
-  await closeAllCollections(page);
-});
-```
-
-Defining a new page module (locator builder **and** its actions in one file):
-
-```typescript
-// tests/utils/page/notifications.ts — one file owns the "notifications" section
-import { test, Page } from '../../../playwright';
-
-export const buildNotificationLocators = (page: Page) => ({
-  toast: (text: string) => page.getByTestId('notification-toast').filter({ hasText: text }),
-  dismissButton: () => page.getByTestId('notification-dismiss')
-});
-
-export const dismissNotification = async (page: Page, text: string) => {
-  await test.step(`Dismiss notification "${text}"`, async () => {
-    const notifications = buildNotificationLocators(page);
-    await notifications.toast(text).waitFor({ state: 'visible' });
-    await notifications.dismissButton().click();
-  });
-};
-```
-
-Then link the builder into `buildCommonLocators` so every spec can reach it:
-
-```typescript
-// tests/utils/page/locators.ts
-import { buildNotificationLocators } from './notifications';
-
-export const buildCommonLocators = (page: Page) => ({
-  runner: () => page.getByTestId('run-button'),
-  sidebar: { /* … */ },
-  notifications: buildNotificationLocators(page),   // now buildCommonLocators(page).notifications
-  // …
-});
-```
-
-**Scope of enforcement:**
-
-- **Strict for new tests** — any new spec must go through this pattern; no direct selectors, no duplicated inline queries.
-- **Lenient for existing tests** — small tweaks to an existing spec need not refactor its existing selectors. But if you rewrite or substantially modify a large portion of a spec, extract its selectors and interactions into a page module as part of the change.
-- **Don't retro-link existing modules right now** — some already-extracted modules (e.g. [`mounting.ts`](../tests/utils/page/mounting.ts)) aren't wired into `buildCommonLocators` yet; leave them until their specs are next reworked. The rules above apply going forward, not as a migration mandate.
-- **Long-term goal** — every section is a page module and every module is reachable from `buildCommonLocators`, so locators and actions stay consistent and single-sourced.
-
-### 2. Use Semantic Selectors
-
-Applies to the selectors written *inside* a page module (`locators.ts` or a section file), not the spec.
+### 1. Use Semantic Selectors
 
 **Preferred:**
 
 ```typescript
-page.getByTestId('collection-name');
-page.getByRole('button', { name: 'Create' });
-page.getByLabel('Collection Name');
+await page.getByRole('button', { name: 'Create' }).click();
+await page.getByLabel('Collection Name').fill('test');
+await page.getByText('Success message').toBeVisible();
 ```
 
 **Avoid:**
 
 ```typescript
-page.locator('.btn-primary');
-page.locator('#collection-name');
+await page.locator('.btn-primary').click();
+await page.locator('#collection-name').fill('test');
 ```
 
-### 3. Keep `defaultPreferences` in Sync with App Preferences
+### 2. Create Isolated Tests
 
-E2E launches seed a fresh userData dir from the `defaultPreferences` mock in [`playwright/index.ts`](../playwright/index.ts) (merged into any `init-user-data/preferences.json`). **Whenever you add or change a key in the app's `preferences.json` schema/defaults, add a matching default to that mock** — otherwise tests run against unset preferences and diverge from real app behaviour.
+Each test should be independent and not rely on other tests:
 
 ```typescript
-// playwright/index.ts
-const defaultPreferences = {
-  preferences: {
-    onboarding: {
-      hasLaunchedBefore: true,
-      hasSeenWelcomeModal: true,
-      lastSeenVersion: version
-    }
-    // ← add the default for any new preferences.json key here
-  }
-};
-```
+test('should create collection', async ({ page, createTmpDir }) => {
+  const testDir = await createTmpDir('collection-test');
 
-### 4. Create Isolated Tests
+  // Test creates its own data
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('test-collection');
+  await page.getByLabel('Location').fill(testDir);
 
-Each test should be independent and not rely on other tests — its own temp dir, its own data, deterministic cleanup:
-
-```typescript
-import { test, expect } from '../../playwright';
-import { buildCommonLocators, createCollection, closeAllCollections } from '../utils/page';
-
-test('should create a collection', async ({ page, createTmpDir }) => {
-  const { sidebar } = buildCommonLocators(page);
-  const testDir = await createTmpDir('collection-test');   // isolated per test
-
-  await createCollection(page, 'test-collection', testDir);
-  await expect(sidebar.collection('test-collection')).toBeVisible();
-
-  await closeAllCollections(page);   // deterministic cleanup
+  // Clean up happens automatically via createTmpDir
 });
 ```
 
-### 5. Add Meaningful Assertions
+### 3. Add Meaningful Assertions
 
-Always verify the expected outcome through locators from a page module:
+Always verify the expected outcomes:
 
 ```typescript
-import { test, expect } from '../../playwright';
-import { buildCommonLocators, createCollection, createRequest, saveRequest, closeAllCollections } from '../utils/page';
-
-test('should save a request', async ({ page, createTmpDir }) => {
-  const { tabs } = buildCommonLocators(page);
-  const testDir = await createTmpDir('save-test');
-
+test('should save request successfully', async ({ page }) => {
   // Arrange
-  await createCollection(page, 'Save Test', testDir);
-  await createRequest(page, 'Get Ping', 'Save Test', { url: 'http://localhost:8081/ping', method: 'GET' });
+  await page.getByLabel('Create Collection').click();
 
   // Act
-  await saveRequest(page);
+  await page.getByRole('button', { name: 'Save' }).click();
 
-  // Assert — the tab is open and no longer shows the unsaved-changes indicator
-  await expect(tabs.requestTab('Get Ping')).toBeVisible();
-  await expect(tabs.draftIndicator()).toBeHidden();
-
-  await closeAllCollections(page);
+  // Assert
+  await expect(page.getByText('Request saved successfully')).toBeVisible();
+  await expect(page.getByRole('tab', { name: 'GET request' })).toBeVisible();
 });
 ```
 
-### 6. Keep Assertions in Specs, Not Actions
-
-`expect(...)` belongs in the spec, that's where the test's intent and its pass/fail criteria must be visible. Action helpers in `tests/utils/page/*` perform interactions and synchronize state; they must **not** assert the test's expectations. An action that asserts hides pass/fail logic behind a reusable helper and forces every caller to accept that one expectation.
-
-**Actions synchronize with `waitFor`; specs verify with `expect`.** When an action needs the UI to reach a state before its next step (a modal to open, a spinner to clear), wait with Playwright's wait utilities like `locator.waitFor({ state })`, `page.waitForLoadState()` etc., not `expect`. `waitFor` synchronizes so the next action is reliable; `expect` decides whether the test passes and stays in the spec.
+### 4. Handle Async Operations
 
 ```typescript
-// tests/utils/page/collection.ts — the action WAITS, it does not assert
-export const openRenameModal = async (page: Page, requestName: string) => {
-  await test.step(`Open rename modal for "${requestName}"`, async () => {
-    const { sidebar, actions, dropdown } = buildCommonLocators(page);
-    await sidebar.request(requestName).hover();
-    await actions.collectionItemActions(requestName).click();
-    await dropdown.item('Rename').click();
-    // Synchronization, not assertion — wait until the modal is ready to interact with
-    await page.locator('.bruno-modal').filter({ hasText: 'Rename Request' }).waitFor({ state: 'visible' });
-  });
-};
-```
+test('should wait for network requests', async ({ page }) => {
+  // Wait for specific network request
+  await page.waitForResponse((response) => response.url().includes('/api/endpoint'));
 
-```typescript
-// the spec OWNS the assertion
-test('renames a request', async ({ page, createTmpDir }) => {
-  const { modal } = buildCommonLocators(page);
-  // … arrange: create collection + request …
-
-  await openRenameModal(page, 'Test Request');
-
-  await expect(modal.title('Rename Request')).toBeVisible();   // expect lives here, in the spec
+  // Or wait for element to be stable
+  await page.waitForSelector('[data-testid="loading"]', { state: 'hidden' });
 });
 ```
 
-### 7. Handle Async Operations
-
-Prefer auto-retrying assertions and action helpers that encapsulate the wait; never wait on a raw inline selector.
+### 5. Use Test Data Management
 
 ```typescript
-import { test, expect } from '../../playwright';
-import { buildCommonLocators, sendRequestAndWaitForResponse } from '../utils/page';
-
-test('should wait for async operations', async ({ page }) => {
-  const { response } = buildCommonLocators(page);
-
-  // Action helpers wrap "do the thing + wait for its result"
-  await sendRequestAndWaitForResponse(page, 200);
-
-  // Auto-retrying assertions wait until the condition holds — no hardcoded sleeps
-  await expect(response.statusCode()).toContainText('200');
-  await expect(response.pane()).toBeVisible();
-
-  // page.waitForResponse targets the network (not the DOM), so it's fine to use directly.
-  // Avoid page.waitForSelector('[data-testid="…"]') — wait on a locator from a page module instead.
-});
-```
-
-### 8. Use Test Data Management
-
-```typescript
-import { test, expect } from '../../playwright';
-import { buildCommonLocators, openCollection } from '../utils/page';
-
 test('should work with test data', async ({ page, createTmpDir }) => {
-  const { sidebar } = buildCommonLocators(page);
   const testDir = await createTmpDir('test-data');
 
   // Create test files
   await fs.writeFile(path.join(testDir, 'test.bru'), testContent);
 
-  // Use in test — actions/locators come from page modules, not raw selectors
-  await openCollection(page, 'test-data');
-  await expect(sidebar.collection('test-data')).toBeVisible();
+  // Use in test
+  await page.getByLabel('Open Collection').click();
+  await page.getByText(testDir).click();
 });
 ```
 
 ## Examples
 
-All examples use `buildCommonLocators` for locators and the exported action helpers from `tests/utils/page` — see [Best Practices §1](#1-centralize-locators-and-actions-in-page-modules).
-
 ### Example 1: Basic Collection Creation
 
 ```typescript
 import { test, expect } from '../../playwright';
-import { buildCommonLocators, createCollection, closeAllCollections } from '../utils/page';
 
 test('should create a new collection', async ({ page, createTmpDir }) => {
-  const { sidebar } = buildCommonLocators(page);
   const testDir = await createTmpDir('new-collection');
 
-  await createCollection(page, 'My Test Collection', testDir);
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('My Test Collection');
+  await page.getByLabel('Location').fill(testDir);
+  await page.getByRole('button', { name: 'Create' }).click();
 
-  await expect(sidebar.collection('My Test Collection')).toBeVisible();
-  await closeAllCollections(page);
+  await expect(page.getByText('My Test Collection')).toBeVisible();
 });
 ```
 
@@ -450,29 +306,28 @@ test('should create a new collection', async ({ page, createTmpDir }) => {
 
 ```typescript
 import { test, expect } from '../../playwright';
-import {
-  buildCommonLocators,
-  createCollection,
-  createRequest,
-  sendRequestAndWaitForResponse,
-  closeAllCollections
-} from '../utils/page';
 
-test('should create and execute an HTTP request', async ({ page, createTmpDir }) => {
-  const { response } = buildCommonLocators(page);
+test('should create and execute HTTP request', async ({ page, createTmpDir }) => {
   const testDir = await createTmpDir('request-test');
 
-  await createCollection(page, 'Request Test', testDir);
-  await createRequest(page, 'Ping', 'Request Test', {
-    url: 'http://localhost:8081/ping',
-    method: 'GET'
-  });
+  // Create collection
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('Request Test');
+  await page.getByLabel('Location').fill(testDir);
+  await page.getByRole('button', { name: 'Create' }).click();
 
-  // Sends the active request and asserts the status code in one step
-  await sendRequestAndWaitForResponse(page, 200);
+  // Create request
+  await page.locator('#create-new-tab').getByRole('img').click();
+  await page.getByPlaceholder('Request Name').fill('Test Request');
+  await page.locator('#new-request-url .CodeMirror').click();
+  await page.locator('textarea').fill('http://localhost:8081/ping');
+  await page.getByRole('button', { name: 'Create' }).click();
 
-  await expect(response.statusCode()).toContainText('200');
-  await closeAllCollections(page);
+  // Execute request
+  await page.locator('#send-request').getByRole('img').nth(2).click();
+
+  // Verify response
+  await expect(page.getByRole('main')).toContainText('200 OK');
 });
 ```
 
@@ -480,25 +335,29 @@ test('should create and execute an HTTP request', async ({ page, createTmpDir })
 
 ```typescript
 import { test, expect } from '../../playwright';
-import {
-  buildCommonLocators,
-  createCollection,
-  createEnvironment,
-  addEnvironmentVariable,
-  closeAllCollections
-} from '../utils/page';
 
 test('should create and use environment variables', async ({ page, createTmpDir }) => {
-  const { environment } = buildCommonLocators(page);
   const testDir = await createTmpDir('env-test');
 
-  await createCollection(page, 'Environment Test', testDir);
+  // Setup collection
+  await page.getByLabel('Create Collection').click();
+  await page.getByLabel('Name').fill('Environment Test');
+  await page.getByLabel('Location').fill(testDir);
+  await page.getByRole('button', { name: 'Create' }).click();
 
-  await createEnvironment(page, 'Development');
-  await addEnvironmentVariable(page, { name: 'API_URL', value: 'http://localhost:3000' });
+  // Create environment
+  await page.getByRole('button', { name: 'Environments' }).click();
+  await page.getByRole('button', { name: 'Add Environment' }).click();
+  await page.getByLabel('Environment Name').fill('Development');
+  await page.getByRole('button', { name: 'Create' }).click();
 
-  await expect(environment.varRow('API_URL')).toBeVisible();
-  await closeAllCollections(page);
+  // Add variable
+  await page.getByRole('button', { name: 'Add Variable' }).click();
+  await page.getByLabel('Variable Name').fill('API_URL');
+  await page.getByLabel('Variable Value').fill('http://localhost:3000');
+  await page.getByRole('button', { name: 'Save' }).click();
+
+  await expect(page.getByText('API_URL')).toBeVisible();
 });
 ```
 
@@ -518,14 +377,10 @@ test('should create and use environment variables', async ({ page, createTmpDir
 
 2. **Tests Timing Out**
 
-   First find out *why* it's slow - a timeout is usually a symptom, not the problem. Replace hardcoded waits with auto-retrying assertions, wait on the app-ready signal (`[data-app-state="loaded"]`), and use action helpers that wait for their own result. Bumping the timeout hides the real issue and slows the suite for everyone.
-
-   Only raise the timeout when the test genuinely does long-running work (large import, a slow real endpoint) - and scope it to that test, not globally:
-
    ```typescript
-   // Justified: this test imports a very large collection that legitimately takes ~40s.
-   test('imports a large collection', async ({ page }) => {
-     test.setTimeout(60000); // 60s — the work is genuinely long, not a masked flake
+   // Increase timeout for specific test
+   test('slow test', async ({ page }) => {
+     test.setTimeout(60000); // 60 seconds
      // Test steps
    });
    ```
@@ -557,7 +412,7 @@ test('should create and use environment variables', async ({ page, createTmpDir
 npx playwright test --debug
 
 # Run specific test in debug mode
-npx playwright test --debug tests/common/home-screen.spec.ts
+npx playwright test --debug e2e-tests/001-sanity-tests/001-home-screen.spec.ts
 ```
 
 ### Trace Analysis
@@ -576,11 +431,11 @@ The Playwright configuration is in `playwright.config.ts`:
 
 ```typescript
 export default defineConfig({
-  testDir: './tests',
-  fullyParallel: tue,
+  testDir: './e2e-tests',
+  fullyParallel: false,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: undefined,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? undefined : 1,
 
   projects: [
     {

eslint.config.js

@@ -178,8 +178,7 @@ module.exports = runESMImports().then(() => defineConfig([
       }
     },
     rules: {
-      'no-undef': 'error',
-      'no-case-declarations': 'error'
+      'no-undef': 'error'
     }
   },
   {

package.json

@@ -23,6 +23,7 @@
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
+    "@opencollection/types": "~0.7.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -30,22 +31,19 @@
     "@storybook/react": "^10.1.10",
     "@storybook/react-webpack5": "^10.1.10",
     "@stylistic/eslint-plugin": "^5.3.1",
-    "@types/adm-zip": "^0.5.8",
     "@types/jest": "^29.5.11",
-    "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
     "@typescript-eslint/parser": "^8.39.0",
-    "adm-zip": "^0.5.17",
     "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",
     "husky": "^9.1.7",
     "jest": "^29.2.0",
-    "lodash-es": "^4.17.23",
+    "lodash-es": "^4.17.21",
     "nano-staged": "^0.8.0",
     "playwright": "^1.51.1",
     "pretty-quick": "^3.1.3",
@@ -62,6 +60,7 @@
     "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",
@@ -82,11 +81,9 @@
     "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 --project=system-pac",
+    "test:e2e": "playwright test --project=default",
     "test:e2e:ssl": "playwright test --project=ssl",
-    "test:e2e:auth": "playwright test --project=auth",
-    "test:e2e:sanity": "playwright test --project=default --project=system-pac --grep @sanity",
-    "test:benchmark": "playwright test --config=playwright.benchmark.config.ts",
+    "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
     "lint": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" npx eslint",
     "lint:fix": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" npx eslint --fix",
     "prepare": "husky"
@@ -97,9 +94,7 @@
     ]
   },
   "overrides": {
-    "axios": "1.16.0",
-    "rollup": "3.30.0",
-    "pbkdf2": "3.1.5",
+    "rollup": "3.29.5",
     "electron-store": {
       "conf": {
         "json-schema-typed": "8.0.1"
@@ -107,7 +102,6 @@
     }
   },
   "dependencies": {
-    "ajv": "^8.17.1",
-    "git-url-parse": "^14.1.0"
+    "ajv": "^8.17.1"
   }
 }

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/.prettierrc.json

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

packages/bruno-app/jest.setup.js

@@ -1,19 +1,3 @@
-global.ResizeObserver = class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-};
-
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn()
-  }))
-});
-
 jest.mock('nanoid', () => {
   return {
     nanoid: () => {}

packages/bruno-app/package.json

@@ -8,6 +8,8 @@
     "build": "rsbuild build -m production",
     "preview": "rsbuild preview",
     "test": "jest",
+    "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
+    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\"",
     "storybook": "storybook dev -p 6006 --config-dir storybook",
     "build-storybook": "storybook build --config-dir storybook"
   },
@@ -27,8 +29,6 @@
     "codemirror": "5.65.2",
     "codemirror-graphql": "2.1.1",
     "cookie": "0.7.1",
-    "diff": "^5.2.0",
-    "diff2html": "^3.4.47",
     "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
     "fast-fuzzy": "^1.12.0",
@@ -40,7 +40,7 @@
     "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",
@@ -55,7 +55,7 @@
     "jsonschema": "^1.5.0",
     "know-your-http-well": "^0.5.0",
     "linkify-it": "^5.0.0",
-    "lodash": "4.18.1",
+    "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",
     "mime-types": "^3.0.2",
@@ -87,10 +87,10 @@
     "react-virtuoso": "^4.18.1",
     "sass": "^1.46.0",
     "semver": "^7.7.1",
-    "shell-quote": "^1.8.4",
+    "shell-quote": "^1.8.3",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
-    "swagger-ui-react": "^5.31.0",
+    "swagger-ui-react": "5.17.12",
     "system": "^2.0.1",
     "url": "^0.11.3",
     "xml-formatter": "^3.5.0",
@@ -101,10 +101,9 @@
     "@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/rsbuild.config.mjs

@@ -38,9 +38,6 @@ export default defineConfig({
             dynamicImportMode: "eager",
           },
         },
-        rules: [
-          { test: /\.md$/, type: 'asset/source' }
-        ]
       },
       ignoreWarnings: [
         (warning) =>  warning.message.includes('Critical dependency: the request of a dependency is an expression') && warning?.moduleDescriptor?.name?.includes('flow-parser')

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

@@ -1,317 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  z-index: 10;
-
-  .ai-assist-trigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid transparent;
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
-    opacity: 0.7;
-
-    &:hover,
-    &.open {
-      opacity: 1;
-      color: ${(props) => props.theme.colors.accent};
-      background: ${(props) => props.theme.colors.accent}10;
-      border-color: ${(props) => props.theme.input.border};
-    }
-
-    &:focus-visible {
-      outline: 2px solid ${(props) => props.theme.colors.accent}55;
-      outline-offset: 1px;
-    }
-  }
-
-`;
-
-// Tippy renders the popup into document.body, outside StyledWrapper's subtree.
-export const PopupWrapper = styled.div`
-  width: 360px;
-  background: ${(props) => props.theme.bg};
-  border: 1px solid ${(props) => props.theme.input.border};
-  border-radius: ${(props) => props.theme.border.radius.md};
-  overflow: hidden;
-
-  .popup-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 8px 10px;
-    border-bottom: 1px solid ${(props) => props.theme.input.border};
-  }
-
-  .popup-title {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 11px;
-    font-weight: 600;
-    color: ${(props) => props.theme.text};
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-
-    svg {
-      color: ${(props) => props.theme.colors.accent};
-    }
-  }
-
-  .popup-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: none;
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    transition: background-color 0.15s ease, color 0.15s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.input.bg};
-      color: ${(props) => props.theme.text};
-    }
-  }
-
-  .popup-body {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .popup-input {
-    width: 100%;
-    padding: 8px 10px;
-    font-size: 12px;
-    font-family: inherit;
-    line-height: 1.4;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid ${(props) => props.theme.input.border};
-    background: ${(props) => props.theme.input.bg};
-    color: ${(props) => props.theme.text};
-    resize: vertical;
-    outline: none;
-    transition: border-color 0.15s ease;
-
-    &::placeholder {
-      color: ${(props) => props.theme.colors.text.muted};
-      opacity: 0.85;
-    }
-
-    &:focus {
-      border-color: ${(props) => props.theme.input.focusBorder};
-    }
-
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-  }
-
-  .popup-suggestions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .suggestion-chip {
-    padding: 3px 8px;
-    font-size: 11px;
-    border: 1px solid ${(props) => props.theme.input.border};
-    border-radius: 999px;
-    background: ${(props) => props.theme.input.bg};
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
-
-    &:hover:not(:disabled) {
-      color: ${(props) => props.theme.text};
-      border-color: ${(props) => props.theme.colors.accent}80;
-      background: ${(props) => props.theme.colors.accent}10;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .popup-error {
-    padding: 6px 8px;
-    font-size: 11px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    color: ${(props) => props.theme.colors.text.danger};
-    background: ${(props) => props.theme.colors.bg.danger}15;
-  }
-
-  .popup-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 8px 10px;
-    border-top: 1px solid ${(props) => props.theme.input.border};
-  }
-
-  .popup-hint {
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .popup-loading {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .loading-spinner {
-    width: 12px;
-    height: 12px;
-    border: 2px solid ${(props) => props.theme.input.border};
-    border-top-color: ${(props) => props.theme.colors.accent};
-    border-radius: 50%;
-    animation: ai-assist-spin 0.7s linear infinite;
-  }
-
-  @keyframes ai-assist-spin {
-    to { transform: rotate(360deg); }
-  }
-
-  .btn-generate {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 12px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid ${(props) => props.theme.colors.accent};
-    background: ${(props) => props.theme.colors.accent};
-    color: white;
-    cursor: pointer;
-    transition: opacity 0.15s ease;
-
-    &:hover:not(:disabled) {
-      opacity: 0.88;
-    }
-
-    &:disabled {
-      opacity: 0.45;
-      cursor: not-allowed;
-    }
-  }
-
-  .btn-stop {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 5px 12px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid ${(props) => props.theme.input.border};
-    background: ${(props) => props.theme.input.bg};
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease;
-
-    &:hover {
-      border-color: ${(props) => props.theme.colors.text.danger};
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .btn-secondary {
-    padding: 5px 12px;
-    font-size: 12px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid ${(props) => props.theme.input.border};
-    background: transparent;
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-
-    &:hover:not(:disabled) {
-      background: ${(props) => props.theme.input.bg};
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .preview-section {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .preview-label {
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .preview-code {
-    max-height: 220px;
-    overflow: auto;
-    padding: 8px 10px;
-    font-family: ${(props) => props.theme.font.monospace || 'monospace'};
-    font-size: 11.5px;
-    line-height: 1.5;
-    color: ${(props) => props.theme.text};
-    background: ${(props) => props.theme.input.bg};
-    border: 1px solid ${(props) => props.theme.input.border};
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    white-space: pre;
-  }
-
-  .preview-modes {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .preview-mode-btn {
-    padding: 2px 6px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    border: 1px solid transparent;
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    font-size: 11px;
-
-    &.active {
-      color: ${(props) => props.theme.text};
-      border-color: ${(props) => props.theme.input.border};
-      background: ${(props) => props.theme.input.bg};
-    }
-
-    &:hover:not(.active) {
-      color: ${(props) => props.theme.text};
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,302 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import get from 'lodash/get';
-import Tippy from '@tippyjs/react';
-import { IconStars, IconX, IconArrowBackUp, IconPlayerStop } from '@tabler/icons';
-import { aiGenerateScript, stopAiGeneration } from 'utils/ai';
-import StyledWrapper, { PopupWrapper } from './StyledWrapper';
-
-const SUGGESTIONS = {
-  'tests': [
-    { label: 'Status 200', prompt: 'Add a test asserting the response status code is 200' },
-    { label: 'JSON body', prompt: 'Add tests validating the JSON response body structure and key fields' },
-    { label: 'Headers', prompt: 'Add a test checking the content-type response header' },
-    { label: 'Response time', prompt: 'Add a test asserting the response time is below 1000ms' }
-  ],
-  'pre-request': [
-    { label: 'Auth header', prompt: 'Set an Authorization header from an environment token variable' },
-    { label: 'Timestamp', prompt: 'Set a variable named "timestamp" containing the current epoch ms' },
-    { label: 'Random ID', prompt: 'Set a variable named "requestId" containing a random UUID-style id' }
-  ],
-  'post-response': [
-    { label: 'Save token', prompt: 'Extract a token from the response body and save it to an environment variable' },
-    { label: 'Save id', prompt: 'Extract the primary id from the response body and save it to a variable' },
-    { label: 'Log response', prompt: 'Log the response status and a short summary of the body' }
-  ],
-  'docs': [
-    { label: 'Overview', prompt: 'Write an overview section describing the purpose and key features' },
-    { label: 'Request', prompt: 'Document the request method, URL, headers, parameters, and body' },
-    { label: 'Examples', prompt: 'Add request and response examples with sample JSON' },
-    { label: 'Errors', prompt: 'Document common error responses and status codes' }
-  ],
-  'app-request': [
-    { label: 'Send button', prompt: 'Add a button that calls ctx.sendRequest() and displays the response status, headers, and pretty-printed body' },
-    { label: 'Form for body', prompt: 'Build a form whose fields override the request body, then send it with ctx.sendRequest({ variables }) and show the result' },
-    { label: 'Response viewer', prompt: 'Render ctx.response with collapsible JSON and a banner showing status and response time; update on ctx.onResponseUpdate' },
-    { label: 'Test results', prompt: 'List ctx.testResults and ctx.assertionResults with pass/fail badges; refresh on ctx.onResultsUpdate' }
-  ],
-  'app-collection': [
-    { label: 'Request list', prompt: 'List all requests from ctx.listRequests() with their method and url, and a Run button next to each that calls ctx.runRequest(pathname)' },
-    { label: 'Dashboard', prompt: 'Build a small dashboard that runs every request from ctx.listRequests() on load and shows status code, response time, and a pass/fail dot for each' },
-    { label: 'Form runner', prompt: 'Render a form, and on submit call ctx.runRequest(pathname, { variables }) for a chosen request and display the response' },
-    { label: 'Variables panel', prompt: 'Show ctx.variables in a table and allow editing values via ctx.setRuntimeVariable(key, value); react to ctx.onVariablesUpdate' }
-  ]
-};
-
-const TITLES = {
-  'tests': 'Generate Tests',
-  'pre-request': 'Generate Pre-Request Script',
-  'post-response': 'Generate Post-Response Script',
-  'docs': 'Generate Documentation',
-  'app-request': 'Generate App',
-  'app-collection': 'Generate App'
-};
-
-const PREVIEW_LABELS = {
-  'docs': 'Preview · replaces current documentation',
-  'app-request': 'Preview · replaces current app',
-  'app-collection': 'Preview · replaces current app'
-};
-
-const isValidType = (t) => SUGGESTIONS[t] !== undefined;
-
-const AIAssist = ({ scriptType, currentScript, requestContext, docsContext, variables, onApply }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [prompt, setPrompt] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [generated, setGenerated] = useState(null);
-  const streamIdRef = useRef(null);
-  const tippyRef = useRef(null);
-
-  // Focus the prompt textarea when coming back from preview
-  useEffect(() => {
-    if (isOpen && generated == null) {
-      tippyRef.current?.popper?.querySelector('.popup-input')?.focus();
-    }
-  }, [isOpen, generated]);
-
-  // handle Escape key to close the popup
-  useEffect(() => {
-    if (!isOpen) return;
-    const onKeyDown = (e) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation();
-        tippyRef.current?.hide();
-      }
-    };
-    document.addEventListener('keydown', onKeyDown, true);
-    return () => document.removeEventListener('keydown', onKeyDown, true);
-  }, [isOpen]);
-
-  const preferences = useSelector((state) => state.app.preferences);
-  const isAiEnabled = get(preferences, 'ai.enabled', false);
-
-  const suggestions = useMemo(() => SUGGESTIONS[scriptType] || [], [scriptType]);
-  const title = TITLES[scriptType] || 'Generate with AI';
-  const previewLabel = PREVIEW_LABELS[scriptType] || 'Preview · replaces current script';
-
-  const close = useCallback(() => {
-    tippyRef.current?.hide();
-  }, []);
-
-  const handleGenerate = useCallback(
-    async (overridePrompt) => {
-      const text = (overridePrompt ?? prompt).trim();
-      if (!text || isLoading) return;
-      setIsLoading(true);
-      setError(null);
-
-      const streamId = `sparkle-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-      streamIdRef.current = streamId;
-
-      try {
-        const result = await aiGenerateScript({
-          scriptType,
-          prompt: text,
-          currentScript: currentScript || '',
-          requestContext,
-          docsContext,
-          variables,
-          streamId
-        });
-        if (result?.stopped) {
-          return;
-        }
-        if (result?.error) {
-          setError(result.error);
-          return;
-        }
-        if (result?.content) {
-          setGenerated(result.content);
-        } else {
-          setError('No content was generated. Try rephrasing your prompt.');
-        }
-      } catch (err) {
-        setError(err?.message || 'Failed to generate script');
-      } finally {
-        streamIdRef.current = null;
-        setIsLoading(false);
-      }
-    },
-    [prompt, isLoading, scriptType, currentScript, requestContext, docsContext, variables]
-  );
-
-  const handleStop = useCallback(() => {
-    if (streamIdRef.current) {
-      stopAiGeneration(streamIdRef.current);
-    }
-  }, []);
-
-  const handleApply = useCallback(() => {
-    if (generated == null) return;
-    onApply(generated);
-    setGenerated(null);
-    setPrompt('');
-    close();
-  }, [generated, onApply, close]);
-
-  const handleBackToPrompt = useCallback(() => {
-    setGenerated(null);
-    setError(null);
-  }, []);
-
-  if (!isAiEnabled || !isValidType(scriptType)) return null;
-
-  return (
-    <StyledWrapper>
-      <Tippy
-        interactive
-        trigger="click"
-        placement="bottom-end"
-        arrow={false}
-        animation={false}
-        maxWidth="none"
-        appendTo={() => document.body}
-        onCreate={(instance) => (tippyRef.current = instance)}
-        onShow={(instance) => {
-          setIsOpen(true);
-          // rAF so the popup content is in the DOM
-          requestAnimationFrame(() => instance.popper?.querySelector('.popup-input')?.focus());
-        }}
-        onHide={() => {
-          setIsOpen(false);
-          setError(null);
-        }}
-        render={(attrs) => (
-          <PopupWrapper className="ai-assist-popup" role="dialog" aria-label={title} tabIndex={-1} {...attrs}>
-            <div className="popup-header">
-              <span className="popup-title">
-                <IconStars size={12} strokeWidth={1.75} />
-                {title}
-              </span>
-              <button className="popup-close" onClick={close} type="button" aria-label="Close">
-                <IconX size={14} />
-              </button>
-            </div>
-
-            {generated == null ? (
-              <>
-                <div className="popup-body">
-                  <textarea
-                    className="popup-input"
-                    value={prompt}
-                    onChange={(e) => setPrompt(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        handleGenerate();
-                      }
-                    }}
-                    placeholder="Describe what you want to generate..."
-                    rows={3}
-                    disabled={isLoading}
-                  />
-
-                  {!isLoading && !prompt && suggestions.length > 0 && (
-                    <div className="popup-suggestions">
-                      {suggestions.map((s) => (
-                        <button
-                          key={s.label}
-                          className="suggestion-chip"
-                          type="button"
-                          onClick={() => handleGenerate(s.prompt)}
-                          disabled={isLoading}
-                        >
-                          {s.label}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-
-                  {error && <div className="popup-error">{error}</div>}
-                </div>
-
-                <div className="popup-footer">
-                  {isLoading ? (
-                    <span className="popup-loading">
-                      <span className="loading-spinner" />
-                      Generating...
-                    </span>
-                  ) : (
-                    <span className="popup-hint">Enter to generate · Shift+Enter for newline</span>
-                  )}
-                  {isLoading ? (
-                    <button
-                      className="btn-stop"
-                      type="button"
-                      onClick={handleStop}
-                      title="Stop generating"
-                    >
-                      <IconPlayerStop size={12} /> Stop
-                    </button>
-                  ) : (
-                    <button
-                      className="btn-generate"
-                      type="button"
-                      onClick={() => handleGenerate()}
-                      disabled={!prompt.trim()}
-                    >
-                      Generate
-                    </button>
-                  )}
-                </div>
-              </>
-            ) : (
-              <>
-                <div className="popup-body">
-                  <div className="preview-section">
-                    <span className="preview-label">{previewLabel}</span>
-                    <pre className="preview-code">{generated}</pre>
-                  </div>
-                </div>
-
-                <div className="popup-footer">
-                  <button className="btn-secondary" type="button" onClick={handleBackToPrompt}>
-                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-                      <IconArrowBackUp size={12} /> Back
-                    </span>
-                  </button>
-                  <button className="btn-generate" type="button" onClick={handleApply}>
-                    Apply
-                  </button>
-                </div>
-              </>
-            )}
-          </PopupWrapper>
-        )}
-      >
-        <button
-          className={`ai-assist-trigger ${isOpen ? 'open' : ''}`}
-          title={title}
-          type="button"
-          aria-label={title}
-        >
-          <IconStars size={14} strokeWidth={1.75} />
-        </button>
-      </Tippy>
-    </StyledWrapper>
-  );
-};
-
-export default AIAssist;

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

@@ -1,404 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import { ThemeProvider } from 'styled-components';
-import { aiGenerateScript, stopAiGeneration } from 'utils/ai';
-import AIAssist from './index';
-
-jest.mock('utils/ai', () => ({
-  aiGenerateScript: jest.fn(),
-  stopAiGeneration: jest.fn()
-}));
-
-const theme = {
-  bg: '#1e1e1e',
-  text: '#ffffff',
-  border: { radius: { sm: '4px', md: '6px' } },
-  colors: {
-    accent: '#6366f1',
-    text: { muted: '#9ca3af', danger: '#ef4444' },
-    bg: { danger: '#ef4444' }
-  },
-  input: {
-    border: '#374151',
-    bg: '#111827',
-    focusBorder: '#6366f1'
-  },
-  font: { monospace: 'monospace' }
-};
-
-const createStore = (aiEnabled = true) => configureStore({
-  reducer: {
-    app: (state = { preferences: { ai: { enabled: aiEnabled } } }) => state
-  }
-});
-
-const defaultProps = {
-  scriptType: 'tests',
-  currentScript: 'test("ok", () => {});',
-  onApply: jest.fn()
-};
-
-const renderAIAssist = ({
-  props = {},
-  aiEnabled = true
-} = {}) => {
-  const mergedProps = { ...defaultProps, ...props };
-  return render(
-    <Provider store={createStore(aiEnabled)}>
-      <ThemeProvider theme={theme}>
-        <AIAssist {...mergedProps} />
-      </ThemeProvider>
-    </Provider>
-  );
-};
-
-const openPopup = () => {
-  fireEvent.click(screen.getByRole('button', { name: 'Generate Tests' }));
-};
-
-describe('AIAssist', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    aiGenerateScript.mockResolvedValue({ content: 'test("generated", () => {});' });
-  });
-
-  describe('visibility', () => {
-    it('renders nothing when AI is disabled', () => {
-      const { container } = renderAIAssist({ aiEnabled: false });
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('renders nothing for an unsupported script type', () => {
-      const { container } = renderAIAssist({ props: { scriptType: 'unknown-type' } });
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('renders the trigger when AI is enabled and the script type is supported', () => {
-      renderAIAssist();
-      expect(screen.getByRole('button', { name: 'Generate Tests' })).toBeInTheDocument();
-    });
-  });
-
-  describe('titles', () => {
-    it.each([
-      ['tests', 'Generate Tests'],
-      ['pre-request', 'Generate Pre-Request Script'],
-      ['post-response', 'Generate Post-Response Script'],
-      ['docs', 'Generate Documentation']
-    ])('uses the correct title for %s', (scriptType, title) => {
-      renderAIAssist({ props: { scriptType } });
-      expect(screen.getByRole('button', { name: title })).toBeInTheDocument();
-    });
-  });
-
-  describe('popup interactions', () => {
-    it('opens and closes the popup from the trigger and close button', () => {
-      renderAIAssist();
-      openPopup();
-
-      expect(screen.getByRole('dialog', { name: 'Generate Tests' })).toBeInTheDocument();
-
-      fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-      expect(screen.queryByRole('dialog', { name: 'Generate Tests' })).not.toBeInTheDocument();
-    });
-
-    it('renders the popup into document.body as a portal', () => {
-      renderAIAssist();
-      openPopup();
-      const dialog = screen.getByRole('dialog', { name: 'Generate Tests' });
-      const tippyRoot = dialog.closest('[data-tippy-root]');
-      expect(tippyRoot).not.toBeNull();
-      expect(tippyRoot.parentElement).toBe(document.body);
-    });
-
-    it('closes the popup when Escape is pressed', () => {
-      renderAIAssist();
-      openPopup();
-
-      fireEvent.keyDown(document, { key: 'Escape' });
-      expect(screen.queryByRole('dialog', { name: 'Generate Tests' })).not.toBeInTheDocument();
-    });
-
-    it('closes the popup when clicking outside', () => {
-      renderAIAssist();
-      openPopup();
-
-      fireEvent.mouseDown(document.body);
-      expect(screen.queryByRole('dialog', { name: 'Generate Tests' })).not.toBeInTheDocument();
-    });
-  });
-
-  describe('prompt view', () => {
-    it('shows suggestion chips when the prompt is empty', () => {
-      renderAIAssist();
-      openPopup();
-
-      expect(screen.getByRole('button', { name: 'Status 200' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'JSON body' })).toBeInTheDocument();
-    });
-
-    it('shows docs suggestions for the docs script type', () => {
-      renderAIAssist({ props: { scriptType: 'docs', currentScript: '# Overview' } });
-      fireEvent.click(screen.getByRole('button', { name: 'Generate Documentation' }));
-
-      expect(screen.getByRole('button', { name: 'Overview' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Request' })).toBeInTheDocument();
-    });
-
-    it('hides suggestions once the user starts typing', () => {
-      renderAIAssist();
-      openPopup();
-
-      fireEvent.change(screen.getByPlaceholderText('Describe what you want to generate...'), {
-        target: { value: 'Add a status test' }
-      });
-
-      expect(screen.queryByRole('button', { name: 'Status 200' })).not.toBeInTheDocument();
-    });
-
-    it('keeps Generate disabled until the prompt has text', () => {
-      renderAIAssist();
-      openPopup();
-
-      expect(screen.getByRole('button', { name: 'Generate' })).toBeDisabled();
-
-      fireEvent.change(screen.getByPlaceholderText('Describe what you want to generate...'), {
-        target: { value: 'Add a status test' }
-      });
-
-      expect(screen.getByRole('button', { name: 'Generate' })).toBeEnabled();
-    });
-  });
-
-  describe('generation flow', () => {
-    it('generates from a suggestion chip', async () => {
-      renderAIAssist();
-      openPopup();
-
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      await waitFor(() => {
-        expect(aiGenerateScript).toHaveBeenCalledWith(expect.objectContaining({
-          scriptType: 'tests',
-          prompt: 'Add a test asserting the response status code is 200',
-          currentScript: 'test("ok", () => {});',
-          requestContext: undefined,
-          streamId: expect.any(String)
-        }));
-      });
-
-      expect(screen.getByText('test("generated", () => {});')).toBeInTheDocument();
-    });
-
-    it('passes docs context for folder and collection documentation', async () => {
-      const docsContext = {
-        scope: 'folder',
-        name: 'Users',
-        collectionName: 'Pet Store API',
-        folders: [{ name: 'Admin', requestCount: 1, subfolderCount: 0 }],
-        requests: [{ name: 'List Users', method: 'GET', url: '{{base}}/users' }]
-      };
-
-      renderAIAssist({ props: { scriptType: 'docs', currentScript: '', docsContext } });
-      fireEvent.click(screen.getByRole('button', { name: 'Generate Documentation' }));
-      fireEvent.click(screen.getByRole('button', { name: 'Overview' }));
-
-      await waitFor(() => {
-        expect(aiGenerateScript).toHaveBeenCalledWith(expect.objectContaining({
-          scriptType: 'docs',
-          prompt: 'Write an overview section describing the purpose and key features',
-          currentScript: '',
-          requestContext: undefined,
-          docsContext
-        }));
-      });
-    });
-
-    it('generates from the prompt input and passes request context', async () => {
-      const requestContext = {
-        method: 'GET',
-        url: 'https://api.example.com/users',
-        headers: [],
-        params: [],
-        body: null
-      };
-
-      renderAIAssist({ props: { requestContext } });
-      openPopup();
-
-      fireEvent.change(screen.getByPlaceholderText('Describe what you want to generate...'), {
-        target: { value: 'Add auth header test' }
-      });
-      fireEvent.click(screen.getByRole('button', { name: 'Generate' }));
-
-      await waitFor(() => {
-        expect(aiGenerateScript).toHaveBeenCalledWith(expect.objectContaining({
-          scriptType: 'tests',
-          prompt: 'Add auth header test',
-          currentScript: 'test("ok", () => {});',
-          requestContext
-        }));
-      });
-    });
-
-    it('generates when pressing Enter', async () => {
-      renderAIAssist();
-      openPopup();
-
-      const textarea = screen.getByPlaceholderText('Describe what you want to generate...');
-      fireEvent.change(textarea, { target: { value: 'Add response time test' } });
-      fireEvent.keyDown(textarea, { key: 'Enter' });
-
-      await waitFor(() => {
-        expect(aiGenerateScript).toHaveBeenCalledWith(expect.objectContaining({
-          scriptType: 'tests',
-          prompt: 'Add response time test',
-          currentScript: 'test("ok", () => {});',
-          requestContext: undefined
-        }));
-      });
-    });
-
-    it('does not generate when pressing Shift+Enter (allows newline)', () => {
-      renderAIAssist();
-      openPopup();
-
-      const textarea = screen.getByPlaceholderText('Describe what you want to generate...');
-      fireEvent.change(textarea, { target: { value: 'Add response time test' } });
-      fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true });
-
-      expect(aiGenerateScript).not.toHaveBeenCalled();
-    });
-
-    it('shows a loading state while generation is in progress', async () => {
-      let resolveGenerate;
-      aiGenerateScript.mockImplementation(() => new Promise((resolve) => {
-        resolveGenerate = resolve;
-      }));
-
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      expect(screen.getByText('Generating...')).toBeInTheDocument();
-
-      resolveGenerate({ content: 'test("done", () => {});' });
-
-      await waitFor(() => {
-        expect(screen.getByText('test("done", () => {});')).toBeInTheDocument();
-      });
-    });
-
-    it('shows a Stop button during generation and cancels via streamId', async () => {
-      let resolveGenerate;
-      aiGenerateScript.mockImplementation(() => new Promise((resolve) => {
-        resolveGenerate = resolve;
-      }));
-
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      const stopButton = await screen.findByRole('button', { name: /stop/i });
-      expect(stopButton).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Generate' })).not.toBeInTheDocument();
-
-      const passedStreamId = aiGenerateScript.mock.calls[0][0].streamId;
-      expect(passedStreamId).toEqual(expect.any(String));
-
-      fireEvent.click(stopButton);
-      expect(stopAiGeneration).toHaveBeenCalledWith(passedStreamId);
-
-      resolveGenerate({ stopped: true });
-
-      await waitFor(() => {
-        expect(screen.queryByRole('button', { name: /stop/i })).not.toBeInTheDocument();
-      });
-      expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Generate' })).toBeInTheDocument();
-    });
-
-    it('shows an API error without entering preview mode', async () => {
-      aiGenerateScript.mockResolvedValue({ error: 'Provider unavailable' });
-
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('Provider unavailable')).toBeInTheDocument();
-      });
-      expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument();
-    });
-
-    it('shows a fallback error when no content is returned', async () => {
-      aiGenerateScript.mockResolvedValue({});
-
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('No content was generated. Try rephrasing your prompt.')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('preview and apply', () => {
-    const showPreview = async () => {
-      renderAIAssist();
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument();
-      });
-    };
-
-    it('uses the script preview label for script types', async () => {
-      await showPreview();
-      expect(screen.getByText('Preview · replaces current script')).toBeInTheDocument();
-    });
-
-    it('uses the documentation preview label for docs', async () => {
-      aiGenerateScript.mockResolvedValue({ content: '# API Docs' });
-
-      renderAIAssist({ props: { scriptType: 'docs', currentScript: '# Existing' } });
-      fireEvent.click(screen.getByRole('button', { name: 'Generate Documentation' }));
-      fireEvent.click(screen.getByRole('button', { name: 'Overview' }));
-
-      await waitFor(() => {
-        expect(screen.getByText('Preview · replaces current documentation')).toBeInTheDocument();
-      });
-      expect(screen.getByText('# API Docs')).toBeInTheDocument();
-    });
-
-    it('applies generated content and closes the popup', async () => {
-      const onApply = jest.fn();
-      renderAIAssist({ props: { onApply } });
-      openPopup();
-      fireEvent.click(screen.getByRole('button', { name: 'Status 200' }));
-
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-
-      expect(onApply).toHaveBeenCalledWith('test("generated", () => {});');
-      expect(screen.queryByRole('dialog', { name: 'Generate Tests' })).not.toBeInTheDocument();
-    });
-
-    it('returns to the prompt view when Back is clicked', async () => {
-      await showPreview();
-
-      fireEvent.click(screen.getByRole('button', { name: 'Back' }));
-
-      expect(screen.getByPlaceholderText('Describe what you want to generate...')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Status 200' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument();
-    });
-  });
-});

packages/bruno-app/src/components/AiChatSidebar/AssistantCodeBlock.js

@@ -1,46 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import { IconCopy, IconCheck } from '@tabler/icons';
-
-const AssistantCodeBlock = ({ content, language, isOpen, isStreaming, isLast }) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const preRef = useRef(null);
-
-  useEffect(() => {
-    if (isStreaming && isOpen && preRef.current) {
-      preRef.current.scrollTop = preRef.current.scrollHeight;
-    }
-  }, [content, isStreaming, isOpen]);
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(content);
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
-    }
-  };
-
-  return (
-    <div className="assistant-code-block">
-      <div className="assistant-code-block__header">
-        <div className="assistant-code-block__meta">
-          <span className="assistant-code-block__lang">{language || 'code'}</span>
-          {isOpen && <span className="assistant-code-block__spinner" />}
-        </div>
-        <button className="assistant-code-block__btn" onClick={handleCopy} title="Copy">
-          {isCopied ? <IconCheck size={12} /> : <IconCopy size={12} />}
-          {isCopied ? 'Copied' : 'Copy'}
-        </button>
-      </div>
-      <pre ref={preRef} className="assistant-code-block__body">
-        <code className={`language-${language || 'text'}`}>
-          {content}
-          {isStreaming && isLast && <span className="cursor">|</span>}
-        </code>
-      </pre>
-    </div>
-  );
-};
-
-export default AssistantCodeBlock;

packages/bruno-app/src/components/AiChatSidebar/DiffView/StyledWrapper.js

@@ -1,298 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  margin-top: 8px;
-  border-radius: ${(props) => props.theme.border.radius.base};
-  overflow: hidden;
-  border: 1px solid ${(props) => props.theme.border.border1};
-  background: ${(props) => props.theme.codemirror.bg};
-
-  &.accepted {
-    border-color: ${(props) => props.theme.colors.text.green};
-  }
-
-  &.rejected {
-    opacity: 0.5;
-  }
-
-  .diff-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 6px 10px;
-    background: ${(props) => props.theme.background.mantle};
-    border-bottom: 1px solid ${(props) => props.theme.border.border1};
-    gap: 8px;
-    flex-wrap: nowrap;
-  }
-
-  .diff-title {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    font-weight: 500;
-    color: ${(props) => props.theme.colors.text.muted};
-    flex-shrink: 0;
-
-    .diff-icon {
-      color: ${(props) => props.theme.brand};
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .diff-content-type {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    padding: 1px 6px;
-    border-radius: 3px;
-    background: ${(props) => props.theme.background.surface0};
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .diff-stats {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    font-weight: 500;
-
-    .stat {
-      padding: 1px 5px;
-      border-radius: 4px;
-    }
-    .additions {
-      background: ${(props) => props.theme.status.success.background};
-      color: ${(props) => props.theme.colors.text.green};
-    }
-    .deletions {
-      background: ${(props) => props.theme.status.danger.background};
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .diff-actions {
-    display: flex;
-    gap: 6px;
-    flex-shrink: 0;
-    margin-left: auto;
-  }
-
-  .diff-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 4px 8px;
-    font-size: 11px;
-    font-weight: 500;
-    border: 1px solid transparent;
-    border-radius: ${(props) => props.theme.border.radius.base};
-    cursor: pointer;
-    white-space: nowrap;
-
-    &.accept {
-      background: ${(props) => props.theme.brand};
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-
-      &:hover:not(:disabled) {
-        opacity: 0.9;
-      }
-
-      &:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-    }
-
-    &.reject {
-      background: transparent;
-      color: ${(props) => props.theme.colors.text.muted};
-      border-color: ${(props) => props.theme.border.border1};
-
-      &:hover {
-        background: ${(props) => props.theme.status.danger.background};
-        color: ${(props) => props.theme.colors.text.danger};
-        border-color: ${(props) => props.theme.status.danger.background};
-      }
-    }
-  }
-
-  .status-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
-    font-size: 11px;
-    border-radius: ${(props) => props.theme.border.radius.base};
-    font-weight: 500;
-
-    &.accepted {
-      background: ${(props) => props.theme.status.success.background};
-      color: ${(props) => props.theme.colors.text.green};
-    }
-
-    &.rejected {
-      background: ${(props) => props.theme.status.danger.background};
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .diff-warning {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 10px;
-    font-size: 11px;
-    border-bottom: 1px solid ${(props) => props.theme.border.border1};
-
-    &.warn {
-      background: ${(props) => props.theme.status.warning.background};
-      color: ${(props) => props.theme.status.warning.text};
-    }
-
-    &.error {
-      background: ${(props) => props.theme.status.danger.background};
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .diff-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 4px 8px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-    background: transparent;
-    border: none;
-    border-top: 1px solid ${(props) => props.theme.border.border1};
-    cursor: pointer;
-    width: 100%;
-
-    &:hover {
-      background: ${(props) => props.theme.background.surface0};
-      color: ${(props) => props.theme.text};
-    }
-  }
-
-  .diff-content {
-    max-height: 300px;
-    overflow: auto;
-    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-    font-size: 11px;
-    line-height: 1.5;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: ${(props) => props.theme.border.border1};
-      border-radius: 2px;
-    }
-  }
-
-  .diff-line {
-    padding: 0 8px 0 4px;
-    white-space: pre;
-    display: flex;
-    min-height: 18px;
-    line-height: 18px;
-
-    .line-number {
-      width: 24px;
-      text-align: right;
-      padding-right: 8px;
-      color: ${(props) => props.theme.colors.text.muted};
-      user-select: none;
-      flex-shrink: 0;
-      opacity: 0.5;
-    }
-
-    .line-prefix {
-      width: 12px;
-      flex-shrink: 0;
-    }
-
-    .line-content {
-      flex: 1;
-      overflow-x: auto;
-    }
-
-    &.added {
-      background: ${(props) => props.theme.status.success.background};
-      .line-content { color: ${(props) => props.theme.colors.text.green}; }
-      .line-prefix { color: ${(props) => props.theme.colors.text.green}; font-weight: 600; }
-    }
-
-    &.removed {
-      background: ${(props) => props.theme.status.danger.background};
-      .line-content { color: ${(props) => props.theme.colors.text.danger}; }
-      .line-prefix { color: ${(props) => props.theme.colors.text.danger}; font-weight: 600; }
-    }
-
-    &.unchanged {
-      .line-content { color: ${(props) => props.theme.colors.text.muted}; }
-      .line-prefix { opacity: 0; }
-    }
-  }
-
-  .expand-marker {
-    display: flex;
-    align-items: center;
-    padding: 0 8px 0 4px;
-    min-height: 22px;
-    background: ${(props) => props.theme.background.mantle};
-
-    .expand-gutter {
-      width: 24px;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      padding-right: 4px;
-    }
-
-    .expand-buttons {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-    }
-
-    .expand-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 11px;
-      padding: 0;
-      background: transparent;
-      border: none;
-      color: ${(props) => props.theme.colors.text.muted};
-      cursor: pointer;
-      opacity: 0.6;
-
-      &:hover {
-        color: ${(props) => props.theme.text};
-        opacity: 1;
-      }
-    }
-
-    .expand-line {
-      flex: 1;
-      height: 1px;
-      background: ${(props) => props.theme.border.border1};
-      margin-left: 8px;
-    }
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/AiChatSidebar/DiffView/index.js

@@ -1,210 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { diffLines } from 'diff';
-import { IconCheck, IconX, IconCode, IconChevronDown, IconChevronUp } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-
-const CONTEXT_LINES = 2;
-const EXPAND_CHUNK_SIZE = 20;
-
-const DiffView = ({ originalCode, newCode, onAccept, onReject, status, contentTypeLabel, warning, disableAccept }) => {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [expandedFromTop, setExpandedFromTop] = useState({});
-  const [expandedFromBottom, setExpandedFromBottom] = useState({});
-
-  const diffResult = useMemo(() => {
-    const changes = diffLines(originalCode || '', newCode || '');
-    let additions = 0;
-    let deletions = 0;
-    let lineNumber = 1;
-
-    const lines = changes.flatMap((part) => {
-      const partLines = part.value.split('\n');
-      if (partLines[partLines.length - 1] === '') partLines.pop();
-
-      return partLines.map((line) => {
-        const entry = { content: line, lineNumber: null };
-        if (part.added) {
-          additions += 1;
-          entry.type = 'added';
-          entry.lineNumber = lineNumber++;
-        } else if (part.removed) {
-          deletions += 1;
-          entry.type = 'removed';
-        } else {
-          entry.type = 'unchanged';
-          entry.lineNumber = lineNumber++;
-        }
-        return entry;
-      });
-    });
-
-    return { lines, additions, deletions };
-  }, [originalCode, newCode]);
-
-  const hunks = useMemo(() => {
-    const { lines } = diffResult;
-    if (lines.length === 0) return [];
-
-    const changedIndices = new Set();
-    lines.forEach((line, idx) => {
-      if (line.type === 'added' || line.type === 'removed') changedIndices.add(idx);
-    });
-
-    const visibleIndices = new Set();
-    changedIndices.forEach((idx) => {
-      for (let i = Math.max(0, idx - CONTEXT_LINES); i <= Math.min(lines.length - 1, idx + CONTEXT_LINES); i++) {
-        visibleIndices.add(i);
-      }
-    });
-
-    const result = [];
-    let i = 0;
-    while (i < lines.length) {
-      if (visibleIndices.has(i)) {
-        result.push({ type: 'line', data: lines[i], index: i });
-        i += 1;
-      } else {
-        const start = i;
-        while (i < lines.length && !visibleIndices.has(i)) i += 1;
-        result.push({
-          type: 'collapsed',
-          startIndex: start,
-          count: i - start,
-          lines: lines.slice(start, i)
-        });
-      }
-    }
-    return result;
-  }, [diffResult]);
-
-  const expandUp = (startIndex, totalLines) => {
-    setExpandedFromTop((prev) => {
-      const current = prev[startIndex] || 0;
-      const bottomExpanded = expandedFromBottom[startIndex] || 0;
-      const remaining = totalLines - current - bottomExpanded;
-      return { ...prev, [startIndex]: Math.min(current + EXPAND_CHUNK_SIZE, current + remaining) };
-    });
-  };
-
-  const expandDown = (startIndex, totalLines) => {
-    setExpandedFromBottom((prev) => {
-      const current = prev[startIndex] || 0;
-      const topExpanded = expandedFromTop[startIndex] || 0;
-      const remaining = totalLines - topExpanded - current;
-      return { ...prev, [startIndex]: Math.min(current + EXPAND_CHUNK_SIZE, current + remaining) };
-    });
-  };
-
-  if (diffResult.additions === 0 && diffResult.deletions === 0) return null;
-
-  const renderActions = () => {
-    if (status === 'accepted') {
-      return (
-        <span className="status-badge accepted">
-          <IconCheck size={12} /> Applied
-        </span>
-      );
-    }
-    if (status === 'rejected') {
-      return (
-        <span className="status-badge rejected">
-          <IconX size={12} /> Dismissed
-        </span>
-      );
-    }
-    return (
-      <div className="diff-actions">
-        <button className="diff-btn reject" onClick={onReject} title="Dismiss changes">
-          <IconX size={12} />
-        </button>
-        <button className="diff-btn accept" onClick={onAccept} title="Apply changes" disabled={disableAccept}>
-          <IconCheck size={12} /> Apply
-        </button>
-      </div>
-    );
-  };
-
-  const renderLine = (line, key) => (
-    <div key={key} className={`diff-line ${line.type}`}>
-      <span className="line-number">{line.type !== 'removed' ? line.lineNumber : ''}</span>
-      <span className="line-prefix">{line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '}</span>
-      <span className="line-content">{line.content || ' '}</span>
-    </div>
-  );
-
-  const renderHunks = () =>
-    hunks.map((hunk, idx) => {
-      if (hunk.type === 'line') return renderLine(hunk.data, `line-${hunk.index}`);
-
-      const topCount = expandedFromTop[hunk.startIndex] || 0;
-      const bottomCount = expandedFromBottom[hunk.startIndex] || 0;
-      const remainingCount = hunk.count - topCount - bottomCount;
-
-      const topLines = hunk.lines.slice(0, topCount);
-      const bottomLines = hunk.lines.slice(hunk.count - bottomCount);
-      const isAtTop = idx === 0;
-      const isAtBottom = idx === hunks.length - 1;
-
-      return (
-        <React.Fragment key={`collapsed-${hunk.startIndex}`}>
-          {topLines.map((line, lineIdx) => renderLine(line, `top-${hunk.startIndex}-${lineIdx}`))}
-
-          {remainingCount > 0 && (
-            <div className="expand-marker">
-              <div className="expand-gutter">
-                <div className="expand-buttons">
-                  {!isAtTop && (
-                    <button className="expand-btn" onClick={() => expandUp(hunk.startIndex, hunk.count)} title="Expand up">
-                      <IconChevronUp size={10} />
-                    </button>
-                  )}
-                  {!isAtBottom && (
-                    <button className="expand-btn" onClick={() => expandDown(hunk.startIndex, hunk.count)} title="Expand down">
-                      <IconChevronDown size={10} />
-                    </button>
-                  )}
-                </div>
-              </div>
-              <div className="expand-line" />
-            </div>
-          )}
-
-          {bottomLines.map((line, lineIdx) => renderLine(line, `bottom-${hunk.startIndex}-${lineIdx}`))}
-        </React.Fragment>
-      );
-    });
-
-  return (
-    <StyledWrapper className={status || ''}>
-      <div className="diff-header">
-        <div className="diff-title">
-          <span className="diff-icon"><IconCode size={12} /></span>
-          {contentTypeLabel && <span className="diff-content-type">{contentTypeLabel}</span>}
-          <div className="diff-stats">
-            <span className="stat additions">+{diffResult.additions}</span>
-            <span className="stat deletions">-{diffResult.deletions}</span>
-          </div>
-        </div>
-        {renderActions()}
-      </div>
-
-      {warning && (
-        <div className={`diff-warning ${disableAccept ? 'error' : 'warn'}`}>
-          {warning}
-        </div>
-      )}
-
-      {isExpanded && <div className="diff-content">{renderHunks()}</div>}
-
-      <button className="diff-toggle" onClick={() => setIsExpanded((v) => !v)}>
-        {isExpanded ? (
-          <><IconChevronUp size={12} /> Hide</>
-        ) : (
-          <><IconChevronDown size={12} /> Show ({diffResult.additions + diffResult.deletions})</>
-        )}
-      </button>
-    </StyledWrapper>
-  );
-};
-
-export default DiffView;

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

@@ -1,831 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  flex-shrink: 0;
-  height: 100%;
-
-  .ai-sidebar {
-    width: 420px;
-    height: 100%;
-    background: ${(props) => props.theme.bg};
-    border-left: 1px solid ${(props) => props.theme.border.border1};
-    display: flex;
-    flex-direction: column;
-  }
-
-  .ai-sidebar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 12px;
-    border-bottom: 1px solid ${(props) => props.theme.border.border1};
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-    }
-
-    .header-icon {
-      color: ${(props) => props.theme.brand};
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-    }
-
-    .header-method {
-      font-size: 9px;
-      font-weight: 600;
-      text-transform: uppercase;
-      padding: 2px 6px;
-      border-radius: 4px;
-      flex-shrink: 0;
-      background: ${(props) => props.theme.background.surface0};
-      display: flex;
-      align-items: center;
-
-      &.method-get { color: ${(props) => props.theme.request.methods.get}; }
-      &.method-post { color: ${(props) => props.theme.request.methods.post}; }
-      &.method-put { color: ${(props) => props.theme.request.methods.put}; }
-      &.method-delete { color: ${(props) => props.theme.request.methods.delete}; }
-      &.method-patch { color: ${(props) => props.theme.request.methods.patch}; }
-      &.method-options { color: ${(props) => props.theme.request.methods.options}; }
-      &.method-head { color: ${(props) => props.theme.request.methods.head}; }
-      &.method-grpc { color: ${(props) => props.theme.request.grpc}; }
-      &.method-ws { color: ${(props) => props.theme.request.ws}; }
-      &.method-gql { color: ${(props) => props.theme.request.gql}; }
-      &.method-app { color: ${(props) => props.theme.brand}; }
-    }
-
-    .header-title {
-      font-size: 13px;
-      color: ${(props) => props.theme.text};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: flex;
-      align-items: center;
-    }
-
-    .chat-switcher-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2px;
-      background: transparent;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      color: ${(props) => props.theme.colors.text.muted};
-      flex-shrink: 0;
-
-      &:hover {
-        background: ${(props) => props.theme.background.surface0};
-        color: ${(props) => props.theme.text};
-      }
-    }
-
-    .header-actions {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-    }
-
-    .history-wrap {
-      position: relative;
-    }
-
-    .icon-btn {
-      position: relative;
-      padding: 6px;
-      background: transparent;
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      color: ${(props) => props.theme.colors.text.muted};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        background: ${(props) => props.theme.background.surface0};
-        color: ${(props) => props.theme.text};
-      }
-
-      &.is-active {
-        background: ${(props) => props.theme.background.surface0};
-        color: ${(props) => props.theme.text};
-      }
-
-      &:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-
-      &.close-btn:hover {
-        background: ${(props) => props.theme.status.danger.background};
-        color: ${(props) => props.theme.colors.text.danger};
-      }
-
-    }
-  }
-
-  .history-popover {
-    position: absolute;
-    top: calc(100% + 6px);
-    right: 0;
-    z-index: 20;
-    width: 300px;
-    max-height: 320px;
-    overflow-y: auto;
-    background: ${(props) => props.theme.bg};
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 8px;
-    box-shadow: ${(props) => props.theme.shadow.md};
-    padding: 4px;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: ${(props) => props.theme.scrollbar.color};
-      border-radius: 2px;
-    }
-
-    &__empty {
-      padding: 16px;
-      text-align: center;
-      font-size: 11px;
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    &__item {
-      display: flex;
-      align-items: stretch;
-      gap: 2px;
-      border-radius: 4px;
-
-      &:hover {
-        background: ${(props) => props.theme.background.surface0};
-      }
-
-      &.is-active {
-        background: ${(props) => props.theme.background.surface0};
-      }
-    }
-
-    &__title {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 2px;
-      padding: 6px 8px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      text-align: left;
-      color: ${(props) => props.theme.text};
-    }
-
-    &__title-text {
-      display: block;
-      width: 100%;
-      font-size: 12px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &__meta {
-      font-size: 10px;
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    &__delete {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 8px;
-      background: transparent;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      color: ${(props) => props.theme.colors.text.muted};
-
-      &:hover {
-        background: ${(props) => props.theme.status.danger.background};
-        color: ${(props) => props.theme.colors.text.danger};
-      }
-    }
-  }
-
-  .ai-sidebar-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: ${(props) => props.theme.scrollbar.color};
-      border-radius: 2px;
-    }
-  }
-
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 24px 16px;
-    animation: fadeIn 0.3s ease;
-
-    .empty-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 10px;
-      background: ${(props) => props.theme.brand};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-      margin-bottom: 12px;
-    }
-
-    h3 {
-      font-size: 14px;
-      font-weight: 600;
-      margin: 0 0 4px 0;
-      color: ${(props) => props.theme.text};
-    }
-
-    > p {
-      color: ${(props) => props.theme.colors.text.muted};
-      font-size: 12px;
-      margin: 0 0 16px 0;
-      line-height: 1.4;
-    }
-
-    .suggestions-title {
-      font-size: 11px;
-      color: ${(props) => props.theme.colors.text.muted};
-      margin: 0 0 8px 0;
-      font-weight: 500;
-    }
-
-    .suggestion-chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      justify-content: center;
-    }
-
-    .suggestion-chip {
-      padding: 5px 10px;
-      background: ${(props) => props.theme.background.surface0};
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: 12px;
-      font-size: 11px;
-      color: ${(props) => props.theme.text};
-      cursor: pointer;
-
-      &:hover {
-        border-color: ${(props) => props.theme.brand};
-        color: ${(props) => props.theme.brand};
-      }
-    }
-  }
-
-  .message {
-    animation: slideIn 0.25s ease;
-
-    &.user .message-content {
-      background: ${(props) => props.theme.background.mantle};
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: 8px;
-      padding: 8px 12px;
-      font-size: 13px;
-      line-height: 1.4;
-      color: ${(props) => props.theme.text};
-    }
-
-    &.assistant .message-content {
-      color: ${(props) => props.theme.text};
-    }
-  }
-
-  .message-status {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    margin-bottom: 6px;
-    color: ${(props) => props.theme.colors.text.muted};
-
-    &__spinner {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      border: 2px solid ${(props) => props.theme.brand};
-      border-top-color: transparent;
-      animation: spin 0.9s linear infinite;
-      flex-shrink: 0;
-    }
-  }
-
-  .tool-activity-log {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    margin: 6px 0;
-    padding: 4px 0;
-
-    &.completed {
-      opacity: 0.7;
-    }
-  }
-
-  .tool-activity-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-    line-height: 1.6;
-    padding: 1px 0;
-
-    .tool-activity-indicator {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 14px;
-      height: 14px;
-      flex-shrink: 0;
-    }
-
-    &.done .tool-activity-indicator {
-      color: ${(props) => props.theme.colors.text.green};
-    }
-
-    &.active {
-      color: ${(props) => props.theme.text};
-
-      .tool-activity-indicator {
-        color: ${(props) => props.theme.brand};
-      }
-    }
-
-    .tool-activity-spinner {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      border: 1.5px solid ${(props) => props.theme.brand};
-      border-top-color: transparent;
-      animation: spin 0.9s linear infinite;
-      display: block;
-    }
-  }
-
-  .message-cancelled {
-    margin-top: 8px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .assistant-code-block {
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 8px;
-    background: ${(props) => props.theme.codemirror.bg};
-    overflow: hidden;
-    margin: 8px 0;
-
-    &__header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      padding: 6px 8px;
-      border-bottom: 1px solid ${(props) => props.theme.border.border1};
-    }
-
-    &__meta {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 10px;
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    &__lang {
-      text-transform: lowercase;
-    }
-
-    &__spinner {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      border: 2px solid ${(props) => props.theme.brand};
-      border-top-color: transparent;
-      animation: spin 0.9s linear infinite;
-      flex-shrink: 0;
-    }
-
-    &__btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 3px 6px;
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: 4px;
-      background: ${(props) => props.theme.background.mantle};
-      font-size: 10px;
-      font-weight: 500;
-      color: ${(props) => props.theme.text};
-      cursor: pointer;
-
-      &:hover {
-        border-color: ${(props) => props.theme.brand};
-        color: ${(props) => props.theme.brand};
-      }
-    }
-
-    &__body {
-      margin: 0;
-      padding: 10px 12px;
-      overflow: auto;
-      max-height: 240px;
-      font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-      font-size: 11px;
-      line-height: 1.5;
-      white-space: pre;
-    }
-
-    .cursor {
-      display: inline-block;
-      animation: blink 1s infinite;
-      color: ${(props) => props.theme.brand};
-      margin-left: 1px;
-    }
-  }
-
-  .prose.markdown-body {
-    font-size: 13px;
-    line-height: 1.5;
-
-    .cursor {
-      display: inline-block;
-      animation: blink 1s infinite;
-      color: ${(props) => props.theme.brand};
-      margin-left: 1px;
-    }
-
-    p {
-      margin: 0 0 8px 0;
-      font-size: 13px;
-      &:last-child { margin-bottom: 0; }
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-      margin: 10px 0 6px 0;
-      font-weight: 600;
-      line-height: 1.3;
-      &:first-child { margin-top: 0; }
-    }
-
-    h1 { font-size: 1.3em; }
-    h2 { font-size: 1.2em; }
-    h3 { font-size: 1.1em; }
-
-    ul, ol {
-      margin: 6px 0;
-      padding-left: 16px;
-    }
-
-    li {
-      margin: 4px 0;
-      font-size: 13px;
-    }
-
-    code {
-      background: ${(props) => props.theme.codemirror.bg};
-      padding: 2px 5px;
-      border-radius: 4px;
-      font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-      font-size: 0.9em;
-    }
-
-    pre, .code-block {
-      background: ${(props) => props.theme.codemirror.bg};
-      padding: 10px 12px;
-      border-radius: 6px;
-      overflow-x: auto;
-      margin: 8px 0;
-      border: 1px solid ${(props) => props.theme.border.border1};
-
-      code {
-        background: none;
-        padding: 0;
-        font-size: 11px;
-        line-height: 1.5;
-      }
-    }
-
-    blockquote {
-      border-left: 2px solid ${(props) => props.theme.brand};
-      margin: 8px 0;
-      padding: 4px 0 4px 10px;
-      color: ${(props) => props.theme.colors.text.muted};
-      background: ${(props) => props.theme.background.surface0};
-      border-radius: 0 4px 4px 0;
-    }
-
-    a {
-      color: ${(props) => props.theme.textLink};
-      text-decoration: none;
-      &:hover { text-decoration: underline; }
-    }
-
-    strong { font-weight: 600; }
-    em { font-style: italic; }
-
-    hr {
-      border: none;
-      border-top: 1px solid ${(props) => props.theme.border.border1};
-      margin: 10px 0;
-    }
-
-    table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 8px 0;
-      font-size: 12px;
-    }
-
-    th, td {
-      border: 1px solid ${(props) => props.theme.border.border1};
-      padding: 6px 8px;
-      text-align: left;
-    }
-
-    th {
-      background: ${(props) => props.theme.codemirror.bg};
-      font-weight: 600;
-    }
-  }
-
-  .processing-indicator {
-    padding: 8px 10px;
-    background: ${(props) => props.theme.background.surface0};
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 8px;
-    animation: slideIn 0.2s ease;
-
-    .processing-content {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 6px;
-    }
-
-    .processing-icon {
-      width: 20px;
-      height: 20px;
-      border-radius: 4px;
-      background: ${(props) => props.theme.background.surface1};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: ${(props) => props.theme.brand};
-    }
-
-    .processing-label {
-      font-size: 12px;
-      font-weight: 500;
-      color: ${(props) => props.theme.text};
-    }
-
-    .processing-dots {
-      display: flex;
-      gap: 3px;
-      margin-left: 2px;
-
-      span {
-        width: 3px;
-        height: 3px;
-        background: ${(props) => props.theme.brand};
-        border-radius: 50%;
-        animation: dotBounce 1.4s infinite ease-in-out both;
-
-        &:nth-child(1) { animation-delay: -0.32s; }
-        &:nth-child(2) { animation-delay: -0.16s; }
-      }
-    }
-
-    .processing-bar {
-      height: 2px;
-      background: ${(props) => props.theme.border.border1};
-      border-radius: 1px;
-      overflow: hidden;
-
-      .processing-bar-fill {
-        height: 100%;
-        width: 30%;
-        background: ${(props) => props.theme.brand};
-        border-radius: 1px;
-        animation: progressSlide 1.5s infinite ease-in-out;
-      }
-    }
-  }
-
-  .error-message {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    padding: 8px 10px;
-    background: ${(props) => props.theme.status.danger.background};
-    border: 1px solid ${(props) => props.theme.status.danger.border};
-    border-radius: 6px;
-
-    .error-icon {
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      background: ${(props) => props.theme.colors.text.danger};
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
-      font-size: 11px;
-      flex-shrink: 0;
-    }
-
-    .error-text {
-      color: ${(props) => props.theme.colors.text.danger};
-      font-size: 12px;
-      line-height: 1.4;
-    }
-  }
-
-  .ai-sidebar-input {
-    padding: 12px;
-    border-top: 1px solid ${(props) => props.theme.border.border1};
-
-    .no-models-warning {
-      padding: 10px 12px;
-      font-size: 12px;
-      color: ${(props) => props.theme.colors.text.muted};
-      background: ${(props) => props.theme.input.bg};
-      border: 1px dashed ${(props) => props.theme.border.border1};
-      border-radius: 6px;
-      text-align: center;
-      line-height: 1.4;
-    }
-
-    .input-container {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 8px;
-      background: ${(props) => props.theme.bg};
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: 8px;
-
-      &:focus-within {
-        border-color: ${(props) => props.theme.brand};
-      }
-    }
-
-    textarea {
-      width: 100%;
-      padding: 0;
-      margin: 4px 0;
-      border: none;
-      background: transparent;
-      color: ${(props) => props.theme.text};
-      font-size: 13px;
-      font-family: inherit;
-      line-height: 1.4;
-      resize: none;
-      outline: none;
-      max-height: 100px;
-
-      &::placeholder {
-        color: ${(props) => props.theme.colors.text.muted};
-      }
-
-      &:disabled {
-        opacity: 0.6;
-      }
-    }
-
-    .input-actions {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .model-selector {
-      position: relative;
-    }
-
-    .model-btn {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 6px 4px 8px;
-      background: transparent;
-      border: 1px solid ${(props) => props.theme.border.border1};
-      border-radius: ${(props) => props.theme.border.radius.base};
-      font-size: 11px;
-      font-weight: 500;
-      color: ${(props) => props.theme.text};
-      cursor: pointer;
-
-      svg:first-child {
-        color: ${(props) => props.theme.brand};
-      }
-
-      &:hover {
-        border-color: ${(props) => props.theme.border.border2};
-      }
-    }
-
-    .send-btn, .stop-btn {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 8px;
-      border: none;
-      border-radius: 4px;
-      font-size: 11px;
-      font-weight: 500;
-      cursor: pointer;
-    }
-
-    .send-btn {
-      background: ${(props) => props.theme.brand};
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-
-      &:hover {
-        opacity: 0.9;
-      }
-
-      &:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-    }
-
-    .stop-btn {
-      background: ${(props) => props.theme.colors.text.danger};
-      color: ${(props) => (props.theme.mode === 'dark' ? '#000' : '#fff')};
-
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-  }
-
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes slideIn {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-  }
-
-  @keyframes dotBounce {
-    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-    40% { transform: scale(1); opacity: 1; }
-  }
-
-  @keyframes progressSlide {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(400%); }
-  }
-
-  @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/AiChatSidebar/constants.js

@@ -1,54 +0,0 @@
-export const PROCESSING_STAGES = [
-  { id: 'sending', label: 'Sending request', icon: 'send' },
-  { id: 'thinking', label: 'AI is thinking', icon: 'sparkles' },
-  { id: 'generating', label: 'Generating response', icon: 'wand' },
-  { id: 'applying', label: 'Preparing changes', icon: 'code' }
-];
-
-export const CONTENT_TYPE_LABELS = {
-  'app': 'App',
-  'tests': 'Tests',
-  'pre-request': 'Script',
-  'post-response': 'Script',
-  'docs': 'Docs'
-};
-
-export const SUGGESTIONS_BY_TYPE = {
-  'app': [
-    { label: 'Create a form for this request', prompt: 'Create a simple form to send this request' },
-    { label: 'Add a loading spinner', prompt: 'Add a loading spinner while the request is pending' },
-    { label: 'Show response in a table', prompt: 'Display the response data in a table' },
-    { label: 'Add error handling', prompt: 'Add error handling with user-friendly messages' }
-  ],
-  'tests': [
-    { label: 'Generate basic tests', prompt: 'Generate tests for status code, response body, and headers' },
-    { label: 'Test response structure', prompt: 'Write tests to validate the response body structure and data types' },
-    { label: 'Test error cases', prompt: 'Write tests for common error scenarios' },
-    { label: 'Test response time', prompt: 'Add a test to verify response time is acceptable' }
-  ],
-  'pre-request': [
-    { label: 'Add authentication', prompt: 'Add authorization header from environment variable' },
-    { label: 'Set dynamic variables', prompt: 'Set dynamic request variables like timestamp or unique ID' },
-    { label: 'Conditional logic', prompt: 'Add conditional logic to modify the request based on environment' }
-  ],
-  'post-response': [
-    { label: 'Extract to variables', prompt: 'Extract data from response and save to environment variables' },
-    { label: 'Store auth token', prompt: 'Extract auth token from response and save for future requests' },
-    { label: 'Log response', prompt: 'Log response status and body for debugging' },
-    { label: 'Transform response', prompt: 'Transform and process the response data' }
-  ],
-  'docs': [
-    { label: 'Generate full docs', prompt: 'Generate comprehensive API documentation for this endpoint' },
-    { label: 'Document parameters', prompt: 'Document all request parameters, headers, and body' },
-    { label: 'Add examples', prompt: 'Add request and response examples' },
-    { label: 'Document errors', prompt: 'Document common error responses and status codes' }
-  ]
-};
-
-export const PLACEHOLDER_BY_TYPE = {
-  'tests': { empty: 'Describe the tests you want...', filled: 'Ask to modify or add tests...' },
-  'pre-request': { empty: 'Describe the script you want...', filled: 'Ask to modify the script...' },
-  'post-response': { empty: 'Describe the script you want...', filled: 'Ask to modify the script...' },
-  'docs': { empty: 'Describe the documentation...', filled: 'Ask to update the docs...' },
-  'app': { empty: 'Describe the app you want to create...', filled: 'Ask to modify your app...' }
-};

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

@@ -1,864 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  IconX,
-  IconPlayerStop,
-  IconCheck,
-  IconCode,
-  IconWand,
-  IconStars,
-  IconCornerDownLeft,
-  IconChevronDown,
-  IconHistory,
-  IconPlus,
-  IconTrash
-} from '@tabler/icons';
-import get from 'lodash/get';
-import find from 'lodash/find';
-import MenuDropdown from 'ui/MenuDropdown';
-import { focusTab } from 'providers/ReduxStore/slices/tabs';
-import {
-  closeAiSidebar,
-  sendAiMessage,
-  stopAiStream,
-  setChatBinding,
-  startNewConversation,
-  refreshChatHistory,
-  openConversation,
-  removeConversation,
-  setMessageCodeStatus
-} from 'providers/ReduxStore/slices/chat';
-import {
-  updateAppCode,
-  updateRequestTests,
-  updateRequestScript,
-  updateResponseScript,
-  updateRequestDocs,
-  updateFolderRequestScript,
-  updateFolderResponseScript,
-  updateFolderTests,
-  updateFolderDocs,
-  updateCollectionRequestScript,
-  updateCollectionResponseScript,
-  updateCollectionTests,
-  updateCollectionDocs
-} from 'providers/ReduxStore/slices/collections';
-import { findItemInCollection, isItemAFolder, isItemARequest } from 'utils/collections';
-import { buildAiVariablesPayload, getAiStatus } from 'utils/ai';
-
-import StyledWrapper from './StyledWrapper';
-import DiffView from './DiffView';
-import AssistantCodeBlock from './AssistantCodeBlock';
-import { PROCESSING_STAGES, CONTENT_TYPE_LABELS, SUGGESTIONS_BY_TYPE, PLACEHOLDER_BY_TYPE } from './constants';
-import { renderMarkdown, parseMessageSegments } from './utils';
-
-const SELECTED_MODEL_LS_KEY = 'bruno.ai.chat.selectedModel';
-const AUTO_MODEL_ID = '';
-
-const ToolActivityGroup = ({ activities }) => {
-  if (!activities?.length) return null;
-  const allDone = activities.every((a) => a.done);
-  return (
-    <div className={`tool-activity-log ${allDone ? 'completed' : ''}`}>
-      {activities.map((activity, i) => (
-        <div key={i} className={`tool-activity-item ${activity.done ? 'done' : 'active'}`}>
-          <span className="tool-activity-indicator">
-            {activity.done ? <IconCheck size={10} /> : <span className="tool-activity-spinner" />}
-          </span>
-          <span>{activity.label}{!activity.done ? '…' : ''}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const buildMessageTimeline = (cleanedContent, activities) => {
-  if (!activities?.length) {
-    return cleanedContent ? [{ type: 'text', content: cleanedContent }] : [];
-  }
-  if (!cleanedContent) return [{ type: 'tools', activities }];
-
-  const groups = [];
-  for (const activity of activities) {
-    const offset = Math.min(activity.textOffset || 0, cleanedContent.length);
-    const last = groups[groups.length - 1];
-    if (last && last.offset === offset) last.activities.push(activity);
-    else groups.push({ offset, activities: [activity] });
-  }
-
-  const parts = [];
-  let cursor = 0;
-  for (const group of groups) {
-    if (group.offset > cursor) {
-      parts.push({ type: 'text', content: cleanedContent.substring(cursor, group.offset) });
-    }
-    parts.push({ type: 'tools', activities: group.activities });
-    cursor = Math.max(cursor, group.offset);
-  }
-  if (cursor < cleanedContent.length) {
-    parts.push({ type: 'text', content: cleanedContent.substring(cursor) });
-  }
-  return parts;
-};
-
-const formatRelativeTime = (timestamp) => {
-  if (!timestamp) return '';
-  const diff = Date.now() - timestamp;
-  const minute = 60 * 1000;
-  const hour = 60 * minute;
-  const day = 24 * hour;
-  if (diff < minute) return 'just now';
-  if (diff < hour) return `${Math.floor(diff / minute)}m ago`;
-  if (diff < day) return `${Math.floor(diff / hour)}h ago`;
-  if (diff < 7 * day) return `${Math.floor(diff / day)}d ago`;
-  return new Date(timestamp).toLocaleDateString();
-};
-
-const HistoryPopover = ({ items, activeId, onPick, onDelete, onClose }) => {
-  const popoverRef = useRef(null);
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (popoverRef.current && !popoverRef.current.contains(e.target)) {
-        onClose();
-      }
-    };
-    const handleKey = (e) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('mousedown', handleClick);
-    document.addEventListener('keydown', handleKey);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-      document.removeEventListener('keydown', handleKey);
-    };
-  }, [onClose]);
-
-  return (
-    <div className="history-popover" ref={popoverRef} role="menu">
-      {items.length === 0 ? (
-        <div className="history-popover__empty">No past conversations</div>
-      ) : (
-        items.map((item) => (
-          <div
-            key={item.id}
-            className={`history-popover__item ${item.id === activeId ? 'is-active' : ''}`}
-            role="menuitem"
-          >
-            <button className="history-popover__title" onClick={() => onPick(item.id)} title={item.title}>
-              <span className="history-popover__title-text">{item.title || '(untitled)'}</span>
-              <span className="history-popover__meta">{formatRelativeTime(item.updatedAt)}</span>
-            </button>
-            <button
-              className="history-popover__delete"
-              onClick={(e) => {
-                e.stopPropagation(); onDelete(item.id);
-              }}
-              title="Delete conversation"
-              aria-label="Delete conversation"
-            >
-              <IconTrash size={12} />
-            </button>
-          </div>
-        ))
-      )}
-    </div>
-  );
-};
-
-const AiChatSidebar = ({ collection }) => {
-  const dispatch = useDispatch();
-  const [input, setInput] = useState('');
-  const [processingStage, setProcessingStage] = useState(null);
-  const [availableModels, setAvailableModels] = useState([]);
-  const [selectedModel, setSelectedModel] = useState(() => {
-    try { return localStorage.getItem(SELECTED_MODEL_LS_KEY) ?? AUTO_MODEL_ID; } catch { return AUTO_MODEL_ID; }
-  });
-  const [historyOpen, setHistoryOpen] = useState(false);
-  const messagesEndRef = useRef(null);
-  const messagesContainerRef = useRef(null);
-  const isNearBottomRef = useRef(true);
-  const textareaRef = useRef(null);
-
-  const isOpen = useSelector((state) => state.chat.isOpen);
-  const allChats = useSelector((state) => state.chat.chats);
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const preferences = useSelector((state) => state.app.preferences);
-  const aiEnabled = get(preferences, 'ai.enabled', false);
-
-  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  const activeItem = focusedTab && collection ? findItemInCollection(collection, activeTabUid) : null;
-
-  const aiContext = useMemo(() => {
-    if (!focusedTab || !collection) return null;
-    if (activeItem && (isItemARequest(activeItem) || activeItem.type === 'app')) {
-      return { kind: 'request', item: activeItem, pathname: activeItem.pathname || '', name: activeItem.name || 'Untitled' };
-    }
-    if (activeItem && isItemAFolder(activeItem)) {
-      return { kind: 'folder', folder: activeItem, pathname: activeItem.pathname || '', name: activeItem.name || 'Untitled' };
-    }
-    // Anything else (collection-settings, runner, variables, openapi-sync,
-    // .js files in File Mode …) falls back to the collection root so the AI
-    // button always opens a useful chat instead of a no-op.
-    return { kind: 'collection', pathname: collection.pathname || '', name: collection.name || 'Untitled Collection' };
-  }, [focusedTab, collection, activeItem]);
-
-  const currentChat = allChats[activeTabUid] || { messages: [], isLoading: false, error: null, historyList: [] };
-  const { messages, isLoading, error, historyList, conversationId } = currentChat;
-
-  useEffect(() => {
-    if (!isOpen || !aiEnabled) return;
-    let cancelled = false;
-    getAiStatus()
-      .then((status) => {
-        if (cancelled) return;
-        setAvailableModels(status?.availableModels || []);
-      })
-      .catch(() => {
-        if (!cancelled) setAvailableModels([]);
-      });
-    return () => { cancelled = true; };
-  }, [isOpen, aiEnabled, preferences?.ai]);
-
-  // Auto = empty string. We don't auto-correct to the first model — let the
-  // backend pick, so users get smart defaults that adapt as providers change.
-  useEffect(() => {
-    if (selectedModel === AUTO_MODEL_ID) return;
-    if (availableModels.length === 0) return;
-    if (availableModels.some((m) => m.id === selectedModel)) return;
-    setSelectedModel(AUTO_MODEL_ID);
-    try { localStorage.setItem(SELECTED_MODEL_LS_KEY, AUTO_MODEL_ID); } catch {}
-  }, [availableModels, selectedModel]);
-
-  const requestName = aiContext?.name || activeItem?.name || 'Untitled';
-  const requestMethod = useMemo(() => {
-    if (aiContext?.kind === 'folder') return 'FOLDER';
-    if (aiContext?.kind === 'collection') return 'ROOT';
-    if (!activeItem) return 'GET';
-    if (activeItem.type === 'grpc-request') return 'GRPC';
-    if (activeItem.type === 'ws-request') return 'WS';
-    if (activeItem.type === 'graphql-request') return 'GQL';
-    if (activeItem.type === 'app') return 'APP';
-    const appOn = activeItem.draft
-      ? get(activeItem, 'draft.app.enabled', false)
-      : get(activeItem, 'app.enabled', false);
-    if (appOn) return 'APP';
-    return activeItem.draft
-      ? get(activeItem, 'draft.request.method', 'GET')
-      : get(activeItem, 'request.method', 'GET');
-  }, [aiContext?.kind, activeItem]);
-
-  // contentType drives the AI prompt, the diff target, and which entry of
-  // allContent the backend treats as "active". For requests it follows the
-  // request-pane tab. For folders / collections we read the settings sub-tab
-  // (and the inner pre/post script split for the Script sub-tab).
-  const requestPaneTab = focusedTab?.requestPaneTab;
-  const scriptPaneTab = focusedTab?.scriptPaneTab;
-  const contentType = useMemo(() => {
-    if (aiContext?.kind === 'folder') {
-      const sub = collection?.folderLevelSettingsSelectedTab?.[aiContext.folder.uid];
-      if (sub === 'test') return 'tests';
-      if (sub === 'docs') return 'docs';
-      if (sub === 'script') return scriptPaneTab === 'post-response' ? 'post-response' : 'pre-request';
-      return 'pre-request';
-    }
-    if (aiContext?.kind === 'collection') {
-      const sub = collection?.settingsSelectedTab;
-      if (sub === 'tests') return 'tests';
-      if (sub === 'overview') return 'docs';
-      if (sub === 'script') return scriptPaneTab === 'post-response' ? 'post-response' : 'pre-request';
-      return 'pre-request';
-    }
-    switch (requestPaneTab) {
-      case 'tests': return 'tests';
-      case 'script': return scriptPaneTab === 'post-response' ? 'post-response' : 'pre-request';
-      case 'docs': return 'docs';
-      default: return 'app';
-    }
-  }, [aiContext, collection?.folderLevelSettingsSelectedTab, collection?.settingsSelectedTab, requestPaneTab, scriptPaneTab]);
-
-  // Bind the chat to the active context's pathname so the history list
-  // reflects this specific request/folder/collection and persistence keys stay
-  // stable across sessions. Restoring the most recent conversation happens
-  // once per tab — if the user explicitly starts a new chat, we don't
-  // auto-replace it.
-  const restoredOnceRef = useRef({});
-  useEffect(() => {
-    if (!isOpen || !aiContext || !collection) return;
-    dispatch(setChatBinding({
-      tabUid: activeTabUid,
-      pathname: aiContext.pathname,
-      collectionUid: collection.uid,
-      contentType
-    }));
-    dispatch(refreshChatHistory(activeTabUid));
-  }, [isOpen, aiContext?.pathname, collection?.uid, activeTabUid, contentType, dispatch]);
-
-  // First-open restore: if this tab has no conversation yet and there's a
-  // saved one for the same file, load the most recent.
-  useEffect(() => {
-    if (!isOpen || !activeTabUid) return;
-    if (restoredOnceRef.current[activeTabUid]) return;
-    if (currentChat.conversationId) return;
-    if (currentChat.messages?.length > 0) return;
-    if (!historyList || historyList.length === 0) return;
-    restoredOnceRef.current[activeTabUid] = true;
-    dispatch(openConversation(activeTabUid, historyList[0].id));
-  }, [isOpen, activeTabUid, currentChat.conversationId, currentChat.messages?.length, historyList, dispatch]);
-
-  const allContent = useMemo(() => {
-    if (!aiContext) return {};
-    if (aiContext.kind === 'request') {
-      const item = aiContext.item;
-      const draft = item.draft;
-      const draftAppCode = get(item, 'draft.app.code');
-      return {
-        'app': draftAppCode != null ? draftAppCode : get(item, 'app.code', ''),
-        'tests': draft ? get(draft, 'request.tests', '') : get(item, 'request.tests', ''),
-        'pre-request': draft ? get(draft, 'request.script.req', '') : get(item, 'request.script.req', ''),
-        'post-response': draft ? get(draft, 'request.script.res', '') : get(item, 'request.script.res', ''),
-        'docs': draft ? get(draft, 'request.docs', '') : get(item, 'request.docs', '')
-      };
-    }
-    if (aiContext.kind === 'folder') {
-      const folder = aiContext.folder;
-      const root = folder.draft || folder.root || {};
-      return {
-        'tests': get(root, 'request.tests', ''),
-        'pre-request': get(root, 'request.script.req', ''),
-        'post-response': get(root, 'request.script.res', ''),
-        'docs': get(root, 'docs', '')
-      };
-    }
-    // collection
-    const root = collection?.draft?.root || collection?.root || {};
-    return {
-      'tests': get(root, 'request.tests', ''),
-      'pre-request': get(root, 'request.script.req', ''),
-      'post-response': get(root, 'request.script.res', ''),
-      'docs': get(root, 'docs', '')
-    };
-  }, [aiContext, collection?.draft?.root, collection?.root]);
-
-  const currentContent = allContent[contentType] || '';
-
-  // requestContext (URL/method/headers/response shape) only makes sense for
-  // HTTP-style request items. Folder, collection, and App chats skip it —
-  // App items live under kind: 'request' but have no URL/method to surface.
-  const requestContext = useMemo(() => {
-    if (aiContext?.kind !== 'request' || !isItemARequest(aiContext.item)) return null;
-    const item = aiContext.item;
-    const draft = item.draft;
-    return {
-      url: draft ? get(item, 'draft.request.url', '') : get(item, 'request.url', ''),
-      method: draft ? get(item, 'draft.request.method', '') : get(item, 'request.method', ''),
-      headers: draft ? get(item, 'draft.request.headers', []) : get(item, 'request.headers', []),
-      params: draft ? get(item, 'draft.request.params', []) : get(item, 'request.params', []),
-      body: draft ? get(item, 'draft.request.body', null) : get(item, 'request.body', null),
-      docs: draft ? get(item, 'draft.request.docs', null) : get(item, 'request.docs', null),
-      responseStatus: get(item, 'response.status', null),
-      responseData: get(item, 'response.data', null)
-    };
-  }, [aiContext]);
-
-  // Variables payload is collection-scoped — works for request, folder, and
-  // collection chats alike. Each entry is { name, value, scope, secret }; the
-  // model gets a name-only preview in the prompt and can call search_variables
-  // to fetch values (secrets come back redacted).
-  const aiVariables = useMemo(() => {
-    if (aiContext?.kind === 'request') return buildAiVariablesPayload(collection, aiContext.item);
-    if (aiContext?.kind === 'folder') return buildAiVariablesPayload(collection, aiContext.folder);
-    return buildAiVariablesPayload(collection, null);
-  }, [collection, aiContext]);
-
-  const chatsWithMessages = useMemo(() => {
-    if (!collection) return [];
-    return Object.entries(allChats)
-      .filter(([, chat]) => chat.messages?.length > 0)
-      .map(([tabUid, chat]) => {
-        if (tabUid === collection.uid) {
-          return { id: tabUid, name: collection.name || 'Untitled Collection', method: 'ROOT', messageCount: chat.messages.length };
-        }
-        const item = findItemInCollection(collection, tabUid);
-        if (!item) return null;
-        if (isItemAFolder(item)) {
-          return { id: tabUid, name: item.name || 'Untitled', method: 'FOLDER', messageCount: chat.messages.length };
-        }
-        const method = item.draft
-          ? get(item, 'draft.request.method', 'GET')
-          : get(item, 'request.method', 'GET');
-        return {
-          id: tabUid,
-          name: item.name || 'Untitled',
-          method,
-          messageCount: chat.messages.length
-        };
-      })
-      .filter(Boolean);
-  }, [allChats, collection]);
-
-  const scrollToBottom = useCallback((behavior = 'smooth') => {
-    messagesEndRef.current?.scrollIntoView({ behavior });
-  }, []);
-
-  const handleMessagesScroll = useCallback(() => {
-    const el = messagesContainerRef.current;
-    if (!el) return;
-    isNearBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
-  }, []);
-
-  useEffect(() => {
-    if (!isNearBottomRef.current) return;
-    const behavior = messages.some((m) => m.isStreaming) ? 'auto' : 'smooth';
-    scrollToBottom(behavior);
-  }, [messages, scrollToBottom]);
-
-  useEffect(() => {
-    if (isOpen) textareaRef.current?.focus();
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (!isLoading) {
-      setProcessingStage(null);
-      return;
-    }
-    const last = messages[messages.length - 1];
-    if (last?.isStreaming && last.content) setProcessingStage('generating');
-    else if (last?.isStreaming) setProcessingStage('thinking');
-    else setProcessingStage('sending');
-  }, [isLoading, messages]);
-
-  const handleTextareaChange = (e) => {
-    setInput(e.target.value);
-    const el = textareaRef.current;
-    if (el) {
-      el.style.height = 'auto';
-      el.style.height = Math.min(el.scrollHeight, 150) + 'px';
-    }
-  };
-
-  const handleSubmit = async (e) => {
-    e?.preventDefault();
-    if (!input.trim() || isLoading || availableModels.length === 0) return;
-
-    const text = input.trim();
-    setInput('');
-    setProcessingStage('sending');
-    if (textareaRef.current) textareaRef.current.style.height = 'auto';
-
-    try {
-      await dispatch(sendAiMessage(activeTabUid, text, allContent, requestContext, selectedModel, contentType, aiVariables));
-      setProcessingStage('applying');
-      setTimeout(() => setProcessingStage(null), 500);
-    } catch (err) {
-      console.error('Failed to send AI message:', err);
-      setProcessingStage(null);
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
-  const handleStop = () => {
-    dispatch(stopAiStream(activeTabUid));
-    setProcessingStage(null);
-  };
-
-  const handleApplyCode = (code, originalCode, messageIndex, msgContentType, writeIndex) => {
-    if (!aiContext || code == null) return;
-    const targetType = msgContentType || contentType;
-
-    // Bail if the live buffer has drifted from what the AI based the diff on.
-    // The DiffView already disables the button in this case, but guarding here
-    // too means the keyboard / programmatic path can't blow away local edits.
-    const liveContent = allContent[targetType] || '';
-    if (originalCode != null && liveContent !== originalCode) {
-      return;
-    }
-
-    if (aiContext.kind === 'request') {
-      const payload = { itemUid: aiContext.item.uid, collectionUid: collection.uid };
-      switch (targetType) {
-        case 'tests': dispatch(updateRequestTests({ ...payload, tests: code })); break;
-        case 'pre-request': dispatch(updateRequestScript({ ...payload, script: code })); break;
-        case 'post-response': dispatch(updateResponseScript({ ...payload, script: code })); break;
-        case 'docs': dispatch(updateRequestDocs({ ...payload, docs: code })); break;
-        default: dispatch(updateAppCode({ ...payload, code })); break;
-      }
-    } else if (aiContext.kind === 'folder') {
-      const payload = { folderUid: aiContext.folder.uid, collectionUid: collection.uid };
-      switch (targetType) {
-        case 'tests': dispatch(updateFolderTests({ ...payload, tests: code })); break;
-        case 'pre-request': dispatch(updateFolderRequestScript({ ...payload, script: code })); break;
-        case 'post-response': dispatch(updateFolderResponseScript({ ...payload, script: code })); break;
-        case 'docs': dispatch(updateFolderDocs({ ...payload, docs: code })); break;
-        // Folders / collections have no 'app' equivalent. Bail rather than
-        // marking the diff accepted when nothing was dispatched.
-        default: return;
-      }
-    } else {
-      const payload = { collectionUid: collection.uid };
-      switch (targetType) {
-        case 'tests': dispatch(updateCollectionTests({ ...payload, tests: code })); break;
-        case 'pre-request': dispatch(updateCollectionRequestScript({ ...payload, script: code })); break;
-        case 'post-response': dispatch(updateCollectionResponseScript({ ...payload, script: code })); break;
-        case 'docs': dispatch(updateCollectionDocs({ ...payload, docs: code })); break;
-        default: return;
-      }
-    }
-
-    dispatch(setMessageCodeStatus({
-      tabUid: activeTabUid,
-      messageIndex,
-      status: 'accepted',
-      writeIndex
-    }));
-  };
-
-  const handleRejectCode = (messageIndex, writeIndex) => {
-    dispatch(setMessageCodeStatus({
-      tabUid: activeTabUid,
-      messageIndex,
-      status: 'rejected',
-      writeIndex
-    }));
-  };
-
-  const handleNewChat = () => {
-    setHistoryOpen(false);
-    restoredOnceRef.current[activeTabUid] = true; // suppress restore
-    dispatch(startNewConversation({ tabUid: activeTabUid, contentType }));
-    textareaRef.current?.focus();
-  };
-
-  const handlePickConversation = (id) => {
-    setHistoryOpen(false);
-    restoredOnceRef.current[activeTabUid] = true;
-    dispatch(openConversation(activeTabUid, id));
-  };
-
-  const handleDeleteConversation = (id) => {
-    dispatch(removeConversation(activeTabUid, id));
-  };
-
-  const handleClose = () => dispatch(closeAiSidebar());
-  const handleSwitchChat = (tabUid) => dispatch(focusTab({ uid: tabUid }));
-
-  const handleSuggestionClick = (suggestion) => {
-    setInput(suggestion);
-    textareaRef.current?.focus();
-  };
-
-  const handleModelSelect = (modelId) => {
-    setSelectedModel(modelId);
-    try { localStorage.setItem(SELECTED_MODEL_LS_KEY, modelId); } catch {}
-  };
-
-  const selectedModelLabel = useMemo(() => {
-    if (selectedModel === AUTO_MODEL_ID) return 'Auto';
-    return availableModels.find((m) => m.id === selectedModel)?.label || 'Auto';
-  }, [availableModels, selectedModel]);
-
-  const ModelSelectorTrigger = forwardRef((props, ref) => (
-    <div ref={ref} className="model-btn" {...props}>
-      <IconStars size={14} strokeWidth={1.75} />
-      <span>{selectedModelLabel}</span>
-      <IconChevronDown size={12} />
-    </div>
-  ));
-  ModelSelectorTrigger.displayName = 'ModelSelectorTrigger';
-
-  const modelMenuItems = useMemo(
-    () => [
-      { id: AUTO_MODEL_ID, label: 'Auto', onClick: () => handleModelSelect(AUTO_MODEL_ID) },
-      ...availableModels.map((model) => ({
-        id: model.id,
-        label: model.label,
-        onClick: () => handleModelSelect(model.id)
-      }))
-    ],
-    [availableModels]
-  );
-
-  const hasActiveStream = messages.some((m) => m.isStreaming);
-
-  const renderProcessingIndicator = () => {
-    if (!processingStage || processingStage === 'thinking' || hasActiveStream) return null;
-    const stage = PROCESSING_STAGES.find((s) => s.id === processingStage) || PROCESSING_STAGES[0];
-    return (
-      <div className="processing-indicator">
-        <div className="processing-content">
-          <div className="processing-icon">
-            {stage.icon === 'sparkles' && <IconStars size={12} />}
-            {stage.icon === 'wand' && <IconWand size={12} />}
-            {stage.icon === 'code' && <IconCode size={12} />}
-            {stage.icon === 'send' && <IconCornerDownLeft size={12} />}
-          </div>
-          <span className="processing-label">{stage.label}</span>
-          <div className="processing-dots"><span></span><span></span><span></span></div>
-        </div>
-        <div className="processing-bar"><div className="processing-bar-fill"></div></div>
-      </div>
-    );
-  };
-
-  const renderMessage = (msg, index) => {
-    const isUser = msg.role === 'user';
-    const isStreaming = msg.isStreaming;
-    const activities = msg.toolActivity || [];
-    const hasPendingTool = activities.some((a) => !a.done);
-    const content = msg.content || '';
-
-    const showThinking = isStreaming && !content && activities.length === 0;
-    const showWorking = isStreaming && activities.length > 0 && !hasPendingTool;
-    const timeline = buildMessageTimeline(content, activities);
-
-    return (
-      <div key={index} className={`message ${msg.role} ${isStreaming ? 'streaming' : ''}`}>
-        <div className="message-content">
-          {isUser ? content : (
-            <>
-              {showThinking && (
-                <div className="message-status">
-                  <span className="message-status__spinner" />
-                  <span>Thinking…</span>
-                </div>
-              )}
-
-              {timeline.map((part, partIndex) => {
-                if (part.type === 'tools') {
-                  return <ToolActivityGroup key={`tools-${partIndex}`} activities={part.activities} />;
-                }
-                const segments = parseMessageSegments(part.content);
-                const isLastTextPart = !timeline.slice(partIndex + 1).some((p) => p.type === 'text');
-                return (
-                  <React.Fragment key={`text-${partIndex}`}>
-                    {segments.map((segment, segIndex) => {
-                      const isLastSegment = isLastTextPart && segIndex === segments.length - 1;
-                      if (segment.type === 'code') {
-                        return (
-                          <AssistantCodeBlock
-                            key={`p${partIndex}-s${segIndex}`}
-                            content={segment.content}
-                            language={segment.language}
-                            isOpen={segment.isOpen}
-                            isStreaming={isStreaming}
-                            isLast={isLastSegment}
-                          />
-                        );
-                      }
-                      return (
-                        <div key={`p${partIndex}-s${segIndex}`} className="prose markdown-body">
-                          <div dangerouslySetInnerHTML={{ __html: renderMarkdown(segment.content) }} />
-                          {isStreaming && isLastSegment && <span className="cursor">|</span>}
-                        </div>
-                      );
-                    })}
-                  </React.Fragment>
-                );
-              })}
-
-              {showWorking && (
-                <div className="message-status">
-                  <span className="message-status__spinner" />
-                  <span>Working…</span>
-                </div>
-              )}
-
-              {!isStreaming && msg.writes?.length > 0 && msg.writes.map((write, writeIdx) => {
-                if (write.content === write.originalContent) return null;
-                const liveContent = allContent[write.type] || '';
-                const isStale = liveContent !== write.originalContent;
-                const notRead = !write.wasRead;
-                return (
-                  <DiffView
-                    key={`write-${writeIdx}`}
-                    originalCode={write.originalContent || ''}
-                    newCode={write.content}
-                    contentTypeLabel={CONTENT_TYPE_LABELS[write.type] || write.type}
-                    warning={
-                      notRead ? 'Content was not read first — changes may overwrite unrelated edits'
-                        : isStale ? 'Content has been modified since AI read it'
-                          : null
-                    }
-                    disableAccept={isStale || notRead}
-                    onAccept={() => handleApplyCode(write.content, write.originalContent, index, write.type, writeIdx)}
-                    onReject={() => handleRejectCode(index, writeIdx)}
-                    status={write.status}
-                  />
-                );
-              })}
-
-              {!isStreaming && !msg.writes && msg.code && msg.originalCode && msg.code !== msg.originalCode && (
-                <DiffView
-                  originalCode={msg.originalCode || ''}
-                  newCode={msg.code}
-                  onAccept={() => handleApplyCode(msg.code, msg.originalCode, index, msg.contentType)}
-                  onReject={() => handleRejectCode(index)}
-                  status={msg.codeStatus}
-                />
-              )}
-
-              {!isStreaming && msg.cancelled && (
-                <div className="message-cancelled"><em>Cancelled</em></div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  const renderEmptyState = () => {
-    const suggestions = SUGGESTIONS_BY_TYPE[contentType] || SUGGESTIONS_BY_TYPE.app;
-    return (
-      <div className="empty-state">
-        <div className="empty-icon"><IconStars size={20} /></div>
-        <h3>AI Assistant</h3>
-        <p>Ask me to generate or modify code, tests, scripts, and docs.</p>
-        <div className="suggestions">
-          <p className="suggestions-title">Try asking:</p>
-          <div className="suggestion-chips">
-            {suggestions.map((s, i) => (
-              <button key={i} className="suggestion-chip" onClick={() => handleSuggestionClick(s.prompt)}>
-                {s.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  if (!isOpen) return null;
-  if (!aiContext) return null;
-
-  const placeholders = PLACEHOLDER_BY_TYPE[contentType] || PLACEHOLDER_BY_TYPE.app;
-  const placeholder = currentContent ? placeholders.filled : placeholders.empty;
-  const historyCount = historyList?.length || 0;
-
-  return (
-    <StyledWrapper>
-      <div className="ai-sidebar">
-        <div className="ai-sidebar-header">
-          <div className="header-left">
-            <IconStars size={18} className="header-icon" />
-            <span className={`header-method method-${(requestMethod || 'get').toLowerCase()}`}>{requestMethod}</span>
-            <span className="header-title">{requestName}</span>
-            {chatsWithMessages.length > 1 && (
-              <MenuDropdown
-                items={chatsWithMessages.map((chat) => ({
-                  id: chat.id,
-                  label: `${chat.method} · ${chat.name}`,
-                  onClick: () => handleSwitchChat(chat.id)
-                }))}
-                placement="bottom-start"
-                selectedItemId={activeTabUid}
-              >
-                <button className="chat-switcher-btn" title="Switch chat">
-                  <IconChevronDown size={14} />
-                </button>
-              </MenuDropdown>
-            )}
-          </div>
-          <div className="header-actions">
-            <button
-              className="icon-btn"
-              onClick={handleNewChat}
-              title="New chat"
-              disabled={isLoading || messages.length === 0}
-            >
-              <IconPlus size={14} />
-            </button>
-            <div className="history-wrap">
-              <button
-                className={`icon-btn ${historyOpen ? 'is-active' : ''}`}
-                onClick={() => setHistoryOpen((v) => !v)}
-                title="History"
-                disabled={historyCount === 0}
-              >
-                <IconHistory size={14} />
-              </button>
-              {historyOpen && (
-                <HistoryPopover
-                  items={historyList || []}
-                  activeId={conversationId}
-                  onPick={handlePickConversation}
-                  onDelete={handleDeleteConversation}
-                  onClose={() => setHistoryOpen(false)}
-                />
-              )}
-            </div>
-            <button className="icon-btn close-btn" onClick={handleClose} title="Close">
-              <IconX size={14} />
-            </button>
-          </div>
-        </div>
-
-        <div className="ai-sidebar-messages" ref={messagesContainerRef} onScroll={handleMessagesScroll}>
-          {messages.length === 0 ? renderEmptyState() : (
-            <>
-              {messages.map(renderMessage)}
-              {renderProcessingIndicator()}
-            </>
-          )}
-          {error && (
-            <div className="error-message">
-              <div className="error-icon">!</div>
-              <div className="error-text">{error}</div>
-            </div>
-          )}
-          <div ref={messagesEndRef} />
-        </div>
-
-        <div className="ai-sidebar-input">
-          {availableModels.length === 0 ? (
-            <div className="no-models-warning">
-              No AI models available. Configure a provider and enable models in Preferences &gt; AI.
-            </div>
-          ) : (
-            <div className="input-container">
-              <textarea
-                ref={textareaRef}
-                value={input}
-                onChange={handleTextareaChange}
-                onKeyDown={handleKeyDown}
-                placeholder={placeholder}
-                disabled={isLoading}
-                rows={1}
-              />
-              <div className="input-actions">
-                <div className="model-selector">
-                  <MenuDropdown items={modelMenuItems} placement="top-start" selectedItemId={selectedModel}>
-                    <ModelSelectorTrigger />
-                  </MenuDropdown>
-                </div>
-                {isLoading ? (
-                  <button className="stop-btn" onClick={handleStop} title="Stop generating">
-                    <IconPlayerStop size={12} /> Stop
-                  </button>
-                ) : (
-                  <button
-                    className="send-btn"
-                    onClick={handleSubmit}
-                    title="Send (Enter)"
-                    disabled={!input.trim()}
-                  >
-                    Send <IconCornerDownLeft size={12} />
-                  </button>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default AiChatSidebar;

packages/bruno-app/src/components/AiChatSidebar/utils.js

@@ -1,63 +0,0 @@
-import MarkdownIt from 'markdown-it';
-
-const SAFE_LANG = /^[a-z0-9_+#.-]+$/i;
-const safeLanguage = (lang) => (lang && SAFE_LANG.test(lang) ? lang : 'text');
-
-const md = new MarkdownIt({
-  html: false,
-  breaks: true,
-  linkify: true,
-  highlight: (str, lang) =>
-    `<pre class="code-block"><code class="language-${safeLanguage(lang)}">${md.utils.escapeHtml(str)}</code></pre>`
-});
-
-export const renderMarkdown = (content) => md.render(content || '');
-
-export const parseMessageSegments = (content = '') => {
-  if (!content) return [];
-
-  const segments = [];
-  let cursor = 0;
-  let inCode = false;
-  let language = '';
-
-  while (cursor <= content.length) {
-    const fenceIndex = content.indexOf('```', cursor);
-
-    if (fenceIndex === -1) {
-      const chunk = content.slice(cursor);
-      if (inCode || chunk) {
-        segments.push({
-          type: inCode ? 'code' : 'text',
-          content: chunk,
-          language,
-          isOpen: inCode
-        });
-      }
-      break;
-    }
-
-    if (!inCode) {
-      const textChunk = content.slice(cursor, fenceIndex);
-      if (textChunk) {
-        segments.push({ type: 'text', content: textChunk });
-      }
-      const fenceEnd = fenceIndex + 3;
-      const lineEnd = content.indexOf('\n', fenceEnd);
-      language = (lineEnd === -1 ? content.slice(fenceEnd) : content.slice(fenceEnd, lineEnd)).trim();
-      inCode = true;
-      cursor = lineEnd === -1 ? content.length : lineEnd + 1;
-    } else {
-      const codeChunk = content.slice(cursor, fenceIndex);
-      if (codeChunk.trim()) {
-        segments.push({ type: 'code', content: codeChunk, language, isOpen: false });
-      }
-      inCode = false;
-      language = '';
-      cursor = fenceIndex + 3;
-      if (content[cursor] === '\n') cursor += 1;
-    }
-  }
-
-  return segments.filter((seg) => seg.content && seg.content.trim());
-};

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

@@ -2,11 +2,10 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    height: calc(100vh - 9rem);
+    height: calc(100vh - 4rem);
     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;
   }
 
@@ -61,17 +60,6 @@ const StyledWrapper = styled.div`
   .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

@@ -57,6 +57,16 @@ export default class CodeEditor extends React.Component {
       scrollbarStyle: 'overlay',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
+        'Cmd-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
+        'Ctrl-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
         'Cmd-F': 'findPersistent',
         'Ctrl-F': 'findPersistent',
         'Cmd-H': 'replace',

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

@@ -0,0 +1,51 @@
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch, useSelector } from 'react-redux';
+import CodeEditor from './CodeEditor/index';
+import { IconDeviceFloppy } from '@tabler/icons';
+import { saveApiSpecToFile } from 'providers/ReduxStore/slices/apiSpec';
+import { useState } from 'react';
+
+const FileEditor = ({ apiSpec }) => {
+  const dispatch = useDispatch();
+  const { displayedTheme, theme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
+
+  const [content, setContent] = useState(apiSpec?.raw);
+
+  const onEdit = (value) => {
+    setContent(value);
+  };
+
+  const onSave = () => {
+    dispatch(saveApiSpecToFile({ uid: apiSpec?.uid, content }));
+  };
+
+  const hasChanges = Boolean(content != apiSpec?.raw);
+
+  const editorMode = 'yaml';
+
+  return (
+    <div className="flex flex-grow relative">
+      <CodeEditor
+        theme={displayedTheme}
+        value={content}
+        onEdit={onEdit}
+        onSave={onSave}
+        mode={editorMode}
+        font={get(preferences, 'font.codeFont', 'default')}
+      />
+      <IconDeviceFloppy
+        onClick={onSave}
+        color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
+        strokeWidth={1.5}
+        size={22}
+        className={`absolute right-0 top-0 m-4 ${
+          hasChanges ? 'cursor-pointer oapcity-100' : 'cursor-default opacity-50'
+        }`}
+      />
+    </div>
+  );
+};
+
+export default FileEditor;

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

@@ -2,866 +2,15 @@ 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;
+    height: calc(100vh - 4rem);
+    border: solid 1px ${(props) => props.theme.codemirror.border};
 
-    /* ── 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};
+    &.dark {
+      .swagger-ui {
+        filter: invert(88%) hue-rotate(180deg);
       }
-
-      .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 {
-          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);
-        }
+      .swagger-ui .microlight {
+        filter: invert(100%) hue-rotate(180deg);
       }
     }
   }

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

@@ -1,75 +1,19 @@
-import { memo } from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import StyledWrapper from './StyledWrapper';
-import { serializeBody } from './serializeBody';
+import { useTheme } from 'providers/Theme';
 
-const serializeHeaders = (headers) => {
-  if (!headers) return {};
-  if (typeof headers.entries === 'function') {
-    const out = {};
-    for (const [k, v] of headers.entries()) out[k] = v;
-    return out;
-  }
-  return { ...headers };
-};
+const Swagger = ({ string }) => {
+  const { displayedTheme } = useTheme();
 
-const proxiedFetch = async (url, options = {}) => {
-  const result = await window.ipcRenderer.invoke('renderer:swagger-fetch', {
-    url,
-    method: options.method || 'GET',
-    headers: serializeHeaders(options.headers),
-    body: serializeBody(options.body)
-  });
+  console.log('string', string);
 
-  if (result.error) {
-    const err = new TypeError(result.message);
-    err.code = result.code;
-    throw err;
-  }
-
-  // The Response constructor throws if a null-body status carries a body.
-  const nullBodyStatus = [101, 204, 205, 304].includes(result.status);
-  const bodyBytes = !nullBodyStatus && result.bodyBase64
-    ? Uint8Array.from(atob(result.bodyBase64), (c) => c.charCodeAt(0))
-    : null;
-
-  // Build Headers manually so multi-value response headers (e.g. Set-Cookie,
-  // which axios returns as string[]) end up as repeated entries rather than
-  // joined via toString(). new Headers({ 'set-cookie': ['a','b'] }) coerces
-  // the array to "a,b", which is invalid Set-Cookie syntax.
-  const responseHeaders = new Headers();
-  for (const [name, value] of Object.entries(result.headers || {})) {
-    if (Array.isArray(value)) {
-      value.forEach((v) => responseHeaders.append(name, String(v)));
-    } else if (value != null) {
-      responseHeaders.append(name, String(value));
-    }
-  }
-
-  return new Response(bodyBytes, {
-    status: result.status,
-    statusText: result.statusText,
-    headers: responseHeaders
-  });
-};
-
-const requestInterceptor = (req) => {
-  req.userFetch = proxiedFetch;
-  return req;
-};
-
-const Swagger = ({ spec, onComplete }) => {
   return (
     <StyledWrapper>
-      <div className="swagger-root w-full">
-        <SwaggerUI
-          spec={spec}
-          onComplete={onComplete}
-          requestInterceptor={requestInterceptor}
-        />
+      <div className={`swagger-root w-full overflow-y-scroll ${displayedTheme}`}>
+        <SwaggerUI spec={string} />
       </div>
     </StyledWrapper>
   );
 };
 
-export default memo(Swagger);
+export default Swagger;

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

@@ -1,83 +0,0 @@
-// Serializes a SwaggerUI fetch body for transport across the renderer ↔ main
-// IPC bridge in `renderer:swagger-fetch`. Only types that survive Electron's
-// structured-clone serialization (and that our axios bridge knows how to send
-// as an HTTP body) are supported. Multipart / binary types throw so the user
-// gets a clear message in the SwaggerUI response panel instead of a silent
-// failure.
-
-const detectBodyType = (body) => {
-  if (body == null) return 'null';
-  if (typeof body === 'string') return 'string';
-  if (typeof FormData !== 'undefined' && body instanceof FormData) return 'FormData';
-  if (typeof File !== 'undefined' && body instanceof File) return 'File';
-  if (typeof Blob !== 'undefined' && body instanceof Blob) return 'Blob';
-  if (typeof URLSearchParams !== 'undefined' && body instanceof URLSearchParams) return 'URLSearchParams';
-  if (typeof ArrayBuffer !== 'undefined' && body instanceof ArrayBuffer) return 'ArrayBuffer';
-  if (ArrayBuffer.isView && ArrayBuffer.isView(body)) return body.constructor?.name || 'TypedArray';
-  if (typeof ReadableStream !== 'undefined' && body instanceof ReadableStream) return 'ReadableStream';
-  return typeof body;
-};
-
-export const UNSUPPORTED_BODY_TYPE_CODE = 'UNSUPPORTED_BODY_TYPE';
-
-// Mapping from Web API class name (the raw detected type) to the user-facing
-// subject used in the error message. SwaggerUI itself supports these body
-// types fine; the limitation is Bruno's renderer↔main IPC bridge, not Swagger.
-const BODY_TYPE_LABEL_MAP = {
-  File: 'File upload',
-  Blob: 'Binary file upload',
-  FormData: 'Multipart form data',
-  ArrayBuffer: 'Binary data',
-  ReadableStream: 'Streaming upload'
-};
-
-const mapBodyTypeToLabel = (typeName) => {
-  if (BODY_TYPE_LABEL_MAP[typeName]) return BODY_TYPE_LABEL_MAP[typeName];
-  // TypedArrays (Uint8Array, Float32Array, etc.) share a label.
-  if (typeof typeName === 'string' && typeName.endsWith('Array')) return 'Binary data';
-  return 'This request body type';
-};
-
-export const UNSUPPORTED_BODY_MESSAGE = (typeName) =>
-  `${mapBodyTypeToLabel(typeName)} via the Swagger Try-it-out panel isn't supported in Bruno yet. `
-  + `Supported body types: JSON, URL-encoded forms, plain text. `
-  + `Create a Bruno request to test this endpoint.`;
-
-// Build a TypeError that carries the detected type as a property so downstream
-// catchers can branch on `err.code` / `err.bodyType` instead of regex-parsing
-// the message. `err.bodyType` keeps the raw Web API class name for diagnostics;
-// the user-visible message uses the friendly subject above.
-const unsupportedBodyError = (typeName) => {
-  const err = new TypeError(UNSUPPORTED_BODY_MESSAGE(typeName));
-  err.code = UNSUPPORTED_BODY_TYPE_CODE;
-  err.bodyType = typeName;
-  return err;
-};
-
-export const serializeBody = (body) => {
-  const typeName = detectBodyType(body);
-
-  switch (typeName) {
-    case 'null':
-      return undefined;
-    case 'string':
-      return body;
-    case 'URLSearchParams':
-      return body.toString();
-    case 'FormData':
-    case 'File':
-    case 'Blob':
-    case 'ArrayBuffer':
-    case 'ReadableStream':
-      throw unsupportedBodyError(typeName);
-    default:
-      // TypedArrays land here (Uint8Array, etc.) — also unsupported by the bridge.
-      if (ArrayBuffer.isView && ArrayBuffer.isView(body)) {
-        throw unsupportedBodyError(typeName);
-      }
-      // Plain objects, numbers, booleans — pass through. SwaggerUI rarely sends
-      // these as body directly (it stringifies JSON before fetch), but keep the
-      // path open rather than rejecting unexpectedly.
-      return body;
-  }
-};

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

@@ -1,95 +0,0 @@
-import { serializeBody, UNSUPPORTED_BODY_MESSAGE, UNSUPPORTED_BODY_TYPE_CODE } from './serializeBody';
-
-// Helper: invoke serializeBody and return the thrown error (or fail).
-const catchSerializeError = (body) => {
-  try {
-    serializeBody(body);
-  } catch (err) {
-    return err;
-  }
-  throw new Error('expected serializeBody to throw');
-};
-
-describe('serializeBody', () => {
-  describe('supported body types', () => {
-    it('returns undefined for null', () => {
-      expect(serializeBody(null)).toBeUndefined();
-    });
-
-    it('returns undefined for undefined', () => {
-      expect(serializeBody(undefined)).toBeUndefined();
-    });
-
-    it('returns string bodies as-is', () => {
-      expect(serializeBody('{"name":"doggie"}')).toBe('{"name":"doggie"}');
-      expect(serializeBody('plain text')).toBe('plain text');
-    });
-
-    it('stringifies URLSearchParams', () => {
-      const params = new URLSearchParams({ a: '1', b: '2' });
-      expect(serializeBody(params)).toBe('a=1&b=2');
-    });
-  });
-
-  describe('unsupported body types (BRU-3300)', () => {
-    it('throws TypeError for FormData using "Multipart form data" subject', () => {
-      const fd = new FormData();
-      fd.append('file', new Blob(['x']));
-      expect(() => serializeBody(fd)).toThrow(TypeError);
-      expect(() => serializeBody(fd)).toThrow(/Multipart form data/);
-      expect(() => serializeBody(fd)).toThrow(/Create a Bruno request/);
-    });
-
-    it('throws TypeError for Blob using "Binary file upload" subject', () => {
-      const blob = new Blob(['payload']);
-      expect(() => serializeBody(blob)).toThrow(TypeError);
-      expect(() => serializeBody(blob)).toThrow(/Binary file upload/);
-    });
-
-    it('throws TypeError for File using "File upload" subject', () => {
-      const file = new File(['payload'], 'test.txt', { type: 'text/plain' });
-      expect(() => serializeBody(file)).toThrow(TypeError);
-      expect(() => serializeBody(file)).toThrow(/File upload/);
-    });
-
-    it('throws TypeError for ArrayBuffer using "Binary data" subject', () => {
-      const buf = new ArrayBuffer(8);
-      expect(() => serializeBody(buf)).toThrow(TypeError);
-      expect(() => serializeBody(buf)).toThrow(/Binary data/);
-    });
-
-    it('throws TypeError for TypedArray using "Binary data" subject', () => {
-      const u8 = new Uint8Array([1, 2, 3]);
-      expect(() => serializeBody(u8)).toThrow(TypeError);
-      expect(() => serializeBody(u8)).toThrow(/Binary data/);
-    });
-
-    it('message attributes the limitation to Bruno, not Swagger', () => {
-      expect(UNSUPPORTED_BODY_MESSAGE('FormData')).toMatch(/isn't supported in Bruno yet/);
-    });
-
-    it('message lists supported alternatives', () => {
-      expect(UNSUPPORTED_BODY_MESSAGE('FormData')).toMatch(/JSON, URL-encoded forms, plain text/);
-    });
-  });
-
-  describe('error metadata preservation (Bijin review feedback)', () => {
-    it('attaches err.code = UNSUPPORTED_BODY_TYPE so callers can branch programmatically', () => {
-      const err = catchSerializeError(new FormData());
-      expect(err.code).toBe(UNSUPPORTED_BODY_TYPE_CODE);
-      expect(UNSUPPORTED_BODY_TYPE_CODE).toBe('UNSUPPORTED_BODY_TYPE');
-    });
-
-    it('attaches err.bodyType naming the specific unsupported type', () => {
-      expect(catchSerializeError(new FormData()).bodyType).toBe('FormData');
-      expect(catchSerializeError(new Blob(['x'])).bodyType).toBe('Blob');
-      expect(catchSerializeError(new File(['x'], 'a.txt')).bodyType).toBe('File');
-      expect(catchSerializeError(new ArrayBuffer(4)).bodyType).toBe('ArrayBuffer');
-      expect(catchSerializeError(new Uint8Array([1, 2])).bodyType).toBe('Uint8Array');
-    });
-
-    it('thrown error is still a TypeError instance', () => {
-      expect(catchSerializeError(new FormData())).toBeInstanceOf(TypeError);
-    });
-  });
-});

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

@@ -17,35 +17,6 @@ const StyledWrapper = styled.div`
   .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,13 +1,15 @@
-import React, { forwardRef, useRef, useCallback } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import find from 'lodash/find';
 import { useSelector, useDispatch } from 'react-redux';
 import { IconFileCode, IconDots } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
-import SpecViewer from './SpecViewer';
+import FileEditor from './FileEditor';
 import Dropdown from 'components/Dropdown';
-import { openApiSpec, saveApiSpecToFile, updateApiSpecPanelLeftPaneWidth } from 'providers/ReduxStore/slices/apiSpec';
+import { openApiSpec } from 'providers/ReduxStore/slices/apiSpec';
 import { useState } from 'react';
 import CreateApiSpec from 'components/Sidebar/ApiSpecs/CreateApiSpec';
+import { Suspense } from 'react';
+import Swagger from './Renderers/Swagger';
 import toast from 'react-hot-toast';
 
 const ApiSpecPanel = () => {
@@ -21,16 +23,7 @@ const ApiSpecPanel = () => {
   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]
-  );
-
+  const { filename, pathname, raw, uid } = apiSpec || {};
   if (!uid) {
     return <div className="p-4 opacity-50">API Spec not found!</div>;
   }
@@ -85,12 +78,18 @@ const ApiSpecPanel = () => {
           </Dropdown>
         </div>
       </div>
-      <SpecViewer
-        content={raw}
-        onSave={(content) => dispatch(saveApiSpecToFile({ uid, content }))}
-        leftPaneWidth={leftPaneWidth ?? null}
-        onLeftPaneWidthChange={handleLeftPaneWidthChange}
-      />
+      <section className="main flex flex-grow px-4 relative">
+        <div className="w-full grid grid-cols-2">
+          <div className="col-span-1">
+            <FileEditor apiSpec={apiSpec} />
+          </div>
+          <div className="col-span-1">
+            <Suspense fallback="">
+              <Swagger string={raw} />
+            </Suspense>
+          </div>
+        </div>
+      </section>
     </StyledWrapper>
   );
 };

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

@@ -210,10 +210,6 @@ const Wrapper = styled.div`
     margin-left: 6px;
   }
 
-  .app-menu {
-    margin-left: 8px;
-  }
-
   /* Custom window control buttons for Windows - always interactive, above modal overlay */
   .window-controls {
     display: flex;

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

@@ -4,12 +4,10 @@ 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 { savePreferences, showHomePage, 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 { 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';
@@ -19,7 +17,6 @@ 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';
@@ -52,14 +49,6 @@ const AppTitleBar = () => {
     const { ipcRenderer } = window;
     if (!ipcRenderer) return;
 
-    ipcRenderer.invoke('renderer:window-is-fullscreen')
-      .then((fullscreen) => {
-        setIsFullScreen(fullscreen);
-      })
-      .catch((error) => {
-        console.error('Error getting initial fullscreen state:', error);
-      });
-
     const removeEnterFullScreenListener = ipcRenderer.on('main:enter-full-screen', () => {
       setIsFullScreen(true);
     });
@@ -139,43 +128,26 @@ const AppTitleBar = () => {
   });
 
   const handleHomeClick = () => {
-    const scratchCollectionUid = activeWorkspace?.scratchCollectionUid;
-    if (scratchCollectionUid) {
-      dispatch(focusTab({ uid: `${scratchCollectionUid}-overview` }));
-    }
+    dispatch(showHomePage());
   };
 
   const handleWorkspaceSwitch = (workspaceUid) => {
-    if (workspaceUid === activeWorkspaceUid) return;
-
     dispatch(switchWorkspace(workspaceUid));
     toast.success(`Switched to ${getWorkspaceDisplayName(workspaces.find((w) => w.uid === workspaceUid)?.name)}`);
   };
 
   const handleOpenWorkspace = async () => {
     try {
-      const result = await dispatch(openWorkspaceDialog());
-      if (result) {
-        toast.success('Workspace opened successfully');
-      }
+      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 handleCreateWorkspace = () => {
+    setCreateWorkspaceModalOpen(true);
+  };
 
   const handleManageWorkspaces = () => {
     dispatch(showManageWorkspacePage());
@@ -263,7 +235,7 @@ const AppTitleBar = () => {
     );
 
     return items;
-  }, [sortedWorkspaces, activeWorkspaceUid, preferences, handlePinWorkspace, handleCreateWorkspace]);
+  }, [sortedWorkspaces, activeWorkspaceUid, preferences, handlePinWorkspace]);
 
   return (
     <StyledWrapper className={`app-titlebar ${osClass} ${isFullScreen ? 'fullscreen' : ''}`}>
@@ -275,9 +247,8 @@ const AppTitleBar = () => {
       )}
 
       <div className="titlebar-content">
+        {/* Left section: Home + Workspace */}
         <div className="titlebar-left">
-          {showWindowControls && <AppMenu />}
-
           <ActionIcon onClick={handleHomeClick} label="Home" size="lg" className="home-button">
             <IconHome size={16} stroke={1.5} />
           </ActionIcon>

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

@@ -1,128 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, waitFor, act } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-
-jest.mock('ui/MenuDropdown', () => ({ children }) => <div>{children}</div>);
-jest.mock('ui/ActionIcon', () => ({ children, onClick, label }) => (
-  <button onClick={onClick} aria-label={label}>{children}</button>
-));
-jest.mock('components/ResponsePane/ResponseLayoutToggle', () => () => null);
-
-import AppTitleBar from './index';
-
-const theme = {
-  text: '#333',
-  sidebar: {
-    bg: '#fff',
-    color: '#333',
-    muted: '#888',
-    collection: { item: { hoverBg: '#eee' } }
-  },
-  dropdown: { color: '#333', mutedText: '#888', hoverBg: '#eee' }
-};
-
-const mockStore = configureStore({
-  reducer: {
-    workspaces: (state = { workspaces: [], activeWorkspaceUid: null }) => state,
-    app: (state = { preferences: {}, sidebarCollapsed: false }) => state,
-    logs: (state = { isConsoleOpen: false }) => state
-  }
-});
-
-const renderWithProviders = () => render(
-  <Provider store={mockStore}>
-    <ThemeProvider theme={theme}>
-      <AppTitleBar />
-    </ThemeProvider>
-  </Provider>
-);
-
-const getTitleBar = (container) => container.querySelector('.app-titlebar');
-
-const mockInvokeWithFullscreen = (isFullScreen) => jest.fn((channel) => {
-  if (channel === 'renderer:window-is-fullscreen') return Promise.resolve(isFullScreen);
-  return Promise.resolve(false);
-});
-
-describe('AppTitleBar — fullscreen state sync', () => {
-  let ipcListeners;
-
-  beforeEach(() => {
-    ipcListeners = {};
-    window.ipcRenderer = {
-      invoke: jest.fn().mockResolvedValue(false),
-      send: jest.fn(),
-      on: jest.fn((channel, cb) => {
-        ipcListeners[channel] = cb;
-        return jest.fn();
-      })
-    };
-  });
-
-  afterEach(() => {
-    delete window.ipcRenderer;
-  });
-
-  describe('initial state on mount', () => {
-    it('should query the main process for current fullscreen state', async () => {
-      renderWithProviders();
-      await waitFor(() => {
-        expect(window.ipcRenderer.invoke).toHaveBeenCalledWith('renderer:window-is-fullscreen');
-      });
-    });
-
-    it('should apply fullscreen class when window is already fullscreen at mount', async () => {
-      window.ipcRenderer.invoke = mockInvokeWithFullscreen(true);
-
-      const { container } = renderWithProviders();
-
-      await waitFor(() => {
-        expect(getTitleBar(container)).toHaveClass('fullscreen');
-      });
-    });
-
-    it('should not apply fullscreen class when window is windowed at mount', async () => {
-      const { container } = renderWithProviders();
-
-      await waitFor(() => {
-        expect(window.ipcRenderer.invoke).toHaveBeenCalledWith('renderer:window-is-fullscreen');
-      });
-      expect(getTitleBar(container)).not.toHaveClass('fullscreen');
-    });
-  });
-
-  describe('fullscreen transitions after mount', () => {
-    it('should add fullscreen class on main:enter-full-screen event', async () => {
-      const { container } = renderWithProviders();
-
-      await waitFor(() => {
-        expect(window.ipcRenderer.invoke).toHaveBeenCalledWith('renderer:window-is-fullscreen');
-      });
-
-      act(() => {
-        ipcListeners['main:enter-full-screen']();
-      });
-
-      expect(getTitleBar(container)).toHaveClass('fullscreen');
-    });
-
-    it('should remove fullscreen class on main:leave-full-screen event', async () => {
-      window.ipcRenderer.invoke = mockInvokeWithFullscreen(true);
-
-      const { container } = renderWithProviders();
-
-      await waitFor(() => {
-        expect(getTitleBar(container)).toHaveClass('fullscreen');
-      });
-
-      act(() => {
-        ipcListeners['main:leave-full-screen']();
-      });
-
-      expect(getTitleBar(container)).not.toHaveClass('fullscreen');
-    });
-  });
-});

packages/bruno-app/src/components/AppView/EmptyAppState.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { IconAppWindow } from '@tabler/icons';
-
-const Wrapper = styled.div`
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed ${(props) => props.theme.border.border1};
-  border-radius: 4px;
-  background: ${(props) => props.theme.background.surface0};
-  color: ${(props) => props.theme.colors.text.muted};
-
-  .empty-app-inner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 2rem;
-    text-align: center;
-    max-width: 360px;
-  }
-
-  .empty-app-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: ${(props) => props.theme.text};
-  }
-
-  .empty-app-hint {
-    font-size: 12px;
-    line-height: 1.4;
-  }
-`;
-
-const EmptyAppState = ({ title = 'No app yet', hint }) => (
-  <Wrapper data-testid="empty-app-state">
-    <div className="empty-app-inner">
-      <IconAppWindow size={32} strokeWidth={1.25} />
-      <div className="empty-app-title">{title}</div>
-      {hint ? <div className="empty-app-hint">{hint}</div> : null}
-    </div>
-  </Wrapper>
-);
-
-export default EmptyAppState;

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

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  flex-grow: 1;
-  padding: 0.5rem;
-
-  .app-view-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 0.25rem 0.4rem;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .app-view-toolbar .app-exit-btn {
-    cursor: pointer;
-    padding: 2px 8px;
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 3px;
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-
-    &:hover {
-      color: ${(props) => props.theme.text};
-      border-color: ${(props) => props.theme.text};
-    }
-  }
-
-  .app-webview-container {
-    flex: 1 1 0;
-    min-height: 0;
-    display: flex;
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 4px;
-    overflow: hidden;
-    background: ${(props) => props.theme.background.surface0};
-  }
-
-  .app-webview {
-    width: 100%;
-    height: 100%;
-    flex: 1 1 0;
-    border: 0;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,307 +0,0 @@
-import React, { useRef, useEffect, useCallback, useMemo } from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import { useDispatch } from 'react-redux';
-import { sendNetworkRequest } from 'utils/network/index';
-import {
-  findEnvironmentInCollection,
-  getEnvironmentVariables,
-  getGlobalEnvironmentVariables
-} from 'utils/collections';
-import {
-  responseReceived,
-  appSetRuntimeVariable,
-  toggleAppMode,
-  initRunRequestEvent
-} from 'providers/ReduxStore/slices/collections';
-import { uuid } from 'utils/common';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-import EmptyAppState from './EmptyAppState';
-import {
-  SENTINEL,
-  wrapHtml,
-  toDataUrl,
-  serializeTimeline,
-  projectResponse,
-  useAppWebview
-} from './webview-bridge';
-
-// Request-level ctx bootstrap. Injected into the guest so window.ctx exists
-// before user scripts run.
-const REQUEST_CTX_BOOTSTRAP = `<script>
-(function () {
-  if (window.__brunoBootstrapped) return;
-  window.__brunoBootstrapped = true;
-
-  var SENTINEL = ${JSON.stringify(SENTINEL)};
-  var pending = new Map();
-  var nextRequestId = 0;
-
-  function sendToHost(payload) {
-    try { console.log(SENTINEL + JSON.stringify(payload)); } catch (e) {}
-  }
-
-  var ctx = {
-    theme: 'light',
-    response: null,
-    assertionResults: [],
-    testResults: [],
-    variables: {},
-
-    onThemeChange: null,
-    onResponseUpdate: null,
-    onResultsUpdate: null,
-    onVariablesUpdate: null,
-
-    sendRequest: function (overrides) {
-      return new Promise(function (resolve, reject) {
-        var requestId = ++nextRequestId;
-        pending.set(requestId, { resolve: resolve, reject: reject });
-        sendToHost({ type: 'sendRequest', requestId: requestId, overrides: overrides || {} });
-      });
-    },
-    setRuntimeVariable: function (key, value) {
-      sendToHost({ type: 'setRuntimeVariable', key: String(key), value: value });
-    },
-    log: function () {
-      var args = Array.prototype.slice.call(arguments);
-      sendToHost({ type: 'log', args: args });
-    }
-  };
-  window.ctx = ctx;
-
-  function applyTheme(theme) {
-    ctx.theme = theme || 'light';
-    if (document.body) {
-      document.body.classList.remove('light', 'dark');
-      document.body.classList.add(ctx.theme);
-    }
-  }
-
-  window.__brunoReceive = function (msg) {
-    if (!msg) return;
-    switch (msg.type) {
-      case 'state':
-        applyTheme(msg.theme);
-        ctx.response = msg.response || null;
-        ctx.assertionResults = msg.assertionResults || [];
-        ctx.testResults = msg.testResults || [];
-        ctx.variables = msg.variables || {};
-        break;
-      case 'theme':
-        applyTheme(msg.theme);
-        if (typeof ctx.onThemeChange === 'function') ctx.onThemeChange(ctx.theme);
-        break;
-      case 'responseUpdate':
-        ctx.response = msg.response || null;
-        if (typeof ctx.onResponseUpdate === 'function') ctx.onResponseUpdate(ctx.response);
-        break;
-      case 'results':
-        ctx.assertionResults = msg.assertionResults || [];
-        ctx.testResults = msg.testResults || [];
-        if (typeof ctx.onResultsUpdate === 'function') {
-          ctx.onResultsUpdate({ assertionResults: ctx.assertionResults, testResults: ctx.testResults });
-        }
-        break;
-      case 'variables':
-        ctx.variables = msg.variables || {};
-        if (typeof ctx.onVariablesUpdate === 'function') ctx.onVariablesUpdate(ctx.variables);
-        break;
-      case 'response': {
-        var entry = pending.get(msg.requestId);
-        if (!entry) return;
-        pending.delete(msg.requestId);
-        if (msg.error) entry.reject(new Error(msg.error));
-        else entry.resolve(msg.response);
-        break;
-      }
-    }
-  };
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function () { sendToHost({ type: 'ready' }); });
-  } else {
-    sendToHost({ type: 'ready' });
-  }
-})();
-</script>`;
-
-const buildVariables = (collection) => {
-  const env = getEnvironmentVariables(collection);
-  const global = getGlobalEnvironmentVariables({
-    globalEnvironments: collection?.globalEnvironments || [],
-    activeGlobalEnvironmentUid: collection?.activeGlobalEnvironmentUid
-  });
-  return {
-    ...global,
-    ...env,
-    ...(collection?.collectionVariables || {}),
-    ...(collection?.runtimeVariables || {})
-  };
-};
-
-const AppView = ({ item, collection, code }) => {
-  const dispatch = useDispatch();
-  const { displayedTheme } = useTheme();
-  const src = useMemo(() => toDataUrl(wrapHtml(REQUEST_CTX_BOOTSTRAP, code || '')), [code]);
-
-  const environment = useMemo(
-    () => findEnvironmentInCollection(collection, collection.activeEnvironmentUid),
-    [collection]
-  );
-  const variables = useMemo(() => buildVariables(collection), [collection]);
-  const response = useMemo(() => (item.response ? projectResponse(item.response) : null), [item.response]);
-  const assertionResults = useMemo(() => item.assertionResults || [], [item.assertionResults]);
-  const testResults = useMemo(() => item.testResults || [], [item.testResults]);
-
-  // pushToGuest is produced by useAppWebview, which itself needs handleGuestMessage —
-  // routing through a ref lets the callbacks call the *latest* pushToGuest without
-  // creating a circular useCallback dependency. Without this, the request-id reply
-  // (and error reply) close over the first-render no-op pushToGuest and the guest's
-  // ctx.sendRequest() promise never resolves.
-  const pushToGuestRef = useRef(() => {});
-
-  const handleSendRequest = useCallback(
-    async (requestId, overrides) => {
-      const push = pushToGuestRef.current;
-      try {
-        // Mint a requestUid and register the run so the main process emits its
-        // test/assertion/script events against an id the store recognises — this
-        // is what makes ctx.testResults / ctx.assertionResults populate.
-        const requestUid = uuid();
-        const requestItem = cloneDeep(item.draft || item);
-        requestItem.requestUid = requestUid;
-        dispatch(initRunRequestEvent({ requestUid, itemUid: item.uid, collectionUid: collection.uid }));
-
-        // Variable overrides: accept flat keys or { variables: {...} }.
-        const flatOverrides = overrides && typeof overrides === 'object' ? { ...overrides } : {};
-        const explicitVars = flatOverrides.variables;
-        delete flatOverrides.variables;
-        const mergedRuntime = {
-          ...(collection.runtimeVariables || {}),
-          ...flatOverrides,
-          ...(explicitVars && typeof explicitVars === 'object' ? explicitVars : {})
-        };
-
-        const result = await sendNetworkRequest(requestItem, collection, environment, mergedRuntime);
-
-        // sendNetworkRequest resolves on network/request errors with `error` set —
-        // surface as a guest-side promise rejection rather than a fake success.
-        if (result?.error) {
-          const errorMessage = typeof result.error === 'string'
-            ? result.error
-            : result.error?.message || 'Request failed';
-          push({ type: 'response', requestId, error: errorMessage });
-          return;
-        }
-
-        dispatch(
-          responseReceived({
-            itemUid: item.uid,
-            collectionUid: collection.uid,
-            response: {
-              status: result.status,
-              statusText: result.statusText,
-              headers: result.headers,
-              data: result.data,
-              dataBuffer: result.dataBuffer,
-              size: result.size,
-              duration: result.duration,
-              timeline: serializeTimeline(result.timeline)
-            }
-          })
-        );
-
-        push({ type: 'response', requestId, response: projectResponse(result) });
-      } catch (err) {
-        push({ type: 'response', requestId, error: err?.message || 'Request failed' });
-      }
-    },
-    [item, collection, environment, dispatch]
-  );
-
-  const handleGuestMessage = useCallback(
-    (data) => {
-      switch (data?.type) {
-        case 'ready':
-          break;
-        case 'sendRequest':
-          handleSendRequest(data.requestId, data.overrides);
-          break;
-        case 'setRuntimeVariable':
-          if (typeof data.key === 'string' && data.key.length) {
-            dispatch(appSetRuntimeVariable({ collectionUid: collection.uid, key: data.key, value: data.value }));
-          }
-          break;
-        case 'log':
-          console.log('[app]', ...(data.args || []));
-          break;
-        default:
-          break;
-      }
-    },
-    [handleSendRequest, dispatch, collection.uid]
-  );
-
-  const { domReady, pushToGuest, webviewRef } = useAppWebview(handleGuestMessage);
-  pushToGuestRef.current = pushToGuest;
-
-  // Push a full state snapshot on each readiness transition. Subsequent changes
-  // are handled by the granular effects below; using a ref avoids re-firing
-  // this effect (which would be a needless full re-broadcast).
-  const stateRef = useRef();
-  stateRef.current = { theme: displayedTheme, response, assertionResults, testResults, variables };
-  useEffect(() => {
-    if (!domReady) return;
-    pushToGuest({ type: 'state', ...stateRef.current });
-  }, [domReady, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'theme', theme: displayedTheme });
-  }, [displayedTheme, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'responseUpdate', response });
-  }, [response, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'results', assertionResults, testResults });
-  }, [assertionResults, testResults, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'variables', variables });
-  }, [variables, pushToGuest]);
-
-  const disableApp = useCallback(() => {
-    dispatch(toggleAppMode({ enabled: false, itemUid: item.uid, collectionUid: collection.uid }));
-  }, [dispatch, item.uid, collection.uid]);
-
-  return (
-    <StyledWrapper data-testid="app-view">
-      <div className="app-view-toolbar">
-        <span>App mode - {item.name}</span>
-        <button type="button" className="app-exit-btn" data-testid="app-exit-button" onClick={disableApp}>
-          Exit to editor
-        </button>
-      </div>
-      {code && code.trim().length ? (
-        <div className="app-webview-container">
-          <webview
-            ref={webviewRef}
-            src={src}
-            partition="persist:bruno-app-view"
-            webpreferences="disableDialogs=true, javascript=yes"
-            className="app-webview"
-          />
-        </div>
-      ) : (
-        <EmptyAppState
-          title="No app yet"
-          hint="Switch to the App tab on this request and write some HTML/JS to get started."
-        />
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default AppView;

packages/bruno-app/src/components/AppView/webview-bridge.js

@@ -1,200 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-/*
- * Shared transport for Bruno apps that run inside an Electron <webview>:
- *   host  -> guest : webview.executeJavaScript(`window.__brunoReceive(<json>)`)
- *   guest -> host  : console.log(SENTINEL + json), surfaced via 'console-message'
- *
- * Both the request-level AppView and the standalone CollectionApp use this — they
- * differ only in the bootstrap script (which builds window.ctx) and the message
- * handler the host registers.
- */
-export const SENTINEL = '__BRUNO_APP_MSG__';
-
-// JSON-encode for safe inlining into an executeJavaScript() string literal.
-// U+2028/U+2029 are legal in JSON strings but illegal as raw JS source.
-export const toJsArg = (value) =>
-  JSON.stringify(value === undefined ? null : value)
-    .replace(/</g, '\\u003c')
-    .replace(/[\u2028]/g, '\\u2028')
-    .replace(/[\u2029]/g, '\\u2029');
-
-const FRAGMENT_STYLES = `<style>
-  * { box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    margin: 0;
-    background: #ffffff;
-    color: #1e1e1e;
-    transition: background-color 0.15s, color 0.15s;
-  }
-  body.dark { background: #1e1e1e; color: #e0e0e0; }
-</style>`;
-
-/**
- * Wrap user code into a guest document, injecting the host-supplied bootstrap
- * script as early as possible (right after <head>) so window.ctx exists before
- * any user script runs. Full HTML documents have the bootstrap injected; bare
- * fragments are placed inside a minimal shell.
- */
-export const wrapHtml = (bootstrap, userCode) => {
-  const code = userCode || '';
-  const isFullDocument = /<html[\s>]/i.test(code) || /<!doctype/i.test(code);
-
-  if (isFullDocument) {
-    if (/<head[^>]*>/i.test(code)) {
-      return code.replace(/<head[^>]*>/i, (m) => `${m}${bootstrap}`);
-    }
-    if (/<body[^>]*>/i.test(code)) {
-      return code.replace(/<body[^>]*>/i, (m) => `${m}${bootstrap}`);
-    }
-    return `${bootstrap}${code}`;
-  }
-
-  return `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  ${FRAGMENT_STYLES}
-  ${bootstrap}
-</head>
-<body>
-${code}
-</body>
-</html>`;
-};
-
-export const toDataUrl = (html) =>
-  `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
-
-export const serializeTimeline = (timeline) => {
-  if (!Array.isArray(timeline)) return timeline;
-  return timeline.map((entry) => ({
-    ...entry,
-    timestamp: entry.timestamp instanceof Date ? entry.timestamp.getTime() : entry.timestamp
-  }));
-};
-
-export const projectResponse = (r) => ({
-  status: r?.status ?? null,
-  statusText: r?.statusText ?? null,
-  data: r?.data ?? null,
-  headers: r?.headers ?? null,
-  duration: r?.duration ?? null,
-  size: r?.size ?? null
-});
-
-/**
- * useAppWebview — manages an Electron <webview> guest and provides a typed
- * messaging channel back to the host.
- *
- *   const { domReady, pushToGuest, webviewRef } = useAppWebview(handleGuestMessage);
- *   …
- *   <webview ref={webviewRef} src={…} … />
- *
- * `webviewRef` is a **callback ref** (not an object ref). React invokes it with
- * the element on mount and with `null` on unmount, which is the only way to
- * reliably re-attach listeners when the <webview> is unmounted and remounted —
- * e.g. when CollectionApp's user toggles between Code and Preview views. An
- * object-ref + useEffect approach would not re-fire on remount because the ref
- * object's identity is stable across mounts.
- *
- * pushToGuest({…}) is a no-op until the guest's dom-ready fires (and after a
- * reload, until it fires again). Safe to call eagerly from effects.
- */
-export const useAppWebview = (onGuestMessage) => {
-  const [domReady, setDomReady] = useState(false);
-
-  // Latest DOM element (for pushToGuest) and latest message handler (so the
-  // listener captures fresh state without needing to be re-bound).
-  const webviewElRef = useRef(null);
-  const onGuestMessageRef = useRef(onGuestMessage);
-  onGuestMessageRef.current = onGuestMessage;
-
-  // Outgoing messages sent before the guest is ready are queued and flushed by
-  // the dom-ready effect below. This is critical for guest scripts that call
-  // promise-returning ctx APIs (e.g. ctx.listRequests) at parse time — the host
-  // receives the request via console-message before Electron's `dom-ready`
-  // fires, and without a queue the reply gets dropped and the promise never
-  // resolves.
-  const pendingOutbox = useRef([]);
-
-  const sendToWebview = (webview, msg) => {
-    try {
-      webview.executeJavaScript(
-        `window.__brunoReceive && window.__brunoReceive(${toJsArg(msg)})`
-      ).catch(() => {});
-    } catch (_) {
-      /* webview not yet attached */
-    }
-  };
-
-  const pushToGuest = useCallback(
-    (msg) => {
-      const webview = webviewElRef.current;
-      if (!webview || !domReady) {
-        pendingOutbox.current.push(msg);
-        return;
-      }
-      sendToWebview(webview, msg);
-    },
-    [domReady]
-  );
-
-  // Flush whatever piled up while the guest was still loading.
-  useEffect(() => {
-    if (!domReady) return;
-    const webview = webviewElRef.current;
-    if (!webview) return;
-    const queue = pendingOutbox.current;
-    if (!queue.length) return;
-    pendingOutbox.current = [];
-    for (const msg of queue) sendToWebview(webview, msg);
-  }, [domReady]);
-
-  // Stable callback ref. We stash the per-element listener bag on the element
-  // itself so we can clean up exactly the right listeners on unmount or replace.
-  const webviewRef = useCallback((element) => {
-    const prev = webviewElRef.current;
-    if (prev && prev !== element) {
-      const h = prev.__brunoHandlers;
-      if (h) {
-        prev.removeEventListener('console-message', h.onConsoleMessage);
-        prev.removeEventListener('dom-ready', h.onDomReady);
-        prev.removeEventListener('did-start-loading', h.onStartLoading);
-        prev.__brunoHandlers = null;
-      }
-    }
-
-    // Queued messages belong to the prior guest; drop them on element replace.
-    pendingOutbox.current = [];
-
-    webviewElRef.current = element || null;
-    // dom-ready will fire fresh on the new element; until then pushToGuest no-ops.
-    setDomReady(false);
-
-    if (!element) return;
-
-    const onConsoleMessage = (e) => {
-      const text = e?.message;
-      if (typeof text !== 'string' || !text.startsWith(SENTINEL)) return;
-      try {
-        onGuestMessageRef.current(JSON.parse(text.slice(SENTINEL.length)));
-      } catch (_) {
-        /* not our message */
-      }
-    };
-    const onDomReady = () => setDomReady(true);
-    // A reload (code edit) tears down the guest; reset readiness so the next
-    // dom-ready can flip us back to true.
-    const onStartLoading = () => setDomReady(false);
-
-    element.__brunoHandlers = { onConsoleMessage, onDomReady, onStartLoading };
-    element.addEventListener('console-message', onConsoleMessage);
-    element.addEventListener('dom-ready', onDomReady);
-    element.addEventListener('did-start-loading', onStartLoading);
-  }, []);
-
-  return { domReady, pushToGuest, webviewRef };
-};

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

@@ -31,7 +31,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/ChangelogTab/CHANGELOG.md

@@ -1,7 +0,0 @@
-# What's New in Bruno
-
-- Various stability and performance improvements.
-
----
-
-For the full release history, see the [Bruno releases page](https://github.com/usebruno/bruno/releases).

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

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-
-  .changelog-header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid ${(props) => props.theme.requestTabs?.border || props.theme.sidebar?.border || 'transparent'};
-    color: ${(props) => props.theme.text};
-
-    .header-version {
-      font-size: ${(props) => props.theme.font?.size?.sm || '0.85em'};
-      color: ${(props) => props.theme.colors?.text?.muted || props.theme.text};
-      opacity: 0.7;
-    }
-  }
-
-  .changelog-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem 1.5rem 2rem 1.5rem;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IconConfetti } from '@tabler/icons';
-import Markdown from 'components/MarkDown';
-import { version } from '../../../package.json';
-import changelogContent from './CHANGELOG.md';
-import StyledWrapper from './StyledWrapper';
-
-const ChangelogTab = () => {
-  return (
-    <StyledWrapper>
-      <div className="changelog-header">
-        <IconConfetti size={18} strokeWidth={1.5} />
-        <span>What's New</span>
-        <span className="header-version">v{version}</span>
-      </div>
-      <div className="changelog-body">
-        <Markdown content={changelogContent} onDoubleClick={() => {}} />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default ChangelogTab;

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

@@ -45,15 +45,6 @@ const StyledWrapper = styled.div`
     text-decoration: underline;
   }
 
-  .cm-ghost-text-ai {
-    opacity: 0.45;
-    color: ${(props) => props.theme.colors.text.muted};
-    font-style: italic;
-    pointer-events: none;
-    user-select: none;
-    white-space: pre;
-  }
-
   /* Removes the glow outline around the folded json */
   .CodeMirror-foldmarker {
     text-shadow: none;
@@ -160,46 +151,14 @@ 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 {
     background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
   }
 
-  @keyframes cm-error-line-flash {
-    0%, 60% {
-      background-color: ${(props) => props.theme.status.danger.background};
-    }
-    100% {
-      background-color: transparent;
-    }
-  }
-
-  .CodeMirror .cm-error-line-flash {
-    background-color: transparent;
-    animation: cm-error-line-flash 3s ease-in-out;
-  }
-
-  .CodeMirror .cm-error-line-flash-gutter {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-    font-weight: 600;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .CodeMirror .cm-error-line-flash {
-      animation: none;
-      background-color: ${(props) => props.theme.status.danger.background};
-    }
-  }
-
   .cm-search-match {
     background: rgba(255, 193, 7, 0.25);
   }

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

@@ -5,13 +5,10 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import React, { createRef } from 'react';
-import { useSelector } from 'react-redux';
-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 { setupAiAutocomplete } from 'utils/codemirror/aiGhostText';
-import { buildAutocompleteContext } from 'utils/ai';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
@@ -19,16 +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 { setupCodeMirrorResizeRefresh } from 'utils/codemirror/resize';
-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;
@@ -36,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);
 
@@ -46,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,
@@ -60,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 || '',
@@ -102,20 +73,38 @@ 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')
@@ -205,49 +194,9 @@ 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.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,36 +212,10 @@ class CodeEditor extends React.Component {
         autoCompleteOptions
       );
 
-      // AI ghost-text autocomplete (script editors only). Stays inert until
-      // the user has both enabled AI and configured a provider.
-      if (this.props.scriptType) {
-        this.aiAutocompleteCleanup = setupAiAutocomplete(editor, {
-          scriptType: this.props.scriptType,
-          isEnabled: () => {
-            const ai = this.props.aiPreferences;
-            return Boolean(ai?.enabled) && ai?.autocomplete?.enabled !== false;
-          },
-          getTriggerMode: () => this.props.aiPreferences?.autocomplete?.triggerMode || 'debounced',
-          getContext: () => buildAutocompleteContext({
-            item: this.props.item,
-            collection: this.props.collection,
-            scriptType: this.props.scriptType
-          })
-        });
-      }
-
       setupLinkAware(editor);
 
       // 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');
-      }
-
-      this.cleanupResizeRefresh = setupCodeMirrorResizeRefresh(editor, this._node);
     }
   }
 
@@ -308,52 +231,11 @@ 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) {
+      const cursor = this.editor.getCursor();
+      this.cachedValue = this.props.value;
+      this.editor.setValue(this.props.value);
+      this.editor.setCursor(cursor);
     }
 
     if (this.editor) {
@@ -399,35 +281,14 @@ class CodeEditor extends React.Component {
   componentWillUnmount() {
     if (this.editor) {
       if (this.props.onScroll) {
-        this.props.onScroll(this._lastScrollTop);
+        this.props.onScroll(this.editor);
       }
 
-      // 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.aiAutocompleteCleanup?.();
       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?.();
-      }
-
       // Clean up lint error tooltip
       this.cleanupLintErrorTooltip?.();
-      this.cleanupResizeRefresh?.();
 
       const wrapper = this.editor.getWrapperElement();
       wrapper?.parentNode?.removeChild(wrapper);
@@ -448,10 +309,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 })}
@@ -489,20 +346,3 @@ class CodeEditor extends React.Component {
     }
   };
 }
-
-const CodeEditorWithPersistenceScope = React.forwardRef((props, ref) => {
-  const persistenceScope = usePersistenceScope();
-  const aiPreferences = useSelector((state) => state.app.preferences?.ai);
-  return (
-    <CodeEditor
-      {...props}
-      persistenceScope={persistenceScope}
-      aiPreferences={aiPreferences}
-      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/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);
   };
 
@@ -225,7 +168,6 @@ const CodeMirrorSearch = forwardRef(({ visible, editor, onClose }, ref) => {
     <StyledWrapper>
       <div className="bruno-search-bar">
         <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/CollectionApp/StyledWrapper.js

@@ -1,84 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  padding: 0.5rem;
-
-  .app-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 0.25rem 0.5rem;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  .app-toolbar .view-toggle {
-    display: flex;
-    align-items: center;
-    height: 24px;
-    border: 1px solid ${(props) => props.theme.input.border};
-    border-radius: ${(props) => props.theme.border.radius.base};
-    overflow: hidden;
-  }
-
-  .app-toolbar .view-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 10px;
-    height: 100%;
-    border: none;
-    border-right: 1px solid ${(props) => props.theme.input.border};
-    background: transparent;
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-    transition: background 0.15s ease, color 0.15s ease;
-    font-size: 11px;
-
-    &:last-child { border-right: none; }
-
-    &:hover:not(.active) {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-      color: ${(props) => props.theme.text};
-    }
-
-    &.active {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-      color: ${(props) => props.theme.primary.text};
-    }
-  }
-
-  .app-pane {
-    flex: 1 1 0;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .app-pane.code div.CodeMirror {
-    height: 100%;
-  }
-
-  .app-webview-container {
-    flex: 1 1 0;
-    min-height: 0;
-    display: flex;
-    border: 1px solid ${(props) => props.theme.border.border1};
-    border-radius: 4px;
-    overflow: hidden;
-    background: ${(props) => props.theme.background.surface0};
-  }
-
-  .app-webview {
-    width: 100%;
-    height: 100%;
-    flex: 1 1 0;
-    border: 0;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,396 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import classnames from 'classnames';
-import cloneDeep from 'lodash/cloneDeep';
-import get from 'lodash/get';
-import { useDispatch, useSelector } from 'react-redux';
-import { sendNetworkRequest } from 'utils/network/index';
-import {
-  findEnvironmentInCollection,
-  findItemInCollectionByPathname,
-  flattenItems,
-  getEnvironmentVariables,
-  getGlobalEnvironmentVariables,
-  isItemARequest
-} from 'utils/collections';
-import { uuid } from 'utils/common';
-import {
-  appSetRuntimeVariable,
-  initRunRequestEvent,
-  responseReceived,
-  updateAppCode
-} from 'providers/ReduxStore/slices/collections';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import CodeEditor from 'components/CodeEditor';
-import AIAssist from 'components/AIAssist';
-import { buildAiVariablesPayload, buildDocsContextFromCollection } from 'utils/ai';
-import StyledWrapper from './StyledWrapper';
-import EmptyAppState from '../AppView/EmptyAppState';
-import {
-  SENTINEL,
-  wrapHtml,
-  toDataUrl,
-  serializeTimeline,
-  projectResponse,
-  useAppWebview
-} from '../AppView/webview-bridge';
-
-/*
- * Standalone collection-/folder-level app — a file (.bru/.yml) of type 'app'
- * that lives in the sidebar and opens as its own tab. The user toggles between
- * Code (CodeEditor) and Preview (sandboxed <webview>); preview re-runs whenever
- * the code prop changes.
- *
- * Collection ctx surface differs from the request-level AppView:
- *   shared:  theme, log, variables, setRuntimeVariable, onThemeChange, onVariablesUpdate
- *   added:   collection, listRequests(), runRequest(pathname, overrides?)
- *   dropped: sendRequest, response, assertionResults, testResults
- *             (and their on* hooks — they only make sense for one request)
- */
-
-const COLLECTION_CTX_BOOTSTRAP = `<script>
-(function () {
-  if (window.__brunoBootstrapped) return;
-  window.__brunoBootstrapped = true;
-
-  var SENTINEL = ${JSON.stringify(SENTINEL)};
-  var pending = new Map();
-  var nextReplyId = 0;
-
-  function sendToHost(payload) {
-    try { console.log(SENTINEL + JSON.stringify(payload)); } catch (e) {}
-  }
-
-  function awaitReply(type, extra) {
-    return new Promise(function (resolve, reject) {
-      var replyId = ++nextReplyId;
-      pending.set(replyId, { resolve: resolve, reject: reject });
-      sendToHost(Object.assign({ type: type, replyId: replyId }, extra || {}));
-    });
-  }
-
-  var ctx = {
-    theme: 'light',
-    variables: {},
-    collection: null,
-
-    onThemeChange: null,
-    onVariablesUpdate: null,
-
-    listRequests: function () {
-      return awaitReply('listRequests');
-    },
-    runRequest: function (pathname, overrides) {
-      return awaitReply('runRequest', { pathname: String(pathname || ''), overrides: overrides || {} });
-    },
-    setRuntimeVariable: function (key, value) {
-      sendToHost({ type: 'setRuntimeVariable', key: String(key), value: value });
-    },
-    log: function () {
-      var args = Array.prototype.slice.call(arguments);
-      sendToHost({ type: 'log', args: args });
-    }
-  };
-  window.ctx = ctx;
-
-  function applyTheme(theme) {
-    ctx.theme = theme || 'light';
-    if (document.body) {
-      document.body.classList.remove('light', 'dark');
-      document.body.classList.add(ctx.theme);
-    }
-  }
-
-  window.__brunoReceive = function (msg) {
-    if (!msg) return;
-    switch (msg.type) {
-      case 'state':
-        applyTheme(msg.theme);
-        ctx.variables = msg.variables || {};
-        ctx.collection = msg.collection || null;
-        break;
-      case 'theme':
-        applyTheme(msg.theme);
-        if (typeof ctx.onThemeChange === 'function') ctx.onThemeChange(ctx.theme);
-        break;
-      case 'variables':
-        ctx.variables = msg.variables || {};
-        if (typeof ctx.onVariablesUpdate === 'function') ctx.onVariablesUpdate(ctx.variables);
-        break;
-      case 'collection':
-        ctx.collection = msg.collection || null;
-        break;
-      case 'reply': {
-        var entry = pending.get(msg.replyId);
-        if (!entry) return;
-        pending.delete(msg.replyId);
-        if (msg.error) entry.reject(new Error(msg.error));
-        else entry.resolve(msg.result);
-        break;
-      }
-    }
-  };
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function () { sendToHost({ type: 'ready' }); });
-  } else {
-    sendToHost({ type: 'ready' });
-  }
-})();
-</script>`;
-
-const buildVariables = (collection) => {
-  const env = getEnvironmentVariables(collection);
-  const global = getGlobalEnvironmentVariables({
-    globalEnvironments: collection?.globalEnvironments || [],
-    activeGlobalEnvironmentUid: collection?.activeGlobalEnvironmentUid
-  });
-  return {
-    ...global,
-    ...env,
-    ...(collection?.collectionVariables || {}),
-    ...(collection?.runtimeVariables || {})
-  };
-};
-
-const listRequestSummaries = (collection) =>
-  flattenItems(collection?.items || [])
-    .filter(isItemARequest)
-    .map((it) => ({
-      uid: it.uid,
-      name: it.name,
-      pathname: it.pathname,
-      type: it.type,
-      method: it.request?.method || null,
-      url: it.request?.url || null
-    }));
-
-const CollectionApp = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const { displayedTheme } = useTheme();
-  const preferences = useSelector((state) => state.app.preferences);
-  const [view, setView] = useState('preview');
-
-  const code = item.draft ? get(item, 'draft.app.code', '') : get(item, 'app.code', '');
-
-  // Preview HTML is keyed on the *saved* code so typing doesn't reload the guest
-  // on every keystroke. The user toggles to Preview after saving to see updates.
-  const src = useMemo(
-    () => toDataUrl(wrapHtml(COLLECTION_CTX_BOOTSTRAP, code || '')),
-    [code]
-  );
-
-  const environment = useMemo(
-    () => findEnvironmentInCollection(collection, collection.activeEnvironmentUid),
-    [collection]
-  );
-  const variables = useMemo(() => buildVariables(collection), [collection]);
-  const collectionInfo = useMemo(
-    () => ({ name: collection?.name || null, pathname: collection?.pathname || null }),
-    [collection?.name, collection?.pathname]
-  );
-  const docsContext = useMemo(() => buildDocsContextFromCollection(collection), [collection]);
-  const aiVariables = useMemo(() => buildAiVariablesPayload(collection, null), [collection]);
-
-  const onEdit = useCallback(
-    (value) => dispatch(updateAppCode({ code: value, itemUid: item.uid, collectionUid: collection.uid })),
-    [dispatch, item.uid, collection.uid]
-  );
-  const onSave = useCallback(
-    () => dispatch(saveRequest(item.uid, collection.uid)),
-    [dispatch, item.uid, collection.uid]
-  );
-
-  // Execute a single request by its pathname (returned earlier from listRequests).
-  // Mirrors AppView.handleSendRequest: mints a requestUid, registers the run, merges
-  // overrides into runtime variables, sends, and dispatches responseReceived so the
-  // request's normal Response pane updates too.
-  const runRequestByPath = useCallback(
-    async (pathname, overrides) => {
-      const target = findItemInCollectionByPathname(collection, pathname);
-      if (!target) {
-        throw new Error(`Request not found: ${pathname}`);
-      }
-      if (!isItemARequest(target)) {
-        throw new Error(`Item is not a request: ${pathname}`);
-      }
-
-      const requestUid = uuid();
-      const requestItem = cloneDeep(target.draft || target);
-      requestItem.requestUid = requestUid;
-      dispatch(
-        initRunRequestEvent({ requestUid, itemUid: target.uid, collectionUid: collection.uid })
-      );
-
-      const flat = overrides && typeof overrides === 'object' ? { ...overrides } : {};
-      const explicit = flat.variables;
-      delete flat.variables;
-      const mergedRuntime = {
-        ...(collection.runtimeVariables || {}),
-        ...flat,
-        ...(explicit && typeof explicit === 'object' ? explicit : {})
-      };
-
-      const result = await sendNetworkRequest(requestItem, collection, environment, mergedRuntime);
-
-      if (result?.error) {
-        const errorMessage = typeof result.error === 'string'
-          ? result.error
-          : result.error?.message || 'Request failed';
-        throw new Error(errorMessage);
-      }
-
-      dispatch(
-        responseReceived({
-          itemUid: target.uid,
-          collectionUid: collection.uid,
-          response: {
-            status: result.status,
-            statusText: result.statusText,
-            headers: result.headers,
-            data: result.data,
-            dataBuffer: result.dataBuffer,
-            size: result.size,
-            duration: result.duration,
-            timeline: serializeTimeline(result.timeline)
-          }
-        })
-      );
-
-      return projectResponse(result);
-    },
-    [collection, environment, dispatch]
-  );
-
-  // pushToGuest is produced by useAppWebview, which itself needs handleGuestMessage —
-  // so we can't put it in handleGuestMessage's useCallback deps (circular). Instead
-  // route guest replies through a ref that always points at the latest pushToGuest.
-  // Without this, the callback closes over the first-render pushToGuest (which is a
-  // no-op until dom-ready) and reply messages never reach the guest.
-  const pushToGuestRef = useRef(() => {});
-
-  const handleGuestMessage = useCallback(
-    async (data) => {
-      const push = pushToGuestRef.current;
-      switch (data?.type) {
-        case 'ready':
-          break;
-        case 'log':
-          console.log('[app]', ...(data.args || []));
-          break;
-        case 'setRuntimeVariable':
-          if (typeof data.key === 'string' && data.key.length) {
-            dispatch(
-              appSetRuntimeVariable({ collectionUid: collection.uid, key: data.key, value: data.value })
-            );
-          }
-          break;
-        case 'listRequests': {
-          push({ type: 'reply', replyId: data.replyId, result: listRequestSummaries(collection) });
-          break;
-        }
-        case 'runRequest': {
-          try {
-            const res = await runRequestByPath(data.pathname, data.overrides);
-            push({ type: 'reply', replyId: data.replyId, result: res });
-          } catch (err) {
-            push({ type: 'reply', replyId: data.replyId, error: err?.message || 'runRequest failed' });
-          }
-          break;
-        }
-        default:
-          break;
-      }
-    },
-    [dispatch, collection, runRequestByPath]
-  );
-
-  const { domReady, pushToGuest, webviewRef } = useAppWebview(handleGuestMessage);
-  pushToGuestRef.current = pushToGuest;
-
-  const stateRef = useRef();
-  stateRef.current = { theme: displayedTheme, variables, collection: collectionInfo };
-  useEffect(() => {
-    if (!domReady) return;
-    pushToGuest({ type: 'state', ...stateRef.current });
-  }, [domReady, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'theme', theme: displayedTheme });
-  }, [displayedTheme, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'variables', variables });
-  }, [variables, pushToGuest]);
-
-  useEffect(() => {
-    pushToGuest({ type: 'collection', collection: collectionInfo });
-  }, [collectionInfo, pushToGuest]);
-
-  return (
-    <StyledWrapper data-testid="collection-app">
-      <div className="app-toolbar">
-        <span>App - {item.name}</span>
-        <div className="view-toggle" data-testid="collection-app-view-toggle">
-          <button
-            type="button"
-            data-testid="collection-app-view-code"
-            className={classnames('view-btn', { active: view === 'code' })}
-            onClick={() => setView('code')}
-          >
-            Code
-          </button>
-          <button
-            type="button"
-            data-testid="collection-app-view-preview"
-            className={classnames('view-btn', { active: view === 'preview' })}
-            onClick={() => setView('preview')}
-          >
-            Preview
-          </button>
-        </div>
-      </div>
-
-      {view === 'code' ? (
-        <div className="app-pane code relative" data-testid="collection-app-code">
-          <CodeEditor
-            collection={collection}
-            value={code || ''}
-            theme={displayedTheme}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            onEdit={onEdit}
-            onSave={onSave}
-            mode="htmlmixed"
-          />
-          <AIAssist
-            scriptType="app-collection"
-            currentScript={code || ''}
-            docsContext={docsContext}
-            variables={aiVariables}
-            onApply={onEdit}
-          />
-        </div>
-      ) : code && code.trim().length ? (
-        <div className="app-pane app-webview-container" data-testid="collection-app-preview">
-          <webview
-            ref={webviewRef}
-            src={src}
-            partition="persist:bruno-app-view"
-            webpreferences="disableDialogs=true, javascript=yes"
-            className="app-webview"
-          />
-        </div>
-      ) : (
-        <div className="app-pane" data-testid="collection-app-preview">
-          <EmptyAppState
-            title="No app yet"
-            hint="Switch to Code and write some HTML/JS"
-          />
-        </div>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default CollectionApp;

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

@@ -2,7 +2,6 @@ import React, { useMemo, useCallback } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
 import MenuDropdown from 'ui/MenuDropdown';
-import StatusBadge from 'ui/StatusBadge/index';
 import { useDispatch } from 'react-redux';
 import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -52,11 +51,6 @@ const AuthMode = ({ collection }) => {
       label: 'NTLM Auth',
       onClick: () => onModeChange('ntlm')
     },
-    {
-      id: 'oauth1',
-      label: 'OAuth 1.0',
-      onClick: () => onModeChange('oauth1')
-    },
     {
       id: 'oauth2',
       label: 'OAuth 2.0',
@@ -67,17 +61,6 @@ const AuthMode = ({ collection }) => {
       label: 'API Key',
       onClick: () => onModeChange('apikey')
     },
-    {
-      id: 'akamai-edgegrid',
-      label: (
-        <span className="flex items-center gap-2">
-          Akamai EdgeGrid
-          <StatusBadge status="info" size="xs">Beta</StatusBadge>
-        </span>
-      ),
-      ariaLabel: 'Akamai EdgeGrid (Beta)',
-      onClick: () => onModeChange('akamai-edgegrid')
-    },
     {
       id: 'none',
       label: 'No Auth',
@@ -87,13 +70,13 @@ const AuthMode = ({ collection }) => {
 
   return (
     <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer auth-mode-selector" data-testid="auth-mode-selector">
+      <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" data-testid="auth-mode-label">
+          <div className="flex items-center justify-center auth-mode-label select-none">
             {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
           </div>
         </MenuDropdown>

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

@@ -1,97 +0,0 @@
-import styled from 'styled-components';
-import { rgba } from 'polished';
-
-const StyledWrapper = styled.div`
-  label {
-    display: flex;
-    align-items: center;
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
-    color: ${(props) => props.theme.colors.text.subtext1};
-    margin-bottom: 0.5rem;
-  }
-
-  .single-line-editor-wrapper {
-    display: flex;
-    align-items: center;
-    max-width: 400px;
-    margin-bottom: 0.5rem;
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-
-    &:focus-within {
-      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
-    }
-  }
-
-  .advanced-settings-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: fit-content;
-    margin: 1rem 0 0.75rem;
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 600;
-    color: ${(props) => props.theme.colors.text.subtext1};
-    user-select: none;
-
-    .advanced-settings-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0.375rem 0.625rem;
-      border-radius: 0.375rem;
-      background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
-
-      svg {
-        color: ${(props) => props.theme.primary.text};
-      }
-    }
-  }
-
-  .advanced-settings-hint {
-    margin: -0.25rem 0 0.75rem;
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: rgb(107 114 128);
-  }
-
-  .field-info {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    margin-left: 6px;
-    cursor: pointer;
-
-    svg {
-      color: rgb(107 114 128);
-    }
-
-    .field-tooltip {
-      position: absolute;
-      left: 0;
-      bottom: 100%;
-      z-index: 10;
-      width: max-content;
-      max-width: 15rem;
-      margin-bottom: 0.25rem;
-      padding: 0.5rem;
-      border-radius: 0.375rem;
-      background-color: #374151;
-      color: #fff;
-      font-size: 0.75rem;
-      line-height: 1rem;
-      font-weight: 400;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-    }
-
-    &:hover .field-tooltip {
-      opacity: 1;
-    }
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/CollectionSettings/Auth/EdgeGridAuth/index.tsx

@@ -1,165 +0,0 @@
-import { IconAdjustmentsHorizontal, IconInfoCircle } from '@tabler/icons';
-import get from 'lodash/get';
-import React from 'react';
-import { useDispatch } from 'react-redux';
-
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-interface AkamaiEdgeGridAuthValues {
-  accessToken?: string;
-  clientToken?: string;
-  clientSecret?: string;
-  nonce?: string;
-  timestamp?: string;
-  baseURL?: string;
-  headersToSign?: string;
-  maxBodySize?: number | null;
-}
-
-type EdgeGridField = keyof AkamaiEdgeGridAuthValues;
-
-const toMaxBodySize = (value: string): number | null => {
-  if (value === '' || value == null) return null;
-  const num = Number(value);
-  return Number.isNaN(num) ? null : num;
-};
-
-interface AkamaiEdgeGridAuthProps {
-  collection: any;
-}
-
-const FIELDS: Array<{ key: EdgeGridField; label: string; tooltip?: string; isSecret?: boolean }> = [
-  { key: 'accessToken', label: 'Access Token' },
-  { key: 'clientToken', label: 'Client Token' },
-  { key: 'clientSecret', label: 'Client Secret', isSecret: true },
-  { key: 'baseURL', label: 'Base URL', tooltip: 'Defaults to the request URL if not specified.' },
-  {
-    key: 'nonce',
-    label: 'Nonce',
-    tooltip: 'A unique nonce is required per request. Defaults to an auto-generated UUID v4 if not provided.'
-  },
-  {
-    key: 'timestamp',
-    label: 'Timestamp',
-    tooltip:
-      'UTC timestamp of when the request is signed (yyyyMMddTHH:mm:ss+0000). Defaults to current time if not provided.'
-  },
-  {
-    key: 'headersToSign',
-    label: 'Headers to Sign',
-    tooltip: 'Comma-separated list of headers to include in the signature.'
-  },
-  {
-    key: 'maxBodySize',
-    label: 'Max Body Size',
-    tooltip: 'Maximum message body size to include in the signature, in bytes. Defaults to 131072.'
-  }
-];
-
-type EdgeGridFieldConfig = (typeof FIELDS)[number];
-
-// Fields shown up front vs. those grouped under the "Advanced Settings" section
-const BASIC_FIELDS = FIELDS.slice(0, 3);
-const ADVANCED_FIELDS = FIELDS.slice(3);
-
-const EdgeGridAuth: React.FC<AkamaiEdgeGridAuthProps> = ({ collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const edgeGridAuth: AkamaiEdgeGridAuthValues =
-    (collection.draft?.root
-      ? get(collection, 'draft.root.request.auth.akamaiEdgegrid')
-      : get(collection, 'root.request.auth.akamaiEdgegrid')) || {};
-  const { isSensitive } = useDetectSensitiveField(collection);
-  const { showWarning: showClientSecretWarning, warningMessage: clientSecretWarningMessage } = isSensitive(
-    edgeGridAuth?.clientSecret
-  );
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  const handleFieldChange = (field: EdgeGridField, value: string) => {
-    const content: AkamaiEdgeGridAuthValues = {
-      accessToken: edgeGridAuth.accessToken || '',
-      clientToken: edgeGridAuth.clientToken || '',
-      clientSecret: edgeGridAuth.clientSecret || '',
-      nonce: edgeGridAuth.nonce || '',
-      timestamp: edgeGridAuth.timestamp || '',
-      baseURL: edgeGridAuth.baseURL || '',
-      headersToSign: edgeGridAuth.headersToSign || '',
-      maxBodySize: edgeGridAuth.maxBodySize ?? null
-    };
-
-    if (field === 'maxBodySize') {
-      content.maxBodySize = toMaxBodySize(value);
-    } else {
-      (content as Record<string, unknown>)[field] = value || '';
-    }
-
-    dispatch(
-      updateCollectionAuth({
-        mode: 'akamai-edgegrid',
-        collectionUid: collection.uid,
-        content
-      })
-    );
-  };
-
-  const renderField = ({ key, label, tooltip, isSecret }: EdgeGridFieldConfig) => {
-    const showWarning = isSecret && showClientSecretWarning;
-    const rawValue = edgeGridAuth[key];
-    const fieldValue = rawValue === null || rawValue === undefined ? '' : String(rawValue);
-    return (
-      <div key={key}>
-        <label>
-          {label}
-          {tooltip && (
-            <span className="field-info">
-              <IconInfoCircle size={16} />
-              <span className="field-tooltip">{tooltip}</span>
-            </span>
-          )}
-        </label>
-        <div className="single-line-editor-wrapper">
-          <SingleLineEditor
-            value={fieldValue}
-            theme={storedTheme}
-            onSave={handleSave}
-            onChange={(val: string) => handleFieldChange(key, val)}
-            collection={collection}
-            isSecret={isSecret}
-            isCompact
-          />
-          {showWarning && (
-            <SensitiveFieldWarning fieldName="edgegrid-client-secret" warningMessage={clientSecretWarningMessage} />
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      {BASIC_FIELDS.map(renderField)}
-
-      <div className="advanced-settings-header">
-        <span className="advanced-settings-icon">
-          <IconAdjustmentsHorizontal size={16} />
-        </span>
-        <span>Advanced Settings</span>
-      </div>
-
-      <>
-        {ADVANCED_FIELDS.map(renderField)}
-      </>
-
-    </StyledWrapper>
-  );
-};
-
-export default EdgeGridAuth;

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;

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

@@ -8,12 +8,10 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
 import ApiKeyAuth from './ApiKeyAuth/';
-import EdgeGridAuth from './EdgeGridAuth';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
 import NTLMAuth from './NTLMAuth';
-import OAuth1 from './Oauth1';
 import Button from 'ui/Button';
 
 const Auth = ({ collection }) => {
@@ -39,9 +37,6 @@ const Auth = ({ collection }) => {
       case 'ntlm': {
         return <NTLMAuth collection={collection} />;
       }
-      case 'oauth1': {
-        return <OAuth1 collection={collection} />;
-      }
       case 'oauth2': {
         return <OAuth2 collection={collection} />;
       }
@@ -51,9 +46,6 @@ const Auth = ({ collection }) => {
       case 'apikey': {
         return <ApiKeyAuth collection={collection} />;
       }
-      case 'akamai-edgegrid': {
-        return <EdgeGridAuth collection={collection} />;
-      }
     }
   };
 

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

@@ -1,25 +1,9 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  position: relative;
-  height: 100%;
-  overflow-y: auto;
 
   .editing-mode {
     cursor: pointer;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background: ${(props) => props.theme.bg};
-    padding: 6px 0;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .markdown-body {
-    height: auto !important;
-    overflow-y: visible !important;
   }
 `;