Merge remote-tracking branch 'origin/main' into oauth2_additional_params

Oauth2 additional parameters updates

.github/CODEOWNERS

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

.github/workflows/tests.yml

@@ -30,6 +30,7 @@ jobs:
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
           npm run build --workspace=packages/bruno-converters
           npm run build --workspace=packages/bruno-requests
+          npm run build --workspace=packages/bruno-filestore
 
       - name: Lint Check
         run: npm run lint
@@ -80,6 +81,7 @@ jobs:
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
           npm run build --workspace=packages/bruno-converters
           npm run build --workspace=packages/bruno-requests
+          npm run build --workspace=packages/bruno-filestore
 
       - name: Run tests
         run: |
@@ -125,6 +127,7 @@ jobs:
         npm run sandbox:bundle-libraries --workspace=packages/bruno-js
         npm run build:bruno-converters
         npm run build:bruno-requests
+        npm run build:bruno-filestore
 
     - name: Run Playwright tests
       run: |

e2e-tests/001-sanity-tests/001-home-screen.spec.ts

@@ -2,4 +2,4 @@ import { test, expect } from '../../playwright';
 
 test('Check if the logo on top left is visible', async ({ page }) => {
   await expect(page.getByRole('button', { name: 'bruno' })).toBeVisible();
-});
+});

e2e-tests/001-sanity-tests/002-create-new-collection-and-new-request.spec.ts

@@ -12,10 +12,10 @@ test('Create new collection and add a simple HTTP request', async ({ page, creat
   await page.getByRole('button', { name: 'Save' }).click();
   await page.locator('#create-new-tab').getByRole('img').click();
   await page.getByPlaceholder('Request Name').fill('r1');
-  await page.getByPlaceholder('Request URL').click();
-  await page.getByPlaceholder('Request URL').fill('http://localhost:8081');
+  await page.locator('#new-request-url .CodeMirror').click();
+  await page.locator('textarea').fill('http://localhost:8081');
   await page.getByRole('button', { name: 'Create' }).click();
-  await page.locator('pre').filter({ hasText: 'http://localhost:' }).click();
+  await page.locator('#request-url .CodeMirror').click();
   await page.locator('textarea').fill('/ping');
   await page.locator('#send-request').getByRole('img').nth(2).click();
 

e2e-tests/002-cookies-tests/001-cookie-persistence.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '../../playwright';
+
+test('should persist cookies across app restarts', async ({ createTmpDir, launchElectronApp }) => {
+  // Create a temporary user-data directory so we control where the cookies store file is written.
+  const userDataPath = await createTmpDir('cookie-persistence');
+
+  const app1 = await launchElectronApp({ userDataPath });
+  const page1 = await app1.firstWindow();
+  await page1.waitForSelector('[data-trigger="cookies"]');
+
+  // Open Cookies modal via the status-bar button.
+  await page1.click('[data-trigger="cookies"]');
+
+  // When no cookies are present the modal shows a centred "Add Cookie" button.
+  await page1.getByRole('button', { name: /Add Cookie/i }).click();
+
+  // Fill out the form.
+  await page1.fill('input[name="domain"]', 'example.com');
+  await page1.fill('input[name="path"]', '/');
+  await page1.fill('input[name="key"]', 'session');
+  await page1.fill('input[name="value"]', 'abc123');
+  await page1.check('input[name="secure"]');
+  await page1.check('input[name="httpOnly"]');
+
+  await page1.getByRole('button', { name: 'Save' }).click();
+
+  await expect(page1.getByText('example.com')).toBeVisible();
+
+  await app1.close();
+
+  // Second launch – verify the cookie was persisted and re-loaded
+  const app2 = await launchElectronApp({ userDataPath });
+  const page2 = await app2.firstWindow();
+
+  // Open the Cookies modal again.
+  await page2.waitForSelector('[data-trigger="cookies"]');
+  await page2.click('[data-trigger="cookies"]');
+
+  // The domain we added earlier should still be present.
+  await expect(page2.getByText('example.com')).toBeVisible();
+
+  await app2.close();
+});

e2e-tests/002-cookies-tests/002-corrupted-passkey.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from '../../playwright';
+import * as path from 'path';
+import * as fs from 'fs/promises';
+
+test('should handle corrupted passkey and still display saved cookie list', async ({ createTmpDir, launchElectronApp }) => {
+  const userDataPath = await createTmpDir('corrupted-passkey');
+
+  const app1 = await launchElectronApp({ userDataPath });
+  // 1. First run – add a cookie via the UI so `cookies.json` is created.
+  const page1 = await app1.firstWindow();
+
+  await page1.waitForSelector('[data-trigger="cookies"]');
+  await page1.click('[data-trigger="cookies"]');
+  await page1.getByRole('button', { name: /Add Cookie/i }).click();
+
+  await page1.fill('input[name="domain"]', 'example.com');
+  await page1.fill('input[name="path"]', '/');
+  await page1.fill('input[name="key"]', 'session');
+  await page1.fill('input[name="value"]', 'abc123');
+  await page1.check('input[name="secure"]');
+  await page1.check('input[name="httpOnly"]');
+
+  await page1.getByRole('button', { name: 'Save' }).click();
+
+  await expect(page1.getByText('example.com')).toBeVisible();
+  
+  await app1.close();
+
+  // 2. Corrupt the encryptedPasskey in cookies.json
+  const cookiesFilePath = path.join(userDataPath, 'cookies.json');
+  const raw = await fs.readFile(cookiesFilePath, 'utf-8');
+  const cookiesJson = JSON.parse(raw);
+  cookiesJson.encryptedPasskey = 'deadbeef'; // clearly invalid value
+  await fs.writeFile(cookiesFilePath, JSON.stringify(cookiesJson, null, 2));
+
+  // 3. Second run – Bruno should recover and still list the cookie domain
+  const app2 = await launchElectronApp({ userDataPath });
+  const page2 = await app2.firstWindow();
+
+  await page2.waitForSelector('[data-trigger="cookies"]');
+  await page2.click('[data-trigger="cookies"]');
+
+  // The domain row should still be visible (even if cookie values are blank).
+  await expect(page2.getByText('example.com')).toBeVisible();
+
+  await app2.close();
+});

e2e-tests/persistent-env-tests/001-persistent-env-test.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '../../playwright';
+
+test.describe.serial('Persistent Environment Test', () => {
+  test.setTimeout(2 * 10 * 1000);
+
+  test('add env using script', async ({ pageWithUserData: page, restartApp }) => {
+    await page.locator('#sidebar-collection-name').click();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByText('ping', { exact: true }).click();
+    await page.getByText('No Environment').click();
+    await page.getByRole('tooltip').locator('div').filter({ hasText: 'Env' }).nth(3).click();
+    await page.locator('#send-request').getByRole('img').nth(2).click();
+    await page.waitForTimeout(1000);
+    await page.locator('div').filter({ hasText: /^Env$/ }).nth(3).click();
+    await page.getByText('Configure', { exact: true }).click();
+    await expect(page.getByRole('row', { name: 'persistent-env-test' }).getByRole('cell').nth(3)).toBeVisible();
+    await page.getByText('×').click();
+
+    const newApp = await restartApp();
+    const newPage = await newApp.firstWindow();
+    await newPage.locator('#sidebar-collection-name').click();
+    await newPage.getByRole('button', { name: 'Save' }).click();
+    await newPage.getByText('ping', { exact: true }).click();
+    await newPage.getByText('No Environment').click();
+    await newPage.getByRole('tooltip').locator('div').filter({ hasText: 'Env' }).nth(3).click();
+    await newPage.locator('div').filter({ hasText: /^Env$/ }).nth(3).click();
+    await newPage.getByText('Configure', { exact: true }).click();
+    await expect(newPage.getByRole('row', { name: 'persistent-env-test' }).getByRole('cell').nth(3)).toBeVisible();
+    await newPage.getByText('×').click();
+    await newPage.waitForTimeout(1000);
+    await newPage.close();
+  });
+});

e2e-tests/persistent-env-tests/002-env-test-without-persistence.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '../../playwright';
+
+test.describe.serial('Persistent Environment Test', () => {
+  test.setTimeout(2 * 10 * 1000);
+
+  test('add env using script', async ({ pageWithUserData: page, restartApp }) => {
+    await page.locator('#sidebar-collection-name').click();
+    await page.getByText('ping2', { exact: true }).click();
+    await page.getByText('Env', { exact: true }).click();
+    await page.getByText('Stage', { exact: true }).click();
+    await page.locator('#send-request').getByRole('img').nth(2).click();
+    await page.waitForTimeout(1000);
+    await page
+      .locator('div')
+      .filter({ hasText: /^Stage$/ })
+      .nth(3)
+      .click();
+    await page.getByText('Configure', { exact: true }).click();
+    await expect(page.getByRole('row', { name: 'persistent-env-test' }).getByRole('cell').nth(3)).toBeVisible();
+    await page.getByText('×').click();
+
+    const newApp = await restartApp();
+    const newPage = await newApp.firstWindow();
+    await newPage.locator('#sidebar-collection-name').click();
+    await newPage.getByRole('button', { name: 'Save' }).click();
+    await newPage.getByText('ping2', { exact: true }).click();
+    await newPage.getByText('No Environment').click();
+    await newPage.getByText('Stage').click();
+    await newPage
+      .locator('div')
+      .filter({ hasText: /^Stage$/ })
+      .nth(3)
+      .click();
+    await newPage.getByText('Configure', { exact: true }).click();
+    await expect(newPage.getByRole('row', { name: 'persistent-env-test' }).getByRole('cell').nth(3)).not.toBeVisible();
+    await newPage.getByText('×').click();
+    await newPage.waitForTimeout(1000);
+    await newPage.close();
+  });
+});

e2e-tests/persistent-env-tests/collection/bruno.json

@@ -0,0 +1,5 @@
+{
+    "version": "1",
+    "name": "collection",
+    "type": "collection"
+}

e2e-tests/persistent-env-tests/collection/environments/Env.bru

@@ -0,0 +1,4 @@
+vars {
+  host: https://testbench-sanity.usebruno.com
+  persistent-env-test: persistent-env-test-value
+}

e2e-tests/persistent-env-tests/collection/environments/Stage.bru

@@ -0,0 +1,3 @@
+vars {
+  host: https://testbench-sanity.usebruno.com
+}

e2e-tests/persistent-env-tests/collection/persist-env-request.bru

@@ -0,0 +1,15 @@
+meta {
+  name: ping2
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{host}}/ping
+  body: none
+  auth: none
+}
+
+script:pre-request {
+  bru.setEnvVar("persistent-env-test", "persistent-env-test-value");
+}

e2e-tests/persistent-env-tests/collection/request.bru

@@ -0,0 +1,15 @@
+meta {
+  name: ping
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{host}}/ping
+  body: none
+  auth: none
+}
+
+script:pre-request {
+  bru.setEnvVar("persistent-env-test", "persistent-env-test-value", { persist: true });
+}

e2e-tests/persistent-env-tests/init-user-data/preferences.json

@@ -0,0 +1,6 @@
+{
+    "maximized": true,
+    "lastOpenedCollections": [
+        "{{projectRoot}}/e2e-tests/persistent-env-tests/collection"
+    ]
+}

package.json

@@ -14,13 +14,15 @@
     "packages/bruno-tests",
     "packages/bruno-toml",
     "packages/bruno-graphql-docs",
-    "packages/bruno-requests"
+    "packages/bruno-requests",
+    "packages/bruno-filestore"
   ],
   "homepage": "https://usebruno.com",
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.51.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
@@ -40,6 +42,7 @@
     "setup": "node ./scripts/setup.js",
     "watch:converters": "npm run watch --workspace=packages/bruno-converters",
     "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
+    "watch": "npm run dev:watch",
     "dev:watch": "node ./scripts/dev-hot-reload.js",
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
@@ -48,6 +51,7 @@
     "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
     "build:bruno-common": "npm run build --workspace=packages/bruno-common",
     "build:bruno-requests": "npm run build --workspace=packages/bruno-requests",
+    "build:bruno-filestore": "npm run build --workspace=packages/bruno-filestore",
     "build:bruno-converters": "npm run build --workspace=packages/bruno-converters",
     "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",

packages/bruno-app/package.json

@@ -67,6 +67,7 @@
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",
+    "react-json-view": "^1.21.3",
     "react-pdf": "9.1.1",
     "react-player": "^2.16.0",
     "react-redux": "^7.2.9",
@@ -110,5 +111,10 @@
     "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1"
+  },
+  "overrides": {
+    "httpsnippet": {
+      "form-data": "4.0.4"
+    }
   }
 }

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

@@ -187,17 +187,17 @@ export default class CodeEditor extends React.Component {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
       this.addOverlay();
+
+      const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
       
       // Setup AutoComplete Helper for all modes
       const autoCompleteOptions = {
-        showHintsFor: this.props.showHintsFor
+        showHintsFor: this.props.showHintsFor,
+        getAllVariables: getAllVariablesHandler
       };
 
-      const getVariables = () => getAllVariables(this.props.collection, this.props.item);
-
       this.brunoAutoCompleteCleanup = setupAutoComplete(
         editor,
-        getVariables,
         autoCompleteOptions
       );
     }

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const AwsV4Auth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -131,7 +135,7 @@ const AwsV4Auth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <div className="single-line-editor-wrapper mb-2 flex items-center">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -140,6 +144,7 @@ const AwsV4Auth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
       </div>
 
       <label className="block font-medium mb-2">Session Token</label>

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const BasicAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const basicAuth = get(collection, 'root.request.auth.basic', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -55,7 +59,7 @@ const BasicAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={basicAuth.password || ''}
           theme={storedTheme}
@@ -64,6 +68,7 @@ const BasicAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const BearerAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(bearerToken);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -30,7 +34,7 @@ const BearerAuth = ({ collection }) => {
   return (
     <StyledWrapper className="mt-2 w-full">
       <label className="block font-medium mb-2">Token</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={bearerToken}
           theme={storedTheme}
@@ -39,6 +43,7 @@ const BearerAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const DigestAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const digestAuth = get(collection, 'root.request.auth.digest', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -55,7 +59,7 @@ const DigestAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={digestAuth.password || ''}
           theme={storedTheme}
@@ -64,6 +68,7 @@ const DigestAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -18,6 +20,8 @@ const NTLMAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -82,7 +86,7 @@ const NTLMAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -91,6 +95,7 @@ const NTLMAuth = ({ collection }) => {
           collection={collection}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
       <label className="block font-medium mb-2">Domain</label>

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

@@ -7,6 +7,7 @@ import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/in
 import { useDispatch } from 'react-redux';
 import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/PasswordCredentials/index';
 import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
+import OAuth2Implicit from 'components/RequestPane/Auth/OAuth2/Implicit/index';
 import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
 
 const GrantTypeComponentMap = ({collection }) => {
@@ -29,6 +30,9 @@ const GrantTypeComponentMap = ({collection }) => {
     case 'client_credentials':
       return <OAuth2ClientCredentials save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
       break;
+    case 'implicit':
+      return <OAuth2Implicit save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
+      break;
     default:
       return <div>TBD</div>;
       break;

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const WsseAuth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const wsseAuth = get(collection, 'root.request.auth.wsse', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
@@ -55,14 +59,16 @@ const WsseAuth = ({ collection }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={wsseAuth.password || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
+          isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="wsse-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -38,6 +38,48 @@ const StyledWrapper = styled.div`
       outline: none !important;
     }
   }
+
+  .protocol-placeholder {
+    height: 100%;
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    overflow: hidden;
+  }
+
+  .protocol-https,
+  .protocol-grpcs {
+    position: absolute;
+    right: 8px;
+    top: 0;
+    bottom: 0;
+    transition: transform 0.3s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .protocol-https {
+    animation: slideUpDown 6s infinite;
+    transform: translateY(0);
+  }
+
+  .protocol-grpcs {
+    animation: slideUpDown 6s infinite 3s;
+    transform: translateY(100%);
+  }
+
+  @keyframes slideUpDown {
+    0%, 45% {
+      transform: translateY(0);
+    }
+    50%, 95% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
 `;
 
 export default StyledWrapper;

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

@@ -132,7 +132,10 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
           </label>
           <div className="relative flex items-center">
             <div className="absolute left-0 pl-2 text-gray-400 pointer-events-none flex items-center h-full">
-              https://
+              <span className="protocol-placeholder">
+                <span className="protocol-https">https://</span>
+                <span className="protocol-grpcs">grpcs://</span>
+              </span>
             </div>
             <input
               id="domain"

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

@@ -46,7 +46,7 @@ const Docs = ({ collection }) => {
   }
 
   return (
-    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
+    <StyledWrapper className="h-full w-full relative flex flex-col">
       <div className='flex flex-row w-full justify-between items-center mb-4'>
         <div className='text-lg font-medium flex items-center gap-2'>
           <IconFileText size={20} strokeWidth={1.5} />

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .available-certificates {
+    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+
+    button.remove-certificate {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+`;
+
+export default StyledWrapper; 

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

@@ -0,0 +1,263 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useFormik } from 'formik';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import toast from 'react-hot-toast';
+import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash, IconFile, IconFileImport, IconAlertCircle } from '@tabler/icons';
+import { getRelativePath, getBasename, getDirPath } from 'utils/common/path';
+import { Tooltip } from 'react-tooltip';
+import { existsSync, resolvePath } from '../../../utils/filesystem';
+
+const GrpcSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+  const {
+    brunoConfig: { grpc: grpcConfig = {} }
+  } = collection;
+
+  const fileInputRef = useRef(null);
+  const [protoFileValidity, setProtoFileValidity] = useState({});
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      protoFiles: grpcConfig.protoFiles || []
+    },
+    onSubmit: (newGrpcConfig) => {
+      const brunoConfig = cloneDeep(collection.brunoConfig);
+      brunoConfig.grpc = newGrpcConfig;
+      dispatch(updateBrunoConfig(brunoConfig, collection.uid));
+      toast.success('gRPC settings updated');
+    }
+  });
+
+  // Get file path using the ipcRenderer
+  const getProtoFile = (event) => {
+    const files = event?.files;
+    if (files && files.length > 0) {
+      const newProtoFiles = [...formik.values.protoFiles];
+      
+      for (let i = 0; i < files.length; i++) {
+        const filePath = window?.ipcRenderer?.getFilePath(files[i]);
+        if (filePath) {
+          const relativePath = getRelativePath(filePath, collection.pathname);
+          const protoFileObj = {
+            path: relativePath,
+            type: 'file'
+          };
+          
+          // Check if this path already exists
+          const exists = newProtoFiles.some(pf => pf.path === protoFileObj.path);
+          if (!exists) {
+            newProtoFiles.push(protoFileObj);
+          }
+        }
+      }
+      
+      formik.setFieldValue('protoFiles', newProtoFiles);
+      // Reset the file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  // Handler for removing a proto file
+  const handleRemoveProtoFile = (index) => {
+    const updatedProtoFiles = [...formik.values.protoFiles];
+    updatedProtoFiles.splice(index, 1);
+    formik.setFieldValue('protoFiles', updatedProtoFiles);
+  };
+
+  // Handle the browse button click
+  const handleBrowseClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  // Check if a proto file path is valid
+  const isProtoFileValid = async (protoFile) => {
+    try {
+      const absolutePath = await resolvePath(protoFile.path, collection.pathname);
+      return await existsSync(absolutePath);
+    } catch (error) {
+      return false;
+    }
+  };
+
+  // Validate all proto files and update state
+  useEffect(() => {
+    const validateProtoFiles = async () => {
+      const validityMap = {};
+      for (const file of formik.values.protoFiles) {
+        validityMap[file.path] = await isProtoFileValid(file);
+      }
+      setProtoFileValidity(validityMap);
+    };
+
+    validateProtoFiles();
+  }, [formik.values.protoFiles, collection.pathname]);
+
+  // Handle replacing an invalid proto file
+  const handleReplaceProtoFile = (index) => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+      // Store the index to replace after file selection
+      fileInputRef.current.dataset.replaceIndex = index;
+    }
+  };
+
+  // Handle file input change
+  const handleFileInputChange = (e) => {
+    const replaceIndex = e.target.dataset.replaceIndex;
+    if (replaceIndex !== undefined) {
+      // Handle replacement
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        const filePath = window?.ipcRenderer?.getFilePath(files[0]);
+        if (filePath) {
+          const relativePath = getRelativePath(filePath, collection.pathname);
+          const updatedProtoFiles = [...formik.values.protoFiles];
+          updatedProtoFiles[replaceIndex] = {
+            path: relativePath,
+            type: 'file'
+          };
+          formik.setFieldValue('protoFiles', updatedProtoFiles);
+        }
+      }
+      delete e.target.dataset.replaceIndex;
+    } else {
+      getProtoFile(e.target);
+    }
+  };
+
+  return (
+    <StyledWrapper className="h-full w-full">
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div className="mb-3">
+          <label className="font-semibold text-sm mb-3 flex items-center" htmlFor="protoFiles">
+            Add Proto Files
+            <span id="proto-files-tooltip" className="ml-2">
+              <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
+            </span>
+            <Tooltip
+              anchorId="proto-files-tooltip"
+              className="tooltip-mod font-normal"
+              html="Keep your proto files within the collection folder or the corresponding git repository to ensure paths remain valid when sharing the collection."
+            />
+          </label>
+          <div className="flex flex-col">
+            {/* Hidden file input for file selection */}
+            <input
+              type="file"
+              ref={fileInputRef}
+              style={{ display: 'none' }}
+              accept=".proto"
+              multiple
+              onChange={handleFileInputChange}
+            />
+            
+            <div className="flex flex-col gap-3">
+              {/* File selection options */}
+              <div className="flex flex-col space-y-3">
+                <div className="flex items-center">
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-secondary flex items-center"
+                    onClick={handleBrowseClick}
+                  >
+                    <IconFileImport size={16} strokeWidth={1.5} className="mr-1" />
+                    Browse for proto files
+                  </button>
+                </div>
+              </div>
+              
+              {/* Divider */}
+              <div className="border-t border-neutral-600 my-2"></div>
+              
+              {/* List of added proto files */}
+              <div>
+                <div className="text-sm font-semibold mb-2 flex items-center">
+                  <IconFile size={16} strokeWidth={1.5} className="mr-1" />
+                  Added Proto Files ({formik.values.protoFiles.length})
+                </div>
+                
+                {formik.values.protoFiles.length === 0 ? (
+                  <div className="text-neutral-500 text-sm italic">No proto files added yet</div>
+                ) : (
+                  <>
+                    {formik.values.protoFiles.some(file => !protoFileValidity[file.path]) && (
+                      <div className="text-xs text-red-500 mb-2 flex items-center bg-red-50 dark:bg-red-900/20 p-2 rounded">
+                        <IconAlertCircle size={14} className="mr-1" />
+                        Some proto files cannot be found at their specified paths. Use the "Replace" option to update their locations.
+                      </div>
+                    )}
+                    <ul className="mt-4">
+                      {formik.values.protoFiles.map((file, index) => {
+                        const isValid = protoFileValidity[file.path];
+                        return (
+                          <li key={index} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+                            <div className="flex items-center w-full justify-between">
+                              <div className="flex w-full items-center">
+                                <IconFile className="mr-2" size={18} strokeWidth={1.5} />
+                                <div
+                                  className="overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px] text-sm"
+                                  title={file.path}
+                                >
+                                  {getBasename(file.path)}
+                                  <span className="text-xs text-neutral-500 ml-2">
+                                    {getDirPath(file.path)}
+                                  </span>
+                                </div>
+                              </div>
+                              <div className="flex w-full items-center justify-end">
+                                {!isValid && (
+                                  <div className="flex items-center mr-2">
+                                    <IconAlertCircle
+                                      size={16}
+                                      className="text-red-500"
+                                      title="Proto file not found. Click to replace."
+                                    />
+                                    <button
+                                      type="button"
+                                      className="text-xs text-red-500 ml-1 hover:underline"
+                                      onClick={() => handleReplaceProtoFile(index)}
+                                    >
+                                      Replace
+                                    </button>
+                                  </div>
+                                )}
+                                <button
+                                  type="button"
+                                  className="remove-certificate ml-2"
+                                  onClick={() => handleRemoveProtoFile(index)}
+                                  title="Remove file"
+                                >
+                                  <IconTrash size={18} strokeWidth={1.5} />
+                                </button>
+                              </div>
+                            </div>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
+    </StyledWrapper>
+  );
+};
+
+export default GrpcSettings; 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@@ -7,19 +7,30 @@ import { useTheme } from 'providers/Theme';
 import {
   addCollectionHeader,
   updateCollectionHeader,
-  deleteCollectionHeader
+  deleteCollectionHeader,
+  setCollectionHeaders
 } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
+import BulkEditor from 'components/BulkEditor/index';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const headers = get(collection, 'root.request.headers', []);
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkHeadersChange = (newHeaders) => {
+    dispatch(setCollectionHeaders({ collectionUid: collection.uid, headers: newHeaders }));
+  };
 
   const addHeader = () => {
     dispatch(
@@ -63,6 +74,22 @@ const Headers = ({ collection }) => {
     );
   };
 
+  if (isBulkEditMode) {
+    return (
+      <StyledWrapper className="h-full w-full">
+        <div className="text-xs mb-4 text-muted">
+          Add request headers that will be sent with every request in this collection.
+        </div>
+        <BulkEditor
+          params={headers}
+          onChange={handleBulkHeadersChange}
+          onToggle={toggleBulkEditMode}
+          onSave={handleSave}
+        />
+      </StyledWrapper>
+    );
+  }
+
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">
@@ -141,9 +168,14 @@ const Headers = ({ collection }) => {
             : null}
         </tbody>
       </table>
-      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
-        + Add Header
-      </button>
+      <div className="flex justify-between mt-2">
+        <button className="btn-add-header text-link pr-2 py-3 select-none" onClick={addHeader}>
+          + Add Header
+        </button>
+        <button className="text-link select-none" onClick={toggleBulkEditMode}>
+          Bulk Edit
+        </button>
+      </div>
 
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

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

@@ -53,7 +53,7 @@ const Info = ({ collection }) => {
             </div>
             <div className="ml-4">
               <div className="font-semibold text-sm">Requests</div>
-              <div className="mt-1 text-sm text-muted font-mono">
+              <div className="mt-1 text-sm text-muted">
                 {
                   isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
                 }

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

@@ -1,13 +1,15 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
 import cloneDeep from 'lodash/cloneDeep';
+import { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
+  const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
   const {
     brunoConfig: { presets: presets = {} }
   } = collection;
@@ -15,10 +17,15 @@ const PresetsSettings = ({ collection }) => {
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      requestType: presets.requestType || 'http',
+      requestType: presets.requestType === 'grpc' && !isGrpcEnabled ? 'http' : presets.requestType || 'http',
       requestUrl: presets.requestUrl || ''
     },
     onSubmit: (newPresets) => {
+      // If gRPC is disabled but the preset is set to grpc, change it to http
+      if (!isGrpcEnabled && newPresets.requestType === 'grpc') {
+        newPresets.requestType = 'http';
+      }
+
       const brunoConfig = cloneDeep(collection.brunoConfig);
       brunoConfig.presets = newPresets;
       dispatch(updateBrunoConfig(brunoConfig, collection.uid));
@@ -62,6 +69,23 @@ const PresetsSettings = ({ collection }) => {
             <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
               GraphQL
             </label>
+
+            {isGrpcEnabled && (
+              <>
+                <input
+                  id="grpc"
+                  className="ml-4 cursor-pointer"
+                  type="radio"
+                  name="requestType"
+                  onChange={formik.handleChange}
+                  value="grpc"
+                  checked={formik.values.requestType === 'grpc'}
+                />
+                <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
+                  gRPC
+                </label>
+              </>
+            )}
           </div>
         </div>
         <div className="mb-3 flex items-center">
@@ -74,7 +98,7 @@ const PresetsSettings = ({ collection }) => {
                 id="request-url"
                 type="text"
                 name="requestUrl"
-                placeholder='Request URL'
+                placeholder="Request URL"
                 className="block textbox"
                 autoComplete="off"
                 autoCorrect="off"
@@ -87,6 +111,7 @@ const PresetsSettings = ({ collection }) => {
             </div>
           </div>
         </div>
+
         <div className="mt-6">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Save

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

@@ -13,21 +13,16 @@ import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
 import Presets from './Presets';
+import Grpc from './Grpc';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
-import DotIcon from 'components/Icons/Dot';
+import StatusDot from 'components/StatusDot';
 import Overview from './Overview/index';
-
-const ContentIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium">
-      <DotIcon width="10"></DotIcon>
-    </sup>
-  );
-};
+import { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
 
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
+  const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
   const tab = collection.settingsSelectedTab;
   const setTab = (tab) => {
     dispatch(
@@ -53,7 +48,7 @@ const CollectionSettings = ({ collection }) => {
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
-
+  const grpcConfig = get(collection, 'brunoConfig.grpc', {});
 
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
@@ -130,6 +125,9 @@ const CollectionSettings = ({ collection }) => {
           />
         );
       }
+      case 'grpc': {
+        return <Grpc collection={collection} />;
+      }
     }
   };
 
@@ -140,9 +138,9 @@ const CollectionSettings = ({ collection }) => {
   };
 
   return (
-    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
+    <StyledWrapper className="flex flex-col h-full relative px-4 py-4 overflow-hidden">
       <div className="flex flex-wrap items-center tabs" role="tablist">
-      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
+        <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
           Overview
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
@@ -155,29 +153,35 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
-          {authMode !== 'none' && <ContentIndicator />}
+          {authMode !== 'none' && <StatusDot />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script
-          {hasScripts && <ContentIndicator />}
+          {hasScripts && <StatusDot />}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
-          {hasTests && <ContentIndicator />}
+          {hasTests && <StatusDot />}
         </div>
         <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
           Presets
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0  && <ContentIndicator />}
+          {Object.keys(proxyConfig).length > 0 && <StatusDot />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
-          {clientCertConfig.length > 0 && <ContentIndicator />}
+          {clientCertConfig.length > 0 && <StatusDot />}
         </div>
+        {isGrpcEnabled && (
+          <div className={getTabClassname('grpc')} role="tab" onClick={() => setTab('grpc')}>
+            gRPC
+            {grpcConfig.protoFiles && grpcConfig.protoFiles.length > 0 && <StatusDot />}
+          </div>
+        )}
       </div>
-      <section className="mt-4 h-full">{getTabPanel(tab)}</section>
+      <section className="mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/Devtools/Console/DebugTab/StyledWrapper.js

@@ -0,0 +1,163 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: ${(props) => props.theme.console.contentBg};
+  overflow: hidden;
+
+  .debug-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    flex-shrink: 0;
+  }
+
+  .debug-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: ${(props) => props.theme.console.titleColor};
+    font-size: 13px;
+    font-weight: 500;
+
+    .error-count {
+      color: ${(props) => props.theme.console.countColor};
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+
+  .debug-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .control-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: transparent;
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 4px;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .debug-content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .debug-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: ${(props) => props.theme.console.emptyColor};
+    text-align: center;
+    gap: 8px;
+    padding: 40px 20px;
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    span {
+      font-size: 12px;
+      opacity: 0.7;
+    }
+  }
+
+  .errors-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .errors-header {
+    display: grid;
+    grid-template-columns: 1fr 200px 120px;
+    gap: 12px;
+    padding: 8px 16px;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    font-size: 11px;
+    font-weight: 600;
+    color: ${(props) => props.theme.console.titleColor};
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    flex-shrink: 0;
+  }
+
+  .errors-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+  }
+
+  .error-row {
+    display: grid;
+    grid-template-columns: 1fr 200px 120px;
+    gap: 12px;
+    padding: 8px 16px;
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+    font-size: 12px;
+    align-items: center;
+
+    &:hover {
+      background: ${(props) => props.theme.console.logHoverBg};
+    }
+
+    &.selected {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      border-left: 3px solid ${(props) => props.theme.console.checkboxColor};
+    }
+  }
+
+  .error-message {
+    color: ${(props) => props.theme.console.messageColor};
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  }
+
+  .error-location {
+    color: ${(props) => props.theme.console.messageColor};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 11px;
+  }
+
+  .error-time {
+    color: ${(props) => props.theme.console.timestampColor};
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 11px;
+    text-align: right;
+  }
+`;
+
+export default StyledWrapper; 

packages/bruno-app/src/components/Devtools/Console/DebugTab/index.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { IconBug } from '@tabler/icons';
+import { 
+  setSelectedError,
+  clearDebugErrors
+} from 'providers/ReduxStore/slices/logs';
+import StyledWrapper from './StyledWrapper';
+
+const ErrorRow = ({ error, isSelected, onClick }) => {
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
+      second: '2-digit',
+      fractionalSecondDigits: 3
+    });
+  };
+
+  const getShortMessage = (message, maxLength = 80) => {
+    if (!message) return 'Unknown error';
+    return message.length > maxLength ? message.substring(0, maxLength) + '...' : message;
+  };
+
+  const getLocation = (error) => {
+    if (error.filename) {
+      const filename = error.filename.split('/').pop(); // Get just the filename
+      if (error.lineno && error.colno) {
+        return `${filename}:${error.lineno}:${error.colno}`;
+      } else if (error.lineno) {
+        return `${filename}:${error.lineno}`;
+      }
+      return filename;
+    }
+    return '-';
+  };
+
+  return (
+    <div 
+      className={`error-row ${isSelected ? 'selected' : ''}`}
+      onClick={onClick}
+    >
+      <div className="error-message" title={error.message}>
+        {getShortMessage(error.message)}
+      </div>
+      
+      <div className="error-location" title={error.filename}>
+        {getLocation(error)}
+      </div>
+      
+      <div className="error-time">
+        {formatTime(error.timestamp)}
+      </div>
+    </div>
+  );
+};
+
+const DebugTab = () => {
+  const dispatch = useDispatch();
+  const { debugErrors, selectedError } = useSelector(state => state.logs);
+
+  const handleErrorClick = (error) => {
+    dispatch(setSelectedError(error));
+  };
+
+  const handleClearErrors = () => {
+    dispatch(clearDebugErrors());
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="debug-content">
+        {debugErrors.length === 0 ? (
+          <div className="debug-empty">
+            <IconBug size={48} strokeWidth={1} />
+            <p>No errors</p>
+            <span>console.error() calls will appear here</span>
+          </div>
+        ) : (
+          <div className="errors-container">
+            <div className="errors-header">
+              <div>Message</div>
+              <div>Location</div>
+              <div className="text-right">Time</div>
+            </div>
+            
+            <div className="errors-list">
+              {debugErrors.map((error, index) => (
+                <ErrorRow
+                  key={error.id}
+                  error={error}
+                  isSelected={selectedError?.id === error.id}
+                  onClick={() => handleErrorClick(error)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default DebugTab; 

packages/bruno-app/src/components/Devtools/Console/ErrorDetailsPanel/StyledWrapper.js

@@ -0,0 +1,228 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: ${(props) => props.theme.console.contentBg};
+  border-left: 1px solid ${(props) => props.theme.console.border};
+  min-width: 400px;
+  max-width: 600px;
+  width: 40%;
+  overflow: hidden;
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    flex-shrink: 0;
+  }
+
+  .panel-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: ${(props) => props.theme.console.titleColor};
+    font-size: 13px;
+    font-weight: 500;
+
+    .error-time {
+      color: ${(props) => props.theme.console.countColor};
+      font-size: 11px;
+      font-weight: 400;
+    }
+  }
+
+  .close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      color: ${(props) => props.theme.console.buttonHoverColor};
+    }
+  }
+
+  .panel-tabs {
+    display: flex;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    flex-shrink: 0;
+  }
+
+  .tab-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 12px;
+    font-weight: 500;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      color: ${(props) => props.theme.console.buttonHoverColor};
+    }
+
+    &.active {
+      color: ${(props) => props.theme.console.checkboxColor};
+      border-bottom-color: ${(props) => props.theme.console.checkboxColor};
+      background: ${(props) => props.theme.console.contentBg};
+    }
+  }
+
+  .panel-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: ${(props) => props.theme.console.contentBg};
+    min-height: 0;
+  }
+
+  .tab-content {
+    padding: 16px;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .section {
+    margin-bottom: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    h4 {
+      margin: 0 0 12px 0;
+      font-size: 13px;
+      font-weight: 600;
+      color: ${(props) => props.theme.console.titleColor};
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+  }
+
+  .info-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    label {
+      font-size: 11px;
+      font-weight: 600;
+      color: ${(props) => props.theme.console.titleColor};
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    span {
+      font-size: 12px;
+      color: ${(props) => props.theme.console.messageColor};
+      font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+      word-break: break-all;
+      line-height: 1.4;
+    }
+  }
+
+  .error-message-full {
+    color: ${(props) => props.theme.console.messageColor} !important;
+    background: ${(props) => props.theme.console.headerBg};
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 1px solid ${(props) => props.theme.console.border};
+  }
+
+  .file-path {
+    color: ${(props) => props.theme.console.checkboxColor} !important;
+    font-weight: 500 !important;
+  }
+
+  .report-section {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    p {
+      margin: 0;
+      font-size: 12px;
+      color: ${(props) => props.theme.console.messageColor};
+      line-height: 1.4;
+    }
+  }
+
+  .report-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: ${(props) => props.theme.console.buttonHoverBg};
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 6px;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 12px;
+    font-weight: 500;
+    text-decoration: none;
+    align-self: flex-start;
+
+    &:hover {
+      background: ${(props) => props.theme.console.checkboxColor};
+      color: white;
+      border-color: ${(props) => props.theme.console.checkboxColor};
+    }
+
+    span {
+      font-family: inherit;
+    }
+  }
+
+  .stack-trace-container,
+  .arguments-container {
+    background: ${(props) => props.theme.console.headerBg};
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .stack-trace,
+  .arguments {
+    margin: 0;
+    padding: 16px;
+    font-size: 11px;
+    line-height: 1.5;
+    color: ${(props) => props.theme.console.messageColor};
+    background: transparent;
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-x: auto;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+`;
+
+export default StyledWrapper; 

packages/bruno-app/src/components/Devtools/Console/ErrorDetailsPanel/index.js

@@ -0,0 +1,268 @@
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { 
+  IconX,
+  IconBug,
+  IconFileText,
+  IconCode,
+  IconStack,
+  IconBrandGithub
+} from '@tabler/icons';
+import { clearSelectedError } from 'providers/ReduxStore/slices/logs';
+import { useApp } from 'providers/App';
+import platformLib from 'platform';
+import StyledWrapper from './StyledWrapper';
+
+const ErrorInfoTab = ({ error }) => {
+  const { version } = useApp();
+  
+  const formatTimestamp = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleString();
+  };
+
+  const generateGitHubIssueUrl = () => {
+    const title = `Bug: ${error.message.substring(0, 50)}${error.message.length > 50 ? '...' : ''}`;
+    
+    const body = `## Bug Report
+
+### Error Details
+- **Message**: ${error.message}
+- **File**: ${error.filename || 'Unknown'}
+- **Line**: ${error.lineno || 'Unknown'}:${error.colno || 'Unknown'}
+- **Timestamp**: ${formatTimestamp(error.timestamp)}
+
+### Environment
+- **Bruno Version**: ${version}
+- **OS**: ${platformLib.os.family} ${platformLib.os.version || ''}
+- **Browser**: ${platformLib.name} ${platformLib.version || ''}
+
+### Stack Trace
+\`\`\`
+${error.stack || 'No stack trace available'}
+\`\`\`
+
+### Arguments
+\`\`\`
+${error.args ? error.args.map((arg, index) => {
+  if (arg && typeof arg === 'object' && arg.__type === 'Error') {
+    return `[${index}]: Error: ${arg.message}`;
+  }
+  return `[${index}]: ${typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)}`;
+}).join('\n') : 'No arguments'}
+\`\`\`
+
+### Steps to Reproduce
+1. 
+2. 
+3. 
+
+### Expected Behavior
+
+
+### Additional Context
+
+`;
+
+    const encodedTitle = encodeURIComponent(title);
+    const encodedBody = encodeURIComponent(body);
+    
+    return `https://github.com/usebruno/bruno/issues/new?template=BLANK_ISSUE&title=${encodedTitle}&body=${encodedBody}`;
+  };
+
+  const handleReportIssue = () => {
+    const url = generateGitHubIssueUrl();
+    window.open(url, '_blank');
+  };
+
+  return (
+    <div className="tab-content">
+      <div className="section">
+        <h4>Error Information</h4>
+        <div className="info-grid">
+          <div className="info-item">
+            <label>Message:</label>
+            <span className="error-message-full">{error.message || 'No message available'}</span>
+          </div>
+          
+          {error.filename && (
+            <div className="info-item">
+              <label>File:</label>
+              <span className="file-path">{error.filename}</span>
+            </div>
+          )}
+          
+          {error.lineno && (
+            <div className="info-item">
+              <label>Line:</label>
+              <span>{error.lineno}{error.colno ? `:${error.colno}` : ''}</span>
+            </div>
+          )}
+          
+          <div className="info-item">
+            <label>Timestamp:</label>
+            <span>{formatTimestamp(error.timestamp)}</span>
+          </div>
+        </div>
+      </div>
+      
+      <div className="section">
+        <h4>Report Issue</h4>
+        <div className="report-section">
+          <p>Found a bug? Help us improve Bruno by reporting this error on GitHub.</p>
+          <button 
+            className="report-button"
+            onClick={handleReportIssue}
+            title="Report this error on GitHub"
+          >
+            <IconBrandGithub size={16} strokeWidth={1.5} />
+            <span>Report Issue on GitHub</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const StackTraceTab = ({ error }) => {
+  const formatStackTrace = (stack) => {
+    if (!stack) return 'Stack trace not available';
+    
+    return stack
+      .split('\n')
+      .map(line => line.trim())
+      .filter(line => line.length > 0)
+      .join('\n');
+  };
+
+  return (
+    <div className="tab-content">
+      <div className="section">
+        <h4>Stack Trace</h4>
+        <div className="stack-trace-container">
+          <pre className="stack-trace">
+            {formatStackTrace(error.stack)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ArgumentsTab = ({ error }) => {
+  const formatArguments = (args) => {
+    if (!args || args.length === 0) return 'No arguments available';
+    
+    try {
+      return args.map((arg, index) => {
+        // Handle special Error object format
+        if (arg && typeof arg === 'object' && arg.__type === 'Error') {
+          return `[${index}]: Error: ${arg.message}\n  Name: ${arg.name}\n  Stack: ${arg.stack || 'No stack trace'}`;
+        }
+        
+        if (typeof arg === 'object' && arg !== null) {
+          return `[${index}]: ${JSON.stringify(arg, null, 2)}`;
+        }
+        
+        return `[${index}]: ${String(arg)}`;
+      }).join('\n\n');
+    } catch (e) {
+      return 'Arguments could not be formatted';
+    }
+  };
+
+  return (
+    <div className="tab-content">
+      <div className="section">
+        <h4>Arguments</h4>
+        <div className="arguments-container">
+          <pre className="arguments">
+            {formatArguments(error.args)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ErrorDetailsPanel = () => {
+  const dispatch = useDispatch();
+  const { selectedError } = useSelector(state => state.logs);
+  const [activeTab, setActiveTab] = useState('info');
+
+  if (!selectedError) return null;
+
+  const handleClose = () => {
+    dispatch(clearSelectedError());
+  };
+
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleString();
+  };
+
+  const getTabContent = () => {
+    switch (activeTab) {
+      case 'info':
+        return <ErrorInfoTab error={selectedError} />;
+      case 'stack':
+        return <StackTraceTab error={selectedError} />;
+      case 'args':
+        return <ArgumentsTab error={selectedError} />;
+      default:
+        return <ErrorInfoTab error={selectedError} />;
+    }
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="panel-header">
+        <div className="panel-title">
+          <IconBug size={16} strokeWidth={1.5} />
+          <span>Error Details</span>
+          <span className="error-time">({formatTime(selectedError.timestamp)})</span>
+        </div>
+        
+        <button 
+          className="close-button"
+          onClick={handleClose}
+          title="Close details panel"
+        >
+          <IconX size={16} strokeWidth={1.5} />
+        </button>
+      </div>
+
+      <div className="panel-tabs">
+        <button 
+          className={`tab-button ${activeTab === 'info' ? 'active' : ''}`}
+          onClick={() => setActiveTab('info')}
+        >
+          <IconFileText size={14} strokeWidth={1.5} />
+          Info
+        </button>
+        
+        <button 
+          className={`tab-button ${activeTab === 'stack' ? 'active' : ''}`}
+          onClick={() => setActiveTab('stack')}
+        >
+          <IconStack size={14} strokeWidth={1.5} />
+          Stack
+        </button>
+        
+        <button 
+          className={`tab-button ${activeTab === 'args' ? 'active' : ''}`}
+          onClick={() => setActiveTab('args')}
+        >
+          <IconCode size={14} strokeWidth={1.5} />
+          Args
+        </button>
+      </div>
+
+      <div className="panel-content">
+        {getTabContent()}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ErrorDetailsPanel; 

packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js

@@ -0,0 +1,293 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: ${(props) => props.theme.console.contentBg};
+  overflow: hidden;
+
+  .network-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    flex-shrink: 0;
+  }
+
+  .network-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: ${(props) => props.theme.console.titleColor};
+    font-size: 13px;
+    font-weight: 500;
+
+    .request-count {
+      color: ${(props) => props.theme.console.countColor};
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+
+  .network-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .network-content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 0; /* Important for proper flex behavior */
+  }
+
+  .network-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: ${(props) => props.theme.console.emptyColor};
+    text-align: center;
+    gap: 8px;
+    padding: 40px 20px;
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    span {
+      font-size: 12px;
+      opacity: 0.7;
+    }
+  }
+
+  .requests-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    min-height: 0; /* Important for proper flex behavior */
+  }
+
+  .requests-header {
+    display: grid;
+    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
+    gap: 12px;
+    padding: 8px 16px;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    font-size: 11px;
+    font-weight: 600;
+    color: ${(props) => props.theme.console.titleColor};
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    flex-shrink: 0;
+  }
+
+  .requests-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0; /* Important for proper scrolling */
+  }
+
+  .request-row {
+    display: grid;
+    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
+    gap: 12px;
+    padding: 6px 16px;
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+    font-size: 12px;
+    align-items: center;
+
+    &:hover {
+      background: ${(props) => props.theme.console.logHoverBg};
+    }
+
+    &.selected {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      border-left: 3px solid ${(props) => props.theme.console.checkboxColor};
+    }
+  }
+
+  .method-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 600;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    min-width: 45px;
+  }
+
+  .status-badge {
+    font-weight: 600;
+    font-size: 12px;
+  }
+
+  .request-domain {
+    color: ${(props) => props.theme.console.messageColor};
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .request-path {
+    color: ${(props) => props.theme.console.messageColor};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  }
+
+  .request-time {
+    color: ${(props) => props.theme.console.timestampColor};
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 11px;
+  }
+
+  .request-duration {
+    color: ${(props) => props.theme.console.messageColor};
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 11px;
+    text-align: right;
+  }
+
+  .request-size {
+    color: ${(props) => props.theme.console.messageColor};
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 11px;
+    text-align: right;
+  }
+
+  .filter-dropdown {
+    position: relative;
+  }
+
+  .filter-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    background: transparent;
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 4px;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 12px;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      color: ${(props) => props.theme.console.buttonHoverColor};
+    }
+
+    .filter-summary {
+      font-weight: 500;
+      min-width: 24px;
+      text-align: center;
+    }
+  }
+
+  .filter-dropdown-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    min-width: 200px;
+    max-width: 250px;
+    background: ${(props) => props.theme.console.dropdownBg};
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    overflow: hidden;
+  }
+
+  .filter-dropdown-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: ${(props) => props.theme.console.dropdownHeaderBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    font-size: 12px;
+    font-weight: 500;
+    color: ${(props) => props.theme.console.titleColor};
+  }
+
+  .filter-toggle-all {
+    background: transparent;
+    border: none;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 4px;
+    border-radius: 2px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+    }
+  }
+
+  .filter-dropdown-options {
+    padding: 4px 0;
+  }
+
+  .filter-option {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.console.optionHoverBg};
+    }
+
+    input[type="checkbox"] {
+      margin: 0 8px 0 0;
+      width: 14px;
+      height: 14px;
+      accent-color: ${(props) => props.theme.console.checkboxColor};
+    }
+  }
+
+  .filter-option-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+  }
+
+  .filter-option-label {
+    color: ${(props) => props.theme.console.optionLabelColor};
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .filter-option-count {
+    color: ${(props) => props.theme.console.optionCountColor};
+    font-size: 11px;
+    font-weight: 400;
+    margin-left: auto;
+  }
+`;
+
+export default StyledWrapper; 

packages/bruno-app/src/components/Devtools/Console/NetworkTab/index.js

@@ -0,0 +1,302 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { 
+  IconFilter,
+  IconChevronDown,
+  IconNetwork,
+} from '@tabler/icons';
+import { 
+  updateNetworkFilter, 
+  toggleAllNetworkFilters, 
+  setSelectedRequest
+} from 'providers/ReduxStore/slices/logs';
+import StyledWrapper from './StyledWrapper';
+
+const MethodBadge = ({ method }) => {
+  const getMethodColor = (method) => {
+    switch (method?.toUpperCase()) {
+      case 'GET': return '#10b981';
+      case 'POST': return '#8b5cf6';
+      case 'PUT': return '#f59e0b';
+      case 'DELETE': return '#ef4444';
+      case 'PATCH': return '#06b6d4';
+      case 'HEAD': return '#6b7280';
+      case 'OPTIONS': return '#84cc16';
+      default: return '#6b7280';
+    }
+  };
+
+  return (
+    <span 
+      className="method-badge" 
+      style={{ backgroundColor: getMethodColor(method) }}
+    >
+      {method?.toUpperCase() || 'GET'}
+    </span>
+  );
+};
+
+const StatusBadge = ({ status, statusCode }) => {
+  const getStatusColor = (code) => {
+    if (code >= 200 && code < 300) return '#10b981';
+    if (code >= 300 && code < 400) return '#f59e0b';
+    if (code >= 400 && code < 500) return '#ef4444';
+    if (code >= 500) return '#dc2626';
+    return '#6b7280';
+  };
+
+  const displayStatus = statusCode || status;
+  
+  return (
+    <span 
+      className="status-badge" 
+      style={{ color: getStatusColor(statusCode) }}
+    >
+      {displayStatus}
+    </span>
+  );
+};
+
+const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggleAll }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const allFiltersEnabled = Object.values(filters).every(f => f);
+  const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className="filter-dropdown" ref={dropdownRef}>
+      <button 
+        className="filter-dropdown-trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        title="Filter requests by method"
+      >
+        <IconFilter size={16} strokeWidth={1.5} />
+        <span className="filter-summary">
+          {activeFilters.length === Object.keys(filters).length ? 'All' : `${activeFilters.length}/${Object.keys(filters).length}`}
+        </span>
+        <IconChevronDown size={14} strokeWidth={1.5} />
+      </button>
+      
+      {isOpen && (
+        <div className={`filter-dropdown-menu right`}>
+          <div className="filter-dropdown-header">
+            <span>Filter by Method</span>
+            <button 
+              className="filter-toggle-all"
+              onClick={() => onToggleAll(!allFiltersEnabled)}
+            >
+              {allFiltersEnabled ? 'Hide All' : 'Show All'}
+            </button>
+          </div>
+          
+          <div className="filter-dropdown-options">
+            {Object.keys(filters).map(method => (
+              <label key={method} className="filter-option">
+                <input
+                  type="checkbox"
+                  checked={filters[method]}
+                  onChange={(e) => onFilterToggle(method, e.target.checked)}
+                />
+                <div className="filter-option-content">
+                  <MethodBadge method={method} />
+                  <span className="filter-option-label">{method}</span>
+                  <span className="filter-option-count">({requestCounts[method] || 0})</span>
+                </div>
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const RequestRow = ({ request, isSelected, onClick }) => {
+  const { data } = request;
+  const { request: req, response: res, timestamp } = data;
+  
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
+      second: '2-digit',
+      fractionalSecondDigits: 3
+    });
+  };
+
+  const formatDuration = (duration) => {
+    if (!duration) return '-';
+    if (duration < 1000) return `${Math.round(duration)}ms`;
+    return `${(duration / 1000).toFixed(2)}s`;
+  };
+
+  const formatSize = (size) => {
+    if (!size) return '-';
+    if (size < 1024) return `${size}B`;
+    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`;
+    return `${(size / (1024 * 1024)).toFixed(1)}MB`;
+  };
+
+  const getUrl = () => {
+    return req?.url || 'Unknown URL';
+  };
+
+  const getDomain = () => {
+    try {
+      const url = new URL(getUrl());
+      return url.hostname;
+    } catch {
+      return getUrl();
+    }
+  };
+
+  const getPath = () => {
+    try {
+      const url = new URL(getUrl());
+      return url.pathname + url.search;
+    } catch {
+      return getUrl();
+    }
+  };
+
+  return (
+    <div 
+      className={`request-row ${isSelected ? 'selected' : ''}`}
+      onClick={onClick}
+    >
+      <div className="request-method">
+        <MethodBadge method={req?.method} />
+      </div>
+      
+      <div className="request-status">
+        <StatusBadge status={res?.status} statusCode={res?.statusCode} />
+      </div>
+      
+      <div className="request-domain" title={getDomain()}>
+        {getDomain()}
+      </div>
+      
+      <div className="request-path" title={getPath()}>
+        {getPath()}
+      </div>
+      
+      <div className="request-time">
+        {formatTime(timestamp)}
+      </div>
+      
+      <div className="request-duration">
+        {formatDuration(res?.duration)}
+      </div>
+      
+      <div className="request-size">
+        {formatSize(res?.size)}
+      </div>
+    </div>
+  );
+};
+
+const NetworkTab = () => {
+  const dispatch = useDispatch();
+  const { networkFilters, selectedRequest } = useSelector(state => state.logs);
+  const collections = useSelector(state => state.collections.collections);
+
+  const allRequests = useMemo(() => {
+    const requests = [];
+    
+    collections.forEach(collection => {
+      if (collection.timeline) {
+        collection.timeline
+          .filter(entry => entry.type === 'request')
+          .forEach(entry => {
+            requests.push({
+              ...entry,
+              collectionName: collection.name,
+              collectionUid: collection.uid
+            });
+          });
+      }
+    });
+    
+    return requests.sort((a, b) => a.timestamp - b.timestamp);
+  }, [collections]);
+
+  const filteredRequests = useMemo(() => {
+    return allRequests.filter(request => {
+      const method = request.data?.request?.method?.toUpperCase() || 'GET';
+      return networkFilters[method];
+    });
+  }, [allRequests, networkFilters]);
+
+  const requestCounts = useMemo(() => {
+    return allRequests.reduce((counts, request) => {
+      const method = request.data?.request?.method?.toUpperCase() || 'GET';
+      counts[method] = (counts[method] || 0) + 1;
+      return counts;
+    }, {});
+  }, [allRequests]);
+
+  const handleFilterToggle = (method, enabled) => {
+    dispatch(updateNetworkFilter({ method, enabled }));
+  };
+
+  const handleToggleAllFilters = (enabled) => {
+    dispatch(toggleAllNetworkFilters(enabled));
+  };
+
+  const handleRequestClick = (request) => {
+    dispatch(setSelectedRequest(request));
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="network-content">
+        {filteredRequests.length === 0 ? (
+          <div className="network-empty">
+            <IconNetwork size={48} strokeWidth={1} />
+            <p>No network requests</p>
+            <span>Requests will appear here as you make API calls</span>
+          </div>
+        ) : (
+          <div className="requests-container">
+            <div className="requests-header">
+              <div>Method</div>
+              <div>Status</div>
+              <div>Domain</div>
+              <div>Path</div>
+              <div>Time</div>
+              <div className="text-right">Duration</div>
+              <div className="text-right">Size</div>
+            </div>
+            
+            <div className="requests-list">
+              {filteredRequests.map((request, index) => (
+                <RequestRow
+                  key={`${request.collectionUid}-${request.itemUid}-${request.timestamp}-${index}`}
+                  request={request}
+                  isSelected={selectedRequest?.timestamp === request.timestamp && selectedRequest?.itemUid === request.itemUid}
+                  onClick={() => handleRequestClick(request)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default NetworkTab; 

packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js

@@ -0,0 +1,347 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: ${(props) => props.theme.console.contentBg};
+  border-left: 1px solid ${(props) => props.theme.console.border};
+  min-width: 400px;
+  max-width: 600px;
+  width: 40%;
+  overflow: hidden;
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    flex-shrink: 0;
+  }
+
+  .panel-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: ${(props) => props.theme.console.titleColor};
+    font-size: 13px;
+    font-weight: 500;
+
+    .request-time {
+      color: ${(props) => props.theme.console.countColor};
+      font-size: 11px;
+      font-weight: 400;
+    }
+  }
+
+  .close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      color: ${(props) => props.theme.console.buttonHoverColor};
+    }
+  }
+
+  .panel-tabs {
+    display: flex;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    flex-shrink: 0;
+  }
+
+  .tab-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 12px;
+    font-weight: 500;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      color: ${(props) => props.theme.console.buttonHoverColor};
+    }
+
+    &.active {
+      color: ${(props) => props.theme.console.checkboxColor};
+      border-bottom-color: ${(props) => props.theme.console.checkboxColor};
+      background: ${(props) => props.theme.console.contentBg};
+    }
+  }
+
+  .panel-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 16px;
+    min-height: 0;
+    height: 0;
+  }
+
+  .tab-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    min-height: min-content;
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    h4 {
+      margin: 0;
+      font-size: 13px;
+      font-weight: 600;
+      color: ${(props) => props.theme.console.titleColor};
+      padding-bottom: 4px;
+      border-bottom: 1px solid ${(props) => props.theme.console.border};
+    }
+  }
+
+  .info-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    .label {
+      font-size: 11px;
+      font-weight: 600;
+      color: ${(props) => props.theme.console.countColor};
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .value {
+      font-size: 12px;
+      color: ${(props) => props.theme.console.messageColor};
+      font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+      word-break: break-all;
+      padding: 4px 8px;
+      background: ${(props) => props.theme.console.headerBg};
+      border-radius: 4px;
+      border: 1px solid ${(props) => props.theme.console.border};
+    }
+  }
+
+  .headers-table,
+  .timeline-table {
+    overflow: auto;
+    border-radius: 4px;
+    border: 1px solid ${(props) => props.theme.console.border};
+    max-height: 300px;
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+      background: ${(props) => props.theme.console.headerBg};
+
+      thead {
+        background: ${(props) => props.theme.console.dropdownHeaderBg};
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        
+        td {
+          padding: 8px 12px;
+          font-weight: 600;
+          color: ${(props) => props.theme.console.titleColor};
+          text-transform: uppercase;
+          font-size: 11px;
+          letter-spacing: 0.5px;
+          border-bottom: 1px solid ${(props) => props.theme.console.border};
+        }
+      }
+
+      tbody {
+        tr {
+          border-bottom: 1px solid ${(props) => props.theme.console.border};
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          &:nth-child(odd) {
+            background: ${(props) => props.theme.console.contentBg};
+          }
+
+          &:hover {
+            background: ${(props) => props.theme.console.logHoverBg};
+          }
+        }
+
+        td {
+          padding: 8px 12px;
+          vertical-align: top;
+          word-break: break-word;
+        }
+      }
+    }
+  }
+
+  .header-name,
+  .timeline-phase {
+    color: ${(props) => props.theme.console.countColor};
+    font-weight: 600;
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    min-width: 120px;
+  }
+
+  .header-value,
+  .timeline-message {
+    color: ${(props) => props.theme.console.messageColor};
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    word-break: break-all;
+  }
+
+  .timeline-duration {
+    color: ${(props) => props.theme.console.timestampColor};
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    text-align: right;
+    min-width: 80px;
+  }
+
+  .code-block {
+    background: ${(props) => props.theme.console.headerBg};
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 4px;
+    padding: 12px;
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 11px;
+    line-height: 1.4;
+    color: ${(props) => props.theme.console.messageColor};
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 400px;
+    margin: 0;
+  }
+
+  .empty-state {
+    padding: 12px;
+    text-align: center;
+    color: ${(props) => props.theme.console.emptyColor};
+    font-style: italic;
+    font-size: 12px;
+    background: ${(props) => props.theme.console.headerBg};
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 4px;
+  }
+
+  .response-body-container {
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 4px;
+    overflow: hidden;
+    background: ${(props) => props.theme.console.headerBg};
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+
+    .w-full.h-full.relative.flex {
+      height: 100% !important;
+      width: 100% !important;
+      background: ${(props) => props.theme.console.headerBg} !important;
+      display: flex !important;
+      flex-direction: column !important;
+    }
+
+    div[role="tablist"] {
+      background: ${(props) => props.theme.console.dropdownHeaderBg};
+      padding: 8px 12px;
+      border-bottom: 1px solid ${(props) => props.theme.console.border};
+      display: flex !important;
+      gap: 8px !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      min-height: 40px !important;
+      flex-shrink: 0 !important;
+      
+      > div {
+        color: ${(props) => props.theme.console.buttonColor};
+        font-size: 12px !important;
+        padding: 6px 12px !important;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+        cursor: pointer;
+        border: 1px solid ${(props) => props.theme.console.border};
+        background: ${(props) => props.theme.console.contentBg};
+        white-space: nowrap !important;
+        min-width: auto !important;
+        height: auto !important;
+        line-height: 1.2 !important;
+        font-weight: 500 !important;
+
+        &:hover {
+          background: ${(props) => props.theme.console.buttonHoverBg};
+          color: ${(props) => props.theme.console.buttonHoverColor};
+          border-color: ${(props) => props.theme.console.buttonHoverBg};
+        }
+
+        &.active {
+          background: ${(props) => props.theme.console.checkboxColor};
+          color: white;
+          border-color: ${(props) => props.theme.console.checkboxColor};
+        }
+      }
+    }
+    .response-filter {
+      position: absolute !important;
+      bottom: 8px !important;
+      right: 8px !important;
+      left: 8px !important;
+      z-index: 10 !important;
+    }
+  }
+
+  .network-logs-container {
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 4px;
+    overflow: hidden;
+    background: ${(props) => props.theme.console.headerBg};
+    min-height: 200px;
+    max-height: 400px;
+
+    .network-logs {
+      background: ${(props) => props.theme.console.contentBg} !important;
+      color: ${(props) => props.theme.console.messageColor} !important;
+      height: 100% !important;
+      max-height: 400px !important;
+      
+      pre {
+        color: ${(props) => props.theme.console.messageColor} !important;
+        font-size: 11px !important;
+        line-height: 1.4 !important;
+        padding: 12px !important;
+      }
+    }
+  }
+`;
+
+export default StyledWrapper; 

packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js

@@ -0,0 +1,242 @@
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { 
+  IconX,
+  IconFileText,
+  IconArrowRight,
+  IconNetwork
+} from '@tabler/icons';
+import { clearSelectedRequest } from 'providers/ReduxStore/slices/logs';
+import QueryResult from 'components/ResponsePane/QueryResult';
+import Network from 'components/ResponsePane/Timeline/TimelineItem/Network';
+import StyledWrapper from './StyledWrapper';
+import { uuid } from 'utils/common/index';
+
+const RequestTab = ({ request, response }) => {
+  const formatHeaders = (headers) => {
+    if (!headers) return [];
+    if (Array.isArray(headers)) return headers;
+    return Object.entries(headers).map(([key, value]) => ({ name: key, value }));
+  };
+
+  const formatBody = (body) => {
+    if (!body) return 'No body';
+    if (typeof body === 'string') return body;
+    return JSON.stringify(body, null, 2);
+  };
+
+  return (
+    <div className="tab-content">
+      <div className="section">
+        <h4>General</h4>
+        <div className="info-grid">
+          <div className="info-item">
+            <span className="label">Request URL:</span>
+            <span className="value">{request?.url || 'N/A'}</span>
+          </div>
+          <div className="info-item">
+            <span className="label">Request Method:</span>
+            <span className="value">{request?.method || 'GET'}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="section">
+        <h4>Request Headers</h4>
+        {formatHeaders(request?.headers).length > 0 ? (
+          <div className="headers-table">
+            <table>
+              <thead>
+                <tr>
+                  <td>Name</td>
+                  <td>Value</td>
+                </tr>
+              </thead>
+              <tbody>
+                {formatHeaders(request.headers).map((header, index) => (
+                  <tr key={index}>
+                    <td className="header-name">{header.name}</td>
+                    <td className="header-value">{header.value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="empty-state">No headers</div>
+        )}
+      </div>
+
+      {request?.body && (
+        <div className="section">
+          <h4>Request Body</h4>
+          <pre className="code-block">{formatBody(request.body)}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ResponseTab = ({ response, request, collection }) => {
+  const formatHeaders = (headers) => {
+    if (!headers) return [];
+    if (Array.isArray(headers)) return headers;
+    return Object.entries(headers).map(([key, value]) => ({ name: key, value }));
+  };
+
+  return (
+    <div className="tab-content">
+      <div className="section">
+        <h4>Response Headers</h4>
+        {formatHeaders(response?.headers).length > 0 ? (
+          <div className="headers-table">
+            <table>
+              <thead>
+                <tr>
+                  <td>Name</td>
+                  <td>Value</td>
+                </tr>
+              </thead>
+              <tbody>
+                {formatHeaders(response.headers).map((header, index) => (
+                  <tr key={index}>
+                    <td className="header-name">{header.name}</td>
+                    <td className="header-value">{header.value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="empty-state">No headers</div>
+        )}
+      </div>
+
+      <div className="section">
+        <h4>Response Body</h4>
+        <div className="response-body-container">
+          {response?.data || response?.dataBuffer ? (
+            <QueryResult
+              item={{ uid:  uuid()}}
+              collection={collection}
+              data={response.data}
+              dataBuffer={response.dataBuffer}
+              headers={response.headers}
+              error={response.error}
+              disableRunEventListener={true}
+            />
+          ) : (
+            <div className="empty-state">No response data</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const NetworkTab = ({ response }) => {
+  const timeline = response?.timeline || [];
+
+  return (
+    <div className="tab-content">
+      <div className="section">
+        <h4>Network Logs</h4>
+        <div className="network-logs-container">
+          {timeline.length > 0 ? (
+            <Network logs={timeline} />
+          ) : (
+            <div className="empty-state">No network logs available</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const RequestDetailsPanel = () => {
+  const dispatch = useDispatch();
+  const { selectedRequest } = useSelector(state => state.logs);
+  const collections = useSelector(state => state.collections.collections);
+  const [activeTab, setActiveTab] = useState('request');
+
+  if (!selectedRequest) return null;
+
+  const { data } = selectedRequest;
+  const { request, response } = data;
+
+  const collection = collections.find(c => c.uid === selectedRequest.collectionUid);
+
+  const handleClose = () => {
+    dispatch(clearSelectedRequest());
+  };
+
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleString();
+  };
+
+  const getTabContent = () => {
+    switch (activeTab) {
+      case 'request':
+        return <RequestTab request={request} response={response} />;
+      case 'response':
+        return <ResponseTab response={response} request={request} collection={collection} />;
+      case 'network':
+        return <NetworkTab response={response} />;
+      default:
+        return <RequestTab request={request} response={response} />;
+    }
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="panel-header">
+        <div className="panel-title">
+          <IconFileText size={16} strokeWidth={1.5} />
+          <span>Request Details</span>
+          <span className="request-time">({formatTime(selectedRequest.timestamp)})</span>
+        </div>
+        
+        <button 
+          className="close-button"
+          onClick={handleClose}
+          title="Close details panel"
+        >
+          <IconX size={16} strokeWidth={1.5} />
+        </button>
+      </div>
+
+      <div className="panel-tabs">
+        <button 
+          className={`tab-button ${activeTab === 'request' ? 'active' : ''}`}
+          onClick={() => setActiveTab('request')}
+        >
+          <IconArrowRight size={14} strokeWidth={1.5} />
+          Request
+        </button>
+        
+        <button 
+          className={`tab-button ${activeTab === 'response' ? 'active' : ''}`}
+          onClick={() => setActiveTab('response')}
+        >
+          <IconFileText size={14} strokeWidth={1.5} />
+          Response
+        </button>
+        
+        <button 
+          className={`tab-button ${activeTab === 'network' ? 'active' : ''}`}
+          onClick={() => setActiveTab('network')}
+        >
+          <IconNetwork size={14} strokeWidth={1.5} />
+          Network
+        </button>
+      </div>
+
+      <div className="panel-content">
+        {getTabContent()}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default RequestDetailsPanel; 

packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js

@@ -0,0 +1,520 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  background: ${(props) => props.theme.console.bg};
+  border-top: 1px solid ${(props) => props.theme.console.border};
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .console-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .console-tabs {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .console-tab {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 4px 4px 0 0;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      color: ${(props) => props.theme.console.buttonHoverColor};
+    }
+
+    &.active {
+      color: ${(props) => props.theme.console.checkboxColor};
+      border-bottom-color: ${(props) => props.theme.console.checkboxColor};
+      background: ${(props) => props.theme.console.contentBg};
+    }
+  }
+
+  .console-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .console-content {
+    flex: 1;
+    overflow: hidden;
+    background: ${(props) => props.theme.console.contentBg};
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tab-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .tab-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background: ${(props) => props.theme.console.headerBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    flex-shrink: 0;
+  }
+
+  .tab-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: ${(props) => props.theme.console.titleColor};
+    font-size: 13px;
+    font-weight: 500;
+
+    .log-count {
+      color: ${(props) => props.theme.console.countColor};
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+
+  .tab-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .tab-content-area {
+    flex: 1;
+    overflow-y: auto;
+    background: ${(props) => props.theme.console.contentBg};
+    min-height: 0;
+  }
+
+  .network-with-details {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .network-main {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .debug-with-details {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .debug-main {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .filter-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-right: 8px;
+    padding-right: 8px;
+    border-right: 1px solid ${(props) => props.theme.console.border};
+  }
+
+  .action-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .control-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      color: ${(props) => props.theme.console.buttonHoverColor};
+    }
+
+    &.close-button:hover {
+      background: #e81123;
+      color: white;
+    }
+  }
+
+  .filter-dropdown {
+    position: relative;
+  }
+
+  .filter-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    background: transparent;
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 4px;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 12px;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+      color: ${(props) => props.theme.console.buttonHoverColor};
+      border-color: ${(props) => props.theme.console.border};
+    }
+
+    .filter-summary {
+      font-weight: 500;
+      min-width: 24px;
+      text-align: center;
+    }
+  }
+
+  .filter-dropdown-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    min-width: 200px;
+    max-width: 250px;
+    background: ${(props) => props.theme.console.dropdownBg};
+    border: 1px solid ${(props) => props.theme.console.border};
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    overflow: hidden;
+    
+    &.right {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  .filter-dropdown-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: ${(props) => props.theme.console.dropdownHeaderBg};
+    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    font-size: 12px;
+    font-weight: 500;
+    color: ${(props) => props.theme.console.titleColor};
+  }
+
+  .filter-toggle-all {
+    background: transparent;
+    border: none;
+    color: ${(props) => props.theme.console.buttonColor};
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 4px;
+    border-radius: 2px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.console.buttonHoverBg};
+    }
+  }
+
+  .filter-dropdown-options {
+    padding: 4px 0;
+  }
+
+  .filter-option {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.console.optionHoverBg};
+    }
+
+    input[type="checkbox"] {
+      margin: 0 8px 0 0;
+      width: 14px;
+      height: 14px;
+      accent-color: ${(props) => props.theme.console.checkboxColor};
+    }
+  }
+
+  .filter-option-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+  }
+
+  .filter-option-label {
+    color: ${(props) => props.theme.console.optionLabelColor};
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .filter-option-count {
+    color: ${(props) => props.theme.console.optionCountColor};
+    font-size: 11px;
+    font-weight: 400;
+    margin-left: auto;
+  }
+
+  .console-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: ${(props) => props.theme.console.emptyColor};
+    text-align: center;
+    gap: 8px;
+    padding: 40px 20px;
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    span {
+      font-size: 12px;
+      opacity: 0.7;
+    }
+  }
+
+  .logs-container {
+    padding: 8px 0;
+  }
+    
+  .method-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 600;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    min-width: 45px;
+  }
+
+  .log-entry {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 4px 16px;
+    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.4;
+    border-left: 2px solid transparent;
+    transition: background-color 0.1s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.console.logHoverBg};
+    }
+
+    &.error {
+      border-left-color: #f14c4c;
+      
+      .log-level {
+        background: #f14c4c;
+        color: white;
+      }
+      
+      .log-icon {
+        color: #f14c4c;
+      }
+    }
+
+    &.warn {
+      border-left-color: #ffcc02;
+      
+      .log-level {
+        background: #ffcc02;
+        color: #000;
+      }
+      
+      .log-icon {
+        color: #ffcc02;
+      }
+    }
+
+    &.info {
+      border-left-color: #0078d4;
+      
+      .log-level {
+        background: #0078d4;
+        color: white;
+      }
+      
+      .log-icon {
+        color: #0078d4;
+      }
+    }
+
+    &.debug {
+      border-left-color: #9b59b6;
+      
+      .log-level {
+        background: #9b59b6;
+        color: white;
+      }
+      
+      .log-icon {
+        color: #9b59b6;
+      }
+    }
+
+    &.log {
+      border-left-color: #6a6a6a;
+      
+      .log-level {
+        background: #6a6a6a;
+        color: white;
+      }
+      
+      .log-icon {
+        color: #6a6a6a;
+      }
+    }
+  }
+
+  .log-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    min-width: 120px;
+  }
+
+  .log-timestamp {
+    color: ${(props) => props.theme.console.timestampColor};
+    font-size: 11px;
+    font-weight: 400;
+  }
+
+  .log-level {
+    font-size: 9px;
+    font-weight: 600;
+    padding: 2px 4px;
+    border-radius: 2px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .log-icon {
+    flex-shrink: 0;
+  }
+
+  .log-message {
+    color: ${(props) => props.theme.console.messageColor};
+    white-space: pre-wrap;
+    word-break: break-word;
+    flex: 1;
+    
+    .log-object {
+      margin: 4px 0;
+      padding: 8px;
+      background: ${(props) => props.theme.console.headerBg};
+      border-radius: 4px;
+      border: 1px solid ${(props) => props.theme.console.border};
+      
+      .react-json-view {
+        background: transparent !important;
+        
+        .object-key-val {
+          font-size: 12px !important;
+        }
+        
+        .object-key {
+          color: ${(props) => props.theme.console.messageColor} !important;
+          font-weight: 500 !important;
+        }
+        
+        .object-value {
+          color: ${(props) => props.theme.console.messageColor} !important;
+        }
+        
+        .string-value {
+          color: ${(props) => props.theme.colors?.text?.green || (props.theme.console.messageColor)} !important;
+        }
+        
+        .number-value {
+          color: ${(props) => props.theme.colors?.text?.purple || (props.theme.console.messageColor)} !important;
+        }
+        
+        .boolean-value {
+          color: ${(props) => props.theme.colors?.text?.yellow || (props.theme.console.messageColor)} !important;
+        }
+        
+        .null-value {
+          color: ${(props) => props.theme.colors?.text?.danger || (props.theme.console.messageColor)} !important;
+        }
+        
+        .object-size {
+          color: ${(props) => props.theme.console.timestampColor} !important;
+        }
+        
+        .brace, .bracket {
+          color: ${(props) => props.theme.console.messageColor} !important;
+        }
+        
+        .collapsed-icon, .expanded-icon {
+          color: ${(props) => props.theme.console.checkboxColor} !important;
+        }
+        
+        .icon-container {
+          color: ${(props) => props.theme.console.checkboxColor} !important;
+        }
+        
+        .click-to-expand, .click-to-collapse {
+          color: ${(props) => props.theme.console.checkboxColor} !important;
+        }
+      }
+    }
+  }
+`;
+
+export default StyledWrapper; 

packages/bruno-app/src/components/Devtools/Console/index.js

@@ -0,0 +1,531 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import ReactJson from 'react-json-view';
+import { useTheme } from 'providers/Theme';
+import { 
+  IconX, 
+  IconTrash, 
+  IconFilter,
+  IconAlertTriangle, 
+  IconAlertCircle, 
+  IconBug,
+  IconCode,
+  IconChevronDown,
+  IconTerminal2,
+  IconNetwork
+} from '@tabler/icons';
+import { 
+  closeConsole, 
+  clearLogs, 
+  updateFilter, 
+  toggleAllFilters,
+  setActiveTab,
+  clearDebugErrors,
+  updateNetworkFilter,
+  toggleAllNetworkFilters
+} from 'providers/ReduxStore/slices/logs';
+import NetworkTab from './NetworkTab';
+import RequestDetailsPanel from './RequestDetailsPanel';
+// import DebugTab from './DebugTab';
+import ErrorDetailsPanel from './ErrorDetailsPanel';
+import StyledWrapper from './StyledWrapper';
+
+const LogIcon = ({ type }) => {
+  const iconProps = { size: 16, strokeWidth: 1.5 };
+  
+  switch (type) {
+    case 'error':
+      return <IconAlertCircle className="log-icon error" {...iconProps} />;
+    case 'warn':
+      return <IconAlertTriangle className="log-icon warn" {...iconProps} />;
+    case 'info':
+      return <IconAlertTriangle className="log-icon info" {...iconProps} />;
+    // case 'debug':
+    //   return <IconBug className="log-icon debug" {...iconProps} />;
+    default:
+      return <IconCode className="log-icon log" {...iconProps} />;
+  }
+};
+
+const LogTimestamp = ({ timestamp }) => {
+  const date = new Date(timestamp);
+  const time = date.toLocaleTimeString('en-US', { 
+    hour12: false, 
+    hour: '2-digit', 
+    minute: '2-digit', 
+    second: '2-digit',
+    fractionalSecondDigits: 3
+  });
+  
+  return <span className="log-timestamp">{time}</span>;
+};
+
+const LogMessage = ({ message, args }) => {
+  const { displayedTheme } = useTheme();
+  
+  const formatMessage = (msg, originalArgs) => {
+    if (originalArgs && originalArgs.length > 0) {
+      return originalArgs.map((arg, index) => {
+        if (typeof arg === 'object' && arg !== null) {
+          return (
+            <div key={index} className="log-object">
+              <ReactJson
+                src={arg}
+                theme={displayedTheme === 'light' ? 'rjv-default' : 'monokai'}
+                iconStyle="triangle"
+                indentWidth={2}
+                collapsed={1}
+                displayDataTypes={false}
+                displayObjectSize={false}
+                enableClipboard={false}
+                name={false}
+                style={{
+                  backgroundColor: 'transparent',
+                  fontSize: '12px',
+                  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+                }}
+              />
+            </div>
+          );
+        }
+        return String(arg);
+      });
+    }
+    return msg;
+  };
+
+  const formattedMessage = formatMessage(message, args);
+  
+  return (
+    <span className="log-message">
+      {Array.isArray(formattedMessage) ? formattedMessage.map((item, index) => (
+        <span key={index}>{item} </span>
+      )) : formattedMessage}
+    </span>
+  );
+};
+
+const FilterDropdown = ({ filters, logCounts, onFilterToggle, onToggleAll }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const allFiltersEnabled = Object.values(filters).every(f => f);
+  const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className="filter-dropdown" ref={dropdownRef}>
+      <button 
+        className="filter-dropdown-trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        title="Filter logs by type"
+      >
+        <IconFilter size={16} strokeWidth={1.5} />
+        <span className="filter-summary">
+          {activeFilters.length === Object.keys(filters).length ? 'All' : `${activeFilters.length}/${Object.keys(filters).length}`}
+        </span>
+        <IconChevronDown size={14} strokeWidth={1.5} />
+      </button>
+      
+      {isOpen && (
+        <div className={`filter-dropdown-menu right`}>
+          <div className="filter-dropdown-header">
+            <span>Filter by Type</span>
+            <button 
+              className="filter-toggle-all"
+              onClick={() => onToggleAll(!allFiltersEnabled)}
+            >
+              {allFiltersEnabled ? 'Hide All' : 'Show All'}
+            </button>
+          </div>
+          
+          <div className="filter-dropdown-options">
+            {Object.entries(filters).map(([filterType, enabled]) => (
+              <label key={filterType} className="filter-option">
+                <input
+                  type="checkbox"
+                  checked={enabled}
+                  onChange={(e) => onFilterToggle(filterType, e.target.checked)}
+                />
+                <div className="filter-option-content">
+                  <LogIcon type={filterType} />
+                  <span className="filter-option-label">{filterType}</span>
+                  <span className="filter-option-count">({logCounts[filterType] || 0})</span>
+                </div>
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggleAll }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const allFiltersEnabled = Object.values(filters).every(f => f);
+  const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
+
+  const getMethodColor = (method) => {
+    switch (method?.toUpperCase()) {
+      case 'GET': return '#10b981';
+      case 'POST': return '#8b5cf6';
+      case 'PUT': return '#f59e0b';
+      case 'DELETE': return '#ef4444';
+      case 'PATCH': return '#06b6d4';
+      case 'HEAD': return '#6b7280';
+      case 'OPTIONS': return '#84cc16';
+      default: return '#6b7280';
+    }
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className="filter-dropdown" ref={dropdownRef}>
+      <button 
+        className="filter-dropdown-trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        title="Filter requests by method"
+      >
+        <IconFilter size={16} strokeWidth={1.5} />
+        <span className="filter-summary">
+          {activeFilters.length === Object.keys(filters).length ? 'All' : `${activeFilters.length}/${Object.keys(filters).length}`}
+        </span>
+        <IconChevronDown size={14} strokeWidth={1.5} />
+      </button>
+      
+      {isOpen && (
+        <div className={`filter-dropdown-menu right`}>
+          <div className="filter-dropdown-header">
+            <span>Filter by Method</span>
+            <button 
+              className="filter-toggle-all"
+              onClick={() => onToggleAll(!allFiltersEnabled)}
+            >
+              {allFiltersEnabled ? 'Hide All' : 'Show All'}
+            </button>
+          </div>
+          
+          <div className="filter-dropdown-options">
+            {Object.entries(filters).map(([method, enabled]) => (
+              <label key={method} className="filter-option">
+                <input
+                  type="checkbox"
+                  checked={enabled}
+                  onChange={(e) => onFilterToggle(method, e.target.checked)}
+                />
+                <div className="filter-option-content">
+                  <span className="method-badge" style={{ backgroundColor: getMethodColor(method) }}>
+                    {method}
+                  </span>
+                  <span className="filter-option-label">{method}</span>
+                  <span className="filter-option-count">({requestCounts[method] || 0})</span>
+                </div>
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ConsoleTab = ({ logs, filters, logCounts, onFilterToggle, onToggleAll, onClearLogs }) => {
+  const logsEndRef = useRef(null);
+  const prevLogsCountRef = useRef(0);
+  
+  useEffect(() => {
+    // Only scroll when new logs are added, not when switching tabs
+    if (logsEndRef.current && logs.length > prevLogsCountRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: 'auto' });
+    }
+    prevLogsCountRef.current = logs.length;
+  }, [logs]);
+
+  const filteredLogs = logs.filter(log => filters[log.type]);
+
+  return (
+    <div className="tab-content">
+      <div className="tab-content-area">
+        {filteredLogs.length === 0 ? (
+          <div className="console-empty">
+            <IconTerminal2 size={48} strokeWidth={1} />
+            <p>No logs to display</p>
+            <span>Logs will appear here as your application runs</span>
+          </div>
+        ) : (
+          <div className="logs-container">
+            {filteredLogs.map((log) => (
+              <div key={log.id} className={`log-entry ${log.type}`}>
+                <div className="log-meta">
+                  <LogTimestamp timestamp={log.timestamp} />
+                  <LogIcon type={log.type} />
+                </div>
+                <LogMessage message={log.message} args={log.args} />
+              </div>
+            ))}
+            <div ref={logsEndRef} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const Console = () => {
+  const dispatch = useDispatch();
+  const { logs, filters, activeTab, selectedRequest, selectedError, networkFilters, debugErrors } = useSelector(state => state.logs);
+  const collections = useSelector(state => state.collections.collections);
+  const consoleRef = useRef(null);
+
+  const logCounts = logs.reduce((counts, log) => {
+    counts[log.type] = (counts[log.type] || 0) + 1;
+    return counts;
+  }, {});
+
+  const allRequests = React.useMemo(() => {
+    const requests = [];
+    
+    collections.forEach(collection => {
+      if (collection.timeline) {
+        collection.timeline
+          .filter(entry => entry.type === 'request')
+          .forEach(entry => {
+            requests.push({
+              ...entry,
+              collectionName: collection.name,
+              collectionUid: collection.uid
+            });
+          });
+      }
+    });
+    
+    return requests.sort((a, b) => a.timestamp - b.timestamp);
+  }, [collections]);
+
+  const filteredLogs = logs.filter(log => filters[log.type]);
+  const filteredRequests = allRequests.filter(request => {
+    const method = request.data?.request?.method?.toUpperCase() || 'GET';
+    return networkFilters[method];
+  });
+
+  const requestCounts = allRequests.reduce((counts, request) => {
+    const method = request.data?.request?.method?.toUpperCase() || 'GET';
+    counts[method] = (counts[method] || 0) + 1;
+    return counts;
+  }, {});
+
+  const handleFilterToggle = (filterType, enabled) => {
+    dispatch(updateFilter({ filterType, enabled }));
+  };
+
+  const handleNetworkFilterToggle = (method, enabled) => {
+    dispatch(updateNetworkFilter({ method, enabled }));
+  };
+
+  const handleClearLogs = () => {
+    dispatch(clearLogs());
+  };
+
+  const handleClearDebugErrors = () => {
+    dispatch(clearDebugErrors());
+  };
+
+  const handlecloseConsole = () => {
+    dispatch(closeConsole());
+  };
+
+  const handleToggleAllFilters = (enabled) => {
+    dispatch(toggleAllFilters(enabled));
+  };
+
+  const handleToggleAllNetworkFilters = (enabled) => {
+    dispatch(toggleAllNetworkFilters(enabled));
+  };
+
+  const handleTabChange = (tab) => {
+    dispatch(setActiveTab(tab));
+  };
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'console':
+        return (
+          <ConsoleTab
+            logs={logs}
+            filters={filters}
+            logCounts={logCounts}
+            onFilterToggle={handleFilterToggle}
+            onToggleAll={handleToggleAllFilters}
+            onClearLogs={handleClearLogs}
+          />
+        );
+      case 'network':
+        return <NetworkTab />;
+      // case 'debug':
+      //   return <DebugTab />;
+      default:
+        return (
+          <ConsoleTab
+            logs={logs}
+            filters={filters}
+            logCounts={logCounts}
+            onFilterToggle={handleFilterToggle}
+            onToggleAll={handleToggleAllFilters}
+            onClearLogs={handleClearLogs}
+          />
+        );
+    }
+  };
+
+  const renderTabControls = () => {
+    switch (activeTab) {
+      case 'console':
+        return (
+          <div className="tab-controls">
+            <div className="filter-controls">
+              <FilterDropdown
+                filters={filters}
+                logCounts={logCounts}
+                onFilterToggle={handleFilterToggle}
+                onToggleAll={handleToggleAllFilters}
+              />
+            </div>
+            <div className="action-controls">
+              <button 
+                className="control-button"
+                onClick={handleClearLogs}
+                title="Clear all logs"
+              >
+                <IconTrash size={16} strokeWidth={1.5} />
+              </button>
+            </div>
+          </div>
+        );
+      case 'network':
+        return (
+          <div className="tab-controls">
+            <div className="filter-controls">
+              <NetworkFilterDropdown
+                filters={networkFilters}
+                requestCounts={requestCounts}
+                onFilterToggle={handleNetworkFilterToggle}
+                onToggleAll={handleToggleAllNetworkFilters}
+              />
+            </div>
+          </div>
+        );
+      // case 'debug':
+      //   return (
+      //     <div className="tab-controls">
+      //       <div className="action-controls">
+      //         {debugErrors.length > 0 && (
+      //           <button 
+      //             className="control-button"
+      //             onClick={handleClearDebugErrors}
+      //             title="Clear all errors"
+      //           >
+      //             <IconTrash size={16} strokeWidth={1.5} />
+      //           </button>
+      //         )}
+      //       </div>
+      //     </div>
+      //   );
+      default:
+        return null;
+    }
+  };
+
+
+
+  return (
+    <StyledWrapper ref={consoleRef}>
+      <div 
+        className="console-resize-handle"
+      />
+      
+      <div className="console-header">
+        <div className="console-tabs">
+          <button 
+            className={`console-tab ${activeTab === 'console' ? 'active' : ''}`}
+            onClick={() => handleTabChange('console')}
+          >
+            <IconTerminal2 size={16} strokeWidth={1.5} />
+            <span>Console</span>
+          </button>
+          
+          <button 
+            className={`console-tab ${activeTab === 'network' ? 'active' : ''}`}
+            onClick={() => handleTabChange('network')}
+          >
+            <IconNetwork size={16} strokeWidth={1.5} />
+            <span>Network</span>
+          </button>
+          
+          {/* <button 
+            className={`console-tab ${activeTab === 'debug' ? 'active' : ''}`}
+            onClick={() => handleTabChange('debug')}
+          >
+            <IconBug size={16} strokeWidth={1.5} />
+            <span>Debug</span>
+          </button> */}
+        </div>
+
+        <div className="console-controls">
+          {renderTabControls()}
+          <button 
+            className="control-button close-button"
+            onClick={handlecloseConsole}
+            title="Close console"
+          >
+            <IconX size={16} strokeWidth={1.5} />
+          </button>
+        </div>
+      </div>
+
+      <div className="console-content">
+        {activeTab === 'network' && selectedRequest ? (
+          <div className="network-with-details">
+            <div className="network-main">
+              {renderTabContent()}
+            </div>
+            <RequestDetailsPanel />
+          </div>
+        ) : activeTab === 'debug' && selectedError ? (
+          <div className="debug-with-details">
+            <div className="debug-main">
+              {renderTabContent()}
+            </div>
+            <ErrorDetailsPanel />
+          </div>
+        ) : (
+          renderTabContent()
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Console; 

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

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import Console from './Console';
+
+const MIN_DEVTOOLS_HEIGHT = 150;
+const MAX_DEVTOOLS_HEIGHT = window.innerHeight * 0.7;
+const DEFAULT_DEVTOOLS_HEIGHT = 300;
+
+const Devtools = ({ mainSectionRef }) => {
+  const isDevtoolsOpen = useSelector((state) => state.logs.isConsoleOpen);
+  const [devtoolsHeight, setDevtoolsHeight] = useState(DEFAULT_DEVTOOLS_HEIGHT);
+  const [isResizingDevtools, setIsResizingDevtools] = useState(false);
+
+  const handleDevtoolsResizeStart = useCallback((e) => {
+    e.preventDefault();
+    setIsResizingDevtools(true);
+  }, []);
+
+  const handleDevtoolsResize = useCallback((e) => {
+    if (!isResizingDevtools || !mainSectionRef.current) return;
+    
+    const windowHeight = window.innerHeight;
+    const statusBarHeight = 22;
+    const mouseY = e.clientY;
+    
+    // Calculate new devtools height - expanding upward from bottom
+    const newHeight = windowHeight - mouseY - statusBarHeight;
+    const clampedHeight = Math.min(MAX_DEVTOOLS_HEIGHT, Math.max(MIN_DEVTOOLS_HEIGHT, newHeight));
+    setDevtoolsHeight(clampedHeight);
+
+    // Update main section height
+    if (mainSectionRef.current) {
+      mainSectionRef.current.style.height = `calc(100vh - 22px - ${clampedHeight}px)`;
+    }
+  }, [isResizingDevtools, mainSectionRef]);
+
+  const handleDevtoolsResizeEnd = useCallback(() => {
+    setIsResizingDevtools(false);
+  }, []);
+
+  useEffect(() => {
+    if (isResizingDevtools) {
+      document.addEventListener('mousemove', handleDevtoolsResize);
+      document.addEventListener('mouseup', handleDevtoolsResizeEnd);
+      document.body.style.userSelect = 'none';
+      
+      return () => {
+        document.removeEventListener('mousemove', handleDevtoolsResize);
+        document.removeEventListener('mouseup', handleDevtoolsResizeEnd);
+        document.body.style.userSelect = '';
+      };
+    }
+  }, [isResizingDevtools, handleDevtoolsResize, handleDevtoolsResizeEnd]);
+
+  // Set initial height
+  useEffect(() => {
+    if (mainSectionRef.current && isDevtoolsOpen) {
+      mainSectionRef.current.style.height = `calc(100vh - 22px - ${devtoolsHeight}px)`;
+    }
+  }, [isDevtoolsOpen, devtoolsHeight, mainSectionRef]);
+
+  if (!isDevtoolsOpen) {
+    return null;
+  }
+
+  return (
+    <>
+      <div 
+        onMouseDown={handleDevtoolsResizeStart}
+        style={{
+          height: '4px',
+          cursor: 'row-resize',
+          backgroundColor: isResizingDevtools ? '#0078d4' : 'transparent',
+          transition: 'background-color 0.2s ease',
+          zIndex: 20,
+          position: 'relative'
+        }}
+        onMouseEnter={(e) => e.target.style.backgroundColor = '#0078d4'}
+        onMouseLeave={(e) => e.target.style.backgroundColor = isResizingDevtools ? '#0078d4' : 'transparent'}
+      />
+      <div style={{ height: `${devtoolsHeight}px`, overflow: 'hidden', position: 'relative' }}>
+        <Console />
+      </div>
+    </>
+  );
+};
+
+export default Devtools; 

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

@@ -16,6 +16,7 @@ const Wrapper = styled.div`
     border-radius: 3px;
     max-height: 90vh;
     overflow-y: auto;
+    max-width: unset !important;
 
     .tippy-content {
       padding-left: 0;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';
 
-const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
+const Dropdown = ({ icon, children, onCreate, placement, transparent, ...props }) => {
   return (
     <StyledWrapper className="dropdown" transparent={transparent}>
       <Tippy
@@ -14,6 +14,7 @@ const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
         interactive={true}
         trigger="click"
         appendTo="parent"
+        {...props}
       >
         {icon}
       </Tippy>

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/constants.js

@@ -0,0 +1,11 @@
+const sensitiveFields = [
+  'request.auth.oauth2.clientSecret',
+  'request.auth.basic.password',
+  'request.auth.digest.password',
+  'request.auth.wsse.password',
+  'request.auth.ntlm.password',
+  'request.auth.awsv4.secretAccessKey',
+  'request.auth.bearer.token'
+];
+
+export { sensitiveFields };

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -1,5 +1,6 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
+import { get } from 'lodash';
 import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,7 +14,9 @@ import { variableNameRegex } from 'utils/common/regex';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';
-import { getGlobalEnvironmentVariables } from 'utils/collections';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { getGlobalEnvironmentVariables, flattenItems, isItemARequest } from 'utils/collections';
+import { sensitiveFields } from './constants';
 
 const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
   const dispatch = useDispatch();
@@ -26,6 +29,50 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
   const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
   _collection.globalEnvironmentVariables = globalEnvironmentVariables;
 
+  const nonSecretSensitiveVarUsageMap = useMemo(() => {
+    const result = {};
+    if (!collection || !environment?.variables) {
+      return result;
+    }
+    const nonSecretVars = environment.variables.filter((v) => v.enabled && !v.secret && v.name);
+    if (!nonSecretVars.length) {
+      return result;
+    }
+    const varNames = new Set(nonSecretVars.map((v) => v.name));
+    
+    const checkSensitiveField = (obj, fieldPath) => {
+      const value = get(obj, fieldPath);
+      if (typeof value === 'string') {
+        varNames.forEach((varName) => {
+          if (new RegExp(`\{\{\s*${varName}\s*\}\}`).test(value)) {
+            result[varName] = true;
+          }
+        });
+      }
+    };
+
+    const getObjectToProcess = (item) => {
+      if (isItemARequest(item)) {
+        return item.draft || item;
+      }
+      return item.root;
+    };
+
+    const collectionObj = getObjectToProcess(collection);
+    sensitiveFields.forEach((fieldPath) => {
+      checkSensitiveField(collectionObj, fieldPath);
+    });
+    
+    const items = flattenItems(collection.items || []);
+    items.forEach((item) => {
+      const objToProcess = getObjectToProcess(item);
+      sensitiveFields.forEach((fieldPath) => {
+        checkSensitiveField(objToProcess, fieldPath);
+      });
+    });
+    return result;
+  }, [collection, environment]);
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: environment.variables || [],
@@ -61,6 +108,8 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
     }
   });
 
+  const hasSensitiveUsage = (name) => !!nonSecretSensitiveVarUsageMap[name];
+
   // Effect to track modifications.
   React.useEffect(() => {
     setIsModified(formik.dirty);
@@ -163,7 +212,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                     <ErrorMessage name={`${index}.name`} />
                   </div>
                 </td>
-                <td className="flex flex-row flex-nowrap">
+                <td className="flex flex-row flex-nowrap items-center">
                   <div className="overflow-hidden grow w-full relative">
                     <SingleLineEditor
                       theme={storedTheme}
@@ -174,6 +223,12 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                       onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
                     />
                   </div>
+                  {!variable.secret && hasSensitiveUsage(variable.name) && (
+                    <SensitiveFieldWarning
+                      fieldName={variable.name}
+                      warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
+                    />
+                  )}
                 </td>
                 <td className="text-center">
                   <input

packages/bruno-app/src/components/Environments/EnvironmentSettings/ManageSecrets/index.js

@@ -9,7 +9,7 @@ const ManageSecrets = ({ onClose }) => {
         <div>
           <p>In any collection, there are secrets that need to be managed.</p>
           <p className="mt-2">These secrets can be anything such as API keys, passwords, or tokens.</p>
-          <p className="mt-4">Bruno offers two approaches to manage secrets in collections.</p>
+          <p className="mt-4">Bruno offers three approaches to manage secrets in collections.</p>
           <p className="mt-2">
             Read more about it in our{' '}
             <a

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

@@ -0,0 +1,147 @@
+import React, { Component, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addDebugError } from 'providers/ReduxStore/slices/logs';
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    if (this.props.onError) {
+      this.props.onError({
+        message: error.message,
+        stack: error.stack,
+        error: error,
+        timestamp: new Date().toISOString()
+      });
+    }
+
+    setTimeout(() => {
+      this.setState({ hasError: false });
+    }, 100);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+const serializeArgs = (args) => {
+  return args.map(arg => {
+    try {
+      if (arg === null) return 'null';
+      if (arg === undefined) return 'undefined';
+      if (typeof arg === 'string' || typeof arg === 'number' || typeof arg === 'boolean') {
+        return arg;
+      }
+      if (arg instanceof Error) {
+        return {
+          __type: 'Error',
+          name: arg.name,
+          message: arg.message,
+          stack: arg.stack
+        };
+      }
+      if (typeof arg === 'object') {
+        try {
+          return JSON.parse(JSON.stringify(arg));
+        } catch {
+          return String(arg);
+        }
+      }
+      return String(arg);
+    } catch (e) {
+      return '[Unserializable]';
+    }
+  });
+};
+
+// Helper function to extract file and line info from stack trace
+const extractFileInfo = (stack) => {
+  if (!stack) return { filename: null, lineno: null, colno: null };
+  
+  try {
+    const lines = stack.split('\n');
+    for (let line of lines) {
+      if (line.includes('ErrorCapture') || line.trim() === 'Error') continue;
+      
+      const match = line.match(/(?:at\s+.*?\s+)?\(?([^)]+):(\d+):(\d+)\)?/);
+      if (match) {
+        return {
+          filename: match[1],
+          lineno: parseInt(match[2]),
+          colno: parseInt(match[3])
+        };
+      }
+    }
+  } catch (e) {
+    // Ignore parsing errors
+  }
+  
+  return { filename: null, lineno: null, colno: null };
+};
+
+const useGlobalErrorCapture = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const originalConsoleError = console.error;
+
+    console.error = (...args) => {
+      const currentStack = new Error().stack;
+      
+      originalConsoleError.apply(console, args);
+
+      if (currentStack && currentStack.includes('useIpcEvents.js')) {
+        return;
+      }
+
+      const errorMessage = args.join(' ');
+      if (errorMessage.includes('removeConsoleLogListener')) {
+        return;
+      }
+
+      const { filename, lineno, colno } = extractFileInfo(currentStack);
+
+      const serializedArgs = serializeArgs(args);
+
+      dispatch(addDebugError({
+        message: errorMessage,
+        stack: currentStack,
+        filename: filename,
+        lineno: lineno,
+        colno: colno,
+        args: serializedArgs,
+        timestamp: new Date().toISOString()
+      }));
+    };
+
+    return () => {
+      console.error = originalConsoleError;
+    };
+  }, [dispatch]);
+};
+
+const ErrorCapture = ({ children }) => {
+  const dispatch = useDispatch();
+  
+  useGlobalErrorCapture();
+
+  const handleReactError = (errorData) => {
+    dispatch(addDebugError(errorData));
+  };
+
+  return (
+    <ErrorBoundary onError={handleReactError}>
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default ErrorCapture; 

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

@@ -7,6 +7,7 @@ import { updateFolderAuth } from 'providers/ReduxStore/slices/collections';
 import { useDispatch } from 'react-redux';
 import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/PasswordCredentials/index';
 import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
+import OAuth2Implicit from 'components/RequestPane/Auth/OAuth2/Implicit/index';
 import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
 import AuthMode from '../AuthMode';
 import BasicAuth from 'components/RequestPane/Auth/BasicAuth';
@@ -35,6 +36,8 @@ const GrantTypeComponentMap = ({ collection, folder }) => {
       return <OAuth2AuthorizationCode save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
     case 'client_credentials':
       return <OAuth2ClientCredentials save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
+    case 'implicit':
+      return <OAuth2Implicit save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
     default:
       return <div>TBD</div>;
   }
@@ -74,7 +77,7 @@ const Auth = ({ collection, folder }) => {
       const parentFolder = folderTreePath[i];
       if (parentFolder.type === 'folder') {
         const folderAuth = get(parentFolder, 'root.request.auth');
-        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'none' && folderAuth.mode !== 'inherit') {
+        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'inherit') {
           effectiveSource = {
             type: 'folder',
             name: parentFolder.name,

packages/bruno-app/src/components/FolderSettings/Headers/index.js

@@ -1,21 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { addFolderHeader, updateFolderHeader, deleteFolderHeader } from 'providers/ReduxStore/slices/collections';
+import { addFolderHeader, updateFolderHeader, deleteFolderHeader, setFolderHeaders } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
+import BulkEditor from 'components/BulkEditor/index';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const headers = get(folder, 'root.request.headers', []);
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkHeadersChange = (newHeaders) => {
+    dispatch(setFolderHeaders({ collectionUid: collection.uid, folderUid: folder.uid, headers: newHeaders }));
+  };
 
   const addHeader = () => {
     dispatch(
@@ -62,6 +72,22 @@ const Headers = ({ collection, folder }) => {
     );
   };
 
+  if (isBulkEditMode) {
+    return (
+      <StyledWrapper className="w-full">
+        <div className="text-xs mb-4 text-muted">
+          Request headers that will be sent with every request inside this folder.
+        </div>
+        <BulkEditor
+          params={headers}
+          onChange={handleBulkHeadersChange}
+          onToggle={toggleBulkEditMode}
+          onSave={handleSave}
+        />
+      </StyledWrapper>
+    );
+  }
+
   return (
     <StyledWrapper className="w-full">
       <div className="text-xs mb-4 text-muted">
@@ -141,9 +167,14 @@ const Headers = ({ collection, folder }) => {
             : null}
         </tbody>
       </table>
-      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
-        + Add Header
-      </button>
+      <div className="flex justify-between mt-2">
+        <button className="btn-add-header text-link pr-2 py-3 select-none" onClick={addHeader}>
+          + Add Header
+        </button>
+        <button className="text-link select-none" onClick={toggleBulkEditMode}>
+          Bulk Edit
+        </button>
+      </div>
 
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

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

@@ -9,17 +9,9 @@ import StyledWrapper from './StyledWrapper';
 import Vars from './Vars';
 import Documentation from './Documentation';
 import Auth from './Auth';
-import DotIcon from 'components/Icons/Dot';
+import StatusDot from 'components/StatusDot';
 import get from 'lodash/get';
 
-const ContentIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium">
-      <DotIcon width="10"></DotIcon>
-    </sup>
-  );
-};
-
 const FolderSettings = ({ collection, folder }) => {
   const dispatch = useDispatch();
   let tab = 'headers';
@@ -82,7 +74,7 @@ const FolderSettings = ({ collection, folder }) => {
   };
 
   return (
-    <StyledWrapper className="flex flex-col h-full">
+    <StyledWrapper className="flex flex-col h-full overflow-auto">
       <div className="flex flex-col h-full relative px-4 py-4">
         <div className="flex flex-wrap items-center tabs" role="tablist">
           <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
@@ -91,11 +83,11 @@ const FolderSettings = ({ collection, folder }) => {
           </div>
           <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
             Script
-            {hasScripts && <ContentIndicator />}
+            {hasScripts && <StatusDot />}
           </div>
           <div className={getTabClassname('test')} role="tab" onClick={() => setTab('test')}>
             Test
-            {hasTests && <ContentIndicator />}
+            {hasTests && <StatusDot />}
           </div>
           <div className={getTabClassname('vars')} role="tab" onClick={() => setTab('vars')}>
             Vars
@@ -103,13 +95,13 @@ const FolderSettings = ({ collection, folder }) => {
           </div>
           <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
             Auth
-            {hasAuth && <ContentIndicator />}
+            {hasAuth && <StatusDot />}
           </div>
           <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
             Docs
           </div>
         </div>
-        <section className={`flex mt-4 h-full`}>{getTabPanel(tab)}</section>
+        <section className={`flex mt-4 h-full overflow-auto`}>{getTabPanel(tab)}</section>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/Icons/Grpc/index.js

@@ -0,0 +1,93 @@
+import React from 'react';
+
+// UNARY - Single request, single response (Blue)
+export const IconGrpcUnary = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    {/* Request arrow (top) - right */}
+    <path d="M3 8h18" stroke="#3B82F6" strokeWidth={strokeWidth} />
+    <path d="M18 5l3 3l-3 3" stroke="#3B82F6" strokeWidth={strokeWidth} />
+    {/* Response arrow (bottom) - left */}
+    <path d="M21 16h-18" stroke="#3B82F6" strokeWidth={strokeWidth} />
+    <path d="M6 13l-3 3l3 3" stroke="#3B82F6" strokeWidth={strokeWidth} />
+  </svg>
+);
+
+// CLIENT_STREAMING - Streaming request, single response (Purple)
+export const IconGrpcClientStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    {/* Request arrow (top) - right with double heads */}
+    <path d="M3 8h18" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+    <path d="M18 5l3 3l-3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+    <path d="M14 5l3 3l-3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+    {/* Response arrow (bottom) - left */}
+    <path d="M21 16h-18" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+    <path d="M6 13l-3 3l3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
+  </svg>
+);
+
+// SERVER_STREAMING - Single request, streaming response (Green)
+export const IconGrpcServerStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    {/* Request arrow (top) - right */}
+    <path d="M3 8h18" stroke="#10B981" strokeWidth={strokeWidth} />
+    <path d="M18 5l3 3l-3 3" stroke="#10B981" strokeWidth={strokeWidth} />
+    {/* Response arrow (bottom) - left with double heads */}
+    <path d="M21 16h-18" stroke="#10B981" strokeWidth={strokeWidth} />
+    <path d="M6 13l-3 3l3 3" stroke="#10B981" strokeWidth={strokeWidth} />
+    <path d="M10 13l-3 3l3 3" stroke="#10B981" strokeWidth={strokeWidth} />
+  </svg>
+);
+
+// BIDI_STREAMING - Streaming request, streaming response (Orange)
+export const IconGrpcBidiStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={size} 
+    height={size} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    {/* Request arrow (top) - right with double heads */}
+    <path d="M3 8h18" stroke="#F97316" strokeWidth={strokeWidth} />
+    <path d="M18 5l3 3l-3 3" stroke="#F97316" strokeWidth={strokeWidth} />
+    <path d="M14 5l3 3l-3 3" stroke="#F97316" strokeWidth={strokeWidth} />
+    {/* Response arrow (bottom) - left with double heads */}
+    <path d="M21 16h-18" stroke="#F97316" strokeWidth={strokeWidth} />
+    <path d="M6 13l-3 3l3 3" stroke="#F97316" strokeWidth={strokeWidth} />
+    <path d="M10 13l-3 3l3 3" stroke="#F97316" strokeWidth={strokeWidth} />
+  </svg>
+); 

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

@@ -74,18 +74,20 @@ class MultiLineEditor extends Component {
         'Shift-Tab': false
       }
     });
+
+
+    const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
+    const getAnywordAutocompleteHints = () => this.props.autocomplete || [];
     
     // Setup AutoComplete Helper
     const autoCompleteOptions = {
       showHintsFor: ['variables'],
-      anywordAutocompleteHints: this.props.autocomplete
+      getAllVariables: getAllVariablesHandler,
+      getAnywordAutocompleteHints
     };
 
-    const getVariables = () => getAllVariables(this.props.collection, this.props.item);
-
     this.brunoAutoCompleteCleanup = setupAutoComplete(
       this.editor,
-      getVariables,
       autoCompleteOptions
     );
     

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

@@ -2,6 +2,7 @@ import { IconBell } from '@tabler/icons';
 import { useState } from 'react';
 import StyledWrapper from './StyleWrapper';
 import Modal from 'components/Modal/index';
+import Portal from 'components/Portal';
 import { useEffect } from 'react';
 import { useApp } from 'providers/App';
 import {
@@ -109,7 +110,7 @@ const Notifications = () => {
       >
         <ToolHint text="Notifications" toolhintId="Notifications" offset={8}>
           <IconBell
-            size={18}
+            size={16}
             aria-hidden
             strokeWidth={1.5}
             className={`mr-2 ${unreadNotifications?.length > 0 ? 'bell' : ''}`}
@@ -121,6 +122,7 @@ const Notifications = () => {
       </a>
 
       {showNotificationsModal && (
+        <Portal>
         <Modal
           size="lg"
           title="Notifications"
@@ -199,10 +201,11 @@ const Notifications = () => {
                 </div>
               </div>
             ) : (
-              <div className="opacity-50 italic text-xs p-12 flex justify-center">No Notifications</div>
+              <div className="opacity-50 italic text-xs p-12 flex justify-center">You are all caught up!</div>
             )}
           </div>
         </Modal>
+        </Portal>
       )}
     </StyledWrapper>
   );

packages/bruno-app/src/components/Preferences/Beta/StyledWrapper.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .bruno-form {
+    padding: 1rem;
+  }
+
+  .submit {
+    margin-top: 1rem;
+  }
+
+  .beta-feature-item {
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-gray-200);
+    background-color: var(--color-gray-50);
+    margin-bottom: 1rem;
+  }
+
+  .beta-feature-item:hover {
+    background-color: var(--color-gray-100);
+  }
+
+  .beta-feature-description {
+    margin-top: 0.25rem;
+  }
+
+  .no-features-message {
+    text-align: center;
+    padding: 2rem;
+    color: var(--color-gray-500);
+    font-style: italic;
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Preferences/Beta/index.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { useFormik } from 'formik';
+import { useSelector, useDispatch } from 'react-redux';
+import { savePreferences } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from './StyledWrapper';
+import * as Yup from 'yup';
+import toast from 'react-hot-toast';
+import { IconFlask } from '@tabler/icons';
+import get from 'lodash/get';
+
+// Beta features configuration
+const BETA_FEATURES = [
+  {
+    id: 'grpc',
+    label: 'gRPC Support',
+    description: 'Enable gRPC request support for making gRPC calls to services'
+  }
+];
+
+const Beta = ({ close }) => {
+  const preferences = useSelector((state) => state.app.preferences);
+  const dispatch = useDispatch();
+
+  // Generate validation schema dynamically from beta features
+  const generateValidationSchema = () => {
+    const schemaShape = {};
+    BETA_FEATURES.forEach((feature) => {
+      schemaShape[feature.id] = Yup.boolean();
+    });
+    return Yup.object().shape(schemaShape);
+  };
+
+  // Generate initial values dynamically from beta features
+  const generateInitialValues = () => {
+    const initialValues = {};
+    BETA_FEATURES.forEach((feature) => {
+      initialValues[feature.id] = get(preferences, `beta.${feature.id}`, false);
+    });
+    return initialValues;
+  };
+
+  const betaSchema = generateValidationSchema();
+
+  const formik = useFormik({
+    initialValues: generateInitialValues(),
+    validationSchema: betaSchema,
+    onSubmit: async (values) => {
+      try {
+        const newPreferences = await betaSchema.validate(values, { abortEarly: true });
+        handleSave(newPreferences);
+      } catch (error) {
+        console.error('Beta preferences validation error:', error.message);
+      }
+    }
+  });
+
+  const handleSave = (newBetaPreferences) => {
+    dispatch(
+      savePreferences({
+        ...preferences,
+        beta: newBetaPreferences
+      })
+    )
+      .then(() => {
+        toast.success('Beta preferences saved successfully');
+        close();
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to update beta preferences'));
+  };
+
+  const hasAnyBetaFeatures = Object.values(formik.values).length > 0;
+
+  return (
+    <StyledWrapper>
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div className="mb-6">
+          <div className="flex items-center mb-2">
+            <IconFlask size={20} className="mr-2 text-orange-500" />
+            <h2 className="text-lg font-semibold">Beta Features</h2>
+          </div>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4 text-wrap">
+            Enable beta features, these features may be unstable or incomplete.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          {BETA_FEATURES.map((feature) => (
+            <div key={feature.id} className="beta-feature-item">
+              <div className="flex items-center">
+                <input
+                  id={feature.id}
+                  type="checkbox"
+                  name={feature.id}
+                  checked={formik.values[feature.id]}
+                  onChange={formik.handleChange}
+                  className="mousetrap mr-0"
+                />
+                <label className="block ml-2 select-none font-medium" htmlFor={feature.id}>
+                  {feature.label}
+                </label>
+              </div>
+              <div className="beta-feature-description ml-6 text-xs text-gray-500 dark:text-gray-400">
+                {feature.description}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {!hasAnyBetaFeatures && (
+          <div className="no-features-message">
+            <p>No beta features are currently available</p>
+          </div>
+        )}
+
+        <div className="mt-10">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
+    </StyledWrapper>
+  );
+};
+
+export default Beta;

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

@@ -7,6 +7,7 @@ import General from './General';
 import Proxy from './ProxySettings';
 import Display from './Display';
 import Keybindings from './Keybindings';
+import Beta from './Beta';
 
 import StyledWrapper from './StyledWrapper';
 
@@ -37,6 +38,10 @@ const Preferences = ({ onClose }) => {
         return <Keybindings close={onClose} />;
       }
 
+      case 'beta': {
+        return <Beta close={onClose} />;
+      }
+
       case 'support': {
         return <Support />;
       }
@@ -46,7 +51,7 @@ const Preferences = ({ onClose }) => {
   return (
     <StyledWrapper>
       <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2'>
+        <div className="flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2">
           <div className="flex flex-col items-center tabs" role="tablist">
             <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
               General
@@ -63,6 +68,9 @@ const Preferences = ({ onClose }) => {
             <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
               Support
             </div>
+            <div className={getTabClassname('beta')} role="tab" onClick={() => setTab('beta')}>
+              Beta
+            </div>
           </div>
           <section className="flex flex-grow px-2 pt-2 pb-6 tab-panel">{getTabPanel(tab)}</section>
         </div>

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

@@ -6,13 +6,16 @@ import SingleLineEditor from 'components/SingleLineEditor';
 import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
-import { update } from 'lodash';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 
 const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
   const awsv4Auth = get(request, 'auth.awsv4', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
   
@@ -144,7 +147,7 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
       </div>
 
       <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <div className="single-line-editor-wrapper mb-2 flex items-center">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -155,6 +158,8 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
           item={item}
           isSecret={true}
         />
+
+        {showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
       </div>
 
       <label className="block font-medium mb-2">Session Token</label>

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
   const { storedTheme } = useTheme();
 
   const basicAuth = get(request, 'auth.basic', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
   
@@ -63,7 +67,7 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={basicAuth.password || ''}
           theme={storedTheme}
@@ -74,6 +78,7 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
           item={item}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -13,6 +15,8 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
 
   // Use the request prop directly like OAuth2ClientCredentials does
   const bearerToken = get(request, 'auth.bearer.token', '');
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(bearerToken);
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
   
@@ -36,7 +40,7 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
   return (
     <StyledWrapper className="mt-2 w-full">
       <label className="block font-medium mb-2">Token</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={bearerToken}
           theme={storedTheme}
@@ -47,6 +51,7 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
           item={item}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -11,6 +13,8 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
   const { storedTheme } = useTheme();
 
   const digestAuth = get(request, 'auth.digest', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
   
@@ -62,7 +66,7 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={digestAuth.password || ''}
           theme={storedTheme}
@@ -73,6 +77,7 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
           item={item}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
   const { storedTheme } = useTheme();
 
   const ntlmAuth = get(request, 'auth.ntlm', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
   
@@ -80,7 +84,7 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -91,6 +95,7 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
           item={item}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
       <label className="block font-medium mb-2">Domain</label>

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

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tabs {
+    .tab {
+      cursor: pointer;
+      padding: 4px 8px !important;
+      font-size: 12px;
+      border-radius: 4px;
+      
+      &:hover {
+        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.1)' : 'rgba(99, 102, 241, 0.1)'};
+      }
+      
+      &.active {
+        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.2)' : 'rgba(99, 102, 241, 0.1)'};
+        color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+        font-weight: 500;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+    }
+  }
+  
+  .additional-parameter-sends-in-selector {
+    select {
+      height: 32px;
+      width: 100%;
+      border: 1px solid ${(props) => props.theme.input.border};
+      border-radius: 4px;
+      padding: 0 8px;
+      
+      &:focus {
+        outline: none;
+        border-color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+      }
+    }
+  }
+  
+  .add-additional-param-actions {
+    &:hover {
+      color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+    }
+  }
+`
+
+export default StyledWrapper;

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

@@ -0,0 +1,306 @@
+import { useDispatch } from "react-redux";
+import React, { useState } from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { IconPlus, IconTrash, IconAdjustmentsHorizontal } from '@tabler/icons';
+import { cloneDeep } from "lodash";
+import SingleLineEditor from "components/SingleLineEditor/index";
+import StyledWrapper from "./StyledWrapper";
+import Table from "components/Table/index";
+
+const AdditionalParams  = ({ item = {}, request, updateAuth, collection, handleSave }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(request, 'auth.oauth2', {});
+  const {
+    grantType,
+    additionalParameters = {}
+  } = oAuth;
+
+  const [activeTab, setActiveTab] = useState(
+    (grantType == 'authorization_code' || grantType == 'implicit') ? 'authorization' : 'token'
+  );
+
+  const isEmptyParam = (param) => {
+    return !param.name.trim() && !param.value.trim();
+  };
+
+  const hasEmptyRow = () => {
+    const tabParams = additionalParameters[activeTab] || [];
+    return tabParams.some(isEmptyParam);
+  };
+
+  const updateAdditionalParameters = ({ updatedAdditionalParameters }) => {
+    const filteredParams = cloneDeep(updatedAdditionalParameters);
+    
+    Object.keys(filteredParams).forEach(paramType => {
+      if (filteredParams[paramType]?.length) {
+        filteredParams[paramType] = filteredParams[paramType].filter(param => 
+          param.name.trim() || param.value.trim()
+        );
+        
+        if (filteredParams[paramType].length === 0) {
+          delete filteredParams[paramType];
+        }
+      } else if (Array.isArray(filteredParams[paramType]) && filteredParams[paramType].length === 0) {
+        // Remove empty arrays
+        delete filteredParams[paramType];
+      }
+    });
+
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          ...oAuth,
+          additionalParameters: Object.keys(filteredParams).length > 0 ? filteredParams : undefined
+        }
+      })
+    );
+  }
+
+  const handleUpdateAdditionalParam = ({ paramType, key, paramIndex, value }) => {
+    const updatedAdditionalParameters = cloneDeep(additionalParameters);
+    
+    if (!updatedAdditionalParameters[paramType]) {
+      updatedAdditionalParameters[paramType] = [];
+    }
+    
+    if (!updatedAdditionalParameters[paramType][paramIndex]) {
+      updatedAdditionalParameters[paramType][paramIndex] = {
+        name: '',
+        value: '',
+        sendIn: 'headers',
+        enabled: true
+      };
+    }
+    
+    updatedAdditionalParameters[paramType][paramIndex][key] = value;
+    
+    // Only filter when updating a parameter
+    updateAdditionalParameters({ updatedAdditionalParameters });
+  }
+
+  const handleDeleteAdditionalParam = ({ paramType, paramIndex }) => {
+    const updatedAdditionalParameters = cloneDeep(additionalParameters);
+    
+    if (updatedAdditionalParameters[paramType]?.length) {
+      updatedAdditionalParameters[paramType] = updatedAdditionalParameters[paramType].filter((_, index) => index !== paramIndex);
+      
+      // If the array is now empty, ensure we're not sending empty arrays
+      if (updatedAdditionalParameters[paramType].length === 0) {
+        delete updatedAdditionalParameters[paramType];
+      }
+    }
+    
+    updateAdditionalParameters({ updatedAdditionalParameters });
+  }
+
+  const handleAddNewAdditionalParam = () => {
+    // Prevent adding multiple empty rows
+    if (hasEmptyRow()) {
+      return;
+    }
+
+    const paramType = activeTab;
+    const localAdditionalParameters = cloneDeep(additionalParameters);
+    
+    if (!localAdditionalParameters[paramType]) {
+      localAdditionalParameters[paramType] = [];
+    }
+    
+    localAdditionalParameters[paramType] = [
+      ...localAdditionalParameters[paramType],
+      {
+        name: '',
+        value: '',
+        sendIn: 'headers',
+        enabled: true
+      }
+    ];
+    
+    // Don't filter here to allow the empty row to display in UI
+    // But don't permanently store it in state until it has values
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          ...oAuth,
+          additionalParameters: localAdditionalParameters,
+        }
+      })
+    );
+  }
+
+  // Add a class to the Add Parameter button if it's disabled
+  const addButtonDisabled = hasEmptyRow();
+
+  // Define available tabs for each grant type
+  const getAvailableTabs = (grantType) => {
+    const tabConfig = {
+      'authorization_code': ['authorization', 'token', 'refresh'],
+      'implicit': ['authorization'],
+      'password': ['token', 'refresh'],
+      'client_credentials': ['token', 'refresh']
+    };
+    return tabConfig[grantType] || ['token', 'refresh'];
+  };
+
+  const availableTabs = getAvailableTabs(grantType);
+
+  const renderTab = (tabKey, tabLabel) => (
+    <div 
+      key={tabKey}
+      className={`tab ${activeTab === tabKey ? 'active' : ''}`} 
+      onClick={() => setActiveTab(tabKey)}
+    >
+      {tabLabel}
+    </div>
+  );
+
+  return (
+    <StyledWrapper className="mt-4">
+      <div className="flex items-center gap-2.5 mb-3">
+        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
+          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        </div>
+        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+          Additional Parameters
+        </span>
+      </div>
+      
+      <div className="tabs flex w-full gap-2 my-2">
+        {availableTabs.includes('authorization') && renderTab('authorization', 'Authorization')}
+        {availableTabs.includes('token') && renderTab('token', 'Token')}
+        {availableTabs.includes('refresh') && renderTab('refresh', 'Refresh')}
+      </div>
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'name', width: '30%' },
+          { name: 'Value', accessor: 'value', width: '30%' },
+          { name: 'Send In', accessor: 'sendIn', width: '150px' },
+          { name: '', accessor: '', width: '15%' }
+        ]}
+      >
+        <tbody>
+          {(additionalParameters?.[activeTab] || []).map((param, index) => 
+            <tr key={index}>
+              <td className='flex relative'>
+                <SingleLineEditor
+                  value={param?.name || ''}
+                  theme={storedTheme}
+                  onChange={(value) => handleUpdateAdditionalParam({ 
+                    paramType: activeTab,
+                    key: 'name',
+                    paramIndex: index,
+                    value
+                  })}
+                  collection={collection}
+                  onSave={handleSave}
+                />
+              </td>
+              <td>
+                <SingleLineEditor
+                  value={param?.value || ''}
+                  theme={storedTheme}
+                  onChange={(value) => handleUpdateAdditionalParam({ 
+                    paramType: activeTab,
+                    key: 'value',
+                    paramIndex: index,
+                    value
+                  })}
+                  collection={collection}
+                  onSave={handleSave}
+                />
+              </td>
+              <td>
+                <div className="w-full additional-parameter-sends-in-selector">
+                  <select 
+                    value={param?.sendIn || 'headers'} 
+                    onChange={e => {
+                      handleUpdateAdditionalParam({ 
+                        paramType: activeTab,
+                        key: 'sendIn',
+                        paramIndex: index,
+                        value: e.target.value
+                      })
+                    }} 
+                    className="mousetrap bg-transparent"
+                  >
+                    {sendInOptionsMap[grantType || 'authorization_code'][activeTab].map((optionValue) => (
+                      <option key={optionValue} value={optionValue}>
+                        {optionValue}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </td>
+              <td>
+                <div className="flex items-center">
+                  <input
+                    type="checkbox"
+                    checked={param?.enabled ?? true}
+                    tabIndex="-1"
+                    className="mr-3 mousetrap"
+                    onChange={(e) => {
+                      handleUpdateAdditionalParam({ 
+                        paramType: activeTab,
+                        key: 'enabled',
+                        paramIndex: index,
+                        value: e.target.checked
+                      })
+                    }}
+                  />
+                  <button 
+                    tabIndex="-1" 
+                    onClick={() => {
+                      handleDeleteAdditionalParam({
+                        paramType: activeTab,
+                        paramIndex: index
+                      })
+                    }}
+                  >
+                    <IconTrash strokeWidth={1.5} size={20} />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </Table>
+      <div 
+        className={`add-additional-param-actions w-fit flex items-center mt-2 ${addButtonDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} 
+        onClick={addButtonDisabled ? null : handleAddNewAdditionalParam}
+      >
+        <IconPlus size={16} strokeWidth={1.5} style={{ marginLeft: '2px' }} />
+        <span className="ml-1 text-sm text-gray-500">Add Parameter</span>
+      </div>
+    </StyledWrapper>
+  )
+}
+
+export default AdditionalParams;
+
+const sendInOptionsMap = {
+  'authorization_code': {
+    'authorization': ['headers', 'queryparams'],
+    'token': ['headers', 'queryparams', 'body'],
+    'refresh': ['headers', 'queryparams', 'body']
+  },
+  'password': {
+    'token': ['headers', 'queryparams', 'body'],
+    'refresh': ['headers', 'queryparams', 'body']
+  },
+  'client_credentials': {
+    'token': ['headers', 'queryparams', 'body'],
+    'refresh': ['headers', 'queryparams', 'body']
+  },
+  'implicit': {
+    'authorization': ['headers', 'queryparams']
+  }
+}

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

@@ -1,4 +1,5 @@
 import React, { useRef, forwardRef } from 'react';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -9,13 +10,15 @@ import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
+import AdditionalParams from '../AdditionalParams/index';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 
 const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
+  const { isSensitive } = useDetectSensitiveField(collection);
   const oAuth = get(request, 'auth.oauth2', {});
   const {
     callbackUrl,
@@ -33,7 +36,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
     tokenQueryKey,
     refreshTokenUrl,
     autoRefreshToken,
-    autoFetchToken
+    autoFetchToken,
+    additionalParameters
   } = oAuth;
 
   const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
@@ -83,6 +87,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           refreshTokenUrl,
           autoRefreshToken,
           autoFetchToken,
+          additionalParameters,
           [key]: value,
         }
       })
@@ -110,6 +115,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           tokenHeaderPrefix,
           tokenQueryKey,
           autoFetchToken,
+          additionalParameters,
           pkce: !Boolean(oAuth?.['pkce'])
         }
       })
@@ -129,12 +135,15 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
       </div>
       {inputsConfig.map((input) => {
         const { key, label, isSecret } = input;
+        const value = oAuth[key] || '';
+        const { showWarning, warningMessage } = isSensitive(value);
+        
         return (
           <div className="flex items-center gap-4 w-full" key={`input-${key}`}>
             <label className="block min-w-[140px]">{label}</label>
-            <div className="single-line-editor-wrapper flex-1">
+            <div className="single-line-editor-wrapper flex-1 flex items-center">
               <SingleLineEditor
-                value={oAuth[key] || ''}
+                value={value}
                 theme={storedTheme}
                 onSave={handleSave}
                 onChange={(val) => handleChange(key, val)}
@@ -143,6 +152,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
                 item={item}
                 isSecret={isSecret}
               />
+              {isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
             </div>
           </div>
         );
@@ -326,6 +336,13 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           </div>
         </div>
       </div>
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
+      />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
     </StyledWrapper>
   );

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

@@ -1,4 +1,5 @@
 import React, { useRef, forwardRef } from 'react';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -9,13 +10,15 @@ import { inputsConfig } from './inputsConfig';
 import Dropdown from 'components/Dropdown';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
+import AdditionalParams from '../AdditionalParams/index';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 
 const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
+  const { isSensitive } = useDetectSensitiveField(collection);
   const oAuth = get(request, 'auth.oauth2', {});
 
   const { 
@@ -30,7 +33,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
     tokenQueryKey, 
     refreshTokenUrl,
     autoRefreshToken,
-    autoFetchToken
+    autoFetchToken,
+    additionalParameters
   } = oAuth;
 
   const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
@@ -77,6 +81,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           refreshTokenUrl,
           autoRefreshToken,
           autoFetchToken,
+          additionalParameters,
           [key]: value
         }
       })
@@ -96,12 +101,15 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
       </div>
       {inputsConfig.map((input) => {
         const { key, label, isSecret } = input;
+        const value = oAuth[key] || '';
+        const { showWarning, warningMessage } = isSensitive(value);
+        
         return (
           <div className="flex items-center gap-4 w-full" key={`input-${key}`}>
             <label className="block min-w-[140px]">{label}</label>
-            <div className="single-line-editor-wrapper flex-1">
+            <div className="single-line-editor-wrapper flex-1 flex items-center">
               <SingleLineEditor
-                value={oAuth[key] || ''}
+                value={value}
                 theme={storedTheme}
                 onSave={handleSave}
                 onChange={(val) => handleChange(key, val)}
@@ -110,6 +118,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
                 item={item}
                 isSecret={isSecret}
               />
+              {isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
             </div>
           </div>
         );
@@ -284,7 +293,13 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           </div>
         </div>
       </div>
-
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
+      />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
 
     </StyledWrapper>

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

@@ -101,6 +101,15 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
           >
             Authorization Code
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onGrantTypeChange('implicit');
+            }}
+          >
+            Implicit
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {

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

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .oauth2-input-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+
+  .token-placement-selector {
+    padding: 0.5rem 0px;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    min-width: 100px;
+
+    .dropdown {
+      width: fit-content;
+      min-width: 100px;
+
+      div[data-tippy-root] {
+        width: fit-content;
+        min-width: 100px;
+      }
+      .tippy-box {
+        width: fit-content;
+        max-width: none !important;
+        min-width: 100px;
+
+        .tippy-content {
+          width: fit-content;
+          max-width: none !important;
+          min-width: 100px;
+        }
+      }
+    }
+
+    .token-placement-label {
+      width: fit-content;
+      justify-content: space-between;
+      padding: 0 0.5rem;
+      min-width: 100px;
+    }
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+  
+  .checkbox-label {
+    color: ${(props) => props.theme.colors.text.primary};
+    user-select: none;
+  }
+`;
+
+export default Wrapper; 

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

@@ -0,0 +1,233 @@
+import React, { useRef, forwardRef, useMemo } from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import { IconCaretDown, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import SingleLineEditor from 'components/SingleLineEditor';
+import Wrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
+import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
+import AdditionalParams from '../AdditionalParams/index';
+import { getAllVariables } from 'utils/collections/index';
+import { interpolate } from '@usebruno/common';
+
+const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const oAuth = get(request, 'auth.oauth2', {});
+  const {
+    callbackUrl,
+    authorizationUrl,
+    clientId,
+    scope,
+    state,
+    credentialsId,
+    tokenPlacement,
+    tokenHeaderPrefix,
+    tokenQueryKey,
+    autoFetchToken
+  } = oAuth;
+
+  const interpolatedAuthUrl = useMemo(() => {
+    const variables = getAllVariables(collection, item);
+    return interpolate(authorizationUrl, variables);
+  }, [collection, item, authorizationUrl]);
+
+  const TokenPlacementIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-end token-placement-label select-none">
+        {tokenPlacement == 'url' ? 'URL' : 'Headers'}
+        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const handleSave = () => { save(); };
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          grantType: 'implicit',
+          callbackUrl,
+          authorizationUrl,
+          clientId,
+          state,
+          scope,
+          credentialsId,
+          tokenPlacement,
+          tokenHeaderPrefix,
+          tokenQueryKey,
+          autoFetchToken,
+          [key]: value,
+        }
+      })
+    );
+  };
+
+  const handleAutoFetchTokenToggle = (e) => {
+    handleChange('autoFetchToken', e.target.checked);
+  };
+
+  return (
+    <Wrapper className="mt-2 flex w-full gap-4 flex-col">
+      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={authorizationUrl} credentialsId={credentialsId} />
+      <div className="flex items-center gap-2.5 mt-2">
+        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
+          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        </div>
+        <span className="text-sm font-medium">
+          Configuration
+        </span>
+      </div>
+      {inputsConfig.map((input) => {
+        const { key, label, isSecret } = input;
+        return (
+          <div className="flex items-center gap-4 w-full" key={`input-${key}`}>
+            <label className="block min-w-[140px]">{label}</label>
+            <div className="oauth2-input-wrapper flex-1">
+              <SingleLineEditor
+                value={oAuth[key] || ''}
+                theme={storedTheme}
+                onSave={handleSave}
+                onChange={(val) => handleChange(key, val)}
+                onRun={handleRun}
+                collection={collection}
+                item={item}
+                isSecret={isSecret}
+              />
+            </div>
+          </div>
+        );
+      })}
+
+      <div className="flex items-center gap-2.5 mt-2">
+        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
+          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        </div>
+        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+          Token
+        </span>
+      </div>
+
+      <div className="flex items-center gap-4 w-full" key={`input-token-name`}>
+        <label className="block min-w-[140px]">Token ID</label>
+        <div className="oauth2-input-wrapper flex-1">
+          <SingleLineEditor
+            value={oAuth['credentialsId'] || 'credentials'}
+            theme={storedTheme}
+            onSave={handleSave}
+            onChange={(val) => handleChange('credentialsId', val)}
+            onRun={handleRun}
+            collection={collection}
+            item={item}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4 w-full" key={`input-token-placement`}>
+        <label className="block min-w-[140px]">Add Token to</label>
+        <div className="inline-flex items-center cursor-pointer token-placement-selector">
+          <Dropdown onCreate={onDropdownCreate} icon={<TokenPlacementIcon />} placement="bottom-end">
+            <div
+              className="dropdown-item"
+              onClick={() => {
+                dropdownTippyRef.current.hide();
+                handleChange('tokenPlacement', 'header');
+              }}
+            >
+              Headers
+            </div>
+            <div
+              className="dropdown-item"
+              onClick={() => {
+                dropdownTippyRef.current.hide();
+                handleChange('tokenPlacement', 'url');
+              }}
+            >
+              URL
+            </div>
+          </Dropdown>
+        </div>
+      </div>
+
+      {tokenPlacement == 'header' ? (
+        <div className="flex items-center gap-4 w-full" key={`input-token-header-prefix`}>
+          <label className="block min-w-[140px]">Header Prefix</label>
+          <div className="oauth2-input-wrapper flex-1">
+            <SingleLineEditor
+              value={oAuth.tokenHeaderPrefix || 'Bearer'}
+              theme={storedTheme}
+              onSave={handleSave}
+              onChange={(val) => handleChange('tokenHeaderPrefix', val)}
+              onRun={handleRun}
+              collection={collection}
+              item={item}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-4 w-full" key={`input-token-query-key`}>
+          <label className="block min-w-[140px]">URL Query Key</label>
+          <div className="oauth2-input-wrapper flex-1">
+            <SingleLineEditor
+              value={oAuth.tokenQueryKey || 'access_token'}
+              theme={storedTheme}
+              onSave={handleSave}
+              onChange={(val) => handleChange('tokenQueryKey', val)}
+              onRun={handleRun}
+              collection={collection}
+              item={item}
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-center gap-2.5 mt-2">
+        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
+          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        </div>
+        <span className="text-sm font-medium">
+          Advanced Options
+        </span>
+      </div>
+
+      <div className="flex items-center gap-4 w-full">
+        <input
+          type="checkbox"
+          checked={oAuth.autoFetchToken !== false}
+          onChange={handleAutoFetchTokenToggle}
+          className="cursor-pointer ml-1"
+        />
+        <label className="block min-w-[140px]">Auto fetch token</label>
+        <div className="flex items-center gap-2">
+          <div className="relative group cursor-pointer">
+            <IconHelp size={16} className="text-gray-500" />
+            <span className="group-hover:opacity-100 pointer-events-none opacity-0 max-w-60 absolute left-0 bottom-full mb-1 w-max p-2 bg-gray-700 text-white text-xs rounded-md transition-opacity duration-200">
+              Automatically fetch a new token when the current one expires.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
+      />
+      <Oauth2ActionButtons item={item} request={request} collection={collection} url={interpolatedAuthUrl} credentialsId={credentialsId} />
+    </Wrapper>
+  );
+};
+
+export default OAuth2Implicit; 

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/inputsConfig.js

@@ -0,0 +1,24 @@
+const inputsConfig = [
+  {
+    key: 'callbackUrl',
+    label: 'Callback URL'
+  },
+  {
+    key: 'authorizationUrl',
+    label: 'Authorization URL'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  },
+  {
+    key: 'state',
+    label: 'State'
+  }
+];
+
+export { inputsConfig }; 

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

@@ -28,20 +28,30 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
     requestCopy.headers = {};
     toggleFetchingToken(true);
     try {
-      const credentials = await dispatch(fetchOauth2Credentials({ itemUid: item.uid, request: requestCopy, collection }));
+      const result = await dispatch(fetchOauth2Credentials({ 
+        itemUid: item.uid, 
+        request: requestCopy, 
+        collection,
+        forceGetToken: true
+      }));
+      
       toggleFetchingToken(false);
-      if (credentials?.access_token) {
-        toast.success('token fetched successfully!'); 
-      }
-      else {
-        toast.error('An error occurred while fetching token!');  
+      
+      // Check if the result contains error or if access_token is missing
+      if (!result || !result.access_token) {
+        const errorMessage = result?.error || 'No access token received from authorization server';
+        console.error(errorMessage);
+        toast.error(errorMessage);
+        return;
       }
+      
+      toast.success('Token fetched successfully!');
     }
     catch (error) {
       console.error('could not fetch the token!');
       console.error(error);
       toggleFetchingToken(false);
-      toast.error('An error occurred while fetching token!');
+      toast.error(error?.message || 'An error occurred while fetching token!');
     }
   }
 
@@ -51,26 +61,36 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
     requestCopy.headers = {};
     toggleRefreshingToken(true);
     try {
-      const credentials = await dispatch(refreshOauth2Credentials({ itemUid: item.uid, request: requestCopy, collection }));
+      const result = await dispatch(refreshOauth2Credentials({ 
+        itemUid: item.uid, 
+        request: requestCopy, 
+        collection,
+        forceGetToken: true
+      }));
+      
       toggleRefreshingToken(false);
-      if (credentials?.access_token) {
-        toast.success('token refreshed successfully!'); 
-      }
-      else {
-        toast.error('An error occurred while refreshing token!');  
+      
+      // Check if the result contains error or if access_token is missing
+      if (!result || !result.access_token) {
+        const errorMessage = result?.error || 'No access token received from authorization server';
+        console.error(errorMessage);
+        toast.error(errorMessage);
+        return;
       }
+      
+      toast.success('Token refreshed successfully!');
     }
     catch(error) {
       console.error(error);
       toggleRefreshingToken(false);
-      toast.error('An error occurred while refreshing token!');
+      toast.error(error?.message || 'An error occurred while refreshing token!');
     }
   };
 
   const handleClearCache = (e) => {
     dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAccessTokenUrl, credentialsId }))
     .then(() => {
-      toast.success('cleared cache successfully');
+      toast.success('Cleared cache successfully');
     })
     .catch((err) => {
       toast.error(err.message);
@@ -79,12 +99,22 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
 
   return (
     <div className="flex flex-row gap-4 mt-4">
-      <button onClick={handleFetchOauth2Credentials} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
+      <button 
+        onClick={handleFetchOauth2Credentials} 
+        className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}
+        disabled={fetchingToken || refreshingToken}
+      >
         Get Access Token{fetchingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
       </button>
-      {creds?.refresh_token ? <button onClick={handleRefreshAccessToken} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-        Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-      </button> : null}
+      {creds?.refresh_token ? 
+        <button 
+          onClick={handleRefreshAccessToken}
+          className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}
+          disabled={fetchingToken || refreshingToken}
+        >
+          Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
+        </button> 
+      : null}
       <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
         Clear Cache
       </button>

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

@@ -1,4 +1,5 @@
 import React, { useRef, forwardRef } from 'react';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -9,14 +10,16 @@ import { inputsConfig } from './inputsConfig';
 import Dropdown from 'components/Dropdown';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
+import AdditionalParams from '../AdditionalParams/index';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning/index';
 
 const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
   const oAuth = get(request, 'auth.oauth2', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
 
   const { 
     accessTokenUrl, 
@@ -32,7 +35,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
     tokenQueryKey, 
     refreshTokenUrl,
     autoRefreshToken,
-    autoFetchToken
+    autoFetchToken,
+    additionalParameters
   } = oAuth;
 
   const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
@@ -80,6 +84,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
           refreshTokenUrl,
           autoRefreshToken,
           autoFetchToken,
+          additionalParameters,
           [key]: value
         }
       })
@@ -99,12 +104,15 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
       </div>
       {inputsConfig.map((input) => {
         const { key, label, isSecret } = input;
+        const value = oAuth[key] || '';
+        const { showWarning, warningMessage } = isSensitive(value);
+        
         return (
           <div className="flex items-center gap-4 w-full" key={`input-${key}`}>
             <label className="block min-w-[140px]">{label}</label>
-            <div className="single-line-editor-wrapper flex-1">
+            <div className="single-line-editor-wrapper flex-1 flex items-center">
               <SingleLineEditor
-                value={oAuth[key] || ''}
+                value={value}
                 theme={storedTheme}
                 onSave={handleSave}
                 onChange={(val) => handleChange(key, val)}
@@ -113,6 +121,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
                 item={item}
                 isSecret={isSecret}
               />
+              {isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
             </div>
           </div>
         );
@@ -287,6 +296,13 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
           </div>
         </div>
       </div>
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
+      />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
     </StyledWrapper>
   );

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

@@ -4,6 +4,7 @@ import StyledWrapper from './StyledWrapper';
 import GrantTypeSelector from './GrantTypeSelector/index';
 import OAuth2PasswordCredentials from './PasswordCredentials/index';
 import OAuth2AuthorizationCode from './AuthorizationCode/index';
+import OAuth2Implicit from './Implicit/index';
 import OAuth2ClientCredentials from './ClientCredentials/index';
 import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -31,6 +32,9 @@ const GrantTypeComponentMap = ({ item, collection }) => {
     case 'authorization_code':
       return <OAuth2AuthorizationCode item={item} save={save} request={request} handleRun={handleRun} updateAuth={updateAuth} collection={collection} />;
       break;
+    case 'implicit':
+      return <OAuth2Implicit item={item} save={save} request={request} handleRun={handleRun} updateAuth={updateAuth} collection={collection} />;
+      break;
     case 'client_credentials':
       return <OAuth2ClientCredentials item={item} save={save} request={request} handleRun={handleRun} updateAuth={updateAuth} collection={collection} />;
       break;

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -12,6 +14,8 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
   const { storedTheme } = useTheme();
 
   const wsseAuth = get(request, 'auth.wsse', {});
+  const { isSensitive } = useDetectSensitiveField(collection);
+  const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
   
@@ -63,7 +67,7 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
       </div>
 
       <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={wsseAuth.password || ''}
           theme={storedTheme}
@@ -74,6 +78,7 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
           item={item}
           isSecret={true}
         />
+        {showWarning && <SensitiveFieldWarning fieldName="wsse-password" message={warningMessage} />}
       </div>
     </StyledWrapper>
   );

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

@@ -54,7 +54,7 @@ const Auth = ({ item, collection }) => {
     for (let i of [...requestTreePath].reverse()) {
       if (i.type === 'folder') {
         const folderAuth = get(i, 'root.request.auth');
-        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'none' && folderAuth.mode !== 'inherit') {
+        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'inherit') {
           effectiveSource = {
             type: 'folder',
             name: i.name,
@@ -109,7 +109,7 @@ const Auth = ({ item, collection }) => {
   };
 
   return (
-    <StyledWrapper className="w-full mt-1 overflow-y-scroll">
+    <StyledWrapper className="w-full mt-1 overflow-auto">
       <div className="flex flex-grow justify-start items-center">
         <AuthMode item={item} collection={collection} />
       </div>

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

@@ -19,6 +19,7 @@ import StyledWrapper from './StyledWrapper';
 import Documentation from 'components/Documentation/index';
 import GraphQLSchemaActions from '../GraphQLSchemaActions/index';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
+import Settings from 'components/RequestPane/Settings';
 
 const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
   const dispatch = useDispatch();
@@ -101,6 +102,9 @@ const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handle
       case 'docs': {
         return <Documentation item={item} collection={collection} />;
       }
+      case 'settings': {
+        return <Settings item={item} collection={collection} />;
+      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -152,6 +156,9 @@ const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handle
         <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
           Docs
         </div>
+        <div className={getTabClassname('settings')} role="tab" onClick={() => selectTab('settings')}>
+          Settings
+        </div>
         <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
       </div>
       <section className="flex w-full mt-5 flex-1 relative">

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

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+  /* height: 100%; */
+  position: relative;
+
+  .grpc-message-header {
+    .font-medium {
+      color: ${(props) => props.theme.text};
+    }
+    
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        transform: scale(1.1);
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+
+  #grpc-messages-container {
+    /* height: 100%; */
+    position: relative;
+  }
+  
+  .add-message-btn-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding-top: 8px;
+    background: ${(props) => props.theme.bg || '#fff'};
+    z-index: 15;
+    border-top: 1px solid ${(props) => props.theme.border || 'rgba(0, 0, 0, 0.1)'};
+    
+    .add-message-btn {
+      width: 100%;
+    }
+  }
+
+  .CodeMirror {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,354 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { get } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { sendGrpcMessage, generateGrpcSampleMessage } from 'utils/network/index';
+import useLocalStorage from 'hooks/useLocalStorage';
+
+import CodeEditor from 'components/CodeEditor/index';
+import StyledWrapper from './StyledWrapper';
+import { IconSend, IconRefresh, IconWand, IconPlus, IconTrash, IconChevronDown, IconChevronUp } from '@tabler/icons';
+import ToolHint from 'components/ToolHint/index';
+import { toastError } from 'utils/common/error';
+import { format, applyEdits } from 'jsonc-parser';
+import toast from 'react-hot-toast'
+import { getAbsoluteFilePath } from 'utils/common/path';
+
+const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCollapsed, onToggleCollapse, handleRun, canClientSendMultipleMessages }) => {
+    const dispatch = useDispatch();
+    const { displayedTheme, theme } = useTheme();
+    const preferences = useSelector((state) => state.app.preferences);
+    const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
+    const isConnectionActive = useSelector((state) => state.collections.activeConnections.includes(item.uid));
+    
+    // Access gRPC method metadata from local storage
+    const [reflectionCache] = useLocalStorage('bruno.grpc.reflectionCache', {});
+    const [protofileCache] = useLocalStorage('bruno.grpc.protofileCache', {});
+
+    const canClientStream = methodType === 'client-streaming' || methodType === 'bidi-streaming';
+
+    const { name, content } = message;
+
+    const onEdit = (value) => {
+      const currentMessages = [...(body.grpc || [])];
+      
+      currentMessages[index] = {
+          name: name ? name : `message ${index + 1}`,
+          content: value
+      };
+          
+      dispatch(
+          updateRequestBody({
+              content: currentMessages,
+              itemUid: item.uid,
+              collectionUid: collection.uid
+          })
+      );
+    };
+    
+    const onSend = async () => {
+      try {
+        await sendGrpcMessage(item, collection.uid, content);
+      } catch (error) {
+        console.error('Error sending message:', error);
+      }
+    }
+    const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+    
+    const onRegenerateMessage = async () => {
+      try {
+          const methodPath = item.draft?.request?.method || item.request?.method;
+          
+          if (!methodPath) {
+              toastError(new Error('Method path not found in request'));
+              return;
+          }
+          
+          // Get the URL and protoPath to determine which cache to use
+          const url = item.draft?.request?.url || item.request?.url;
+          const protoPath = item.draft?.request?.protoPath || item.request?.protoPath;
+          
+          // Find the method metadata from the appropriate cache
+          let methodMetadata = null;
+          if (protoPath) {
+              // Use protofile cache if protoPath is available
+              const absolutePath = getAbsoluteFilePath(protoPath, collection.pathname);
+              const cachedMethods = protofileCache[absolutePath];
+              if (cachedMethods) {
+                  methodMetadata = cachedMethods.find(method => method.path === methodPath);
+              }
+          } else if (url) {
+              // Use reflection cache if no protoPath (reflection mode)
+              const cachedMethods = reflectionCache[url];
+              if (cachedMethods) {
+                  methodMetadata = cachedMethods.find(method => method.path === methodPath);
+              }
+          }
+          
+          const result = await generateGrpcSampleMessage(
+              methodPath,
+              content, 
+              { 
+                  arraySize: 2,
+                  methodMetadata // Pass the method metadata to the function
+              } 
+          );
+          
+          if (result.success) {
+              const currentMessages = [...(body.grpc || [])];
+              
+              currentMessages[index] = {
+                  name: name ? name : `message ${index + 1}`,
+                  content: result.message
+              };
+              
+              dispatch(
+                  updateRequestBody({
+                      content: currentMessages,
+                      itemUid: item.uid,
+                      collectionUid: collection.uid
+                  })
+              );
+              
+              toast.success('Sample message generated successfully!');
+          } else {
+              toastError(new Error(result.error || 'Failed to generate sample message'));
+          }
+      } catch (error) {
+          console.error('Error generating sample message:', error);
+          toastError(error);
+      }
+    };
+
+    const onDeleteMessage = () => { 
+      const currentMessages = [...(body.grpc || [])];
+      
+      currentMessages.splice(index, 1);
+      
+      dispatch(
+          updateRequestBody({
+              content: currentMessages,
+              itemUid: item.uid,
+              collectionUid: collection.uid
+          })
+      );
+    };
+
+    const onPrettify = () => {
+      try {
+        const edits = format(content, undefined, { tabSize: 2, insertSpaces: true });
+        const prettyBodyJson = applyEdits(content, edits);
+
+        const currentMessages = [...(body.grpc || [])];
+        currentMessages[index] = {
+            name: name ? name : `message ${index + 1}`,
+            content: prettyBodyJson
+        };
+        dispatch(
+          updateRequestBody({
+            content: currentMessages,
+            itemUid: item.uid,
+            collectionUid: collection.uid
+          })
+        );
+      } catch (e) {
+        toastError(new Error('Unable to prettify. Invalid JSON format.'));
+      }
+    };
+
+    const getContainerHeight = (canClientSendMultipleMessages && body.grpc.length > 1) ? `${isCollapsed ? "" : "h-80"}` : "h-full"
+
+    return (
+      <div className={`flex flex-col mb-3 border border-neutral-200 dark:border-neutral-800 rounded-md overflow-hidden ${getContainerHeight} relative`}>
+        <div 
+          className="grpc-message-header flex items-center justify-between px-3 py-2 bg-neutral-100 dark:bg-neutral-700 cursor-pointer"
+          onClick={onToggleCollapse}
+        >
+          <div className="flex items-center gap-2">
+            {isCollapsed ? 
+              <IconChevronDown size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" /> : 
+              <IconChevronUp size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
+            }
+            <span className="font-medium text-sm">{`Message ${canClientStream ? index + 1 : ''}`}</span>
+          </div>
+          <div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
+            <ToolHint text="Format JSON with proper indentation and spacing" toolhintId={`prettify-msg-${index}`}>
+              <button 
+                onClick={onPrettify}
+                className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
+              >
+                <IconWand size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
+              </button>
+            </ToolHint>
+            
+            <ToolHint text="Generate a new sample message based on schema" toolhintId={`regenerate-msg-${index}`}>
+              <button 
+                onClick={onRegenerateMessage}
+                className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
+              >
+                <IconRefresh size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
+              </button>
+            </ToolHint>
+            
+            {canClientStream && (
+              <ToolHint text={isConnectionActive ? "Send gRPC message" : "Connection not active"} toolhintId={`send-msg-${index}`}>
+                <button 
+                  onClick={onSend}
+                  disabled={!isConnectionActive}
+                  className={`p-1 rounded ${isConnectionActive ? 'hover:bg-zinc-200 dark:hover:bg-zinc-600' : 'opacity-50 cursor-not-allowed'} transition-colors`}
+                >
+                  <IconSend 
+                    size={16} 
+                    strokeWidth={1.5} 
+                    className={`${isConnectionActive ? 'text-zinc-700 dark:text-zinc-300' : 'text-zinc-400 dark:text-zinc-500'}`} 
+                  />
+                </button>
+              </ToolHint>
+            )}
+            
+            {index > 0 && (
+              <ToolHint text="Delete this message" toolhintId={`delete-msg-${index}`}>
+                <button 
+                  onClick={onDeleteMessage}
+                  className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
+                >
+                  <IconTrash size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
+                </button>
+              </ToolHint>
+            )}
+          </div>
+        </div>
+        
+        {!isCollapsed && (
+          <div className={`flex ${body.grpc.length === 1 || !canClientSendMultipleMessages ? "h-full" : "h-80"} relative`}>
+            <CodeEditor
+              collection={collection} 
+              theme={displayedTheme}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              value={content}
+              onEdit={onEdit}
+              onRun={handleRun}
+              onSave={onSave}
+              mode='application/ld+json'
+              enableVariableHighlighting={true}
+            />
+          </div>
+        )}
+      </div>
+    )
+}
+
+const GrpcBody = ({ item, collection, handleRun }) => {
+  const preferences = useSelector((state) => state.app.preferences);
+  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
+  const dispatch = useDispatch();
+  const [collapsedMessages, setCollapsedMessages] = useState([]);
+  const messagesContainerRef = useRef(null);
+  const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
+  
+  const methodType = item.draft ? get(item, 'draft.request.methodType') : get(item, 'request.methodType');
+  const canClientSendMultipleMessages = methodType === 'client-streaming' || methodType === 'bidi-streaming';
+  
+  // Auto-scroll to the latest message when messages are added
+  useEffect(() => {
+    if (messagesContainerRef.current && body?.grpc?.length > 0) {
+      const container = messagesContainerRef.current;
+      container.scrollTop = container.scrollHeight;
+    }
+  }, [body?.grpc?.length]);
+  
+  const toggleMessageCollapse = (index) => {
+    setCollapsedMessages(prev => {
+      if (prev.includes(index)) {
+        return prev.filter(i => i !== index);
+      } else {
+        return [...prev, index];
+      }
+    });
+  };
+  
+  const addNewMessage = () => {
+    const currentMessages = Array.isArray(body.grpc) 
+        ? [...body.grpc] 
+        : [];
+    
+    currentMessages.push({
+      name: `message ${currentMessages.length + 1}`,
+      content: '{}'
+    });
+    
+    dispatch(
+        updateRequestBody({
+            content: currentMessages,
+            itemUid: item.uid,
+            collectionUid: collection.uid
+        })
+    );
+  };
+
+
+  if (!body?.grpc || !Array.isArray(body.grpc)) {
+    return (
+      <StyledWrapper isVerticalLayout={isVerticalLayout}>
+        <div className="flex flex-col items-center justify-center py-8">
+          <p className="text-zinc-500 dark:text-zinc-400 mb-4">No gRPC messages available</p>
+          <ToolHint text="Add the first message to your gRPC request" toolhintId="add-first-msg">
+            <button 
+              onClick={addNewMessage}
+              className="flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors"
+            >
+              <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
+              <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add First Message</span>
+            </button>
+          </ToolHint>
+        </div>
+      </StyledWrapper>
+    );
+  }
+  
+  return (
+    <StyledWrapper isVerticalLayout={isVerticalLayout}>
+      <div 
+        ref={messagesContainerRef}
+        id="grpc-messages-container" 
+        className={`flex-1 ${body.grpc.length === 1 || !canClientSendMultipleMessages ? "h-full" : "overflow-y-auto"} ${canClientSendMultipleMessages && "pb-16"}`}
+      >
+        {body.grpc
+          .filter((_, index) => canClientSendMultipleMessages || index === 0)
+          .map((message, index) => (
+            <SingleGrpcMessage 
+              key={index}
+              message={message} 
+              item={item} 
+              collection={collection}
+              index={index}
+              methodType={methodType}
+              isCollapsed={collapsedMessages.includes(index)}
+              onToggleCollapse={() => toggleMessageCollapse(index)}
+              handleRun={handleRun}
+              canClientSendMultipleMessages={canClientSendMultipleMessages}
+            />
+        ))}
+      </div>
+      
+      {canClientSendMultipleMessages && (
+        <div className="add-message-btn-container">
+          <ToolHint text="Add a new gRPC message to the request" toolhintId="add-msg-fixed">
+            <button 
+              onClick={addNewMessage}
+              className="add-message-btn flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors shadow-md"
+            >
+              <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
+              <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add Message</span>
+            </button>
+          </ToolHint>
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default GrpcBody;

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

@@ -0,0 +1,119 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  height: 2.3rem;
+
+  .method-selector-container {
+    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  .input-container {
+    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    input {
+      background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+      outline: none;
+      box-shadow: none;
+
+      &:focus {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+    position: relative;
+    top: 1px;
+  }
+
+  .infotip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .infotip:hover .infotip-text {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .infotip-text {
+    visibility: hidden;
+    width: auto;
+    background-color: ${(props) => props.theme.requestTabs.active.bg};
+    color: ${(props) => props.theme.text};
+    text-align: center;
+    border-radius: 4px;
+    padding: 4px 8px;
+    position: absolute;
+    z-index: 1;
+    bottom: 34px;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    white-space: nowrap;
+  }
+
+  .infotip-text::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -4px;
+    border-width: 4px;
+    border-style: solid;
+    border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent;
+  }
+
+  .shortcut {
+    font-size: 0.625rem;
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.4;
+    }
+  }
+
+  .connection-status-strip {
+    animation: pulse 1.5s ease-in-out infinite;
+    background-color: ${(props) => props.theme.colors.text.green};
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+  }
+
+  /* Method dropdown styling */
+  .method-dropdown {
+    margin-right: 8px;
+    position: relative;
+    z-index: 10;
+  }
+
+  .dropdown-item {
+    padding: 8px 12px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${(props) => props.theme.dropdown.hoverBg};
+    }
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/GrpcAuthMode/index.js

@@ -0,0 +1,85 @@
+import React, { useRef, forwardRef } from 'react';
+import get from 'lodash/get';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import { useDispatch } from 'react-redux';
+import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
+import { humanizeRequestAuthMode } from 'utils/collections';
+import StyledWrapper from '../../../Auth/AuthMode/StyledWrapper';
+
+const GrpcAuthMode = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
+
+  const authModes = [
+    {
+      name: 'Basic Auth',
+      mode: 'basic'
+    },
+    {
+      name: 'Bearer Token',
+      mode: 'bearer'
+    },
+    {
+      name: 'API Key',
+      mode: 'apikey'
+    },
+    {
+      name: 'OAuth2',
+      mode: 'oauth2'
+    },
+    {
+      name: 'Inherit',
+      mode: 'inherit'
+    },
+    {
+      name: 'No Auth',
+      mode: 'none'
+    }
+  ];
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
+    dispatch(
+      updateRequestAuthMode({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        mode: value
+      })
+    );
+  };
+
+  const onClickHandler = (mode) => {
+    dropdownTippyRef?.current?.hide();
+    onModeChange(mode);
+  };
+  
+  return (
+    <StyledWrapper>
+      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          {authModes.map((authMode) => (
+            <div
+              key={authMode.mode}
+              className="dropdown-item"
+              onClick={() => onClickHandler(authMode.mode)}
+            >
+              {authMode.name}
+            </div>
+          ))}
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default GrpcAuthMode; 

packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js

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

packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/index.js

@@ -0,0 +1,125 @@
+import React, { useEffect } from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import GrpcAuthMode from './GrpcAuthMode';
+import BearerAuth from '../../Auth/BearerAuth';
+import BasicAuth from '../../Auth/BasicAuth';
+import ApiKeyAuth from '../../Auth/ApiKeyAuth';
+import OAuth2 from '../../Auth/OAuth2/index';
+import StyledWrapper from './StyledWrapper';
+import { humanizeRequestAuthMode } from 'utils/collections';
+import { getTreePathFromCollectionToItem } from 'utils/collections/index';
+import { updateRequestAuthMode, updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+
+// List of auth modes supported by gRPC
+const supportedGrpcAuthModes = ['basic', 'bearer', 'apikey', 'oauth2', 'none', 'inherit'];
+
+const GrpcAuth = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
+  const requestTreePath = getTreePathFromCollectionToItem(collection, item);
+
+  const request = item.draft 
+    ? get(item, 'draft.request', {})
+    : get(item, 'request', {});
+
+  const save = () => {
+    return saveRequest(item.uid, collection.uid);
+  };
+
+  // Reset to 'none' if current auth mode is not supported by gRPC
+  useEffect(() => {
+    if (authMode && !supportedGrpcAuthModes.includes(authMode)) {
+      dispatch(
+        updateRequestAuthMode({
+          itemUid: item.uid,
+          collectionUid: collection.uid,
+          mode: 'none'
+        })
+      );
+    }
+  }, [authMode, collection.uid, dispatch, item.uid]);
+
+  const getEffectiveAuthSource = () => {
+    if (authMode !== 'inherit') return null;
+
+    const collectionAuth = get(collection, 'root.request.auth');
+    let effectiveSource = {
+      type: 'collection',
+      name: 'Collection',
+      auth: collectionAuth
+    };
+
+    // Check folders in reverse to find the closest auth configuration
+    for (let i of [...requestTreePath].reverse()) {
+      if (i.type === 'folder') {
+        const folderAuth = get(i, 'root.request.auth');
+        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'none' && folderAuth.mode !== 'inherit') {
+          effectiveSource = {
+            type: 'folder',
+            name: i.name,
+            auth: folderAuth
+          };
+          break;
+        }
+      }
+    }
+
+    return effectiveSource;
+  };
+
+  const getAuthView = () => {
+    switch (authMode) {
+      case 'basic': {
+        return <BasicAuth collection={collection} item={item} updateAuth={updateAuth} request={request} save={save} />;
+      }
+      case 'bearer': {
+        return <BearerAuth collection={collection} item={item} updateAuth={updateAuth} request={request} save={save} />;
+      }
+      case 'apikey': {
+        return <ApiKeyAuth collection={collection} item={item} updateAuth={updateAuth} request={request} save={save} />;
+      }
+      case 'oauth2': {
+        return <OAuth2 collection={collection} item={item} updateAuth={updateAuth} request={request} save={save} />;
+      }
+      case 'inherit': {
+        const source = getEffectiveAuthSource();
+        
+        // Only show inherited auth if it's one of the supported types
+        if (source && supportedGrpcAuthModes.includes(source.auth?.mode)) {
+          return (
+            <>
+              <div className="flex flex-row w-full mt-2 gap-2">
+                <div>Auth inherited from {source.name}: </div>
+                <div className="inherit-mode-text">{humanizeRequestAuthMode(source.auth?.mode)}</div>
+              </div>
+            </>
+          );
+        } else {
+          return (
+            <>
+              <div className="flex flex-row w-full mt-2 gap-2">
+                <div>Inherited auth not supported by gRPC. Using no auth instead.</div>
+              </div>
+            </>
+          );
+        }
+      }
+      default: {
+        return null;
+      }
+    }
+  };
+
+  return (
+    <StyledWrapper className="w-full mt-1 overflow-y-scroll">
+      <div className="flex flex-grow justify-start items-center">
+        <GrpcAuthMode item={item} collection={collection} />
+      </div>
+      {getAuthView()}
+    </StyledWrapper>
+  );
+};
+
+export default GrpcAuth; 

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.tabs {
+    div.tab {
+      padding: 6px 0px;
+      border: none;
+      border-bottom: solid 2px transparent;
+      margin-right: 1.25rem;
+      color: var(--color-tab-inactive);
+      cursor: pointer;
+
+      &:focus,
+      &:active,
+      &:focus-within,
+      &:focus-visible,
+      &:target {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      &.active {
+        color: ${(props) => props.theme.tabs.active.color} !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+      }
+
+      .content-indicator {
+        color: ${(props) => props.theme.text}
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
+import RequestHeaders from 'components/RequestPane/RequestHeaders';
+import GrpcBody from 'components/RequestPane/GrpcBody';
+import GrpcAuth from './GrpcAuth/index';
+import StatusDot from 'components/StatusDot/index';
+import HeightBoundContainer from 'ui/HeightBoundContainer';
+import StyledWrapper from './StyledWrapper';
+import { find, get } from 'lodash';
+import Documentation from 'components/Documentation/index';
+import { useEffect } from 'react';
+import { getPropertyFromDraftOrRequest } from 'utils/collections/index';
+
+const GrpcRequestPane = ({ item, collection, handleRun }) => {
+  const dispatch = useDispatch();
+  const tabs = useSelector((state) => state.tabs.tabs);
+  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+
+  const selectTab = (tab) => {
+    dispatch(
+      updateRequestPaneTab({
+        uid: item.uid,
+        requestPaneTab: tab
+      })
+    );
+  };
+
+  const getTabPanel = (tab) => {
+    switch (tab) {
+      case 'body': {
+        return <GrpcBody item={item} collection={collection} hideModeSelector={true} hidePrettifyButton={true} handleRun={handleRun}/>;
+      }
+      case 'headers': {
+        return <RequestHeaders item={item} collection={collection} addHeaderText="Add Metadata" />;
+      }
+      case 'auth': {
+        return <GrpcAuth item={item} collection={collection} />;
+      }
+      case 'docs': {
+        return <Documentation item={item} collection={collection} />;
+      }
+      default: {
+        return <div className="mt-4">404 | Not found</div>;
+      }
+    }
+  };
+
+  if (!activeTabUid) {
+    return <div>Something went wrong</div>;
+  }
+
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
+    return <div className="pb-4 px-4">An error occurred!</div>;
+  }
+
+  const getTabClassname = (tabName) => {
+    return classnames(`tab select-none ${tabName}`, {
+      active: tabName === focusedTab.requestPaneTab
+    });
+  };
+
+  const isMultipleContentTab = ['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab);
+  const body = getPropertyFromDraftOrRequest(item, 'request.body');
+  const headers = getPropertyFromDraftOrRequest(item, 'request.headers');
+  const docs = getPropertyFromDraftOrRequest(item, 'request.docs');
+  const auth = getPropertyFromDraftOrRequest(item, 'request.auth');
+
+  const activeHeadersLength = headers.filter((header) => header.enabled).length;
+  const grpcMessagesCount = body?.grpc?.length || 0;
+
+  // Determine if this is a client streaming request
+  const request = item.draft ? item.draft.request : item.request;
+  const isClientStreaming = request.methodType === 'client-streaming' || request.methodType === 'bidi-streaming';
+
+  useEffect(() => {
+    // Only set the tab to 'body' if no tab is currently set
+    if (!focusedTab?.requestPaneTab) {
+      selectTab('body');
+    }
+  }, []);
+
+  return (
+    <StyledWrapper className="flex flex-col h-full relative">
+      <div className="flex flex-wrap items-center tabs" role="tablist">
+        <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
+          Message
+          {grpcMessagesCount > 0 && (
+            isClientStreaming ? (
+              <sup className="ml-[.125rem] font-medium">{grpcMessagesCount}</sup>
+            ) : (
+              <StatusDot />
+            )
+          )}
+        </div>
+        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
+          Metadata
+          {activeHeadersLength > 0 && <sup className="ml-[.125rem] font-medium">{activeHeadersLength}</sup>}
+        </div>
+        <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
+          Auth
+          {auth.mode !== 'none' && <StatusDot type="default" />}
+        </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
+          Docs
+          {docs && docs.length > 0 && <StatusDot type="default" />}
+        </div>
+      </div>
+      <section
+        className={classnames('flex w-full flex-1 h-full', {
+          'mt-2': !isMultipleContentTab
+        })}
+      >
+        <HeightBoundContainer>
+          {getTabPanel(focusedTab.requestPaneTab)}
+        </HeightBoundContainer>
+      </section>
+    </StyledWrapper>
+  );
+};
+
+export default GrpcRequestPane;

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

@@ -7,7 +7,6 @@ import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import RequestBody from 'components/RequestPane/RequestBody';
 import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
 import Auth from 'components/RequestPane/Auth';
-import DotIcon from 'components/Icons/Dot';
 import Vars from 'components/RequestPane/Vars';
 import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
@@ -17,22 +16,8 @@ import { find, get } from 'lodash';
 import Documentation from 'components/Documentation/index';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
 import { useEffect } from 'react';
-
-const ContentIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium">
-      <DotIcon width="10"></DotIcon>
-    </sup>
-  );
-};
-
-const ErrorIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium text-red-500">
-      <DotIcon width="10" ></DotIcon>
-    </sup>
-  );
-};
+import StatusDot from 'components/StatusDot';
+import Settings from 'components/RequestPane/Settings';
 
 const HttpRequestPane = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -77,6 +62,9 @@ const HttpRequestPane = ({ item, collection }) => {
       case 'docs': {
         return <Documentation item={item} collection={collection} />;
       }
+      case 'settings': {
+        return <Settings item={item} collection={collection} />;
+      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -113,6 +101,7 @@ const HttpRequestPane = ({ item, collection }) => {
   const requestVars = getPropertyFromDraftOrRequest('request.vars.req');
   const responseVars = getPropertyFromDraftOrRequest('request.vars.res');
   const auth = getPropertyFromDraftOrRequest('request.auth');
+  const tags = getPropertyFromDraftOrRequest('tags');
 
   const activeParamsLength = params.filter((param) => param.enabled).length;
   const activeHeadersLength = headers.filter((header) => header.enabled).length;
@@ -136,7 +125,7 @@ const HttpRequestPane = ({ item, collection }) => {
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
-          {body.mode !== 'none' && <ContentIndicator />}
+          {body.mode !== 'none' && <StatusDot />}
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
@@ -144,7 +133,7 @@ const HttpRequestPane = ({ item, collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
           Auth
-          {auth.mode !== 'none' && <ContentIndicator />}
+          {auth.mode !== 'none' && <StatusDot />}
         </div>
         <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
           Vars
@@ -153,9 +142,9 @@ const HttpRequestPane = ({ item, collection }) => {
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script
           {(script.req || script.res) && (
-            item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage ? 
-            <ErrorIndicator /> : 
-            <ContentIndicator />
+            item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage ?
+            <StatusDot type="error" /> :
+            <StatusDot />
           )}
         </div>
         <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
@@ -164,11 +153,19 @@ const HttpRequestPane = ({ item, collection }) => {
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
-          {tests && tests.length > 0 && <ContentIndicator />}
+          {tests && tests.length > 0 && (
+            item.testScriptErrorMessage ?
+              <StatusDot type="error" /> :
+              <StatusDot />
+          )}
         </div>
         <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
           Docs
-          {docs && docs.length > 0 && <ContentIndicator />}
+          {docs && docs.length > 0 && <StatusDot />}
+        </div>
+        <div className={getTabClassname('settings')} role="tab" onClick={() => selectTab('settings')}>
+          Settings
+          {tags && tags.length > 0 && <StatusDot />}
         </div>
         {focusedTab.requestPaneTab === 'body' ? (
           <div className="flex flex-grow justify-end items-center">

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

@@ -20,6 +20,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
   const isMac = isMacOS();
   const saveShortcut = isMac ? 'Cmd + S' : 'Ctrl + S';
   const editorRef = useRef(null);
+  const isGrpc = item.type === 'grpc-request';
 
   const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
   const [generateCodeItemModalOpen, setGenerateCodeItemModalOpen] = useState(false);
@@ -80,9 +81,17 @@ const QueryUrl = ({ item, collection, handleRun }) => {
   return (
     <StyledWrapper className="flex items-center">
       <div className="flex items-center h-full method-selector-container">
-        <HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
+        {isGrpc ? (
+          <div className="flex items-center justify-center h-full w-16">
+            <span className="text-xs text-indigo-500 font-bold">gRPC</span>
+          </div>
+          
+        ) : (
+          <HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
+        )}
       </div>
       <div
+        id="request-url"
         className="flex items-center flex-grow input-container h-full"
         style={{
           color: 'yellow',

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

@@ -71,81 +71,81 @@ const RequestBodyMode = ({ item, collection }) => {
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer body-mode-selector">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div className="label-item font-medium">Form</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('multipartForm');
-            }}
-          >
-            Multipart Form
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('formUrlEncoded');
-            }}
-          >
-            Form URL Encoded
-          </div>
-          <div className="label-item font-medium">Raw</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('json');
-            }}
-          >
-            JSON
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('xml');
-            }}
-          >
-            XML
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('text');
-            }}
-          >
-            TEXT
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('sparql');
-            }}
-          >
-            SPARQL
-          </div>
-          <div className="label-item font-medium">Other</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('file');
-            }}
-          >
-            File / Binary
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Body
-          </div>
+        <div className="label-item font-medium">Form</div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            dropdownTippyRef.current.hide();
+            onModeChange('multipartForm');
+          }}
+        >
+          Multipart Form
+        </div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            dropdownTippyRef.current.hide();
+            onModeChange('formUrlEncoded');
+          }}
+        >
+          Form URL Encoded
+        </div>
+        <div className="label-item font-medium">Raw</div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            dropdownTippyRef.current.hide();
+            onModeChange('json');
+          }}
+        >
+          JSON
+        </div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            dropdownTippyRef.current.hide();
+            onModeChange('xml');
+          }}
+        >
+          XML
+        </div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            dropdownTippyRef.current.hide();
+            onModeChange('text');
+          }}
+        >
+          TEXT
+        </div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            dropdownTippyRef.current.hide();
+            onModeChange('sparql');
+          }}
+        >
+          SPARQL
+        </div>
+        <div className="label-item font-medium">Other</div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            dropdownTippyRef.current.hide();
+            onModeChange('file');
+          }}
+        >
+          File / Binary
+        </div>
+        <div
+          className="dropdown-item"
+          onClick={() => {
+            dropdownTippyRef.current.hide();
+            onModeChange('none');
+          }}
+        >
+          No Body
+        </div>
         </Dropdown>
       </div>
       {(bodyMode === 'json' || bodyMode === 'xml') && (

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

@@ -79,4 +79,4 @@ const RequestBody = ({ item, collection }) => {
 
   return <StyledWrapper className="w-full">No Body</StyledWrapper>;
 };
-export default RequestBody;
+export default RequestBody;

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

@@ -16,7 +16,7 @@ import BulkEditor from '../../BulkEditor';
 
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
-const RequestHeaders = ({ item, collection }) => {
+const RequestHeaders = ({ item, collection, addHeaderText }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
@@ -181,7 +181,7 @@ const RequestHeaders = ({ item, collection }) => {
       </Table>
       <div className="flex justify-between mt-2">
         <button className="btn-action text-link pr-2 py-3 select-none" onClick={addHeader}>
-          + Add Header
+          + {addHeaderText || 'Add Header'}
         </button>
         <button className="btn-action text-link select-none" onClick={toggleBulkEditMode}>
           Bulk Edit

packages/bruno-app/src/components/RequestPane/Settings/Tags/index.js

@@ -0,0 +1,63 @@
+import React, { useCallback, useEffect } from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import { addRequestTag, deleteRequestTag, updateCollectionTagsList } from 'providers/ReduxStore/slices/collections';
+import TagList from 'components/TagList/index';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+
+const Tags = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  // all tags in the collection
+  const collectionTags = collection.allTags || [];
+
+  // tags for the current request
+  const tags = item.draft ? get(item, 'draft.tags', []) : get(item, 'tags', []);
+
+  // Filter out tags that are already associated with the current request
+  const collectionTagsWithoutCurrentRequestTags = collectionTags?.filter(tag => !tags.includes(tag)) || [];
+
+  const handleAdd = useCallback((tag) => {
+    const trimmedTag = tag.trim();
+    if (trimmedTag && !tags.includes(trimmedTag)) {
+      dispatch(
+        addRequestTag({
+          tag: trimmedTag,
+          itemUid: item.uid,
+          collectionUid: collection.uid
+        })
+      );
+    }
+  }, [dispatch, tags, item.uid, collection.uid]);
+
+  const handleRemove = useCallback((tag) => {
+    dispatch(
+      deleteRequestTag({
+        tag,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  }, [dispatch, item.uid, collection.uid]);
+
+  const handleRequestSave = () => {
+    dispatch(saveRequest(item.uid, collection.uid));
+  }
+
+  useEffect(() => {
+    dispatch(updateCollectionTagsList({ collectionUid: collection.uid }));
+  }, [collection.uid, dispatch]);
+
+  return (
+    <div className="flex flex-col">
+      <TagList 
+        tagsHintList={collectionTagsWithoutCurrentRequestTags}
+        handleAddTag={handleAdd} 
+        handleRemoveTag={handleRemove}
+        tags={tags}
+        onSave={handleRequestSave}
+      />
+    </div>
+  );
+};
+
+export default Tags; 

packages/bruno-app/src/components/RequestPane/Settings/ToggleSelector/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+const ToggleSelector = ({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  size = 'small' // 'small', 'medium', 'large'
+}) => {
+  const sizeClasses = {
+    small: {
+      container: 'h-4 w-8',
+      thumb: 'h-3 w-3',
+      translate: checked ? 'translate-x-4' : 'translate-x-1'
+    },
+    medium: {
+      container: 'h-5 w-9',
+      thumb: 'h-3 w-3',
+      translate: checked ? 'translate-x-5' : 'translate-x-1'
+    },
+    large: {
+      container: 'h-6 w-11',
+      thumb: 'h-4 w-4',
+      translate: checked ? 'translate-x-6' : 'translate-x-1'
+    }
+  };
+
+  const currentSize = sizeClasses[size];
+
+  return (
+    <div className="flex items-center gap-3">
+      <button
+        type="button"
+        onClick={onChange}
+        disabled={disabled}
+        className={`
+          relative inline-flex ${currentSize.container} mx-1 items-center rounded-full transition-colors
+          focus:outline-none focus:ring-1 focus:ring-offset-1
+          ${disabled
+            ? 'opacity-50 cursor-not-allowed'
+            : 'cursor-pointer'
+          }
+          ${checked
+            ? 'bg-blue-600 dark:bg-blue-500'
+            : 'bg-gray-200 dark:bg-gray-700'
+          }
+        `}
+        role="switch"
+        aria-checked={checked}
+        aria-disabled={disabled}
+      >
+        <span
+          className={`
+            inline-block ${currentSize.thumb} transform rounded-full bg-white transition-transform
+            ${currentSize.translate}
+          `}
+        />
+      </button>
+      <div className="flex flex-col">
+        <label className="text-xs font-medium text-gray-900 dark:text-gray-100">
+          {label}
+        </label>
+        {description && (
+          <p className="text-xs text-gray-700 dark:text-gray-400">
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ToggleSelector;

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

@@ -0,0 +1,50 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { IconTag } from '@tabler/icons';
+import ToggleSelector from 'components/RequestPane/Settings/ToggleSelector';
+import { updateItemSettings } from 'providers/ReduxStore/slices/collections';
+import Tags from './Tags/index';
+
+const Settings = ({ item, collection }) => {
+  const dispatch = useDispatch();
+
+  // get the length of active params, headers, asserts and vars as well as the contents of the body, tests and script
+  const getPropertyFromDraftOrRequest = (propertyKey) =>
+    item.draft ? get(item, `draft.${propertyKey}`, {}) : get(item, propertyKey, {});
+
+  const { encodeUrl } = getPropertyFromDraftOrRequest('settings');
+
+  const onToggleUrlEncoding = useCallback(() => {
+    dispatch(updateItemSettings({
+      collectionUid: collection.uid,
+      itemUid: item.uid,
+      settings: { encodeUrl: !encodeUrl }
+    }));
+  }, [encodeUrl, dispatch, collection.uid, item.uid]);
+
+  return (
+    <div className="w-full h-full flex flex-col gap-10">
+      <div className='flex flex-col gap-2 max-w-[400px]'>
+        <h3 className="text-xs font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1">
+          <IconTag size={16} />
+          Tags
+        </h3>
+        <div label="Tags">
+          <Tags item={item} collection={collection} />
+        </div>
+      </div>
+      <div className='flex flex-col gap-4'>
+        <ToggleSelector
+          checked={encodeUrl}
+          onChange={onToggleUrlEncoding}
+          label="URL Encoding"
+          description="Automatically encode query parameters in the URL"
+          size="medium"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Settings;

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

@@ -1,16 +1,13 @@
 import { IconLoader2, IconFile, IconAlertTriangle } from '@tabler/icons';
-import { loadRequest, loadRequestViaWorker } from 'providers/ReduxStore/slices/collections/actions';
+import { loadLargeRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 
 const RequestNotLoaded = ({ collection, item }) => {
   const dispatch = useDispatch();
-  const handleLoadRequestViaWorker = () => {
-    !item?.loading && dispatch(loadRequestViaWorker({ collectionUid: collection?.uid, pathname: item?.pathname }));
-  }
 
-  const handleLoadRequest = () => {
-    !item?.loading && dispatch(loadRequest({ collectionUid: collection?.uid, pathname: item?.pathname }));
+  const handleLoadLargeRequest = () => {
+    !item?.loading && dispatch(loadLargeRequest({ collectionUid: collection?.uid, pathname: item?.pathname }));
   }
 
   return <StyledWrapper>
@@ -44,23 +41,14 @@ const RequestNotLoaded = ({ collection, item }) => {
                 <IconAlertTriangle size={16} className="text-yellow-500" />
                 <span>The request wasn't loaded due to its large size. Please try again with the following options:</span>
               </div>
-              <div className='flex flex-row mt-6 gap-2 items-center w-full'>
-                  <button 
-                    className={`submit btn btn-sm btn-secondary w-fit h-fit flex flex-row gap-2 ${item?.loading? 'opacity-50 cursor-blocked': ''}`} 
-                    onClick={handleLoadRequestViaWorker}
-                  >
-                    Load in background
-                  </button>
-                <p>(Runs in background)</p>
-              </div>
               <div className='flex flex-row mt-6 items-center gap-2 w-full'>
                   <button 
                     className={`submit btn btn-sm btn-secondary w-fit h-fit flex flex-row gap-2 ${item?.loading? 'opacity-50 cursor-blocked': ''}`} 
-                    onClick={handleLoadRequest}
+                    onClick={handleLoadLargeRequest}
                   >
-                    Force load
+                    Load Request
                   </button>
-                  <p>(May cause the app to freeze temporarily while it runs)</p>
+                  <p>(Uses a regex based parsing approach)</p>
               </div>
             </div>
           )}

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

@@ -18,6 +18,7 @@ const StyledWrapper = styled.div`
     padding: 0;
     cursor: col-resize;
     background: transparent;
+    position: relative;
 
     div.dragbar-handle {
       display: flex;
@@ -45,6 +46,7 @@ const StyledWrapper = styled.div`
       height: 10px;
       cursor: row-resize;
       padding: 0 1rem;
+      position: relative;
 
       div.dragbar-handle {
         width: 100%;

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

@@ -4,13 +4,16 @@ import toast from 'react-hot-toast';
 import { useSelector, useDispatch } from 'react-redux';
 import GraphQLRequestPane from 'components/RequestPane/GraphQLRequestPane';
 import HttpRequestPane from 'components/RequestPane/HttpRequestPane';
+import GrpcRequestPane from 'components/RequestPane/GrpcRequestPane/index';
 import ResponsePane from 'components/ResponsePane';
+import GrpcResponsePane from 'components/ResponsePane/GrpcResponsePane';
 import Welcome from 'components/Welcome';
 import { findItemInCollection } from 'utils/collections';
 import { updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import RequestNotFound from './RequestNotFound';
-import QueryUrl from 'components/RequestPane/QueryUrl';
+import QueryUrl from 'components/RequestPane/QueryUrl/index';
+import GrpcQueryUrl from 'components/RequestPane/GrpcQueryUrl/index';
 import NetworkError from 'components/ResponsePane/NetworkError';
 import RunnerResults from 'components/RunnerResults';
 import VariablesEditor from 'components/VariablesEditor';
@@ -180,6 +183,9 @@ const RequestTabPanel = () => {
     return <div className="pb-4 px-4">Collection not found!</div>;
   }
 
+  const item = findItemInCollection(collection, activeTabUid);
+  const isGrpcRequest = item?.type === 'grpc-request';
+
   if (focusedTab.type === 'collection-runner') {
     return <RunnerResults collection={collection} />;
   }
@@ -201,7 +207,7 @@ const RequestTabPanel = () => {
     if (!folder) {
       return <FolderNotFound folderUid={focusedTab.folderUid} />;
     }
-    
+
     return <FolderSettings collection={collection} folder={folder} />;
   }
 
@@ -209,20 +215,32 @@ const RequestTabPanel = () => {
     return <SecuritySettings collection={collection} />;
   }
 
-  const item = findItemInCollection(collection, activeTabUid);
   if (!item || !item.uid) {
     return <RequestNotFound itemUid={activeTabUid} />;
   }
 
   if (item?.partial) {
-    return <RequestNotLoaded item={item} collection={collection} />
+    return <RequestNotLoaded item={item} collection={collection} />;
   }
 
   if (item?.loading) {
-    return <RequestIsLoading item={item} />
+    return <RequestIsLoading item={item} />;
   }
 
   const handleRun = async () => {
+    const isGrpcRequest = item?.type === 'grpc-request';
+    const request = item.draft ? item.draft.request : item.request;
+
+    if (isGrpcRequest && !request.url) {
+      toast.error('Please enter a valid gRPC server URL');
+      return;
+    }
+
+    if (isGrpcRequest && !request.method) {
+      toast.error('Please select a gRPC method');
+      return;
+    }
+
     dispatch(sendRequest(item, collection.uid)).catch((err) =>
       toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
         duration: 5000
@@ -233,9 +251,13 @@ const RequestTabPanel = () => {
   return (
     <StyledWrapper className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''} ${isVerticalLayout ? 'vertical-layout' : ''}`}>
       <div className="pt-4 pb-3 px-4">
-        <QueryUrl item={item} collection={collection} handleRun={handleRun} />
+        {isGrpcRequest ? (
+          <GrpcQueryUrl item={item} collection={collection} handleRun={handleRun} />
+        ) : (
+          <QueryUrl item={item} collection={collection} handleRun={handleRun} />
+        )}
       </div>
-      <section ref={mainSectionRef} className={`main flex ${isVerticalLayout ? 'flex-col' : ''} flex-grow pb-4 relative`}>
+      <section ref={mainSectionRef} className={`main flex ${isVerticalLayout ? 'flex-col' : ''} flex-grow pb-4 relative overflow-auto`}>
         <section className="request-pane">
           <div
             className="px-4 h-full"
@@ -260,6 +282,10 @@ const RequestTabPanel = () => {
             {item.type === 'http-request' ? (
               <HttpRequestPane item={item} collection={collection} />
             ) : null}
+
+            {isGrpcRequest ? (
+              <GrpcRequestPane item={item} collection={collection} handleRun={handleRun} />
+            ) : null}
           </div>
         </section>
 
@@ -268,7 +294,20 @@ const RequestTabPanel = () => {
         </div>
 
         <section className="response-pane flex-grow overflow-x-auto">
-          <ResponsePane item={item} collection={collection} response={item.response} />
+          {item.type === 'grpc-request' ? (
+            <GrpcResponsePane
+              item={item}
+              collection={collection}
+             
+              response={item.response}
+            />
+          ) : (
+            <ResponsePane
+              item={item}
+              collection={collection}
+              response={item.response}
+            />
+          )}
         </section>
       </section>