feat(settings): unify filter dropdowns on ChipSelect (integrations style)

Add a ChipSelect emcn component — a filled chip trigger + chevron opening a
DropdownMenu, matching the integrations category filter — supporting single
select, multi-select (checkbox rows), grouped options, and optional in-menu
search. Migrate every settings/EE filter dropdown off ChipCombobox to it:
audit-logs (resource-type multi + time-range), data-retention, data-drains,
general, admin (grouped tool picker), inbox status filter, and the workflow
MCP-server pickers. The SSO provider-id field stays an editable combobox since
it accepts free-text slugs.

Also fix audit findings: chip the MCP client-secret input, normalize an MCP
error-text size, and drop now-dead destination-icon code in data-drains.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx

@@ -7,7 +7,7 @@ import { useParams } from 'next/navigation'
 import {
   Badge,
   Button,
-  ChipCombobox,
+  ChipSelect,
   type ComboboxOptionGroup,
   Input as EmcnInput,
   Label,
@@ -341,19 +341,17 @@ export function Admin() {
                       Default uses the configured Sim agent URL.
                     </p>
                   </div>
-                  <div className='w-[160px]'>
-                    <ChipCombobox
-                      align='end'
-                      dropdownWidth={160}
-                      value={settings?.mothershipEnvironment ?? 'default'}
-                      onChange={(value) =>
-                        handleMothershipEnvironmentChange(value as MothershipEnvironment)
-                      }
-                      placeholder='Select environment'
-                      disabled={updateSetting.isPending}
-                      options={MOTHERSHIP_ENV_OPTIONS}
-                    />
-                  </div>
+                  <ChipSelect
+                    align='start'
+                    dropdownWidth={160}
+                    value={settings?.mothershipEnvironment ?? 'default'}
+                    onChange={(value) =>
+                      handleMothershipEnvironmentChange(value as MothershipEnvironment)
+                    }
+                    placeholder='Select environment'
+                    disabled={updateSetting.isPending}
+                    options={MOTHERSHIP_ENV_OPTIONS}
+                  />
                 </div>
 
                 <div className='flex items-center justify-between gap-3'>
@@ -363,36 +361,32 @@ export function Admin() {
                       Select workspace MCP tools, custom tools, and skills that Mothership can use.
                     </p>
                   </div>
-                  <div className='w-[160px]'>
-                    <ChipCombobox
-                      align='end'
-                      dropdownWidth={320}
-                      options={[]}
-                      groups={mothershipToolOptions.groups}
-                      multiSelect
-                      multiSelectValues={selectedMothershipToolValues}
-                      onMultiSelectChange={handleMothershipToolSelectionChange}
-                      overlayContent={
-                        selectedMothershipToolCount > 0
-                          ? `${selectedMothershipToolCount} selected`
-                          : undefined
-                      }
-                      placeholder={
-                        mcpToolsLoading || customToolsLoading || skillsLoading
-                          ? 'Loading...'
-                          : 'Select'
-                      }
-                      searchPlaceholder='Search tools and skills...'
-                      emptyMessage='No tools or skills available'
-                      disabled={
-                        updateMothershipSettings.isPending ||
-                        mcpToolsLoading ||
-                        customToolsLoading ||
-                        skillsLoading
-                      }
-                      searchable
-                    />
-                  </div>
+                  <ChipSelect
+                    align='start'
+                    dropdownWidth={320}
+                    groups={mothershipToolOptions.groups}
+                    multiSelect
+                    multiSelectValues={selectedMothershipToolValues}
+                    onMultiSelectChange={handleMothershipToolSelectionChange}
+                    displayLabel={
+                      selectedMothershipToolCount > 0
+                        ? `${selectedMothershipToolCount} selected`
+                        : undefined
+                    }
+                    placeholder={
+                      mcpToolsLoading || customToolsLoading || skillsLoading
+                        ? 'Loading...'
+                        : 'Select'
+                    }
+                    searchPlaceholder='Search tools and skills...'
+                    disabled={
+                      updateMothershipSettings.isPending ||
+                      mcpToolsLoading ||
+                      customToolsLoading ||
+                      skillsLoading
+                    }
+                    searchable
+                  />
                 </div>
               </>
             )}

apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx

@@ -8,12 +8,12 @@ import { useRouter } from 'next/navigation'
 import {
   Button,
   Chip,
-  ChipCombobox,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
   Input,
   Label,
   Switch,
@@ -392,20 +392,18 @@ export function General() {
             <div className='flex flex-col gap-4'>
               <div className='flex items-center justify-between'>
                 <Label htmlFor='theme-select'>Theme</Label>
-                <div className='w-[100px]'>
-                  <ChipCombobox
-                    align='end'
-                    dropdownWidth={140}
-                    value={settings?.theme}
-                    onChange={handleThemeChange}
-                    placeholder='Select theme'
-                    options={[
-                      { label: 'System', value: 'system' },
-                      { label: 'Light', value: 'light' },
-                      { label: 'Dark', value: 'dark' },
-                    ]}
-                  />
-                </div>
+                <ChipSelect
+                  align='start'
+                  dropdownWidth={140}
+                  value={settings?.theme}
+                  onChange={handleThemeChange}
+                  placeholder='Select theme'
+                  options={[
+                    { label: 'System', value: 'system' },
+                    { label: 'Light', value: 'light' },
+                    { label: 'Dark', value: 'dark' },
+                  ]}
+                />
               </div>
 
               <div className='flex items-center justify-between'>
@@ -457,23 +455,21 @@ export function General() {
 
               <div className='flex items-center justify-between'>
                 <Label htmlFor='snap-to-grid'>Snap to grid</Label>
-                <div className='w-[100px]'>
-                  <ChipCombobox
-                    align='end'
-                    dropdownWidth={140}
-                    value={String(snapToGridValue)}
-                    onChange={handleSnapToGridChange}
-                    placeholder='Select size'
-                    options={[
-                      { label: 'Off', value: '0' },
-                      { label: '10px', value: '10' },
-                      { label: '20px', value: '20' },
-                      { label: '30px', value: '30' },
-                      { label: '40px', value: '40' },
-                      { label: '50px', value: '50' },
-                    ]}
-                  />
-                </div>
+                <ChipSelect
+                  align='start'
+                  dropdownWidth={140}
+                  value={String(snapToGridValue)}
+                  onChange={handleSnapToGridChange}
+                  placeholder='Select size'
+                  options={[
+                    { label: 'Off', value: '0' },
+                    { label: '10px', value: '10' },
+                    { label: '20px', value: '20' },
+                    { label: '30px', value: '30' },
+                    { label: '40px', value: '40' },
+                    { label: '50px', value: '50' },
+                  ]}
+                />
               </div>
 
               <div className='flex items-center justify-between'>

apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx

@@ -4,7 +4,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { formatRelativeTime } from '@sim/utils/formatting'
 import { ArrowRight, Paperclip } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
-import { Badge, ChipCombobox, SearchInput } from '@/components/emcn'
+import { Badge, ChipSelect, SearchInput } from '@/components/emcn'
 import type { InboxTaskItem } from '@/hooks/queries/inbox'
 import { useInboxConfig, useInboxTasks } from '@/hooks/queries/inbox'
 
@@ -73,18 +73,16 @@ export function InboxTaskList() {
           onChange={(e) => setSearchTerm(e.target.value)}
           className='min-w-0 flex-1'
         />
-        <div className='w-[160px] shrink-0'>
-          <ChipCombobox
-            align='end'
-            value={statusFilter}
-            onChange={(value) => {
-              if (STATUS_OPTIONS.some((option) => option.value === value)) {
-                setStatusFilter(value as StatusFilter)
-              }
-            }}
-            options={STATUS_OPTIONS.map((opt) => ({ label: opt.label, value: opt.value }))}
-          />
-        </div>
+        <ChipSelect
+          align='start'
+          value={statusFilter}
+          onChange={(value) => {
+            if (STATUS_OPTIONS.some((option) => option.value === value)) {
+              setStatusFilter(value as StatusFilter)
+            }
+          }}
+          options={STATUS_OPTIONS.map((opt) => ({ label: opt.label, value: opt.value }))}
+        />
       </div>
 
       <div className='min-h-0 flex-1 overflow-y-auto'>

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx

@@ -761,7 +761,7 @@ export function McpServerFormModal({
                       setOauthClientSecretTouched(value.length > 0)
                       setFormData((prev) => ({ ...prev, oauthClientSecret: value }))
                     }}
-                    className='h-9'
+                    variant='chip'
                   />
                 </FormField>
                 <p className='text-[var(--text-tertiary)] text-caption'>

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx

@@ -426,7 +426,7 @@ export function MCP({ initialServerId }: MCPProps) {
                 {server.connectionStatus === 'error' && (
                   <div className='flex flex-col gap-2'>
                     <span className='text-[12px] text-[var(--text-muted)]'>Status</span>
-                    <p className='text-[var(--text-error)] text-base'>
+                    <p className='text-[14px] text-[var(--text-error)]'>
                       {server.lastError || 'Unable to connect'}
                     </p>
                   </div>

apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal/create-workflow-mcp-server-modal.tsx

@@ -6,13 +6,13 @@ import {
   ButtonGroup,
   ButtonGroupItem,
   Chip,
-  ChipCombobox,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
   type ComboboxOption,
 } from '@/components/emcn'
 import { useCreateWorkflowMcpServer } from '@/hooks/queries/workflow-mcp-servers'
@@ -94,24 +94,20 @@ export function CreateWorkflowMcpServerModal({
         />
         {showWorkflows && (
           <ChipModalField type='custom' title='Workflows'>
-            <ChipCombobox
+            <ChipSelect
               options={workflowOptions ?? []}
               multiSelect
               multiSelectValues={selectedWorkflowIds}
               onMultiSelectChange={setSelectedWorkflowIds}
               placeholder='Select workflows...'
               searchable
               searchPlaceholder='Search workflows...'
-              isLoading={isLoadingWorkflows}
               disabled={createServerMutation.isPending}
-              emptyMessage='No deployed workflows available'
-              overlayContent={
-                selectedWorkflowIds.length > 0 ? (
-                  <span className='text-[var(--text-primary)]'>
-                    {selectedWorkflowIds.length} workflow
-                    {selectedWorkflowIds.length !== 1 ? 's' : ''} selected
-                  </span>
-                ) : undefined
+              align='start'
+              displayLabel={
+                selectedWorkflowIds.length > 0
+                  ? `${selectedWorkflowIds.length} workflow${selectedWorkflowIds.length !== 1 ? 's' : ''} selected`
+                  : undefined
               }
             />
           </ChipModalField>

apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx

@@ -11,13 +11,13 @@ import {
   ButtonGroup,
   ButtonGroupItem,
   Chip,
-  ChipCombobox,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  ChipSelect,
   Code,
   type ComboboxOption,
   Input as EmcnInput,
@@ -821,21 +821,16 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
             a tool.
           </p>
           <ChipModalField type='custom' title='Select Workflow'>
-            <ChipCombobox
+            <ChipSelect
               options={workflowOptions}
               value={selectedWorkflowId || undefined}
               onChange={(value: string) => setSelectedWorkflowId(value)}
               placeholder='Select a workflow...'
               searchable
               searchPlaceholder='Search workflows...'
               disabled={addToolMutation.isPending}
-              overlayContent={
-                selectedWorkflow ? (
-                  <span className='truncate text-[var(--text-primary)]'>
-                    {selectedWorkflow.name}
-                  </span>
-                ) : undefined
-              }
+              align='start'
+              displayLabel={selectedWorkflow?.name}
             />
           </ChipModalField>
           <ChipModalError>