fix(ui): preserve editor picker styling and compact API controls

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx

@@ -5,8 +5,8 @@ import {
   Button,
   ChipButtonGroup,
   ChipButtonGroupItem,
-  ChipSelect,
   Code,
+  Combobox,
   Label,
   Skeleton,
   Tooltip,
@@ -560,11 +560,9 @@ console.log(limits);`
                   <span>{copied.async ? 'Copied' : 'Copy'}</span>
                 </Tooltip.Content>
               </Tooltip.Root>
-              <ChipSelect
-                className='min-w-[100px]'
-                showSelectedCheck
-                modal={false}
-                maxHeight={192}
+              <Combobox
+                size='sm'
+                className='w-fit! min-w-[100px] rounded-md px-[9px] py-0.5!'
                 options={[
                   { label: 'Start Execution', value: 'execute' },
                   { label: 'Check Status', value: 'status' },

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ChipCombobox, type ComboboxOption, cn } from '@sim/emcn'
+import { Combobox, type ComboboxOption, cn } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
 import { useReactFlow } from '@xyflow/react'
 import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
@@ -274,6 +274,7 @@ export const ComboBox = memo(function ComboBox({
     isModelUsable,
   ])
 
+  // Convert options to Combobox format
   const comboboxOptions = useMemo((): ComboboxOption[] => {
     const mapped = evaluatedOptions.map((option): ComboboxOption => {
       if (typeof option === 'string') {
@@ -543,12 +544,13 @@ export const ComboBox = memo(function ComboBox({
           ctrlOnChangeRef.current = ctrlOnChange
           onDropRef.current = onDrop
           onDragOverRef.current = onDragOver
+          // Store the input ref for passing to Combobox
           if (ref.current) {
             inputRefFromController.current = ref.current as HTMLInputElement
           }
 
           return (
-            <ChipCombobox
+            <Combobox
               options={comboboxOptions}
               value={inputValue}
               selectedValue={value ?? ''}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx

@@ -4,8 +4,8 @@ import { useMemo, useRef } from 'react'
 import {
   Badge,
   Button,
-  ChipCombobox,
   CollapsibleCard,
+  Combobox,
   type ComboboxOption,
   cn,
   Input,
@@ -375,7 +375,7 @@ export function DocumentTagEntry({
       <>
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Tag</Label>
-          <ChipCombobox
+          <Combobox
             options={tagOptions}
             value={tag.tagName}
             onChange={(value) => updateTag(tag.id, 'tagName', value)}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.test.tsx

@@ -20,7 +20,7 @@ const { fetched } = vi.hoisted(() => ({
 
 vi.mock('@sim/emcn', () => ({
   ChipTag: ({ children }: { children?: React.ReactNode }) => <span data-chip>{children}</span>,
-  ChipCombobox: ({
+  Combobox: ({
     options,
     multiSelectValues,
     overlayContent,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ChipCombobox, ChipTag, type ComboboxOption } from '@sim/emcn'
+import { ChipTag, Combobox, type ComboboxOption } from '@sim/emcn'
 import { generateId } from '@sim/utils/id'
 import { isRecordLike } from '@sim/utils/object'
 import {
@@ -508,7 +508,7 @@ export const Dropdown = memo(function Dropdown({
   const isSearchable = searchable || (subBlockId === 'operation' && comboboxOptions.length > 5)
 
   return (
-    <ChipCombobox
+    <Combobox
       options={comboboxOptions}
       value={multiSelect ? undefined : (singleValue ?? undefined)}
       multiSelectValues={multiSelect ? (multiValues ?? undefined) : undefined}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, ChipCombobox, cn } from '@sim/emcn'
+import { Button, Combobox, cn } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -168,7 +168,7 @@ function SingleFileSelector({
 
   return (
     <div className='relative w-full'>
-      <ChipCombobox
+      <Combobox
         options={options}
         value={comboboxValue}
         selectedValue={selectedValue}
@@ -943,7 +943,7 @@ export function FileUpload({
 
       {/* Add More dropdown for multiple files */}
       {hasFiles && multiple && !isUploading && (
-        <ChipCombobox
+        <Combobox
           options={comboboxOptions}
           value={inputValue}
           onChange={handleComboboxChange}
@@ -987,7 +987,7 @@ export function FileUpload({
 
       {/* Show dropdown selector if no files and not uploading */}
       {!hasFiles && !isUploading && (
-        <ChipCombobox
+        <Combobox
           options={comboboxOptions}
           value={inputValue}
           onChange={handleComboboxChange}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx

@@ -2,9 +2,8 @@ import { useRef } from 'react'
 import {
   Badge,
   Button,
-  ChipCombobox,
-  ChipSelect,
   CollapsibleCard,
+  Combobox,
   type ComboboxOption,
   cn,
   Input,
@@ -205,18 +204,12 @@ export function FilterRuleRow({
       {index > 0 && (
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Logic</Label>
-          <ChipSelect
-            fullWidth
-            align='start'
-            dropdownWidth='trigger'
-            showSelectedCheck
-            modal={false}
-            maxHeight={192}
+          <Combobox
             options={logicalOptions}
             value={rule.logicalOperator}
             onChange={(v) => onUpdate(rule.id, 'logicalOperator', v as 'and' | 'or')}
             disabled={isReadOnly}
-            displayLabel={
+            overlayContent={
               getLabelHighlight('logicalOperator', rule.logicalOperator) ? (
                 <span className='truncate text-[var(--text-primary)]'>
                   {formatDisplayText(rule.logicalOperator, {
@@ -234,7 +227,7 @@ export function FilterRuleRow({
 
       <div className='flex flex-col gap-1.5'>
         <Label className='text-small'>Column</Label>
-        <ChipCombobox
+        <Combobox
           options={columns}
           value={rule.column}
           onChange={(v) => onUpdate(rule.id, 'column', v)}
@@ -254,19 +247,13 @@ export function FilterRuleRow({
 
       <div className='flex flex-col gap-1.5'>
         <Label className='text-small'>Operator</Label>
-        <ChipSelect
-          fullWidth
-          align='start'
-          dropdownWidth='trigger'
-          showSelectedCheck
-          modal={false}
-          maxHeight={192}
+        <Combobox
           options={comparisonOptions}
           value={rule.operator}
           onChange={(v) => onUpdate(rule.id, 'operator', v)}
           disabled={isReadOnly}
           placeholder='Select operator'
-          displayLabel={
+          overlayContent={
             getLabelHighlight('operator', getOperatorLabel(rule.operator)) ? (
               <span className='truncate text-[var(--text-primary)]'>
                 {formatDisplayText(getOperatorLabel(rule.operator), {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx

@@ -4,10 +4,8 @@ import { useRef } from 'react'
 import {
   Badge,
   Button,
-  ChipCombobox,
-  ChipSelect,
-  type ChipSelectOption,
   CollapsibleCard,
+  Combobox,
   type ComboboxOption,
   cn,
   Input,
@@ -373,7 +371,7 @@ export function KnowledgeTagFilters({
     }))
 
     const operators = getOperatorsForFieldType(filter.fieldType)
-    const operatorOptions: ChipSelectOption[] = operators.map((op) => ({
+    const operatorOptions: ComboboxOption[] = operators.map((op) => ({
       value: op.value,
       label: op.label,
     }))
@@ -384,7 +382,7 @@ export function KnowledgeTagFilters({
       <>
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Tag</Label>
-          <ChipCombobox
+          <Combobox
             options={tagOptions}
             value={filter.tagName}
             onChange={(value) => updateFilter(filter.id, 'tagName', value)}
@@ -395,13 +393,7 @@ export function KnowledgeTagFilters({
 
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Operator</Label>
-          <ChipSelect
-            fullWidth
-            align='start'
-            dropdownWidth='trigger'
-            showSelectedCheck
-            modal={false}
-            maxHeight={192}
+          <Combobox
             options={operatorOptions}
             value={filter.operator}
             onChange={(value) => updateFilter(filter.id, 'operator', value)}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import { ChipCombobox, FieldDivider, Label, Slider, Switch } from '@sim/emcn'
+import { Combobox, FieldDivider, Label, Slider, Switch } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -282,7 +282,7 @@ export function McpDynamicArgs({
 
         return (
           <div key={`${paramName}-dropdown`}>
-            <ChipCombobox
+            <Combobox
               options={dropdownOptions}
               value={dropdownValue}
               selectedValue={dropdownValue}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { ChipCombobox, type ComboboxOptionGroup } from '@sim/emcn'
+import { Combobox, type ComboboxOptionGroup } from '@sim/emcn'
 import { Plus, X } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { AgentSkillsIcon } from '@/components/icons'
@@ -133,7 +133,7 @@ export function SkillInput({
   return (
     <>
       <div className='w-full space-y-2'>
-        <ChipCombobox
+        <Combobox
           options={[]}
           groups={skillGroups}
           placeholder='Add skill...'