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]/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>

packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx

@@ -1,6 +1,6 @@
 /** @vitest-environment jsdom */
 import { act, type ReactNode, useState } from 'react'
-import { CollapsibleCard } from '@sim/emcn'
+import { CollapsibleCard, FieldCard } from '@sim/emcn'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
@@ -103,3 +103,19 @@ describe('CollapsibleCard', () => {
     expect(parentClick).not.toHaveBeenCalled()
   })
 })
+
+it('keeps static FieldCard content visible without a collapse target', () => {
+  mount(
+    <FieldCard title='query' badge={<span>string</span>} data-field='query'>
+      <input aria-label='Description' defaultValue='Search terms' />
+    </FieldCard>
+  )
+  const card = container!.querySelector('[data-field="query"]')!
+  const input = card.querySelector('input')!
+  expect(card.textContent).toContain('query')
+  expect(card.textContent).toContain('string')
+  expect(card.querySelector('[role="button"], button, [aria-expanded]')).toBeNull()
+  act(() => card.querySelector<HTMLElement>('[data-overflow-text]')!.click())
+  expect(card.querySelector('input')).toBe(input)
+  expect(input.value).toBe('Search terms')
+})

packages/emcn/src/components/collapsible-card/collapsible-card.tsx

@@ -4,6 +4,7 @@ import type * as React from 'react'
 import { cn } from '../../lib/cn'
 import { handleKeyboardActivation } from '../../lib/keyboard'
 import { Expandable, ExpandableContent } from '../expandable/expandable'
+import { FieldCardContent, FieldCardFrame } from '../field-card/field-card'
 import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
 export interface CollapsibleCardProps
@@ -28,6 +29,7 @@ export interface CollapsibleCardProps
  * A collapsible field card: a `--surface-4` header (click / keyboard to toggle)
  * with a fade-clipped title + optional badge, over a `--surface-2` body. Shared by
  * the workflow input-mapping rows and the enrichment output-column config.
+ * Its frame and body are also used by the always-open FieldCard.
  *
  * @example
  * <CollapsibleCard title='Condition' collapsed={collapsed} onToggleCollapse={toggle}
@@ -47,74 +49,62 @@ export function CollapsibleCard({
   className,
   ...props
 }: CollapsibleCardProps) {
-  const content = (
-    <div
-      {...contentProps}
-      className={cn(
-        'flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5',
-        contentProps?.className
-      )}
-    >
-      {children}
-    </div>
-  )
+  const content = <FieldCardContent {...contentProps}>{children}</FieldCardContent>
   return (
-    <div
+    <FieldCardFrame
       {...props}
-      className={cn(
-        'rounded-sm border border-[var(--border-1)]',
-        collapsed ? 'overflow-hidden' : 'overflow-visible',
-        className
-      )}
-    >
-      <div className='flex items-center justify-between rounded-t-[4px] bg-[var(--surface-4)]'>
-        <div
-          role='button'
-          tabIndex={0}
-          aria-expanded={!collapsed}
-          aria-controls={contentProps?.id}
-          className={cn(
-            'flex min-w-0 flex-1 cursor-pointer items-center gap-2 px-2.5 py-[5px]',
-            actions && 'pr-2'
-          )}
-          onClick={onToggleCollapse}
-          onKeyDown={(event) => {
-            if (event.target !== event.currentTarget) return
-            handleKeyboardActivation(event, onToggleCollapse)
-          }}
-        >
-          {typeof title === 'string' || typeof title === 'number' ? (
-            <OverflowText
-              label={String(title)}
-              className='flex-1 text-[var(--text-tertiary)] text-sm'
-              focusTarget='nearest-interactive'
-            />
-          ) : (
-            <span
-              className={cn(overflowTextClipClass, 'flex-1 text-[var(--text-tertiary)] text-sm')}
-            >
-              {title}
-            </span>
-          )}
-          {badge}
-        </div>
-        {actions && (
+      className={cn(collapsed ? 'overflow-hidden' : 'overflow-visible', className)}
+      header={
+        <>
           <div
-            role='presentation'
-            className='flex shrink-0 items-center gap-2 py-[5px] pr-2.5'
-            onClick={(event) => event.stopPropagation()}
+            role='button'
+            tabIndex={0}
+            aria-expanded={!collapsed}
+            aria-controls={contentProps?.id}
+            className={cn(
+              'flex min-w-0 flex-1 cursor-pointer items-center gap-2 px-2.5 py-[5px]',
+              actions && 'pr-2'
+            )}
+            onClick={onToggleCollapse}
+            onKeyDown={(event) => {
+              if (event.target !== event.currentTarget) return
+              handleKeyboardActivation(event, onToggleCollapse)
+            }}
           >
-            {actions}
+            {typeof title === 'string' || typeof title === 'number' ? (
+              <OverflowText
+                label={String(title)}
+                className='flex-1 text-[var(--text-tertiary)] text-sm'
+                focusTarget='nearest-interactive'
+              />
+            ) : (
+              <span
+                className={cn(overflowTextClipClass, 'flex-1 text-[var(--text-tertiary)] text-sm')}
+              >
+                {title}
+              </span>
+            )}
+            {badge}
           </div>
-        )}
-      </div>
+          {actions && (
+            <div
+              role='presentation'
+              className='flex shrink-0 items-center gap-2 py-[5px] pr-2.5'
+              onClick={(event) => event.stopPropagation()}
+            >
+              {actions}
+            </div>
+          )}
+        </>
+      }
+    >
       {animated ? (
         <Expandable expanded={!collapsed}>
           <ExpandableContent>{content}</ExpandableContent>
         </Expandable>
       ) : (
         !collapsed && content
       )}
-    </div>
+    </FieldCardFrame>
   )
 }