Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BillLeoutsakosvl346 wants to merge 4 commits into
base: codex/control-fix-remaining-field-cards
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
075e236
refactor(ui): share static API and MCP parameter cards
Sep 19, 2026
85d3acd
improvement(ui): standardize card header icon actions (#8033)
BillLeoutsakosvl346 Sep 19, 2026
c1c0a5e
improvement(ui): share field mode toggles (#8046)
BillLeoutsakosvl346 Sep 20, 2026
de83615
chore(ui): resolve parameter card stack imports and sync parent
Sep 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 21 additions & 27 deletions ...workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
ChipSelect,
Code,
type ComboboxOption,
FieldCard,
Label,
useCopyToClipboard,
} from '@sim/emcn'
Expand Down Expand Up @@ -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>
) : (
Expand Down
38 changes: 16 additions & 22 deletions ...omponents/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
ChipModalField,
ChipModalFooter,
ChipModalHeader,
FieldCard,
Label,
} from '@sim/emcn'
import { getErrorMessage } from '@sim/utils/errors'
Expand Down Expand Up @@ -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>
Expand Down
54 changes: 24 additions & 30 deletions ...flowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
ChipInput,
ChipModalField,
type ComboboxOption,
FieldCard,
Skeleton,
} from '@sim/emcn'
import { createLogger } from '@sim/logger'
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions ...nel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -969,7 +969,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>
Expand All @@ -989,7 +989,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>
Expand All @@ -1011,7 +1011,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>
Expand All @@ -1028,7 +1028,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>
Expand Down
9 changes: 2 additions & 7 deletions ...mponents/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ...ponents/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
37 changes: 37 additions & 0 deletions ...components/editor/components/sub-block/components/field-mode-toggle/field-mode-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
4 changes: 2 additions & 2 deletions ...ents/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ...ts/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion ...components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,8 @@ export function SelectorCombobox({
<Button
type='button'
variant='ghost'
className='h-auto shrink-0 p-0'
size='icon'
className='shrink-0'
disabled={disabled || readOnly}
aria-label={`Remove ${optionMap.get(id)?.label ?? id}`}
onClick={() => handleMultiChange(selectedValues.filter((v) => v !== id))}
Expand Down
4 changes: 2 additions & 2 deletions ...mponents/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,15 @@ export function SortRuleRow({

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 Sort</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 Sort</span>
Expand Down
Loading
Loading