improvement(canvas): fill the running sweep one way, and tighten its mark

The sweep drained back to empty after each pass, which reads as undoing the
progress the block is making. It fills left to right and starts over. The
direction flag goes with it — the state is just the count now.

The slanted mark also sat too far off its neighbours. Slant and tightness trade
against each other here: the transparent wedge has to be at least as wide as the
edge's horizontal travel, or the cut clips a corner instead of crossing the slot.
Leaning 7° off vertical instead of 17° travels 2.9px across the 24px slot rather
than 7.3px, which brings the wedge in from 26% to 12% — 3.2px a side against
7.8px, so the gap between marks drops from ~17.6px to ~8.4px with the slant
still crossing cleanly.

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

Author: icecrasher321

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

@@ -53,19 +53,26 @@ const ACTION_BUTTON_STYLES = [
  * win a specificity race against it. The stops keep `--surface-2` exactly — only
  * the shape changes.
  *
+ * Slant and tightness trade against each other: the transparent wedge has to be
+ * at least as wide as the edge's horizontal travel, or the cut clips a corner
+ * instead of crossing the slot cleanly. 97deg leans the edge 7° off vertical,
+ * which travels 2.9px over the 24px slot and lets the wedge come in to 12% —
+ * 3.2px a side, against the 7.8px a 107deg lean needed. Steepen the angle and
+ * both stops have to move outward with it.
+ *
  * 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%)]',
+  '!bg-[linear-gradient(97deg,transparent_12%,var(--surface-2)_12%,var(--surface-2)_88%,transparent_88%)]',
+  'hover-hover:!bg-[linear-gradient(97deg,transparent_12%,var(--surface-2)_12%,var(--surface-2)_88%,transparent_88%)]',
 ].join(' ')
 
 const RUNNING_SWEEP_FILL_STATIC =
-  'motion-reduce:!bg-[linear-gradient(107deg,transparent_26%,var(--surface-2)_26%,var(--surface-2)_74%,transparent_74%)]'
+  'motion-reduce:!bg-[linear-gradient(97deg,transparent_12%,var(--surface-2)_12%,var(--surface-2)_88%,transparent_88%)]'
 
 const ICON_SIZE = 'size-[14px]'
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.test.ts

@@ -1,31 +1,21 @@
 import { describe, expect, it } from 'vitest'
-import {
-  advanceActionSweep,
-  INITIAL_ACTION_SWEEP_STATE,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep'
+import { advanceActionSweep } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep'
 
 describe('advanceActionSweep', () => {
   it('fills action slots cumulatively from left to right', () => {
-    const first = advanceActionSweep(INITIAL_ACTION_SWEEP_STATE, 3)
+    const first = advanceActionSweep(0, 3)
     const second = advanceActionSweep(first, 3)
     const third = advanceActionSweep(second, 3)
 
-    expect([first.filledCount, second.filledCount, third.filledCount]).toEqual([1, 2, 3])
-    expect(third.direction).toBe(-1)
+    expect([first, second, third]).toEqual([1, 2, 3])
   })
 
-  it('empties action slots from right to left before restarting', () => {
-    const second = advanceActionSweep({ filledCount: 3, direction: -1 }, 3)
-    const first = advanceActionSweep(second, 3)
-    const empty = advanceActionSweep(first, 3)
-
-    expect([second.filledCount, first.filledCount, empty.filledCount]).toEqual([2, 1, 0])
-    expect(empty.direction).toBe(1)
+  it('restarts from empty once full, rather than draining back', () => {
+    expect(advanceActionSweep(3, 3)).toBe(0)
+    expect(advanceActionSweep(0, 3)).toBe(1)
   })
 
   it('stays empty when there are no action slots', () => {
-    expect(advanceActionSweep({ filledCount: 2, direction: -1 }, 0)).toEqual(
-      INITIAL_ACTION_SWEEP_STATE
-    )
+    expect(advanceActionSweep(2, 0)).toBe(0)
   })
 })

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.ts

@@ -2,47 +2,35 @@ import { useEffect, useState } from 'react'
 
 const ACTION_SWEEP_INTERVAL_MS = 160
 
-interface ActionSweepState {
-  filledCount: number
-  direction: 1 | -1
+/**
+ * Advances the cumulative action-slot sweep by one frame.
+ *
+ * Fills left to right and starts over — it does not drain back. A bar that
+ * empties itself reads as undoing progress, which is the opposite of what a
+ * running block is doing.
+ */
+export function advanceActionSweep(filledCount: number, slotCount: number): number {
+  if (slotCount <= 0) return 0
+  return filledCount >= slotCount ? 0 : filledCount + 1
 }
 
-export const INITIAL_ACTION_SWEEP_STATE: ActionSweepState = {
-  filledCount: 0,
-  direction: 1,
-}
-
-/** Advances the cumulative action-slot sweep by one frame. */
-export function advanceActionSweep(state: ActionSweepState, slotCount: number): ActionSweepState {
-  if (slotCount <= 0) return INITIAL_ACTION_SWEEP_STATE
-
-  const nextCount = state.filledCount + state.direction
-  if (nextCount >= slotCount) {
-    return { filledCount: slotCount, direction: -1 }
-  }
-  if (nextCount <= 0) {
-    return INITIAL_ACTION_SWEEP_STATE
-  }
-  return { filledCount: nextCount, direction: state.direction }
-}
-
-/** Runs a cumulative left-to-right, right-to-left sweep while a block executes. */
+/** Runs a cumulative left-to-right fill while a block executes. */
 export function useRunningActionSweep(isRunning: boolean, slotCount: number): number {
-  const [state, setState] = useState<ActionSweepState>(INITIAL_ACTION_SWEEP_STATE)
+  const [filledCount, setFilledCount] = useState(0)
 
   useEffect(() => {
     /* After the early return, not before it: every idle ActionBar on the canvas
        runs this effect on mount, and scheduling an update there is wasted work.
        The `isRunning` guard on the return value already hides a stale count. */
     if (!isRunning || slotCount <= 0) return
-    setState(INITIAL_ACTION_SWEEP_STATE)
+    setFilledCount(0)
 
     const intervalId = window.setInterval(() => {
-      setState((current) => advanceActionSweep(current, slotCount))
+      setFilledCount((current) => advanceActionSweep(current, slotCount))
     }, ACTION_SWEEP_INTERVAL_MS)
 
     return () => window.clearInterval(intervalId)
   }, [isRunning, slotCount])
 
-  return isRunning ? state.filledCount : 0
+  return isRunning ? filledCount : 0
 }