From 28aa8d2b16eafb5ab52f52ea2232fc3ed47768a3 Mon Sep 17 00:00:00 2001
From: bruno-sachin <bruno-sachin@brunos-MacBook-Air.local>
Date: Sat, 27 Jun 2026 23:22:04 +0530
Subject: [PATCH] feat: Environment UI revamp changes

---
 .../environment-table.component.ts            |  33 +++
 .../oc-docs/e2e/pages/environments.page.ts    |  27 +++
 .../oc-docs/e2e/playwright/pages.fixture.ts   |  29 +++
 .../tests/environments/environments.spec.ts   |  88 ++++++++
 packages/oc-docs/src/components/Docs/Docs.tsx |  32 ++-
 .../src/components/Docs/Sidebar/Sidebar.tsx   |  37 +++-
 .../components/Docs/Sidebar/StyledWrapper.ts  |  18 ++
 .../EnvironmentLabel.spec.tsx                 |  25 +++
 .../EnvironmentLabel/EnvironmentLabel.tsx     |  25 +++
 .../EnvironmentLabel/StyledWrapper.ts         |  23 ++
 .../EnvironmentSummaryItem.tsx                |   8 +-
 .../EnvironmentSummaryItem/StyledWrapper.ts   |  13 +-
 .../pages/Environments/Environments.spec.tsx  |  95 +++++++++
 .../src/pages/Environments/Environments.tsx   | 197 ++++++++++++++++++
 .../src/pages/Environments/StyledWrapper.ts   | 103 +++++++++
 packages/oc-docs/src/sampleCollection.ts      |  17 +-
 packages/oc-docs/src/store/slices/docs.ts     |  15 +-
 .../oc-docs/src/ui/Table/StyledWrapper.ts     | 133 ++++++++++++
 packages/oc-docs/src/ui/Table/Table.spec.tsx  |  53 +++++
 packages/oc-docs/src/ui/Table/Table.tsx       | 140 +++++++++++++
 .../oc-docs/src/utils/environments.spec.ts    | 130 ++++++++++++
 packages/oc-docs/src/utils/environments.ts    | 128 ++++++++++++
 22 files changed, 1338 insertions(+), 31 deletions(-)
 create mode 100644 packages/oc-docs/e2e/components/environments/environment-table.component.ts
 create mode 100644 packages/oc-docs/e2e/pages/environments.page.ts
 create mode 100644 packages/oc-docs/e2e/tests/environments/environments.spec.ts
 create mode 100644 packages/oc-docs/src/components/EnvironmentLabel/EnvironmentLabel.spec.tsx
 create mode 100644 packages/oc-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
 create mode 100644 packages/oc-docs/src/components/EnvironmentLabel/StyledWrapper.ts
 create mode 100644 packages/oc-docs/src/pages/Environments/Environments.spec.tsx
 create mode 100644 packages/oc-docs/src/pages/Environments/Environments.tsx
 create mode 100644 packages/oc-docs/src/pages/Environments/StyledWrapper.ts
 create mode 100644 packages/oc-docs/src/ui/Table/StyledWrapper.ts
 create mode 100644 packages/oc-docs/src/ui/Table/Table.spec.tsx
 create mode 100644 packages/oc-docs/src/ui/Table/Table.tsx
 create mode 100644 packages/oc-docs/src/utils/environments.spec.ts
 create mode 100644 packages/oc-docs/src/utils/environments.ts

diff --git a/packages/oc-docs/e2e/components/environments/environment-table.component.ts b/packages/oc-docs/e2e/components/environments/environment-table.component.ts
new file mode 100644
index 0000000..5d55d2d
--- /dev/null
+++ b/packages/oc-docs/e2e/components/environments/environment-table.component.ts
@@ -0,0 +1,33 @@
+import type { Locator } from '@playwright/test';
+import { BaseComponent } from '../base.component';
+
+export class EnvironmentTableComponent extends BaseComponent {
+  readonly root = this.page.getByTestId('environment-table');
+  readonly variableRows = this.page.getByTestId('environment-variable-row');
+  readonly secretVariableRows = this.page.getByTestId('environment-secret-variable-row');
+  readonly externalSecretRows = this.page.getByTestId('environment-external-secret-row');
+
+  columnHeader(key: string): Locator {
+    return this.root.getByTestId(`table-header-${key}`);
+  }
+
+  variableRow(name: string): Locator {
+    return this.variableRows.filter({ hasText: name });
+  }
+
+  secretVariableRow(name: string): Locator {
+    return this.secretVariableRows.filter({ hasText: name });
+  }
+
+  externalSecretRow(name: string): Locator {
+    return this.externalSecretRows.filter({ hasText: name });
+  }
+
+  valueOf(name: string): Locator {
+    return this.variableRow(name).getByTestId('table-cell-value');
+  }
+
+  dataTypeOf(name: string): Locator {
+    return this.variableRow(name).getByTestId('table-cell-type');
+  }
+}
diff --git a/packages/oc-docs/e2e/pages/environments.page.ts b/packages/oc-docs/e2e/pages/environments.page.ts
new file mode 100644
index 0000000..859d350
--- /dev/null
+++ b/packages/oc-docs/e2e/pages/environments.page.ts
@@ -0,0 +1,27 @@
+import type { Locator } from '@playwright/test';
+import { BasePage } from './base.page';
+import { SidebarComponent } from '../components/sidebar.component';
+import { EnvironmentTableComponent } from '../components/environments/environment-table.component';
+
+export class EnvironmentsPage extends BasePage {
+  readonly root = this.page.getByTestId('environments-page');
+
+  readonly sidebar = new SidebarComponent(this.page);
+  readonly title = this.page.getByTestId('environments-title');
+  readonly tabs = this.page.getByTestId('environment-tab');
+  readonly table = new EnvironmentTableComponent(this.page);
+  readonly variablesGroup = this.page.getByTestId('environment-variables');
+  readonly secretVariablesGroup = this.page.getByTestId('environment-secret-variables');
+  readonly externalSecretsGroup = this.page.getByTestId('environment-external-secrets');
+  readonly emptyState = this.page.getByTestId('environments-empty');
+
+  async open(): Promise<void> {
+    await this.navigate('/');
+    await this.page.getByTestId('sidebar-environments-link').click();
+    await this.root.waitFor({ state: 'visible' });
+  }
+
+  tab(name: string): Locator {
+    return this.tabs.filter({ hasText: name });
+  }
+}
diff --git a/packages/oc-docs/e2e/playwright/pages.fixture.ts b/packages/oc-docs/e2e/playwright/pages.fixture.ts
index 065ea12..493a993 100644
--- a/packages/oc-docs/e2e/playwright/pages.fixture.ts
+++ b/packages/oc-docs/e2e/playwright/pages.fixture.ts
@@ -1,5 +1,10 @@
 import { test as base } from '@playwright/test';
 import { OverviewPage } from '../pages/overview.page';
+import { EnvironmentsPage } from '../pages/environments.page';
+import { RequestPage } from '../pages/request.page';
+import { ScriptPage } from '../pages/script.page';
+import { UnsupportedRequestPage } from '../pages/unsupported-request.page';
+import { SidebarComponent } from '../components/sidebar.component';
 import { ThemeToggleComponent } from '../components/theme-toggle.component';
 
 /**
@@ -8,6 +13,12 @@ import { ThemeToggleComponent } from '../components/theme-toggle.component';
  */
 type Fixtures = {
   overviewPage: OverviewPage;
+  environmentsPage: EnvironmentsPage;
+  requestPage: RequestPage;
+  scriptPage: ScriptPage;
+  unsupportedRequestPage: UnsupportedRequestPage;
+  sidebar: SidebarComponent;
+  pageHeader: PageHeaderComponent;
   themeToggle: ThemeToggleComponent;
 };
 
@@ -15,6 +26,24 @@ export const test = base.extend<Fixtures>({
   overviewPage: async ({ page }, use) => {
     await use(new OverviewPage(page));
   },
+  environmentsPage: async ({ page }, use) => {
+    await use(new EnvironmentsPage(page));
+  },
+  requestPage: async ({ page }, use) => {
+    await use(new RequestPage(page));
+  },
+  scriptPage: async ({ page }, use) => {
+    await use(new ScriptPage(page));
+  },
+  unsupportedRequestPage: async ({ page }, use) => {
+    await use(new UnsupportedRequestPage(page));
+  },
+  sidebar: async ({ page }, use) => {
+    await use(new SidebarComponent(page));
+  },
+  pageHeader: async ({ page }, use) => {
+    await use(new PageHeaderComponent(page));
+  },
   themeToggle: async ({ page }, use) => {
     await use(new ThemeToggleComponent(page));
   }
diff --git a/packages/oc-docs/e2e/tests/environments/environments.spec.ts b/packages/oc-docs/e2e/tests/environments/environments.spec.ts
new file mode 100644
index 0000000..f8991f1
--- /dev/null
+++ b/packages/oc-docs/e2e/tests/environments/environments.spec.ts
@@ -0,0 +1,88 @@
+import { test, expect } from '../../playwright';
+
+test.describe('Environments page', () => {
+  test.beforeEach(async ({ environmentsPage }) => {
+    await environmentsPage.open();
+  });
+
+  test('opens from the sidebar and shows a tab per environment', async ({ environmentsPage }) => {
+    await expect(environmentsPage.title).toHaveText('Environments');
+    await expect(environmentsPage.tabs).toHaveCount(2);
+    await expect(environmentsPage.tab('Local')).toBeVisible();
+    await expect(environmentsPage.tab('Prod')).toBeVisible();
+  });
+
+  test('selects the first environment by default', async ({ environmentsPage }) => {
+    await expect(environmentsPage.tab('Local')).toHaveAttribute('aria-selected', 'true');
+    await expect(environmentsPage.tab('Prod')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('lists the active environment variables with their value and data type', async ({ environmentsPage }) => {
+    const { table } = environmentsPage;
+
+    await test.step('the Variables group is shown', async () => {
+      await expect(environmentsPage.variablesGroup).toBeVisible();
+    });
+
+    await test.step('the host variable shows its value and a String data type', async () => {
+      await expect(table.variableRow('host')).toBeVisible();
+      await expect(table.valueOf('host')).toContainText('http://localhost:8081');
+      await expect(table.dataTypeOf('host')).toHaveText('String');
+    });
+  });
+
+  test('shows secret variables masked under a Secret Variables group', async ({ environmentsPage }) => {
+    const { table } = environmentsPage;
+    const row = table.secretVariableRow('bearer_auth_token');
+
+    await expect(environmentsPage.secretVariablesGroup).toBeVisible();
+    await expect(row).toBeVisible();
+    await expect(row).toContainText('Secret');
+    await expect(row).not.toContainText('your_secret_token');
+  });
+
+  test('switches the table when another environment tab is selected', async ({ environmentsPage }) => {
+    const { table } = environmentsPage;
+
+    await expect(table.valueOf('host')).toContainText('http://localhost:8081');
+
+    await environmentsPage.tab('Prod').click();
+
+    await expect(environmentsPage.tab('Prod')).toHaveAttribute('aria-selected', 'true');
+    await expect(table.valueOf('host')).toContainText('https://echo.usebruno.com');
+  });
+
+  test('renders an accessible columnar table with Name, Value and Data Type headers', async ({ environmentsPage }) => {
+    const { table } = environmentsPage;
+    await expect(table.columnHeader('name')).toHaveText('Name');
+    await expect(table.columnHeader('value')).toHaveText('Value');
+    await expect(table.columnHeader('type')).toHaveText('Data Type');
+  });
+
+  test('hides the External Secret Variables section when the environment has none', async ({ environmentsPage }) => {
+    await expect(environmentsPage.tab('Local')).toHaveAttribute('aria-selected', 'true');
+    await expect(environmentsPage.externalSecretsGroup).toBeHidden();
+  });
+
+  test('shows external secrets with the manager label and reference for the Prod environment', async ({
+    environmentsPage
+  }) => {
+    const { table } = environmentsPage;
+
+    await environmentsPage.tab('Prod').click();
+
+    await test.step('the External Secret Variables group is shown with its manager', async () => {
+      await expect(environmentsPage.externalSecretsGroup).toBeVisible();
+      await expect(environmentsPage.externalSecretsGroup).toContainText('AWS Secrets Manager');
+    });
+
+    await test.step('each external secret lists its name and secret reference', async () => {
+      await expect(table.externalSecretRow('dbPassword')).toContainText('prod/db/credentials');
+      await expect(table.externalSecretRow('apiKey')).toContainText('prod/payment-gateway/api-key');
+    });
+
+    await test.step('external secrets without a type show an empty data type', async () => {
+      await expect(table.externalSecretRow('dbPassword')).toContainText('(empty)');
+    });
+  });
+});
diff --git a/packages/oc-docs/src/components/Docs/Docs.tsx b/packages/oc-docs/src/components/Docs/Docs.tsx
index 7981d44..38824d2 100644
--- a/packages/oc-docs/src/components/Docs/Docs.tsx
+++ b/packages/oc-docs/src/components/Docs/Docs.tsx
@@ -4,8 +4,13 @@ import Sidebar from './Sidebar/Sidebar';
 import Overview from '../../pages/Overview/Overview';
 import { getItemId, generateSafeId } from '../../utils/itemUtils';
 import { isFolder } from '../../utils/schemaHelpers';
-import { useAppSelector } from '../../store/hooks';
-import { selectSelectedItemId } from '../../store/slices/docs';
+import Environments from '../../pages/Environments/Environments';
+import Request from '../../pages/Request/Request';
+import Script from '../../pages/Script/Script';
+import { findItemByUuid, getAncestorsByUuid } from '../../utils/fileUtils';
+import { isHttpRequest, isScriptFile, isUnsupportedRequest } from '../../utils/schemaHelpers';
+import { useAppSelector, useAppDispatch } from '../../store/hooks';
+import { selectSelectedItemId, selectActiveRootView, selectItem } from '../../store/slices/docs';
 
 interface DocsProps {
   docsCollection: OpenCollectionCollection | null;
@@ -19,6 +24,7 @@ const Docs: React.FC<DocsProps> = ({
 }) => {
   const selectedItemId = useAppSelector(selectSelectedItemId);
   const isInitialMount = useRef(true);
+  const activeRootView = useAppSelector(selectActiveRootView);
 
   // Scroll to selected item when it changes (but not on initial load)
   useEffect(() => {
@@ -76,10 +82,24 @@ const Docs: React.FC<DocsProps> = ({
         <Sidebar />
       </div>
 
-      <div
-        className="playground-content h-full overflow-y-auto flex-1"
-      >
-        {docsCollection && (
+      <div className="playground-content h-full overflow-y-auto flex-1">
+        {docsCollection && (isHttpRequest(selected) || isUnsupportedRequest(selected)) ? (
+          <Request
+            item={selected}
+            ancestry={ancestry}
+            collection={docsCollection}
+            onTryClick={() => onOpenPlayground?.()}
+            onBreadcrumbClick={(uuid) => dispatch(selectItem(uuid))}
+          />
+        ) : docsCollection && isScriptFile(selected) ? (
+          <Script
+            item={selected}
+            ancestry={ancestry}
+            onBreadcrumbClick={(uuid) => dispatch(selectItem(uuid))}
+          />
+        ) : docsCollection && activeRootView === 'environments' ? (
+          <Environments collection={docsCollection} />
+        ) : docsCollection ? (
           <Overview collection={docsCollection} />
         )}
       </div>
diff --git a/packages/oc-docs/src/components/Docs/Sidebar/Sidebar.tsx b/packages/oc-docs/src/components/Docs/Sidebar/Sidebar.tsx
index 65ea7da..c8e476c 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/Sidebar.tsx
+++ b/packages/oc-docs/src/components/Docs/Sidebar/Sidebar.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import type { OpenCollection } from '@opencollection/types';
 import type { Item as OpenCollectionItem, Folder } from '@opencollection/types/collection/item';
 import type { HttpRequest } from '@opencollection/types/requests/http';
 import Method from '../Method/Method';
@@ -7,8 +6,16 @@ import OpenCollectionLogo from '../../../assets/opencollection-logo.svg';
 import { SidebarContainer, SidebarItems, SidebarItem } from './StyledWrapper';
 import ThemeToggle from '../../ThemeToggle/ThemeToggle';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
-import { toggleItem, selectItem, selectSelectedItemId, selectDocsCollection } from '../../../store/slices/docs';
-import { getItemType, getItemName, getHttpMethod, isFolder, isHttpRequest } from '../../../utils/schemaHelpers';
+import {
+  toggleItem,
+  selectItem,
+  selectRootView,
+  selectSelectedItemId,
+  selectActiveRootView,
+  selectDocsCollection
+} from '../../../store/slices/docs';
+import { getItemType, getItemName, getHttpMethod, isFolder, isScriptFile } from '../../../utils/schemaHelpers';
+import { GlobeIcon, BookIcon } from '../../../assets/icons';
 
 export interface SidebarProps {
 }
@@ -16,8 +23,11 @@ export interface SidebarProps {
 const Sidebar: React.FC<SidebarProps> = () => {
   const dispatch = useAppDispatch();
   const selectedItemId = useAppSelector(selectSelectedItemId);
+  const activeRootView = useAppSelector(selectActiveRootView);
   const collection = useAppSelector(selectDocsCollection);
 
+  const isRootView = selectedItemId === null;
+
   const toggleFolder = (itemUuid: string) => {
     dispatch(toggleItem(itemUuid));
   };
@@ -139,6 +149,27 @@ const Sidebar: React.FC<SidebarProps> = () => {
       </div>
       
       <SidebarItems>
+        <div className="sidebar-root-nav">
+          <SidebarItem
+            data-testid="sidebar-overview-link"
+            className={`flex items-center select-none text-sm cursor-pointer ${isRootView && activeRootView === 'overview' ? 'active' : ''}`}
+            style={{ paddingLeft: '8px' }}
+            onClick={() => dispatch(selectRootView('overview'))}
+          >
+            <span className="sidebar-nav-icon"><BookIcon /></span>
+            <div className="truncate flex-1">Overview</div>
+          </SidebarItem>
+          <SidebarItem
+            data-testid="sidebar-environments-link"
+            className={`flex items-center select-none text-sm cursor-pointer ${isRootView && activeRootView === 'environments' ? 'active' : ''}`}
+            style={{ paddingLeft: '8px' }}
+            onClick={() => dispatch(selectRootView('environments'))}
+          >
+            <span className="sidebar-nav-icon"><GlobeIcon /></span>
+            <div className="truncate flex-1">Environments</div>
+          </SidebarItem>
+        </div>
+
         {collection?.items?.length && (
           collection.items.map((item) => renderItem(item))
         )}
diff --git a/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts b/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
index 15e77c9..c841934 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
@@ -45,6 +45,24 @@ export const SidebarItems = styled.div`
   ${SidebarContainer}.compact & {
     padding: 0 4px;
   }
+
+  .sidebar-root-nav {
+    margin-bottom: 6px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .sidebar-nav-icon {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 8px;
+    flex-shrink: 0;
+    color: var(--text-tertiary);
+  }
+  .sidebar-nav-icon svg {
+    width: 15px;
+    height: 15px;
+  }
 `;
 
 export const SidebarItem = styled.div`
diff --git a/packages/oc-docs/src/components/EnvironmentLabel/EnvironmentLabel.spec.tsx b/packages/oc-docs/src/components/EnvironmentLabel/EnvironmentLabel.spec.tsx
new file mode 100644
index 0000000..a4b9381
--- /dev/null
+++ b/packages/oc-docs/src/components/EnvironmentLabel/EnvironmentLabel.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it, expect } from 'vitest';
+import { EnvironmentLabel } from './EnvironmentLabel';
+
+describe('EnvironmentLabel', () => {
+  it('renders the environment name', () => {
+    const html = renderToStaticMarkup(<EnvironmentLabel name="Development" />);
+    expect(html).toContain('Development');
+    expect(html).toContain('environment-label-dot');
+  });
+
+  it('applies the environment color to the dot', () => {
+    const html = renderToStaticMarkup(<EnvironmentLabel name="Prod" color="#dc2626" />);
+    expect(html).toContain('#dc2626');
+  });
+
+  it('forwards custom class names', () => {
+    const html = renderToStaticMarkup(
+      <EnvironmentLabel name="Staging" className="env-tab" nameClassName="env-tab-name" />
+    );
+    expect(html).toContain('env-tab');
+    expect(html).toContain('env-tab-name');
+  });
+});
diff --git a/packages/oc-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx b/packages/oc-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
new file mode 100644
index 0000000..a6ed319
--- /dev/null
+++ b/packages/oc-docs/src/components/EnvironmentLabel/EnvironmentLabel.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyledWrapper } from './StyledWrapper';
+
+interface EnvironmentLabelProps {
+  name: string;
+  color?: string;
+  className?: string;
+  nameClassName?: string;
+  testId?: string;
+}
+
+export const EnvironmentLabel: React.FC<EnvironmentLabelProps> = ({
+  name,
+  color,
+  className,
+  nameClassName,
+  testId
+}) => (
+  <StyledWrapper className={['environment-label', className].filter(Boolean).join(' ')} data-testid={testId}>
+    <span className="environment-label-dot" style={color ? { background: color } : undefined} />
+    <span className={['environment-label-name', nameClassName].filter(Boolean).join(' ')}>{name}</span>
+  </StyledWrapper>
+);
+
+export default EnvironmentLabel;
diff --git a/packages/oc-docs/src/components/EnvironmentLabel/StyledWrapper.ts b/packages/oc-docs/src/components/EnvironmentLabel/StyledWrapper.ts
new file mode 100644
index 0000000..6601601
--- /dev/null
+++ b/packages/oc-docs/src/components/EnvironmentLabel/StyledWrapper.ts
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+
+  .environment-label-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: var(--text-tertiary);
+  }
+
+  .environment-label-name {
+    color: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
diff --git a/packages/oc-docs/src/components/OverviewEnvironments/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx b/packages/oc-docs/src/components/OverviewEnvironments/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx
index 2bf6ae9..92140a6 100644
--- a/packages/oc-docs/src/components/OverviewEnvironments/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx
+++ b/packages/oc-docs/src/components/OverviewEnvironments/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Environment } from '@opencollection/types/config/environments';
+import { EnvironmentLabel } from '../../EnvironmentLabel/EnvironmentLabel';
 import { StyledWrapper } from './StyledWrapper';
 
 const formatVariableCount = (count: number): string => `${count} variable${count === 1 ? '' : 's'}`;
@@ -9,14 +10,9 @@ interface EnvironmentSummaryItemProps {
   testId?: string;
 }
 
-/** A single environment row: color dot, name, and variable count. Renders an `<li>`. */
 export const EnvironmentSummaryItem: React.FC<EnvironmentSummaryItemProps> = ({ environment, testId }) => (
   <StyledWrapper className="environment-summary-item" data-testid={testId}>
-    <span
-      className="environment-summary-dot"
-      style={environment.color ? { background: environment.color } : undefined}
-    />
-    <span className="environment-summary-name">{environment.name}</span>
+    <EnvironmentLabel name={environment.name} color={environment.color} className="environment-summary-label" />
     <span className="environment-summary-spacer" />
     <span className="environment-summary-vars" data-testid={testId ? `${testId}-variable-count` : undefined}>
       {formatVariableCount(environment.variables?.length ?? 0)}
diff --git a/packages/oc-docs/src/components/OverviewEnvironments/EnvironmentSummaryItem/StyledWrapper.ts b/packages/oc-docs/src/components/OverviewEnvironments/EnvironmentSummaryItem/StyledWrapper.ts
index 4db6a16..6102385 100644
--- a/packages/oc-docs/src/components/OverviewEnvironments/EnvironmentSummaryItem/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/OverviewEnvironments/EnvironmentSummaryItem/StyledWrapper.ts
@@ -10,23 +10,12 @@ export const StyledWrapper = styled.li`
   font-size: 0.75rem;
   line-height: 1.125rem;
   letter-spacing: normal;
+  color: var(--oc-text);
 
   &:last-child {
     border-bottom: none;
   }
 
-  .environment-summary-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    background: var(--text-tertiary);
-  }
-
-  .environment-summary-name {
-    color: var(--oc-text);
-  }
-
   .environment-summary-spacer {
     flex: 1;
   }
diff --git a/packages/oc-docs/src/pages/Environments/Environments.spec.tsx b/packages/oc-docs/src/pages/Environments/Environments.spec.tsx
new file mode 100644
index 0000000..5c74f6e
--- /dev/null
+++ b/packages/oc-docs/src/pages/Environments/Environments.spec.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it, expect } from 'vitest';
+import type { OpenCollection } from '@opencollection/types';
+import { Environments } from './Environments';
+
+describe('Environments', () => {
+  it('renders a tab per environment and the active environment variable table', () => {
+    const collection: OpenCollection = {
+      info: { name: 'Hotel Booking API', version: '1.0.0' },
+      config: {
+        environments: [
+          {
+            name: 'Development',
+            color: '#16a34a',
+            variables: [
+              { name: 'baseUrl', value: 'https://api.dev' },
+              { name: 'authToken', secret: true, type: 'string' }
+            ]
+          },
+          { name: 'Prod', variables: [{ name: 'baseUrl', value: 'https://api.prod' }] }
+        ]
+      }
+    };
+
+    const html = renderToStaticMarkup(<Environments collection={collection} />);
+
+    expect(html).toContain('Environments');
+    expect(html).toContain('role="tablist"');
+    expect(html).toContain('Development');
+    expect(html).toContain('Prod');
+    expect(html).toContain('role="tabpanel"');
+    expect(html).toContain('Variables');
+    expect(html).toContain('Secret Variables');
+    expect(html).toContain('baseUrl');
+    expect(html).toContain('https://api.dev');
+    expect(html).toContain('Secret');
+  });
+
+  it('renders an external secret variables section with the manager label', () => {
+    const collection = {
+      info: { name: 'API', version: '1.0.0' },
+      config: {
+        environments: [
+          {
+            name: 'Prod',
+            variables: [{ name: 'baseUrl', value: 'https://api.prod' }],
+            externalSecrets: {
+              type: 'aws-secrets-manager',
+              variables: [{ name: 'dbPassword', secretName: 'prod/db/credentials', enabled: true }]
+            }
+          }
+        ]
+      }
+    } as unknown as OpenCollection;
+
+    const html = renderToStaticMarkup(<Environments collection={collection} />);
+
+    expect(html).toContain('External Secret Variables');
+    expect(html).toContain('AWS Secrets Manager');
+    expect(html).toContain('dbPassword');
+    expect(html).toContain('prod/db/credentials');
+  });
+
+  it('omits sections that have no entries', () => {
+    const collection: OpenCollection = {
+      info: { name: 'API', version: '1.0.0' },
+      config: { environments: [{ name: 'Dev', variables: [{ name: 'baseUrl', value: 'x' }] }] }
+    };
+
+    const html = renderToStaticMarkup(<Environments collection={collection} />);
+
+    expect(html).toContain('Variables');
+    expect(html).not.toContain('Secret Variables');
+    expect(html).not.toContain('External Secret Variables');
+  });
+
+  it('shows "(empty)" for both the value and the data type when a variable has no value', () => {
+    const collection: OpenCollection = {
+      info: { name: 'API', version: '1.0.0' },
+      config: { environments: [{ name: 'Dev', variables: [{ name: 'transactionId', value: '' }] }] }
+    };
+
+    const html = renderToStaticMarkup(<Environments collection={collection} />);
+    const matches = html.match(/\(empty\)/g) ?? [];
+    expect(matches.length).toBe(2);
+  });
+
+  it('renders an empty state when there are no environments', () => {
+    const collection: OpenCollection = { info: { name: 'Empty API', version: '1.0.0' } };
+    const html = renderToStaticMarkup(<Environments collection={collection} />);
+    expect(html).toContain('No environments configured');
+    expect(html).not.toContain('role="tablist"');
+  });
+});
diff --git a/packages/oc-docs/src/pages/Environments/Environments.tsx b/packages/oc-docs/src/pages/Environments/Environments.tsx
new file mode 100644
index 0000000..16f2be8
--- /dev/null
+++ b/packages/oc-docs/src/pages/Environments/Environments.tsx
@@ -0,0 +1,197 @@
+import React, { useId, useMemo, useRef, useState } from 'react';
+import type { OpenCollection } from '@opencollection/types';
+import { getEnvironmentVariables } from '../../utils/environments';
+import { Table, type TableColumn, type TableGroup } from '../../ui/Table/Table';
+import { EnvironmentLabel } from '../../components/EnvironmentLabel/EnvironmentLabel';
+import { VariableText } from '../../components/VariableText/VariableText';
+import { EmptyState } from '../../ui/EmptyState/EmptyState';
+import { PageWrapper } from '../../components/PageWrapper/PageWrapper';
+import { Heading } from '../../components/Heading/Heading';
+import { GlobeIcon, EyeOffIcon } from '../../assets/icons';
+import { StyledWrapper } from './StyledWrapper';
+
+const COLUMNS: TableColumn[] = [
+  { key: 'name', header: 'Name', width: '13rem' },
+  { key: 'value', header: 'Value' },
+  { key: 'type', header: 'Data Type', width: '9rem' }
+];
+
+const emptyCell = <span className="environment-empty">(empty)</span>;
+
+const nameCell = (name: string): React.ReactNode => <span className="environment-name">{name}</span>;
+
+const valueCell = (value: string): React.ReactNode =>
+  value ? (
+    <span className="environment-value">
+      <VariableText value={value} />
+    </span>
+  ) : (
+    emptyCell
+  );
+
+const secretCell: React.ReactNode = (
+  <span className="environment-secret">
+    <EyeOffIcon />
+    Secret
+  </span>
+);
+
+const typeCell = (dataType: string): React.ReactNode =>
+  dataType ? <span className="environment-type">{dataType}</span> : emptyCell;
+
+interface EnvironmentsProps {
+  collection: OpenCollection;
+}
+
+export const Environments: React.FC<EnvironmentsProps> = ({ collection }) => {
+  const environments = collection.config?.environments ?? [];
+  const [activeIndex, setActiveIndex] = useState(0);
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const tablistId = useId();
+  const panelId = useId();
+
+  const activeTab = environments.length ? Math.min(activeIndex, environments.length - 1) : 0;
+  const active = environments[activeTab];
+
+  const groups = useMemo<TableGroup[]>(() => {
+    if (!active) return [];
+    const { variables, secretVariables, externalSecrets } = getEnvironmentVariables(active);
+    const result: TableGroup[] = [];
+
+    if (variables.length) {
+      result.push({
+        id: 'variables',
+        label: 'Variables',
+        badge: variables.length,
+        testId: 'environment-variables',
+        rows: variables.map((row) => ({
+          id: `var-${row.name}`,
+          rowHeaderKey: 'name',
+          disabled: row.disabled,
+          testId: 'environment-variable-row',
+          cells: {
+            name: nameCell(row.name),
+            value: valueCell(row.value),
+            type: typeCell(row.dataType)
+          }
+        }))
+      });
+    }
+
+    if (secretVariables.length) {
+      result.push({
+        id: 'secret-variables',
+        label: 'Secret Variables',
+        badge: secretVariables.length,
+        testId: 'environment-secret-variables',
+        rows: secretVariables.map((row) => ({
+          id: `secret-${row.name}`,
+          rowHeaderKey: 'name',
+          disabled: row.disabled,
+          testId: 'environment-secret-variable-row',
+          cells: {
+            name: nameCell(row.name),
+            value: secretCell,
+            type: typeCell(row.dataType)
+          }
+        }))
+      });
+    }
+
+    if (externalSecrets) {
+      result.push({
+        id: 'external-secrets',
+        label: 'External Secret Variables',
+        badge: externalSecrets.variables.length,
+        meta: externalSecrets.typeLabel,
+        testId: 'environment-external-secrets',
+        rows: externalSecrets.variables.map((row) => ({
+          id: `ext-${row.name}`,
+          rowHeaderKey: 'name',
+          disabled: row.disabled,
+          testId: 'environment-external-secret-row',
+          cells: {
+            name: nameCell(row.name),
+            value: valueCell(row.secretName),
+            type: typeCell(row.dataType)
+          }
+        }))
+      });
+    }
+
+    return result;
+  }, [active]);
+
+  const onTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {
+    if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
+    event.preventDefault();
+    const delta = event.key === 'ArrowRight' ? 1 : -1;
+    const next = (activeTab + delta + environments.length) % environments.length;
+    setActiveIndex(next);
+    tabRefs.current[next]?.focus();
+  };
+
+  return (
+    <PageWrapper>
+      <StyledWrapper className="environments" data-testid="environments-page">
+        <Heading size='md' testId="environments-title">Environments</Heading>
+
+        {environments.length ? (
+          <>
+            <div role="tablist" aria-label="Environments" className="environment-tabs">
+              {environments.map((environment, index) => {
+                const selected = index === activeTab;
+                return (
+                  <button
+                    key={`${environment.name}-${index}`}
+                    ref={(element) => {
+                      tabRefs.current[index] = element;
+                    }}
+                    type="button"
+                    role="tab"
+                    id={`${tablistId}-${index}`}
+                    aria-selected={selected}
+                    aria-controls={panelId}
+                    tabIndex={selected ? 0 : -1}
+                    className={['environment-tab', selected ? 'is-active' : ''].filter(Boolean).join(' ')}
+                    data-testid="environment-tab"
+                    onClick={() => setActiveIndex(index)}
+                    onKeyDown={onTabKeyDown}
+                  >
+                    <EnvironmentLabel name={environment.name} color={environment.color} />
+                  </button>
+                );
+              })}
+            </div>
+
+            <div
+              role="tabpanel"
+              id={panelId}
+              aria-labelledby={`${tablistId}-${activeTab}`}
+              className="environment-panel"
+            >
+              <Table
+                columns={COLUMNS}
+                groups={groups}
+                minWidth="34rem"
+                emptyMessage="This environment has no variables."
+                caption={`Variables for the ${active?.name ?? ''} environment`}
+                testId="environment-table"
+              />
+            </div>
+          </>
+        ) : (
+          <EmptyState
+            testId="environments-empty"
+            icon={<GlobeIcon />}
+            className='environment-empty'
+            heading="No environments configured"
+            subheading="This collection has no environments yet. Add an environment in Bruno to define base URLs, tokens, and other variables that requests can reference."
+          />
+        )}
+      </StyledWrapper>
+    </PageWrapper>
+  );
+};
+
+export default Environments;
diff --git a/packages/oc-docs/src/pages/Environments/StyledWrapper.ts b/packages/oc-docs/src/pages/Environments/StyledWrapper.ts
new file mode 100644
index 0000000..5050415
--- /dev/null
+++ b/packages/oc-docs/src/pages/Environments/StyledWrapper.ts
@@ -0,0 +1,103 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.div`
+  color: var(--text-primary);
+  padding-bottom: 2rem;
+
+  .environment-tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+    margin-top: 1.25rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .environment-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .environment-tab {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.375rem;
+    border: none;
+    background: transparent;
+    font-family: var(--font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background 0.12s ease, color 0.12s ease;
+  }
+  .environment-tab:hover {
+    color: var(--text-primary);
+  }
+  .environment-tab.is-active {
+    color: var(--text-primary);
+    font-weight: 600;
+    background: color-mix(in srgb, var(--oc-text) 6%, transparent);
+  }
+  .environment-tab:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+
+  .environment-panel {
+    margin-top: 1rem;
+  }
+
+  .environment-name {
+    font-family: var(--font-sans);
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1;
+    letter-spacing: 0;
+    color: var(--oc-primary-strong);
+  }
+
+  .environment-value {
+    font-family: 'Fira Code', var(--font-mono);
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1;
+    letter-spacing: 0;
+    color: var(--text-primary);
+  }
+
+  .environment-empty {
+    font-style: italic;
+    font-size: 0.75rem;
+    color: var(--oc-colors-text-subtext0);
+  }
+
+  .environment-secret {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-style: italic;
+    font-size: 0.75rem;
+    color: var(--oc-colors-text-subtext0);
+  }
+  .environment-secret svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .environment-type {
+    font-family: var(--font-sans);
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1;
+    letter-spacing: 0;
+    color: var(--oc-overlay-overlay2);
+  }
+  .environment-empty {
+    margin-top: 0.8rem;
+  }
+`;
diff --git a/packages/oc-docs/src/sampleCollection.ts b/packages/oc-docs/src/sampleCollection.ts
index d45d5c0..f11a1cb 100644
--- a/packages/oc-docs/src/sampleCollection.ts
+++ b/packages/oc-docs/src/sampleCollection.ts
@@ -7,17 +7,30 @@ info:
 config:
   environments:
     - name: "Local"
+      color: "#16a34a"
       variables:
         - name: "host"
           value: "http://localhost:8081"
         - name: "bearer_auth_token"
-          value: "your_secret_token"
+          secret: true
+          type: "string"
     - name: "Prod"
+      color: "#dc2626"
       variables:
         - name: "host"
           value: "https://echo.usebruno.com"
         - name: "bearer_auth_token"
-          value: "your_secret_token"
+          secret: true
+          type: "string"
+      externalSecrets:
+        type: aws-secrets-manager
+        variables:
+          - name: dbPassword
+            secretName: prod/db/credentials
+            enabled: true
+          - name: apiKey
+            secretName: prod/payment-gateway/api-key
+            enabled: true
 request:
   headers:
     - name: "collection-header"
diff --git a/packages/oc-docs/src/store/slices/docs.ts b/packages/oc-docs/src/store/slices/docs.ts
index d7280c3..e1fd0a6 100644
--- a/packages/oc-docs/src/store/slices/docs.ts
+++ b/packages/oc-docs/src/store/slices/docs.ts
@@ -5,14 +5,18 @@ import type { RootState } from '../store';
 import { hydrateWithUUIDs, findAndUpdateItem } from '../../utils/items';
 import { isFolder } from '../../utils/schemaHelpers';
 
+export type RootView = 'overview' | 'environments';
+
 export interface DocsState {
   collection: OpenCollectionCollection | null;
   selectedItemId: string | null;
+  activeRootView: RootView;
 }
 
 const initialState: DocsState = {
   collection: null,
-  selectedItemId: null
+  selectedItemId: null,
+  activeRootView: 'overview'
 };
 
 // Helper function to initialize isCollapsed for folders
@@ -47,10 +51,12 @@ const docsSlice = createSlice({
       }
       // Reset selected item when collection changes
       state.selectedItemId = null;
+      state.activeRootView = 'overview';
     },
     clearDocsCollection: (state: DocsState) => {
       state.collection = null;
       state.selectedItemId = null;
+      state.activeRootView = 'overview';
     },
     toggleItem: (state: DocsState, action: PayloadAction<string>) => {
       const uuid = action.payload;
@@ -65,13 +71,18 @@ const docsSlice = createSlice({
     selectItem: (state: DocsState, action: PayloadAction<string | null>) => {
       state.selectedItemId = action.payload;
     },
+    selectRootView: (state: DocsState, action: PayloadAction<RootView>) => {
+      state.selectedItemId = null;
+      state.activeRootView = action.payload;
+    },
   }
 });
 
-export const { setDocsCollection, clearDocsCollection, toggleItem, selectItem } = docsSlice.actions;
+export const { setDocsCollection, clearDocsCollection, toggleItem, selectItem, selectRootView } = docsSlice.actions;
 export default docsSlice.reducer;
 
 export const selectDocsCollection = (state: RootState) => state.docs.collection;
 export const selectSelectedItemId = (state: RootState) => state.docs.selectedItemId;
+export const selectActiveRootView = (state: RootState) => state.docs.activeRootView;
 
 
diff --git a/packages/oc-docs/src/ui/Table/StyledWrapper.ts b/packages/oc-docs/src/ui/Table/StyledWrapper.ts
new file mode 100644
index 0000000..ab836f1
--- /dev/null
+++ b/packages/oc-docs/src/ui/Table/StyledWrapper.ts
@@ -0,0 +1,133 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.div`
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+
+  &:hover {
+    scrollbar-color: var(--oc-scrollbar-color) transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--oc-scrollbar-color);
+  }
+
+  .table-empty-message {
+    margin: 0;
+    font-family: var(--font-sans);
+    font-weight: 500;
+    font-style: italic;
+    font-size: 0.8125rem;
+    line-height: 1;
+    color: var(--text-secondary);
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-sans);
+    table-layout: fixed;
+  }
+
+  .table-caption {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .table-head-cell {
+    padding: 0.55rem 0.9rem;
+    font-weight: 700;
+    font-size: 0.6875rem;
+    line-height: 1;
+    letter-spacing: 0.0394rem;
+    text-transform: uppercase;
+    text-align: left;
+    color: var(--oc-colors-text-subtext1);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .table-group-cell {
+    padding: 0.65rem 0.9rem;
+    font-size: 0.6875rem;
+    line-height: 1;
+    letter-spacing: 0.055rem;
+    text-transform: uppercase;
+    color: var(--oc-colors-text-subtext1);
+    border-bottom: 1px solid var(--border-color);
+    text-align: left;
+  }
+
+  .table-group-label {
+    font-weight: 700;
+    vertical-align: middle;
+  }
+
+  .table-group-badge,
+  .table-group-meta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 0.5rem;
+    padding: 0.125rem 0.25rem;
+    border: 1px solid var(--oc-border-border0);
+    border-radius: 0.25rem;
+    background: transparent;
+    font-family: var(--font-sans);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0;
+    text-transform: none;
+    color: var(--oc-colors-text-subtext1);
+  }
+
+  .table-group-badge {
+    background: var(--oc-background-mantle);
+    color: var(--text-muted);
+  }
+
+  .table-row:not(:last-child) {
+    border-bottom: 1px solid var(--border-color);
+  }
+  .table-row--disabled {
+    opacity: 0.55;
+  }
+
+  .table-cell {
+    padding: 0.625rem 1rem;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    color: var(--text-primary);
+    text-align: left;
+    vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .table-cell--right {
+    text-align: right;
+  }
+  .table-cell--head {
+    font-weight: 500;
+  }
+`;
diff --git a/packages/oc-docs/src/ui/Table/Table.spec.tsx b/packages/oc-docs/src/ui/Table/Table.spec.tsx
new file mode 100644
index 0000000..2712d7f
--- /dev/null
+++ b/packages/oc-docs/src/ui/Table/Table.spec.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, it, expect } from 'vitest';
+import { Table, type TableColumn } from './Table';
+
+const columns: TableColumn[] = [
+  { key: 'name', header: 'Name' },
+  { key: 'value', header: 'Value' }
+];
+
+describe('Table', () => {
+  it('renders column headers and flat rows', () => {
+    const html = renderToStaticMarkup(
+      <Table
+        columns={columns}
+        rows={[{ id: 'a', rowHeaderKey: 'name', cells: { name: 'baseUrl', value: 'https://api' } }]}
+      />
+    );
+    expect(html).toContain('scope="col"');
+    expect(html).toContain('Name');
+    expect(html).toContain('Value');
+    expect(html).toContain('<th scope="row"');
+    expect(html).toContain('baseUrl');
+    expect(html).toContain('https://api');
+  });
+
+  it('renders grouped rows with a colgroup-scoped group header', () => {
+    const html = renderToStaticMarkup(
+      <Table
+        columns={columns}
+        groups={[
+          { id: 'g1', label: 'Variables', badge: 1, rows: [{ id: 'r1', cells: { name: 'x', value: '1' } }] },
+          { id: 'g2', label: 'Secret Variables', badge: 1, rows: [{ id: 'r2', cells: { name: 'y', value: '2' } }] }
+        ]}
+      />
+    );
+    expect(html).toContain('scope="colgroup"');
+    expect(html).toContain('Variables');
+    expect(html).toContain('Secret Variables');
+  });
+
+  it('renders an accessible caption', () => {
+    const html = renderToStaticMarkup(<Table columns={columns} rows={[]} caption="My data" />);
+    expect(html).toContain('<caption');
+    expect(html).toContain('My data');
+  });
+
+  it('shows the empty message when every group is empty', () => {
+    const html = renderToStaticMarkup(<Table columns={columns} rows={[]} emptyMessage="Nothing here" />);
+    expect(html).toContain('Nothing here');
+    expect(html).not.toContain('<table');
+  });
+});
diff --git a/packages/oc-docs/src/ui/Table/Table.tsx b/packages/oc-docs/src/ui/Table/Table.tsx
new file mode 100644
index 0000000..168cc84
--- /dev/null
+++ b/packages/oc-docs/src/ui/Table/Table.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { StyledWrapper } from './StyledWrapper';
+
+export interface TableColumn {
+  key: string;
+  header: React.ReactNode;
+  align?: 'left' | 'right';
+  width?: string;
+}
+
+export interface TableRow {
+  id: string;
+  cells: Record<string, React.ReactNode>;
+  rowHeaderKey?: string;
+  disabled?: boolean;
+  testId?: string;
+}
+
+export interface TableGroup {
+  id: string;
+  label?: React.ReactNode;
+  badge?: React.ReactNode;
+  meta?: React.ReactNode;
+  rows: TableRow[];
+  testId?: string;
+}
+
+interface TableProps {
+  columns: TableColumn[];
+  groups?: TableGroup[];
+  rows?: TableRow[];
+  caption?: string;
+  emptyMessage?: string;
+  minWidth?: string;
+  className?: string;
+  testId?: string;
+}
+
+const Cells: React.FC<{ row: TableRow; columns: TableColumn[] }> = ({ row, columns }) =>
+  columns.map((column) => {
+    const content = row.cells[column.key];
+    const alignment = column.align ?? 'left';
+    if (row.rowHeaderKey === column.key) {
+      return (
+        <th
+          key={column.key}
+          scope="row"
+          className={`table-cell table-cell--${alignment} table-cell--head`}
+          data-testid={`table-cell-${column.key}`}
+        >
+          {content}
+        </th>
+      );
+    }
+    return (
+      <td
+        key={column.key}
+        className={`table-cell table-cell--${alignment}`}
+        data-testid={`table-cell-${column.key}`}
+      >
+        {content}
+      </td>
+    );
+  });
+
+const Rows: React.FC<{ rows: TableRow[]; columns: TableColumn[] }> = ({ rows, columns }) =>
+  rows.map((row) => (
+    <tr
+      key={row.id}
+      className={['table-row', row.disabled ? 'table-row--disabled' : ''].filter(Boolean).join(' ')}
+      data-testid={row.testId}
+    >
+      <Cells row={row} columns={columns} />
+    </tr>
+  ));
+
+export const Table: React.FC<TableProps> = ({
+  columns,
+  groups,
+  rows,
+  caption,
+  emptyMessage,
+  minWidth,
+  className,
+  testId
+}) => {
+  const groupList = groups ?? (rows ? [{ id: 'default', rows }] : []);
+  const isEmpty = groupList.every((group) => group.rows.length === 0);
+
+  if (isEmpty && emptyMessage) {
+    return (
+      <StyledWrapper className={['table-wrapper', className].filter(Boolean).join(' ')} data-testid={testId}>
+        <p className="table-empty-message">{emptyMessage}</p>
+      </StyledWrapper>
+    );
+  }
+
+  return (
+    <StyledWrapper className={['table-wrapper', className].filter(Boolean).join(' ')} data-testid={testId}>
+      <table className="table" style={minWidth ? { minWidth } : undefined}>
+        {caption && <caption className="table-caption">{caption}</caption>}
+        <colgroup>
+          {columns.map((column) => (
+            <col key={column.key} style={column.width ? { width: column.width } : undefined} />
+          ))}
+        </colgroup>
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                scope="col"
+                className={`table-head-cell table-cell--${column.align ?? 'left'}`}
+                data-testid={`table-header-${column.key}`}
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        {groupList.map((group) => (
+          <tbody key={group.id} className="table-group" data-testid={group.testId}>
+            {group.label !== undefined && (
+              <tr className="table-group-row">
+                <th scope="colgroup" colSpan={columns.length} className="table-group-cell">
+                  <span className="table-group-label">{group.label}</span>
+                  {group.badge !== undefined && <span className="table-group-badge">{group.badge}</span>}
+                  {group.meta !== undefined && <span className="table-group-meta">{group.meta}</span>}
+                </th>
+              </tr>
+            )}
+            <Rows rows={group.rows} columns={columns} />
+          </tbody>
+        ))}
+      </table>
+    </StyledWrapper>
+  );
+};
+
+export default Table;
diff --git a/packages/oc-docs/src/utils/environments.spec.ts b/packages/oc-docs/src/utils/environments.spec.ts
new file mode 100644
index 0000000..47168d3
--- /dev/null
+++ b/packages/oc-docs/src/utils/environments.spec.ts
@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest';
+import { getEnvironmentVariables } from './environments';
+
+describe('getEnvironmentVariables', () => {
+  it('splits regular and secret variables', () => {
+    const env: any = {
+      name: 'Dev',
+      variables: [
+        { name: 'baseUrl', value: 'https://api.test' },
+        { name: 'authToken', secret: true, type: 'string' }
+      ]
+    };
+    const { variables, secretVariables } = getEnvironmentVariables(env);
+    expect(variables).toEqual([
+      { name: 'baseUrl', value: 'https://api.test', dataType: 'String', secret: false, disabled: false }
+    ]);
+    expect(secretVariables).toEqual([
+      { name: 'authToken', value: '', dataType: 'String', secret: true, disabled: false }
+    ]);
+  });
+
+  it('humanizes typed values and reads the typed data', () => {
+    const env: any = {
+      name: 'Dev',
+      variables: [
+        { name: 'count', value: { type: 'number', data: '8842' } },
+        { name: 'enabled', value: { type: 'boolean', data: 'true' } },
+        { name: 'payload', value: { type: 'object', data: '{}' } }
+      ]
+    };
+    expect(getEnvironmentVariables(env).variables.map((v) => `${v.name}:${v.value}:${v.dataType}`)).toEqual([
+      'count:8842:Number',
+      'enabled:true:Boolean',
+      'payload:{}:Object'
+    ]);
+  });
+
+  it('resolves the selected value from variants', () => {
+    const env: any = {
+      name: 'Dev',
+      variables: [
+        {
+          name: 'region',
+          value: [
+            { title: 'us', value: 'us-east-1' },
+            { title: 'eu', selected: true, value: 'eu-west-1' }
+          ]
+        }
+      ]
+    };
+    expect(getEnvironmentVariables(env).variables[0]).toMatchObject({ value: 'eu-west-1', dataType: 'String' });
+  });
+
+  it('leaves an untyped secret data type empty and marks disabled rows', () => {
+    const env: any = {
+      name: 'Dev',
+      variables: [
+        { name: 'token', secret: true },
+        { name: 'legacy', value: 'x', disabled: true }
+      ]
+    };
+    const { variables, secretVariables } = getEnvironmentVariables(env);
+    expect(secretVariables[0]).toMatchObject({ dataType: '', secret: true });
+    expect(variables[0].disabled).toBe(true);
+  });
+
+  it('leaves the data type empty for a variable with no value', () => {
+    const env: any = { name: 'Dev', variables: [{ name: 'transactionId', value: '' }, { name: 'reviewId' }] };
+    expect(getEnvironmentVariables(env).variables.map((v) => `${v.name}:${v.value}:${v.dataType}`)).toEqual([
+      'transactionId::',
+      'reviewId::'
+    ]);
+  });
+
+  it('returns empty groups for a missing environment', () => {
+    const empty = { variables: [], secretVariables: [], externalSecrets: null };
+    expect(getEnvironmentVariables(null)).toEqual(empty);
+    expect(getEnvironmentVariables(undefined)).toEqual(empty);
+    expect(getEnvironmentVariables({ name: 'Empty' } as any)).toEqual(empty);
+  });
+
+  it('extracts external secrets and humanizes the manager type', () => {
+    const env: any = {
+      name: 'Prod',
+      externalSecrets: {
+        type: 'aws-secrets-manager',
+        variables: [
+          { name: 'dbPassword', secretName: 'prod/db/credentials', enabled: true },
+          { name: 'apiKey', secretName: 'prod/payment/api-key', enabled: false }
+        ]
+      }
+    };
+    const { externalSecrets } = getEnvironmentVariables(env);
+    expect(externalSecrets?.typeLabel).toBe('AWS Secrets Manager');
+    expect(externalSecrets?.variables).toEqual([
+      { name: 'dbPassword', secretName: 'prod/db/credentials', dataType: '', disabled: false },
+      { name: 'apiKey', secretName: 'prod/payment/api-key', dataType: '', disabled: true }
+    ]);
+  });
+
+  it('reads a data type for external secret variables when present', () => {
+    const env: any = {
+      name: 'Prod',
+      externalSecrets: {
+        type: 'aws-secrets-manager',
+        variables: [
+          { name: 'dbPassword', secretName: 'p', type: 'string' },
+          { name: 'apiKey', secretName: 'q' }
+        ]
+      }
+    };
+    expect(getEnvironmentVariables(env).externalSecrets?.variables.map((v) => v.dataType)).toEqual(['String', '']);
+  });
+
+  it('is null when there are no external secret variables', () => {
+    expect(getEnvironmentVariables({ name: 'Dev' } as any).externalSecrets).toBeNull();
+    expect(
+      getEnvironmentVariables({ name: 'Dev', externalSecrets: { type: 'aws-secrets-manager', variables: [] } } as any)
+        .externalSecrets
+    ).toBeNull();
+  });
+
+  it('title-cases an unknown manager type', () => {
+    const env: any = {
+      name: 'Prod',
+      externalSecrets: { type: 'my-custom-vault', variables: [{ name: 'x', secretName: 'y' }] }
+    };
+    expect(getEnvironmentVariables(env).externalSecrets?.typeLabel).toBe('My Custom Vault');
+  });
+});
diff --git a/packages/oc-docs/src/utils/environments.ts b/packages/oc-docs/src/utils/environments.ts
new file mode 100644
index 0000000..b96d9d1
--- /dev/null
+++ b/packages/oc-docs/src/utils/environments.ts
@@ -0,0 +1,128 @@
+import type { Environment } from '@opencollection/types/config/environments';
+import type {
+  Variable,
+  SecretVariable,
+  VariableValueOrVariants,
+  VariableValueType
+} from '@opencollection/types/common/variables';
+
+const TYPE_LABELS: Record<VariableValueType, string> = {
+  string: 'String',
+  number: 'Number',
+  boolean: 'Boolean',
+  null: 'Null',
+  object: 'Object'
+};
+
+const MANAGER_LABELS: Record<string, string> = {
+  'aws-secrets-manager': 'AWS Secrets Manager',
+  'azure-key-vault': 'Azure Key Vault',
+  'gcp-secret-manager': 'GCP Secret Manager',
+  'hashicorp-vault': 'HashiCorp Vault'
+};
+
+const humanizeType = (type: VariableValueType | undefined): string => (type && TYPE_LABELS[type]) || 'String';
+
+const humanizeManager = (type: string | undefined): string => {
+  if (!type) return 'External';
+  return (
+    MANAGER_LABELS[type] ||
+    type
+      .split(/[-_\s]+/)
+      .filter(Boolean)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  );
+};
+
+const isSecretVariable = (variable: Variable | SecretVariable): variable is SecretVariable =>
+  (variable as SecretVariable).secret === true;
+
+const resolveValue = (value: VariableValueOrVariants | undefined): { value: string; type: VariableValueType } => {
+  if (value == null) return { value: '', type: 'string' };
+  if (typeof value === 'string') return { value, type: 'string' };
+  if (Array.isArray(value)) {
+    const selected = value.find((variant) => variant.selected) ?? value[0];
+    return selected ? resolveValue(selected.value) : { value: '', type: 'string' };
+  }
+  return { value: typeof value.data === 'string' ? value.data : '', type: value.type ?? 'string' };
+};
+
+interface ExternalSecretsConfig {
+  type?: string;
+  variables?: { name?: string; secretName?: string; enabled?: boolean; type?: VariableValueType }[];
+}
+
+export interface EnvironmentVariableRow {
+  name: string;
+  value: string;
+  dataType: string;
+  secret: boolean;
+  disabled: boolean;
+}
+
+export interface ExternalSecretRow {
+  name: string;
+  secretName: string;
+  dataType: string;
+  disabled: boolean;
+}
+
+export interface EnvironmentExternalSecrets {
+  type: string;
+  typeLabel: string;
+  variables: ExternalSecretRow[];
+}
+
+export interface EnvironmentVariableGroups {
+  variables: EnvironmentVariableRow[];
+  secretVariables: EnvironmentVariableRow[];
+  externalSecrets: EnvironmentExternalSecrets | null;
+}
+
+const getExternalSecrets = (environment: Environment): EnvironmentExternalSecrets | null => {
+  const config = (environment as { externalSecrets?: ExternalSecretsConfig }).externalSecrets;
+  const variables = (config?.variables ?? [])
+    .filter((variable) => variable && variable.name)
+    .map((variable) => ({
+      name: variable.name ?? '',
+      secretName: variable.secretName ?? '',
+      dataType: variable.type ? humanizeType(variable.type) : '',
+      disabled: variable.enabled === false
+    }));
+
+  if (!variables.length) return null;
+  return { type: config?.type ?? '', typeLabel: humanizeManager(config?.type), variables };
+};
+
+export const getEnvironmentVariables = (environment: Environment | null | undefined): EnvironmentVariableGroups => {
+  const variables: EnvironmentVariableRow[] = [];
+  const secretVariables: EnvironmentVariableRow[] = [];
+
+  (environment?.variables ?? []).forEach((variable) => {
+    if (isSecretVariable(variable)) {
+      secretVariables.push({
+        name: variable.name ?? '',
+        value: '',
+        dataType: variable.type ? humanizeType(variable.type) : '',
+        secret: true,
+        disabled: variable.disabled === true
+      });
+      return;
+    }
+    const resolved = resolveValue(variable.value);
+    variables.push({
+      name: variable.name,
+      value: resolved.value,
+      dataType: resolved.value ? humanizeType(resolved.type) : '',
+      secret: false,
+      disabled: variable.disabled === true
+    });
+  });
+
+  return {
+    variables,
+    secretVariables,
+    externalSecrets: environment ? getExternalSecrets(environment) : null
+  };
+};