fix(workflow): keep outputs on the right, focus newly created blocks

andresdjasso · claude · andresdjasso · commit 2f51ecc52c2f · 2026-07-27T07:59:25.000-05:00
Connection anchors: an output now always leaves a card from the right.
The cursor swell lets a drag start on any edge, but the left side is the
input, so anchoring an outgoing edge there drew a line out of the input
port and read as a second input. `normalizeCursorSourceHandleId` resolves
every drag to the right anchor, `normalizePositionedSourceHandleId`
collapses `source-left` alongside the legacy vertical anchors (so data
from the API, an older client, or a stale save self-heals on load), and
only the right-side source anchor is mounted.

Drops in `onConnectEnd` are always source -&gt; target. The branch that
reversed the edge for a drag starting on an input could never run: the
`target` handle is `isConnectableStart={false}` and the positioned side
anchors are `isConnectable={false}`, so React Flow never reports an input
as a drag origin. Removed it and its now-unused imports.

A newly created block is centered once its node mounts and is measured,
so a card added from a drag-release, the block menu, or the toolbar is
never left off-screen or under the editor panel.

The editor panel's block icon uses the same type accent as the card's
badge instead of the block's legacy `bgColor`, which had left the panel
on the old per-integration brand colours.

Co-Authored-By: Claude Opus 5 &lt;noreply@anthropic.com&gt;
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
@@ -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]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -25,9 +25,7 @@ import {
 } from '@sim/workflow-renderer'
 import {
   getHorizontalWorkflowHandleSide,
-  getPositionedSourceHandleId,
   getPositionedTargetHandleId,
-  isPositionedTargetHandle,
   normalizePositionedSourceHandleId,
   normalizePositionedTargetHandleId,
   type PositionedSourceHandleSide,
@@ -794,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,
@@ -809,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
@@ -3256,32 +3263,20 @@ const WorkflowContent = React.memo(
             dropSide = getHorizontalWorkflowHandleSide(clientPos.clientX - rect.left, rect.width)
           }
           /*
-           * A drag can start on an INPUT knob (the left target). The dropped
-           * card is then the upstream end: reusing the origin as the edge
-           * source would store 'target' as a sourceHandle, and the edge
-           * renders off arbitrary fallback anchors and never highlights.
+           * 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 draggedFromInput =
-            source.handleId === 'target' || isPositionedTargetHandle(source.handleId)
-          if (draggedFromInput) {
-            const dropSourceHandle =
-              !dropSide || dropSide === 'right' ? 'source' : getPositionedSourceHandleId(dropSide)
-            onConnect({
-              source: targetNode.id,
-              sourceHandle: dropSourceHandle,
-              target: source.nodeId,
-              targetHandle: source.handleId ?? 'target',
-            })
-          } else {
-            const targetHandle =
-              !dropSide || dropSide === 'left' ? 'target' : getPositionedTargetHandleId(dropSide)
-            onConnect({
-              source: source.nodeId,
-              sourceHandle,
-              target: targetNode.id,
-              targetHandle,
-            })
-          }
+          const targetHandle =
+            !dropSide || dropSide === 'left' ? 'target' : getPositionedTargetHandleId(dropSide)
+          onConnect({
+            source: source.nodeId,
+            sourceHandle,
+            target: targetNode.id,
+            targetHandle,
+          })
         } else if (!targetNode) {
           // Released on empty canvas: open the command palette with the drag origin
           // + drop point, so the chosen block lands here wired from this handle.
@@ -3955,6 +3950,36 @@ const WorkflowContent = React.memo(
       [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
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
@@ -96,10 +96,15 @@ describe('WorkflowBlockBorder mount', () => {
     expect(getHorizontalWorkflowHandleSide(124.9, 250)).toBe('left')
     expect(getHorizontalWorkflowHandleSide(125, 250)).toBe('right')
     expect(getHorizontalWorkflowHandleSide(230, 250)).toBe('right')
-    expect(normalizeCursorSourceHandleId('source-cursor-left')).toBe('source-left')
+    /* 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', () => {
diff --git a/packages/workflow-renderer/src/workflow-block/source-handle.ts b/packages/workflow-renderer/src/workflow-block/source-handle.ts
@@ -26,7 +26,15 @@ export function getCursorSourceHandlePosition(side: WorkflowCardSide): Position
   return Position.Right
 }
 
-/** Converts a temporary cursor handle into its persistent side anchor. */
+/**
+ * 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 {
@@ -37,8 +45,5 @@ export function normalizeCursorSourceHandleId(
   const prefix = `${CURSOR_SOURCE_HANDLE_ID}-`
   if (!handleId?.startsWith(prefix)) return handleId
 
-  const side = handleId.slice(prefix.length)
-  if (side === 'left' || side === 'right') return getPositionedSourceHandleId(side)
-  if (side === 'top' || side === 'bottom') return getPositionedSourceHandleId('right')
-  return handleId
+  return getPositionedSourceHandleId('right')
 }
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -1174,23 +1174,24 @@ export function WorkflowBlockView({
                 return !wouldCreateConnectionCycle(connection.source!, connection.target!)
               }}
             />
-            {POSITIONED_SOURCE_HANDLE_SIDES.map((side) => {
-              const handleId = getPositionedSourceHandleId(side)
-              return (
-                <Handle
-                  key={handleId}
-                  type='source'
-                  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={handleId}
-                  isConnectable={false}
-                  aria-hidden='true'
-                />
-              )
-            })}
+            {/*
+              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'
+            />
           </>
         )}
 
diff --git a/packages/workflow-types/src/workflow.ts b/packages/workflow-types/src/workflow.ts
@@ -275,11 +275,18 @@ export function getPositionedSourceHandleSide(
   return handle === 'source-left' ? 'left' : 'right'
 }
 
-/** Collapses legacy vertical source anchors onto the canonical right-side anchor. */
+/**
+ * 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'
+  return handle === 'source-top' || handle === 'source-bottom' || handle === 'source-left'
     ? getPositionedSourceHandleId('right')
     : handle
 }
