feat: data type support cross-scope enhancement, polish & E2E coverage (#112)

* fix(vars): support data types in collection, folder and request var tables

Object values rendered as '[object Object]' in the Collection/Folder/Request
Vars tables, and there was no way to set a variable's type from those tables
(only environment variables had it).

Mirror the desktop app: render the value cell through valueToString (objects
show as JSON) and add a per-row data-type selector for request-scoped vars.
Response vars are excluded since they hold a JS expression, not a literal.
The selector rebuilds the row via the existing set*Vars reducers, which
already carry dataType through to disk.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(vars): render the data-type dropdown above the table

The type dropdown mounted inside the vars/environment table cell, so the
table's overflow clipped it (only the first option was visible). Portal it to
document.body like the desktop app, so it overlays at the correct z-order.

* test(e2e): cover data types in request var tables

Add stable test hooks (per-row datatype-selector testid; testId on the vars
EditableTables) and an e2e spec covering the acceptance criteria: an @object
var displays as JSON (not [object Object]), the type selector reflects the
on-disk type, post-response vars have no selector, the dropdown lists all
four types above the table (z-order), and choosing a type applies it.

* test(e2e): cover data types across request, collection, folder and env vars

Fill the e2e gaps for the typed-variable feature:
- request vars: add a disk round-trip (change type -> Cmd/Ctrl+S -> the .bru
  gains/loses the @type annotation).
- collection & folder Vars: open their settings, assert an @object var displays
  as JSON (not [object Object]) with a selector reflecting the on-disk type.
- environment Vars: display + a save round-trip (change type -> Save -> the env
  file gains @Number), the pre-existing @object annotation surviving the save.

Covers parse / preserve / save-keeps-types / no-break across every scope that
supports data types (runtime & prompt vars have no editable value table).

* test(e2e): add collection & folder var disk round-trips

Change a var's type via the selector, click Save, and assert the collection.bru
/ folder.bru gains the @Number annotation while the pre-existing @object one
survives. Every scope that supports data types now has a UI->disk round-trip.

* test(e2e): address review — share findCollectionDir, robust folder-settings frame

- extract findCollectionDir into tests/e2e/utils/page/actions.ts (was copy-pasted)
- add data-testid="folder-settings" and key the folder-settings frame on it,
  instead of the ambiguous [role="tab"] scan that could match a request editor
- drop task-bound AC-number labels from spec comments (ai-hygiene)

* test(e2e): fold tab-overflow handling into shared openRequestPaneTab

Move the narrow-pane '>>' overflow fallback from datatype-vars.spec into the
shared openRequestPaneTab helper so every spec reaches overflowed tabs; the
direct-click path is unchanged for callers whose tab is visible.

Addresses PR review feedback.

* refactor(vars): extract shared VarsDataTypeSelector for the three var tables

The per-row data-type selector + row-update logic was duplicated in the
collection, folder and request Vars tables. Extract a single VarsDataTypeSelector
that owns the gating (request-scoped, non-empty rows) and the array update, and
use it in all three.

Addresses PR review feedback.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: princek-bruno

src/webview/components/CollectionSettings/Vars/VarsTable/index.tsx

@@ -5,10 +5,12 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
 import EditableTable from 'components/EditableTable';
+import VarsDataTypeSelector from 'components/DataTypeSelector/VarsDataTypeSelector';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { variableNameRegex } from 'utils/common/regex';
 import { setCollectionVars } from 'providers/ReduxStore/slices/collections/index';
+import { valueToString } from '@usebruno/common/utils';
 
 interface VarsTableProps {
   collection?: React.ReactNode;
@@ -63,14 +65,19 @@ const VarsTable = ({
         onChange,
         isLastEmptyRow
       }: any) => (
-        <MultiLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={onSave}
-          onChange={onChange}
-          collection={collection}
-          placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
-        />
+        <div className="flex items-center w-full gap-2">
+          <div className="flex-1 min-w-0">
+            <MultiLineEditor
+              value={valueToString(value)}
+              theme={storedTheme}
+              onSave={onSave}
+              onChange={onChange}
+              collection={collection}
+              placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+            />
+          </div>
+          <VarsDataTypeSelector row={row} vars={vars} isLastEmptyRow={isLastEmptyRow} varType={varType} onVarsChange={handleVarsChange} />
+        </div>
       )
     }
   ];
@@ -84,6 +91,7 @@ const VarsTable = ({
   return (
     <StyledWrapper className="w-full">
       <EditableTable
+        testId={`collection-vars-${varType === 'request' ? 'req' : 'res'}`}
         columns={columns}
         rows={vars}
         onChange={handleVarsChange}

src/webview/components/DataTypeSelector/VarsDataTypeSelector.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { BrunoVariableDataType } from '@bruno-types';
+import DataTypeSelector from './index';
+
+interface Var {
+  uid?: string;
+  name?: string;
+  value?: unknown;
+  dataType?: BrunoVariableDataType;
+}
+
+interface VarsDataTypeSelectorProps {
+  row: Var;
+  vars: Var[] | undefined;
+  isLastEmptyRow?: boolean;
+  varType?: string;
+  onVarsChange: (vars: Var[]) => void;
+}
+
+/**
+ * Data-type selector for a Vars-table row. Updates the matching variable's type and hands the full
+ * array back to the table's change handler. Only request-scoped literal vars get a type — response
+ * vars hold a JS expression, and the trailing empty row has nothing to type.
+ */
+const VarsDataTypeSelector = ({ row, vars, isLastEmptyRow, varType, onVarsChange }: VarsDataTypeSelectorProps) => {
+  if (isLastEmptyRow || varType !== 'request') {
+    return null;
+  }
+  return (
+    <DataTypeSelector
+      variable={row}
+      onChange={(fields) => {
+        onVarsChange((vars || []).map((v) => (v.uid === row.uid ? { ...v, ...fields } : v)));
+      }}
+    />
+  );
+};
+
+export default VarsDataTypeSelector;

src/webview/components/DataTypeSelector/index.tsx

@@ -7,7 +7,7 @@ import MenuDropdown from 'ui/MenuDropdown';
 import StyledWrapper from './StyledWrapper';
 
 interface DataTypeSelectorProps {
-  variable: { uid?: string; value?: unknown; dataType?: BrunoVariableDataType };
+  variable: { uid?: string; name?: string; value?: unknown; dataType?: BrunoVariableDataType };
   onChange: (fields: { dataType?: BrunoVariableDataType }) => void;
 }
 
@@ -30,7 +30,14 @@ const DataTypeSelector = ({ variable, onChange }: DataTypeSelectorProps) => {
   return (
     <StyledWrapper>
       <div className="flex items-center relative">
-        <MenuDropdown items={items} selectedItemId={selectedType} placement="bottom-end" showTickMark={true}>
+        <MenuDropdown
+          items={items}
+          selectedItemId={selectedType}
+          placement="bottom-end"
+          showTickMark={true}
+          appendTo={() => document.body}
+          data-testid={`datatype-selector-${variable.name || 'new'}`}
+        >
           <div className="flex items-center cursor-pointer select-none">
             <span className="type-label">{selectedType}</span>
             <IconCaretDown className="caret-icon ml-1" size={14} strokeWidth={2} />

src/webview/components/FolderSettings/Vars/VarsTable/index.tsx

@@ -5,10 +5,12 @@ import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions'
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
 import EditableTable from 'components/EditableTable';
+import VarsDataTypeSelector from 'components/DataTypeSelector/VarsDataTypeSelector';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { variableNameRegex } from 'utils/common/regex';
 import { setFolderVars } from 'providers/ReduxStore/slices/collections/index';
+import { valueToString } from '@usebruno/common/utils';
 
 interface VarsTableProps {
   folder: React.ReactNode;
@@ -70,15 +72,20 @@ const VarsTable = ({
         onChange,
         isLastEmptyRow
       }: any) => (
-        <MultiLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={onSave}
-          onChange={onChange}
-          collection={collection}
-          item={folder}
-          placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
-        />
+        <div className="flex items-center w-full gap-2">
+          <div className="flex-1 min-w-0">
+            <MultiLineEditor
+              value={valueToString(value)}
+              theme={storedTheme}
+              onSave={onSave}
+              onChange={onChange}
+              collection={collection}
+              item={folder}
+              placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+            />
+          </div>
+          <VarsDataTypeSelector row={row} vars={vars} isLastEmptyRow={isLastEmptyRow} varType={varType} onVarsChange={handleVarsChange} />
+        </div>
       )
     }
   ];
@@ -92,6 +99,7 @@ const VarsTable = ({
   return (
     <StyledWrapper className="w-full">
       <EditableTable
+        testId={`folder-vars-${varType === 'request' ? 'req' : 'res'}`}
         columns={columns}
         rows={vars}
         onChange={handleVarsChange}

src/webview/components/FolderSettings/index.tsx

@@ -83,7 +83,7 @@ const FolderSettings = ({
   };
 
   return (
-    <StyledWrapper className="flex flex-col h-full overflow-auto">
+    <StyledWrapper className="flex flex-col h-full overflow-auto" data-testid="folder-settings">
       <div className="flex flex-col h-full relative px-4 py-4">
         <div className="flex flex-wrap items-center tabs" role="tablist">
           <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>

src/webview/components/RequestPane/Vars/VarsTable/index.tsx

@@ -6,9 +6,11 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
 import EditableTable from 'components/EditableTable';
+import VarsDataTypeSelector from 'components/DataTypeSelector/VarsDataTypeSelector';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { variableNameRegex } from 'utils/common/regex';
+import { valueToString } from '@usebruno/common/utils';
 
 interface VarsTableProps {
   item: any;
@@ -87,16 +89,21 @@ const VarsTable = ({
         onChange,
         isLastEmptyRow
       }: any) => (
-        <MultiLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={onSave}
-          onChange={onChange}
-          onRun={handleRun}
-          collection={collection}
-          item={item}
-          placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
-        />
+        <div className="flex items-center w-full gap-2">
+          <div className="flex-1 min-w-0">
+            <MultiLineEditor
+              value={valueToString(value)}
+              theme={storedTheme}
+              onSave={onSave}
+              onChange={onChange}
+              onRun={handleRun}
+              collection={collection}
+              item={item}
+              placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+            />
+          </div>
+          <VarsDataTypeSelector row={row} vars={vars} isLastEmptyRow={isLastEmptyRow} varType={varType} onVarsChange={handleVarsChange} />
+        </div>
       )
     }
   ];
@@ -110,6 +117,7 @@ const VarsTable = ({
   return (
     <StyledWrapper className="w-full">
       <EditableTable
+        testId={`request-vars-${varType === 'request' ? 'req' : 'res'}`}
         columns={columns}
         rows={vars || []}
         onChange={handleVarsChange}

tests/e2e/specs/datatype-settings.spec.ts

@@ -0,0 +1,139 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import type { Page, Frame } from '@playwright/test';
+import { test, expect } from '../utils/fixtures';
+import { openBrunoSidebar, createCollection, openRequest, createFolder, findCollectionDir } from '../utils/page/actions';
+import { buildCommonLocators } from '../utils/page/locators';
+
+// Scan the webview frames for the one exposing `marker`, re-acquiring after a panel opens.
+async function frameWith(page: Page, marker: string, timeout = 15_000): Promise<Frame> {
+  const deadline = Date.now() + timeout;
+  while (Date.now() < deadline) {
+    for (const frame of page.frames()) {
+      if (frame === page.mainFrame()) continue;
+      try {
+        if ((await frame.locator(marker).count()) > 0) return frame;
+      } catch {
+        /* frame detached mid-scan */
+      }
+    }
+    await page.waitForTimeout(400);
+  }
+  throw new Error(`No webview frame with ${marker} within ${timeout}ms`);
+}
+
+test.describe('Data types in collection & environment variables', () => {
+  test('collection Vars: an object value shows as JSON with a type selector reflecting the on-disk type', async ({ page, tmpDir }) => {
+    const sidebar = await openBrunoSidebar(page);
+    const collectionName = 'Typed Coll';
+    await createCollection(page, sidebar, collectionName, tmpDir, 'bru');
+
+    const collectionDir = findCollectionDir(tmpDir);
+    fs.writeFileSync(path.join(collectionDir, 'collection.bru'), [
+      'vars:pre-request {', '  @object', '  cfg: {"host":"localhost"}', '  tok: plain', '}', ''
+    ].join('\n'), 'utf8');
+
+    // Open collection settings by clicking the collection name, then the Vars tab.
+    await buildCommonLocators(sidebar).sidebar.collectionName(collectionName).click();
+    const settings = await frameWith(page, '[data-testid="collection-settings"]');
+    await settings.locator('[role="tab"]').filter({ hasText: 'Vars' }).first().click();
+
+    const table = settings.locator('[data-testid="collection-vars-req"]');
+    await expect(table).toBeVisible({ timeout: 15_000 });
+    // Parsed from disk, the object renders as JSON and the collection doesn't break.
+    await expect(table).toContainText('{"host":"localhost"}');
+    await expect(table).not.toContainText('[object Object]');
+    // The selector reflects the on-disk data type.
+    await expect(settings.locator('[data-testid="datatype-selector-cfg"]')).toContainText('object');
+    await expect(settings.locator('[data-testid="datatype-selector-tok"]')).toContainText('string');
+
+    // Change tok -> number and Save; the collection file gains @number, @object survives.
+    const collectionFile = path.join(collectionDir, 'collection.bru');
+    await settings.locator('[data-testid="datatype-selector-tok"]').click();
+    await settings.locator('[data-testid="datatype-selector-tok-number"]').click();
+    await expect(settings.locator('[data-testid="datatype-selector-tok"]')).toContainText('number');
+    await settings.getByRole('button', { name: 'Save', exact: true }).click();
+    await expect.poll(() => fs.readFileSync(collectionFile, 'utf8'), { timeout: 15_000 }).toContain('@number');
+    expect(fs.readFileSync(collectionFile, 'utf8')).toContain('@object');
+  });
+
+  test('environment Vars: typed values display, and choosing a type persists it to the env file', async ({ page, tmpDir }) => {
+    const sidebar = await openBrunoSidebar(page);
+    const collectionName = 'Typed Env';
+    await createCollection(page, sidebar, collectionName, tmpDir, 'bru');
+
+    const collectionDir = findCollectionDir(tmpDir);
+    fs.mkdirSync(path.join(collectionDir, 'environments'), { recursive: true });
+    const envFile = path.join(collectionDir, 'environments', 'Local.bru');
+    // Environment vars use the `vars { }` block (not `vars:pre-request`).
+    fs.writeFileSync(envFile, ['vars {', '  @object', '  cfg: {"host":"localhost"}', '  tok: plain', '}', ''].join('\n'), 'utf8');
+    // A request is needed so the environment selector renders in the editor toolbar.
+    fs.writeFileSync(path.join(collectionDir, 'Ping.bru'), [
+      'meta {', '  name: Ping', '  type: http', '  seq: 1', '}', '',
+      'get {', '  url: https://usebruno.com', '  body: none', '  auth: inherit', '}', ''
+    ].join('\n'), 'utf8');
+
+    const editor = await openRequest(page, sidebar, collectionName, 'Ping');
+    await editor.locator('[data-testid="environment-selector-trigger"]').click();
+    await editor.locator('.dropdown-item').filter({ hasText: 'Local' }).first().click();
+
+    // Re-open the selector and click "Configure" to open the environment settings panel.
+    await editor.locator('[data-testid="environment-selector-trigger"]').click();
+    await editor.locator('#configure-env').click();
+
+    const envSettings = await frameWith(page, '[data-testid="save-env"]');
+    // The @object env var round-trips from disk and renders as JSON (the env editor
+    // pretty-prints, so assert on format-agnostic substrings rather than the exact JSON string).
+    const cfgRow = envSettings.locator('[data-testid="env-var-row-cfg"]');
+    await expect(cfgRow).toContainText('"host"');
+    await expect(cfgRow).toContainText('localhost');
+    await expect(cfgRow).not.toContainText('[object Object]');
+    await expect(envSettings.locator('[data-testid="datatype-selector-cfg"]')).toContainText('object');
+
+    // Change `tok` to number and save — the env file gains the @number annotation.
+    await envSettings.locator('[data-testid="datatype-selector-tok"]').click();
+    await envSettings.locator('[data-testid="datatype-selector-tok-number"]').click();
+    await expect(envSettings.locator('[data-testid="datatype-selector-tok"]')).toContainText('number');
+    await envSettings.locator('[data-testid="save-env"]').click();
+    await expect.poll(() => fs.readFileSync(envFile, 'utf8'), { timeout: 15_000 }).toContain('@number');
+    // The pre-existing @object annotation survives the save.
+    expect(fs.readFileSync(envFile, 'utf8')).toContain('@object');
+  });
+
+  test('folder Vars: an object value shows as JSON with a type selector reflecting the on-disk type', async ({ page, tmpDir }) => {
+    const sidebar = await openBrunoSidebar(page);
+    const collectionName = 'Typed Folder';
+    await createCollection(page, sidebar, collectionName, tmpDir, 'bru');
+    await createFolder(sidebar, collectionName, 'sub');
+
+    const collectionDir = findCollectionDir(tmpDir);
+    fs.writeFileSync(path.join(collectionDir, 'sub', 'folder.bru'), [
+      'vars:pre-request {', '  @object', '  cfg: {"host":"localhost"}', '  tok: plain', '}', ''
+    ].join('\n'), 'utf8');
+
+    // Open folder settings via the folder row's context menu.
+    const folderRow = sidebar.locator('[data-testid="sidebar-collection-item-row"]').filter({ hasText: 'sub' });
+    await folderRow.hover();
+    await folderRow.locator('[data-testid="collection-item-menu"]').click();
+    await sidebar.locator('[role="menuitem"]').filter({ hasText: 'Settings' }).click();
+
+    const settings = await frameWith(page, '[data-testid="folder-settings"]');
+    await settings.locator('[role="tab"]').filter({ hasText: 'Vars' }).first().click();
+
+    const table = settings.locator('[data-testid="folder-vars-req"]');
+    await expect(table).toBeVisible({ timeout: 15_000 });
+    await expect(table).toContainText('{"host":"localhost"}');
+    await expect(table).not.toContainText('[object Object]');
+    await expect(settings.locator('[data-testid="datatype-selector-cfg"]')).toContainText('object');
+    await expect(settings.locator('[data-testid="datatype-selector-tok"]')).toContainText('string');
+
+    // Change tok -> number and Save; the folder file gains @number, @object survives.
+    const folderFile = path.join(collectionDir, 'sub', 'folder.bru');
+    await settings.locator('[data-testid="datatype-selector-tok"]').click();
+    await settings.locator('[data-testid="datatype-selector-tok-number"]').click();
+    await expect(settings.locator('[data-testid="datatype-selector-tok"]')).toContainText('number');
+    await settings.getByRole('button', { name: 'Save', exact: true }).click();
+    await expect.poll(() => fs.readFileSync(folderFile, 'utf8'), { timeout: 15_000 }).toContain('@number');
+    expect(fs.readFileSync(folderFile, 'utf8')).toContain('@object');
+  });
+});