Skip to content

feat: redesign workflow canvas UI w improved UX #3939

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
adithyaakrishna wants to merge 6 commits into
base: staging
Choose a base branch
from
Open

feat: redesign workflow canvas UI w improved UX #3939

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
90971fb
chore: fix conflicts
adithyaakrishna Apr 4, 2026
a1ee666
chore: fix conflicts
adithyaakrishna Apr 4, 2026
73a7dcf
chore: fix conflicts
adithyaakrishna Apr 4, 2026
476e6aa
chore: remove unnecessary changes
adithyaakrishna Apr 4, 2026
3db31a4
chore: fix review changes
adithyaakrishna Apr 4, 2026
e27b506
chore: fix review changes
adithyaakrishna Apr 4, 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
Prev Previous commit
chore: fix review changes
  • Loading branch information
@adithyaakrishna
adithyaakrishna committed Apr 4, 2026
commit e27b5068cdf30287db56a5c238bf7f7e8974601c
14 changes: 7 additions & 7 deletions apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1190,7 +1190,7 @@ export function CredentialsManager() {

<div className='flex flex-col gap-0 overflow-hidden rounded-lg border border-[var(--border)]'>
{/* Header */}
<div className='flex items-start gap-3 border-b border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
<div className='flex items-start gap-3 border-[var(--border)] border-b bg-[var(--surface-1)] px-4 py-3'>
<div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-[var(--surface-4)]'>
<Shield className='h-4 w-4 text-[var(--text-secondary)]' />
</div>
Expand Down Expand Up @@ -1221,7 +1221,7 @@ export function CredentialsManager() {
</div>
<Skeleton className='h-7 w-[80px] rounded-md' />
</div>
<div className='flex items-center gap-3 border-t border-[var(--border)] py-3'>
<div className='flex items-center gap-3 border-[var(--border)] border-t py-3'>
<Skeleton className='h-8 w-8 rounded-full' />
<div className='flex-1'>
<Skeleton className='mb-1 h-3.5 w-[100px]' />
Expand All @@ -1236,7 +1236,7 @@ export function CredentialsManager() {
<div
key={member.id}
className={`flex items-center gap-3 px-4 py-2.5 ${
index > 0 ? 'border-t border-[var(--border)]' : ''
index > 0 ? 'border-[var(--border)] border-t' : ''
}`}
>
<Avatar className='h-8 w-8 flex-shrink-0'>
Expand Down Expand Up @@ -1299,10 +1299,10 @@ export function CredentialsManager() {

{/* Add member row */}
{isSelectedAdmin && (
<div className='flex flex-col gap-2 border-t border-[var(--border)] bg-[var(--surface-1)] px-4 py-3'>
<div className='flex flex-col gap-2 border-[var(--border)] border-t bg-[var(--surface-1)] px-4 py-3'>
<div className='flex items-center gap-1.5'>
<UserPlus className='h-3.5 w-3.5 text-[var(--text-tertiary)]' />
<p className='text-[var(--text-secondary)] text-caption font-medium'>
<p className='font-medium text-[var(--text-secondary)] text-caption'>
Grant access to a workspace member
</p>
</div>
Expand Down Expand Up @@ -1348,7 +1348,7 @@ export function CredentialsManager() {
{upsertMember.isPending ? 'Adding...' : 'Add'}
</Button>
</div>
<p className='flex items-start gap-1 text-[var(--text-muted)] text-[11px]'>
<p className='flex items-start gap-1 text-[11px] text-[var(--text-muted)]'>
<Info className='mt-0.5 h-3 w-3 flex-shrink-0' />
Only members of this workspace appear here. To add someone new, invite
them to the workspace first.
Expand All @@ -1358,7 +1358,7 @@ export function CredentialsManager() {

{/* Non-admin notice */}
{!isSelectedAdmin && (
<div className='flex items-center gap-2 border-t border-[var(--border)] bg-[var(--surface-1)] px-4 py-2.5'>
<div className='flex items-center gap-2 border-[var(--border)] border-t bg-[var(--surface-1)] px-4 py-2.5'>
<Info className='h-3.5 w-3.5 flex-shrink-0 text-[var(--text-muted)]' />
<p className='text-[var(--text-muted)] text-caption'>
Only admins of this secret can manage access control.
Expand Down
6 changes: 3 additions & 3 deletions ...sim/app/workspace/[workspaceId]/w/[workflowId]/components/copilot-input/copilot-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { usePanelStore } from '@/stores/panel'

const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
const SEND_BUTTON_ACTIVE =
'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
const SEND_BUTTON_DISABLED = 'bg-[#808080] dark:bg-[#808080]'
'bg-[var(--surface-inverted)] hover-hover:bg-[var(--surface-inverted-hover)]'
const SEND_BUTTON_DISABLED = 'bg-[var(--surface-6)]'

export const CopilotInput = memo(function CopilotInput() {
const isPanelOpen = usePanelStore((s) => s.isPanelOpen)
Expand Down Expand Up @@ -81,7 +81,7 @@ export const CopilotInput = memo(function CopilotInput() {
aria-label='Send message'
>
<ArrowUp
className='block h-[16px] w-[16px] text-white dark:text-black'
className='block h-[16px] w-[16px] text-[var(--text-inverse)]'
strokeWidth={2.25}
/>
</Button>
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
<Tooltip.Root>
<Tooltip.Trigger asChild>
<button
className='absolute top-1/2 left-0 z-20 flex h-[28px] w-[12px] -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-1)] transition-colors hover-hover:bg-[var(--surface-5)]'
className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 z-20 flex h-[28px] w-[12px] cursor-pointer items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-1)] transition-colors hover-hover:bg-[var(--surface-5)]'
onClick={() => setIsPanelOpen(true)}
aria-label='Expand panel'
>
Expand Down Expand Up @@ -519,7 +519,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
<Tooltip.Root>
<Tooltip.Trigger asChild>
<button
className='pointer-events-auto absolute top-1/2 left-0 flex h-[28px] w-[12px] -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-1)] transition-colors hover-hover:bg-[var(--surface-5)]'
className='-translate-x-1/2 -translate-y-1/2 pointer-events-auto absolute top-1/2 left-0 flex h-[28px] w-[12px] cursor-pointer items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-1)] transition-colors hover-hover:bg-[var(--surface-5)]'
onClick={() => setIsPanelOpen(false)}
aria-label='Collapse panel'
>
Expand Down
12 changes: 6 additions & 6 deletions apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ const BlockRow = memo(function BlockRow({
</div>
<div className='flex flex-shrink-0 items-center gap-3'>
{entry.startedAt && (
<span className='font-mono text-[10px] leading-[30px] text-[var(--text-muted)]'>
<span className='font-mono text-[10px] text-[var(--text-muted)] leading-[30px]'>
{new Date(entry.startedAt).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
Expand Down Expand Up @@ -1387,7 +1387,7 @@ export const Terminal = memo(function Terminal({ mode = 'standalone' }: Terminal
>
{/* Panel mode: compact filter bar */}
{isPanelMode && !selectedEntry && allWorkflowEntries.length > 0 && (
<div className='flex h-[30px] flex-shrink-0 items-center gap-1.5 border-b border-[var(--border)] px-3'>
<div className='flex h-[30px] flex-shrink-0 items-center gap-1.5 border-[var(--border)] border-b px-3'>
<Button
className='h-[22px] rounded-[4px] px-1.5 text-[11px]'
variant={filters.statuses.size === 0 ? 'active' : 'ghost'}
Expand Down Expand Up @@ -1630,7 +1630,7 @@ export const Terminal = memo(function Terminal({ mode = 'standalone' }: Terminal
{/* Bottom output panel — panel mode: collapsible, resizable */}
{isPanelMode && (
<div
className='flex flex-shrink-0 flex-col overflow-hidden border-t border-[var(--border)]'
className='flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t'
style={{ height: panelOutputHeight > 0 ? `${panelOutputHeight}px` : '0px' }}
>
{/* Drag handle */}
Expand Down Expand Up @@ -1664,7 +1664,7 @@ export const Terminal = memo(function Terminal({ mode = 'standalone' }: Terminal
{selectedEntry ? (
<div className='flex min-h-0 flex-1 flex-col'>
{/* Output/Input tab header */}
<div className='flex h-[30px] flex-shrink-0 items-center gap-0.5 border-b border-[var(--border)] px-2.5'>
<div className='flex h-[30px] flex-shrink-0 items-center gap-0.5 border-[var(--border)] border-b px-2.5'>
<Button
variant='ghost'
className={clsx(
Expand All @@ -1688,13 +1688,13 @@ export const Terminal = memo(function Terminal({ mode = 'standalone' }: Terminal
</Button>
)}
<div className='flex-1' />
<span className='truncate text-[var(--text-muted)] text-[11px]'>
<span className='truncate text-[11px] text-[var(--text-muted)]'>
{selectedEntry.blockName}
</span>
</div>
{/* Scrollable content */}
<div className='min-h-0 flex-1 overflow-auto'>
<pre className='whitespace-pre-wrap p-3 font-mono text-[12px] leading-relaxed text-[var(--text-body)]'>
<pre className='whitespace-pre-wrap p-3 font-mono text-[12px] text-[var(--text-body)] leading-relaxed'>
{outputData
? typeof outputData === 'string'
? outputData
Expand Down
7 changes: 0 additions & 7 deletions ...p/workspace/[workspaceId]/w/[workflowId]/components/workflow-actions/workflow-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,6 @@ export const WorkflowActions = memo(function WorkflowActions({
onSuccess: () => setIsDeleteModalOpen(false),
})

const { isOpen: isVariablesOpen, setIsOpen: setVariablesOpen } = useVariablesStore(
useShallow((state) => ({
isOpen: state.isOpen,
setIsOpen: state.setIsOpen,
}))
)

const handleAutoLayout = useCallback(async () => {
if (isExecuting || !userPermissions.canEdit || isAutoLayouting) return
setIsAutoLayouting(true)
Expand Down
12 changes: 6 additions & 6 deletions ...p/workspace/[workspaceId]/w/[workflowId]/components/workflow-toolbar/workflow-history.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,8 +261,8 @@ export const WorkflowHistory = memo(function WorkflowHistory({
}}
>
{/* Header */}
<div className='flex items-center justify-between px-2 pb-1 pt-0.5'>
<span className='text-[12px] font-medium text-[var(--text-primary)]'>
<div className='flex items-center justify-between px-2 pt-0.5 pb-1'>
<span className='font-medium text-[12px] text-[var(--text-primary)]'>
Change History
</span>
<Button
Expand Down Expand Up @@ -322,7 +322,7 @@ export const WorkflowHistory = memo(function WorkflowHistory({
{/* Recent Changes Section */}
{hasSnapshots && (
<>
{hasVersions && <div className='mx-2 my-1 border-t border-[var(--border)]' />}
{hasVersions && <div className='mx-2 my-1 border-[var(--border)] border-t' />}
<PopoverSection>Recent Changes</PopoverSection>
{snapshots.map((snapshot) => (
<PopoverItem key={snapshot.id} onClick={() => handleRestore(snapshot)}>
Expand All @@ -333,7 +333,7 @@ export const WorkflowHistory = memo(function WorkflowHistory({
</span>
</PopoverItem>
))}
<div className='border-t border-[var(--border)] pt-1'>
<div className='border-[var(--border)] border-t pt-1'>
<PopoverItem onClick={handleClear}>
<Trash2 className='h-3 w-3 flex-shrink-0 text-[var(--text-muted)]' />
<span className='text-[12px]'>Clear local history</span>
Expand Down Expand Up @@ -489,7 +489,7 @@ function VersionRow({
}}
onClick={(e) => e.stopPropagation()}
onBlur={() => onSaveRename(v.version)}
className='w-full border-0 bg-transparent p-0 text-[12px] font-medium leading-4 text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0'
className='w-full border-0 bg-transparent p-0 font-medium text-[12px] text-[var(--text-primary)] leading-4 outline-none focus:outline-none focus:ring-0'
maxLength={100}
disabled={renamePending}
autoComplete='off'
Expand All @@ -498,7 +498,7 @@ function VersionRow({
spellCheck='false'
/>
) : (
<span className='flex items-center gap-1 truncate text-[12px] font-medium text-[var(--text-primary)]'>
<span className='flex items-center gap-1 truncate font-medium text-[12px] text-[var(--text-primary)]'>
<span className='truncate'>{v.name || `v${v.version}`}</span>
{v.isActive && <span className='text-[10px] text-[var(--text-tertiary)]'>(live)</span>}
</span>
Expand Down
2 changes: 1 addition & 1 deletion ...p/workspace/[workspaceId]/w/[workflowId]/components/workflow-toolbar/workflow-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const WorkflowToolbar = memo(function WorkflowToolbar({

const canRun = userPermissions.canRead
const isLoadingPermissions = userPermissions.isLoading
const isButtonDisabled = !isExecuting && (!canRun && !isLoadingPermissions)
const isButtonDisabled = !isExecuting && !canRun && !isLoadingPermissions

return (
<div className='absolute top-4 right-4 z-10 flex h-[36px] items-center gap-1 rounded-lg border border-[var(--border)] bg-[var(--surface-1)] p-1'>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4060,7 +4060,7 @@ const WorkflowContent = React.memo(
<MiniMap
pannable
zoomable
className='!absolute !bottom-[60px] !left-[16px] !right-auto overflow-hidden rounded-md border border-[var(--border)] !bg-[var(--surface-2)] shadow-subtle'
className='!absolute !bottom-[60px] !left-[16px] !right-auto !bg-[var(--surface-2)] overflow-hidden rounded-md border border-[var(--border)] shadow-subtle'
style={{ width: 120, height: 72 }}
maskColor='color-mix(in srgb, var(--bg) 60%, transparent)'
nodeColor='var(--surface-6)'
Expand Down