improvement(canvas): retract bystander cards during a run, slant the sweep mark

Two things about a running canvas.

A run pinned every card's action bar open and suspended every card's hover on
top of it, so the canvas became a wall of open swells that could neither retract
nor respond to a pointer — and the `isWorkflowRunning && !isRunning` hover
treatment already written for those cards was unreachable. Only the card that is
actually running is pinned now; the rest behave as they do at rest, which is what
makes hovering one bring its bar up again.

The sweep's filled slot painted a full 24px square. It now paints a slanted band
across the slot, as a hard-stop gradient rather than a `clip-path` — the two end
slots already carry one for the swell silhouette and a second would have to win a
specificity race with it. The stops hold `--surface-2` exactly, so only the shape
changes. Each variant is spelled out because Tailwind's JIT reads literal class
strings and a composed `hover-hover:${FILL}` compiles to nothing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: Vikhyath Mondreti

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -44,6 +44,29 @@ const ACTION_BUTTON_STYLES = [
   'transition-[background-color,color,opacity,transform] duration-150 active:scale-[0.96]',
 ].join(' ')
 
+/**
+ * The mark a filled sweep slot paints: a slanted band across the slot rather
+ * than the slot itself.
+ *
+ * Drawn as a hard-stop gradient rather than a `clip-path` because the two end
+ * slots already carry one for the swell silhouette, and a second would have to
+ * win a specificity race against it. The stops keep `--surface-2` exactly — only
+ * the shape changes.
+ *
+ * Every variant is spelled out: Tailwind's JIT reads literal class strings, so a
+ * `hover-hover:${FILL}` built at runtime compiles to no CSS at all. The hover
+ * and motion-reduce entries also clear the base `hover-hover:bg-*` COLOR, which
+ * a background-image cannot override and which would otherwise fill the slot
+ * back in behind the band.
+ */
+const RUNNING_SWEEP_FILL = [
+  '!bg-[linear-gradient(107deg,transparent_26%,var(--surface-2)_26%,var(--surface-2)_74%,transparent_74%)]',
+  'hover-hover:!bg-[linear-gradient(107deg,transparent_26%,var(--surface-2)_26%,var(--surface-2)_74%,transparent_74%)]',
+].join(' ')
+
+const RUNNING_SWEEP_FILL_STATIC =
+  'motion-reduce:!bg-[linear-gradient(107deg,transparent_26%,var(--surface-2)_26%,var(--surface-2)_74%,transparent_74%)]'
+
 const ICON_SIZE = 'size-[14px]'
 
 type ActionId = 'run' | 'enabled' | 'lock' | 'duplicate' | 'remove' | 'delete' | 'color'
@@ -299,10 +322,9 @@ export const ActionBar = memo(
           ],
         isRunningSweepSlot && [
           '!opacity-100 [&_svg]:!opacity-0',
-          isRunningSweepFilled
-            ? '!bg-[var(--surface-2)] hover-hover:!bg-[var(--surface-2)]'
-            : '!bg-transparent hover-hover:!bg-transparent',
-          'motion-reduce:!bg-[var(--surface-2)] motion-reduce:transition-none',
+          isRunningSweepFilled ? RUNNING_SWEEP_FILL : '!bg-transparent hover-hover:!bg-transparent',
+          RUNNING_SWEEP_FILL_STATIC,
+          'motion-reduce:transition-none',
         ],
         /* `!` is required: these buttons are also `disabled` when locked, and
            the emcn Button base carries `disabled:opacity-70`, which outranks a

packages/workflow-renderer/src/subflow/subflow-node-view.tsx

@@ -447,8 +447,15 @@ export function SubflowNodeView({
     onBlurCapture: handleActionMenuBlur,
   } = useActionMenuSwell({
     enabled: showActionMenu,
-    forceOpen: isExecutionHighlighted || isRunning || isWorkflowRunning,
-    suspendInteraction: isRunning || isWorkflowRunning,
+    /*
+     * A run pins the executing card's bar open — not every card's. Pinning them
+     * all turned the canvas into a wall of open swells, and suspending their
+     * hover on top of it made the "hover a non-running card" treatment below
+     * unreachable, so those cards could neither retract nor respond. The block
+     * that is actually running keeps both.
+     */
+    forceOpen: isExecutionHighlighted || isRunning,
+    suspendInteraction: isRunning,
     suppressNestedNodeHover: true,
   })
 

packages/workflow-renderer/src/workflow-block/workflow-block-view-interaction.test.tsx

@@ -25,7 +25,8 @@ function createView(
   isRunning: boolean,
   isEnabled = true,
   isLocked = false,
-  isExecutionHighlighted = false
+  isExecutionHighlighted = false,
+  isWorkflowRunning = false
 ) {
   return (
     <ReactFlowProvider>
@@ -38,6 +39,7 @@ function createView(
         hasRing={false}
         ringStyles=''
         isRunning={isRunning}
+        isWorkflowRunning={isWorkflowRunning}
         isExecutionHighlighted={isExecutionHighlighted}
         Icon={TestIcon}
         iconBgColor='var(--surface-2)'
@@ -116,6 +118,25 @@ describe('WorkflowBlockView action menu', () => {
     expect(actionMenuRoot).toHaveAttribute('data-action-menu-ready')
   })
 
+  /**
+   * A run pins the executing card's bar open, not every card's. Pinning them all
+   * turned the canvas into a wall of open swells, and suspending their hover on
+   * top of it left them unable to retract or respond.
+   */
+  it('leaves a bystander card retracted while another block runs', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() => root.render(createView(false, true, false, false, true)))
+    flushAnimationFrames()
+
+    const actionMenuRoot = host.querySelector<HTMLElement>('.group.relative')
+    expect(actionMenuRoot).not.toHaveAttribute('data-action-menu-ready')
+  })
+
   it('uses the selected graphite treatment for a block in the active handoff', () => {
     const host = document.createElement('div')
     document.body.appendChild(host)

packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx

@@ -651,9 +651,16 @@ export function WorkflowBlockView({
     onBlurCapture: handleActionMenuBlur,
   } = useActionMenuSwell({
     enabled: showActionMenu,
-    forceOpen: Boolean(usesSelectedVisuals || isRunning || isWorkflowRunning),
+    /*
+     * A run pins the executing card's bar open — not every card's. Pinning them
+     * all turned the canvas into a wall of open swells, and suspending their
+     * hover on top of it made the "hover a non-running card" treatment below
+     * unreachable, so those cards could neither retract nor respond. The block
+     * that is actually running keeps both.
+     */
+    forceOpen: Boolean(usesSelectedVisuals || isRunning),
     maxWidth: ACTION_MENU_MAX_WIDTH_PX,
-    suspendInteraction: isRunning || isWorkflowRunning,
+    suspendInteraction: isRunning,
   })
   /* Blocks that can emit an error always carry the row; `response` terminates
      the flow and has no error branch. */