diff --git a/ui/src/components/CustomSelect/__tests__/CustomSelect.test.tsx b/ui/src/components/CustomSelect/__tests__/CustomSelect.test.tsx
new file mode 100644
index 000000000..518c8271f
--- /dev/null
+++ b/ui/src/components/CustomSelect/__tests__/CustomSelect.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { expect, describe, it } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import { CustomSelect } from '../CustomSelect';
+import { Option } from '../Option';
+
+describe('CustomSelect', () => {
+  it('forwards data-testid to the toggle button', () => {
+    render(
+      <ChakraProvider>
+        <CustomSelect
+          value='one'
+          data-testid='connector-widget-select'
+          onChange={() => {}}
+          placeholder='Choose'
+        >
+          <Option value='one'>One</Option>
+          <Option value='two'>Two</Option>
+        </CustomSelect>
+      </ChakraProvider>,
+    );
+
+    expect(screen.getByTestId('connector-widget-select')).toBeInTheDocument();
+  });
+});
diff --git a/ui/src/components/DataTable/Table.tsx b/ui/src/components/DataTable/Table.tsx
index f230c9cc8..45f226463 100644
--- a/ui/src/components/DataTable/Table.tsx
+++ b/ui/src/components/DataTable/Table.tsx
@@ -1,14 +1,34 @@
 import { Table, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
 import { flexRender, getCoreRowModel, useReactTable, ColumnDef, Row } from '@tanstack/react-table';
+<<<<<<< HEAD
 import { useState } from 'react';
+=======
+import { useState, ReactNode, ComponentProps } from 'react';
+
+type DataTableRowProps = ComponentProps<typeof Tr>;
+>>>>>>> deba42b89 (feat(CE): data-testid hooks for models, Data Apps, and workflows (#1835))
 
 type DataTableProps<TData, TValue> = {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   onRowClick?: (row: Row<TData>) => void;
+<<<<<<< HEAD
 };
 
 const DataTable = <TData, TValue>({ data, columns, onRowClick }: DataTableProps<TData, TValue>) => {
+=======
+  noRowsComponent?: ReactNode;
+  getRowProps?: (row: Row<TData>) => DataTableRowProps;
+};
+
+const DataTable = <TData, TValue>({
+  data,
+  columns,
+  onRowClick,
+  noRowsComponent,
+  getRowProps,
+}: DataTableProps<TData, TValue>) => {
+>>>>>>> deba42b89 (feat(CE): data-testid hooks for models, Data Apps, and workflows (#1835))
   const [rowSelection, setRowSelection] = useState({});
 
   const table = useReactTable({
@@ -43,6 +63,7 @@ const DataTable = <TData, TValue>({ data, columns, onRowClick }: DataTableProps<
         ))}
       </Thead>
       <Tbody>
+<<<<<<< HEAD
         {table.getRowModel().rows.map((row) => (
           <Tr
             key={row.id}
@@ -57,6 +78,31 @@ const DataTable = <TData, TValue>({ data, columns, onRowClick }: DataTableProps<
             ))}
           </Tr>
         ))}
+=======
+        {table.getRowModel().rows.length > 0
+          ? table.getRowModel().rows.map((row) => (
+              <Tr
+                key={row.id}
+                {...(getRowProps?.(row) ?? {})}
+                _hover={{ backgroundColor: 'gray.200', cursor: 'pointer' }}
+                onClick={() => onRowClick?.(row)}
+                backgroundColor='gray.100'
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <Td key={cell.id} padding='16px' maxWidth={'450px'}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Td>
+                ))}
+              </Tr>
+            ))
+          : noRowsComponent && (
+              <Tr backgroundColor='gray.100'>
+                <Td colSpan={columns.length} padding='16px' textAlign='center'>
+                  {noRowsComponent}
+                </Td>
+              </Tr>
+            )}
+>>>>>>> deba42b89 (feat(CE): data-testid hooks for models, Data Apps, and workflows (#1835))
       </Tbody>
     </Table>
   );
diff --git a/ui/src/components/DataTable/__tests__/Table.test.tsx b/ui/src/components/DataTable/__tests__/Table.test.tsx
new file mode 100644
index 000000000..16fe45efe
--- /dev/null
+++ b/ui/src/components/DataTable/__tests__/Table.test.tsx
@@ -0,0 +1,58 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect, describe, it, jest } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import type { ColumnDef, Row as TanStackRow } from '@tanstack/react-table';
+import DataTable from '../Table';
+
+type RowData = { id: string; name: string };
+
+describe('DataTable', () => {
+  const columns: ColumnDef<RowData, string>[] = [
+    { accessorKey: 'name', header: 'Name', cell: (info) => info.getValue() },
+  ];
+
+  const data: RowData[] = [
+    { id: 'a', name: 'Alpha' },
+    { id: 'b', name: 'Beta' },
+  ];
+
+  it('merges getRowProps onto each row', () => {
+    render(
+      <ChakraProvider>
+        <DataTable
+          data={data}
+          columns={columns}
+          getRowProps={(row) => ({
+            'data-testid': `row-${row.original.id}`,
+            'data-row-label': row.original.name,
+          })}
+        />
+      </ChakraProvider>,
+    );
+
+    const first = screen.getByTestId('row-a');
+    expect(first).toHaveAttribute('data-row-label', 'Alpha');
+    expect(screen.getByTestId('row-b')).toHaveAttribute('data-row-label', 'Beta');
+  });
+
+  it('invokes onRowClick with the row when a row is clicked', () => {
+    const onRowClick = jest.fn();
+    render(
+      <ChakraProvider>
+        <DataTable
+          data={data}
+          columns={columns}
+          getRowProps={(row) => ({ 'data-testid': `row-${row.original.id}` })}
+          onRowClick={onRowClick}
+        />
+      </ChakraProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId('row-a'));
+    expect(onRowClick).toHaveBeenCalledTimes(1);
+    const clicked = onRowClick.mock.calls[0][0] as TanStackRow<RowData>;
+    expect(clicked.original).toEqual(data[0]);
+  });
+});
diff --git a/ui/src/components/FormFooter/__tests__/FormFooter.test.tsx b/ui/src/components/FormFooter/__tests__/FormFooter.test.tsx
new file mode 100644
index 000000000..e14ab1088
--- /dev/null
+++ b/ui/src/components/FormFooter/__tests__/FormFooter.test.tsx
@@ -0,0 +1,51 @@
+import type { ComponentProps } from 'react';
+import { render, screen } from '@testing-library/react';
+import { expect, describe, it } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import { MemoryRouter } from 'react-router-dom';
+import FormFooter from '../FormFooter';
+
+const renderFormFooter = (props: ComponentProps<typeof FormFooter>) =>
+  render(
+    <MemoryRouter>
+      <ChakraProvider>
+        <FormFooter {...props} />
+      </ChakraProvider>
+    </MemoryRouter>,
+  );
+
+describe('FormFooter', () => {
+  it('exposes stepped-form data-testid derived from cta label for Continue', () => {
+    renderFormFooter({
+      ctaName: 'Continue',
+      isContinueCtaRequired: true,
+    });
+    expect(screen.getByTestId('stepped-form-continue')).toHaveTextContent('Continue');
+  });
+
+  it('normalizes cta label to kebab-case for data-testid', () => {
+    renderFormFooter({
+      ctaName: 'Save Changes',
+      isContinueCtaRequired: true,
+    });
+    expect(screen.getByTestId('stepped-form-save-changes')).toHaveTextContent('Save Changes');
+  });
+
+  it('collapses internal spaces in cta name for data-testid', () => {
+    renderFormFooter({
+      ctaName: 'Save  Draft',
+      isContinueCtaRequired: true,
+    });
+    expect(screen.getByTestId('stepped-form-save-draft')).toBeInTheDocument();
+  });
+
+  it('does not render primary CTA when isContinueCtaRequired is false', () => {
+    renderFormFooter({
+      ctaName: 'Continue',
+      isContinueCtaRequired: false,
+    });
+    expect(screen.queryByTestId('stepped-form-continue')).not.toBeInTheDocument();
+  });
+});
diff --git a/ui/src/components/InputField/InputField.tsx b/ui/src/components/InputField/InputField.tsx
new file mode 100644
index 000000000..b8082bd8c
--- /dev/null
+++ b/ui/src/components/InputField/InputField.tsx
@@ -0,0 +1,90 @@
+import { Box, Text, Input, Tooltip as ChakraTooltip } from '@chakra-ui/react';
+import { FiInfo } from 'react-icons/fi';
+
+type InputFieldProps = {
+  label: string;
+  name: string;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement> | undefined;
+  id?: string;
+  type?: 'text' | 'password' | 'number';
+  placeholder?: string;
+  helperText?: string;
+  isTooltip?: boolean;
+  tooltipLabel?: string;
+  disabled?: boolean;
+  isRequired?: boolean;
+  testId?: string;
+};
+
+const InputField = ({
+  label,
+  name,
+  onChange,
+  value,
+  id,
+  type = 'text',
+  placeholder = '',
+  helperText,
+  isTooltip = false,
+  tooltipLabel,
+  disabled = false,
+  isRequired = false,
+  testId,
+}: InputFieldProps) => (
+  <Box width='100%' display='flex' flexDirection='column' gap='8px'>
+    <Box display='flex' alignItems='center' gap='4px'>
+      <Text fontWeight='semibold' size='sm'>
+        {label}
+      </Text>
+      {isRequired && (
+        <Text size='sm' color='error.400'>
+          *
+        </Text>
+      )}
+      {isTooltip && (
+        <ChakraTooltip
+          hasArrow
+          label={tooltipLabel}
+          fontSize='xs'
+          placement='top-start'
+          backgroundColor='black.500'
+          color='gray.100'
+          borderRadius='6px'
+          padding='8px'
+        >
+          <Text color='gray.600' data-testid='tooltip-trigger'>
+            <FiInfo />
+          </Text>
+        </ChakraTooltip>
+      )}
+    </Box>
+    <Input
+      id={id}
+      placeholder={placeholder}
+      backgroundColor='gray.100'
+      onChange={onChange}
+      value={value}
+      borderStyle='solid'
+      borderWidth='1px'
+      borderColor='gray.400'
+      fontSize='14px'
+      borderRadius='6px'
+      _placeholder={{ color: 'gray.600' }}
+      _focusVisible={{ borderColor: 'gray.400' }}
+      _hover={{ borderColor: 'gray.400' }}
+      name={name}
+      type={type}
+      required
+      data-testid={testId ?? 'input-field'}
+      disabled={disabled}
+    />
+    {helperText && (
+      <Text fontWeight={500} size='xs' color='gray.600'>
+        {helperText}
+      </Text>
+    )}
+  </Box>
+);
+
+export default InputField;
diff --git a/ui/src/components/InputField/__tests__/InputField.test.tsx b/ui/src/components/InputField/__tests__/InputField.test.tsx
new file mode 100644
index 000000000..6dfb7c77d
--- /dev/null
+++ b/ui/src/components/InputField/__tests__/InputField.test.tsx
@@ -0,0 +1,123 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import InputField from '../InputField';
+
+const renderInputField = (props = {}) => {
+  return render(
+    <ChakraProvider>
+      <InputField label='Test Label' name='testName' value='' onChange={() => {}} {...props} />
+    </ChakraProvider>,
+  );
+};
+
+describe('InputField', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render label', () => {
+    renderInputField({ label: 'Test Label' });
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('should render input field', () => {
+    renderInputField();
+    expect(screen.getByTestId('input-field')).toBeInTheDocument();
+  });
+
+  it('should use custom testId when provided', () => {
+    renderInputField({ testId: 'settings-api-key-input' });
+    expect(screen.getByTestId('settings-api-key-input')).toBeInTheDocument();
+    expect(screen.queryByTestId('input-field')).not.toBeInTheDocument();
+  });
+
+  it('should render input with correct name attribute', () => {
+    renderInputField({ name: 'testName' });
+    const input = screen.getByTestId('input-field');
+    expect(input).toHaveAttribute('name', 'testName');
+  });
+
+  it('should render input with correct value', () => {
+    renderInputField({ value: 'test value' });
+    const input = screen.getByTestId('input-field') as HTMLInputElement;
+    expect(input.value).toBe('test value');
+  });
+
+  it('should call onChange when input value changes', () => {
+    renderInputField({ onChange: mockOnChange });
+    const input = screen.getByTestId('input-field');
+    fireEvent.change(input, { target: { value: 'new value' } });
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render placeholder', () => {
+    renderInputField({ placeholder: 'Enter text here' });
+    const input = screen.getByTestId('input-field');
+    expect(input).toHaveAttribute('placeholder', 'Enter text here');
+  });
+
+  it('should render helper text when provided', () => {
+    renderInputField({ helperText: 'This is helper text' });
+    expect(screen.getByText('This is helper text')).toBeInTheDocument();
+  });
+
+  it('should not render helper text when not provided', () => {
+    renderInputField();
+    expect(screen.queryByText('This is helper text')).not.toBeInTheDocument();
+  });
+
+  it('should not render tooltip when isTooltip is false', () => {
+    renderInputField({ isTooltip: false });
+    // Tooltip icon should not be visible
+    const tooltipIcon = screen.queryByRole('img', { hidden: true });
+    // The FiInfo icon might still render but tooltip won't show
+    expect(tooltipIcon).not.toBeInTheDocument();
+  });
+
+  it('should render disabled input when disabled is true', () => {
+    renderInputField({ disabled: true });
+    const input = screen.getByTestId('input-field');
+    expect(input).toBeDisabled();
+  });
+
+  it('should render enabled input when disabled is false', () => {
+    renderInputField({ disabled: false });
+    const input = screen.getByTestId('input-field');
+    expect(input).not.toBeDisabled();
+  });
+
+  it('should render text input type by default', () => {
+    renderInputField();
+    const input = screen.getByTestId('input-field');
+    expect(input).toHaveAttribute('type', 'text');
+  });
+
+  it('should render password input type', () => {
+    renderInputField({ type: 'password' });
+    const input = screen.getByTestId('input-field');
+    expect(input).toHaveAttribute('type', 'password');
+  });
+
+  it('should render number input type', () => {
+    renderInputField({ type: 'number' });
+    const input = screen.getByTestId('input-field');
+    expect(input).toHaveAttribute('type', 'number');
+  });
+
+  it('should render input with id when provided', () => {
+    renderInputField({ id: 'test-id' });
+    const input = screen.getByTestId('input-field');
+    expect(input).toHaveAttribute('id', 'test-id');
+  });
+
+  it('should render input as required', () => {
+    renderInputField();
+    const input = screen.getByTestId('input-field');
+    expect(input).toBeRequired();
+  });
+});
diff --git a/ui/src/components/JSONSchemaForm/rjsf/BaseInputTemplate.tsx b/ui/src/components/JSONSchemaForm/rjsf/BaseInputTemplate.tsx
index cfc0d7139..81794f2c6 100644
--- a/ui/src/components/JSONSchemaForm/rjsf/BaseInputTemplate.tsx
+++ b/ui/src/components/JSONSchemaForm/rjsf/BaseInputTemplate.tsx
@@ -70,6 +70,9 @@ export default function BaseInputTemplate<
     onToggle();
   };
 
+  const connectorFieldTestId =
+    id && id.startsWith('root_') ? `connector-config-field-${id.slice('root_'.length)}` : undefined;
+
   return (
     <FormControl
       mb={1}
@@ -113,6 +116,7 @@ export default function BaseInputTemplate<
           <Input
             id={id}
             name={id}
+            data-testid={connectorFieldTestId}
             value={value || value === 0 ? value : ''}
             onChange={onChangeOverride || _onChange}
             onBlur={_onBlur}
diff --git a/ui/src/components/JSONSchemaForm/rjsf/__tests__/BaseInputTemplate.test.tsx b/ui/src/components/JSONSchemaForm/rjsf/__tests__/BaseInputTemplate.test.tsx
new file mode 100644
index 000000000..36a5618c1
--- /dev/null
+++ b/ui/src/components/JSONSchemaForm/rjsf/__tests__/BaseInputTemplate.test.tsx
@@ -0,0 +1,63 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect, describe, it, jest } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import type { BaseInputTemplateProps } from '@rjsf/utils';
+
+jest.mock('@rjsf/chakra-ui/lib/utils', () => ({
+  getChakra: () => ({}),
+}));
+
+import BaseInputTemplate from '../BaseInputTemplate';
+
+const baseRegistry = {
+  templates: {},
+  widgets: {},
+  rootSchema: {},
+  schemaUtils: {
+    getDisplayLabel: () => false,
+  },
+  globalUiOptions: {},
+} as unknown as BaseInputTemplateProps['registry'];
+
+describe('BaseInputTemplate', () => {
+  it('sets connector-config-field test id for root_* ids', () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const onFocus = jest.fn();
+
+    const props = {
+      id: 'root_database_host',
+      name: 'root_database_host',
+      schema: { type: 'string' },
+      uiSchema: {},
+      value: '',
+      label: 'Host',
+      hideLabel: false,
+      required: false,
+      disabled: false,
+      readonly: false,
+      autofocus: false,
+      placeholder: 'localhost',
+      onChange,
+      onBlur,
+      onFocus,
+      onChangeOverride: undefined,
+      options: {},
+      rawErrors: [],
+      registry: baseRegistry,
+    } as unknown as BaseInputTemplateProps;
+
+    render(
+      <ChakraProvider>
+        <BaseInputTemplate {...props} />
+      </ChakraProvider>,
+    );
+
+    const input = screen.getByTestId('connector-config-field-database_host');
+    expect(input).toHaveAttribute('id', 'root_database_host');
+    fireEvent.change(input, { target: { value: 'db.example.com' } });
+    expect(onChange).toHaveBeenCalledWith('db.example.com');
+  });
+});
diff --git a/ui/src/components/SearchBar/SearchBar.tsx b/ui/src/components/SearchBar/SearchBar.tsx
index 0275ecbf6..bfbb0611a 100644
--- a/ui/src/components/SearchBar/SearchBar.tsx
+++ b/ui/src/components/SearchBar/SearchBar.tsx
@@ -6,14 +6,30 @@ type SearchBarProps = {
   setSearchTerm: Dispatch<SetStateAction<string>>;
   placeholder: string;
   borderColor: string;
+<<<<<<< HEAD
 };
 
 const SearchBar = ({ setSearchTerm, placeholder, borderColor }: SearchBarProps) => (
   <InputGroup>
+=======
+  width?: string;
+  'data-testid'?: string;
+};
+
+const SearchBar = ({
+  setSearchTerm,
+  placeholder,
+  borderColor,
+  width = '100%',
+  'data-testid': dataTestId,
+}: SearchBarProps) => (
+  <InputGroup w={width} h='40px'>
+>>>>>>> deba42b89 (feat(CE): data-testid hooks for models, Data Apps, and workflows (#1835))
     <InputLeftElement pointerEvents='none'>
       <Icon as={FiSearch} color='gray.600' boxSize='5' />
     </InputLeftElement>
     <Input
+      data-testid={dataTestId}
       placeholder={placeholder}
       _placeholder={{ color: 'gray.600' }}
       borderColor={borderColor}
diff --git a/ui/src/components/SearchBar/__tests__/SearchBar.test.tsx b/ui/src/components/SearchBar/__tests__/SearchBar.test.tsx
new file mode 100644
index 000000000..091cdb66d
--- /dev/null
+++ b/ui/src/components/SearchBar/__tests__/SearchBar.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect, describe, it, jest } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import SearchBar from '../SearchBar';
+
+describe('SearchBar', () => {
+  it('forwards data-testid to the input', () => {
+    const setSearchTerm = jest.fn();
+    render(
+      <ChakraProvider>
+        <SearchBar
+          setSearchTerm={setSearchTerm}
+          placeholder='Search'
+          borderColor='gray.400'
+          data-testid='workflow-connector-search'
+        />
+      </ChakraProvider>,
+    );
+
+    const input = screen.getByTestId('workflow-connector-search');
+    expect(input).toHaveAttribute('placeholder', 'Search');
+    fireEvent.change(input, { target: { value: 'x' } });
+    expect(setSearchTerm).toHaveBeenCalled();
+  });
+});
diff --git a/ui/src/components/TabItem/TabItem.tsx b/ui/src/components/TabItem/TabItem.tsx
index 07ba77e29..4847223c2 100644
--- a/ui/src/components/TabItem/TabItem.tsx
+++ b/ui/src/components/TabItem/TabItem.tsx
@@ -7,9 +7,30 @@ type TabItemProps = {
   isBadgeVisible?: boolean;
   badgeText?: string;
   extra?: JSX.Element;
+<<<<<<< HEAD
 };
 
 const TabItem = ({ text, action, isBadgeVisible, badgeText, extra }: TabItemProps): JSX.Element => {
+=======
+  icon?: JSX.Element;
+  flex?: number | string;
+  testId?: string;
+} & TabProps;
+
+const TabItem = ({
+  text,
+  action,
+  isBadgeVisible,
+  badgeText,
+  extra,
+  icon,
+  testId,
+  height = '30px',
+  px = '24px',
+  py = '6px',
+  ...props
+}: TabItemProps): JSX.Element => {
+>>>>>>> deba42b89 (feat(CE): data-testid hooks for models, Data Apps, and workflows (#1835))
   return (
     <Tab
       _selected={{
@@ -23,6 +44,11 @@ const TabItem = ({ text, action, isBadgeVisible, badgeText, extra }: TabItemProp
       py='6px'
       onClick={action}
       gap='6px'
+<<<<<<< HEAD
+=======
+      data-testid={testId ?? `tab-item-${text}`}
+      {...props}
+>>>>>>> deba42b89 (feat(CE): data-testid hooks for models, Data Apps, and workflows (#1835))
     >
       <Text fontSize='xs' fontWeight='semibold'>
         {text}
diff --git a/ui/src/components/TabItem/__tests__/TabItem.test.tsx b/ui/src/components/TabItem/__tests__/TabItem.test.tsx
new file mode 100644
index 000000000..6bfcdf2ff
--- /dev/null
+++ b/ui/src/components/TabItem/__tests__/TabItem.test.tsx
@@ -0,0 +1,150 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider, Tabs } from '@chakra-ui/react';
+import TabItem from '../TabItem';
+import { FiHome } from 'react-icons/fi';
+
+const renderTabItem = (props = {}) => {
+  return render(
+    <ChakraProvider>
+      <Tabs>
+        <TabItem text='Test Tab' {...props} />
+      </Tabs>
+    </ChakraProvider>,
+  );
+};
+
+describe('TabItem', () => {
+  const mockAction = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render text', () => {
+    renderTabItem({ text: 'Test Tab' });
+    expect(screen.getByText('Test Tab')).toBeInTheDocument();
+  });
+
+  it('should render with correct test id', () => {
+    renderTabItem({ text: 'Test Tab' });
+    expect(screen.getByTestId('tab-item-Test Tab')).toBeInTheDocument();
+  });
+
+  it('should prefer explicit testId over text-based id', () => {
+    renderTabItem({ text: 'Workflow', testId: 'tab-item-workflow' });
+    expect(screen.getByTestId('tab-item-workflow')).toBeInTheDocument();
+  });
+
+  it('should call action when clicked', () => {
+    renderTabItem({ text: 'Test Tab', action: mockAction });
+    const tab = screen.getByTestId('tab-item-Test Tab');
+    fireEvent.click(tab);
+    expect(mockAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render badge when isBadgeVisible is true and badgeText is provided', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      isBadgeVisible: true,
+      badgeText: '5',
+    });
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('should not render badge when isBadgeVisible is false', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      isBadgeVisible: false,
+      badgeText: '5',
+    });
+    expect(screen.queryByText('5')).not.toBeInTheDocument();
+  });
+
+  it('should not render badge when badgeText is not provided', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      isBadgeVisible: true,
+    });
+    // Badge should not render without badgeText
+    const badge = screen.queryByTestId('tab-badge');
+    expect(badge).not.toBeInTheDocument();
+  });
+
+  it('should render icon when provided', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      icon: <FiHome data-testid='tab-icon' />,
+    });
+    expect(screen.getByTestId('tab-icon')).toBeInTheDocument();
+  });
+
+  it('should render extra content when provided', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      extra: <div data-testid='extra-content'>Extra</div>,
+    });
+    expect(screen.getByTestId('extra-content')).toBeInTheDocument();
+  });
+
+  it('should render with custom height', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      height: '40px',
+    });
+    const tab = screen.getByTestId('tab-item-Test Tab');
+    expect(tab).toBeInTheDocument();
+  });
+
+  it('should render with custom padding', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      px: '16px',
+      py: '8px',
+    });
+    expect(screen.getByTestId('tab-item-Test Tab')).toBeInTheDocument();
+  });
+
+  it('should render with flex prop', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      flex: 1,
+    });
+    expect(screen.getByTestId('tab-item-Test Tab')).toBeInTheDocument();
+  });
+
+  it('should handle selected state styling', () => {
+    renderTabItem({
+      text: 'Test Tab',
+      _selected: {
+        backgroundColor: 'blue.100',
+      },
+    });
+    const tab = screen.getByTestId('tab-item-Test Tab');
+    expect(tab).toBeInTheDocument();
+  });
+
+  it('should render all props together', () => {
+    renderTabItem({
+      text: 'Complete Tab',
+      action: mockAction,
+      isBadgeVisible: true,
+      badgeText: '10',
+      icon: <FiHome data-testid='complete-icon' />,
+      extra: <div data-testid='complete-extra'>Extra</div>,
+    });
+    expect(screen.getByText('Complete Tab')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+    expect(screen.getByTestId('complete-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('complete-extra')).toBeInTheDocument();
+  });
+
+  it('should not call action when action is not provided', () => {
+    renderTabItem({ text: 'Test Tab' });
+    const tab = screen.getByTestId('tab-item-Test Tab');
+    // Should not throw error
+    fireEvent.click(tab);
+  });
+});
diff --git a/ui/src/components/Toast/__tests__/Toast.test.tsx b/ui/src/components/Toast/__tests__/Toast.test.tsx
new file mode 100644
index 000000000..1f8eee7b4
--- /dev/null
+++ b/ui/src/components/Toast/__tests__/Toast.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect, describe, it, jest } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import Toast, { CustomToastStatus } from '../index';
+
+describe('Toast', () => {
+  it('exposes custom toast test ids and status data attribute', () => {
+    const onClose = jest.fn();
+    render(
+      <ChakraProvider>
+        <Toast
+          title='Saved'
+          description='Your changes were saved.'
+          status={CustomToastStatus.Success}
+          onClose={onClose}
+        />
+      </ChakraProvider>,
+    );
+
+    const root = screen.getByTestId('custom-toast');
+    expect(root).toHaveAttribute('data-toast-status', CustomToastStatus.Success);
+    expect(screen.getByTestId('custom-toast-title')).toHaveTextContent('Saved');
+    expect(screen.getByTestId('custom-toast-description')).toHaveTextContent(
+      'Your changes were saved.',
+    );
+
+    fireEvent.click(root.querySelector('button') as HTMLButtonElement);
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/ui/src/components/Toast/index.tsx b/ui/src/components/Toast/index.tsx
index 18e1ea9af..f5cfa3f10 100644
--- a/ui/src/components/Toast/index.tsx
+++ b/ui/src/components/Toast/index.tsx
@@ -51,6 +51,8 @@ const Toast: React.FC<ToastProps> = ({
 
   return (
     <Box
+      data-testid='custom-toast'
+      data-toast-status={status}
       bg={backgroundColor}
       border='1px solid'
       borderColor={borderColor}
@@ -65,11 +67,20 @@ const Toast: React.FC<ToastProps> = ({
       <Box display='flex' justifyContent='flex-start' alignItems='center'>
         <CustomToastIcon status={status as CustomToastStatus} />
         <Box>
+<<<<<<< HEAD
           <Text color='black.500' size='sm' fontWeight='semibold'>
+=======
+          <Text
+            data-testid='custom-toast-title'
+            color='black.500'
+            size='sm'
+            fontWeight={description && description > '' ? 'semibold' : 400}
+          >
+>>>>>>> deba42b89 (feat(CE): data-testid hooks for models, Data Apps, and workflows (#1835))
             {title}
           </Text>
           {description && (
-            <Text color='black.200' size='sm'>
+            <Text data-testid='custom-toast-description' color='black.200' size='sm'>
               {description}
             </Text>
           )}
diff --git a/ui/src/enterprise/components/ChatbotInterface/ChatPromptInput.tsx b/ui/src/enterprise/components/ChatbotInterface/ChatPromptInput.tsx
new file mode 100644
index 000000000..5a5588168
--- /dev/null
+++ b/ui/src/enterprise/components/ChatbotInterface/ChatPromptInput.tsx
@@ -0,0 +1,308 @@
+import React, { useRef, useEffect, useState, KeyboardEvent } from 'react';
+import { Textarea, Box, HStack, Button, Icon, Flex, Text } from '@chakra-ui/react';
+import { FiArrowUp, FiPaperclip, FiPlus, FiSend, FiX } from 'react-icons/fi';
+import { useAssistantConfigStore } from '@/enterprise/store/useAssistantConfigStore';
+import { FEATURE_FLAG_KEYS, useFeatureFlags } from '@/enterprise/hooks/useFeatureFlags';
+import { FeatureFlagWrapper } from '@/components/FeatureFlagWrapper/FeatureFlagWrapper';
+import ToolTip from '@/components/ToolTip';
+import AssistantFileMessage from './AssistantFileMessage';
+import { FlowComponent } from '@/enterprise/views/Agents/types';
+import ContextComponentSelector, { SelectedAdditionalContexts } from './ContextComponentSelector';
+import { ContextItemType } from '@/enterprise/store/useAppGenStore';
+import FiAiWorkflows from '@/assets/icons/FiAiWorkflows';
+import SessionFileAttach from './SessionFileAttach';
+import AttachedFileChip from '@/enterprise/components/ChatbotComponents/AttachedFileChip';
+import { WORKFLOW_FILE_ACCEPT } from '@/enterprise/services/workflowFileConstants';
+
+export type ContextItem = {
+  id: string;
+  name: string;
+  type: ContextItemType;
+  icon?: string;
+};
+
+interface ChatPromptInputProps {
+  value: string;
+  file: File | null;
+  isDisabled?: boolean;
+  placeholder?: string;
+  isWidget?: boolean;
+  isAppGen?: boolean;
+  contextPopup?: React.ReactNode;
+  contextItems?: ContextItem[];
+  borderColor?: string;
+  onRemoveContextItem?: (id: string, type: ContextItemType) => void;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  handleAttachFile: () => void;
+  contextComponents?: FlowComponent[];
+  selectedContextComponents?: FlowComponent[];
+  onToggleContextComponent?: (component: FlowComponent) => void;
+  /** Session file upload (workflow file_input): separate from NASA attach. */
+  isSessionFileUploadEnabled?: boolean;
+  sessionAttachedFiles?: { file: File; isUploading: boolean }[];
+  onSessionAttachFile?: (file: File) => void;
+  onRemoveSessionFile?: (index: number) => void;
+  /** When true, disable send (e.g. streaming or any file still uploading). */
+  isSessionFilesUploading?: boolean;
+}
+
+const ChatPromptInput: React.FC<ChatPromptInputProps> = ({
+  value,
+  file,
+  isDisabled = false,
+  placeholder = 'Type your message...',
+  isWidget,
+  isAppGen,
+  contextPopup,
+  contextItems = [],
+  borderColor = 'gray.500',
+  onRemoveContextItem,
+  onChange,
+  onSend,
+  handleAttachFile,
+  contextComponents,
+  selectedContextComponents = [],
+  onToggleContextComponent,
+  isSessionFileUploadEnabled = false,
+  sessionAttachedFiles = [],
+  onSessionAttachFile,
+  onRemoveSessionFile,
+  isSessionFilesUploading = false,
+}) => {
+  const features = useFeatureFlags([FEATURE_FLAG_KEYS.nasaFeatures]);
+  const { setFile } = useAssistantConfigStore();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [height, setHeight] = useState('auto');
+  const showSessionFileAttach =
+    !features[FEATURE_FLAG_KEYS.nasaFeatures] &&
+    isSessionFileUploadEnabled === true &&
+    !!onSessionAttachFile;
+
+  const blockSendWithoutMessageWithSessionFiles =
+    showSessionFileAttach && sessionAttachedFiles.length > 0 && !value.trim();
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter') {
+      // Shift+Enter or Cmd/Ctrl+Enter submits the message
+      if (e.shiftKey || e.metaKey || e.ctrlKey) {
+        e.preventDefault();
+        if (!isDisabled && !isSessionFilesUploading && !blockSendWithoutMessageWithSessionFiles) {
+          onSend();
+        }
+      }
+      // Plain Enter adds a newline (default behavior, no action needed)
+    }
+  };
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto'; // Reset height to recalc
+    textarea.style.height = `${textarea.scrollHeight}px`;
+    setHeight(`${textarea.scrollHeight}px`);
+  }, [value]);
+
+  return (
+    <Box
+      h='fit-content'
+      w='100%'
+      borderRadius='12px'
+      borderWidth='1px'
+      p='12px'
+      gap='20px'
+      display='flex'
+      flexDir='column'
+      bgColor='gray.100'
+      borderColor={borderColor}
+      opacity={isDisabled ? 0.5 : 1}
+      cursor={isDisabled ? 'not-allowed' : 'text'}
+    >
+      {file && file.name && (
+        <AssistantFileMessage
+          filename={file.name}
+          handleRemoveFile={() => setFile(null)}
+          isViewOnly={false}
+        />
+      )}
+      {isAppGen && contextItems.length > 0 && (
+        <Flex gap='8px' flexWrap='wrap'>
+          {contextItems.map((item) => (
+            <Flex
+              key={`${item.id}-${item.type}`}
+              gap='4px'
+              alignItems='center'
+              px='8px'
+              py='2px'
+              borderRadius='4px'
+              border='1px solid'
+              borderColor='gray.500'
+              bg='gray.200'
+              flexShrink={0}
+            >
+              {item.icon ? (
+                <Box as='img' src={item.icon} w='12px' h='12px' flexShrink={0} />
+              ) : (
+                <FiAiWorkflows viewBox='0 0 14 14' height='10px' width='10px' color='black.200' />
+              )}
+              <Text
+                fontSize='12px'
+                fontWeight={600}
+                color='black.200'
+                letterSpacing='-0.12px'
+                lineHeight='18px'
+                whiteSpace='nowrap'
+              >
+                {item.name}
+              </Text>
+              <Box
+                as='button'
+                onClick={() => onRemoveContextItem?.(item.id, item.type)}
+                display='flex'
+                alignItems='center'
+                cursor='pointer'
+                ml='2px'
+                flexShrink={0}
+              >
+                <Icon as={FiX} w='10px' h='10px' color='gray.600' />
+              </Box>
+            </Flex>
+          ))}
+        </Flex>
+      )}
+      {selectedContextComponents.length > 0 && onToggleContextComponent && (
+        <SelectedAdditionalContexts
+          selectedContextComponents={selectedContextComponents}
+          onToggleContextComponent={onToggleContextComponent}
+        />
+      )}
+      {/* Session file_input chips; hidden when nasaFeatures (use NASA attach instead). */}
+      {showSessionFileAttach && sessionAttachedFiles.length > 0 && (
+        <Flex gap='8px' flexWrap='wrap' mb='8px'>
+          {sessionAttachedFiles.map((sessionFile, index) => (
+            <AttachedFileChip
+              key={`${sessionFile.file.name}-${index}`}
+              name={sessionFile.file.name}
+              file={sessionFile.file}
+              onRemove={() => onRemoveSessionFile?.(index)}
+              showLoader={sessionFile.isUploading}
+            />
+          ))}
+        </Flex>
+      )}
+      <Flex
+        flexDir={isWidget ? 'row' : 'column'}
+        alignItems={isWidget ? 'center' : 'normal'}
+        {...(isAppGen && { gap: '20px' })}
+      >
+        <Textarea
+          data-testid='chat-input'
+          ref={textareaRef}
+          height={height}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          isDisabled={isDisabled}
+          resize='none'
+          overflow='auto'
+          minHeight='40px'
+          maxHeight={isAppGen ? '40px' : '200px'}
+          p={0}
+          fontSize='sm'
+          border='none'
+          focusBorderColor='gray.100'
+          _placeholder={{
+            color: 'gray.600',
+          }}
+          css={{
+            '&::-webkit-scrollbar': {
+              width: '2px',
+            },
+            '&::-webkit-scrollbar-thumb': {
+              backgroundColor: 'var(--chakra-colors-gray-400)',
+            },
+          }}
+        />
+        <HStack flexDir={'row'} justifyContent={'space-between'}>
+          <Flex gap='8px' alignItems='center'>
+            {!isAppGen && (
+              <>
+                {/* NASA feature: attach file (feature-flag gated). */}
+                <FeatureFlagWrapper flags={[FEATURE_FLAG_KEYS.nasaFeatures]}>
+                  <ToolTip label={file ? 'Replace file' : 'Attach file'}>
+                    <Button
+                      variant='outline'
+                      w='40px'
+                      h='40px'
+                      px='12px'
+                      onClick={handleAttachFile}
+                      isDisabled={isDisabled}
+                    >
+                      <Icon as={FiPaperclip} h='14px' w='14px' color='black.500' />
+                    </Button>
+                  </ToolTip>
+                </FeatureFlagWrapper>
+              </>
+            )}
+            {isAppGen && (
+              <Box position='relative'>
+                {contextPopup}
+                <ToolTip label='Add context'>
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    px='12px'
+                    w='32px'
+                    h='32px'
+                    onClick={handleAttachFile}
+                    isDisabled={isDisabled}
+                  >
+                    <Icon as={FiPlus} h='14px' w='14px' color='black.500' />
+                  </Button>
+                </ToolTip>
+              </Box>
+            )}
+            {showSessionFileAttach && (
+              <SessionFileAttach
+                isEnabled
+                accept={WORKFLOW_FILE_ACCEPT}
+                onFileSelect={onSessionAttachFile}
+                disabled={isDisabled}
+              />
+            )}
+            {contextComponents && contextComponents.length > 0 && onToggleContextComponent && (
+              <ContextComponentSelector
+                contextComponents={contextComponents}
+                selectedContextComponents={selectedContextComponents}
+                onToggleContextComponent={onToggleContextComponent}
+                isDisabled={isDisabled}
+              />
+            )}
+          </Flex>
+          <Button
+            data-testid='chat-send-button'
+            variant={isWidget ? 'transparent' : 'solid'}
+            aria-label='Send message'
+            isDisabled={
+              isDisabled || isSessionFilesUploading || blockSendWithoutMessageWithSessionFiles
+            }
+            onClick={() => onSend()}
+            w={isAppGen ? '32px' : '40px'}
+            h={isAppGen ? '32px' : '40px'}
+            px='12px'
+            {...(isAppGen && { size: 'sm' })}
+          >
+            <Icon
+              as={isWidget ? FiSend : FiArrowUp}
+              h={isAppGen ? '14px' : '16px'}
+              w={isAppGen ? '14px' : '16px'}
+            />
+          </Button>
+        </HStack>
+      </Flex>
+    </Box>
+  );
+};
+
+export default ChatPromptInput;
diff --git a/ui/src/enterprise/components/ChatbotInterface/__tests__/ChatPromptInput.test.tsx b/ui/src/enterprise/components/ChatbotInterface/__tests__/ChatPromptInput.test.tsx
new file mode 100644
index 000000000..186e78f0b
--- /dev/null
+++ b/ui/src/enterprise/components/ChatbotInterface/__tests__/ChatPromptInput.test.tsx
@@ -0,0 +1,478 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, jest } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import ChatPromptInput from '../ChatPromptInput';
+import { useFeatureFlags, FEATURE_FLAG_KEYS } from '@/enterprise/hooks/useFeatureFlags';
+
+(global as any).mockUseFeatureFlags = jest.fn().mockReturnValue({ nasaFeatures: true });
+
+jest.mock('@/enterprise/hooks/useFeatureFlags', () => {
+  const FEATURE_FLAG_KEYS = { nasaFeatures: 'nasaFeatures' as const };
+
+  const useFeatureFlags = jest.fn().mockReturnValue({
+    [FEATURE_FLAG_KEYS.nasaFeatures]: false,
+  });
+
+  return {
+    __esModule: true,
+    FEATURE_FLAG_KEYS,
+    useFeatureFlags,
+  };
+});
+
+jest.mock('@/components/FeatureFlagWrapper/FeatureFlagWrapper', () => {
+  return {
+    FeatureFlagWrapper: ({ children, flags }: { children: React.ReactNode; flags: string[] }) => {
+      const ff = (global as any).mockUseFeatureFlags();
+      const enabled = flags.some((f) => ff[f]);
+      return enabled ? <>{children}</> : null;
+    },
+  };
+});
+
+const mockSetFile = jest.fn();
+jest.mock('@/enterprise/store/useAssistantConfigStore', () => ({
+  useAssistantConfigStore: () => ({ setFile: mockSetFile }),
+}));
+
+jest.mock('@/components/ToolTip', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+jest.mock('../AssistantFileMessage', () => ({
+  __esModule: true,
+  default: ({
+    filename,
+    handleRemoveFile,
+  }: {
+    filename: string;
+    handleRemoveFile?: () => void;
+  }) => (
+    <div data-testid='file-chip'>
+      <span>{filename}</span>
+      {handleRemoveFile ? (
+        <button data-testid='remove-file' onClick={handleRemoveFile}>
+          remove
+        </button>
+      ) : null}
+    </div>
+  ),
+}));
+
+jest.mock('../SessionFileAttach', () => ({
+  __esModule: true,
+  default: ({
+    onFileSelect,
+    disabled,
+  }: {
+    onFileSelect?: (file: File) => void;
+    disabled?: boolean;
+  }) => (
+    <button
+      type='button'
+      data-testid='session-attach'
+      aria-label='Attach file to message'
+      disabled={disabled}
+      onClick={() => onFileSelect?.(new File(['x'], 'session.csv', { type: 'text/csv' }))}
+    >
+      session attach
+    </button>
+  ),
+}));
+
+function setScrollHeight(el: HTMLElement, value: number) {
+  Object.defineProperty(el, 'scrollHeight', {
+    configurable: true,
+    get: () => value,
+  });
+}
+
+const renderWithChakra = (ui: React.ReactElement) => render(<ChakraProvider>{ui}</ChakraProvider>);
+
+describe('ChatPromptInput', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders textarea with placeholder and respects disabled state', () => {
+    const onChange = jest.fn();
+    const onSend = jest.fn();
+    renderWithChakra(
+      <ChatPromptInput
+        value=''
+        file={null}
+        isDisabled={false}
+        placeholder='Type your message...'
+        onChange={onChange}
+        onSend={onSend}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your message...');
+    expect(textarea).toBeInTheDocument();
+    const send = screen.getByRole('button', { name: /send message/i });
+    expect(send).toBeEnabled();
+    expect(send).toHaveAttribute('data-testid', 'chat-send-button');
+  });
+
+  test('Enter key alone does NOT trigger onSend (allows newline)', () => {
+    const onSend = jest.fn();
+    renderWithChakra(
+      <ChatPromptInput
+        value='Test'
+        file={null}
+        onChange={jest.fn()}
+        onSend={onSend}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your message...');
+
+    fireEvent.keyDown(textarea, { key: 'Enter' });
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  test('Shift+Enter triggers onSend', () => {
+    const onSend = jest.fn();
+    renderWithChakra(
+      <ChatPromptInput
+        value='Test'
+        file={null}
+        onChange={jest.fn()}
+        onSend={onSend}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your message...');
+
+    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true });
+    expect(onSend).toHaveBeenCalledTimes(1);
+  });
+
+  test('Ctrl+Enter (Windows/Linux) triggers onSend', () => {
+    const onSend = jest.fn();
+    renderWithChakra(
+      <ChatPromptInput
+        value='Test'
+        file={null}
+        onChange={jest.fn()}
+        onSend={onSend}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your message...');
+
+    fireEvent.keyDown(textarea, { key: 'Enter', ctrlKey: true });
+    expect(onSend).toHaveBeenCalledTimes(1);
+  });
+
+  test('Cmd+Enter (macOS) triggers onSend', () => {
+    const onSend = jest.fn();
+    renderWithChakra(
+      <ChatPromptInput
+        value='Test'
+        file={null}
+        onChange={jest.fn()}
+        onSend={onSend}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your message...');
+
+    fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true });
+    expect(onSend).toHaveBeenCalledTimes(1);
+  });
+
+  test('Send button click triggers onSend when enabled', () => {
+    const onSend = jest.fn();
+    renderWithChakra(
+      <ChatPromptInput
+        value='Hi'
+        file={null}
+        onChange={jest.fn()}
+        onSend={onSend}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /send message/i }));
+    expect(onSend).toHaveBeenCalledTimes(1);
+  });
+
+  test('Send button disabled when isDisabled=true', () => {
+    renderWithChakra(
+      <ChatPromptInput
+        value='Hi'
+        file={null}
+        isDisabled
+        onChange={jest.fn()}
+        onSend={jest.fn()}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: /send message/i })).toBeDisabled();
+  });
+
+  test('Attach file button is visible when nasaFeatures flag is true and calls handleAttachFile', () => {
+    (global as any).mockUseFeatureFlags.mockReturnValue({ nasaFeatures: true });
+
+    const handleAttachFile = jest.fn();
+    renderWithChakra(
+      <ChatPromptInput
+        value=''
+        file={null}
+        onChange={jest.fn()}
+        onSend={jest.fn()}
+        handleAttachFile={handleAttachFile}
+      />,
+    );
+
+    // Button has paperclip icon but no aria-label; rely on role=button count and click the first non-send button.
+    const buttons = screen.getAllByRole('button');
+    // Expect two buttons: attach + send
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+
+    // Click the first button that is not "Send message"
+    const attachBtn = buttons.find((b) => b.getAttribute('aria-label') !== 'Send message')!;
+    fireEvent.click(attachBtn);
+
+    expect(handleAttachFile).toHaveBeenCalledTimes(1);
+  });
+
+  test('Attach file button is hidden when nasaFeatures flag is false', () => {
+    (global as any).mockUseFeatureFlags.mockReturnValue({ nasaFeatures: false });
+
+    const { container } = renderWithChakra(
+      <ChatPromptInput
+        value=''
+        file={null}
+        onChange={jest.fn()}
+        onSend={jest.fn()}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    // Only the send button should be present
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(1);
+    expect(screen.getByRole('button', { name: /send message/i })).toBeInTheDocument();
+  });
+
+  test('Shows file chip when file prop is provided and remove triggers setFile(null)', () => {
+    (global as any).mockUseFeatureFlags.mockReturnValue({ nasaFeatures: true });
+
+    renderWithChakra(
+      <ChatPromptInput
+        value=''
+        file={new File(['hello'], 'data.csv', { type: 'text/csv' })}
+        onChange={jest.fn()}
+        onSend={jest.fn()}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId('file-chip')).toBeInTheDocument();
+    expect(screen.getByText('data.csv')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('remove-file'));
+    expect(mockSetFile).toHaveBeenCalledWith(null);
+  });
+
+  test('Widget mode renders without crashing and still sends on click', () => {
+    const onSend = jest.fn();
+    renderWithChakra(
+      <ChatPromptInput
+        isWidget
+        value='Widget mode'
+        file={null}
+        onChange={jest.fn()}
+        onSend={onSend}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /send message/i }));
+    expect(onSend).toHaveBeenCalledTimes(1);
+  });
+
+  test('auto-grows height to match scrollHeight when text increases', async () => {
+    const { rerender } = renderWithChakra(
+      <ChatPromptInput
+        value=''
+        file={null}
+        onChange={jest.fn()}
+        onSend={jest.fn()}
+        handleAttachFile={jest.fn()}
+      />,
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your message...') as HTMLTextAreaElement;
+
+    setScrollHeight(textarea, 60);
+    fireEvent.change(textarea, { target: { value: 'Hello' } });
+    rerender(
+      <ChakraProvider>
+        <ChatPromptInput
+          value='Hello'
+          file={null}
+          onChange={jest.fn()}
+          onSend={jest.fn()}
+          handleAttachFile={jest.fn()}
+        />
+      </ChakraProvider>,
+    );
+    await waitFor(() => expect(textarea.style.height).toBe('60px'));
+  });
+
+  describe('Session file upload', () => {
+    beforeEach(() => {
+      (useFeatureFlags as jest.Mock).mockReturnValue({ [FEATURE_FLAG_KEYS.nasaFeatures]: false });
+    });
+
+    test('session attach button is visible when nasaFeatures=false, isSessionFileUploadEnabled=true, and onSessionAttachFile provided', () => {
+      renderWithChakra(
+        <ChatPromptInput
+          value=''
+          file={null}
+          onChange={jest.fn()}
+          onSend={jest.fn()}
+          handleAttachFile={jest.fn()}
+          isSessionFileUploadEnabled
+          onSessionAttachFile={jest.fn()}
+        />,
+      );
+
+      expect(screen.getByRole('button', { name: /attach file to message/i })).toBeInTheDocument();
+    });
+
+    test('session attach button is hidden when nasaFeatures=true even with session upload enabled', () => {
+      (useFeatureFlags as jest.Mock).mockReturnValue({ [FEATURE_FLAG_KEYS.nasaFeatures]: true });
+
+      renderWithChakra(
+        <ChatPromptInput
+          value=''
+          file={null}
+          onChange={jest.fn()}
+          onSend={jest.fn()}
+          handleAttachFile={jest.fn()}
+          isSessionFileUploadEnabled
+          onSessionAttachFile={jest.fn()}
+        />,
+      );
+
+      expect(
+        screen.queryByRole('button', { name: /attach file to message/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    test('session attach button is hidden when onSessionAttachFile is not provided', () => {
+      renderWithChakra(
+        <ChatPromptInput
+          value=''
+          file={null}
+          onChange={jest.fn()}
+          onSend={jest.fn()}
+          handleAttachFile={jest.fn()}
+          isSessionFileUploadEnabled
+        />,
+      );
+
+      expect(
+        screen.queryByRole('button', { name: /attach file to message/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    test('session file chips show file names and remove calls onRemoveSessionFile with index', () => {
+      const onRemoveSessionFile = jest.fn();
+      const files = [
+        { file: new File(['a'], 'doc1.txt', { type: 'text/plain' }), isUploading: false },
+        { file: new File(['b'], 'doc2.pdf', { type: 'application/pdf' }), isUploading: false },
+      ];
+
+      renderWithChakra(
+        <ChatPromptInput
+          value=''
+          file={null}
+          onChange={jest.fn()}
+          onSend={jest.fn()}
+          handleAttachFile={jest.fn()}
+          isSessionFileUploadEnabled
+          onSessionAttachFile={jest.fn()}
+          sessionAttachedFiles={files}
+          onRemoveSessionFile={onRemoveSessionFile}
+        />,
+      );
+
+      expect(screen.getByText('doc1.txt')).toBeInTheDocument();
+      expect(screen.getByText('doc2.pdf')).toBeInTheDocument();
+
+      const removeButtons = screen.getAllByRole('button', { name: /remove file/i });
+      expect(removeButtons).toHaveLength(2);
+      fireEvent.click(removeButtons[1]);
+      expect(onRemoveSessionFile).toHaveBeenCalledWith(1);
+    });
+
+    test('session attach button remains enabled while files are uploading', () => {
+      renderWithChakra(
+        <ChatPromptInput
+          value='Hi'
+          file={null}
+          onChange={jest.fn()}
+          onSend={jest.fn()}
+          handleAttachFile={jest.fn()}
+          isSessionFileUploadEnabled
+          onSessionAttachFile={jest.fn()}
+          isSessionFilesUploading
+        />,
+      );
+
+      expect(screen.getByRole('button', { name: /attach file to message/i })).not.toBeDisabled();
+    });
+
+    test('send button is disabled when isSessionFilesUploading is true', () => {
+      renderWithChakra(
+        <ChatPromptInput
+          value='Hi'
+          file={null}
+          onChange={jest.fn()}
+          onSend={jest.fn()}
+          handleAttachFile={jest.fn()}
+          isSessionFileUploadEnabled
+          onSessionAttachFile={jest.fn()}
+          isSessionFilesUploading
+        />,
+      );
+
+      expect(screen.getByRole('button', { name: /send message/i })).toBeDisabled();
+    });
+
+    test('send button is disabled when session files attached but message is empty', () => {
+      renderWithChakra(
+        <ChatPromptInput
+          value=''
+          file={null}
+          onChange={jest.fn()}
+          onSend={jest.fn()}
+          handleAttachFile={jest.fn()}
+          isSessionFileUploadEnabled
+          onSessionAttachFile={jest.fn()}
+          sessionAttachedFiles={[
+            { file: new File(['a'], 'doc.txt', { type: 'text/plain' }), isUploading: false },
+          ]}
+        />,
+      );
+
+      expect(screen.getByRole('button', { name: /send message/i })).toBeDisabled();
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/AgentWorkflowCanvas.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/AgentWorkflowCanvas.tsx
new file mode 100644
index 000000000..4a2d4b4e5
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/AgentWorkflowCanvas.tsx
@@ -0,0 +1,397 @@
+import { Box, Button, Flex, Image, HStack } from '@chakra-ui/react';
+import {
+  ReactFlow,
+  useReactFlow,
+  applyNodeChanges,
+  applyEdgeChanges,
+  ReactFlowProvider,
+  addEdge,
+  Background,
+  BackgroundVariant,
+  Edge,
+  NodeTypes,
+} from '@xyflow/react';
+import { useEffect, useCallback, useRef, useState } from 'react';
+import '@xyflow/react/dist/style.css';
+import Sidebar from './Sidebar/Sidebar';
+import Configbar from './Configbar/Configbar';
+import useAgentStore from '@/enterprise/store/useAgentStore';
+import { FlowComponent } from '../types';
+import { getEdgeDataFromId } from '@/enterprise/utils/edgeJsonParser';
+import { useParams } from 'react-router-dom';
+import ShortUniqueId from 'short-unique-id';
+import { constructEdgeId } from './utils';
+import FiUndo from '@/assets/icons/FiUndo.svg';
+import FiRedo from '@/assets/icons/FiRedo.svg';
+import FiZoomIn from '@/assets/icons/FiZoomIn.svg';
+import FiZoomOut from '@/assets/icons/FiZoomOut.svg';
+import FiMaximize from '@/assets/icons/FiMaximize.svg';
+import { AIWorkflowBuilder } from './AIWorkflowBuilder';
+import FiAiWorkflows from '@/assets/icons/FiAIWorkflows.svg';
+import { GenericComponent } from '../CustomComponents';
+import { FeatureFlagWrapper } from '@/components/FeatureFlagWrapper/FeatureFlagWrapper';
+import { FEATURE_FLAG_KEYS } from '@/enterprise/hooks/useFeatureFlags';
+
+export const NODE_TYPES = {
+  generic_component: GenericComponent,
+} satisfies NodeTypes;
+
+const uid = new ShortUniqueId();
+
+interface ControlButtonProps {
+  icon: string;
+  alt: string;
+  onClick: () => void;
+  title: string;
+  disabled?: boolean;
+  'data-testid'?: string;
+}
+
+const ControlButton = ({
+  icon,
+  alt,
+  onClick,
+  title,
+  disabled = false,
+  'data-testid': dataTestId,
+}: ControlButtonProps) => (
+  <Box
+    data-testid={dataTestId}
+    height='32px'
+    width='32px'
+    onClick={disabled ? undefined : onClick}
+    title={title}
+    display='flex'
+    alignItems='center'
+    justifyContent='center'
+    cursor={disabled ? 'not-allowed' : 'pointer'}
+    opacity={disabled ? 0.4 : 1}
+    _hover={disabled ? {} : { bg: 'gray.50' }}
+  >
+    <Image src={icon} alt={alt} width='14px' height='14px' />
+  </Box>
+);
+
+const AgentWorkflowCanvasInner = (): JSX.Element => {
+  const agentId = useParams().id ?? '';
+  const { screenToFlowPosition, zoomIn, zoomOut, fitView } = useReactFlow();
+  const {
+    nodes,
+    edges,
+    currentWorkflow,
+    setNodes,
+    setEdges,
+    setWorkflow,
+    setSelectedComponent,
+    saveHistory,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    isPreviewMode,
+  } = useAgentStore();
+  const hasInitializedHistory = useRef(false);
+  const [isAIBuilderOpen, setIsAIBuilderOpen] = useState(false);
+
+  const handleDragEnd = (event: React.DragEvent<HTMLDivElement>, component: FlowComponent) => {
+    // Don't allow adding components in preview mode
+    if (isPreviewMode) return;
+
+    const position = screenToFlowPosition({
+      x: event.clientX,
+      y: event.clientY,
+    });
+    const addComponent: FlowComponent = { ...component };
+    addComponent.id = `${agentId}_${component.data.component}_${uid.randomUUID(5)}`;
+    addComponent.position = position;
+    addComponent.component_type = addComponent.data.component;
+    addComponent.type = addComponent.component_category ?? 'generic_component';
+    addComponent.configuration = addComponent.configuration ?? {};
+    setNodes((nodes) => {
+      const currentNodes = nodes.map((node) => ({ ...node, selected: false }));
+      if (currentWorkflow) {
+        const updatedWorkflow = { ...currentWorkflow };
+        updatedWorkflow.workflow.components = [...currentNodes, { ...addComponent, position }];
+        updatedWorkflow.workflow.status = 'draft';
+        setWorkflow({ ...updatedWorkflow });
+      }
+      return [...currentNodes, { ...addComponent, position, selected: true }];
+    });
+    setSelectedComponent(addComponent);
+    // Save history after adding a new component
+    setTimeout(() => saveHistory(), 0);
+  };
+
+  // Keyboard shortcuts for undo/redo
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const ctrlKey = event.metaKey || event.ctrlKey;
+
+      if (ctrlKey && event.key === 'z' && !event.shiftKey) {
+        event.preventDefault();
+        if (canUndo()) {
+          undo();
+        }
+      } else if (ctrlKey && (event.key === 'y' || (event.key === 'z' && event.shiftKey))) {
+        event.preventDefault();
+        if (canRedo()) {
+          redo();
+        }
+      }
+    },
+    [undo, redo, canUndo, canRedo],
+  );
+
+  useEffect(() => {
+    setSelectedComponent(null);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  // Save initial state when workflow loads
+  useEffect(() => {
+    if (currentWorkflow && !hasInitializedHistory.current) {
+      hasInitializedHistory.current = true;
+      saveHistory();
+    }
+  }, [currentWorkflow, saveHistory]);
+
+  const controls = [
+    { icon: FiUndo, alt: 'Undo', onClick: undo, title: 'Undo (Ctrl+Z)', disabled: !canUndo() },
+    { icon: FiRedo, alt: 'Redo', onClick: redo, title: 'Redo (Ctrl+Y)', disabled: !canRedo() },
+    { icon: FiZoomIn, alt: 'Zoom In', onClick: () => zoomIn(), title: 'Zoom In' },
+    { icon: FiZoomOut, alt: 'Zoom Out', onClick: () => zoomOut(), title: 'Zoom Out' },
+    {
+      icon: FiMaximize,
+      alt: 'Fit View',
+      onClick: () => fitView(),
+      title: 'Fit View',
+      'data-testid': 'workflow-canvas-fit-view',
+    },
+  ];
+
+  return (
+    <Flex flex='1' height='100%' overflow='hidden' position='relative'>
+      {!isPreviewMode && (
+        <Box position='relative'>
+          <Sidebar handleDragEnd={handleDragEnd} />
+        </Box>
+      )}
+      <ReactFlow
+        data-testid='workflow-canvas'
+        nodes={nodes}
+        fitView
+        edges={edges}
+        nodeTypes={NODE_TYPES}
+        onNodesChange={(changes) => {
+          // In preview mode, only allow selection changes, not position/remove changes
+          if (isPreviewMode) {
+            const allowedChanges = changes.filter((change) => change.type === 'select');
+            if (allowedChanges.length > 0) {
+              setNodes((nds) => applyNodeChanges(allowedChanges, nds));
+            }
+            return;
+          }
+
+          let shouldSaveHistory = false;
+          setNodes((nds) => {
+            if (currentWorkflow) {
+              const updateWorkflow = { ...currentWorkflow };
+              let workflowMutated = false;
+              for (const change of changes) {
+                if (change.type === 'position' && !change.dragging) {
+                  updateWorkflow.workflow.components = updateWorkflow.workflow.components.map(
+                    (component) =>
+                      component.id === change.id && change.position
+                        ? {
+                            ...component,
+                            position: change.position,
+                          }
+                        : component,
+                  );
+                  workflowMutated = true;
+                  shouldSaveHistory = true;
+                }
+              }
+              if (workflowMutated) {
+                setWorkflow(updateWorkflow);
+              }
+            }
+            return applyNodeChanges(changes, nds);
+          });
+          // Save history after node position changes (when drag ends)
+          if (shouldSaveHistory) {
+            setTimeout(() => saveHistory(), 0);
+          }
+        }}
+        onEdgesChange={(changes) => {
+          // Don't allow edge changes in preview mode
+          if (isPreviewMode) return;
+          setEdges((eds) => applyEdgeChanges(changes, eds));
+        }}
+        onConnect={(connection) => {
+          // Don't allow new connections in preview mode
+          if (isPreviewMode) return;
+
+          setSelectedComponent(null);
+          if (currentWorkflow) {
+            const updatedWorkflow = { ...currentWorkflow };
+            const sourceHandle = getEdgeDataFromId(connection.sourceHandle ?? '');
+            const targetHandle = getEdgeDataFromId(connection.targetHandle ?? '');
+            if (sourceHandle && targetHandle) {
+              const id = `xy-edge__${connection.source}-${connection.target}-${sourceHandle.field}-${targetHandle.field}`;
+              const newConnection: Edge = { ...connection, id };
+              const newEdge = {
+                id,
+                type: 'default',
+                animated: true,
+                source_component_id: connection.source,
+                target_component_id: connection.target,
+                source_handle: sourceHandle,
+                target_handle: targetHandle,
+              };
+              const workflowEdges = updatedWorkflow.workflow.edges
+                ? [...updatedWorkflow.workflow.edges, newEdge]
+                : [newEdge];
+              updatedWorkflow.workflow.edges = workflowEdges;
+              updatedWorkflow.workflow.status = 'draft';
+              setWorkflow(updatedWorkflow);
+              setEdges((eds) => addEdge(newConnection, eds));
+              // Save history after connecting edges
+              setTimeout(() => saveHistory(), 0);
+            }
+          }
+        }}
+        onNodeClick={(_, node) => {
+          setSelectedComponent(node);
+        }}
+        onPaneClick={() => {
+          setSelectedComponent(null);
+        }}
+        onNodesDelete={(deletedNodes) => {
+          // Don't allow node deletion in preview mode
+          if (isPreviewMode) return;
+
+          setSelectedComponent(null);
+          if (currentWorkflow) {
+            const deletedNodeIds = deletedNodes.map((node) => node.id);
+            const updatedWorkflow = { ...currentWorkflow };
+            updatedWorkflow.workflow.components = updatedWorkflow.workflow.components.filter(
+              (node) => !deletedNodes.some((deletedNode) => deletedNode.id === node.id),
+            );
+            // Also remove edges that reference deleted nodes
+            updatedWorkflow.workflow.edges = (updatedWorkflow.workflow.edges ?? []).filter(
+              (edge) =>
+                !deletedNodeIds.includes(edge.source_component_id) &&
+                !deletedNodeIds.includes(edge.target_component_id),
+            );
+            // Update React Flow edges state
+            setEdges((eds) =>
+              eds.filter(
+                (edge) =>
+                  !deletedNodeIds.includes(edge.source) && !deletedNodeIds.includes(edge.target),
+              ),
+            );
+            updatedWorkflow.workflow.status = 'draft';
+            setWorkflow(updatedWorkflow);
+            // Save history after deleting nodes
+            setTimeout(() => saveHistory(), 0);
+          }
+        }}
+        onEdgesDelete={(deletedEdges) => {
+          // Don't allow edge deletion in preview mode
+          if (isPreviewMode) return;
+
+          setSelectedComponent(null);
+          if (currentWorkflow) {
+            const updatedWorkflow = { ...currentWorkflow };
+            let updatedEdges = [...edges];
+            updatedEdges = updatedEdges.filter((edge) => {
+              const deletedEdge = deletedEdges.find((deletedEdge) => {
+                return edge.id === deletedEdge.id;
+              });
+              if (deletedEdge) {
+                updatedWorkflow.workflow.edges = updatedWorkflow.workflow.edges.filter((edge) => {
+                  const id = constructEdgeId(edge);
+                  return id !== deletedEdge.id;
+                });
+              }
+              return deletedEdge === undefined;
+            });
+            setEdges(() => updatedEdges);
+            updatedWorkflow.workflow.status = 'draft';
+            setWorkflow(updatedWorkflow);
+            // Save history after deleting edges
+            setTimeout(() => saveHistory(), 0);
+          }
+        }}
+        proOptions={{
+          hideAttribution: true,
+        }}
+        multiSelectionKeyCode={null}
+      >
+        <Background
+          color='#ccc'
+          bgColor='#F9FAFB'
+          variant={BackgroundVariant.Dots}
+          size={2.5}
+          gap={25}
+        />
+        <HStack
+          position='absolute'
+          bottom='20px'
+          left='50%'
+          transform='translateX(-50%)'
+          zIndex={5}
+          spacing={0}
+          bg='white'
+          borderRadius='8px'
+          borderStyle='solid'
+          borderColor='gray.400'
+          borderWidth='1px'
+          padding='4px'
+        >
+          <FeatureFlagWrapper flags={[FEATURE_FLAG_KEYS.promptWorkflow]}>
+            <Button
+              size='sm'
+              variant='outline'
+              fontWeight='bold'
+              fontSize='xs'
+              onClick={() => setIsAIBuilderOpen(!isAIBuilderOpen)}
+              borderRadius='4px'
+              color={'brand.400'}
+              boxShadow='0px 0px 8px -2px #00249C40'
+              paddingX='12px'
+              border='1px solid'
+              borderColor={isAIBuilderOpen ? 'brand.400' : 'gray.400'}
+              bg={isAIBuilderOpen ? '#00249C1A' : 'gray.100'}
+              isDisabled={isPreviewMode}
+            >
+              <Flex gap='8px' alignItems='center'>
+                <Image src={FiAiWorkflows} width='14px' height='14px' />
+                Build with AI
+              </Flex>
+            </Button>
+          </FeatureFlagWrapper>
+          {controls.map((control, index) => (
+            <ControlButton key={index} {...control} />
+          ))}
+        </HStack>
+      </ReactFlow>
+      {!isPreviewMode && <Configbar />}
+      <AIWorkflowBuilder isOpen={isAIBuilderOpen} onClose={() => setIsAIBuilderOpen(false)} />
+    </Flex>
+  );
+};
+
+const AgentWorkflowCanvas = (): JSX.Element => {
+  return (
+    <ReactFlowProvider>
+      <AgentWorkflowCanvasInner />
+    </ReactFlowProvider>
+  );
+};
+
+export default AgentWorkflowCanvas;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/AgentWorkflowHeader.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/AgentWorkflowHeader.tsx
new file mode 100644
index 000000000..b81abb2b6
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/AgentWorkflowHeader.tsx
@@ -0,0 +1,465 @@
+import {
+  Box,
+  Text,
+  Button,
+  IconButton,
+  TabList,
+  Flex,
+  Image,
+  useDisclosure,
+  Icon,
+  usePopoverContext,
+  FormControl,
+  FormLabel,
+  Textarea,
+} from '@chakra-ui/react';
+import { useState, useEffect } from 'react';
+import {
+  FiArrowLeft,
+  FiBarChart2,
+  FiBookOpen,
+  FiMonitor,
+  FiRefreshCcw,
+  FiClock,
+} from 'react-icons/fi';
+import { useNavigate, useParams } from 'react-router-dom';
+import TabsWrapper from '@/components/TabsWrapper';
+import TabItem from '@/components/TabItem';
+import useAgentStore from '@/enterprise/store/useAgentStore';
+import { useAutoSaveWorkflow } from '@/enterprise/hooks/useAutoSaveWorkflow';
+import { keyframes } from '@chakra-ui/react';
+import useAgentValidation from '@/enterprise/hooks/useAgentValidation';
+import WorkflowTabIcon from '@/assets/icons/workflow.svg';
+import ToolTip from '@/components/ToolTip';
+import { DOCS_URL } from '@/enterprise/app-constants';
+import BaseModal from '@/components/BaseModal';
+import useDataAppMutations from '@/enterprise/hooks/mutations/useDataAppMutations';
+import WorkflowPlayground from './Playground/WorkflowPlayground';
+import { INTERFACE_TYPE } from '../types';
+import AgentWorkflowReports from '../../Reports/AgentWorkflowReports';
+import { FeatureFlagWrapper } from '@/components/FeatureFlagWrapper/FeatureFlagWrapper';
+import HorizontalMenuActions from '@/components/HorizontalMenuActions/HorizontalMenuActions';
+import VersionsPanel from './Versions/VersionsPanel';
+
+const spin = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+const AutosaveStatus = ({
+  isSaving,
+  status,
+}: {
+  isSaving: boolean;
+  status: 'draft' | 'published';
+}) => {
+  return (
+    <Flex alignItems='center' gap='4px' data-testid='workflow-autosave-status' aria-live='polite'>
+      {isSaving ? (
+        <Box animation={`${spin} 1s linear infinite`}>
+          <FiRefreshCcw size='12px' />
+        </Box>
+      ) : (
+        <Box width='6px' height='6px' rounded='full' bgColor='success.400' />
+      )}
+      <Text size='xs' color='black100'>
+        {isSaving ? 'Saving...' : status === 'published' ? 'Live' : 'Saved as draft'}
+      </Text>
+    </Flex>
+  );
+};
+
+const VersionsMenuItem = ({ onClick }: { onClick: () => void }) => {
+  const { onClose } = usePopoverContext();
+  return (
+    <Flex
+      data-testid='workflow-versions-toggle'
+      align='center'
+      p='8px 12px'
+      gap='8px'
+      borderRadius='4px'
+      _hover={{ bg: 'gray.200' }}
+      cursor='pointer'
+      onClick={() => {
+        onClick();
+        onClose();
+      }}
+    >
+      <Icon as={FiClock} boxSize={4} color='gray.600' />
+      <Text
+        fontSize='14px'
+        lineHeight='20px'
+        fontWeight='400'
+        color='black.500'
+        letterSpacing='-0.01em'
+      >
+        Versions
+      </Text>
+    </Flex>
+  );
+};
+
+const AgentWorkflowHeader = ({
+  activeTab,
+  setActiveTab,
+}: {
+  activeTab: number;
+  setActiveTab: (tab: number) => void;
+}): JSX.Element => {
+  const { isOpen, onOpen, onClose, onToggle } = useDisclosure();
+  const {
+    isOpen: isReportsOpen,
+    onOpen: onReportsOpen,
+    onToggle: onReportsToggle,
+  } = useDisclosure();
+  const navigate = useNavigate();
+  const params = useParams();
+  const {
+    currentWorkflow,
+    setWorkflow,
+    triggerType,
+    interfaceConfig,
+    exportConfig,
+    setInterfaceConfig,
+    selectedComponent,
+    setSelectedComponent,
+  } = useAgentStore((state) => state);
+  const [isVersionsOpen, setVersionsOpen] = useState(false);
+  const [versionDescription, setVersionDescription] = useState('');
+  const agentId = params.id ?? '';
+  const { isPending } = useAutoSaveWorkflow(agentId, activeTab === 1);
+
+  // Close VersionsPanel when Configbar opens (component is selected)
+  // Component selection happens in AgentWorkflowCanvas, so we need to react to that state change
+  useEffect(() => {
+    if (selectedComponent) {
+      setVersionsOpen(false);
+    }
+  }, [selectedComponent]);
+  const { validateAgent } = useAgentValidation();
+  const { createDataApp, updateDataApp } = useDataAppMutations();
+  const dataAppId = interfaceConfig.dataAppId;
+  const version = currentWorkflow?.workflow?.version_number
+    ? `v${currentWorkflow.workflow.version_number}`
+    : null;
+
+  const handleSave = async (activeTab: number) => {
+    if (activeTab !== 1) {
+      setWorkflow({
+        workflow: {
+          ...currentWorkflow!.workflow,
+          configuration: {
+            ...currentWorkflow!.workflow.configuration,
+            interface: {
+              ...interfaceConfig,
+              export_config: exportConfig,
+            },
+          },
+          trigger_type: triggerType,
+          status: 'published',
+          version_description: versionDescription,
+        },
+      });
+      setVersionDescription('');
+      onClose();
+      return;
+    }
+
+    const renderingType = exportConfig.embeddable_assistant ? 'embed' : exportConfig.method;
+
+    const dataAppCreatePayload = {
+      data_app: {
+        name:
+          (triggerType === INTERFACE_TYPE.API_INTERFACE ||
+            triggerType === INTERFACE_TYPE.SLACK_APP) &&
+          currentWorkflow?.workflow?.name
+            ? currentWorkflow.workflow.name
+            : interfaceConfig.properties.card_title,
+        description: '',
+        meta_data: {
+          rendering_type: renderingType,
+          container_position: exportConfig.interface_position,
+          whitelist_urls: exportConfig.whitelist_urls,
+          workflow_name: currentWorkflow?.workflow.name,
+          embeddable_assistant: exportConfig.embeddable_assistant,
+          query_selector: exportConfig.query_selector,
+          version_description: versionDescription,
+        },
+        visual_components: [
+          {
+            ...interfaceConfig,
+            component_type: 'chat_bot',
+            configurable_id: agentId,
+            configurable_type: 'workflow',
+          },
+        ],
+        rendering_type: renderingType,
+      },
+    };
+
+    const response = dataAppId
+      ? await updateDataApp.mutateAsync({
+          id: dataAppId,
+          data: dataAppCreatePayload,
+        })
+      : await createDataApp.mutateAsync(dataAppCreatePayload);
+
+    if (!response?.data?.attributes) {
+      onClose();
+      return;
+    }
+
+    const updatedInterfaceConfig = {
+      ...interfaceConfig,
+      export_config: exportConfig,
+      dataAppId: response.data.id.toString(),
+      dataAppToken: response.data.attributes.data_app_token,
+    };
+
+    setInterfaceConfig(updatedInterfaceConfig);
+    setWorkflow({
+      workflow: {
+        ...currentWorkflow!.workflow,
+        configuration: {
+          ...currentWorkflow!.workflow.configuration,
+          interface: {
+            ...updatedInterfaceConfig,
+            component_type: 'chat_bot',
+            configurable_id: agentId,
+            configurable_type: 'workflow',
+          },
+        },
+        trigger_type: triggerType,
+        status: currentWorkflow?.workflow?.status ?? 'draft',
+        version_description: versionDescription,
+      },
+    });
+
+    setVersionDescription('');
+    onClose();
+  };
+
+  const onSaveChanges = () => {
+    if (!validateAgent()) {
+      return;
+    }
+    onOpen();
+  };
+
+  return (
+    <Box
+      padding='20px'
+      borderBottomWidth='1px'
+      borderBottomColor='gray.400'
+      display='flex'
+      justifyContent='space-between'
+      alignItems='center'
+    >
+      <Box display='flex' flexDirection='row' alignItems='center' gap='8px'>
+        <Box
+          onClick={() => {
+            setWorkflow(null);
+            navigate('/agents');
+          }}
+          cursor='pointer'
+          color='gray.600'
+        >
+          <FiArrowLeft size={24} />
+        </Box>
+        <Flex alignItems='center' gap='12px'>
+          <Text size='xl' fontWeight='bold'>
+            {currentWorkflow?.workflow?.name || 'Untitled Workflow'}
+          </Text>
+          {activeTab === 0 && (
+            <AutosaveStatus
+              isSaving={isPending}
+              status={currentWorkflow?.workflow.status ?? 'draft'}
+            />
+          )}
+          {version && (
+            <Box
+              data-testid='workflow-version-chip'
+              bg='gray.200'
+              color='black.300'
+              fontSize='12px'
+              lineHeight='18px'
+              fontWeight='600'
+              px='8px'
+              py='2px'
+              borderRadius='4px'
+              border='1px solid'
+              borderColor='gray.500'
+            >
+              {version}
+            </Box>
+          )}
+        </Flex>
+      </Box>
+      <TabsWrapper index={activeTab} onChange={(tabIndex) => setActiveTab(tabIndex)}>
+        <TabList gap='8px'>
+          <Box data-testid='tab-workflow'>
+            <TabItem text='Workflow' icon={<Image src={WorkflowTabIcon} />} />
+          </Box>
+          <Box data-testid='tab-interface'>
+            <TabItem text='Interface' icon={<FiMonitor />} />
+          </Box>
+        </TabList>
+      </TabsWrapper>
+      <Box display='flex' flexDirection='row' alignItems='center' gap='12px'>
+        <FeatureFlagWrapper flags={['workflowReports']}>
+          <IconButton
+            aria-label='Reports'
+            variant={'outline'}
+            minWidth={0}
+            width='auto'
+            padding='16px'
+            onClick={onReportsOpen}
+            icon={<FiBarChart2 size={16} color='black' />}
+          />
+        </FeatureFlagWrapper>
+        {activeTab === 0 && <WorkflowPlayground />}
+        <ToolTip
+          label={
+            activeTab === 0 && currentWorkflow?.workflow?.status === 'published'
+              ? 'Workflow already published'
+              : ''
+          }
+        >
+          <Button
+            variant={'solid'}
+            data-testid={activeTab === 0 ? 'workflow-publish-btn' : 'interface-save-btn'}
+            minWidth={0}
+            width='auto'
+            isDisabled={activeTab === 0 && currentWorkflow?.workflow?.status === 'published'}
+            onClick={onSaveChanges}
+            isLoading={isPending && currentWorkflow?.workflow?.status === 'published'}
+            loadingText={activeTab === 0 ? 'Publish Workflow' : 'Save Interface'}
+          >
+            {activeTab === 0 ? 'Publish Workflow' : 'Save Interface'}
+          </Button>
+        </ToolTip>
+        <Box data-testid='workflow-editor-overflow-menu'>
+          <HorizontalMenuActions
+            variant='light'
+            padding='20px'
+            contentWidth='152px'
+            ml={0}
+            placement='bottom-end'
+          >
+            <>
+              <VersionsMenuItem
+                onClick={() => {
+                  setSelectedComponent(null);
+                  setVersionsOpen(true);
+                  onClose();
+                }}
+              />
+              <a href={DOCS_URL} target='_blank' rel='noreferrer'>
+                <Flex
+                  align='center'
+                  p='8px 12px'
+                  gap='8px'
+                  borderRadius='4px'
+                  _hover={{ bg: 'gray.200' }}
+                  cursor='pointer'
+                  onClick={() => {
+                    onClose();
+                  }}
+                >
+                  <Icon as={FiBookOpen} boxSize={4} color='gray.600' />
+                  <Text
+                    fontSize='14px'
+                    lineHeight='20px'
+                    fontWeight='400'
+                    color='black.500'
+                    letterSpacing='-0.01em'
+                  >
+                    Documentation
+                  </Text>
+                </Flex>
+              </a>
+            </>
+          </HorizontalMenuActions>
+        </Box>
+      </Box>
+      <BaseModal
+        title={
+          activeTab === 0 ? (
+            <Flex align='center' gap='4px'>
+              <Text as='span'>Publish workflow</Text>
+              {version && (
+                <Text as='span' fontSize='12px' fontWeight='400' color='black.100'>
+                  • {version}
+                </Text>
+              )}
+            </Flex>
+          ) : (
+            'Save interface'
+          )
+        }
+        description={
+          activeTab === 0
+            ? 'Are you sure you want to publish this workflow?'
+            : 'Are you sure you want to save this interface?'
+        }
+        openModal={isOpen}
+        setModalOpen={onToggle}
+        footer={
+          <Flex gap='12px' justifyContent='end'>
+            <Button
+              variant='ghost'
+              w='fit-content'
+              onClick={onClose}
+              isDisabled={updateDataApp.isPending || createDataApp.isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              type='submit'
+              data-testid={activeTab === 0 ? 'workflow-publish-confirm' : 'interface-save-confirm'}
+              paddingX={4}
+              minWidth='0'
+              width='auto'
+              isDisabled={updateDataApp.isPending || createDataApp.isPending}
+              isLoading={updateDataApp.isPending || createDataApp.isPending}
+              onClick={() => handleSave(activeTab)}
+            >
+              Confirm
+            </Button>
+          </Flex>
+        }
+      >
+        {activeTab === 0 ? (
+          <FormControl>
+            <FormLabel fontSize='14px' fontWeight='600' lineHeight='20px' color='black.500'>
+              Version Description{' '}
+              <Box as='span' color='gray.600' fontWeight='400' fontSize='12px' lineHeight='18px'>
+                (optional)
+              </Box>
+            </FormLabel>
+            <Textarea
+              data-testid='workflow-publish-version-description'
+              placeholder='Enter a description for this workflow version'
+              value={versionDescription}
+              onChange={(e) => setVersionDescription(e.target.value)}
+              fontSize='14px'
+              resize='vertical'
+              borderColor='gray.400'
+              focusBorderColor='gray.600'
+            />
+          </FormControl>
+        ) : (
+          <></>
+        )}
+      </BaseModal>
+      <VersionsPanel isOpen={isVersionsOpen} onClose={() => setVersionsOpen(false)} />
+      <AgentWorkflowReports
+        openModal={isReportsOpen}
+        onToggle={onReportsToggle}
+        workflowId={agentId}
+      />
+    </Box>
+  );
+};
+
+export default AgentWorkflowHeader;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/AsyncDropdown.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/AsyncDropdown.tsx
new file mode 100644
index 000000000..8ee64e035
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/AsyncDropdown.tsx
@@ -0,0 +1,265 @@
+import ToolTip from '@/components/ToolTip';
+import { getUserConnectors } from '@/services/connectors';
+import { Text, Flex, Box, Image } from '@chakra-ui/react';
+import { WidgetProps } from '@rjsf/utils';
+import { FiCheck, FiInfo } from 'react-icons/fi';
+import { components, MenuListProps, OptionProps, GroupBase, Select } from 'chakra-react-select';
+import { useQuery } from '@tanstack/react-query';
+import { getEmbeddingConfiguration } from '@/enterprise/services/embeddingConfiguration';
+import useAgentStore from '@/enterprise/store/useAgentStore';
+import { WorkflowPayload } from '@/enterprise/services/types';
+import { FlowComponent } from '../../../types';
+import { BaseWidgetOption } from './types';
+import { getKnowledgeBases } from '@/enterprise/services/knowledge-base';
+
+type DropdownOptions = BaseWidgetOption & {
+  data?: keyof typeof SERVICES;
+  label_key?: string;
+  value_key?: string;
+  enumOptions?: { label: string; value: string }[];
+  filters: {
+    type: string;
+    category: string;
+    page: number;
+    per_page: string;
+    sub_category: string;
+  };
+};
+
+type AsyncDropdownOptions = {
+  label: string;
+  value: string;
+  icon?: string;
+};
+
+const SERVICES: Record<
+  string,
+  (
+    filters: DropdownOptions['filters'],
+    currentWorkflow: WorkflowPayload | null,
+    selectedComponent: FlowComponent | null,
+  ) => Promise<any>
+> = {
+  data_source: (filters) =>
+    getUserConnectors(
+      filters.type,
+      filters.category,
+      filters.page,
+      filters.per_page,
+      filters.sub_category,
+    ),
+  embeddings: () => getEmbeddingConfiguration(),
+  knowledgeBases: () => getKnowledgeBases(),
+  componentInputs: (_, currentWorkflow, selectedComponent) =>
+    Promise.resolve({
+      data:
+        currentWorkflow && selectedComponent
+          ? currentWorkflow.workflow.edges.filter(
+              (edge) => edge.target_component_id === selectedComponent.id,
+            )
+          : [],
+    }),
+};
+
+const buildDropdownOptions = (data: any[], labelKey?: string, valueKey?: string) => {
+  if (!Array.isArray(data) || !labelKey || !valueKey) {
+    return [];
+  }
+  if (labelKey && valueKey) {
+    return data.map((opt) => {
+      const label =
+        labelKey.split('.').reduce((acc, key) => acc?.[key], opt.attributes) ??
+        labelKey.split('.').reduce((acc, key) => acc?.[key], opt) ??
+        '';
+      const value =
+        valueKey.split('.').reduce((acc, key) => acc?.[key], opt) ??
+        valueKey.split('.').reduce((acc, key) => acc?.[key], opt.attributes) ??
+        '';
+      return {
+        label: label,
+        value: value,
+        icon: opt?.attributes?.icon,
+      };
+    });
+  }
+  return [];
+};
+
+// Custom Option Component
+const CustomOption = <
+  IsMulti extends boolean = false,
+  Group extends GroupBase<AsyncDropdownOptions> = GroupBase<AsyncDropdownOptions>,
+>(
+  props: OptionProps<AsyncDropdownOptions, IsMulti, Group>,
+) => {
+  const { data, isFocused, isSelected } = props;
+
+  return (
+    <components.Option {...props}>
+      <Flex
+        alignItems='center'
+        justifyContent='space-between'
+        px='12px'
+        py='8px'
+        bg='gray.100'
+        borderRadius='4px'
+        color='black.500'
+        bgColor={isSelected || isFocused ? 'gray.300' : 'gray.100'}
+      >
+        <Flex gap='8px' alignItems='center'>
+          {data.icon && (
+            <Flex
+              justifyContent='center'
+              alignItems='center'
+              border='1px solid'
+              borderColor='gray.400'
+              borderRadius='3px'
+              height='20px'
+              width='20px'
+              bgColor='gray.100'
+              padding='2px'
+            >
+              <Image src={data.icon} />
+            </Flex>
+          )}
+          {data.label}
+        </Flex>
+        {isSelected && (
+          <Box color='brand.400'>
+            <FiCheck />
+          </Box>
+        )}
+      </Flex>
+    </components.Option>
+  );
+};
+
+const CustomMenuList = <
+  OptionType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<OptionType> = GroupBase<OptionType>,
+>(
+  props: MenuListProps<OptionType, IsMulti, Group>,
+) => {
+  const hasOptions = props.children && Array.isArray(props.children) && props.children.length > 0;
+
+  return (
+    <components.MenuList {...props}>
+      <Box
+        border='1px solid'
+        borderColor='gray.400'
+        borderRadius='6px'
+        bgColor='gray.100'
+        zIndex={99999}
+      >
+        <Box padding='4px'>
+          {hasOptions ? (
+            props.children
+          ) : (
+            <Box px={3} py={2}>
+              <Text fontSize='sm' color='gray.400'>
+                No results found
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </components.MenuList>
+  );
+};
+
+const AsyncDropdown = ({
+  id,
+  value,
+  required,
+  disabled,
+  onChange,
+  label,
+  options,
+  formContext,
+}: WidgetProps) => {
+  const { data, watch, label_key, value_key, enumOptions, filters, tooltip, input_placeholder } =
+    options as DropdownOptions;
+  const currentWorkflow = useAgentStore((state) => state.currentWorkflow);
+  const selectedComponent = useAgentStore((state) => state.selectedComponent);
+  const watchedValue = watch ? formContext.configuration?.[watch] : undefined;
+  const service = SERVICES[data ?? 'data_source'];
+  const { data: dropdownData, isLoading } = useQuery({
+    queryKey: ['dropdown-widget', options?.data, filters ? { ...filters } : undefined],
+    queryFn: () => {
+      if (!service) {
+        console.warn(`No service defined for dropdown data source: ${data}`);
+        return null;
+      }
+      return service(filters, currentWorkflow, selectedComponent);
+    },
+    enabled: options?.data !== undefined && (!watch || watchedValue !== undefined),
+  });
+
+  const dropdownOptions =
+    enumOptions && !options?.data
+      ? enumOptions
+      : buildDropdownOptions(dropdownData?.data ?? [], label_key, value_key);
+
+  const defaultValue = dropdownOptions?.find((opt) => opt.value === value);
+
+  return (
+    <Flex
+      gap='10px'
+      flexDir='column'
+      data-testid={id ? `workflow-config-dropdown-${id}` : undefined}
+    >
+      <Flex gap='8px' alignItems={'center'}>
+        <Flex gap='4px'>
+          <Text size={'sm'} fontWeight={600}>
+            {label}
+          </Text>
+          {required && <Box color='error.400'>*</Box>}
+        </Flex>
+        {tooltip && (
+          <ToolTip label={tooltip as string}>
+            <Box color='gray.600'>
+              <FiInfo width='14px' height='14px' />
+            </Box>
+          </ToolTip>
+        )}
+      </Flex>
+      <Box
+        data-testid={id ? `workflow-config-async-combobox-${id}` : 'workflow-config-async-combobox'}
+      >
+        <Select<AsyncDropdownOptions>
+          id={id}
+          key={`async-dropdown-${filters?.type}-${filters?.category}-${filters?.page}-${filters?.per_page}-${filters?.sub_category}`}
+          defaultValue={dropdownOptions?.[0]?.value}
+          isLoading={isLoading}
+          value={defaultValue}
+          isRequired={required}
+          isDisabled={disabled}
+          options={dropdownOptions}
+          placeholder={input_placeholder as string}
+          onChange={(option) => onChange(option?.value)}
+          components={{
+            Option: CustomOption,
+            MenuList: CustomMenuList,
+          }}
+          styles={{
+            option: (base) => ({
+              ...base,
+              padding: 0,
+              borderRadius: '6px',
+              backgroundColor: 'transparent',
+            }),
+            menuList: (base) => ({
+              ...base,
+              zIndex: 999999999999,
+              maxHeight: '50vh',
+              overflowY: 'auto',
+            }),
+          }}
+        />
+      </Box>
+    </Flex>
+  );
+};
+
+export default AsyncDropdown;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/TextInput.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/TextInput.tsx
new file mode 100644
index 000000000..cac803e08
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/TextInput.tsx
@@ -0,0 +1,126 @@
+import ToolTip from '@/components/ToolTip';
+import {
+  Text,
+  Flex,
+  Box,
+  Input,
+  Textarea,
+  useDisclosure,
+  InputGroup,
+  InputRightElement,
+  IconButton,
+} from '@chakra-ui/react';
+import { WidgetProps } from '@rjsf/utils';
+import { FiInfo } from 'react-icons/fi';
+import { FiEye, FiEyeOff } from 'react-icons/fi';
+
+function getByPath(obj: any, path?: string) {
+  if (!obj || !path) return undefined;
+  return path.split('.').reduce((acc, key) => (acc == null ? acc : acc[key]), obj);
+}
+
+const TextInput = ({
+  id,
+  value,
+  defaultValue,
+  required,
+  disabled,
+  onChange,
+  label,
+  options,
+  formContext,
+}: WidgetProps) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  const onClickReveal = () => {
+    onToggle();
+  };
+
+  const watchPath = (options as any)?.watch as string | undefined;
+  const expected = (options as any)?.watchValue as any;
+  const current = getByPath(formContext.configuration, watchPath);
+
+  if (watchPath != null) {
+    if (Array.isArray(expected) && !expected.includes(current)) return null;
+    if (!Array.isArray(expected) && current !== expected) return null;
+  }
+
+  return (
+    <Flex gap='10px' flexDir='column'>
+      <Flex gap='8px' alignItems={'center'}>
+        <Flex gap='4px'>
+          {label && (
+            <Text size={'sm'} fontWeight={600}>
+              {label}
+            </Text>
+          )}
+          {required && <Box color='error.400'>*</Box>}
+        </Flex>
+        {options?.tooltip && (
+          <ToolTip label={options.tooltip as string}>
+            <Box color='gray.600'>
+              <FiInfo width='14px' height='14px' />
+            </Box>
+          </ToolTip>
+        )}
+      </Flex>
+      {options?.isTextarea ? (
+        <Box>
+          <Textarea
+            id={id}
+            data-testid={id ? `workflow-config-field-${id}` : 'workflow-config-textarea'}
+            value={value ?? defaultValue}
+            onChange={(e) => {
+              onChange(e.target.value);
+            }}
+            isDisabled={disabled}
+            isRequired={required}
+            placeholder={options?.input_placeholder as string}
+            border={'1px solid'}
+            borderColor={'gray.400'}
+            maxLength={options?.maxLength ? Number(options.maxLength) : undefined}
+          />
+          {options?.maxLength && (
+            <Text fontSize='sm' color='gray.600' textAlign='right'>
+              {(value ?? defaultValue ?? '').length}/{options?.maxLength}
+            </Text>
+          )}
+        </Box>
+      ) : (
+        <Box>
+          <InputGroup>
+            <Input
+              id={id}
+              data-testid={id ? `workflow-config-field-${id}` : 'workflow-config-input'}
+              value={value ?? defaultValue}
+              onChange={(e) => onChange(e.target.value)}
+              isDisabled={disabled}
+              isRequired={required}
+              type={options?.protected && !isOpen ? 'password' : 'text'}
+              placeholder={options?.input_placeholder as string}
+              maxLength={options?.maxLength ? Number(options.maxLength) : undefined}
+            />
+            {options?.protected && (
+              <InputRightElement>
+                <IconButton
+                  variant='text'
+                  color='gray.600'
+                  aria-label={isOpen ? 'Mask password' : 'Reveal password'}
+                  icon={isOpen ? <FiEyeOff /> : <FiEye />}
+                  onClick={onClickReveal}
+                />
+              </InputRightElement>
+            )}
+          </InputGroup>
+          {options?.maxLength && (
+            <Text fontSize='sm' color='gray.600' textAlign='right'>
+              {(value ?? defaultValue ?? '').length}/{Number(options.maxLength)}
+            </Text>
+          )}
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default TextInput;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelector/AddToolButton.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelector/AddToolButton.tsx
new file mode 100644
index 000000000..900f4ad78
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelector/AddToolButton.tsx
@@ -0,0 +1,69 @@
+import { Flex, Icon, Text } from '@chakra-ui/react';
+import { FiPlus, FiSettings } from 'react-icons/fi';
+
+interface AddToolButtonProps {
+  onClick: () => void;
+}
+
+const AddToolButton = ({ onClick }: AddToolButtonProps) => (
+  <Flex
+    data-testid='workflow-tool-add-button'
+    padding='8px'
+    border='1px solid'
+    borderColor='gray.400'
+    borderRadius='8px'
+    backgroundColor='gray.200'
+    cursor='pointer'
+    alignItems='center'
+    justifyContent='space-between'
+    gap='12px'
+    width='320px'
+    height='48px'
+    _hover={{ backgroundColor: 'gray.300' }}
+    onClick={onClick}
+  >
+    <Flex alignItems='center' gap='8px' width='105px' height='32px' flex='none'>
+      <Flex
+        width='32px'
+        height='32px'
+        backgroundColor='white'
+        border='1px solid'
+        borderColor='gray.400'
+        borderRadius='6px'
+        alignItems='center'
+        justifyContent='center'
+        position='relative'
+        flex='none'
+      >
+        <Icon as={FiPlus} color='black.300' boxSize='16px' />
+      </Flex>
+      <Text
+        fontSize='14px'
+        fontWeight={600}
+        color='black.500'
+        lineHeight='20px'
+        letterSpacing='-0.01em'
+        width='65px'
+        height='20px'
+        flex='none'
+      >
+        Add a tool
+      </Text>
+    </Flex>
+    <Flex
+      alignItems='center'
+      justifyContent='center'
+      padding='0px 8px'
+      gap='6px'
+      width='24px'
+      height='24px'
+      opacity={0.5}
+      borderRadius='6px'
+      flex='none'
+    >
+      <Icon as={FiSettings} color='gray.600' boxSize='16px' />
+    </Flex>
+  </Flex>
+);
+
+export default AddToolButton;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelector/__tests__/AddToolButton.test.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelector/__tests__/AddToolButton.test.tsx
new file mode 100644
index 000000000..034bf8e70
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelector/__tests__/AddToolButton.test.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { expect } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import AddToolButton from '../AddToolButton';
+
+// Mock react-icons
+jest.mock('react-icons/fi', () => ({
+  FiPlus: () => <span data-testid='fi-plus'>FiPlus</span>,
+  FiSettings: () => <span data-testid='fi-settings'>FiSettings</span>,
+}));
+
+const renderWithChakra = (ui: React.ReactElement) => render(<ChakraProvider>{ui}</ChakraProvider>);
+
+describe('AddToolButton', () => {
+  it('should render button with correct text', () => {
+    const onClick = jest.fn();
+    renderWithChakra(<AddToolButton onClick={onClick} />);
+
+    expect(screen.getByText('Add a tool')).toBeInTheDocument();
+    expect(screen.getByTestId('workflow-tool-add-button')).toBeInTheDocument();
+  });
+
+  it('should call onClick when clicked', () => {
+    const onClick = jest.fn();
+    renderWithChakra(<AddToolButton onClick={onClick} />);
+
+    const button =
+      screen.getByText('Add a tool').closest('div[role="button"]') ||
+      screen.getByText('Add a tool');
+    fireEvent.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render FiPlus icon', () => {
+    const onClick = jest.fn();
+    renderWithChakra(<AddToolButton onClick={onClick} />);
+
+    expect(screen.getByTestId('fi-plus')).toBeInTheDocument();
+  });
+
+  it('should render FiSettings icon', () => {
+    const onClick = jest.fn();
+    renderWithChakra(<AddToolButton onClick={onClick} />);
+
+    expect(screen.getByTestId('fi-settings')).toBeInTheDocument();
+  });
+
+  it('should render with correct structure', () => {
+    const onClick = jest.fn();
+    renderWithChakra(<AddToolButton onClick={onClick} />);
+
+    // Check that all elements are present
+    expect(screen.getByText('Add a tool')).toBeInTheDocument();
+    expect(screen.getByTestId('fi-plus')).toBeInTheDocument();
+    expect(screen.getByTestId('fi-settings')).toBeInTheDocument();
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelectorWidget.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelectorWidget.tsx
new file mode 100644
index 000000000..bdd063afa
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/ToolSelectorWidget.tsx
@@ -0,0 +1,292 @@
+import {
+  Box,
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Switch,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { WidgetProps } from '@rjsf/utils';
+import { useEffect, useState } from 'react';
+import { FiInfo } from 'react-icons/fi';
+import { Select } from 'chakra-react-select';
+import useToolQueries from '@/enterprise/hooks/queries/useToolQueries';
+import { ToolItem } from '@/enterprise/views/Tools/ToolsList/types';
+import { ConnectedToolView, AddToolButton, ToolIcon } from './ToolSelector';
+import BaseModal from '@/components/BaseModal/BaseModal';
+import ToolTip from '@/components/ToolTip/ToolTip';
+import Loader from '@/components/Loader';
+
+const MAX_TOOLS_PER_PAGE = 999;
+
+export interface ToolSelectorFormContext {
+  currentTools?: string[];
+  configuration?: {
+    tool_id?: string;
+    tools?: string[];
+  };
+  onToolSelectorChange?: (toolId: string | undefined, tools: string[]) => void;
+}
+
+type ToolSelectorWidgetProps = Omit<WidgetProps, 'formContext'> & {
+  formContext?: ToolSelectorFormContext;
+};
+
+const ToolSelectorWidget = ({ value, formContext }: ToolSelectorWidgetProps) => {
+  const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose } = useDisclosure();
+
+  const [selectedTool, setSelectedTool] = useState<ToolItem | null>(null);
+  const [actionStates, setActionStates] = useState<Record<string, boolean>>({});
+
+  const toolId = typeof value === 'string' ? value : '';
+  const tools = formContext?.currentTools ?? [];
+
+  const { useGetTools, useGetMcpToolsList } = useToolQueries();
+  const { data: toolsResponse, isLoading: isLoadingTools } = useGetTools(1, MAX_TOOLS_PER_PAGE);
+  const allTools: ToolItem[] = toolsResponse?.data ?? [];
+
+  const shouldFetchActions = isModalOpen && !!selectedTool?.id;
+  const { data: mcpToolsResponse, isLoading: isLoadingActions } = useGetMcpToolsList(
+    selectedTool?.id ?? null,
+    shouldFetchActions,
+  );
+
+  const toolActions = mcpToolsResponse?.tools ?? [];
+
+  const currentTool = (toolId ? allTools.find((t) => t.id === toolId) : undefined) ?? null;
+  const selectedActionsCount = toolActions.filter((a) => actionStates[a.name] === true).length;
+
+  const isActionChecked = (actionName: string): boolean => actionStates[actionName] === true;
+
+  const allSelected = selectedActionsCount === toolActions.length && toolActions.length > 0;
+  const someSelected = selectedActionsCount > 0 && selectedActionsCount < toolActions.length;
+
+  const handleSelectAll = () => {
+    setActionStates(Object.fromEntries(toolActions.map((a) => [a.name, true])));
+  };
+
+  const handleDeselectAll = () => {
+    setActionStates({});
+  };
+
+  useEffect(() => {
+    if (toolActions.length > 0 && Object.keys(actionStates).length === 0) {
+      setActionStates(Object.fromEntries(toolActions.map((a) => [a.name, true])));
+    }
+  }, [mcpToolsResponse]);
+
+  const handleSelectTool = (tool: ToolItem) => {
+    setSelectedTool(tool);
+    setActionStates({});
+  };
+
+  const handleActionToggle = (actionName: string) => {
+    setActionStates((prev) => ({
+      ...prev,
+      [actionName]: !prev[actionName],
+    }));
+  };
+
+  const handleCloseModal = () => {
+    setActionStates({});
+    setSelectedTool(null);
+    onModalClose();
+  };
+
+  const handleConfirm = () => {
+    if (!selectedTool) return;
+    const selectedActions = toolActions.filter((a) => isActionChecked(a.name)).map((a) => a.name);
+    formContext?.onToolSelectorChange?.(selectedTool.id, selectedActions);
+    handleCloseModal();
+  };
+
+  const handleEditTool = () => {
+    if (!currentTool) return;
+    setSelectedTool(currentTool);
+    const existingStates = Object.fromEntries(tools.map((actionId) => [actionId, true]));
+    setActionStates(existingStates);
+    onModalOpen();
+  };
+
+  const toolOptions = allTools.map((t) => ({
+    value: t.id,
+    label: t.attributes.name,
+    tool: t,
+  }));
+
+  const selectedToolOption = selectedTool
+    ? toolOptions.find((o) => o.value === selectedTool.id) ?? null
+    : null;
+
+  return (
+    <Box>
+      {toolId ? (
+        <ConnectedToolView currentTool={currentTool} tools={tools} onEditTool={handleEditTool} />
+      ) : (
+        <AddToolButton onClick={onModalOpen} />
+      )}
+
+      <BaseModal
+        openModal={isModalOpen}
+        setModalOpen={(open) => {
+          if (!open) handleCloseModal();
+        }}
+        title={'Add Tool'}
+        modalBodyWidth='540px'
+        maxHeight='600px'
+        bodyPaddingX='24px'
+        bodyPaddingY='0px'
+        bodyPaddingTop='8px'
+        bodyPaddingBottom='8px'
+        footer={
+          <Flex justifyContent='flex-end' gap='12px' width='100%'>
+            <Button
+              data-testid='workflow-tool-modal-cancel'
+              variant='ghost'
+              onClick={handleCloseModal}
+              backgroundColor='gray.300'
+              border='1px solid'
+              borderColor='gray.400'
+              fontWeight={700}
+              fontSize='14px'
+              height='40px'
+              padding='0px 16px'
+            >
+              Cancel
+            </Button>
+            <Button
+              data-testid='workflow-tool-modal-connect'
+              colorScheme='brand'
+              onClick={handleConfirm}
+              isDisabled={!selectedTool || isLoadingActions || selectedActionsCount === 0}
+              fontWeight={700}
+              fontSize='14px'
+              height='40px'
+              padding='0px 16px'
+            >
+              Connect
+            </Button>
+          </Flex>
+        }
+        addFooterStroke={true}
+        showCloseButton={true}
+      >
+        <Flex direction='column' gap='16px' paddingTop='8px'>
+          {/* Section 1: Connection dropdown */}
+          <FormControl>
+            <FormLabel fontSize='14px' fontWeight={600} mb='8px'>
+              Select Connection
+            </FormLabel>
+            <Box data-testid='workflow-tool-connection-select'>
+              <Select
+                isSearchable
+                placeholder='Select a tool connection'
+                isLoading={isLoadingTools}
+                options={toolOptions}
+                value={selectedToolOption}
+                onChange={(option) => {
+                  if (option) handleSelectTool(option.tool);
+                }}
+                formatOptionLabel={(option) => (
+                  <Flex
+                    data-testid={`workflow-tool-connection-option-${option.value}`}
+                    alignItems='center'
+                    gap='8px'
+                  >
+                    <ToolIcon icon={option.tool.attributes.icon} size='24px' iconSize='14px' />
+                    <Text>{option.label}</Text>
+                  </Flex>
+                )}
+                chakraStyles={{
+                  container: (provided) => ({ ...provided, width: '100%' }),
+                }}
+              />
+            </Box>
+          </FormControl>
+
+          {/* Section 3: Tools list (only when a tool is selected) */}
+          {selectedTool && (
+            <FormControl>
+              <Flex alignItems='center' justifyContent='space-between' mb='8px'>
+                <Flex alignItems='center' gap='4px'>
+                  <FormLabel fontSize='sm' fontWeight={600} m='0'>
+                    Tools
+                  </FormLabel>
+                  <ToolTip label='Select which actions this tool connection can perform'>
+                    <FiInfo size='14px' color='gray' />
+                  </ToolTip>
+                </Flex>
+                <Flex gap='8px'>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={handleSelectAll}
+                    fontSize='12px'
+                    fontWeight={500}
+                    height='24px'
+                    padding='0px 8px'
+                    isDisabled={allSelected}
+                  >
+                    Select All
+                  </Button>
+                  <Button
+                    variant='ghost'
+                    size='sm'
+                    onClick={handleDeselectAll}
+                    fontSize='12px'
+                    fontWeight={500}
+                    height='24px'
+                    padding='0px 8px'
+                    isDisabled={!someSelected && !allSelected}
+                  >
+                    Deselect All
+                  </Button>
+                </Flex>
+              </Flex>
+              {isLoadingActions ? (
+                <Loader />
+              ) : (
+                <Flex
+                  direction='column'
+                  border='1px solid'
+                  borderColor='gray.400'
+                  borderRadius='8px'
+                >
+                  {toolActions.map((action) => (
+                    <Flex
+                      key={action.name}
+                      alignItems='center'
+                      justifyContent='space-between'
+                      borderBottom='1px solid'
+                      borderColor='gray.400'
+                      paddingX='20px'
+                      paddingY='12px'
+                    >
+                      <Box flex='1' mr='12px'>
+                        <Text fontSize='sm' fontWeight={600} textTransform='capitalize'>
+                          {action.name.replace(/_/g, ' ')}
+                        </Text>
+                        <Text fontSize='xs' color='black.100' letterSpacing='-1%'>
+                          {action.description}
+                        </Text>
+                      </Box>
+                      <Switch
+                        isChecked={isActionChecked(action.name)}
+                        onChange={() => handleActionToggle(action.name)}
+                        colorScheme='brand'
+                      />
+                    </Flex>
+                  ))}
+                </Flex>
+              )}
+            </FormControl>
+          )}
+        </Flex>
+      </BaseModal>
+    </Box>
+  );
+};
+
+export default ToolSelectorWidget;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/__tests__/AsyncDropdown.test.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/__tests__/AsyncDropdown.test.tsx
new file mode 100644
index 000000000..8ebd7e051
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/__tests__/AsyncDropdown.test.tsx
@@ -0,0 +1,847 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { expect, describe, it, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import AsyncDropdown from '../AsyncDropdown';
+import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WidgetProps } from '@rjsf/utils';
+import * as connectorsService from '@/services/connectors';
+import * as embeddingConfigurationService from '@/enterprise/services/embeddingConfiguration';
+import { setupMatchMediaMock } from '../../../../../../../../__mocks__/windowMocks';
+
+setupMatchMediaMock();
+
+jest.mock('@/enterprise/store/useAgentStore', () => ({
+  __esModule: true,
+  default: (selector: (state: Record<string, unknown>) => unknown) =>
+    selector({
+      currentWorkflow: {
+        workflow: {
+          edges: [
+            {
+              source_component_id: 'comp-1',
+              target_component_id: 'comp-2',
+              source_handle: { field: 'output' },
+              target_handle: { field: 'input' },
+            },
+          ],
+        },
+      },
+      selectedComponent: {
+        id: 'comp-2',
+        data: { component: 'llm' },
+      },
+    }),
+}));
+
+// Mock services - inline to avoid hoisting issues with imports
+jest.mock('@/services/connectors', () => ({
+  getUserConnectors: jest.fn().mockResolvedValue({
+    data: [
+      { id: '1', attributes: { name: 'PostgreSQL', icon: 'https://example.com/pg.svg' } },
+      { id: '2', attributes: { name: 'MySQL', icon: 'https://example.com/mysql.svg' } },
+    ],
+  }),
+}));
+
+jest.mock('@/enterprise/services/embeddingConfiguration', () => ({
+  getEmbeddingConfiguration: jest.fn().mockResolvedValue({
+    data: [{ id: 'emb-1', attributes: { name: 'OpenAI Embeddings' } }],
+  }),
+}));
+
+// Mock ToolTip - inline to avoid hoisting issues with imports
+jest.mock('@/components/ToolTip', () => ({
+  __esModule: true,
+  default: ({ children, label }: { children: React.ReactNode; label?: string }) => (
+    <div data-testid='tooltip' data-label={label}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock react-icons
+jest.mock('react-icons/fi');
+
+// Track custom component props for testing
+type CustomComponentProps = {
+  Option?: React.ComponentType<unknown>;
+  MenuList?: React.ComponentType<unknown>;
+};
+let capturedComponents: CustomComponentProps = {};
+
+// Track styles for testing
+type StylesConfig = {
+  option?: (base: object) => object;
+  menuList?: (base: object) => object;
+};
+let capturedStyles: StylesConfig = {};
+
+// Mock chakra-react-select - capture custom components and styles for testing
+jest.mock('chakra-react-select', () => ({
+  Select: ({
+    id,
+    options,
+    value,
+    onChange,
+    placeholder,
+    isDisabled,
+    isLoading,
+    components: customComponents,
+    styles,
+  }: {
+    id?: string;
+    options: { label: string; value: string; icon?: string }[];
+    value: { label: string; value: string } | undefined;
+    onChange: (option: { value: string } | null) => void;
+    placeholder: string;
+    isDisabled: boolean;
+    isLoading: boolean;
+    components?: CustomComponentProps;
+    styles?: StylesConfig;
+  }) => {
+    // Capture custom components and styles for testing
+    capturedComponents = customComponents || {};
+    capturedStyles = styles || {};
+
+    return (
+      <div data-testid='select-container' id={id}>
+        {isLoading && <span data-testid='loading'>Loading...</span>}
+        <select
+          data-testid='select'
+          value={value?.value || ''}
+          onChange={(e) => onChange(e.target.value ? { value: e.target.value } : null)}
+          disabled={isDisabled}
+        >
+          <option value=''>{placeholder}</option>
+          {options?.map((opt) => (
+            <option key={opt.value} value={opt.value} data-icon={opt.icon}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  },
+  components: {
+    Option: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid='base-option'>{children}</div>
+    ),
+    MenuList: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid='base-menu-list'>{children}</div>
+    ),
+  },
+}));
+
+describe('AsyncDropdown', () => {
+  let queryClient: QueryClient;
+
+  const mockOnChange = jest.fn();
+  const mockOnBlur = jest.fn();
+  const mockOnFocus = jest.fn();
+
+  const defaultProps: Partial<WidgetProps> = {
+    id: 'test-dropdown',
+    value: '',
+    required: false,
+    disabled: false,
+    onChange: mockOnChange,
+    label: 'Test Dropdown',
+    options: {
+      enumOptions: [
+        { label: 'Option 1', value: 'opt1' },
+        { label: 'Option 2', value: 'opt2' },
+      ],
+    },
+    formContext: { configuration: {} },
+    schema: {},
+    uiSchema: {},
+    name: 'test-dropdown',
+    registry: {} as WidgetProps['registry'],
+    readonly: false,
+    autofocus: false,
+    placeholder: '',
+    rawErrors: [],
+    onBlur: mockOnBlur,
+    onFocus: mockOnFocus,
+    hideError: false,
+    hideLabel: false,
+  };
+
+  const renderComponent = (props: Partial<WidgetProps> = {}) => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    return render(
+      <ChakraProvider>
+        <QueryClientProvider client={queryClient}>
+          <AsyncDropdown {...(defaultProps as WidgetProps)} {...props} />
+        </QueryClientProvider>
+      </ChakraProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    capturedComponents = {};
+    capturedStyles = {};
+  });
+
+  describe('Rendering', () => {
+    it('should render the dropdown', () => {
+      renderComponent();
+      expect(screen.getByText('Test Dropdown')).toBeInTheDocument();
+    });
+
+    it('should render label', () => {
+      renderComponent({ label: 'Custom Label' });
+      expect(screen.getByText('Custom Label')).toBeInTheDocument();
+    });
+
+    it('should render required indicator when required', () => {
+      renderComponent({ required: true });
+      expect(screen.getByText('*')).toBeInTheDocument();
+    });
+
+    it('should not render required indicator when not required', () => {
+      renderComponent({ required: false });
+      expect(screen.queryByText('*')).not.toBeInTheDocument();
+    });
+
+    it('should render select element', () => {
+      renderComponent();
+      expect(screen.getByTestId('select')).toBeInTheDocument();
+    });
+
+    it('wraps the async combobox with a workflow test id including field id', () => {
+      renderComponent({ id: 'test-dropdown' });
+      expect(
+        screen.getByTestId('workflow-config-async-combobox-test-dropdown'),
+      ).toBeInTheDocument();
+    });
+
+    it('uses default async combobox test id when id is empty', () => {
+      renderComponent({ id: '' });
+      expect(screen.getByTestId('workflow-config-async-combobox')).toBeInTheDocument();
+    });
+  });
+
+  describe('Tooltip', () => {
+    it('should render tooltip when provided', () => {
+      renderComponent({
+        options: {
+          tooltip: 'Help text',
+          enumOptions: [],
+        },
+      });
+      expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+      expect(screen.getByTestId('tooltip')).toHaveAttribute('data-label', 'Help text');
+    });
+
+    it('should not render tooltip when not provided', () => {
+      renderComponent({
+        options: {
+          enumOptions: [],
+        },
+      });
+      expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Options', () => {
+    it('should use enumOptions when provided', () => {
+      renderComponent({
+        options: {
+          enumOptions: [
+            { label: 'Option A', value: 'a' },
+            { label: 'Option B', value: 'b' },
+          ],
+        },
+      });
+      const select = screen.getByTestId('select');
+      expect(select).toBeInTheDocument();
+    });
+
+    it('should render placeholder when provided', () => {
+      renderComponent({
+        options: {
+          input_placeholder: 'Select an option',
+          enumOptions: [],
+        },
+      });
+      expect(screen.getByText('Select an option')).toBeInTheDocument();
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('should render with disabled prop', () => {
+      renderComponent({ disabled: true });
+      expect(screen.getByTestId('select')).toBeDisabled();
+    });
+
+    it('should render enabled by default', () => {
+      renderComponent({ disabled: false });
+      expect(screen.getByTestId('select')).not.toBeDisabled();
+    });
+  });
+
+  describe('Selected Value', () => {
+    it('should show selected value', () => {
+      renderComponent({
+        value: 'opt1',
+        options: {
+          enumOptions: [
+            { label: 'Option 1', value: 'opt1' },
+            { label: 'Option 2', value: 'opt2' },
+          ],
+        },
+      });
+      const select = screen.getByTestId('select') as HTMLSelectElement;
+      expect(select.value).toBe('opt1');
+    });
+  });
+
+  describe('onChange', () => {
+    it('should call onChange when option is selected', () => {
+      renderComponent({
+        options: {
+          enumOptions: [
+            { label: 'Option 1', value: 'opt1' },
+            { label: 'Option 2', value: 'opt2' },
+          ],
+        },
+      });
+
+      const select = screen.getByTestId('select');
+      fireEvent.change(select, { target: { value: 'opt2' } });
+
+      expect(mockOnChange).toHaveBeenCalledWith('opt2');
+    });
+
+    it('should call onChange with undefined when cleared', () => {
+      renderComponent({
+        value: 'opt1',
+        options: {
+          enumOptions: [{ label: 'Option 1', value: 'opt1' }],
+        },
+      });
+
+      const select = screen.getByTestId('select');
+      fireEvent.change(select, { target: { value: '' } });
+
+      expect(mockOnChange).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('Async Data Loading', () => {
+    it('should fetch data when data source is provided', async () => {
+      renderComponent({
+        options: {
+          data: 'data_source',
+          label_key: 'name',
+          value_key: 'id',
+          filters: {
+            type: 'source',
+            category: 'data',
+            page: 1,
+            per_page: '100',
+            sub_category: 'vector',
+          },
+        },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+      });
+    });
+
+    it('should fetch embeddings data', async () => {
+      renderComponent({
+        options: {
+          data: 'embeddings',
+          label_key: 'name',
+          value_key: 'id',
+        },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+      });
+    });
+
+    it('should fetch componentInputs data', async () => {
+      renderComponent({
+        options: {
+          data: 'componentInputs',
+          label_key: 'source_handle.field',
+          value_key: 'source_handle.field',
+        },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+      });
+    });
+
+    it('should make separate service calls for different filter combinations', async () => {
+      const getUserConnectors = jest.mocked(connectorsService.getUserConnectors);
+
+      const sharedQueryClient = new QueryClient({
+        defaultOptions: { queries: { retry: false } },
+      });
+
+      const baseOptions = {
+        data: 'data_source' as const,
+        label_key: 'name',
+        value_key: 'id',
+      };
+
+      render(
+        <ChakraProvider>
+          <QueryClientProvider client={sharedQueryClient}>
+            <AsyncDropdown
+              {...(defaultProps as WidgetProps)}
+              id='dropdown-source'
+              options={{
+                ...baseOptions,
+                filters: {
+                  type: 'source',
+                  category: 'data',
+                  page: 1,
+                  per_page: '100',
+                  sub_category: 'vector',
+                },
+              }}
+            />
+            <AsyncDropdown
+              {...(defaultProps as WidgetProps)}
+              id='dropdown-destination'
+              options={{
+                ...baseOptions,
+                filters: {
+                  type: 'destination',
+                  category: 'data',
+                  page: 1,
+                  per_page: '100',
+                  sub_category: 'crm',
+                },
+              }}
+            />
+          </QueryClientProvider>
+        </ChakraProvider>,
+      );
+
+      await waitFor(() => {
+        expect(getUserConnectors).toHaveBeenCalledTimes(2);
+      });
+
+      expect(getUserConnectors).toHaveBeenCalledWith('source', 'data', 1, '100', 'vector');
+      expect(getUserConnectors).toHaveBeenCalledWith('destination', 'data', 1, '100', 'crm');
+    });
+
+    it('should share query cache when same data source has no filters', async () => {
+      const getEmbeddingConfiguration = jest.mocked(
+        embeddingConfigurationService.getEmbeddingConfiguration,
+      );
+
+      const sharedQueryClient = new QueryClient({
+        defaultOptions: { queries: { retry: false } },
+      });
+
+      const embeddingOptions = {
+        data: 'embeddings' as const,
+        label_key: 'name',
+        value_key: 'id',
+      };
+
+      render(
+        <ChakraProvider>
+          <QueryClientProvider client={sharedQueryClient}>
+            <AsyncDropdown
+              {...(defaultProps as WidgetProps)}
+              id='dropdown-emb-1'
+              options={embeddingOptions}
+            />
+            <AsyncDropdown
+              {...(defaultProps as WidgetProps)}
+              id='dropdown-emb-2'
+              options={embeddingOptions}
+            />
+          </QueryClientProvider>
+        </ChakraProvider>,
+      );
+
+      await waitFor(() => {
+        expect(getEmbeddingConfiguration).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('Watch Configuration', () => {
+    it('should respect watch option', () => {
+      renderComponent({
+        options: {
+          data: 'data_source',
+          watch: 'database',
+          label_key: 'name',
+          value_key: 'id',
+        },
+        formContext: {
+          configuration: {
+            database: 'postgres',
+          },
+        },
+      });
+
+      expect(screen.getByTestId('select')).toBeInTheDocument();
+    });
+  });
+
+  describe('Undefined Service Warning', () => {
+    it('should warn when service is undefined', async () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+
+      renderComponent({
+        options: {
+          data: 'unknown_service' as any, // Invalid service
+          label_key: 'name',
+          value_key: 'id',
+        },
+      });
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          expect.stringContaining('No service defined for dropdown data source'),
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('buildDropdownOptions Edge Cases', () => {
+    it('should handle data without label_key', async () => {
+      const getUserConnectors = jest.mocked(connectorsService.getUserConnectors);
+      getUserConnectors.mockResolvedValueOnce({
+        data: [
+          {
+            id: '1',
+            attributes: {
+              name: 'Test',
+              connector_name: 'test',
+              connector_type: 'source',
+              configuration: { data_type: 'string' },
+              description: '',
+              icon: '',
+              updated_at: '',
+              status: 'active',
+            },
+          },
+        ],
+      });
+
+      renderComponent({
+        options: {
+          data: 'data_source',
+          // Missing label_key
+          value_key: 'id',
+          filters: {
+            type: 'source',
+            category: 'data',
+            page: 1,
+            per_page: '100',
+            sub_category: 'vector',
+          },
+        },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle data without value_key', async () => {
+      const getUserConnectors = jest.mocked(connectorsService.getUserConnectors);
+      getUserConnectors.mockResolvedValueOnce({
+        data: [
+          {
+            id: '1',
+            attributes: {
+              name: 'Test',
+              connector_name: 'test',
+              connector_type: 'source',
+              configuration: { data_type: 'string' },
+              description: '',
+              icon: '',
+              updated_at: '',
+              status: 'active',
+            },
+          },
+        ],
+      });
+
+      renderComponent({
+        options: {
+          data: 'data_source',
+          label_key: 'name',
+          // Missing value_key
+          filters: {
+            type: 'source',
+            category: 'data',
+            page: 1,
+            per_page: '100',
+            sub_category: 'vector',
+          },
+        },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle non-array data response', async () => {
+      const getUserConnectors = jest.mocked(connectorsService.getUserConnectors);
+      getUserConnectors.mockResolvedValueOnce({
+        data: [] as never[], // Not an array (empty array to satisfy type)
+      });
+
+      renderComponent({
+        options: {
+          data: 'data_source',
+          label_key: 'name',
+          value_key: 'id',
+          filters: {
+            type: 'source',
+            category: 'data',
+            page: 1,
+            per_page: '100',
+            sub_category: 'vector',
+          },
+        },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle value in root object instead of attributes', async () => {
+      const getUserConnectors = jest.mocked(connectorsService.getUserConnectors);
+      getUserConnectors.mockResolvedValueOnce({
+        data: [
+          {
+            id: '1',
+            attributes: {
+              name: 'Direct Name',
+              connector_name: 'test',
+              connector_type: 'source',
+              configuration: { data_type: 'string' },
+              description: '',
+              icon: '',
+              updated_at: '',
+              status: 'active',
+            },
+          },
+        ],
+      });
+
+      renderComponent({
+        options: {
+          data: 'data_source',
+          label_key: 'name', // Will find in root object
+          value_key: 'id',
+          filters: {
+            type: 'source',
+            category: 'data',
+            page: 1,
+            per_page: '100',
+            sub_category: 'vector',
+          },
+        },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Custom Components', () => {
+    it('should pass custom Option component to Select', () => {
+      renderComponent();
+      expect(capturedComponents.Option).toBeDefined();
+    });
+
+    it('should pass custom MenuList component to Select', () => {
+      renderComponent();
+      expect(capturedComponents.MenuList).toBeDefined();
+    });
+
+    it('should render CustomOption with all props', () => {
+      renderComponent({
+        options: {
+          enumOptions: [{ label: 'Option 1', value: 'opt1' }],
+        },
+      });
+
+      // Verify custom components are captured
+      expect(capturedComponents.Option).toBeDefined();
+
+      // Render the CustomOption component directly for coverage
+      if (capturedComponents.Option) {
+        const CustomOption = capturedComponents.Option as React.FC<{
+          data: { label: string; value: string; icon?: string };
+          isFocused: boolean;
+          isSelected: boolean;
+        }>;
+
+        const { container } = render(
+          <ChakraProvider>
+            <CustomOption
+              data={{ label: 'Test', value: 'test', icon: 'https://example.com/icon.svg' }}
+              isFocused={true}
+              isSelected={true}
+            />
+          </ChakraProvider>,
+        );
+
+        expect(container).toBeInTheDocument();
+      }
+    });
+
+    it('should render CustomOption without icon', () => {
+      renderComponent();
+
+      if (capturedComponents.Option) {
+        const CustomOption = capturedComponents.Option as React.FC<{
+          data: { label: string; value: string; icon?: string };
+          isFocused: boolean;
+          isSelected: boolean;
+        }>;
+
+        const { container } = render(
+          <ChakraProvider>
+            <CustomOption
+              data={{ label: 'Test', value: 'test' }}
+              isFocused={false}
+              isSelected={false}
+            />
+          </ChakraProvider>,
+        );
+
+        expect(container).toBeInTheDocument();
+      }
+    });
+
+    it('should render CustomMenuList with options', () => {
+      renderComponent();
+
+      if (capturedComponents.MenuList) {
+        const CustomMenuList = capturedComponents.MenuList as React.FC<{
+          children: React.ReactNode;
+        }>;
+
+        const { container } = render(
+          <ChakraProvider>
+            <CustomMenuList>
+              <div>Option 1</div>
+              <div>Option 2</div>
+            </CustomMenuList>
+          </ChakraProvider>,
+        );
+
+        expect(container).toBeInTheDocument();
+      }
+    });
+
+    it('should render CustomMenuList with empty state', () => {
+      renderComponent();
+
+      if (capturedComponents.MenuList) {
+        const CustomMenuList = capturedComponents.MenuList as React.FC<{
+          children: React.ReactNode;
+        }>;
+
+        const { container } = render(
+          <ChakraProvider>
+            <CustomMenuList>{null}</CustomMenuList>
+          </ChakraProvider>,
+        );
+
+        expect(container).toBeInTheDocument();
+      }
+    });
+  });
+
+  describe('Style Functions', () => {
+    it('should pass option style function', () => {
+      renderComponent();
+      expect(capturedStyles.option).toBeDefined();
+    });
+
+    it('should pass menuList style function', () => {
+      renderComponent();
+      expect(capturedStyles.menuList).toBeDefined();
+    });
+
+    it('should execute option style function', () => {
+      renderComponent();
+
+      if (capturedStyles.option) {
+        const baseStyle = { color: 'black' };
+        const result = capturedStyles.option(baseStyle);
+
+        expect(result).toEqual(
+          expect.objectContaining({
+            padding: 0,
+            borderRadius: '6px',
+            backgroundColor: 'transparent',
+          }),
+        );
+      }
+    });
+
+    it('should execute menuList style function', () => {
+      renderComponent();
+
+      if (capturedStyles.menuList) {
+        const baseStyle = { maxHeight: '200px' };
+        const result = capturedStyles.menuList(baseStyle);
+
+        expect(result).toEqual(
+          expect.objectContaining({
+            zIndex: 999999999999,
+            maxHeight: '50vh',
+            overflowY: 'auto',
+          }),
+        );
+      }
+    });
+  });
+
+  describe('ComponentInputs with null workflow', () => {
+    it('should handle componentInputs when currentWorkflow is null', async () => {
+      // Note: This test verifies the component handles null workflow gracefully
+      // The mock is set at module level, so we test with the default mock
+      // In a real scenario with null workflow, the component should still render
+      renderComponent({
+        options: {
+          data: 'componentInputs',
+          label_key: 'source_handle.field',
+          value_key: 'source_handle.field',
+        },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/__tests__/ToolSelectorWidget.test.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/__tests__/ToolSelectorWidget.test.tsx
new file mode 100644
index 000000000..e3413e3df
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Configbar/FormComponents/__tests__/ToolSelectorWidget.test.tsx
@@ -0,0 +1,629 @@
+import React from 'react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { expect } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { WidgetProps } from '@rjsf/utils';
+import ToolSelectorWidget, { ToolSelectorFormContext } from '../ToolSelectorWidget';
+import { ToolItem, McpToolItem } from '@/enterprise/views/Tools/ToolsList/types';
+
+// Mock react-icons
+jest.mock('react-icons/fi');
+
+// Mock chakra-react-select — renders a native <select> for testability.
+jest.mock('chakra-react-select', () => ({
+  Select: ({ onChange, options, formatOptionLabel }: any) => (
+    <>
+      <select
+        data-testid='connection-select'
+        onChange={(e) => {
+          const opt = options?.find((o: any) => o.value === e.target.value);
+          if (opt) onChange(opt);
+        }}
+      >
+        {options?.map((opt: any) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {options?.map((opt: any) => (
+        <div key={`opt-label-${opt.value}`}>
+          {formatOptionLabel ? formatOptionLabel(opt) : null}
+        </div>
+      ))}
+    </>
+  ),
+}));
+
+// Mock BaseModal
+jest.mock('@/components/BaseModal/BaseModal', () => ({
+  __esModule: true,
+  default: ({
+    openModal,
+    setModalOpen,
+    title,
+    children,
+    footer,
+  }: {
+    openModal: boolean;
+    setModalOpen: (open: boolean) => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+  }) => (
+    <div data-testid='base-modal' data-open={openModal}>
+      <div data-testid='modal-title'>{title}</div>
+      <div data-testid='modal-content'>{children}</div>
+      {footer && <div data-testid='modal-footer'>{footer}</div>}
+      <button data-testid='close-modal' onClick={() => setModalOpen(false)}>
+        Close
+      </button>
+    </div>
+  ),
+}));
+
+// Mock ToolSelector components — ToolSelectionView and ActionSelectionView are no longer used.
+jest.mock('../ToolSelector', () => ({
+  __esModule: true,
+  AddToolButton: ({ onClick }: { onClick: () => void }) => (
+    <button data-testid='add-tool-button' onClick={onClick}>
+      Add Tool
+    </button>
+  ),
+  ConnectedToolView: ({
+    currentTool,
+    tools,
+    onEditTool,
+  }: {
+    currentTool: ToolItem | null;
+    tools: string[];
+    onEditTool: () => void;
+  }) => (
+    <div data-testid='connected-tool-view'>
+      <div data-testid='tool-name'>{currentTool?.attributes.name || 'No tool'}</div>
+      <div data-testid='tools-count'>{tools.length}</div>
+      <button data-testid='edit-tool' onClick={onEditTool}>
+        Edit
+      </button>
+    </div>
+  ),
+  ToolIcon: () => <span data-testid='tool-icon' />,
+}));
+
+// Mock ToolTip — just renders children
+jest.mock('@/components/ToolTip/ToolTip', () => ({
+  __esModule: true,
+  default: ({ children }: any) => <>{children}</>,
+}));
+
+// Mock Loader
+jest.mock('@/components/Loader', () => ({
+  __esModule: true,
+  default: () => <div data-testid='loader' />,
+}));
+
+// Mock useToolQueries
+const mockUseGetTools = jest.fn();
+const mockUseGetMcpToolsList = jest.fn();
+
+jest.mock('@/enterprise/hooks/queries/useToolQueries', () => ({
+  __esModule: true,
+  default: () => ({
+    useGetTools: mockUseGetTools,
+    useGetMcpToolsList: mockUseGetMcpToolsList,
+  }),
+}));
+
+const renderWithChakra = (ui: React.ReactElement) => render(<ChakraProvider>{ui}</ChakraProvider>);
+
+const createMockTool = (id: string, name: string, toolType: string = 'mcp'): ToolItem => ({
+  id,
+  type: 'tool',
+  attributes: {
+    name,
+    tool_type: toolType,
+    enabled: true,
+    updated_at: '2024-01-01T00:00:00Z',
+    created_at: '2024-01-01T00:00:00Z',
+    settings: {
+      mcp: {
+        url: 'http://example.com',
+        transport: 'http',
+        auth_type: 'none',
+      },
+    },
+    metadata: {
+      icon: '/icon.svg',
+    },
+  },
+});
+
+const createMockAction = (name: string): McpToolItem => ({
+  name,
+  description: `Description for ${name}`,
+  input_schema: { type: 'object' },
+});
+
+describe('ToolSelectorWidget', () => {
+  const createBaseProps = (
+    overrides: Partial<WidgetProps & { formContext?: ToolSelectorFormContext }> = {},
+  ) => ({
+    id: 'tool-selector',
+    name: 'tool_selector',
+    value: '',
+    schema: {},
+    uiSchema: {},
+    formData: {},
+    formContext: {
+      currentTools: [],
+      onToolSelectorChange: jest.fn(),
+    },
+    registry: {} as any,
+    onChange: jest.fn(),
+    onBlur: jest.fn(),
+    onFocus: jest.fn(),
+    rawErrors: [],
+    ...overrides,
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseGetTools.mockReturnValue({ data: { data: [] }, isLoading: false });
+    // Default: no tools actions — prevents the auto-init useEffect from firing on render.
+    mockUseGetMcpToolsList.mockReturnValue({ data: { tools: [] }, isLoading: false });
+  });
+
+  // Opens the modal then selects a connection via the native select mock.
+  const openModalAndSelectTool = (toolId: string) => {
+    fireEvent.click(screen.getByTestId('add-tool-button'));
+    fireEvent.change(screen.getByTestId('connection-select'), { target: { value: toolId } });
+  };
+
+  // ─── Initial render ────────────────────────────────────────────────────────
+
+  describe('Initial render', () => {
+    it('renders AddToolButton when value is empty', () => {
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps({ value: '' })} />);
+      expect(screen.getByTestId('add-tool-button')).toBeInTheDocument();
+    });
+
+    it('renders ConnectedToolView when value is a tool id', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps({ value: 'tool-1' })} />);
+      expect(screen.getByTestId('connected-tool-view')).toBeInTheDocument();
+    });
+
+    it('shows the correct tool name in ConnectedToolView', () => {
+      const tool = createMockTool('tool-1', 'My Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps({ value: 'tool-1' })} />);
+      expect(screen.getByTestId('tool-name')).toHaveTextContent('My Test Tool');
+    });
+
+    it('shows the correct tools-count from currentTools', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+
+      renderWithChakra(
+        <ToolSelectorWidget
+          {...createBaseProps({
+            value: 'tool-1',
+            formContext: {
+              currentTools: ['action1', 'action2'],
+              onToolSelectorChange: jest.fn(),
+            },
+          })}
+        />,
+      );
+      expect(screen.getByTestId('tools-count')).toHaveTextContent('2');
+    });
+
+    it('handles non-string value gracefully — falls back to empty string, shows AddToolButton', () => {
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps({ value: 123 as any })} />);
+      expect(screen.getByTestId('add-tool-button')).toBeInTheDocument();
+    });
+
+    it('handles non-existent toolId — shows ConnectedToolView with "No tool"', () => {
+      mockUseGetTools.mockReturnValue({ data: { data: [] }, isLoading: false });
+
+      renderWithChakra(
+        <ToolSelectorWidget
+          {...createBaseProps({
+            value: 'non-existent-tool',
+            formContext: { currentTools: [], onToolSelectorChange: jest.fn() },
+          })}
+        />,
+      );
+      expect(screen.getByTestId('connected-tool-view')).toBeInTheDocument();
+      expect(screen.getByTestId('tool-name')).toHaveTextContent('No tool');
+    });
+
+    it('handles undefined formContext without crashing', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+
+      renderWithChakra(
+        <ToolSelectorWidget {...createBaseProps({ value: 'tool-1', formContext: undefined })} />,
+      );
+      expect(screen.getByTestId('connected-tool-view')).toBeInTheDocument();
+    });
+  });
+
+  // ─── Modal open / close ───────────────────────────────────────────────────
+
+  describe('Modal open / close', () => {
+    it('opens modal with "Add Tool" title when AddToolButton is clicked', () => {
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      fireEvent.click(screen.getByTestId('add-tool-button'));
+
+      expect(screen.getByTestId('base-modal')).toHaveAttribute('data-open', 'true');
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Add Tool');
+    });
+
+    it('opens modal when edit button is clicked', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+
+      renderWithChakra(
+        <ToolSelectorWidget
+          {...createBaseProps({
+            value: 'tool-1',
+            formContext: { currentTools: ['action1'], onToolSelectorChange: jest.fn() },
+          })}
+        />,
+      );
+      fireEvent.click(screen.getByTestId('edit-tool'));
+      expect(screen.getByTestId('base-modal')).toHaveAttribute('data-open', 'true');
+    });
+
+    it('closes modal when Cancel button is clicked', () => {
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      fireEvent.click(screen.getByTestId('add-tool-button'));
+      fireEvent.click(screen.getByText('Cancel'));
+
+      expect(screen.getByTestId('base-modal')).toHaveAttribute('data-open', 'false');
+    });
+
+    it('closes modal when X (close-modal) button is clicked', () => {
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      fireEvent.click(screen.getByTestId('add-tool-button'));
+      fireEvent.click(screen.getByTestId('close-modal'));
+
+      expect(screen.getByTestId('base-modal')).toHaveAttribute('data-open', 'false');
+    });
+
+    it('resets state after closing: Tools section does not appear on reopen without new selection', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+
+      // Select a connection so the Tools section appears
+      openModalAndSelectTool('tool-1');
+      expect(screen.getByText('Select All')).toBeInTheDocument();
+
+      // Close the modal — state should be reset
+      fireEvent.click(screen.getByText('Cancel'));
+
+      // Reopen without selecting a connection
+      fireEvent.click(screen.getByTestId('add-tool-button'));
+      expect(screen.queryByText('Select All')).not.toBeInTheDocument();
+    });
+  });
+
+  // ─── Connection dropdown ──────────────────────────────────────────────────
+
+  describe('Connection dropdown', () => {
+    it('renders the connection select inside the modal', () => {
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      fireEvent.click(screen.getByTestId('add-tool-button'));
+
+      expect(screen.getByTestId('connection-select')).toBeInTheDocument();
+      expect(screen.getByTestId('workflow-tool-connection-select')).toBeInTheDocument();
+      expect(screen.getByTestId('workflow-tool-modal-cancel')).toBeInTheDocument();
+      expect(screen.getByTestId('workflow-tool-modal-connect')).toBeInTheDocument();
+    });
+
+    it('renders each connection option with icon + name (formatOptionLabel path)', () => {
+      const tool = createMockTool('tool-1', 'MCP Server Alpha');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      fireEvent.click(screen.getByTestId('add-tool-button'));
+
+      const row = screen.getByTestId('workflow-tool-connection-option-tool-1');
+      expect(row).toBeInTheDocument();
+      expect(row).toHaveTextContent('MCP Server Alpha');
+      expect(within(row).getByTestId('tool-icon')).toBeInTheDocument();
+    });
+
+    it('hides the Tools section before a connection is selected', () => {
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      fireEvent.click(screen.getByTestId('add-tool-button'));
+
+      expect(screen.queryByText('Select All')).not.toBeInTheDocument();
+    });
+
+    it('shows the Tools section after a connection is selected', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+
+      expect(screen.getByText('Select All')).toBeInTheDocument();
+    });
+  });
+
+  // ─── Tools section loading ────────────────────────────────────────────────
+
+  describe('Tools section loading', () => {
+    it('shows a loader and no switches when isLoadingActions is true', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+      mockUseGetMcpToolsList.mockReturnValue({ data: undefined, isLoading: true });
+
+      const { container } = renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+
+      expect(screen.getByTestId('loader')).toBeInTheDocument();
+      // No checkbox inputs (switch inputs) should be rendered while loading
+      expect(container.querySelectorAll('input[type="checkbox"]')).toHaveLength(0);
+    });
+  });
+
+  // ─── Select All / Deselect All ────────────────────────────────────────────
+  //
+  // Auto-init behaviour: when a tool is selected, mcpToolsResponse changes from
+  // undefined → { tools: [...] }, triggering the useEffect which sets all actions
+  // to true. Therefore immediately after selecting a connection, all switches are
+  // CHECKED (allSelected=true), Select All is DISABLED, Deselect All is ENABLED.
+
+  describe('Select All / Deselect All', () => {
+    const setupWithActions = () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      const actions = [createMockAction('action1'), createMockAction('action2')];
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+      // Stable object references are critical: mcpToolsResponse must change from
+      // noDataResult → withDataResult exactly once (when tool is selected), so the
+      // auto-init useEffect fires exactly once and not again on subsequent renders.
+      const noDataResult = { data: undefined, isLoading: false };
+      const withDataResult = { data: { tools: actions }, isLoading: false };
+      mockUseGetMcpToolsList.mockImplementation((toolId: string, shouldFetch: boolean) => {
+        if (!toolId || !shouldFetch) return noDataResult;
+        return withDataResult;
+      });
+      return { tool, actions };
+    };
+
+    it('shows Select All and Deselect All buttons once a connection is selected', () => {
+      setupWithActions();
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+
+      expect(screen.getByText('Select All')).toBeInTheDocument();
+      expect(screen.getByText('Deselect All')).toBeInTheDocument();
+    });
+
+    it('all actions are auto-selected right after tool selection — Select All disabled, Deselect All enabled', () => {
+      setupWithActions();
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+
+      expect(screen.getByText('Select All')).toBeDisabled();
+      expect(screen.getByText('Deselect All')).not.toBeDisabled();
+    });
+
+    it('clicking Deselect All then Select All re-checks all switches, disables Select All, enables Deselect All', () => {
+      setupWithActions();
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+      // Auto-init: all selected. Deselect All first, then Select All.
+      fireEvent.click(screen.getByText('Deselect All'));
+      fireEvent.click(screen.getByText('Select All'));
+
+      // Verify state via button enabled/disabled (allSelected = true)
+      expect(screen.getByText('Select All')).toBeDisabled();
+      expect(screen.getByText('Deselect All')).not.toBeDisabled();
+      // Connect should be enabled because selectedActionsCount > 0
+      expect(screen.getByText('Connect')).not.toBeDisabled();
+    });
+
+    it('clicking Deselect All unchecks all switches, re-enables Select All, disables Deselect All', () => {
+      setupWithActions();
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+      // Auto-init: all selected. Go straight to Deselect All.
+      fireEvent.click(screen.getByText('Deselect All'));
+
+      // Verify state via button enabled/disabled (nothing selected)
+      expect(screen.getByText('Select All')).not.toBeDisabled();
+      expect(screen.getByText('Deselect All')).toBeDisabled();
+      // Connect should be disabled because selectedActionsCount === 0
+      expect(screen.getByText('Connect')).toBeDisabled();
+    });
+
+    it('toggling one switch off after Select All puts component in someSelected state — both buttons enabled', () => {
+      // Chakra Switch renders <input type="checkbox"> without role attr; query by type
+      setupWithActions();
+      const { container } = renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+      // Auto-init: all selected. Toggle directly from that state.
+
+      // Toggle the first switch off → partial selection (someSelected=true)
+      const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+      fireEvent.click(checkboxes[0]);
+
+      // someSelected=true → both buttons enabled
+      expect(screen.getByText('Select All')).not.toBeDisabled();
+      expect(screen.getByText('Deselect All')).not.toBeDisabled();
+    });
+
+    it('clicking Deselect All after partial selection disables Deselect All and Connect', () => {
+      setupWithActions();
+      const { container } = renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+      // Auto-init: all selected. Reach partial selection by toggling one switch off.
+
+      // Reach partial selection by toggling one switch off
+      const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+      fireEvent.click(checkboxes[0]);
+      fireEvent.click(screen.getByText('Deselect All'));
+
+      // After Deselect All: nothing selected → Deselect All disabled, Connect disabled
+      expect(screen.getByText('Deselect All')).toBeDisabled();
+      expect(screen.getByText('Connect')).toBeDisabled();
+    });
+  });
+
+  // ─── Connect button ───────────────────────────────────────────────────────
+
+  describe('Connect button', () => {
+    it('is disabled when no connection has been selected', () => {
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      fireEvent.click(screen.getByTestId('add-tool-button'));
+
+      expect(screen.getByText('Connect')).toBeDisabled();
+    });
+
+    it('is disabled while isLoadingActions is true', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+      mockUseGetMcpToolsList.mockReturnValue({ data: undefined, isLoading: true });
+
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+
+      expect(screen.getByText('Connect')).toBeDisabled();
+    });
+
+    it('is enabled immediately after tool selection due to auto-init', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      const actions = [createMockAction('action1')];
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+      const noDataResult = { data: undefined, isLoading: false };
+      const withDataResult = { data: { tools: actions }, isLoading: false };
+      mockUseGetMcpToolsList.mockImplementation((toolId: string, shouldFetch: boolean) => {
+        if (!toolId || !shouldFetch) return noDataResult;
+        return withDataResult;
+      });
+
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+
+      expect(screen.getByText('Connect')).not.toBeDisabled();
+    });
+
+    it('is enabled after auto-init selects all actions on tool selection', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      const actions = [createMockAction('action1')];
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+      const noDataResult = { data: undefined, isLoading: false };
+      const withDataResult = { data: { tools: actions }, isLoading: false };
+      mockUseGetMcpToolsList.mockImplementation((toolId: string, shouldFetch: boolean) => {
+        if (!toolId || !shouldFetch) return noDataResult;
+        return withDataResult;
+      });
+
+      renderWithChakra(<ToolSelectorWidget {...createBaseProps()} />);
+      openModalAndSelectTool('tool-1');
+
+      // Auto-init already enables Connect; no need to click Select All
+      expect(screen.getByText('Connect')).not.toBeDisabled();
+    });
+
+    it('calls onToolSelectorChange with correct args and closes modal', () => {
+      const tool = createMockTool('tool-1', 'Test Tool');
+      const actions = [createMockAction('action1'), createMockAction('action2')];
+      const onToolSelectorChange = jest.fn();
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+      const noDataResult = { data: undefined, isLoading: false };
+      const withDataResult = { data: { tools: actions }, isLoading: false };
+      mockUseGetMcpToolsList.mockImplementation((toolId: string, shouldFetch: boolean) => {
+        if (!toolId || !shouldFetch) return noDataResult;
+        return withDataResult;
+      });
+
+      renderWithChakra(
+        <ToolSelectorWidget
+          {...createBaseProps({
+            formContext: { currentTools: [], onToolSelectorChange },
+          })}
+        />,
+      );
+      openModalAndSelectTool('tool-1');
+      // Auto-init already selects all actions; Connect is immediately enabled.
+      fireEvent.click(screen.getByText('Connect'));
+
+      expect(onToolSelectorChange).toHaveBeenCalledWith('tool-1', ['action1', 'action2']);
+      expect(screen.getByTestId('base-modal')).toHaveAttribute('data-open', 'false');
+    });
+  });
+
+  // ─── Edit mode ────────────────────────────────────────────────────────────
+
+  describe('Edit mode', () => {
+    it('pre-checks actions listed in currentTools when edit button is clicked', () => {
+      // currentTools=['action1','action2'] out of [action1,action2,action3]
+      // → switches 0,1 checked; switch 2 unchecked; someSelected=true
+      const tool = createMockTool('tool-1', 'Test Tool');
+      const actions = [
+        createMockAction('action1'),
+        createMockAction('action2'),
+        createMockAction('action3'),
+      ];
+      mockUseGetTools.mockReturnValue({ data: { data: [tool] }, isLoading: false });
+      const noDataResult = { data: undefined, isLoading: false };
+      const withDataResult = { data: { tools: actions }, isLoading: false };
+      mockUseGetMcpToolsList.mockImplementation((toolId: string, shouldFetch: boolean) => {
+        if (!toolId || !shouldFetch) return noDataResult;
+        return withDataResult;
+      });
+
+      const { container } = renderWithChakra(
+        <ToolSelectorWidget
+          {...createBaseProps({
+            value: 'tool-1',
+            formContext: {
+              currentTools: ['action1', 'action2'],
+              onToolSelectorChange: jest.fn(),
+            },
+          })}
+        />,
+      );
+      fireEvent.click(screen.getByTestId('edit-tool'));
+
+      // Verify pre-checked state via checkbox inputs and button states
+      const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+      expect(checkboxes[0]).toBeChecked(); // action1 ∈ currentTools
+      expect(checkboxes[1]).toBeChecked(); // action2 ∈ currentTools
+      expect(checkboxes[2]).not.toBeChecked(); // action3 ∉ currentTools
+
+      // someSelected=true → Connect enabled, both bulk buttons enabled
+      expect(screen.getByText('Connect')).not.toBeDisabled();
+      expect(screen.getByText('Select All')).not.toBeDisabled();
+      expect(screen.getByText('Deselect All')).not.toBeDisabled();
+    });
+
+    it('does nothing and keeps modal closed when currentTool is null', () => {
+      mockUseGetTools.mockReturnValue({ data: { data: [] }, isLoading: false });
+
+      renderWithChakra(
+        <ToolSelectorWidget
+          {...createBaseProps({
+            value: 'non-existent-tool',
+            formContext: { currentTools: ['action1'], onToolSelectorChange: jest.fn() },
+          })}
+        />,
+      );
+      fireEvent.click(screen.getByTestId('edit-tool'));
+
+      expect(screen.getByTestId('base-modal')).toHaveAttribute('data-open', 'false');
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Sidebar/Sidebar.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Sidebar/Sidebar.tsx
new file mode 100644
index 000000000..943283e99
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Sidebar/Sidebar.tsx
@@ -0,0 +1,187 @@
+import { Box, Text, Stack, Divider, Tooltip, Image } from '@chakra-ui/react';
+import { useState } from 'react';
+import IconEntity from '@/components/IconEntity';
+import { TbLayoutSidebarRightExpand, TbLayoutSidebarRightCollapse } from 'react-icons/tb';
+import SearchBar from '@/components/SearchBar/SearchBar';
+import EntityItem from '@/components/EntityItem';
+import { FiMenu } from 'react-icons/fi';
+import useAgentQueries from '@/enterprise/hooks/queries/useAgentQueries';
+
+import { COMPONENT_CATEGORIES } from '../../constants';
+import { FlowComponent } from '../../types';
+
+const ComponentContainer = ({ component }: { component: FlowComponent }) => {
+  return (
+    <EntityItem
+      icon={component.data.icon}
+      name={component.data.label}
+      iconWidth='16px'
+      iconHeight='16px'
+      iconContainerHeight='32px'
+      iconContainerWidth='32px'
+    />
+  );
+};
+
+const Sidebar = ({
+  handleDragEnd,
+}: {
+  handleDragEnd: (event: React.DragEvent<HTMLDivElement>, component: FlowComponent) => void;
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const { useGetWorkflowComponents } = useAgentQueries();
+  const { data: workflowComponents } = useGetWorkflowComponents();
+
+  const filteredComponents = workflowComponents?.schemas.filter((component) =>
+    component?.data?.label?.toLowerCase()?.includes(searchTerm.toLowerCase()),
+  );
+
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  return (
+    <Box
+      display='flex'
+      flexDirection='column'
+      position={isCollapsed ? 'inherit' : 'absolute'}
+      top={isCollapsed ? 0 : '16px'}
+      left={isCollapsed ? 0 : '16px'}
+      height={isCollapsed ? '100%' : 'fit-content'}
+      minWidth={isCollapsed ? '330px' : '200px'}
+      maxWidth={isCollapsed ? '330px' : '200px'}
+      padding={isCollapsed ? '20px' : '16px'}
+      border={isCollapsed ? 'none' : '1px solid'}
+      borderRadius={isCollapsed ? 0 : '8px'}
+      borderRight={'1px solid'}
+      borderColor='gray.400'
+      gap='20px'
+      boxSizing='border-box'
+      overflowY='auto'
+      transition='all 0.3s ease'
+      zIndex={3}
+      bgColor='gray.100'
+    >
+      <Box
+        display='flex'
+        flexDirection='row'
+        justifyContent='space-between'
+        alignItems={isCollapsed ? 'start' : 'center'}
+      >
+        <Box display='flex' flexDirection='column' gap='4px'>
+          <Text size='sm' fontWeight={600}>
+            {' '}
+            Components
+          </Text>
+          {isCollapsed && (
+            <Text size='sm' color='black.100' fontWeight={400}>
+              Select a component for your workflow
+            </Text>
+          )}
+        </Box>
+
+        <IconEntity
+          icon={!isCollapsed ? TbLayoutSidebarRightExpand : TbLayoutSidebarRightCollapse}
+          marginRight='0px'
+          onClick={toggleSidebar}
+          cursor='pointer'
+        />
+      </Box>
+
+      {isCollapsed && (
+        <>
+          <SearchBar
+            setSearchTerm={setSearchTerm}
+            placeholder='Search components'
+            borderColor='gray.400'
+            data-testid='workflow-sidebar-search'
+          />
+          <Box>
+            {COMPONENT_CATEGORIES.map((category, index) => {
+              const categoryComponents = filteredComponents?.filter(
+                (component) => component.data.category === category.value,
+              );
+
+              // Only render category if it has components matching the search
+              if (categoryComponents?.length === 0) return null;
+
+              return (
+                <Box key={category.value} display='flex' flexDirection='column' gap='12px'>
+                  <Text size='xs' color='gray.600' fontWeight={700} letterSpacing='2.4px'>
+                    {category.name}
+                  </Text>
+                  <Stack spacing={3}>
+                    {categoryComponents?.map((component) => (
+                      <Tooltip
+                        key={component.data.component}
+                        label={
+                          <Box>
+                            <Box display='flex' flexDirection='row' gap='8px' alignItems='center'>
+                              <Image
+                                src={component.data.icon}
+                                alt={component.data.label}
+                                width='16px'
+                                height='16px'
+                              />
+                              <Text fontWeight={600} size='sm'>
+                                {component.data.label}
+                              </Text>
+                            </Box>
+                            <Text size='sm' fontWeight={400} color='black.100'>
+                              {component.data.description}
+                            </Text>
+                          </Box>
+                        }
+                        placement='right'
+                        hasArrow
+                        bg='white'
+                        color='black'
+                        boxShadow='md'
+                        p={3}
+                        borderRadius='md'
+                        minW='220px'
+                      >
+                        <Box
+                          padding='8px'
+                          borderWidth='1px'
+                          borderColor='gray.400'
+                          borderRadius='8px'
+                          backgroundColor='gray.200'
+                          data-testid={`sidebar-component-${component.data.component}`}
+                          cursor='grab'
+                          _hover={{ bg: 'gray.300' }}
+                          draggable
+                          onDragEnd={(event) => {
+                            handleDragEnd(event, component);
+                          }}
+                          display='flex'
+                          flexDirection='row'
+                          justifyContent='space-between'
+                          alignItems='center'
+                          role='group'
+                        >
+                          <ComponentContainer component={component} />
+                          <Box color='gray.600' _groupHover={{ color: 'black.300' }}>
+                            <FiMenu />
+                          </Box>
+                        </Box>
+                      </Tooltip>
+                    ))}
+                  </Stack>
+                  {index !== COMPONENT_CATEGORIES.length - 1 &&
+                    categoryComponents?.length &&
+                    categoryComponents?.length > 0 && (
+                      <Divider borderColor='gray.400' marginBottom='20px' marginTop='8px' />
+                    )}
+                </Box>
+              );
+            })}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default Sidebar;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Sidebar/__tests__/Sidebar.test.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Sidebar/__tests__/Sidebar.test.tsx
new file mode 100644
index 000000000..a5fd767a0
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Sidebar/__tests__/Sidebar.test.tsx
@@ -0,0 +1,236 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect, describe, it, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import Sidebar from '../Sidebar';
+import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Mock useAgentQueries
+const mockWorkflowComponents = {
+  schemas: [
+    {
+      id: 'comp-1',
+      data: {
+        component: 'llm',
+        label: 'LLM Component',
+        category: 'ai',
+        icon: 'https://example.com/llm.svg',
+        description: 'A language model component',
+      },
+    },
+    {
+      id: 'comp-2',
+      data: {
+        component: 'prompt',
+        label: 'Prompt Template',
+        category: 'ai',
+        icon: 'https://example.com/prompt.svg',
+        description: 'A prompt template component',
+      },
+    },
+    {
+      id: 'comp-3',
+      data: {
+        component: 'data_source',
+        label: 'Data Source',
+        category: 'data',
+        icon: 'https://example.com/data.svg',
+        description: 'A data source component',
+      },
+    },
+  ],
+};
+
+jest.mock('@/enterprise/hooks/queries/useAgentQueries', () => ({
+  __esModule: true,
+  default: () => ({
+    useGetWorkflowComponents: () => ({
+      data: mockWorkflowComponents,
+      isLoading: false,
+    }),
+  }),
+}));
+
+// Mock constants
+jest.mock('../../../constants', () => ({
+  COMPONENT_CATEGORIES: [
+    { name: 'AI', value: 'ai' },
+    { name: 'DATA', value: 'data' },
+  ],
+}));
+
+// Mock IconEntity
+jest.mock('@/components/IconEntity', () => ({
+  __esModule: true,
+  default: ({ onClick }: { icon: React.ComponentType; onClick?: () => void }) => (
+    <button data-testid='icon-entity' onClick={onClick}>
+      Icon
+    </button>
+  ),
+}));
+
+// Mock SearchBar
+jest.mock('@/components/SearchBar/SearchBar', () => ({
+  __esModule: true,
+  default: ({
+    setSearchTerm,
+    placeholder,
+    'data-testid': dataTestId,
+  }: {
+    setSearchTerm: (term: string) => void;
+    placeholder: string;
+    'data-testid'?: string;
+  }) => (
+    <input
+      data-testid={dataTestId ?? 'search-bar'}
+      placeholder={placeholder}
+      onChange={(e) => setSearchTerm(e.target.value)}
+    />
+  ),
+}));
+
+// Mock EntityItem
+jest.mock('@/components/EntityItem', () => ({
+  __esModule: true,
+  default: ({ name }: { icon: string; name: string }) => (
+    <div data-testid='entity-item'>{name}</div>
+  ),
+}));
+
+// Mock react-icons
+jest.mock('react-icons/tb', () => ({
+  TbLayoutSidebarRightExpand: () => <span data-testid='expand-icon'>Expand</span>,
+  TbLayoutSidebarRightCollapse: () => <span data-testid='collapse-icon'>Collapse</span>,
+}));
+
+jest.mock('react-icons/fi');
+
+describe('Sidebar', () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const mockHandleDragEnd = jest.fn();
+
+  const renderComponent = () => {
+    return render(
+      <ChakraProvider>
+        <QueryClientProvider client={queryClient}>
+          <Sidebar handleDragEnd={mockHandleDragEnd} />
+        </QueryClientProvider>
+      </ChakraProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render the sidebar', () => {
+      renderComponent();
+      expect(screen.getByText('Components')).toBeInTheDocument();
+    });
+
+    it('should render the description text when expanded', () => {
+      renderComponent();
+      expect(screen.getByText('Select a component for your workflow')).toBeInTheDocument();
+    });
+
+    it('should render search bar when expanded', () => {
+      renderComponent();
+      expect(screen.getByTestId('workflow-sidebar-search')).toBeInTheDocument();
+    });
+
+    it('should render component categories', () => {
+      renderComponent();
+      expect(screen.getByText('AI')).toBeInTheDocument();
+      expect(screen.getByText('DATA')).toBeInTheDocument();
+    });
+
+    it('should render component items', () => {
+      renderComponent();
+      expect(screen.getByText('LLM Component')).toBeInTheDocument();
+      expect(screen.getByText('Prompt Template')).toBeInTheDocument();
+      expect(screen.getByText('Data Source')).toBeInTheDocument();
+    });
+  });
+
+  describe('Collapse/Expand', () => {
+    it('should toggle sidebar when collapse icon is clicked', () => {
+      renderComponent();
+
+      // Initially expanded, should show description
+      expect(screen.getByText('Select a component for your workflow')).toBeInTheDocument();
+
+      // Click to collapse
+      const iconButton = screen.getByTestId('icon-entity');
+      fireEvent.click(iconButton);
+
+      // After collapse, description should be hidden
+      expect(screen.queryByText('Select a component for your workflow')).not.toBeInTheDocument();
+    });
+
+    it('should hide search bar when collapsed', () => {
+      renderComponent();
+
+      // Click to collapse
+      const iconButton = screen.getByTestId('icon-entity');
+      fireEvent.click(iconButton);
+
+      expect(screen.queryByTestId('workflow-sidebar-search')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Search', () => {
+    it('should filter components when searching', () => {
+      renderComponent();
+
+      const searchInput = screen.getByTestId('workflow-sidebar-search');
+      fireEvent.change(searchInput, { target: { value: 'LLM' } });
+
+      // LLM should be visible
+      expect(screen.getByText('LLM Component')).toBeInTheDocument();
+    });
+
+    it('should show no results when search matches nothing', () => {
+      renderComponent();
+
+      const searchInput = screen.getByTestId('workflow-sidebar-search');
+      fireEvent.change(searchInput, { target: { value: 'nonexistent' } });
+
+      // No components should match
+      expect(screen.queryByText('LLM Component')).not.toBeInTheDocument();
+      expect(screen.queryByText('Prompt Template')).not.toBeInTheDocument();
+      expect(screen.queryByText('Data Source')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Drag and Drop', () => {
+    it('should render draggable components', () => {
+      renderComponent();
+
+      // Components should be present
+      const entityItems = screen.getAllByTestId('entity-item');
+      expect(entityItems.length).toBeGreaterThan(0);
+    });
+
+    it('should call handleDragEnd when drag ends', () => {
+      renderComponent();
+
+      // Find a draggable component container
+      const draggableElements = document.querySelectorAll('[draggable="true"]');
+      expect(draggableElements.length).toBeGreaterThan(0);
+
+      // Trigger dragend event
+      fireEvent.dragEnd(draggableElements[0]);
+
+      expect(mockHandleDragEnd).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/VersionCard.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/VersionCard.tsx
new file mode 100644
index 000000000..9ff41fc5a
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/VersionCard.tsx
@@ -0,0 +1,184 @@
+import { Box, Flex, Text, Badge, Avatar, IconButton } from '@chakra-ui/react';
+import { FiEye, FiUser } from 'react-icons/fi';
+import { WorkflowVersionResponse } from '@/enterprise/services/types';
+import VersionActionsMenu from './VersionActionsMenu';
+import ToolTip from '@/components/ToolTip';
+import { formatTimestamp } from '@/utils/formatTimestamp';
+
+interface VersionCardProps {
+  version: WorkflowVersionResponse;
+  isCurrent: boolean;
+  isLatestPublished?: boolean;
+  onPreview: () => void;
+  onEditDescription: () => void;
+  onDelete: () => void;
+}
+
+const VersionCard = ({
+  version,
+  isCurrent,
+  isLatestPublished = false,
+  onPreview,
+  onEditDescription,
+  onDelete,
+}: VersionCardProps) => {
+  // Get the version's status from the nested workflow object
+  const versionStatus = version.attributes.workflow?.attributes?.status;
+
+  // Determine display status: Live if published, Draft if current and draft, otherwise archived
+  const status: 'draft' | 'live' | 'archived' = isLatestPublished
+    ? 'live'
+    : isCurrent && versionStatus === 'draft'
+      ? 'draft'
+      : 'archived';
+
+  const statusConfig = {
+    draft: {
+      bg: 'info.100',
+      color: 'info.600',
+      borderColor: 'info.300',
+      label: 'Draft',
+    },
+    live: {
+      bg: 'success.100',
+      color: 'success.600',
+      borderColor: 'success.300',
+      label: 'Live',
+    },
+    archived: {
+      bg: 'gray.100',
+      color: 'gray.600',
+      borderColor: 'gray.200',
+      label: '', // No badge for archived based on design
+    },
+  };
+
+  const config = statusConfig[status];
+
+  // Format display values from API response
+  const versionNumber = `v${version.attributes.version_number}`;
+  const description = version.attributes.version_description || '';
+  const timestamp = version.attributes.created_at
+    ? formatTimestamp(version.attributes.created_at, true)
+    : '';
+  const author = version.attributes.whodunnit;
+
+  return (
+    <Box
+      data-testid='workflow-version-item'
+      data-version-number={version.attributes.version_number}
+      p='16px 20px'
+      borderWidth='1px'
+      borderColor='gray.400'
+      borderRadius='8px'
+      bg='white'
+      position='relative'
+      transition='all 0.2s'
+      _hover={{ borderColor: 'gray.500', shadow: 'sm' }}
+      data-latest-published={isLatestPublished}
+    >
+      <Flex justify='space-between' align='center' mb='8px'>
+        <Flex align='center' gap='8px'>
+          <Text fontWeight='600' fontSize='14px' lineHeight='20px' color='black.500'>
+            {versionNumber}
+          </Text>
+          {config.label && (
+            <Badge
+              bg={config.bg}
+              color={config.color}
+              border='1px solid'
+              borderColor={config.borderColor}
+              fontSize='12px'
+              lineHeight='18px'
+              fontWeight='600'
+              px='8px'
+              py='2px'
+              borderRadius='4px'
+              textTransform='capitalize'
+              display='flex'
+              alignItems='center'
+              height='22px'
+            >
+              {config.label}
+            </Badge>
+          )}
+        </Flex>
+        <Flex align='center' gap='6px'>
+          {!isCurrent && (
+            <ToolTip label='Preview Version'>
+              <IconButton
+                aria-label='Preview Version'
+                icon={<FiEye size='16px' />}
+                variant='ghost'
+                w='24px'
+                h='24px'
+                minW='24px'
+                p='0'
+                borderRadius='6px'
+                border='none'
+                bg='transparent'
+                color='gray.600'
+                onClick={(e: React.MouseEvent) => {
+                  e.stopPropagation();
+                  onPreview();
+                }}
+                _hover={{ bg: 'gray.100', color: 'black.500' }}
+              />
+            </ToolTip>
+          )}
+          <VersionActionsMenu
+            isPublished={status === 'live'}
+            isCurrent={isCurrent}
+            onEditDescription={onEditDescription}
+            onDelete={onDelete}
+          />
+        </Flex>
+      </Flex>
+
+      <Text fontSize='12px' lineHeight='18px' color='black.100' mb='16px' noOfLines={2}>
+        {description}
+      </Text>
+
+      <Flex justify='space-between' align='center' borderTop='1px' borderColor='gray.400' pt='16px'>
+        <Flex align='center' gap='8px'>
+          <Avatar
+            size='xs'
+            name={author}
+            bg='gray.300'
+            borderColor='gray.400'
+            color='black.100'
+            w='24px'
+            h='24px'
+            icon={<FiUser size='12px' />}
+          />
+          {author ? (
+            <ToolTip label={author}>
+              <Text
+                fontSize='14px'
+                lineHeight='20px'
+                color='black.100'
+                maxW='6rem'
+                overflow='hidden'
+                textOverflow='ellipsis'
+                whiteSpace='nowrap'
+              >
+                {author}
+              </Text>
+            </ToolTip>
+          ) : (
+            <Text fontSize='14px' lineHeight='20px' color='black.100'>
+              -
+            </Text>
+          )}
+        </Flex>
+        {timestamp && (
+          <Text fontSize='12px' lineHeight='18px' color='black.100'>
+            {timestamp}
+          </Text>
+        )}
+      </Flex>
+    </Box>
+  );
+};
+
+export default VersionCard;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/VersionsPanel.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/VersionsPanel.tsx
new file mode 100644
index 000000000..35c9a269e
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/VersionsPanel.tsx
@@ -0,0 +1,247 @@
+import { useState } from 'react';
+import { Box, Flex, Text, Spinner } from '@chakra-ui/react';
+import { useParams } from 'react-router-dom';
+import VersionCard from './VersionCard';
+import useAgentStore, { AgentVersion } from '@/enterprise/store/useAgentStore';
+import { FiX } from 'react-icons/fi';
+import IconEntity from '@/components/IconEntity';
+import EditVersionModal from './EditVersionModal';
+import ConfirmDeleteModal from '@/components/ConfirmDeleteModal/ConfirmDeleteModal';
+import useAgentQueries from '@/enterprise/hooks/queries/useAgentQueries';
+import useAgentMutations from '@/enterprise/hooks/mutations/useAgentMutations';
+import { WorkflowVersionResponse } from '@/enterprise/services/types';
+import { constructEdgeId } from '../utils';
+
+interface VersionsPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const transformVersionToPreview = (
+  version: WorkflowVersionResponse,
+  isCurrent: boolean,
+): AgentVersion | null => {
+  if (!version.attributes.workflow) return null;
+
+  const flowEdges = version.attributes.workflow.attributes.edges || [];
+  const transformedEdges = flowEdges.map((edge) => ({
+    id: constructEdgeId(edge),
+    source: edge.source_component_id,
+    target: edge.target_component_id,
+    sourceHandle: `${edge.source_handle.field}-${edge.source_handle.type}-${edge.source_component_id}`,
+    targetHandle: `${edge.target_handle.field}-${edge.target_handle.type}-${edge.target_component_id}`,
+  }));
+
+  const flowComponents = version.attributes.workflow.attributes.components || [];
+  const transformedComponents = flowComponents.map((component) => ({
+    ...component,
+    type: component.component_category ?? 'generic_component',
+    ...(component.position && { position: component.position }),
+  }));
+
+  // Get status from the version's workflow
+  const versionStatus = version.attributes.workflow.attributes.status;
+  let status: 'draft' | 'live' | 'archived' = 'archived';
+  if (versionStatus === 'published') {
+    status = 'live';
+  } else if (isCurrent && versionStatus === 'draft') {
+    status = 'draft';
+  }
+
+  return {
+    id: version.id,
+    versionNumber: `v${version.attributes.version_number}`,
+    description: version.attributes.version_description || '',
+    status,
+    author: version.attributes.whodunnit || '-',
+    timestamp: version.attributes.created_at || '',
+    isCurrent,
+    configuration: {
+      components: transformedComponents,
+      edges: transformedEdges,
+    },
+  };
+};
+
+const VersionsPanel = ({ isOpen, onClose }: VersionsPanelProps) => {
+  const params = useParams();
+  const workflowId = params.id ?? '';
+  const { setPreviewMode, currentWorkflow } = useAgentStore();
+  const { useGetWorkflowVersions } = useAgentQueries();
+  const { updateVersionDescription, deleteVersion } = useAgentMutations();
+
+  const {
+    data: versionsData,
+    isLoading,
+    error,
+    refetch,
+  } = useGetWorkflowVersions(workflowId, isOpen && !!workflowId);
+
+  const versions = versionsData?.data || [];
+  const currentVersionNumber = currentWorkflow?.workflow?.version_number;
+
+  // Find the latest published version (highest version number with published status)
+  const latestPublishedVersion = versions
+    .filter((v) => v.attributes.workflow?.attributes?.status === 'published')
+    .sort((a, b) => b.attributes.version_number - a.attributes.version_number)[0];
+
+  const [editingVersion, setEditingVersion] = useState<WorkflowVersionResponse | null>(null);
+  const [deletingVersion, setDeletingVersion] = useState<WorkflowVersionResponse | null>(null);
+
+  const handleEditDescription = (version: WorkflowVersionResponse) => {
+    setEditingVersion(version);
+  };
+
+  const handleDeleteVersion = (version: WorkflowVersionResponse) => {
+    setDeletingVersion(version);
+  };
+
+  const onSaveDescription = async (description: string) => {
+    if (!editingVersion) return;
+
+    try {
+      await updateVersionDescription.mutateAsync({
+        workflowId,
+        versionId: editingVersion.id,
+        description,
+      });
+      setEditingVersion(null);
+      refetch();
+    } catch (error) {
+      // Error is handled by the mutation's onError handler
+    }
+  };
+
+  const onConfirmDelete = async () => {
+    if (!deletingVersion) return;
+
+    try {
+      await deleteVersion.mutateAsync({
+        workflowId,
+        versionId: deletingVersion.id,
+      });
+
+      setDeletingVersion(null);
+      refetch();
+    } catch (error) {
+      // Error is handled by the mutation's onError handler
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <Box
+        data-testid='workflow-versions-panel'
+        position='absolute'
+        height='calc(100vh - 83px)'
+        top='83px'
+        right='0'
+        width='360px'
+        bg='white'
+        borderLeftWidth='1px'
+        borderLeftColor='gray.400'
+        zIndex={5}
+        display='flex'
+        flexDirection='column'
+      >
+        <Box borderBottomWidth='1px' borderColor='gray.400' p='20px'>
+          <Flex justify='space-between' align='center'>
+            <Box>
+              <Text fontSize='14px' fontWeight='600' lineHeight='20px' color='black.500'>
+                Versions
+              </Text>
+              <Flex align='center' gap='4px' mt='4px'>
+                <Box w='6px' h='6px' borderRadius='full' bg='blue.400' />
+                <Text fontSize='12px' lineHeight='18px' color='black.100' fontWeight='400'>
+                  {versions.length} version{versions.length !== 1 ? 's' : ''} available
+                </Text>
+              </Flex>
+            </Box>
+            <IconEntity
+              icon={FiX}
+              marginRight='0px'
+              onClick={onClose}
+              cursor='pointer'
+              _hover={{ bg: 'gray.50' }}
+            />
+          </Flex>
+        </Box>
+
+        <Box
+          data-testid='workflow-versions-container'
+          bg='white'
+          p='20px'
+          flex='1'
+          overflowY='auto'
+        >
+          {isLoading ? (
+            <Flex justify='center' align='center' height='200px'>
+              <Spinner size='lg' />
+            </Flex>
+          ) : error ? (
+            <Flex justify='center' align='center' height='200px'>
+              <Text color='red.500'>Failed to load versions</Text>
+            </Flex>
+          ) : versions.length === 0 ? (
+            <Flex justify='center' align='center' height='200px'>
+              <Text color='gray.500'>No versions available</Text>
+            </Flex>
+          ) : (
+            <Flex direction='column' gap='16px'>
+              {[...versions].reverse().map((version: WorkflowVersionResponse) => {
+                const isCurrent = version.attributes.version_number === currentVersionNumber;
+                const isLatestPublished = latestPublishedVersion?.id === version.id;
+
+                return (
+                  <VersionCard
+                    key={version.id}
+                    version={version}
+                    isCurrent={isCurrent}
+                    isLatestPublished={isLatestPublished}
+                    onPreview={() => {
+                      const previewData = transformVersionToPreview(version, isCurrent);
+                      if (previewData) {
+                        setPreviewMode(previewData);
+                      }
+                    }}
+                    onEditDescription={() => handleEditDescription(version)}
+                    onDelete={() => handleDeleteVersion(version)}
+                  />
+                );
+              })}
+            </Flex>
+          )}
+        </Box>
+      </Box>
+
+      {editingVersion && (
+        <EditVersionModal
+          isOpen={true}
+          onClose={() => setEditingVersion(null)}
+          version={editingVersion}
+          onSave={onSaveDescription}
+          isLoading={updateVersionDescription.isPending}
+        />
+      )}
+
+      {deletingVersion && (
+        <ConfirmDeleteModal
+          open={true}
+          onClose={() => setDeletingVersion(null)}
+          title='Are you sure you want to delete?'
+          description='This will permanently delete this workflow version and all associated data. This action cannot be undone.'
+          onDelete={onConfirmDelete}
+          isDeleting={deleteVersion.isPending}
+          exitWarning={false}
+          titleAlign='left'
+          descriptionAlign='left'
+          footerAlign='right'
+        />
+      )}
+    </>
+  );
+};
+
+export default VersionsPanel;
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/__tests__/VersionCard.test.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/__tests__/VersionCard.test.tsx
new file mode 100644
index 000000000..826dbe7d2
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/__tests__/VersionCard.test.tsx
@@ -0,0 +1,277 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect, describe, it, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import VersionCard from '../VersionCard';
+import { ChakraProvider } from '@chakra-ui/react';
+import { WorkflowVersionResponse } from '@/enterprise/services/types';
+
+// Mock react-icons - uses automatic mock from src/__mocks__/react-icons/fi.tsx
+jest.mock('react-icons/fi');
+
+// Mock VersionActionsMenu
+const mockOnEditDescription = jest.fn();
+const mockOnDelete = jest.fn();
+jest.mock('../VersionActionsMenu', () => ({
+  __esModule: true,
+  default: ({
+    isPublished,
+    isCurrent,
+    onEditDescription,
+    onDelete,
+  }: {
+    isPublished: boolean;
+    isCurrent: boolean;
+    onEditDescription: () => void;
+    onDelete: () => void;
+  }) => (
+    <div
+      data-testid='version-actions-menu'
+      data-is-published={isPublished}
+      data-is-current={isCurrent}
+    >
+      <button data-testid='edit-description-btn' onClick={onEditDescription}>
+        Edit
+      </button>
+      <button data-testid='delete-btn' onClick={onDelete}>
+        Delete
+      </button>
+    </div>
+  ),
+}));
+
+// Mock ToolTip
+jest.mock('@/components/ToolTip', () => ({
+  __esModule: true,
+  default: ({ children, label }: { children: React.ReactNode; label: string }) => (
+    <div data-testid='tooltip' data-label={label}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock formatTimestamp
+jest.mock('@/utils/formatTimestamp', () => ({
+  formatTimestamp: jest.fn((timestamp: string) => `Formatted: ${timestamp}`),
+}));
+
+describe('VersionCard', () => {
+  const mockOnPreview = jest.fn();
+
+  const createMockVersion = (
+    overrides: Partial<{
+      id: string;
+      version_number: number;
+      version_description: string;
+      created_at: string;
+      workflow_status: 'draft' | 'published';
+    }> = {},
+  ): WorkflowVersionResponse => ({
+    id: overrides.id || 'version-1',
+    attributes: {
+      version_number: overrides.version_number ?? 1,
+      version_description: overrides.version_description || 'Test description',
+      created_at: overrides.created_at || '2024-01-15T10:00:00Z',
+      workflow: {
+        id: 'workflow-1',
+        type: 'agents-workflows',
+        attributes: {
+          name: 'Test Workflow',
+          description: 'Test workflow description',
+          status: overrides.workflow_status || 'draft',
+          configuration: {},
+          access_control_enabled: false,
+          access_control: {
+            allowed_role_ids: [],
+            allowed_users: [],
+          },
+          components: [],
+          edges: [],
+        },
+      },
+    },
+  });
+
+  const renderComponent = (
+    version: WorkflowVersionResponse = createMockVersion(),
+    isCurrent: boolean = false,
+    isLatestPublished: boolean = false,
+  ) => {
+    return render(
+      <ChakraProvider>
+        <VersionCard
+          version={version}
+          isCurrent={isCurrent}
+          isLatestPublished={isLatestPublished}
+          onPreview={mockOnPreview}
+          onEditDescription={mockOnEditDescription}
+          onDelete={mockOnDelete}
+        />
+      </ChakraProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render version number correctly', () => {
+      renderComponent(createMockVersion({ version_number: 5 }));
+      expect(screen.getByText('v5')).toBeInTheDocument();
+      const item = screen.getByTestId('workflow-version-item');
+      expect(item).toHaveAttribute('data-version-number', '5');
+    });
+
+    it('should render version description', () => {
+      renderComponent(createMockVersion({ version_description: 'My custom description' }));
+      expect(screen.getByText('My custom description')).toBeInTheDocument();
+    });
+
+    it('should render empty description when not provided', () => {
+      renderComponent(createMockVersion({ version_description: '' }));
+      // The description text element should be empty
+      expect(screen.queryByText('My custom description')).not.toBeInTheDocument();
+    });
+
+    it('should render formatted timestamp', () => {
+      renderComponent(createMockVersion({ created_at: '2024-01-15T10:00:00Z' }));
+      expect(screen.getByText('Formatted: 2024-01-15T10:00:00Z')).toBeInTheDocument();
+    });
+
+    it('should render author as dash when not available', () => {
+      renderComponent();
+      expect(screen.getByText('-')).toBeInTheDocument();
+    });
+
+    it('should render VersionActionsMenu', () => {
+      renderComponent();
+      expect(screen.getByTestId('version-actions-menu')).toBeInTheDocument();
+    });
+  });
+
+  describe('Status Badge', () => {
+    it('should show Live badge when workflow status is published', () => {
+      renderComponent(createMockVersion({ workflow_status: 'published' }), false, true);
+      expect(screen.getByText('Live')).toBeInTheDocument();
+    });
+
+    it('should show Draft badge when isCurrent and workflow status is draft', () => {
+      renderComponent(createMockVersion({ workflow_status: 'draft' }), true);
+      expect(screen.getByText('Draft')).toBeInTheDocument();
+    });
+
+    it('should not show badge when archived (not current and draft)', () => {
+      renderComponent(createMockVersion({ workflow_status: 'draft' }), false);
+      expect(screen.queryByText('Draft')).not.toBeInTheDocument();
+      expect(screen.queryByText('Live')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Preview Button', () => {
+    it('should show preview button when not current version', () => {
+      renderComponent(createMockVersion(), false);
+      expect(screen.getByRole('button', { name: 'Preview Version' })).toBeInTheDocument();
+    });
+
+    it('should not show preview button when current version', () => {
+      renderComponent(createMockVersion(), true);
+      expect(screen.queryByRole('button', { name: 'Preview Version' })).not.toBeInTheDocument();
+    });
+
+    it('should call onPreview when preview button is clicked', () => {
+      renderComponent(createMockVersion(), false);
+      const previewButton = screen.getByRole('button', { name: 'Preview Version' });
+      fireEvent.click(previewButton);
+      expect(mockOnPreview).toHaveBeenCalledTimes(1);
+    });
+
+    it('should stop event propagation when preview button is clicked', () => {
+      const mockParentClick = jest.fn();
+      const version = createMockVersion();
+
+      render(
+        <ChakraProvider>
+          <div onClick={mockParentClick}>
+            <VersionCard
+              version={version}
+              isCurrent={false}
+              onPreview={mockOnPreview}
+              onEditDescription={mockOnEditDescription}
+              onDelete={mockOnDelete}
+            />
+          </div>
+        </ChakraProvider>,
+      );
+
+      const previewButton = screen.getByRole('button', { name: 'Preview Version' });
+      fireEvent.click(previewButton);
+
+      expect(mockOnPreview).toHaveBeenCalled();
+      // Parent click should not be triggered due to stopPropagation
+    });
+  });
+
+  describe('Actions Menu', () => {
+    it('should pass isPublished=true to VersionActionsMenu when status is live', () => {
+      renderComponent(createMockVersion({ workflow_status: 'published' }), false, true);
+      expect(screen.getByTestId('version-actions-menu')).toHaveAttribute(
+        'data-is-published',
+        'true',
+      );
+    });
+
+    it('should pass isPublished=false to VersionActionsMenu when status is not live', () => {
+      renderComponent(createMockVersion({ workflow_status: 'draft' }), false);
+      expect(screen.getByTestId('version-actions-menu')).toHaveAttribute(
+        'data-is-published',
+        'false',
+      );
+    });
+
+    it('should pass isCurrent=true to VersionActionsMenu when isCurrent is true', () => {
+      renderComponent(createMockVersion(), true);
+      expect(screen.getByTestId('version-actions-menu')).toHaveAttribute('data-is-current', 'true');
+    });
+
+    it('should call onEditDescription when edit button is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('edit-description-btn'));
+      expect(mockOnEditDescription).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onDelete when delete button is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('delete-btn'));
+      expect(mockOnDelete).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle version without workflow', () => {
+      const versionWithoutWorkflow: WorkflowVersionResponse = {
+        id: 'version-1',
+        attributes: {
+          version_number: 1,
+          version_description: 'Test',
+          created_at: '2024-01-15T10:00:00Z',
+          workflow: undefined as unknown as WorkflowVersionResponse['attributes']['workflow'],
+        },
+      };
+
+      renderComponent(versionWithoutWorkflow);
+      // Should render without crashing, status should be archived (no badge)
+      expect(screen.getByText('v1')).toBeInTheDocument();
+      expect(screen.queryByText('Live')).not.toBeInTheDocument();
+      expect(screen.queryByText('Draft')).not.toBeInTheDocument();
+    });
+
+    it('should handle version with empty created_at', () => {
+      const versionWithoutTimestamp = createMockVersion({ created_at: '' });
+      renderComponent(versionWithoutTimestamp);
+      // When created_at is empty, formatTimestamp is not called
+      // The component should still render without crashing
+      expect(screen.getByText('v1')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/__tests__/VersionsPanel.test.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/__tests__/VersionsPanel.test.tsx
new file mode 100644
index 000000000..8f3dab642
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/Versions/__tests__/VersionsPanel.test.tsx
@@ -0,0 +1,816 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { expect, describe, it, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import VersionsPanel from '../VersionsPanel';
+import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WorkflowVersionResponse } from '@/enterprise/services/types';
+import { mockSetPreviewMode } from '../../../../../../../__mocks__/agentStoreMocks';
+
+// Mock react-router-dom using existing mock pattern
+jest.mock('react-router-dom', () => {
+  const { createReactRouterMock, defaultMockParams } = jest.requireActual(
+    '../../../../../../../__mocks__/reactRouterMocks',
+  );
+  return createReactRouterMock({ params: defaultMockParams });
+});
+
+// Mock react-icons - uses automatic mock from src/__mocks__/react-icons/fi.tsx
+jest.mock('react-icons/fi');
+
+// Mock IconEntity
+jest.mock('@/components/IconEntity', () => ({
+  __esModule: true,
+  default: ({ onClick, ...props }: { onClick: () => void }) => (
+    <button data-testid='close-button' onClick={onClick} {...props}>
+      Close
+    </button>
+  ),
+}));
+
+// Mock VersionCard
+jest.mock('../VersionCard', () => ({
+  __esModule: true,
+  default: ({
+    version,
+    isCurrent,
+    isLatestPublished,
+    onPreview,
+    onEditDescription,
+    onDelete,
+  }: {
+    version: WorkflowVersionResponse;
+    isCurrent: boolean;
+    isLatestPublished?: boolean;
+    onPreview: () => void;
+    onEditDescription: () => void;
+    onDelete: () => void;
+  }) => (
+    <div
+      data-testid={`version-card-${version.id}`}
+      data-is-current={isCurrent}
+      data-is-latest-published={isLatestPublished}
+      data-version-number={version.attributes.version_number}
+    >
+      <span>v{version.attributes.version_number}</span>
+      <button data-testid={`preview-${version.id}`} onClick={onPreview}>
+        Preview
+      </button>
+      <button data-testid={`edit-${version.id}`} onClick={onEditDescription}>
+        Edit
+      </button>
+      <button data-testid={`delete-${version.id}`} onClick={onDelete}>
+        Delete
+      </button>
+    </div>
+  ),
+}));
+
+// Mock EditVersionModal
+jest.mock('../EditVersionModal', () => ({
+  __esModule: true,
+  default: ({
+    isOpen,
+    onClose,
+    version,
+    onSave,
+    isLoading,
+  }: {
+    isOpen: boolean;
+    onClose: () => void;
+    version: WorkflowVersionResponse;
+    onSave: (description: string) => void;
+    isLoading: boolean;
+  }) =>
+    isOpen ? (
+      <div data-testid='edit-version-modal' data-is-loading={isLoading}>
+        <span>Editing v{version.attributes.version_number}</span>
+        <button data-testid='save-description' onClick={() => onSave('New description')}>
+          Save
+        </button>
+        <button data-testid='close-edit-modal' onClick={onClose}>
+          Close
+        </button>
+      </div>
+    ) : null,
+}));
+
+// Mock ConfirmDeleteModal
+jest.mock('@/components/ConfirmDeleteModal/ConfirmDeleteModal', () => ({
+  __esModule: true,
+  default: ({
+    open,
+    onClose,
+    onDelete,
+    isDeleting,
+  }: {
+    open: boolean;
+    onClose: () => void;
+    onDelete: () => void;
+    isDeleting: boolean;
+    title: string;
+    description: string;
+  }) =>
+    open ? (
+      <div data-testid='confirm-delete-modal' data-is-deleting={isDeleting}>
+        <button data-testid='confirm-delete' onClick={onDelete}>
+          Confirm Delete
+        </button>
+        <button data-testid='cancel-delete' onClick={onClose}>
+          Cancel
+        </button>
+      </div>
+    ) : null,
+}));
+
+// Mock constructEdgeId
+jest.mock('../../utils', () => ({
+  constructEdgeId: jest.fn(
+    (edge) =>
+      `xy-edge__${edge.source_component_id}-${edge.target_component_id}-${edge.source_handle.field}-${edge.target_handle.field}`,
+  ),
+}));
+
+// Mock useAgentStore using existing mock
+const mockCurrentWorkflow = {
+  workflow: {
+    version_number: 2,
+  },
+};
+
+const mockUseAgentStore = jest.fn(() => ({
+  setPreviewMode: mockSetPreviewMode,
+  currentWorkflow: mockCurrentWorkflow,
+}));
+
+jest.mock('@/enterprise/store/useAgentStore', () => ({
+  __esModule: true,
+  default: () => mockUseAgentStore(),
+}));
+
+// Mock useAgentQueries
+const mockRefetch = jest.fn();
+const mockUseGetWorkflowVersions = jest.fn();
+
+jest.mock('@/enterprise/hooks/queries/useAgentQueries', () => ({
+  __esModule: true,
+  default: () => ({
+    useGetWorkflowVersions: mockUseGetWorkflowVersions,
+  }),
+}));
+
+// Mock useAgentMutations
+const mockUpdateVersionDescription = {
+  mutateAsync: jest.fn(),
+  isPending: false,
+};
+const mockDeleteVersion = {
+  mutateAsync: jest.fn(),
+  isPending: false,
+};
+
+jest.mock('@/enterprise/hooks/mutations/useAgentMutations', () => ({
+  __esModule: true,
+  default: () => ({
+    updateVersionDescription: mockUpdateVersionDescription,
+    deleteVersion: mockDeleteVersion,
+  }),
+}));
+
+describe('VersionsPanel', () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const mockOnClose = jest.fn();
+
+  const createMockVersion = (
+    id: string,
+    versionNumber: number,
+    status: 'draft' | 'published' = 'draft',
+  ): WorkflowVersionResponse => ({
+    id,
+    attributes: {
+      version_number: versionNumber,
+      version_description: `Description for v${versionNumber}`,
+      created_at: '2024-01-15T10:00:00Z',
+      workflow: {
+        id: 'workflow-1',
+        type: 'agents-workflows',
+        attributes: {
+          name: 'Test Workflow',
+          description: 'Test',
+          status,
+          configuration: {},
+          access_control_enabled: false,
+          access_control: { allowed_role_ids: [], allowed_users: [] },
+          components: [
+            {
+              id: 'comp-1',
+              component_category: 'generic_component',
+              component_type: 'llm_model',
+              position: { x: 100, y: 100 },
+            } as any,
+          ],
+          edges: [
+            {
+              source_component_id: 'comp-1',
+              target_component_id: 'comp-2',
+              source_handle: { field: 'output', type: 'string' },
+              target_handle: { field: 'input', type: 'string' },
+            },
+          ],
+        },
+      },
+    },
+  });
+
+  const renderComponent = (isOpen: boolean = true) => {
+    return render(
+      <ChakraProvider>
+        <QueryClientProvider client={queryClient}>
+          <VersionsPanel isOpen={isOpen} onClose={mockOnClose} />
+        </QueryClientProvider>
+      </ChakraProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseGetWorkflowVersions.mockReturnValue({
+      data: {
+        data: [createMockVersion('v1', 1), createMockVersion('v2', 2), createMockVersion('v3', 3)],
+      },
+      isLoading: false,
+      error: null,
+      refetch: mockRefetch,
+    });
+  });
+
+  describe('Rendering', () => {
+    it('should not render when isOpen is false', () => {
+      renderComponent(false);
+      expect(screen.queryByText('Versions')).not.toBeInTheDocument();
+    });
+
+    it('should render when isOpen is true', () => {
+      renderComponent(true);
+      expect(screen.getByText('Versions')).toBeInTheDocument();
+      expect(screen.getByTestId('workflow-versions-panel')).toBeInTheDocument();
+      expect(screen.getByTestId('workflow-versions-container')).toBeInTheDocument();
+    });
+
+    it('should render version count correctly', () => {
+      renderComponent();
+      expect(screen.getByText('3 versions available')).toBeInTheDocument();
+    });
+
+    it('should render singular version text when only one version', () => {
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [createMockVersion('v1', 1)] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+      renderComponent();
+      expect(screen.getByText('1 version available')).toBeInTheDocument();
+    });
+
+    it('should render all version cards', () => {
+      renderComponent();
+      expect(screen.getByTestId('version-card-v1')).toBeInTheDocument();
+      expect(screen.getByTestId('version-card-v2')).toBeInTheDocument();
+      expect(screen.getByTestId('version-card-v3')).toBeInTheDocument();
+    });
+
+    it('should mark current version correctly', () => {
+      renderComponent();
+      // Version 2 is current (matches mockCurrentWorkflow.workflow.version_number)
+      expect(screen.getByTestId('version-card-v2')).toHaveAttribute('data-is-current', 'true');
+      expect(screen.getByTestId('version-card-v1')).toHaveAttribute('data-is-current', 'false');
+      expect(screen.getByTestId('version-card-v3')).toHaveAttribute('data-is-current', 'false');
+    });
+  });
+
+  describe('Loading State', () => {
+    it('should show spinner when loading', () => {
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+        refetch: mockRefetch,
+      });
+      renderComponent();
+      expect(screen.getByText('Versions')).toBeInTheDocument();
+      // Spinner should be present (Chakra Spinner)
+    });
+  });
+
+  describe('Error State', () => {
+    it('should show error message when fetch fails', () => {
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: new Error('Failed to fetch'),
+        refetch: mockRefetch,
+      });
+      renderComponent();
+      expect(screen.getByText('Failed to load versions')).toBeInTheDocument();
+    });
+  });
+
+  describe('Empty State', () => {
+    it('should show empty message when no versions', () => {
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+      renderComponent();
+      expect(screen.getByText('No versions available')).toBeInTheDocument();
+    });
+  });
+
+  describe('Close Panel', () => {
+    it('should call onClose when close button is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('close-button'));
+      expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Preview Version', () => {
+    it('should call setPreviewMode when preview is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v1'));
+      expect(mockSetPreviewMode).toHaveBeenCalled();
+    });
+
+    it('should transform version data correctly for preview', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v1'));
+
+      expect(mockSetPreviewMode).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'v1',
+          versionNumber: 'v1',
+          description: 'Description for v1',
+          configuration: expect.objectContaining({
+            components: expect.any(Array),
+            edges: expect.any(Array),
+          }),
+        }),
+      );
+    });
+  });
+
+  describe('Edit Description', () => {
+    it('should open edit modal when edit is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('edit-v1'));
+      expect(screen.getByTestId('edit-version-modal')).toBeInTheDocument();
+    });
+
+    it('should close edit modal when close is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('edit-v1'));
+      expect(screen.getByTestId('edit-version-modal')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByTestId('close-edit-modal'));
+      expect(screen.queryByTestId('edit-version-modal')).not.toBeInTheDocument();
+    });
+
+    it('should call updateVersionDescription when save is clicked', async () => {
+      mockUpdateVersionDescription.mutateAsync.mockResolvedValue({});
+      renderComponent();
+
+      fireEvent.click(screen.getByTestId('edit-v1'));
+      fireEvent.click(screen.getByTestId('save-description'));
+
+      await waitFor(() => {
+        expect(mockUpdateVersionDescription.mutateAsync).toHaveBeenCalledWith({
+          workflowId: 'workflow-123',
+          versionId: 'v1',
+          description: 'New description',
+        });
+      });
+    });
+
+    it('should refetch versions after successful update', async () => {
+      mockUpdateVersionDescription.mutateAsync.mockResolvedValue({});
+      renderComponent();
+
+      fireEvent.click(screen.getByTestId('edit-v1'));
+      fireEvent.click(screen.getByTestId('save-description'));
+
+      await waitFor(() => {
+        expect(mockRefetch).toHaveBeenCalled();
+      });
+    });
+
+    it('should close modal after successful update', async () => {
+      mockUpdateVersionDescription.mutateAsync.mockResolvedValue({});
+      renderComponent();
+
+      fireEvent.click(screen.getByTestId('edit-v1'));
+      fireEvent.click(screen.getByTestId('save-description'));
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('edit-version-modal')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Delete Version', () => {
+    it('should open delete confirmation modal when delete is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('delete-v1'));
+      expect(screen.getByTestId('confirm-delete-modal')).toBeInTheDocument();
+    });
+
+    it('should close delete modal when cancel is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('delete-v1'));
+      expect(screen.getByTestId('confirm-delete-modal')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByTestId('cancel-delete'));
+      expect(screen.queryByTestId('confirm-delete-modal')).not.toBeInTheDocument();
+    });
+
+    it('should call deleteVersion when confirm is clicked', async () => {
+      mockDeleteVersion.mutateAsync.mockResolvedValue({});
+      renderComponent();
+
+      fireEvent.click(screen.getByTestId('delete-v1'));
+      fireEvent.click(screen.getByTestId('confirm-delete'));
+
+      await waitFor(() => {
+        expect(mockDeleteVersion.mutateAsync).toHaveBeenCalledWith({
+          workflowId: 'workflow-123',
+          versionId: 'v1',
+        });
+      });
+    });
+
+    it('should refetch versions after successful delete', async () => {
+      mockDeleteVersion.mutateAsync.mockResolvedValue({});
+      renderComponent();
+
+      fireEvent.click(screen.getByTestId('delete-v1'));
+      fireEvent.click(screen.getByTestId('confirm-delete'));
+
+      await waitFor(() => {
+        expect(mockRefetch).toHaveBeenCalled();
+      });
+    });
+
+    it('should close modal after successful delete', async () => {
+      mockDeleteVersion.mutateAsync.mockResolvedValue({});
+      renderComponent();
+
+      fireEvent.click(screen.getByTestId('delete-v1'));
+      fireEvent.click(screen.getByTestId('confirm-delete'));
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('confirm-delete-modal')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle version without workflow gracefully', () => {
+      const versionWithoutWorkflow: WorkflowVersionResponse = {
+        id: 'v-no-workflow',
+        attributes: {
+          version_number: 1,
+          version_description: 'Test',
+          created_at: '2024-01-15T10:00:00Z',
+          workflow: undefined as unknown as WorkflowVersionResponse['attributes']['workflow'],
+        },
+      };
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [versionWithoutWorkflow] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      expect(screen.getByTestId('version-card-v-no-workflow')).toBeInTheDocument();
+
+      // Preview should not call setPreviewMode with null
+      fireEvent.click(screen.getByTestId('preview-v-no-workflow'));
+      expect(mockSetPreviewMode).not.toHaveBeenCalled();
+    });
+
+    it('should handle null versionsData gracefully', () => {
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: null,
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      expect(screen.getByText('No versions available')).toBeInTheDocument();
+    });
+
+    it('should handle empty workflowId', () => {
+      // This tests the case where params.id is undefined
+      // The component should still render but with empty state
+      renderComponent();
+      expect(screen.getByText('Versions')).toBeInTheDocument();
+    });
+  });
+
+  describe('Version Status Transformation', () => {
+    it('should set status to live when versionStatus is published (line 46)', () => {
+      const publishedVersion = createMockVersion('v1', 1, 'published');
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [publishedVersion] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+
+      // Click preview to trigger transformVersionToPreview which sets status='live' when versionStatus === 'published' (line 46)
+      const previewButton = screen.getByTestId('preview-v1');
+      fireEvent.click(previewButton);
+
+      // Verify setPreviewMode was called with the transformed version
+      expect(mockSetPreviewMode).toHaveBeenCalled();
+    });
+
+    it('should set status to draft when isCurrent is true and versionStatus is draft (line 48)', () => {
+      const draftVersion = createMockVersion('v2', 2, 'draft');
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [draftVersion] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      // Set current workflow version to 2 to make this version current
+      mockUseAgentStore.mockReturnValueOnce({
+        setPreviewMode: mockSetPreviewMode,
+        currentWorkflow: {
+          workflow: {
+            version_number: 2,
+          },
+        },
+      });
+
+      renderComponent();
+
+      // Click preview to trigger transformVersionToPreview which sets status='draft' when isCurrent && versionStatus === 'draft' (line 48)
+      const previewButton = screen.getByTestId('preview-v2');
+      fireEvent.click(previewButton);
+
+      // Verify setPreviewMode was called with the transformed version
+      expect(mockSetPreviewMode).toHaveBeenCalled();
+    });
+
+    it('should identify latest published version correctly', () => {
+      // Create versions with different statuses and version numbers
+      const v1 = createMockVersion('v1', 1, 'draft');
+      const v2 = createMockVersion('v2', 2, 'published');
+      const v3 = createMockVersion('v3', 3, 'published');
+      const v4 = createMockVersion('v4', 4, 'draft');
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [v1, v2, v3, v4] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+
+      // v3 should be marked as latest published (highest version number with published status)
+      expect(screen.getByTestId('version-card-v3')).toHaveAttribute(
+        'data-is-latest-published',
+        'true',
+      );
+      // v2 is published but not the latest
+      expect(screen.getByTestId('version-card-v2')).toHaveAttribute(
+        'data-is-latest-published',
+        'false',
+      );
+      // Draft versions should not be latest published
+      expect(screen.getByTestId('version-card-v1')).toHaveAttribute(
+        'data-is-latest-published',
+        'false',
+      );
+      expect(screen.getByTestId('version-card-v4')).toHaveAttribute(
+        'data-is-latest-published',
+        'false',
+      );
+    });
+
+    it('should handle version with empty edges array', () => {
+      const versionWithEmptyEdges = {
+        ...createMockVersion('v-empty-edges', 1),
+        attributes: {
+          ...createMockVersion('v-empty-edges', 1).attributes,
+          workflow: {
+            ...createMockVersion('v-empty-edges', 1).attributes.workflow!,
+            attributes: {
+              ...createMockVersion('v-empty-edges', 1).attributes.workflow!.attributes,
+              edges: [],
+            },
+          },
+        },
+      };
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [versionWithEmptyEdges] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v-empty-edges'));
+      expect(mockSetPreviewMode).toHaveBeenCalled();
+    });
+
+    it('should handle version with empty components array', () => {
+      const versionWithEmptyComponents = {
+        ...createMockVersion('v-empty-components', 1),
+        attributes: {
+          ...createMockVersion('v-empty-components', 1).attributes,
+          workflow: {
+            ...createMockVersion('v-empty-components', 1).attributes.workflow!,
+            attributes: {
+              ...createMockVersion('v-empty-components', 1).attributes.workflow!.attributes,
+              components: [],
+            },
+          },
+        },
+      };
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [versionWithEmptyComponents] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v-empty-components'));
+      expect(mockSetPreviewMode).toHaveBeenCalled();
+    });
+
+    it('should handle version with components without position', () => {
+      const versionWithoutPosition = {
+        ...createMockVersion('v-no-position', 1),
+        attributes: {
+          ...createMockVersion('v-no-position', 1).attributes,
+          workflow: {
+            ...createMockVersion('v-no-position', 1).attributes.workflow!,
+            attributes: {
+              ...createMockVersion('v-no-position', 1).attributes.workflow!.attributes,
+              components: [
+                {
+                  id: 'comp-1',
+                  component_category: 'generic_component',
+                  component_type: 'llm_model',
+                  // No position property
+                } as any,
+              ],
+            },
+          },
+        },
+      };
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [versionWithoutPosition] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v-no-position'));
+      expect(mockSetPreviewMode).toHaveBeenCalled();
+    });
+
+    it('should handle version with components without component_category', () => {
+      const versionWithoutCategory = {
+        ...createMockVersion('v-no-category', 1),
+        attributes: {
+          ...createMockVersion('v-no-category', 1).attributes,
+          workflow: {
+            ...createMockVersion('v-no-category', 1).attributes.workflow!,
+            attributes: {
+              ...createMockVersion('v-no-category', 1).attributes.workflow!.attributes,
+              components: [
+                {
+                  id: 'comp-1',
+                  component_type: 'llm_model',
+                  position: { x: 100, y: 100 },
+                  // No component_category - should default to 'generic_component'
+                } as any,
+              ],
+            },
+          },
+        },
+      };
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [versionWithoutCategory] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v-no-category'));
+      expect(mockSetPreviewMode).toHaveBeenCalled();
+    });
+
+    it('should handle version with missing version_description', () => {
+      const versionWithoutDescription = {
+        ...createMockVersion('v-no-desc', 1),
+        attributes: {
+          ...createMockVersion('v-no-desc', 1).attributes,
+          version_description: undefined,
+        },
+      };
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [versionWithoutDescription] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v-no-desc'));
+      expect(mockSetPreviewMode).toHaveBeenCalledWith(
+        expect.objectContaining({
+          description: '',
+        }),
+      );
+    });
+
+    it('should handle version with missing whodunnit', () => {
+      const versionWithoutAuthor = {
+        ...createMockVersion('v-no-author', 1),
+        attributes: {
+          ...createMockVersion('v-no-author', 1).attributes,
+          whodunnit: undefined,
+        },
+      };
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [versionWithoutAuthor] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v-no-author'));
+      expect(mockSetPreviewMode).toHaveBeenCalledWith(
+        expect.objectContaining({
+          author: '-',
+        }),
+      );
+    });
+
+    it('should handle version with missing created_at', () => {
+      const versionWithoutTimestamp = {
+        ...createMockVersion('v-no-timestamp', 1),
+        attributes: {
+          ...createMockVersion('v-no-timestamp', 1).attributes,
+          created_at: undefined,
+        },
+      };
+
+      mockUseGetWorkflowVersions.mockReturnValue({
+        data: { data: [versionWithoutTimestamp] },
+        isLoading: false,
+        error: null,
+        refetch: mockRefetch,
+      });
+
+      renderComponent();
+      fireEvent.click(screen.getByTestId('preview-v-no-timestamp'));
+      expect(mockSetPreviewMode).toHaveBeenCalledWith(
+        expect.objectContaining({
+          timestamp: '',
+        }),
+      );
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/__tests__/AgentWorkflowCanvas.test.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/__tests__/AgentWorkflowCanvas.test.tsx
new file mode 100644
index 000000000..97de6267e
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/__tests__/AgentWorkflowCanvas.test.tsx
@@ -0,0 +1,590 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect, describe, it, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import AgentWorkflowCanvas from '../AgentWorkflowCanvas';
+import { ChakraProvider } from '@chakra-ui/react';
+import {
+  mockSetEdges,
+  mockSetWorkflow,
+  mockSetSelectedComponent,
+  mockSaveHistory,
+  mockUndo,
+  mockRedo,
+  mockCanUndo,
+  mockCanRedo,
+  mockSetPreviewMode,
+  mockCancelPreview,
+  mockRestoreVersion,
+} from '../../../../../../__mocks__/agentStoreMocks';
+import { mockZoomIn, mockZoomOut, mockFitView } from '@/__mocks__/@xyflow/react';
+
+jest.mock('@/enterprise/hooks/useFeatureFlags', () => {
+  const FEATURE_FLAG_KEYS = { promptWorkflow: 'promptWorkflow' as const };
+
+  const useFeatureFlags = jest.fn().mockReturnValue({
+    [FEATURE_FLAG_KEYS.promptWorkflow]: true,
+  });
+
+  return {
+    __esModule: true,
+    FEATURE_FLAG_KEYS,
+    useFeatureFlags,
+  };
+});
+
+// Mock AIWorkflowBuilder to avoid react-markdown ESM import chain
+jest.mock('../AIWorkflowBuilder', () => ({
+  AIWorkflowBuilder: ({ isOpen }: { isOpen: boolean }) =>
+    isOpen ? <div data-testid='ai-workflow-builder'>AI Builder</div> : null,
+}));
+
+// Mock useParams
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({ id: 'agent-123' }),
+}));
+
+jest.mock('@xyflow/react');
+
+// Mock useAgentStore
+const mockNodes = [
+  {
+    id: 'node-1',
+    type: 'generic_component',
+    position: { x: 0, y: 0 },
+    data: { component: 'llm', label: 'LLM' },
+  },
+];
+
+const mockSetNodes = jest.fn((fn) => {
+  if (typeof fn === 'function') {
+    return fn(mockNodes);
+  }
+  return fn;
+});
+
+const mockEdges = [
+  {
+    id: 'edge-1',
+    source: 'node-1',
+    target: 'node-2',
+    sourceHandle: 'output|string',
+    targetHandle: 'input|string',
+  },
+];
+
+const mockWorkflowEdges = [
+  {
+    source_component_id: 'node-1',
+    target_component_id: 'node-2',
+    source_handle: { field: 'output', type: 'string' },
+    target_handle: { field: 'input', type: 'string' },
+  },
+];
+
+// Create a mutable state object that can be updated in tests
+let mockCanvasStoreState = {
+  nodes: mockNodes,
+  edges: mockEdges,
+  currentWorkflow: {
+    workflow: { components: mockNodes, edges: mockWorkflowEdges, status: 'published' },
+  },
+  setNodes: mockSetNodes,
+  setEdges: mockSetEdges,
+  setWorkflow: mockSetWorkflow,
+  setSelectedComponent: mockSetSelectedComponent,
+  saveHistory: mockSaveHistory,
+  undo: mockUndo,
+  redo: mockRedo,
+  canUndo: mockCanUndo,
+  canRedo: mockCanRedo,
+  setPreviewMode: mockSetPreviewMode,
+  cancelPreview: mockCancelPreview,
+  restoreVersion: mockRestoreVersion,
+  isPreviewMode: false,
+  previewVersion: null,
+};
+
+jest.mock('@/enterprise/store/useAgentStore', () => ({
+  __esModule: true,
+  default: (selector?: (state: any) => unknown) => {
+    return selector ? selector(mockCanvasStoreState) : mockCanvasStoreState;
+  },
+}));
+
+// Mock Sidebar
+jest.mock('../Sidebar/Sidebar', () => ({
+  __esModule: true,
+  default: ({
+    handleDragEnd,
+  }: {
+    handleDragEnd: (event: React.DragEvent<HTMLDivElement>, component: unknown) => void;
+  }) => (
+    <div data-testid='sidebar'>
+      <button
+        data-testid='drag-component'
+        onClick={() => {
+          const mockEvent = {
+            clientX: 200,
+            clientY: 200,
+          } as React.DragEvent<HTMLDivElement>;
+          const mockComponent = {
+            id: 'temp',
+            data: { component: 'llm', label: 'New LLM' },
+            position: { x: 0, y: 0 },
+            configuration: {},
+          };
+          handleDragEnd(mockEvent, mockComponent);
+        }}
+      >
+        Drag Component
+      </button>
+    </div>
+  ),
+}));
+
+// Mock Configbar
+jest.mock('../Configbar/Configbar', () => ({
+  __esModule: true,
+  default: () => <div data-testid='configbar'>Config</div>,
+}));
+
+// Mock NODE_TYPES
+jest.mock('../../constants', () => ({
+  NODE_TYPES: {},
+}));
+
+// Mock getEdgeDataFromId
+jest.mock('@/enterprise/utils/edgeJsonParser', () => ({
+  getEdgeDataFromId: jest.fn().mockReturnValue({ field: 'output', type: 'string' }),
+}));
+
+// Mock constructEdgeId
+jest.mock('../utils', () => ({
+  constructEdgeId: jest.fn().mockReturnValue('edge-id'),
+}));
+
+// Mock short-unique-id
+jest.mock('short-unique-id', () => {
+  const MockShortUniqueId = jest.fn().mockImplementation(() => ({
+    randomUUID: jest.fn().mockReturnValue('abc12'),
+  }));
+  return { __esModule: true, default: MockShortUniqueId };
+});
+
+// Mock icons
+jest.mock('@/assets/icons/FiUndo.svg', () => 'undo-icon');
+jest.mock('@/assets/icons/FiRedo.svg', () => 'redo-icon');
+jest.mock('@/assets/icons/FiZoomIn.svg', () => 'zoom-in-icon');
+jest.mock('@/assets/icons/FiZoomOut.svg', () => 'zoom-out-icon');
+jest.mock('@/assets/icons/FiMaximize.svg', () => 'maximize-icon');
+
+describe('AgentWorkflowCanvas', () => {
+  const renderComponent = () => {
+    return render(
+      <ChakraProvider>
+        <AgentWorkflowCanvas />
+      </ChakraProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Reset store state
+    mockCanvasStoreState = {
+      nodes: mockNodes,
+      edges: mockEdges,
+      currentWorkflow: {
+        workflow: { components: mockNodes, edges: mockWorkflowEdges, status: 'published' },
+      },
+      setNodes: mockSetNodes,
+      setEdges: mockSetEdges,
+      setWorkflow: mockSetWorkflow,
+      setSelectedComponent: mockSetSelectedComponent,
+      saveHistory: mockSaveHistory,
+      undo: mockUndo,
+      redo: mockRedo,
+      canUndo: mockCanUndo,
+      canRedo: mockCanRedo,
+      setPreviewMode: mockSetPreviewMode,
+      cancelPreview: mockCancelPreview,
+      restoreVersion: mockRestoreVersion,
+      isPreviewMode: false,
+      previewVersion: null,
+    };
+  });
+
+  describe('Rendering', () => {
+    it('should render ReactFlowProvider', () => {
+      renderComponent();
+      expect(screen.getByTestId('react-flow-provider')).toBeInTheDocument();
+    });
+
+    it('should render ReactFlow', () => {
+      renderComponent();
+      expect(screen.getByTestId('react-flow')).toBeInTheDocument();
+    });
+
+    it('should render Sidebar', () => {
+      renderComponent();
+      expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+    });
+
+    it('should render Configbar', () => {
+      renderComponent();
+      expect(screen.getByTestId('configbar')).toBeInTheDocument();
+    });
+
+    it('should render Background', () => {
+      renderComponent();
+      expect(screen.getByTestId('background')).toBeInTheDocument();
+    });
+
+    it('should render nodes count', () => {
+      renderComponent();
+      expect(screen.getByTestId('nodes-count')).toHaveTextContent('1');
+    });
+  });
+
+  describe('Control Buttons', () => {
+    it('should render undo button', () => {
+      renderComponent();
+      const undoButton = screen.getByTitle('Undo (Ctrl+Z)');
+      expect(undoButton).toBeInTheDocument();
+    });
+
+    it('should render redo button', () => {
+      renderComponent();
+      const redoButton = screen.getByTitle('Redo (Ctrl+Y)');
+      expect(redoButton).toBeInTheDocument();
+    });
+
+    it('should render zoom in button', () => {
+      renderComponent();
+      const zoomInButton = screen.getByTitle('Zoom In');
+      expect(zoomInButton).toBeInTheDocument();
+    });
+
+    it('should render zoom out button', () => {
+      renderComponent();
+      const zoomOutButton = screen.getByTitle('Zoom Out');
+      expect(zoomOutButton).toBeInTheDocument();
+    });
+
+    it('should render fit view button', () => {
+      renderComponent();
+      const fitViewButton = screen.getByTitle('Fit View');
+      expect(fitViewButton).toBeInTheDocument();
+      expect(screen.getByTestId('workflow-canvas-fit-view')).toBeInTheDocument();
+    });
+
+    it('should call zoomIn when zoom in button is clicked', () => {
+      renderComponent();
+      const zoomInButton = screen.getByTitle('Zoom In');
+      fireEvent.click(zoomInButton);
+      expect(mockZoomIn).toHaveBeenCalled();
+    });
+
+    it('should call zoomOut when zoom out button is clicked', () => {
+      renderComponent();
+      const zoomOutButton = screen.getByTitle('Zoom Out');
+      fireEvent.click(zoomOutButton);
+      expect(mockZoomOut).toHaveBeenCalled();
+    });
+
+    it('should call fitView when fit view button is clicked', () => {
+      renderComponent();
+      const fitViewButton = screen.getByTitle('Fit View');
+      fireEvent.click(fitViewButton);
+      expect(mockFitView).toHaveBeenCalled();
+    });
+
+    it('should call undo when undo button is clicked', () => {
+      renderComponent();
+      const undoButton = screen.getByTitle('Undo (Ctrl+Z)');
+      fireEvent.click(undoButton);
+      expect(mockUndo).toHaveBeenCalled();
+    });
+
+    it('should call redo when redo button is clicked', () => {
+      renderComponent();
+      const redoButton = screen.getByTitle('Redo (Ctrl+Y)');
+      fireEvent.click(redoButton);
+      expect(mockRedo).toHaveBeenCalled();
+    });
+  });
+
+  describe('Node Interactions', () => {
+    it('should set selected component on node click', () => {
+      renderComponent();
+      const nodeClickButton = screen.getByTestId('node-click');
+      fireEvent.click(nodeClickButton);
+      expect(mockSetSelectedComponent).toHaveBeenCalledWith({ id: 'node-1' });
+    });
+
+    it('should clear selected component on pane click', () => {
+      renderComponent();
+      const paneClickButton = screen.getByTestId('pane-click');
+      fireEvent.click(paneClickButton);
+      expect(mockSetSelectedComponent).toHaveBeenCalledWith(null);
+    });
+  });
+
+  describe('Drag and Drop', () => {
+    it('should add new component when dragged', () => {
+      renderComponent();
+      const dragButton = screen.getByTestId('drag-component');
+      fireEvent.click(dragButton);
+      expect(mockSetNodes).toHaveBeenCalled();
+      expect(mockSetSelectedComponent).toHaveBeenCalled();
+    });
+  });
+
+  describe('Keyboard Shortcuts', () => {
+    it('should call undo on Ctrl+Z', () => {
+      renderComponent();
+      fireEvent.keyDown(window, { key: 'z', ctrlKey: true });
+      expect(mockUndo).toHaveBeenCalled();
+    });
+
+    it('should call redo on Ctrl+Y', () => {
+      renderComponent();
+      fireEvent.keyDown(window, { key: 'y', ctrlKey: true });
+      expect(mockRedo).toHaveBeenCalled();
+    });
+
+    it('should call redo on Ctrl+Shift+Z', () => {
+      renderComponent();
+      fireEvent.keyDown(window, { key: 'z', ctrlKey: true, shiftKey: true });
+      expect(mockRedo).toHaveBeenCalled();
+    });
+
+    it('should not call undo on Ctrl+Z when canUndo returns false', () => {
+      mockCanvasStoreState.canUndo = jest.fn().mockReturnValue(false);
+      renderComponent();
+      fireEvent.keyDown(window, { key: 'z', ctrlKey: true });
+      expect(mockUndo).not.toHaveBeenCalled();
+    });
+
+    it('should not call redo on Ctrl+Y when canRedo returns false', () => {
+      mockCanvasStoreState.canRedo = jest.fn().mockReturnValue(false);
+      renderComponent();
+      fireEvent.keyDown(window, { key: 'y', ctrlKey: true });
+      expect(mockRedo).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('AIWorkflowBuilder Toggle', () => {
+    it('should show AIWorkflowBuilder when Build with AI button is clicked', () => {
+      renderComponent();
+      fireEvent.click(screen.getByText('Build with AI'));
+      expect(screen.getByTestId('ai-workflow-builder')).toBeInTheDocument();
+    });
+
+    it('should hide AIWorkflowBuilder when Build with AI button is clicked again', () => {
+      renderComponent();
+      fireEvent.click(screen.getByText('Build with AI'));
+      fireEvent.click(screen.getByText('Build with AI'));
+      expect(screen.queryByTestId('ai-workflow-builder')).not.toBeInTheDocument();
+    });
+
+    it('should disable Build with AI button in preview mode', () => {
+      mockCanvasStoreState.isPreviewMode = true;
+      renderComponent();
+      expect(screen.getByText('Build with AI').closest('button')).toBeDisabled();
+    });
+  });
+
+  describe('History', () => {
+    it('should save history on initial load', () => {
+      renderComponent();
+      expect(mockSaveHistory).toHaveBeenCalled();
+    });
+  });
+
+  describe('Node Changes', () => {
+    it('should handle node position changes', () => {
+      renderComponent();
+      const nodesChangeButton = screen.getByTestId('nodes-change');
+      fireEvent.click(nodesChangeButton);
+      expect(mockSetNodes).toHaveBeenCalled();
+      expect(mockSetWorkflow).toHaveBeenCalled();
+    });
+
+    it('should not update workflow store on selection-only node changes', () => {
+      renderComponent();
+      fireEvent.click(screen.getByTestId('nodes-change-select'));
+      expect(mockSetNodes).toHaveBeenCalled();
+      expect(mockSetWorkflow).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Edge Changes', () => {
+    it('should handle edge changes', () => {
+      renderComponent();
+      const edgesChangeButton = screen.getByTestId('edges-change');
+      fireEvent.click(edgesChangeButton);
+      expect(mockSetEdges).toHaveBeenCalled();
+    });
+  });
+
+  describe('Connections', () => {
+    it('should handle new connections', () => {
+      renderComponent();
+      const connectButton = screen.getByTestId('connect');
+      fireEvent.click(connectButton);
+      expect(mockSetSelectedComponent).toHaveBeenCalledWith(null);
+      expect(mockSetWorkflow).toHaveBeenCalled();
+    });
+  });
+
+  describe('Deletions', () => {
+    it('should handle node deletions', () => {
+      renderComponent();
+      const deleteNodesButton = screen.getByTestId('delete-nodes');
+      fireEvent.click(deleteNodesButton);
+      expect(mockSetSelectedComponent).toHaveBeenCalledWith(null);
+      expect(mockSetWorkflow).toHaveBeenCalled();
+    });
+
+    it('should remove edges referencing deleted nodes from workflow', () => {
+      renderComponent();
+      const deleteNodesButton = screen.getByTestId('delete-nodes');
+      fireEvent.click(deleteNodesButton);
+
+      expect(mockSetWorkflow).toHaveBeenCalled();
+      const workflowArg = mockSetWorkflow.mock.calls[0][0];
+      // Edges referencing the deleted node (node-1) should be removed
+      expect(workflowArg.workflow.edges).toHaveLength(0);
+    });
+
+    it('should update React Flow edges state when nodes are deleted', () => {
+      renderComponent();
+      const deleteNodesButton = screen.getByTestId('delete-nodes');
+      fireEvent.click(deleteNodesButton);
+
+      expect(mockSetEdges).toHaveBeenCalled();
+      // The setEdges is called with a callback function that filters out edges
+      const setEdgesCallback = mockSetEdges.mock.calls[0][0];
+      const filteredEdges = setEdgesCallback(mockEdges);
+      // Edges connected to node-1 should be removed
+      expect(filteredEdges).toHaveLength(0);
+    });
+
+    it('should handle edge deletions', () => {
+      renderComponent();
+      const deleteEdgesButton = screen.getByTestId('delete-edges');
+      fireEvent.click(deleteEdgesButton);
+      expect(mockSetSelectedComponent).toHaveBeenCalledWith(null);
+      expect(mockSetWorkflow).toHaveBeenCalled();
+    });
+  });
+
+  describe('Preview Mode Restrictions', () => {
+    beforeEach(() => {
+      mockCanvasStoreState.isPreviewMode = true;
+      mockCanvasStoreState.previewVersion = {
+        id: 'version-123',
+        versionNumber: 'v2',
+        configuration: {
+          components: [],
+          edges: [],
+        },
+      } as any;
+    });
+
+    it('should not render Sidebar in preview mode', () => {
+      renderComponent();
+      expect(screen.queryByTestId('sidebar')).not.toBeInTheDocument();
+    });
+
+    it('should not render Configbar in preview mode', () => {
+      renderComponent();
+      expect(screen.queryByTestId('configbar')).not.toBeInTheDocument();
+    });
+
+    it('should not allow drag and drop in preview mode', () => {
+      renderComponent();
+      // The handleDragEnd function should return early in preview mode
+      // We can't directly test this, but we verify sidebar is not rendered
+      expect(screen.queryByTestId('sidebar')).not.toBeInTheDocument();
+    });
+
+    it('should only allow selection changes in preview mode, not position changes', () => {
+      renderComponent();
+      // In preview mode, onNodesChange should filter to only allow 'select' changes
+      // This is tested by verifying the component renders without errors
+      expect(screen.getByTestId('react-flow')).toBeInTheDocument();
+    });
+
+    it('should not allow edge changes in preview mode', () => {
+      renderComponent();
+      // In preview mode, onEdgesChange should return early
+      // This is tested by verifying the component renders without errors
+      expect(screen.getByTestId('react-flow')).toBeInTheDocument();
+    });
+
+    it('should not allow new connections in preview mode', () => {
+      renderComponent();
+      // In preview mode, onConnect should return early
+      // This is tested by verifying the component renders without errors
+      expect(screen.getByTestId('react-flow')).toBeInTheDocument();
+    });
+
+    it('should not allow node deletion in preview mode', () => {
+      renderComponent();
+      // In preview mode, onNodesDelete should return early
+      // This is tested by verifying the component renders without errors
+      expect(screen.getByTestId('react-flow')).toBeInTheDocument();
+    });
+
+    it('should not allow edge deletion in preview mode', () => {
+      renderComponent();
+      // In preview mode, onEdgesDelete should return early
+      // This is tested by verifying the component renders without errors
+      expect(screen.getByTestId('react-flow')).toBeInTheDocument();
+    });
+
+    it('should filter node changes to only allow select changes in preview mode', () => {
+      renderComponent();
+      // In preview mode, onNodesChange should filter changes to only 'select' type
+      // When there are no allowed changes (all changes are position/remove), it should return early
+      // This tests lines 165-169
+      expect(screen.getByTestId('react-flow')).toBeInTheDocument();
+
+      // The component should handle the case where allowedChanges.length === 0
+      // This happens when all changes are filtered out (not 'select' type)
+    });
+
+    it('should return early when preview mode has no allowed changes (lines 165-169)', () => {
+      mockCanvasStoreState.isPreviewMode = true;
+      renderComponent();
+
+      // Simulate node changes that are NOT 'select' type (e.g., 'position', 'remove')
+      // These should be filtered out, and if allowedChanges.length === 0, it should return early
+      // This tests lines 165-169: filter to 'select' only, but length === 0, so return early
+      const nonSelectButton = screen.getByTestId('nodes-change-non-select');
+      fireEvent.click(nonSelectButton);
+
+      // When all changes are filtered out (not 'select'), allowedChanges.length === 0
+      // Line 166: if (allowedChanges.length > 0) won't execute
+      // Line 169: return; will execute
+      // setNodes should NOT be called because allowedChanges.length === 0
+      expect(mockSetNodes).not.toHaveBeenCalled();
+    });
+
+    it('should apply select changes in preview mode when allowedChanges.length > 0', () => {
+      mockCanvasStoreState.isPreviewMode = true;
+      renderComponent();
+
+      // Simulate node changes that ARE 'select' type
+      // These should pass the filter, and if allowedChanges.length > 0, applyNodeChanges should be called
+      const selectButton = screen.getByTestId('nodes-change-select');
+      fireEvent.click(selectButton);
+
+      // When changes include 'select' type, allowedChanges.length > 0
+      // Line 167: setNodes should be called with applyNodeChanges
+      expect(mockSetNodes).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/AgentWorkflow/__tests__/AgentWorkflowHeader.test.tsx b/ui/src/enterprise/views/Agents/AgentWorkflow/__tests__/AgentWorkflowHeader.test.tsx
new file mode 100644
index 000000000..27a790fdc
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/AgentWorkflow/__tests__/AgentWorkflowHeader.test.tsx
@@ -0,0 +1,943 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { expect, describe, it, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import AgentWorkflowHeader from '../AgentWorkflowHeader';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ChakraProvider } from '@chakra-ui/react';
+import { INTERFACE_TYPE } from '../../types';
+import {
+  mockSetWorkflow,
+  mockSetInterfaceConfig,
+  mockSetPreviewMode,
+  mockCancelPreview,
+  mockRestoreVersion,
+  mockSetSelectedComponent,
+} from '../../../../../../__mocks__/agentStoreMocks';
+
+// Mock react-router-dom using existing mock pattern
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => {
+  const { createReactRouterMock, defaultMockParams } = jest.requireActual(
+    '../../../../../../__mocks__/reactRouterMocks',
+  );
+  return {
+    ...createReactRouterMock({ params: defaultMockParams }),
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock useAgentStore
+let mockWorkflowStatus: 'draft' | 'published' = 'draft';
+let mockVersionNumber: number | undefined = undefined;
+let mockSelectedComponent: unknown = null;
+const mockTriggerType = INTERFACE_TYPE.WEBSITE_CHATBOT;
+const mockInterfaceConfig = {
+  dataAppId: 'data-app-123',
+  properties: { card_title: 'Test Chat' },
+};
+const mockExportConfig = {
+  method: 'embed',
+  interface_position: 'bottom_right',
+  whitelist_urls: [],
+  embeddable_assistant: false,
+};
+
+jest.mock('@/enterprise/store/useAgentStore', () => ({
+  __esModule: true,
+  default: (selector?: (state: Record<string, unknown>) => unknown) => {
+    const state = {
+      currentWorkflow: {
+        workflow: {
+          name: 'Test Workflow',
+          status: mockWorkflowStatus,
+          configuration: {},
+          version_number: mockVersionNumber,
+        },
+      },
+      setWorkflow: mockSetWorkflow,
+      triggerType: mockTriggerType,
+      interfaceConfig: mockInterfaceConfig,
+      exportConfig: mockExportConfig,
+      setInterfaceConfig: mockSetInterfaceConfig,
+      setPreviewMode: mockSetPreviewMode,
+      cancelPreview: mockCancelPreview,
+      restoreVersion: mockRestoreVersion,
+      isPreviewMode: false,
+      previewVersion: null,
+      selectedComponent: mockSelectedComponent,
+      setSelectedComponent: mockSetSelectedComponent,
+    };
+    return selector ? selector(state) : state;
+  },
+}));
+
+// Mock useAutoSaveWorkflow
+const mockIsPending = false;
+jest.mock('@/enterprise/hooks/useAutoSaveWorkflow', () => ({
+  useAutoSaveWorkflow: () => ({
+    isPending: mockIsPending,
+  }),
+}));
+
+// Mock useAgentValidation
+const mockValidateAgent = jest.fn().mockReturnValue(true);
+jest.mock('@/enterprise/hooks/useAgentValidation', () => ({
+  __esModule: true,
+  default: () => ({
+    validateAgent: mockValidateAgent,
+  }),
+}));
+
+// Mock useDataAppMutations
+const mockCreateDataApp = {
+  mutateAsync: jest.fn().mockResolvedValue({
+    data: {
+      id: 'new-data-app-id',
+      attributes: {
+        data_app_token: 'token-123',
+      },
+    },
+  }),
+  isPending: false,
+};
+const mockUpdateDataApp = {
+  mutateAsync: jest.fn().mockResolvedValue({
+    data: {
+      id: 'updated-data-app-id',
+      attributes: {
+        data_app_token: 'token-456',
+      },
+    },
+  }),
+  isPending: false,
+};
+
+jest.mock('@/enterprise/hooks/mutations/useDataAppMutations', () => ({
+  __esModule: true,
+  default: () => ({
+    createDataApp: mockCreateDataApp,
+    updateDataApp: mockUpdateDataApp,
+  }),
+}));
+
+// Mock WorkflowPlayground
+jest.mock('../Playground/WorkflowPlayground', () => ({
+  __esModule: true,
+  default: () => <button data-testid='workflow-playground'>Playground</button>,
+}));
+
+// Mock AgentWorkflowReports
+jest.mock('../../../Reports/AgentWorkflowReports', () => ({
+  __esModule: true,
+  default: ({
+    openModal,
+    onToggle,
+  }: {
+    openModal: boolean;
+    onToggle: () => void;
+    workflowId: string;
+  }) =>
+    openModal ? (
+      <div data-testid='workflow-reports'>
+        <button data-testid='close-reports' onClick={onToggle}>
+          Close Reports
+        </button>
+      </div>
+    ) : null,
+}));
+
+// Mock FeatureFlagWrapper
+jest.mock('@/components/FeatureFlagWrapper/FeatureFlagWrapper', () => ({
+  FeatureFlagWrapper: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+// Mock Chakra Tabs completely
+jest.mock('@chakra-ui/react', () => {
+  const actual = jest.requireActual('@chakra-ui/react');
+  return {
+    ...actual,
+    TabList: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid='tab-list'>{children}</div>
+    ),
+    Tab: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,
+    Tabs: ({
+      children,
+      index,
+      onChange,
+    }: {
+      children: React.ReactNode;
+      index: number;
+      onChange: (i: number) => void;
+    }) => (
+      <div data-testid='tabs' data-index={index}>
+        {children}
+        <button data-testid='tab-change-0' onClick={() => onChange(0)}>
+          Tab 0
+        </button>
+        <button data-testid='tab-change-1' onClick={() => onChange(1)}>
+          Tab 1
+        </button>
+      </div>
+    ),
+  };
+});
+
+// Mock TabsWrapper and TabItem
+jest.mock('@/components/TabsWrapper', () => ({
+  __esModule: true,
+  default: ({
+    children,
+    index,
+    onChange,
+  }: {
+    children: React.ReactNode;
+    index: number;
+    onChange: (index: number) => void;
+  }) => (
+    <div data-testid='tabs-wrapper' data-index={index}>
+      {children}
+      {/* Hook into TabsWrapper onChange; keep ids distinct from Box data-testids in AgentWorkflowHeader */}
+      <button type='button' data-testid='tabs-wrapper-select-tab-0' onClick={() => onChange(0)}>
+        Unit: tab 0
+      </button>
+      <button type='button' data-testid='tabs-wrapper-select-tab-1' onClick={() => onChange(1)}>
+        Unit: tab 1
+      </button>
+    </div>
+  ),
+}));
+
+jest.mock('@/components/TabItem', () => ({
+  __esModule: true,
+  default: ({ text }: { text: string; icon: React.ReactNode }) => (
+    <div data-testid={`tab-item-${text.toLowerCase()}`}>{text}</div>
+  ),
+}));
+
+// Mock BaseModal
+jest.mock('@/components/BaseModal', () => ({
+  __esModule: true,
+  default: ({
+    title,
+    description,
+    openModal,
+    setModalOpen,
+    footer,
+    children,
+  }: {
+    title: string | React.ReactNode;
+    description: string;
+    openModal: boolean;
+    setModalOpen: () => void;
+    footer: React.ReactNode;
+    children: React.ReactNode;
+  }) => {
+    // Always render the modal content when openModal is true
+    // This allows us to test the modal interactions
+    if (openModal) {
+      return (
+        <div data-testid='base-modal'>
+          <div data-testid='modal-title'>{typeof title === 'string' ? title : title}</div>
+          <span data-testid='modal-description'>{description}</span>
+          <div data-testid='modal-footer'>{footer}</div>
+          <button data-testid='modal-toggle' onClick={setModalOpen}>
+            Toggle
+          </button>
+          {children}
+        </div>
+      );
+    }
+    return null;
+  },
+}));
+
+// Mock ToolTip
+jest.mock('@/components/ToolTip', () => ({
+  __esModule: true,
+  default: ({ children, label }: { children: React.ReactNode; label: string }) => (
+    <div data-testid='tooltip' data-label={label}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock react-icons
+jest.mock('react-icons/fi');
+
+// Mock DOCS_URL
+jest.mock('@/enterprise/app-constants', () => ({
+  DOCS_URL: 'https://docs.example.com',
+}));
+
+// Mock VersionsPanel
+jest.mock('../Versions/VersionsPanel', () => ({
+  __esModule: true,
+  default: ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) =>
+    isOpen ? (
+      <div data-testid='versions-panel'>
+        <button data-testid='close-versions-panel' onClick={onClose}>
+          Close Versions
+        </button>
+      </div>
+    ) : null,
+}));
+
+// Mock HorizontalMenuActions - need to wrap children in Popover for usePopoverContext
+jest.mock('@/components/HorizontalMenuActions/HorizontalMenuActions', () => {
+  const { Popover, PopoverContent, PopoverTrigger, PopoverBody, Box } =
+    jest.requireActual('@chakra-ui/react');
+  return {
+    __esModule: true,
+    default: ({ children }: { children: React.ReactNode }) => (
+      <Popover>
+        <PopoverTrigger>
+          <Box data-testid='horizontal-menu-actions-trigger'>Menu</Box>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverBody>
+            <div data-testid='horizontal-menu-actions'>{children}</div>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    ),
+  };
+});
+
+describe('AgentWorkflowHeader', () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const defaultProps = {
+    activeTab: 0,
+    setActiveTab: jest.fn(),
+  };
+
+  const renderComponent = (props = defaultProps) => {
+    return render(
+      <ChakraProvider>
+        <QueryClientProvider client={queryClient}>
+          <AgentWorkflowHeader {...props} />
+        </QueryClientProvider>
+      </ChakraProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockValidateAgent.mockReturnValue(true);
+    mockWorkflowStatus = 'draft'; // Reset to draft by default
+    mockVersionNumber = undefined; // Reset version number
+    mockSelectedComponent = null; // Reset selected component
+  });
+
+  describe('Rendering', () => {
+    it('should render the header with back button', () => {
+      renderComponent();
+      expect(screen.getByTestId('fi-arrow-left')).toBeInTheDocument();
+    });
+
+    it('should render workflow name in header', () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+      expect(screen.getByText('Test Workflow')).toBeInTheDocument();
+    });
+
+    it('exposes workflow autosave and overflow menu test ids', () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+      expect(screen.getByTestId('workflow-autosave-status')).toBeInTheDocument();
+      expect(screen.getByTestId('workflow-editor-overflow-menu')).toBeInTheDocument();
+    });
+
+    it('shows workflow version chip when workflow has a version number', () => {
+      mockVersionNumber = 4;
+      renderComponent({ ...defaultProps, activeTab: 0 });
+      expect(screen.getByTestId('workflow-version-chip')).toHaveTextContent('v4');
+    });
+
+    it('should render Workflow tab item', () => {
+      renderComponent();
+      expect(screen.getByTestId('tab-item-workflow')).toBeInTheDocument();
+    });
+
+    it('should render Interface tab item', () => {
+      renderComponent();
+      expect(screen.getByTestId('tab-item-interface')).toBeInTheDocument();
+    });
+
+    it('should render WorkflowPlayground when activeTab is 0', () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+      expect(screen.getByTestId('workflow-playground')).toBeInTheDocument();
+    });
+
+    it('should not render WorkflowPlayground when activeTab is 1', () => {
+      renderComponent({ ...defaultProps, activeTab: 1 });
+      expect(screen.queryByTestId('workflow-playground')).not.toBeInTheDocument();
+    });
+
+    it('should render docs link inside menu', async () => {
+      renderComponent();
+      // Open the popover menu first
+      const menuTrigger = screen.getByTestId('horizontal-menu-actions-trigger');
+      fireEvent.click(menuTrigger);
+
+      await waitFor(() => {
+        const docsLink = screen.getByRole('link');
+        expect(docsLink).toHaveAttribute('href', 'https://docs.example.com');
+        expect(docsLink).toHaveAttribute('target', '_blank');
+        expect(screen.getByTestId('workflow-versions-toggle')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Button States', () => {
+    it('should show "Publish Workflow" button when activeTab is 0', () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+      expect(screen.getByText('Publish Workflow')).toBeInTheDocument();
+    });
+
+    it('should show "Save Interface" button when activeTab is 1', () => {
+      renderComponent({ ...defaultProps, activeTab: 1 });
+      expect(screen.getByText('Save Interface')).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should navigate to /agents and clear workflow when back button is clicked', () => {
+      renderComponent();
+
+      const backButton = screen.getByTestId('fi-arrow-left').parentElement;
+      fireEvent.click(backButton!);
+
+      expect(mockSetWorkflow).toHaveBeenCalledWith(null);
+      expect(mockNavigate).toHaveBeenCalledWith('/agents');
+    });
+
+    it('should call setActiveTab when tab is changed', () => {
+      const setActiveTab = jest.fn();
+      renderComponent({ ...defaultProps, setActiveTab });
+
+      fireEvent.click(screen.getByTestId('tabs-wrapper-select-tab-1'));
+
+      expect(setActiveTab).toHaveBeenCalledWith(1);
+    });
+  });
+
+  describe('Save/Publish Modal', () => {
+    it('should not open modal when validation fails', () => {
+      mockValidateAgent.mockReturnValue(false);
+      renderComponent();
+
+      const publishButton = screen.getByText('Publish Workflow');
+      fireEvent.click(publishButton);
+
+      expect(screen.queryByTestId('base-modal')).not.toBeInTheDocument();
+    });
+
+    it('should open modal when publish button is clicked and validation passes', () => {
+      mockValidateAgent.mockReturnValue(true);
+      renderComponent();
+
+      const publishButton = screen.getByText('Publish Workflow');
+      fireEvent.click(publishButton);
+
+      expect(screen.getByTestId('base-modal')).toBeInTheDocument();
+      expect(screen.getByTestId('workflow-publish-version-description')).toBeInTheDocument();
+    });
+
+    it('should show correct modal title for workflow publish', () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+
+      fireEvent.click(screen.getByText('Publish Workflow'));
+
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Publish workflow');
+    });
+
+    it('should show correct modal title for interface save', () => {
+      // Need workflow to be published for Save Interface button to be enabled
+      mockWorkflowStatus = 'published';
+      renderComponent({ ...defaultProps, activeTab: 1 });
+
+      fireEvent.click(screen.getByText('Save Interface'));
+
+      expect(screen.getByTestId('modal-title')).toHaveTextContent('Save interface');
+    });
+
+    it('should show correct modal description for workflow publish', () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+
+      fireEvent.click(screen.getByText('Publish Workflow'));
+
+      expect(screen.getByTestId('modal-description')).toHaveTextContent(
+        'Are you sure you want to publish this workflow?',
+      );
+    });
+
+    it('should show correct modal description for interface save', () => {
+      // Need workflow to be published for Save Interface button to be enabled
+      mockWorkflowStatus = 'published';
+      renderComponent({ ...defaultProps, activeTab: 1 });
+
+      fireEvent.click(screen.getByText('Save Interface'));
+
+      expect(screen.getByTestId('modal-description')).toHaveTextContent(
+        'Are you sure you want to save this interface?',
+      );
+    });
+  });
+
+  describe('AutosaveStatus', () => {
+    it('should render AutosaveStatus when activeTab is 0', () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+      // The status text shows "Saved as draft" when not saving
+      expect(screen.getByText(/Saved as/)).toBeInTheDocument();
+    });
+
+    it('should not render AutosaveStatus when activeTab is 1', () => {
+      renderComponent({ ...defaultProps, activeTab: 1 });
+      expect(screen.queryByText(/Saved as/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Reports', () => {
+    it('should render reports button', () => {
+      renderComponent();
+      // Reports button is an IconButton with aria-label "Reports"
+      expect(screen.getByRole('button', { name: 'Reports' })).toBeInTheDocument();
+    });
+
+    it('should open reports modal when reports button is clicked', async () => {
+      renderComponent();
+
+      const reportsButton = screen.getByRole('button', { name: 'Reports' });
+      fireEvent.click(reportsButton);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('workflow-reports')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Save Workflow', () => {
+    it('should call setWorkflow with published status when confirming workflow publish', async () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+
+      // Open modal
+      fireEvent.click(screen.getByText('Publish Workflow'));
+
+      // Click confirm in footer (the footer contains the Confirm button)
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(mockSetWorkflow).toHaveBeenCalledWith(
+          expect.objectContaining({
+            workflow: expect.objectContaining({
+              status: 'published',
+            }),
+          }),
+        );
+      });
+    });
+
+    it('should call updateDataApp when saving interface with existing dataAppId', async () => {
+      mockWorkflowStatus = 'published';
+      renderComponent({ ...defaultProps, activeTab: 1 });
+
+      // Open modal
+      fireEvent.click(screen.getByText('Save Interface'));
+
+      // Click confirm
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        // mockInterfaceConfig has dataAppId, so updateDataApp should be called
+        expect(mockUpdateDataApp.mutateAsync).toHaveBeenCalled();
+      });
+    });
+
+    it('should call updateDataApp when interface already has dataAppId', async () => {
+      mockWorkflowStatus = 'published';
+      renderComponent({ ...defaultProps, activeTab: 1 });
+
+      // Open modal
+      fireEvent.click(screen.getByText('Save Interface'));
+
+      // Click confirm
+      const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        // Since mockInterfaceConfig has dataAppId, updateDataApp should be called
+        expect(mockUpdateDataApp.mutateAsync).toHaveBeenCalled();
+      });
+    });
+
+    it('should close modal when response has no data.attributes (lines 207-208)', async () => {
+      // Mock useDisclosure to track onClose calls
+      const mockOnClose = jest.fn();
+      const mockOnOpen = jest.fn();
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const chakraModule = require('@chakra-ui/react');
+      const useDisclosureSpy = jest.spyOn(chakraModule, 'useDisclosure');
+
+      // Mock useDisclosure to return isOpen: true so modal is visible
+      // First call for the modal, second call for reports
+      useDisclosureSpy
+        .mockReturnValueOnce({
+          isOpen: true, // Start with modal open so we can test the close behavior
+          onOpen: mockOnOpen,
+          onClose: mockOnClose,
+          onToggle: jest.fn(),
+        })
+        .mockReturnValueOnce({
+          isOpen: false,
+          onOpen: jest.fn(),
+          onClose: jest.fn(),
+          onToggle: jest.fn(),
+        });
+
+      mockCreateDataApp.mutateAsync.mockResolvedValue({
+        data: null, // No data.attributes - should trigger onClose() from useDisclosure
+      });
+      mockWorkflowStatus = 'published';
+
+      // Temporarily remove dataAppId so createDataApp is used instead of updateDataApp
+      const originalDataAppId = mockInterfaceConfig.dataAppId;
+
+      (mockInterfaceConfig as any).dataAppId = undefined;
+
+      renderComponent({ ...defaultProps, activeTab: 1 });
+
+      // Open modal - this should call onOpen which sets modalIsOpen = true
+      // The button calls onOpen() which should trigger a re-render
+      fireEvent.click(screen.getByText('Save Interface'));
+
+      // Wait for modal to be visible - the BaseModal should render when openModal is true
+      await waitFor(
+        () => {
+          expect(screen.getByText('Confirm')).toBeInTheDocument();
+        },
+        { timeout: 3000 },
+      );
+
+      // Click Confirm to trigger handleSave which calls createDataApp.mutateAsync
+      fireEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+
+      await waitFor(() => {
+        expect(mockCreateDataApp.mutateAsync).toHaveBeenCalled();
+      });
+
+      // Wait for the response to be processed
+      // Line 206: if (!response?.data?.attributes) { onClose(); return; }
+      // This should trigger the early return and call onClose (line 207)
+      await waitFor(
+        () => {
+          // Verify onClose was called (line 207)
+          expect(mockOnClose).toHaveBeenCalled();
+        },
+        { timeout: 2000 },
+      );
+
+      // Restore original dataAppId
+
+      (mockInterfaceConfig as any).dataAppId = originalDataAppId;
+      useDisclosureSpy.mockRestore();
+    });
+
+    it('should close modal when clicking docs link in export config modal (line 361)', async () => {
+      // Mock useDisclosure to track onClose calls
+      const mockOnClose = jest.fn();
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const chakraModule = require('@chakra-ui/react');
+      const useDisclosureSpy = jest.spyOn(chakraModule, 'useDisclosure');
+
+      // First call for the modal, second call for reports
+      useDisclosureSpy
+        .mockReturnValueOnce({
+          isOpen: false,
+          onOpen: jest.fn(),
+          onClose: mockOnClose,
+          onToggle: jest.fn(),
+        })
+        .mockReturnValueOnce({
+          isOpen: false,
+          onOpen: jest.fn(),
+          onClose: jest.fn(),
+          onToggle: jest.fn(),
+        });
+
+      mockWorkflowStatus = 'published';
+      renderComponent({ ...defaultProps, activeTab: 1 });
+
+      // Open the HorizontalMenuActions popover to access the docs link
+      const menuTrigger = screen.getByTestId('horizontal-menu-actions-trigger');
+      fireEvent.click(menuTrigger);
+
+      // Wait for the popover to open and the docs link to be visible
+      await waitFor(() => {
+        // The link should be in the DOM, try finding it by href or text
+        const docsLink = document.querySelector('a[href="https://docs.example.com"]');
+        const docsText = screen.queryByText('Documentation');
+        expect(docsLink || docsText).toBeTruthy();
+      });
+
+      // Find the docs link - the onClick is on the Flex component inside the <a>
+      // We need to find the Flex element that has the onClick handler
+      const docsText = screen.getByText('Documentation');
+      // The Flex component is the parent of the Text, so find it
+      const flexElement = docsText.parentElement;
+      expect(flexElement).toBeTruthy();
+
+      // Clicking the Flex element should call onClose() from useDisclosure (line 361)
+      // The onClick handler on line 360-362 is on the Flex component
+      fireEvent.click(flexElement!);
+
+      // The onClick handler on line 360-362 should call onClose()
+      // This tests line 361: onClose();
+      await waitFor(
+        () => {
+          expect(mockOnClose).toHaveBeenCalled();
+        },
+        { timeout: 2000 },
+      );
+
+      useDisclosureSpy.mockRestore();
+    });
+
+    it('should update interface config after successful data app creation', async () => {
+      mockWorkflowStatus = 'published';
+      renderComponent({ ...defaultProps, activeTab: 1 });
+
+      fireEvent.click(screen.getByText('Save Interface'));
+      fireEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+
+      await waitFor(() => {
+        expect(mockSetInterfaceConfig).toHaveBeenCalled();
+        expect(mockSetWorkflow).toHaveBeenCalledWith(
+          expect.objectContaining({
+            workflow: expect.objectContaining({
+              status: 'published',
+            }),
+          }),
+        );
+      });
+    });
+  });
+
+  describe('Tab Index', () => {
+    it('should pass correct index to TabsWrapper', () => {
+      renderComponent({ ...defaultProps, activeTab: 1 });
+      expect(screen.getByTestId('tabs-wrapper')).toHaveAttribute('data-index', '1');
+    });
+  });
+
+  describe('Version Badge', () => {
+    it('should display version badge when version_number is present', () => {
+      mockVersionNumber = 5;
+      renderComponent();
+      expect(screen.getByText('v5')).toBeInTheDocument();
+    });
+
+    it('should not display version badge when version_number is not present', () => {
+      mockVersionNumber = undefined;
+      renderComponent();
+      expect(screen.queryByText(/^v\d+$/)).not.toBeInTheDocument();
+    });
+
+    it('should display version v1 correctly', () => {
+      mockVersionNumber = 1;
+      renderComponent();
+      expect(screen.getByText('v1')).toBeInTheDocument();
+    });
+  });
+
+  describe('Autosave Status Display', () => {
+    it('should show "Live" when workflow status is published', () => {
+      mockWorkflowStatus = 'published';
+      renderComponent({ ...defaultProps, activeTab: 0 });
+      expect(screen.getByText('Live')).toBeInTheDocument();
+    });
+
+    it('should show "Saved as draft" when workflow status is draft', () => {
+      mockWorkflowStatus = 'draft';
+      renderComponent({ ...defaultProps, activeTab: 0 });
+      expect(screen.getByText('Saved as draft')).toBeInTheDocument();
+    });
+  });
+
+  describe('Versions Panel', () => {
+    it('should render HorizontalMenuActions', () => {
+      renderComponent();
+      expect(screen.getByTestId('horizontal-menu-actions')).toBeInTheDocument();
+    });
+  });
+
+  describe('Publish Modal with Version', () => {
+    it('should include version in modal title when version exists', () => {
+      mockVersionNumber = 3;
+      renderComponent({ ...defaultProps, activeTab: 0 });
+
+      fireEvent.click(screen.getByText('Publish Workflow'));
+
+      // The modal title should contain version info
+      const modalTitle = screen.getByTestId('modal-title');
+      expect(modalTitle).toHaveTextContent('Publish workflow');
+    });
+  });
+
+  describe('Versions Panel Interactions', () => {
+    it('should open VersionsPanel when Versions menu item is clicked', async () => {
+      renderComponent();
+
+      // Open the menu
+      const menuTrigger = screen.getByTestId('horizontal-menu-actions-trigger');
+      fireEvent.click(menuTrigger);
+
+      // Click on Versions menu item
+      await waitFor(() => {
+        const versionsMenuItem = screen.getByText('Versions');
+        fireEvent.click(versionsMenuItem);
+      });
+
+      // VersionsPanel should be rendered
+      await waitFor(() => {
+        expect(screen.getByTestId('versions-panel')).toBeInTheDocument();
+      });
+    });
+
+    it('should close VersionsPanel when close button is clicked', async () => {
+      renderComponent();
+
+      // Open the menu and click Versions
+      const menuTrigger = screen.getByTestId('horizontal-menu-actions-trigger');
+      fireEvent.click(menuTrigger);
+
+      await waitFor(() => {
+        const versionsMenuItem = screen.getByText('Versions');
+        fireEvent.click(versionsMenuItem);
+      });
+
+      // Close the panel
+      await waitFor(() => {
+        const closeButton = screen.getByTestId('close-versions-panel');
+        fireEvent.click(closeButton);
+      });
+
+      // VersionsPanel should be closed
+      await waitFor(() => {
+        expect(screen.queryByTestId('versions-panel')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should clear selectedComponent when opening Versions panel', async () => {
+      mockSelectedComponent = { id: 'some-component' };
+      renderComponent();
+
+      // Open the menu
+      const menuTrigger = screen.getByTestId('horizontal-menu-actions-trigger');
+      fireEvent.click(menuTrigger);
+
+      // Click on Versions menu item
+      await waitFor(() => {
+        const versionsMenuItem = screen.getByText('Versions');
+        fireEvent.click(versionsMenuItem);
+      });
+
+      // setSelectedComponent should be called with null
+      expect(mockSetSelectedComponent).toHaveBeenCalledWith(null);
+    });
+  });
+
+  describe('Version Description in Publish Modal', () => {
+    it('should render version description textarea when activeTab is 0', () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+
+      fireEvent.click(screen.getByText('Publish Workflow'));
+
+      // Check for version description label
+      expect(screen.getByText('Version Description')).toBeInTheDocument();
+    });
+
+    it('should allow typing in version description textarea', async () => {
+      renderComponent({ ...defaultProps, activeTab: 0 });
+
+      fireEvent.click(screen.getByText('Publish Workflow'));
+
+      const textarea = screen.getByPlaceholderText('Enter a description for this workflow version');
+      fireEvent.change(textarea, { target: { value: 'Test description' } });
+
+      expect(textarea).toHaveValue('Test description');
+    });
+  });
+
+  describe('Documentation Link', () => {
+    it('should close menu when docs link is clicked (line 357)', async () => {
+      renderComponent();
+
+      // Open the menu
+      const menuTrigger = screen.getByTestId('horizontal-menu-actions-trigger');
+      fireEvent.click(menuTrigger);
+
+      // Wait for menu to open and find the docs link
+      await waitFor(() => {
+        const docsLink = screen.getByRole('link');
+        expect(docsLink).toBeInTheDocument();
+        expect(docsLink).toHaveAttribute('href', 'https://docs.example.com');
+        expect(docsLink).toHaveAttribute('target', '_blank');
+      });
+
+      // Click the link to trigger onClick handler which calls onClose() (line 357)
+      const docsLink = screen.getByRole('link');
+      // Prevent default to ensure onClick is called
+      fireEvent.click(docsLink, { preventDefault: () => {} });
+
+      // The onClick should have been triggered (coverage for line 357)
+      // The Popover should close after onClick
+    });
+  });
+
+  describe('VersionsPanel closes on component selection', () => {
+    it('should close VersionsPanel when a component is selected', async () => {
+      // Start with no selected component
+      mockSelectedComponent = null;
+      const { rerender } = renderComponent();
+
+      // Open the menu and click Versions
+      const menuTrigger = screen.getByTestId('horizontal-menu-actions-trigger');
+      fireEvent.click(menuTrigger);
+
+      await waitFor(() => {
+        const versionsMenuItem = screen.getByText('Versions');
+        fireEvent.click(versionsMenuItem);
+      });
+
+      // VersionsPanel should be open
+      await waitFor(() => {
+        expect(screen.getByTestId('versions-panel')).toBeInTheDocument();
+      });
+
+      // Simulate component selection by updating the mock and re-rendering
+      mockSelectedComponent = { id: 'selected-component' };
+
+      // Re-render to trigger the useEffect
+      rerender(
+        <ChakraProvider>
+          <QueryClientProvider client={queryClient}>
+            <AgentWorkflowHeader {...defaultProps} />
+          </QueryClientProvider>
+        </ChakraProvider>,
+      );
+
+      // VersionsPanel should be closed after component selection
+      await waitFor(() => {
+        expect(screen.queryByTestId('versions-panel')).not.toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/Interface/ChatGeneralConfig.tsx b/ui/src/enterprise/views/Agents/Interface/ChatGeneralConfig.tsx
new file mode 100644
index 000000000..a85670f20
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/Interface/ChatGeneralConfig.tsx
@@ -0,0 +1,155 @@
+import { Avatar, WorkflowInterfaceConfig } from '@/enterprise/services/types';
+import { Box, Stack, Text, Tooltip as ChakraTooltip, TabList } from '@chakra-ui/react';
+import { INTERFACE_DISPLAY_TYPE } from '../types';
+import { FiInfo, FiMonitor, FiSmartphone } from 'react-icons/fi';
+import TabsWrapper from '@/components/TabsWrapper';
+import TabItem from '@/components/TabItem';
+import InputField from '@/components/InputField';
+import ColourPicker from '@/components/ColourPicker';
+import useAgentStore from '@/enterprise/store/useAgentStore';
+import UploadChatbotAvatar from '@/enterprise/dataApps/components/ChatBot/UploadChatbotAvatar';
+
+const ChatGeneralConfig = ({
+  interfaceComponentConfig,
+}: {
+  interfaceComponentConfig: WorkflowInterfaceConfig;
+}) => {
+  const { setInterfaceConfig, setInterfaceDisplayType, interfaceDisplayType } = useAgentStore(
+    (state) => state,
+  );
+
+  return (
+    <Stack spacing='24px' marginTop='24px'>
+      <Box display='flex' justifyContent='space-between' alignItems='center'>
+        <Box display='flex' alignItems='center' gap='8px'>
+          <Text fontWeight='semibold' size='sm'>
+            Chat Display
+          </Text>
+          <ChakraTooltip
+            hasArrow
+            label={
+              'Control how users experience your chat assistant. Full-page Chat: A full-page chat interface, accessible only as a hosted standalone app via the platform. Embeddable Chat: An embeddable chat widget, exportable via code or chrome extension. Can be maximized into an expandable view when needed.'
+            }
+            fontSize='xs'
+            placement='top-start'
+            backgroundColor='black.500'
+            color='gray.100'
+            borderRadius='6px'
+            padding='8px'
+          >
+            <Text color='gray.600'>
+              <FiInfo />
+            </Text>
+          </ChakraTooltip>
+        </Box>
+        <TabsWrapper index={interfaceDisplayType === INTERFACE_DISPLAY_TYPE.FULL_PAGE ? 0 : 1}>
+          <TabList gap='8px'>
+            <TabItem
+              text=''
+              testId='interface-chat-display-tab-desktop'
+              action={() => {
+                setInterfaceDisplayType(INTERFACE_DISPLAY_TYPE.FULL_PAGE);
+              }}
+              icon={<FiMonitor />}
+            />
+            <TabItem
+              text=''
+              testId='interface-chat-display-tab-mobile'
+              action={() => {
+                setInterfaceDisplayType(INTERFACE_DISPLAY_TYPE.MOBILE);
+              }}
+              icon={<FiSmartphone />}
+            />
+          </TabList>
+        </TabsWrapper>
+      </Box>
+      <InputField
+        label={'Chat Name'}
+        name='title'
+        testId='interface-chat-name-input'
+        placeholder='Welcome Message'
+        value={interfaceComponentConfig.properties.card_title}
+        onChange={(value) => {
+          setInterfaceConfig({
+            ...interfaceComponentConfig,
+            properties: {
+              ...interfaceComponentConfig.properties,
+              card_title: value.target.value,
+            },
+          });
+        }}
+      />
+      <InputField
+        label='Welcome Message'
+        name='welcomeMessage'
+        value={interfaceComponentConfig.properties.chat_bot?.welcome_message || ''}
+        onChange={(value) => {
+          setInterfaceConfig({
+            ...interfaceComponentConfig,
+            properties: {
+              ...interfaceComponentConfig.properties,
+              chat_bot: {
+                ...interfaceComponentConfig.properties.chat_bot,
+                welcome_message: value.target.value,
+              },
+            },
+          });
+        }}
+        isTooltip
+        tooltipLabel={
+          'Set the first message users see when the chat opens. Use it to greet or guide users.'
+        }
+      />
+      <ColourPicker
+        label='Chat Color'
+        visualColor={interfaceComponentConfig.properties.visual_color}
+        setVisualColor={(value) => {
+          setInterfaceConfig({
+            ...interfaceComponentConfig,
+            properties: {
+              ...interfaceComponentConfig.properties,
+              visual_color: value,
+            },
+          });
+        }}
+      />
+      {interfaceDisplayType === INTERFACE_DISPLAY_TYPE.MOBILE && (
+        <InputField
+          label='Responder Name'
+          name='responderName'
+          value={interfaceComponentConfig.properties.chat_bot?.responder_name || ''}
+          onChange={(value) => {
+            setInterfaceConfig({
+              ...interfaceComponentConfig,
+              properties: {
+                ...interfaceComponentConfig.properties,
+                chat_bot: {
+                  ...interfaceComponentConfig.properties.chat_bot,
+                  responder_name: value.target.value,
+                },
+              },
+            });
+          }}
+          isTooltip
+          tooltipLabel='This name appears as the sender of the chat responses.'
+        />
+      )}
+      <UploadChatbotAvatar
+        label='Avatar'
+        avatar={interfaceComponentConfig.properties.chat_bot?.avatar}
+        visualColor={interfaceComponentConfig.properties.visual_color}
+        setAvatar={(value: Avatar | undefined) => {
+          setInterfaceConfig({
+            ...interfaceComponentConfig,
+            properties: {
+              ...interfaceComponentConfig.properties,
+              chat_bot: { ...interfaceComponentConfig.properties.chat_bot, avatar: value },
+            },
+          });
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default ChatGeneralConfig;
diff --git a/ui/src/enterprise/views/Agents/Interface/ChatbotExportConfig.tsx b/ui/src/enterprise/views/Agents/Interface/ChatbotExportConfig.tsx
new file mode 100644
index 000000000..739a7744d
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/Interface/ChatbotExportConfig.tsx
@@ -0,0 +1,379 @@
+import { CustomSelect } from '@/components/CustomSelect/CustomSelect';
+import InputField from '@/components/InputField';
+import {
+  Stack,
+  HStack,
+  Text,
+  Collapse,
+  Box,
+  Tooltip as ChakraTooltip,
+  Input,
+} from '@chakra-ui/react';
+
+import { Option } from '@/components/CustomSelect/Option';
+
+import { EXPORT_OPTIONS, INTERFACE_POSITION_OPTIONS } from '../constants';
+import useAgentStore from '@/enterprise/store/useAgentStore';
+import { useEffect, useRef } from 'react';
+import { FiInfo } from 'react-icons/fi';
+import { INTERFACE_DISPLAY_TYPE } from '../types';
+
+import { EmbeddableCodeSection } from './EmbeddableCodeSection';
+import { ChromeExtensionSection } from './ChromeExtensionSection';
+import { StandaloneAppSection } from './StandaloneAppSection';
+
+type ChatbotExportConfigProps = {
+  isExportOpen: boolean;
+  agentId: string;
+};
+
+const ChatbotExportConfig = ({ isExportOpen, agentId }: ChatbotExportConfigProps) => {
+  const { exportConfig, setExportConfig, interfaceDisplayType, interfaceConfig, workflowDataApp } =
+    useAgentStore((state) => state);
+
+  const methodPerDisplayType = useRef<Partial<Record<INTERFACE_DISPLAY_TYPE, string>>>({});
+  const previousDisplayType = useRef<INTERFACE_DISPLAY_TYPE>(interfaceDisplayType);
+  const isInitialized = useRef<boolean>(false);
+
+  const availableExportOptions = EXPORT_OPTIONS.filter((option) =>
+    option.displayTypes.includes(interfaceDisplayType),
+  );
+
+  useEffect(() => {
+    const getAvailableOptions = () => {
+      return EXPORT_OPTIONS.filter((option) => option.displayTypes.includes(interfaceDisplayType));
+    };
+    const apiExportConfig = interfaceConfig?.export_config;
+    const availableOptions = getAvailableOptions();
+    const displayTypeChanged = previousDisplayType.current !== interfaceDisplayType;
+
+    // Helper to get embeddable assistant flag for current display type
+    const getEmbeddableFlag = (method: string): boolean => {
+      return interfaceDisplayType === INTERFACE_DISPLAY_TYPE.FULL_PAGE && method === 'embed';
+    };
+
+    // Get current config from store directly to avoid stale closures
+    const getCurrentConfig = () => useAgentStore.getState().exportConfig;
+    const updateConfig = useAgentStore.getState().setExportConfig;
+
+    // Helper to update config if values differ
+    const updateConfigIfNeeded = (method: string, embeddableAssistant: boolean) => {
+      const currentConfig = getCurrentConfig();
+      if (
+        currentConfig.method !== method ||
+        currentConfig.embeddable_assistant !== embeddableAssistant
+      ) {
+        updateConfig({
+          ...currentConfig,
+          method,
+          embeddable_assistant: embeddableAssistant,
+        });
+      }
+    };
+
+    // Initialization logic
+    if (!isInitialized.current) {
+      const hasDataAppId = !!interfaceConfig?.dataAppId;
+
+      if (!hasDataAppId && !apiExportConfig) return;
+
+      const currentConfig = getCurrentConfig();
+
+      // Get initial method and flag from API or existing config
+      let method: string;
+      let embeddableAssistant: boolean;
+
+      if (apiExportConfig) {
+        embeddableAssistant = apiExportConfig.embeddable_assistant ?? false;
+        const currentMethod = apiExportConfig.method ?? 'embed';
+        method = embeddableAssistant ? 'embed' : currentMethod;
+      } else if (currentConfig.method && currentConfig.embeddable_assistant !== undefined) {
+        embeddableAssistant = currentConfig.embeddable_assistant;
+        method = embeddableAssistant ? 'embed' : currentConfig.method;
+      } else {
+        method = 'embed';
+        embeddableAssistant = false;
+      }
+
+      // Validate method is available for current display type
+      const currentOption = availableOptions.find((option) => option.value === method);
+      if (!currentOption) {
+        const firstOption = availableOptions[0];
+        if (!firstOption) return;
+
+        method = firstOption.value;
+        embeddableAssistant = getEmbeddableFlag(method);
+      }
+
+      methodPerDisplayType.current[interfaceDisplayType] = method;
+      updateConfigIfNeeded(method, embeddableAssistant);
+      isInitialized.current = true;
+      return;
+    }
+
+    // Handle display type change
+    if (displayTypeChanged) {
+      const currentConfig = getCurrentConfig();
+
+      // Save previous method if it was valid
+      const previousMethodWasValid = EXPORT_OPTIONS.some(
+        (option) =>
+          option.value === currentConfig.method &&
+          option.displayTypes.includes(previousDisplayType.current),
+      );
+
+      if (previousMethodWasValid) {
+        methodPerDisplayType.current[previousDisplayType.current] = currentConfig.method;
+      }
+
+      previousDisplayType.current = interfaceDisplayType;
+
+      // Try to restore saved method for new display type
+      const savedMethod = methodPerDisplayType.current[interfaceDisplayType];
+      const savedMethodIsValid =
+        savedMethod && availableOptions.some((option) => option.value === savedMethod);
+
+      if (savedMethodIsValid) {
+        const embeddableAssistant = getEmbeddableFlag(savedMethod);
+        updateConfigIfNeeded(savedMethod, embeddableAssistant);
+        return;
+      }
+
+      // Check if API value should be used
+      const shouldUseApiValue =
+        apiExportConfig?.embeddable_assistant &&
+        interfaceDisplayType === INTERFACE_DISPLAY_TYPE.FULL_PAGE &&
+        !savedMethod;
+
+      if (shouldUseApiValue) {
+        updateConfigIfNeeded('embed', true);
+        methodPerDisplayType.current[interfaceDisplayType] = 'embed';
+        return;
+      }
+
+      // Fall back to first available option
+      const firstAvailableOption = availableOptions[0];
+      if (!firstAvailableOption) return;
+
+      const embeddableAssistant = getEmbeddableFlag(firstAvailableOption.value);
+      updateConfigIfNeeded(firstAvailableOption.value, embeddableAssistant);
+      methodPerDisplayType.current[interfaceDisplayType] = firstAvailableOption.value;
+      return;
+    }
+
+    // Validate and update method (no display type change)
+    const currentConfig = getCurrentConfig();
+
+    if (currentConfig.embeddable_assistant && currentConfig.method !== 'embed') {
+      updateConfig({ ...currentConfig, method: 'embed' });
+      methodPerDisplayType.current[interfaceDisplayType] = 'embed';
+      return;
+    }
+
+    const currentOption = availableOptions.find((option) => option.value === currentConfig.method);
+
+    if (!currentOption) {
+      const firstAvailableOption = availableOptions[0];
+      if (!firstAvailableOption) return;
+
+      const embeddableAssistant = getEmbeddableFlag(firstAvailableOption.value);
+      updateConfig({
+        ...currentConfig,
+        method: firstAvailableOption.value,
+        embeddable_assistant: embeddableAssistant,
+      });
+      methodPerDisplayType.current[interfaceDisplayType] = firstAvailableOption.value;
+      return;
+    }
+
+    methodPerDisplayType.current[interfaceDisplayType] = currentConfig.method;
+
+    const expectedEmbeddableAssistant = getEmbeddableFlag(currentConfig.method);
+
+    if (currentConfig.embeddable_assistant !== expectedEmbeddableAssistant) {
+      updateConfig({
+        ...currentConfig,
+        embeddable_assistant: expectedEmbeddableAssistant,
+      });
+    }
+  }, [interfaceDisplayType, interfaceConfig?.dataAppId, interfaceConfig?.export_config]);
+
+  return (
+    <Collapse in={isExportOpen} animateOpacity>
+      <Stack spacing='24px'>
+        <Box display='flex' flexDirection='column' gap='8px'>
+          <Text size='sm' fontWeight='semibold'>
+            Method
+          </Text>
+          <CustomSelect
+            data-testid='interface-export-method-select'
+            name='method'
+            value={exportConfig.method}
+            onChange={(value) => {
+              const isEmbeddableAssistant =
+                interfaceDisplayType === INTERFACE_DISPLAY_TYPE.FULL_PAGE && value === 'embed';
+              const newMethod = value as string;
+
+              methodPerDisplayType.current[interfaceDisplayType] = newMethod;
+
+              setExportConfig({
+                ...exportConfig,
+                method: newMethod,
+                embeddable_assistant: isEmbeddableAssistant,
+              });
+            }}
+            placeholder='Select a method'
+          >
+            {EXPORT_OPTIONS.filter((option) =>
+              option.displayTypes.includes(interfaceDisplayType),
+            ).map((option, index) => (
+              <Option
+                value={option.value}
+                key={`export-option-${index}`}
+                data-testid={`export-option-${option.value}`}
+              >
+                <HStack>
+                  <Text size='sm' fontWeight={400}>
+                    {option.label}
+                  </Text>
+                </HStack>
+              </Option>
+            ))}
+          </CustomSelect>
+          <Text size='xs' fontWeight={500} color='gray.600'>
+            {
+              availableExportOptions.find((option) => option.value === exportConfig.method)
+                ?.helperText
+            }
+          </Text>
+        </Box>
+
+        {/* Dynamic content based on selected method */}
+        {exportConfig.method === 'embed' && (
+          <EmbeddableCodeSection
+            dataAppId={interfaceConfig?.dataAppId}
+            dataAppUseCaseId={interfaceConfig?.dataAppToken}
+            dataAppEmbedMethod={workflowDataApp?.data_app?.meta_data?.rendering_type}
+            currentMethod={exportConfig.method}
+            embeddableAssistant={exportConfig.embeddable_assistant}
+            publishedEmbeddableAssistant={
+              workflowDataApp?.data_app?.meta_data?.embeddable_assistant
+            }
+            interfaceDisplayType={interfaceDisplayType}
+          />
+        )}
+        {exportConfig.method === 'no_code' && (
+          <ChromeExtensionSection
+            dataAppEmbedMethod={workflowDataApp?.data_app?.meta_data?.rendering_type}
+          />
+        )}
+        {exportConfig.method === 'assistant' && (
+          <StandaloneAppSection
+            workflowId={agentId}
+            dataAppId={interfaceConfig?.dataAppId}
+            dataAppEmbedMethod={workflowDataApp?.data_app?.meta_data?.rendering_type}
+          />
+        )}
+        {exportConfig.method === 'embed' &&
+          interfaceDisplayType === INTERFACE_DISPLAY_TYPE.FULL_PAGE && (
+            <Box width='100%' display='flex' flexDirection='column' gap='8px'>
+              <Text fontWeight='semibold' size='sm'>
+                Query Selector
+              </Text>
+
+              <Input
+                backgroundColor='gray.100'
+                placeholder='[data-id = "tabpanel-general"]'
+                onChange={(e) => {
+                  setExportConfig({
+                    ...exportConfig,
+                    query_selector: e.target.value,
+                  });
+                }}
+                value={exportConfig.query_selector}
+                borderStyle='solid'
+                borderWidth='1px'
+                borderColor='gray.400'
+                fontSize='14px'
+                borderRadius='6px'
+                _focusVisible={{ border: 'gray.400' }}
+                _hover={{ border: 'gray.400' }}
+                name='query_selector'
+              />
+              <Text color='gray.600' size='xs' fontWeight={500}>
+                Container is injected at the body of the content by default. Use query selectors to
+                inject in specific elements.
+              </Text>
+            </Box>
+          )}
+        {(exportConfig.method === 'no_code' || exportConfig.method === 'embed') &&
+          !exportConfig.embeddable_assistant &&
+          interfaceDisplayType === INTERFACE_DISPLAY_TYPE.MOBILE && (
+            <>
+              <Box display='flex' flexDirection='column' gap='8px'>
+                <Box display='flex' alignItems='center' gap='8px'>
+                  <Text size='sm' fontWeight='semibold'>
+                    Interface Position
+                  </Text>
+                  <ChakraTooltip
+                    hasArrow
+                    label='Control the position of the interface on the page.'
+                    fontSize='xs'
+                    placement='top-start'
+                    backgroundColor='black.500'
+                    color='gray.100'
+                    borderRadius='6px'
+                    padding='8px'
+                  >
+                    <Text color='gray.600'>
+                      <FiInfo />
+                    </Text>
+                  </ChakraTooltip>
+                </Box>
+                <CustomSelect
+                  name='interface_position'
+                  value={exportConfig.interface_position}
+                  onChange={(value) => {
+                    setExportConfig({
+                      ...exportConfig,
+                      interface_position: value as string,
+                    });
+                  }}
+                >
+                  {INTERFACE_POSITION_OPTIONS.map((option, index) => (
+                    <Option value={option.value} key={`export-option-${index}`}>
+                      <HStack>
+                        <Text size='sm' fontWeight={400}>
+                          {option.label}
+                        </Text>
+                      </HStack>
+                    </Option>
+                  ))}
+                </CustomSelect>
+              </Box>
+            </>
+          )}
+        {exportConfig.method === 'no_code' && (
+          <InputField
+            label='Whitelist URLs'
+            name='whitelist_urls'
+            value={exportConfig.whitelist_urls?.join(', ') || ''}
+            onChange={(value) => {
+              setExportConfig({
+                ...exportConfig,
+                whitelist_urls: value.target.value.split(',').map((url) => url.trim()),
+              });
+            }}
+            isTooltip
+            tooltipLabel={
+              'Specify which URLs the chatbot can be embedded on. Enter comma-separated URLs to restrict where the interface appears.'
+            }
+            placeholder='Enter one or more URLs separated by commas.'
+          />
+        )}
+      </Stack>
+    </Collapse>
+  );
+};
+
+export default ChatbotExportConfig;
diff --git a/ui/src/enterprise/views/Agents/Interface/ConfigWrapper.tsx b/ui/src/enterprise/views/Agents/Interface/ConfigWrapper.tsx
new file mode 100644
index 000000000..eef2e31c5
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/Interface/ConfigWrapper.tsx
@@ -0,0 +1,362 @@
+import {
+  Stack,
+  Button,
+  HStack,
+  Icon,
+  Text,
+  Collapse,
+  Box,
+  Divider,
+  Switch,
+} from '@chakra-ui/react';
+import { useState } from 'react';
+import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import { INTERFACE_TYPE } from '../types';
+import FeedbackConfigForm from '../../DataApps/DataAppsForm/BuildDataApp/FeedbackConfigForm';
+import { FEEDBACK_METHODS } from '@/enterprise/dataApps/feedbackTypes';
+import { WorkflowInterfaceConfig } from '@/enterprise/services/types';
+
+import { useParams } from 'react-router-dom';
+
+import ChatGeneralConfig from './ChatGeneralConfig';
+import ApiGeneralConfig from './ApiInterface/ApiGeneralConfig';
+import SlackGeneralConfig from './SlackInterface/SlackGeneralConfig';
+import SlackExportConfig from './SlackInterface/SlackExportConfig';
+import ChatbotExportConfig from './ChatbotExportConfig';
+import Security from './Security/Security';
+
+const ConfigWrapper = ({
+  selectedInterfaceType,
+  interfaceComponentConfig,
+  setInterfaceComponentConfig,
+}: {
+  selectedInterfaceType: INTERFACE_TYPE;
+  interfaceComponentConfig: WorkflowInterfaceConfig;
+  setInterfaceComponentConfig: (config: WorkflowInterfaceConfig) => void;
+}) => {
+  const [openState, setOpenState] = useState({
+    isGeneralOpen: true,
+    isFeedbackOpen: false,
+    isSecurityOpen: false,
+    isExportOpen: false,
+  });
+
+  const params = useParams();
+
+  const agentId = params.id ?? '';
+
+  return (
+    <Box display='flex' flexDirection='column' gap='20px' overflowY='auto' overflowX='hidden'>
+      <Stack spacing={0} flex={1}>
+        <Button
+          variant='tertiary'
+          justifyContent='start'
+          backgroundColor={'none'}
+          width='100%'
+          size='sm'
+          height='36px'
+          onClick={() => {
+            setOpenState({
+              isGeneralOpen: !openState.isGeneralOpen,
+              isFeedbackOpen: false,
+              isSecurityOpen: false,
+              isExportOpen: false,
+            });
+          }}
+          padding='0px'
+        >
+          <HStack justifyContent='space-between' width='full'>
+            <HStack spacing='2'>
+              <Text color='gray.600' fontWeight='bold' size='xs' letterSpacing='2.4px'>
+                GENERAL
+              </Text>
+            </HStack>
+            <Icon
+              as={openState.isGeneralOpen ? FiChevronUp : FiChevronDown}
+              color='gray.600'
+              height='16px'
+              width='16px'
+            />
+          </HStack>
+        </Button>
+        <Collapse in={openState.isGeneralOpen} animateOpacity>
+          {selectedInterfaceType === INTERFACE_TYPE.WEBSITE_CHATBOT && (
+            <ChatGeneralConfig interfaceComponentConfig={interfaceComponentConfig} />
+          )}
+          {selectedInterfaceType === INTERFACE_TYPE.API_INTERFACE && <ApiGeneralConfig />}
+          {selectedInterfaceType === INTERFACE_TYPE.SLACK_APP && <SlackGeneralConfig />}
+        </Collapse>
+      </Stack>
+      {(selectedInterfaceType === INTERFACE_TYPE.WEBSITE_CHATBOT ||
+        selectedInterfaceType === INTERFACE_TYPE.SLACK_APP) && (
+        <>
+          <Divider borderColor='gray.400' borderWidth='1px' />
+          <Stack spacing={0} flex={1}>
+            <Button
+              variant='tertiary'
+              justifyContent='start'
+              backgroundColor={'none'}
+              width='100%'
+              size='sm'
+              height='36px'
+              onClick={() => {
+                setOpenState({
+                  isGeneralOpen: false,
+                  isFeedbackOpen: !openState.isFeedbackOpen,
+                  isSecurityOpen: false,
+                  isExportOpen: false,
+                });
+              }}
+              padding='0px'
+            >
+              <HStack justifyContent='space-between' width='full'>
+                <HStack spacing='2'>
+                  <Text color='gray.600' fontWeight='bold' size='xs' letterSpacing='2.4px'>
+                    FEEDBACK
+                  </Text>
+                </HStack>
+                <Icon
+                  as={openState.isFeedbackOpen ? FiChevronUp : FiChevronDown}
+                  color='gray.600'
+                  height='16px'
+                  width='16px'
+                />
+              </HStack>
+            </Button>
+
+            <Collapse in={openState.isFeedbackOpen} animateOpacity>
+              <Stack spacing='24px' marginTop='24px' minHeight='40vh' overflow='hidden'>
+                <Box display='flex' justifyContent='space-between' alignItems='center'>
+                  <Text size='sm' fontWeight='semibold'>
+                    Enable Feedback
+                  </Text>
+                  <Switch
+                    onChange={(event) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          feedback_enabled: event.target.checked,
+                        },
+                      });
+                    }}
+                    isChecked={interfaceComponentConfig.feedback_config.feedback_enabled}
+                  />
+                </Box>
+                {interfaceComponentConfig.feedback_config.feedback_enabled && (
+                  <FeedbackConfigForm
+                    feedbackMethod={
+                      INTERFACE_TYPE.SLACK_APP === selectedInterfaceType
+                        ? FEEDBACK_METHODS.THUMBS_RATING
+                        : interfaceComponentConfig.feedback_config.feedback_method
+                    }
+                    disableFeedbackMethod={INTERFACE_TYPE.SLACK_APP === selectedInterfaceType}
+                    disableAdditionalRemarks={INTERFACE_TYPE.SLACK_APP === selectedInterfaceType}
+                    feedbackTitle={interfaceComponentConfig.feedback_config.feedback_title}
+                    feedbackDescription={
+                      interfaceComponentConfig.feedback_config.feedback_description || ''
+                    }
+                    setFeedbackMethod={(value) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          feedback_method:
+                            INTERFACE_TYPE.SLACK_APP === selectedInterfaceType
+                              ? FEEDBACK_METHODS.THUMBS_RATING
+                              : (value as FEEDBACK_METHODS),
+                        },
+                      });
+                    }}
+                    setFeedbackTitle={(value) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          feedback_title: value,
+                        },
+                      });
+                    }}
+                    setFeedbackDescription={(value) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          feedback_description: value,
+                        },
+                      });
+                    }}
+                    isAdditionalRemarks={
+                      interfaceComponentConfig.feedback_config.additional_remarks?.enabled || false
+                    }
+                    setIsAdditionalRemarks={(value) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          additional_remarks: {
+                            ...interfaceComponentConfig.feedback_config.additional_remarks,
+                            enabled: value,
+                          },
+                        },
+                      });
+                    }}
+                    isAdditionalRemarksRequired={
+                      interfaceComponentConfig.feedback_config.additional_remarks?.required || false
+                    }
+                    setIsAdditionalRemarksRequired={(value) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          additional_remarks: {
+                            ...interfaceComponentConfig.feedback_config.additional_remarks,
+                            required: value,
+                          },
+                        },
+                      });
+                    }}
+                    additionalRemarksTitle={
+                      interfaceComponentConfig.feedback_config.additional_remarks?.title || ''
+                    }
+                    setAdditionalRemarksTitle={(value) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          additional_remarks: {
+                            ...interfaceComponentConfig.feedback_config.additional_remarks,
+                            title: value,
+                          },
+                        },
+                      });
+                    }}
+                    additionalRemarksDescription={
+                      interfaceComponentConfig.feedback_config.additional_remarks?.description || ''
+                    }
+                    setAdditionalRemarksDescription={(value) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          additional_remarks: {
+                            ...interfaceComponentConfig.feedback_config.additional_remarks,
+                            description: value,
+                          },
+                        },
+                      });
+                    }}
+                    multipleChoiceConfig={{
+                      type: interfaceComponentConfig.feedback_config.multiple_choice.type,
+                      choices: interfaceComponentConfig.feedback_config.multiple_choice.choices,
+                    }}
+                    setMultipleChoiceConfig={(value) => {
+                      setInterfaceComponentConfig({
+                        ...interfaceComponentConfig,
+                        feedback_config: {
+                          ...interfaceComponentConfig.feedback_config,
+                          multiple_choice: value,
+                        },
+                      });
+                    }}
+                  />
+                )}
+              </Stack>
+            </Collapse>
+          </Stack>
+        </>
+      )}
+      {(selectedInterfaceType === INTERFACE_TYPE.WEBSITE_CHATBOT ||
+        selectedInterfaceType === INTERFACE_TYPE.CHAT_ASSISTANT) && (
+        <>
+          <Divider borderColor='gray.400' borderWidth='1px' />
+          <Stack spacing={0} flex={1}>
+            <Button
+              variant='tertiary'
+              justifyContent='start'
+              backgroundColor={'none'}
+              width='100%'
+              size='sm'
+              height='36px'
+              onClick={() => {
+                setOpenState({
+                  isGeneralOpen: false,
+                  isFeedbackOpen: false,
+                  isSecurityOpen: !openState.isSecurityOpen,
+                  isExportOpen: false,
+                });
+              }}
+              padding='0px'
+            >
+              <HStack justifyContent='space-between' width='full'>
+                <HStack spacing='2'>
+                  <Text color='gray.600' fontWeight='bold' size='xs' letterSpacing='2.4px'>
+                    SECURITY
+                  </Text>
+                </HStack>
+                <Icon
+                  as={openState.isSecurityOpen ? FiChevronUp : FiChevronDown}
+                  color='gray.600'
+                  height='16px'
+                  width='16px'
+                />
+              </HStack>
+            </Button>
+            <Collapse in={openState.isSecurityOpen} animateOpacity>
+              <Security />
+            </Collapse>
+          </Stack>
+        </>
+      )}
+      {selectedInterfaceType !== INTERFACE_TYPE.API_INTERFACE && (
+        <>
+          <Divider borderColor='gray.400' borderWidth='1px' />
+          <Stack spacing={0} flex={1} gap='24px'>
+            <Button
+              data-testid='interface-export-section-toggle'
+              variant='tertiary'
+              justifyContent='start'
+              backgroundColor={'none'}
+              width='100%'
+              size='sm'
+              height='36px'
+              onClick={() => {
+                setOpenState({
+                  isGeneralOpen: false,
+                  isFeedbackOpen: false,
+                  isSecurityOpen: false,
+                  isExportOpen: !openState.isExportOpen,
+                });
+              }}
+              padding='0px'
+            >
+              <HStack justifyContent='space-between' width='full'>
+                <HStack spacing='2'>
+                  <Text color='gray.600' fontWeight='bold' size='xs' letterSpacing='2.4px'>
+                    EXPORT
+                  </Text>
+                </HStack>
+                <Icon
+                  as={openState.isExportOpen ? FiChevronUp : FiChevronDown}
+                  color='gray.600'
+                  height='16px'
+                  width='16px'
+                />
+              </HStack>
+            </Button>
+            {selectedInterfaceType === INTERFACE_TYPE.WEBSITE_CHATBOT && (
+              <ChatbotExportConfig isExportOpen={openState.isExportOpen} agentId={agentId} />
+            )}
+            {selectedInterfaceType === INTERFACE_TYPE.SLACK_APP && (
+              <Collapse in={openState.isExportOpen} animateOpacity>
+                <SlackExportConfig />
+              </Collapse>
+            )}
+          </Stack>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default ConfigWrapper;
diff --git a/ui/src/enterprise/views/Agents/Interface/__tests__/ChatGeneralConfig.test.tsx b/ui/src/enterprise/views/Agents/Interface/__tests__/ChatGeneralConfig.test.tsx
new file mode 100644
index 000000000..25c5c043b
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/Interface/__tests__/ChatGeneralConfig.test.tsx
@@ -0,0 +1,427 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+
+import ChatGeneralConfig from '../ChatGeneralConfig';
+import { Avatar, WorkflowInterfaceConfig } from '@/enterprise/services/types';
+import { INTERFACE_DISPLAY_TYPE } from '../../types';
+import { MULTIPLE_CHOICE_TYPES } from '@/enterprise/dataApps/feedbackTypes';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ChakraProvider, Tabs } from '@chakra-ui/react';
+import { mockSetInterfaceConfig } from '../../../../../../__mocks__/agentStoreMocks';
+
+// Mock useAgentStore
+const mockSetInterfaceDisplayType = jest.fn();
+let mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+
+jest.mock('@/enterprise/store/useAgentStore', () => ({
+  __esModule: true,
+  default: (selector: (state: unknown) => unknown) =>
+    selector({
+      setInterfaceConfig: mockSetInterfaceConfig,
+      setInterfaceDisplayType: mockSetInterfaceDisplayType,
+      get interfaceDisplayType() {
+        return mockInterfaceDisplayType;
+      },
+    }),
+}));
+
+// Mock UploadChatbotAvatar
+jest.mock('@/enterprise/dataApps/components/ChatBot/UploadChatbotAvatar', () => ({
+  __esModule: true,
+  default: ({
+    label,
+    avatar,
+    visualColor,
+    setAvatar,
+  }: {
+    label: string;
+    avatar?: Avatar;
+    visualColor: string;
+    setAvatar: (avatar: Avatar | undefined) => void;
+  }) => (
+    <div data-testid='upload-chatbot-avatar'>
+      <div data-testid='avatar-label'>{label}</div>
+      <div data-testid='avatar-value'>{avatar ? JSON.stringify(avatar) : 'no-avatar'}</div>
+      <div data-testid='avatar-visual-color'>{visualColor}</div>
+      <button
+        data-testid='set-avatar-btn'
+        onClick={() => setAvatar({ type: 'image', value: 'http://example.com/new-avatar.png' })}
+      >
+        Set Avatar
+      </button>
+    </div>
+  ),
+}));
+
+// Mock InputField
+jest.mock('@/components/InputField', () => ({
+  __esModule: true,
+  default: ({
+    label,
+    name,
+    value,
+    onChange,
+    placeholder,
+    isTooltip,
+    tooltipLabel,
+    testId,
+  }: {
+    label: string;
+    name: string;
+    value: string;
+    onChange: (e: { target: { value: string } }) => void;
+    placeholder?: string;
+    isTooltip?: boolean;
+    tooltipLabel?: string;
+    testId?: string;
+  }) => (
+    <div data-testid={`input-field-${name}`}>
+      <label>{label}</label>
+      <input
+        data-testid={testId ?? `input-${name}`}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+      />
+      {isTooltip && tooltipLabel && <div data-testid={`tooltip-${name}`}>{tooltipLabel}</div>}
+    </div>
+  ),
+}));
+
+// Mock ColourPicker
+jest.mock('@/components/ColourPicker', () => ({
+  __esModule: true,
+  default: ({
+    label,
+    visualColor,
+    setVisualColor,
+  }: {
+    label: string;
+    visualColor: string;
+    setVisualColor: (value: string) => void;
+  }) => (
+    <div data-testid='colour-picker'>
+      <label>{label}</label>
+      <input
+        data-testid='colour-input'
+        type='color'
+        value={visualColor}
+        onChange={(e) => setVisualColor(e.target.value)}
+      />
+    </div>
+  ),
+}));
+
+// Mock TabItem and TabsWrapper
+jest.mock('@/components/TabItem', () => ({
+  __esModule: true,
+  default: ({
+    text,
+    action,
+    icon,
+    testId,
+  }: {
+    text: string;
+    action: () => void;
+    icon?: React.ReactNode;
+    testId?: string;
+  }) => (
+    <button data-testid={testId ?? `tab-item-${text}`} onClick={action}>
+      {text}
+      {icon}
+    </button>
+  ),
+}));
+
+jest.mock('@/components/TabsWrapper', () => {
+  return {
+    __esModule: true,
+    default: ({ children, index }: { children: React.ReactNode; index: number }) => (
+      <Tabs index={index} data-testid='tabs-wrapper' data-index={index}>
+        {children}
+      </Tabs>
+    ),
+  };
+});
+
+describe('ChatGeneralConfig', () => {
+  const baseConfig: WorkflowInterfaceConfig = {
+    component_type: 'chat_bot',
+    configurable_id: '',
+    configurable_type: 'workflow',
+    properties: {
+      field_group: '',
+      measure_value: '',
+      file_id: '',
+      card_title: 'Test Chat',
+      visual_color: '#FF5733',
+      chat_bot: {
+        welcome_message: 'Welcome!',
+        responder_name: 'Bot',
+      },
+    },
+    feedback_config: {
+      feedback_enabled: false,
+      feedback_method: null,
+      feedback_title: '',
+      feedback_description: '',
+      additional_remarks: {
+        enabled: false,
+        required: false,
+        title: '',
+        description: '',
+      },
+      multiple_choice: {
+        type: MULTIPLE_CHOICE_TYPES.SINGLE_SELECT,
+        choices: [],
+      },
+    },
+    export_config: {
+      method: 'embed',
+      interface_position: 'bottom_right',
+      whitelist_urls: [],
+      embeddable_assistant: false,
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+  });
+  const queryClient = new QueryClient();
+
+  const renderComponent = (config: WorkflowInterfaceConfig) => {
+    return render(
+      <ChakraProvider>
+        <QueryClientProvider client={queryClient}>
+          <ChatGeneralConfig interfaceComponentConfig={config} />
+        </QueryClientProvider>
+      </ChakraProvider>,
+    );
+  };
+
+  it('renders Chat Display section with tooltip', () => {
+    renderComponent(baseConfig);
+
+    expect(screen.getByText('Chat Display')).toBeInTheDocument();
+  });
+
+  it('uses stable test ids for display tabs and chat name', () => {
+    renderComponent(baseConfig);
+    expect(screen.getByTestId('interface-chat-display-tab-desktop')).toBeInTheDocument();
+    expect(screen.getByTestId('interface-chat-display-tab-mobile')).toBeInTheDocument();
+    expect(screen.getByTestId('interface-chat-name-input')).toBeInTheDocument();
+  });
+
+  it('renders Chat Name input field', () => {
+    renderComponent(baseConfig);
+
+    const input = screen.getByTestId('interface-chat-name-input');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Test Chat');
+  });
+
+  it('updates card_title when Chat Name input changes', () => {
+    renderComponent(baseConfig);
+
+    const input = screen.getByTestId('interface-chat-name-input');
+    fireEvent.change(input, { target: { value: 'New Chat Name' } });
+
+    expect(mockSetInterfaceConfig).toHaveBeenCalledWith({
+      ...baseConfig,
+      properties: {
+        ...baseConfig.properties,
+        card_title: 'New Chat Name',
+      },
+    });
+  });
+
+  it('renders Welcome Message input field', () => {
+    renderComponent(baseConfig);
+
+    const input = screen.getByTestId('input-welcomeMessage');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Welcome!');
+  });
+
+  it('updates welcome_message when Welcome Message input changes', () => {
+    renderComponent(baseConfig);
+
+    const input = screen.getByTestId('input-welcomeMessage');
+    fireEvent.change(input, { target: { value: 'New Welcome Message' } });
+
+    expect(mockSetInterfaceConfig).toHaveBeenCalledWith({
+      ...baseConfig,
+      properties: {
+        ...baseConfig.properties,
+        chat_bot: {
+          ...baseConfig.properties.chat_bot,
+          welcome_message: 'New Welcome Message',
+        },
+      },
+    });
+  });
+
+  it('renders ColourPicker for Chat Color', () => {
+    renderComponent(baseConfig);
+
+    expect(screen.getByTestId('colour-picker')).toBeInTheDocument();
+    const colorInput = screen.getByTestId('colour-input');
+    // HTML color inputs normalize to lowercase
+    expect(colorInput).toHaveValue('#ff5733');
+  });
+
+  it('updates visual_color when Chat Color changes', () => {
+    renderComponent(baseConfig);
+
+    const colorInput = screen.getByTestId('colour-input');
+    fireEvent.change(colorInput, { target: { value: '#123456' } });
+
+    expect(mockSetInterfaceConfig).toHaveBeenCalledWith({
+      ...baseConfig,
+      properties: {
+        ...baseConfig.properties,
+        visual_color: '#123456',
+      },
+    });
+  });
+
+  it('renders Responder Name input when interfaceDisplayType is MOBILE', () => {
+    mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+    renderComponent(baseConfig);
+
+    const input = screen.getByTestId('input-responderName');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Bot');
+  });
+
+  it('does not render Responder Name input when interfaceDisplayType is FULL_PAGE', () => {
+    renderComponent(baseConfig);
+
+    expect(screen.queryByTestId('input-responderName')).not.toBeInTheDocument();
+  });
+
+  it('updates responder_name when Responder Name input changes', () => {
+    mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+    renderComponent(baseConfig);
+
+    const input = screen.getByTestId('input-responderName');
+    fireEvent.change(input, { target: { value: 'New Bot Name' } });
+
+    expect(mockSetInterfaceConfig).toHaveBeenCalledWith({
+      ...baseConfig,
+      properties: {
+        ...baseConfig.properties,
+        chat_bot: {
+          ...baseConfig.properties.chat_bot,
+          responder_name: 'New Bot Name',
+        },
+      },
+    });
+  });
+
+  it('renders UploadChatbotAvatar component', () => {
+    renderComponent(baseConfig);
+
+    expect(screen.getByTestId('upload-chatbot-avatar')).toBeInTheDocument();
+    expect(screen.getByTestId('avatar-label')).toHaveTextContent('Avatar');
+  });
+
+  it('passes avatar prop to UploadChatbotAvatar when avatar exists', () => {
+    const avatar: Avatar = { type: 'image', value: 'http://example.com/avatar.png' };
+    const configWithAvatar: WorkflowInterfaceConfig = {
+      ...baseConfig,
+      properties: {
+        ...baseConfig.properties,
+        chat_bot: {
+          ...baseConfig.properties.chat_bot,
+          avatar,
+        },
+      },
+    };
+
+    renderComponent(configWithAvatar);
+
+    const avatarValue = screen.getByTestId('avatar-value');
+    expect(avatarValue).toHaveTextContent(JSON.stringify(avatar));
+  });
+
+  it('passes undefined avatar to UploadChatbotAvatar when avatar does not exist', () => {
+    renderComponent(baseConfig);
+
+    const avatarValue = screen.getByTestId('avatar-value');
+    expect(avatarValue).toHaveTextContent('no-avatar');
+  });
+
+  it('passes visual_color to UploadChatbotAvatar', () => {
+    renderComponent(baseConfig);
+
+    const visualColor = screen.getByTestId('avatar-visual-color');
+    expect(visualColor).toHaveTextContent('#FF5733');
+  });
+
+  it('updates avatar when setAvatar is called from UploadChatbotAvatar', () => {
+    renderComponent(baseConfig);
+
+    const setAvatarBtn = screen.getByTestId('set-avatar-btn');
+    fireEvent.click(setAvatarBtn);
+
+    expect(mockSetInterfaceConfig).toHaveBeenCalledWith({
+      ...baseConfig,
+      properties: {
+        ...baseConfig.properties,
+        chat_bot: {
+          ...baseConfig.properties.chat_bot,
+          avatar: { type: 'image', value: 'http://example.com/new-avatar.png' },
+        },
+      },
+    });
+  });
+
+  it('handles empty welcome_message gracefully', () => {
+    const configWithoutWelcome: WorkflowInterfaceConfig = {
+      ...baseConfig,
+      properties: {
+        ...baseConfig.properties,
+        chat_bot: {
+          ...baseConfig.properties.chat_bot,
+          welcome_message: undefined,
+        },
+      },
+    };
+
+    renderComponent(configWithoutWelcome);
+
+    const input = screen.getByTestId('input-welcomeMessage');
+    expect(input).toHaveValue('');
+  });
+
+  it('handles empty responder_name gracefully', () => {
+    mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+    const configWithoutResponder: WorkflowInterfaceConfig = {
+      ...baseConfig,
+      properties: {
+        ...baseConfig.properties,
+        chat_bot: {
+          ...baseConfig.properties.chat_bot,
+          responder_name: undefined,
+        },
+      },
+    };
+
+    renderComponent(configWithoutResponder);
+
+    const input = screen.getByTestId('input-responderName');
+    expect(input).toHaveValue('');
+  });
+
+  it('calls setInterfaceDisplayType when tab is clicked', () => {
+    renderComponent(baseConfig);
+
+    fireEvent.click(screen.getByTestId('interface-chat-display-tab-mobile'));
+
+    expect(mockSetInterfaceDisplayType).toHaveBeenCalledWith(INTERFACE_DISPLAY_TYPE.MOBILE);
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/Interface/__tests__/ChatbotExportConfig.test.tsx b/ui/src/enterprise/views/Agents/Interface/__tests__/ChatbotExportConfig.test.tsx
new file mode 100644
index 000000000..01ec0df57
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/Interface/__tests__/ChatbotExportConfig.test.tsx
@@ -0,0 +1,942 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { expect, describe, it, beforeEach, jest } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import ChatbotExportConfig from '../ChatbotExportConfig';
+import { ChakraProvider } from '@chakra-ui/react';
+import { INTERFACE_DISPLAY_TYPE } from '../../types';
+import { WorkflowExportConfig, WorkflowInterfaceConfig } from '@/enterprise/services/types';
+
+// Mock useAgentStore
+const mockSetExportConfig = jest.fn();
+let mockExportConfig: WorkflowExportConfig = {
+  method: 'embed',
+  interface_position: 'bottom_right',
+  whitelist_urls: [],
+  embeddable_assistant: false,
+  query_selector: '',
+};
+let mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+let mockInterfaceConfig: WorkflowInterfaceConfig | null = null;
+let mockWorkflowDataApp: any = null;
+
+jest.mock('@/enterprise/store/useAgentStore', () => {
+  const mockFn = jest.fn((selector: (state: any) => any) => {
+    const state = {
+      exportConfig: mockExportConfig,
+      setExportConfig: mockSetExportConfig,
+      interfaceDisplayType: mockInterfaceDisplayType,
+      interfaceConfig: mockInterfaceConfig,
+      workflowDataApp: mockWorkflowDataApp,
+    };
+    return selector(state);
+  });
+  (mockFn as any).getState = jest.fn(() => ({
+    exportConfig: mockExportConfig,
+    setExportConfig: mockSetExportConfig,
+  }));
+  return {
+    __esModule: true,
+    default: mockFn,
+  };
+});
+
+// Mock useConfigStore
+jest.mock('@/enterprise/store/useConfigStore', () => ({
+  useConfigStore: {
+    getState: () => ({
+      configs: {
+        apiHost: 'https://api.example.com',
+      },
+    }),
+    subscribe: jest.fn(),
+  },
+}));
+
+// Mock hooks
+const mockShowToast = jest.fn();
+const mockShowError = jest.fn();
+
+jest.mock('@/hooks/useCustomToast', () => ({
+  __esModule: true,
+  default: () => mockShowToast,
+}));
+
+jest.mock('@/hooks/useErrorToast', () => ({
+  __esModule: true,
+  useErrorToast: () => mockShowError,
+}));
+
+// Mock copy-to-clipboard
+const mockCopyFn = jest.fn();
+jest.mock('copy-to-clipboard', () => ({
+  __esModule: true,
+  default: (...args: any[]) => mockCopyFn(...args),
+}));
+
+// Mock window.open
+const mockWindowOpen = jest.fn();
+Object.defineProperty(window, 'open', {
+  writable: true,
+  value: mockWindowOpen,
+});
+
+// Mock location
+Object.defineProperty(window, 'location', {
+  writable: true,
+  value: {
+    origin: 'https://app.example.com',
+  },
+});
+
+// Mock CustomSelect
+jest.mock('@/components/CustomSelect/CustomSelect', () => ({
+  __esModule: true,
+  CustomSelect: ({
+    name,
+    value,
+    onChange,
+    placeholder,
+    children,
+    'data-testid': dataTestId,
+  }: {
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    children: React.ReactNode;
+    'data-testid'?: string;
+  }) => (
+    <div data-testid={dataTestId ?? `custom-select-${name}`}>
+      <select
+        data-testid={`select-${name}`}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        <option value=''>{placeholder}</option>
+        {children}
+      </select>
+    </div>
+  ),
+}));
+
+// Mock Option
+jest.mock('@/components/CustomSelect/Option', () => ({
+  __esModule: true,
+  Option: ({ value, children }: { value: string; children: React.ReactNode }) => (
+    <option value={value}>{children}</option>
+  ),
+}));
+
+// Mock InputField
+jest.mock('@/components/InputField', () => ({
+  __esModule: true,
+  default: ({
+    label,
+    name,
+    value,
+    onChange,
+    placeholder,
+    isTooltip,
+    tooltipLabel,
+  }: {
+    label: string;
+    name: string;
+    value: string;
+    onChange: (e: { target: { value: string } }) => void;
+    placeholder?: string;
+    isTooltip?: boolean;
+    tooltipLabel?: string;
+  }) => (
+    <div data-testid={`input-field-${name}`}>
+      <label>{label}</label>
+      <input
+        data-testid={`input-${name}`}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+      />
+      {isTooltip && tooltipLabel && <div data-testid={`tooltip-${name}`}>{tooltipLabel}</div>}
+    </div>
+  ),
+}));
+
+// Mock ExportComponents
+jest.mock('../ExportComponents', () => ({
+  __esModule: true,
+  ExportSection: ({
+    title,
+    children,
+    actions,
+  }: {
+    title: string;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+  }) => (
+    <div data-testid={`export-section-${title.toLowerCase().replace(/\s+/g, '-')}`}>
+      <div data-testid='export-section-title'>{title}</div>
+      {actions && <div data-testid='export-section-actions'>{actions}</div>}
+      <div data-testid='export-section-content'>{children}</div>
+    </div>
+  ),
+  ExportButton: ({
+    icon,
+    onClick,
+    children,
+    isDisabled,
+  }: {
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    children: React.ReactNode;
+    isDisabled?: boolean;
+  }) => (
+    <button data-testid='export-button' onClick={onClick} disabled={isDisabled}>
+      {icon && <span data-testid='export-button-icon'>{icon}</span>}
+      {children}
+    </button>
+  ),
+}));
+
+// Mock separated components
+jest.mock('../EmbeddableCodeSection', () => ({
+  __esModule: true,
+  EmbeddableCodeSection: () => (
+    <div data-testid='embeddable-code-section'>EmbeddableCodeSection</div>
+  ),
+}));
+
+jest.mock('../ChromeExtensionSection', () => ({
+  __esModule: true,
+  ChromeExtensionSection: () => (
+    <div data-testid='chrome-extension-section'>ChromeExtensionSection</div>
+  ),
+}));
+
+jest.mock('../StandaloneAppSection', () => ({
+  __esModule: true,
+  StandaloneAppSection: () => <div data-testid='standalone-app-section'>StandaloneAppSection</div>,
+}));
+
+// Mock CHROME_EXTENSION_URL
+jest.mock('@/enterprise/app-constants', () => ({
+  __esModule: true,
+  CHROME_EXTENSION_URL: 'https://chrome-extension.example.com',
+}));
+
+// Mock react-icons/fi
+jest.mock('react-icons/fi', () => ({
+  FiCopy: () => <span data-testid='fi-copy-icon'>CopyIcon</span>,
+  FiExternalLink: () => <span data-testid='fi-external-link-icon'>ExternalLinkIcon</span>,
+  FiInfo: () => <span data-testid='fi-info-icon'>InfoIcon</span>,
+}));
+
+describe('ChatbotExportConfig', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockCopyFn.mockClear();
+    mockExportConfig = {
+      method: 'embed',
+      interface_position: 'bottom_right',
+      whitelist_urls: [],
+      embeddable_assistant: false,
+      query_selector: '',
+    };
+    mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+    mockInterfaceConfig = null;
+    mockWorkflowDataApp = null;
+  });
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <ChakraProvider>
+        <ChatbotExportConfig isExportOpen={true} agentId='agent-123' {...props} />
+      </ChakraProvider>,
+    );
+  };
+
+  describe('Component Rendering', () => {
+    it('renders method selector when isExportOpen is true', () => {
+      renderComponent();
+      expect(screen.getByText('Method')).toBeInTheDocument();
+      expect(screen.getByTestId('select-method')).toBeInTheDocument();
+      expect(screen.getByTestId('interface-export-method-select')).toBeInTheDocument();
+    });
+
+    it('does not render content when isExportOpen is false', async () => {
+      renderComponent({ isExportOpen: false });
+      await waitFor(
+        () => {
+          const methodText = screen.queryByText('Method');
+          if (methodText) {
+            const style = window.getComputedStyle(methodText);
+            expect(
+              style.display === 'none' || style.visibility === 'hidden' || !methodText.offsetParent,
+            ).toBe(true);
+          } else {
+            expect(methodText).not.toBeInTheDocument();
+          }
+        },
+        { timeout: 1000 },
+      );
+    });
+
+    it('renders helper text for selected method', () => {
+      renderComponent();
+      const helperText = screen.getByText(/Get a code snippet to embed your interface/i);
+      expect(helperText).toBeInTheDocument();
+    });
+
+    it('renders EmbeddableCodeSection when method is embed', () => {
+      mockExportConfig.method = 'embed';
+      renderComponent();
+      expect(screen.getByTestId('embeddable-code-section')).toBeInTheDocument();
+    });
+
+    it('renders ChromeExtensionSection when method is no_code', () => {
+      mockExportConfig.method = 'no_code';
+      renderComponent();
+      expect(screen.getByTestId('chrome-extension-section')).toBeInTheDocument();
+    });
+
+    it('renders StandaloneAppSection when method is assistant', () => {
+      mockExportConfig.method = 'assistant';
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      renderComponent();
+      expect(screen.getByTestId('standalone-app-section')).toBeInTheDocument();
+    });
+  });
+
+  describe('Method Selection', () => {
+    it('updates export config when method changes', () => {
+      renderComponent();
+      const select = screen.getByTestId('select-method');
+      fireEvent.change(select, { target: { value: 'no_code' } });
+
+      expect(mockSetExportConfig).toHaveBeenCalledWith({
+        ...mockExportConfig,
+        method: 'no_code',
+        embeddable_assistant: false,
+      });
+    });
+
+    it('sets embeddable_assistant to true when method is embed and display type is FULL_PAGE', () => {
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      renderComponent();
+      const select = screen.getByTestId('select-method');
+      fireEvent.change(select, { target: { value: 'embed' } });
+
+      expect(mockSetExportConfig).toHaveBeenCalledWith({
+        ...mockExportConfig,
+        method: 'embed',
+        embeddable_assistant: true,
+      });
+    });
+  });
+
+  describe('Query Selector Input', () => {
+    it('renders query selector input for embed method and full page', () => {
+      mockExportConfig.method = 'embed';
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      renderComponent();
+
+      expect(screen.getByText('Query Selector')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('[data-id = "tabpanel-general"]')).toBeInTheDocument();
+    });
+
+    it('does not render query selector for mobile display type', () => {
+      mockExportConfig.method = 'embed';
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      renderComponent();
+
+      expect(screen.queryByText('Query Selector')).not.toBeInTheDocument();
+    });
+
+    it('updates query_selector when input changes', () => {
+      mockExportConfig.method = 'embed';
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      renderComponent();
+
+      const input = screen.getByPlaceholderText('[data-id = "tabpanel-general"]');
+      fireEvent.change(input, { target: { value: '[data-id="test"]' } });
+
+      expect(mockSetExportConfig).toHaveBeenCalledWith({
+        ...mockExportConfig,
+        query_selector: '[data-id="test"]',
+      });
+    });
+  });
+
+  describe('Interface Position Selector', () => {
+    it('renders interface position selector for mobile and non-embeddable assistant', () => {
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = false;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      renderComponent();
+
+      expect(screen.getByText('Interface Position')).toBeInTheDocument();
+      expect(screen.getByTestId('select-interface_position')).toBeInTheDocument();
+    });
+
+    it('renders interface position selector for no_code method and mobile', () => {
+      mockExportConfig.method = 'no_code';
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      renderComponent();
+
+      expect(screen.getByText('Interface Position')).toBeInTheDocument();
+    });
+
+    it('does not render interface position for full page', () => {
+      mockExportConfig.method = 'embed';
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      renderComponent();
+
+      expect(screen.queryByText('Interface Position')).not.toBeInTheDocument();
+    });
+
+    it('does not render interface position for embeddable assistant', () => {
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = true;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      renderComponent();
+
+      expect(screen.queryByText('Interface Position')).not.toBeInTheDocument();
+    });
+
+    it('updates interface_position when selector changes', () => {
+      mockExportConfig.method = 'embed';
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      renderComponent();
+
+      const select = screen.getByTestId('select-interface_position');
+      fireEvent.change(select, { target: { value: 'bottom_left' } });
+
+      expect(mockSetExportConfig).toHaveBeenCalledWith({
+        ...mockExportConfig,
+        interface_position: 'bottom_left',
+      });
+    });
+  });
+
+  describe('Whitelist URLs Input', () => {
+    it('renders whitelist URLs input for no_code method', () => {
+      mockExportConfig.method = 'no_code';
+      renderComponent();
+
+      expect(screen.getByText('Whitelist URLs')).toBeInTheDocument();
+      expect(screen.getByTestId('input-whitelist_urls')).toBeInTheDocument();
+    });
+
+    it('does not render whitelist URLs for other methods', () => {
+      mockExportConfig.method = 'embed';
+      renderComponent();
+
+      expect(screen.queryByText('Whitelist URLs')).not.toBeInTheDocument();
+    });
+
+    it('updates whitelist_urls when input changes', () => {
+      mockExportConfig.method = 'no_code';
+      renderComponent();
+
+      const input = screen.getByTestId('input-whitelist_urls');
+      fireEvent.change(input, { target: { value: 'https://example.com, https://test.com' } });
+
+      expect(mockSetExportConfig).toHaveBeenCalledWith({
+        ...mockExportConfig,
+        whitelist_urls: ['https://example.com', 'https://test.com'],
+      });
+    });
+
+    it('handles empty whitelist_urls', () => {
+      mockExportConfig.method = 'no_code';
+      mockExportConfig.whitelist_urls = [];
+      renderComponent();
+
+      const input = screen.getByTestId('input-whitelist_urls');
+      expect(input).toHaveValue('');
+    });
+  });
+
+  describe('Initialization Logic', () => {
+    it('initializes with API export config when available', async () => {
+      mockExportConfig.method = 'no_code';
+      mockExportConfig.embeddable_assistant = false;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'assistant',
+          embeddable_assistant: false,
+        },
+      } as any;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      mockSetExportConfig.mockClear();
+
+      renderComponent();
+
+      await waitFor(
+        () => {
+          expect(mockSetExportConfig).toHaveBeenCalled();
+        },
+        { timeout: 2000 },
+      );
+    });
+
+    it('initializes with embed method when API config has embeddable_assistant true', async () => {
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: true,
+        },
+      } as any;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+
+      renderComponent();
+
+      await waitFor(() => {
+        expect(mockSetExportConfig).toHaveBeenCalled();
+      });
+    });
+
+    it('uses first available option when current method is not available for display type', async () => {
+      mockExportConfig.method = 'assistant';
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+      } as any;
+
+      renderComponent();
+
+      await waitFor(() => {
+        expect(mockSetExportConfig).toHaveBeenCalled();
+      });
+    });
+
+    it('initializes with default values when no API config and no current config', async () => {
+      mockExportConfig.method = '';
+      mockExportConfig.embeddable_assistant = undefined;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+      } as any;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+
+      renderComponent();
+
+      await waitFor(() => {
+        expect(mockSetExportConfig).toHaveBeenCalled();
+        const calls = mockSetExportConfig.mock.calls;
+        const lastCall = calls[calls.length - 1];
+        if (lastCall) {
+          const config = lastCall[0] as WorkflowExportConfig;
+          expect(config.method).toBe('embed');
+          expect(config.embeddable_assistant).toBe(false);
+        }
+      });
+    });
+  });
+
+  describe('Display Type Changes', () => {
+    it('handles display type change from MOBILE to FULL_PAGE', async () => {
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+      } as any;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockExportConfig.method = 'embed';
+
+      const { rerender } = renderComponent();
+
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      rerender(
+        <ChakraProvider>
+          <ChatbotExportConfig isExportOpen={true} agentId='agent-123' />
+        </ChakraProvider>,
+      );
+
+      await waitFor(() => {
+        expect(mockSetExportConfig).toHaveBeenCalled();
+      });
+    });
+
+    it('restores saved method when switching back to a display type', async () => {
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+      } as any;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockExportConfig.method = 'embed';
+
+      const { rerender } = renderComponent();
+
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      rerender(
+        <ChakraProvider>
+          <ChatbotExportConfig isExportOpen={true} agentId='agent-123' />
+        </ChakraProvider>,
+      );
+
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      rerender(
+        <ChakraProvider>
+          <ChatbotExportConfig isExportOpen={true} agentId='agent-123' />
+        </ChakraProvider>,
+      );
+
+      await waitFor(() => {
+        expect(mockSetExportConfig).toHaveBeenCalled();
+      });
+    });
+
+    it('uses API value when switching to FULL_PAGE with embeddable_assistant true', async () => {
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: true,
+        },
+      } as any;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = false;
+
+      const { rerender } = renderComponent();
+
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      rerender(
+        <ChakraProvider>
+          <ChatbotExportConfig isExportOpen={true} agentId='agent-123' />
+        </ChakraProvider>,
+      );
+
+      await waitFor(() => {
+        const calls = mockSetExportConfig.mock.calls;
+        const hasEmbeddableTrue = calls.some((call) => {
+          const config = call[0] as WorkflowExportConfig;
+          return config.embeddable_assistant === true && config.method === 'embed';
+        });
+        expect(hasEmbeddableTrue).toBe(true);
+      });
+    });
+  });
+
+  describe('Validation Logic', () => {
+    it('forces method to embed when embeddable_assistant is true but method is not embed', async () => {
+      mockExportConfig.method = 'no_code';
+      mockExportConfig.embeddable_assistant = true;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+      } as any;
+
+      renderComponent();
+
+      await waitFor(() => {
+        expect(mockSetExportConfig).toHaveBeenCalledWith(
+          expect.objectContaining({
+            method: 'embed',
+          }),
+        );
+      });
+    });
+
+    it('validates embeddable_assistant flag matches display type and method', async () => {
+      mockExportConfig.method = 'no_code';
+      mockExportConfig.embeddable_assistant = false;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+      } as any;
+
+      renderComponent();
+
+      await waitFor(
+        () => {
+          expect(mockSetExportConfig).toHaveBeenCalled();
+        },
+        { timeout: 2000 },
+      );
+
+      const calls = mockSetExportConfig.mock.calls;
+      const lastCall = calls[calls.length - 1];
+      if (lastCall) {
+        const config = lastCall[0] as WorkflowExportConfig;
+        expect(['assistant', 'embed']).toContain(config.method);
+      }
+    });
+
+    it('corrects embeddable_assistant when method is embed but flag is wrong for MOBILE', async () => {
+      // Set up valid initialized state
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = true; // Wrong for MOBILE - should be false
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: false,
+        },
+      } as any;
+
+      renderComponent();
+
+      await waitFor(
+        () => {
+          const calls = mockSetExportConfig.mock.calls;
+          const hasCorrectedFlag = calls.some((call) => {
+            const config = call[0] as WorkflowExportConfig;
+            return config.method === 'embed' && config.embeddable_assistant === false;
+          });
+          expect(hasCorrectedFlag).toBe(true);
+        },
+        { timeout: 2000 },
+      );
+    });
+
+    it('corrects embeddable_assistant when method is embed but flag is wrong for FULL_PAGE', async () => {
+      // Set up valid initialized state
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = false; // Wrong for FULL_PAGE - should be true
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: true,
+        },
+      } as any;
+
+      renderComponent();
+
+      await waitFor(
+        () => {
+          const calls = mockSetExportConfig.mock.calls;
+          const hasCorrectedFlag = calls.some((call) => {
+            const config = call[0] as WorkflowExportConfig;
+            return config.method === 'embed' && config.embeddable_assistant === true;
+          });
+          expect(hasCorrectedFlag).toBe(true);
+        },
+        { timeout: 2000 },
+      );
+    });
+
+    it('updates method to first available when current method is invalid for display type after init', async () => {
+      // First render with valid config to initialize
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = false;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: false,
+        },
+      } as any;
+
+      const { rerender } = renderComponent();
+
+      // Wait for initialization
+      await waitFor(() => {
+        expect(screen.getByText('Method')).toBeInTheDocument();
+      });
+
+      // Now set an invalid method and trigger a re-render with dataAppId change
+      mockSetExportConfig.mockClear();
+      mockExportConfig.method = 'assistant'; // Invalid for MOBILE
+      mockInterfaceConfig = {
+        dataAppId: 'app-456', // Changed to trigger useEffect
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: false,
+        },
+      } as any;
+
+      rerender(
+        <ChakraProvider>
+          <ChatbotExportConfig isExportOpen={true} agentId='agent-123' />
+        </ChakraProvider>,
+      );
+
+      await waitFor(
+        () => {
+          const calls = mockSetExportConfig.mock.calls;
+          const hasValidMethod = calls.some((call) => {
+            const config = call[0] as WorkflowExportConfig;
+            return config.method === 'embed' || config.method === 'no_code';
+          });
+          expect(hasValidMethod).toBe(true);
+        },
+        { timeout: 2000 },
+      );
+    });
+
+    it('stores method in ref after validation', async () => {
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = false;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: false,
+        },
+      } as any;
+
+      renderComponent();
+
+      await waitFor(() => {
+        expect(screen.getByText('Method')).toBeInTheDocument();
+      });
+
+      // Verify component renders correctly with validated state
+      expect(screen.getByTestId('embeddable-code-section')).toBeInTheDocument();
+    });
+
+    it('forces method to embed during validation when embeddable_assistant is true with wrong method', async () => {
+      // Initialize with valid config first
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = false;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: false,
+        },
+      } as any;
+
+      const { rerender } = renderComponent();
+
+      await waitFor(() => {
+        expect(screen.getByText('Method')).toBeInTheDocument();
+      });
+
+      // Now change to invalid state where embeddable_assistant is true but method isn't embed
+      mockSetExportConfig.mockClear();
+      mockExportConfig.method = 'no_code';
+      mockExportConfig.embeddable_assistant = true;
+      mockInterfaceConfig = {
+        dataAppId: 'app-456', // Changed to trigger useEffect
+        export_config: {
+          method: 'no_code',
+          embeddable_assistant: true,
+        },
+      } as any;
+
+      rerender(
+        <ChakraProvider>
+          <ChatbotExportConfig isExportOpen={true} agentId='agent-123' />
+        </ChakraProvider>,
+      );
+
+      await waitFor(
+        () => {
+          const calls = mockSetExportConfig.mock.calls;
+          const hasForcedEmbed = calls.some((call) => {
+            const config = call[0] as WorkflowExportConfig;
+            return config.method === 'embed';
+          });
+          expect(hasForcedEmbed).toBe(true);
+        },
+        { timeout: 2000 },
+      );
+    });
+
+    it('corrects embeddable_assistant flag when it mismatches expected value after validation', async () => {
+      // Initialize with valid config for FULL_PAGE
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = true;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.FULL_PAGE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: true,
+        },
+      } as any;
+
+      const { rerender } = renderComponent();
+
+      await waitFor(() => {
+        expect(screen.getByText('Method')).toBeInTheDocument();
+      });
+
+      // Now change the flag to wrong value while keeping same display type
+      mockSetExportConfig.mockClear();
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = false; // Wrong for FULL_PAGE embed
+      mockInterfaceConfig = {
+        dataAppId: 'app-456', // Changed to trigger useEffect
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: false,
+        },
+      } as any;
+
+      rerender(
+        <ChakraProvider>
+          <ChatbotExportConfig isExportOpen={true} agentId='agent-123' />
+        </ChakraProvider>,
+      );
+
+      await waitFor(
+        () => {
+          const calls = mockSetExportConfig.mock.calls;
+          const hasCorrectedFlag = calls.some((call) => {
+            const config = call[0] as WorkflowExportConfig;
+            return config.embeddable_assistant === true;
+          });
+          expect(hasCorrectedFlag).toBe(true);
+        },
+        { timeout: 2000 },
+      );
+    });
+
+    it('updates to first available option when current method becomes invalid', async () => {
+      // Initialize with valid config
+      mockExportConfig.method = 'embed';
+      mockExportConfig.embeddable_assistant = false;
+      mockInterfaceDisplayType = INTERFACE_DISPLAY_TYPE.MOBILE;
+      mockInterfaceConfig = {
+        dataAppId: 'app-123',
+        export_config: {
+          method: 'embed',
+          embeddable_assistant: false,
+        },
+      } as any;
+
+      const { rerender } = renderComponent();
+
+      await waitFor(() => {
+        expect(screen.getByText('Method')).toBeInTheDocument();
+      });
+
+      // Change method to invalid value for MOBILE
+      mockSetExportConfig.mockClear();
+      mockExportConfig.method = 'assistant'; // Not valid for MOBILE
+      mockExportConfig.embeddable_assistant = false;
+      mockInterfaceConfig = {
+        dataAppId: 'app-789',
+        export_config: {
+          method: 'assistant',
+          embeddable_assistant: false,
+        },
+      } as any;
+
+      rerender(
+        <ChakraProvider>
+          <ChatbotExportConfig isExportOpen={true} agentId='agent-123' />
+        </ChakraProvider>,
+      );
+
+      await waitFor(
+        () => {
+          const calls = mockSetExportConfig.mock.calls;
+          const hasValidMethod = calls.some((call) => {
+            const config = call[0] as WorkflowExportConfig;
+            // embed or no_code are valid for MOBILE
+            return config.method === 'embed' || config.method === 'no_code';
+          });
+          expect(hasValidMethod).toBe(true);
+        },
+        { timeout: 2000 },
+      );
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Agents/Interface/__tests__/ConfigWrapper.test.tsx b/ui/src/enterprise/views/Agents/Interface/__tests__/ConfigWrapper.test.tsx
new file mode 100644
index 000000000..6100f6aaa
--- /dev/null
+++ b/ui/src/enterprise/views/Agents/Interface/__tests__/ConfigWrapper.test.tsx
@@ -0,0 +1,288 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { expect, describe, it, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import ConfigWrapper from '../ConfigWrapper';
+import { ChakraProvider } from '@chakra-ui/react';
+import { INTERFACE_TYPE } from '../../types';
+import { WorkflowInterfaceConfig } from '@/enterprise/services/types';
+
+// Mock react-router-dom
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({ id: 'workflow-123' }),
+}));
+
+// Mock ChatGeneralConfig
+jest.mock('../ChatGeneralConfig', () => ({
+  __esModule: true,
+  default: () => <div data-testid='chat-general-config'>Chat General Config</div>,
+}));
+
+// Mock ApiGeneralConfig
+jest.mock('../ApiInterface/ApiGeneralConfig', () => ({
+  __esModule: true,
+  default: () => <div data-testid='api-general-config'>API General Config</div>,
+}));
+
+// Mock SlackGeneralConfig
+jest.mock('../SlackInterface/SlackGeneralConfig', () => ({
+  __esModule: true,
+  default: () => <div data-testid='slack-general-config'>Slack General Config</div>,
+}));
+
+// Mock SlackExportConfig
+jest.mock('../SlackInterface/SlackExportConfig', () => ({
+  __esModule: true,
+  default: () => <div data-testid='slack-export-config'>Slack Export Config</div>,
+}));
+
+// Mock ChatbotExportConfig
+jest.mock('../ChatbotExportConfig', () => ({
+  __esModule: true,
+  default: ({ isExportOpen }: { isExportOpen: boolean; agentId: string }) =>
+    isExportOpen ? <div data-testid='chatbot-export-config'>Chatbot Export Config</div> : null,
+}));
+
+// Mock Security
+jest.mock('../Security/Security', () => ({
+  __esModule: true,
+  default: () => <div data-testid='security-config'>Security Config</div>,
+}));
+
+// Mock FeedbackConfigForm
+jest.mock('@/enterprise/views/DataApps/DataAppsForm/BuildDataApp/FeedbackConfigForm', () => ({
+  __esModule: true,
+  default: () => <div data-testid='feedback-config-form'>Feedback Config Form</div>,
+}));
+
+// Mock react-icons
+jest.mock('react-icons/fi');
+
+describe('ConfigWrapper', () => {
+  const mockSetInterfaceComponentConfig = jest.fn();
+
+  const defaultInterfaceConfig = {
+    component_type: 'chatbot',
+    configurable_id: '123',
+    configurable_type: 'agent',
+    properties: {
+      field_group: '',
+      measure_value: '',
+      card_title: 'Test Chat',
+      visual_color: '#808080',
+      file_id: '',
+      chat_bot: {
+        welcome_message: 'Hello!',
+        responder_name: 'Bot',
+      },
+    },
+    feedback_config: {
+      feedback_enabled: false,
+      feedback_method: null,
+      feedback_title: '',
+      feedback_description: '',
+      additional_remarks: {
+        enabled: false,
+        required: false,
+        title: '',
+        description: '',
+      },
+      multiple_choice: {
+        type: 'single',
+        choices: [],
+      },
+    },
+    export_config: {
+      method: 'embed',
+      interface_position: 'bottom_right',
+    },
+  } as unknown as WorkflowInterfaceConfig;
+
+  const defaultProps = {
+    selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+    interfaceComponentConfig: defaultInterfaceConfig,
+    setInterfaceComponentConfig: mockSetInterfaceComponentConfig,
+  };
+
+  const renderComponent = (props = defaultProps) => {
+    return render(
+      <ChakraProvider>
+        <ConfigWrapper {...props} />
+      </ChakraProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render GENERAL section', () => {
+      renderComponent();
+      expect(screen.getByText('GENERAL')).toBeInTheDocument();
+    });
+
+    it('should render export section toggle with test id', () => {
+      renderComponent();
+      expect(screen.getByTestId('interface-export-section-toggle')).toBeInTheDocument();
+    });
+
+    it('should render ChatGeneralConfig for Website Chatbot', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+      });
+      expect(screen.getByTestId('chat-general-config')).toBeInTheDocument();
+    });
+
+    it('should render ApiGeneralConfig for API Interface', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.API_INTERFACE,
+      });
+      expect(screen.getByTestId('api-general-config')).toBeInTheDocument();
+    });
+
+    it('should render SlackGeneralConfig for Slack App', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.SLACK_APP,
+      });
+      expect(screen.getByTestId('slack-general-config')).toBeInTheDocument();
+    });
+  });
+
+  describe('Feedback Section', () => {
+    it('should render FEEDBACK section for Website Chatbot', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+      });
+      expect(screen.getByText('FEEDBACK')).toBeInTheDocument();
+    });
+
+    it('should render FEEDBACK section for Slack App', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.SLACK_APP,
+      });
+      expect(screen.getByText('FEEDBACK')).toBeInTheDocument();
+    });
+
+    it('should not render FEEDBACK section for API Interface', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.API_INTERFACE,
+      });
+      expect(screen.queryByText('FEEDBACK')).not.toBeInTheDocument();
+    });
+
+    it('should toggle feedback section when clicked', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+      });
+
+      const feedbackButton = screen.getByText('FEEDBACK').closest('button');
+      fireEvent.click(feedbackButton!);
+
+      // After clicking, feedback section should expand
+      expect(screen.getByText('Enable Feedback')).toBeInTheDocument();
+    });
+  });
+
+  describe('Security Section', () => {
+    it('should render SECURITY section for Website Chatbot', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+      });
+      expect(screen.getByText('SECURITY')).toBeInTheDocument();
+    });
+
+    it('should not render SECURITY section for API Interface', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.API_INTERFACE,
+      });
+      expect(screen.queryByText('SECURITY')).not.toBeInTheDocument();
+    });
+
+    it('should not render SECURITY section for Slack App', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.SLACK_APP,
+      });
+      expect(screen.queryByText('SECURITY')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Export Section', () => {
+    it('should render EXPORT section for Website Chatbot', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+      });
+      expect(screen.getByText('EXPORT')).toBeInTheDocument();
+    });
+
+    it('should render EXPORT section for Slack App', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.SLACK_APP,
+      });
+      expect(screen.getByText('EXPORT')).toBeInTheDocument();
+    });
+
+    it('should not render EXPORT section for API Interface', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.API_INTERFACE,
+      });
+      expect(screen.queryByText('EXPORT')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Collapsible Sections', () => {
+    it('should have GENERAL section open by default', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+      });
+      // Chat General Config should be visible by default
+      expect(screen.getByTestId('chat-general-config')).toBeInTheDocument();
+    });
+
+    it('should close GENERAL and open FEEDBACK when FEEDBACK is clicked', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+      });
+
+      const feedbackButton = screen.getByText('FEEDBACK').closest('button');
+      fireEvent.click(feedbackButton!);
+
+      // Feedback section should now be visible
+      expect(screen.getByText('Enable Feedback')).toBeInTheDocument();
+    });
+  });
+
+  describe('Feedback Toggle', () => {
+    it('should call setInterfaceComponentConfig when feedback switch is toggled', () => {
+      renderComponent({
+        ...defaultProps,
+        selectedInterfaceType: INTERFACE_TYPE.WEBSITE_CHATBOT,
+      });
+
+      // Open feedback section
+      const feedbackButton = screen.getByText('FEEDBACK').closest('button');
+      fireEvent.click(feedbackButton!);
+
+      // Toggle feedback switch
+      const feedbackSwitch = screen.getByRole('checkbox');
+      fireEvent.click(feedbackSwitch);
+
+      expect(mockSetInterfaceComponentConfig).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Assistant/ListAssistants/AssistantsList.tsx b/ui/src/enterprise/views/Assistant/ListAssistants/AssistantsList.tsx
new file mode 100644
index 000000000..6ffdca776
--- /dev/null
+++ b/ui/src/enterprise/views/Assistant/ListAssistants/AssistantsList.tsx
@@ -0,0 +1,98 @@
+import { Box } from '@chakra-ui/react';
+import ContentContainer from '@/components/ContentContainer';
+import TopBar from '@/components/TopBar';
+
+import { useAPIErrorsToast } from '@/hooks/useErrorToast';
+import DataTable from '@/components/DataTable';
+import Loader from '@/components/Loader';
+import useProtectedNavigate from '@/enterprise/hooks/useProtectedNavigate';
+import { UserActions } from '@/enterprise/types';
+import Pagination from '@/components/EnhancedPagination';
+import useFilters from '@/hooks/useFilters';
+import useDataAppQueries from '@/enterprise/hooks/queries/useDataAppQueries';
+import NoAssistants from './NoAssistants';
+import { RENDERING_OPTION_TYPE } from '../../DataApps/DataAppsForm/types';
+import { AssistantColumns } from './AssistantColumns';
+import { DataAppsResponse } from '@/enterprise/services/types';
+
+const AssistantsList = () => {
+  const { useGetDataApps } = useDataAppQueries();
+  const { filters, updateFilters } = useFilters({
+    page: '1',
+    rendering_type: 'assistant',
+  });
+  const navigate = useProtectedNavigate();
+  const apiErrorToast = useAPIErrorsToast();
+
+  const { data: dataApps, isLoading: isDataAppsFetching } = useGetDataApps(filters);
+
+  const onPageSelect = (page: number) => {
+    updateFilters({
+      page: page.toString(),
+      rendering_type: 'assistant',
+    });
+  };
+
+  if (dataApps?.errors) {
+    apiErrorToast(dataApps.errors);
+    return;
+  }
+
+  const assistantsDataApps = dataApps?.data?.filter(
+    (app) => app.attributes.rendering_type === RENDERING_OPTION_TYPE.ASSISTANT,
+  );
+
+  if (isDataAppsFetching) {
+    return <Loader />;
+  }
+
+  return (
+    <Box width='100%' display='flex' flexDirection='column' alignItems='center'>
+      <ContentContainer>
+        <TopBar
+          name={'Chat Assistants'}
+          description='Access and interact with your standalone chat assistants created using AI workflows and Data Apps.'
+        />
+        {assistantsDataApps?.length === 0 ? (
+          <NoAssistants />
+        ) : (
+          <Box>
+            <Box border='1px' borderColor='gray.400' borderRadius={'lg'} overflowX='scroll'>
+              <DataTable
+                data={assistantsDataApps || []}
+                columns={AssistantColumns}
+                getRowProps={(row) => {
+                  const app = row.original as DataAppsResponse;
+                  const title =
+                    app.attributes?.visual_components?.[0]?.properties?.card_title ?? '';
+                  return {
+                    'data-testid': `assistant-list-row-${app.id}`,
+                    'data-assistant-card-title': title,
+                  };
+                }}
+                onRowClick={(row) =>
+                  navigate({
+                    to: `${row.original.id}`,
+                    location: 'data_app',
+                    action: UserActions.Read,
+                  })
+                }
+              />
+            </Box>
+            <Box display='flex' justifyContent='center' pt='20px'>
+              {dataApps?.links && (
+                <Pagination
+                  links={dataApps?.links}
+                  currentPage={filters.page ? Number(filters.page) : 1}
+                  handlePageChange={onPageSelect}
+                />
+              )}
+            </Box>
+          </Box>
+        )}
+      </ContentContainer>
+    </Box>
+  );
+};
+
+export default AssistantsList;
diff --git a/ui/src/enterprise/views/Assistant/ListAssistants/__tests__/AssistantsList.test.tsx b/ui/src/enterprise/views/Assistant/ListAssistants/__tests__/AssistantsList.test.tsx
new file mode 100644
index 000000000..9b771c58b
--- /dev/null
+++ b/ui/src/enterprise/views/Assistant/ListAssistants/__tests__/AssistantsList.test.tsx
@@ -0,0 +1,322 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { expect, describe, it, jest, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import AssistantsList from '../AssistantsList';
+import useDataAppQueries from '@/enterprise/hooks/queries/useDataAppQueries';
+import { useAPIErrorsToast } from '@/hooks/useErrorToast';
+import useFilters from '@/hooks/useFilters';
+import useProtectedNavigate from '@/enterprise/hooks/useProtectedNavigate';
+import { renderWithProviders } from '@/utils/testUtils';
+import { RENDERING_OPTION_TYPE } from '@/enterprise/views/DataApps/DataAppsForm/types';
+import { mockApiErrorToast } from '../../../../../../__mocks__/commonMocks';
+
+jest.mock('@/enterprise/hooks/queries/useDataAppQueries');
+jest.mock('@/hooks/useErrorToast', () => ({
+  useAPIErrorsToast: jest.fn(),
+}));
+jest.mock('@/hooks/useFilters');
+jest.mock('@/enterprise/hooks/useProtectedNavigate');
+jest.mock('../NoAssistants', () => ({
+  __esModule: true,
+  default: () => <div data-testid='no-assistants'>No Assistants</div>,
+}));
+jest.mock('@/components/DataTable', () => ({
+  __esModule: true,
+  default: ({ data, onRowClick, getRowProps }: any) => (
+    <div data-testid='data-table'>
+      {data.map((item: any) => {
+        const row = { original: item, id: String(item.id) };
+        const rowProps = getRowProps ? getRowProps(row) : {};
+        return (
+          <div key={item.id} {...rowProps} onClick={() => onRowClick({ original: item })}>
+            {item.attributes.visual_components[0]?.properties?.card_title || item.id}
+          </div>
+        );
+      })}
+    </div>
+  ),
+}));
+jest.mock('@/components/EnhancedPagination', () => ({
+  __esModule: true,
+  default: ({ currentPage, handlePageChange }: any) => (
+    <div data-testid='pagination'>
+      <button onClick={() => handlePageChange(currentPage + 1)}>Next</button>
+    </div>
+  ),
+}));
+jest.mock('@/components/Loader', () => ({
+  __esModule: true,
+  default: () => <div data-testid='loader'>Loading...</div>,
+}));
+
+const mockUseDataAppQueries = useDataAppQueries as jest.MockedFunction<typeof useDataAppQueries>;
+const mockUseAPIErrorsToast = useAPIErrorsToast as jest.MockedFunction<typeof useAPIErrorsToast>;
+const mockUseFilters = useFilters as jest.MockedFunction<typeof useFilters>;
+const mockUseProtectedNavigate = useProtectedNavigate as jest.MockedFunction<
+  typeof useProtectedNavigate
+>;
+
+const mockAssistantDataApp = {
+  id: 1,
+  type: 'data-apps',
+  attributes: {
+    name: 'Test Assistant',
+    description: '',
+    status: 'active',
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    rendering_type: RENDERING_OPTION_TYPE.ASSISTANT,
+    visual_components: [
+      {
+        properties: {
+          field_group: '',
+          measure_value: '',
+          card_title: 'Test Assistant',
+          visual_color: '#000000',
+          file_id: 'file-1',
+        },
+        feedback_config: {
+          feedback_enabled: false,
+          feedback_method: null,
+          feedback_title: '',
+        },
+      },
+    ],
+    meta_data: {
+      rendering_type: 'assistant',
+    },
+    data_app_token: 'token-123',
+  },
+};
+
+const mockDataApp = {
+  id: 2,
+  type: 'data-apps',
+  attributes: {
+    name: 'Test Data App',
+    description: '',
+    status: 'active',
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    rendering_type: RENDERING_OPTION_TYPE.NO_CODE,
+    visual_components: [
+      {
+        properties: {
+          field_group: '',
+          measure_value: '',
+          card_title: 'Test Data App',
+          visual_color: '#000000',
+          file_id: 'file-2',
+        },
+        feedback_config: {
+          feedback_enabled: false,
+          feedback_method: null,
+          feedback_title: '',
+        },
+      },
+    ],
+    meta_data: {
+      rendering_type: 'data_app',
+    },
+    data_app_token: 'token-456',
+  },
+};
+
+describe('AssistantsList', () => {
+  const mockNavigate = jest.fn();
+  const mockUpdateFilters = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseAPIErrorsToast.mockReturnValue(mockApiErrorToast);
+    mockUseProtectedNavigate.mockReturnValue(mockNavigate);
+    mockUseFilters.mockReturnValue({
+      filters: {
+        page: '1',
+        rendering_type: 'assistant',
+      },
+      updateFilters: mockUpdateFilters,
+    } as any);
+
+    mockUseDataAppQueries.mockReturnValue({
+      useGetDataApps: jest.fn().mockReturnValue({
+        data: {
+          data: [mockAssistantDataApp],
+          links: {
+            first: 'http://localhost?page=1',
+            last: 'http://localhost?page=5',
+            prev: null,
+            next: 'http://localhost?page=2',
+          },
+        },
+        isLoading: false,
+      }),
+    } as any);
+  });
+
+  describe('Component Rendering', () => {
+    it('should render AssistantsList with correct title and description', () => {
+      renderWithProviders(<AssistantsList />);
+
+      expect(screen.getByText('Chat Assistants')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'Access and interact with your standalone chat assistants created using AI workflows and Data Apps.',
+        ),
+      ).toBeInTheDocument();
+    });
+
+    it('should render data table when assistants exist', () => {
+      renderWithProviders(<AssistantsList />);
+
+      expect(screen.getByTestId('data-table')).toBeInTheDocument();
+      const row = screen.getByTestId('assistant-list-row-1');
+      expect(row).toBeInTheDocument();
+      expect(row).toHaveAttribute('data-assistant-card-title', 'Test Assistant');
+    });
+
+    it('should render NoAssistants when no assistants exist', () => {
+      mockUseDataAppQueries.mockReturnValue({
+        useGetDataApps: jest.fn().mockReturnValue({
+          data: {
+            data: [],
+          },
+          isLoading: false,
+        }),
+      } as any);
+
+      renderWithProviders(<AssistantsList />);
+
+      expect(screen.getByTestId('no-assistants')).toBeInTheDocument();
+    });
+
+    it('should show loader when data is fetching', () => {
+      mockUseDataAppQueries.mockReturnValue({
+        useGetDataApps: jest.fn().mockReturnValue({
+          data: null,
+          isLoading: true,
+        }),
+      } as any);
+
+      renderWithProviders(<AssistantsList />);
+
+      expect(screen.getByTestId('loader')).toBeInTheDocument();
+    });
+  });
+
+  describe('Data Filtering', () => {
+    it('should filter only assistant rendering type', () => {
+      mockUseDataAppQueries.mockReturnValue({
+        useGetDataApps: jest.fn().mockReturnValue({
+          data: {
+            data: [mockAssistantDataApp, mockDataApp],
+          },
+          isLoading: false,
+        }),
+      } as any);
+
+      renderWithProviders(<AssistantsList />);
+
+      expect(screen.getByTestId('assistant-list-row-1')).toBeInTheDocument();
+      expect(screen.queryByTestId('assistant-list-row-2')).not.toBeInTheDocument();
+    });
+
+    it('should handle empty data array', () => {
+      mockUseDataAppQueries.mockReturnValue({
+        useGetDataApps: jest.fn().mockReturnValue({
+          data: {
+            data: [],
+          },
+          isLoading: false,
+        }),
+      } as any);
+
+      renderWithProviders(<AssistantsList />);
+
+      expect(screen.getByTestId('no-assistants')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should show error toast when data has errors', () => {
+      const errorData = {
+        errors: [{ detail: 'Error message' }],
+      };
+
+      mockUseDataAppQueries.mockReturnValue({
+        useGetDataApps: jest.fn().mockReturnValue({
+          data: errorData,
+          isLoading: false,
+        }),
+      } as any);
+
+      renderWithProviders(<AssistantsList />);
+
+      expect(mockApiErrorToast).toHaveBeenCalledWith(errorData.errors);
+    });
+  });
+
+  describe('Row Click Navigation', () => {
+    it('should navigate to assistant detail when row is clicked', () => {
+      renderWithProviders(<AssistantsList />);
+
+      const row = screen.getByTestId('assistant-list-row-1');
+      fireEvent.click(row);
+
+      expect(mockNavigate).toHaveBeenCalledWith({
+        to: '1',
+        location: 'data_app',
+        action: expect.any(String),
+      });
+    });
+  });
+
+  describe('Pagination', () => {
+    it('should render pagination when links exist', () => {
+      renderWithProviders(<AssistantsList />);
+
+      expect(screen.getByTestId('pagination')).toBeInTheDocument();
+    });
+
+    it('should not render pagination when links do not exist', () => {
+      mockUseDataAppQueries.mockReturnValue({
+        useGetDataApps: jest.fn().mockReturnValue({
+          data: {
+            data: [mockAssistantDataApp],
+            links: null,
+          },
+          isLoading: false,
+        }),
+      } as any);
+
+      renderWithProviders(<AssistantsList />);
+
+      expect(screen.queryByTestId('pagination')).not.toBeInTheDocument();
+    });
+
+    it('should update filters when page changes', () => {
+      renderWithProviders(<AssistantsList />);
+
+      const nextButton = screen.getByText('Next');
+      fireEvent.click(nextButton);
+
+      expect(mockUpdateFilters).toHaveBeenCalledWith({
+        page: '2',
+        rendering_type: 'assistant',
+      });
+    });
+  });
+
+  describe('Filters', () => {
+    it('should initialize with correct filters', () => {
+      renderWithProviders(<AssistantsList />);
+
+      expect(mockUseFilters).toHaveBeenCalledWith({
+        page: '1',
+        rendering_type: 'assistant',
+      });
+    });
+  });
+});
diff --git a/ui/src/enterprise/views/Tools/ToolsForm/SelectToolType.tsx b/ui/src/enterprise/views/Tools/ToolsForm/SelectToolType.tsx
new file mode 100644
index 000000000..24db1e5eb
--- /dev/null
+++ b/ui/src/enterprise/views/Tools/ToolsForm/SelectToolType.tsx
@@ -0,0 +1,174 @@
+import { Box, Text, Button, HStack, Grid } from '@chakra-ui/react';
+import { useState, useMemo } from 'react';
+import ContentContainer from '@/components/ContentContainer';
+import useSteppedForm from '@/stores/useSteppedForm';
+import useQueryWrapper from '@/hooks/useQueryWrapper';
+import { getToolDefinitions, getToolDefinition } from '@/enterprise/services/tools';
+import { ToolDefinitionTemplate } from '../ToolsList/types';
+import { ApiResponse } from '@/services/common';
+import Loader from '@/components/Loader';
+import ConnectorsGridItem from '@/components/ConnectorsGridItem';
+import { Connector } from '@/views/Connectors/types';
+import useCustomToast from '@/hooks/useCustomToast';
+import { CustomToastStatus } from '@/components/Toast';
+
+type TabType = 'all' | 'ai_squared' | 'custom';
+
+const TABS: { value: TabType; label: string }[] = [
+  { value: 'all', label: 'All Tools' },
+  { value: 'ai_squared', label: 'AI Squared' },
+  { value: 'custom', label: 'Custom' },
+];
+
+const convertToConnectors = (toolDefinitions: ToolDefinitionTemplate[]): Connector[] => {
+  return toolDefinitions.map((tool) => ({
+    icon: tool.icon || '',
+    name: tool.$id,
+    title: tool.title,
+    category: tool.category || 'custom',
+    connector_spec: {
+      connection_specification: tool.properties || {},
+    },
+  }));
+};
+
+const filterConnectors = (connectors: Connector[], activeTab: TabType): Connector[] => {
+  if (activeTab === 'custom') {
+    return connectors.filter((connector) => connector.category === 'custom');
+  }
+  if (activeTab === 'ai_squared') {
+    return connectors.filter((connector) => connector.category !== 'custom');
+  }
+  return connectors;
+};
+
+const saveToolMetadata = async (
+  connector: Connector,
+  saveConnectorFormData: any,
+  showToast: any,
+) => {
+  if (!connector?.name) {
+    showToast({
+      status: CustomToastStatus.Error,
+      title: 'Error',
+      description: 'Invalid tool selected. Please select a valid tool.',
+      position: 'bottom-right',
+      isClosable: true,
+    });
+    return false;
+  }
+
+  try {
+    const definitionResponse = await getToolDefinition(connector.name);
+    const definition = definitionResponse.data;
+
+    const metadata = {
+      category: definition?.category ?? 'custom',
+      icon: definition?.icon,
+      definition_id: connector.name,
+    };
+
+    saveConnectorFormData(connector.name, 'metadata', metadata);
+    return true;
+  } catch (error) {
+    const defaultMetadata = {
+      category: 'custom',
+      definition_id: connector.name,
+    };
+    saveConnectorFormData(connector.name, 'metadata', defaultMetadata);
+
+    showToast({
+      status: CustomToastStatus.Error,
+      title: 'Error',
+      description: 'Failed to fetch tool definition. Using default values.',
+      position: 'bottom-right',
+      isClosable: true,
+    });
+    return true;
+  }
+};
+
+const SelectToolType = (): JSX.Element => {
+  const { handleMoveForward, stepInfo, saveConnectorFormData } = useSteppedForm();
+  const [activeTab, setActiveTab] = useState<TabType>('all');
+  const showToast = useCustomToast();
+
+  const { data, isLoading } = useQueryWrapper<ApiResponse<ToolDefinitionTemplate[]>>(
+    ['tool-definitions'],
+    () => getToolDefinitions(),
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: true,
+    },
+  );
+
+  const toolDefinitions = data?.data ?? [];
+  const connectors: Connector[] = useMemo(
+    () => convertToConnectors(toolDefinitions),
+    [toolDefinitions],
+  );
+  const filteredConnectors = useMemo(
+    () => filterConnectors(connectors, activeTab),
+    [connectors, activeTab],
+  );
+
+  const handleOnClick = async (connector: Connector) => {
+    const success = await saveToolMetadata(connector, saveConnectorFormData, showToast);
+
+    if (success && stepInfo?.formKey) {
+      handleMoveForward(stepInfo.formKey, connector.name);
+    }
+  };
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <Box display='flex' alignItems='center' justifyContent='center' width='100%'>
+      <ContentContainer>
+        <HStack spacing='8px' marginBottom='24px'>
+          {TABS.map((tab) => (
+            <Button
+              key={tab.value}
+              size='sm'
+              borderRadius='100px'
+              variant={activeTab === tab.value ? 'solid' : 'outline'}
+              colorScheme={activeTab === tab.value ? 'primary' : 'gray'}
+              onClick={() => setActiveTab(tab.value)}
+            >
+              {tab.label}
+            </Button>
+          ))}
+        </HStack>
+
+        {filteredConnectors.length > 0 ? (
+          <Grid
+            templateColumns='repeat(auto-fit, minmax(min(300px, 100%), 1fr))'
+            gap={4}
+            width='100%'
+          >
+            {filteredConnectors.map((connector) => (
+              <ConnectorsGridItem
+                key={`${connector.name}-${connector.category}`}
+                connector={connector}
+                onConnectorSelect={handleOnClick}
+                hasPermission={true}
+                showStatusTag={false}
+                testId={`tools-select-definition-${connector.name}`}
+              />
+            ))}
+          </Grid>
+        ) : (
+          <Box padding='40px' textAlign='center'>
+            <Text fontSize='14px' color='gray.500'>
+              No tools available yet
+            </Text>
+          </Box>
+        )}
+      </ContentContainer>
+    </Box>
+  );
+};
+
+export default SelectToolType;
diff --git a/ui/src/enterprise/views/Tools/ToolsForm/__tests__/SelectToolType.test.tsx b/ui/src/enterprise/views/Tools/ToolsForm/__tests__/SelectToolType.test.tsx
new file mode 100644
index 000000000..be994932a
--- /dev/null
+++ b/ui/src/enterprise/views/Tools/ToolsForm/__tests__/SelectToolType.test.tsx
@@ -0,0 +1,282 @@
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { expect, describe, it, jest, beforeEach } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import SelectToolType from '../SelectToolType';
+import { getToolDefinition } from '@/enterprise/services/tools';
+import useSteppedForm from '@/stores/useSteppedForm';
+import useCustomToast from '@/hooks/useCustomToast';
+import useQueryWrapper from '@/hooks/useQueryWrapper';
+import { ToolDefinitionTemplate } from '../../ToolsList/types';
+import { ApiResponse } from '@/services/common';
+import { CustomToastStatus } from '@/components/Toast';
+import {
+  mockHandleMoveForward,
+  mockSaveConnectorFormData,
+  mockShowToast,
+  mockToolDefinitionsResponse,
+} from '../../../../../../__mocks__/toolMocks';
+import { renderWithProviders, createTestQueryClient } from '@/utils/testUtils';
+
+jest.mock('@/enterprise/services/tools', () => ({
+  getToolDefinitions: jest.fn(),
+  getToolDefinition: jest.fn(),
+}));
+
+jest.mock('@/stores/useSteppedForm');
+jest.mock('@/hooks/useCustomToast');
+jest.mock('@/hooks/useQueryWrapper');
+
+const mockGetToolDefinition = getToolDefinition as jest.MockedFunction<typeof getToolDefinition>;
+const mockUseSteppedForm = useSteppedForm as jest.MockedFunction<typeof useSteppedForm>;
+const mockUseCustomToast = useCustomToast as jest.MockedFunction<typeof useCustomToast>;
+const mockUseQueryWrapper = useQueryWrapper as jest.MockedFunction<typeof useQueryWrapper>;
+
+const queryClient = createTestQueryClient();
+
+const renderSelectToolType = () => {
+  return renderWithProviders(<SelectToolType />, { queryClient });
+};
+
+describe('SelectToolType', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseSteppedForm.mockReturnValue({
+      handleMoveForward: mockHandleMoveForward,
+      stepInfo: { formKey: 'tool' },
+      saveConnectorFormData: mockSaveConnectorFormData,
+    } as any);
+
+    mockUseCustomToast.mockReturnValue(mockShowToast as any);
+
+    mockUseQueryWrapper.mockReturnValue({
+      data: mockToolDefinitionsResponse,
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    } as any);
+  });
+
+  it('should render loading state', () => {
+    mockUseQueryWrapper.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      error: null,
+      refetch: jest.fn(),
+    } as any);
+
+    renderSelectToolType();
+
+    // When loading, the component should render Loader
+    // The query wrapper should have been called with getToolDefinitions
+    expect(mockUseQueryWrapper).toHaveBeenCalledWith(
+      ['tool-definitions'],
+      expect.any(Function),
+      expect.objectContaining({
+        refetchOnMount: true,
+        refetchOnWindowFocus: false,
+      }),
+    );
+  });
+
+  it('should render all tabs', () => {
+    renderSelectToolType();
+
+    expect(screen.getByText('All Tools')).toBeInTheDocument();
+    expect(screen.getByText('AI Squared')).toBeInTheDocument();
+    expect(screen.getByText('Custom')).toBeInTheDocument();
+  });
+
+  it('passes tools-select-definition test ids to connector tiles', () => {
+    renderSelectToolType();
+    expect(screen.getByTestId('tools-select-definition-tool-1')).toBeInTheDocument();
+    expect(screen.getByTestId('tools-select-definition-tool-2')).toBeInTheDocument();
+    expect(screen.getByTestId('tools-select-definition-tool-3')).toBeInTheDocument();
+  });
+
+  it('should filter connectors by custom category when Custom tab is clicked', () => {
+    renderSelectToolType();
+
+    const customTab = screen.getByText('Custom');
+    fireEvent.click(customTab);
+
+    // Should show only custom tools
+    expect(screen.getByText('Tool 2')).toBeInTheDocument();
+  });
+
+  it('should filter connectors by ai_squared category when AI Squared tab is clicked', () => {
+    renderSelectToolType();
+
+    const aiSquaredTab = screen.getByText('AI Squared');
+    fireEvent.click(aiSquaredTab);
+
+    // Should show only AI Squared tools
+    expect(screen.getByText('Tool 1')).toBeInTheDocument();
+    expect(screen.getByText('Tool 3')).toBeInTheDocument();
+  });
+
+  it('should show all tools when All Tools tab is clicked', () => {
+    renderSelectToolType();
+
+    const allTab = screen.getByText('All Tools');
+    fireEvent.click(allTab);
+
+    // Should show all tools
+    expect(screen.getByText('Tool 1')).toBeInTheDocument();
+    expect(screen.getByText('Tool 2')).toBeInTheDocument();
+    expect(screen.getByText('Tool 3')).toBeInTheDocument();
+  });
+
+  it('should show empty state when no tools are available', () => {
+    mockUseQueryWrapper.mockReturnValue({
+      data: { data: [], status: 200 } as ApiResponse<ToolDefinitionTemplate[]>,
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    } as any);
+
+    renderSelectToolType();
+
+    expect(screen.getByText('No tools available yet')).toBeInTheDocument();
+  });
+
+  it('should save tool metadata and move forward when tool is selected', async () => {
+    const mockDefinition = {
+      $id: 'tool-1',
+      title: 'Tool 1',
+      category: 'ai_squared',
+      icon: 'icon1',
+    };
+
+    mockGetToolDefinition.mockResolvedValue({
+      data: mockDefinition,
+    } as ApiResponse<ToolDefinitionTemplate>);
+
+    renderSelectToolType();
+
+    // Wait for tools to render, then click on a tool
+    await waitFor(() => {
+      expect(screen.getByText('Tool 1')).toBeInTheDocument();
+    });
+
+    // Find and click the connector item (this may need adjustment based on ConnectorsGridItem implementation)
+    const tool1 = screen.getByText('Tool 1');
+    fireEvent.click(tool1);
+
+    await waitFor(() => {
+      expect(mockGetToolDefinition).toHaveBeenCalledWith('tool-1');
+      expect(mockSaveConnectorFormData).toHaveBeenCalledWith('tool-1', 'metadata', {
+        category: 'ai_squared',
+        icon: 'icon1',
+        definition_id: 'tool-1',
+      });
+      expect(mockHandleMoveForward).toHaveBeenCalledWith('tool', 'tool-1');
+    });
+  });
+
+  it('should show error toast when tool definition fetch fails', async () => {
+    mockGetToolDefinition.mockRejectedValue(new Error('Failed to fetch'));
+
+    renderSelectToolType();
+
+    await waitFor(() => {
+      expect(screen.getByText('Tool 1')).toBeInTheDocument();
+    });
+
+    const tool1 = screen.getByText('Tool 1');
+    fireEvent.click(tool1);
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith({
+        status: CustomToastStatus.Error,
+        title: 'Error',
+        description: 'Failed to fetch tool definition. Using default values.',
+        position: 'bottom-right',
+        isClosable: true,
+      });
+    });
+  });
+
+  it('should use default category when tool definition has no category', async () => {
+    const mockDefinition = {
+      $id: 'tool-1',
+      title: 'Tool 1',
+      icon: 'icon1',
+    };
+
+    mockGetToolDefinition.mockResolvedValue({
+      data: mockDefinition,
+    } as ApiResponse<ToolDefinitionTemplate>);
+
+    renderSelectToolType();
+
+    await waitFor(() => {
+      expect(screen.getByText('Tool 1')).toBeInTheDocument();
+    });
+
+    const tool1 = screen.getByText('Tool 1');
+    fireEvent.click(tool1);
+
+    await waitFor(() => {
+      expect(mockSaveConnectorFormData).toHaveBeenCalledWith('tool-1', 'metadata', {
+        category: 'custom',
+        icon: 'icon1',
+        definition_id: 'tool-1',
+      });
+    });
+  });
+
+  it('should not move forward if stepInfo formKey is not available', async () => {
+    mockUseSteppedForm.mockReturnValue({
+      handleMoveForward: mockHandleMoveForward,
+      stepInfo: null,
+      saveConnectorFormData: mockSaveConnectorFormData,
+    } as any);
+
+    const mockDefinition = {
+      $id: 'tool-1',
+      title: 'Tool 1',
+      category: 'ai_squared',
+      icon: 'icon1',
+    };
+
+    mockGetToolDefinition.mockResolvedValue({
+      data: mockDefinition,
+    } as ApiResponse<ToolDefinitionTemplate>);
+
+    renderSelectToolType();
+
+    await waitFor(() => {
+      expect(screen.getByText('Tool 1')).toBeInTheDocument();
+    });
+
+    const tool1 = screen.getByText('Tool 1');
+    fireEvent.click(tool1);
+
+    await waitFor(() => {
+      expect(mockGetToolDefinition).toHaveBeenCalled();
+      expect(mockSaveConnectorFormData).toHaveBeenCalled();
+    });
+
+    expect(mockHandleMoveForward).not.toHaveBeenCalled();
+  });
+
+  it('should call getToolDefinitions when query executes', async () => {
+    // The query wrapper should call getToolDefinitions
+    // This is verified through the useQueryWrapper mock setup
+    renderSelectToolType();
+
+    // Verify that useQueryWrapper was called with getToolDefinitions
+    await waitFor(() => {
+      expect(mockUseQueryWrapper).toHaveBeenCalledWith(
+        ['tool-definitions'],
+        expect.any(Function),
+        expect.objectContaining({
+          refetchOnMount: true,
+          refetchOnWindowFocus: false,
+        }),
+      );
+    });
+  });
+});
diff --git a/ui/src/views/Models/__tests__/DefineSQL.test.tsx b/ui/src/views/Models/__tests__/DefineSQL.test.tsx
new file mode 100644
index 000000000..4c42e6641
--- /dev/null
+++ b/ui/src/views/Models/__tests__/DefineSQL.test.tsx
@@ -0,0 +1,453 @@
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProviders } from '@/utils/testUtils';
+import DefineSQL from '../ModelsForm/DefineModel/DefineSQL/DefineSQL';
+import {
+  mockNavigate,
+  mockShowToast,
+  mockPutModelById,
+  mockHandleMoveForward,
+  mockDynamicQueryStoreState,
+  mockApiErrorsToast,
+  mockErrorToast,
+  mockGetPreview,
+  mockUseModelPreviewReturn,
+  mockPrefillValues,
+} from '../__mocks__/modelsMocks';
+
+// ── Mocks ───────────────────────────────────────────────────────────
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock('@/hooks/useCustomToast', () => ({
+  __esModule: true,
+  default: () => mockShowToast,
+}));
+
+jest.mock('@/hooks/useErrorToast', () => ({
+  useErrorToast: () => mockErrorToast,
+  useAPIErrorsToast: () => mockApiErrorsToast,
+}));
+
+jest.mock('@/services/models', () => ({
+  putModelById: (...args: unknown[]) => mockPutModelById(...args),
+}));
+
+jest.mock('@/stores/useSteppedForm', () => ({
+  __esModule: true,
+  default: () => ({
+    stepInfo: { formKey: 'defineModel' },
+    handleMoveForward: mockHandleMoveForward,
+  }),
+}));
+
+const mockDynamicQueryStore = jest.fn();
+jest.mock('@/enterprise/store/useDynamicQueryStore', () => ({
+  useDynamicQueryStore: (selector: (state: unknown) => unknown) =>
+    selector(mockDynamicQueryStore()),
+}));
+
+jest.mock('@/hooks/models/useModelPreview', () => ({
+  useModelPreview: () => mockUseModelPreviewReturn,
+}));
+
+// Mock Monaco editor
+const mockEditorRef = { current: { getValue: jest.fn(() => 'SELECT * FROM users') } };
+jest.mock('@monaco-editor/react', () => ({
+  __esModule: true,
+  default: ({
+    value,
+    onMount,
+    onChange,
+  }: {
+    value: string;
+    onMount?: (editor: unknown) => void;
+    onChange?: (value: string) => void;
+  }) => {
+    // Simulate editor mount
+    if (onMount) {
+      onMount(mockEditorRef.current);
+    }
+    return (
+      <textarea
+        data-testid='monaco-editor'
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    );
+  },
+  useMonaco: () => null,
+}));
+
+jest.mock('@/components/ContentContainer', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+jest.mock('@/components/FormFooter', () => ({
+  __esModule: true,
+  default: ({
+    ctaName,
+    onCtaClick,
+    isCtaDisabled,
+  }: {
+    ctaName: string;
+    onCtaClick?: () => void;
+    isCtaDisabled?: boolean;
+  }) => (
+    <button data-testid='form-footer' onClick={onCtaClick} disabled={isCtaDisabled}>
+      {ctaName}
+    </button>
+  ),
+}));
+
+jest.mock('../ModelsForm/DefineModel/ModelQueryResults', () => ({
+  __esModule: true,
+  default: ({
+    onRunQuery,
+    isLoading,
+    isEnabled,
+  }: {
+    onRunQuery: () => void;
+    isLoading: boolean;
+    isEnabled: boolean;
+  }) => (
+    <div data-testid='model-query-results'>
+      <button data-testid='run-query-btn' onClick={onRunQuery} disabled={!isEnabled || isLoading}>
+        Show Preview
+      </button>
+    </div>
+  ),
+}));
+
+jest.mock('../ModelsForm/DefineModel/QueryBox', () => ({
+  __esModule: true,
+  default: ({
+    children,
+    handleQueryRun,
+    extra,
+  }: {
+    children: React.ReactNode;
+    handleQueryRun: () => void;
+    extra?: React.ReactNode;
+  }) => (
+    <div data-testid='query-box'>
+      <button data-testid='query-run-btn' onClick={handleQueryRun}>
+        Run
+      </button>
+      {extra}
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock('@/enterprise/dataApps/components/TableVisual', () => ({
+  __esModule: true,
+  default: () => <div data-testid='table-visual'>Table Visual</div>,
+}));
+
+jest.mock('@/enterprise/views/Define/DynamicDataModels/ConfiguringDynamicVariablesInfo', () => ({
+  __esModule: true,
+  default: ({ modalOpen }: { modalOpen: boolean }) =>
+    modalOpen ? <div data-testid='dynamic-vars-info-modal'>Info</div> : null,
+}));
+
+jest.mock('@/enterprise/views/Define/DynamicDataModels/InputFieldsMappingModal', () => ({
+  __esModule: true,
+  default: ({
+    modalOpen,
+    handlePreviewClick,
+  }: {
+    modalOpen: boolean;
+    handlePreviewClick: () => void;
+  }) =>
+    modalOpen ? (
+      <div data-testid='input-fields-modal'>
+        <button data-testid='preview-mapped' onClick={handlePreviewClick}>
+          Preview
+        </button>
+      </div>
+    ) : null,
+}));
+
+jest.mock('@/enterprise/views/Define/DynamicDataModels/HarvestDynamicModels', () => ({
+  __esModule: true,
+  default: () => <div data-testid='harvest-screen'>Harvest</div>,
+}));
+
+jest.mock('sql-formatter', () => ({
+  format: (sql: string) => sql,
+}));
+
+jest.mock('@/enterprise/utils/extractVariableNames', () => ({
+  extractVariableNames: (query: string) => {
+    const matches = query.match(/:(\w+)/g);
+    return matches ? matches.map((m) => m.slice(1)) : [];
+  },
+}));
+
+jest.mock('@/assets/icons/FiAI', () => ({
+  __esModule: true,
+  default: () => <span>AI</span>,
+}));
+
+// ── Tests ───────────────────────────────────────────────────────────
+
+describe('DefineSQL', () => {
+  const defaultProps = {
+    isUpdateButtonVisible: false,
+    connectorId: '1',
+    connectorIcon: <span>Icon</span>,
+    connectorDataType: 'structured',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockDynamicQueryStore.mockReturnValue(mockDynamicQueryStoreState);
+    mockEditorRef.current.getValue.mockReturnValue('SELECT * FROM users');
+    // Reset shared mock state to defaults
+    mockUseModelPreviewReturn.tableData = null;
+    mockUseModelPreviewReturn.loading = false;
+    mockUseModelPreviewReturn.canMoveForward = false;
+  });
+
+  afterEach(() => {
+    // Ensure cleanup even if test fails or times out
+    mockUseModelPreviewReturn.tableData = null;
+    mockUseModelPreviewReturn.loading = false;
+    mockUseModelPreviewReturn.canMoveForward = false;
+  });
+
+  it('renders the SQL editor and query results', () => {
+    renderWithProviders(<DefineSQL {...defaultProps} />);
+    expect(screen.getByTestId('query-box')).toBeInTheDocument();
+    expect(screen.getByTestId('model-sql-monaco-editor')).toBeInTheDocument();
+    expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+    expect(screen.getByTestId('model-query-results')).toBeInTheDocument();
+  });
+
+  it('renders Continue footer when not in update mode', () => {
+    renderWithProviders(<DefineSQL {...defaultProps} />);
+    expect(screen.getByTestId('form-footer')).toHaveTextContent('Continue');
+  });
+
+  it('renders Save Changes footer when in update mode', () => {
+    renderWithProviders(<DefineSQL {...defaultProps} isUpdateButtonVisible={true} />);
+    expect(screen.getByTestId('form-footer')).toHaveTextContent('Save Changes');
+  });
+
+  it('calls getPreview when run query is clicked (static method)', () => {
+    renderWithProviders(<DefineSQL {...defaultProps} />);
+    fireEvent.click(screen.getByTestId('query-run-btn'));
+    expect(mockGetPreview).toHaveBeenCalledWith('SELECT * FROM users', '1');
+  });
+
+  it('renders table visual when tableData is available', () => {
+    mockUseModelPreviewReturn.tableData = {
+      data: [{ id: '1' }],
+      columns: [{ key: 'id', name: 'id' }],
+    } as never;
+    renderWithProviders(<DefineSQL {...defaultProps} />);
+    expect(screen.getByTestId('table-visual')).toBeInTheDocument();
+  });
+
+  it('calls handleMoveForward on Continue click (static method)', () => {
+    mockUseModelPreviewReturn.canMoveForward = true;
+    renderWithProviders(<DefineSQL {...defaultProps} />);
+    fireEvent.click(screen.getByTestId('form-footer'));
+    expect(mockHandleMoveForward).toHaveBeenCalledWith('defineModel', {
+      query: 'SELECT * FROM users',
+      id: '1',
+      query_type: 'raw_sql',
+      columns: undefined,
+    });
+  });
+
+  it('shows harvest screen on Continue click (dynamic method)', () => {
+    mockDynamicQueryStore.mockReturnValue({
+      ...mockDynamicQueryStoreState,
+      queryingMethod: 'dynamic_sql',
+    });
+    mockUseModelPreviewReturn.canMoveForward = true;
+    renderWithProviders(<DefineSQL {...defaultProps} />);
+    fireEvent.click(screen.getByTestId('form-footer'));
+    expect(screen.getByTestId('harvest-screen')).toBeInTheDocument();
+  });
+
+  it('calls putModelById on Save Changes click in update mode', async () => {
+    mockPutModelById.mockResolvedValue({ data: { id: '42' } });
+    mockUseModelPreviewReturn.canMoveForward = true;
+    renderWithProviders(
+      <DefineSQL
+        {...defaultProps}
+        isUpdateButtonVisible={true}
+        prefillValues={mockPrefillValues as never}
+      />,
+    );
+    fireEvent.click(screen.getByTestId('form-footer'));
+
+    await waitFor(() => {
+      expect(mockPutModelById).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'Model updated successfully' }),
+      );
+    });
+  });
+
+  it('shows API errors on model update failure', async () => {
+    mockPutModelById.mockResolvedValue({ errors: [{ detail: 'Bad request' }] });
+    mockUseModelPreviewReturn.canMoveForward = true;
+    renderWithProviders(
+      <DefineSQL
+        {...defaultProps}
+        isUpdateButtonVisible={true}
+        prefillValues={mockPrefillValues as never}
+      />,
+    );
+    fireEvent.click(screen.getByTestId('form-footer'));
+
+    await waitFor(() => {
+      expect(mockApiErrorsToast).toHaveBeenCalled();
+    });
+  });
+
+  it('shows error toast on model update network failure', async () => {
+    mockPutModelById.mockRejectedValue(new Error('Network error'));
+    mockUseModelPreviewReturn.canMoveForward = true;
+    renderWithProviders(
+      <DefineSQL
+        {...defaultProps}
+        isUpdateButtonVisible={true}
+        prefillValues={mockPrefillValues as never}
+      />,
+    );
+    fireEvent.click(screen.getByTestId('form-footer'));
+
+    await waitFor(() => {
+      expect(mockErrorToast).toHaveBeenCalled();
+    });
+  });
+
+  it('opens dynamic variables info modal for dynamic method without prefilled values', () => {
+    mockDynamicQueryStore.mockReturnValue({
+      ...mockDynamicQueryStoreState,
+      queryingMethod: 'dynamic_sql',
+    });
+    renderWithProviders(<DefineSQL {...defaultProps} />);
+    expect(screen.getByTestId('dynamic-vars-info-modal')).toBeInTheDocument();
+  });
+
+  it('does not open dynamic variables info modal when hasPrefilledValues is true', () => {
+    mockDynamicQueryStore.mockReturnValue({
+      ...mockDynamicQueryStoreState,
+      queryingMethod: 'dynamic_sql',
+    });
+    renderWithProviders(<DefineSQL {...defaultProps} hasPrefilledValues={true} />);
+    expect(screen.queryByTestId('dynamic-vars-info-modal')).not.toBeInTheDocument();
+  });
+
+  it('renders with prefilled values', () => {
+    renderWithProviders(
+      <DefineSQL
+        {...defaultProps}
+        prefillValues={mockPrefillValues as never}
+        hasPrefilledValues={true}
+      />,
+    );
+    expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+  });
+
+  it('opens input fields mapping modal when dynamic query has variables', () => {
+    mockDynamicQueryStore.mockReturnValue({
+      ...mockDynamicQueryStoreState,
+      queryingMethod: 'dynamic_sql',
+    });
+    // Query with dynamic variables
+    mockEditorRef.current.getValue.mockReturnValue('SELECT * FROM users WHERE id = :userId');
+    renderWithProviders(<DefineSQL {...defaultProps} hasPrefilledValues={true} />);
+    // Trigger query run - should detect :userId variable
+    fireEvent.click(screen.getByTestId('query-run-btn'));
+    // Input fields mapping modal should open
+    expect(screen.getByTestId('input-fields-modal')).toBeInTheDocument();
+  });
+
+  it('calls getPreview via mapDynamicVariablesWithQuery when preview is clicked in mapping modal', () => {
+    mockDynamicQueryStore.mockReturnValue({
+      ...mockDynamicQueryStoreState,
+      queryingMethod: 'dynamic_sql',
+      inputSchema: [
+        {
+          name: 'userId',
+          type: 'string',
+          value: 'userId',
+          value_type: 'dynamic',
+          sample_input_value: 'test123',
+        },
+      ],
+    });
+    mockEditorRef.current.getValue.mockReturnValue('SELECT * FROM users WHERE id = :userId');
+    renderWithProviders(<DefineSQL {...defaultProps} hasPrefilledValues={true} />);
+    // Trigger query run to open mapping modal
+    fireEvent.click(screen.getByTestId('query-run-btn'));
+    // Click preview in mapping modal
+    fireEvent.click(screen.getByTestId('preview-mapped'));
+    expect(mockGetPreview).toHaveBeenCalled();
+  });
+
+  it('sets up dynamic store state from prefillValues for dynamic query type in update mode', () => {
+    const dynamicPrefillValues = {
+      ...mockPrefillValues,
+      query_type: 'dynamic_sql',
+      configuration: {
+        json_schema: { input: [{ name: 'var1' }], output: [{ name: 'out1' }] },
+        harvesters: [{ name: 'h1' }],
+        response_format: ['col1'],
+      },
+    };
+    mockDynamicQueryStore.mockReturnValue({
+      ...mockDynamicQueryStoreState,
+      queryingMethod: 'dynamic_sql',
+    });
+    renderWithProviders(
+      <DefineSQL
+        {...defaultProps}
+        isUpdateButtonVisible={true}
+        prefillValues={dynamicPrefillValues as never}
+        hasPrefilledValues={true}
+      />,
+    );
+    // The useEffect should have called setOutputSchema, setInputSchema, etc.
+    expect(mockDynamicQueryStoreState.setOutputSchema).toHaveBeenCalled();
+    expect(mockDynamicQueryStoreState.setInputSchema).toHaveBeenCalled();
+    expect(mockDynamicQueryStoreState.setDynamicVariablesHarvestedMap).toHaveBeenCalled();
+    expect(mockDynamicQueryStoreState.setTableColumns).toHaveBeenCalled();
+  });
+
+  it('clears dynamic store state for non-dynamic query type', () => {
+    renderWithProviders(
+      <DefineSQL
+        {...defaultProps}
+        prefillValues={mockPrefillValues as never}
+        hasPrefilledValues={true}
+      />,
+    );
+    // For static query type, useEffect should clear the store
+    expect(mockDynamicQueryStoreState.setInputSchema).toHaveBeenCalledWith([]);
+    expect(mockDynamicQueryStoreState.setOutputSchema).toHaveBeenCalledWith([]);
+  });
+
+  it('handles editor onChange by updating state', () => {
+    renderWithProviders(<DefineSQL {...defaultProps} />);
+    const editor = screen.getByTestId('monaco-editor');
+    fireEvent.change(editor, { target: { value: 'SELECT id FROM orders' } });
+    // The onChange should call setCanMoveForward(false) and canRunQuery(true)
+    expect(mockUseModelPreviewReturn.setCanMoveForward).toHaveBeenCalledWith(false);
+  });
+});
diff --git a/ui/src/views/Models/__tests__/FinalizeModel.test.tsx b/ui/src/views/Models/__tests__/FinalizeModel.test.tsx
new file mode 100644
index 000000000..b6d5dab67
--- /dev/null
+++ b/ui/src/views/Models/__tests__/FinalizeModel.test.tsx
@@ -0,0 +1,296 @@
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProviders } from '@/utils/testUtils';
+import FinalizeModel from '../ModelsForm/FinalizeModel/FinalizeModel';
+import {
+  mockNavigate,
+  mockShowToast,
+  mockCreateNewModel,
+  mockClearState,
+  mockHandleMoveForward,
+  mockConnectorItem,
+  mockUnstructuredConnectorItem,
+  mockSemistructuredConnectorItem,
+  mockVectorConnectorItem,
+  mockDynamicQueryStoreState,
+} from '../__mocks__/modelsMocks';
+
+// ── Mocks ───────────────────────────────────────────────────────────
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock('@/hooks/useCustomToast', () => ({
+  __esModule: true,
+  default: () => mockShowToast,
+}));
+
+jest.mock('@/services/models', () => ({
+  createNewModel: (...args: unknown[]) => mockCreateNewModel(...args),
+}));
+
+jest.mock('@/components/ContentContainer', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+jest.mock('@/components/FormFooter', () => ({
+  __esModule: true,
+  default: ({ ctaName, isCtaLoading }: { ctaName: string; isCtaLoading: boolean }) => (
+    <button type='submit' data-testid='form-footer' disabled={isCtaLoading}>
+      {ctaName}
+    </button>
+  ),
+}));
+
+// Stepped form mock - will be overridden per test
+const mockSteppedFormReturn = jest.fn();
+jest.mock('@/stores/useSteppedForm', () => ({
+  __esModule: true,
+  default: () => mockSteppedFormReturn(),
+}));
+
+// Dynamic query store mock
+const mockDynamicQueryStore = jest.fn();
+jest.mock('@/enterprise/store/useDynamicQueryStore', () => ({
+  useDynamicQueryStore: (selector: (state: unknown) => unknown) =>
+    selector(mockDynamicQueryStore()),
+}));
+
+// ── Helpers ─────────────────────────────────────────────────────────
+
+const buildSteppedFormData = (connectorItem = mockConnectorItem) => ({
+  forms: [
+    {
+      stepKey: 'datasource',
+      data: { datasource: connectorItem },
+    },
+    {
+      stepKey: 'defineModel',
+      data: {
+        defineModel: {
+          id: 1,
+          query: 'SELECT * FROM users',
+          columns: [
+            { key: 'id', name: 'id' },
+            { key: 'name', name: 'name' },
+          ],
+        },
+      },
+    },
+    {
+      stepKey: 'configureChunkingAndEmbedding',
+      data: {
+        configureChunkingAndEmbedding: {
+          chunkSize: '500',
+          overlap: '50',
+          embedding_config: { model: 'ada' },
+          connector_id: '10',
+        },
+      },
+    },
+    {
+      stepKey: 'configureDocumentAnalysis',
+      data: {
+        configureDocumentAnalysis: {
+          service: 'lightning',
+          options: {},
+          connector_id: '20',
+        },
+      },
+    },
+  ],
+  stepInfo: { formKey: 'finalizeModel' },
+  handleMoveForward: mockHandleMoveForward,
+});
+
+// ── Tests ───────────────────────────────────────────────────────────
+
+describe('FinalizeModel', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockSteppedFormReturn.mockReturnValue(buildSteppedFormData());
+    mockDynamicQueryStore.mockReturnValue(mockDynamicQueryStoreState);
+  });
+
+  it('renders the form with model name, description, and primary key fields', () => {
+    renderWithProviders(<FinalizeModel />);
+    expect(screen.getByText('Finalize settings for this Model')).toBeInTheDocument();
+    expect(screen.getByTestId('finalize-model-name-input')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter a name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter a description')).toBeInTheDocument();
+    expect(screen.getByText('Primary Key')).toBeInTheDocument();
+    expect(screen.getByText('Select a column')).toBeInTheDocument();
+  });
+
+  it('renders column options in the primary key select', () => {
+    renderWithProviders(<FinalizeModel />);
+    const options = screen.getAllByRole('option');
+    // "Select a column" placeholder + 2 columns
+    expect(options).toHaveLength(3);
+    expect(options[1]).toHaveTextContent('id');
+    expect(options[2]).toHaveTextContent('name');
+  });
+
+  it('hides primary key field for unstructured data type', () => {
+    mockSteppedFormReturn.mockReturnValue(buildSteppedFormData(mockUnstructuredConnectorItem));
+    renderWithProviders(<FinalizeModel />);
+    expect(screen.queryByText('Primary Key')).not.toBeInTheDocument();
+  });
+
+  it('hides primary key field for semistructured data type', () => {
+    mockSteppedFormReturn.mockReturnValue(buildSteppedFormData(mockSemistructuredConnectorItem));
+    renderWithProviders(<FinalizeModel />);
+    expect(screen.queryByText('Primary Key')).not.toBeInTheDocument();
+  });
+
+  it('shows validation error when model name is empty on submit', async () => {
+    renderWithProviders(<FinalizeModel />);
+    fireEvent.click(screen.getByText('Finish'));
+    await waitFor(() => {
+      expect(screen.getByText('Model name is required')).toBeInTheDocument();
+    });
+  });
+
+  it('submits form successfully and navigates', async () => {
+    mockCreateNewModel.mockResolvedValue({ data: { id: '99' } });
+    renderWithProviders(<FinalizeModel />);
+
+    fireEvent.change(screen.getByPlaceholderText('Enter a name'), {
+      target: { value: 'My Model' },
+    });
+    fireEvent.change(screen.getByPlaceholderText('Enter a description'), {
+      target: { value: 'A description' },
+    });
+    // Select primary key
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'id' } });
+
+    fireEvent.click(screen.getByText('Finish'));
+
+    await waitFor(() => {
+      expect(mockCreateNewModel).toHaveBeenCalledWith(
+        expect.objectContaining({
+          model: expect.objectContaining({
+            name: 'My Model',
+            description: 'A description',
+            primary_key: 'id',
+          }),
+        }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith(expect.objectContaining({ title: 'Success!!' }));
+      expect(mockClearState).toHaveBeenCalled();
+      expect(mockNavigate).toHaveBeenCalledWith('/define/models/99');
+    });
+  });
+
+  it('shows error toasts when API returns errors', async () => {
+    mockCreateNewModel.mockResolvedValue({
+      errors: [{ detail: 'name already taken' }],
+    });
+    renderWithProviders(<FinalizeModel />);
+
+    fireEvent.change(screen.getByPlaceholderText('Enter a name'), {
+      target: { value: 'My Model' },
+    });
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'id' } });
+    fireEvent.click(screen.getByText('Finish'));
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'Name Already Taken' }),
+      );
+    });
+  });
+
+  it('shows error toast on network failure', async () => {
+    mockCreateNewModel.mockRejectedValue(new Error('Network error'));
+    renderWithProviders(<FinalizeModel />);
+
+    fireEvent.change(screen.getByPlaceholderText('Enter a name'), {
+      target: { value: 'My Model' },
+    });
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'id' } });
+    fireEvent.click(screen.getByText('Finish'));
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: 'An error occurred.',
+          description: 'Something went wrong while creating Model.',
+        }),
+      );
+    });
+  });
+
+  it('uses vector_search query type for vector data type', async () => {
+    mockSteppedFormReturn.mockReturnValue(buildSteppedFormData(mockVectorConnectorItem));
+    mockCreateNewModel.mockResolvedValue({ data: { id: '100' } });
+    renderWithProviders(<FinalizeModel />);
+
+    fireEvent.change(screen.getByPlaceholderText('Enter a name'), {
+      target: { value: 'Vector Model' },
+    });
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'id' } });
+    fireEvent.click(screen.getByText('Finish'));
+
+    await waitFor(() => {
+      expect(mockCreateNewModel).toHaveBeenCalledWith(
+        expect.objectContaining({
+          model: expect.objectContaining({
+            query_type: 'vector_search',
+          }),
+        }),
+      );
+    });
+  });
+
+  it('uses unstructured query type and chunking connector_id for unstructured data', async () => {
+    mockSteppedFormReturn.mockReturnValue(buildSteppedFormData(mockUnstructuredConnectorItem));
+    mockCreateNewModel.mockResolvedValue({ data: { id: '101' } });
+    renderWithProviders(<FinalizeModel />);
+
+    fireEvent.change(screen.getByPlaceholderText('Enter a name'), {
+      target: { value: 'Unstructured Model' },
+    });
+    fireEvent.click(screen.getByText('Finish'));
+
+    await waitFor(() => {
+      expect(mockCreateNewModel).toHaveBeenCalledWith(
+        expect.objectContaining({
+          model: expect.objectContaining({
+            query_type: 'unstructured',
+            connector_id: 10,
+          }),
+        }),
+      );
+    });
+  });
+
+  it('uses semistructured query type and document analysis connector_id', async () => {
+    mockSteppedFormReturn.mockReturnValue(buildSteppedFormData(mockSemistructuredConnectorItem));
+    mockCreateNewModel.mockResolvedValue({ data: { id: '102' } });
+    renderWithProviders(<FinalizeModel />);
+
+    fireEvent.change(screen.getByPlaceholderText('Enter a name'), {
+      target: { value: 'Semi Model' },
+    });
+    fireEvent.click(screen.getByText('Finish'));
+
+    await waitFor(() => {
+      expect(mockCreateNewModel).toHaveBeenCalledWith(
+        expect.objectContaining({
+          model: expect.objectContaining({
+            query_type: 'semistructured',
+            connector_id: 20,
+          }),
+        }),
+      );
+    });
+  });
+});
diff --git a/ui/src/views/Models/__tests__/QueryBox.test.tsx b/ui/src/views/Models/__tests__/QueryBox.test.tsx
new file mode 100644
index 000000000..b3893b127
--- /dev/null
+++ b/ui/src/views/Models/__tests__/QueryBox.test.tsx
@@ -0,0 +1,84 @@
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithProviders } from '@/utils/testUtils';
+import QueryBox from '../ModelsForm/DefineModel/QueryBox';
+
+// ── Mocks ───────────────────────────────────────────────────────────
+
+jest.mock('../ModelsForm/DefineModel/RefreshModelCatalog', () => ({
+  __esModule: true,
+  default: () => <div data-testid='refresh-catalog'>Refresh</div>,
+}));
+
+jest.mock('@/components/SearchBar/SearchBar', () => ({
+  __esModule: true,
+  default: ({ setSearchTerm }: { setSearchTerm: (v: string) => void }) => (
+    <input data-testid='search-bar' onChange={(e) => setSearchTerm(e.target.value)} />
+  ),
+}));
+
+// ── Tests ───────────────────────────────────────────────────────────
+
+describe('QueryBox', () => {
+  const mockHandleQueryRun = jest.fn();
+
+  const defaultProps = {
+    connectorIcon: <span data-testid='connector-icon'>Icon</span>,
+    connectorId: '1',
+    handleQueryRun: mockHandleQueryRun,
+    runQuery: true,
+    loading: false,
+    children: <div data-testid='children'>Content</div>,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders connector icon and children', () => {
+    renderWithProviders(<QueryBox {...defaultProps} />);
+    expect(screen.getByTestId('connector-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('children')).toBeInTheDocument();
+  });
+
+  it('renders Show Preview button', () => {
+    renderWithProviders(<QueryBox {...defaultProps} />);
+    const runBtn = screen.getByTestId('query-run-button');
+    expect(runBtn).toHaveTextContent('Show Preview');
+  });
+
+  it('calls handleQueryRun on Show Preview click', () => {
+    renderWithProviders(<QueryBox {...defaultProps} />);
+    fireEvent.click(screen.getByTestId('query-run-button'));
+    expect(mockHandleQueryRun).toHaveBeenCalled();
+  });
+
+  it('disables Show Preview when runQuery is false', () => {
+    renderWithProviders(<QueryBox {...defaultProps} runQuery={false} />);
+    expect(screen.getByTestId('query-run-button')).toBeDisabled();
+  });
+
+  it('renders search bar when showSearchBar is true', () => {
+    const setSearchTerm = jest.fn();
+    renderWithProviders(<QueryBox {...defaultProps} showSearchBar setSearchTerm={setSearchTerm} />);
+    expect(screen.getByTestId('search-bar')).toBeInTheDocument();
+  });
+
+  it('does not render search bar when showSearchBar is false', () => {
+    renderWithProviders(<QueryBox {...defaultProps} />);
+    expect(screen.queryByTestId('search-bar')).not.toBeInTheDocument();
+  });
+
+  it('renders extra content when provided', () => {
+    renderWithProviders(
+      <QueryBox {...defaultProps} extra={<div data-testid='extra'>Extra</div>} />,
+    );
+    expect(screen.getByTestId('extra')).toBeInTheDocument();
+  });
+
+  it('renders RefreshModelCatalog', () => {
+    renderWithProviders(<QueryBox {...defaultProps} />);
+    expect(screen.getByTestId('refresh-catalog')).toBeInTheDocument();
+  });
+});
diff --git a/ui/src/views/Models/__tests__/SelectModelMethod.test.tsx b/ui/src/views/Models/__tests__/SelectModelMethod.test.tsx
new file mode 100644
index 000000000..f95987baf
--- /dev/null
+++ b/ui/src/views/Models/__tests__/SelectModelMethod.test.tsx
@@ -0,0 +1,205 @@
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProviders } from '@/utils/testUtils';
+import ModelMethod from '../ModelsForm/ModelMethod/SelectModelMethod';
+import {
+  mockHandleMoveForward,
+  mockConnectorItem,
+  mockGetCatalog,
+  mockDynamicQueryStoreState,
+} from '../__mocks__/modelsMocks';
+import { mockStoreImplementation } from '../../../../__mocks__/commonMocks';
+
+// ── Mocks ───────────────────────────────────────────────────────────
+
+const mockUseStore = jest.fn();
+jest.mock('@/stores', () => ({
+  useStore: (...args: unknown[]) => mockUseStore(...args),
+}));
+
+jest.mock('@/stores/useSteppedForm', () => ({
+  __esModule: true,
+  default: () => ({
+    forms: [
+      {
+        stepKey: 'datasource',
+        data: { datasource: mockConnectorItem },
+      },
+      {
+        stepKey: 'selectModelType',
+        data: { selectModelType: { id: '1' } },
+      },
+    ],
+    stepInfo: { formKey: 'selectModelType' },
+    handleMoveForward: mockHandleMoveForward,
+  }),
+}));
+
+const mockDynamicQueryStore = jest.fn();
+jest.mock('@/enterprise/store/useDynamicQueryStore', () => ({
+  useDynamicQueryStore: (selector: (state: unknown) => unknown) =>
+    selector(mockDynamicQueryStore()),
+}));
+
+const mockUseQuery = jest.fn();
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQuery: (opts: { queryFn: () => unknown }) => {
+    if (opts?.queryFn) opts.queryFn();
+    return mockUseQuery();
+  },
+}));
+
+jest.mock('@/services/syncs', () => ({
+  getCatalog: (...args: unknown[]) => mockGetCatalog(...args),
+}));
+
+jest.mock('@/components/ContentContainer', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+jest.mock('@/components/FormFooter', () => ({
+  __esModule: true,
+  default: () => <div data-testid='form-footer'>Footer</div>,
+}));
+
+jest.mock('@/components/Loader', () => ({
+  __esModule: true,
+  default: () => <div data-testid='loader'>Loading...</div>,
+}));
+
+jest.mock('@/components/Badge', () => ({
+  __esModule: true,
+  default: ({ text }: { text: string }) => <span data-testid='badge'>{text}</span>,
+}));
+
+// Mock the SelectQueryingMethodModal
+jest.mock('@/enterprise/views/Define/DynamicDataModels/SelectQueryingMethod', () => ({
+  __esModule: true,
+  default: ({
+    modalOpen,
+    setQueryingMethod,
+  }: {
+    modalOpen: boolean;
+    setModalOpen: (v: boolean) => void;
+    setQueryingMethod: (method: string) => void;
+  }) =>
+    modalOpen ? (
+      <div data-testid='select-query-modal'>
+        <button data-testid='select-dynamic' onClick={() => setQueryingMethod('dynamic')}>
+          Dynamic
+        </button>
+      </div>
+    ) : null,
+}));
+
+jest.mock('@/utils', () => ({
+  extractData: (forms: { data?: Record<string, unknown> }[]) => {
+    return forms.map((f) => {
+      if (f.data) {
+        const values = Object.values(f.data);
+        return values[0];
+      }
+      return {};
+    });
+  },
+}));
+
+// ── Tests ───────────────────────────────────────────────────────────
+
+describe('SelectModelMethod', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockStoreImplementation(mockUseStore, { workspaceId: 1 });
+    mockDynamicQueryStore.mockReturnValue(mockDynamicQueryStoreState);
+    mockUseQuery.mockReturnValue({
+      data: {
+        data: {
+          attributes: {
+            catalog: {
+              schema_mode: 'schema',
+            },
+          },
+        },
+      },
+      isLoading: false,
+    });
+  });
+
+  it('renders loading state', () => {
+    mockUseQuery.mockReturnValue({ data: undefined, isLoading: true });
+    renderWithProviders(<ModelMethod />);
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+  });
+
+  it('renders all three model methods', () => {
+    renderWithProviders(<ModelMethod />);
+    expect(screen.getByText('SQL Query')).toBeInTheDocument();
+    expect(screen.getByText('Table Selector')).toBeInTheDocument();
+    expect(screen.getByText('dbt Model')).toBeInTheDocument();
+    expect(screen.getByTestId('model-method-sql')).toBeInTheDocument();
+    expect(screen.getByTestId('model-method-select')).toBeInTheDocument();
+    expect(screen.getByTestId('model-method-dbt')).toBeInTheDocument();
+  });
+
+  it('shows "weaving soon" badge for disabled methods', () => {
+    renderWithProviders(<ModelMethod />);
+    expect(screen.getByText('weaving soon')).toBeInTheDocument();
+  });
+
+  it('disables Table Selector when schema_mode is schemaless', () => {
+    mockUseQuery.mockReturnValue({
+      data: {
+        data: {
+          attributes: {
+            catalog: {
+              schema_mode: 'schemaless',
+            },
+          },
+        },
+      },
+      isLoading: false,
+    });
+    renderWithProviders(<ModelMethod />);
+    // Table Selector should now show "weaving soon" badge
+    const badges = screen.getAllByTestId('badge');
+    expect(badges.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('opens SelectQueryingMethodModal when SQL Query is clicked', () => {
+    renderWithProviders(<ModelMethod />);
+    fireEvent.click(screen.getByText('SQL Query'));
+    expect(screen.getByTestId('select-query-modal')).toBeInTheDocument();
+  });
+
+  it('calls handleMoveForward for Table Selector click', () => {
+    renderWithProviders(<ModelMethod />);
+    fireEvent.click(screen.getByText('Table Selector'));
+    expect(mockHandleMoveForward).toHaveBeenCalledWith('selectModelType', {
+      modelMethodName: 'Table Selector',
+      connectorDataType: 'structured',
+    });
+  });
+
+  it('calls setQueryingMethod and handleMoveForward when query method is selected', async () => {
+    renderWithProviders(<ModelMethod />);
+    // Click SQL Query to open modal
+    fireEvent.click(screen.getByText('SQL Query'));
+    // Select Dynamic from the modal
+    fireEvent.click(screen.getByTestId('select-dynamic'));
+
+    await waitFor(() => {
+      expect(mockHandleMoveForward).toHaveBeenCalledWith('selectModelType', {
+        modelMethodName: 'SQL Query',
+        connectorDataType: 'structured',
+      });
+    });
+  });
+
+  it('renders form footer', () => {
+    renderWithProviders(<ModelMethod />);
+    expect(screen.getByTestId('form-footer')).toBeInTheDocument();
+  });
+});