diff --git a/apps/realtime/src/database/operations.ts b/apps/realtime/src/database/operations.ts
index 697ba4099c0..0086975edad 100644
--- a/apps/realtime/src/database/operations.ts
+++ b/apps/realtime/src/database/operations.ts
@@ -734,6 +734,33 @@ async function handleBlockOperationTx(
       break
     }
 
+    case BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED: {
+      if (!payload.id || payload.errorEnabled === undefined) {
+        throw new Error('Missing required fields for update error enabled operation')
+      }
+
+      const updateResult = await tx
+        .update(workflowBlocks)
+        .set({
+          data: sql`jsonb_set(
+            coalesce(${workflowBlocks.data}, '{}'::jsonb),
+            '{errorEnabled}',
+            ${JSON.stringify(payload.errorEnabled)}::jsonb,
+            true
+          )`,
+          updatedAt: new Date(),
+        })
+        .where(and(eq(workflowBlocks.id, payload.id), eq(workflowBlocks.workflowId, workflowId)))
+        .returning({ id: workflowBlocks.id })
+
+      if (updateResult.length === 0) {
+        throw new Error(`Block ${payload.id} not found in workflow ${workflowId}`)
+      }
+
+      logger.debug(`Updated block error output: ${payload.id} -> ${payload.errorEnabled}`)
+      break
+    }
+
     case BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE: {
       if (!payload.id || !payload.canonicalId || !payload.canonicalMode) {
         throw new Error('Missing required fields for update canonical mode operation')
diff --git a/apps/realtime/src/middleware/permissions.ts b/apps/realtime/src/middleware/permissions.ts
index 4f4a4296c16..88679cb5622 100644
--- a/apps/realtime/src/middleware/permissions.ts
+++ b/apps/realtime/src/middleware/permissions.ts
@@ -27,6 +27,7 @@ const WRITE_OPERATIONS: string[] = [
   BLOCK_OPERATIONS.TOGGLE_ENABLED,
   BLOCK_OPERATIONS.UPDATE_PARENT,
   BLOCK_OPERATIONS.UPDATE_ADVANCED_MODE,
+  BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED,
   BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE,
   BLOCK_OPERATIONS.REPLACE_CANONICAL_MODES,
   BLOCK_OPERATIONS.TOGGLE_HANDLES,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index 08bde247dbc..97307ce5c4b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -1,6 +1,6 @@
 import { memo, useCallback } from 'react'
 import { Button, cn, Duplicate, PlayOutline, Tooltip, Trash2, toast } from '@sim/emcn'
-import { ArrowLeftRight, ArrowUpDown, Circle, CircleOff, Lock, LogOut, Unlock } from 'lucide-react'
+import { Circle, CircleOff, Lock, LogOut, Unlock } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import { isInputDefinitionTrigger } from '@/lib/workflows/triggers/input-definition-triggers'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -14,14 +14,16 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 
 const ACTION_BUTTON_STYLES = [
-  'size-[23px] rounded-lg p-0',
-  'border border-[var(--border)] bg-[var(--surface-5)]',
-  'text-[var(--text-secondary)]',
-  'hover-hover:border-transparent hover-hover:bg-[var(--brand-secondary)] hover-hover:!text-[var(--text-inverse)]',
-  'dark:border-transparent dark:bg-[var(--surface-7)] dark:hover-hover:bg-[var(--brand-secondary)]',
+  'size-[24px] rounded-md p-0',
+  'border-none bg-transparent text-[var(--text-icon)]',
+  'hover-hover:bg-[var(--surface-5)] hover-hover:!text-[var(--text-primary)]',
+  'dark:hover-hover:bg-[var(--surface-4)]',
+  'transition-[background-color,color,opacity,transform] duration-150 active:scale-[0.96]',
 ].join(' ')
 
-const ICON_SIZE = 'size-[11px]'
+const ICON_SIZE = 'size-[14px]'
+
+type ActionId = 'run' | 'enabled' | 'lock' | 'duplicate' | 'remove' | 'delete'
 
 /**
  * Props for the ActionBar component
@@ -33,6 +35,8 @@ interface ActionBarProps {
   blockType: string
   /** Whether the action bar is disabled */
   disabled?: boolean
+  /** Places the actions inside the workflow card's border swell. */
+  variant?: 'floating' | 'swell'
 }
 
 /**
@@ -42,12 +46,16 @@ interface ActionBarProps {
  * @component
  */
 export const ActionBar = memo(
-  function ActionBar({ blockId, blockType, disabled = false }: ActionBarProps) {
+  function ActionBar({
+    blockId,
+    blockType,
+    disabled = false,
+    variant = 'floating',
+  }: ActionBarProps) {
     const {
       collaborativeBatchAddBlocks,
       collaborativeBatchRemoveBlocks,
       collaborativeBatchToggleBlockEnabled,
-      collaborativeBatchToggleBlockHandles,
       collaborativeBatchToggleLocked,
     } = useCollaborativeWorkflow()
     const { setPendingSelection } = useWorkflowRegistry()
@@ -78,30 +86,22 @@ export const ActionBar = memo(
       )
     }, [blockId, collaborativeBatchAddBlocks, setPendingSelection])
 
-    const {
-      isEnabled,
-      horizontalHandles,
-      parentId,
-      parentType,
-      isLocked,
-      isParentLocked,
-      isParentDisabled,
-    } = useWorkflowStore(
-      useShallow((state) => {
-        const block = state.blocks[blockId]
-        const parentId = block?.data?.parentId
-        const parentBlock = parentId ? state.blocks[parentId] : undefined
-        return {
-          isEnabled: block?.enabled ?? true,
-          horizontalHandles: block?.horizontalHandles ?? false,
-          parentId,
-          parentType: parentBlock?.type,
-          isLocked: block?.locked ?? false,
-          isParentLocked: parentBlock?.locked ?? false,
-          isParentDisabled: parentBlock ? !parentBlock.enabled : false,
-        }
-      })
-    )
+    const { isEnabled, parentId, parentType, isLocked, isParentLocked, isParentDisabled } =
+      useWorkflowStore(
+        useShallow((state) => {
+          const block = state.blocks[blockId]
+          const parentId = block?.data?.parentId
+          const parentBlock = parentId ? state.blocks[parentId] : undefined
+          return {
+            isEnabled: block?.enabled ?? true,
+            parentId,
+            parentType: parentBlock?.type,
+            isLocked: block?.locked ?? false,
+            isParentLocked: parentBlock?.locked ?? false,
+            isParentDisabled: parentBlock ? !parentBlock.enabled : false,
+          }
+        })
+      )
 
     const { activeWorkflowId } = useWorkflowRegistry()
     const isExecuting = useIsCurrentWorkflowExecuting()
@@ -112,7 +112,6 @@ export const ActionBar = memo(
     const isStartBlock = isInputDefinitionTrigger(blockType)
     const isResponseBlock = blockType === 'response'
     const isNoteBlock = blockType === 'note'
-    const isSubflowBlock = blockType === 'loop' || blockType === 'parallel'
     const isInsideSubflow = parentId && (parentType === 'loop' || parentType === 'parallel')
 
     const snapshot = activeWorkflowId ? getLastExecutionSnapshot(activeWorkflowId) : null
@@ -132,6 +131,61 @@ export const ActionBar = memo(
       isTriggerBlock || (snapshot && incomingEdges.every((edge) => isSourceSatisfied(edge.source)))
     const canRunFromBlock =
       dependenciesSatisfied && !isNoteBlock && !isInsideSubflow && !isExecuting
+    const isSwell = variant === 'swell'
+    const firstActionId: ActionId =
+      !isNoteBlock && !isInsideSubflow
+        ? 'run'
+        : !isNoteBlock
+          ? 'enabled'
+          : userPermissions.canAdmin
+            ? 'lock'
+            : !isStartBlock && !isResponseBlock
+              ? 'duplicate'
+              : 'delete'
+    /*
+     * Icon treatment follows the swell's own fill, published by the card view
+     * as `data-node-selected`. Keying off React Flow's raw `selected` would
+     * diverge: an executing block keeps the success ring, so the swell stays
+     * gray (or retracts) while `selected` is still true.
+     */
+    const actionButtonStyles = cn(
+      ACTION_BUTTON_STYLES,
+      isSwell && [
+        'group-data-[node-selected]:text-[var(--surface-2)]',
+        'hover-hover:group-data-[node-selected]:bg-[var(--surface-2)]',
+        'hover-hover:group-data-[node-selected]:!text-[var(--text-primary)]',
+      ]
+    )
+    /*
+     * End-button silhouettes: a straight diagonal edge running parallel to
+     * the gray swell's taper above it (slope 20/24 ≈ 40° from vertical — the
+     * falloff curve's central gradient), blended into the top edge with a
+     * generous r8 arc and meeting the bottom edge with a pointier r2.5 arc;
+     * the outer corners keep a modest r4. The right (delete) shape is the
+     * exact mirror of the left (first action) shape. Width is 40px — outer
+     * diagonal pushed out so the glyph has room before the cut; inner side
+     * stays tight against neighboring actions. The row is right-[24px] to
+     * match the swell anchor inset (right-aligned on the card). Glyphs shift
+     * away from the outer cut (+6 / -6). Play gets an extra +2px because the
+     * triangle’s optical center sits left of its viewBox center.
+     */
+    const getActionButtonStyles = (actionId: ActionId) =>
+      cn(
+        actionButtonStyles,
+        isSwell &&
+          actionId === firstActionId &&
+          "!w-[40px] [clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24L36_24A4_4_0_0_0_40_20L40_4A4_4_0_0_0_36_0Z')] [&_svg]:translate-y-px",
+        isSwell &&
+          actionId === firstActionId &&
+          (actionId === 'run' ? '[&_svg]:translate-x-[8px]' : '[&_svg]:translate-x-[6px]'),
+        isSwell &&
+          actionId === 'delete' &&
+          "!w-[40px] [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] [&_svg]:-translate-x-[6px] [&_svg]:translate-y-px",
+        /* `!` is required: these buttons are also `disabled` when locked, and
+           the emcn Button base carries `disabled:opacity-70`, which outranks a
+           plain `opacity-35` on specificity. */
+        actionId !== 'lock' && isLocked && '!opacity-35'
+      )
 
     const handleRunFromBlockClick = useCallback(() => {
       if (!activeWorkflowId || !canRunFromBlock) return
@@ -153,205 +207,210 @@ export const ActionBar = memo(
 
     return (
       <div
+        data-workflow-action-bar-swell={isSwell ? '' : undefined}
         className={cn(
-          '-top-[46px] pointer-events-auto absolute right-0',
-          'flex flex-row items-center',
-          'opacity-0 transition-opacity duration-200 group-hover:opacity-100',
-          'gap-[5px] rounded-[10px] p-[5px]',
-          'border border-[var(--border)] bg-[var(--surface-2)]',
-          'dark:border-transparent dark:bg-[var(--surface-4)]'
+          'absolute rounded-lg',
+          isSwell
+            ? [
+                // Above RF handles (`z-30`) so icons stay clickable when a top edge crosses.
+                '-top-[28px] right-[24px] z-[40] h-[28px] w-fit overflow-hidden px-[0.2rem] py-0.5',
+                'pointer-events-auto',
+              ]
+            : [
+                '-top-[40px] pointer-events-auto right-0 flex flex-row items-center gap-[2px] p-[3px]',
+                'border-[1.5px] border-[var(--border-1)] bg-[var(--surface-2)]',
+                'opacity-0 transition-opacity duration-[150ms] group-hover:opacity-100',
+              ]
         )}
       >
-        {!isNoteBlock && !isInsideSubflow && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <span className='inline-flex'>
-                <Button
-                  variant='ghost'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    if (canRunFromBlock && !disabled) {
-                      handleRunFromBlockClick()
-                    }
-                  }}
-                  className={ACTION_BUTTON_STYLES}
-                  disabled={disabled || !canRunFromBlock}
-                >
-                  <PlayOutline className={ICON_SIZE} />
-                </Button>
-              </span>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {(() => {
-                if (disabled) return getTooltipMessage('Run from block')
-                if (isExecuting) return 'Running...'
-                if (!dependenciesSatisfied) return 'Run previous blocks first'
-                return 'Run from block'
-              })()}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+        <div className={cn(isSwell && 'h-full')}>
+          <div
+            className={cn(
+              'flex flex-row items-center gap-[2px]',
+              isSwell && [
+                'pointer-events-none opacity-0 transition-opacity duration-[30ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+                'group-data-[action-menu-ready]:pointer-events-auto group-data-[action-menu-ready]:opacity-100 group-data-[action-menu-ready]:duration-100',
+              ]
+            )}
+          >
+            {!isNoteBlock && !isInsideSubflow && (
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>
+                    <Button
+                      variant='ghost'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (canRunFromBlock && !disabled) {
+                          handleRunFromBlockClick()
+                        }
+                      }}
+                      className={getActionButtonStyles('run')}
+                      disabled={disabled || !canRunFromBlock || isLocked || isParentLocked}
+                    >
+                      <PlayOutline className={ICON_SIZE} />
+                    </Button>
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>
+                  {(() => {
+                    if (isLocked || isParentLocked) return 'Block is locked'
+                    if (disabled) return getTooltipMessage('Run from block')
+                    if (isExecuting) return 'Running...'
+                    if (!dependenciesSatisfied) return 'Run previous blocks first'
+                    return 'Run from block'
+                  })()}
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
 
-        {!isNoteBlock && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  // Can't enable if parent is disabled (must enable parent first)
-                  const cantEnable = !isEnabled && isParentDisabled
-                  if (!disabled && !isLocked && !isParentLocked && !cantEnable) {
-                    collaborativeBatchToggleBlockEnabled([blockId])
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={
-                  disabled || isLocked || isParentLocked || (!isEnabled && isParentDisabled)
-                }
-              >
-                {isEnabled ? <Circle className={ICON_SIZE} /> : <CircleOff className={ICON_SIZE} />}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked || isParentLocked
-                ? 'Block is locked'
-                : !isEnabled && isParentDisabled
-                  ? 'Parent container is disabled'
-                  : getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+            {!isNoteBlock && (
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>
+                    <Button
+                      variant='ghost'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        const cantEnable = !isEnabled && isParentDisabled
+                        if (!disabled && !isLocked && !isParentLocked && !cantEnable) {
+                          collaborativeBatchToggleBlockEnabled([blockId])
+                        }
+                      }}
+                      className={getActionButtonStyles('enabled')}
+                      disabled={
+                        disabled || isLocked || isParentLocked || (!isEnabled && isParentDisabled)
+                      }
+                    >
+                      {isEnabled ? (
+                        <Circle className={ICON_SIZE} />
+                      ) : (
+                        <CircleOff className={ICON_SIZE} />
+                      )}
+                    </Button>
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>
+                  {isLocked || isParentLocked
+                    ? 'Block is locked'
+                    : !isEnabled && isParentDisabled
+                      ? 'Parent container is disabled'
+                      : getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
 
-        {userPermissions.canAdmin && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  // Can't unlock a block if its parent container is locked
-                  if (!disabled && !(isLocked && isParentLocked)) {
-                    collaborativeBatchToggleLocked([blockId])
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || (isLocked && isParentLocked)}
-              >
-                {isLocked ? <Unlock className={ICON_SIZE} /> : <Lock className={ICON_SIZE} />}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked && isParentLocked
-                ? 'Parent container is locked'
-                : isLocked
-                  ? 'Unlock Block'
-                  : 'Lock Block'}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+            {userPermissions.canAdmin && (
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>
+                    <Button
+                      variant='ghost'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (!disabled && !(isLocked && isParentLocked)) {
+                          collaborativeBatchToggleLocked([blockId])
+                        }
+                      }}
+                      className={getActionButtonStyles('lock')}
+                      disabled={disabled || (isLocked && isParentLocked)}
+                    >
+                      {isLocked ? <Unlock className={ICON_SIZE} /> : <Lock className={ICON_SIZE} />}
+                    </Button>
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>
+                  {isLocked && isParentLocked
+                    ? 'Parent container is locked'
+                    : isLocked
+                      ? 'Unlock Block'
+                      : 'Lock Block'}
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
 
-        {!isStartBlock && !isResponseBlock && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!disabled && !isLocked && !isParentLocked) {
-                    handleDuplicateBlock()
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || isLocked || isParentLocked}
-              >
-                <Duplicate className={ICON_SIZE} />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked || isParentLocked
-                ? 'Block is locked'
-                : getTooltipMessage('Duplicate Block')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+            {!isStartBlock && !isResponseBlock && (
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>
+                    <Button
+                      variant='ghost'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (!disabled && !isLocked && !isParentLocked) {
+                          handleDuplicateBlock()
+                        }
+                      }}
+                      className={getActionButtonStyles('duplicate')}
+                      disabled={disabled || isLocked || isParentLocked}
+                    >
+                      <Duplicate className={ICON_SIZE} />
+                    </Button>
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>
+                  {isLocked || isParentLocked
+                    ? 'Block is locked'
+                    : getTooltipMessage('Duplicate Block')}
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
 
-        {!isNoteBlock && !isSubflowBlock && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!disabled && !isLocked && !isParentLocked) {
-                    collaborativeBatchToggleBlockHandles([blockId])
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || isLocked || isParentLocked}
-              >
-                {horizontalHandles ? (
-                  <ArrowLeftRight className={ICON_SIZE} />
-                ) : (
-                  <ArrowUpDown className={ICON_SIZE} />
-                )}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked || isParentLocked
-                ? 'Block is locked'
-                : getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
-
-        {!isStartBlock && parentId && (parentType === 'loop' || parentType === 'parallel') && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!disabled && userPermissions.canEdit && !isLocked && !isParentLocked) {
-                    window.dispatchEvent(
-                      new CustomEvent('remove-from-subflow', { detail: { blockIds: [blockId] } })
-                    )
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || !userPermissions.canEdit || isLocked || isParentLocked}
-              >
-                <LogOut className={ICON_SIZE} />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked || isParentLocked
-                ? 'Block is locked'
-                : getTooltipMessage('Remove from Subflow')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+            {!isStartBlock && parentId && (parentType === 'loop' || parentType === 'parallel') && (
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>
+                    <Button
+                      variant='ghost'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (!disabled && userPermissions.canEdit && !isLocked && !isParentLocked) {
+                          window.dispatchEvent(
+                            new CustomEvent('remove-from-subflow', {
+                              detail: { blockIds: [blockId] },
+                            })
+                          )
+                        }
+                      }}
+                      className={getActionButtonStyles('remove')}
+                      disabled={disabled || !userPermissions.canEdit || isLocked || isParentLocked}
+                    >
+                      <LogOut className={ICON_SIZE} />
+                    </Button>
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>
+                  {isLocked || isParentLocked
+                    ? 'Block is locked'
+                    : getTooltipMessage('Remove from Subflow')}
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
 
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              onClick={(e) => {
-                e.stopPropagation()
-                if (!disabled && !isLocked && !isParentLocked) {
-                  collaborativeBatchRemoveBlocks([blockId])
-                }
-              }}
-              className={ACTION_BUTTON_STYLES}
-              disabled={disabled || isLocked || isParentLocked}
-            >
-              <Trash2 className={ICON_SIZE} />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>
-            {isLocked || isParentLocked ? 'Block is locked' : getTooltipMessage('Delete Block')}
-          </Tooltip.Content>
-        </Tooltip.Root>
+            <Tooltip.Root preferAbove>
+              <Tooltip.Trigger asChild>
+                <span className='inline-flex'>
+                  <Button
+                    variant='ghost'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (!disabled && !isLocked && !isParentLocked) {
+                        collaborativeBatchRemoveBlocks([blockId])
+                      }
+                    }}
+                    className={getActionButtonStyles('delete')}
+                    disabled={disabled || isLocked || isParentLocked}
+                  >
+                    <Trash2 className={ICON_SIZE} />
+                  </Button>
+                </span>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>
+                {isLocked || isParentLocked ? 'Block is locked' : getTooltipMessage('Delete Block')}
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </div>
+        </div>
       </div>
     )
   },
@@ -367,7 +426,8 @@ export const ActionBar = memo(
     return (
       prevProps.blockId === nextProps.blockId &&
       prevProps.blockType === nextProps.blockType &&
-      prevProps.disabled === nextProps.disabled
+      prevProps.disabled === nextProps.disabled &&
+      prevProps.variant === nextProps.variant
     )
   }
 )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
index acc8e422da7..c92301ffe9b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
@@ -11,7 +11,6 @@ export interface BlockInfo {
   id: string
   type: string
   enabled: boolean
-  horizontalHandles: boolean
   parentId?: string
   parentType?: string
   locked?: boolean
@@ -34,7 +33,6 @@ export interface BlockMenuProps {
   onDuplicate: () => void
   onDelete: () => void
   onToggleEnabled: () => void
-  onToggleHandles: () => void
   onRemoveFromSubflow: () => void
   onOpenEditor: () => void
   onRename: () => void
@@ -74,7 +72,6 @@ export function BlockMenu({
   onDuplicate,
   onDelete,
   onToggleEnabled,
-  onToggleHandles,
   onRemoveFromSubflow,
   onOpenEditor,
   onRename,
@@ -207,17 +204,6 @@ export function BlockMenu({
             {hasBlockWithDisabledParent ? 'Parent is disabled' : getToggleEnabledLabel()}
           </PopoverItem>
         )}
-        {!allNoteBlocks && !isSubflow && (
-          <PopoverItem
-            disabled={disableEdit}
-            onClick={() => {
-              onToggleHandles()
-              onClose()
-            }}
-          >
-            Flip Handles
-          </PopoverItem>
-        )}
         {canRemoveFromSubflow && (
           <PopoverItem
             disabled={disableEdit}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
index 598207320da..7d5a6cb0fe0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
@@ -127,7 +127,11 @@ export function Deploy({
             <Button
               className='h-[30px] gap-1.5 px-2.5'
               variant={
-                isRegistryLoading ? 'active' : changeDetected || !isDeployed ? 'tertiary' : 'active'
+                isRegistryLoading
+                  ? 'active'
+                  : changeDetected || !isDeployed
+                    ? 'graphiteSubtle'
+                    : 'active'
               }
               onClick={onDeployClick}
               disabled={isRegistryLoading || isDisabled}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index e88f9aa79d1..cd7da73184a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn, DashedDividerLine, FieldDivider, Loader, Tooltip } from '@sim/emcn'
+import { Button, ChipTag, DashedDividerLine, FieldDivider, Loader, Tooltip } from '@sim/emcn'
+import { getWorkflowTypeAccent } from '@sim/workflow-renderer'
 import { isEqual } from 'es-toolkit'
 import {
   BookOpen,
@@ -50,7 +51,6 @@ import {
   isBlockProtected,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
-import { getTileIconColorClass } from '@/blocks/icon-color'
 import { getBlock } from '@/blocks/registry'
 import { useFolderMap } from '@/hooks/queries/folders'
 import { isWorkflowEffectivelyLocked } from '@/hooks/queries/utils/folder-tree'
@@ -96,6 +96,7 @@ export function Editor() {
   const currentWorkflow = useCurrentWorkflow()
   const currentBlock = currentBlockId ? currentWorkflow.getBlockById(currentBlockId) : null
   const blockConfig = currentBlock ? getBlock(currentBlock.type) : null
+  const typeAccent = getWorkflowTypeAccent(currentBlock?.type ?? '')
   const title = currentBlock?.name || 'Editor'
   const isBlockNameSearchHighlighted =
     activeSearchTarget?.targetKind === 'block-name' && activeSearchTarget.blockId === currentBlockId
@@ -372,18 +373,23 @@ export function Editor() {
         <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between rounded-none border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
           <div className='flex min-w-0 flex-1 items-center gap-2'>
             {(blockConfig || isSubflow) && currentBlock?.type !== 'note' && (
-              <div
-                className='flex size-[18px] items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
-                style={{ background: isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor }}
+              /*
+               * Same accent the card's type badge uses, so the panel header and
+               * the block on the canvas read as one object. Driving it off the
+               * block's legacy `bgColor` instead left the panel on the old
+               * per-integration brand colours after the cards moved to the
+               * restrained type accents.
+               */
+              <ChipTag
+                variant={typeAccent.variant}
+                tone={typeAccent.tone}
+                className='size-[18px] justify-center px-0'
               >
                 <IconComponent
                   icon={isSubflow ? subflowConfig?.icon : blockConfig?.icon}
-                  className={cn(
-                    'size-[12px]',
-                    getTileIconColorClass(isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor)
-                  )}
+                  className='size-[12px]'
                 />
-              </div>
+              </ChipTag>
             )}
             {isRenaming ? (
               <input
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 1a997731fd8..b5cd6cda32a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -742,7 +742,7 @@ export const Panel = memo(function Panel() {
               />
               <Button
                 className='h-[30px] gap-2 px-2.5'
-                variant={isExecuting ? 'active' : 'tertiary'}
+                variant={isExecuting ? 'active' : 'graphite'}
                 onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
                 disabled={!isExecuting && isButtonDisabled}
               >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types.ts
index c6c626f383d..ccdb6130b66 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types.ts
@@ -18,6 +18,10 @@ export interface WorkflowBlockProps {
   isWorkflowLocked?: boolean
   subBlockValues?: Record<string, any>
   blockState?: any
+  /** Persists and broadcasts the Error output toggle. */
+  onSetErrorOutputEnabled?: (blockId: string, enabled: boolean) => void
+  /** Persists and broadcasts edge removals caused by disabling Error output. */
+  onRemoveEdges?: (edgeIds: string[]) => void
 }
 
 /**
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
index 1d41ca55463..3030c36ec0e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
@@ -40,6 +40,8 @@ export function shouldSkipBlockRender(
     prevProps.data.config === nextProps.data.config &&
     prevProps.data.subBlockValues === nextProps.data.subBlockValues &&
     prevProps.data.blockState === nextProps.data.blockState &&
+    prevProps.data.onSetErrorOutputEnabled === nextProps.data.onSetErrorOutputEnabled &&
+    prevProps.data.onRemoveEdges === nextProps.data.onRemoveEdges &&
     prevProps.selected === nextProps.selected &&
     prevProps.dragging === nextProps.dragging
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 4794bd82128..056f54cfbef 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -1,10 +1,28 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import { type ComponentType, Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import { SubBlockRowView, WorkflowBlockView } from '@sim/workflow-renderer'
+import { isPositionedSourceHandle, isPositionedTargetHandle } from '@sim/workflow-types/workflow'
 import { isEqual } from 'es-toolkit'
+import {
+  ArrowLeftRight,
+  ArrowUpDown,
+  Braces,
+  Clock,
+  Globe,
+  Hash,
+  KeyRound,
+  ListFilter,
+  MessageSquareText,
+  Paperclip,
+  SkipForward,
+  SlidersHorizontal,
+  Sparkles,
+  ToggleLeft,
+  Wrench,
+} from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
-import { type NodeProps, useUpdateNodeInternals } from 'reactflow'
+import { type NodeProps, useStore as useReactFlowStore, useUpdateNodeInternals } from 'reactflow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createMcpToolId } from '@/lib/mcp/shared'
@@ -15,6 +33,7 @@ import { calculateWorkflowBlockDimensions } from '@/lib/workflows/blocks/determi
 import { getConditionRows, getRouterRows } from '@/lib/workflows/dynamic-handle-topology'
 import {
   getDisplayValue,
+  hasDisplayableRowValue,
   resolveDropdownLabel,
   resolveFilterFieldLabel,
   resolveSkillsLabel,
@@ -67,6 +86,7 @@ import { useWorkflowMap } from '@/hooks/queries/workflows'
 import { useReactiveConditions } from '@/hooks/use-reactive-conditions'
 import { useSelectorDisplayName } from '@/hooks/use-selector-display-name'
 import { getModelSunsetStatus } from '@/providers/models'
+import { usePanelEditorStore, usePanelStore } from '@/stores/panel'
 import { useVariablesStore } from '@/stores/variables/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
@@ -81,6 +101,245 @@ const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
 /** Stable empty map for rows that never resolve MCP tool names */
 const EMPTY_MCP_TOOL_NAMES: ReadonlyMap<string, string> = new Map()
 
+/**
+ * Selector subblock types whose hydrated value names the block's primary
+ * target (table, channel, knowledge base, …) — promoted to a chip.
+ */
+const CHIP_TARGET_SELECTOR_TYPES = new Set<string>([
+  'table-selector',
+  'knowledge-base-selector',
+  'workflow-selector',
+  'mcp-server-selector',
+  'mcp-tool-selector',
+  'channel-selector',
+  'user-selector',
+  'file-selector',
+  'sheet-selector',
+  'folder-selector',
+  'project-selector',
+  'document-selector',
+])
+
+/** Maximum fragments in the statement line; remaining candidates fall back to rows. */
+const MAX_CHIPS = 2
+
+type MetaIcon = ComponentType<{ className?: string }>
+
+/** Leading icons for compact meta rows, keyed by subblock id. */
+const SUBBLOCK_META_ICONS_BY_ID: Record<string, MetaIcon> = {
+  filterBuilder: ListFilter,
+  bulkFilterBuilder: ListFilter,
+  filter: ListFilter,
+  filterCriteria: ListFilter,
+  sortBuilder: ArrowUpDown,
+  sort: ArrowUpDown,
+  limit: Hash,
+  offset: SkipForward,
+  rowId: KeyRound,
+  url: Globe,
+  method: ArrowLeftRight,
+  body: Braces,
+  data: Braces,
+}
+
+/** Leading icons for compact meta rows, keyed by subblock type. */
+const SUBBLOCK_META_ICONS_BY_TYPE: Record<string, MetaIcon> = {
+  code: Braces,
+  'messages-input': MessageSquareText,
+  'tool-input': Wrench,
+  'skill-input': Sparkles,
+  'oauth-input': KeyRound,
+  switch: ToggleLeft,
+  'file-upload': Paperclip,
+  'time-input': Clock,
+  slider: SlidersHorizontal,
+}
+
+/** Resolves the meta-row icon for a subblock; null keeps the labeled row. */
+function getMetaIcon(subBlock: SubBlockConfig): MetaIcon | null {
+  return (
+    SUBBLOCK_META_ICONS_BY_ID[subBlock.id] ?? SUBBLOCK_META_ICONS_BY_TYPE[subBlock.type] ?? null
+  )
+}
+
+/** A value token in a summary sentence, referencing a visible subblock. */
+interface SentenceToken {
+  id: string
+}
+
+type SentenceSegment = string | SentenceToken
+
+const T = (id: string): SentenceToken => ({ id })
+
+/**
+ * Builds the natural-language summary for a block as text fragments
+ * interleaved with value tokens (rendered as inline chips). Returns null for
+ * block types or states without a template - those keep the field-row layout.
+ * `resolve` returns the first listed subblock id that is visible with a
+ * displayable value, so templates only reference real, configured fields.
+ */
+function buildSentenceSegments(
+  type: string,
+  operation: unknown,
+  resolve: (...ids: string[]) => string | null
+): SentenceSegment[] | null {
+  if (type === 'table') {
+    const table = resolve('tableSelector', 'manualTableId')
+    if (!table) return null
+    const rowId = resolve('rowId')
+    const data = resolve('data')
+    const filter = resolve('filterBuilder', 'bulkFilterBuilder', 'filter')
+    const sort = resolve('sortBuilder', 'sort')
+    const limit = resolve('limit')
+
+    switch (operation) {
+      case 'query_rows': {
+        const segments: SentenceSegment[] = ['Queries rows from', T(table)]
+        if (filter) segments.push(', where', T(filter))
+        if (sort) segments.push(', sorted by', T(sort))
+        if (limit) segments.push(', up to', T(limit), 'rows')
+        return segments
+      }
+      case 'insert_row':
+        return ['Inserts a row into', T(table), ...(data ? [', with', T(data)] : [])]
+      case 'upsert_row': {
+        const conflict = resolve('conflictColumnSelector', 'manualConflictColumn')
+        return ['Upserts a row into', T(table), ...(conflict ? [', keyed on', T(conflict)] : [])]
+      }
+      case 'batch_insert_rows': {
+        const rows = resolve('rows')
+        return ['Inserts', ...(rows ? [T(rows)] : ['rows']), 'into', T(table)]
+      }
+      case 'update_row':
+        return [
+          'Updates row',
+          ...(rowId ? [T(rowId)] : []),
+          'in',
+          T(table),
+          ...(data ? [', setting', T(data)] : []),
+        ]
+      case 'delete_row':
+        return ['Deletes row', ...(rowId ? [T(rowId)] : []), 'from', T(table)]
+      case 'get_row':
+        return ['Fetches row', ...(rowId ? [T(rowId)] : []), 'from', T(table)]
+      case 'update_rows_by_filter':
+        return [
+          'Updates rows in',
+          T(table),
+          ...(filter ? [', where', T(filter)] : []),
+          ...(data ? [', setting', T(data)] : []),
+        ]
+      case 'delete_rows_by_filter':
+        return ['Deletes rows from', T(table), ...(filter ? [', where', T(filter)] : [])]
+      case 'get_schema':
+        return ['Reads the schema of', T(table)]
+      default:
+        return null
+    }
+  }
+
+  if (type === 'agent') {
+    const model = resolve('model')
+    if (!model) return null
+    const messages = resolve('messages')
+    const tools = resolve('tools')
+    const segments: SentenceSegment[] = ['Prompts', T(model)]
+    if (messages) segments.push('with', T(messages))
+    if (tools) segments.push(', using', T(tools))
+    return segments
+  }
+
+  if (type === 'api') {
+    const url = resolve('url')
+    if (!url) return null
+    const method = resolve('method')
+    const body = resolve('body')
+    const segments: SentenceSegment[] = method
+      ? ['Sends a', T(method), 'request to', T(url)]
+      : ['Sends a request to', T(url)]
+    if (body) segments.push(', with body', T(body))
+    return segments
+  }
+
+  if (type === 'function') {
+    const code = resolve('code')
+    if (!code) return null
+    return ['Runs code', T(code)]
+  }
+
+  return null
+}
+
+/** Approximate character widths for the sentence line estimate (px). */
+const SENTENCE_TEXT_CHAR_PX = 6.3
+const SENTENCE_CHIP_CHAR_PX = 6.8
+/** Inline chip horizontal padding + surrounding gap (px). */
+const SENTENCE_CHIP_EXTRA_PX = 26
+/** Usable sentence width inside the card (px). */
+const SENTENCE_WRAP_WIDTH_PX = 224
+/** Chip text is truncated around this many characters by max-width. */
+const SENTENCE_CHIP_MAX_CHARS = 24
+/**
+ * Rendered cap on an inline value chip: `max-w-[160px]` on the chip itself
+ * (see SubBlockRowView's `inline-value`). Without this clamp a long value is
+ * estimated wider than it can ever paint, which predicts an extra wrapped
+ * line and pads the card's height.
+ */
+const SENTENCE_CHIP_MAX_PX = 160
+
+/**
+ * Estimates the wrapped line count of a summary sentence for the
+ * deterministic node height. Approximate by design - being off by a line
+ * only affects node bounds, never handle anchoring (source/target anchor to
+ * the header and the error port anchors to the bottom).
+ */
+function estimateSentenceLines(
+  segments: SentenceSegment[],
+  getValueText: (id: string) => string
+): number {
+  let widthPx = 0
+  for (const segment of segments) {
+    if (typeof segment === 'string') {
+      widthPx += segment.length * SENTENCE_TEXT_CHAR_PX + 4
+    } else {
+      widthPx += Math.min(
+        Math.min(getValueText(segment.id).length, SENTENCE_CHIP_MAX_CHARS) * SENTENCE_CHIP_CHAR_PX +
+          SENTENCE_CHIP_EXTRA_PX,
+        SENTENCE_CHIP_MAX_PX
+      )
+    }
+  }
+  return Math.max(1, Math.ceil(widthPx / SENTENCE_WRAP_WIDTH_PX))
+}
+
+/**
+ * Priority for promoting a visible subblock into the chips row: the
+ * operation first, then the primary target selector, then the model.
+ * Returns null for subblocks that stay as label/value rows.
+ */
+function chipPriority(subBlock: SubBlockConfig): number | null {
+  if (subBlock.id === 'operation') return 0
+  if (CHIP_TARGET_SELECTOR_TYPES.has(subBlock.type)) return 1
+  if (subBlock.id === 'model') return 2
+  return null
+}
+
+/**
+ * Names of MCP tool-schema parameters whose argument values are displayable
+ * on the collapsed node. Params without a set value are hidden from the
+ * preview, matching the empty-row filtering applied to regular subblocks.
+ */
+function getDisplayableMcpParamNames(schemaValue: unknown, argsValue: unknown): string[] {
+  const schema = schemaValue as { properties?: Record<string, unknown> } | undefined
+  const properties = schema?.properties
+  if (!properties || typeof properties !== 'object') return []
+  const args = (argsValue && typeof argsValue === 'object' ? argsValue : {}) as Record<
+    string,
+    unknown
+  >
+  return Object.keys(properties).filter((name) => getDisplayValue(args[name]) !== '-')
+}
+
 interface BlockSunset {
   status: 'legacy' | 'deprecated'
   kind: 'block' | 'model'
@@ -167,6 +426,10 @@ interface SubBlockRowProps {
   displayAdvancedOptions?: boolean
   canonicalIndex?: ReturnType<typeof buildCanonicalIndex>
   canonicalModeOverrides?: Record<string, 'basic' | 'advanced'>
+  /** Presentation variant forwarded to the row view. */
+  variant?: 'row' | 'meta' | 'statement-primary' | 'statement-muted' | 'inline-value'
+  /** Leading icon forwarded to the row view (meta variant). */
+  icon?: MetaIcon
 }
 
 /**
@@ -192,7 +455,9 @@ const areSubBlockRowPropsEqual = (
     valueEqual &&
     prevProps.displayAdvancedOptions === nextProps.displayAdvancedOptions &&
     prevProps.canonicalIndex === nextProps.canonicalIndex &&
-    prevProps.canonicalModeOverrides === nextProps.canonicalModeOverrides
+    prevProps.canonicalModeOverrides === nextProps.canonicalModeOverrides &&
+    prevProps.variant === nextProps.variant &&
+    prevProps.icon === nextProps.icon
   )
 }
 
@@ -213,6 +478,8 @@ const SubBlockRow = memo(function SubBlockRow({
   displayAdvancedOptions,
   canonicalIndex,
   canonicalModeOverrides,
+  variant,
+  icon,
 }: SubBlockRowProps) {
   const getStringValue = useCallback(
     (key?: string): string | undefined => {
@@ -468,7 +735,13 @@ const SubBlockRow = memo(function SubBlockRow({
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
   return (
-    <SubBlockRowView title={title} displayValue={displayValue} isMonospace={isMonospaceField} />
+    <SubBlockRowView
+      title={title}
+      displayValue={displayValue}
+      isMonospace={isMonospaceField}
+      variant={variant}
+      icon={icon}
+    />
   )
 }, areSubBlockRowPropsEqual)
 
@@ -563,6 +836,112 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     isEqual
   )
 
+  /**
+   * Whether a persisted legacy error route is wired from this block. The
+   * renderer uses this only to retain a non-interactive edge anchor.
+   */
+  const hasErrorConnection = useWorkflowStore(
+    useCallback(
+      (state) => state.edges.some((edge) => edge.source === id && edge.sourceHandle === 'error'),
+      [id]
+    )
+  )
+
+  /**
+   * Handle ids whose connected edge is highlighted because an endpoint block
+   * is selected — the view darkens those tabs to the edge highlight color so
+   * port and line read as one piece. Serialized to a string so the ReactFlow
+   * store subscription only re-renders on real changes.
+   */
+  const editorBlockId = usePanelEditorStore((state) => state.currentBlockId)
+  const panelActiveTab = usePanelStore((state) => state.activeTab)
+  const editorOpenBlockId = panelActiveTab === 'editor' ? editorBlockId : null
+  const highlightedHandleKey = useReactFlowStore(
+    useCallback(
+      (state) => {
+        const keys: string[] = []
+        for (const edge of state.edges) {
+          if (edge.source !== id && edge.target !== id) continue
+          /*
+           * Must mirror workflow-edge's shouldHighlightEdge exactly: the edge
+           * darkens when an endpoint is canvas-selected OR open in the editor
+           * panel. If the knob checks fewer conditions than the line, a dark
+           * line runs into a light knob.
+           */
+          const isHighlighted =
+            state.nodeInternals.get(edge.source)?.selected ||
+            state.nodeInternals.get(edge.target)?.selected ||
+            (edge.data as { isConnectedToSelection?: boolean } | undefined)
+              ?.isConnectedToSelection ||
+            (editorOpenBlockId !== null &&
+              (edge.source === editorOpenBlockId || edge.target === editorOpenBlockId))
+          if (!isHighlighted) continue
+          if (edge.source === id) keys.push(edge.sourceHandle || 'source')
+          if (edge.target === id) keys.push(edge.targetHandle || 'target')
+        }
+        return keys.sort().join('|')
+      },
+      [id, editorOpenBlockId]
+    )
+  )
+  const highlightedHandles = useMemo(
+    () => new Set(highlightedHandleKey ? highlightedHandleKey.split('|') : []),
+    [highlightedHandleKey]
+  )
+  const connectedSourceHandleKey = useReactFlowStore(
+    useCallback(
+      (state) => {
+        const handles = new Set<string>()
+        for (const edge of state.edges) {
+          if (edge.source === id && isPositionedSourceHandle(edge.sourceHandle)) {
+            handles.add(edge.sourceHandle)
+          }
+        }
+        return Array.from(handles).sort().join('|')
+      },
+      [id]
+    )
+  )
+  const connectedSourceHandles = useMemo(
+    () => new Set(connectedSourceHandleKey ? connectedSourceHandleKey.split('|') : []),
+    [connectedSourceHandleKey]
+  )
+  const connectedTargetHandleKey = useReactFlowStore(
+    useCallback(
+      (state) => {
+        const handles = new Set<string>()
+        for (const edge of state.edges) {
+          if (edge.target === id && isPositionedTargetHandle(edge.targetHandle)) {
+            handles.add(edge.targetHandle)
+          }
+        }
+        return Array.from(handles).sort().join('|')
+      },
+      [id]
+    )
+  )
+  const connectedTargetHandles = useMemo(
+    () => new Set(connectedTargetHandleKey ? connectedTargetHandleKey.split('|') : []),
+    [connectedTargetHandleKey]
+  )
+
+  const errorOutputEnabled = Boolean(currentBlock?.errorEnabled || hasErrorConnection)
+  const handleToggleErrorOutput = useCallback(
+    (next: boolean) => {
+      const store = useWorkflowStore.getState()
+      data.onSetErrorOutputEnabled?.(id, next)
+      if (!next) {
+        /* Turning the branch off removes its connections — a hidden error
+           edge would still reroute failures with no visible affordance. */
+        const errorEdgeIds = store.edges
+          .filter((edge) => edge.source === id && edge.sourceHandle === 'error')
+          .map((edge) => edge.id)
+        if (errorEdgeIds.length > 0) data.onRemoveEdges?.(errorEdgeIds)
+      }
+    },
+    [data.onRemoveEdges, data.onSetErrorOutputEnabled, id]
+  )
+
   const posthog = usePostHog()
 
   const sunset = getBlockSunset(config, name, blockSubBlockValues.model, currentWorkflow.isDiffMode)
@@ -658,12 +1037,21 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         return false
       }
 
-      if (!block.condition) return true
+      if (block.condition && !evaluateSubBlockCondition(block.condition, rawValues)) {
+        return false
+      }
 
-      return evaluateSubBlockCondition(block.condition, rawValues)
+      return hasDisplayableRowValue(block, rawValues[block.id])
     })
 
-    visibleSubBlocks.forEach((block) => {
+    const chipBlocks = visibleSubBlocks
+      .filter((block) => chipPriority(block) !== null)
+      .sort((a, b) => (chipPriority(a) ?? 0) - (chipPriority(b) ?? 0))
+      .slice(0, MAX_CHIPS)
+    const chipIds = new Set(chipBlocks.map((block) => block.id))
+    const rowSubBlocks = visibleSubBlocks.filter((block) => !chipIds.has(block.id))
+
+    rowSubBlocks.forEach((block) => {
       if (currentRowWidth + blockWidth > 1) {
         if (currentRow.length > 0) {
           rows.push([...currentRow])
@@ -680,7 +1068,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       rows.push(currentRow)
     }
 
-    return { rows, stateToUse }
+    return { rows, stateToUse, chipBlocks }
   }, [
     config.subBlocks,
     config.category,
@@ -702,6 +1090,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
 
   const subBlockRows = subBlockRowsData.rows
   const subBlockState = subBlockRowsData.stateToUse
+  const chipBlocks = subBlockRowsData.chipBlocks
   const topologySubBlocks = data.isPreview
     ? (data.blockState?.subBlocks ?? {})
     : (currentStoreBlock?.subBlocks ?? {})
@@ -718,13 +1107,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       : displayAdvancedMode || hasAdvancedValues(config.subBlocks, rawValues, canonicalIndex)
   }, [subBlockState, displayAdvancedMode, config.subBlocks, canonicalIndex, canEditWorkflow])
 
-  /**
-   * Determine if block has content below the header (subblocks or error row).
-   * Controls header border visibility and content container rendering.
-   */
   const shouldShowDefaultHandles =
     config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode
-  const hasContentBelowHeader = subBlockRows.length > 0 || shouldShowDefaultHandles
 
   /**
    * Compute per-condition rows (title/value/id) for condition blocks so we can render
@@ -751,6 +1135,18 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     }))
   }, [type, topologySubBlocks, id])
 
+  /**
+   * Whether anything renders below the header — subblock rows, chips, or the
+   * condition/router branch rows.
+   */
+  const showsErrorRow = shouldShowDefaultHandles && type !== 'response'
+  const hasContentBelowHeader =
+    subBlockRows.length > 0 ||
+    chipBlocks.length > 0 ||
+    conditionRows.length > 0 ||
+    routerRows.length > 0 ||
+    showsErrorRow
+
   /**
    * Total rendered row count. `mcp-dynamic-args` expands one row per parameter
    * in the cached tool schema, so we count those properties instead of 1.
@@ -760,11 +1156,10 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     for (const row of subBlockRows) {
       for (const subBlock of row) {
         if (subBlock.type === 'mcp-dynamic-args') {
-          const schema = subBlockState._toolSchema?.value as
-            | { properties?: Record<string, unknown> }
-            | undefined
-          const properties = schema?.properties
-          count += properties && typeof properties === 'object' ? Object.keys(properties).length : 0
+          count += getDisplayableMcpParamNames(
+            subBlockState._toolSchema?.value,
+            subBlockState[subBlock.id]?.value
+          ).length
         } else {
           count += 1
         }
@@ -773,6 +1168,27 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     return count
   }, [subBlockRows, subBlockState])
 
+  /**
+   * Natural-language summary data: segments + line estimate for the block
+   * types with a sentence template. Null keeps the field-row layout.
+   */
+  const sentenceData = useMemo(() => {
+    if (type === 'condition' || type === 'router_v2') return null
+    const visibleSubBlocksById = new Map<string, SubBlockConfig>()
+    for (const subBlock of chipBlocks) visibleSubBlocksById.set(subBlock.id, subBlock)
+    for (const row of subBlockRows) {
+      for (const subBlock of row) visibleSubBlocksById.set(subBlock.id, subBlock)
+    }
+    const resolve = (...ids: string[]) =>
+      ids.find((candidate) => visibleSubBlocksById.has(candidate)) ?? null
+    const segments = buildSentenceSegments(type, subBlockState.operation?.value, resolve)
+    if (!segments) return null
+    const lines = estimateSentenceLines(segments, (subBlockId) =>
+      getDisplayValue(subBlockState[subBlockId]?.value)
+    )
+    return { segments, visibleSubBlocksById, lines }
+  }, [type, chipBlocks, subBlockRows, subBlockState])
+
   /**
    * Compute and publish deterministic layout metrics for workflow blocks.
    * This avoids ResizeObserver/animation-frame jitter and prevents initial "jump".
@@ -784,9 +1200,12 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         blockType: type,
         category: config.category,
         displayTriggerMode,
-        visibleSubBlockCount: totalRenderedRowCount,
+        visibleSubBlockCount: sentenceData ? 0 : totalRenderedRowCount,
         conditionRowCount: conditionRows.length,
         routerRowCount: routerRows.length,
+        chipCount: sentenceData ? 0 : chipBlocks.length,
+        sentenceLineCount: sentenceData?.lines ?? 0,
+        hasErrorRow: showsErrorRow,
       })
     },
     dependencies: [
@@ -796,7 +1215,11 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       totalRenderedRowCount,
       conditionRows.length,
       routerRows.length,
+      chipBlocks.length,
+      sentenceData?.lines ?? 0,
+      Boolean(sentenceData),
       horizontalHandles,
+      showsErrorRow,
     ],
   })
 
@@ -820,6 +1243,66 @@ export const WorkflowBlock = memo(function WorkflowBlock({
 
   const webhookProviderName = webhookProvider ? getProviderName(webhookProvider) : undefined
 
+  const isBranchBlock = type === 'condition' || type === 'router_v2'
+
+  const sentence = sentenceData ? (
+    <>
+      {sentenceData.segments.map((segment, index) => {
+        if (typeof segment === 'string') {
+          const glue = index > 0 && !segment.startsWith(',') && !segment.startsWith('.') ? ' ' : ''
+          return <Fragment key={`text-${index}`}>{`${glue}${segment}`}</Fragment>
+        }
+        const subBlock = sentenceData.visibleSubBlocksById.get(segment.id)
+        if (!subBlock) return null
+        const rawValue = subBlockState[segment.id]?.value
+        return (
+          <Fragment key={`value-${index}`}>
+            {' '}
+            <SubBlockRow
+              title={subBlock.title ?? subBlock.id}
+              value={getDisplayValue(rawValue)}
+              subBlock={subBlock}
+              rawValue={rawValue}
+              workspaceId={workspaceId}
+              workflowId={currentWorkflowId}
+              blockId={id}
+              allSubBlockValues={subBlockState}
+              displayAdvancedOptions={effectiveAdvanced}
+              canonicalIndex={canonicalIndex}
+              canonicalModeOverrides={canonicalModeOverrides}
+              variant='inline-value'
+            />
+          </Fragment>
+        )
+      })}
+    </>
+  ) : undefined
+
+  const chips =
+    isBranchBlock || sentenceData || chipBlocks.length === 0 ? undefined : (
+      <>
+        {chipBlocks.map((subBlock, index) => (
+          <Fragment key={`statement-${subBlock.id}`}>
+            {index > 0 && <span className='flex-shrink-0 text-[var(--text-muted)] text-sm'>·</span>}
+            <SubBlockRow
+              title={subBlock.title ?? subBlock.id}
+              value={getDisplayValue(subBlockState[subBlock.id]?.value)}
+              subBlock={subBlock}
+              rawValue={subBlockState[subBlock.id]?.value}
+              workspaceId={workspaceId}
+              workflowId={currentWorkflowId}
+              blockId={id}
+              allSubBlockValues={subBlockState}
+              displayAdvancedOptions={effectiveAdvanced}
+              canonicalIndex={canonicalIndex}
+              canonicalModeOverrides={canonicalModeOverrides}
+              variant={subBlock.id === 'operation' ? 'statement-primary' : 'statement-muted'}
+            />
+          </Fragment>
+        ))}
+      </>
+    )
+
   const rows =
     type === 'condition' || type === 'router_v2' ? null : (
       <>
@@ -827,25 +1310,21 @@ export const WorkflowBlock = memo(function WorkflowBlock({
           row.flatMap((subBlock) => {
             const rawValue = subBlockState[subBlock.id]?.value
             if (subBlock.type === 'mcp-dynamic-args') {
-              const schema = subBlockState._toolSchema?.value as
-                | { properties?: Record<string, unknown> }
-                | undefined
-              const properties = schema?.properties
-              if (properties && typeof properties === 'object') {
-                const args = (rawValue && typeof rawValue === 'object' ? rawValue : {}) as Record<
-                  string,
-                  unknown
-                >
-                return Object.keys(properties).map((paramName) => (
+              const args = (rawValue && typeof rawValue === 'object' ? rawValue : {}) as Record<
+                string,
+                unknown
+              >
+              return getDisplayableMcpParamNames(subBlockState._toolSchema?.value, rawValue).map(
+                (paramName) => (
                   <SubBlockRow
                     key={`${subBlock.id}-${paramName}-${rowIndex}`}
                     title={formatParameterLabel(paramName)}
                     value={getDisplayValue(args[paramName])}
                   />
-                ))
-              }
-              return []
+                )
+              )
             }
+            const metaIcon = getMetaIcon(subBlock)
             return [
               <SubBlockRow
                 key={`${subBlock.id}-${rowIndex}`}
@@ -860,6 +1339,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                 displayAdvancedOptions={effectiveAdvanced}
                 canonicalIndex={canonicalIndex}
                 canonicalModeOverrides={canonicalModeOverrides}
+                variant={metaIcon ? 'meta' : 'row'}
+                icon={metaIcon ?? undefined}
               />,
             ]
           })
@@ -882,6 +1363,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       iconBgColor={config.bgColor}
       horizontalHandles={horizontalHandles}
       shouldShowDefaultHandles={shouldShowDefaultHandles}
+      blockHeight={blockHeight}
       hasContentBelowHeader={hasContentBelowHeader}
       conditionRows={conditionRows}
       routerRows={routerRows}
@@ -925,10 +1407,21 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       contentRef={contentRef}
       actionBar={
         !data.isPreview && !data.isEmbedded ? (
-          <ActionBar blockId={id} blockType={type} disabled={!canEditWorkflow} />
+          <ActionBar blockId={id} blockType={type} disabled={!canEditWorkflow} variant='swell' />
         ) : undefined
       }
       rows={rows}
+      chips={chips}
+      typeLabel={config.name}
+      sentence={sentence}
+      hasErrorConnection={hasErrorConnection}
+      errorOutputEnabled={errorOutputEnabled}
+      onToggleErrorOutput={
+        canEditWorkflow && data.onSetErrorOutputEnabled ? handleToggleErrorOutput : undefined
+      }
+      highlightedHandles={highlightedHandles}
+      connectedSourceHandles={connectedSourceHandles}
+      connectedTargetHandles={connectedTargetHandles}
     />
   )
 }, shouldSkipBlockRender)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
index eff2ef11c30..225f6cc0b34 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
@@ -1,8 +1,9 @@
-import { memo, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { type EdgeDiffStatus, WorkflowEdgeView } from '@sim/workflow-renderer'
-import type { EdgeProps } from 'reactflow'
+import { type EdgeProps, useStore } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
 import { useLastRunEdges } from '@/stores/execution'
+import { usePanelEditorStore, usePanelStore } from '@/stores/panel'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 
 /** Extended edge props with optional handle identifiers */
@@ -28,6 +29,31 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
     }))
   )
   const lastRunEdges = useLastRunEdges()
+  const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
+  const activeTab = usePanelStore((state) => state.activeTab)
+
+  /**
+   * Match the block ring: darken edges when an endpoint is canvas-selected or
+   * open in the editor panel (same `--text-secondary` as the selection ring).
+   */
+  const isEndpointSelected = useStore(
+    useCallback(
+      (state) =>
+        Boolean(
+          state.nodeInternals.get(source)?.selected || state.nodeInternals.get(target)?.selected
+        ),
+      [source, target]
+    )
+  )
+  const isConnectedToSelection = Boolean(
+    isEndpointSelected ||
+      (data as { isConnectedToSelection?: boolean } | undefined)?.isConnectedToSelection
+  )
+  const isConnectedToEditor =
+    activeTab === 'editor' &&
+    currentBlockId !== null &&
+    (currentBlockId === source || currentBlockId === target)
+  const shouldHighlightEdge = isConnectedToSelection || isConnectedToEditor
 
   const previewExecutionStatus = (
     data as { executionStatus?: 'success' | 'error' | 'not-executed' } | undefined
@@ -66,6 +92,7 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
       diffStatus={diffStatus}
       runStatus={runStatus}
       isPreviewRun={Boolean(previewExecutionStatus)}
+      isConnectedToSelection={shouldHighlightEdge}
     />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts
index 13a9968e742..90167a8bb89 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts
@@ -37,7 +37,6 @@ export function useCanvasContextMenu({ blocks, getNodes, setNodes }: UseCanvasCo
           id: n.id,
           type: block?.type || '',
           enabled: block?.enabled ?? true,
-          horizontalHandles: block?.horizontalHandles ?? false,
           parentId,
           parentType,
           locked: block?.locked ?? false,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
index b4996dd90ad..e1b5121afe4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
@@ -50,17 +50,18 @@ export function getBlockRingStyles(options: BlockRingOptions): {
   const ringClassName = cn(
     // Executing block: pulsing success ring with prominent thickness (highest priority)
     isExecuting && 'ring-[3.5px] ring-[var(--border-success)] animate-ring-pulse',
-    // Editor open, selected, or preview selection: static blue ring
+    // Editor open, selected, or preview selection: neutral highlight ring,
+    // matching the selection-highlighted edge color
     !isExecuting &&
       (isEditorOpen || isSelected || isPreviewSelection) &&
-      'ring-[1.75px] ring-[var(--brand-secondary)]',
+      'ring-[1.5px] ring-[var(--text-secondary)]',
     // Non-active states use standard ring utilities
     !isExecuting &&
       !isEditorOpen &&
       !isSelected &&
       !isPreviewSelection &&
       hasRing &&
-      'ring-[1.75px]',
+      'ring-[1.5px]',
     // Pending state: warning ring
     !isExecuting && !isEditorOpen && !isSelected && isPending && 'ring-[var(--warning)]',
     // Deleted state (highest priority after active/pending)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts
index 782e00428f9..fb1fba5f09d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts
@@ -1,6 +1,7 @@
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
+import { isPositionedSourceHandle } from '@sim/workflow-types/workflow'
 import type { TraceSpan } from '@/lib/logs/types'
 import type {
   BlockChildWorkflowStartedData,
@@ -72,6 +73,10 @@ function shouldActivateEdgeClient(
     return output?.selectedRoute === handle.substring('router-'.length)
   }
 
+  if (isPositionedSourceHandle(handle)) {
+    return !output?.error
+  }
+
   switch (handle) {
     case 'error':
       return !!output?.error
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
index f1ac35e01ee..3a64a835b36 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
@@ -39,8 +39,11 @@ export const defaultEdgeOptions = { type: 'custom' } as const
 export const reactFlowStyles = [
   '[&_.react-flow__handle]:!z-[30]',
   '[&_.react-flow__edge-labels]:!z-[1001]',
+  String.raw`[&_.react-flow\_\_connectionline]:!z-[0]`,
   '[&_.react-flow__pane]:select-none',
   '[&_.react-flow__selectionpane]:select-none',
+  String.raw`[&_.react-flow\_\_selection]:!border-[var(--text-secondary)]`,
+  String.raw`[&_.react-flow\_\_selection]:!bg-[color-mix(in_oklch,var(--text-secondary)_8%,transparent)]`,
   '[&_.react-flow__background]:hidden',
   '[&_.react-flow__node-subflowNode.selected]:!shadow-none',
 ].join(' ')
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 4f9da917a1e..fdcf38ec7b3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -8,6 +8,7 @@ import ReactFlow, {
   type Edge,
   type Node,
   type NodeChange,
+  type OnConnectStart,
   ReactFlowProvider,
   SelectionMode,
   useReactFlow,
@@ -17,7 +18,18 @@ import { toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import type { SubflowNodeData } from '@sim/workflow-renderer'
-import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@sim/workflow-renderer'
+import {
+  BLOCK_DIMENSIONS,
+  CONTAINER_DIMENSIONS,
+  normalizeCursorSourceHandleId,
+} from '@sim/workflow-renderer'
+import {
+  getHorizontalWorkflowHandleSide,
+  getPositionedTargetHandleId,
+  normalizePositionedSourceHandleId,
+  normalizePositionedTargetHandleId,
+  type PositionedSourceHandleSide,
+} from '@sim/workflow-types/workflow'
 import { useShallow } from 'zustand/react/shallow'
 import { useSession } from '@/lib/auth/auth-client'
 import type { OAuthConnectEventDetail } from '@/lib/copilot/tools/client/base-tool'
@@ -116,6 +128,10 @@ const LazyChat = lazy(() =>
 const logger = createLogger('Workflow')
 
 const DEFAULT_PASTE_OFFSET = { x: 50, y: 50 }
+const CONNECTION_LINE_STYLE = {
+  stroke: 'var(--connection-line-stroke)',
+  strokeWidth: 2,
+}
 
 /**
  * Calculates the offset to paste blocks at viewport center
@@ -232,7 +248,6 @@ const WorkflowContent = React.memo(
     const [isCanvasReady, setIsCanvasReady] = useState(false)
     const [potentialParentId, setPotentialParentId] = useState<string | null>(null)
     const [selectedEdges, setSelectedEdges] = useState<SelectedEdgesMap>(new Map())
-    const [isErrorConnectionDrag, setIsErrorConnectionDrag] = useState(false)
     const canvasContainerRef = useRef<HTMLDivElement>(null)
     const embeddedFitFrameRef = useRef<number | null>(null)
     const hasCompletedInitialEmbeddedFitRef = useRef(false)
@@ -526,7 +541,10 @@ const WorkflowContent = React.memo(
       )
 
     /** Stores source node/handle info when a connection drag starts for drop-on-block detection. */
-    const connectionSourceRef = useRef<{ nodeId: string; handleId: string } | null>(null)
+    const connectionSourceRef = useRef<{
+      nodeId: string | null
+      handleId: string | null
+    } | null>(null)
 
     /** Tracks whether onConnect successfully handled the connection (ReactFlow pattern). */
     const connectionCompletedRef = useRef(false)
@@ -598,11 +616,18 @@ const WorkflowContent = React.memo(
         edgesToFilter = [...edges, ...reconstructedEdges]
       }
 
-      return edgesToFilter.filter((edge) => {
-        const sourceBlock = blocks[edge.source]
-        const targetBlock = blocks[edge.target]
-        return Boolean(sourceBlock && targetBlock)
-      })
+      return edgesToFilter
+        .map((edge) => {
+          const sourceHandle = normalizePositionedSourceHandleId(edge.sourceHandle)
+          const targetHandle = normalizePositionedTargetHandleId(edge.targetHandle)
+          if (sourceHandle === edge.sourceHandle && targetHandle === edge.targetHandle) return edge
+          return { ...edge, sourceHandle, targetHandle }
+        })
+        .filter((edge) => {
+          const sourceBlock = blocks[edge.source]
+          const targetBlock = blocks[edge.target]
+          return Boolean(sourceBlock && targetBlock)
+        })
     }, [edges, isShowingDiff, isDiffReady, diffAnalysis, blocks])
 
     const { userPermissions, workspacePermissions, permissionsError } =
@@ -627,8 +652,8 @@ const WorkflowContent = React.memo(
       collaborativeBatchAddBlocks,
       collaborativeBatchRemoveBlocks,
       collaborativeBatchToggleBlockEnabled,
-      collaborativeBatchToggleBlockHandles,
       collaborativeBatchToggleLocked,
+      collaborativeSetBlockErrorEnabled,
       undo,
       redo,
     } = useCollaborativeWorkflow()
@@ -767,6 +792,14 @@ const WorkflowContent = React.memo(
       ]
     )
 
+    /**
+     * Block queued to be centered once its node mounts and has been measured.
+     * Creation is asynchronous — the store write, the node mount, and the
+     * dimension measurement each land on a later frame — so `addBlock` records
+     * the id and the effect below performs the camera move.
+     */
+    const pendingFocusBlockIdRef = useRef<string | null>(null)
+
     const addBlock = useCallback(
       (
         id: string,
@@ -782,6 +815,7 @@ const WorkflowContent = React.memo(
       ) => {
         setPendingSelection([id])
         setSelectedEdges(new Map())
+        pendingFocusBlockIdRef.current = id
 
         const blockData: Record<string, unknown> = { ...(data || {}) }
         if (parentId) blockData.parentId = parentId
@@ -843,15 +877,6 @@ const WorkflowContent = React.memo(
 
     const [dragStartParentId, setDragStartParentId] = useState<string | null>(null)
 
-    /** Connection line style - red for error handles, default otherwise. */
-    const connectionLineStyle = useMemo(
-      () => ({
-        stroke: isErrorConnectionDrag ? 'var(--text-error)' : 'var(--workflow-edge)',
-        strokeWidth: 2,
-      }),
-      [isErrorConnectionDrag]
-    )
-
     /** Logs permission loading results for debugging. */
     useEffect(() => {
       if (permissionsError) {
@@ -1216,11 +1241,6 @@ const WorkflowContent = React.memo(
       collaborativeBatchToggleBlockEnabled(blockIds)
     }, [contextMenuBlocks, collaborativeBatchToggleBlockEnabled])
 
-    const handleContextToggleHandles = useCallback(() => {
-      const blockIds = contextMenuBlocks.map((block) => block.id)
-      collaborativeBatchToggleBlockHandles(blockIds)
-    }, [contextMenuBlocks, collaborativeBatchToggleBlockHandles])
-
     const handleContextToggleLocked = useCallback(() => {
       const blockIds = contextMenuBlocks.map((block) => block.id)
       collaborativeBatchToggleLocked(blockIds)
@@ -2638,6 +2658,8 @@ const WorkflowContent = React.memo(
             isPending,
             ...(embedded && { isEmbedded: true }),
             isWorkflowLocked: workflowReadOnly,
+            onSetErrorOutputEnabled: collaborativeSetBlockErrorEnabled,
+            onRemoveEdges: collaborativeBatchRemoveEdges,
           },
           // Include dynamic dimensions for container resizing calculations (must match rendered size)
           // Both note and workflow blocks calculate dimensions deterministically via useBlockDimensions
@@ -2659,6 +2681,8 @@ const WorkflowContent = React.memo(
       getBlockConfig,
       embedded,
       workflowReadOnly,
+      collaborativeSetBlockErrorEnabled,
+      collaborativeBatchRemoveEdges,
     ])
 
     // Local state for nodes - allows smooth drag without store updates on every frame
@@ -3085,20 +3109,36 @@ const WorkflowContent = React.memo(
      * Captures the source handle when a connection drag starts.
      * Resets connectionCompletedRef to track if onConnect handles this connection.
      */
-    const onConnectStart = useCallback((_event: any, params: any) => {
-      const handleId: string | undefined = params?.handleId
-      setIsErrorConnectionDrag(handleId === 'error')
-      connectionSourceRef.current = {
-        nodeId: params?.nodeId,
-        handleId: params?.handleId,
-      }
-      connectionCompletedRef.current = false
-    }, [])
+    const onConnectStart = useCallback<OnConnectStart>(
+      (_event, params) => {
+        const handleId = params.handleId ?? undefined
+        const isSelectedSource = Boolean(
+          getNodes().find((node) => node.id === params?.nodeId)?.selected
+        )
+        const connectionLineVariant =
+          handleId === 'error' ? 'error' : isSelectedSource ? 'selected' : 'default'
+        canvasContainerRef.current?.setAttribute('data-connection-line', connectionLineVariant)
+        canvasContainerRef.current?.setAttribute('data-connection-active', 'true')
+        connectionSourceRef.current = {
+          nodeId: params?.nodeId,
+          handleId: params?.handleId,
+        }
+        connectionCompletedRef.current = false
+      },
+      [getNodes]
+    )
 
     /** Handles new edge connections with container boundary validation. */
     const onConnect = useCallback(
       (connection: any) => {
         if (connection.source && connection.target) {
+          const normalizedConnection = {
+            ...connection,
+            sourceHandle: normalizePositionedSourceHandleId(
+              normalizeCursorSourceHandleId(connection.sourceHandle)
+            ),
+            targetHandle: normalizePositionedTargetHandleId(connection.targetHandle),
+          }
           // Check if connecting nodes across container boundaries
           const sourceNode = getNodes().find((n) => n.id === connection.source)
           const targetNode = getNodes().find((n) => n.id === connection.target)
@@ -3106,7 +3146,7 @@ const WorkflowContent = React.memo(
           if (!sourceNode || !targetNode) return
 
           // Prevent connections to protected blocks (outbound from locked blocks is allowed)
-          if (isEdgeProtected(connection, blocks)) {
+          if (isEdgeProtected(normalizedConnection, blocks)) {
             toast({
               message: 'Cannot connect to locked blocks or blocks inside locked containers',
             })
@@ -3116,9 +3156,9 @@ const WorkflowContent = React.memo(
           // Get parent information (handle container start node case)
           const sourceParentId =
             blocks[sourceNode.id]?.data?.parentId ||
-            (connection.sourceHandle === 'loop-start-source' ||
-            connection.sourceHandle === 'parallel-start-source'
-              ? connection.source
+            (normalizedConnection.sourceHandle === 'loop-start-source' ||
+            normalizedConnection.sourceHandle === 'parallel-start-source'
+              ? normalizedConnection.source
               : undefined)
           const targetParentId = blocks[targetNode.id]?.data?.parentId
 
@@ -3127,14 +3167,14 @@ const WorkflowContent = React.memo(
 
           // Special case for container start source: Always allow connections to nodes within the same container
           if (
-            (connection.sourceHandle === 'loop-start-source' ||
-              connection.sourceHandle === 'parallel-start-source') &&
+            (normalizedConnection.sourceHandle === 'loop-start-source' ||
+              normalizedConnection.sourceHandle === 'parallel-start-source') &&
             blocks[targetNode.id]?.data?.parentId === sourceNode.id
           ) {
             // This is a connection from container start to a node inside the container - always allow
 
             addEdge({
-              ...connection,
+              ...normalizedConnection,
               id: edgeId,
               type: 'workflowEdge',
               // Add metadata about the container context
@@ -3162,7 +3202,7 @@ const WorkflowContent = React.memo(
 
           // Add appropriate metadata for container context
           addEdge({
-            ...connection,
+            ...normalizedConnection,
             id: edgeId,
             type: 'workflowEdge',
             data: isInsideContainer
@@ -3187,7 +3227,8 @@ const WorkflowContent = React.memo(
      */
     const onConnectEnd = useCallback(
       (event: MouseEvent | TouchEvent) => {
-        setIsErrorConnectionDrag(false)
+        canvasContainerRef.current?.setAttribute('data-connection-line', 'default')
+        canvasContainerRef.current?.setAttribute('data-connection-active', 'false')
 
         const source = connectionSourceRef.current
         if (!source?.nodeId) {
@@ -3204,14 +3245,37 @@ const WorkflowContent = React.memo(
         // Find node under cursor using DOM hit-testing
         const clientPos = 'changedTouches' in event ? event.changedTouches[0] : event
         const targetNode = findNodeAtScreenPosition(clientPos.clientX, clientPos.clientY)
+        const sourceHandle = normalizeCursorSourceHandleId(source.handleId) ?? 'source'
 
         // Create connection if valid target found (handle-to-body case)
         if (targetNode && targetNode.id !== source.nodeId) {
+          /*
+           * Connections are horizontal-only. A body drop resolves by card
+           * half, so even a top/bottom drop terminates at the nearest left or
+           * right anchor without reintroducing a vertical edge endpoint.
+           */
+          const nodeEl = document.querySelector(
+            `.react-flow__node[data-id="${targetNode.id}"]`
+          ) as HTMLElement | null
+          let dropSide: PositionedSourceHandleSide | null = null
+          if (nodeEl) {
+            const rect = nodeEl.getBoundingClientRect()
+            dropSide = getHorizontalWorkflowHandleSide(clientPos.clientX - rect.left, rect.width)
+          }
+          /*
+           * Always source→target. Inputs never originate a drag: the `target`
+           * handle sets `isConnectableStart={false}` and the positioned side
+           * anchors are `isConnectable={false}`, so React Flow only ever
+           * reports an output handle here. Dragging over an input knob starts
+           * from the cursor swell's temporary source handle instead.
+           */
+          const targetHandle =
+            !dropSide || dropSide === 'left' ? 'target' : getPositionedTargetHandleId(dropSide)
           onConnect({
             source: source.nodeId,
-            sourceHandle: source.handleId,
+            sourceHandle,
             target: targetNode.id,
-            targetHandle: 'target',
+            targetHandle,
           })
         } else if (!targetNode) {
           // Released on empty canvas: open the command palette with the drag origin
@@ -3219,7 +3283,7 @@ const WorkflowContent = React.memo(
           useSearchModalStore.getState().open({
             sections: ['blocks', 'tools', 'toolOperations'],
             pendingConnect: {
-              source: { nodeId: source.nodeId, handleId: source.handleId },
+              source: { nodeId: source.nodeId, handleId: sourceHandle },
               screenX: clientPos.clientX,
               screenY: clientPos.clientY,
             },
@@ -3228,7 +3292,7 @@ const WorkflowContent = React.memo(
 
         connectionSourceRef.current = null
       },
-      [findNodeAtScreenPosition, onConnect]
+      [findNodeAtScreenPosition, onConnect, blocks]
     )
 
     /** Handles node drag to detect container intersections and update highlighting. */
@@ -3860,6 +3924,62 @@ const WorkflowContent = React.memo(
       usePanelEditorStore.getState().clearCurrentBlock()
     }, [])
 
+    /**
+     * Animates the camera so the given block centers in the canvas frame.
+     * Deferred by two animation frames because selection can switch the right
+     * panel to the Editor tab, resizing the canvas — centering must run
+     * against the settled frame size or the card lands off-center. Zooms in
+     * to 1 when zoomed out; keeps the user's zoom when already closer.
+     */
+    const focusBlockInView = useCallback(
+      (node: Node) => {
+        const position = node.positionAbsolute ?? node.position
+        const nodeWidth = node.width ?? 250
+        const nodeHeight = node.height ?? 100
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            const currentZoom = reactFlowInstance.getViewport().zoom
+            const targetZoom = Math.max(currentZoom, 1)
+            reactFlowInstance.setCenter(position.x + nodeWidth / 2, position.y + nodeHeight / 2, {
+              zoom: targetZoom,
+              duration: 500,
+            })
+          })
+        })
+      },
+      [reactFlowInstance]
+    )
+
+    /**
+     * Centers a newly created block once its node has mounted and been
+     * measured. A card added from a drag-release, the block menu, or the
+     * toolbar can land outside the viewport (or under the editor panel), so
+     * the camera follows it the same way it follows a click.
+     *
+     * Waits for real dimensions: `focusBlockInView` centers on the card's
+     * midpoint, and an unmeasured node reports no size, which would center the
+     * camera on its top-left corner instead.
+     */
+    useEffect(() => {
+      const pendingId = pendingFocusBlockIdRef.current
+      if (!pendingId) return
+
+      const node = displayNodes.find((candidate) => candidate.id === pendingId)
+      if (!node) return
+      if (
+        typeof node.width !== 'number' ||
+        typeof node.height !== 'number' ||
+        node.width <= 0 ||
+        node.height <= 0
+      ) {
+        return
+      }
+
+      pendingFocusBlockIdRef.current = null
+      if (embedded) return
+      focusBlockInView(node)
+    }, [displayNodes, embedded, focusBlockInView])
+
     /**
      * Handles node click to select the node in ReactFlow.
      * Uses the controlled display node state so parent-child conflicts are resolved
@@ -3893,10 +4013,85 @@ const WorkflowContent = React.memo(
           }))
           return resolveSelectionConflicts(updated, blocks, isMultiSelect ? node.id : undefined)
         })
+
+        /**
+         * Focus the clicked block: animate the camera so the card centers in
+         * the canvas frame. Only on plain clicks of regular blocks —
+         * multi-select and subflow containers keep the camera still.
+         * onNodeClick never fires after a drag.
+         */
+        if (!embedded && !isMultiSelect && node.type === 'workflowBlock') {
+          focusBlockInView(node)
+        }
       },
-      [blocks, getNodes]
+      [blocks, getNodes, embedded, focusBlockInView]
     )
 
+    /**
+     * Arrow-key navigation: with a single block selected, Right/Down moves to
+     * the next block in canvas reading order (left-to-right, top-to-bottom)
+     * and Left/Up to the previous, wrapping at the ends. Selection, the
+     * editor panel, and the camera focus all follow. Skipped while typing in
+     * inputs/editors or interacting with menus, and in embedded mode.
+     */
+    useEffect(() => {
+      if (embedded) return
+
+      const handleArrowNavigation = (event: KeyboardEvent) => {
+        if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return
+        const isNext = event.key === 'ArrowRight' || event.key === 'ArrowDown'
+        const isPrev = event.key === 'ArrowLeft' || event.key === 'ArrowUp'
+        if (!isNext && !isPrev) return
+
+        const target = event.target as HTMLElement | null
+        if (
+          target &&
+          (target.tagName === 'INPUT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.tagName === 'SELECT' ||
+            target.isContentEditable ||
+            target.closest(
+              '[contenteditable="true"], [role="listbox"], [role="menu"], [role="combobox"], .cm-editor'
+            ))
+        ) {
+          return
+        }
+
+        const workflowNodes = getNodes().filter((n) => n.type === 'workflowBlock')
+        const selected = workflowNodes.filter((n) => n.selected)
+        if (selected.length !== 1 || workflowNodes.length < 2) return
+
+        const ordered = [...workflowNodes].sort((a, b) => {
+          const pa = a.positionAbsolute ?? a.position
+          const pb = b.positionAbsolute ?? b.position
+          return pa.x - pb.x || pa.y - pb.y
+        })
+        const currentIndex = ordered.findIndex((n) => n.id === selected[0].id)
+        if (currentIndex === -1) return
+
+        event.preventDefault()
+        event.stopPropagation()
+
+        const nextNode =
+          ordered[(currentIndex + (isNext ? 1 : -1) + ordered.length) % ordered.length]
+
+        setDisplayNodes((currentNodes) =>
+          resolveSelectionConflicts(
+            currentNodes.map((currentNode) => ({
+              ...currentNode,
+              selected: currentNode.id === nextNode.id,
+            })),
+            blocks
+          )
+        )
+        usePanelEditorStore.getState().setCurrentBlockId(nextNode.id)
+        focusBlockInView(nextNode)
+      }
+
+      window.addEventListener('keydown', handleArrowNavigation, true)
+      return () => window.removeEventListener('keydown', handleArrowNavigation, true)
+    }, [embedded, getNodes, blocks, focusBlockInView])
+
     /** Handles edge selection with container context tracking and Shift-click multi-selection. */
     const onEdgeClick = useCallback(
       (event: React.MouseEvent, edge: any) => {
@@ -3980,39 +4175,35 @@ const WorkflowContent = React.memo(
     /** Transforms edges to include selection state and delete handlers. Memoized to prevent re-renders. */
     const edgesWithSelection = useMemo(() => {
       const nodeMap = new Map(displayNodes.map((n) => [n.id, n]))
-      const elevatedNodeIdSet = new Set(
-        lastInteractedNodeId ? [...selectedNodeIds, lastInteractedNodeId] : selectedNodeIds
-      )
 
       return edgesForDisplay.map((edge) => {
         const sourceNode = nodeMap.get(edge.source)
         const targetNode = nodeMap.get(edge.target)
         const parentLoopId = sourceNode?.parentId || targetNode?.parentId
         const edgeContextId = `${edge.id}${parentLoopId ? `-${parentLoopId}` : ''}`
-        const connectedToElevated =
-          elevatedNodeIdSet.has(edge.source) || elevatedNodeIdSet.has(edge.target)
-        // Derive elevated z-index from connected nodes so edges inside subflows
-        // (child nodes at z-1000) stay above their sibling child blocks.
-        const elevatedZIndex = Math.max(
-          22,
-          (sourceNode?.zIndex ?? 21) + 1,
-          (targetNode?.zIndex ?? 21) + 1
-        )
 
         // Edges inside subflows need a z-index above the container's body area
         // (which has pointer-events: auto) so they're directly clickable.
         // Derive from the container's depth-based zIndex (+1) so the edge sits
         // just above its parent container but below canvas blocks (z-21+) and
         // child blocks (z-1000).
+        //
+        // Edges are NEVER elevated above cards — not even when an endpoint is
+        // selected. A line always passes behind cards, knobs, and the action
+        // bar swell; elevating highlighted edges drew them across their own
+        // endpoint's chrome.
         const containerNode = parentLoopId ? nodeMap.get(parentLoopId) : null
         const baseZIndex = containerNode ? (containerNode.zIndex ?? 0) + 1 : 0
+        const isConnectedToSelection =
+          selectedNodeIds.includes(edge.source) || selectedNodeIds.includes(edge.target)
 
         return {
           ...edge,
-          zIndex: connectedToElevated ? elevatedZIndex : baseZIndex,
+          zIndex: baseZIndex,
           data: {
             ...edge.data,
             isSelected: selectedEdges.has(edgeContextId),
+            isConnectedToSelection,
             isInsideLoop: Boolean(parentLoopId),
             parentLoopId,
             sourceHandle: edge.sourceHandle,
@@ -4020,14 +4211,7 @@ const WorkflowContent = React.memo(
           },
         }
       })
-    }, [
-      edgesForDisplay,
-      displayNodes,
-      selectedNodeIds,
-      selectedEdges,
-      handleEdgeDelete,
-      lastInteractedNodeId,
-    ])
+    }, [edgesForDisplay, displayNodes, selectedNodeIds, selectedEdges, handleEdgeDelete])
 
     /** Handles Delete/Backspace to remove selected edges or blocks. */
     useEffect(() => {
@@ -4138,7 +4322,10 @@ const WorkflowContent = React.memo(
     return (
       <div className='flex h-full w-full overflow-hidden'>
         <div className='flex min-w-0 flex-1 flex-col'>
-          <div ref={canvasContainerRef} className='relative flex-1 overflow-hidden'>
+          <div
+            ref={canvasContainerRef}
+            className='relative flex-1 overflow-hidden [--connection-line-stroke:var(--workflow-edge)] data-[connection-line=error]:[--connection-line-stroke:var(--text-error)] data-[connection-line=selected]:[--connection-line-stroke:var(--text-secondary)] data-[connection-active=true]:[&_.react-flow__handle.source]:pointer-events-none'
+          >
             {!isWorkflowReady && (
               <div className='absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)]'>
                 <div
@@ -4197,7 +4384,7 @@ const WorkflowContent = React.memo(
                   panOnScroll
                   defaultEdgeOptions={defaultEdgeOptions}
                   proOptions={reactFlowProOptions}
-                  connectionLineStyle={connectionLineStyle}
+                  connectionLineStyle={CONNECTION_LINE_STYLE}
                   connectionLineType={ConnectionLineType.SmoothStep}
                   onPaneClick={onPaneClick}
                   onEdgeClick={embedded ? undefined : onEdgeClick}
@@ -4265,7 +4452,6 @@ const WorkflowContent = React.memo(
                       onDuplicate={handleContextDuplicate}
                       onDelete={handleContextDelete}
                       onToggleEnabled={handleContextToggleEnabled}
-                      onToggleHandles={handleContextToggleHandles}
                       onRemoveFromSubflow={handleContextRemoveFromSubflow}
                       onOpenEditor={handleContextOpenEditor}
                       onRename={handleContextRename}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index 4dde0ebfbf3..24e47e3d2c9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -1,10 +1,18 @@
 'use client'
 
 import { type CSSProperties, memo, useMemo } from 'react'
-import { HANDLE_POSITIONS } from '@sim/workflow-renderer'
+import { ChipTag } from '@sim/emcn'
+import { getWorkflowTypeAccent, HANDLE_POSITIONS, humanizeBlockName } from '@sim/workflow-renderer'
+import {
+  getPositionedSourceHandleId,
+  getPositionedTargetHandleId,
+  POSITIONED_SOURCE_HANDLE_SIDES,
+  type PositionedSourceHandleSide,
+} from '@sim/workflow-types/workflow'
 import { Handle, type NodeProps, Position } from 'reactflow'
 import {
   getDisplayValue,
+  hasDisplayableRowValue,
   resolveDropdownLabel,
   resolveSkillsLabel,
   resolveToolsLabel,
@@ -19,7 +27,6 @@ import {
   isSubBlockVisibleForMode,
 } from '@/lib/workflows/subblocks/visibility'
 import { getBlock } from '@/blocks'
-import { getTileIconColorClass } from '@/blocks/icon-color'
 import { SELECTOR_TYPES_HYDRATION_REQUIRED, type SubBlockConfig } from '@/blocks/types'
 import { useVariablesStore } from '@/stores/variables/store'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
@@ -38,21 +45,34 @@ interface SubBlockValueEntry {
  */
 const HANDLE_STYLES = {
   horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-xs',
-  vertical: '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-xs',
   right:
     '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
   error:
-    '!z-[10] !border-none !bg-[var(--text-error)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
+    '!z-[10] !border-none !bg-[var(--text-error)] !h-[7px] !w-6 !rounded-b-[2px] !rounded-t-none',
 } as const
 
 /** Reusable style object for error handles positioned at bottom-right */
 const ERROR_HANDLE_STYLE: CSSProperties = {
-  right: '-7px',
+  right: 'auto',
   top: 'auto',
-  bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
-  transform: 'translateY(50%)',
+  bottom: '-7px',
+  left: 'calc(100% - 30px)',
+  transform: 'translateX(-50%)',
 }
 
+const getReactFlowPosition = (side: PositionedSourceHandleSide) =>
+  side === 'left' ? Position.Left : Position.Right
+
+const getCenteredSideHandleStyle = (side: PositionedSourceHandleSide): CSSProperties => ({
+  right: 'auto',
+  bottom: 'auto',
+  width: 1,
+  height: 1,
+  top: '50%',
+  left: side === 'left' ? 0 : '100%',
+  transform: 'translate(-50%, -50%)',
+})
+
 interface WorkflowPreviewBlockData {
   type: string
   name: string
@@ -178,7 +198,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
     workflowMap = {},
     workflowLabelsReady = false,
     isTrigger = false,
-    horizontalHandles = false,
     enabled = true,
     isPreviewSelected = false,
     executionStatus,
@@ -227,8 +246,10 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
       if (!isSubBlockVisibleForMode(subBlock, false, canonicalIndex, rawValues, undefined)) {
         return false
       }
-      if (!subBlock.condition) return true
-      return evaluateSubBlockCondition(subBlock.condition, rawValues)
+      if (subBlock.condition && !evaluateSubBlockCondition(subBlock.condition, rawValues)) {
+        return false
+      }
+      return hasDisplayableRowValue(subBlock, rawValues[subBlock.id])
     })
   }, [
     lightweight,
@@ -335,59 +356,50 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
 
   const hasError = executionStatus === 'error'
   const hasSuccess = executionStatus === 'success'
+  const typeAccent = getWorkflowTypeAccent(type)
 
   return (
-    <div className='relative w-[250px] select-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)]'>
+    <div className='relative w-[250px] select-none rounded-2xl border-[1.5px] border-[var(--border-1)] bg-[var(--surface-2)]'>
       {/* Selection ring overlay (takes priority over execution rings) */}
       {isPreviewSelected && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-secondary)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px] ring-[var(--text-secondary)]' />
       )}
       {/* Success ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasSuccess && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-accent)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px] ring-[var(--brand-accent)]' />
       )}
       {/* Error ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasError && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--text-error)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px] ring-[var(--text-error)]' />
       )}
 
       {/* Target handle - not shown for triggers/starters */}
       {shouldShowDefaultHandles && (
         <Handle
           type='target'
-          position={horizontalHandles ? Position.Left : Position.Top}
+          position={Position.Left}
           id='target'
-          className={horizontalHandles ? HANDLE_STYLES.horizontal : HANDLE_STYLES.vertical}
-          style={
-            horizontalHandles
-              ? { left: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
-              : { top: '-7px', left: '50%', transform: 'translateX(-50%)' }
-          }
+          className={HANDLE_STYLES.horizontal}
+          style={{ left: '-7px', top: '50%', transform: 'translateY(-50%)' }}
         />
       )}
 
       {/* Header - matches WorkflowBlock structure */}
-      <div
-        className={`flex items-center justify-between p-2 ${hasContentBelowHeader ? 'border-[var(--border-1)] border-b' : ''}`}
-      >
-        <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
-          {!isNoteBlock && (
-            <div
-              className='flex size-[24px] flex-shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full'
-              style={{ background: enabled ? blockConfig.bgColor : 'gray' }}
-            >
-              <IconComponent
-                className={`size-[16px] ${enabled ? getTileIconColorClass(blockConfig.bgColor) : 'text-[var(--text-icon)]'}`}
-              />
-            </div>
-          )}
+      <div className='flex h-[40px] items-center justify-between px-2'>
+        <div className='relative z-10 flex min-w-0 flex-1 items-center'>
           <span
-            className={`truncate font-medium text-md ${!enabled ? 'text-[var(--text-muted)]' : ''}`}
+            className={`truncate font-medium text-[17px] ${!enabled ? 'text-[var(--text-muted)]' : ''}`}
             title={name}
           >
-            {name}
+            {humanizeBlockName(name)}
           </span>
         </div>
+        {!isNoteBlock && (
+          <ChipTag variant={typeAccent.variant} tone={typeAccent.tone} className='flex-shrink-0'>
+            <IconComponent className='size-[14px] flex-shrink-0' />
+            {blockConfig.name !== name ? blockConfig.name : null}
+          </ChipTag>
+        )}
       </div>
 
       {/* Content area with subblocks */}
@@ -438,14 +450,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
               )
             })
           )}
-          {/* Error row for non-trigger blocks */}
-          {shouldShowDefaultHandles && (
-            <SubBlockRow
-              title='error'
-              workflowMap={workflowMap}
-              workflowLabelsReady={workflowLabelsReady}
-            />
-          )}
         </div>
       )}
 
@@ -466,13 +470,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
               />
             )
           })}
-          <Handle
-            type='source'
-            position={Position.Right}
-            id='error'
-            className={HANDLE_STYLES.error}
-            style={ERROR_HANDLE_STYLE}
-          />
         </>
       )}
 
@@ -494,13 +491,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
               />
             )
           })}
-          <Handle
-            type='source'
-            position={Position.Right}
-            id='error'
-            className={HANDLE_STYLES.error}
-            style={ERROR_HANDLE_STYLE}
-          />
         </>
       )}
 
@@ -509,26 +499,49 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         <>
           <Handle
             type='source'
-            position={horizontalHandles ? Position.Right : Position.Bottom}
+            position={Position.Right}
             id='source'
-            className={horizontalHandles ? HANDLE_STYLES.right : HANDLE_STYLES.vertical}
-            style={
-              horizontalHandles
-                ? { right: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
-                : { bottom: '-7px', left: '50%', transform: 'translateX(-50%)' }
-            }
+            className={HANDLE_STYLES.right}
+            style={{ right: '-7px', top: '50%', transform: 'translateY(-50%)' }}
           />
-          {shouldShowDefaultHandles && (
+          {POSITIONED_SOURCE_HANDLE_SIDES.map((side) => (
             <Handle
+              key={getPositionedSourceHandleId(side)}
               type='source'
-              position={Position.Right}
-              id='error'
-              className={HANDLE_STYLES.error}
-              style={ERROR_HANDLE_STYLE}
+              position={getReactFlowPosition(side)}
+              id={getPositionedSourceHandleId(side)}
+              className='!pointer-events-none !z-0 !border-none !bg-transparent !opacity-0'
+              style={getCenteredSideHandleStyle(side)}
+              isConnectable={false}
+              aria-hidden='true'
             />
-          )}
+          ))}
         </>
       )}
+
+      {shouldShowDefaultHandles &&
+        POSITIONED_SOURCE_HANDLE_SIDES.map((side) => (
+          <Handle
+            key={getPositionedTargetHandleId(side)}
+            type='target'
+            position={getReactFlowPosition(side)}
+            id={getPositionedTargetHandleId(side)}
+            className='!pointer-events-none !z-0 !border-none !bg-transparent !opacity-0'
+            style={getCenteredSideHandleStyle(side)}
+            isConnectable={false}
+            aria-hidden='true'
+          />
+        ))}
+
+      {shouldShowDefaultHandles && type !== 'response' && (
+        <Handle
+          type='source'
+          position={Position.Bottom}
+          id='error'
+          className={HANDLE_STYLES.error}
+          style={ERROR_HANDLE_STYLE}
+        />
+      )}
     </div>
   )
 }
@@ -549,7 +562,6 @@ function shouldSkipPreviewBlockRender(
     prevProps.data.type !== nextProps.data.type ||
     prevProps.data.name !== nextProps.data.name ||
     prevProps.data.isTrigger !== nextProps.data.isTrigger ||
-    prevProps.data.horizontalHandles !== nextProps.data.horizontalHandles ||
     prevProps.data.enabled !== nextProps.data.enabled ||
     prevProps.data.isPreviewSelected !== nextProps.data.isPreviewSelected ||
     prevProps.data.executionStatus !== nextProps.data.executionStatus ||
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
index 551c504cfb5..cf6bf094367 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
@@ -2,8 +2,9 @@
 
 import type { ComponentType } from 'react'
 import { memo } from 'react'
-import { cn } from '@sim/emcn'
+import { ChipTag, cn } from '@sim/emcn'
 import { File, Workflow } from '@sim/emcn/icons'
+import { getWorkflowTypeAccent } from '@sim/workflow-renderer'
 import { Command } from 'cmdk'
 import type { CommandItemProps } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 import { COMMAND_ITEM_CLASSNAME } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
@@ -16,23 +17,36 @@ export const MemoizedCommandItem = memo(
     icon: Icon,
     bgColor,
     showColoredIcon,
+    workflowType,
     label,
   }: CommandItemProps) {
+    const workflowAccent = workflowType ? getWorkflowTypeAccent(workflowType) : null
+
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <div
-          className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
-          style={{ background: showColoredIcon ? bgColor : 'transparent' }}
-        >
-          <Icon
-            className={cn(
-              'transition-transform duration-100 group-hover:scale-110',
-              showColoredIcon
-                ? `size-[10px] ${getTileIconColorClass(bgColor)}`
-                : 'size-[16px] text-[var(--text-icon)]'
-            )}
-          />
-        </div>
+        {workflowAccent ? (
+          <ChipTag
+            variant={workflowAccent.variant}
+            tone={workflowAccent.tone}
+            className='size-[16px] flex-shrink-0 justify-center p-0'
+          >
+            <Icon className='size-[10px] transition-transform duration-100 group-hover:scale-110' />
+          </ChipTag>
+        ) : (
+          <div
+            className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
+            style={{ background: showColoredIcon ? bgColor : 'transparent' }}
+          >
+            <Icon
+              className={cn(
+                'transition-transform duration-100 group-hover:scale-110',
+                showColoredIcon
+                  ? `size-[10px] ${getTileIconColorClass(bgColor)}`
+                  : 'size-[16px] text-[var(--text-icon)]'
+              )}
+            />
+          </div>
+        )}
         <span className='truncate text-[var(--text-body)]'>{label}</span>
       </Command.Item>
     )
@@ -42,6 +56,7 @@ export const MemoizedCommandItem = memo(
     prev.icon === next.icon &&
     prev.bgColor === next.bgColor &&
     prev.showColoredIcon === next.showColoredIcon &&
+    prev.workflowType === next.workflowType &&
     prev.label === next.label
 )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
index f8e071be9d0..2788d6e8a04 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
@@ -72,6 +72,7 @@ export const BlocksGroup = memo(function BlocksGroup({
           icon={block.icon}
           bgColor={block.bgColor}
           showColoredIcon
+          workflowType={block.type}
           label={block.name}
         />
       ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
index 5b046c31a52..e0af331e9b3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
@@ -91,6 +91,8 @@ export interface CommandItemProps {
   icon: ComponentType<{ className?: string }>
   bgColor: string
   showColoredIcon?: boolean
+  /** Core workflow block type whose shared accent should replace the catalog color. */
+  workflowType?: string
   /** Primary text of the row. */
   label: string
 }
diff --git a/apps/sim/components/icons.tsx b/apps/sim/components/icons.tsx
index a10c0acf1f9..4dbb16638a7 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -1518,12 +1518,12 @@ export function InputIcon(props: SVGProps<SVGSVGElement>) {
 export function StartIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      {...props}
       width='26'
       height='16'
       viewBox='0 0 26 16'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      {...props}
     >
       <path
         d='M7.8 13C9.23 13 10.45 12.49 11.47 11.47C12.49 10.45 13 9.23 13 7.8C13 6.37 12.49 5.15 11.47 4.13C10.45 3.11 9.23 2.6 7.8 2.6C6.37 2.6 5.15 3.11 4.13 4.13C3.11 5.15 2.6 6.37 2.6 7.8C2.6 9.23 3.11 10.45 4.13 11.47C5.15 12.49 6.37 13 7.8 13ZM7.8 15.6C5.63 15.6 3.79 14.84 2.28 13.33C0.76 11.81 0 9.97 0 7.8C0 5.63 0.76 3.79 2.28 2.28C3.79 0.76 5.63 0 7.8 0C9.75 0 11.45 0.62 12.89 1.85C14.33 3.09 15.2 4.64 15.5 6.5H24.7C25.07 6.5 25.38 6.62 25.63 6.87C25.88 7.12 26 7.43 26 7.8C26 8.17 25.87 8.48 25.63 8.73C25.38 8.98 25.07 9.1 24.7 9.1H15.5C15.2 10.96 14.33 12.51 12.89 13.75C11.44 14.98 9.75 15.6 7.8 15.6Z'
diff --git a/apps/sim/executor/execution/edge-manager.test.ts b/apps/sim/executor/execution/edge-manager.test.ts
index 80bd4100d34..4d28b2d947e 100644
--- a/apps/sim/executor/execution/edge-manager.test.ts
+++ b/apps/sim/executor/execution/edge-manager.test.ts
@@ -531,6 +531,29 @@ describe('EdgeManager', () => {
       expect(readyNodes).toContain(successTargetId)
       expect(readyNodes).not.toContain(errorTargetId)
     })
+
+    it('treats positioned source handles as success edges', () => {
+      const sourceId = 'source-1'
+      const successTargetId = 'success-target'
+      const errorTargetId = 'error-target'
+      const sourceNode = createMockNode(sourceId, [
+        { target: successTargetId, sourceHandle: 'source-top' },
+        { target: errorTargetId, sourceHandle: 'error' },
+      ])
+      const nodes = new Map<string, DAGNode>([
+        [sourceId, sourceNode],
+        [successTargetId, createMockNode(successTargetId, [], [sourceId])],
+        [errorTargetId, createMockNode(errorTargetId, [], [sourceId])],
+      ])
+      const edgeManager = new EdgeManager(createMockDAG(nodes))
+
+      const readyNodes = edgeManager.processOutgoingEdges(sourceNode, {
+        error: 'Something went wrong',
+      })
+
+      expect(readyNodes).toContain(errorTargetId)
+      expect(readyNodes).not.toContain(successTargetId)
+    })
   })
 
   describe('Router edge handling', () => {
diff --git a/apps/sim/executor/execution/edge-manager.ts b/apps/sim/executor/execution/edge-manager.ts
index 148d88a352e..7454311b4c2 100644
--- a/apps/sim/executor/execution/edge-manager.ts
+++ b/apps/sim/executor/execution/edge-manager.ts
@@ -1,4 +1,5 @@
 import { createLogger } from '@sim/logger'
+import { isPositionedSourceHandle } from '@sim/workflow-types/workflow'
 import { CONTROL_BACK_EDGE_HANDLES, EDGE, SUBFLOW_CONTROL_EDGE_HANDLES } from '@/executor/constants'
 import type { DAG, DAGNode } from '@/executor/dag/builder'
 import type { DAGEdge } from '@/executor/dag/types'
@@ -286,6 +287,10 @@ export class EdgeManager {
       return output.selectedRoute === routeId
     }
 
+    if (isPositionedSourceHandle(handle)) {
+      return !output.error
+    }
+
     switch (handle) {
       case EDGE.ERROR:
         return !!output.error
diff --git a/apps/sim/hooks/use-collaborative-workflow.ts b/apps/sim/hooks/use-collaborative-workflow.ts
index e0c752bb446..e9509d2149e 100644
--- a/apps/sim/hooks/use-collaborative-workflow.ts
+++ b/apps/sim/hooks/use-collaborative-workflow.ts
@@ -65,6 +65,7 @@ const logger = createLogger('CollaborativeWorkflow')
 export function useCollaborativeWorkflow() {
   const queryClient = useQueryClient()
   const undoRedo = useUndoRedo()
+  const recordBatchRemoveEdges = undoRedo.recordBatchRemoveEdges
   const isUndoRedoInProgress = useRef(false)
   const lastDiffOperationId = useRef<string | null>(null)
 
@@ -231,6 +232,9 @@ export function useCollaborativeWorkflow() {
             case BLOCK_OPERATIONS.UPDATE_ADVANCED_MODE:
               useWorkflowStore.getState().setBlockAdvancedMode(payload.id, payload.advancedMode)
               break
+            case BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED:
+              useWorkflowStore.getState().setBlockErrorEnabled(payload.id, payload.errorEnabled)
+              break
             case BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE:
               useWorkflowStore
                 .getState()
@@ -1282,6 +1286,18 @@ export function useCollaborativeWorkflow() {
     [executeQueuedOperation]
   )
 
+  const collaborativeSetBlockErrorEnabled = useCallback(
+    (id: string, errorEnabled: boolean) => {
+      executeQueuedOperation(
+        BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED,
+        OPERATION_TARGETS.BLOCK,
+        { id, errorEnabled },
+        () => useWorkflowStore.getState().setBlockErrorEnabled(id, errorEnabled)
+      )
+    },
+    [executeQueuedOperation]
+  )
+
   const collaborativeSetBlockCanonicalMode = useCallback(
     (id: string, canonicalId: string, canonicalMode: 'basic' | 'advanced') => {
       if (isBaselineDiffView) {
@@ -1530,13 +1546,13 @@ export function useCollaborativeWorkflow() {
       useWorkflowStore.getState().batchRemoveEdges(validEdgeIds)
 
       if (!options?.skipUndoRedo && edgeSnapshots.length > 0) {
-        undoRedo.recordBatchRemoveEdges(edgeSnapshots)
+        recordBatchRemoveEdges(edgeSnapshots)
       }
 
       logger.info('Batch removed edges', { count: validEdgeIds.length })
       return true
     },
-    [isBaselineDiffView, addToQueue, activeWorkflowId, session, undoRedo]
+    [isBaselineDiffView, addToQueue, activeWorkflowId, session, recordBatchRemoveEdges]
   )
 
   const collaborativeSetSubblockValue = useCallback(
@@ -2236,6 +2252,7 @@ export function useCollaborativeWorkflow() {
     collaborativeBatchToggleBlockEnabled,
     collaborativeBatchUpdateParent,
     collaborativeToggleBlockAdvancedMode,
+    collaborativeSetBlockErrorEnabled,
     collaborativeSetBlockCanonicalMode,
     collaborativeSetBlockCanonicalModes,
     collaborativeBatchToggleBlockHandles,
diff --git a/apps/sim/lib/api/contracts/workflows.ts b/apps/sim/lib/api/contracts/workflows.ts
index 6920db4f5d5..4e14c793cdf 100644
--- a/apps/sim/lib/api/contracts/workflows.ts
+++ b/apps/sim/lib/api/contracts/workflows.ts
@@ -33,6 +33,7 @@ const workflowBlockDataSchema = z.object({
   batchSize: z.number().optional(),
   type: z.string().optional(),
   canonicalModes: z.record(z.string(), z.enum(['basic', 'advanced'])).optional(),
+  errorEnabled: z.boolean().optional(),
 })
 
 const workflowSubBlockStateSchema = z.object({
@@ -58,6 +59,7 @@ const workflowBlockStateSchema = z.object({
   horizontalHandles: z.boolean().optional(),
   height: z.number().optional(),
   advancedMode: z.boolean().optional(),
+  errorEnabled: z.boolean().optional(),
   triggerMode: z.boolean().optional(),
   data: workflowBlockDataSchema.optional(),
   locked: z.boolean().optional(),
diff --git a/apps/sim/lib/copilot/tools/server/workflow/edit-workflow/validation.ts b/apps/sim/lib/copilot/tools/server/workflow/edit-workflow/validation.ts
index 9dd6e65a806..77eb01a07f0 100644
--- a/apps/sim/lib/copilot/tools/server/workflow/edit-workflow/validation.ts
+++ b/apps/sim/lib/copilot/tools/server/workflow/edit-workflow/validation.ts
@@ -1,6 +1,7 @@
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { omit } from '@sim/utils/object'
+import { isPositionedSourceHandle } from '@sim/workflow-types/workflow'
 import { validateSelectorIds } from '@/lib/copilot/validation/selector-validator'
 import { isBlockTypeAccessControlExempt } from '@/lib/permission-groups/block-access'
 import type { PermissionGroupConfig } from '@/lib/permission-groups/types'
@@ -661,7 +662,11 @@ export function validateSourceHandleForBlock(
     }
 
     case 'router':
-      if (sourceHandle === 'source' || sourceHandle.startsWith(EDGE.ROUTER_PREFIX)) {
+      if (
+        sourceHandle === 'source' ||
+        isPositionedSourceHandle(sourceHandle) ||
+        sourceHandle.startsWith(EDGE.ROUTER_PREFIX)
+      ) {
         return { valid: true }
       }
       return {
@@ -684,7 +689,7 @@ export function validateSourceHandleForBlock(
     }
 
     default:
-      if (sourceHandle === 'source') {
+      if (sourceHandle === 'source' || isPositionedSourceHandle(sourceHandle)) {
         return { valid: true }
       }
       return {
diff --git a/apps/sim/lib/workflows/autolayout/core.ts b/apps/sim/lib/workflows/autolayout/core.ts
index 94035ebe90d..e516961396b 100644
--- a/apps/sim/lib/workflows/autolayout/core.ts
+++ b/apps/sim/lib/workflows/autolayout/core.ts
@@ -26,7 +26,7 @@ const SUBFLOW_START_HANDLES = new Set(['loop-start-source', 'parallel-start-sour
 function getSourceHandleYOffset(block: BlockState, sourceHandle?: string | null): number {
   if (sourceHandle === 'error') {
     const blockHeight = block.height || BLOCK_DIMENSIONS.MIN_HEIGHT
-    return blockHeight - HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET
+    return blockHeight
   }
 
   if (sourceHandle && SUBFLOW_START_HANDLES.has(sourceHandle)) {
@@ -52,14 +52,25 @@ function getSourceHandleYOffset(block: BlockState, sourceHandle?: string | null)
     }
   }
 
-  return HANDLE_POSITIONS.DEFAULT_Y_OFFSET
+  return getDefaultHandleYOffset(block)
+}
+
+/**
+ * Default handle Y for a block: regular cards anchor their side ports at the
+ * vertical center; subflow containers keep the fixed top offset.
+ */
+function getDefaultHandleYOffset(block: BlockState): number {
+  if (block.type === 'loop' || block.type === 'parallel') {
+    return HANDLE_POSITIONS.DEFAULT_Y_OFFSET
+  }
+  return (block.height || BLOCK_DIMENSIONS.MIN_HEIGHT) / 2
 }
 
 /**
  * Calculates the Y offset for a target handle based on block type and handle ID.
  */
-function getTargetHandleYOffset(_block: BlockState, _targetHandle?: string | null): number {
-  return HANDLE_POSITIONS.DEFAULT_Y_OFFSET
+function getTargetHandleYOffset(block: BlockState, _targetHandle?: string | null): number {
+  return getDefaultHandleYOffset(block)
 }
 
 /**
diff --git a/apps/sim/lib/workflows/blocks/deterministic-dimensions.ts b/apps/sim/lib/workflows/blocks/deterministic-dimensions.ts
index b3d8145e91b..fd42e24e2eb 100644
--- a/apps/sim/lib/workflows/blocks/deterministic-dimensions.ts
+++ b/apps/sim/lib/workflows/blocks/deterministic-dimensions.ts
@@ -8,36 +8,82 @@ interface WorkflowBlockDimensionsInput {
   visibleSubBlockCount: number
   conditionRowCount?: number
   routerRowCount?: number
+  /** Number of value pills in the chips row (standard blocks only). */
+  chipCount?: number
+  /**
+   * Estimated wrapped line count of the natural-language summary. When > 0
+   * the summary replaces the chips row and all field rows.
+   */
+  sentenceLineCount?: number
+  /**
+   * Whether the card carries the error-output row. It is permanent for blocks
+   * that can emit an error — it is the affordance for switching the output on —
+   * so it holds a row whether or not the toggle is set.
+   */
+  hasErrorRow?: boolean
 }
 
 export function calculateWorkflowBlockDimensions({
   blockType,
-  category,
-  displayTriggerMode,
   visibleSubBlockCount,
   conditionRowCount = 0,
   routerRowCount = 0,
+  chipCount = 0,
+  sentenceLineCount = 0,
+  hasErrorRow = false,
 }: WorkflowBlockDimensionsInput): { width: number; height: number } {
-  const shouldShowDefaultHandles =
-    category !== 'triggers' && blockType !== 'starter' && !displayTriggerMode
-  const defaultHandlesRow = shouldShowDefaultHandles ? 1 : 0
+  const isBranchBlock = blockType === 'condition' || blockType === 'router_v2'
 
   let rowsCount = 0
   if (blockType === 'condition') {
-    rowsCount = conditionRowCount + defaultHandlesRow
+    rowsCount = conditionRowCount
   } else if (blockType === 'router_v2') {
-    rowsCount = 1 + routerRowCount + defaultHandlesRow
+    rowsCount = 1 + routerRowCount
   } else {
-    rowsCount = visibleSubBlockCount + defaultHandlesRow
+    rowsCount = visibleSubBlockCount
   }
 
-  const hasContentBelowHeader = rowsCount > 0
+  const hasSentence = !isBranchBlock && sentenceLineCount > 0
+  const chipsRowHeight =
+    !isBranchBlock && !hasSentence && chipCount > 0 ? BLOCK_DIMENSIONS.WORKFLOW_CHIPS_ROW_HEIGHT : 0
+
+  /*
+   * The content column is `flex flex-col gap-2 p-2`, so its height is the sum
+   * of the sections it renders plus one gap between each adjacent pair. Adding
+   * the sections without the gaps (or applying a per-row pitch that bakes one
+   * in) over-estimates, and the card's silhouette is painted from this number —
+   * an over-estimate draws a card taller than its own content.
+   */
+  const sections: number[] = []
+  if (chipsRowHeight > 0) sections.push(chipsRowHeight)
+  if (hasSentence) {
+    sections.push(sentenceLineCount * BLOCK_DIMENSIONS.WORKFLOW_SENTENCE_LINE_HEIGHT)
+  } else {
+    for (let index = 0; index < rowsCount; index++) {
+      sections.push(BLOCK_DIMENSIONS.WORKFLOW_ROW_HEIGHT)
+    }
+  }
+  if (hasErrorRow) sections.push(BLOCK_DIMENSIONS.WORKFLOW_ERROR_ROW_HEIGHT)
+  const hasContentBelowHeader = sections.length > 0
   const contentHeight = hasContentBelowHeader
-    ? BLOCK_DIMENSIONS.WORKFLOW_CONTENT_PADDING + rowsCount * BLOCK_DIMENSIONS.WORKFLOW_ROW_HEIGHT
+    ? BLOCK_DIMENSIONS.WORKFLOW_CONTENT_PADDING +
+      sections.reduce((total, section) => total + section, 0) +
+      (sections.length - 1) * BLOCK_DIMENSIONS.WORKFLOW_CONTENT_GAP
     : 0
+  /*
+   * The old `MIN_HEIGHT` (100) floor is gone: it stretched a header-only
+   * trigger card to more than twice its content and painted an empty band
+   * under the title. Consumers that need a minimum for canvas math (selection
+   * bounds, paste placement) already clamp with MIN_HEIGHT themselves.
+   *
+   * `MIN_PAINTED_HEIGHT` (48) is the shortest silhouette the border renderer
+   * will paint. Header-only cards (40px header) must still use this floor —
+   * and size their DOM host to match — or `preserveAspectRatio='none'`
+   * squashes the action-menu tab and leaves uneven gray under the icons.
+   */
   const height = Math.max(
     BLOCK_DIMENSIONS.HEADER_HEIGHT + contentHeight,
-    BLOCK_DIMENSIONS.MIN_HEIGHT
+    BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT
   )
 
   return {
diff --git a/apps/sim/lib/workflows/blocks/workflow-block-border-mount.test.tsx b/apps/sim/lib/workflows/blocks/workflow-block-border-mount.test.tsx
new file mode 100644
index 00000000000..6864a476636
--- /dev/null
+++ b/apps/sim/lib/workflows/blocks/workflow-block-border-mount.test.tsx
@@ -0,0 +1,293 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Mount smoke test for the border renderer. It lives in apps/sim because the
+ * renderer package has no test runner. The coloured-port case exists because
+ * a knob-paint bug once threw only when a card had a coloured knob — invisible
+ * on an idle canvas, fatal on node creation.
+ */
+import { act } from 'react'
+import {
+  ERROR_SOURCE_HANDLE_POSITION,
+  getCursorBranchSourceHandleId,
+  getCursorSourceHandlePosition,
+  getErrorBorderPort,
+  getErrorSourceHandleStyle,
+  getNearestBranchCursorHandleId,
+  getWorkflowBorderFrameDeltaSeconds,
+  HANDLE_POSITIONS,
+  isActionMenuSwellReady,
+  normalizeCursorSourceHandleId,
+  WorkflowBlockBorder,
+  type WorkflowBorderPort,
+} from '@sim/workflow-renderer'
+import {
+  getHorizontalWorkflowHandleSide,
+  normalizePositionedSourceHandleId,
+  normalizePositionedTargetHandleId,
+  POSITIONED_SOURCE_HANDLE_SIDES,
+} from '@sim/workflow-types/workflow'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
+beforeAll(() => {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+})
+
+const ports: WorkflowBorderPort[] = [
+  { id: 'target', side: 'left', position: 'center', plateau: 33 },
+  { id: 'source', side: 'right', position: 'center', plateau: 33 },
+  {
+    id: 'error',
+    side: 'bottom',
+    position: { fromEnd: HANDLE_POSITIONS.ERROR_RIGHT_OFFSET },
+    plateau: 24,
+    color: 'var(--text-secondary)',
+  },
+  {
+    id: 'action-menu',
+    side: 'top',
+    position: { fromEnd: 24 + 82 },
+    plateau: 164,
+    restAmplitude: 7,
+    hoverAmplitude: 7,
+    magnetizable: false,
+  },
+]
+
+const mountedRoots = new Set<Root>()
+const mountedHosts = new Set<HTMLDivElement>()
+
+function mount(element: React.ReactElement) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  mountedRoots.add(root)
+  mountedHosts.add(host)
+  act(() => {
+    root.render(element)
+  })
+  return { host, root }
+}
+
+afterEach(() => {
+  act(() => {
+    mountedRoots.forEach((root) => root.unmount())
+  })
+  mountedRoots.clear()
+  mountedHosts.forEach((host) => host.remove())
+  mountedHosts.clear()
+  vi.unstubAllGlobals()
+})
+
+describe('WorkflowBlockBorder mount', () => {
+  it('resolves every connection start to a horizontal source anchor', () => {
+    expect(POSITIONED_SOURCE_HANDLE_SIDES).toEqual(['left', 'right'])
+    expect(getHorizontalWorkflowHandleSide(20, 250)).toBe('left')
+    expect(getHorizontalWorkflowHandleSide(124.9, 250)).toBe('left')
+    expect(getHorizontalWorkflowHandleSide(125, 250)).toBe('right')
+    expect(getHorizontalWorkflowHandleSide(230, 250)).toBe('right')
+    /* Outputs always leave from the right, whichever edge the drag began on —
+       anchoring one on the left would put an outgoing line on the input port. */
+    expect(normalizeCursorSourceHandleId('source-cursor-left')).toBe('source-right')
+    expect(normalizeCursorSourceHandleId('source-cursor-right')).toBe('source-right')
+    expect(normalizeCursorSourceHandleId('source-cursor-top')).toBe('source-right')
+    expect(normalizeCursorSourceHandleId('source-cursor-bottom')).toBe('source-right')
+    /* Anything that already reached the graph collapses the same way. */
+    expect(normalizePositionedSourceHandleId('source-left')).toBe('source-right')
+    expect(normalizePositionedSourceHandleId('source-right')).toBe('source-right')
+  })
+
+  it('uses the grabbed edge only for the transient preview direction', () => {
+    expect(getCursorSourceHandlePosition('top')).toBe('top')
+    expect(getCursorSourceHandlePosition('bottom')).toBe('bottom')
+    expect(getCursorSourceHandlePosition('left')).toBe('left')
+    expect(getCursorSourceHandlePosition('right')).toBe('right')
+  })
+
+  it('keeps moving branch swells attached to a valid branch output', () => {
+    const conditionRows = [{ id: 'if-id' }, { id: 'else-if-id' }, { id: 'else-id' }]
+
+    expect(getNearestBranchCursorHandleId(conditionRows, 0, 60, 'condition')).toBe(
+      getCursorBranchSourceHandleId('condition-if-id')
+    )
+    expect(getNearestBranchCursorHandleId(conditionRows, 90, 60, 'condition')).toBe(
+      getCursorBranchSourceHandleId('condition-else-if-id')
+    )
+    expect(getNearestBranchCursorHandleId(conditionRows, 200, 60, 'condition')).toBe(
+      getCursorBranchSourceHandleId('condition-else-id')
+    )
+    expect(normalizeCursorSourceHandleId(getCursorBranchSourceHandleId('condition-else-id'))).toBe(
+      'condition-else-id'
+    )
+  })
+
+  it('keeps Error as the bottom-right persisted source exception', () => {
+    expect(getErrorBorderPort('var(--text-secondary)')).toEqual({
+      id: 'error',
+      side: 'bottom',
+      position: { fromEnd: 30 },
+      plateau: 24,
+      color: 'var(--text-secondary)',
+    })
+    expect(ERROR_SOURCE_HANDLE_POSITION).toBe('bottom')
+    expect(getErrorSourceHandleStyle()).toEqual({
+      right: 'auto',
+      top: 'auto',
+      bottom: -7,
+      left: 'calc(100% - 30px)',
+      width: 24,
+      height: 14,
+      transform: 'translateX(-50%)',
+    })
+    expect(normalizeCursorSourceHandleId('error')).toBe('error')
+  })
+
+  it('collapses legacy vertical edge anchors during persistence normalization', () => {
+    expect(normalizePositionedSourceHandleId('source-top')).toBe('source-right')
+    expect(normalizePositionedSourceHandleId('source-bottom')).toBe('source-right')
+    expect(normalizePositionedTargetHandleId('target-top')).toBe('target-left')
+    expect(normalizePositionedTargetHandleId('target-bottom')).toBe('target-left')
+  })
+
+  it('never advances a spring with a negative or unbounded frame delta', () => {
+    expect(getWorkflowBorderFrameDeltaSeconds(90, 100)).toBe(0)
+    expect(getWorkflowBorderFrameDeltaSeconds(Number.NaN, 100)).toBe(0)
+    expect(getWorkflowBorderFrameDeltaSeconds(10_000, 100)).toBeCloseTo(1 / 30)
+  })
+
+  it('reveals action-menu content only once the swell can contain it', () => {
+    /* The row clips to the swell, so revealing it while the swell is shorter
+       than the buttons collides the icons with the card's top edge. Pin the
+       ratio, not the threshold constant — 24px of buttons in a 28px swell. */
+    const ACTION_ROW_HEIGHT_PX = 24
+    const OPEN_SWELL_HEIGHT_PX = 28
+    const minimumSafeFraction = ACTION_ROW_HEIGHT_PX / OPEN_SWELL_HEIGHT_PX
+
+    expect(isActionMenuSwellReady(1, minimumSafeFraction - 0.001)).toBe(false)
+    expect(isActionMenuSwellReady(1, 1)).toBe(true)
+    /* Never reveal while retracting, however far open the swell still is. */
+    expect(isActionMenuSwellReady(0, 1)).toBe(false)
+  })
+
+  it('paints synchronously at mount without throwing', () => {
+    const { host } = mount(
+      <div style={{ width: 250, height: 136 }}>
+        <WorkflowBlockBorder ports={ports} hasRing={false} ringStyles='' height={136} />
+      </div>
+    )
+    const path = host.querySelector('svg path')
+    expect(path?.getAttribute('d')?.length ?? 0).toBeGreaterThan(0)
+  })
+
+  it('mounts a header-only card without throwing', () => {
+    const { host } = mount(
+      <div style={{ width: 250, height: 48 }}>
+        <WorkflowBlockBorder
+          ports={[{ id: 'source', side: 'right', position: 'center', plateau: 10 }]}
+          hasRing={false}
+          ringStyles=''
+          height={48}
+        />
+      </div>
+    )
+    expect(host.querySelector('svg')).toBeTruthy()
+  })
+
+  it('keeps every path coordinate bounded when animation timestamps move backward', () => {
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let nextFrameId = 0
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn((callback: FrameRequestCallback) => {
+        nextFrameId += 1
+        callbacks.set(nextFrameId, callback)
+        return nextFrameId
+      })
+    )
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((frameId: number) => {
+        callbacks.delete(frameId)
+      })
+    )
+
+    const { host } = mount(
+      <div style={{ width: 250, height: 136 }}>
+        <WorkflowBlockBorder ports={ports} hasRing={false} ringStyles='' height={136} />
+      </div>
+    )
+    const initialTimestamp = performance.now()
+
+    for (let index = 1; index <= 24; index++) {
+      const next = callbacks.entries().next().value as [number, FrameRequestCallback] | undefined
+      expect(next).toBeDefined()
+      if (!next) break
+      callbacks.delete(next[0])
+      act(() => next[1](initialTimestamp - index * 33))
+    }
+
+    const pathData = [...host.querySelectorAll('svg path')]
+      .map((path) => path.getAttribute('d') ?? '')
+      .join(' ')
+    const coordinates = pathData.match(/-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/gi)?.map(Number) ?? []
+    expect(pathData).not.toMatch(/NaN|Infinity/)
+    expect(coordinates.every(Number.isFinite)).toBe(true)
+    expect(Math.max(...coordinates.map(Math.abs))).toBeLessThanOrEqual(278.1)
+  })
+
+  it('keeps only one animation frame scheduled across synchronous geometry repaints', () => {
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let nextFrameId = 0
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn((callback: FrameRequestCallback) => {
+        nextFrameId += 1
+        callbacks.set(nextFrameId, callback)
+        return nextFrameId
+      })
+    )
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((frameId: number) => {
+        callbacks.delete(frameId)
+      })
+    )
+
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+    act(() => {
+      root.render(
+        <div style={{ width: 250, height: 136 }}>
+          <WorkflowBlockBorder ports={ports} hasRing={false} ringStyles='' height={136} />
+        </div>
+      )
+    })
+    expect(callbacks.size).toBe(1)
+
+    const updatedPorts = ports.map((port) =>
+      port.id === 'source' ? { ...port, color: 'var(--text-secondary)' } : port
+    )
+    act(() => {
+      root.render(
+        <div style={{ width: 250, height: 136 }}>
+          <WorkflowBlockBorder ports={updatedPorts} hasRing={false} ringStyles='' height={136} />
+        </div>
+      )
+    })
+
+    expect(callbacks.size).toBe(1)
+  })
+})
diff --git a/apps/sim/lib/workflows/comparison/compare.ts b/apps/sim/lib/workflows/comparison/compare.ts
index 0b402b913f7..2bf81ad3411 100644
--- a/apps/sim/lib/workflows/comparison/compare.ts
+++ b/apps/sim/lib/workflows/comparison/compare.ts
@@ -195,7 +195,12 @@ export function generateWorkflowDiffSummary(
           newValue: currentBlock.enabled,
         })
       }
-      const blockFields = ['horizontalHandles', 'advancedMode', 'triggerMode'] as const
+      const blockFields = [
+        'horizontalHandles',
+        'advancedMode',
+        'triggerMode',
+        'errorEnabled',
+      ] as const
       for (const field of blockFields) {
         if (!!currentBlock[field] !== !!previousBlock[field]) {
           changes.push({
diff --git a/apps/sim/lib/workflows/defaults.ts b/apps/sim/lib/workflows/defaults.ts
index c326ca43a64..29407ab1eeb 100644
--- a/apps/sim/lib/workflows/defaults.ts
+++ b/apps/sim/lib/workflows/defaults.ts
@@ -94,6 +94,7 @@ function buildStartBlockState(
     enabled: true,
     horizontalHandles: true,
     advancedMode: false,
+    errorEnabled: false,
     triggerMode: false,
     height: 0,
     data: {},
diff --git a/apps/sim/lib/workflows/diff/diff-engine.ts b/apps/sim/lib/workflows/diff/diff-engine.ts
index fa6c0c44b77..75c0fc6093b 100644
--- a/apps/sim/lib/workflows/diff/diff-engine.ts
+++ b/apps/sim/lib/workflows/diff/diff-engine.ts
@@ -42,6 +42,7 @@ function hasBlockChanged(currentBlock: BlockState, proposedBlock: BlockState): b
   if (currentBlock.name !== proposedBlock.name) return true
   if (currentBlock.enabled !== proposedBlock.enabled) return true
   if (currentBlock.triggerMode !== proposedBlock.triggerMode) return true
+  if (currentBlock.errorEnabled !== proposedBlock.errorEnabled) return true
   if ((currentBlock.data?.parentId ?? null) !== (proposedBlock.data?.parentId ?? null)) return true
 
   // Compare subBlocks
@@ -73,7 +74,14 @@ function computeFieldDiff(
   const unchangedFields: string[] = []
 
   // Check basic fields
-  const fieldsToCheck = ['type', 'name', 'enabled', 'triggerMode', 'horizontalHandles'] as const
+  const fieldsToCheck = [
+    'type',
+    'name',
+    'enabled',
+    'triggerMode',
+    'horizontalHandles',
+    'errorEnabled',
+  ] as const
   for (const field of fieldsToCheck) {
     const currentValue = currentBlock[field]
     const proposedValue = proposedBlock[field]
diff --git a/apps/sim/lib/workflows/sanitization/json-sanitizer.ts b/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
index 2d4f09bba40..b345bcede82 100644
--- a/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
+++ b/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
@@ -1,4 +1,5 @@
 import { isRecordLike, sortObjectKeysDeep } from '@sim/utils/object'
+import { isPositionedSourceHandle } from '@sim/workflow-types/workflow'
 import type { Edge } from 'reactflow'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { sanitizeWorkflowForSharing } from '@/lib/workflows/credentials/credential-extractor'
@@ -33,6 +34,7 @@ interface CopilotBlockState {
   nestedNodes?: Record<string, CopilotBlockState>
   enabled: boolean
   advancedMode?: boolean
+  errorEnabled?: boolean
   triggerMode?: boolean
 }
 
@@ -491,7 +493,9 @@ function extractConnectionsForBlock(
 
   // Group by source handle (converting to simple format)
   for (const edge of outgoingEdges) {
-    let handle = edge.sourceHandle || 'source'
+    let handle = isPositionedSourceHandle(edge.sourceHandle)
+      ? 'source'
+      : edge.sourceHandle || 'source'
 
     // Convert internal UUID handles to simple format (if, else-if-0, route-0, etc.)
     handle = convertToSimpleHandle(handle, blockId, block)
@@ -603,6 +607,7 @@ export function sanitizeForCopilot(state: WorkflowState): CopilotWorkflowState {
     if (connections) result.connections = connections
     if (Object.keys(nestedNodes).length > 0) result.nestedNodes = nestedNodes
     if (block.advancedMode !== undefined) result.advancedMode = block.advancedMode
+    if (block.errorEnabled !== undefined) result.errorEnabled = block.errorEnabled
     if (block.triggerMode !== undefined) result.triggerMode = block.triggerMode
 
     // Note: outputs, position, height, layout, horizontalHandles are intentionally excluded
diff --git a/apps/sim/lib/workflows/subblocks/display.ts b/apps/sim/lib/workflows/subblocks/display.ts
index 26088c25fff..2399875a4f2 100644
--- a/apps/sim/lib/workflows/subblocks/display.ts
+++ b/apps/sim/lib/workflows/subblocks/display.ts
@@ -311,6 +311,18 @@ export const getDisplayValue = (value: unknown): string => {
   return stringValue.trim().length > 0 ? stringValue : '-'
 }
 
+/**
+ * Whether a collapsed-node row has a meaningful value to display.
+ * Rows whose value renders as the empty placeholder are hidden from the
+ * node preview so blocks only surface configured fields.
+ * `webhookUrlDisplay*` rows derive their value from the block id rather than
+ * the stored value, so they always count as displayable.
+ */
+export function hasDisplayableRowValue(subBlock: SubBlockConfig, rawValue: unknown): boolean {
+  if (subBlock.id.startsWith('webhookUrlDisplay')) return true
+  return getDisplayValue(rawValue) !== '-'
+}
+
 /**
  * Workflow id -> metadata lookup for the workflow selector resolvers.
  * `ready` gates resolution so missing entries only render as deleted once
diff --git a/apps/sim/stores/workflows/workflow/store.test.ts b/apps/sim/stores/workflows/workflow/store.test.ts
index f5072971faf..c0066dff668 100644
--- a/apps/sim/stores/workflows/workflow/store.test.ts
+++ b/apps/sim/stores/workflows/workflow/store.test.ts
@@ -976,6 +976,24 @@ describe('workflow store', () => {
     })
   })
 
+  describe('setBlockErrorEnabled', () => {
+    it('updates the persisted Error output flag', () => {
+      addBlock('function-1', 'function', 'Function 1', { x: 0, y: 0 })
+
+      useWorkflowStore.getState().setBlockErrorEnabled('function-1', true)
+
+      expect(useWorkflowStore.getState().blocks['function-1'].errorEnabled).toBe(true)
+    })
+
+    it('ignores an unknown block id', () => {
+      const before = useWorkflowStore.getState().blocks
+
+      useWorkflowStore.getState().setBlockErrorEnabled('missing', true)
+
+      expect(useWorkflowStore.getState().blocks).toEqual(before)
+    })
+  })
+
   describe('syncDynamicHandleSubblockValue', () => {
     it('should sync condition topology values into the workflow store', () => {
       addBlock('condition-1', 'condition', 'Condition 1', { x: 0, y: 0 })
diff --git a/apps/sim/stores/workflows/workflow/store.ts b/apps/sim/stores/workflows/workflow/store.ts
index 11008b1658f..71dbdf41532 100644
--- a/apps/sim/stores/workflows/workflow/store.ts
+++ b/apps/sim/stores/workflows/workflow/store.ts
@@ -784,6 +784,25 @@ export const useWorkflowStore = create<WorkflowStore>()(
         }
       },
 
+      setBlockErrorEnabled: (id: string, errorEnabled: boolean) => {
+        set((state) => {
+          const block = state.blocks[id]
+          if (!block) return state
+          return {
+            blocks: {
+              ...state.blocks,
+              [id]: {
+                ...block,
+                errorEnabled,
+              },
+            },
+            edges: [...state.edges],
+            loops: { ...state.loops },
+          }
+        })
+        get().updateLastSaved()
+      },
+
       setBlockAdvancedMode: (id: string, advancedMode: boolean) => {
         set((state) => ({
           blocks: {
diff --git a/apps/sim/stores/workflows/workflow/types.ts b/apps/sim/stores/workflows/workflow/types.ts
index 1afca6311a1..15d1c507aee 100644
--- a/apps/sim/stores/workflows/workflow/types.ts
+++ b/apps/sim/stores/workflows/workflow/types.ts
@@ -59,6 +59,7 @@ export interface WorkflowActions {
   batchToggleHandles: (ids: string[]) => void
   batchAddEdges: (edges: Edge[], options?: { skipValidation?: boolean }) => void
   batchRemoveEdges: (ids: string[]) => void
+  setBlockErrorEnabled: (id: string, errorEnabled: boolean) => void
   clear: () => Partial<WorkflowState>
   updateLastSaved: () => void
   setBlockEnabled: (id: string, enabled: boolean) => void
diff --git a/bun.lock b/bun.lock
index 272fa46bc3b..c23cefd5043 100644
--- a/bun.lock
+++ b/bun.lock
@@ -557,6 +557,7 @@
         "@sim/emcn": "workspace:*",
         "@sim/tsconfig": "workspace:*",
         "@sim/utils": "workspace:*",
+        "@sim/workflow-types": "workspace:*",
         "@types/react": "^19",
         "lucide-react": "^0.479.0",
         "react": "19.2.4",
@@ -568,6 +569,7 @@
       "peerDependencies": {
         "@sim/emcn": "workspace:*",
         "@sim/utils": "workspace:*",
+        "@sim/workflow-types": "workspace:*",
         "lucide-react": ">=0.479.0",
         "react": "^19",
         "reactflow": "^11.11.4",
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 80eebd30722..a80b428c4e9 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -21,6 +21,13 @@ const buttonVariants = cva(
         secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
         tertiary:
           'bg-[var(--brand-accent)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--brand-accent-hover)] dark:bg-[var(--brand-accent)] dark:hover-hover:bg-[var(--brand-accent-hover)] dark:text-[var(--text-inverse)] dark:hover-hover:text-[var(--text-inverse)]',
+        /* Fixed brand pairs, matching the workflow type tags rather than the
+           theme tokens — `graphite` is the Agent tag's fill and ink. Both hold
+           one value across modes, so neither takes a `dark:` override. */
+        graphite:
+          'bg-[#3B3B3B] text-[#F8F8F8] hover-hover:text-[#F8F8F8] hover-hover:brightness-125',
+        graphiteSubtle:
+          'bg-[#E6E6E6] text-[#3B3B3B] hover-hover:text-[#3B3B3B] hover-hover:brightness-[0.96]',
         ghost: 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
         subtle:
           'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]',
diff --git a/packages/emcn/src/components/chip-tag/chip-tag.tsx b/packages/emcn/src/components/chip-tag/chip-tag.tsx
index 32fe4cf022f..7e6a3934d02 100644
--- a/packages/emcn/src/components/chip-tag/chip-tag.tsx
+++ b/packages/emcn/src/components/chip-tag/chip-tag.tsx
@@ -20,6 +20,26 @@ import { cn } from '../../lib/cn'
  *   inverse-surface convention one step softer than near-black. For eyebrow
  *   kickers and emphasis labels that should read as a solid chip rather than a
  *   bordered one.
+ * - `workflow` — the brand type cue for workflow cards. Pair with `tone`; the
+ *   icon inherits the label colour and remains the non-colour identifier.
+ *
+ *   These are fixed brand values, not derived ones — do not "correct" a hex
+ *   for contrast or gamut. Every label is one of two inks: `#F8F8F8` when the
+ *   fill is dark, `#1A1A1A` when it is light. `#3B3B3B` appears only as
+ *   `inverse`'s fill, never as text. One value serves both modes; the tones
+ *   carry no `dark:` overrides.
+ *
+ *   Contrast against the paired ink varies, and two pairs sit under WCAG AA
+ *   (4.5:1) for normal text: `green` at 3.98:1 and `orange` at 3.15:1. These
+ *   are brand decisions rather than oversights. Because the label is short and
+ *   always duplicated by an icon and the block name beside it, the tag is a
+ *   redundant cue rather than the sole carrier of the information — but do not
+ *   reuse either pairing anywhere the label stands alone.
+ *
+ *   `neutral` is the only tone that is not a solid fill — an unmapped block
+ *   type reads as a white, outlined slot rather than as one more colour in the
+ *   set. Every other tone is fill-only, so it is also the only one whose edge
+ *   depends on the ring rather than on the fill itself.
  * - `invite` — recipient pill used in invite/sharing flows. Borrows the chip
  *   family's icon gap (`gap-1.5`), `--text-body` label, and `--text-icon`
  *   leading/trailing icons; pairs with the `invalid` boolean to flip to an
@@ -33,10 +53,20 @@ const chipTagVariants = cva(
         mono: 'h-5 gap-[3px] px-1 bg-[var(--surface-5)] text-[var(--text-primary)] dark:bg-[var(--surface-4)]',
         gray: 'h-5 gap-[3px] px-1 bg-[var(--surface-5)] text-[var(--text-secondary)] shadow-[inset_0_0_0_1px_var(--border-1)]',
         solid: 'h-5 gap-[3px] px-1 bg-[var(--text-secondary)] text-[var(--text-inverse)]',
+        workflow: 'h-5 gap-[3px] px-1',
         invite:
           'h-5 gap-1.5 px-1 bg-[var(--surface-5)] text-[var(--text-body)] shadow-[inset_0_0_0_1px_var(--border-1)] dark:bg-[var(--surface-4)]',
       },
       invalid: { true: '', false: '' },
+      tone: {
+        neutral: '',
+        inverse: '',
+        ash: '',
+        orange: '',
+        blue: '',
+        green: '',
+        yellow: '',
+      },
     },
     compoundVariants: [
       {
@@ -44,8 +74,27 @@ const chipTagVariants = cva(
         invalid: true,
         className: 'bg-[var(--badge-error-bg)] text-[var(--text-error)] shadow-none',
       },
+      {
+        variant: 'workflow',
+        tone: 'neutral',
+        /* The only outlined tone. An unmapped block type reads as an empty
+           slot rather than a colour, so the fill is plain white and an inset
+           ring — not a border — carries the edge, keeping the tag the same
+           size as every filled sibling. */
+        className: 'bg-[#FFFFFF] text-[#1A1A1A] shadow-[inset_0_0_0_1px_#C3C3C3]',
+      },
+      { variant: 'workflow', tone: 'inverse', className: 'bg-[#3B3B3B] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'ash', className: 'bg-[#E6E6E6] text-[#1A1A1A]' },
+      { variant: 'workflow', tone: 'orange', className: 'bg-[#FF4C00] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'blue', className: 'bg-[#0062FF] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'green', className: 'bg-[#188F00] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'yellow', className: 'bg-[#FFEF08] text-[#1A1A1A]' },
     ],
-    defaultVariants: { variant: 'mono', invalid: false },
+    defaultVariants: {
+      variant: 'mono',
+      invalid: false,
+      tone: 'neutral',
+    },
   }
 )
 
@@ -94,6 +143,7 @@ export interface ChipTagProps
 export function ChipTag({
   variant,
   invalid,
+  tone,
   className,
   children,
   leftIcon: LeftIcon,
@@ -103,11 +153,17 @@ export function ChipTag({
   rightIconDisabled,
   ...props
 }: ChipTagProps) {
-  const iconClass = cn('size-[14px] flex-shrink-0', !invalid && 'text-[var(--text-icon)]')
+  /* `workflow` icons inherit the tone's tinted label colour. The shared
+     `--text-icon` gray is tuned for this component's light surfaces and would
+     all but disappear on a tone's deep fill. */
+  const iconClass = cn(
+    'size-[14px] flex-shrink-0',
+    !invalid && variant !== 'workflow' && 'text-[var(--text-icon)]'
+  )
   const interactive = RightIcon != null && onRightIconClick != null
 
   return (
-    <span className={cn(chipTagVariants({ variant, invalid }), className)} {...props}>
+    <span className={cn(chipTagVariants({ variant, invalid, tone }), className)} {...props}>
       {LeftIcon ? <LeftIcon className={iconClass} /> : null}
       {children}
       {RightIcon ? (
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index b9b3d37165c..cedc7d4dfa4 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -189,6 +189,7 @@ export {
   isFocusVisible,
   isTextClipped,
   Tooltip,
+  type UseFloatingTooltipOptions,
   useFloatingTooltip,
   useIsOverflowing,
 } from './tooltip/tooltip'
diff --git a/packages/emcn/src/components/tooltip/tooltip.tsx b/packages/emcn/src/components/tooltip/tooltip.tsx
index 0c600553338..bf5e59cccdc 100644
--- a/packages/emcn/src/components/tooltip/tooltip.tsx
+++ b/packages/emcn/src/components/tooltip/tooltip.tsx
@@ -57,6 +57,14 @@ const HIDDEN_STATE: FloatingTooltipState = {
   alignY: 'below',
 }
 
+export interface UseFloatingTooltipOptions {
+  /**
+   * Prefer placing the bubble above the cursor. Still flips below when the
+   * pointer is too close to the top of the viewport.
+   */
+  preferAbove?: boolean
+}
+
 /**
  * Drives a pointer-reactive floating tooltip. `canShow` is queried on every
  * gesture with the event target, letting the caller gate the tooltip on its own
@@ -64,12 +72,17 @@ const HIDDEN_STATE: FloatingTooltipState = {
  * a {@link FloatingTooltip} and a stable set of {@link FloatingTooltipHandlers}
  * to spread onto the trigger element.
  */
-export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
+export function useFloatingTooltip(
+  canShow: (target: HTMLElement) => boolean,
+  options: UseFloatingTooltipOptions = {}
+): {
   state: FloatingTooltipState
   handlers: FloatingTooltipHandlers
 } {
   const canShowRef = React.useRef(canShow)
   canShowRef.current = canShow
+  const preferAboveRef = React.useRef(options.preferAbove === true)
+  preferAboveRef.current = options.preferAbove === true
 
   const lastPointerRef = React.useRef<PointerSnapshot | null>(null)
   const [state, setState] = React.useState<FloatingTooltipState>(HIDDEN_STATE)
@@ -80,11 +93,14 @@ export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
       setState((current) => (current.visible ? HIDDEN_STATE : current))
     }
 
+    const position = (clientX: number, clientY: number) =>
+      getTooltipPosition(clientX, clientY, preferAboveRef.current)
+
     const showStatic = (clientX: number, clientY: number) => {
       lastPointerRef.current = { x: clientX, y: clientY, time: performance.now() }
       setState({
         visible: true,
-        ...getTooltipPosition(clientX, clientY),
+        ...position(clientX, clientY),
         skew: 0,
         scaleX: 1,
         scaleY: 1,
@@ -108,7 +124,7 @@ export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
         lastPointerRef.current = { x: event.clientX, y: event.clientY, time: now }
         setState({
           visible: true,
-          ...getTooltipPosition(event.clientX, event.clientY),
+          ...position(event.clientX, event.clientY),
           skew: clamp(velocityX * 0.11, -6, 6),
           scaleX: 1 + Math.min(0.035, velocity / 1100),
           scaleY: 1 - Math.min(0.02, velocity / 1500),
@@ -124,7 +140,9 @@ export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
         lastPointerRef.current = null
         setState({
           visible: true,
-          ...getTooltipPosition(rect.left + rect.width / 2, rect.bottom),
+          /* Anchor on the edge the bubble grows away from, or a `preferAbove`
+             tooltip lands inside a trigger taller than the offset. */
+          ...position(rect.left + rect.width / 2, preferAboveRef.current ? rect.top : rect.bottom),
           skew: 0,
           scaleX: 1,
           scaleY: 1,
@@ -253,7 +271,10 @@ export const FloatingTooltip = React.memo(function FloatingTooltip({
       )}
       style={{
         transform: `${getTooltipTranslate(state, offset)} skew(${state.skew}deg) scale(${state.scaleX}, ${state.scaleY})`,
-        transformOrigin: state.alignX === 'left' ? '12px 12px' : 'calc(100% - 12px) 12px',
+        transformOrigin: [
+          state.alignX === 'left' ? '12px' : 'calc(100% - 12px)',
+          state.alignY === 'below' ? '12px' : 'calc(100% - 12px)',
+        ].join(' '),
       }}
     >
       {children ?? <span className='block whitespace-normal break-words text-left'>{label}</span>}
@@ -264,14 +285,17 @@ export const FloatingTooltip = React.memo(function FloatingTooltip({
 
 function getTooltipPosition(
   clientX: number,
-  clientY: number
+  clientY: number,
+  preferAbove = false
 ): Pick<FloatingTooltipState, 'x' | 'y' | 'alignX' | 'alignY'> {
   if (typeof window === 'undefined') {
-    return { x: clientX, y: clientY, alignX: 'left', alignY: 'below' }
+    return { x: clientX, y: clientY, alignX: 'left', alignY: preferAbove ? 'above' : 'below' }
   }
 
   const alignX = window.innerWidth - clientX < EDGE_THRESHOLD ? 'right' : 'left'
-  const alignY = window.innerHeight - clientY < EDGE_THRESHOLD / 2 ? 'above' : 'below'
+  const nearTop = clientY < EDGE_THRESHOLD / 2
+  const nearBottom = window.innerHeight - clientY < EDGE_THRESHOLD / 2
+  const alignY = preferAbove ? (nearTop ? 'below' : 'above') : nearBottom ? 'above' : 'below'
 
   return {
     x: clamp(clientX, EDGE_GUTTER, window.innerWidth - EDGE_GUTTER),
@@ -324,6 +348,11 @@ interface RootProps {
   children: React.ReactNode
   /** Accepted for API compatibility; the floating tooltip has no hover delay. */
   delayDuration?: number
+  /**
+   * Prefer the bubble above the cursor (e.g. action bars sitting on top of a card).
+   * Still flips below when the pointer is too close to the top of the viewport.
+   */
+  preferAbove?: boolean
 }
 
 /**
@@ -340,9 +369,9 @@ interface RootProps {
  * </Tooltip.Root>
  * ```
  */
-function Root({ children }: RootProps) {
+function Root({ children, preferAbove = false }: RootProps) {
   const contentId = React.useId()
-  const { state, handlers } = useFloatingTooltip(ALWAYS_SHOW)
+  const { state, handlers } = useFloatingTooltip(ALWAYS_SHOW, { preferAbove })
   const value = React.useMemo<TooltipContextValue>(
     () => ({ state, handlers, contentId }),
     [state, handlers, contentId]
diff --git a/packages/realtime-protocol/src/constants.ts b/packages/realtime-protocol/src/constants.ts
index 37074c5a807..4ab84e87c16 100644
--- a/packages/realtime-protocol/src/constants.ts
+++ b/packages/realtime-protocol/src/constants.ts
@@ -4,6 +4,7 @@ export const BLOCK_OPERATIONS = {
   TOGGLE_ENABLED: 'toggle-enabled',
   UPDATE_PARENT: 'update-parent',
   UPDATE_ADVANCED_MODE: 'update-advanced-mode',
+  UPDATE_ERROR_ENABLED: 'update-error-enabled',
   UPDATE_CANONICAL_MODE: 'update-canonical-mode',
   REPLACE_CANONICAL_MODES: 'replace-canonical-modes',
   TOGGLE_HANDLES: 'toggle-handles',
diff --git a/packages/realtime-protocol/src/schemas.ts b/packages/realtime-protocol/src/schemas.ts
index 3dd8da3bcc0..97c9a7c63ca 100644
--- a/packages/realtime-protocol/src/schemas.ts
+++ b/packages/realtime-protocol/src/schemas.ts
@@ -32,6 +32,7 @@ export const BlockOperationSchema = z.object({
     BLOCK_OPERATIONS.TOGGLE_ENABLED,
     BLOCK_OPERATIONS.UPDATE_PARENT,
     BLOCK_OPERATIONS.UPDATE_ADVANCED_MODE,
+    BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED,
     BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE,
     BLOCK_OPERATIONS.REPLACE_CANONICAL_MODES,
     BLOCK_OPERATIONS.TOGGLE_HANDLES,
@@ -50,6 +51,7 @@ export const BlockOperationSchema = z.object({
     extent: z.enum(['parent']).nullable().optional(),
     enabled: z.boolean().optional(),
     advancedMode: z.boolean().optional(),
+    errorEnabled: z.boolean().optional(),
     horizontalHandles: z.boolean().optional(),
     canonicalId: z.string().optional(),
     canonicalMode: z.enum(['basic', 'advanced']).optional(),
diff --git a/packages/testing/src/factories/permission.factory.ts b/packages/testing/src/factories/permission.factory.ts
index 78de7f85f8a..e4ce62c951c 100644
--- a/packages/testing/src/factories/permission.factory.ts
+++ b/packages/testing/src/factories/permission.factory.ts
@@ -260,6 +260,7 @@ const BLOCK_OPERATIONS = {
   TOGGLE_ENABLED: 'toggle-enabled',
   UPDATE_PARENT: 'update-parent',
   UPDATE_ADVANCED_MODE: 'update-advanced-mode',
+  UPDATE_ERROR_ENABLED: 'update-error-enabled',
   UPDATE_CANONICAL_MODE: 'update-canonical-mode',
   TOGGLE_HANDLES: 'toggle-handles',
 } as const
diff --git a/packages/workflow-persistence/src/load.ts b/packages/workflow-persistence/src/load.ts
index 6d16e41427a..533fb99dcd4 100644
--- a/packages/workflow-persistence/src/load.ts
+++ b/packages/workflow-persistence/src/load.ts
@@ -1,7 +1,11 @@
 import { db, workflow, workflowBlocks, workflowEdges, workflowSubflows } from '@sim/db'
 import { createLogger } from '@sim/logger'
 import type { BlockState, Loop, Parallel } from '@sim/workflow-types/workflow'
-import { SUBFLOW_TYPES } from '@sim/workflow-types/workflow'
+import {
+  normalizePositionedSourceHandleId,
+  normalizePositionedTargetHandleId,
+  SUBFLOW_TYPES,
+} from '@sim/workflow-types/workflow'
 import { and, eq, getTableColumns, isNull, sql } from 'drizzle-orm'
 import type { Edge } from 'reactflow'
 import { clampParallelBatchSize } from './subflow-helpers'
@@ -82,6 +86,7 @@ export async function loadWorkflowFromNormalizedTablesRaw(
         enabled: block.enabled,
         horizontalHandles: block.horizontalHandles,
         advancedMode: block.advancedMode,
+        errorEnabled: blockData?.errorEnabled === true,
         triggerMode: block.triggerMode,
         height: Number(block.height),
         subBlocks: (block.subBlocks as BlockState['subBlocks']) || {},
@@ -98,8 +103,8 @@ export async function loadWorkflowFromNormalizedTablesRaw(
       id: edge.id,
       source: edge.sourceBlockId,
       target: edge.targetBlockId,
-      sourceHandle: edge.sourceHandle ?? undefined,
-      targetHandle: edge.targetHandle ?? undefined,
+      sourceHandle: normalizePositionedSourceHandleId(edge.sourceHandle ?? undefined),
+      targetHandle: normalizePositionedTargetHandleId(edge.targetHandle ?? undefined),
       type: 'default',
       data: {},
     }))
diff --git a/packages/workflow-persistence/src/save.ts b/packages/workflow-persistence/src/save.ts
index fefe1d354d6..0093f1f443c 100644
--- a/packages/workflow-persistence/src/save.ts
+++ b/packages/workflow-persistence/src/save.ts
@@ -2,7 +2,11 @@ import { db, workflowBlocks, workflowEdges, workflowSubflows } from '@sim/db'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import type { BlockState, WorkflowState } from '@sim/workflow-types/workflow'
-import { SUBFLOW_TYPES } from '@sim/workflow-types/workflow'
+import {
+  normalizePositionedSourceHandleId,
+  normalizePositionedTargetHandleId,
+  SUBFLOW_TYPES,
+} from '@sim/workflow-types/workflow'
 import type { InferInsertModel } from 'drizzle-orm'
 import { eq } from 'drizzle-orm'
 import { generateLoopBlocks, generateParallelBlocks } from './subflow-helpers'
@@ -43,7 +47,10 @@ export async function saveWorkflowToNormalizedTables(
         height: String(block.height || 0),
         subBlocks: block.subBlocks || {},
         outputs: block.outputs || {},
-        data: block.data || {},
+        data: {
+          ...(block.data || {}),
+          errorEnabled: block.errorEnabled ?? false,
+        },
         parentId: block.data?.parentId || null,
         extent: block.data?.extent || null,
         locked: block.locked ?? false,
@@ -58,8 +65,8 @@ export async function saveWorkflowToNormalizedTables(
         workflowId,
         sourceBlockId: edge.source,
         targetBlockId: edge.target,
-        sourceHandle: edge.sourceHandle || null,
-        targetHandle: edge.targetHandle || null,
+        sourceHandle: normalizePositionedSourceHandleId(edge.sourceHandle || null),
+        targetHandle: normalizePositionedTargetHandleId(edge.targetHandle || null),
       }))
 
       await tx.insert(workflowEdges).values(edgeInserts)
diff --git a/packages/workflow-renderer/package.json b/packages/workflow-renderer/package.json
index d31bb33c895..1cc6f951e6a 100644
--- a/packages/workflow-renderer/package.json
+++ b/packages/workflow-renderer/package.json
@@ -28,6 +28,7 @@
   "peerDependencies": {
     "@sim/emcn": "workspace:*",
     "@sim/utils": "workspace:*",
+    "@sim/workflow-types": "workspace:*",
     "lucide-react": ">=0.479.0",
     "react": "^19",
     "reactflow": "^11.11.4",
@@ -38,6 +39,7 @@
     "@sim/emcn": "workspace:*",
     "@sim/tsconfig": "workspace:*",
     "@sim/utils": "workspace:*",
+    "@sim/workflow-types": "workspace:*",
     "@types/react": "^19",
     "lucide-react": "^0.479.0",
     "react": "19.2.4",
diff --git a/packages/workflow-renderer/src/dimensions.ts b/packages/workflow-renderer/src/dimensions.ts
index 736e95b7727..0092d5252ae 100644
--- a/packages/workflow-renderer/src/dimensions.ts
+++ b/packages/workflow-renderer/src/dimensions.ts
@@ -11,8 +11,27 @@ export const BLOCK_DIMENSIONS = {
   FIXED_WIDTH: 250,
   HEADER_HEIGHT: 40,
   MIN_HEIGHT: 100,
+  /**
+   * Shortest card the border renderer reliably paints. Below ~48px its
+   * animation frame yields no path and the card renders bodiless. Header-only
+   * cards must size their DOM host to this same value — a shorter host with
+   * `preserveAspectRatio='none'` vertically squashes the action-menu tab.
+   */
+  MIN_PAINTED_HEIGHT: 48,
   WORKFLOW_CONTENT_PADDING: 16,
-  WORKFLOW_ROW_HEIGHT: 29,
+  /** One rendered summary row (text-sm line box). */
+  WORKFLOW_ROW_HEIGHT: 20,
+  /** `gap-2` between sections inside the card's content column. */
+  WORKFLOW_CONTENT_GAP: 8,
+  /** The error-output row: a short gray bar sized to its 20px switch. */
+  WORKFLOW_ERROR_ROW_HEIGHT: 24,
+  /** Chips row: the 20px ChipTag itself — the gap to the next section is
+   * added by WORKFLOW_CONTENT_GAP, not baked in here. */
+  WORKFLOW_CHIPS_ROW_HEIGHT: 20,
+  /** Natural-language summary line height (text-sm with inline value chips). */
+  WORKFLOW_SENTENCE_LINE_HEIGHT: 24,
+  /** Footer divider above the error row: 1px border + 6px padding */
+  WORKFLOW_FOOTER_DIVIDER_HEIGHT: 7,
   NOTE_CONTENT_PADDING: 14,
   NOTE_MIN_CONTENT_HEIGHT: 20,
   NOTE_BASE_CONTENT_HEIGHT: 60,
@@ -39,6 +58,8 @@ export const HANDLE_POSITIONS = {
   DEFAULT_Y_OFFSET: 20,
   /** Error handle offset from block bottom */
   ERROR_BOTTOM_OFFSET: 17,
+  /** Error knob center inset from the card's right edge. */
+  ERROR_RIGHT_OFFSET: 30,
   /**
    * Y of the first condition-row handle: 40px header + 1px divider +
    * 8px content padding + half of the 20px row
diff --git a/packages/workflow-renderer/src/edge/workflow-edge-view.tsx b/packages/workflow-renderer/src/edge/workflow-edge-view.tsx
index 6256d8f70df..e52c8b461ab 100644
--- a/packages/workflow-renderer/src/edge/workflow-edge-view.tsx
+++ b/packages/workflow-renderer/src/edge/workflow-edge-view.tsx
@@ -18,6 +18,11 @@ export interface WorkflowEdgeViewProps extends EdgeProps {
   runStatus: EdgeRunStatus
   /** Whether `runStatus` came from a preview run (drives success coloring). */
   isPreviewRun: boolean
+  /**
+   * Whether either endpoint block is selected on the canvas — brightens the
+   * edge alongside the selected node. Status colors (diff/run/error) win.
+   */
+  isConnectedToSelection?: boolean
 }
 
 /**
@@ -44,6 +49,7 @@ export function WorkflowEdgeView({
   diffStatus,
   runStatus,
   isPreviewRun,
+  isConnectedToSelection = false,
 }: WorkflowEdgeViewProps) {
   const isHorizontal = sourcePosition === 'right' || sourcePosition === 'left'
 
@@ -80,6 +86,9 @@ export function WorkflowEdgeView({
     } else if (isErrorEdge) {
       // Error edges that weren't taken stay red
       color = 'var(--text-error)'
+    } else if (isConnectedToSelection) {
+      // Match the selected block ring / swell (`--text-secondary`)
+      color = 'var(--text-secondary)'
     }
 
     if (isSelected) {
@@ -87,19 +96,14 @@ export function WorkflowEdgeView({
     }
 
     return {
-      ...(style ?? {}),
-      strokeWidth: diffStatus
-        ? 3
-        : runStatus === 'success' || runStatus === 'error'
-          ? 2.5
-          : isSelected
-            ? 2.5
-            : 2,
-      stroke: color,
+      strokeWidth: diffStatus ? 2.5 : runStatus === 'success' || runStatus === 'error' ? 2 : 1.5,
       strokeDasharray: diffStatus === 'deleted' ? '10,5' : undefined,
       opacity,
+      ...(style ?? {}),
+      // Selection/status stroke must win over any default edge style.
+      stroke: color,
     }
-  }, [style, diffStatus, isSelected, isErrorEdge, runStatus, isPreviewRun])
+  }, [style, diffStatus, isSelected, isErrorEdge, runStatus, isPreviewRun, isConnectedToSelection])
 
   return (
     <>
diff --git a/packages/workflow-renderer/src/index.ts b/packages/workflow-renderer/src/index.ts
index 0c6938dc112..9e462e430e9 100644
--- a/packages/workflow-renderer/src/index.ts
+++ b/packages/workflow-renderer/src/index.ts
@@ -1,5 +1,6 @@
 export * from './dimensions'
 export { WorkflowEdgeView, type WorkflowEdgeViewProps } from './edge/workflow-edge-view'
+export { humanizeBlockName } from './lib/humanize-block-name'
 export { NoteBlockView, type NoteBlockViewProps } from './note/note-block-view'
 export {
   type SubflowNodeData,
@@ -7,8 +8,29 @@ export {
   type SubflowNodeViewProps,
 } from './subflow/subflow-node-view'
 export type { BlockRunStatus, DiffStatus, EdgeDiffStatus, EdgeRunStatus } from './types'
+export {
+  CURSOR_SOURCE_HANDLE_ID,
+  getCursorBranchSourceHandleId,
+  getCursorSourceHandleId,
+  getCursorSourceHandlePosition,
+  normalizeCursorSourceHandleId,
+} from './workflow-block/source-handle'
 export { SubBlockRowView, type SubBlockRowViewProps } from './workflow-block/sub-block-row-view'
 export {
+  CONNECTION_KNOB_PEAK_PX,
+  CURSOR_SWELL_LENGTH_PX,
+  getWorkflowBorderFrameDeltaSeconds,
+  isActionMenuSwellReady,
+  WorkflowBlockBorder,
+  type WorkflowBorderCursorHandle,
+  type WorkflowBorderPort,
+} from './workflow-block/workflow-block-border'
+export {
+  ERROR_SOURCE_HANDLE_POSITION,
+  getErrorBorderPort,
+  getErrorSourceHandleStyle,
+  getNearestBranchCursorHandleId,
+  getWorkflowTypeAccent,
   WorkflowBlockView,
   type WorkflowBlockViewProps,
 } from './workflow-block/workflow-block-view'
diff --git a/packages/workflow-renderer/src/lib/humanize-block-name.ts b/packages/workflow-renderer/src/lib/humanize-block-name.ts
new file mode 100644
index 00000000000..31e83b6b269
--- /dev/null
+++ b/packages/workflow-renderer/src/lib/humanize-block-name.ts
@@ -0,0 +1,20 @@
+/**
+ * Humanizes a block's technical name for the card title: camelCase,
+ * snake_case, and kebab-case become spaced Title Case ("updatePosted" →
+ * "Update Posted", "did_it_post" → "Did It Post"). Existing capitals and
+ * acronym runs are preserved ("APICall" → "API Call"); names that are
+ * already natural language pass through unchanged.
+ */
+export function humanizeBlockName(name: string): string {
+  const spaced = name
+    .replace(/[_-]+/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (!spaced) return name
+  return spaced
+    .split(' ')
+    .map((word) => (word ? word.charAt(0).toUpperCase() + word.slice(1) : word))
+    .join(' ')
+}
diff --git a/packages/workflow-renderer/src/workflow-block/source-handle.ts b/packages/workflow-renderer/src/workflow-block/source-handle.ts
new file mode 100644
index 00000000000..31736795f00
--- /dev/null
+++ b/packages/workflow-renderer/src/workflow-block/source-handle.ts
@@ -0,0 +1,49 @@
+import {
+  getPositionedSourceHandleId,
+  type PositionedSourceHandleSide,
+  type WorkflowCardSide,
+} from '@sim/workflow-types/workflow'
+import { Position } from 'reactflow'
+
+export const CURSOR_SOURCE_HANDLE_ID = 'source-cursor'
+const CURSOR_BRANCH_SOURCE_HANDLE_PREFIX = `${CURSOR_SOURCE_HANDLE_ID}-branch-`
+
+/** Returns the temporary React Flow handle ID under the cursor swell. */
+export function getCursorSourceHandleId(side: PositionedSourceHandleSide): string {
+  return `${CURSOR_SOURCE_HANDLE_ID}-${side}`
+}
+
+/** Keeps a branch output distinct while its temporary handle follows the cursor swell. */
+export function getCursorBranchSourceHandleId(branchHandleId: string): string {
+  return `${CURSOR_BRANCH_SOURCE_HANDLE_PREFIX}${branchHandleId}`
+}
+
+/** Uses the physical swell edge for the temporary preview's exit direction. */
+export function getCursorSourceHandlePosition(side: WorkflowCardSide): Position {
+  if (side === 'top') return Position.Top
+  if (side === 'bottom') return Position.Bottom
+  if (side === 'left') return Position.Left
+  return Position.Right
+}
+
+/**
+ * Converts a temporary cursor handle into its persistent anchor.
+ *
+ * Outputs always leave from the right. The swell lets a drag START on any
+ * edge — including the left, which is the input side — but the connection it
+ * creates is an output, so it anchors right regardless of where the gesture
+ * began. Anchoring an output on the left would put an outgoing line on the
+ * input port and read as a second input.
+ */
+export function normalizeCursorSourceHandleId(
+  handleId: string | null | undefined
+): string | null | undefined {
+  if (handleId?.startsWith(CURSOR_BRANCH_SOURCE_HANDLE_PREFIX)) {
+    return handleId.slice(CURSOR_BRANCH_SOURCE_HANDLE_PREFIX.length)
+  }
+
+  const prefix = `${CURSOR_SOURCE_HANDLE_ID}-`
+  if (!handleId?.startsWith(prefix)) return handleId
+
+  return getPositionedSourceHandleId('right')
+}
diff --git a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
index 87c4ac824b4..3cdd3ace607 100644
--- a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
@@ -1,4 +1,5 @@
-import { cn } from '@sim/emcn'
+import type { ComponentType } from 'react'
+import { ChipTag, cn } from '@sim/emcn'
 import { OverflowSpan } from '../lib/overflow-span'
 
 /**
@@ -8,24 +9,99 @@ import { OverflowSpan } from '../lib/overflow-span'
  * strings, so this view carries no store, query, or registry coupling.
  */
 export interface SubBlockRowViewProps {
-  /** Subblock label, rendered capitalized on the left. */
+  /** Subblock label, rendered capitalized on the left (row variant). */
   title: string
   /** Resolved display value on the right; `undefined` hides the value span. */
   displayValue?: string
   /** Render the value in a monospace font (e.g. filter expressions). */
   isMonospace?: boolean
+  /**
+   * Leading icon for the `meta` variant; without one the variant falls back
+   * to the labeled `row` presentation.
+   */
+  icon?: ComponentType<{ className?: string }>
+  /**
+   * Presentation variant:
+   * - `row` (default): label/value summary line (hover drawer, fallbacks)
+   * - `meta`: icon + value line — the collapsed card's compact fact row
+   * - `statement-primary`: strong inline fragment (the operation)
+   * - `statement-muted`: muted inline fragment (the target / model)
+   * - `inline-value`: small value chip embedded in a summary sentence
+   * - `footer`: muted footer label (the error-port row)
+   */
+  variant?: 'row' | 'meta' | 'statement-primary' | 'statement-muted' | 'inline-value' | 'footer'
 }
 
 /**
- * Pure renderer for a collapsed block's subblock summary row: a capitalized
- * title and its resolved display value.
+ * Pure renderer for a collapsed block's subblock summary: a label/value row,
+ * an icon fact row, an inline statement fragment, or the footer error label.
  *
  * The fixed `h-5` row height is part of the handle-position contract —
  * `HANDLE_POSITIONS.CONDITION_ROW_HEIGHT` in dimensions.ts assumes a 20px row
  * plus the container's 8px gap, so condition/router source handles align with
  * their rows.
  */
-export function SubBlockRowView({ title, displayValue, isMonospace }: SubBlockRowViewProps) {
+export function SubBlockRowView({
+  title,
+  displayValue,
+  isMonospace,
+  icon: Icon,
+  variant = 'row',
+}: SubBlockRowViewProps) {
+  if (variant === 'inline-value') {
+    return (
+      <ChipTag
+        variant='mono'
+        className='inline-flex max-w-[160px] translate-y-[-1px] bg-[var(--surface-2)] align-middle shadow-[inset_0_0_0_1px_var(--border-1)] dark:bg-[var(--surface-2)]'
+      >
+        <OverflowSpan
+          value={displayValue ?? title}
+          className={cn('min-w-0 truncate', isMonospace && 'font-mono')}
+        />
+      </ChipTag>
+    )
+  }
+
+  if (variant === 'statement-primary' || variant === 'statement-muted') {
+    return (
+      <OverflowSpan
+        value={displayValue ?? title}
+        className={cn(
+          'min-w-0 truncate text-sm',
+          variant === 'statement-primary'
+            ? 'font-medium text-[var(--text-primary)]'
+            : 'text-[var(--text-muted)]'
+        )}
+      />
+    )
+  }
+
+  if (variant === 'meta' && Icon) {
+    return (
+      <div className='flex min-w-0 items-center gap-2'>
+        <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+        <OverflowSpan
+          value={displayValue ?? '-'}
+          className={cn(
+            'min-w-0 flex-1 truncate text-left text-[var(--text-primary)] text-sm',
+            isMonospace && 'font-mono'
+          )}
+        />
+      </div>
+    )
+  }
+
+  if (variant === 'footer') {
+    return (
+      <div className='flex items-center'>
+        <OverflowSpan
+          value={title}
+          className='min-w-0 truncate text-[var(--text-muted)] text-sm capitalize'
+        />
+      </div>
+    )
+  }
+
   return (
     <div className='flex h-5 items-center gap-2'>
       <OverflowSpan
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx
new file mode 100644
index 00000000000..d1dc3d15a0e
--- /dev/null
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx
@@ -0,0 +1,1652 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import {
+  getHorizontalWorkflowHandleSide,
+  isPositionedSourceHandle,
+  type PositionedSourceHandleSide,
+  type WorkflowCardSide,
+} from '@sim/workflow-types/workflow'
+import { BLOCK_DIMENSIONS } from '../dimensions'
+
+const BORDER_PADDING_PX = 36
+const SAMPLE_SPACING_PX = 1
+/**
+ * How far every connection knob stands off the card edge. Edges anchor exactly
+ * this far out (the `-7px` handle outsets in workflow-block-view), so the two
+ * must stay equal or the line detaches from the knob.
+ */
+export const CONNECTION_KNOB_PEAK_PX = 7
+const CURSOR_PEAK_PX = CONNECTION_KNOB_PEAK_PX
+const PORT_FILL_STROKE_WIDTH_PX = 24
+/** The silhouette's outline. Half of it sits outside the filled shape. */
+const SILHOUETTE_STROKE_WIDTH_PX = 1.5
+/**
+ * Displacement below this reads as flat, so `bulgeContribution` zeroes it. The
+ * painted knob has to stop at the same place or the colour carries on down the
+ * straight wall as a thin leg past the shape it is filling.
+ */
+const BULGE_VISIBLE_THRESHOLD_PX = 0.25
+export const CURSOR_SWELL_LENGTH_PX = 38
+/** Shared swell proportions — plateau and shoulder as fractions of tab length. */
+const CONNECTION_PLATEAU_RATIO = 0.4
+const CONNECTION_SHOULDER_RATIO = 0.3
+/** Arc length the cursor swell occupies either side of its centre. */
+const CURSOR_HALF_FOOTPRINT_PX =
+  (CURSOR_SWELL_LENGTH_PX * CONNECTION_PLATEAU_RATIO) / 2 +
+  CURSOR_SWELL_LENGTH_PX * CONNECTION_SHOULDER_RATIO
+/**
+ * How far edge hover reaches into a card. Keeping this narrow preserves the
+ * title and body as an unambiguous grab surface while leaving the border easy
+ * to acquire.
+ */
+const CURSOR_EDGE_INSET_PX = 12
+/**
+ * Outside the card, activation matches the temporary handle's physical reach
+ * so the swell, cursor, and connection-start area stay in agreement.
+ */
+const CURSOR_EDGE_OUTSET_PX = 20
+const CURSOR_TRACKING_MARGIN_PX = 36
+const MAGNETIZE_DISTANCE_PX = 30
+/** Base peak of the action-menu tab, scaled by its own amplitude. */
+const ACTION_MENU_PEAK_PX = 4
+/**
+ * Action-menu swell proportions, calibrated on the canonical bar (164px /
+ * Condition & 5-icon cards). Shoulders stay a fixed 36px so every card shares
+ * the same taper angle, top radius, and concave fillet. The taper budget is
+ * also a fixed 56px (28px/side) subtracted from the measured bar width — not a
+ * width ratio — so shorter bars (Start, 4 icons) keep the same flat-edge→icon
+ * inset as Condition. Ratio-scaling that 56px with width pulled Start’s flat
+ * edge outward relative to the icons and read as extra dead gray on the left.
+ */
+const ACTION_MENU_TAPER_PX = 56
+const ACTION_MENU_SHOULDER_PX = 36
+const ACTION_MENU_CURVE_MID_X = 0.6402
+const ACTION_MENU_CURVE_MID_Y = 0.6995
+const ACTION_MENU_CURVE_TOP_X1 = 0.1998
+const ACTION_MENU_CURVE_TOP_X2 = 0.1978
+const ACTION_MENU_CURVE_BOTTOM_X1 = 0.8057
+const ACTION_MENU_CURVE_BOTTOM_Y1 = 0.9606
+const ACTION_MENU_CURVE_BOTTOM_X2 = 0.9257
+const ACTION_MENU_CURVE_BOTTOM_Y2 = 0.9967
+const SPRING_STIFFNESS = 300
+const SPRING_DAMPING = 32
+const ACTION_MENU_SPRING_STIFFNESS = 480
+const ACTION_MENU_SPRING_DAMPING = 38
+/**
+ * Must stay above the action row's own height as a fraction of the fully-open
+ * swell (24px of buttons in a 28px swell = 0.857). Below that the row is
+ * revealed while the swell is still shorter than it is, and because the row
+ * clips to the swell height the icons collide with the card's top edge for the
+ * remainder of the opening spring.
+ */
+const ACTION_MENU_CONTENT_READY_THRESHOLD = 0.9
+/** Quick deswell when the swell hands off to a hovered knob. */
+const CURSOR_SNAP_SPRING_STIFFNESS = 560
+const CURSOR_SNAP_SPRING_DAMPING = 42
+const MAX_PORT_AMPLITUDE = 7
+const MAX_SILHOUETTE_OUTSET_PX = ACTION_MENU_PEAK_PX * MAX_PORT_AMPLITUDE
+/**
+ * Amplitude below which the swell may cross a coloured knob's zone. At 0.2 the
+ * bump is under 1.5px — effectively gone — so the swell re-emerges on the far
+ * side already growing instead of waiting to die completely and restart from
+ * zero, which read as a long blank gap after passing a knob.
+ */
+const CURSOR_CROSSING_AMPLITUDE = 0.2
+const MAX_FRAME_DELTA_SECONDS = 1 / 30
+
+/**
+ * Returns a monotonic, capped animation step. Synchronous repaints can occur
+ * between requested frames, so a later callback may carry an older timestamp.
+ */
+export const getWorkflowBorderFrameDeltaSeconds = (
+  timestamp: number,
+  previousTimestamp: number
+) => {
+  if (!Number.isFinite(timestamp)) return 0
+  if (previousTimestamp === 0) return 1 / 60
+  const elapsed = (timestamp - previousTimestamp) / 1000
+  if (!Number.isFinite(elapsed)) return 0
+  return Math.min(MAX_FRAME_DELTA_SECONDS, Math.max(0, elapsed))
+}
+
+export const isActionMenuSwellReady = (target: number, value: number) =>
+  target === 1 && value >= ACTION_MENU_CONTENT_READY_THRESHOLD
+
+export interface WorkflowBorderPort {
+  id: string
+  side: WorkflowCardSide
+  position: number | 'center' | { fromEnd: number }
+  plateau: number
+  color?: string
+  restAmplitude?: number
+  hoverAmplitude?: number
+  magnetizable?: boolean
+  revealOnCardHover?: boolean
+}
+
+export interface WorkflowBorderCursorHandle {
+  side: PositionedSourceHandleSide
+  edgeSide: WorkflowCardSide
+  x: number
+  y: number
+}
+
+interface WorkflowBlockBorderProps {
+  nodeId?: string
+  getConnectionNodeId?: () => string | null
+  ports: WorkflowBorderPort[]
+  radius?: number
+  hasRing: boolean
+  ringStyles: string
+  /**
+   * Card height in layout px. Must match what the card actually renders — the
+   * silhouette is drawn from it, so an over-estimate paints a card taller than
+   * its content. Omit to measure the host instead (read-only surfaces).
+   */
+  height?: number
+  onCursorHandleChange?: (handle: WorkflowBorderCursorHandle | null) => void
+  onActionMenuReadyChange?: (ready: boolean) => void
+}
+
+interface PerimeterPoint {
+  s: number
+  x: number
+  y: number
+  nx: number
+  ny: number
+  tx: number
+  ty: number
+}
+
+interface PerimeterSegment {
+  kind: 'line' | 'arc'
+  startS: number
+  length: number
+  radius?: number
+  pointAt: (distance: number) => Omit<PerimeterPoint, 's'>
+}
+
+interface PerimeterGeometry {
+  samples: PerimeterPoint[]
+  segments: PerimeterSegment[]
+  length: number
+}
+
+interface PortSample extends WorkflowBorderPort {
+  s: number
+}
+
+interface SpringValue {
+  value: number
+  velocity: number
+  target: number
+}
+
+interface BulgeFeature {
+  center: number
+  plateau: number
+  peak: number
+  shoulder: number
+  falloff?: 'action-menu'
+}
+
+interface ActiveInterval {
+  start: number
+  end: number
+}
+
+const isPrimaryConnectionPort = (portId: string) =>
+  portId === 'source' || portId === 'target' || isPositionedSourceHandle(portId)
+
+/**
+ * Every connection knob is the same swell, scaled by its own tab length —
+ * branch rows and the error output are the main port's shape at ~63%, not a
+ * different nub. The primary ports measure against the cursor footprint so a
+ * resting knob and the hover swell are interchangeable silhouettes.
+ */
+const getPortBulgeProfile = (port: WorkflowBorderPort) => {
+  if (port.id === 'action-menu') {
+    return {
+      plateau: Math.max(0, port.plateau - ACTION_MENU_TAPER_PX),
+      shoulder: ACTION_MENU_SHOULDER_PX,
+    }
+  }
+  const footprint = isPrimaryConnectionPort(port.id) ? CURSOR_SWELL_LENGTH_PX : port.plateau
+  return {
+    plateau: footprint * CONNECTION_PLATEAU_RATIO,
+    shoulder: footprint * CONNECTION_SHOULDER_RATIO,
+  }
+}
+
+/**
+ * Every connection knob protrudes the same distance — only its width scales.
+ * Edges anchor a fixed `CONNECTION_KNOB_PEAK_PX` outside the card, so a knob
+ * that peaked any lower would leave the line floating short of it.
+ *
+ * The action menu is not a connection knob: nothing anchors to it, and its own
+ * amplitude multiplies this base, so it keeps the shallower peak that sets the
+ * tab's height against the card.
+ */
+const getPortPeak = (port: WorkflowBorderPort) =>
+  port.id === 'action-menu' ? ACTION_MENU_PEAK_PX : CONNECTION_KNOB_PEAK_PX
+
+const smootherstep = (value: number) => {
+  const clamped = Math.min(1, Math.max(0, value))
+  return clamped * clamped * clamped * (clamped * (clamped * 6 - 15) + 10)
+}
+
+const cubicBezierCoordinate = (
+  t: number,
+  start: number,
+  firstControl: number,
+  secondControl: number,
+  end: number
+) => {
+  const inverse = 1 - t
+  return (
+    inverse * inverse * inverse * start +
+    3 * inverse * inverse * t * firstControl +
+    3 * inverse * t * t * secondControl +
+    t * t * t * end
+  )
+}
+
+const actionMenuCurveCoordinate = (parameter: number, axis: 'x' | 'y') => {
+  if (parameter <= 1) {
+    return axis === 'x'
+      ? cubicBezierCoordinate(
+          parameter,
+          0,
+          ACTION_MENU_CURVE_TOP_X1,
+          ACTION_MENU_CURVE_TOP_X2,
+          ACTION_MENU_CURVE_MID_X
+        )
+      : cubicBezierCoordinate(parameter, 0, 0, 0, ACTION_MENU_CURVE_MID_Y)
+  }
+  const t = parameter - 1
+  return axis === 'x'
+    ? cubicBezierCoordinate(
+        t,
+        ACTION_MENU_CURVE_MID_X,
+        ACTION_MENU_CURVE_BOTTOM_X1,
+        ACTION_MENU_CURVE_BOTTOM_X2,
+        1
+      )
+    : cubicBezierCoordinate(
+        t,
+        ACTION_MENU_CURVE_MID_Y,
+        ACTION_MENU_CURVE_BOTTOM_Y1,
+        ACTION_MENU_CURVE_BOTTOM_Y2,
+        1
+      )
+}
+
+const actionMenuFalloff = (value: number) => {
+  const clamped = Math.min(1, Math.max(0, value))
+  let lower = 0
+  let upper = 2
+  for (let index = 0; index < 12; index++) {
+    const midpoint = (lower + upper) / 2
+    const x = actionMenuCurveCoordinate(midpoint, 'x')
+    if (x < clamped) lower = midpoint
+    else upper = midpoint
+  }
+  return actionMenuCurveCoordinate((lower + upper) / 2, 'y')
+}
+
+const modulo = (value: number, length: number) => ((value % length) + length) % length
+
+const shortestArcDelta = (from: number, to: number, length: number) => {
+  const direct = modulo(to - from, length)
+  return direct > length / 2 ? direct - length : direct
+}
+
+const arcDistance = (a: number, b: number, length: number) =>
+  Math.abs(shortestArcDelta(a, b, length))
+
+const springStep = (
+  spring: SpringValue,
+  deltaSeconds: number,
+  stiffness = SPRING_STIFFNESS,
+  damping = SPRING_DAMPING,
+  bounds?: { min: number; max: number }
+) => {
+  const minimum = bounds?.min ?? Number.NEGATIVE_INFINITY
+  const maximum = bounds?.max ?? Number.POSITIVE_INFINITY
+  const target = Number.isFinite(spring.target)
+    ? Math.min(maximum, Math.max(minimum, spring.target))
+    : Math.min(maximum, Math.max(minimum, 0))
+  spring.target = target
+
+  if (!Number.isFinite(spring.value) || !Number.isFinite(spring.velocity)) {
+    spring.value = target
+    spring.velocity = 0
+    return
+  }
+
+  const safeDelta = Number.isFinite(deltaSeconds)
+    ? Math.min(MAX_FRAME_DELTA_SECONDS, Math.max(0, deltaSeconds))
+    : 0
+  const force = stiffness * (target - spring.value) - damping * spring.velocity
+  const nextVelocity = spring.velocity + force * safeDelta
+  const nextValue = spring.value + nextVelocity * safeDelta
+  if (!Number.isFinite(nextValue) || !Number.isFinite(nextVelocity)) {
+    spring.value = target
+    spring.velocity = 0
+    return
+  }
+
+  spring.value = Math.min(maximum, Math.max(minimum, nextValue))
+  spring.velocity =
+    (spring.value === minimum && nextVelocity < 0) || (spring.value === maximum && nextVelocity > 0)
+      ? 0
+      : nextVelocity
+}
+
+const springAtRest = (spring: SpringValue) =>
+  Math.abs(spring.target - spring.value) < 0.001 && Math.abs(spring.velocity) < 0.001
+
+const bulgeContribution = (
+  distance: number,
+  plateau: number,
+  peak: number,
+  shoulderOverride?: number,
+  falloff?: BulgeFeature['falloff']
+) => {
+  const plateauHalf = plateau / 2
+  if (distance <= plateauHalf) return peak
+  const shoulder = shoulderOverride ?? Math.max(8, plateau * 0.75)
+  const footprintHalf = plateauHalf + shoulder
+  if (distance >= footprintHalf) return 0
+  const progress = (distance - plateauHalf) / shoulder
+  const easedProgress =
+    falloff === 'action-menu' ? actionMenuFalloff(progress) : smootherstep(progress)
+  const contribution = peak * (1 - easedProgress)
+  return contribution < BULGE_VISIBLE_THRESHOLD_PX ? 0 : contribution
+}
+
+const buildRoundedRectPerimeter = (width: number, height: number, requestedRadius: number) => {
+  const radius = Math.min(requestedRadius, width / 2, height / 2)
+  const horizontal = Math.max(0, width - radius * 2)
+  const vertical = Math.max(0, height - radius * 2)
+  const quarterArc = (Math.PI * radius) / 2
+  const segments: PerimeterSegment[] = []
+  let s = 0
+
+  const addLine = (
+    length: number,
+    startX: number,
+    startY: number,
+    tx: number,
+    ty: number,
+    nx: number,
+    ny: number
+  ) => {
+    segments.push({
+      kind: 'line',
+      startS: s,
+      length,
+      pointAt: (distance) => ({
+        x: startX + tx * distance,
+        y: startY + ty * distance,
+        nx,
+        ny,
+        tx,
+        ty,
+      }),
+    })
+    s += length
+  }
+
+  const addArc = (centerX: number, centerY: number, startAngle: number) => {
+    segments.push({
+      kind: 'arc',
+      startS: s,
+      length: quarterArc,
+      radius,
+      pointAt: (distance) => {
+        const angle = startAngle + distance / radius
+        return {
+          x: centerX + Math.cos(angle) * radius,
+          y: centerY + Math.sin(angle) * radius,
+          nx: Math.cos(angle),
+          ny: Math.sin(angle),
+          tx: -Math.sin(angle),
+          ty: Math.cos(angle),
+        }
+      },
+    })
+    s += quarterArc
+  }
+
+  addLine(horizontal, radius, 0, 1, 0, 0, -1)
+  addArc(width - radius, radius, -Math.PI / 2)
+  addLine(vertical, width, radius, 0, 1, 1, 0)
+  addArc(width - radius, height - radius, 0)
+  addLine(horizontal, width - radius, height, -1, 0, 0, 1)
+  addArc(radius, height - radius, Math.PI / 2)
+  addLine(vertical, 0, height - radius, 0, -1, -1, 0)
+  addArc(radius, radius, Math.PI)
+
+  const samples: PerimeterPoint[] = []
+  for (const segment of segments) {
+    const count = Math.max(1, Math.ceil(segment.length / SAMPLE_SPACING_PX))
+    for (let index = 0; index < count; index++) {
+      const distance = (index / count) * segment.length
+      samples.push({ s: segment.startS + distance, ...segment.pointAt(distance) })
+    }
+  }
+  return { samples, segments, length: s }
+}
+
+const closestSample = (
+  samples: PerimeterPoint[],
+  x: number,
+  y: number,
+  predicate?: (sample: PerimeterPoint) => boolean
+) => {
+  let closest = samples[0]
+  let closestDistance = Number.POSITIVE_INFINITY
+  for (const sample of samples) {
+    if (predicate && !predicate(sample)) continue
+    const distance = (sample.x - x) ** 2 + (sample.y - y) ** 2
+    if (distance < closestDistance) {
+      closest = sample
+      closestDistance = distance
+    }
+  }
+  return { sample: closest, distance: Math.sqrt(closestDistance) }
+}
+
+const resolvePortSamples = (
+  ports: WorkflowBorderPort[],
+  samples: PerimeterPoint[],
+  width: number,
+  height: number
+): PortSample[] =>
+  ports.map((port) => {
+    const axisLength = port.side === 'left' || port.side === 'right' ? height : width
+    const coordinate =
+      port.position === 'center'
+        ? axisLength / 2
+        : typeof port.position === 'number'
+          ? port.position
+          : axisLength - port.position.fromEnd
+    const target =
+      port.side === 'left'
+        ? { x: 0, y: coordinate }
+        : port.side === 'right'
+          ? { x: width, y: coordinate }
+          : port.side === 'top'
+            ? { x: coordinate, y: 0 }
+            : { x: coordinate, y: height }
+    const normal =
+      port.side === 'left'
+        ? { nx: -1, ny: 0 }
+        : port.side === 'right'
+          ? { nx: 1, ny: 0 }
+          : port.side === 'top'
+            ? { nx: 0, ny: -1 }
+            : { nx: 0, ny: 1 }
+    const { sample } = closestSample(
+      samples,
+      target.x,
+      target.y,
+      (candidate) => candidate.nx === normal.nx && candidate.ny === normal.ny
+    )
+    return { ...port, s: sample.s }
+  })
+
+const pointAtArcLength = (geometry: PerimeterGeometry, arcLength: number) => {
+  const normalized = modulo(arcLength, geometry.length)
+  const segment =
+    geometry.segments.find(
+      (candidate) =>
+        normalized >= candidate.startS && normalized < candidate.startS + candidate.length
+    ) ?? geometry.segments[geometry.segments.length - 1]
+  return {
+    segment,
+    local: normalized - segment.startS,
+    point: segment.pointAt(normalized - segment.startS),
+  }
+}
+
+const buildActiveIntervals = (features: BulgeFeature[], perimeterLength: number) => {
+  const split: ActiveInterval[] = []
+  for (const feature of features) {
+    if (
+      !Number.isFinite(feature.center) ||
+      !Number.isFinite(feature.plateau) ||
+      !Number.isFinite(feature.peak) ||
+      !Number.isFinite(feature.shoulder) ||
+      feature.peak < 0.25
+    ) {
+      continue
+    }
+    const half = feature.plateau / 2 + feature.shoulder + 4
+    const start = feature.center - half
+    const end = feature.center + half
+    if (start < 0) {
+      split.push({ start: 0, end })
+      split.push({ start: perimeterLength + start, end: perimeterLength })
+    } else if (end > perimeterLength) {
+      split.push({ start, end: perimeterLength })
+      split.push({ start: 0, end: end - perimeterLength })
+    } else {
+      split.push({ start, end })
+    }
+  }
+  split.sort((a, b) => a.start - b.start)
+  const merged: ActiveInterval[] = []
+  for (const interval of split) {
+    const previous = merged[merged.length - 1]
+    if (previous && interval.start <= previous.end) {
+      previous.end = Math.max(previous.end, interval.end)
+    } else {
+      merged.push({ ...interval })
+    }
+  }
+  return merged
+}
+
+const findQuietStart = (intervals: ActiveInterval[], perimeterLength: number) => {
+  if (intervals.length === 0) return 0
+  let largestGap = -1
+  let start = 0
+  for (let index = 0; index < intervals.length; index++) {
+    const current = intervals[index]
+    const next = intervals[(index + 1) % intervals.length]
+    const nextStart = index === intervals.length - 1 ? next.start + perimeterLength : next.start
+    const gap = nextStart - current.end
+    if (gap > largestGap) {
+      largestGap = gap
+      start = modulo(current.end + gap / 2, perimeterLength)
+    }
+  }
+  return largestGap > 0 ? start : 0
+}
+
+const relativeIntervals = (features: BulgeFeature[], startS: number, perimeterLength: number) => {
+  const intervals = features
+    .filter(
+      (feature) =>
+        Number.isFinite(feature.center) &&
+        Number.isFinite(feature.plateau) &&
+        Number.isFinite(feature.peak) &&
+        Number.isFinite(feature.shoulder) &&
+        feature.peak >= 0.25
+    )
+    .map((feature) => {
+      const center = modulo(feature.center - startS, perimeterLength)
+      const half = feature.plateau / 2 + feature.shoulder + 4
+      return { start: center - half, end: center + half }
+    })
+    .filter((interval) => interval.end > 0 && interval.start < perimeterLength)
+    .map((interval) => ({
+      start: Math.max(0, interval.start),
+      end: Math.min(perimeterLength, interval.end),
+    }))
+    .sort((a, b) => a.start - b.start)
+  const merged: ActiveInterval[] = []
+  for (const interval of intervals) {
+    const previous = merged[merged.length - 1]
+    if (previous && interval.start <= previous.end) {
+      previous.end = Math.max(previous.end, interval.end)
+    } else {
+      merged.push({ ...interval })
+    }
+  }
+  return merged
+}
+
+const displacementAt = (
+  s: number,
+  features: BulgeFeature[],
+  perimeterLength: number,
+  maximum: number
+) => {
+  /*
+   * Union, not sum. Two overlapping bulges of the same height used to add
+   * where they crossed, throwing up a spike near twice their peak — the
+   * pointed mountain seen while the cursor swell slides into an existing
+   * knob. Taking the max lets them merge into one shape at a constant height.
+   */
+  let displacement = 0
+  for (const feature of features) {
+    const contribution = bulgeContribution(
+      arcDistance(s, feature.center, perimeterLength),
+      feature.plateau,
+      feature.peak,
+      feature.shoulder,
+      feature.falloff
+    )
+    if (Number.isFinite(contribution)) {
+      displacement = Math.max(displacement, contribution)
+    }
+  }
+  const safeMaximum = Number.isFinite(maximum)
+    ? Math.min(MAX_SILHOUETTE_OUTSET_PX, Math.max(0, maximum))
+    : 0
+  const clamped = Math.min(displacement, safeMaximum)
+  return clamped < BULGE_VISIBLE_THRESHOLD_PX ? 0 : clamped
+}
+
+/**
+ * Where a bulge stops being drawn, by inverting the shoulder's easing at the
+ * visibility threshold. The mathematical footprint (`plateau/2 + shoulder`)
+ * overshoots this, because the tail is cut off once it flattens out.
+ */
+const visibleBulgeHalf = (plateau: number, shoulder: number, peak: number) => {
+  const plateauHalf = plateau / 2
+  if (peak <= BULGE_VISIBLE_THRESHOLD_PX || shoulder <= 0) return plateauHalf
+  const target = 1 - BULGE_VISIBLE_THRESHOLD_PX / peak
+  let low = 0
+  let high = 1
+  for (let step = 0; step < 24; step++) {
+    const mid = (low + high) / 2
+    if (smootherstep(mid) < target) low = mid
+    else high = mid
+  }
+  return plateauHalf + high * shoulder
+}
+
+const appendExactInterval = (
+  commands: string[],
+  geometry: PerimeterGeometry,
+  startS: number,
+  from: number,
+  to: number
+) => {
+  let cursor = from
+  while (cursor < to - 0.0001) {
+    const located = pointAtArcLength(geometry, startS + cursor)
+    const available = located.segment.length - located.local
+    const step = Math.min(to - cursor, available)
+    const end = located.segment.pointAt(located.local + step)
+    commands.push(
+      located.segment.kind === 'line'
+        ? `L${end.x.toFixed(2)} ${end.y.toFixed(2)}`
+        : `A${located.segment.radius} ${located.segment.radius} 0 0 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`
+    )
+    cursor += step
+  }
+}
+
+const appendActiveInterval = (
+  commands: string[],
+  geometry: PerimeterGeometry,
+  features: BulgeFeature[],
+  maximum: number,
+  startS: number,
+  interval: ActiveInterval
+) => {
+  const length = interval.end - interval.start
+  const count = Math.max(2, Math.ceil(length / SAMPLE_SPACING_PX))
+  const points = Array.from({ length: count + 1 }, (_, index) => {
+    const relative = interval.start + (index / count) * length
+    const located = pointAtArcLength(geometry, startS + relative)
+    const displacement = displacementAt(
+      modulo(startS + relative, geometry.length),
+      features,
+      geometry.length,
+      maximum
+    )
+    return {
+      x: located.point.x + located.point.nx * displacement,
+      y: located.point.y + located.point.ny * displacement,
+      tx: located.point.tx,
+      ty: located.point.ty,
+    }
+  })
+  for (let index = 0; index < points.length - 1; index++) {
+    const previous = points[Math.max(0, index - 1)]
+    const current = points[index]
+    const next = points[index + 1]
+    const after = points[Math.min(points.length - 1, index + 2)]
+    const chord = Math.hypot(next.x - current.x, next.y - current.y)
+    const control1 =
+      index === 0
+        ? { x: current.x + (current.tx * chord) / 3, y: current.y + (current.ty * chord) / 3 }
+        : {
+            x: current.x + (next.x - previous.x) / 6,
+            y: current.y + (next.y - previous.y) / 6,
+          }
+    const control2 =
+      index === points.length - 2
+        ? { x: next.x - (next.tx * chord) / 3, y: next.y - (next.ty * chord) / 3 }
+        : {
+            x: next.x - (after.x - current.x) / 6,
+            y: next.y - (after.y - current.y) / 6,
+          }
+    commands.push(
+      `C${control1.x.toFixed(2)} ${control1.y.toFixed(2)} ${control2.x.toFixed(2)} ${control2.y.toFixed(2)} ${next.x.toFixed(2)} ${next.y.toFixed(2)}`
+    )
+  }
+}
+
+/**
+ * An open path over one span of the outline, sampled and displaced exactly like
+ * the silhouette is.
+ *
+ * A coloured knob used to be a dash on the full perimeter, offset by the port's
+ * resting arc position. But displacing the outline makes it *longer* than the
+ * resting perimeter, and the extra length sits entirely at the bulges — so
+ * normalising with `pathLength` spread that error evenly and the band drifted
+ * off its own knob, leaving a crescent of base colour showing inside it. Giving
+ * the knob its own path removes the arc-length bookkeeping altogether: the
+ * colour is drawn on the same points the silhouette was.
+ */
+const buildSpanPath = (
+  geometry: PerimeterGeometry,
+  features: BulgeFeature[],
+  maximum: number,
+  fromS: number,
+  toS: number
+) => {
+  const length = toS - fromS
+  if (length <= 0) return ''
+  const located = pointAtArcLength(geometry, fromS)
+  const displacement = displacementAt(
+    modulo(fromS, geometry.length),
+    features,
+    geometry.length,
+    maximum
+  )
+  const originX = located.point.x + located.point.nx * displacement
+  const originY = located.point.y + located.point.ny * displacement
+  const commands = [`M${originX.toFixed(2)} ${originY.toFixed(2)}`]
+  appendActiveInterval(commands, geometry, features, maximum, fromS, { start: 0, end: length })
+  return commands.join(' ')
+}
+
+const buildPiecewisePath = (
+  geometry: PerimeterGeometry,
+  features: BulgeFeature[],
+  maximum: number
+) => {
+  const circularIntervals = buildActiveIntervals(features, geometry.length)
+  const startS = findQuietStart(circularIntervals, geometry.length)
+  const intervals = relativeIntervals(features, startS, geometry.length)
+  const start = pointAtArcLength(geometry, startS).point
+  const commands = [`M${start.x.toFixed(2)} ${start.y.toFixed(2)}`]
+  let cursor = 0
+  for (const interval of intervals) {
+    appendExactInterval(commands, geometry, startS, cursor, interval.start)
+    appendActiveInterval(commands, geometry, features, maximum, startS, interval)
+    cursor = interval.end
+  }
+  appendExactInterval(commands, geometry, startS, cursor, geometry.length)
+  commands.push('Z')
+  return { d: commands.join(' '), startS }
+}
+
+const resolveRing = (ringStyles: string) => {
+  const color = ringStyles.includes('--border-success')
+    ? 'var(--border-success)'
+    : ringStyles.includes('--text-secondary')
+      ? 'var(--text-secondary)'
+      : ringStyles.includes('--warning')
+        ? 'var(--warning)'
+        : ringStyles.includes('--text-error')
+          ? 'var(--text-error)'
+          : ringStyles.includes('--brand-accent')
+            ? 'var(--brand-accent)'
+            : 'var(--border-1)'
+  return {
+    color,
+    width: ringStyles.includes('3.5px') ? 7 : 4.5,
+    pulse: ringStyles.includes('animate-ring-pulse'),
+    solid: ringStyles.includes('--text-secondary'),
+  }
+}
+
+export function WorkflowBlockBorder({
+  nodeId,
+  getConnectionNodeId,
+  ports,
+  radius = 16,
+  hasRing,
+  ringStyles,
+  height,
+  onCursorHandleChange,
+  onActionMenuReadyChange,
+}: WorkflowBlockBorderProps) {
+  const clipId = `workflow-border-${useId().replaceAll(':', '')}`
+  const svgRef = useRef<SVGSVGElement>(null)
+  const [size, setSize] = useState({ width: 250, height: height ?? 100 })
+  const [renderedPath, setRenderedPath] = useState<{
+    d: string
+    startS: number
+    knobs: Array<{ id: string; color: string; d: string }>
+    knobKey: string
+    /** Open span over the action-menu swell, repainted over the knobs. */
+    overlay: string
+  }>({ d: '', startS: 0, knobs: [], knobKey: '', overlay: '' })
+  /**
+   * Render-visible copy of the resolved ports and perimeter length. The
+   * animation loop reads geometry from `geometryRef`, but the colored port
+   * segments are painted during render — reading the ref there would strand
+   * color changes on blocks whose path never moves (a neighbour highlighting
+   * because its edge got selected), since `setRenderedPath` bails on an
+   * unchanged path and no re-render would follow.
+   */
+  const frameRef = useRef<number | null>(null)
+  const lastFrameRef = useRef(0)
+  const hoveredPortRef = useRef<string | null>(null)
+  const draggedPortRef = useRef<string | null>(null)
+  /** Whether the pointer is on an edge at all; the frame decides the rest. */
+  const cursorHoverAllowedRef = useRef(false)
+  /** True while the swell is deswelling at a zone boundary to cross behind. */
+  const zoneCrossingRef = useRef(false)
+  const hoverSpringRef = useRef<SpringValue>({ value: 0, velocity: 0, target: 0 })
+  const actionMenuSpringRef = useRef<SpringValue>({ value: 0, velocity: 0, target: 0 })
+  const cursorAmplitudeRef = useRef<SpringValue>({ value: 0, velocity: 0, target: 0 })
+  const cursorSRef = useRef<SpringValue>({ value: 0, velocity: 0, target: 0 })
+  const startAnimationRef = useRef<() => void>(() => {})
+  /** Synchronous single-frame repaint, for geometry changes that must not lag. */
+  const renderNowRef = useRef<() => void>(() => {})
+  const updatePointerTargetRef = useRef<(x: number, y: number) => void>(() => {})
+  const resetPointerTrackingRef = useRef<() => void>(() => {})
+  const onCursorHandleChangeRef = useRef(onCursorHandleChange)
+  const onActionMenuReadyChangeRef = useRef(onActionMenuReadyChange)
+  const actionMenuReadyRef = useRef(false)
+  const sizeRef = useRef(size)
+  const geometryRef = useRef<
+    PerimeterGeometry & {
+      ports: PortSample[]
+    }
+  >({ samples: [], segments: [], ports: [], length: 1 })
+  sizeRef.current = size
+  onCursorHandleChangeRef.current = onCursorHandleChange
+  onActionMenuReadyChangeRef.current = onActionMenuReadyChange
+
+  useLayoutEffect(() => {
+    if (height !== undefined) {
+      if (!Number.isFinite(height) || height <= 0) return
+      setSize((current) =>
+        current.width === 250 && Math.abs(current.height - height) < 0.5
+          ? current
+          : { width: 250, height }
+      )
+      return
+    }
+    const host = svgRef.current?.parentElement
+    if (!host) return
+    const update = () => {
+      /* offsetWidth/Height, not getBoundingClientRect: the card sits inside
+         the canvas' zoom transform and a scaled rect would drift the geometry. */
+      const width = host.offsetWidth
+      /* Clamped: below MIN_PAINTED_HEIGHT the perimeter has no straight run
+         left on the vertical edges and the action-menu tab collapses into the
+         corner arcs. The host carries the same floor; this keeps the geometry
+         correct even if a caller sizes one some other way. */
+      const nextHeight = Math.max(host.offsetHeight, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT)
+      if (Number.isFinite(width) && Number.isFinite(nextHeight) && width > 0 && nextHeight > 0) {
+        setSize((current) =>
+          current.width === width && current.height === nextHeight
+            ? current
+            : { width, height: nextHeight }
+        )
+      }
+    }
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(host)
+    return () => observer.disconnect()
+  }, [height])
+
+  useLayoutEffect(() => {
+    const perimeter = buildRoundedRectPerimeter(size.width, size.height, radius)
+    const resolvedPorts = resolvePortSamples(ports, perimeter.samples, size.width, size.height)
+    geometryRef.current = {
+      samples: perimeter.samples,
+      segments: perimeter.segments,
+      ports: resolvedPorts,
+      length: perimeter.length,
+    }
+    const actionMenuPort = resolvedPorts.find((port) => port.id === 'action-menu')
+    actionMenuSpringRef.current.target = (actionMenuPort?.restAmplitude ?? 0) > 0 ? 1 : 0
+    /* Repaint in the same commit: ports or size changed, and a silhouette
+       that lags the content by an animation frame reads as a flash. */
+    renderNowRef.current()
+  }, [ports, radius, size.height, size.width])
+
+  useLayoutEffect(() => {
+    const svg = svgRef.current
+    const host = svg?.parentElement
+    if (!svg || !host) return
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    /*
+     * One frame in flight at a time, tracked in frameRef. If a frame dies —
+     * an exception, or a stale handle left by an HMR remount — frameRef must
+     * be released, or startAnimation() treats the dead frame as pending and
+     * the card never paints again. The wrapper guarantees the loop can always
+     * restart from the next pointer event.
+     */
+    const scheduleFrame = () => {
+      if (frameRef.current === null) {
+        frameRef.current = requestAnimationFrame(render)
+      }
+    }
+
+    const render = (timestamp: number) => {
+      frameRef.current = null
+      try {
+        renderFrame(timestamp)
+      } catch (error) {
+        frameRef.current = null
+        lastFrameRef.current = 0
+        throw error
+      }
+    }
+
+    const renderFrame = (timestamp: number) => {
+      const geometry = geometryRef.current
+      if (geometry.samples.length === 0) {
+        onCursorHandleChangeRef.current?.(null)
+        frameRef.current = null
+        return
+      }
+      const deltaSeconds = getWorkflowBorderFrameDeltaSeconds(timestamp, lastFrameRef.current)
+      if (Number.isFinite(timestamp) && timestamp > lastFrameRef.current) {
+        lastFrameRef.current = timestamp
+      }
+
+      const hoverSpring = hoverSpringRef.current
+      const actionMenuSpring = actionMenuSpringRef.current
+      const cursorAmplitude = cursorAmplitudeRef.current
+      const cursorS = cursorSRef.current
+      const actionMenuPort = geometry.ports.find((port) => port.id === 'action-menu')
+      actionMenuSpring.target = (actionMenuPort?.restAmplitude ?? 0) > 0 ? 1 : 0
+      /*
+       * Two different colours must never share one silhouette. The swell is the
+       * base colour, a connected or error knob is painted over it — a merged
+       * shape would be part knob colour and part gray, reading as the colours
+       * bleeding into each other. Same-colour knobs are exempt: gray merging
+       * into gray is the gooey join, not a blend.
+       *
+       * Fading alone cannot guarantee that — the amplitude spring takes real
+       * time to decay, and during those frames the still-visible swell keeps
+       * travelling and sweeps straight across the knob. So the exclusion is
+       * structural: while the swell is meaningfully visible its position is
+       * pinned at the zone boundary (bulges touching, never overlapping), it
+       * deswells there on the snap spring, and once it drops under the crossing
+       * amplitude it steps to the boundary on the pointer's side and grows
+       * back — a continuous pass-behind, not a die-and-restart.
+       */
+      const coloredZoneFor = (arc: number, slack = 0) => {
+        for (const port of geometry.ports) {
+          if (!port.color || port.magnetizable === false) continue
+          const profile = getPortBulgeProfile(port)
+          const clearance = profile.plateau / 2 + profile.shoulder + CURSOR_HALF_FOOTPRINT_PX
+          if (arcDistance(arc, port.s, geometry.length) < clearance + slack) {
+            return { port, clearance }
+          }
+        }
+        return null
+      }
+      const targetZone = coloredZoneFor(cursorS.target)
+      /*
+       * Hovering ANY resting knob hands the interaction over to it — the knob
+       * takes its hover size while the swell deswells away, regardless of
+       * colour. Same-colour merging still happens in transit (the swell can
+       * slide across a gray knob gooily), but a direct hover always snaps:
+       * for knobs narrower than the swell, merging instead lets the swell
+       * swallow the knob it is supposed to be handing off to. hoveredPortRef
+       * only ever holds magnetizable ports, so the action menu never triggers
+       * this.
+       */
+      const snappingToKnob = hoveredPortRef.current !== null
+      /*
+       * The crossing latch, not a live threshold test: a threshold alone
+       * oscillates — the instant amplitude dips below it the target flips back
+       * to 1 and pumps it up again, and the swell hangs at the boundary
+       * forever. Latched at the pin, released only by completing the crossing
+       * or by the swell moving clear of the zone.
+       */
+      if (zoneCrossingRef.current && coloredZoneFor(cursorS.value, 1) === null) {
+        zoneCrossingRef.current = false
+      }
+      const handingOff = Boolean(targetZone) || snappingToKnob || zoneCrossingRef.current
+      cursorAmplitude.target = cursorHoverAllowedRef.current && !handingOff ? 1 : 0
+      if (reducedMotion) {
+        hoverSpring.value = hoverSpring.target
+        hoverSpring.velocity = 0
+        actionMenuSpring.value = actionMenuSpring.target
+        actionMenuSpring.velocity = 0
+        cursorAmplitude.value = cursorAmplitude.target
+        cursorAmplitude.velocity = 0
+        cursorS.value = cursorS.target
+        cursorS.velocity = 0
+      } else {
+        springStep(hoverSpring, deltaSeconds, SPRING_STIFFNESS, SPRING_DAMPING, {
+          min: 0,
+          max: 1,
+        })
+        springStep(
+          actionMenuSpring,
+          deltaSeconds,
+          ACTION_MENU_SPRING_STIFFNESS,
+          ACTION_MENU_SPRING_DAMPING,
+          { min: 0, max: 1 }
+        )
+        /* Hand-offs to a knob deswell on the stiffer snap spring — quick but
+           still a motion, neither a blink nor a loitering blob. */
+        springStep(
+          cursorAmplitude,
+          deltaSeconds,
+          handingOff ? CURSOR_SNAP_SPRING_STIFFNESS : SPRING_STIFFNESS,
+          handingOff ? CURSOR_SNAP_SPRING_DAMPING : SPRING_DAMPING,
+          { min: 0, max: 1 }
+        )
+        if (cursorAmplitude.target === 0 && cursorAmplitude.value < 0.005) {
+          cursorAmplitude.value = 0
+          cursorAmplitude.velocity = 0
+        }
+        const delta = shortestArcDelta(cursorS.value, cursorS.target, geometry.length)
+        const unwrappedTarget = cursorS.value + delta
+        const originalTarget = cursorS.target
+        cursorS.target = unwrappedTarget
+        springStep(cursorS, deltaSeconds)
+        cursorS.value = modulo(cursorS.value, geometry.length)
+        cursorS.target = originalTarget
+      }
+
+      const actionMenuReady = isActionMenuSwellReady(
+        actionMenuSpring.target,
+        actionMenuSpring.value
+      )
+      if (actionMenuReady !== actionMenuReadyRef.current) {
+        actionMenuReadyRef.current = actionMenuReady
+        onActionMenuReadyChangeRef.current?.(actionMenuReady)
+      }
+
+      const valueZone = coloredZoneFor(cursorS.value)
+      if (valueZone) {
+        if (cursorAmplitude.value <= CURSOR_CROSSING_AMPLITUDE && !targetZone) {
+          /* Faint enough to cross: step out at the boundary on the pointer's
+             side, keeping the residual amplitude so growth resumes at once. */
+          const toTarget = shortestArcDelta(valueZone.port.s, cursorS.target, geometry.length)
+          const side = toTarget !== 0 ? Math.sign(toTarget) : -1
+          cursorS.value = modulo(valueZone.port.s + side * valueZone.clearance, geometry.length)
+          cursorS.velocity = 0
+          zoneCrossingRef.current = false
+        } else if (cursorAmplitude.value > 0.005) {
+          /* Still visible: pinned at the boundary on its current side. */
+          const offset = shortestArcDelta(valueZone.port.s, cursorS.value, geometry.length)
+          const side = offset !== 0 ? Math.sign(offset) : -1
+          cursorS.value = modulo(valueZone.port.s + side * valueZone.clearance, geometry.length)
+          cursorS.velocity = 0
+          if (!targetZone) zoneCrossingRef.current = true
+        }
+      }
+
+      const activePortId = draggedPortRef.current ?? hoveredPortRef.current
+      if (cursorAmplitude.value * CURSOR_PEAK_PX >= BULGE_VISIBLE_THRESHOLD_PX && !handingOff) {
+        const { point } = pointAtArcLength(geometry, cursorS.value)
+        const edgeSide =
+          Math.abs(point.nx) > Math.abs(point.ny)
+            ? point.nx < 0
+              ? 'left'
+              : 'right'
+            : point.ny < 0
+              ? 'top'
+              : 'bottom'
+        const side =
+          edgeSide === 'left' || edgeSide === 'right'
+            ? edgeSide
+            : getHorizontalWorkflowHandleSide(point.x, sizeRef.current.width)
+        onCursorHandleChangeRef.current?.({
+          side,
+          edgeSide,
+          x: point.x + point.nx * CONNECTION_KNOB_PEAK_PX,
+          y: point.y + point.ny * CONNECTION_KNOB_PEAK_PX,
+        })
+      } else {
+        onCursorHandleChangeRef.current?.(null)
+      }
+      const maxPortPeak = geometry.ports.reduce(
+        (current, port) =>
+          Math.max(
+            current,
+            getPortPeak(port) *
+              Math.min(
+                MAX_PORT_AMPLITUDE,
+                Math.max(
+                  0,
+                  Number.isFinite(port.hoverAmplitude) ? (port.hoverAmplitude ?? 1.15) : 1.15
+                )
+              )
+          ),
+        CURSOR_PEAK_PX
+      )
+      const maxPeak = Math.min(
+        MAX_SILHOUETTE_OUTSET_PX,
+        Math.max(maxPortPeak, CURSOR_PEAK_PX * cursorAmplitude.value)
+      )
+      const features: BulgeFeature[] = geometry.ports.map((port) => {
+        const profile = getPortBulgeProfile(port)
+        const rest = Math.min(
+          MAX_PORT_AMPLITUDE,
+          Math.max(0, Number.isFinite(port.restAmplitude) ? (port.restAmplitude ?? 1) : 1)
+        )
+        const hover = Math.min(
+          MAX_PORT_AMPLITUDE,
+          Math.max(0, Number.isFinite(port.hoverAmplitude) ? (port.hoverAmplitude ?? 1.15) : 1.15)
+        )
+        const multiplier =
+          port.id === 'action-menu'
+            ? hover * actionMenuSpring.value
+            : Math.max(
+                port.revealOnCardHover ? rest + (hover - rest) * hoverSpring.value : rest,
+                port.id === activePortId ? hover : 0
+              )
+        return {
+          center: port.s,
+          plateau: profile.plateau,
+          peak: getPortPeak(port) * multiplier,
+          shoulder: profile.shoulder,
+          falloff: port.id === 'action-menu' ? 'action-menu' : undefined,
+        }
+      })
+      if (cursorAmplitude.value >= 0.005) {
+        features.push({
+          center: cursorS.value,
+          plateau: CURSOR_SWELL_LENGTH_PX * CONNECTION_PLATEAU_RATIO,
+          peak: CURSOR_PEAK_PX * cursorAmplitude.value,
+          shoulder: CURSOR_SWELL_LENGTH_PX * CONNECTION_SHOULDER_RATIO,
+        })
+      }
+      const nextPath = buildPiecewisePath(
+        {
+          samples: geometry.samples,
+          segments: geometry.segments,
+          length: geometry.length,
+        },
+        features,
+        maxPeak
+      )
+      const perimeter = {
+        samples: geometry.samples,
+        segments: geometry.segments,
+        length: geometry.length,
+      }
+      const actionFeature = features.find((feature) => feature.falloff === 'action-menu')
+      const actionSwellUp = actionFeature !== undefined && actionFeature.peak > 0.5
+      const actionHalf = actionFeature ? actionFeature.plateau / 2 + actionFeature.shoulder : 0
+      const nextKnobs = geometry.ports
+        .map((port, index) => ({ port, feature: features[index] }))
+        .filter(({ port, feature }) => Boolean(port.color) && feature !== undefined)
+        /*
+         * A knob under the open action swell is simply not painted: the swell
+         * is a lid, and paint that survives beneath it either bleeds through
+         * mid-animation or reads as the knob changing colour behind the menu.
+         * The connection anchor (the invisible handle) stays put, so the edge
+         * still terminates at the card edge — the line just disappears under
+         * the swell. The knob returns the moment the swell closes.
+         */
+        .filter(
+          ({ port }) =>
+            !actionSwellUp ||
+            !actionFeature ||
+            arcDistance(port.s, actionFeature.center, geometry.length) > actionHalf
+        )
+        .map(({ port, feature }) => {
+          const half = visibleBulgeHalf(feature.plateau, feature.shoulder, feature.peak)
+          /*
+           * Colour follows only this knob's own bulge. Feeding the full feature
+           * list (including the action-menu swell) re-displaced the dark stroke
+           * up onto the ActionBar peak, so the knob looked anchored to the menu
+           * instead of the card edge and covered the icons.
+           */
+          return {
+            id: port.id,
+            color: port.color as string,
+            d: buildSpanPath(perimeter, [feature], feature.peak, port.s - half, port.s + half),
+          }
+        })
+      /*
+       * The action-menu swell must sit OVER any knob or line beneath it: a
+       * top-centre connection stays anchored to the card edge, and the opening
+       * swell slides across and hides it. The knobs paint at their resting
+       * positions above, so the swell's region is repainted after them in the
+       * silhouette colour — an opaque lid, matching the outline the swell
+       * already drew.
+       */
+      const nextOverlay =
+        actionSwellUp && actionFeature
+          ? buildSpanPath(
+              perimeter,
+              features,
+              maxPeak,
+              actionFeature.center - actionHalf,
+              actionFeature.center + actionHalf
+            )
+          : ''
+      const nextKnobKey = `${nextKnobs.map((knob) => `${knob.id}:${knob.color}:${knob.d}`).join('|')}~${nextOverlay}`
+      setRenderedPath((current) =>
+        current.d === nextPath.d && current.knobKey === nextKnobKey
+          ? current
+          : { ...nextPath, knobs: nextKnobs, knobKey: nextKnobKey, overlay: nextOverlay }
+      )
+
+      const moving =
+        !springAtRest(hoverSpring) ||
+        !springAtRest(actionMenuSpring) ||
+        !springAtRest(cursorAmplitude) ||
+        !springAtRest(cursorS)
+      if (moving) {
+        scheduleFrame()
+      } else {
+        frameRef.current = null
+        lastFrameRef.current = 0
+      }
+    }
+
+    const startAnimation = () => {
+      if (frameRef.current === null) {
+        lastFrameRef.current = 0
+        scheduleFrame()
+      }
+    }
+    startAnimationRef.current = startAnimation
+    renderNowRef.current = () => {
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current)
+        frameRef.current = null
+      }
+      render(performance.now())
+    }
+
+    let trackingPointer = false
+    let leaveConfirmFrame: number | null = null
+    const lastPointerRef = { x: 0, y: 0 }
+    // Include the action-tab / top bridge siblings so opening the action menu
+    // does not look like a leave and kill the cursor-follow connection swell.
+    const trackingRoot = (host.closest('.react-flow__node') as HTMLElement | null) ?? host
+
+    const stopPointerTracking = () => {
+      // Keep the cursor source handle mounted while a connection drag is active;
+      // clearing it on leave unmounts the Handle and kills the drag.
+      if (draggedPortRef.current) return
+      if (leaveConfirmFrame !== null) {
+        cancelAnimationFrame(leaveConfirmFrame)
+        leaveConfirmFrame = null
+      }
+      hoveredPortRef.current = null
+      hoverSpringRef.current.target = 0
+      cursorHoverAllowedRef.current = false
+      cursorAmplitudeRef.current.target = 0
+      cursorAmplitudeRef.current.velocity = 0
+      if (trackingPointer) {
+        window.removeEventListener('pointermove', onTrackedPointerMove)
+        trackingPointer = false
+      }
+      startAnimation()
+    }
+
+    const beginPointerTracking = () => {
+      if (leaveConfirmFrame !== null) {
+        cancelAnimationFrame(leaveConfirmFrame)
+        leaveConfirmFrame = null
+      }
+      if (trackingPointer) return
+      trackingPointer = true
+      window.addEventListener('pointermove', onTrackedPointerMove)
+    }
+
+    const isWithinTrackingBounds = (clientX: number, clientY: number) => {
+      const rect = host.getBoundingClientRect()
+      return (
+        clientX >= rect.left - CURSOR_TRACKING_MARGIN_PX &&
+        clientX <= rect.right + CURSOR_TRACKING_MARGIN_PX &&
+        clientY >= rect.top - CURSOR_TRACKING_MARGIN_PX &&
+        clientY <= rect.bottom + CURSOR_TRACKING_MARGIN_PX
+      )
+    }
+
+    const isPointerOverTrackingRoot = (clientX: number, clientY: number) => {
+      if (isWithinTrackingBounds(clientX, clientY)) return true
+      const top = document.elementFromPoint(clientX, clientY)
+      return Boolean(top && trackingRoot.contains(top))
+    }
+
+    const updatePointerTarget = (clientX: number, clientY: number) => {
+      if (draggedPortRef.current) return
+      if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) return
+      lastPointerRef.x = clientX
+      lastPointerRef.y = clientY
+      const { width: layoutWidth, height: layoutHeight } = sizeRef.current
+      if (layoutWidth <= 0 || layoutHeight <= 0) return
+      if (!isWithinTrackingBounds(clientX, clientY)) {
+        // Still over the node chrome (action tab / bridge) — keep listening so
+        // returning to an edge immediately restores the swell.
+        if (isPointerOverTrackingRoot(clientX, clientY)) {
+          cursorHoverAllowedRef.current = false
+          cursorAmplitudeRef.current.target = 0
+          startAnimation()
+          return
+        }
+        stopPointerTracking()
+        return
+      }
+      const rect = host.getBoundingClientRect()
+      const geometry = geometryRef.current
+      const scaleX = rect.width / layoutWidth
+      const scaleY = rect.height / layoutHeight
+      if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY) || scaleX <= 0 || scaleY <= 0) {
+        cursorHoverAllowedRef.current = false
+        cursorAmplitudeRef.current.target = 0
+        startAnimation()
+        return
+      }
+      const scale = Math.min(scaleX, scaleY)
+      const localX = (clientX - rect.left) / scaleX
+      const localY = (clientY - rect.top) / scaleY
+      if (!Number.isFinite(localX) || !Number.isFinite(localY) || !Number.isFinite(scale)) {
+        cursorHoverAllowedRef.current = false
+        cursorAmplitudeRef.current.target = 0
+        startAnimation()
+        return
+      }
+      const nearest = closestSample(geometry.samples, localX, localY)
+      const nearestPort = geometry.ports
+        .filter((port) => port.magnetizable !== false)
+        .map((port) => ({
+          port,
+          distance: arcDistance(nearest.sample.s, port.s, geometry.length),
+        }))
+        .sort((a, b) => a.distance - b.distance)[0]
+      const outwardDistance =
+        (localX - nearest.sample.x) * nearest.sample.nx +
+        (localY - nearest.sample.y) * nearest.sample.ny
+      const edgeDepth = outwardDistance > 0 ? CURSOR_EDGE_OUTSET_PX : CURSOR_EDGE_INSET_PX
+      const inEdgeZone = nearest.distance * scale <= edgeDepth
+      /*
+       * Magnetize toward ANY nearby port, connected knobs included. The cursor
+       * swell then slides into the existing knob and the two bulges coincide,
+       * reading as one shape, instead of the swell blinking out as it nears.
+       */
+      const magnetized =
+        inEdgeZone &&
+        nearestPort !== undefined &&
+        nearestPort.distance * scale <= MAGNETIZE_DISTANCE_PX
+      const hitElement = document.elementFromPoint(clientX, clientY)
+      const pointerOverActionControl =
+        hitElement instanceof Element &&
+        Boolean(
+          hitElement.closest('[data-workflow-action-bar-swell], [data-workflow-action-bar-bridge]')
+        )
+      /*
+       * The action bar blocks connection interaction only where its DOM is
+       * actually hit. Its broad SVG shoulders are visual chrome and must not
+       * consume the usable top-left/top-right card edge beneath them.
+       */
+      const cursorDisplacementVisible = inEdgeZone && !pointerOverActionControl
+      cursorSRef.current.target =
+        magnetized && !nearestPort.port.color ? nearestPort.port.s : nearest.sample.s
+      /*
+       * Whether an edge hover is allowed at all. Whether the swell is actually
+       * drawn is decided per frame in the render loop, against where the swell
+       * has sprung to rather than where the pointer is — see there for why.
+       */
+      cursorHoverAllowedRef.current = cursorDisplacementVisible
+      cursorAmplitudeRef.current.target = cursorDisplacementVisible ? 1 : 0
+      if (pointerOverActionControl) {
+        cursorAmplitudeRef.current.value = 0
+        cursorAmplitudeRef.current.velocity = 0
+      }
+      hoveredPortRef.current = magnetized ? nearestPort.port.id : null
+      startAnimation()
+    }
+
+    const onTrackedPointerMove = (event: PointerEvent) => {
+      updatePointerTarget(event.clientX, event.clientY)
+    }
+
+    const onPointerEnter = (event: PointerEvent) => {
+      hoverSpringRef.current.target = 1
+      beginPointerTracking()
+      updatePointerTarget(event.clientX, event.clientY)
+      startAnimation()
+    }
+
+    const onPointerLeave = (event: PointerEvent) => {
+      const next = event.relatedTarget
+      if (next instanceof Node && trackingRoot.contains(next)) return
+      // DOM churn from the action tab / updateNodeInternals often yields a null
+      // relatedTarget while the pointer is still over the card. Confirm on the
+      // next frame before tearing the swell down.
+      if (leaveConfirmFrame !== null) cancelAnimationFrame(leaveConfirmFrame)
+      leaveConfirmFrame = requestAnimationFrame(() => {
+        leaveConfirmFrame = null
+        if (draggedPortRef.current) return
+        if (isPointerOverTrackingRoot(lastPointerRef.x, lastPointerRef.y)) {
+          beginPointerTracking()
+          updatePointerTarget(lastPointerRef.x, lastPointerRef.y)
+          return
+        }
+        stopPointerTracking()
+      })
+    }
+
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (!(target instanceof Element)) return
+      const handle = target.closest<HTMLElement>('[data-handleid]')
+      if (!handle) return
+      draggedPortRef.current = handle.dataset.handleid ?? null
+      startAnimation()
+    }
+
+    const onPointerUp = (event: PointerEvent) => {
+      draggedPortRef.current = null
+      if (!isPointerOverTrackingRoot(event.clientX, event.clientY)) {
+        stopPointerTracking()
+        return
+      }
+      beginPointerTracking()
+      updatePointerTarget(event.clientX, event.clientY)
+    }
+
+    trackingRoot.addEventListener('pointerenter', onPointerEnter)
+    trackingRoot.addEventListener('pointerleave', onPointerLeave)
+    // Capture before React Flow handle handlers stopPropagation, otherwise
+    // draggedPortRef stays empty and pointerleave tears down the drag handle.
+    trackingRoot.addEventListener('pointerdown', onPointerDown, true)
+    window.addEventListener('pointerup', onPointerUp)
+    updatePointerTargetRef.current = updatePointerTarget
+    resetPointerTrackingRef.current = stopPointerTracking
+    if (trackingRoot.matches(':hover')) {
+      hoverSpringRef.current.target = 1
+      beginPointerTracking()
+    }
+    /*
+     * First paint is synchronous, inside this layout effect, so a card never
+     * commits a frame without its border. Deferring to the animation frame
+     * painted the content one frame before the silhouette — every mount
+     * flashed a bodiless card, and a suspended tab never painted one at all.
+     */
+    render(performance.now())
+
+    return () => {
+      startAnimationRef.current = () => {}
+      renderNowRef.current = () => {}
+      updatePointerTargetRef.current = () => {}
+      resetPointerTrackingRef.current = () => {}
+      onCursorHandleChangeRef.current?.(null)
+      if (leaveConfirmFrame !== null) cancelAnimationFrame(leaveConfirmFrame)
+      trackingRoot.removeEventListener('pointerenter', onPointerEnter)
+      trackingRoot.removeEventListener('pointerleave', onPointerLeave)
+      trackingRoot.removeEventListener('pointerdown', onPointerDown, true)
+      window.removeEventListener('pointermove', onTrackedPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current)
+      frameRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    /*
+     * A connection drag captures the pointer on the origin card's handle, so
+     * this card sees no pointerenter. Window pointermove still fires; feeding
+     * it into the same tracker gives the dragged line a live edge swell to aim
+     * at, and magnetization highlights the knob it would land on.
+     *
+     * Every card on the canvas listens during a drag, so the cost discipline
+     * matters: moves are coalesced to one evaluation per frame, that
+     * evaluation is a single rect test, and a card the pointer is nowhere
+     * near does nothing at all. Only the transition out of range pays for one
+     * reset. Without this, a 50-card canvas ran a DOM hit-test and scheduled
+     * a render on every card for every pointermove of the drag.
+     */
+    let engaged = false
+    let framePending = false
+    let foreignFrameId: number | null = null
+    let pointerX = 0
+    let pointerY = 0
+    const evaluate = () => {
+      framePending = false
+      foreignFrameId = null
+      const el = svgRef.current?.parentElement
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      const margin = CURSOR_TRACKING_MARGIN_PX
+      const inRange =
+        pointerX >= rect.left - margin &&
+        pointerX <= rect.right + margin &&
+        pointerY >= rect.top - margin &&
+        pointerY <= rect.bottom + margin
+      if (inRange) {
+        engaged = true
+        updatePointerTargetRef.current(pointerX, pointerY)
+      } else if (engaged) {
+        engaged = false
+        resetPointerTrackingRef.current()
+      }
+    }
+    const onForeignMove = (event: PointerEvent) => {
+      const connectionNodeId = getConnectionNodeId?.()
+      if (!nodeId || connectionNodeId == null || connectionNodeId === nodeId) return
+      pointerX = event.clientX
+      pointerY = event.clientY
+      if (!framePending) {
+        framePending = true
+        foreignFrameId = requestAnimationFrame(evaluate)
+      }
+    }
+
+    window.addEventListener('pointermove', onForeignMove)
+
+    return () => {
+      window.removeEventListener('pointermove', onForeignMove)
+      if (foreignFrameId !== null) {
+        cancelAnimationFrame(foreignFrameId)
+      }
+      resetPointerTrackingRef.current()
+    }
+  }, [getConnectionNodeId, nodeId])
+
+  const ring = resolveRing(ringStyles)
+  const { d: path } = renderedPath
+  const silhouetteColor = hasRing && ring.solid ? ring.color : 'var(--border-1)'
+
+  return (
+    <svg
+      ref={svgRef}
+      viewBox={`${-BORDER_PADDING_PX} ${-BORDER_PADDING_PX} ${size.width + BORDER_PADDING_PX * 2} ${size.height + BORDER_PADDING_PX * 2}`}
+      preserveAspectRatio='none'
+      className='pointer-events-none absolute z-0 overflow-visible'
+      style={{
+        top: -BORDER_PADDING_PX,
+        left: -BORDER_PADDING_PX,
+        width: `calc(100% + ${BORDER_PADDING_PX * 2}px)`,
+        height: `calc(100% + ${BORDER_PADDING_PX * 2}px)`,
+      }}
+      aria-hidden='true'
+      focusable='false'
+    >
+      {path && (
+        <defs>
+          <clipPath id={clipId}>
+            <path d={path} />
+          </clipPath>
+        </defs>
+      )}
+      {hasRing && !ring.solid && path && (
+        <path
+          d={path}
+          fill='none'
+          stroke={ring.color}
+          strokeWidth={ring.width}
+          className={ring.pulse ? 'animate-ring-pulse' : undefined}
+        />
+      )}
+      {path && (
+        <>
+          <path
+            d={path}
+            fill={silhouetteColor}
+            stroke={silhouetteColor}
+            strokeWidth={SILHOUETTE_STROKE_WIDTH_PX}
+          />
+          {/*
+           * The knob's share of the silhouette outline, recoloured. Half the
+           * outline's width falls outside the filled shape, and the body fill
+           * below is clipped to that shape — so without this a hairline of the
+           * silhouette colour survives all the way around each coloured knob,
+           * reading as a light halo bleeding into it.
+           */}
+          {renderedPath.knobs.map((knob) => (
+            <path
+              key={`${knob.id}-outline`}
+              d={knob.d}
+              fill='none'
+              stroke={knob.color}
+              strokeWidth={SILHOUETTE_STROKE_WIDTH_PX}
+            />
+          ))}
+          <g clipPath={`url(#${clipId})`}>
+            {renderedPath.knobs.map((knob) => (
+              <path
+                key={knob.id}
+                d={knob.d}
+                fill='none'
+                stroke={knob.color}
+                strokeWidth={PORT_FILL_STROKE_WIDTH_PX}
+              />
+            ))}
+          </g>
+          {renderedPath.overlay && (
+            <>
+              <path d={`${renderedPath.overlay} Z`} fill={silhouetteColor} />
+              <path
+                d={renderedPath.overlay}
+                fill='none'
+                stroke={silhouetteColor}
+                strokeWidth={SILHOUETTE_STROKE_WIDTH_PX}
+              />
+            </>
+          )}
+          <rect
+            x='0.75'
+            y='0.75'
+            width={Math.max(0, size.width - 1.5)}
+            height={Math.max(0, size.height - 1.5)}
+            rx={Math.max(0, radius - 0.75)}
+            fill='var(--surface-2)'
+          />
+        </>
+      )}
+      {path && (
+        <path
+          d={path}
+          fill='none'
+          stroke='transparent'
+          strokeWidth={CURSOR_TRACKING_MARGIN_PX * 2}
+          pointerEvents='stroke'
+        />
+      )}
+    </svg>
+  )
+}
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
index 82ce02c9d05..64039a4e45b 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -1,38 +1,203 @@
-import type { ComponentType, ReactNode, Ref } from 'react'
-import { Badge, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
-import { Handle, Position } from 'reactflow'
-import { HANDLE_POSITIONS } from '../dimensions'
+import {
+  type ComponentType,
+  type CSSProperties,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { Badge, ChipTag, cn, handleKeyboardActivation, Switch, Tooltip } from '@sim/emcn'
+import {
+  getPositionedSourceHandleId,
+  getPositionedTargetHandleId,
+  POSITIONED_SOURCE_HANDLE_SIDES,
+  type PositionedSourceHandleSide,
+} from '@sim/workflow-types/workflow'
+import {
+  Handle,
+  internalsSymbol,
+  Position,
+  useStoreApi as useReactFlowStoreApi,
+  useUpdateNodeInternals,
+} from 'reactflow'
+import { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '../dimensions'
+import { humanizeBlockName } from '../lib/humanize-block-name'
 import { OverflowSpan } from '../lib/overflow-span'
-import { tileIconColorClass } from '../lib/tile-icon-color'
 import type { BlockRunStatus } from '../types'
+import {
+  getCursorBranchSourceHandleId,
+  getCursorSourceHandleId,
+  getCursorSourceHandlePosition,
+} from './source-handle'
 import { SubBlockRowView } from './sub-block-row-view'
+import {
+  CONNECTION_KNOB_PEAK_PX,
+  CURSOR_SWELL_LENGTH_PX,
+  WorkflowBlockBorder,
+  type WorkflowBorderCursorHandle,
+  type WorkflowBorderPort,
+} from './workflow-block-border'
+
+const getHandleStyle = (position: 'horizontal' | 'vertical') => {
+  if (position === 'horizontal') {
+    return { top: '50%', transform: 'translateY(-50%)' }
+  }
+  return { left: '50%', transform: 'translateX(-50%)' }
+}
+
+/** Radial hit depth stays on the painted knob instead of covering card content. */
+const HANDLE_HIT_CROSS_PX = CONNECTION_KNOB_PEAK_PX * 2
+/** Along-edge hit span matches the primary connection knob's painted footprint. */
+const MAIN_HANDLE_HIT_LENGTH_PX = 38
+/** Card bottom → error-row centre: half the content padding + half the row. */
+const TAB_LENGTH_PX = 36
+const TAB_LENGTH_SMALL_PX = 24
+const TAB_LENGTH_MIN_PX = 16
+const TAB_LENGTH_HEADER_ONLY_PX = 10
+/** The error knob is deliberately the shortest of the connection knobs — it is
+ *  a secondary output, and a full-length tab crowds the card's bottom corner. */
+const TAB_HEIGHT_RATIO = 0.5
+const CARD_CORNER_RADIUS_PX = 16
+const CORNER_SLACK_PX = 4
+const ACTION_MENU_FALLBACK_WIDTH_PX = 132
+const ACTION_MENU_RIGHT_INSET_PX = 24
+const ACTION_MENU_MAX_WIDTH_PX = BLOCK_DIMENSIONS.FIXED_WIDTH - ACTION_MENU_RIGHT_INSET_PX * 2
+const ACTION_MENU_AMPLITUDE = 7
+/** Hold the gray swell open briefly on close so icons can fade out first. */
+const ACTION_MENU_CLOSE_RETRACT_DELAY_MS = 40
+/** Ignore brief pointer exits (edges, handles) so hover doesn't flicker closed. */
+const ACTION_MENU_HOVER_LEAVE_DELAY_MS = 100
+/** Extra hit area above the card for the action swell. */
+const ACTION_MENU_HOVER_TOP_PAD_PX = 28
+/** Compile-time pin: the `-7px` handle outsets below must track the knob peak. */
+const HANDLE_OUTSET_PX: typeof CONNECTION_KNOB_PEAK_PX = 7
+
+interface BranchCursorRow {
+  id: string
+}
+
+interface WorkflowCursorSourceHandle extends WorkflowBorderCursorHandle {
+  handleId: string
+}
+
+/** Resolves a moving branch-card swell to the nearest visible branch row. */
+export function getNearestBranchCursorHandleId(
+  rows: BranchCursorRow[],
+  cursorY: number,
+  firstRowY: number,
+  handlePrefix: 'condition' | 'router'
+): string | null {
+  if (rows.length === 0) return null
+
+  const nearestIndex = Math.min(
+    rows.length - 1,
+    Math.max(0, Math.round((cursorY - firstRowY) / HANDLE_POSITIONS.CONDITION_ROW_HEIGHT))
+  )
+  return getCursorBranchSourceHandleId(`${handlePrefix}-${rows[nearestIndex].id}`)
+}
+
+const WORKFLOW_TYPE_ACCENTS = {
+  agent: { variant: 'workflow', tone: 'inverse' },
+  api: { variant: 'workflow', tone: 'orange' },
+  condition: { variant: 'workflow', tone: 'ash' },
+  credential: { variant: 'workflow', tone: 'yellow' },
+  file: { variant: 'workflow', tone: 'orange' },
+  file_v5: { variant: 'workflow', tone: 'orange' },
+  function: { variant: 'workflow', tone: 'ash' },
+  router_v2: { variant: 'workflow', tone: 'blue' },
+  table: { variant: 'workflow', tone: 'green' },
+} as const
+
+const DEFAULT_WORKFLOW_TYPE_ACCENT = { variant: 'workflow', tone: 'neutral' } as const
+
+export const getWorkflowTypeAccent = (type: string) =>
+  WORKFLOW_TYPE_ACCENTS[type as keyof typeof WORKFLOW_TYPE_ACCENTS] ?? DEFAULT_WORKFLOW_TYPE_ACCENT
+
+const clampTabLength = (length: number) =>
+  Math.min(TAB_LENGTH_PX, Math.max(TAB_LENGTH_MIN_PX, Math.round(length)))
 
 /**
- * Reusable styles and positioning for Handle components.
+ * The outsets below are the anchor every edge terminates at, and they must
+ * equal the height each knob is painted at — otherwise the line stops short of
+ * the knob (or overshoots past it). Tailwind only scans literal class strings,
+ * so the value is spelled out here and pinned to the renderer's constant by the
+ * assertion above.
  */
-const getHandleClasses = (position: 'left' | 'right' | 'top' | 'bottom', isError = false) => {
-  const baseClasses = '!z-[0] !cursor-crosshair !border-none !transition-[colors] !duration-150'
-  const colorClasses = isError ? '!bg-[var(--text-error)]' : '!bg-[var(--workflow-edge)]'
-
-  const positionClasses = {
-    left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover-hover:!left-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-l-full',
-    right:
-      '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover-hover:!right-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-r-full',
-    top: '!top-[-8px] !h-[7px] !w-5 !rounded-t-[2px] !rounded-b-none hover-hover:!top-[-11px] hover-hover:!h-[10px] hover-hover:!rounded-t-full',
-    bottom:
-      '!bottom-[-8px] !h-[7px] !w-5 !rounded-b-[2px] !rounded-t-none hover-hover:!bottom-[-11px] hover-hover:!h-[10px] hover-hover:!rounded-b-full',
-  }
+const getInvisibleHandleClasses = (side: 'left' | 'right' | 'top' | 'bottom') => {
+  const offsetClasses = {
+    right: '!right-[-7px]',
+    left: '!left-[-7px]',
+    top: '!top-[-7px]',
+    bottom: '!bottom-[-7px]',
+  } as const
+  return cn(
+    '!z-20 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0',
+    offsetClasses[side]
+  )
+}
 
-  return cn(baseClasses, colorClasses, positionClasses[position])
+/**
+ * Hit area for a connection port. It follows the painted knob instead of the
+ * broader edge-hover swell, keeping nearby card content draggable. Main ports
+ * use the primary knob footprint; branch ports can fill their row lane so
+ * adjacent targets meet without overlapping while the painted knobs stay
+ * visually compact.
+ */
+const invisibleHandleSize = (
+  side: 'left' | 'right' | 'top' | 'bottom',
+  length: number,
+  minLength = 0
+) => {
+  const span = Math.max(length, minLength)
+  return side === 'top' || side === 'bottom'
+    ? { width: span, height: HANDLE_HIT_CROSS_PX }
+    : { width: HANDLE_HIT_CROSS_PX, height: span }
 }
 
-const getHandleStyle = (position: 'horizontal' | 'vertical') => {
-  if (position === 'horizontal') {
-    return { top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, transform: 'translateY(-50%)' }
+const getReactFlowPosition = (side: PositionedSourceHandleSide) => {
+  return side === 'left' ? Position.Left : Position.Right
+}
+
+const getCenteredSideHandleStyle = (side: PositionedSourceHandleSide): CSSProperties => {
+  const style: CSSProperties = {
+    right: 'auto',
+    bottom: 'auto',
+    width: 1,
+    height: 1,
   }
-  return { left: '50%', transform: 'translateX(-50%)' }
+  if (side === 'right') {
+    return { ...style, top: '50%', left: '100%', transform: 'translate(-50%, -50%)' }
+  }
+  return { ...style, top: '50%', left: 0, transform: 'translate(-50%, -50%)' }
 }
 
+/** Error is the only persisted source that leaves from a vertical card edge. */
+export const ERROR_SOURCE_HANDLE_POSITION = Position.Bottom
+
+/** Keeps the Error hit target centered on the painted bottom-right knob. */
+export const getErrorSourceHandleStyle = (): CSSProperties => ({
+  right: 'auto',
+  top: 'auto',
+  bottom: -HANDLE_OUTSET_PX,
+  left: `calc(100% - ${HANDLE_POSITIONS.ERROR_RIGHT_OFFSET}px)`,
+  width: TAB_LENGTH_SMALL_PX,
+  height: HANDLE_HIT_CROSS_PX,
+  transform: 'translateX(-50%)',
+})
+
+/** Builds the fixed Error knob painted into the card's bottom edge. */
+export const getErrorBorderPort = (color?: string): WorkflowBorderPort => ({
+  id: 'error',
+  side: 'bottom',
+  position: { fromEnd: HANDLE_POSITIONS.ERROR_RIGHT_OFFSET },
+  plateau: TAB_LENGTH_SMALL_PX,
+  color,
+})
+
 /**
  * Props for the pure workflow-block renderer.
  *
@@ -62,6 +227,12 @@ export interface WorkflowBlockViewProps {
   /** Handle orientation and topology, resolved by the container. */
   horizontalHandles: boolean
   shouldShowDefaultHandles: boolean
+  /**
+   * Deterministic card height in px, used to scale the side connection tabs
+   * so a short card never wears a tab nearly as tall as itself. Omit to keep
+   * the full-size tabs (read-only contexts without computed dimensions).
+   */
+  blockHeight?: number
   hasContentBelowHeader: boolean
   conditionRows: { id: string; title: string; value: string }[]
   routerRows: { id: string; value: string }[]
@@ -113,6 +284,42 @@ export interface WorkflowBlockViewProps {
    * conditionRows/routerRows.
    */
   rows: ReactNode
+  /**
+   * Inline statement fragments rendered as one line above the rows (operation
+   * · target). Built by the container; standard blocks only — condition/router
+   * blocks render their branch rows instead.
+   */
+  chips?: ReactNode
+  /**
+   * Block-kind label (e.g. "Table", "Agent") shown as a ChipTag on the header
+   * right. Hidden when it matches the block name to avoid duplication.
+   */
+  typeLabel?: string
+  /**
+   * Natural-language summary of what the block does, with inline value
+   * chips. When present it replaces the statement line and field rows;
+   * the error footer stays.
+   */
+  sentence?: ReactNode
+  /**
+   * Whether a persisted legacy error route is wired from this block. Used
+   * only to retain a non-interactive edge anchor for existing workflows.
+   */
+  hasErrorConnection?: boolean
+  /** Whether this block's error output is switched on. */
+  errorOutputEnabled?: boolean
+  /** Toggles the error output from the card's error row. */
+  onToggleErrorOutput?: (enabled: boolean) => void
+  /**
+   * Handle ids whose connected edge is currently highlighted (an endpoint
+   * block is selected) — their tabs darken to match the edge color so the
+   * line and its port read as one piece.
+   */
+  highlightedHandles?: ReadonlySet<string>
+  /** Side-specific source handles currently used by persisted edges. */
+  connectedSourceHandles?: ReadonlySet<string>
+  /** Side-specific target handles currently used by persisted edges. */
+  connectedTargetHandles?: ReadonlySet<string>
 }
 
 /**
@@ -132,8 +339,8 @@ export function WorkflowBlockView({
   runPathStatus,
   Icon,
   iconBgColor,
-  horizontalHandles,
   shouldShowDefaultHandles,
+  blockHeight,
   hasContentBelowHeader,
   conditionRows,
   routerRows,
@@ -165,9 +372,421 @@ export function WorkflowBlockView({
   contentRef,
   actionBar,
   rows,
+  chips,
+  typeLabel,
+  sentence,
+  hasErrorConnection = false,
+  errorOutputEnabled = false,
+  onToggleErrorOutput,
+  highlightedHandles,
+  connectedSourceHandles,
+  connectedTargetHandles,
 }: WorkflowBlockViewProps) {
+  const updateNodeInternals = useUpdateNodeInternals()
+  const reactFlowStore = useReactFlowStoreApi()
+  const getConnectionNodeId = useCallback(
+    () => reactFlowStore.getState().connectionNodeId,
+    [reactFlowStore]
+  )
+  const supportsPositionedHandles =
+    type !== 'condition' && type !== 'router_v2' && type !== 'response'
+  const supportsCursorHandle = type !== 'response'
+  const cursorSourceHandleRef = useRef<HTMLDivElement>(null)
+  const cursorSourceHandleKeyRef = useRef<string | null>(null)
+  const [cursorSourceHandle, setCursorSourceHandle] = useState<WorkflowCursorSourceHandle | null>(
+    null
+  )
+  const onCursorHandleChange = useCallback(
+    (nextHandle: WorkflowBorderCursorHandle | null) => {
+      if (!supportsCursorHandle) return
+      if (!nextHandle) {
+        if (cursorSourceHandleKeyRef.current === null) return
+        cursorSourceHandleKeyRef.current = null
+        setCursorSourceHandle(null)
+        return
+      }
+
+      const handleId =
+        type === 'condition'
+          ? getNearestBranchCursorHandleId(
+              conditionRows,
+              nextHandle.y,
+              HANDLE_POSITIONS.CONDITION_START_Y,
+              'condition'
+            )
+          : type === 'router_v2'
+            ? getNearestBranchCursorHandleId(
+                routerRows,
+                nextHandle.y,
+                HANDLE_POSITIONS.CONDITION_START_Y + HANDLE_POSITIONS.CONDITION_ROW_HEIGHT,
+                'router'
+              )
+            : getCursorSourceHandleId(nextHandle.side)
+      if (!handleId) return
+
+      const handleElement = cursorSourceHandleRef.current
+      if (handleElement) {
+        handleElement.style.left = `${nextHandle.x}px`
+        handleElement.style.top = `${nextHandle.y}px`
+      }
+      const nextKey = `${handleId}:${nextHandle.edgeSide}`
+      if (cursorSourceHandleKeyRef.current !== nextKey) {
+        cursorSourceHandleKeyRef.current = nextKey
+        setCursorSourceHandle({ ...nextHandle, handleId })
+      }
+    },
+    [conditionRows, routerRows, supportsCursorHandle, type]
+  )
+  /**
+   * Keeps React Flow's cached origin aligned with the transient DOM handle
+   * without remeasuring the node or publishing a canvas-wide store update.
+   */
+  const syncCursorSourceHandleBounds = useCallback(() => {
+    const handleElement = cursorSourceHandleRef.current
+    const nodeElement = handleElement?.closest<HTMLDivElement>('.react-flow__node') ?? null
+    if (!handleElement || !nodeElement) return
+
+    const state = reactFlowStore.getState()
+    const sourceBounds = state.nodeInternals.get(id)?.[internalsSymbol]?.handleBounds?.source
+    const handleId = handleElement.dataset.handleid
+    const handlePosition = handleElement.dataset.handlepos as Position | undefined
+    const zoom = state.transform[2]
+    if (!sourceBounds || !handleId || !handlePosition || zoom <= 0) return
+
+    const nodeBounds = nodeElement.getBoundingClientRect()
+    const handleBounds = handleElement.getBoundingClientRect()
+    const [originX, originY] = state.nodeOrigin
+    const nextBounds = {
+      id: handleId,
+      position: handlePosition,
+      x: (handleBounds.left - nodeBounds.left - nodeBounds.width * originX) / zoom,
+      y: (handleBounds.top - nodeBounds.top - nodeBounds.height * originY) / zoom,
+      width: handleElement.offsetWidth,
+      height: handleElement.offsetHeight,
+    }
+    const currentBounds = sourceBounds.find((bounds) => bounds.id === handleId)
+    if (currentBounds) {
+      Object.assign(currentBounds, nextBounds)
+      return
+    }
+    sourceBounds.push(nextBounds)
+  }, [id, reactFlowStore])
+  const [actionMenuFocused, setActionMenuFocused] = useState(false)
+  const [actionMenuHovered, setActionMenuHovered] = useState(false)
+  const actionMenuRootRef = useRef<HTMLDivElement>(null)
+  const actionMenuHostRef = useRef<HTMLDivElement>(null)
+  const actionMenuHoverLeaveTimeoutRef = useRef<number | null>(null)
+  const actionMenuHoverMoveRef = useRef<((event: PointerEvent) => void) | null>(null)
+  const [actionMenuWidth, setActionMenuWidth] = useState(ACTION_MENU_FALLBACK_WIDTH_PX)
+  const [actionMenuSwellReady, setActionMenuSwellReady] = useState(false)
+  const isNodeSelected = hasRing && ringStyles.includes('--text-secondary')
+  const keepActionMenuOpen = actionMenuFocused || actionMenuHovered || isNodeSelected
+  const actionMenuContentVisible = keepActionMenuOpen && actionMenuSwellReady
+  const [actionMenuSwellOpen, setActionMenuSwellOpen] = useState(keepActionMenuOpen)
+  const showActionMenu = Boolean(actionBar)
+  const typeAccent = getWorkflowTypeAccent(type)
+
+  useEffect(() => {
+    if (keepActionMenuOpen) {
+      setActionMenuSwellOpen(true)
+      return
+    }
+    const timeoutId = window.setTimeout(() => {
+      setActionMenuSwellOpen(false)
+    }, ACTION_MENU_CLOSE_RETRACT_DELAY_MS)
+    return () => window.clearTimeout(timeoutId)
+  }, [keepActionMenuOpen])
+
+  useEffect(() => {
+    if (!showActionMenu) return
+
+    const clearHoverLeave = () => {
+      if (actionMenuHoverLeaveTimeoutRef.current !== null) {
+        window.clearTimeout(actionMenuHoverLeaveTimeoutRef.current)
+        actionMenuHoverLeaveTimeoutRef.current = null
+      }
+      if (actionMenuHoverMoveRef.current) {
+        window.removeEventListener('pointermove', actionMenuHoverMoveRef.current)
+        actionMenuHoverMoveRef.current = null
+      }
+    }
+
+    const isPointerOverActionMenu = (event: PointerEvent) => {
+      const root = actionMenuRootRef.current
+      if (!root) return false
+      const rect = root.getBoundingClientRect()
+      return (
+        event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top - ACTION_MENU_HOVER_TOP_PAD_PX &&
+        event.clientY <= rect.bottom
+      )
+    }
+
+    const openActionMenuHover = () => {
+      clearHoverLeave()
+      setActionMenuHovered(true)
+      setActionMenuSwellOpen(true)
+    }
+
+    const scheduleActionMenuHoverLeave = () => {
+      if (actionMenuHoverLeaveTimeoutRef.current !== null) {
+        window.clearTimeout(actionMenuHoverLeaveTimeoutRef.current)
+      }
+      if (!actionMenuHoverMoveRef.current) {
+        const onMove = (event: PointerEvent) => {
+          if (isPointerOverActionMenu(event)) {
+            openActionMenuHover()
+          }
+        }
+        actionMenuHoverMoveRef.current = onMove
+        window.addEventListener('pointermove', onMove, { passive: true })
+      }
+      actionMenuHoverLeaveTimeoutRef.current = window.setTimeout(() => {
+        actionMenuHoverLeaveTimeoutRef.current = null
+        if (actionMenuHoverMoveRef.current) {
+          window.removeEventListener('pointermove', actionMenuHoverMoveRef.current)
+          actionMenuHoverMoveRef.current = null
+        }
+        setActionMenuHovered(false)
+      }, ACTION_MENU_HOVER_LEAVE_DELAY_MS)
+    }
+
+    // Bind to the React Flow node wrapper so edges/handles that sit above the
+    // card don't permanently steal hover from the swell.
+    const root = actionMenuRootRef.current
+    const nodeEl = root?.closest('.react-flow__node') ?? root
+    if (!nodeEl) return
+
+    const onEnter = () => openActionMenuHover()
+    const onLeave = () => scheduleActionMenuHoverLeave()
+    nodeEl.addEventListener('pointerenter', onEnter)
+    nodeEl.addEventListener('pointerleave', onLeave)
+
+    return () => {
+      clearHoverLeave()
+      nodeEl.removeEventListener('pointerenter', onEnter)
+      nodeEl.removeEventListener('pointerleave', onLeave)
+    }
+  }, [showActionMenu])
+  /* Blocks that can emit an error always carry the row; `response` terminates
+     the flow and has no error branch. */
+  const showErrorRow = shouldShowDefaultHandles && type !== 'response'
+  /*
+   * The error output is a real, draggable source whenever the toggle is on (a
+   * connection forces the toggle on, so connected cards always have it). It
+   * doubles as the edge anchor for existing error connections.
+   */
+  const rendersErrorHandle = showErrorRow && (errorOutputEnabled || hasErrorConnection)
+  useEffect(() => {
+    if (supportsCursorHandle) return
+    cursorSourceHandleKeyRef.current = null
+    setCursorSourceHandle(null)
+  }, [supportsCursorHandle])
+  useLayoutEffect(() => {
+    updateNodeInternals(id)
+  }, [
+    cursorSourceHandle?.handleId,
+    cursorSourceHandle?.side,
+    id,
+    /* The error handle mounts with the toggle; without a refresh React Flow
+       keeps stale handleBounds and drops the edge (error 008) until something
+       else re-measures the node. */
+    rendersErrorHandle,
+    updateNodeInternals,
+  ])
+  useLayoutEffect(() => {
+    const actionMenu = actionMenuHostRef.current?.querySelector<HTMLElement>(
+      '[data-workflow-action-bar-swell]'
+    )
+    if (!actionMenu) return
+    const updateWidth = () => {
+      const nextWidth = Math.min(ACTION_MENU_MAX_WIDTH_PX, actionMenu.offsetWidth)
+      if (nextWidth <= 0) return
+      setActionMenuWidth((current) => (current === nextWidth ? current : nextWidth))
+    }
+    updateWidth()
+    const observer = new ResizeObserver(updateWidth)
+    observer.observe(actionMenu)
+    return () => observer.disconnect()
+  }, [showActionMenu])
+  const tabFill = (handleId: string) =>
+    highlightedHandles?.has(handleId) ? 'var(--text-secondary)' : undefined
+
+  /* Side tabs scale with the card: half the card height, clamped to 16-36px,
+     so both default ports on a two-port card stay identical while a
+     header-only card gets a proportionally short tab. A second cap keeps the
+     bulge junctions on the straight border segment, clear of the rounded
+     corners where the outline curves away from the tab's wall. Header-only
+     trigger cards do not always expose a computed height, so their fallback
+     stays at the minimum. */
+  const sideTabLength = !hasContentBelowHeader
+    ? TAB_LENGTH_HEADER_ONLY_PX
+    : blockHeight && blockHeight > 0
+      ? clampTabLength(
+          Math.min(
+            blockHeight * TAB_HEIGHT_RATIO,
+            blockHeight - 2 * (CARD_CORNER_RADIUS_PX - CORNER_SLACK_PX)
+          )
+        )
+      : TAB_LENGTH_MIN_PX
+  const mainTabLength = (side: 'left' | 'right' | 'top' | 'bottom') =>
+    side === 'top' || side === 'bottom' ? TAB_LENGTH_PX : sideTabLength
+
+  /* Per-row branch ports shrink as rows multiply (24px for two rows, -2px per
+     extra row, floored at 16px) so a long stack keeps air between the bumps
+     within the fixed 29px row pitch. */
+  const branchRowCount = type === 'condition' ? conditionRows.length : routerRows.length
+  const rowTabLength = clampTabLength(
+    branchRowCount <= 2 ? TAB_LENGTH_SMALL_PX : TAB_LENGTH_SMALL_PX - (branchRowCount - 2) * 2
+  )
+  const defaultTargetSide: PositionedSourceHandleSide = 'left'
+  const defaultSourceSide: PositionedSourceHandleSide = 'right'
+  const borderPorts = useMemo<WorkflowBorderPort[]>(() => {
+    const ports: WorkflowBorderPort[] = []
+    if (shouldShowDefaultHandles) {
+      ports.push({
+        id: 'target',
+        side: defaultTargetSide,
+        position: 'center',
+        plateau: mainTabLength(defaultTargetSide),
+        color:
+          tabFill('target') ??
+          tabFill(getPositionedSourceHandleId(defaultTargetSide)) ??
+          tabFill(getPositionedTargetHandleId(defaultTargetSide)),
+      })
+    }
+    if (type === 'condition') {
+      conditionRows.forEach((condition, index) => {
+        ports.push({
+          id: `condition-${condition.id}`,
+          side: 'right',
+          position:
+            HANDLE_POSITIONS.CONDITION_START_Y + index * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT,
+          plateau: rowTabLength,
+          color: tabFill(`condition-${condition.id}`),
+        })
+      })
+    } else if (type === 'router_v2') {
+      routerRows.forEach((route, index) => {
+        ports.push({
+          id: `router-${route.id}`,
+          side: 'right',
+          position:
+            HANDLE_POSITIONS.CONDITION_START_Y +
+            (index + 1) * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT,
+          plateau: rowTabLength,
+          color: tabFill(`router-${route.id}`),
+        })
+      })
+    } else if (type !== 'response') {
+      ports.push({
+        id: 'source',
+        side: defaultSourceSide,
+        position: 'center',
+        plateau: mainTabLength(defaultSourceSide),
+        color:
+          tabFill('source') ??
+          tabFill(getPositionedSourceHandleId(defaultSourceSide)) ??
+          tabFill(getPositionedTargetHandleId(defaultSourceSide)),
+      })
+    }
+    if (supportsPositionedHandles) {
+      for (const side of POSITIONED_SOURCE_HANDLE_SIDES) {
+        const handleId = getPositionedSourceHandleId(side)
+        const sharesDefaultPort =
+          side === defaultSourceSide || (shouldShowDefaultHandles && side === defaultTargetSide)
+        if (!connectedSourceHandles?.has(handleId) || sharesDefaultPort) continue
+        ports.push({
+          id: handleId,
+          side,
+          position: 'center',
+          plateau: mainTabLength(side),
+          color: tabFill(handleId) ?? tabFill(getPositionedTargetHandleId(side)),
+        })
+      }
+    }
+    for (const side of POSITIONED_SOURCE_HANDLE_SIDES) {
+      const handleId = getPositionedTargetHandleId(side)
+      const sharesDefaultPort =
+        (shouldShowDefaultHandles && side === defaultTargetSide) ||
+        side === defaultSourceSide ||
+        connectedSourceHandles?.has(getPositionedSourceHandleId(side))
+      if (!connectedTargetHandles?.has(handleId) || sharesDefaultPort) continue
+      ports.push({
+        id: handleId,
+        side,
+        position: 'center',
+        plateau: mainTabLength(side),
+        color: tabFill(handleId),
+      })
+    }
+    if (showErrorRow && errorOutputEnabled) {
+      ports.push(getErrorBorderPort(tabFill('error')))
+    }
+    if (showActionMenu) {
+      ports.push({
+        id: 'action-menu',
+        side: 'top',
+        position: { fromEnd: ACTION_MENU_RIGHT_INSET_PX + actionMenuWidth / 2 },
+        plateau: actionMenuWidth,
+        restAmplitude: actionMenuSwellOpen ? ACTION_MENU_AMPLITUDE : 0,
+        hoverAmplitude: ACTION_MENU_AMPLITUDE,
+        magnetizable: false,
+      })
+    }
+    return ports
+  }, [
+    conditionRows,
+    connectedSourceHandles,
+    connectedTargetHandles,
+    actionMenuSwellOpen,
+    actionMenuWidth,
+    defaultSourceSide,
+    defaultTargetSide,
+    highlightedHandles,
+    routerRows,
+    rowTabLength,
+    shouldShowDefaultHandles,
+    showActionMenu,
+    showErrorRow,
+    errorOutputEnabled,
+    sideTabLength,
+    supportsPositionedHandles,
+    type,
+  ])
+
   return (
-    <div className='group relative'>
+    <div
+      ref={actionMenuRootRef}
+      className='group relative'
+      data-action-menu-ready={actionMenuContentVisible ? '' : undefined}
+      /* Single source of truth for "the swell is painted in the selection
+         color" — the action bar keys its icon treatment off this instead of
+         React Flow's raw `selected`, which diverges whenever another ring wins
+         (an executing block keeps the success ring and no selection swell). */
+      data-node-selected={isNodeSelected ? '' : undefined}
+    >
+      {showActionMenu && (
+        <>
+          <div
+            aria-hidden='true'
+            data-workflow-action-bar-bridge=''
+            className='-top-[28px] pointer-events-auto absolute inset-x-0 z-10 h-[28px]'
+          />
+          <div
+            ref={actionMenuHostRef}
+            onFocusCapture={() => setActionMenuFocused(true)}
+            onBlurCapture={(event) => {
+              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+                setActionMenuFocused(false)
+              }
+            }}
+          >
+            {actionBar}
+          </div>
+        </>
+      )}
       <div
         ref={contentRef}
         role='button'
@@ -175,24 +794,72 @@ export function WorkflowBlockView({
         onClick={onSelect}
         onKeyDown={(event) => handleKeyboardActivation(event, onSelect)}
         className={cn(
-          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-2xl [&:active]:cursor-grabbing'
         )}
+        /* Never let the host fall below the shortest silhouette the border can
+           paint. `blockHeight` arrives from the deterministic-dimensions pass
+           and is already floored at MIN_PAINTED_HEIGHT, but it is absent on the
+           first frames — and with no floor the host collapses to its natural
+           content height (~25px for a header-only trigger). The border builds
+           its perimeter from `host.offsetHeight`, so that window paints a
+           sub-floor card: the action-menu tab is squashed and its icon row
+           spills onto the card. */
+        style={{ minHeight: Math.max(blockHeight ?? 0, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT) }}
       >
+        <WorkflowBlockBorder
+          nodeId={id}
+          getConnectionNodeId={getConnectionNodeId}
+          ports={borderPorts}
+          hasRing={hasRing}
+          ringStyles={ringStyles}
+          height={blockHeight}
+          onCursorHandleChange={supportsCursorHandle ? onCursorHandleChange : undefined}
+          onActionMenuReadyChange={setActionMenuSwellReady}
+        />
+        {cursorSourceHandle && (
+          <Handle
+            ref={cursorSourceHandleRef}
+            type='source'
+            position={getCursorSourceHandlePosition(cursorSourceHandle.edgeSide)}
+            id={cursorSourceHandle.handleId}
+            className='!z-50 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+            style={{
+              right: 'auto',
+              bottom: 'auto',
+              left: cursorSourceHandle.x,
+              top: cursorSourceHandle.y,
+              transform: 'translate(-50%, -50%)',
+              ...invisibleHandleSize(cursorSourceHandle.edgeSide, CURSOR_SWELL_LENGTH_PX),
+            }}
+            data-nodeid={id}
+            data-handleid={cursorSourceHandle.handleId}
+            data-workflow-cursor-edge={cursorSourceHandle.edgeSide}
+            data-workflow-cursor-source-side={cursorSourceHandle.side}
+            isConnectableStart={true}
+            isConnectableEnd={false}
+            onPointerDownCapture={syncCursorSourceHandleBounds}
+            isValidConnection={(connection) => {
+              if (connection.target === id) return false
+              return !wouldCreateConnectionCycle(connection.source!, connection.target!)
+            }}
+          />
+        )}
         {isPending && (
           <div className='-top-6 -translate-x-1/2 absolute left-1/2 z-10 transform rounded-t-md bg-amber-500 px-2 py-0.5 text-white text-xs'>
             Next Step
           </div>
         )}
 
-        {actionBar}
-
         {shouldShowDefaultHandles && (
           <Handle
             type='target'
-            position={horizontalHandles ? Position.Left : Position.Top}
+            position={Position.Left}
             id='target'
-            className={getHandleClasses(horizontalHandles ? 'left' : 'top')}
-            style={getHandleStyle(horizontalHandles ? 'horizontal' : 'vertical')}
+            className={getInvisibleHandleClasses('left')}
+            style={{
+              ...getHandleStyle('horizontal'),
+              ...invisibleHandleSize('left', mainTabLength('left'), MAIN_HANDLE_HIT_LENGTH_PX),
+            }}
             data-nodeid={id}
             data-handleid='target'
             isConnectableStart={false}
@@ -206,33 +873,39 @@ export function WorkflowBlockView({
 
         <div
           className={cn(
-            'flex items-center justify-between p-2',
-            hasContentBelowHeader && 'border-[var(--border-1)] border-b'
+            'flex items-center justify-between px-2',
+            hasContentBelowHeader && 'h-[40px]'
           )}
+          /* Header-only cards stretch the header to the full card so its
+             `items-center` centres the title and type tag. Floored for the
+             same reason the host is: without it the row collapses to its
+             natural height on the frames before `blockHeight` arrives and the
+             content pins to the top of the card. */
+          style={
+            !hasContentBelowHeader
+              ? { height: Math.max(blockHeight ?? 0, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT) }
+              : undefined
+          }
         >
-          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
-            <div
-              className='flex size-[24px] flex-shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full'
-              style={{
-                background: isEnabled ? iconBgColor : 'gray',
-              }}
-            >
-              <Icon
-                className={cn(
-                  'size-[16px]',
-                  isEnabled ? tileIconColorClass(iconBgColor) : 'text-[var(--text-icon)]'
-                )}
-              />
-            </div>
+          <div className='relative z-10 flex min-w-0 flex-1 items-center'>
             <OverflowSpan
-              value={name}
+              value={humanizeBlockName(name)}
               className={cn(
-                'truncate font-medium text-md',
+                'truncate font-medium text-[17px]',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
             />
           </div>
           <div className='relative z-10 flex flex-shrink-0 items-center gap-1'>
+            <ChipTag
+              variant={typeAccent.variant}
+              tone={typeAccent.tone}
+              className='flex-shrink-0 justify-center'
+              data-workflow-type-accent={type}
+            >
+              <Icon className='size-[14px] flex-shrink-0' />
+              {typeLabel && typeLabel !== name ? typeLabel : null}
+            </ChipTag>
             {sunsetStatus && (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -372,7 +1045,7 @@ export function WorkflowBlockView({
         </div>
 
         {hasContentBelowHeader && (
-          <div className='flex flex-col gap-2 p-2'>
+          <div className='relative z-[2] flex flex-col gap-2 p-2'>
             {type === 'condition' ? (
               conditionRows.map((cond) => (
                 <SubBlockRowView key={cond.id} title={cond.title} displayValue={cond.value} />
@@ -388,10 +1061,36 @@ export function WorkflowBlockView({
                   />
                 ))}
               </>
+            ) : sentence ? (
+              <p className='min-w-0 break-words text-[var(--text-muted)] text-sm leading-6'>
+                {sentence}
+              </p>
             ) : (
-              rows
+              <>
+                {chips && (
+                  <div className='flex min-w-0 items-center gap-1.5 overflow-hidden'>{chips}</div>
+                )}
+                {rows}
+              </>
+            )}
+            {showErrorRow && (
+              <div
+                className='flex h-[24px] shrink-0 items-center justify-between rounded-[6px] bg-[var(--surface-5)] pr-1 pl-2 dark:bg-[var(--surface-4)]'
+                /* The card is a drag handle and the row holds a control, so the
+                   pointer must not start a node drag here. */
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={(event) => event.stopPropagation()}
+              >
+                <span className='text-[var(--text-muted)] text-xs'>On error</span>
+                <Switch
+                  checked={errorOutputEnabled}
+                  onCheckedChange={(next) => onToggleErrorOutput?.(next)}
+                  aria-label='On error branch'
+                  disabled={!onToggleErrorOutput}
+                  className='scale-[0.72]'
+                />
+              </div>
             )}
-            {shouldShowDefaultHandles && <SubBlockRowView title='error' />}
           </div>
         )}
 
@@ -407,8 +1106,16 @@ export function WorkflowBlockView({
                   type='source'
                   position={Position.Right}
                   id={`condition-${cond.id}`}
-                  className={getHandleClasses('right')}
-                  style={{ top: `${topOffset}px`, transform: 'translateY(-50%)' }}
+                  className={getInvisibleHandleClasses('right')}
+                  style={{
+                    top: `${topOffset}px`,
+                    transform: 'translateY(-50%)',
+                    ...invisibleHandleSize(
+                      'right',
+                      rowTabLength,
+                      HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+                    ),
+                  }}
                   data-nodeid={id}
                   data-handleid={`condition-${cond.id}`}
                   isConnectableStart={true}
@@ -420,26 +1127,6 @@ export function WorkflowBlockView({
                 />
               )
             })}
-            <Handle
-              type='source'
-              position={Position.Right}
-              id='error'
-              className={getHandleClasses('right', true)}
-              style={{
-                right: '-7px',
-                top: 'auto',
-                bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
-                transform: 'translateY(50%)',
-              }}
-              data-nodeid={id}
-              data-handleid='error'
-              isConnectableStart={true}
-              isConnectableEnd={false}
-              isValidConnection={(connection) => {
-                if (connection.target === id) return false
-                return !wouldCreateConnectionCycle(connection.source!, connection.target!)
-              }}
-            />
           </>
         )}
 
@@ -456,8 +1143,16 @@ export function WorkflowBlockView({
                   type='source'
                   position={Position.Right}
                   id={`router-${route.id}`}
-                  className={getHandleClasses('right')}
-                  style={{ top: `${topOffset}px`, transform: 'translateY(-50%)' }}
+                  className={getInvisibleHandleClasses('right')}
+                  style={{
+                    top: `${topOffset}px`,
+                    transform: 'translateY(-50%)',
+                    ...invisibleHandleSize(
+                      'right',
+                      rowTabLength,
+                      HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+                    ),
+                  }}
                   data-nodeid={id}
                   data-handleid={`router-${route.id}`}
                   isConnectableStart={true}
@@ -469,26 +1164,6 @@ export function WorkflowBlockView({
                 />
               )
             })}
-            <Handle
-              type='source'
-              position={Position.Right}
-              id='error'
-              className={getHandleClasses('right', true)}
-              style={{
-                right: '-7px',
-                top: 'auto',
-                bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
-                transform: 'translateY(50%)',
-              }}
-              data-nodeid={id}
-              data-handleid='error'
-              isConnectableStart={true}
-              isConnectableEnd={false}
-              isValidConnection={(connection) => {
-                if (connection.target === id) return false
-                return !wouldCreateConnectionCycle(connection.source!, connection.target!)
-              }}
-            />
           </>
         )}
 
@@ -496,10 +1171,13 @@ export function WorkflowBlockView({
           <>
             <Handle
               type='source'
-              position={horizontalHandles ? Position.Right : Position.Bottom}
+              position={Position.Right}
               id='source'
-              className={getHandleClasses(horizontalHandles ? 'right' : 'bottom')}
-              style={getHandleStyle(horizontalHandles ? 'horizontal' : 'vertical')}
+              className={getInvisibleHandleClasses('right')}
+              style={{
+                ...getHandleStyle('horizontal'),
+                ...invisibleHandleSize('right', mainTabLength('right'), MAIN_HANDLE_HIT_LENGTH_PX),
+              }}
               data-nodeid={id}
               data-handleid='source'
               isConnectableStart={true}
@@ -509,33 +1187,62 @@ export function WorkflowBlockView({
                 return !wouldCreateConnectionCycle(connection.source!, connection.target!)
               }}
             />
+            {/*
+              Anchor for outgoing edges created by the cursor swell. Only the
+              right side exists: an output always leaves from the right, so
+              `normalizeCursorSourceHandleId` resolves every drag here no
+              matter which edge it started on. Mounting a left twin would
+              advertise an output on the input port.
+            */}
+            <Handle
+              type='source'
+              position={getReactFlowPosition('right')}
+              id={getPositionedSourceHandleId('right')}
+              className='!pointer-events-none !z-0 !rounded-none !border-none !bg-transparent !opacity-0'
+              style={getCenteredSideHandleStyle('right')}
+              data-nodeid={id}
+              data-handleid={getPositionedSourceHandleId('right')}
+              isConnectable={false}
+              aria-hidden='true'
+            />
+          </>
+        )}
 
-            {shouldShowDefaultHandles && (
+        {shouldShowDefaultHandles &&
+          POSITIONED_SOURCE_HANDLE_SIDES.map((side) => {
+            const handleId = getPositionedTargetHandleId(side)
+            return (
               <Handle
-                type='source'
-                position={Position.Right}
-                id='error'
-                className={getHandleClasses('right', true)}
-                style={{
-                  right: '-7px',
-                  top: 'auto',
-                  bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
-                  transform: 'translateY(50%)',
-                }}
+                key={handleId}
+                type='target'
+                position={getReactFlowPosition(side)}
+                id={handleId}
+                className='!pointer-events-none !z-0 !rounded-none !border-none !bg-transparent !opacity-0'
+                style={getCenteredSideHandleStyle(side)}
                 data-nodeid={id}
-                data-handleid='error'
-                isConnectableStart={true}
-                isConnectableEnd={false}
-                isValidConnection={(connection) => {
-                  if (connection.target === id) return false
-                  return !wouldCreateConnectionCycle(connection.source!, connection.target!)
-                }}
+                data-handleid={handleId}
+                isConnectable={false}
+                aria-hidden='true'
               />
-            )}
-          </>
-        )}
-        {hasRing && (
-          <div className={cn('pointer-events-none absolute inset-0 z-40 rounded-lg', ringStyles)} />
+            )
+          })}
+
+        {rendersErrorHandle && (
+          <Handle
+            type='source'
+            position={ERROR_SOURCE_HANDLE_POSITION}
+            id='error'
+            className='!z-20 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+            style={getErrorSourceHandleStyle()}
+            data-nodeid={id}
+            data-handleid='error'
+            isConnectableStart={true}
+            isConnectableEnd={false}
+            isValidConnection={(connection) => {
+              if (connection.target === id) return false
+              return !wouldCreateConnectionCycle(connection.source!, connection.target!)
+            }}
+          />
         )}
       </div>
     </div>
diff --git a/packages/workflow-types/src/workflow.ts b/packages/workflow-types/src/workflow.ts
index c4aa764aecf..87b32290076 100644
--- a/packages/workflow-types/src/workflow.ts
+++ b/packages/workflow-types/src/workflow.ts
@@ -56,6 +56,8 @@ export interface BlockData {
   batchSize?: number
   type?: string
   canonicalModes?: Record<string, 'basic' | 'advanced'>
+  /** Persisted mirror of {@link BlockState.errorEnabled}. */
+  errorEnabled?: boolean
 }
 
 export interface BlockLayoutState {
@@ -72,6 +74,12 @@ export interface BlockState {
   outputs: Record<string, OutputFieldDefinition>
   enabled: boolean
   horizontalHandles?: boolean
+  /**
+   * Whether this block exposes its error output. Drives the red error port;
+   * the error row itself is always shown for blocks that support one. Off by
+   * default.
+   */
+  errorEnabled?: boolean
   height?: number
   advancedMode?: boolean
   triggerMode?: boolean
@@ -212,6 +220,95 @@ export interface WorkflowEdgeHandles extends WorkflowEdgeEndpoints {
   targetHandle?: string | null
 }
 
+export const WORKFLOW_CARD_SIDES = ['top', 'right', 'bottom', 'left'] as const
+export type WorkflowCardSide = (typeof WORKFLOW_CARD_SIDES)[number]
+
+export const POSITIONED_SOURCE_HANDLE_SIDES = ['left', 'right'] as const
+export type PositionedSourceHandleSide = (typeof POSITIONED_SOURCE_HANDLE_SIDES)[number]
+export type PositionedSourceHandleId = `source-${PositionedSourceHandleSide}`
+type LegacyPositionedSourceHandleId = `source-${WorkflowCardSide}`
+
+const POSITIONED_SOURCE_HANDLE_IDS = new Set<string>(
+  WORKFLOW_CARD_SIDES.map((side) => `source-${side}`)
+)
+
+/** Returns the persistent source-handle ID for a card side. */
+export function getPositionedSourceHandleId(
+  side: PositionedSourceHandleSide
+): PositionedSourceHandleId {
+  return `source-${side}`
+}
+
+/** Identifies source handles that encode a visual card side. */
+export function isPositionedSourceHandle(
+  handle: string | null | undefined
+): handle is LegacyPositionedSourceHandleId {
+  return typeof handle === 'string' && POSITIONED_SOURCE_HANDLE_IDS.has(handle)
+}
+
+export type PositionedTargetHandleId = `target-${PositionedSourceHandleSide}`
+type LegacyPositionedTargetHandleId = `target-${WorkflowCardSide}`
+
+const POSITIONED_TARGET_HANDLE_IDS = new Set<string>(
+  WORKFLOW_CARD_SIDES.map((side) => `target-${side}`)
+)
+
+/** Returns the persistent target-handle ID for a card side. */
+export function getPositionedTargetHandleId(
+  side: PositionedSourceHandleSide
+): PositionedTargetHandleId {
+  return `target-${side}`
+}
+
+/** Identifies target handles that encode a visual card side. */
+export function isPositionedTargetHandle(
+  handle: string | null | undefined
+): handle is LegacyPositionedTargetHandleId {
+  return typeof handle === 'string' && POSITIONED_TARGET_HANDLE_IDS.has(handle)
+}
+
+/** Returns the card side encoded by a positioned source handle. */
+export function getPositionedSourceHandleSide(
+  handle: string | null | undefined
+): PositionedSourceHandleSide | null {
+  if (!isPositionedSourceHandle(handle)) return null
+  return handle === 'source-left' ? 'left' : 'right'
+}
+
+/**
+ * Collapses every non-right source anchor onto the canonical right-side anchor.
+ *
+ * Outputs leave a card from the right, always. Left is the input side, so an
+ * output anchored there would draw an outgoing line out of the input port and
+ * read as a second input. Legacy vertical anchors collapse for the same reason:
+ * top and bottom are not connection sides.
+ */
+export function normalizePositionedSourceHandleId<T extends string | null | undefined>(
+  handle: T
+): T | PositionedSourceHandleId {
+  return handle === 'source-top' || handle === 'source-bottom' || handle === 'source-left'
+    ? getPositionedSourceHandleId('right')
+    : handle
+}
+
+/** Collapses legacy vertical target anchors onto the canonical left-side anchor. */
+export function normalizePositionedTargetHandleId<T extends string | null | undefined>(
+  handle: T
+): T | PositionedTargetHandleId {
+  return handle === 'target-top' || handle === 'target-bottom'
+    ? getPositionedTargetHandleId('left')
+    : handle
+}
+
+/** Resolves a top/bottom pointer into the card's left or right connection half. */
+export function getHorizontalWorkflowHandleSide(
+  pointerX: number,
+  cardWidth: number
+): PositionedSourceHandleSide {
+  if (!Number.isFinite(pointerX) || !Number.isFinite(cardWidth) || cardWidth <= 0) return 'right'
+  return pointerX < cardWidth / 2 ? 'left' : 'right'
+}
+
 // Falsy-coalesce (not nullish-coalesce): persistence normalizes a missing
 // handle to `null` via `edge.sourceHandle || null` (see
 // apps/realtime/src/database/operations.ts), which also maps `''` to