refactor(ui): share static API and MCP parameter cards

Author: Bill Leoutsakos

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

@@ -18,6 +18,7 @@ import {
   ChipSelect,
   Code,
   type ComboboxOption,
+  FieldCard,
   Label,
   useCopyToClipboard,
 } from '@sim/emcn'
@@ -713,36 +714,29 @@ function ServerDetailView({
                 return hasParams ? (
                   <div className='flex flex-col gap-2'>
                     {Object.entries(properties).map(([name, prop]) => (
-                      <div
+                      <FieldCard
                         key={name}
-                        className='overflow-hidden rounded-sm border border-[var(--border-1)]'
+                        title={name}
+                        badge={
+                          <Badge variant='type' size='sm'>
+                            {prop.type || 'any'}
+                          </Badge>
+                        }
                       >
-                        <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
-                          <div className='flex min-w-0 flex-1 items-center gap-2'>
-                            <span className='block truncate text-[var(--text-tertiary)] text-base'>
-                              {name}
-                            </span>
-                            <Badge variant='type' size='sm'>
-                              {prop.type || 'any'}
-                            </Badge>
-                          </div>
-                        </div>
-                        <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-                          <div className='flex flex-col gap-1.5'>
-                            <Label>Description</Label>
-                            <ChipInput
-                              value={editingParameterDescriptions[name] || ''}
-                              onChange={(e) =>
-                                setEditingParameterDescriptions((prev) => ({
-                                  ...prev,
-                                  [name]: e.target.value,
-                                }))
-                              }
-                              placeholder={`Enter description for ${name}`}
-                            />
-                          </div>
+                        <div className='flex flex-col gap-1.5'>
+                          <Label>Description</Label>
+                          <ChipInput
+                            value={editingParameterDescriptions[name] || ''}
+                            onChange={(e) =>
+                              setEditingParameterDescriptions((prev) => ({
+                                ...prev,
+                                [name]: e.target.value,
+                              }))
+                            }
+                            placeholder={`Enter description for ${name}`}
+                          />
                         </div>
-                      </div>
+                      </FieldCard>
                     ))}
                   </div>
                 ) : (

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx

@@ -287,11 +287,11 @@ export const DataRow = React.memo(function DataRow({
           {hasWorkflowColumns && (
             <Button
               type='button'
-              variant='ghost'
-              size='sm'
+              variant='quiet'
+              size='icon'
               aria-label={runningCount > 0 ? `Stop ${runningCount} running` : 'Run row'}
               title={runningCount > 0 ? `Stop ${runningCount} running` : 'Run row'}
-              className='size-[20px] shrink-0 p-0 text-[var(--text-primary)] hover-hover:bg-[var(--surface-2)]'
+              className='shrink-0'
               onClick={() => {
                 if (runningCount > 0) {
                   onStopRow(row.id)

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

@@ -13,6 +13,7 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  FieldCard,
   Label,
 } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -237,31 +238,24 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
             <ChipModalField type='custom' title={`Parameters (${inputFormat.length})`}>
               <div className='flex flex-col gap-2'>
                 {inputFormat.map((field) => (
-                  <div
+                  <FieldCard
                     key={field.name}
-                    className='overflow-hidden rounded-sm border border-[var(--border-1)]'
+                    title={field.name}
+                    badge={
+                      <Badge variant='type' size='sm'>
+                        {field.type || 'string'}
+                      </Badge>
+                    }
                   >
-                    <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
-                      <div className='flex min-w-0 flex-1 items-center gap-2'>
-                        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-                          {field.name}
-                        </span>
-                        <Badge variant='type' size='sm'>
-                          {field.type || 'string'}
-                        </Badge>
-                      </div>
+                    <div className='flex flex-col gap-1.5'>
+                      <Label className='text-small'>Description</Label>
+                      <ChipInput
+                        value={paramDescriptions[field.name] || ''}
+                        onChange={(e) => handleParamDescriptionChange(field.name, e.target.value)}
+                        placeholder={`Enter description for ${field.name}`}
+                      />
                     </div>
-                    <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-                      <div className='flex flex-col gap-1.5'>
-                        <Label className='text-small'>Description</Label>
-                        <ChipInput
-                          value={paramDescriptions[field.name] || ''}
-                          onChange={(e) => handleParamDescriptionChange(field.name, e.target.value)}
-                          placeholder={`Enter description for ${field.name}`}
-                        />
-                      </div>
-                    </div>
-                  </div>
+                  </FieldCard>
                 ))}
               </div>
             </ChipModalField>

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

@@ -8,6 +8,7 @@ import {
   ChipInput,
   ChipModalField,
   type ComboboxOption,
+  FieldCard,
   Skeleton,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
@@ -578,38 +579,31 @@ export function McpDeploy({
           </p>
           <div className='flex flex-col gap-2'>
             {inputFormat.map((field) => (
-              <div
+              <FieldCard
                 key={field.name}
-                className='overflow-hidden rounded-sm border border-[var(--border-1)]'
+                title={field.name}
+                badge={
+                  <Badge variant='type' size='sm'>
+                    {field.type}
+                  </Badge>
+                }
               >
-                <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
-                  <div className='flex min-w-0 flex-1 items-center gap-2'>
-                    <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-                      {field.name}
-                    </span>
-                    <Badge variant='type' size='sm'>
-                      {field.type}
-                    </Badge>
-                  </div>
-                </div>
-                <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-                  <ChipModalField
-                    type='input'
-                    title='Description'
-                    flush
-                    value={
-                      parameterDescriptions[field.name] ?? startBlockDescriptions[field.name] ?? ''
-                    }
-                    onChange={(value) =>
-                      setParameterDescriptions((prev) => ({
-                        ...prev,
-                        [field.name]: value,
-                      }))
-                    }
-                    placeholder={startBlockDescriptions[field.name] || `Describe ${field.name}`}
-                  />
-                </div>
-              </div>
+                <ChipModalField
+                  type='input'
+                  title='Description'
+                  flush
+                  value={
+                    parameterDescriptions[field.name] ?? startBlockDescriptions[field.name] ?? ''
+                  }
+                  onChange={(value) =>
+                    setParameterDescriptions((prev) => ({
+                      ...prev,
+                      [field.name]: value,
+                    }))
+                  }
+                  placeholder={startBlockDescriptions[field.name] || `Describe ${field.name}`}
+                />
+              </FieldCard>
             ))}
           </div>
         </ChipModalField>

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

@@ -966,7 +966,7 @@ export function ConditionInput({
                         disabled ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      size='icon'
                     >
                       <Plus className='size-[14px]' />
                       <span className='sr-only'>Add Block</span>
@@ -986,7 +986,7 @@ export function ConditionInput({
                         disabled ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      size='icon'
                     >
                       <ChevronUp className='size-[14px]' />
                       <span className='sr-only'>Move Up</span>
@@ -1008,7 +1008,7 @@ export function ConditionInput({
                           isElseConditionTitle(conditionalBlocks[index + 1]?.title)) ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      size='icon'
                     >
                       <ChevronDown className='size-[14px]' />
                       <span className='sr-only'>Move Down</span>
@@ -1025,7 +1025,7 @@ export function ConditionInput({
                       disabled={
                         isPreview || disabled || conditionalBlocks.length <= (isRouterMode ? 1 : 2)
                       }
-                      className='h-auto p-0'
+                      size='icon'
                     >
                       <Trash className='size-[14px]' />
                       <span className='sr-only'>Delete Block</span>

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

@@ -257,20 +257,15 @@ export function DocumentTagEntry({
 
   const renderActions = (tag: DocumentTag) => (
     <>
-      <Button
-        variant='ghost'
-        onClick={addTag}
-        disabled={isReadOnly || !canAddMoreTags}
-        className='h-auto p-0'
-      >
+      <Button variant='ghost' onClick={addTag} disabled={isReadOnly || !canAddMoreTags} size='icon'>
         <Plus className='size-[14px]' />
         <span className='sr-only'>Add Tag</span>
       </Button>
       <Button
         variant='ghost-destructive'
         onClick={() => removeTag(tag.id)}
         disabled={isReadOnly}
-        className='h-auto p-0'
+        size='icon'
       >
         <Trash className='size-[14px]' />
         <span className='sr-only'>Delete Tag</span>

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

@@ -147,7 +147,7 @@ export function EvalInput({
               variant='ghost'
               onClick={addMetric}
               disabled={isPreview || disabled}
-              className='h-auto p-0'
+              size='icon'
             >
               <Plus className='size-[14px]' />
               <span className='sr-only'>Add Metric</span>
@@ -162,7 +162,7 @@ export function EvalInput({
               variant='ghost-destructive'
               onClick={() => removeMetric(metric.id)}
               disabled={isPreview || disabled || metrics.length === 1}
-              className='h-auto p-0'
+              size='icon'
             >
               <Trash className='size-[14px]' />
               <span className='sr-only'>Delete Metric</span>

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

@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes } from 'react'
+import { cn, Tooltip } from '@sim/emcn'
+import { ArrowLeftRight } from '@sim/emcn/icons'
+
+interface FieldModeToggleProps {
+  label: string
+  active: boolean
+  disabled?: boolean
+  onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick']
+}
+
+/** Shared field-mode affordance; the caller owns the mode and its stored values. */
+export function FieldModeToggle({ label, active, disabled, onClick }: FieldModeToggleProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          type='button'
+          className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] disabled:cursor-not-allowed disabled:opacity-50'
+          onClick={onClick}
+          disabled={disabled}
+          aria-label={label}
+        >
+          <ArrowLeftRight
+            className={cn(
+              'size-[12px]! transition-colors',
+              active ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
+            )}
+          />
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>
+        <p>{label}</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}

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

@@ -129,15 +129,15 @@ export function FilterRuleRow({
 
   const renderActions = () => (
     <>
-      <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
+      <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} size='icon'>
         <Plus className='size-[14px]' />
         <span className='sr-only'>Add Condition</span>
       </Button>
       <Button
         variant='ghost-destructive'
         onClick={() => onRemove(rule.id)}
         disabled={isReadOnly}
-        className='h-auto p-0'
+        size='icon'
       >
         <Trash className='size-[14px]' />
         <span className='sr-only'>Delete Condition</span>

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

@@ -257,7 +257,7 @@ export function KnowledgeTagFilters({
           addFilter()
         }}
         disabled={isReadOnly}
-        className='h-auto p-0'
+        size='icon'
       >
         <Plus className='size-[14px]' />
         <span className='sr-only'>Add Filter</span>
@@ -269,7 +269,7 @@ export function KnowledgeTagFilters({
           removeFilter(filter.id)
         }}
         disabled={isReadOnly}
-        className='h-auto p-0'
+        size='icon'
       >
         <Trash className='size-[14px]' />
         <span className='sr-only'>Delete Filter</span>