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 3 commits into
base: codex/control-fix-remaining-field-cards
Choose a base branch
from
+397 −344
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
3 commits
Select commit Hold shift + click to select a range
b8c83e8
refactor(ui): share static API and MCP parameter cards
Sep 22, 2026
faa970e
fix(ui): preserve specialized tiny action geometry
Sep 22, 2026
99ca82b
improvement(ui): reuse collapsible cards for MCP tools (#8170)
BillLeoutsakosvl346 Sep 23, 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
107 changes: 55 additions & 52 deletions apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
'use client'

import { useEffect, useRef, useState } from 'react'
import { Badge, Button, Chip, ChipConfirmModal, cn, Tooltip, toast } from '@sim/emcn'
import {
Badge,
Chip,
ChipConfirmModal,
CollapsibleCard,
cn,
OverflowText,
Tooltip,
toast,
} from '@sim/emcn'
import { ArrowLeft, ChevronDown, Plus } from '@sim/emcn/icons'
import { createLogger } from '@sim/logger'
import { getErrorMessage } from '@sim/utils/errors'
Expand Down Expand Up @@ -535,59 +544,53 @@ export function MCP() {
const requiredParams = tool.inputSchema?.required || []

return (
<div
<CollapsibleCard
key={tool.name}
className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-3)]'
>
<Button
type='button'
variant='ghost'
onClick={() => hasParams && toggleToolExpanded(tool.name)}
className={cn(
'flex h-auto w-full items-start justify-between rounded-none px-2.5 py-2 text-left text-sm',
hasParams && 'cursor-pointer hover-hover:bg-[var(--surface-4)]'
)}
disabled={!hasParams}
>
<div className='flex-1'>
<div className='flex h-[16px] items-center gap-1.5'>
<p className='text-[var(--text-primary)] text-sm leading-none'>
{tool.name}
</p>
{issues.length > 0 && (
<Tooltip.Root>
<Tooltip.Trigger asChild>
<div className='flex items-center'>
<Badge variant={getIssueBadgeVariant(issues[0].issue)} size='sm'>
{getIssueBadgeLabel(issues[0].issue)}
</Badge>
</div>
</Tooltip.Trigger>
<Tooltip.Content>
Update in: {affectedWorkflows.join(', ')}
</Tooltip.Content>
</Tooltip.Root>
)}
</div>
collapsed={!isExpanded || !hasParams}
disabled={!hasParams}
onToggleCollapse={() => toggleToolExpanded(tool.name)}
title={
<>
<OverflowText
label={tool.name}
className='text-[var(--text-primary)]'
focusTarget='nearest-interactive'
/>
{tool.description && (
<p className='mt-1 text-[var(--text-tertiary)] text-sm'>
{tool.description}
</p>
<span className='mt-1 block whitespace-normal'>{tool.description}</span>
)}
</div>
{hasParams && (
<ChevronDown
className={cn(
'mt-0.5 size-[14px] shrink-0 text-[var(--text-muted)] transition-transform duration-200',
isExpanded && 'rotate-180'
)}
/>
)}
</Button>

</>
}
badge={
<>
{issues.length > 0 && (
<Tooltip.Root>
<Tooltip.Trigger asChild>
<span className='flex shrink-0 items-center'>
<Badge variant={getIssueBadgeVariant(issues[0].issue)} size='sm'>
{getIssueBadgeLabel(issues[0].issue)}
</Badge>
</span>
</Tooltip.Trigger>
<Tooltip.Content>
Update in: {affectedWorkflows.join(', ')}
</Tooltip.Content>
</Tooltip.Root>
)}
{hasParams && (
<ChevronDown
className={cn(
'size-[14px] shrink-0 text-[var(--text-muted)] transition-transform duration-200',
isExpanded && 'rotate-180'
)}
/>
)}
</>
}
>
{isExpanded && hasParams && (
<div className='border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 py-2'>
<p className='mb-1.5 text-[var(--text-muted)] text-caption uppercase tracking-wide'>
<>
<p className='text-[var(--text-muted)] text-caption uppercase tracking-wide'>
Parameters
</p>
<div className='flex flex-col gap-1.5'>
Expand Down Expand Up @@ -631,9 +634,9 @@ export function MCP() {
}
)}
</div>
</div>
</>
)}
</div>
</CollapsibleCard>
)
})}
</div>
Expand Down
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
6 changes: 3 additions & 3 deletions apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
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 @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
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
Loading
Loading