From e0101fe8cb2f11ade62c9989d396935ab1705f23 Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Sat, 5 Sep 2026 18:02:13 -0700
Subject: [PATCH 1/8] fix(editor): use compact mode switches across input
 controls

Restore the two-choice icon switch with smaller geometry and consistent label-row spacing. Use it for canonical subblocks, Start file inputs, boolean assignments, and knowledge connector fields.

Keep connector radio controls outside field labels and preserve disabled and selected-state behavior.
---
 .../connector-config-fields.test.tsx          | 109 ++++++++++++++
 .../connector-config-fields.tsx               |  62 ++++----
 .../components/canonical-mode-toggle.tsx      |  29 ++++
 .../field-header/field-header.test.tsx        |  12 +-
 .../components/field-header/field-header.tsx  |  39 +----
 .../components/sub-block/components/index.ts  |   1 +
 .../components/starter/input-format.tsx       |  54 +++----
 .../variables-input/variables-input.tsx       |  55 +++----
 .../src/components/chip-modal/chip-modal.tsx  |  30 ++--
 .../icon-switch/icon-switch.test.tsx          | 138 ++++++++++++++++++
 .../components/icon-switch/icon-switch.tsx    |  97 ++++++++++++
 packages/emcn/src/components/index.ts         |   1 +
 12 files changed, 485 insertions(+), 142 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle.tsx
 create mode 100644 packages/emcn/src/components/icon-switch/icon-switch.test.tsx
 create mode 100644 packages/emcn/src/components/icon-switch/icon-switch.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx
new file mode 100644
index 00000000000..9a8682ba7ed
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx
@@ -0,0 +1,109 @@
+/** @vitest-environment jsdom */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields'
+import {
+  type ConfigFieldValue,
+  useConnectorConfigFields,
+} from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
+import { gmailConnectorMeta } from '@/connectors/gmail/meta'
+
+vi.mock('@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field', () => ({
+  ConnectorSelectorField: ({ value }: { value: ConfigFieldValue }) => (
+    <span data-testid='selector-value'>{Array.isArray(value) ? value.join(',') : value}</span>
+  ),
+}))
+
+const CONNECTOR = {
+  ...gmailConnectorMeta,
+  configFields: gmailConnectorMeta.configFields.filter(
+    (field) => field.canonicalParamId === 'label'
+  ),
+}
+
+interface HarnessProps {
+  disabled?: boolean
+}
+
+function Harness({ disabled = false }: HarnessProps) {
+  const config = useConnectorConfigFields({
+    connectorConfig: CONNECTOR,
+    initialSourceConfig: { labelSelector: ['INBOX', 'IMPORTANT'], label: ['STARRED'] },
+  })
+  return (
+    <ConnectorConfigFields
+      connectorConfig={CONNECTOR}
+      sourceConfig={config.sourceConfig}
+      credentialId={null}
+      canonicalGroups={config.canonicalGroups}
+      canonicalModes={config.canonicalModes}
+      isFieldVisible={config.isFieldVisible}
+      onFieldChange={config.handleFieldChange}
+      onToggleCanonicalMode={config.toggleCanonicalMode}
+      disabled={disabled}
+    />
+  )
+}
+
+let root: Root
+let container: HTMLDivElement
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.useRealTimers()
+})
+
+function radio(label: string): HTMLInputElement {
+  const input = container.querySelector<HTMLInputElement>(
+    `input[type="radio"][aria-label="${label}"]`
+  )
+  if (!input) throw new Error(`Missing mode option: ${label}`)
+  return input
+}
+
+describe('connector input mode switch', () => {
+  it("preserves each mode's stored values when switching to manual input and back", () => {
+    act(() => root.render(<Harness />))
+    expect(radio('Selector').checked).toBe(true)
+
+    act(() => radio('Manual input').click())
+    expect(radio('Manual input').checked).toBe(true)
+    expect(container.querySelector<HTMLInputElement>('input:not([type="radio"])')?.value).toBe(
+      'STARRED'
+    )
+
+    act(() => radio('Manual input').click())
+    expect(radio('Manual input').checked).toBe(true)
+
+    act(() => radio('Selector').click())
+    expect(radio('Selector').checked).toBe(true)
+    expect(container.querySelector('[data-testid="selector-value"]')?.textContent).toBe(
+      'INBOX,IMPORTANT'
+    )
+  })
+
+  it('keeps the switch outside the field label and ignores clicks on the title', () => {
+    act(() => root.render(<Harness />))
+    expect(container.querySelector('[role="radiogroup"]')?.closest('label')).toBeNull()
+    act(() => container.querySelector('label')?.click())
+    expect(radio('Selector').checked).toBe(true)
+  })
+
+  it('prevents mode changes while submission disables the fields', () => {
+    act(() => root.render(<Harness disabled />))
+    expect(radio('Selector').disabled).toBe(true)
+    expect(radio('Manual input').disabled).toBe(true)
+    act(() => radio('Manual input').click())
+    expect(radio('Selector').checked).toBe(true)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
index 901c72ea064..2808680a078 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { Button, ChipCombobox, ChipInput, ChipModalField, Tooltip } from '@sim/emcn'
-import { ArrowLeftRight, CircleInfo } from '@sim/emcn/icons'
+import { Button, ChipCombobox, ChipInput, ChipModalField, IconSwitch, Tooltip } from '@sim/emcn'
+import { CircleInfo, List, TypeText } from '@sim/emcn/icons'
 import { ConnectorSelectorField } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field'
 import type {
   ConfigFieldMap,
@@ -10,6 +10,11 @@ import type {
 import type { ConnectorConfigField, ConnectorMeta } from '@/connectors/types'
 import type { SelectorKey } from '@/hooks/selectors/types'
 
+const MODE_OPTIONS = [
+  { value: 'basic', label: 'Selector', icon: List },
+  { value: 'advanced', label: 'Manual input', icon: TypeText },
+] as const
+
 export interface ConnectorConfigFieldsProps {
   /** Registry definition whose `configFields` drive the rendered rows. */
   connectorConfig: ConnectorMeta
@@ -68,50 +73,41 @@ export function ConnectorConfigFields({
                * Cancelling the click's default action keeps label clicks
                * inert without affecting the buttons' own handlers.
                */
-              <span
-                className='flex w-full items-center justify-between'
-                onClick={(event) => event.preventDefault()}
-              >
-                <span className='flex items-center gap-1'>
-                  <span>
-                    {field.title}
-                    {field.required && <span className='ml-0.5'>*</span>}
-                  </span>
-                  {field.description && (
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Button
-                          type='button'
-                          variant='ghost'
-                          className='flex size-[14px] cursor-help items-center justify-center p-0 text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
-                          aria-label={`About ${field.title}`}
-                        >
-                          <CircleInfo className='size-[12px]' />
-                        </Button>
-                      </Tooltip.Trigger>
-                      <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
-                    </Tooltip.Root>
-                  )}
+              <span className='flex items-center gap-1' onClick={(event) => event.preventDefault()}>
+                <span>
+                  {field.title}
+                  {field.required && <span className='ml-0.5'>*</span>}
                 </span>
-                {hasCanonicalPair && canonicalId && (
+                {field.description && (
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
                       <Button
                         type='button'
                         variant='ghost'
-                        className='flex size-[18px] items-center justify-center rounded-[3px] p-0 text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-secondary)]'
-                        onClick={() => onToggleCanonicalMode(canonicalId)}
+                        className='flex size-[14px] cursor-help items-center justify-center p-0 text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-secondary)]'
+                        aria-label={`About ${field.title}`}
                       >
-                        <ArrowLeftRight className='size-[12px]' />
+                        <CircleInfo className='size-[12px]' />
                       </Button>
                     </Tooltip.Trigger>
-                    <Tooltip.Content side='top'>
-                      {field.mode === 'basic' ? 'Switch to manual input' : 'Switch to selector'}
-                    </Tooltip.Content>
+                    <Tooltip.Content side='top'>{field.description}</Tooltip.Content>
                   </Tooltip.Root>
                 )}
               </span>
             }
+            titleAdornment={
+              hasCanonicalPair && canonicalId ? (
+                <IconSwitch
+                  options={MODE_OPTIONS}
+                  value={field.mode === 'advanced' ? 'advanced' : 'basic'}
+                  onValueChange={() => onToggleCanonicalMode(canonicalId)}
+                  disabled={disabled}
+                  showTooltips
+                  aria-label={`${field.title} input mode`}
+                  className='-my-1'
+                />
+              ) : undefined
+            }
           >
             {field.type === 'selector' && field.selectorKey ? (
               <ConnectorSelectorField
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle.tsx
new file mode 100644
index 00000000000..f5196e9e284
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle.tsx
@@ -0,0 +1,29 @@
+import { IconSwitch } from '@sim/emcn'
+import { List } from '@sim/emcn/icons'
+import { VariableIcon } from '@/components/icons'
+import type { CanonicalMode } from '@/lib/workflows/subblocks/visibility'
+
+interface CanonicalModeToggleProps {
+  mode: CanonicalMode
+  disabled?: boolean
+  onToggle?: () => void
+}
+
+const MODE_OPTIONS = [
+  { value: 'basic', label: 'Selector', icon: List },
+  { value: 'advanced', label: 'Variable', icon: VariableIcon },
+] as const
+
+export function CanonicalModeToggle({ mode, disabled, onToggle }: CanonicalModeToggleProps) {
+  return (
+    <IconSwitch
+      options={MODE_OPTIONS}
+      value={mode}
+      onValueChange={() => onToggle?.()}
+      disabled={disabled}
+      showTooltips
+      aria-label='Input mode'
+      className='-my-1'
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx
index 0c62d5155f4..8407c592dd5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx
@@ -41,7 +41,17 @@ describe('SubBlockFieldHeader', () => {
 
     expect(container?.textContent).toContain('Response format')
     expect(container?.querySelector('[aria-label="Required"]')).not.toBeNull()
-    expect(container?.querySelector('[aria-label="Switch to manual ID"]')).not.toBeNull()
+    expect(
+      container?.querySelector<HTMLInputElement>('input[type="radio"][aria-label="Selector"]')
+        ?.checked
+    ).toBe(true)
+
+    const variableOption = container?.querySelector<HTMLInputElement>(
+      'input[type="radio"][aria-label="Variable"]'
+    )
+    if (!variableOption) throw new Error('Canonical mode switch did not render')
+    act(() => variableOption.click())
+    expect(onToggle).toHaveBeenCalledOnce()
 
     const copyButton = container?.querySelector<HTMLButtonElement>('[aria-label="Copy value"]')
     if (!copyButton) throw new Error('Copy action did not render')
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx
index 1515a1a1282..33ac8424bd4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx
@@ -1,13 +1,7 @@
 import type { FocusEvent, ReactNode, RefObject } from 'react'
 import { Button, ChipInput, Label, Tooltip } from '@sim/emcn'
-import {
-  ArrowLeftRight,
-  ArrowUp,
-  Check,
-  Clipboard,
-  SquareArrowUpRight,
-  TriangleAlert,
-} from '@sim/emcn/icons'
+import { ArrowUp, Check, Clipboard, SquareArrowUpRight, TriangleAlert } from '@sim/emcn/icons'
+import { CanonicalModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle'
 
 interface FieldHeaderWandAction {
   isSearchActive: boolean
@@ -62,9 +56,6 @@ export function SubBlockFieldHeader({
   copyAction,
   externalLinkAction,
 }: SubBlockFieldHeaderProps) {
-  const canonicalTooltip =
-    canonicalAction?.mode === 'advanced' ? 'Switch to selector' : 'Switch to manual ID'
-
   const handleWandBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button')) return
     wandAction?.onSearchBlur()
@@ -172,27 +163,11 @@ export function SubBlockFieldHeader({
           </Tooltip.Root>
         ) : null}
         {canonicalAction ? (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                type='button'
-                variant='quiet'
-                size='icon'
-                onClick={canonicalAction.onToggle}
-                disabled={canonicalAction.disabled}
-                aria-label={canonicalTooltip}
-              >
-                <ArrowLeftRight
-                  className={
-                    canonicalAction.mode === 'advanced'
-                      ? 'size-[14px] text-[var(--text-primary)]'
-                      : 'size-[14px]'
-                  }
-                />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>{canonicalTooltip}</Tooltip.Content>
-          </Tooltip.Root>
+          <CanonicalModeToggle
+            mode={canonicalAction.mode}
+            onToggle={canonicalAction.onToggle}
+            disabled={canonicalAction.disabled}
+          />
         ) : null}
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
index cdda2da961d..141235e438c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
@@ -1,4 +1,5 @@
 export { BooleanControl } from './boolean-control'
+export { CanonicalModeToggle } from './canonical-mode-toggle'
 export { CheckboxList } from './checkbox-list'
 export { Code } from './code'
 export { ComboBox } from './combobox'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index e43fb61aa7b..95005090420 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -6,17 +6,16 @@ import {
   Code,
   type ComboboxOption,
   calculateGutterWidth,
-  cn,
   Expandable,
   ExpandableContent,
   getCodeEditorProps,
   handleKeyboardActivation,
   highlight,
+  IconSwitch,
   Label,
   languages,
-  Tooltip,
 } from '@sim/emcn'
-import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
+import { Plus, Trash, TypeJson, Upload } from '@sim/emcn/icons'
 import Editor from 'react-simple-code-editor'
 import {
   createDefaultInputFormatField,
@@ -84,6 +83,11 @@ const BOOLEAN_OPTIONS: ComboboxOption[] = [
   { label: 'false', value: 'false' },
 ]
 
+const FILE_MODE_OPTIONS = [
+  { value: 'upload', label: 'File uploader', icon: Upload },
+  { value: 'json', label: 'JSON', icon: TypeJson },
+] as const
+
 /**
  * Validates and sanitizes field names by removing control characters and quotes
  */
@@ -158,42 +162,24 @@ export function FieldFormat({
   }
 
   /**
-   * Renders the ⇄ toggle that switches a file field between the uploader and the
-   * raw JSON editor. Matches the canonical sub-block mode toggle. Hidden when the
-   * value can't be safely represented by the uploader.
+   * Switches a file field between the uploader and raw JSON editor, only when
+   * the value can be safely represented by the uploader.
    */
   const renderFileModeToggle = (field: Field) => {
     const { mode, canUseUploader } = getFileFieldMode(field)
     if (!canUseUploader) return null
-    const label = mode === 'upload' ? 'Switch to JSON' : 'Switch to file uploader'
     return (
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            type='button'
-            variant='quiet'
-            size='icon'
-            onClick={() =>
-              setFileFieldModes((prev) => ({
-                ...prev,
-                [field.id]: mode === 'upload' ? 'json' : 'upload',
-              }))
-            }
-            disabled={isReadOnly}
-            aria-label={label}
-          >
-            <ArrowLeftRight
-              className={cn(
-                'size-[14px]',
-                mode === 'json' ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
-              )}
-            />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='top'>
-          <p>{label}</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
+      <IconSwitch
+        options={FILE_MODE_OPTIONS}
+        value={mode}
+        onValueChange={(nextMode) =>
+          setFileFieldModes((prev) => ({ ...prev, [field.id]: nextMode }))
+        }
+        disabled={isReadOnly}
+        showTooltips
+        aria-label='File input mode'
+        className='-my-1'
+      />
     )
   }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 5be9308c629..7d946381b08 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -6,12 +6,13 @@ import {
   CollapsibleCard,
   type ComboboxOption,
   cn,
+  IconSwitch,
   Label,
-  Tooltip,
 } from '@sim/emcn'
-import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
+import { List, Plus, Trash } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
+import { VariableIcon } from '@/components/icons'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import {
   ReferenceTextarea,
@@ -64,6 +65,11 @@ const BOOLEAN_OPTIONS: ComboboxOption[] = [
   { label: 'false', value: 'false' },
 ]
 
+const BOOLEAN_MODE_OPTIONS = [
+  { value: 'selector', label: 'Selector', icon: List },
+  { value: 'manual', label: 'Variable', icon: VariableIcon },
+] as const
+
 /**
  * Values representable by the boolean selector; anything else (e.g. a block
  * reference) requires the manual input.
@@ -462,37 +468,20 @@ export function VariablesInput({
                   <div className='flex items-center justify-between'>
                     <Label className='text-small'>Value</Label>
                     {assignment.type === 'boolean' && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            type='button'
-                            variant='quiet'
-                            size='icon'
-                            onClick={() =>
-                              setManualBooleanModes((prev) => ({
-                                ...prev,
-                                [assignment.id]: !isManualBoolean,
-                              }))
-                            }
-                            disabled={isReadOnly}
-                            aria-label={
-                              isManualBoolean ? 'Switch to selector' : 'Switch to manual value'
-                            }
-                          >
-                            <ArrowLeftRight
-                              className={cn(
-                                'size-[14px]',
-                                isManualBoolean
-                                  ? 'text-[var(--text-primary)]'
-                                  : 'text-[var(--text-secondary)]'
-                              )}
-                            />
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content side='top'>
-                          <p>{isManualBoolean ? 'Switch to selector' : 'Switch to manual value'}</p>
-                        </Tooltip.Content>
-                      </Tooltip.Root>
+                      <IconSwitch
+                        options={BOOLEAN_MODE_OPTIONS}
+                        value={isManualBoolean ? 'manual' : 'selector'}
+                        onValueChange={(mode) =>
+                          setManualBooleanModes((prev) => ({
+                            ...prev,
+                            [assignment.id]: mode === 'manual',
+                          }))
+                        }
+                        disabled={isReadOnly}
+                        showTooltips
+                        aria-label='Boolean input mode'
+                        className='-my-1'
+                      />
                     )}
                   </div>
                   {assignment.type === 'boolean' && !isManualBoolean ? (
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index 61e239d3fc5..0bf178ad1d6 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -387,6 +387,8 @@ export type ChipModalDropdownOption = ChipDropdownOption
 interface ChipModalFieldBaseProps {
   /** Field title rendered above the control. Replaces the legacy `label` slot. */
   title: React.ReactNode
+  /** Trailing title-row control, rendered outside the label so it stays independently interactive. */
+  titleAdornment?: React.ReactNode
   /**
    * Renders a `*` marker after the title and sets `aria-required` on the
    * underlying control.
@@ -622,24 +624,34 @@ function ChipModalField(props: ChipModalFieldProps) {
   const submitRef = React.useContext(ChipModalSubmitContext)
   const errorId = `${id}-error`
   const hintId = `${id}-hint`
-  const { title, required, error, hint, flush = false, className } = props
+  const { title, titleAdornment, required, error, hint, flush = false, className } = props
   const associatesLabel =
     props.type === 'input' ||
     props.type === 'email' ||
     props.type === 'textarea' ||
     props.type === 'copy' ||
     props.type === 'emails'
+  const label = (
+    <Label htmlFor={associatesLabel ? id : undefined} className='pl-0.5 text-[var(--text-muted)]'>
+      {title}
+      {required && (
+        <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>
+          *
+        </span>
+      )}
+    </Label>
+  )
 
   return (
     <div className={cn('flex flex-col gap-[9px]', flush ? 'px-0' : 'px-2', className)}>
-      <Label htmlFor={associatesLabel ? id : undefined} className='pl-0.5 text-[var(--text-muted)]'>
-        {title}
-        {required && (
-          <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>
-            *
-          </span>
-        )}
-      </Label>
+      {titleAdornment ? (
+        <div className='flex items-center justify-between gap-1.5'>
+          {label}
+          {titleAdornment}
+        </div>
+      ) : (
+        label
+      )}
       {renderChipModalControl(props, id, errorId, hintId, submitRef)}
       {error && props.type !== 'emails' ? (
         <p id={errorId} role='alert' className={CHIP_MODAL_FIELD_ERROR_CLASS}>
diff --git a/packages/emcn/src/components/icon-switch/icon-switch.test.tsx b/packages/emcn/src/components/icon-switch/icon-switch.test.tsx
new file mode 100644
index 00000000000..569ec48d82a
--- /dev/null
+++ b/packages/emcn/src/components/icon-switch/icon-switch.test.tsx
@@ -0,0 +1,138 @@
+/** @vitest-environment jsdom */
+import { act, useState } from 'react'
+import { ChipModalField, IconSwitch } from '@sim/emcn'
+import { Code, List } from '@sim/emcn/icons'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const OPTIONS = [
+  { value: 'selector', label: 'Selector', icon: List },
+  { value: 'variable', label: 'Variable', icon: Code },
+] as const
+
+interface HarnessProps {
+  disabled?: boolean
+  showTooltips?: boolean
+  inModalField?: boolean
+  onValueChange: (value: string) => void
+}
+
+function Harness({ disabled, showTooltips, inModalField, onValueChange }: HarnessProps) {
+  const [value, setValue] = useState('selector')
+  const toggle = (
+    <IconSwitch
+      options={OPTIONS}
+      value={value}
+      onValueChange={(nextValue) => {
+        setValue(nextValue)
+        onValueChange(nextValue)
+      }}
+      disabled={disabled}
+      showTooltips={showTooltips}
+      aria-label='Input mode'
+    />
+  )
+  return inModalField ? (
+    <ChipModalField type='custom' title='Folder' titleAdornment={toggle}>
+      <input aria-label='Folder ID' />
+    </ChipModalField>
+  ) : (
+    toggle
+  )
+}
+
+let root: Root | null = null
+let container: HTMLDivElement
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root?.unmount())
+  container.remove()
+  root = null
+  vi.useRealTimers()
+})
+
+function mount(props: HarnessProps) {
+  act(() => root?.render(<Harness {...props} />))
+  return {
+    inputs: [...container.querySelectorAll<HTMLInputElement>('input[type="radio"]')],
+    labels: [...container.querySelectorAll<HTMLLabelElement>('[role="radiogroup"] label')],
+  }
+}
+
+describe('IconSwitch', () => {
+  it('changes mode beside a modal field title without making title clicks change mode', () => {
+    const onValueChange = vi.fn()
+    const { inputs, labels } = mount({ inModalField: true, onValueChange })
+    const title = [...container.querySelectorAll('label')].find(
+      (label) => label.textContent === 'Folder'
+    )
+    expect(title).toBeDefined()
+    expect(container.querySelector('[role="radiogroup"]')?.closest('label')).toBeNull()
+
+    act(() => labels[1].click())
+    expect(inputs.map((input) => input.checked)).toEqual([false, true])
+    expect(onValueChange).toHaveBeenLastCalledWith('variable')
+
+    act(() => title?.click())
+    expect(onValueChange).toHaveBeenCalledTimes(1)
+    expect(inputs.map((input) => input.checked)).toEqual([false, true])
+  })
+
+  it('selects either mode without toggling an already selected choice', () => {
+    const onValueChange = vi.fn()
+    const { inputs, labels } = mount({ onValueChange })
+
+    act(() => labels[1].click())
+    expect(inputs.map((input) => input.checked)).toEqual([false, true])
+    expect(onValueChange).toHaveBeenLastCalledWith('variable')
+
+    act(() => labels[1].click())
+    expect(onValueChange).toHaveBeenCalledTimes(1)
+
+    act(() => labels[0].click())
+    expect(inputs.map((input) => input.checked)).toEqual([true, false])
+    expect(onValueChange).toHaveBeenLastCalledWith('selector')
+  })
+
+  it('prevents selection changes while disabled', () => {
+    const onValueChange = vi.fn()
+    const { inputs, labels } = mount({ disabled: true, onValueChange })
+
+    act(() => labels[1].click())
+    expect(onValueChange).not.toHaveBeenCalled()
+    expect(inputs.every((input) => input.disabled)).toBe(true)
+    expect(inputs.map((input) => input.checked)).toEqual([true, false])
+  })
+
+  it('shows each option label in its hover tooltip', () => {
+    const { inputs } = mount({ showTooltips: true, onValueChange: vi.fn() })
+
+    for (const [index, option] of OPTIONS.entries()) {
+      act(() => {
+        inputs[index].dispatchEvent(
+          new MouseEvent('pointerover', { bubbles: true, clientX: 200, clientY: 200 })
+        )
+      })
+      expect(document.querySelector('[role="tooltip"]')?.textContent).toBe(option.label)
+      act(() => inputs[index].dispatchEvent(new MouseEvent('pointerout', { bubbles: true })))
+    }
+  })
+
+  it('shows a tooltip on keyboard focus without changing selection', () => {
+    const onValueChange = vi.fn()
+    const { inputs } = mount({ showTooltips: true, onValueChange })
+
+    act(() => inputs[1].focus())
+    expect(document.querySelector('[role="tooltip"]')?.textContent).toBe('Variable')
+    expect(onValueChange).not.toHaveBeenCalled()
+    expect(inputs.map((input) => input.checked)).toEqual([true, false])
+  })
+})
diff --git a/packages/emcn/src/components/icon-switch/icon-switch.tsx b/packages/emcn/src/components/icon-switch/icon-switch.tsx
new file mode 100644
index 00000000000..87ead272619
--- /dev/null
+++ b/packages/emcn/src/components/icon-switch/icon-switch.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { type ComponentType, useId } from 'react'
+import { cn } from '../../lib/cn'
+import { Tooltip } from '../tooltip/tooltip'
+
+export interface IconSwitchOption<T extends string = string> {
+  value: T
+  label: string
+  icon: ComponentType<{ className?: string }>
+}
+
+export interface IconSwitchProps<T extends string = string> {
+  options: readonly [IconSwitchOption<T>, IconSwitchOption<T>]
+  value: T
+  onValueChange: (value: T) => void
+  disabled?: boolean
+  showTooltips?: boolean
+  'aria-label': string
+  className?: string
+}
+
+/**
+ * Two square icon choices inside a compact frame. Native radios provide mutually
+ * exclusive selection and keyboard navigation; optional tooltips use each label.
+ *
+ * @example
+ * <IconSwitch options={modes} value={mode} onValueChange={setMode} aria-label="Input mode" />
+ */
+export function IconSwitch<T extends string>({
+  options,
+  value,
+  onValueChange,
+  disabled = false,
+  showTooltips = false,
+  'aria-label': ariaLabel,
+  className,
+}: IconSwitchProps<T>) {
+  const groupName = useId()
+
+  return (
+    <div
+      role='radiogroup'
+      aria-label={ariaLabel}
+      className={cn(
+        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-[5px] border border-[var(--border)] bg-[var(--surface-3)] p-[1px]',
+        disabled && 'opacity-50',
+        className
+      )}
+    >
+      {options.map((option) => {
+        const Icon = option.icon
+        const selected = option.value === value
+        const optionId = `${groupName}-${option.value}`
+        const input = (
+          <input
+            id={optionId}
+            type='radio'
+            name={groupName}
+            value={option.value}
+            checked={selected}
+            onChange={() => onValueChange(option.value)}
+            disabled={disabled}
+            aria-label={option.label}
+            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[3px] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
+          />
+        )
+
+        return (
+          <label
+            key={option.value}
+            htmlFor={optionId}
+            className={cn('relative flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+          >
+            {showTooltips ? (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>{input}</Tooltip.Trigger>
+                <Tooltip.Content side='top'>{option.label}</Tooltip.Content>
+              </Tooltip.Root>
+            ) : (
+              input
+            )}
+            <Icon
+              aria-hidden='true'
+              className={cn(
+                '-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-1/2 size-[12px] transition-colors',
+                selected
+                  ? 'text-[var(--text-primary)]'
+                  : 'text-[var(--text-muted)] peer-hover:text-[var(--text-secondary)]'
+              )}
+            />
+          </label>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 240dc803be5..c914ace6ad9 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -128,6 +128,7 @@ export {
 } from './dropdown-menu/dropdown-menu'
 export { Expandable, ExpandableContent } from './expandable/expandable'
 export { DashedDividerLine, FieldDivider } from './field-divider/field-divider'
+export { IconSwitch, type IconSwitchOption, type IconSwitchProps } from './icon-switch/icon-switch'
 export { Info } from './info/info'
 export {
   InfoCard,

From 56152f47086e3b8c98e042df0100f1f38b7431f9 Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Sat, 5 Sep 2026 18:27:07 -0700
Subject: [PATCH 2/8] fix(emcn): align compact switch corner radii

---
 packages/emcn/src/components/icon-switch/icon-switch.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/emcn/src/components/icon-switch/icon-switch.tsx b/packages/emcn/src/components/icon-switch/icon-switch.tsx
index 87ead272619..a52a0fc5e05 100644
--- a/packages/emcn/src/components/icon-switch/icon-switch.tsx
+++ b/packages/emcn/src/components/icon-switch/icon-switch.tsx
@@ -43,7 +43,7 @@ export function IconSwitch<T extends string>({
       role='radiogroup'
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-[5px] border border-[var(--border)] bg-[var(--surface-3)] p-[1px]',
+        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-sm border border-[var(--border)] bg-[var(--surface-3)] p-[1px]',
         disabled && 'opacity-50',
         className
       )}
@@ -62,7 +62,7 @@ export function IconSwitch<T extends string>({
             onChange={() => onValueChange(option.value)}
             disabled={disabled}
             aria-label={option.label}
-            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[3px] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
+            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[calc(theme(borderRadius.sm)-1px-var(--border-width,1px))] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
           />
         )
 

From 6ddc1f9194183212d4b60cd8d0706545a863a76d Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Sat, 5 Sep 2026 18:29:22 -0700
Subject: [PATCH 3/8] fix(emcn): fill compact switch segments to the border

---
 packages/emcn/src/components/icon-switch/icon-switch.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/emcn/src/components/icon-switch/icon-switch.tsx b/packages/emcn/src/components/icon-switch/icon-switch.tsx
index a52a0fc5e05..bcbc85cf730 100644
--- a/packages/emcn/src/components/icon-switch/icon-switch.tsx
+++ b/packages/emcn/src/components/icon-switch/icon-switch.tsx
@@ -43,7 +43,7 @@ export function IconSwitch<T extends string>({
       role='radiogroup'
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-sm border border-[var(--border)] bg-[var(--surface-3)] p-[1px]',
+        'inline-flex w-fit shrink-0 items-center rounded-sm border border-[var(--border)] bg-[var(--surface-3)]',
         disabled && 'opacity-50',
         className
       )}
@@ -62,7 +62,7 @@ export function IconSwitch<T extends string>({
             onChange={() => onValueChange(option.value)}
             disabled={disabled}
             aria-label={option.label}
-            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[calc(theme(borderRadius.sm)-1px-var(--border-width,1px))] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
+            className='peer m-0 size-[18px] cursor-pointer appearance-none rounded-[inherit] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
           />
         )
 
@@ -70,7 +70,10 @@ export function IconSwitch<T extends string>({
           <label
             key={option.value}
             htmlFor={optionId}
-            className={cn('relative flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+            className={cn(
+              'relative flex first:rounded-l-[calc(theme(borderRadius.sm)-var(--border-width,1px))] last:rounded-r-[calc(theme(borderRadius.sm)-var(--border-width,1px))]',
+              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+            )}
           >
             {showTooltips ? (
               <Tooltip.Root>

From f718af7e69b54a98c049e4dd4b8a879e6ed1b697 Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Sat, 5 Sep 2026 18:30:07 -0700
Subject: [PATCH 4/8] fix(emcn): use white surface for unselected mode

---
 packages/emcn/src/components/icon-switch/icon-switch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/emcn/src/components/icon-switch/icon-switch.tsx b/packages/emcn/src/components/icon-switch/icon-switch.tsx
index bcbc85cf730..c51aaa67b1e 100644
--- a/packages/emcn/src/components/icon-switch/icon-switch.tsx
+++ b/packages/emcn/src/components/icon-switch/icon-switch.tsx
@@ -43,7 +43,7 @@ export function IconSwitch<T extends string>({
       role='radiogroup'
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex w-fit shrink-0 items-center rounded-sm border border-[var(--border)] bg-[var(--surface-3)]',
+        'inline-flex w-fit shrink-0 items-center rounded-sm border border-[var(--border)] bg-[var(--surface-2)]',
         disabled && 'opacity-50',
         className
       )}

From a9ecadc5311e0ec52adbd338c8e93515d8061142 Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Sat, 5 Sep 2026 18:31:08 -0700
Subject: [PATCH 5/8] fix(emcn): restore inset mode switch squares

---
 packages/emcn/src/components/icon-switch/icon-switch.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/emcn/src/components/icon-switch/icon-switch.tsx b/packages/emcn/src/components/icon-switch/icon-switch.tsx
index c51aaa67b1e..8b16fc4068f 100644
--- a/packages/emcn/src/components/icon-switch/icon-switch.tsx
+++ b/packages/emcn/src/components/icon-switch/icon-switch.tsx
@@ -43,7 +43,7 @@ export function IconSwitch<T extends string>({
       role='radiogroup'
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex w-fit shrink-0 items-center rounded-sm border border-[var(--border)] bg-[var(--surface-2)]',
+        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-sm border border-[var(--border)] bg-[var(--surface-2)] p-[1px]',
         disabled && 'opacity-50',
         className
       )}
@@ -62,7 +62,7 @@ export function IconSwitch<T extends string>({
             onChange={() => onValueChange(option.value)}
             disabled={disabled}
             aria-label={option.label}
-            className='peer m-0 size-[18px] cursor-pointer appearance-none rounded-[inherit] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
+            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[calc(theme(borderRadius.sm)-1px-var(--border-width,1px))] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
           />
         )
 
@@ -70,10 +70,7 @@ export function IconSwitch<T extends string>({
           <label
             key={option.value}
             htmlFor={optionId}
-            className={cn(
-              'relative flex first:rounded-l-[calc(theme(borderRadius.sm)-var(--border-width,1px))] last:rounded-r-[calc(theme(borderRadius.sm)-var(--border-width,1px))]',
-              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-            )}
+            className={cn('relative flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
           >
             {showTooltips ? (
               <Tooltip.Root>

From 6fc9aa1d7fb93e6900d8cf500874ca04f78f28db Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Mon, 14 Sep 2026 19:31:53 -0700
Subject: [PATCH 6/8] improvement(emcn): match mode switch corners and inset to
 chip fields

---
 packages/emcn/src/components/icon-switch/icon-switch.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/emcn/src/components/icon-switch/icon-switch.tsx b/packages/emcn/src/components/icon-switch/icon-switch.tsx
index 8b16fc4068f..0baa0d96b0f 100644
--- a/packages/emcn/src/components/icon-switch/icon-switch.tsx
+++ b/packages/emcn/src/components/icon-switch/icon-switch.tsx
@@ -43,7 +43,7 @@ export function IconSwitch<T extends string>({
       role='radiogroup'
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-sm border border-[var(--border)] bg-[var(--surface-2)] p-[1px]',
+        'inline-flex w-fit shrink-0 items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-[2px]',
         disabled && 'opacity-50',
         className
       )}
@@ -62,7 +62,7 @@ export function IconSwitch<T extends string>({
             onChange={() => onValueChange(option.value)}
             disabled={disabled}
             aria-label={option.label}
-            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[calc(theme(borderRadius.sm)-1px-var(--border-width,1px))] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
+            className='peer m-0 size-[16px] cursor-pointer appearance-none rounded-[calc(theme(borderRadius.lg)-2px-var(--border-width,1px))] bg-transparent transition-colors checked:bg-[var(--surface-active)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--text-icon)] disabled:cursor-not-allowed'
           />
         )
 

From 09cc11a6a89d67c59b474981116173a75b30b4dc Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Mon, 14 Sep 2026 19:58:22 -0700
Subject: [PATCH 7/8] fix(editor): keep mode switch rows at their original
 height

The old toggle buttons set the title row height (20px in the editor,
18px in the connector modal). The switch only occupies 14px, so Value
rows in the Start block Files input and Variables block, and connector
titles with a mode switch, collapsed to the label height. Give those
rows the same minimum height the field header already uses.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../components/sub-block/components/starter/input-format.tsx    | 2 +-
 .../sub-block/components/variables-input/variables-input.tsx    | 2 +-
 packages/emcn/src/components/chip-modal/chip-modal.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 95005090420..78e8c7df25c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -709,7 +709,7 @@ export function FieldFormat({
                 {showValue && (
                   <div className='flex flex-col gap-1.5'>
                     {isFileFieldType(field.type) ? (
-                      <div className='flex items-center justify-between'>
+                      <div className='flex min-h-5 items-center justify-between'>
                         {renderFieldLabel('Value')}
                         {renderFileModeToggle(field)}
                       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 7d946381b08..4cc4ad8cf6a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -465,7 +465,7 @@ export function VariablesInput({
                 </div>
 
                 <div className='flex flex-col gap-1.5'>
-                  <div className='flex items-center justify-between'>
+                  <div className='flex min-h-5 items-center justify-between'>
                     <Label className='text-small'>Value</Label>
                     {assignment.type === 'boolean' && (
                       <IconSwitch
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index 0bf178ad1d6..af27d3795a1 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -645,7 +645,7 @@ function ChipModalField(props: ChipModalFieldProps) {
   return (
     <div className={cn('flex flex-col gap-[9px]', flush ? 'px-0' : 'px-2', className)}>
       {titleAdornment ? (
-        <div className='flex items-center justify-between gap-1.5'>
+        <div className='flex min-h-[18px] items-center justify-between gap-1.5'>
           {label}
           {titleAdornment}
         </div>

From e733205ddcf477e9a03347884e672f62b0bea9ad Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Mon, 14 Sep 2026 20:12:20 -0700
Subject: [PATCH 8/8] fix(knowledge): keep connector mode switch focused across
 mode changes

---
 .../connector-config-fields.test.tsx          | 22 +++++++++++++++++++
 .../connector-config-fields.tsx               |  5 ++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx
index 9a8682ba7ed..5a431614119 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx
@@ -106,4 +106,26 @@ describe('connector input mode switch', () => {
     act(() => radio('Manual input').click())
     expect(radio('Selector').checked).toBe(true)
   })
+
+  it('keeps focus on the switch through a keyboard mode round trip', () => {
+    act(() => root.render(<Harness />))
+    const selector = radio('Selector')
+    const manual = radio('Manual input')
+
+    act(() => {
+      manual.focus()
+      manual.click()
+    })
+    expect(radio('Manual input')).toBe(manual)
+    expect(manual.checked).toBe(true)
+    expect(document.activeElement).toBe(manual)
+
+    act(() => {
+      selector.focus()
+      selector.click()
+    })
+    expect(radio('Selector')).toBe(selector)
+    expect(selector.checked).toBe(true)
+    expect(document.activeElement).toBe(selector)
+  })
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
index 2808680a078..100c6b37e04 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx
@@ -64,7 +64,7 @@ export function ConnectorConfigFields({
 
         return (
           <ChipModalField
-            key={field.id}
+            key={hasCanonicalPair && canonicalId ? `canonical:${canonicalId}` : field.id}
             type='custom'
             title={
               /**
@@ -111,6 +111,7 @@ export function ConnectorConfigFields({
           >
             {field.type === 'selector' && field.selectorKey ? (
               <ConnectorSelectorField
+                key={field.id}
                 field={field as ConnectorConfigField & { selectorKey: SelectorKey }}
                 value={sourceConfig[field.id] ?? (field.multi ? [] : '')}
                 onChange={(value: ConfigFieldValue) => onFieldChange(field.id, value)}
@@ -122,6 +123,7 @@ export function ConnectorConfigFields({
               />
             ) : field.type === 'dropdown' && field.options ? (
               <ChipCombobox
+                key={field.id}
                 options={field.options.map((opt) => ({
                   label: opt.label,
                   value: opt.id,
@@ -136,6 +138,7 @@ export function ConnectorConfigFields({
               />
             ) : (
               <ChipInput
+                key={field.id}
                 value={
                   Array.isArray(sourceConfig[field.id])
                     ? (sourceConfig[field.id] as string[]).join(', ')