From c68735dd9085f16608c75f70a310b541df410818 Mon Sep 17 00:00:00 2001
From: Sundram Gupta <sundram@usebruno.com>
Date: Tue, 22 Sep 2026 19:13:12 +0530
Subject: [PATCH 1/5] feat(docs): execution context sections, post-response
 vars and env switcher

Splits the folder and collection pages into a configuration section and a
collapsible Execution Context section, shows both variable phases with
"None." when one is empty, wires the playground folder Vars tab to
post-response variables, and clamps long environment names with a tooltip.
---
 .../folder/folder-configuration.component.ts  |  1 +
 .../collection-configuration.component.ts     | 29 ++++----
 .../e2e/components/playground.component.ts    |  1 +
 .../bruno-api-docs/e2e/pages/folder.page.ts   |  2 +
 .../bruno-api-docs/e2e/pages/overview.page.ts |  1 +
 .../environments/env-switcher-empty.spec.ts   | 32 +++++++++
 .../env-switcher-truncation.spec.ts           | 52 ++++++++++++++
 .../e2e/tests/folder/folder.spec.ts           | 58 +++++++++++++++
 .../e2e/tests/overview/overview.spec.ts       | 72 +++++++++++++++----
 .../playground/folder-settings-vars.spec.ts   | 28 ++++++++
 .../src/components/AppShell/AppShell.tsx      |  2 +-
 .../EnvSwitcher/EnvSwitcher.spec.tsx          | 59 +++++++++++----
 .../components/EnvSwitcher/EnvSwitcher.tsx    | 42 ++++++++---
 .../components/EnvSwitcher/StyledWrapper.ts   |  9 ---
 .../EnvironmentLabel.spec.tsx                 | 18 +++++
 .../EnvironmentLabel/EnvironmentLabel.tsx     | 14 +++-
 .../EnvironmentLabel/StyledWrapper.ts         | 10 +++
 .../VariablesPanel/VariablesPanel.spec.tsx    | 12 ++--
 .../VariablesPanel/VariablesPanel.tsx         |  6 +-
 .../FolderConfiguration.spec.tsx              | 34 ++++++++-
 .../FolderConfiguration.tsx                   | 38 +++++-----
 .../FolderConfiguration/StyledWrapper.ts      | 11 +++
 .../CollectionConfiguration.spec.tsx          | 26 +++++++
 .../CollectionConfiguration.tsx               | 15 ++--
 .../FolderSettingsView/FolderSettingsView.tsx | 13 +++-
 .../src/e2eFixtures/foldersCollection.ts      |  4 +-
 .../src/pages/Folder/Folder.spec.tsx          | 54 ++++++++++++++
 .../src/pages/Folder/Folder.tsx               | 57 +++++++++++----
 .../src/pages/Overview/Overview.spec.tsx      | 56 +++++++++++++++
 .../src/pages/Overview/Overview.tsx           | 65 +++++++++++------
 .../src/pages/Overview/StyledWrapper.ts       |  5 +-
 .../src/utils/collectionOverview.spec.ts      | 39 +++++++++-
 .../src/utils/collectionOverview.ts           | 13 ++--
 .../bruno-api-docs/src/utils/folder.spec.ts   | 58 +++++++++++++++
 packages/bruno-api-docs/src/utils/folder.ts   | 15 ++--
 35 files changed, 804 insertions(+), 147 deletions(-)
 create mode 100644 packages/bruno-api-docs/e2e/tests/environments/env-switcher-empty.spec.ts
 create mode 100644 packages/bruno-api-docs/e2e/tests/environments/env-switcher-truncation.spec.ts
 create mode 100644 packages/bruno-api-docs/e2e/tests/playground/folder-settings-vars.spec.ts

diff --git a/packages/bruno-api-docs/e2e/components/folder/folder-configuration.component.ts b/packages/bruno-api-docs/e2e/components/folder/folder-configuration.component.ts
index ed8c0199..6137579b 100644
--- a/packages/bruno-api-docs/e2e/components/folder/folder-configuration.component.ts
+++ b/packages/bruno-api-docs/e2e/components/folder/folder-configuration.component.ts
@@ -2,6 +2,7 @@ import { BaseComponent } from '../base.component';
 
 export class FolderConfigurationComponent extends BaseComponent {
   readonly root = this.page.getByTestId('folder-config');
+  readonly executionContext = this.page.getByTestId('folder-execution-context');
   readonly headers = this.page.getByTestId('folder-config-headers');
   readonly auth = this.page.getByTestId('folder-config-auth');
   readonly script = this.page.getByTestId('folder-config-script');
diff --git a/packages/bruno-api-docs/e2e/components/overview/collection-configuration.component.ts b/packages/bruno-api-docs/e2e/components/overview/collection-configuration.component.ts
index 1267ab31..44a90e6b 100644
--- a/packages/bruno-api-docs/e2e/components/overview/collection-configuration.component.ts
+++ b/packages/bruno-api-docs/e2e/components/overview/collection-configuration.component.ts
@@ -1,25 +1,26 @@
-import type { Locator } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';
 import { SecretValueComponent } from '../secret-value.component';
 
 export class ConfigurationSection extends BaseComponent {
-  readonly root = this.page.getByTestId('collection-config');
+  readonly copyButton: Locator;
+  readonly secret: SecretValueComponent;
+  readonly disabledRows: Locator;
 
-  readonly copyButton = this.root.getByTestId('collection-config-tests-copy');
+  private readonly testId: string;
 
-  readonly secret = new SecretValueComponent(
-    this.page,
-    'collection-config-auth-token-secret'
-  );
-
-  readonly disabledRows = this.root
-    .getByTestId('property-value-line')
-    .filter({ has: this.page.getByTestId('disabled-badge') });
+  constructor(page: Page, testId = 'collection-config') {
+    super(page, page.getByTestId(testId));
+    this.testId = testId;
+    this.copyButton = this.root.getByTestId(`${testId}-tests-copy`);
+    this.secret = new SecretValueComponent(page, `${testId}-auth-token-secret`);
+    this.disabledRows = this.root
+      .getByTestId('property-value-line')
+      .filter({ has: page.getByTestId('disabled-badge') });
+  }
 
   subHeading(name: string): Locator {
-    return this.root
-      .getByTestId('collection-config-subheading')
-      .filter({ hasText: name });
+    return this.root.getByTestId(`${this.testId}-subheading`).filter({ hasText: name });
   }
 
   async copyToClipboard(): Promise<void> {
diff --git a/packages/bruno-api-docs/e2e/components/playground.component.ts b/packages/bruno-api-docs/e2e/components/playground.component.ts
index b8e5df11..969c06ea 100644
--- a/packages/bruno-api-docs/e2e/components/playground.component.ts
+++ b/packages/bruno-api-docs/e2e/components/playground.component.ts
@@ -12,6 +12,7 @@ import type { DockMode } from '../../src/utils/playgroundDock';
 export class PlaygroundComponent extends BaseComponent {
   readonly keyValueTable = new KeyValueTableComponent(this.page);
   readonly preRequestVars = new KeyValueTableComponent(this.page, 'variables-pre-request');
+  readonly postResponseVars = new KeyValueTableComponent(this.page, 'variables-post-response');
   // The Auth tab lives inside the playground request pane; open it with selectTab('auth').
   readonly auth = new RequestAuthComponent(this.page);
   readonly methodSelector = new MethodSelectorComponent(this.page);
diff --git a/packages/bruno-api-docs/e2e/pages/folder.page.ts b/packages/bruno-api-docs/e2e/pages/folder.page.ts
index ca31e8bf..228fc8d0 100644
--- a/packages/bruno-api-docs/e2e/pages/folder.page.ts
+++ b/packages/bruno-api-docs/e2e/pages/folder.page.ts
@@ -11,6 +11,8 @@ export class FolderPage extends BasePage {
   readonly folderMarkdownDocs = this.page.getByTestId('folder-docs');
   readonly folderMarkdownDocsToggle = this.page.getByTestId('folder-docs-toggle');
   readonly emptyState = this.page.getByTestId('folder-config-empty');
+  readonly configurationSection = this.page.getByTestId('folder-section-configuration');
+  readonly executionContextSection = this.page.getByTestId('folder-section-execution-context');
 
   readonly sidebar = new SidebarComponent(this.page);
   readonly breadcrumb = new BreadcrumbComponent(this.page, 'folder-breadcrumb');
diff --git a/packages/bruno-api-docs/e2e/pages/overview.page.ts b/packages/bruno-api-docs/e2e/pages/overview.page.ts
index a8919c86..ba3caeaa 100644
--- a/packages/bruno-api-docs/e2e/pages/overview.page.ts
+++ b/packages/bruno-api-docs/e2e/pages/overview.page.ts
@@ -14,6 +14,7 @@ export class OverviewPage extends BasePage {
   readonly stats = new StatsSection(this.page);
   readonly environments = new EnvironmentsSection(this.page);
   readonly configuration = new ConfigurationSection(this.page);
+  readonly executionContext = new ConfigurationSection(this.page, 'collection-execution-context');
   readonly docMarkdown = new MarkdownComponent(this.page, this.page.getByTestId('overview-markdown-documentation'));
   readonly variableCard = new VariableCardComponent(this.page, this.root);
 
diff --git a/packages/bruno-api-docs/e2e/tests/environments/env-switcher-empty.spec.ts b/packages/bruno-api-docs/e2e/tests/environments/env-switcher-empty.spec.ts
new file mode 100644
index 00000000..d6406c4d
--- /dev/null
+++ b/packages/bruno-api-docs/e2e/tests/environments/env-switcher-empty.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from '../../playwright';
+
+const NO_ENVIRONMENTS = '/?fixture=descriptions';
+
+test.describe('Environment switcher with no environments', () => {
+  test('is hidden in the docs header', async ({ page, envSwitcher }) => {
+    await page.goto(NO_ENVIRONMENTS);
+    await expect(envSwitcher.showVarsToggle).toBeVisible();
+    await expect(envSwitcher.root).toHaveCount(0);
+  });
+
+  test('still shows its empty state in the playground sidebar', async ({ page, playground }) => {
+    await page.goto(`${NO_ENVIRONMENTS}#/?pg=1&dock=bottom`);
+    await playground.ensureSidebarOpen();
+    await expect(playground.envSwitcher.trigger).toBeVisible();
+    await expect(playground.envSwitcher.trigger).toContainText('No environments');
+  });
+
+  test('opens no menu in the playground, and shows no caret', async ({ page, playground }) => {
+    await page.goto(`${NO_ENVIRONMENTS}#/?pg=1&dock=bottom`);
+    await playground.ensureSidebarOpen();
+    const { trigger } = playground.envSwitcher;
+
+    await expect(trigger).toHaveAttribute('aria-disabled', 'true');
+    await expect(trigger.locator('.env-switcher-chevron')).toHaveCount(0);
+
+    // Forced: Playwright sees it as disabled and would not click it otherwise.
+    await trigger.click({ force: true });
+    await page.waitForTimeout(300);
+    await expect(playground.envSwitcher.menu).toHaveCount(0);
+  });
+});
diff --git a/packages/bruno-api-docs/e2e/tests/environments/env-switcher-truncation.spec.ts b/packages/bruno-api-docs/e2e/tests/environments/env-switcher-truncation.spec.ts
new file mode 100644
index 00000000..70532268
--- /dev/null
+++ b/packages/bruno-api-docs/e2e/tests/environments/env-switcher-truncation.spec.ts
@@ -0,0 +1,52 @@
+import { test, expect } from '../../playwright';
+
+const LONG_ENV = 'staging-regression-automation-eu-west-1';
+const FIXTURE = '/?fixture=folders';
+
+const isClipped = (el: HTMLElement): boolean => el.scrollWidth > el.clientWidth + 1;
+
+test.describe('Environment switcher name truncation', () => {
+  test('clips a long name in the trigger and reveals it in a tooltip on hover', async ({
+    page,
+    envSwitcher,
+    tooltip
+  }) => {
+    await page.goto(FIXTURE);
+    await envSwitcher.selectEnvironment(LONG_ENV);
+
+    const name = envSwitcher.trigger.getByTestId('truncated-text');
+    await expect(name).toHaveText(LONG_ENV);
+    expect(await name.evaluate(isClipped)).toBe(true);
+
+    await name.hover();
+    await expect(tooltip.popup).toBeVisible();
+    await expect(tooltip.popup).toHaveText(LONG_ENV);
+  });
+
+  test('clips the same long name inside the open dropdown, revealing it via the native title', async ({
+    page,
+    envSwitcher
+  }) => {
+    await page.goto(FIXTURE);
+    await envSwitcher.open();
+
+    const option = envSwitcher.option(LONG_ENV);
+    await expect(option).toHaveAttribute('title', LONG_ENV);
+    const name = option.locator('.environment-label-name--clamped');
+    await expect(name).toHaveText(LONG_ENV);
+    expect(await name.evaluate(isClipped)).toBe(true);
+  });
+
+  test('shows no tooltip for a short name, which is not clipped', async ({ page, envSwitcher, tooltip }) => {
+    await page.goto(FIXTURE);
+    await envSwitcher.selectEnvironment('Dev');
+
+    const name = envSwitcher.trigger.getByTestId('truncated-text');
+    await expect(name).toHaveText('Dev');
+    expect(await name.evaluate(isClipped)).toBe(false);
+
+    await name.hover();
+    await page.waitForTimeout(400);
+    await expect(tooltip.popup).toHaveCount(0);
+  });
+});
diff --git a/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts b/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts
index 99c39221..70d8380a 100644
--- a/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts
+++ b/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts
@@ -69,3 +69,61 @@ test.describe('Folder page', () => {
     });
   });
 });
+
+test.describe('Folder page sections', () => {
+  test('separates headers and auth from the execution context', async ({ folderPage }) => {
+    await folderPage.open(['Realtime']);
+
+    await expect(folderPage.configurationSection).toBeVisible();
+    await expect(folderPage.configurationSection).toContainText('Folder Configuration');
+    await expect(folderPage.executionContextSection).toBeVisible();
+    await expect(folderPage.executionContextSection).toContainText('Execution Context');
+
+    await test.step('headers stay under Folder Configuration', async () => {
+      await expect(folderPage.configurationSection.getByTestId('folder-config-headers')).toBeVisible();
+      await expect(folderPage.executionContextSection.getByTestId('folder-config-headers')).toHaveCount(0);
+    });
+
+    await test.step('variables move under Execution Context', async () => {
+      await expect(folderPage.executionContextSection.getByTestId('folder-config-vars')).toBeVisible();
+      await expect(folderPage.configurationSection.getByTestId('folder-config-vars')).toHaveCount(0);
+    });
+  });
+});
+
+test.describe('Folder variable phases', () => {
+  test('shows both Pre-Request and Post-Response, marking the empty one "None."', async ({ folderPage }) => {
+    await folderPage.open(['Realtime']);
+    await expect(folderPage.configuration.vars).toContainText('Pre-Request');
+    await expect(folderPage.configuration.vars).toContainText('Post-Response');
+    await expect(folderPage.configuration.vars).toContainText('None.');
+  });
+});
+
+test.describe('Folder empty variable phase', () => {
+  test('frames the empty Post-Response table like the populated one beside it', async ({ folderPage }) => {
+    await folderPage.open(['Realtime']);
+    const empty = folderPage.configuration.vars.getByTestId('property-table-empty');
+    await expect(empty).toBeVisible();
+    await expect(empty).toHaveText('None.');
+    const framing = await empty.evaluate((el) => getComputedStyle(el).boxShadow);
+    expect(framing).not.toBe('none');
+  });
+});
+
+test.describe('Folder execution context accordion', () => {
+  test('collapses the Execution Context section and remembers it across a reload', async ({ folderPage, page }) => {
+    await folderPage.open(['Realtime']);
+    const toggle = folderPage.executionContextSection.getByRole('button', { name: /Execution Context/i });
+
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    await expect(folderPage.configuration.vars).toBeVisible();
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await expect(folderPage.configuration.vars).toBeHidden();
+
+    await page.reload();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+});
diff --git a/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts b/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts
index aab31cee..f516d5a0 100644
--- a/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts
+++ b/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts
@@ -36,7 +36,7 @@ test.describe('Collection Overview', () => {
   });
 
   test.describe('Collection Configuration', () => {
-    test('shows the Headers, Auth, Variables, Script and Tests groups with their values', async ({ overviewPage }) => {
+    test('shows the Headers and Auth groups with their values', async ({ overviewPage }) => {
       const { configuration } = overviewPage;
       await expect(overviewPage.sectionLabel('Collection Configuration')).toBeVisible();
 
@@ -49,19 +49,65 @@ test.describe('Collection Overview', () => {
         await expect(configuration.subHeading('Auth')).toBeVisible();
         await expect(configuration.root.getByText('Bearer Token')).toBeVisible();
       });
+    });
+
+    test('shows the Variables, Script and Tests groups under Execution Context', async ({ overviewPage }) => {
+      const { executionContext } = overviewPage;
+      await expect(overviewPage.sectionLabel('Execution Context')).toBeVisible();
 
       await test.step('the Variables group lists the collection-level pre-request variables', async () => {
-        await expect(configuration.subHeading('Variables')).toBeVisible();
-        await expect(configuration.root.getByText('collection_pre_var_value', { exact: true })).toBeVisible();
-        await expect(configuration.root.getByText('collection-var-value', { exact: true })).toBeVisible();
+        await expect(executionContext.subHeading('Variables')).toBeVisible();
+        await expect(executionContext.root.getByText('collection_pre_var_value', { exact: true })).toBeVisible();
+        await expect(executionContext.root.getByText('collection-var-value', { exact: true })).toBeVisible();
       });
 
       await test.step('the Script and Tests groups are present', async () => {
-        await expect(configuration.subHeading('Script')).toBeVisible();
-        await expect(configuration.subHeading('Tests')).toBeVisible();
+        await expect(executionContext.subHeading('Script')).toBeVisible();
+        await expect(executionContext.subHeading('Tests')).toBeVisible();
       });
     });
 
+    test('separates the two sections with a gap, so the headings do not run together', async ({ overviewPage }) => {
+      const configBox = (await overviewPage.sectionLabel('Collection Configuration').boundingBox())!;
+      const executionBox = (await overviewPage.sectionLabel('Execution Context').boundingBox())!;
+      expect(executionBox.y).toBeGreaterThan(configBox.y + configBox.height + 12);
+    });
+
+    test('collapses the Execution Context section and remembers it across a reload', async ({
+      overviewPage,
+      page
+    }) => {
+      const toggle = () => overviewPage.sectionLabel('Execution Context').getByRole('button', { name: /Execution Context/i });
+      await expect(toggle()).toHaveAttribute('aria-expanded', 'true');
+      await expect(overviewPage.executionContext.root).toBeVisible();
+
+      await toggle().click();
+      await expect(toggle()).toHaveAttribute('aria-expanded', 'false');
+      await expect(overviewPage.executionContext.root).toBeHidden();
+
+      await page.reload();
+      await expect(toggle()).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    test('mutes the Execution Context heading like the other overview headings', async ({ overviewPage }) => {
+      const colorOf = (el: HTMLElement) => getComputedStyle(el).color;
+      const configuration = await overviewPage
+        .sectionLabel('Collection Configuration')
+        .getByTestId('section-label')
+        .evaluate(colorOf);
+      const execution = await overviewPage
+        .sectionLabel('Execution Context')
+        .getByTestId('section-label')
+        .evaluate(colorOf);
+      expect(execution).toBe(configuration);
+    });
+
+    test('keeps headers and auth out of the Execution Context section', async ({ overviewPage }) => {
+      await expect(overviewPage.executionContext.subHeading('Headers')).toHaveCount(0);
+      await expect(overviewPage.executionContext.subHeading('Auth')).toHaveCount(0);
+      await expect(overviewPage.configuration.subHeading('Script')).toHaveCount(0);
+    });
+
     test('keeps the auth token masked until the reveal toggle is clicked', async ({ overviewPage }) => {
       const { secret } = overviewPage.configuration;
 
@@ -78,11 +124,11 @@ test.describe('Collection Overview', () => {
 
     test('copies a config code snippet and confirms with a "Copied" label', async ({ overviewPage, context }) => {
       await context.grantPermissions(['clipboard-read', 'clipboard-write']);
-      const { configuration } = overviewPage;
+      const { executionContext } = overviewPage;
 
       await test.step('clicking the copy button switches its label to "Copied"', async () => {
-        await configuration.copyToClipboard();
-        await expect(configuration.copyButton).toHaveAttribute('aria-label', 'Copied');
+        await executionContext.copyToClipboard();
+        await expect(executionContext.copyButton).toHaveAttribute('aria-label', 'Copied');
       });
     });
   });
@@ -92,13 +138,13 @@ test.describe('Collection Overview', () => {
     page
   }) => {
     await page.setViewportSize({ width: 360, height: 800 });
-    const { configuration } = overviewPage;
+    const { executionContext } = overviewPage;
 
-    const rows = configuration.disabledRows;
+    const rows = executionContext.disabledRows;
     const count = await rows.count();
     expect(count).toBeGreaterThan(0);
 
-    const card = await boundingBoxOf(configuration.root);
+    const card = await boundingBoxOf(executionContext.root);
 
     for (let i = 0; i < count; i += 1) {
       const row = rows.nth(i);
@@ -116,7 +162,7 @@ test.describe('Collection Overview', () => {
     }
 
     await test.step('the table does not scroll on mobile — the value truncates instead', async () => {
-      const info = await configuration.root
+      const info = await executionContext.root
         .locator('.property-table')
         .first()
         .evaluate((el) => ({ scrollWidth: el.scrollWidth, clientWidth: el.clientWidth }));
diff --git a/packages/bruno-api-docs/e2e/tests/playground/folder-settings-vars.spec.ts b/packages/bruno-api-docs/e2e/tests/playground/folder-settings-vars.spec.ts
new file mode 100644
index 00000000..a8c53d18
--- /dev/null
+++ b/packages/bruno-api-docs/e2e/tests/playground/folder-settings-vars.spec.ts
@@ -0,0 +1,28 @@
+import { test, expect } from '../../playwright';
+
+// The desktop app's folder Vars tab has both tables, and the export carries both.
+test.describe('Playground folder settings, Vars tab', () => {
+  test.beforeEach(async ({ playground }) => {
+    await playground.open('bottom');
+    await playground.openTreeItem(['billing']);
+    await playground.folderSettingsTab('variables').click();
+  });
+
+  test('offers both a Pre Request and a Post Response table', async ({ playground }) => {
+    await expect(playground.preRequestVars.root).toBeVisible();
+    await expect(playground.postResponseVars.root).toBeVisible();
+  });
+
+  test('keeps an edited post-response variable across a tab switch', async ({ playground }) => {
+    const { postResponseVars } = playground;
+    const blankRowIndex = (await postResponseVars.nameInputs.count()) - 1;
+    await postResponseVars.nameInputs.nth(blankRowIndex).fill('sessionId');
+    await postResponseVars.valueInputs.nth(blankRowIndex).fill('res.body.id');
+
+    await playground.folderSettingsTab('headers').click();
+    await playground.folderSettingsTab('variables').click();
+
+    await expect(postResponseVars.nameInputs.nth(blankRowIndex)).toHaveValue('sessionId');
+    await expect(postResponseVars.valueInputs.nth(blankRowIndex)).toHaveValue('res.body.id');
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/AppShell/AppShell.tsx b/packages/bruno-api-docs/src/components/AppShell/AppShell.tsx
index 14609054..0b564c90 100644
--- a/packages/bruno-api-docs/src/components/AppShell/AppShell.tsx
+++ b/packages/bruno-api-docs/src/components/AppShell/AppShell.tsx
@@ -127,7 +127,7 @@ const AppShell: React.FC<AppShellProps> = ({ logo, testId = 'app-shell' }) => {
           envSwitcherSlot={(
             <>
               <ShowVarsToggle />
-              <EnvSwitcher />
+              <EnvSwitcher hideWhenEmpty />
             </>
           )}
           openInBrunoHref={openInBrunoHref}
diff --git a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.spec.tsx b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.spec.tsx
index 4a07b627..a7ec157b 100644
--- a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.spec.tsx
+++ b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.spec.tsx
@@ -8,8 +8,8 @@ import type { Environment } from '@opencollection/types/config/environments';
 import { createOpenCollectionStore } from '@/store/store';
 import { setDocsCollection } from '@/store/slices/docs';
 import { setActiveEnv } from '@/store/slices/env';
-import { getByTestId } from '@/test-utils/dom';
-import EnvSwitcher from './EnvSwitcher';
+import { getByTestId, queryByTestId } from '@/test-utils/dom';
+import EnvSwitcher, { type EnvSwitcherProps } from './EnvSwitcher';
 
 const collectionWith = (environments: Environment[]): OpenCollection => ({ config: { environments } });
 
@@ -18,7 +18,7 @@ const withEnvs = collectionWith([{ name: 'Dev' }, { name: 'Prod' }]);
 const render = (
   collection: OpenCollection,
   configure?: (s: ReturnType<typeof createOpenCollectionStore>) => void,
-  props?: { testId?: string }
+  props?: Partial<EnvSwitcherProps>
 ) => {
   const store = createOpenCollectionStore();
   store.dispatch(setDocsCollection(collection));
@@ -63,11 +63,23 @@ describe('EnvSwitcher', () => {
     expect(trigger.text).not.toContain('Ghost');
   });
 
-  it('renders an empty state when there are no environments', () => {
-    const trigger = getByTestId(render(collectionWith([])), 'env-switcher');
+  it('renders an inert empty state when there are no environments', () => {
+    const root = render(collectionWith([]));
+    const trigger = getByTestId(root, 'env-switcher');
     expect(trigger.text).toContain('No environments');
     expect(trigger.classList.contains('env-switcher-trigger--empty')).toBe(true);
     expect(trigger.getAttribute('title')).toBeFalsy();
+    expect(trigger.getAttribute('aria-disabled')).toBe('true');
+    expect(trigger.getAttribute('aria-haspopup')).toBeFalsy();
+    expect(root.querySelector('.env-switcher-chevron')).toBeFalsy();
+  });
+
+  it('keeps the caret and the menu affordance when there are environments', () => {
+    const root = render(withEnvs, (s) => s.dispatch(setActiveEnv('Dev')));
+    const trigger = getByTestId(root, 'env-switcher');
+    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');
+    expect(trigger.getAttribute('aria-disabled')).toBeFalsy();
+    expect(root.querySelector('.env-switcher-chevron')).toBeTruthy();
   });
 
   it('carries the empty modifier only when there are no environments', () => {
@@ -84,16 +96,12 @@ describe('EnvSwitcher', () => {
     expect(dot?.classList.contains('environment-label-dot--empty')).toBe(false);
   });
 
-  it('exposes the full env name in the trigger title (truncation is CSS)', () => {
+  it('renders the full env name in the trigger, clamped for the tooltip to reveal', () => {
     const long = 'development-staging-area-testing-qa-automation-local-setup-1';
-    const trigger = getByTestId(
-      render(collectionWith([{ name: long }]), (s) => s.dispatch(setActiveEnv(long))),
-      'env-switcher'
-    );
-    // The name renders in full in the DOM; the trigger button carries the full
-    // name as its title (CSS clamps the visible width with an ellipsis).
+    const root = render(collectionWith([{ name: long }]), (s) => s.dispatch(setActiveEnv(long)));
+    const trigger = getByTestId(root, 'env-switcher');
     expect(trigger.text).toContain(long);
-    expect(trigger.getAttribute('title')).toBe(long);
+    expect(getByTestId(root, 'truncated-text').classList.contains('environment-label-name--clamped')).toBe(true);
   });
 
   it('derives the root and trigger test ids from a custom testId', () => {
@@ -102,3 +110,28 @@ describe('EnvSwitcher', () => {
     expect(getByTestId(root, 'playground-env-switcher')).toBeTruthy();
   });
 });
+
+describe('EnvSwitcher hideWhenEmpty', () => {
+  it('renders nothing when the collection has no environments', () => {
+    const root = render(collectionWith([]), undefined, { hideWhenEmpty: true });
+    expect(queryByTestId(root, 'env-switcher-root')).toBeNull();
+  });
+
+  it('still renders the switcher when the collection has environments', () => {
+    const root = render(withEnvs, undefined, { hideWhenEmpty: true });
+    expect(getByTestId(root, 'env-switcher').text).toContain('Dev');
+  });
+
+  it('keeps the empty state by default, for the playground sidebar', () => {
+    const trigger = getByTestId(render(collectionWith([])), 'env-switcher');
+    expect(trigger.text).toContain('No environments');
+  });
+});
+
+describe('EnvSwitcher name truncation', () => {
+  it('drops the native title in favour of the styled tooltip anchor', () => {
+    const root = render(withEnvs, (s) => s.dispatch(setActiveEnv('Dev')));
+    expect(getByTestId(root, 'env-switcher').getAttribute('title')).toBeFalsy();
+    expect(queryByTestId(root, 'truncated-text')).toBeTruthy();
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
index b783fe0d..7e2d8789 100644
--- a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
+++ b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
@@ -9,6 +9,7 @@ import MenuDropdown, { type MenuDropdownItem } from '@/ui/MenuDropdown';
 import { StyledWrapper } from './StyledWrapper';
 
 export interface EnvSwitcherProps {
+  hideWhenEmpty?: boolean;
   testId?: string;
 }
 
@@ -22,7 +23,7 @@ export interface EnvSwitcherProps {
  * or dismissal logic of its own. Tippy's `--z-popover` surface keeps the menu
  * above every playground dock.
  */
-const EnvSwitcher: React.FC<EnvSwitcherProps> = ({ testId = 'env-switcher' }) => {
+const EnvSwitcher: React.FC<EnvSwitcherProps> = ({ hideWhenEmpty = false, testId = 'env-switcher' }) => {
   const dispatch = useAppDispatch();
   const collection = useAppSelector(selectDocsCollection);
   const activeEnvName = useAppSelector(selectActiveEnvName);
@@ -47,21 +48,45 @@ const EnvSwitcher: React.FC<EnvSwitcherProps> = ({ testId = 'env-switcher' }) =>
     }
   }, [activeEnv, activeEnvName, dispatch]);
 
+  if (hideWhenEmpty && !hasEnvironments) return null;
+
   const items: MenuDropdownItem[] = hasEnvironments
     ? environments.map((environment) => ({
         id: environment.name,
-        label: <EnvironmentLabel name={environment.name} color={environment.color} />,
+        label: (
+          <EnvironmentLabel
+            name={environment.name}
+            color={environment.color}
+            nameClassName="environment-label-name--clamped"
+          />
+        ),
         ariaLabel: environment.name,
         title: environment.name,
         onClick: () => dispatch(setActiveEnv(environment.name))
       }))
-    : [{ id: 'no-environments', label: 'No environments', disabled: true }];
+    : [];
+
+  if (!hasEnvironments) {
+    return (
+      <StyledWrapper data-testid={`${testId}-root`}>
+        <button
+          type="button"
+          className="env-switcher-trigger env-switcher-trigger--empty"
+          aria-disabled="true"
+          aria-label="Select environment"
+          data-testid={testId}
+        >
+          <EnvironmentLabel name="No environments" truncate />
+        </button>
+      </StyledWrapper>
+    );
+  }
 
   return (
     <StyledWrapper data-testid={`${testId}-root`}>
       <MenuDropdown
         items={items}
-        selectedItemId={hasEnvironments ? activeEnv?.name : undefined}
+        selectedItemId={activeEnv?.name}
         showTickMark={false}
         placement="bottom-end"
         matchTriggerWidth
@@ -69,16 +94,11 @@ const EnvSwitcher: React.FC<EnvSwitcherProps> = ({ testId = 'env-switcher' }) =>
       >
         <button
           type="button"
-          className={`env-switcher-trigger${hasEnvironments ? '' : ' env-switcher-trigger--empty'}`}
+          className="env-switcher-trigger"
           aria-haspopup="menu"
           aria-label="Select environment"
-          title={hasEnvironments ? activeEnv?.name : undefined}
         >
-          <EnvironmentLabel
-            name={hasEnvironments ? activeEnv?.name ?? '' : 'No environments'}
-            color={activeEnv?.color}
-            nameClassName="env-switcher-trigger-name"
-          />
+          <EnvironmentLabel name={activeEnv?.name ?? ''} color={activeEnv?.color} truncate />
           <span className="env-switcher-chevron">
             <ChevronDownIcon />
           </span>
diff --git a/packages/bruno-api-docs/src/components/EnvSwitcher/StyledWrapper.ts b/packages/bruno-api-docs/src/components/EnvSwitcher/StyledWrapper.ts
index 006956f0..94745680 100644
--- a/packages/bruno-api-docs/src/components/EnvSwitcher/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/components/EnvSwitcher/StyledWrapper.ts
@@ -39,13 +39,4 @@ export const StyledWrapper = styled.div`
     flex: none;
   }
 
-  .env-switcher-trigger-name {
-    max-width: 10rem;
-  }
-
-  @media (max-width: 640px) {
-    .env-switcher-trigger-name {
-      max-width: 4.5rem;
-    }
-  }
 `;
diff --git a/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.spec.tsx b/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.spec.tsx
index b8eb6f65..9a7be526 100644
--- a/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.spec.tsx
+++ b/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { describe, it, expect } from 'vitest';
 import { useRenderToDom } from '@/hooks/useRenderToDom';
+import { query } from '@/test-utils/dom';
 import { EnvironmentLabel } from './EnvironmentLabel';
 
 describe('EnvironmentLabel', () => {
@@ -23,3 +24,20 @@ describe('EnvironmentLabel', () => {
     expect(root.querySelector('.environment-label-name.env-tab-name')).toBeTruthy();
   });
 });
+
+describe('EnvironmentLabel truncation', () => {
+  it('clamps the name and anchors a tooltip when truncate is set', () => {
+    const root = useRenderToDom(<EnvironmentLabel name="development-staging-area-1" truncate />);
+    const name = query(root, '.environment-label-name');
+    expect(name.classList.contains('environment-label-name--clamped')).toBe(true);
+    expect(name.getAttribute('data-testid')).toBe('truncated-text');
+    expect(name.text.trim()).toBe('development-staging-area-1');
+  });
+
+  it('renders a plain name by default, with no clamp and no tooltip anchor', () => {
+    const root = useRenderToDom(<EnvironmentLabel name="Development" />);
+    const name = query(root, '.environment-label-name');
+    expect(name.classList.contains('environment-label-name--clamped')).toBe(false);
+    expect(name.getAttribute('data-testid')).toBeFalsy();
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx b/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
index cbca2abb..a9f92d7b 100644
--- a/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
+++ b/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { TruncatedText } from '@/components/TruncatedText/TruncatedText';
 import { StyledWrapper } from './StyledWrapper';
 
 interface EnvironmentLabelProps {
@@ -6,6 +7,7 @@ interface EnvironmentLabelProps {
   color?: string;
   className?: string;
   nameClassName?: string;
+  truncate?: boolean;
   testId?: string;
 }
 
@@ -14,6 +16,7 @@ export const EnvironmentLabel: React.FC<EnvironmentLabelProps> = ({
   color,
   className,
   nameClassName,
+  truncate = false,
   testId
 }) => (
   <StyledWrapper className={['environment-label', className].filter(Boolean).join(' ')} data-testid={testId}>
@@ -21,7 +24,16 @@ export const EnvironmentLabel: React.FC<EnvironmentLabelProps> = ({
       className={['environment-label-dot', color ? '' : 'environment-label-dot--empty'].filter(Boolean).join(' ')}
       style={color ? { background: color } : undefined}
     />
-    <span className={['environment-label-name', nameClassName].filter(Boolean).join(' ')}>{name}</span>
+    {truncate ? (
+      <TruncatedText
+        text={name}
+        className={['environment-label-name', 'environment-label-name--clamped', nameClassName]
+          .filter(Boolean)
+          .join(' ')}
+      />
+    ) : (
+      <span className={['environment-label-name', nameClassName].filter(Boolean).join(' ')}>{name}</span>
+    )}
   </StyledWrapper>
 );
 
diff --git a/packages/bruno-api-docs/src/components/EnvironmentLabel/StyledWrapper.ts b/packages/bruno-api-docs/src/components/EnvironmentLabel/StyledWrapper.ts
index 19e5e858..059c0457 100644
--- a/packages/bruno-api-docs/src/components/EnvironmentLabel/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/components/EnvironmentLabel/StyledWrapper.ts
@@ -26,4 +26,14 @@ export const StyledWrapper = styled.span`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .environment-label-name--clamped {
+    max-width: 10rem;
+  }
+
+  @media (max-width: 640px) {
+    .environment-label-name--clamped {
+      max-width: 4.5rem;
+    }
+  }
 `;
diff --git a/packages/bruno-api-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.spec.tsx b/packages/bruno-api-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.spec.tsx
index 7ce23d09..7f1a19ab 100644
--- a/packages/bruno-api-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.spec.tsx
+++ b/packages/bruno-api-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.spec.tsx
@@ -110,22 +110,22 @@ describe('VariablesPanel', () => {
       expect(html).toContain('vars-stacked');
     });
 
-    it('omits the empty side entirely (no Post-Response table / "None." placeholder)', () => {
+    it('still shows the Post-Response side, as "None.", when no captures are set', () => {
       const html = renderToStaticMarkup(
         <VariablesPanel preVars={[{ name: 'token', value: 'x' }]} postVars={[]} variant="stacked" />
       );
       expect(html).toContain('Pre-Request');
-      expect(html).not.toContain('Post-Response');
-      expect(html).not.toContain('None.');
+      expect(html).toContain('Post-Response');
+      expect(html).toContain('None.');
     });
 
-    it('omits the Pre-Request side when only post-response captures exist', () => {
+    it('still shows the Pre-Request side, as "None.", when only post-response captures exist', () => {
       const html = renderToStaticMarkup(
         <VariablesPanel preVars={[]} postVars={[{ name: 'sessionId', expression: 'res.body.id' }]} variant="stacked" />
       );
+      expect(html).toContain('Pre-Request');
       expect(html).toContain('Post-Response');
-      expect(html).not.toContain('Pre-Request');
-      expect(html).not.toContain('None.');
+      expect(html).toContain('None.');
     });
 
     it('shows both tables, labelled "Pre-Request" / "Post-Response" in the overview page', () => {
diff --git a/packages/bruno-api-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.tsx b/packages/bruno-api-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.tsx
index c7f9cf94..ef34871d 100644
--- a/packages/bruno-api-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.tsx
+++ b/packages/bruno-api-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.tsx
@@ -44,13 +44,11 @@ export const VariablesPanel: React.FC<VariablesPanelProps> = ({
   if (preTableRows.length === 0 && postTableRows.length === 0) return null;
 
   const stacked = variant === 'stacked';
-  const showPre = !stacked || preTableRows.length > 0;
-  const showPost = !stacked || postTableRows.length > 0;
 
   return (
     <StyledWrapper className={stacked ? 'vars-grid vars-stacked' : 'vars-grid'}>
-      {showPre && <Field label="Pre-Request" rows={preTableRows} onNavigate={onNavigate} />}
-      {showPost && <Field label="Post-Response" rows={postTableRows} onNavigate={onNavigate} />}
+      <Field label="Pre-Request" rows={preTableRows} onNavigate={onNavigate} />
+      <Field label="Post-Response" rows={postTableRows} onNavigate={onNavigate} />
     </StyledWrapper>
   );
 };
diff --git a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
index 1f8c28aa..a8de1672 100644
--- a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
+++ b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
@@ -154,7 +154,7 @@ describe('FolderConfiguration', () => {
     expect(vars.text).toContain('res.body.token');
   });
 
-  it('shows only the Post-Response column when there are no pre-request vars', () => {
+  it('keeps both phase columns when one of them is empty, showing "None." for the empty side', () => {
     const config: FolderConfig = {
       ...baseConfig,
       postVariables: [{ name: 'sessionId', expression: 'res.body.id', scope: 'runtime' }]
@@ -163,6 +163,36 @@ describe('FolderConfiguration', () => {
 
     const vars = getByTestId(root, 'folder-config-vars');
     const phases = vars.querySelectorAll('.config-phase-label').map((el) => el.text.trim());
-    expect(phases).toEqual(['Post-Response']);
+    expect(phases).toEqual(['Pre-Request', 'Post-Response']);
+    expect(vars.text).toContain('None.');
+  });
+});
+
+describe('FolderConfiguration groups', () => {
+  const fullConfig: FolderConfig = {
+    ...baseConfig,
+    headers: [{ name: 'Accept', value: 'application/json' }],
+    auth: { type: 'basic', username: 'u' } as FolderConfig['auth'],
+    preRequest: 'console.log(1)',
+    tests: 'expect(1).to.equal(1)',
+    variables: [{ name: 'v', value: '1' }] as FolderConfig['variables']
+  };
+
+  it('renders only headers and auth for the request groups', () => {
+    const root = useRenderToDom(<FolderConfiguration config={fullConfig} groups="request" />);
+    expect(queryByTestId(root, 'folder-config-headers')).not.toBeNull();
+    expect(queryByTestId(root, 'folder-config-auth')).not.toBeNull();
+    expect(queryByTestId(root, 'folder-config-vars')).toBeNull();
+    expect(queryByTestId(root, 'folder-config-script')).toBeNull();
+    expect(queryByTestId(root, 'folder-config-tests')).toBeNull();
+  });
+
+  it('renders only vars, script and tests for the execution groups', () => {
+    const root = useRenderToDom(<FolderConfiguration config={fullConfig} groups="execution" />);
+    expect(queryByTestId(root, 'folder-config-vars')).not.toBeNull();
+    expect(queryByTestId(root, 'folder-config-script')).not.toBeNull();
+    expect(queryByTestId(root, 'folder-config-tests')).not.toBeNull();
+    expect(queryByTestId(root, 'folder-config-headers')).toBeNull();
+    expect(queryByTestId(root, 'folder-config-auth')).toBeNull();
   });
 });
diff --git a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
index b5ddbf8e..554c5f75 100644
--- a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
+++ b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
@@ -14,6 +14,7 @@ interface FolderConfigurationProps {
   config: FolderConfig;
   authModeLabels?: Record<string, string>;
   onNavigate?: (uuid: string) => void;
+  groups?: 'request' | 'execution';
   testId?: string;
 }
 
@@ -21,19 +22,22 @@ export const FolderConfiguration: React.FC<FolderConfigurationProps> = ({
   config,
   authModeLabels = {},
   onNavigate,
+  groups,
   testId
 }) => {
+  const showRequestGroups = groups !== 'execution';
+  const showExecutionGroups = groups !== 'request';
   const hasInheritedHeaders = config.inheritedHeaders.length > 0;
-  const hasHeaders = config.headers.length > 0 || hasInheritedHeaders;
-  const hasAuth = Boolean(config.auth);
-  const hasScripts = Boolean(config.preRequest || config.postResponse);
+  const hasHeaders = showRequestGroups && (config.headers.length > 0 || hasInheritedHeaders);
+  const hasAuth = showRequestGroups && Boolean(config.auth);
+  const hasScripts = showExecutionGroups && Boolean(config.preRequest || config.postResponse);
   const inheritedPreVars = config.inheritedPreVariables;
   const inheritedPostVars = config.inheritedPostVariables;
-  const showPreVars = config.variables.length > 0 || inheritedPreVars.length > 0;
-  const showPostVars = config.postVariables.length > 0 || inheritedPostVars.length > 0;
-  const hasVariables = showPreVars || showPostVars;
+  const hasPreVars = config.variables.length > 0 || inheritedPreVars.length > 0;
+  const hasPostVars = config.postVariables.length > 0 || inheritedPostVars.length > 0;
+  const hasVariables = showExecutionGroups && (hasPreVars || hasPostVars);
   const inheritedVarCount = inheritedPreVars.length + inheritedPostVars.length;
-  const hasTests = Boolean(config.tests);
+  const hasTests = showExecutionGroups && Boolean(config.tests);
 
   const authSource = config.authSource;
   const authBadge = authSource ? (
@@ -80,18 +84,14 @@ export const FolderConfiguration: React.FC<FolderConfigurationProps> = ({
             {inheritedVarCount > 0 && <ContentTypeBadge label={inheritedCountLabel(inheritedVarCount, 'var')} />}
           </div>
           <div className="config-columns">
-            {showPreVars && (
-              <div className="config-column">
-                <p className="config-phase-label">Pre-Request</p>
-                <PropertyTable rows={preRows} onNavigate={onNavigate} />
-              </div>
-            )}
-            {showPostVars && (
-              <div className="config-column">
-                <p className="config-phase-label">Post-Response</p>
-                <PropertyTable rows={postRows} onNavigate={onNavigate} />
-              </div>
-            )}
+            <div className="config-column">
+              <p className="config-phase-label">Pre-Request</p>
+              <PropertyTable rows={preRows} emptyMessage="None." onNavigate={onNavigate} />
+            </div>
+            <div className="config-column">
+              <p className="config-phase-label">Post-Response</p>
+              <PropertyTable rows={postRows} emptyMessage="None." onNavigate={onNavigate} />
+            </div>
           </div>
         </div>
       )}
diff --git a/packages/bruno-api-docs/src/components/FolderConfiguration/StyledWrapper.ts b/packages/bruno-api-docs/src/components/FolderConfiguration/StyledWrapper.ts
index f93b1a20..63137607 100644
--- a/packages/bruno-api-docs/src/components/FolderConfiguration/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/components/FolderConfiguration/StyledWrapper.ts
@@ -31,6 +31,17 @@ export const StyledWrapper = styled.div`
     min-width: 0;
   }
 
+  .config-column .property-empty-message {
+    display: flex;
+    align-items: center;
+    min-height: 2rem;
+    padding: 0.5rem 0.875rem;
+    border-radius: var(--oc-radius);
+    background: var(--oc-background-base);
+    box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    color: var(--text-tertiary);
+  }
+
   .config-phase-label {
     margin: 0 0 0.375rem 0;
     font-family: var(--font-sans);
diff --git a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
index 06bb4382..0b4e1479 100644
--- a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
+++ b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
@@ -70,3 +70,29 @@ describe('CollectionConfiguration', () => {
     expect(html).not.toContain('Tests');
   });
 });
+
+describe('CollectionConfiguration groups', () => {
+  const props = {
+    headers: [{ name: 'Accept', value: 'application/json' }] as HttpRequestHeader[],
+    auth: { type: 'bearer', token: 't' } as never,
+    scripts: { preRequest: 'console.log("pre")', tests: 'test("ok", () => {})' },
+    preVars: [{ name: 'v', value: '1' }] as never
+  };
+
+  it('renders only headers and auth for the request groups', () => {
+    const html = renderToStaticMarkup(<CollectionConfiguration {...props} groups="request" />);
+    expect(html).toContain('Headers');
+    expect(html).toContain('Auth');
+    expect(html).not.toContain('Variables');
+    expect(html).not.toContain('Script');
+    expect(html).not.toContain('Tests');
+  });
+
+  it('renders only variables, script and tests for the execution groups', () => {
+    const html = renderToStaticMarkup(<CollectionConfiguration {...props} groups="execution" />);
+    expect(html).toContain('Variables');
+    expect(html).toContain('Script');
+    expect(html).toContain('Tests');
+    expect(html).not.toContain('Headers');
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
index 608e4571..9ef02583 100644
--- a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
+++ b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
@@ -23,6 +23,8 @@ interface CollectionConfigurationProps {
   preVars?: PreRequestVarRow[];
   postVars?: PostResponseVarRow[];
   authModeLabels?: Record<string, string>;
+  /** Which half to render. Unset renders both. */
+  groups?: 'request' | 'execution';
   testId?: string;
 }
 
@@ -33,8 +35,11 @@ export const CollectionConfiguration: React.FC<CollectionConfigurationProps> = (
   preVars = [],
   postVars = [],
   authModeLabels = {},
+  groups,
   testId = 'collection-config'
 }) => {
+  const showRequestGroups = groups !== 'execution';
+  const showExecutionGroups = groups !== 'request';
   const headerRows: PropertyRow[] = headers
     .filter((header) => header && header.name)
     .map((header) => ({
@@ -44,11 +49,11 @@ export const CollectionConfiguration: React.FC<CollectionConfigurationProps> = (
       description: getDescription(header)
     }));
 
-  const hasHeaders = headerRows.length > 0;
-  const hasAuth = hasConfiguredAuth(auth);
-  const hasVars = preVars.length > 0 || postVars.length > 0;
-  const hasScripts = Boolean(scripts.preRequest || scripts.postResponse);
-  const hasTests = Boolean(scripts.tests);
+  const hasHeaders = showRequestGroups && headerRows.length > 0;
+  const hasAuth = showRequestGroups && hasConfiguredAuth(auth);
+  const hasVars = showExecutionGroups && (preVars.length > 0 || postVars.length > 0);
+  const hasScripts = showExecutionGroups && Boolean(scripts.preRequest || scripts.postResponse);
+  const hasTests = showExecutionGroups && Boolean(scripts.tests);
   const hasConfig = hasHeaders || hasAuth || hasVars || hasScripts || hasTests;
 
   if (!hasConfig) {
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
index 75d0cfb0..3d890557 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
@@ -21,7 +21,7 @@ import {
 } from '@/utils/schemaHelpers';
 import { getAncestorsByUuid } from '@/utils/fileUtils';
 import { getItemUuid } from '@/utils/itemUtils';
-import { getInheritedAuthSummary } from '@/utils/request';
+import { actionsToPostResponseVars, getInheritedAuthSummary, postResponseVarsToActions } from '@/utils/request';
 import TestsTab from '../Common/TestsTab/TestsTab';
 import OverviewTab from '../Common/OverviewTab/OverviewTab';
 
@@ -54,6 +54,8 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, collection, onF
     onFolderChange(updatedFolder);
   };
 
+  const postResponseVars = actionsToPostResponseVars(folder.request?.actions);
+
   const handleHeadersChange = (headers: KeyValueRow[]) => {
     commitFolder({ ...folder, request: { ...folder.request, headers: headers.map(keyValueRowToEntry) } });
   };
@@ -62,6 +64,13 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, collection, onF
     commitFolder({ ...folder, request: { ...folder.request, variables: variables.map(rowToVariable) } });
   };
 
+  const handlePostResponseVarsChange = (rows: KeyValueRow[]) => {
+    commitFolder({
+      ...folder,
+      request: { ...folder.request, actions: postResponseVarsToActions(rows, folder.request?.actions) }
+    });
+  };
+
   const handleScriptChange = (scriptType: 'preRequest' | 'postResponse' | 'tests', value: string) => {
     const updatedScriptsObj = { ...scriptsArrayToObject(folder.request?.scripts), [scriptType]: value };
     commitFolder({
@@ -99,6 +108,8 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, collection, onF
     <VariablesTab
       variables={folder.request?.variables || []}
       onVariablesChange={handleVariablesChange}
+      postResponseVars={postResponseVars}
+      onPostResponseVarsChange={handlePostResponseVarsChange}
       description="Variables available to every request inside this folder."
     />
   );
diff --git a/packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts b/packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts
index 69cd7b04..918df0c3 100644
--- a/packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts
+++ b/packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts
@@ -6,7 +6,9 @@ export const foldersFixtureCollection = {
   config: {
     environments: [
       { name: 'Dev', variables: [{ name: 'host', value: 'https://api.hotel.dev' }, { name: 'api_key', value: 'dev-key-123' }] },
-      { name: 'Prod', variables: [{ name: 'host', value: 'https://api.hotel.com' }, { name: 'api_key', value: 'prod-key-abc' }] }
+      { name: 'Prod', variables: [{ name: 'host', value: 'https://api.hotel.com' }, { name: 'api_key', value: 'prod-key-abc' }] },
+      // Deliberately long, to exercise the name clamp and its tooltip.
+      { name: 'staging-regression-automation-eu-west-1', variables: [{ name: 'host', value: 'https://api.hotel.staging' }] }
     ]
   },
   items: [
diff --git a/packages/bruno-api-docs/src/pages/Folder/Folder.spec.tsx b/packages/bruno-api-docs/src/pages/Folder/Folder.spec.tsx
index e5492471..20ff31a3 100644
--- a/packages/bruno-api-docs/src/pages/Folder/Folder.spec.tsx
+++ b/packages/bruno-api-docs/src/pages/Folder/Folder.spec.tsx
@@ -96,3 +96,57 @@ describe('Folder', () => {
     expect(queryByTestId(root, 'folder-config-headers')).toBeNull();
   });
 });
+
+describe('Folder execution context section', () => {
+  const folderWithBoth: any = {
+    info: { name: 'Invoices' },
+    request: {
+      headers: [{ name: 'Accept', value: 'application/json' }],
+      scripts: [{ type: 'before-request', code: 'pre()' }]
+    },
+    items: [{ info: { type: 'http' } }]
+  };
+
+  it('puts headers and auth under Folder Configuration, and vars, script and tests under Execution Context', () => {
+    const root = useRenderToDom(<Folder item={folderWithBoth} collection={collection} />);
+
+    expect(query(root, '[data-testid="folder-section-configuration"] h2').text.trim()).toBe('Folder Configuration');
+    expect(query(root, '[data-testid="folder-section-execution-context"] h2').text.trim()).toBe('Execution Context');
+
+    const configSection = getByTestId(root, 'folder-section-configuration');
+    expect(configSection.querySelector('[data-testid="folder-config-headers"]')).not.toBeNull();
+    expect(configSection.querySelector('[data-testid="folder-config-script"]')).toBeNull();
+
+    const executionSection = getByTestId(root, 'folder-section-execution-context');
+    expect(executionSection.querySelector('[data-testid="folder-config-script"]')).not.toBeNull();
+    expect(executionSection.querySelector('[data-testid="folder-config-headers"]')).toBeNull();
+  });
+
+  it('omits the Execution Context section when the folder has no vars, scripts or tests', () => {
+    const headersOnly: any = {
+      info: { name: 'Invoices' },
+      request: { headers: [{ name: 'Accept', value: 'application/json' }] },
+      items: [{ info: { type: 'http' } }]
+    };
+    const root = useRenderToDom(<Folder item={headersOnly} collection={{ info: { name: 'c' } } as any} />);
+    expect(queryByTestId(root, 'folder-section-execution-context')).toBeNull();
+  });
+});
+
+describe('Folder execution context accordion', () => {
+  const folderWithScripts: any = {
+    info: { name: 'Invoices' },
+    request: {
+      headers: [{ name: 'Accept', value: 'application/json' }],
+      scripts: [{ type: 'before-request', code: 'pre()' }]
+    },
+    items: [{ info: { type: 'http' } }]
+  };
+
+  it('renders the Execution Context section as an expanded accordion', () => {
+    const root = useRenderToDom(<Folder item={folderWithScripts} collection={collection} />);
+    const toggle = query(root, '[data-testid="folder-section-execution-context"] button');
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(toggle.text).toContain('Execution Context');
+  });
+});
diff --git a/packages/bruno-api-docs/src/pages/Folder/Folder.tsx b/packages/bruno-api-docs/src/pages/Folder/Folder.tsx
index c498b69f..c0c6fe0b 100644
--- a/packages/bruno-api-docs/src/pages/Folder/Folder.tsx
+++ b/packages/bruno-api-docs/src/pages/Folder/Folder.tsx
@@ -5,7 +5,13 @@ import { useMarkdownRenderer } from '@/hooks';
 import { AUTH_MODE_LABELS } from '@/constants';
 import { getItemName, getItemDocs, getItemDescription, getItemTags } from '@/utils/schemaHelpers';
 import { buildBreadcrumbSegments } from '@/utils/common';
-import { getFolderConfig, hasFolderConfig, countFolderRequests, requestCountLabel } from '@/utils/folder';
+import {
+  getFolderConfig,
+  hasFolderExecutionContext,
+  hasFolderRequestConfig,
+  countFolderRequests,
+  requestCountLabel
+} from '@/utils/folder';
 import { PageWrapper } from '../../components/PageWrapper/PageWrapper';
 import { Heading } from '../../components/Heading/Heading';
 import { Section } from '../../components/Section/Section';
@@ -31,7 +37,8 @@ export const Folder: React.FC<FolderProps> = ({ item, ancestry = [], collection,
   const tags = getItemTags(item);
   const requestCount = useMemo(() => countFolderRequests(item), [item]);
   const config = useMemo(() => getFolderConfig(collection, ancestry, item), [collection, ancestry, item]);
-  const showConfig = useMemo(() => hasFolderConfig(config), [config]);
+  const showRequestConfig = useMemo(() => hasFolderRequestConfig(config), [config]);
+  const showExecutionContext = useMemo(() => hasFolderExecutionContext(config), [config]);
 
   const docsHtml = useMemo(() => {
     const content = getItemDocs(item) || getItemDescription(item);
@@ -79,23 +86,45 @@ export const Folder: React.FC<FolderProps> = ({ item, ancestry = [], collection,
           </Section>
         )}
 
-        <Section label="Folder Configuration" testId="folder-section-configuration" className="folder-fullwidth" labelClassName="section-label-muted">
-          {showConfig ? (
+        {(showRequestConfig || !showExecutionContext) && (
+          <Section label="Folder Configuration" testId="folder-section-configuration" className="folder-fullwidth" labelClassName="section-label-muted">
+            {showRequestConfig ? (
+              <FolderConfiguration
+                config={config}
+                groups="request"
+                authModeLabels={AUTH_MODE_LABELS}
+                onNavigate={onBreadcrumbClick}
+                testId="folder-config"
+              />
+            ) : (
+              <EmptyState
+                testId="folder-config-empty"
+                icon={<FolderIcon />}
+                heading="No folder configuration"
+                subheading="This folder has no headers, auth, scripts, vars, or tests set. Requests inside it inherit configuration from the collection."
+              />
+            )}
+          </Section>
+        )}
+
+        {showExecutionContext && (
+          <Section
+            label="Execution Context"
+            testId="folder-section-execution-context"
+            className="folder-fullwidth"
+            labelClassName="section-label-muted"
+            collapsible
+            storageKey="folder-execution-context"
+          >
             <FolderConfiguration
               config={config}
+              groups="execution"
               authModeLabels={AUTH_MODE_LABELS}
               onNavigate={onBreadcrumbClick}
-              testId="folder-config"
-            />
-          ) : (
-            <EmptyState
-              testId="folder-config-empty"
-              icon={<FolderIcon />}
-              heading="No folder configuration"
-              subheading="This folder has no headers, auth, scripts, vars, or tests set. Requests inside it inherit configuration from the collection."
+              testId="folder-execution-context"
             />
-          )}
-        </Section>
+          </Section>
+        )}
       </StyledWrapper>
     </PageWrapper>
   );
diff --git a/packages/bruno-api-docs/src/pages/Overview/Overview.spec.tsx b/packages/bruno-api-docs/src/pages/Overview/Overview.spec.tsx
index 984a11f2..d3c781f1 100644
--- a/packages/bruno-api-docs/src/pages/Overview/Overview.spec.tsx
+++ b/packages/bruno-api-docs/src/pages/Overview/Overview.spec.tsx
@@ -2,8 +2,19 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, it, expect } from 'vitest';
 import type { OpenCollection } from '@opencollection/types';
+import { useRenderToDom } from '@/hooks/useRenderToDom';
+import { query } from '@/test-utils/dom';
 import { Overview } from './Overview';
 
+/** Every Overview section shares one test id, so find a section by its text. */
+const sectionNamed = (root: ReturnType<typeof useRenderToDom>, name: string) => {
+  const match = root
+    .querySelectorAll('[data-testid="overview-section-label"]')
+    .find((section) => section.text.includes(name));
+  if (!match) throw new Error(`No section named ${name}`);
+  return match;
+};
+
 describe('Overview', () => {
   it('renders the headline, stats, docs and configuration', () => {
     const collection: OpenCollection = {
@@ -34,3 +45,48 @@ describe('Overview', () => {
     expect(html).toContain('No configuration set');
   });
 });
+
+describe('Overview execution context section', () => {
+  it('splits collection configuration from the execution context', () => {
+    const collection: OpenCollection = {
+      info: { name: 'Hotel Booking API' },
+      request: {
+        headers: [{ name: 'Accept', value: 'application/json' }],
+        scripts: [{ type: 'before-request', code: 'pre()' }]
+      }
+    } as unknown as OpenCollection;
+
+    const html = renderToStaticMarkup(<Overview collection={collection} />);
+
+    expect(html).toContain('Collection Configuration');
+    expect(html).toContain('Execution Context');
+  });
+
+  it('omits the Execution Context heading when the collection has no vars, scripts or tests', () => {
+    const collection: OpenCollection = {
+      info: { name: 'Hotel Booking API' },
+      request: { headers: [{ name: 'Accept', value: 'application/json' }] }
+    } as unknown as OpenCollection;
+
+    const html = renderToStaticMarkup(<Overview collection={collection} />);
+
+    expect(html).toContain('Collection Configuration');
+    expect(html).not.toContain('Execution Context');
+  });
+});
+
+describe('Overview execution context accordion', () => {
+  it('renders the Execution Context section as an expanded accordion', () => {
+    const collection: OpenCollection = {
+      info: { name: 'Hotel Booking API' },
+      request: {
+        headers: [{ name: 'Accept', value: 'application/json' }],
+        scripts: [{ type: 'before-request', code: 'pre()' }]
+      }
+    } as unknown as OpenCollection;
+
+    const root = useRenderToDom(<Overview collection={collection} />);
+    const toggle = query(sectionNamed(root, 'Execution Context'), 'button');
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+  });
+});
diff --git a/packages/bruno-api-docs/src/pages/Overview/Overview.tsx b/packages/bruno-api-docs/src/pages/Overview/Overview.tsx
index 351ae60c..6c9a5bc6 100644
--- a/packages/bruno-api-docs/src/pages/Overview/Overview.tsx
+++ b/packages/bruno-api-docs/src/pages/Overview/Overview.tsx
@@ -2,7 +2,11 @@ import React, { useMemo } from 'react';
 import type { OpenCollection } from '@opencollection/types';
 import type { StructuredText } from '@opencollection/types/common/description';
 import { useMarkdownRenderer } from '@/hooks';
-import { getCollectionStats, hasCollectionConfiguration } from '@/utils/collectionOverview';
+import {
+  getCollectionStats,
+  hasCollectionExecutionContext,
+  hasCollectionRequestConfig
+} from '@/utils/collectionOverview';
 import { scriptsArrayToObject, getCollectionTags } from '@/utils/schemaHelpers';
 import { getCollectionVariables } from '@/utils/request';
 import { AUTH_MODE_LABELS } from '@/constants';
@@ -51,14 +55,13 @@ export const Overview: React.FC<OverviewProps> = ({ collection, testId = 'overvi
   }, [collection.docs, md]);
 
   const hasOverview = Boolean(docsHtml);
-  const hasConfig = useMemo(
-    () => hasCollectionConfiguration(
-      collection.request?.headers,
-      collection.request?.auth,
-      scripts,
-      preVars.length > 0 || postVars.length > 0
-    ),
-    [collection.request, scripts, preVars, postVars]
+  const hasRequestConfig = useMemo(
+    () => hasCollectionRequestConfig(collection.request?.headers, collection.request?.auth),
+    [collection.request]
+  );
+  const hasExecutionContext = useMemo(
+    () => hasCollectionExecutionContext(scripts, preVars.length > 0 || postVars.length > 0),
+    [scripts, preVars, postVars]
   );
 
   return (
@@ -103,25 +106,43 @@ export const Overview: React.FC<OverviewProps> = ({ collection, testId = 'overvi
           </div>
 
           <div className="overview-col-right">
-            <Section label="Collection Configuration" testId="overview-section-label">
-              {hasConfig ? (
+            {(hasRequestConfig || !hasExecutionContext) && (
+              <Section label="Collection Configuration" testId="overview-section-label">
+                {hasRequestConfig ? (
+                  <CollectionConfiguration
+                    headers={collection.request?.headers}
+                    auth={collection.request?.auth}
+                    groups="request"
+                    authModeLabels={AUTH_MODE_LABELS}
+                  />
+                ) : (
+                  <EmptyState
+                    testId="overview-empty"
+                    icon={<BookIcon />}
+                    heading="No configuration set"
+                    subheading="This collection has no shared headers, auth, scripts, variables, or tests. Configure them in Bruno and they'll appear here."
+                  />
+                )}
+              </Section>
+            )}
+
+            {hasExecutionContext && (
+              <Section
+                label="Execution Context"
+                testId="overview-section-label"
+                collapsible
+                storageKey="collection-execution-context"
+              >
                 <CollectionConfiguration
-                  headers={collection.request?.headers}
-                  auth={collection.request?.auth}
                   scripts={scripts}
                   preVars={preVars}
                   postVars={postVars}
+                  groups="execution"
                   authModeLabels={AUTH_MODE_LABELS}
+                  testId="collection-execution-context"
                 />
-              ) : (
-                <EmptyState
-                  testId="overview-empty"
-                  icon={<BookIcon />}
-                  heading="No configuration set"
-                  subheading="This collection has no shared headers, auth, scripts, variables, or tests. Configure them in Bruno and they'll appear here."
-                />
-              )}
-            </Section>
+              </Section>
+            )}
           </div>
         </div>
       </StyledWrapper>
diff --git a/packages/bruno-api-docs/src/pages/Overview/StyledWrapper.ts b/packages/bruno-api-docs/src/pages/Overview/StyledWrapper.ts
index 17931a13..70d64165 100644
--- a/packages/bruno-api-docs/src/pages/Overview/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/pages/Overview/StyledWrapper.ts
@@ -33,7 +33,8 @@ export const StyledWrapper = styled.div`
     border-top: 1px solid var(--border-color);
   }
 
-  .overview-col-left {
+  .overview-col-left,
+  .overview-col-right {
     gap: 1.5rem;
     display: flex;
     flex-direction: column;
@@ -43,7 +44,7 @@ export const StyledWrapper = styled.div`
     margin-top: 0.25rem;
   }
 
-  [data-testid='overview-section-label'] > [data-testid='section-label'] {
+  [data-testid='overview-section-label'] [data-testid='section-label'] {
     color: var(--text-muted);
   }
   .overview-col-right [data-testid='overview-section-label'] > [data-testid='section-label'] {
diff --git a/packages/bruno-api-docs/src/utils/collectionOverview.spec.ts b/packages/bruno-api-docs/src/utils/collectionOverview.spec.ts
index 72c4a393..3f0dd688 100644
--- a/packages/bruno-api-docs/src/utils/collectionOverview.spec.ts
+++ b/packages/bruno-api-docs/src/utils/collectionOverview.spec.ts
@@ -1,7 +1,13 @@
 import { describe, it, expect } from 'vitest';
 import type { OpenCollection } from '@opencollection/types';
 import type { Item as OpenCollectionItem } from '@opencollection/types/collection/item';
-import { countItems, getCollectionStats, hasCollectionConfiguration } from './collectionOverview';
+import {
+  countItems,
+  getCollectionStats,
+  hasCollectionConfiguration,
+  hasCollectionExecutionContext,
+  hasCollectionRequestConfig
+} from './collectionOverview';
 
 describe('countItems', () => {
   it('counts requests and folders recursively at every depth', () => {
@@ -75,3 +81,34 @@ describe('hasCollectionConfiguration', () => {
     expect(hasCollectionConfiguration([], undefined, { tests: 'z' })).toBe(true);
   });
 });
+
+describe('hasCollectionRequestConfig', () => {
+  it('is true for a named header', () => {
+    expect(hasCollectionRequestConfig([{ name: 'Accept', value: 'json' }])).toBe(true);
+  });
+
+  it('is true for configured auth', () => {
+    expect(hasCollectionRequestConfig([], { type: 'bearer', token: 't' })).toBe(true);
+  });
+
+  it('is false for no headers and no auth', () => {
+    expect(hasCollectionRequestConfig([], undefined)).toBe(false);
+    expect(hasCollectionRequestConfig([{ name: '', value: 'x' }], { type: 'none' })).toBe(false);
+  });
+});
+
+describe('hasCollectionExecutionContext', () => {
+  it('is true for variables', () => {
+    expect(hasCollectionExecutionContext({}, true)).toBe(true);
+  });
+
+  it('is true for any script', () => {
+    expect(hasCollectionExecutionContext({ preRequest: 'x' }, false)).toBe(true);
+    expect(hasCollectionExecutionContext({ postResponse: 'y' }, false)).toBe(true);
+    expect(hasCollectionExecutionContext({ tests: 'z' }, false)).toBe(true);
+  });
+
+  it('is false with neither variables nor scripts', () => {
+    expect(hasCollectionExecutionContext({}, false)).toBe(false);
+  });
+});
diff --git a/packages/bruno-api-docs/src/utils/collectionOverview.ts b/packages/bruno-api-docs/src/utils/collectionOverview.ts
index 359e4302..7a2dcfa2 100644
--- a/packages/bruno-api-docs/src/utils/collectionOverview.ts
+++ b/packages/bruno-api-docs/src/utils/collectionOverview.ts
@@ -50,13 +50,18 @@ export interface CollectionScripts {
 export const hasConfiguredAuth = (auth?: Auth): boolean =>
   Boolean(auth) && (typeof auth !== 'object' || (auth as { type?: string }).type !== 'none');
 
+/** Headers and auth. */
+export const hasCollectionRequestConfig = (headers: HttpRequestHeader[] = [], auth?: Auth): boolean =>
+  headers.some((header) => header && header.name) || hasConfiguredAuth(auth);
+
+/** Vars, scripts and tests: what runs around a request. */
+export const hasCollectionExecutionContext = (scripts: CollectionScripts = {}, hasVars = false): boolean =>
+  hasVars || Boolean(scripts.preRequest || scripts.postResponse || scripts.tests);
+
 export const hasCollectionConfiguration = (
   headers: HttpRequestHeader[] = [],
   auth?: Auth,
   scripts: CollectionScripts = {},
   hasVars = false
 ): boolean =>
-  headers.some((header) => header && header.name)
-  || hasConfiguredAuth(auth)
-  || hasVars
-  || Boolean(scripts.preRequest || scripts.postResponse || scripts.tests);
+  hasCollectionRequestConfig(headers, auth) || hasCollectionExecutionContext(scripts, hasVars);
diff --git a/packages/bruno-api-docs/src/utils/folder.spec.ts b/packages/bruno-api-docs/src/utils/folder.spec.ts
index ac332d69..5c4de8b6 100644
--- a/packages/bruno-api-docs/src/utils/folder.spec.ts
+++ b/packages/bruno-api-docs/src/utils/folder.spec.ts
@@ -2,6 +2,8 @@ import { describe, it, expect } from 'vitest';
 import {
   getFolderConfig,
   hasFolderConfig,
+  hasFolderExecutionContext,
+  hasFolderRequestConfig,
   countFolderRequests,
   requestCountLabel,
   resolveFolderAuth
@@ -154,3 +156,59 @@ describe('requestCountLabel', () => {
     expect(requestCountLabel(12)).toBe('12 requests');
   });
 });
+
+describe('hasFolderRequestConfig', () => {
+  it('is true for own headers', () => {
+    const folder: any = { request: { headers: [{ name: 'Accept', value: 'json' }] } };
+    expect(hasFolderRequestConfig(getFolderConfig(null, [], folder))).toBe(true);
+  });
+
+  it('is true for headers inherited from the collection', () => {
+    const parent: any = { request: { headers: [{ name: 'X-Api', value: 'v2' }] } };
+    const folder: any = {};
+    expect(hasFolderRequestConfig(getFolderConfig(parent, [], folder))).toBe(true);
+  });
+
+  it('is true for concrete auth', () => {
+    const folder: any = { request: { auth: { type: 'basic', username: 'u' } } };
+    expect(hasFolderRequestConfig(getFolderConfig(null, [], folder))).toBe(true);
+  });
+
+  it('is false when the folder only has vars, scripts or tests', () => {
+    const folder: any = { request: { scripts: [{ type: 'before-request', code: 'x' }] } };
+    expect(hasFolderRequestConfig(getFolderConfig(null, [], folder))).toBe(false);
+  });
+});
+
+describe('hasFolderExecutionContext', () => {
+  it('is true for pre-request variables', () => {
+    const folder: any = { request: { variables: [{ name: 'v', value: '1' }] } };
+    expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(true);
+  });
+
+  it('is true for post-response variables', () => {
+    const folder: any = {
+      request: {
+        actions: [
+          { type: 'set-variable', phase: 'after-response', selector: { expression: 'x' }, variable: { name: 'v' } }
+        ]
+      }
+    };
+    expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(true);
+  });
+
+  it('is true for a script', () => {
+    const folder: any = { request: { scripts: [{ type: 'before-request', code: 'x' }] } };
+    expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(true);
+  });
+
+  it('is true for tests', () => {
+    const folder: any = { request: { scripts: [{ type: 'tests', code: 'expect(1).to.equal(1)' }] } };
+    expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(true);
+  });
+
+  it('is false when the folder only has headers and auth', () => {
+    const folder: any = { request: { headers: [{ name: 'Accept', value: 'json' }], auth: { type: 'basic' } } };
+    expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(false);
+  });
+});
diff --git a/packages/bruno-api-docs/src/utils/folder.ts b/packages/bruno-api-docs/src/utils/folder.ts
index a1aff909..2888ecf8 100644
--- a/packages/bruno-api-docs/src/utils/folder.ts
+++ b/packages/bruno-api-docs/src/utils/folder.ts
@@ -116,16 +116,23 @@ export const getFolderConfig = (
   };
 };
 
-export const hasFolderConfig = (config: FolderConfig): boolean =>
+/** Headers and auth. */
+export const hasFolderRequestConfig = (config: FolderConfig): boolean =>
   config.headers.length > 0
-  || Boolean(config.auth)
-  || Boolean(config.preRequest || config.postResponse || config.tests)
+  || config.inheritedHeaders.length > 0
+  || Boolean(config.auth);
+
+/** Vars, scripts and tests: what runs around a request. */
+export const hasFolderExecutionContext = (config: FolderConfig): boolean =>
+  Boolean(config.preRequest || config.postResponse || config.tests)
   || config.variables.length > 0
   || config.postVariables.length > 0
-  || config.inheritedHeaders.length > 0
   || config.inheritedPreVariables.length > 0
   || config.inheritedPostVariables.length > 0;
 
+export const hasFolderConfig = (config: FolderConfig): boolean =>
+  hasFolderRequestConfig(config) || hasFolderExecutionContext(config);
+
 export const countFolderRequests = (folder: Folder): number => {
   let count = 0;
   const walk = (items: Item[] | undefined): void => {

From f404498c13807c46b28e19a59f86ff15e1a62817 Mon Sep 17 00:00:00 2001
From: Sundram Gupta <sundram@usebruno.com>
Date: Tue, 22 Sep 2026 19:24:04 +0530
Subject: [PATCH 2/5] chore: code cleanup

---
 .../e2e/tests/playground/folder-settings-vars.spec.ts           | 1 -
 .../OverviewCollectionConfiguration/CollectionConfiguration.tsx | 1 -
 packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts    | 1 -
 packages/bruno-api-docs/src/utils/collectionOverview.ts         | 2 --
 packages/bruno-api-docs/src/utils/folder.ts                     | 2 --
 5 files changed, 7 deletions(-)

diff --git a/packages/bruno-api-docs/e2e/tests/playground/folder-settings-vars.spec.ts b/packages/bruno-api-docs/e2e/tests/playground/folder-settings-vars.spec.ts
index a8c53d18..74f68162 100644
--- a/packages/bruno-api-docs/e2e/tests/playground/folder-settings-vars.spec.ts
+++ b/packages/bruno-api-docs/e2e/tests/playground/folder-settings-vars.spec.ts
@@ -1,6 +1,5 @@
 import { test, expect } from '../../playwright';
 
-// The desktop app's folder Vars tab has both tables, and the export carries both.
 test.describe('Playground folder settings, Vars tab', () => {
   test.beforeEach(async ({ playground }) => {
     await playground.open('bottom');
diff --git a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
index 9ef02583..6fb1639f 100644
--- a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
+++ b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
@@ -23,7 +23,6 @@ interface CollectionConfigurationProps {
   preVars?: PreRequestVarRow[];
   postVars?: PostResponseVarRow[];
   authModeLabels?: Record<string, string>;
-  /** Which half to render. Unset renders both. */
   groups?: 'request' | 'execution';
   testId?: string;
 }
diff --git a/packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts b/packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts
index 918df0c3..49021856 100644
--- a/packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts
+++ b/packages/bruno-api-docs/src/e2eFixtures/foldersCollection.ts
@@ -7,7 +7,6 @@ export const foldersFixtureCollection = {
     environments: [
       { name: 'Dev', variables: [{ name: 'host', value: 'https://api.hotel.dev' }, { name: 'api_key', value: 'dev-key-123' }] },
       { name: 'Prod', variables: [{ name: 'host', value: 'https://api.hotel.com' }, { name: 'api_key', value: 'prod-key-abc' }] },
-      // Deliberately long, to exercise the name clamp and its tooltip.
       { name: 'staging-regression-automation-eu-west-1', variables: [{ name: 'host', value: 'https://api.hotel.staging' }] }
     ]
   },
diff --git a/packages/bruno-api-docs/src/utils/collectionOverview.ts b/packages/bruno-api-docs/src/utils/collectionOverview.ts
index 7a2dcfa2..93207caf 100644
--- a/packages/bruno-api-docs/src/utils/collectionOverview.ts
+++ b/packages/bruno-api-docs/src/utils/collectionOverview.ts
@@ -50,11 +50,9 @@ export interface CollectionScripts {
 export const hasConfiguredAuth = (auth?: Auth): boolean =>
   Boolean(auth) && (typeof auth !== 'object' || (auth as { type?: string }).type !== 'none');
 
-/** Headers and auth. */
 export const hasCollectionRequestConfig = (headers: HttpRequestHeader[] = [], auth?: Auth): boolean =>
   headers.some((header) => header && header.name) || hasConfiguredAuth(auth);
 
-/** Vars, scripts and tests: what runs around a request. */
 export const hasCollectionExecutionContext = (scripts: CollectionScripts = {}, hasVars = false): boolean =>
   hasVars || Boolean(scripts.preRequest || scripts.postResponse || scripts.tests);
 
diff --git a/packages/bruno-api-docs/src/utils/folder.ts b/packages/bruno-api-docs/src/utils/folder.ts
index 2888ecf8..7bce8754 100644
--- a/packages/bruno-api-docs/src/utils/folder.ts
+++ b/packages/bruno-api-docs/src/utils/folder.ts
@@ -116,13 +116,11 @@ export const getFolderConfig = (
   };
 };
 
-/** Headers and auth. */
 export const hasFolderRequestConfig = (config: FolderConfig): boolean =>
   config.headers.length > 0
   || config.inheritedHeaders.length > 0
   || Boolean(config.auth);
 
-/** Vars, scripts and tests: what runs around a request. */
 export const hasFolderExecutionContext = (config: FolderConfig): boolean =>
   Boolean(config.preRequest || config.postResponse || config.tests)
   || config.variables.length > 0

From 10fa39c6381ff0b89b67202048499cb836fc03b5 Mon Sep 17 00:00:00 2001
From: Sundram Gupta <sundram@usebruno.com>
Date: Wed, 23 Sep 2026 08:32:49 +0530
Subject: [PATCH 3/5] comments addressed

---
 .../collection-configuration.component.ts     |  6 ++-
 .../bruno-api-docs/e2e/pages/folder.page.ts   | 16 +++++-
 .../bruno-api-docs/e2e/pages/overview.page.ts |  1 +
 .../e2e/tests/folder/folder.spec.ts           | 51 +++++++++++--------
 .../e2e/tests/overview/overview.spec.ts       | 40 ++++++---------
 .../components/EnvSwitcher/EnvSwitcher.tsx    |  1 -
 .../EnvironmentLabel/EnvironmentLabel.tsx     | 11 ++--
 .../FolderConfiguration.spec.tsx              |  6 +--
 .../FolderConfiguration.tsx                   |  8 +--
 .../CollectionConfiguration.spec.tsx          | 37 ++++++++------
 .../CollectionConfiguration.tsx               | 18 +++----
 .../src/pages/Folder/Folder.spec.tsx          | 35 +++++++++----
 .../src/pages/Folder/Folder.tsx               | 37 ++++++++------
 .../src/pages/Overview/Overview.spec.tsx      | 32 +++++++++---
 .../src/pages/Overview/Overview.tsx           | 33 +++++++-----
 15 files changed, 197 insertions(+), 135 deletions(-)

diff --git a/packages/bruno-api-docs/e2e/components/overview/collection-configuration.component.ts b/packages/bruno-api-docs/e2e/components/overview/collection-configuration.component.ts
index 44a90e6b..9dd4744f 100644
--- a/packages/bruno-api-docs/e2e/components/overview/collection-configuration.component.ts
+++ b/packages/bruno-api-docs/e2e/components/overview/collection-configuration.component.ts
@@ -2,6 +2,8 @@ import type { Locator, Page } from '@playwright/test';
 import { BaseComponent } from '../base.component';
 import { SecretValueComponent } from '../secret-value.component';
 
+export type ConfigurationGroup = 'headers' | 'auth' | 'vars' | 'script' | 'tests';
+
 export class ConfigurationSection extends BaseComponent {
   readonly copyButton: Locator;
   readonly secret: SecretValueComponent;
@@ -19,8 +21,8 @@ export class ConfigurationSection extends BaseComponent {
       .filter({ has: page.getByTestId('disabled-badge') });
   }
 
-  subHeading(name: string): Locator {
-    return this.root.getByTestId(`${this.testId}-subheading`).filter({ hasText: name });
+  subHeading(group: ConfigurationGroup): Locator {
+    return this.root.getByTestId(`${this.testId}-${group}-subheading`);
   }
 
   async copyToClipboard(): Promise<void> {
diff --git a/packages/bruno-api-docs/e2e/pages/folder.page.ts b/packages/bruno-api-docs/e2e/pages/folder.page.ts
index 228fc8d0..8b894188 100644
--- a/packages/bruno-api-docs/e2e/pages/folder.page.ts
+++ b/packages/bruno-api-docs/e2e/pages/folder.page.ts
@@ -1,9 +1,12 @@
+import type { Locator } from '@playwright/test';
 import { BasePage } from './base.page';
 import { SidebarComponent } from '../components/sidebar.component';
 import { BreadcrumbComponent } from '../components/breadcrumb.component';
 import { FolderConfigurationComponent } from '../components/folder/folder-configuration.component';
 import { VariableCardComponent } from '../components/variable-card/variable-card.component';
 
+export type FolderConfigGroup = 'headers' | 'auth' | 'vars' | 'script' | 'tests';
+
 export class FolderPage extends BasePage {
   readonly root = this.page.getByTestId('folder-page');
   readonly title = this.page.getByTestId('folder-title');
@@ -13,14 +16,23 @@ export class FolderPage extends BasePage {
   readonly emptyState = this.page.getByTestId('folder-config-empty');
   readonly configurationSection = this.page.getByTestId('folder-section-configuration');
   readonly executionContextSection = this.page.getByTestId('folder-section-execution-context');
+  readonly executionContextEmptyState = this.page.getByTestId('folder-execution-context-empty');
 
   readonly sidebar = new SidebarComponent(this.page);
   readonly breadcrumb = new BreadcrumbComponent(this.page, 'folder-breadcrumb');
   readonly configuration = new FolderConfigurationComponent(this.page);
   readonly variableCard = new VariableCardComponent(this.page, this.root);
 
-  async open(trail: string[]): Promise<void> {
-    await this.navigate('/');
+  configurationGroup(group: FolderConfigGroup): Locator {
+    return this.configurationSection.getByTestId(`folder-config-${group}`);
+  }
+
+  executionContextGroup(group: FolderConfigGroup): Locator {
+    return this.executionContextSection.getByTestId(`folder-config-${group}`);
+  }
+
+  async open(trail: string[], path = '/'): Promise<void> {
+    await this.navigate(path);
     await this.sidebar.open(trail);
     await this.root.waitFor({ state: 'visible' });
   }
diff --git a/packages/bruno-api-docs/e2e/pages/overview.page.ts b/packages/bruno-api-docs/e2e/pages/overview.page.ts
index ba3caeaa..954713a3 100644
--- a/packages/bruno-api-docs/e2e/pages/overview.page.ts
+++ b/packages/bruno-api-docs/e2e/pages/overview.page.ts
@@ -15,6 +15,7 @@ export class OverviewPage extends BasePage {
   readonly environments = new EnvironmentsSection(this.page);
   readonly configuration = new ConfigurationSection(this.page);
   readonly executionContext = new ConfigurationSection(this.page, 'collection-execution-context');
+  readonly executionContextEmptyState = this.page.getByTestId('collection-execution-context-empty');
   readonly docMarkdown = new MarkdownComponent(this.page, this.page.getByTestId('overview-markdown-documentation'));
   readonly variableCard = new VariableCardComponent(this.page, this.root);
 
diff --git a/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts b/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts
index 70d8380a..c7a90ee3 100644
--- a/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts
+++ b/packages/bruno-api-docs/e2e/tests/folder/folder.spec.ts
@@ -71,26 +71,44 @@ test.describe('Folder page', () => {
 });
 
 test.describe('Folder page sections', () => {
-  test('separates headers and auth from the execution context', async ({ folderPage }) => {
-    await folderPage.open(['Realtime']);
+  test.beforeEach(async ({ folderPage }) => {
+    await folderPage.open(['billing', 'customers']);
+  });
 
-    await expect(folderPage.configurationSection).toBeVisible();
+  test('Folder Configuration holds the headers and auth', async ({ folderPage }) => {
     await expect(folderPage.configurationSection).toContainText('Folder Configuration');
-    await expect(folderPage.executionContextSection).toBeVisible();
-    await expect(folderPage.executionContextSection).toContainText('Execution Context');
+    await expect(folderPage.configurationGroup('headers')).toBeVisible();
+    await expect(folderPage.configurationGroup('auth')).toBeVisible();
 
-    await test.step('headers stay under Folder Configuration', async () => {
-      await expect(folderPage.configurationSection.getByTestId('folder-config-headers')).toBeVisible();
-      await expect(folderPage.executionContextSection.getByTestId('folder-config-headers')).toHaveCount(0);
+    await test.step('vars, script and tests are not under Folder Configuration', async () => {
+      await expect(folderPage.configurationGroup('vars')).toHaveCount(0);
+      await expect(folderPage.configurationGroup('script')).toHaveCount(0);
+      await expect(folderPage.configurationGroup('tests')).toHaveCount(0);
     });
+  });
+
+  test('Execution Context holds the variables, script and tests', async ({ folderPage }) => {
+    await expect(folderPage.executionContextSection).toContainText('Execution Context');
+    await expect(folderPage.executionContextGroup('vars')).toBeVisible();
+    await expect(folderPage.executionContextGroup('script')).toBeVisible();
+    await expect(folderPage.executionContextGroup('tests')).toBeVisible();
 
-    await test.step('variables move under Execution Context', async () => {
-      await expect(folderPage.executionContextSection.getByTestId('folder-config-vars')).toBeVisible();
-      await expect(folderPage.configurationSection.getByTestId('folder-config-vars')).toHaveCount(0);
+    await test.step('headers and auth are not under Execution Context', async () => {
+      await expect(folderPage.executionContextGroup('headers')).toHaveCount(0);
+      await expect(folderPage.executionContextGroup('auth')).toHaveCount(0);
     });
   });
 });
 
+test.describe('Folder page empty sections', () => {
+  test('shows an empty state in both sections when the folder has nothing configured', async ({ folderPage }) => {
+    await folderPage.open(['Authentication'], '/?fixture=folders');
+    await expect(folderPage.emptyState).toBeVisible();
+    await expect(folderPage.executionContextEmptyState).toBeVisible();
+    await expect(folderPage.executionContextEmptyState).toContainText('No execution context');
+  });
+});
+
 test.describe('Folder variable phases', () => {
   test('shows both Pre-Request and Post-Response, marking the empty one "None."', async ({ folderPage }) => {
     await folderPage.open(['Realtime']);
@@ -100,17 +118,6 @@ test.describe('Folder variable phases', () => {
   });
 });
 
-test.describe('Folder empty variable phase', () => {
-  test('frames the empty Post-Response table like the populated one beside it', async ({ folderPage }) => {
-    await folderPage.open(['Realtime']);
-    const empty = folderPage.configuration.vars.getByTestId('property-table-empty');
-    await expect(empty).toBeVisible();
-    await expect(empty).toHaveText('None.');
-    const framing = await empty.evaluate((el) => getComputedStyle(el).boxShadow);
-    expect(framing).not.toBe('none');
-  });
-});
-
 test.describe('Folder execution context accordion', () => {
   test('collapses the Execution Context section and remembers it across a reload', async ({ folderPage, page }) => {
     await folderPage.open(['Realtime']);
diff --git a/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts b/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts
index f516d5a0..ed9b1a28 100644
--- a/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts
+++ b/packages/bruno-api-docs/e2e/tests/overview/overview.spec.ts
@@ -41,12 +41,12 @@ test.describe('Collection Overview', () => {
       await expect(overviewPage.sectionLabel('Collection Configuration')).toBeVisible();
 
       await test.step('the Headers group lists the collection-level header and its value', async () => {
-        await expect(configuration.subHeading('Headers')).toBeVisible();
+        await expect(configuration.subHeading('headers')).toBeVisible();
         await expect(configuration.root.getByText('collection-header-value')).toBeVisible();
       });
 
       await test.step('the Auth group shows the resolved auth mode (Bearer Token)', async () => {
-        await expect(configuration.subHeading('Auth')).toBeVisible();
+        await expect(configuration.subHeading('auth')).toBeVisible();
         await expect(configuration.root.getByText('Bearer Token')).toBeVisible();
       });
     });
@@ -56,23 +56,17 @@ test.describe('Collection Overview', () => {
       await expect(overviewPage.sectionLabel('Execution Context')).toBeVisible();
 
       await test.step('the Variables group lists the collection-level pre-request variables', async () => {
-        await expect(executionContext.subHeading('Variables')).toBeVisible();
+        await expect(executionContext.subHeading('vars')).toBeVisible();
         await expect(executionContext.root.getByText('collection_pre_var_value', { exact: true })).toBeVisible();
         await expect(executionContext.root.getByText('collection-var-value', { exact: true })).toBeVisible();
       });
 
       await test.step('the Script and Tests groups are present', async () => {
-        await expect(executionContext.subHeading('Script')).toBeVisible();
-        await expect(executionContext.subHeading('Tests')).toBeVisible();
+        await expect(executionContext.subHeading('script')).toBeVisible();
+        await expect(executionContext.subHeading('tests')).toBeVisible();
       });
     });
 
-    test('separates the two sections with a gap, so the headings do not run together', async ({ overviewPage }) => {
-      const configBox = (await overviewPage.sectionLabel('Collection Configuration').boundingBox())!;
-      const executionBox = (await overviewPage.sectionLabel('Execution Context').boundingBox())!;
-      expect(executionBox.y).toBeGreaterThan(configBox.y + configBox.height + 12);
-    });
-
     test('collapses the Execution Context section and remembers it across a reload', async ({
       overviewPage,
       page
@@ -89,23 +83,19 @@ test.describe('Collection Overview', () => {
       await expect(toggle()).toHaveAttribute('aria-expanded', 'false');
     });
 
-    test('mutes the Execution Context heading like the other overview headings', async ({ overviewPage }) => {
-      const colorOf = (el: HTMLElement) => getComputedStyle(el).color;
-      const configuration = await overviewPage
-        .sectionLabel('Collection Configuration')
-        .getByTestId('section-label')
-        .evaluate(colorOf);
-      const execution = await overviewPage
-        .sectionLabel('Execution Context')
-        .getByTestId('section-label')
-        .evaluate(colorOf);
-      expect(execution).toBe(configuration);
+    test('shows the Execution Context empty state when the collection has no vars, scripts or tests', async ({
+      overviewPage
+    }) => {
+      await overviewPage.goto('/?fixture=folders');
+      await expect(overviewPage.sectionLabel('Execution Context')).toBeVisible();
+      await expect(overviewPage.executionContextEmptyState).toContainText('No execution context');
+      await expect(overviewPage.executionContext.root).toHaveCount(0);
     });
 
     test('keeps headers and auth out of the Execution Context section', async ({ overviewPage }) => {
-      await expect(overviewPage.executionContext.subHeading('Headers')).toHaveCount(0);
-      await expect(overviewPage.executionContext.subHeading('Auth')).toHaveCount(0);
-      await expect(overviewPage.configuration.subHeading('Script')).toHaveCount(0);
+      await expect(overviewPage.executionContext.subHeading('headers')).toHaveCount(0);
+      await expect(overviewPage.executionContext.subHeading('auth')).toHaveCount(0);
+      await expect(overviewPage.configuration.subHeading('script')).toHaveCount(0);
     });
 
     test('keeps the auth token masked until the reveal toggle is clicked', async ({ overviewPage }) => {
diff --git a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
index 7e2d8789..557de6de 100644
--- a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
+++ b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
@@ -70,7 +70,6 @@ const EnvSwitcher: React.FC<EnvSwitcherProps> = ({ hideWhenEmpty = false, testId
     return (
       <StyledWrapper data-testid={`${testId}-root`}>
         <button
-          type="button"
           className="env-switcher-trigger env-switcher-trigger--empty"
           aria-disabled="true"
           aria-label="Select environment"
diff --git a/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx b/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
index a9f92d7b..c3e9beab 100644
--- a/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
+++ b/packages/bruno-api-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { TruncatedText } from '@/components/TruncatedText/TruncatedText';
+import cx from '@/utils/cx';
 import { StyledWrapper } from './StyledWrapper';
 
 interface EnvironmentLabelProps {
@@ -19,20 +20,18 @@ export const EnvironmentLabel: React.FC<EnvironmentLabelProps> = ({
   truncate = false,
   testId
 }) => (
-  <StyledWrapper className={['environment-label', className].filter(Boolean).join(' ')} data-testid={testId}>
+  <StyledWrapper className={cx('environment-label', className)} data-testid={testId}>
     <span
-      className={['environment-label-dot', color ? '' : 'environment-label-dot--empty'].filter(Boolean).join(' ')}
+      className={cx('environment-label-dot', { 'environment-label-dot--empty': !color })}
       style={color ? { background: color } : undefined}
     />
     {truncate ? (
       <TruncatedText
         text={name}
-        className={['environment-label-name', 'environment-label-name--clamped', nameClassName]
-          .filter(Boolean)
-          .join(' ')}
+        className={cx('environment-label-name', 'environment-label-name--clamped', nameClassName)}
       />
     ) : (
-      <span className={['environment-label-name', nameClassName].filter(Boolean).join(' ')}>{name}</span>
+      <span className={cx('environment-label-name', nameClassName)}>{name}</span>
     )}
   </StyledWrapper>
 );
diff --git a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
index a8de1672..c799c621 100644
--- a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
+++ b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
@@ -168,7 +168,7 @@ describe('FolderConfiguration', () => {
   });
 });
 
-describe('FolderConfiguration groups', () => {
+describe('FolderConfiguration sectionType', () => {
   const fullConfig: FolderConfig = {
     ...baseConfig,
     headers: [{ name: 'Accept', value: 'application/json' }],
@@ -179,7 +179,7 @@ describe('FolderConfiguration groups', () => {
   };
 
   it('renders only headers and auth for the request groups', () => {
-    const root = useRenderToDom(<FolderConfiguration config={fullConfig} groups="request" />);
+    const root = useRenderToDom(<FolderConfiguration config={fullConfig} sectionType="request" />);
     expect(queryByTestId(root, 'folder-config-headers')).not.toBeNull();
     expect(queryByTestId(root, 'folder-config-auth')).not.toBeNull();
     expect(queryByTestId(root, 'folder-config-vars')).toBeNull();
@@ -188,7 +188,7 @@ describe('FolderConfiguration groups', () => {
   });
 
   it('renders only vars, script and tests for the execution groups', () => {
-    const root = useRenderToDom(<FolderConfiguration config={fullConfig} groups="execution" />);
+    const root = useRenderToDom(<FolderConfiguration config={fullConfig} sectionType="execution" />);
     expect(queryByTestId(root, 'folder-config-vars')).not.toBeNull();
     expect(queryByTestId(root, 'folder-config-script')).not.toBeNull();
     expect(queryByTestId(root, 'folder-config-tests')).not.toBeNull();
diff --git a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
index 554c5f75..7e9f1ed8 100644
--- a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
+++ b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
@@ -14,7 +14,7 @@ interface FolderConfigurationProps {
   config: FolderConfig;
   authModeLabels?: Record<string, string>;
   onNavigate?: (uuid: string) => void;
-  groups?: 'request' | 'execution';
+  sectionType?: 'request' | 'execution';
   testId?: string;
 }
 
@@ -22,11 +22,11 @@ export const FolderConfiguration: React.FC<FolderConfigurationProps> = ({
   config,
   authModeLabels = {},
   onNavigate,
-  groups,
+  sectionType,
   testId
 }) => {
-  const showRequestGroups = groups !== 'execution';
-  const showExecutionGroups = groups !== 'request';
+  const showRequestGroups = sectionType !== 'execution';
+  const showExecutionGroups = sectionType !== 'request';
   const hasInheritedHeaders = config.inheritedHeaders.length > 0;
   const hasHeaders = showRequestGroups && (config.headers.length > 0 || hasInheritedHeaders);
   const hasAuth = showRequestGroups && Boolean(config.auth);
diff --git a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
index 0b4e1479..670d30db 100644
--- a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
+++ b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
@@ -3,7 +3,11 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, it, expect } from 'vitest';
 import type { HttpRequestHeader } from '@opencollection/types/requests/http';
 import { CollectionConfiguration } from './CollectionConfiguration';
+import type { Auth } from '@opencollection/types/common/auth';
 import { AUTH_MODE_LABELS } from '@/constants';
+import { useRenderToDom } from '@/hooks/useRenderToDom';
+import { getByTestId, queryByTestId } from '@/test-utils/dom';
+import type { PreRequestVarRow } from '@/utils/request';
 
 describe('CollectionConfiguration', () => {
   it('renders nothing when there is no configuration', () => {
@@ -71,28 +75,29 @@ describe('CollectionConfiguration', () => {
   });
 });
 
-describe('CollectionConfiguration groups', () => {
+describe('CollectionConfiguration sectionType', () => {
   const props = {
     headers: [{ name: 'Accept', value: 'application/json' }] as HttpRequestHeader[],
-    auth: { type: 'bearer', token: 't' } as never,
+    auth: { type: 'bearer', token: 't' } as Auth,
     scripts: { preRequest: 'console.log("pre")', tests: 'test("ok", () => {})' },
-    preVars: [{ name: 'v', value: '1' }] as never
+    preVars: [{ name: 'v', value: '1' }] as PreRequestVarRow[]
   };
 
-  it('renders only headers and auth for the request groups', () => {
-    const html = renderToStaticMarkup(<CollectionConfiguration {...props} groups="request" />);
-    expect(html).toContain('Headers');
-    expect(html).toContain('Auth');
-    expect(html).not.toContain('Variables');
-    expect(html).not.toContain('Script');
-    expect(html).not.toContain('Tests');
+  it('renders only headers and auth for the request section', () => {
+    const root = useRenderToDom(<CollectionConfiguration {...props} sectionType="request" />);
+    expect(getByTestId(root, 'collection-config-headers-subheading').text.trim()).toBe('Headers');
+    expect(getByTestId(root, 'collection-config-auth-subheading').text.trim()).toBe('Auth');
+    expect(queryByTestId(root, 'collection-config-vars-subheading')).toBeNull();
+    expect(queryByTestId(root, 'collection-config-script-subheading')).toBeNull();
+    expect(queryByTestId(root, 'collection-config-tests-subheading')).toBeNull();
   });
 
-  it('renders only variables, script and tests for the execution groups', () => {
-    const html = renderToStaticMarkup(<CollectionConfiguration {...props} groups="execution" />);
-    expect(html).toContain('Variables');
-    expect(html).toContain('Script');
-    expect(html).toContain('Tests');
-    expect(html).not.toContain('Headers');
+  it('renders only variables, script and tests for the execution section', () => {
+    const root = useRenderToDom(<CollectionConfiguration {...props} sectionType="execution" />);
+    expect(getByTestId(root, 'collection-config-vars-subheading').text.trim()).toBe('Variables');
+    expect(getByTestId(root, 'collection-config-script-subheading').text.trim()).toBe('Script');
+    expect(getByTestId(root, 'collection-config-tests-subheading').text.trim()).toBe('Tests');
+    expect(queryByTestId(root, 'collection-config-headers-subheading')).toBeNull();
+    expect(queryByTestId(root, 'collection-config-auth-subheading')).toBeNull();
   });
 });
diff --git a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
index 6fb1639f..7866dc81 100644
--- a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
+++ b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
@@ -23,7 +23,7 @@ interface CollectionConfigurationProps {
   preVars?: PreRequestVarRow[];
   postVars?: PostResponseVarRow[];
   authModeLabels?: Record<string, string>;
-  groups?: 'request' | 'execution';
+  sectionType?: 'request' | 'execution';
   testId?: string;
 }
 
@@ -34,11 +34,11 @@ export const CollectionConfiguration: React.FC<CollectionConfigurationProps> = (
   preVars = [],
   postVars = [],
   authModeLabels = {},
-  groups,
+  sectionType,
   testId = 'collection-config'
 }) => {
-  const showRequestGroups = groups !== 'execution';
-  const showExecutionGroups = groups !== 'request';
+  const showRequestGroups = sectionType !== 'execution';
+  const showExecutionGroups = sectionType !== 'request';
   const headerRows: PropertyRow[] = headers
     .filter((header) => header && header.name)
     .map((header) => ({
@@ -63,28 +63,28 @@ export const CollectionConfiguration: React.FC<CollectionConfigurationProps> = (
     <StyledWrapper className="collection-configuration" data-testid={testId}>
       {hasHeaders && (
         <div className="config-group" data-nav-section="Headers" data-nav-level={2}>
-          <SubHeading className="script-label" testId={`${testId}-subheading`}>Headers</SubHeading>
+          <SubHeading className="script-label" testId={`${testId}-headers-subheading`}>Headers</SubHeading>
           <PropertyTable rows={headerRows} testId={`${testId}-headers`} />
         </div>
       )}
 
       {hasAuth && (
         <div className="config-group" data-nav-section="Auth" data-nav-level={2}>
-          <SubHeading className="script-label" testId={`${testId}-subheading`}>Auth</SubHeading>
+          <SubHeading className="script-label" testId={`${testId}-auth-subheading`}>Auth</SubHeading>
           <AuthDetails auth={auth} authModeLabels={authModeLabels} testId={`${testId}-auth`} />
         </div>
       )}
 
       {hasVars && (
         <div className="config-group" data-nav-section="Variables" data-nav-level={2}>
-          <SubHeading className="script-label" testId={`${testId}-subheading`}>Variables</SubHeading>
+          <SubHeading className="script-label" testId={`${testId}-vars-subheading`}>Variables</SubHeading>
           <VariablesPanel preVars={preVars} postVars={postVars} variant="stacked" />
         </div>
       )}
 
       {hasScripts && (
         <div className="config-group" data-nav-section="Script" data-nav-level={2}>
-          <SubHeading className="script-label" testId={`${testId}-subheading`}>Script</SubHeading>
+          <SubHeading className="script-label" testId={`${testId}-script-subheading`}>Script</SubHeading>
           {scripts.preRequest && (
             <div className="script-block">
               <p className="script-phase-label">Pre-Request</p>
@@ -102,7 +102,7 @@ export const CollectionConfiguration: React.FC<CollectionConfigurationProps> = (
 
       {hasTests && (
         <div className="config-group" data-nav-section="Tests" data-nav-level={2}>
-          <SubHeading className="script-label" testId={`${testId}-subheading`}>Tests</SubHeading>
+          <SubHeading className="script-label" testId={`${testId}-tests-subheading`}>Tests</SubHeading>
           <Code code={scripts.tests as string} language="javascript" showLineNumbers testId={`${testId}-tests`} />
         </div>
       )}
diff --git a/packages/bruno-api-docs/src/pages/Folder/Folder.spec.tsx b/packages/bruno-api-docs/src/pages/Folder/Folder.spec.tsx
index 20ff31a3..6e174c07 100644
--- a/packages/bruno-api-docs/src/pages/Folder/Folder.spec.tsx
+++ b/packages/bruno-api-docs/src/pages/Folder/Folder.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { describe, it, expect } from 'vitest';
 import type { OpenCollection } from '@opencollection/types';
+import type { Folder as FolderItem } from '@opencollection/types/collection/item';
 import { useRenderToDom } from '@/hooks/useRenderToDom';
 import { query, getByTestId, queryByTestId } from '@/test-utils/dom';
 import { Folder } from './Folder';
@@ -94,18 +95,20 @@ describe('Folder', () => {
     const empty = getByTestId(root, 'folder-config-empty');
     expect(query(empty, '.empty-state-heading').text.trim()).toBe('No folder configuration');
     expect(queryByTestId(root, 'folder-config-headers')).toBeNull();
+    expect(getByTestId(root, 'folder-execution-context-empty-heading').text.trim()).toBe('No execution context');
   });
 });
 
 describe('Folder execution context section', () => {
-  const folderWithBoth: any = {
+  const bareCollection = { info: { name: 'c' } } as unknown as OpenCollection;
+  const folderWithBoth = {
     info: { name: 'Invoices' },
     request: {
       headers: [{ name: 'Accept', value: 'application/json' }],
       scripts: [{ type: 'before-request', code: 'pre()' }]
     },
     items: [{ info: { type: 'http' } }]
-  };
+  } as unknown as FolderItem;
 
   it('puts headers and auth under Folder Configuration, and vars, script and tests under Execution Context', () => {
     const root = useRenderToDom(<Folder item={folderWithBoth} collection={collection} />);
@@ -122,26 +125,40 @@ describe('Folder execution context section', () => {
     expect(executionSection.querySelector('[data-testid="folder-config-headers"]')).toBeNull();
   });
 
-  it('omits the Execution Context section when the folder has no vars, scripts or tests', () => {
-    const headersOnly: any = {
+  it('shows the Execution Context empty state, not an accordion, when the folder has no vars, scripts or tests', () => {
+    const headersOnly = {
       info: { name: 'Invoices' },
       request: { headers: [{ name: 'Accept', value: 'application/json' }] },
       items: [{ info: { type: 'http' } }]
-    };
-    const root = useRenderToDom(<Folder item={headersOnly} collection={{ info: { name: 'c' } } as any} />);
-    expect(queryByTestId(root, 'folder-section-execution-context')).toBeNull();
+    } as unknown as FolderItem;
+    const root = useRenderToDom(<Folder item={headersOnly} collection={bareCollection} />);
+    const executionSection = getByTestId(root, 'folder-section-execution-context');
+    expect(getByTestId(executionSection, 'folder-execution-context-empty-heading').text.trim()).toBe('No execution context');
+    expect(executionSection.querySelector('button')).toBeNull();
+  });
+
+  it('drops the Folder Configuration section when the folder only has an execution context', () => {
+    const scriptsOnly = {
+      info: { name: 'Invoices' },
+      request: { scripts: [{ type: 'before-request', code: 'pre()' }] },
+      items: [{ info: { type: 'http' } }]
+    } as unknown as FolderItem;
+    const root = useRenderToDom(<Folder item={scriptsOnly} collection={bareCollection} />);
+    expect(queryByTestId(root, 'folder-section-configuration')).toBeNull();
+    expect(queryByTestId(root, 'folder-config-empty')).toBeNull();
+    expect(getByTestId(root, 'folder-execution-context')).not.toBeNull();
   });
 });
 
 describe('Folder execution context accordion', () => {
-  const folderWithScripts: any = {
+  const folderWithScripts = {
     info: { name: 'Invoices' },
     request: {
       headers: [{ name: 'Accept', value: 'application/json' }],
       scripts: [{ type: 'before-request', code: 'pre()' }]
     },
     items: [{ info: { type: 'http' } }]
-  };
+  } as unknown as FolderItem;
 
   it('renders the Execution Context section as an expanded accordion', () => {
     const root = useRenderToDom(<Folder item={folderWithScripts} collection={collection} />);
diff --git a/packages/bruno-api-docs/src/pages/Folder/Folder.tsx b/packages/bruno-api-docs/src/pages/Folder/Folder.tsx
index c0c6fe0b..6bd0efe4 100644
--- a/packages/bruno-api-docs/src/pages/Folder/Folder.tsx
+++ b/packages/bruno-api-docs/src/pages/Folder/Folder.tsx
@@ -20,7 +20,7 @@ import { ViewMore } from '../../components/ViewMore/ViewMore';
 import { EmptyState } from '@/ui/EmptyState/EmptyState';
 import { FolderConfiguration } from '../../components/FolderConfiguration/FolderConfiguration';
 import { Tags } from '@/components/Tags/Tags';
-import { FolderIcon } from '@/assets/icons';
+import { FolderIcon, RefreshIcon } from '@/assets/icons';
 import { StyledWrapper } from './StyledWrapper';
 
 interface FolderProps {
@@ -91,7 +91,7 @@ export const Folder: React.FC<FolderProps> = ({ item, ancestry = [], collection,
             {showRequestConfig ? (
               <FolderConfiguration
                 config={config}
-                groups="request"
+                sectionType="request"
                 authModeLabels={AUTH_MODE_LABELS}
                 onNavigate={onBreadcrumbClick}
                 testId="folder-config"
@@ -101,30 +101,37 @@ export const Folder: React.FC<FolderProps> = ({ item, ancestry = [], collection,
                 testId="folder-config-empty"
                 icon={<FolderIcon />}
                 heading="No folder configuration"
-                subheading="This folder has no headers, auth, scripts, vars, or tests set. Requests inside it inherit configuration from the collection."
+                subheading="This folder has no headers or auth set. Requests inside it inherit configuration from the collection."
               />
             )}
           </Section>
         )}
 
-        {showExecutionContext && (
-          <Section
-            label="Execution Context"
-            testId="folder-section-execution-context"
-            className="folder-fullwidth"
-            labelClassName="section-label-muted"
-            collapsible
-            storageKey="folder-execution-context"
-          >
+        <Section
+          label="Execution Context"
+          testId="folder-section-execution-context"
+          className="folder-fullwidth"
+          labelClassName="section-label-muted"
+          collapsible={showExecutionContext}
+          storageKey="folder-execution-context"
+        >
+          {showExecutionContext ? (
             <FolderConfiguration
               config={config}
-              groups="execution"
+              sectionType="execution"
               authModeLabels={AUTH_MODE_LABELS}
               onNavigate={onBreadcrumbClick}
               testId="folder-execution-context"
             />
-          </Section>
-        )}
+          ) : (
+            <EmptyState
+              testId="folder-execution-context-empty"
+              icon={<RefreshIcon />}
+              heading="No execution context"
+              subheading="This folder has no scripts, variables, or tests configured."
+            />
+          )}
+        </Section>
       </StyledWrapper>
     </PageWrapper>
   );
diff --git a/packages/bruno-api-docs/src/pages/Overview/Overview.spec.tsx b/packages/bruno-api-docs/src/pages/Overview/Overview.spec.tsx
index d3c781f1..5febdc5e 100644
--- a/packages/bruno-api-docs/src/pages/Overview/Overview.spec.tsx
+++ b/packages/bruno-api-docs/src/pages/Overview/Overview.spec.tsx
@@ -3,7 +3,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, it, expect } from 'vitest';
 import type { OpenCollection } from '@opencollection/types';
 import { useRenderToDom } from '@/hooks/useRenderToDom';
-import { query } from '@/test-utils/dom';
+import { query, getByTestId, queryByTestId } from '@/test-utils/dom';
 import { Overview } from './Overview';
 
 /** Every Overview section shares one test id, so find a section by its text. */
@@ -56,22 +56,38 @@ describe('Overview execution context section', () => {
       }
     } as unknown as OpenCollection;
 
-    const html = renderToStaticMarkup(<Overview collection={collection} />);
+    const root = useRenderToDom(<Overview collection={collection} />);
 
-    expect(html).toContain('Collection Configuration');
-    expect(html).toContain('Execution Context');
+    expect(getByTestId(sectionNamed(root, 'Collection Configuration'), 'collection-config-headers-subheading')).not.toBeNull();
+    expect(getByTestId(sectionNamed(root, 'Execution Context'), 'collection-execution-context-script-subheading')).not.toBeNull();
+    expect(queryByTestId(root, 'collection-execution-context-empty')).toBeNull();
   });
 
-  it('omits the Execution Context heading when the collection has no vars, scripts or tests', () => {
+  it('shows the Execution Context empty state, not an accordion, when the collection has no vars, scripts or tests', () => {
     const collection: OpenCollection = {
       info: { name: 'Hotel Booking API' },
       request: { headers: [{ name: 'Accept', value: 'application/json' }] }
     } as unknown as OpenCollection;
 
-    const html = renderToStaticMarkup(<Overview collection={collection} />);
+    const root = useRenderToDom(<Overview collection={collection} />);
+    const executionSection = sectionNamed(root, 'Execution Context');
 
-    expect(html).toContain('Collection Configuration');
-    expect(html).not.toContain('Execution Context');
+    expect(getByTestId(executionSection, 'collection-execution-context-empty-heading').text.trim()).toBe('No execution context');
+    expect(executionSection.querySelector('button')).toBeNull();
+    expect(queryByTestId(root, 'collection-execution-context')).toBeNull();
+  });
+
+  it('drops the Collection Configuration section when the collection only has an execution context', () => {
+    const collection: OpenCollection = {
+      info: { name: 'Hotel Booking API' },
+      request: { scripts: [{ type: 'before-request', code: 'pre()' }] }
+    } as unknown as OpenCollection;
+
+    const root = useRenderToDom(<Overview collection={collection} />);
+
+    expect(queryByTestId(root, 'collection-config')).toBeNull();
+    expect(root.text).not.toContain('Collection Configuration');
+    expect(getByTestId(root, 'collection-execution-context-script-subheading').text.trim()).toBe('Script');
   });
 });
 
diff --git a/packages/bruno-api-docs/src/pages/Overview/Overview.tsx b/packages/bruno-api-docs/src/pages/Overview/Overview.tsx
index 6c9a5bc6..48689ae6 100644
--- a/packages/bruno-api-docs/src/pages/Overview/Overview.tsx
+++ b/packages/bruno-api-docs/src/pages/Overview/Overview.tsx
@@ -18,7 +18,7 @@ import { Heading } from '../../components/Heading/Heading';
 import { Section } from '../../components/Section/Section';
 import { ViewMore } from '../../components/ViewMore/ViewMore';
 import { Tags } from '@/components/Tags/Tags';
-import { BookIcon } from '@/assets/icons';
+import { BookIcon, RefreshIcon } from '@/assets/icons';
 import { StyledWrapper } from './StyledWrapper';
 
 const getDocsContent = (docs: OpenCollection['docs']): string => {
@@ -112,7 +112,7 @@ export const Overview: React.FC<OverviewProps> = ({ collection, testId = 'overvi
                   <CollectionConfiguration
                     headers={collection.request?.headers}
                     auth={collection.request?.auth}
-                    groups="request"
+                    sectionType="request"
                     authModeLabels={AUTH_MODE_LABELS}
                   />
                 ) : (
@@ -120,29 +120,36 @@ export const Overview: React.FC<OverviewProps> = ({ collection, testId = 'overvi
                     testId="overview-empty"
                     icon={<BookIcon />}
                     heading="No configuration set"
-                    subheading="This collection has no shared headers, auth, scripts, variables, or tests. Configure them in Bruno and they'll appear here."
+                    subheading="This collection has no shared headers or auth. Configure them in Bruno and they'll appear here."
                   />
                 )}
               </Section>
             )}
 
-            {hasExecutionContext && (
-              <Section
-                label="Execution Context"
-                testId="overview-section-label"
-                collapsible
-                storageKey="collection-execution-context"
-              >
+            <Section
+              label="Execution Context"
+              testId="overview-section-label"
+              collapsible={hasExecutionContext}
+              storageKey="collection-execution-context"
+            >
+              {hasExecutionContext ? (
                 <CollectionConfiguration
                   scripts={scripts}
                   preVars={preVars}
                   postVars={postVars}
-                  groups="execution"
+                  sectionType="execution"
                   authModeLabels={AUTH_MODE_LABELS}
                   testId="collection-execution-context"
                 />
-              </Section>
-            )}
+              ) : (
+                <EmptyState
+                  testId="collection-execution-context-empty"
+                  icon={<RefreshIcon />}
+                  heading="No execution context"
+                  subheading="This collection has no shared scripts, variables, or tests."
+                />
+              )}
+            </Section>
           </div>
         </div>
       </StyledWrapper>

From 9361fc82552783ffec66cbe133ab4a1c93d4547d Mon Sep 17 00:00:00 2001
From: Sundram Gupta <sundram@usebruno.com>
Date: Thu, 24 Sep 2026 11:04:23 +0530
Subject: [PATCH 4/5] comments addressed

---
 .../layout/env-switcher.component.ts          |  2 -
 .../environments/env-switcher-empty.spec.ts   |  9 +--
 .../EnvSwitcher/EnvSwitcher.spec.tsx          |  6 +-
 .../components/EnvSwitcher/EnvSwitcher.tsx    |  9 +--
 .../components/EnvSwitcher/StyledWrapper.ts   |  5 +-
 .../FolderConfiguration.spec.tsx              | 35 ++++----
 .../FolderConfiguration.tsx                   |  6 +-
 .../CollectionConfiguration.spec.tsx          | 80 +++++++++++--------
 .../CollectionConfiguration.tsx               |  6 +-
 .../src/utils/collectionOverview.spec.ts      | 14 +++-
 .../src/utils/collectionOverview.ts           |  8 --
 .../bruno-api-docs/src/utils/folder.spec.ts   | 48 +++--------
 packages/bruno-api-docs/src/utils/folder.ts   |  3 -
 13 files changed, 110 insertions(+), 121 deletions(-)

diff --git a/packages/bruno-api-docs/e2e/components/layout/env-switcher.component.ts b/packages/bruno-api-docs/e2e/components/layout/env-switcher.component.ts
index 70cfe96e..791c88e9 100644
--- a/packages/bruno-api-docs/e2e/components/layout/env-switcher.component.ts
+++ b/packages/bruno-api-docs/e2e/components/layout/env-switcher.component.ts
@@ -15,7 +15,6 @@ export class EnvSwitcherComponent extends BaseComponent {
   readonly trigger: Locator;
   readonly menu: Locator;
   readonly surface: Locator;
-  readonly emptyOption: Locator;
 
   constructor(
     page: Page,
@@ -25,7 +24,6 @@ export class EnvSwitcherComponent extends BaseComponent {
     this.trigger = this.root.getByTestId(base);
     this.menu = this.page.getByTestId(`${base}-dropdown`);
     this.surface = this.menu.locator('xpath=ancestor::div[@data-tippy-root]');
-    this.emptyOption = this.option('no-environments');
   }
 
   option(name: string): Locator {
diff --git a/packages/bruno-api-docs/e2e/tests/environments/env-switcher-empty.spec.ts b/packages/bruno-api-docs/e2e/tests/environments/env-switcher-empty.spec.ts
index d6406c4d..db9f2eac 100644
--- a/packages/bruno-api-docs/e2e/tests/environments/env-switcher-empty.spec.ts
+++ b/packages/bruno-api-docs/e2e/tests/environments/env-switcher-empty.spec.ts
@@ -16,17 +16,16 @@ test.describe('Environment switcher with no environments', () => {
     await expect(playground.envSwitcher.trigger).toContainText('No environments');
   });
 
-  test('opens no menu in the playground, and shows no caret', async ({ page, playground }) => {
+  test('shows plain text in the playground, with no caret and nothing to open', async ({ page, playground }) => {
     await page.goto(`${NO_ENVIRONMENTS}#/?pg=1&dock=bottom`);
     await playground.ensureSidebarOpen();
     const { trigger } = playground.envSwitcher;
 
-    await expect(trigger).toHaveAttribute('aria-disabled', 'true');
+    await expect(trigger).toContainText('No environments');
+    await expect(playground.envSwitcher.root.getByRole('button')).toHaveCount(0);
     await expect(trigger.locator('.env-switcher-chevron')).toHaveCount(0);
 
-    // Forced: Playwright sees it as disabled and would not click it otherwise.
-    await trigger.click({ force: true });
-    await page.waitForTimeout(300);
+    await trigger.click();
     await expect(playground.envSwitcher.menu).toHaveCount(0);
   });
 });
diff --git a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.spec.tsx b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.spec.tsx
index a7ec157b..476ec2be 100644
--- a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.spec.tsx
+++ b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.spec.tsx
@@ -63,14 +63,16 @@ describe('EnvSwitcher', () => {
     expect(trigger.text).not.toContain('Ghost');
   });
 
-  it('renders an inert empty state when there are no environments', () => {
+  it('renders the empty state as plain text, not a button, when there are no environments', () => {
     const root = render(collectionWith([]));
     const trigger = getByTestId(root, 'env-switcher');
     expect(trigger.text).toContain('No environments');
+    expect(trigger.tagName.toLowerCase()).toBe('span');
     expect(trigger.classList.contains('env-switcher-trigger--empty')).toBe(true);
     expect(trigger.getAttribute('title')).toBeFalsy();
-    expect(trigger.getAttribute('aria-disabled')).toBe('true');
+    expect(trigger.getAttribute('aria-label')).toBeFalsy();
     expect(trigger.getAttribute('aria-haspopup')).toBeFalsy();
+    expect(root.querySelector('button')).toBeNull();
     expect(root.querySelector('.env-switcher-chevron')).toBeFalsy();
   });
 
diff --git a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
index 557de6de..cc2f97e3 100644
--- a/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
+++ b/packages/bruno-api-docs/src/components/EnvSwitcher/EnvSwitcher.tsx
@@ -69,14 +69,9 @@ const EnvSwitcher: React.FC<EnvSwitcherProps> = ({ hideWhenEmpty = false, testId
   if (!hasEnvironments) {
     return (
       <StyledWrapper data-testid={`${testId}-root`}>
-        <button
-          className="env-switcher-trigger env-switcher-trigger--empty"
-          aria-disabled="true"
-          aria-label="Select environment"
-          data-testid={testId}
-        >
+        <span className="env-switcher-trigger env-switcher-trigger--empty" data-testid={testId}>
           <EnvironmentLabel name="No environments" truncate />
-        </button>
+        </span>
       </StyledWrapper>
     );
   }
diff --git a/packages/bruno-api-docs/src/components/EnvSwitcher/StyledWrapper.ts b/packages/bruno-api-docs/src/components/EnvSwitcher/StyledWrapper.ts
index 94745680..a09a992b 100644
--- a/packages/bruno-api-docs/src/components/EnvSwitcher/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/components/EnvSwitcher/StyledWrapper.ts
@@ -28,9 +28,12 @@ export const StyledWrapper = styled.div`
     background: var(--oc-app-collection-toolbar-environment-selector-hover-bg);
   }
 
-  .env-switcher-trigger--empty {
+  .env-switcher-trigger--empty,
+  .env-switcher-trigger--empty:hover {
     color: var(--oc-app-collection-toolbar-environment-selector-no-environment-text);
     background: var(--oc-app-collection-toolbar-environment-selector-no-environment-bg);
+    border-color: var(--oc-border-border1);
+    cursor: default;
   }
 
   .env-switcher-chevron {
diff --git a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
index c799c621..75c53533 100644
--- a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
+++ b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx
@@ -28,15 +28,14 @@ describe('FolderConfiguration', () => {
       headers: [{ name: 'Accept', value: 'application/json' }],
       preRequest: 'console.log(1)'
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} />);
-
-    expect(queryByTestId(root, 'folder-config-headers')).not.toBeNull();
-    expect(queryByTestId(root, 'folder-config-script')).not.toBeNull();
-    expect(query(root, '[data-testid="folder-config-headers"] .property-key').text.trim()).toBe('Accept');
-
-    expect(queryByTestId(root, 'folder-config-auth')).toBeNull();
-    expect(queryByTestId(root, 'folder-config-vars')).toBeNull();
-    expect(queryByTestId(root, 'folder-config-tests')).toBeNull();
+    const requestRoot = useRenderToDom(<FolderConfiguration config={config} sectionType="request" />);
+    expect(query(requestRoot, '[data-testid="folder-config-headers"] .property-key').text.trim()).toBe('Accept');
+    expect(queryByTestId(requestRoot, 'folder-config-auth')).toBeNull();
+
+    const executionRoot = useRenderToDom(<FolderConfiguration config={config} sectionType="execution" />);
+    expect(queryByTestId(executionRoot, 'folder-config-script')).not.toBeNull();
+    expect(queryByTestId(executionRoot, 'folder-config-vars')).toBeNull();
+    expect(queryByTestId(executionRoot, 'folder-config-tests')).toBeNull();
   });
 
   it('labels the Auth group with an "Inherited from collection" badge when auth is inherited', () => {
@@ -45,7 +44,7 @@ describe('FolderConfiguration', () => {
       auth: { type: 'bearer', token: 't' } as any,
       authSource: { level: 'collection', name: 'API', uuid: '__collection_root__' }
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} authModeLabels={{ bearer: 'Bearer Token' }} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="request" authModeLabels={{ bearer: 'Bearer Token' }} />);
 
     const authGroup = getByTestId(root, 'folder-config-auth');
     expect(query(authGroup, '.config-group-head').text).toContain('Inherited from collection: API');
@@ -57,7 +56,7 @@ describe('FolderConfiguration', () => {
       auth: { type: 'bearer', token: 't' } as any,
       authSource: { level: 'folder', name: 'Parent', uuid: 'parent-uid' }
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} onNavigate={() => {}} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="request" onNavigate={() => {}} />);
     const chip = getByTestId(root, 'folder-config-auth-inherited');
     expect(chip.text).toContain('Inherited from folder: Parent');
     expect(chip.getAttribute('role')).toBe('button');
@@ -73,7 +72,7 @@ describe('FolderConfiguration', () => {
         { name: 'Authorization', value: 'Bearer x', source: folderSource }
       ]
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} onNavigate={() => {}} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="request" onNavigate={() => {}} />);
     const headers = getByTestId(root, 'folder-config-headers');
     expect(headers.text).toContain('Accept'); // own
     expect(headers.text).toContain('X-Api-Version'); // inherited
@@ -87,7 +86,7 @@ describe('FolderConfiguration', () => {
       ...baseConfig,
       inheritedHeaders: [{ name: 'X-Api-Version', value: 'v2', source: folderSource }]
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} onNavigate={() => {}} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="request" onNavigate={() => {}} />);
     const headers = getByTestId(root, 'folder-config-headers');
     expect(headers.text).toContain('X-Api-Version');
     expect(headers.text).toContain('1 header inherited');
@@ -100,7 +99,7 @@ describe('FolderConfiguration', () => {
       inheritedPreVariables: [{ name: 'baseUrl', value: '{{host}}', source: folderSource }],
       inheritedPostVariables: [{ name: 'sessionId', expression: 'res.body.id', source: folderSource }]
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} onNavigate={() => {}} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="execution" onNavigate={() => {}} />);
     const vars = getByTestId(root, 'folder-config-vars');
     expect(vars.text).toContain('ownPre');
     expect(vars.text).toContain('baseUrl');
@@ -116,7 +115,7 @@ describe('FolderConfiguration', () => {
       postResponse: 'post()',
       tests: 'test()'
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="execution" />);
 
     const phases = getByTestId(root, 'folder-config-script')
       .querySelectorAll('.config-phase-label')
@@ -130,7 +129,7 @@ describe('FolderConfiguration', () => {
       ...baseConfig,
       headers: [{ name: 'X-Debug', value: 'on', disabled: true, description: 'toggles debug logging' }]
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="request" />);
 
     const headers = getByTestId(root, 'folder-config-headers');
     expect(query(headers, '.property-key').text.trim()).toBe('X-Debug');
@@ -144,7 +143,7 @@ describe('FolderConfiguration', () => {
       variables: [{ name: 'baseUrl', value: 'https://api.example.com' }],
       postVariables: [{ name: 'token', expression: 'res.body.token', scope: 'runtime' }]
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="execution" />);
 
     const vars = getByTestId(root, 'folder-config-vars');
     const phases = vars.querySelectorAll('.config-phase-label').map((el) => el.text.trim());
@@ -159,7 +158,7 @@ describe('FolderConfiguration', () => {
       ...baseConfig,
       postVariables: [{ name: 'sessionId', expression: 'res.body.id', scope: 'runtime' }]
     };
-    const root = useRenderToDom(<FolderConfiguration config={config} />);
+    const root = useRenderToDom(<FolderConfiguration config={config} sectionType="execution" />);
 
     const vars = getByTestId(root, 'folder-config-vars');
     const phases = vars.querySelectorAll('.config-phase-label').map((el) => el.text.trim());
diff --git a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
index 7e9f1ed8..56f5877a 100644
--- a/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
+++ b/packages/bruno-api-docs/src/components/FolderConfiguration/FolderConfiguration.tsx
@@ -14,7 +14,7 @@ interface FolderConfigurationProps {
   config: FolderConfig;
   authModeLabels?: Record<string, string>;
   onNavigate?: (uuid: string) => void;
-  sectionType?: 'request' | 'execution';
+  sectionType: 'request' | 'execution';
   testId?: string;
 }
 
@@ -25,8 +25,8 @@ export const FolderConfiguration: React.FC<FolderConfigurationProps> = ({
   sectionType,
   testId
 }) => {
-  const showRequestGroups = sectionType !== 'execution';
-  const showExecutionGroups = sectionType !== 'request';
+  const showRequestGroups = sectionType === 'request';
+  const showExecutionGroups = sectionType === 'execution';
   const hasInheritedHeaders = config.inheritedHeaders.length > 0;
   const hasHeaders = showRequestGroups && (config.headers.length > 0 || hasInheritedHeaders);
   const hasAuth = showRequestGroups && Boolean(config.auth);
diff --git a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
index 670d30db..9d40519f 100644
--- a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
+++ b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.spec.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, it, expect } from 'vitest';
 import type { HttpRequestHeader } from '@opencollection/types/requests/http';
 import { CollectionConfiguration } from './CollectionConfiguration';
@@ -11,67 +10,84 @@ import type { PreRequestVarRow } from '@/utils/request';
 
 describe('CollectionConfiguration', () => {
   it('renders nothing when there is no configuration', () => {
-    const html = renderToStaticMarkup(<CollectionConfiguration />);
-    expect(html).toBe('');
+    expect(useRenderToDom(<CollectionConfiguration sectionType="request" />).toString()).toBe('');
+    expect(useRenderToDom(<CollectionConfiguration sectionType="execution" />).toString()).toBe('');
   });
 
-  it('renders enabled headers, masks secret auth values and shows script/test code', () => {
+  it('renders enabled and disabled headers and masks secret auth values', () => {
     const headers: HttpRequestHeader[] = [
       { name: 'Accept', value: 'application/json' },
       { name: 'X-Disabled', value: 'nope', disabled: true }
     ];
 
-    const html = renderToStaticMarkup(
+    const root = useRenderToDom(
       <CollectionConfiguration
         headers={headers}
         auth={{ type: 'basic', username: 'user@example.com', password: 's3cr3t' }}
-        scripts={{ preRequest: 'console.log("pre")', tests: 'test("ok", () => {})' }}
         authModeLabels={AUTH_MODE_LABELS}
+        sectionType="request"
       />
     );
 
-    expect(html).toContain('Accept');
-    expect(html).toContain('application/json');
-    expect(html).toContain('X-Disabled');
-    expect(html).toContain('disabled-badge');
+    const headersTable = getByTestId(root, 'collection-config-headers');
+    expect(headersTable.text).toContain('Accept');
+    expect(headersTable.text).toContain('application/json');
+    expect(headersTable.text).toContain('X-Disabled');
+    expect(queryByTestId(headersTable, 'disabled-badge')).not.toBeNull();
+
+    const auth = getByTestId(root, 'collection-config-auth');
+    expect(auth.text).toContain('Basic Auth');
+    expect(auth.text).toContain('user@example.com');
+    expect(auth.text).not.toContain('s3cr3t');
+  });
 
-    // Auth mode resolved via the supplied labels; username shown, password masked
-    expect(html).toContain('Basic Auth');
-    expect(html).toContain('user@example.com');
-    expect(html).not.toContain('s3cr3t');
+  it('renders the script and test code', () => {
+    const root = useRenderToDom(
+      <CollectionConfiguration
+        scripts={{ preRequest: 'console.log("pre")', tests: 'test("ok", () => {})' }}
+        sectionType="execution"
+      />
+    );
 
-    // Script and test sections render
-    expect(html).toContain('Pre-Request');
-    expect(html).toContain('Tests');
+    expect(getByTestId(root, 'collection-config-script-subheading').text.trim()).toBe('Script');
+    expect(root.text).toContain('Pre-Request');
+    expect(getByTestId(root, 'collection-config-tests').text).toContain('test("ok"');
   });
 
-  it('renders collection variables (pre-request + post-response) and header descriptions', () => {
-    const html = renderToStaticMarkup(
+  it('renders header descriptions', () => {
+    const root = useRenderToDom(
       <CollectionConfiguration
         headers={[{ name: 'Accept', value: 'application/json', description: 'content negotiation' } as HttpRequestHeader]}
+        sectionType="request"
+      />
+    );
+    expect(getByTestId(root, 'collection-config-headers').text).toContain('content negotiation');
+  });
+
+  it('renders collection variables (pre-request + post-response)', () => {
+    const root = useRenderToDom(
+      <CollectionConfiguration
         preVars={[{ name: 'baseUrl', value: 'https://api.example.com' }]}
         postVars={[{ name: 'token', expression: 'res.body.token' }]}
+        sectionType="execution"
       />
     );
-    expect(html).toContain('Variables');
-    expect(html).toContain('baseUrl');
-    expect(html).toContain('https://api.example.com');
-    expect(html).toContain('token');
-    expect(html).toContain('res.body.token');
-    expect(html).toContain('content negotiation');
+    expect(getByTestId(root, 'collection-config-vars-subheading').text.trim()).toBe('Variables');
+    expect(root.text).toContain('baseUrl');
+    expect(root.text).toContain('https://api.example.com');
+    expect(root.text).toContain('token');
+    expect(root.text).toContain('res.body.token');
   });
 
   it('falls back to the raw auth type when no label is supplied', () => {
-    const html = renderToStaticMarkup(<CollectionConfiguration auth={{ type: 'bearer', token: 't' }} />);
-    expect(html).toContain('bearer');
+    const root = useRenderToDom(<CollectionConfiguration auth={{ type: 'bearer', token: 't' }} sectionType="request" />);
+    expect(getByTestId(root, 'collection-config-auth').text).toContain('bearer');
   });
 
   it('omits the subsections that have no content', () => {
-    const html = renderToStaticMarkup(<CollectionConfiguration auth={{ type: 'bearer', token: 't' }} />);
-    expect(html).toContain('Auth');
-    expect(html).not.toContain('Headers');
-    expect(html).not.toContain('Script');
-    expect(html).not.toContain('Tests');
+    const root = useRenderToDom(<CollectionConfiguration auth={{ type: 'bearer', token: 't' }} sectionType="request" />);
+    expect(getByTestId(root, 'collection-config-auth-subheading').text.trim()).toBe('Auth');
+    expect(queryByTestId(root, 'collection-config-headers-subheading')).toBeNull();
   });
 });
 
diff --git a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
index 7866dc81..5ca03333 100644
--- a/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
+++ b/packages/bruno-api-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx
@@ -23,7 +23,7 @@ interface CollectionConfigurationProps {
   preVars?: PreRequestVarRow[];
   postVars?: PostResponseVarRow[];
   authModeLabels?: Record<string, string>;
-  sectionType?: 'request' | 'execution';
+  sectionType: 'request' | 'execution';
   testId?: string;
 }
 
@@ -37,8 +37,8 @@ export const CollectionConfiguration: React.FC<CollectionConfigurationProps> = (
   sectionType,
   testId = 'collection-config'
 }) => {
-  const showRequestGroups = sectionType !== 'execution';
-  const showExecutionGroups = sectionType !== 'request';
+  const showRequestGroups = sectionType === 'request';
+  const showExecutionGroups = sectionType === 'execution';
   const headerRows: PropertyRow[] = headers
     .filter((header) => header && header.name)
     .map((header) => ({
diff --git a/packages/bruno-api-docs/src/utils/collectionOverview.spec.ts b/packages/bruno-api-docs/src/utils/collectionOverview.spec.ts
index 3f0dd688..b48b5f6a 100644
--- a/packages/bruno-api-docs/src/utils/collectionOverview.spec.ts
+++ b/packages/bruno-api-docs/src/utils/collectionOverview.spec.ts
@@ -1,14 +1,24 @@
 import { describe, it, expect } from 'vitest';
 import type { OpenCollection } from '@opencollection/types';
 import type { Item as OpenCollectionItem } from '@opencollection/types/collection/item';
+import type { HttpRequestHeader } from '@opencollection/types/requests/http';
+import type { Auth } from '@opencollection/types/common/auth';
 import {
   countItems,
   getCollectionStats,
-  hasCollectionConfiguration,
   hasCollectionExecutionContext,
-  hasCollectionRequestConfig
+  hasCollectionRequestConfig,
+  type CollectionScripts
 } from './collectionOverview';
 
+const hasCollectionConfiguration = (
+  headers: HttpRequestHeader[] = [],
+  auth?: Auth,
+  scripts: CollectionScripts = {},
+  hasVars = false
+): boolean =>
+  hasCollectionRequestConfig(headers, auth) || hasCollectionExecutionContext(scripts, hasVars);
+
 describe('countItems', () => {
   it('counts requests and folders recursively at every depth', () => {
     const items = [
diff --git a/packages/bruno-api-docs/src/utils/collectionOverview.ts b/packages/bruno-api-docs/src/utils/collectionOverview.ts
index 93207caf..fb1c089f 100644
--- a/packages/bruno-api-docs/src/utils/collectionOverview.ts
+++ b/packages/bruno-api-docs/src/utils/collectionOverview.ts
@@ -55,11 +55,3 @@ export const hasCollectionRequestConfig = (headers: HttpRequestHeader[] = [], au
 
 export const hasCollectionExecutionContext = (scripts: CollectionScripts = {}, hasVars = false): boolean =>
   hasVars || Boolean(scripts.preRequest || scripts.postResponse || scripts.tests);
-
-export const hasCollectionConfiguration = (
-  headers: HttpRequestHeader[] = [],
-  auth?: Auth,
-  scripts: CollectionScripts = {},
-  hasVars = false
-): boolean =>
-  hasCollectionRequestConfig(headers, auth) || hasCollectionExecutionContext(scripts, hasVars);
diff --git a/packages/bruno-api-docs/src/utils/folder.spec.ts b/packages/bruno-api-docs/src/utils/folder.spec.ts
index 5c4de8b6..c9bd79d7 100644
--- a/packages/bruno-api-docs/src/utils/folder.spec.ts
+++ b/packages/bruno-api-docs/src/utils/folder.spec.ts
@@ -1,7 +1,8 @@
 import { describe, it, expect } from 'vitest';
+import type { OpenCollection } from '@opencollection/types';
+import type { Folder } from '@opencollection/types/collection/item';
 import {
   getFolderConfig,
-  hasFolderConfig,
   hasFolderExecutionContext,
   hasFolderRequestConfig,
   countFolderRequests,
@@ -104,29 +105,6 @@ describe('getFolderConfig', () => {
   });
 });
 
-describe('hasFolderConfig', () => {
-  it('is false for a folder with no configuration', () => {
-    const folder: any = { items: [{ info: { type: 'http' } }] };
-    expect(hasFolderConfig(getFolderConfig(null, [], folder))).toBe(false);
-  });
-
-  it('is true when any configuration is present', () => {
-    const folder: any = { request: { scripts: [{ type: 'before-request', code: 'x' }] } };
-    expect(hasFolderConfig(getFolderConfig(null, [], folder))).toBe(true);
-  });
-
-  it('is true when only post-response (actions) vars are present', () => {
-    const folder: any = {
-      request: {
-        actions: [
-          { type: 'set-variable', phase: 'after-response', selector: { expression: 'x' }, variable: { name: 'v' } }
-        ]
-      }
-    };
-    expect(hasFolderConfig(getFolderConfig(null, [], folder))).toBe(true);
-  });
-});
-
 describe('countFolderRequests', () => {
   it('counts request items recursively, excluding folders and scripts', () => {
     const folder: any = {
@@ -159,56 +137,56 @@ describe('requestCountLabel', () => {
 
 describe('hasFolderRequestConfig', () => {
   it('is true for own headers', () => {
-    const folder: any = { request: { headers: [{ name: 'Accept', value: 'json' }] } };
+    const folder = { request: { headers: [{ name: 'Accept', value: 'json' }] } } as unknown as Folder;
     expect(hasFolderRequestConfig(getFolderConfig(null, [], folder))).toBe(true);
   });
 
   it('is true for headers inherited from the collection', () => {
-    const parent: any = { request: { headers: [{ name: 'X-Api', value: 'v2' }] } };
-    const folder: any = {};
+    const parent = { request: { headers: [{ name: 'X-Api', value: 'v2' }] } } as unknown as OpenCollection;
+    const folder = {} as unknown as Folder;
     expect(hasFolderRequestConfig(getFolderConfig(parent, [], folder))).toBe(true);
   });
 
   it('is true for concrete auth', () => {
-    const folder: any = { request: { auth: { type: 'basic', username: 'u' } } };
+    const folder = { request: { auth: { type: 'basic', username: 'u' } } } as unknown as Folder;
     expect(hasFolderRequestConfig(getFolderConfig(null, [], folder))).toBe(true);
   });
 
   it('is false when the folder only has vars, scripts or tests', () => {
-    const folder: any = { request: { scripts: [{ type: 'before-request', code: 'x' }] } };
+    const folder = { request: { scripts: [{ type: 'before-request', code: 'x' }] } } as unknown as Folder;
     expect(hasFolderRequestConfig(getFolderConfig(null, [], folder))).toBe(false);
   });
 });
 
 describe('hasFolderExecutionContext', () => {
   it('is true for pre-request variables', () => {
-    const folder: any = { request: { variables: [{ name: 'v', value: '1' }] } };
+    const folder = { request: { variables: [{ name: 'v', value: '1' }] } } as unknown as Folder;
     expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(true);
   });
 
   it('is true for post-response variables', () => {
-    const folder: any = {
+    const folder = {
       request: {
         actions: [
           { type: 'set-variable', phase: 'after-response', selector: { expression: 'x' }, variable: { name: 'v' } }
         ]
       }
-    };
+    } as unknown as Folder;
     expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(true);
   });
 
   it('is true for a script', () => {
-    const folder: any = { request: { scripts: [{ type: 'before-request', code: 'x' }] } };
+    const folder = { request: { scripts: [{ type: 'before-request', code: 'x' }] } } as unknown as Folder;
     expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(true);
   });
 
   it('is true for tests', () => {
-    const folder: any = { request: { scripts: [{ type: 'tests', code: 'expect(1).to.equal(1)' }] } };
+    const folder = { request: { scripts: [{ type: 'tests', code: 'expect(1).to.equal(1)' }] } } as unknown as Folder;
     expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(true);
   });
 
   it('is false when the folder only has headers and auth', () => {
-    const folder: any = { request: { headers: [{ name: 'Accept', value: 'json' }], auth: { type: 'basic' } } };
+    const folder = { request: { headers: [{ name: 'Accept', value: 'json' }], auth: { type: 'basic' } } } as unknown as Folder;
     expect(hasFolderExecutionContext(getFolderConfig(null, [], folder))).toBe(false);
   });
 });
diff --git a/packages/bruno-api-docs/src/utils/folder.ts b/packages/bruno-api-docs/src/utils/folder.ts
index 7bce8754..97678be1 100644
--- a/packages/bruno-api-docs/src/utils/folder.ts
+++ b/packages/bruno-api-docs/src/utils/folder.ts
@@ -128,9 +128,6 @@ export const hasFolderExecutionContext = (config: FolderConfig): boolean =>
   || config.inheritedPreVariables.length > 0
   || config.inheritedPostVariables.length > 0;
 
-export const hasFolderConfig = (config: FolderConfig): boolean =>
-  hasFolderRequestConfig(config) || hasFolderExecutionContext(config);
-
 export const countFolderRequests = (folder: Folder): number => {
   let count = 0;
   const walk = (items: Item[] | undefined): void => {

From fd9c07ce598f278a2bbcfc90a0b53f6a2d7bf976 Mon Sep 17 00:00:00 2001
From: Arpit <arpit@usebruno.com>
Date: Thu, 24 Sep 2026 22:23:19 +0530
Subject: [PATCH 5/5] Enhance folder and collection pages with new features

---
 .changeset/lazy-tables-search.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 .changeset/lazy-tables-search.md

diff --git a/.changeset/lazy-tables-search.md b/.changeset/lazy-tables-search.md
new file mode 100644
index 00000000..afdbab3c
--- /dev/null
+++ b/.changeset/lazy-tables-search.md
@@ -0,0 +1,14 @@
+---
+"@usebruno/api-docs": patch
+---
+
+Bugfixes:
+19. The folder and collection pages now have an Execution Context section, separate from the configuration section. Headers and auth stay under Folder Configuration and Collection Configuration; vars, script and tests move into Execution Context, which collapses and expands like the one on request pages. The environment switcher is hidden from the docs header when the collection has no environments.
+
+25. A long environment name is cut short with an ellipsis in the switcher and in its dropdown, and the full name shows in a tooltip when it is cut.
+
+32. Empty Post-Response variables now read "None." on the folder and collection pages, the same as on request pages, instead of the section disappearing.
+
+33. The playground folder settings Vars tab now has a Post Response table, like the Bruno app. Edits are saved with the folder.
+
+Also, when a collection has no environments, the playground switcher no longer opens a dropdown whose only entry repeats "No environments". It shows the text with no arrow.