From db9a9bcfd7e4b689dc4310a44d1f6bd49b5039b0 Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Wed, 9 Sep 2026 16:45:51 -0700
Subject: [PATCH 1/9] fix(ui): unify loaders and show wordmark on workflow
 navigation

Use Relay for shared loading indicators and the Sim wordmark morph for
workspace and workflow loading. Show workflow navigation feedback as soon
as a destination is selected, including sidebar and search navigation.
---
 .../footer-wordmark-loop.tsx                  | 641 +-----------------
 .../production-workflow-stage.tsx             |  17 +-
 .../hero-platform-loop/stage-block-card.tsx   |  17 +-
 .../components/find-bar/find-bar.tsx          |   2 +-
 .../connect-slack-bot-modal.tsx               |   2 +-
 .../app/workspace/[workspaceId]/layout.tsx    |  15 +-
 .../settings/components/general/general.tsx   |   4 +-
 .../workflow-sidebar/workflow-sidebar.tsx     |   2 +-
 .../components/action-bar/action-bar.tsx      |  17 +-
 .../components/file-upload/file-upload.tsx    |  12 +-
 .../[workspaceId]/w/[workflowId]/workflow.tsx |  16 +-
 .../preview-editor/preview-editor.tsx         |  12 +-
 .../collapsed-sidebar-menu.tsx                |   5 +-
 .../components/search-modal/search-modal.tsx  |   7 +-
 .../workflow-item/workflow-item.tsx           |   6 +-
 .../w/components/workflow-navigation/index.ts |   6 +
 .../workflow-loading-overlay.tsx              |  24 +
 .../workflow-navigation-link.tsx              |  39 ++
 .../workflow-navigation-provider.tsx          |  70 ++
 .../workflow-navigation.test.tsx              | 226 ++++++
 .../app/workspace/[workspaceId]/w/page.tsx    |  18 +-
 apps/sim/app/workspace/page.tsx               |  12 +-
 apps/sim/components/ui/wordmark-morph.tsx     | 637 +++++++++++++++++
 apps/sim/components/ui/workflow-loader.tsx    |  15 +
 .../src/icons/animate/relay-loader.module.css |  33 +
 packages/emcn/src/icons/loader.test.tsx       |  30 +
 packages/emcn/src/icons/loader.tsx            |  72 +-
 27 files changed, 1184 insertions(+), 773 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx
 create mode 100644 apps/sim/components/ui/wordmark-morph.tsx
 create mode 100644 apps/sim/components/ui/workflow-loader.tsx
 create mode 100644 packages/emcn/src/icons/animate/relay-loader.module.css
 create mode 100644 packages/emcn/src/icons/loader.test.tsx

diff --git a/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx
index f07058d2c1a..f2c0d10c092 100644
--- a/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx
@@ -1,644 +1,11 @@
-'use client'
-
-import { type CSSProperties, useEffect, useId, useRef } from 'react'
-import { cn } from '@sim/emcn'
-import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
-
-/**
- * The mark's ink: the platform's thinking-loader gradient tokens, so it follows
- * the theme. Light resolves to the locked `GOO_GRADIENT` recipe; dark lifts it
- * to the loader's light-on-dark material. Set through `style`, where `var()`
- * is unambiguous, rather than as a presentation attribute.
- */
-const INK_STOP_INNER = { stopColor: 'var(--thinking-ink-inner)' } as const satisfies CSSProperties
-const INK_STOP_OUTER = { stopColor: 'var(--thinking-ink-outer)' } as const satisfies CSSProperties
-
-/**
- * The seven thinking-loader shapes in play order, each with its hold in ms.
- * Order, holds, and every timing constant below are the master's - the
- * "Sim loader wordmark" film's deterministic generator - so the footer plays
- * the same choreography frame for frame.
- */
-const SHAPES = [
-  ['metaballs', 2000],
-  ['relay', 1300],
-  ['compass', 2000],
-  ['corners', 800],
-  ['burst', 1300],
-  ['squeeze', 1200],
-  ['thinking', 2000],
-] as const
-
-type ShapeKey = (typeof SHAPES)[number][0]
-type StageKey = ShapeKey | 'orb' | 'wm'
-
-/** Crossfade between two consecutive shapes. */
-const MORPH = 500
-/** Liquid morph between the wordmark and the orb, on each side of the cycle. */
-const MORPH_LOGO = 1200
-/** Opening hold on the crisp wordmark. */
-const LOGO_HOLD = 1300
-/** Orb settle on either side of the shape cycle. */
-const ORB_BEAT = 450
-/** Closing hold on the wordmark before the loop wraps back to the opening hold. */
-const HOLD_LOGO_END = 1700
-const TAIL = 200
-/** Goo blur while liquid (through the cycle) and while crisp (the wordmark). */
-const GOO_HI = 5
-const GOO_LO = 0.55
-/** Post-threshold blur, about half a device pixel at the mark's largest size. */
-const EDGE_SMOOTHING = 0.16
-/**
- * Shapes that restart from compact when they appear and play exactly one pulse
- * of this many ms (just under a loop, so the dots reach the edge without
- * snapping back) instead of free-running on the shared clock.
- */
-const LOCAL_PULSE: Partial<Record<ShapeKey, number>> = { burst: 770 }
-/**
- * Longest step the clock advances per frame. A background tab or a stalled
- * frame resumes mid-choreography instead of skipping ahead.
- */
-const MAX_FRAME_STEP = 100
-
-const T_LOGO_HOLD_END = LOGO_HOLD
-const T_INTRO_END = T_LOGO_HOLD_END + MORPH_LOGO
-const FIRST_SHAPE_START = T_INTRO_END + ORB_BEAT
-
-/** Lays the shapes end to end from the first shape's start. */
-function buildShapeWindows(): {
-  windows: Record<ShapeKey, readonly [number, number]>
-  end: number
-} {
-  const windows: Partial<Record<ShapeKey, readonly [number, number]>> = {}
-  let cursor = FIRST_SHAPE_START
-  for (const [key, hold] of SHAPES) {
-    windows[key] = [cursor, cursor + hold]
-    cursor += hold
-  }
-  return { windows: windows as Record<ShapeKey, readonly [number, number]>, end: cursor }
-}
-
-const { windows: SHAPE_WINDOWS, end: SHAPES_END } = buildShapeWindows()
-const T_OUTRO_START = SHAPES_END + ORB_BEAT
-const T_OUTRO_END = T_OUTRO_START + MORPH_LOGO
-/** One full pass: wordmark → orb → seven shapes → orb → wordmark. */
-const CYCLE_MS = T_OUTRO_END + HOLD_LOGO_END + TAIL
-
-interface Track {
-  /** Period in ms. */
-  dur: number
-  /** Play backwards on odd iterations. */
-  alt?: boolean
-  /** Linear timing instead of the CSS default ease. */
-  lin?: boolean
-  /** `[progress, x, y]` keyframes in stage units. */
-  stops: ReadonlyArray<readonly [number, number, number]>
-  /** Optional `[progress, opacity]` keyframes. */
-  op?: ReadonlyArray<readonly [number, number]>
-}
-
-/** Per-element motion tracks - the loader's CSS keyframes, evaluated analytically. */
-const TRACKS = {
-  metaballsA: {
-    dur: 1000,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [0.9, 28, 0],
-      [1, 28, 0],
-    ],
-  },
-  metaballsB: {
-    dur: 1000,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [0.9, -28, 0],
-      [1, -28, 0],
-    ],
-  },
-  relayBall: {
-    dur: 1300,
-    lin: true,
-    stops: [
-      [0, 0, 0],
-      [1, 58, 0],
-    ],
-    op: [
-      [0, 0],
-      [0.2, 1],
-      [0.78, 1],
-      [1, 0],
-    ],
-  },
-  compassMover: {
-    dur: 2000,
-    stops: [
-      [0, 0, 0],
-      [0.25, 27, 27],
-      [0.5, 0, 54],
-      [0.75, -27, 27],
-      [1, 0, 0],
-    ],
-  },
-  cornersA: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 46, 0],
-    ],
-  },
-  cornersB: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 0, 46],
-    ],
-  },
-  cornersC: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, -46, 0],
-    ],
-  },
-  cornersD: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 0, -46],
-    ],
-  },
-  burstUp: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 0, -50],
-    ],
-  },
-  burstDown: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 0, 50],
-    ],
-  },
-  burstLeft: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, -50, 0],
-    ],
-  },
-  burstRight: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 50, 0],
-    ],
-  },
-  squeezeBarL: {
-    dur: 600,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [0.3, 0, 0],
-      [1, 10, 0],
-    ],
-  },
-  squeezeBarR: {
-    dur: 600,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [0.3, 0, 0],
-      [1, -10, 0],
-    ],
-  },
-  thinkA: {
-    dur: 1600,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [1, -20, -14],
-    ],
-  },
-  thinkB: {
-    dur: 1900,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [1, 22, -10],
-    ],
-  },
-  thinkC: {
-    dur: 1300,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [1, 2, 22],
-    ],
-  },
-} as const satisfies Record<string, Track>
-
-type AnimKey = keyof typeof TRACKS
-
-const clamp01 = (x: number): number => Math.max(0, Math.min(1, x))
-
-/** A CSS `cubic-bezier` timing function, solved for `x` by Newton iteration. */
-function cubicBezier(
-  p1x: number,
-  p1y: number,
-  p2x: number,
-  p2y: number
-): (progress: number) => number {
-  const cx = 3 * p1x
-  const bx = 3 * (p2x - p1x) - cx
-  const ax = 1 - cx - bx
-  const cy = 3 * p1y
-  const by = 3 * (p2y - p1y) - cy
-  const ay = 1 - cy - by
-  const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t
-  const sampleY = (t: number) => ((ay * t + by) * t + cy) * t
-  const slopeX = (t: number) => (3 * ax * t + 2 * bx) * t + cx
-  return (progress) => {
-    let t = progress
-    for (let i = 0; i < 8; i++) {
-      const error = sampleX(t) - progress
-      if (Math.abs(error) < 1e-6) break
-      const slope = slopeX(t)
-      if (Math.abs(slope) < 1e-6) break
-      t -= error / slope
-    }
-    return sampleY(clamp01(t))
-  }
-}
-
-/** The CSS default `ease`. */
-const EASE = cubicBezier(0.25, 0.1, 0.25, 1)
-const LINEAR = (progress: number): number => progress
-
-/** Hermite smoothstep from `a` to `b`. */
-function smooth(a: number, b: number, x: number): number {
-  const t = clamp01((x - a) / (b - a))
-  return t * t * (3 - 2 * t)
-}
-
-/** Opacity envelope: rises over `[t0, t1]`, holds, falls over `[t2, t3]`. */
-function envelope(t: number, t0: number, t1: number, t2: number, t3: number): number {
-  return Math.min(smooth(t0, t1, t), 1 - smooth(t2, t3, t))
-}
-
-/** The keyframe pair around `frac` and the clamped progress between them. */
-function segment<T extends readonly [number, ...number[]]>(
-  stops: ReadonlyArray<T>,
-  frac: number
-): { a: T; b: T; p: number } {
-  let a = stops[0]
-  let b = stops[stops.length - 1]
-  for (let i = 0; i < stops.length - 1; i++) {
-    if (frac >= stops[i][0] && frac <= stops[i + 1][0]) {
-      a = stops[i]
-      b = stops[i + 1]
-      break
-    }
-  }
-  const span = b[0] - a[0] || 1
-  return { a, b, p: clamp01((frac - a[0]) / span) }
-}
-
-interface Sample {
-  x: number
-  y: number
-  opacity: number
-}
-
-/** Position and opacity of a track at `at` ms on its own clock. */
-function sampleTrack(track: Track, at: number): Sample {
-  const raw = at / track.dur
-  const iteration = Math.floor(raw)
-  let frac = raw - iteration
-  if (track.alt && iteration % 2 === 1) frac = 1 - frac
-  const { a, b, p } = segment(track.stops, frac)
-  const eased = (track.lin ? LINEAR : EASE)(p)
-  const x = a[1] + (b[1] - a[1]) * eased
-  const y = a[2] + (b[2] - a[2]) * eased
-  let opacity = 1
-  if (track.op) {
-    const o = segment(track.op, frac)
-    opacity = o.a[1] + (o.b[1] - o.a[1]) * o.p
-  }
-  return { x, y, opacity }
-}
-
-/**
- * The wordmark's width inside the 100-unit stage - the generator's 816×392
- * mark at 0.11164, so the word sits at the same size relative to the orb.
- */
-const WORDMARK_WIDTH = 91.1
-const WORDMARK_SCALE = WORDMARK_WIDTH / WORDMARK_VIEW_BOX.width
-const WORDMARK_HEIGHT = WORDMARK_VIEW_BOX.height * WORDMARK_SCALE
-const WORDMARK_X = (100 - WORDMARK_WIDTH) / 2
-const WORDMARK_Y = (100 - WORDMARK_HEIGHT) / 2
-const WORDMARK_CX = WORDMARK_VIEW_BOX.width / 2
-const WORDMARK_CY = WORDMARK_VIEW_BOX.height / 2
-
-const round = (n: number): string => n.toFixed(3)
-
-interface AnimatedNode {
-  el: SVGGraphicsElement
-  track: Track
-  stage: ShapeKey
-}
-
-interface StageNode {
-  el: SVGGElement
-  key: StageKey
-}
-
-/**
- * Paints one frame of the choreography at `t` ms into the cycle by writing
- * SVG attributes directly - no React render per frame.
- */
-function paintFrame(
-  t: number,
-  blur: SVGFEGaussianBlurElement,
-  stages: StageNode[],
-  anims: AnimatedNode[]
-): void {
-  for (const { el, track, stage } of anims) {
-    const pulse = LOCAL_PULSE[stage]
-    const clock =
-      pulse === undefined
-        ? t
-        : Math.max(0, Math.min(t - (SHAPE_WINDOWS[stage][0] + MORPH / 2), pulse))
-    const sample = sampleTrack(track, clock)
-    el.setAttribute('transform', `translate(${round(sample.x)} ${round(sample.y)})`)
-    if (track.op) el.setAttribute('opacity', sample.opacity.toFixed(4))
-  }
-
-  const introLogo = 1 - smooth(T_LOGO_HOLD_END, T_INTRO_END, t)
-  const outroLogo = smooth(T_OUTRO_START, T_OUTRO_END, t)
-  const logo = Math.max(introLogo, outroLogo)
-  const orbIn = envelope(
-    t,
-    T_LOGO_HOLD_END,
-    T_INTRO_END,
-    FIRST_SHAPE_START - MORPH / 2,
-    FIRST_SHAPE_START + MORPH / 2
-  )
-  const orbOut = envelope(
-    t,
-    SHAPES_END - MORPH / 2,
-    SHAPES_END + MORPH / 2,
-    T_OUTRO_START,
-    T_OUTRO_END
-  )
-  const orb = Math.max(orbIn, orbOut)
-
-  for (const { el, key } of stages) {
-    let opacity: number
-    if (key === 'wm') opacity = logo
-    else if (key === 'orb') opacity = orb
-    else {
-      const [start, end] = SHAPE_WINDOWS[key]
-      opacity = envelope(t, start - MORPH / 2, start + MORPH / 2, end - MORPH / 2, end + MORPH / 2)
-    }
-    el.setAttribute('opacity', opacity.toFixed(4))
-  }
-
-  const liquid = Math.min(
-    smooth(T_LOGO_HOLD_END, T_INTRO_END, t),
-    1 - smooth(T_OUTRO_START, T_OUTRO_END, t)
-  )
-  const deviation = round(GOO_LO + (GOO_HI - GOO_LO) * liquid)
-  if (blur.getAttribute('stdDeviation') !== deviation) blur.setAttribute('stdDeviation', deviation)
-}
+import { WordmarkMorph } from '@/components/ui/wordmark-morph'
 
 interface FooterWordmarkLoopProps {
-  /** Layout only - margins and alignment. The mark owns its size and chrome. */
+  /** Layout only: margins and alignment. */
   className?: string
 }
 
-/**
- * The footer's closing brand beat: the "Sim loader wordmark" film, live. The
- * crisp `sim` wordmark goo-melts into the thinking loader's orb, cycles through
- * all seven loader shapes with gooey morphs between them, settles back to the
- * orb, and liquid-morphs back into the wordmark - then holds and repeats.
- * Same geometry, goo filter, ink gradient, and timeline as the master
- * generator and the product's `ThinkingLoader`, drawn in one 100-unit SVG
- * stage that scales with the viewport.
- *
- * The stage reserves a 5:3 slot rather than its full square: the crisp wordmark
- * only ever needs the middle band, and the orb and shapes overflow symmetrically
- * into the beat's margins while they play, so the footer stays short enough to
- * sit on one screen together with its link directory.
- *
- * Rendering budget: the server renders the resting frame (crisp wordmark) so
- * the mark is in the HTML with zero layout shift and needs no JS to look
- * finished. The `requestAnimationFrame` loop only runs while the stage is in
- * the viewport, writes attributes straight to the SVG (no React render per
- * frame), and never starts under `prefers-reduced-motion`, where the wordmark
- * simply stays put.
- */
+/** The footer's closing brand animation at its responsive display size. */
 export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
-  const svgRef = useRef<SVGSVGElement>(null)
-  const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
-  const gooId = `fwl-goo-${id}`
-  const inkId = `fwl-ink-${id}`
-  const wordmarkInkId = `fwl-wm-ink-${id}`
-  const clipId = `fwl-clip-${id}`
-  const windowId = `fwl-window-${id}`
-
-  useEffect(() => {
-    const svg = svgRef.current
-    if (!svg) return
-    const blur = svg.querySelector<SVGFEGaussianBlurElement>('[data-goo]')
-    if (!blur) return
-
-    const stages: StageNode[] = Array.from(
-      svg.querySelectorAll<SVGGElement>('[data-stage]'),
-      (el) => ({ el, key: el.getAttribute('data-stage') as StageKey })
-    )
-    const anims: AnimatedNode[] = []
-    for (const el of svg.querySelectorAll<SVGGraphicsElement>('[data-anim]')) {
-      const stage = el.closest('[data-stage]')?.getAttribute('data-stage') as ShapeKey | undefined
-      if (stage) anims.push({ el, track: TRACKS[el.getAttribute('data-anim') as AnimKey], stage })
-    }
-
-    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')
-    let frame: number | null = null
-    let previous: number | null = null
-    let elapsed = 0
-    let inView = false
-
-    const tick = (now: number) => {
-      if (previous !== null) elapsed += Math.min(now - previous, MAX_FRAME_STEP)
-      previous = now
-      paintFrame(elapsed % CYCLE_MS, blur, stages, anims)
-      frame = requestAnimationFrame(tick)
-    }
-    const play = () => {
-      if (frame !== null || !inView || reducedMotion?.matches) return
-      previous = null
-      frame = requestAnimationFrame(tick)
-    }
-    const pause = () => {
-      if (frame === null) return
-      cancelAnimationFrame(frame)
-      frame = null
-    }
-    const onMotionPreference = () => {
-      if (reducedMotion?.matches) {
-        pause()
-        elapsed = 0
-        paintFrame(0, blur, stages, anims)
-      } else {
-        play()
-      }
-    }
-    reducedMotion?.addEventListener('change', onMotionPreference)
-
-    let observer: IntersectionObserver | undefined
-    if (typeof IntersectionObserver === 'undefined') {
-      inView = true
-      play()
-    } else {
-      observer = new IntersectionObserver(([entry]) => {
-        inView = entry.isIntersecting
-        if (inView) play()
-        else pause()
-      })
-      observer.observe(svg)
-    }
-
-    return () => {
-      pause()
-      observer?.disconnect()
-      reducedMotion?.removeEventListener('change', onMotionPreference)
-    }
-  }, [])
-
-  return (
-    <div className={cn('relative mx-auto aspect-[5/3] w-[clamp(180px,17vw,320px)]', className)}>
-      <svg
-        ref={svgRef}
-        viewBox='0 0 100 100'
-        aria-hidden='true'
-        className='-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible'
-      >
-        <defs>
-          <filter
-            id={gooId}
-            x='-30%'
-            y='-30%'
-            width='160%'
-            height='160%'
-            colorInterpolationFilters='sRGB'
-          >
-            <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={GOO_LO} result='blur' />
-            {/* A steep threshold: the melt between shapes keeps its liquid
-                merges, but every edge resolves within a pixel, so the mark
-                stays crisp at the cycle's full blur. */}
-            <feColorMatrix
-              in='blur'
-              values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 40 -19'
-              result='goo'
-            />
-            {/* The threshold discards the rasterizer's edge coverage, so at the
-                resting blur the wordmark's edge fell inside a device pixel and
-                stair-stepped at the largest size. A sub-pixel blur after it
-                restores ordinary anti-aliasing without touching the melt. */}
-            <feGaussianBlur in='goo' stdDeviation={EDGE_SMOOTHING} />
-          </filter>
-          <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
-            <stop style={INK_STOP_INNER} />
-            <stop offset='1' style={INK_STOP_OUTER} />
-          </radialGradient>
-          <radialGradient
-            id={wordmarkInkId}
-            cx='0'
-            cy='0'
-            r='1'
-            gradientUnits='userSpaceOnUse'
-            gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
-          >
-            <stop style={INK_STOP_INNER} />
-            <stop offset='1' style={INK_STOP_OUTER} />
-          </radialGradient>
-          <clipPath id={clipId}>
-            <rect width='100' height='100' />
-          </clipPath>
-          <clipPath id={windowId}>
-            <rect x='12.5' y='12.5' width='75' height='75' />
-          </clipPath>
-        </defs>
-
-        <g
-          filter={`url(#${gooId})`}
-          fill={`url(#${inkId})`}
-          stroke={`url(#${inkId})`}
-          strokeWidth={0}
-        >
-          <g data-stage='metaballs' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle data-anim='metaballsA' cx='22' cy='50' r='16' />
-            <circle data-anim='metaballsB' cx='78' cy='50' r='16' />
-          </g>
-          <g data-stage='relay' opacity={0} clipPath={`url(#${clipId})`}>
-            <rect x='13' y='28' width='16' height='44' />
-            <rect x='71' y='28' width='16' height='44' />
-            <circle data-anim='relayBall' cx='21' cy='50' r='14' />
-          </g>
-          <g data-stage='compass' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle cx='50' cy='23' r='14' />
-            <circle cx='23' cy='50' r='14' />
-            <circle cx='77' cy='50' r='14' />
-            <circle cx='50' cy='77' r='14' />
-            <circle data-anim='compassMover' cx='50' cy='23' r='14' />
-          </g>
-          <g data-stage='corners' opacity={0} clipPath={`url(#${clipId})`}>
-            <rect x='27' y='27' width='46' height='46' />
-            <circle data-anim='cornersA' cx='27' cy='27' r='14' />
-            <circle data-anim='cornersB' cx='73' cy='27' r='14' />
-            <circle data-anim='cornersC' cx='73' cy='73' r='14' />
-            <circle data-anim='cornersD' cx='27' cy='73' r='14' />
-          </g>
-          <g data-stage='burst' opacity={0} clipPath={`url(#${windowId})`}>
-            <rect x='12.5' y='43.75' width='75' height='12.5' />
-            <rect x='43.75' y='12.5' width='12.5' height='75' />
-            <circle cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstUp' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstDown' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstLeft' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstRight' cx='50' cy='50' r='12.5' />
-          </g>
-          <g data-stage='squeeze' opacity={0} clipPath={`url(#${clipId})`}>
-            <path d='M 21.36 37.5 A 31.25 31.25 0 0 1 78.64 37.5' fill='none' strokeWidth='12.5' />
-            <path d='M 21.36 62.5 A 31.25 31.25 0 0 0 78.64 62.5' fill='none' strokeWidth='12.5' />
-            <rect data-anim='squeezeBarL' x='15' y='37.5' width='12.5' height='25' />
-            <rect data-anim='squeezeBarR' x='72.5' y='37.5' width='12.5' height='25' />
-          </g>
-          <g data-stage='thinking' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle cx='50' cy='50' r='15' />
-            <circle data-anim='thinkA' cx='50' cy='50' r='12' />
-            <circle data-anim='thinkB' cx='50' cy='50' r='12' />
-            <circle data-anim='thinkC' cx='50' cy='50' r='11' />
-          </g>
-          <g data-stage='orb' opacity={0}>
-            <circle cx='50' cy='50' r='42' />
-          </g>
-          <g
-            data-stage='wm'
-            opacity={1}
-            fill={`url(#${wordmarkInkId})`}
-            transform={`translate(${round(WORDMARK_X)} ${round(WORDMARK_Y)}) scale(${WORDMARK_SCALE.toFixed(5)})`}
-          >
-            {WORDMARK_PATHS.map((d) => (
-              <path key={d} d={d} />
-            ))}
-          </g>
-        </g>
-      </svg>
-    </div>
-  )
+  return <WordmarkMorph size='lg' className={className} />
 }
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
index 18e64a2a105..83c7e4fd1d5 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
@@ -10,7 +10,7 @@ import {
   Trash,
   usePrefersReducedMotion,
 } from '@sim/emcn'
-import { Circle, Minus, Plus, Square, Unlock } from '@sim/emcn/icons'
+import { Circle, Loader, Minus, Plus, Square, Unlock } from '@sim/emcn/icons'
 import {
   CanvasSentenceView,
   InlineChip,
@@ -175,20 +175,9 @@ function RunningActionIcon() {
       <span className='sr-only'>Block running</span>
       <span
         aria-hidden='true'
-        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'
+        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 motion-reduce:transition-none'
       >
-        <svg className='size-[14px]' viewBox='0 0 24 24' fill='none'>
-          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
-          <circle
-            cx='12'
-            cy='12'
-            r='10'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeDasharray='18 45'
-          />
-        </svg>
+        <Loader className='size-[14px]' animate />
       </span>
       <span
         aria-hidden='true'
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
index a679aef3881..5bfe35f497c 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
@@ -12,7 +12,7 @@ import {
   Tooltip,
   Trash,
 } from '@sim/emcn'
-import { Circle, Square, Unlock } from '@sim/emcn/icons'
+import { Circle, Loader, Square, Unlock } from '@sim/emcn/icons'
 import {
   BLOCK_DIMENSIONS,
   CanvasSentenceView,
@@ -163,20 +163,9 @@ function RunningActionIcon() {
       <span className='sr-only'>Block running</span>
       <span
         aria-hidden='true'
-        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'
+        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-reduce:transition-none'
       >
-        <svg className='size-[14px]' viewBox='0 0 24 24' fill='none'>
-          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
-          <circle
-            cx='12'
-            cy='12'
-            r='10'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeDasharray='18 45'
-          />
-        </svg>
+        <Loader className='size-[14px]' animate />
       </span>
       <Square
         aria-hidden='true'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
index ceb2b0b709b..8435efc8822 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
@@ -106,7 +106,7 @@ export const FindBar = memo(function FindBar({
   function counterContent() {
     if (!hasQuery) return null
     if (hasMatches) return `${currentIndex + 1} of ${count}${truncated ? '+' : ''}`
-    return isLoading ? <Loader aria-hidden className='size-[13px] animate-spin' /> : 'No results'
+    return isLoading ? <Loader aria-hidden className='size-[13px]' animate /> : 'No results'
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
index 68ab142e2d8..cc8c536814c 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
@@ -633,7 +633,7 @@ function StepDone({ searchOnly, pending, created, error, onRetry }: StepDoneProp
   if (pending) {
     return (
       <div className='flex flex-col items-center gap-3 py-10 text-center'>
-        <Loader className='size-6 animate-spin text-[var(--text-muted)]' />
+        <Loader className='size-6 text-[var(--text-muted)]' animate />
         <p className='text-[var(--text-secondary)] text-sm'>Verifying your bot and connecting…</p>
       </div>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index 1e93ff58add..44651833c96 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -24,6 +24,7 @@ import { WorkspaceHostProvider } from '@/app/workspace/[workspaceId]/providers/w
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { WorkspaceScopeSync } from '@/app/workspace/[workspaceId]/providers/workspace-scope-sync'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { WorkflowNavigationProvider } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { BrandingProvider } from '@/ee/whitelabeling/components/branding-provider'
 import { getOrgWhitelabelSettings } from '@/ee/whitelabeling/org-branding'
 
@@ -83,12 +84,14 @@ export default async function WorkspaceLayout({
                 <SessionExpired />
                 <WorkspacePermissionsProvider>
                   <WorkspaceScopeSync />
-                  <WorkspaceChrome
-                    sidebar={<Sidebar />}
-                    initialSidebarCollapsed={initialSidebarCollapsed}
-                  >
-                    {children}
-                  </WorkspaceChrome>
+                  <WorkflowNavigationProvider>
+                    <WorkspaceChrome
+                      sidebar={<Sidebar />}
+                      initialSidebarCollapsed={initialSidebarCollapsed}
+                    >
+                      {children}
+                    </WorkspaceChrome>
+                  </WorkflowNavigationProvider>
                 </WorkspacePermissionsProvider>
               </div>
             </GlobalCommandsProvider>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index 9ffff5c4db5..0a42f8b5c6f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -17,7 +17,7 @@ import {
   Switch,
   Tooltip,
 } from '@sim/emcn'
-import { Camera, Check, CircleInfo, Pencil } from '@sim/emcn/icons'
+import { Camera, Check, CircleInfo, Loader, Pencil } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import dynamic from 'next/dynamic'
 import Image from 'next/image'
@@ -367,7 +367,7 @@ export function General() {
                     }`}
                   >
                     {isUploadingProfilePicture ? (
-                      <div className='size-4 animate-spin rounded-full border-2 border-white border-t-transparent' />
+                      <Loader className='size-4 text-[var(--white)]' animate />
                     ) : (
                       <Camera className='size-4 text-white' />
                     )}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index 03e835b4fb8..94dad6f8f39 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -698,7 +698,7 @@ export function WorkflowSidebarBody({
               <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
                 {workflowState.isLoading ? (
                   <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
-                    <Loader className='size-5 animate-spin text-[var(--text-tertiary)]' />
+                    <Loader className='size-5 text-[var(--text-tertiary)]' animate />
                   </div>
                 ) : workflowState.data ? (
                   <>
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 68bbc204861..241b32e9a13 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
@@ -13,7 +13,7 @@ import {
   Trash,
   toast,
 } from '@sim/emcn'
-import { Ban, Circle, Lock, LogOut, Palette, Square, Unlock } from '@sim/emcn/icons'
+import { Ban, Circle, Loader, Lock, LogOut, Palette, Square, Unlock } from '@sim/emcn/icons'
 import {
   DEFAULT_NOTE_COLOR,
   isNoteColor,
@@ -134,20 +134,9 @@ function RunningActionIcon() {
       <span className='sr-only'>Block running</span>
       <span
         aria-hidden='true'
-        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'
+        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-reduce:transition-none'
       >
-        <svg className='size-[14px]' viewBox='0 0 24 24' fill='none'>
-          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
-          <circle
-            cx='12'
-            cy='12'
-            r='10'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeDasharray='18 45'
-          />
-        </svg>
+        <Loader className='size-[14px]' animate />
       </span>
       <span
         aria-hidden='true'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 4bfa6ac5db3..4bdc3ed907d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Combobox, cn } from '@sim/emcn'
-import { X } from '@sim/emcn/icons'
+import { Loader, X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { generateShortId } from '@sim/utils/id'
@@ -216,7 +216,7 @@ function SingleFileSelector({
         disabled={isDeleting}
       >
         {isDeleting ? (
-          <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
+          <Loader className='size-4' animate />
         ) : (
           <X className='size-4 opacity-50 hover-hover:opacity-100' />
         )}
@@ -768,11 +768,7 @@ export function FileUpload({
           onClick={(e) => handleRemoveFile(file, e)}
           disabled={isDeleting}
         >
-          {isDeleting ? (
-            <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-          ) : (
-            <X className='size-4 opacity-50' />
-          )}
+          {isDeleting ? <Loader className='size-4' animate /> : <X className='size-4 opacity-50' />}
         </Button>
       </div>
     )
@@ -791,7 +787,7 @@ export function FileUpload({
           </span>
         </div>
         <div className='flex size-5 shrink-0 items-center justify-center'>
-          <div className='size-3.5 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
+          <Loader className='size-3.5' animate />
         </div>
       </div>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 475d610c851..23a7e9617c6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -125,6 +125,7 @@ import {
   reactFlowProOptions,
   reactFlowStyles,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants'
+import { WorkflowLoadingOverlay } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { getBlock } from '@/blocks'
 import { isAnnotationOnlyBlock } from '@/executor/constants'
@@ -5124,20 +5125,7 @@ const WorkflowContent = React.memo(
                as well as the canvas, and that grey is ~1.1:1 against one. */
             className='relative flex-1 overflow-hidden [--connection-line-stroke:var(--text-secondary)] data-[connection-line=error]:[--connection-line-stroke:var(--text-error)] 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
-                  className='size-[18px] animate-spin rounded-full'
-                  style={{
-                    background:
-                      'conic-gradient(from 0deg, hsl(var(--muted-foreground)) 0deg 120deg, transparent 120deg 180deg, hsl(var(--muted-foreground)) 180deg 300deg, transparent 300deg 360deg)',
-                    mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-                    WebkitMask:
-                      'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-                  }}
-                />
-              </div>
-            )}
+            <WorkflowLoadingOverlay isLoading={!isWorkflowReady} embedded={embedded} />
 
             {isWorkflowReady && (
               <>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index 12c9e9c393b..28391c66021 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -29,6 +29,7 @@ import {
 import { formatDuration } from '@sim/utils/formatting'
 import { ReactFlowProvider } from '@xyflow/react'
 import { useParams } from 'next/navigation'
+import { WorkflowLoader } from '@/components/ui/workflow-loader'
 import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
 import {
   buildCanonicalIndexForSurface,
@@ -1347,16 +1348,7 @@ function PreviewEditorContent({
                   <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
                     {resolvedIsLoadingChildWorkflow ? (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
-                        <div
-                          className='size-[18px] animate-spin rounded-full'
-                          style={{
-                            background:
-                              'conic-gradient(from 0deg, var(--text-tertiary) 0deg 120deg, transparent 120deg 180deg, var(--text-tertiary) 180deg 300deg, transparent 300deg 360deg)',
-                            mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-                            WebkitMask:
-                              'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-                          }}
-                        />
+                        <WorkflowLoader label='Loading child workflow' />
                       </div>
                     ) : resolvedChildWorkflowState ? (
                       <>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index 04c633b19fe..5edb833c3ac 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -27,6 +27,7 @@ import {
 import { SIDEBAR_RAIL_CHIP_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import type { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { interleaveSiblings } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import { WorkflowNavigationLink } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import type { FolderTreeNode } from '@/stores/folders/types'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
@@ -453,7 +454,7 @@ export function CollapsedWorkflowFlyoutItem({
         ) : undefined
       }
     >
-      <Link
+      <WorkflowNavigationLink
         href={href}
         onContextMenu={
           hasActions
@@ -465,7 +466,7 @@ export function CollapsedWorkflowFlyoutItem({
         }
       >
         <OverflowText label={workflow.name} className='flex-1' />
-      </Link>
+      </WorkflowNavigationLink>
     </DropdownMenuItem>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 5597803ef7b..50cbf31d42a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -88,6 +88,7 @@ import {
   CMDK_SECTION_GAP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useFolderMap } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useTablesList } from '@/hooks/queries/tables'
@@ -154,6 +155,7 @@ function SearchModalContent({
 }: SearchModalContentProps) {
   const params = useParams()
   const router = useRouter()
+  const navigateToWorkflow = useWorkflowNavigation()
   const { chatEnabled } = useDeploymentShape()
   const workspaceId = params.workspaceId as string
   const currentWorkflowId = params.workflowId as string | undefined
@@ -804,7 +806,8 @@ function SearchModalContent({
   const handleWorkflowSelect = useCallback(
     (workflow: WorkflowItem) => {
       if (!workflow.isCurrent && workflow.href) {
-        routerRef.current.push(workflow.href)
+        if (navigateToWorkflow) navigateToWorkflow(workflow.href)
+        else routerRef.current.push(workflow.href)
         window.dispatchEvent(
           new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: workflow.id } })
         )
@@ -816,7 +819,7 @@ function SearchModalContent({
       })
       onOpenChangeRef.current(false)
     },
-    [workspaceId]
+    [workspaceId, navigateToWorkflow]
   )
 
   const handleWorkspaceSelect = useCallback(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index 734aefef876..c51bddcdead 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -3,7 +3,6 @@
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { chipVariants, cn, OverflowText } from '@sim/emcn'
 import { Lock, MoreHorizontal } from '@sim/emcn/icons'
-import Link from 'next/link'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
@@ -18,6 +17,7 @@ import {
   buildDragResources,
   createSidebarDragGhost,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import { WorkflowNavigationLink } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import {
   useCanDelete,
   useDeleteSelection,
@@ -402,7 +402,7 @@ export const WorkflowItem = memo(function WorkflowItem({
 
   return (
     <>
-      <Link
+      <WorkflowNavigationLink
         href={`/workspace/${workspaceId}/w/${workflow.id}`}
         data-item-id={workflow.id}
         className={cn(
@@ -486,7 +486,7 @@ export const WorkflowItem = memo(function WorkflowItem({
             </button>
           </div>
         )}
-      </Link>
+      </WorkflowNavigationLink>
 
       <ContextMenu
         isOpen={isContextMenuOpen}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts
new file mode 100644
index 00000000000..be284d5fab8
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts
@@ -0,0 +1,6 @@
+export { WorkflowLoadingOverlay } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay'
+export { WorkflowNavigationLink } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link'
+export {
+  useWorkflowNavigation,
+  WorkflowNavigationProvider,
+} from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay.tsx
new file mode 100644
index 00000000000..1139cfac93a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { WorkflowLoader } from '@/components/ui/workflow-loader'
+import { usePendingWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider'
+
+interface WorkflowLoadingOverlayProps {
+  isLoading: boolean
+  embedded?: boolean
+}
+
+/** Covers the current canvas from navigation intent through destination hydration. */
+export function WorkflowLoadingOverlay({
+  isLoading,
+  embedded = false,
+}: WorkflowLoadingOverlayProps) {
+  const isNavigating = usePendingWorkflowNavigation()
+  if (!isLoading && (embedded || !isNavigating)) return null
+
+  return (
+    <div className='absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)]'>
+      <WorkflowLoader />
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link.tsx
new file mode 100644
index 00000000000..7201a5583a9
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+import Link from 'next/link'
+import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider'
+
+interface WorkflowNavigationLinkProps
+  extends Omit<ComponentProps<typeof Link>, 'href' | 'onNavigate'> {
+  href: string
+}
+
+/** Preserves Link's selection and new-tab behavior while announcing same-tab navigation. */
+export function WorkflowNavigationLink({
+  href,
+  replace,
+  scroll,
+  transitionTypes,
+  ...props
+}: WorkflowNavigationLinkProps) {
+  const navigate = useWorkflowNavigation()
+
+  return (
+    <Link
+      {...props}
+      href={href}
+      replace={replace}
+      scroll={scroll}
+      transitionTypes={transitionTypes}
+      onNavigate={
+        navigate
+          ? (event) => {
+              event.preventDefault()
+              navigate(href, { replace, scroll, transitionTypes })
+            }
+          : undefined
+      }
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
new file mode 100644
index 00000000000..a2222c69272
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import {
+  createContext,
+  type ReactNode,
+  startTransition,
+  useCallback,
+  useContext,
+  useOptimistic,
+} from 'react'
+import { useRouter } from 'next/navigation'
+
+interface WorkflowNavigationOptions {
+  replace?: boolean
+  scroll?: boolean
+  transitionTypes?: string[]
+}
+
+type NavigateToWorkflow = (href: string, options?: WorkflowNavigationOptions) => void
+
+const NavigateContext = createContext<NavigateToWorkflow | null>(null)
+const PendingNavigationContext = createContext(false)
+
+interface WorkflowNavigationProviderProps {
+  children: ReactNode
+}
+
+/** Shows navigation intent immediately, then lets React clear it when routing settles. */
+export function WorkflowNavigationProvider({ children }: WorkflowNavigationProviderProps) {
+  const router = useRouter()
+  const [isNavigating, setIsNavigating] = useOptimistic(false)
+
+  const navigate = useCallback<NavigateToWorkflow>(
+    (href, options) => {
+      const destination = new URL(href, window.location.href)
+      const isWorkflowSwitch =
+        destination.origin === window.location.origin &&
+        /^\/workspace\/[^/]+\/w\/[^/]+\/?$/.test(destination.pathname) &&
+        destination.pathname !== window.location.pathname
+
+      startTransition(() => {
+        setIsNavigating(isWorkflowSwitch)
+        if (options?.replace) {
+          router.replace(href, { scroll: options.scroll, transitionTypes: options.transitionTypes })
+        } else if (options) {
+          router.push(href, { scroll: options.scroll, transitionTypes: options.transitionTypes })
+        } else {
+          router.push(href)
+        }
+      })
+    },
+    [router, setIsNavigating]
+  )
+
+  return (
+    <NavigateContext.Provider value={navigate}>
+      <PendingNavigationContext.Provider value={isNavigating}>
+        {children}
+      </PendingNavigationContext.Provider>
+    </NavigateContext.Provider>
+  )
+}
+
+export function useWorkflowNavigation() {
+  return useContext(NavigateContext)
+}
+
+export function usePendingWorkflowNavigation() {
+  return useContext(PendingNavigationContext)
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx
new file mode 100644
index 00000000000..6bac1296d4c
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx
@@ -0,0 +1,226 @@
+/** @vitest-environment jsdom */
+import { act, Suspense, useState } from 'react'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  WorkflowLoadingOverlay,
+  WorkflowNavigationLink,
+  WorkflowNavigationProvider,
+} from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+
+const { router } = vi.hoisted(() => ({
+  router: {
+    route: '/workspace/workspace-1/w/workflow-a',
+    pathname: '/workspace/workspace-1/w/workflow-a',
+    asPath: '/workspace/workspace-1/w/workflow-a',
+    query: {},
+    basePath: '',
+    isFallback: false,
+    isReady: true,
+    isPreview: false,
+    isLocaleDomain: false,
+    events: { on: vi.fn(), off: vi.fn(), emit: vi.fn() },
+    beforePopState: vi.fn(),
+    reload: vi.fn(),
+    push: vi.fn(),
+    replace: vi.fn(),
+    refresh: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    prefetch: vi.fn(),
+  },
+}))
+
+vi.mock('next/navigation', () => ({ useRouter: () => router }))
+
+const PATH_A = '/workspace/workspace-1/w/workflow-a'
+const PATH_B = '/workspace/workspace-1/w/workflow-b'
+const PATH_C = '/workspace/workspace-1/w/workflow-c'
+
+interface PendingRoute {
+  ready: boolean
+  promise: Promise<void>
+  resolve: () => void
+}
+
+function pendingRoute(): PendingRoute {
+  let resolve!: () => void
+  const route = {
+    ready: false,
+    promise: new Promise<void>((done) => {
+      resolve = done
+    }),
+    resolve: () => {
+      route.ready = true
+      resolve()
+    },
+  }
+  return route
+}
+
+interface DestinationProps {
+  path: string
+  embedded?: boolean
+}
+
+describe('workflow navigation feedback', () => {
+  let container: HTMLDivElement
+  let root: Root
+  let routes: Map<string, PendingRoute>
+  let hydrated: Set<string>
+  let updatePath: (path: string) => void
+  let rerenderDestination: () => void
+
+  function Destination({ path, embedded }: DestinationProps) {
+    const route = routes.get(path)
+    if (route && !route.ready) throw route.promise
+    return (
+      <main data-route={path}>
+        <WorkflowLoadingOverlay isLoading={!hydrated.has(path)} embedded={embedded} />
+      </main>
+    )
+  }
+
+  function Harness({ embedded = false }: { embedded?: boolean }) {
+    const [path, setPath] = useState(PATH_A)
+    const [, forceRender] = useState(0)
+    updatePath = setPath
+    rerenderDestination = () => forceRender((value) => value + 1)
+
+    return (
+      <RouterContext.Provider value={router}>
+        <WorkflowNavigationProvider>
+          <nav>
+            <WorkflowNavigationLink href={PATH_A} prefetch={false}>
+              A
+            </WorkflowNavigationLink>
+            <WorkflowNavigationLink href={PATH_B} prefetch={false}>
+              B
+            </WorkflowNavigationLink>
+            <WorkflowNavigationLink href={PATH_C} prefetch={false}>
+              C
+            </WorkflowNavigationLink>
+            <WorkflowNavigationLink href={PATH_B} prefetch={false} target='_blank'>
+              New tab
+            </WorkflowNavigationLink>
+            <WorkflowNavigationLink
+              href={PATH_B}
+              prefetch={false}
+              onClick={(event) => event.preventDefault()}
+            >
+              Cancelled click
+            </WorkflowNavigationLink>
+          </nav>
+          <Suspense fallback={<div>Route fallback</div>}>
+            <Destination path={path} embedded={embedded} />
+          </Suspense>
+        </WorkflowNavigationProvider>
+      </RouterContext.Provider>
+    )
+  }
+
+  function click(label: string, options: MouseEventInit = {}) {
+    const link = Array.from(container.querySelectorAll('a')).find(
+      (item) => item.textContent === label
+    )
+    if (!link) throw new Error(`Missing link: ${label}`)
+    act(() =>
+      link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, ...options }))
+    )
+  }
+
+  const preventBrowserNavigation = (event: Event) => event.preventDefault()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+    vi.stubGlobal('matchMedia', () => ({
+      matches: true,
+      addEventListener() {},
+      removeEventListener() {},
+    }))
+    window.history.replaceState(null, '', PATH_A)
+    routes = new Map([
+      [PATH_B, pendingRoute()],
+      [PATH_C, pendingRoute()],
+    ])
+    hydrated = new Set([PATH_A])
+    router.push.mockImplementation((path: string) => updatePath(path))
+    router.replace.mockImplementation((path: string) => updatePath(path))
+    container = document.createElement('div')
+    document.body.append(container)
+    root = createRoot(container)
+    document.addEventListener('click', preventBrowserNavigation)
+    act(() => root.render(<Harness />))
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+    document.removeEventListener('click', preventBrowserNavigation)
+    vi.unstubAllGlobals()
+  })
+
+  it('shows the wordmark while the old route is still displayed and keeps it through hydration', async () => {
+    expect(container.querySelector('[role="status"]')).toBeNull()
+    click('B')
+    expect(router.push).toHaveBeenCalledWith(PATH_B, expect.any(Object))
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_A)
+    expect(container.querySelector('[role="status"]')?.textContent).toBe('Loading workflow')
+    expect(container.querySelector('[data-stage="wm"]')?.getAttribute('opacity')).toBe('1')
+
+    await act(async () => routes.get(PATH_B)?.resolve())
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_B)
+    expect(container.querySelector('[role="status"]')).not.toBeNull()
+
+    hydrated.add(PATH_B)
+    act(() => rerenderDestination())
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+
+  it('lets a newer destination complete without waiting for the abandoned route', async () => {
+    click('B')
+    click('C')
+    hydrated.add(PATH_C)
+    await act(async () => routes.get(PATH_C)?.resolve())
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_C)
+    expect(container.querySelector('[role="status"]')).toBeNull()
+
+    await act(async () => routes.get(PATH_B)?.resolve())
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_C)
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+
+  it('clears navigation feedback when switching back to the current workflow', () => {
+    click('B')
+    expect(container.querySelector('[role="status"]')).not.toBeNull()
+    click('A')
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_A)
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+
+  it.each([{ metaKey: true }, { ctrlKey: true }, { shiftKey: true }, { altKey: true }])(
+    'leaves modified clicks to the browser: %j',
+    (options) => {
+      click('B', options)
+      expect(router.push).not.toHaveBeenCalled()
+      expect(container.querySelector('[role="status"]')).toBeNull()
+    }
+  )
+
+  it.each(['New tab', 'Cancelled click', 'A'])(
+    'does not show navigation feedback for %s',
+    (label) => {
+      click(label)
+      expect(container.querySelector('[role="status"]')).toBeNull()
+      if (label !== 'A') expect(router.push).not.toHaveBeenCalled()
+    }
+  )
+
+  it('does not cover embedded workflows when the main workspace navigates', () => {
+    act(() => root.render(<Harness embedded />))
+    click('B')
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/page.tsx b/apps/sim/app/workspace/[workspaceId]/w/page.tsx
index c07ff1b3799..ba05a95b78e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/page.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/page.tsx
@@ -5,6 +5,7 @@ import { Chip } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { ReactFlowProvider } from '@xyflow/react'
 import { useParams, useRouter } from 'next/navigation'
+import { WorkflowLoader } from '@/components/ui/workflow-loader'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { Panel, Terminal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
 import { useWorkflowOperations } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
@@ -12,21 +13,6 @@ import { useWorkflows } from '@/hooks/queries/workflows'
 
 const logger = createLogger('WorkflowsPage')
 
-function Spinner() {
-  return (
-    <div
-      className='size-[18px] animate-spin rounded-full'
-      style={{
-        background:
-          'conic-gradient(from 0deg, var(--text-icon) 0deg 120deg, transparent 120deg 180deg, var(--text-icon) 180deg 300deg, transparent 300deg 360deg)',
-        mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-        WebkitMask:
-          'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-      }}
-    />
-  )
-}
-
 export default function WorkflowsPage() {
   const router = useRouter()
   const params = useParams()
@@ -104,7 +90,7 @@ export default function WorkflowsPage() {
               )}
             </div>
           ) : (
-            <Spinner />
+            <WorkflowLoader />
           )}
         </div>
         <ReactFlowProvider>
diff --git a/apps/sim/app/workspace/page.tsx b/apps/sim/app/workspace/page.tsx
index e53c894085a..f3adf7d8969 100644
--- a/apps/sim/app/workspace/page.tsx
+++ b/apps/sim/app/workspace/page.tsx
@@ -5,6 +5,7 @@ import { Chip } from '@sim/emcn'
 import { CircleAlert } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
+import { WorkflowLoader } from '@/components/ui/workflow-loader'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { getWorkflowStateContract } from '@/lib/api/contracts/workflows'
@@ -222,16 +223,7 @@ export default function WorkspacePage() {
   return (
     <div className='desktop-title-bar-page flex w-full items-center justify-center'>
       <DesktopTitleBarLane />
-      <div
-        className='size-[18px] animate-spin rounded-full'
-        style={{
-          background:
-            'conic-gradient(from 0deg, hsl(var(--muted-foreground)) 0deg 120deg, transparent 120deg 180deg, hsl(var(--muted-foreground)) 180deg 300deg, transparent 300deg 360deg)',
-          mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-          WebkitMask:
-            'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-        }}
-      />
+      <WorkflowLoader label='Loading workspace' />
     </div>
   )
 }
diff --git a/apps/sim/components/ui/wordmark-morph.tsx b/apps/sim/components/ui/wordmark-morph.tsx
new file mode 100644
index 00000000000..9b6f7792d8d
--- /dev/null
+++ b/apps/sim/components/ui/wordmark-morph.tsx
@@ -0,0 +1,637 @@
+'use client'
+
+import { type CSSProperties, useEffect, useId, useRef } from 'react'
+import { cn } from '@sim/emcn'
+import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
+
+/**
+ * The mark's ink: the platform's thinking-loader gradient tokens, so it follows
+ * the theme. Light resolves to the locked `GOO_GRADIENT` recipe; dark lifts it
+ * to the loader's light-on-dark material. Set through `style`, where `var()`
+ * is unambiguous, rather than as a presentation attribute.
+ */
+const INK_STOP_INNER = { stopColor: 'var(--thinking-ink-inner)' } as const satisfies CSSProperties
+const INK_STOP_OUTER = { stopColor: 'var(--thinking-ink-outer)' } as const satisfies CSSProperties
+
+/**
+ * The seven thinking-loader shapes in play order, each with its hold in ms.
+ * Order, holds, and every timing constant below are the master's - the
+ * "Sim loader wordmark" film's deterministic generator - so each instance plays
+ * the same choreography frame for frame.
+ */
+const SHAPES = [
+  ['metaballs', 2000],
+  ['relay', 1300],
+  ['compass', 2000],
+  ['corners', 800],
+  ['burst', 1300],
+  ['squeeze', 1200],
+  ['thinking', 2000],
+] as const
+
+type ShapeKey = (typeof SHAPES)[number][0]
+type StageKey = ShapeKey | 'orb' | 'wm'
+
+/** Crossfade between two consecutive shapes. */
+const MORPH = 500
+/** Liquid morph between the wordmark and the orb, on each side of the cycle. */
+const MORPH_LOGO = 1200
+/** Opening hold on the crisp wordmark. */
+const LOGO_HOLD = 1300
+/** Orb settle on either side of the shape cycle. */
+const ORB_BEAT = 450
+/** Closing hold on the wordmark before the loop wraps back to the opening hold. */
+const HOLD_LOGO_END = 1700
+const TAIL = 200
+/** Goo blur while liquid (through the cycle) and while crisp (the wordmark). */
+const GOO_HI = 5
+const GOO_LO = 0.55
+/** Post-threshold blur, about half a device pixel at the mark's largest size. */
+const EDGE_SMOOTHING = 0.16
+/**
+ * Shapes that restart from compact when they appear and play exactly one pulse
+ * of this many ms (just under a loop, so the dots reach the edge without
+ * snapping back) instead of free-running on the shared clock.
+ */
+const LOCAL_PULSE: Partial<Record<ShapeKey, number>> = { burst: 770 }
+/**
+ * Longest step the clock advances per frame. A background tab or a stalled
+ * frame resumes mid-choreography instead of skipping ahead.
+ */
+const MAX_FRAME_STEP = 100
+
+const T_LOGO_HOLD_END = LOGO_HOLD
+const T_INTRO_END = T_LOGO_HOLD_END + MORPH_LOGO
+const FIRST_SHAPE_START = T_INTRO_END + ORB_BEAT
+
+/** Lays the shapes end to end from the first shape's start. */
+function buildShapeWindows(): {
+  windows: Record<ShapeKey, readonly [number, number]>
+  end: number
+} {
+  const windows: Partial<Record<ShapeKey, readonly [number, number]>> = {}
+  let cursor = FIRST_SHAPE_START
+  for (const [key, hold] of SHAPES) {
+    windows[key] = [cursor, cursor + hold]
+    cursor += hold
+  }
+  return { windows: windows as Record<ShapeKey, readonly [number, number]>, end: cursor }
+}
+
+const { windows: SHAPE_WINDOWS, end: SHAPES_END } = buildShapeWindows()
+const T_OUTRO_START = SHAPES_END + ORB_BEAT
+const T_OUTRO_END = T_OUTRO_START + MORPH_LOGO
+/** One full pass: wordmark → orb → seven shapes → orb → wordmark. */
+const CYCLE_MS = T_OUTRO_END + HOLD_LOGO_END + TAIL
+
+interface Track {
+  /** Period in ms. */
+  dur: number
+  /** Play backwards on odd iterations. */
+  alt?: boolean
+  /** Linear timing instead of the CSS default ease. */
+  lin?: boolean
+  /** `[progress, x, y]` keyframes in stage units. */
+  stops: ReadonlyArray<readonly [number, number, number]>
+  /** Optional `[progress, opacity]` keyframes. */
+  op?: ReadonlyArray<readonly [number, number]>
+}
+
+/** Per-element motion tracks - the loader's CSS keyframes, evaluated analytically. */
+const TRACKS = {
+  metaballsA: {
+    dur: 1000,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.9, 28, 0],
+      [1, 28, 0],
+    ],
+  },
+  metaballsB: {
+    dur: 1000,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.9, -28, 0],
+      [1, -28, 0],
+    ],
+  },
+  relayBall: {
+    dur: 1300,
+    lin: true,
+    stops: [
+      [0, 0, 0],
+      [1, 58, 0],
+    ],
+    op: [
+      [0, 0],
+      [0.2, 1],
+      [0.78, 1],
+      [1, 0],
+    ],
+  },
+  compassMover: {
+    dur: 2000,
+    stops: [
+      [0, 0, 0],
+      [0.25, 27, 27],
+      [0.5, 0, 54],
+      [0.75, -27, 27],
+      [1, 0, 0],
+    ],
+  },
+  cornersA: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 46, 0],
+    ],
+  },
+  cornersB: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, 46],
+    ],
+  },
+  cornersC: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, -46, 0],
+    ],
+  },
+  cornersD: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, -46],
+    ],
+  },
+  burstUp: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, -50],
+    ],
+  },
+  burstDown: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, 50],
+    ],
+  },
+  burstLeft: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, -50, 0],
+    ],
+  },
+  burstRight: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 50, 0],
+    ],
+  },
+  squeezeBarL: {
+    dur: 600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.3, 0, 0],
+      [1, 10, 0],
+    ],
+  },
+  squeezeBarR: {
+    dur: 600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.3, 0, 0],
+      [1, -10, 0],
+    ],
+  },
+  thinkA: {
+    dur: 1600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, -20, -14],
+    ],
+  },
+  thinkB: {
+    dur: 1900,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, 22, -10],
+    ],
+  },
+  thinkC: {
+    dur: 1300,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, 2, 22],
+    ],
+  },
+} as const satisfies Record<string, Track>
+
+type AnimKey = keyof typeof TRACKS
+
+const clamp01 = (x: number): number => Math.max(0, Math.min(1, x))
+
+/** A CSS `cubic-bezier` timing function, solved for `x` by Newton iteration. */
+function cubicBezier(
+  p1x: number,
+  p1y: number,
+  p2x: number,
+  p2y: number
+): (progress: number) => number {
+  const cx = 3 * p1x
+  const bx = 3 * (p2x - p1x) - cx
+  const ax = 1 - cx - bx
+  const cy = 3 * p1y
+  const by = 3 * (p2y - p1y) - cy
+  const ay = 1 - cy - by
+  const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t
+  const sampleY = (t: number) => ((ay * t + by) * t + cy) * t
+  const slopeX = (t: number) => (3 * ax * t + 2 * bx) * t + cx
+  return (progress) => {
+    let t = progress
+    for (let i = 0; i < 8; i++) {
+      const error = sampleX(t) - progress
+      if (Math.abs(error) < 1e-6) break
+      const slope = slopeX(t)
+      if (Math.abs(slope) < 1e-6) break
+      t -= error / slope
+    }
+    return sampleY(clamp01(t))
+  }
+}
+
+/** The CSS default `ease`. */
+const EASE = cubicBezier(0.25, 0.1, 0.25, 1)
+const LINEAR = (progress: number): number => progress
+
+/** Hermite smoothstep from `a` to `b`. */
+function smooth(a: number, b: number, x: number): number {
+  const t = clamp01((x - a) / (b - a))
+  return t * t * (3 - 2 * t)
+}
+
+/** Opacity envelope: rises over `[t0, t1]`, holds, falls over `[t2, t3]`. */
+function envelope(t: number, t0: number, t1: number, t2: number, t3: number): number {
+  return Math.min(smooth(t0, t1, t), 1 - smooth(t2, t3, t))
+}
+
+/** The keyframe pair around `frac` and the clamped progress between them. */
+function segment<T extends readonly [number, ...number[]]>(
+  stops: ReadonlyArray<T>,
+  frac: number
+): { a: T; b: T; p: number } {
+  let a = stops[0]
+  let b = stops[stops.length - 1]
+  for (let i = 0; i < stops.length - 1; i++) {
+    if (frac >= stops[i][0] && frac <= stops[i + 1][0]) {
+      a = stops[i]
+      b = stops[i + 1]
+      break
+    }
+  }
+  const span = b[0] - a[0] || 1
+  return { a, b, p: clamp01((frac - a[0]) / span) }
+}
+
+interface Sample {
+  x: number
+  y: number
+  opacity: number
+}
+
+/** Position and opacity of a track at `at` ms on its own clock. */
+function sampleTrack(track: Track, at: number): Sample {
+  const raw = at / track.dur
+  const iteration = Math.floor(raw)
+  let frac = raw - iteration
+  if (track.alt && iteration % 2 === 1) frac = 1 - frac
+  const { a, b, p } = segment(track.stops, frac)
+  const eased = (track.lin ? LINEAR : EASE)(p)
+  const x = a[1] + (b[1] - a[1]) * eased
+  const y = a[2] + (b[2] - a[2]) * eased
+  let opacity = 1
+  if (track.op) {
+    const o = segment(track.op, frac)
+    opacity = o.a[1] + (o.b[1] - o.a[1]) * o.p
+  }
+  return { x, y, opacity }
+}
+
+/**
+ * The wordmark's width inside the 100-unit stage - the generator's 816×392
+ * mark at 0.11164, so the word sits at the same size relative to the orb.
+ */
+const WORDMARK_WIDTH = 91.1
+const WORDMARK_SCALE = WORDMARK_WIDTH / WORDMARK_VIEW_BOX.width
+const WORDMARK_HEIGHT = WORDMARK_VIEW_BOX.height * WORDMARK_SCALE
+const WORDMARK_X = (100 - WORDMARK_WIDTH) / 2
+const WORDMARK_Y = (100 - WORDMARK_HEIGHT) / 2
+const WORDMARK_CX = WORDMARK_VIEW_BOX.width / 2
+const WORDMARK_CY = WORDMARK_VIEW_BOX.height / 2
+
+const round = (n: number): string => n.toFixed(3)
+
+interface AnimatedNode {
+  el: SVGGraphicsElement
+  track: Track
+  stage: ShapeKey
+}
+
+interface StageNode {
+  el: SVGGElement
+  key: StageKey
+}
+
+/**
+ * Paints one frame of the choreography at `t` ms into the cycle by writing
+ * SVG attributes directly - no React render per frame.
+ */
+function paintFrame(
+  t: number,
+  blur: SVGFEGaussianBlurElement,
+  stages: StageNode[],
+  anims: AnimatedNode[]
+): void {
+  for (const { el, track, stage } of anims) {
+    const pulse = LOCAL_PULSE[stage]
+    const clock =
+      pulse === undefined
+        ? t
+        : Math.max(0, Math.min(t - (SHAPE_WINDOWS[stage][0] + MORPH / 2), pulse))
+    const sample = sampleTrack(track, clock)
+    el.setAttribute('transform', `translate(${round(sample.x)} ${round(sample.y)})`)
+    if (track.op) el.setAttribute('opacity', sample.opacity.toFixed(4))
+  }
+
+  const introLogo = 1 - smooth(T_LOGO_HOLD_END, T_INTRO_END, t)
+  const outroLogo = smooth(T_OUTRO_START, T_OUTRO_END, t)
+  const logo = Math.max(introLogo, outroLogo)
+  const orbIn = envelope(
+    t,
+    T_LOGO_HOLD_END,
+    T_INTRO_END,
+    FIRST_SHAPE_START - MORPH / 2,
+    FIRST_SHAPE_START + MORPH / 2
+  )
+  const orbOut = envelope(
+    t,
+    SHAPES_END - MORPH / 2,
+    SHAPES_END + MORPH / 2,
+    T_OUTRO_START,
+    T_OUTRO_END
+  )
+  const orb = Math.max(orbIn, orbOut)
+
+  for (const { el, key } of stages) {
+    let opacity: number
+    if (key === 'wm') opacity = logo
+    else if (key === 'orb') opacity = orb
+    else {
+      const [start, end] = SHAPE_WINDOWS[key]
+      opacity = envelope(t, start - MORPH / 2, start + MORPH / 2, end - MORPH / 2, end + MORPH / 2)
+    }
+    el.setAttribute('opacity', opacity.toFixed(4))
+  }
+
+  const liquid = Math.min(
+    smooth(T_LOGO_HOLD_END, T_INTRO_END, t),
+    1 - smooth(T_OUTRO_START, T_OUTRO_END, t)
+  )
+  const deviation = round(GOO_LO + (GOO_HI - GOO_LO) * liquid)
+  if (blur.getAttribute('stdDeviation') !== deviation) blur.setAttribute('stdDeviation', deviation)
+}
+
+interface WordmarkMorphProps {
+  /** Layout only: margins and alignment. */
+  className?: string
+  /** Compact loading indicator or responsive footer mark. */
+  size?: 'sm' | 'lg'
+}
+
+/**
+ * The Sim wordmark melts into an orb, cycles through seven loader shapes,
+ * and returns to the wordmark. Shared by workflow loading and the footer.
+ * Renders a crisp resting frame, pauses outside the viewport, and stays
+ * still under reduced motion. Frames update SVG attributes without React renders.
+ */
+export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
+  const svgRef = useRef<SVGSVGElement>(null)
+  const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
+  const gooId = `fwl-goo-${id}`
+  const inkId = `fwl-ink-${id}`
+  const wordmarkInkId = `fwl-wm-ink-${id}`
+  const clipId = `fwl-clip-${id}`
+  const windowId = `fwl-window-${id}`
+
+  useEffect(() => {
+    const svg = svgRef.current
+    if (!svg) return
+    const blur = svg.querySelector<SVGFEGaussianBlurElement>('[data-goo]')
+    if (!blur) return
+
+    const stages: StageNode[] = Array.from(
+      svg.querySelectorAll<SVGGElement>('[data-stage]'),
+      (el) => ({ el, key: el.getAttribute('data-stage') as StageKey })
+    )
+    const anims: AnimatedNode[] = []
+    for (const el of svg.querySelectorAll<SVGGraphicsElement>('[data-anim]')) {
+      const stage = el.closest('[data-stage]')?.getAttribute('data-stage') as ShapeKey | undefined
+      if (stage) anims.push({ el, track: TRACKS[el.getAttribute('data-anim') as AnimKey], stage })
+    }
+
+    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+    let frame: number | null = null
+    let previous: number | null = null
+    let elapsed = 0
+    let inView = false
+
+    const tick = (now: number) => {
+      if (previous !== null) elapsed += Math.min(now - previous, MAX_FRAME_STEP)
+      previous = now
+      paintFrame(elapsed % CYCLE_MS, blur, stages, anims)
+      frame = requestAnimationFrame(tick)
+    }
+    const play = () => {
+      if (frame !== null || !inView || reducedMotion?.matches) return
+      previous = null
+      frame = requestAnimationFrame(tick)
+    }
+    const pause = () => {
+      if (frame === null) return
+      cancelAnimationFrame(frame)
+      frame = null
+    }
+    const onMotionPreference = () => {
+      if (reducedMotion?.matches) {
+        pause()
+        elapsed = 0
+        paintFrame(0, blur, stages, anims)
+      } else {
+        play()
+      }
+    }
+    reducedMotion?.addEventListener('change', onMotionPreference)
+
+    let observer: IntersectionObserver | undefined
+    if (typeof IntersectionObserver === 'undefined') {
+      inView = true
+      play()
+    } else {
+      observer = new IntersectionObserver(([entry]) => {
+        inView = entry.isIntersecting
+        if (inView) play()
+        else pause()
+      })
+      observer.observe(svg)
+    }
+
+    return () => {
+      pause()
+      observer?.disconnect()
+      reducedMotion?.removeEventListener('change', onMotionPreference)
+    }
+  }, [])
+
+  return (
+    <div
+      className={cn(
+        'relative mx-auto aspect-[5/3] shrink-0',
+        size === 'sm' ? 'w-[80px]' : 'w-[clamp(180px,17vw,320px)]',
+        className
+      )}
+    >
+      <svg
+        ref={svgRef}
+        viewBox='0 0 100 100'
+        aria-hidden='true'
+        className='-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible'
+      >
+        <defs>
+          <filter
+            id={gooId}
+            x='-30%'
+            y='-30%'
+            width='160%'
+            height='160%'
+            colorInterpolationFilters='sRGB'
+          >
+            <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={GOO_LO} result='blur' />
+            {/* A steep threshold: the melt between shapes keeps its liquid
+                merges, but every edge resolves within a pixel, so the mark
+                stays crisp at the cycle's full blur. */}
+            <feColorMatrix
+              in='blur'
+              values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 40 -19'
+              result='goo'
+            />
+            {/* The threshold discards the rasterizer's edge coverage, so at the
+                resting blur the wordmark's edge fell inside a device pixel and
+                stair-stepped at the largest size. A sub-pixel blur after it
+                restores ordinary anti-aliasing without touching the melt. */}
+            <feGaussianBlur in='goo' stdDeviation={EDGE_SMOOTHING} />
+          </filter>
+          <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
+            <stop style={INK_STOP_INNER} />
+            <stop offset='1' style={INK_STOP_OUTER} />
+          </radialGradient>
+          <radialGradient
+            id={wordmarkInkId}
+            cx='0'
+            cy='0'
+            r='1'
+            gradientUnits='userSpaceOnUse'
+            gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
+          >
+            <stop style={INK_STOP_INNER} />
+            <stop offset='1' style={INK_STOP_OUTER} />
+          </radialGradient>
+          <clipPath id={clipId}>
+            <rect width='100' height='100' />
+          </clipPath>
+          <clipPath id={windowId}>
+            <rect x='12.5' y='12.5' width='75' height='75' />
+          </clipPath>
+        </defs>
+
+        <g
+          filter={`url(#${gooId})`}
+          fill={`url(#${inkId})`}
+          stroke={`url(#${inkId})`}
+          strokeWidth={0}
+        >
+          <g data-stage='metaballs' opacity={0} clipPath={`url(#${clipId})`}>
+            <circle data-anim='metaballsA' cx='22' cy='50' r='16' />
+            <circle data-anim='metaballsB' cx='78' cy='50' r='16' />
+          </g>
+          <g data-stage='relay' opacity={0} clipPath={`url(#${clipId})`}>
+            <rect x='13' y='28' width='16' height='44' />
+            <rect x='71' y='28' width='16' height='44' />
+            <circle data-anim='relayBall' cx='21' cy='50' r='14' />
+          </g>
+          <g data-stage='compass' opacity={0} clipPath={`url(#${clipId})`}>
+            <circle cx='50' cy='23' r='14' />
+            <circle cx='23' cy='50' r='14' />
+            <circle cx='77' cy='50' r='14' />
+            <circle cx='50' cy='77' r='14' />
+            <circle data-anim='compassMover' cx='50' cy='23' r='14' />
+          </g>
+          <g data-stage='corners' opacity={0} clipPath={`url(#${clipId})`}>
+            <rect x='27' y='27' width='46' height='46' />
+            <circle data-anim='cornersA' cx='27' cy='27' r='14' />
+            <circle data-anim='cornersB' cx='73' cy='27' r='14' />
+            <circle data-anim='cornersC' cx='73' cy='73' r='14' />
+            <circle data-anim='cornersD' cx='27' cy='73' r='14' />
+          </g>
+          <g data-stage='burst' opacity={0} clipPath={`url(#${windowId})`}>
+            <rect x='12.5' y='43.75' width='75' height='12.5' />
+            <rect x='43.75' y='12.5' width='12.5' height='75' />
+            <circle cx='50' cy='50' r='12.5' />
+            <circle data-anim='burstUp' cx='50' cy='50' r='12.5' />
+            <circle data-anim='burstDown' cx='50' cy='50' r='12.5' />
+            <circle data-anim='burstLeft' cx='50' cy='50' r='12.5' />
+            <circle data-anim='burstRight' cx='50' cy='50' r='12.5' />
+          </g>
+          <g data-stage='squeeze' opacity={0} clipPath={`url(#${clipId})`}>
+            <path d='M 21.36 37.5 A 31.25 31.25 0 0 1 78.64 37.5' fill='none' strokeWidth='12.5' />
+            <path d='M 21.36 62.5 A 31.25 31.25 0 0 0 78.64 62.5' fill='none' strokeWidth='12.5' />
+            <rect data-anim='squeezeBarL' x='15' y='37.5' width='12.5' height='25' />
+            <rect data-anim='squeezeBarR' x='72.5' y='37.5' width='12.5' height='25' />
+          </g>
+          <g data-stage='thinking' opacity={0} clipPath={`url(#${clipId})`}>
+            <circle cx='50' cy='50' r='15' />
+            <circle data-anim='thinkA' cx='50' cy='50' r='12' />
+            <circle data-anim='thinkB' cx='50' cy='50' r='12' />
+            <circle data-anim='thinkC' cx='50' cy='50' r='11' />
+          </g>
+          <g data-stage='orb' opacity={0}>
+            <circle cx='50' cy='50' r='42' />
+          </g>
+          <g
+            data-stage='wm'
+            opacity={1}
+            fill={`url(#${wordmarkInkId})`}
+            transform={`translate(${round(WORDMARK_X)} ${round(WORDMARK_Y)}) scale(${WORDMARK_SCALE.toFixed(5)})`}
+          >
+            {WORDMARK_PATHS.map((d) => (
+              <path key={d} d={d} />
+            ))}
+          </g>
+        </g>
+      </svg>
+    </div>
+  )
+}
diff --git a/apps/sim/components/ui/workflow-loader.tsx b/apps/sim/components/ui/workflow-loader.tsx
new file mode 100644
index 00000000000..0273c73d896
--- /dev/null
+++ b/apps/sim/components/ui/workflow-loader.tsx
@@ -0,0 +1,15 @@
+import { WordmarkMorph } from '@/components/ui/wordmark-morph'
+
+interface WorkflowLoaderProps {
+  label?: string
+}
+
+/** Brand loading state for workspace navigation and workflow canvases. */
+export function WorkflowLoader({ label = 'Loading workflow' }: WorkflowLoaderProps) {
+  return (
+    <div role='status'>
+      <WordmarkMorph />
+      <span className='sr-only'>{label}</span>
+    </div>
+  )
+}
diff --git a/packages/emcn/src/icons/animate/relay-loader.module.css b/packages/emcn/src/icons/animate/relay-loader.module.css
new file mode 100644
index 00000000000..3cca5866969
--- /dev/null
+++ b/packages/emcn/src/icons/animate/relay-loader.module.css
@@ -0,0 +1,33 @@
+.ball {
+  transform: translateX(29px);
+}
+
+.animated {
+  animation: relay 1.3s linear infinite;
+}
+
+.glow {
+  flood-color: var(--white);
+  flood-opacity: 0.6;
+}
+
+@keyframes relay {
+  0% {
+    transform: translateX(0);
+    opacity: 0;
+  }
+  20%,
+  78% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(58px);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animated {
+    animation: none;
+  }
+}
diff --git a/packages/emcn/src/icons/loader.test.tsx b/packages/emcn/src/icons/loader.test.tsx
new file mode 100644
index 00000000000..787d8aa663d
--- /dev/null
+++ b/packages/emcn/src/icons/loader.test.tsx
@@ -0,0 +1,30 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { Loader } from '@sim/emcn'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+describe('Loader', () => {
+  it('keeps each rendered loader connected to its own filter', () => {
+    const container = document.createElement('div')
+    container.innerHTML = renderToStaticMarkup(
+      <>
+        <Loader animate className='size-[14px]' />
+        <Loader animate width={18} height={18} />
+        <Loader />
+      </>
+    )
+
+    const loaders = Array.from(container.querySelectorAll('svg'))
+    const filterIds = loaders.map((loader) => loader.querySelector('filter')?.id)
+
+    expect(loaders).toHaveLength(3)
+    expect(new Set(filterIds).size).toBe(loaders.length)
+    for (const loader of loaders) {
+      const filterId = loader.querySelector('filter')?.id
+      expect(filterId).toMatch(/^loader-relay-[a-zA-Z0-9-]+$/)
+      expect(loader.querySelector('g[filter]')?.getAttribute('filter')).toBe(`url(#${filterId})`)
+    }
+  })
+})
diff --git a/packages/emcn/src/icons/loader.tsx b/packages/emcn/src/icons/loader.tsx
index 1b702c19e2a..0750cf7be74 100644
--- a/packages/emcn/src/icons/loader.tsx
+++ b/packages/emcn/src/icons/loader.tsx
@@ -1,42 +1,78 @@
-import type { SVGProps } from 'react'
+'use client'
+
+import { type SVGProps, useId } from 'react'
 import { cn } from '../lib/cn'
-import styles from './animate/loader.module.css'
+import styles from './animate/relay-loader.module.css'
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
-   * Enable animation on the loader icon
+   * Enable the relay animation. Otherwise the dot rests between the bars.
    * @default false
    */
   animate?: boolean
 }
 
 /**
- * Loader icon component with optional CSS-based spinning animation
- * Based on refresh-cw but without the arrows, just the circular arcs.
- * When animate is false, this is a lightweight static icon with no animation overhead.
- * When animate is true, CSS module animations are applied for continuous spin.
- * @param props - SVG properties including className, animate, etc.
+ * Shared loading indicator: a dot travels between two bars with a gooey merge.
+ * Inherits the caller's color and sizing; reduced motion keeps the dot still.
  */
 export function Loader({ animate = false, className, ...props }: LoaderProps) {
-  const svgClassName = cn(animate && styles['animated-loader-svg'], className)
+  const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
+  const filterId = `loader-relay-${id}`
 
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
       width='24'
       height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      className={svgClassName}
+      viewBox='0 0 100 100'
+      fill='currentColor'
+      className={className}
       aria-hidden='true'
       {...props}
     >
-      <path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74' />
-      <path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74' />
+      <defs>
+        <filter
+          id={filterId}
+          x='-30%'
+          y='-30%'
+          width='160%'
+          height='160%'
+          colorInterpolationFilters='sRGB'
+        >
+          <feGaussianBlur in='SourceGraphic' stdDeviation='5' result='blur' />
+          <feColorMatrix
+            in='blur'
+            values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9'
+            result='goo'
+          />
+          <feColorMatrix
+            in='goo'
+            values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0'
+            result='gooAlpha'
+          />
+          <feGaussianBlur in='gooAlpha' stdDeviation='4.86' result='innerBlur' />
+          <feComposite
+            in='innerBlur'
+            in2='gooAlpha'
+            operator='arithmetic'
+            k2='-1'
+            k3='1'
+            result='innerMask'
+          />
+          <feFlood className={styles.glow} result='glowColor' />
+          <feComposite in='glowColor' in2='innerMask' operator='in' result='glow' />
+          <feMerge>
+            <feMergeNode in='goo' />
+            <feMergeNode in='glow' />
+          </feMerge>
+        </filter>
+      </defs>
+      <g filter={`url(#${filterId})`} fill='currentColor' stroke='none'>
+        <rect x='13' y='28' width='16' height='44' />
+        <rect x='71' y='28' width='16' height='44' />
+        <circle className={cn(styles.ball, animate && styles.animated)} cx='21' cy='50' r='14' />
+      </g>
     </svg>
   )
 }

From d39028212c9d03670d64edf51acfeabc1926cf46 Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Wed, 9 Sep 2026 18:24:44 -0700
Subject: [PATCH 2/9] fix(ui): preserve gradient ring loader checkpoint

Replace the relay loader with a compact fading highlight around a ring.
Keep the weighted orbit and reduced-motion fallback. This commit records
the gradient variant before returning to the orbiting-dot design.
---
 .../src/icons/animate/relay-loader.module.css | 33 -------
 .../src/icons/animate/ring-loader.module.css  | 29 +++++++
 packages/emcn/src/icons/loader.test.tsx       | 30 -------
 packages/emcn/src/icons/loader.tsx            | 85 +++++++++----------
 4 files changed, 67 insertions(+), 110 deletions(-)
 delete mode 100644 packages/emcn/src/icons/animate/relay-loader.module.css
 create mode 100644 packages/emcn/src/icons/animate/ring-loader.module.css
 delete mode 100644 packages/emcn/src/icons/loader.test.tsx

diff --git a/packages/emcn/src/icons/animate/relay-loader.module.css b/packages/emcn/src/icons/animate/relay-loader.module.css
deleted file mode 100644
index 3cca5866969..00000000000
--- a/packages/emcn/src/icons/animate/relay-loader.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.ball {
-  transform: translateX(29px);
-}
-
-.animated {
-  animation: relay 1.3s linear infinite;
-}
-
-.glow {
-  flood-color: var(--white);
-  flood-opacity: 0.6;
-}
-
-@keyframes relay {
-  0% {
-    transform: translateX(0);
-    opacity: 0;
-  }
-  20%,
-  78% {
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(58px);
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animated {
-    animation: none;
-  }
-}
diff --git a/packages/emcn/src/icons/animate/ring-loader.module.css b/packages/emcn/src/icons/animate/ring-loader.module.css
new file mode 100644
index 00000000000..6f094871bec
--- /dev/null
+++ b/packages/emcn/src/icons/animate/ring-loader.module.css
@@ -0,0 +1,29 @@
+.highlight {
+  transform-box: view-box;
+  transform-origin: center;
+}
+
+.animated {
+  animation: gravity-orbit 1.4s linear infinite;
+}
+
+/** Matched speeds at the bottom and loop boundary keep the rotation continuous. */
+@keyframes gravity-orbit {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.55, 0.15, 0.75, 0.5);
+  }
+  50% {
+    transform: rotate(180deg);
+    animation-timing-function: cubic-bezier(0.25, 0.5, 0.45, 0.85);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animated {
+    animation: none;
+  }
+}
diff --git a/packages/emcn/src/icons/loader.test.tsx b/packages/emcn/src/icons/loader.test.tsx
deleted file mode 100644
index 787d8aa663d..00000000000
--- a/packages/emcn/src/icons/loader.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { Loader } from '@sim/emcn'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-describe('Loader', () => {
-  it('keeps each rendered loader connected to its own filter', () => {
-    const container = document.createElement('div')
-    container.innerHTML = renderToStaticMarkup(
-      <>
-        <Loader animate className='size-[14px]' />
-        <Loader animate width={18} height={18} />
-        <Loader />
-      </>
-    )
-
-    const loaders = Array.from(container.querySelectorAll('svg'))
-    const filterIds = loaders.map((loader) => loader.querySelector('filter')?.id)
-
-    expect(loaders).toHaveLength(3)
-    expect(new Set(filterIds).size).toBe(loaders.length)
-    for (const loader of loaders) {
-      const filterId = loader.querySelector('filter')?.id
-      expect(filterId).toMatch(/^loader-relay-[a-zA-Z0-9-]+$/)
-      expect(loader.querySelector('g[filter]')?.getAttribute('filter')).toBe(`url(#${filterId})`)
-    }
-  })
-})
diff --git a/packages/emcn/src/icons/loader.tsx b/packages/emcn/src/icons/loader.tsx
index 0750cf7be74..d05a1b73cd0 100644
--- a/packages/emcn/src/icons/loader.tsx
+++ b/packages/emcn/src/icons/loader.tsx
@@ -1,78 +1,69 @@
 'use client'
 
 import { type SVGProps, useId } from 'react'
-import { cn } from '../lib/cn'
-import styles from './animate/relay-loader.module.css'
+import { cn } from '@sim/emcn'
+import styles from '@sim/emcn/icons/animate/ring-loader.module.css'
+
+/** Ease the compact highlight into the track without a visible cutoff. */
+const HIGHLIGHT_STOPS = Array.from({ length: 17 }, (_, index) => {
+  const progress = index / 16
+  return {
+    offset: `${progress * 40}%`,
+    opacity: 1 - progress * progress * (3 - 2 * progress),
+  }
+})
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
-   * Enable the relay animation. Otherwise the dot rests between the bars.
+   * Enable the weighted rotation. Otherwise the highlight rests at the top of the ring.
    * @default false
    */
   animate?: boolean
 }
 
 /**
- * Shared loading indicator: a dot travels between two bars with a gooey merge.
- * Inherits the caller's color and sizing; reduced motion keeps the dot still.
+ * Shared loading ring with a fading highlight that accelerates downward and slows on the climb.
+ * Inherits the caller's color and sizing; reduced motion holds the highlight still.
  */
 export function Loader({ animate = false, className, ...props }: LoaderProps) {
   const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
-  const filterId = `loader-relay-${id}`
+  const gradientId = `loader-highlight-${id}`
 
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
       width='24'
       height='24'
-      viewBox='0 0 100 100'
-      fill='currentColor'
+      viewBox='0 0 24 24'
+      fill='none'
       className={className}
       aria-hidden='true'
       {...props}
     >
       <defs>
-        <filter
-          id={filterId}
-          x='-30%'
-          y='-30%'
-          width='160%'
-          height='160%'
-          colorInterpolationFilters='sRGB'
+        <linearGradient
+          id={gradientId}
+          x1='12'
+          y1='1'
+          x2='12'
+          y2='23'
+          gradientUnits='userSpaceOnUse'
         >
-          <feGaussianBlur in='SourceGraphic' stdDeviation='5' result='blur' />
-          <feColorMatrix
-            in='blur'
-            values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9'
-            result='goo'
-          />
-          <feColorMatrix
-            in='goo'
-            values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0'
-            result='gooAlpha'
-          />
-          <feGaussianBlur in='gooAlpha' stdDeviation='4.86' result='innerBlur' />
-          <feComposite
-            in='innerBlur'
-            in2='gooAlpha'
-            operator='arithmetic'
-            k2='-1'
-            k3='1'
-            result='innerMask'
-          />
-          <feFlood className={styles.glow} result='glowColor' />
-          <feComposite in='glowColor' in2='innerMask' operator='in' result='glow' />
-          <feMerge>
-            <feMergeNode in='goo' />
-            <feMergeNode in='glow' />
-          </feMerge>
-        </filter>
+          {HIGHLIGHT_STOPS.map(({ offset, opacity }) => (
+            <stop key={offset} offset={offset} stopColor='currentColor' stopOpacity={opacity} />
+          ))}
+          <stop offset='1' stopColor='currentColor' stopOpacity='0' />
+        </linearGradient>
       </defs>
-      <g filter={`url(#${filterId})`} fill='currentColor' stroke='none'>
-        <rect x='13' y='28' width='16' height='44' />
-        <rect x='71' y='28' width='16' height='44' />
-        <circle className={cn(styles.ball, animate && styles.animated)} cx='21' cy='50' r='14' />
-      </g>
+      <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='.25' />
+      <circle
+        className={cn(styles.highlight, animate && styles.animated)}
+        cx='12'
+        cy='12'
+        r='10'
+        stroke={`url(#${gradientId})`}
+        strokeWidth='2'
+      />
     </svg>
   )
 }

From 2ab573fc68cad1b5ee79e0f4c51ced5a51527a4c Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Wed, 9 Sep 2026 18:30:32 -0700
Subject: [PATCH 3/9] fix(ui): preserve orbiting dot loader variant

Replace the gradient highlight with a solid dot on a 3-unit ring.
Record the dot variant with its slowdown centered at the top before
experimenting with a clockwise offset.
---
 .../src/icons/animate/ring-loader.module.css  |  2 +-
 packages/emcn/src/icons/loader.tsx            | 46 ++++---------------
 2 files changed, 10 insertions(+), 38 deletions(-)

diff --git a/packages/emcn/src/icons/animate/ring-loader.module.css b/packages/emcn/src/icons/animate/ring-loader.module.css
index 6f094871bec..f0a94023c28 100644
--- a/packages/emcn/src/icons/animate/ring-loader.module.css
+++ b/packages/emcn/src/icons/animate/ring-loader.module.css
@@ -1,4 +1,4 @@
-.highlight {
+.dot {
   transform-box: view-box;
   transform-origin: center;
 }
diff --git a/packages/emcn/src/icons/loader.tsx b/packages/emcn/src/icons/loader.tsx
index d05a1b73cd0..283774a548f 100644
--- a/packages/emcn/src/icons/loader.tsx
+++ b/packages/emcn/src/icons/loader.tsx
@@ -1,34 +1,22 @@
 'use client'
 
-import { type SVGProps, useId } from 'react'
+import type { SVGProps } from 'react'
 import { cn } from '@sim/emcn'
 import styles from '@sim/emcn/icons/animate/ring-loader.module.css'
 
-/** Ease the compact highlight into the track without a visible cutoff. */
-const HIGHLIGHT_STOPS = Array.from({ length: 17 }, (_, index) => {
-  const progress = index / 16
-  return {
-    offset: `${progress * 40}%`,
-    opacity: 1 - progress * progress * (3 - 2 * progress),
-  }
-})
-
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
-   * Enable the weighted rotation. Otherwise the highlight rests at the top of the ring.
+   * Enable the weighted rotation. Otherwise the dot rests at the top of the ring.
    * @default false
    */
   animate?: boolean
 }
 
 /**
- * Shared loading ring with a fading highlight that accelerates downward and slows on the climb.
- * Inherits the caller's color and sizing; reduced motion holds the highlight still.
+ * Shared loading ring with a dot that accelerates downward and slows on the climb.
+ * Inherits the caller's color and sizing; reduced motion holds the dot still.
  */
 export function Loader({ animate = false, className, ...props }: LoaderProps) {
-  const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
-  const gradientId = `loader-highlight-${id}`
-
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
@@ -40,29 +28,13 @@ export function Loader({ animate = false, className, ...props }: LoaderProps) {
       aria-hidden='true'
       {...props}
     >
-      <defs>
-        <linearGradient
-          id={gradientId}
-          x1='12'
-          y1='1'
-          x2='12'
-          y2='23'
-          gradientUnits='userSpaceOnUse'
-        >
-          {HIGHLIGHT_STOPS.map(({ offset, opacity }) => (
-            <stop key={offset} offset={offset} stopColor='currentColor' stopOpacity={opacity} />
-          ))}
-          <stop offset='1' stopColor='currentColor' stopOpacity='0' />
-        </linearGradient>
-      </defs>
-      <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='.25' />
+      <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='3' opacity='.25' />
       <circle
-        className={cn(styles.highlight, animate && styles.animated)}
+        className={cn(styles.dot, animate && styles.animated)}
         cx='12'
-        cy='12'
-        r='10'
-        stroke={`url(#${gradientId})`}
-        strokeWidth='2'
+        cy='2'
+        r='1.5'
+        fill='currentColor'
       />
     </svg>
   )

From 56e87104bdcee04f2989c8957cc117fe6fb27c9b Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Wed, 9 Sep 2026 19:17:34 -0700
Subject: [PATCH 4/9] fix(ui): tune dot spinner motion and keep orbit aligned

Keep the dot moving through the top while accelerating through the bottom.
Rotate the ring and dot together so their alignment stays fixed when scaled.
This commit records the updated dot spinner variant.
---
 .../emcn/src/icons/animate/ring-loader.module.css   | 13 +++++--------
 packages/emcn/src/icons/loader.tsx                  | 10 ++--------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/emcn/src/icons/animate/ring-loader.module.css b/packages/emcn/src/icons/animate/ring-loader.module.css
index f0a94023c28..8b91af1e68a 100644
--- a/packages/emcn/src/icons/animate/ring-loader.module.css
+++ b/packages/emcn/src/icons/animate/ring-loader.module.css
@@ -1,21 +1,18 @@
-.dot {
-  transform-box: view-box;
-  transform-origin: center;
-}
-
 .animated {
   animation: gravity-orbit 1.4s linear infinite;
+  transform-box: border-box;
+  transform-origin: center;
 }
 
-/** Matched speeds at the bottom and loop boundary keep the rotation continuous. */
+/** Matched speeds keep the loop continuous, with a gentle slowdown at the top. */
 @keyframes gravity-orbit {
   0% {
     transform: rotate(0deg);
-    animation-timing-function: cubic-bezier(0.55, 0.15, 0.75, 0.5);
+    animation-timing-function: cubic-bezier(0.55, 0.3, 0.8, 0.5);
   }
   50% {
     transform: rotate(180deg);
-    animation-timing-function: cubic-bezier(0.25, 0.5, 0.45, 0.85);
+    animation-timing-function: cubic-bezier(0.2, 0.5, 0.45, 0.7);
   }
   100% {
     transform: rotate(360deg);
diff --git a/packages/emcn/src/icons/loader.tsx b/packages/emcn/src/icons/loader.tsx
index 283774a548f..928f6c6d1b2 100644
--- a/packages/emcn/src/icons/loader.tsx
+++ b/packages/emcn/src/icons/loader.tsx
@@ -24,18 +24,12 @@ export function Loader({ animate = false, className, ...props }: LoaderProps) {
       height='24'
       viewBox='0 0 24 24'
       fill='none'
-      className={className}
+      className={cn(animate && styles.animated, className)}
       aria-hidden='true'
       {...props}
     >
       <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='3' opacity='.25' />
-      <circle
-        className={cn(styles.dot, animate && styles.animated)}
-        cx='12'
-        cy='2'
-        r='1.5'
-        fill='currentColor'
-      />
+      <circle cx='12' cy='2' r='1.5' fill='currentColor' />
     </svg>
   )
 }

From 2df347eab72d00f5a44f7794a961d904f018413c Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Wed, 9 Sep 2026 21:21:17 -0700
Subject: [PATCH 5/9] fix(ui): preserve slanted strip version

Give the running strip and Stop highlight matching 15-degree edges with
rounded corners and a 2.75px gap. Round the strip's outer end to follow the
node contour, and preserve the thicker dot loader at 16px in the run button.

Checkpoint for the slanted strip version before trying a vertical gap.
---
 .../components/action-bar/action-bar.tsx      | 57 ++++++++++++-------
 packages/emcn/src/icons/loader.tsx            |  4 +-
 2 files changed, 37 insertions(+), 24 deletions(-)

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 241b32e9a13..c7f50b19698 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
@@ -91,27 +91,35 @@ const ACTION_BUTTON_STYLES = [
 const RUNNING_FILL =
   'bg-[repeating-linear-gradient(75deg,var(--surface-2)_11.59px_22.805px,transparent_23.555px_24.735px,var(--surface-2)_25.485px_36.7px)]'
 
-/** Left edge of the fill: clears the run/stop button, which stays live mid-run. */
-const RUNNING_FILL_INSET_SWELL = 'left-[42px]'
+/** A 2.75px gap across the 15° slant matches the 2px inset plus 0.75px outer stroke. */
+const RUNNING_FILL_INSET_SWELL = 'left-[42.85px]'
 const RUNNING_FILL_INSET_PLAIN = 'left-[26px]'
 
 /**
- * Trims the fill to the swell's tapered end.
- *
- * The row is a rectangle but the swell is not: its last slot cuts a diagonal
- * (`M16.25 0 … L36.59 19.9 …`) so the shape narrows toward the top. A rectangular
- * overlay therefore paints past the gray edge at the top while still sitting
- * inside it at the bottom — the fill visibly ran off the block. The per-slot
- * version never did, because each button's own clip contained it.
- *
- * Same taper, read off that path. Its straight run — (22.4, 2.88) to
- * (36.59, 19.9) in the slot's own 40×24 box — has a slope of 20/24, so across
- * the full row it moves from 20px in at the top to flush at the bottom. The
- * overlay spans the row, so those are its two numbers; they are the slot's own
- * edge continued, which is what puts the hatch's end exactly where a hovered
- * slot's fill ends. Changing the end silhouette means changing them with it.
+ * A 15° entry with 4px rounded corners. The solid body overlaps each end cap
+ * by 1px to avoid seams at fractional zoom; the plain bar keeps a square end.
+ */
+const RUNNING_FILL_MASK = [
+  '[mask-image:linear-gradient(black,black),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%3E%3Cpath%20d%3D%22M5.213%200H16V24H9.5A4%204%200%200%201%205.636%2021.035L1.349%205.035A4%204%200%200%201%205.213%200Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"),var(--running-fill-end-mask,linear-gradient(black,black))]',
+  '[mask-size:calc(100%_-_54px)_100%,16px_100%,40px_100%]',
+  '[mask-position:15px_top,left_top,right_top]',
+  '[mask-repeat:no-repeat]',
+].join(' ')
+
+/** Uses the delete button's rounded contour for the swell's right end cap. */
+const RUNNING_FILL_ROUNDED_END =
+  '[--running-fill-end-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2024%22%3E%3Cpath%20d%3D%22M0%200H16.25A8%208%200%200%201%2022.4%202.88L36.59%2019.9A2.5%202.5%200%200%201%2034.66%2024H0Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E")]'
+
+/**
+ * The running button keeps its outer shoulder and rounds its 15° right edge.
+ * The edge runs from x=40 at the top to x=46.43 at the bottom, parallel to the hatch.
  */
-const RUNNING_FILL_END_TAPER = '[clip-path:polygon(0_0,calc(100%_-_20px)_0,100%_100%,0_100%)]'
+const RUNNING_BUTTON_CLIP_SWELL =
+  "[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_24H41.217A4_4_0_0_0_45.081_18.965L40.795_2.965A4_4_0_0_0_36.931_0Z')]"
+
+/** Extends the highlight while preserving the 40px slot and the icon's center. */
+const RUNNING_BUTTON_LAYOUT_SWELL =
+  'relative z-[1] -mr-[6.43px] w-[46.43px]! shrink-0 rounded-none pr-[6.43px]'
 
 const ICON_SIZE = 'size-[14px]'
 
@@ -128,7 +136,7 @@ type ActionId = 'run' | 'enabled' | 'lock' | 'duplicate' | 'remove' | 'delete' |
 function RunningActionIcon() {
   return (
     <span
-      className='relative grid size-[14px] translate-x-[8px] translate-y-px place-items-center'
+      className='relative grid size-[16px] translate-x-[8px] translate-y-px place-items-center'
       role='status'
     >
       <span className='sr-only'>Block running</span>
@@ -136,7 +144,7 @@ function RunningActionIcon() {
         aria-hidden='true'
         className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-reduce:transition-none'
       >
-        <Loader className='size-[14px]' animate />
+        <Loader className='size-[16px]' animate />
       </span>
       <span
         aria-hidden='true'
@@ -334,8 +342,12 @@ export const ActionBar = memo(
             'dark:focus-visible:bg-[var(--surface-4)]! dark:focus-visible:text-[var(--text-primary)]!',
           ],
         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",
+          actionId === firstActionId && [
+            '[&>svg]:translate-y-px',
+            isSweeping && actionId === 'run'
+              ? [RUNNING_BUTTON_LAYOUT_SWELL, RUNNING_BUTTON_CLIP_SWELL]
+              : "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')]",
+          ],
         isSwell &&
           actionId === firstActionId &&
           (actionId === 'run' || actionId === 'color'
@@ -432,7 +444,8 @@ export const ActionBar = memo(
                    the container's own inset. */
                 'pointer-events-none absolute inset-y-0 right-0 overflow-hidden',
                 isSwell ? RUNNING_FILL_INSET_SWELL : RUNNING_FILL_INSET_PLAIN,
-                isSwell && RUNNING_FILL_END_TAPER
+                RUNNING_FILL_MASK,
+                isSwell && RUNNING_FILL_ROUNDED_END
               )}
             >
               <span
diff --git a/packages/emcn/src/icons/loader.tsx b/packages/emcn/src/icons/loader.tsx
index 928f6c6d1b2..25b6c754125 100644
--- a/packages/emcn/src/icons/loader.tsx
+++ b/packages/emcn/src/icons/loader.tsx
@@ -28,8 +28,8 @@ export function Loader({ animate = false, className, ...props }: LoaderProps) {
       aria-hidden='true'
       {...props}
     >
-      <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='3' opacity='.25' />
-      <circle cx='12' cy='2' r='1.5' fill='currentColor' />
+      <circle cx='12' cy='12' r='9.5' stroke='currentColor' strokeWidth='4' opacity='.25' />
+      <circle cx='12' cy='2.5' r='2' fill='currentColor' />
     </svg>
   )
 }

From 6f8d4a0297dfcbb00528c73d62a4b0373294d651 Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Thu, 10 Sep 2026 13:07:12 -0700
Subject: [PATCH 6/9] fix(ui): use flat brand wordmarks and preserve vertical
 strip

Use Static in light mode and Graphite in dark mode for workflow loading,
while keeping the existing gradients available for the landing page.
Remove the temporary pinned preview so loading ends normally.

Checkpoint the rounded vertical gap between the Stop highlight and the
running strip before restoring the slanted strip version for comparison.
---
 .../components/action-bar/action-bar.tsx      | 20 ++---
 .../components/command-list/command-list.tsx  |  6 +-
 apps/sim/components/ui/wordmark-morph.tsx     | 84 ++++++++++---------
 apps/sim/components/ui/workflow-loader.tsx    |  2 +-
 4 files changed, 56 insertions(+), 56 deletions(-)

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 c7f50b19698..ac46cd07a4d 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
@@ -91,16 +91,16 @@ const ACTION_BUTTON_STYLES = [
 const RUNNING_FILL =
   'bg-[repeating-linear-gradient(75deg,var(--surface-2)_11.59px_22.805px,transparent_23.555px_24.735px,var(--surface-2)_25.485px_36.7px)]'
 
-/** A 2.75px gap across the 15° slant matches the 2px inset plus 0.75px outer stroke. */
-const RUNNING_FILL_INSET_SWELL = 'left-[42.85px]'
+/** Matches the Stop highlight's 2px inset plus the node's 0.75px outer stroke. */
+const RUNNING_FILL_INSET_SWELL = 'left-[42.75px]'
 const RUNNING_FILL_INSET_PLAIN = 'left-[26px]'
 
 /**
- * A 15° entry with 4px rounded corners. The solid body overlaps each end cap
+ * A vertical entry with 4px rounded corners. The solid body overlaps each end cap
  * by 1px to avoid seams at fractional zoom; the plain bar keeps a square end.
  */
 const RUNNING_FILL_MASK = [
-  '[mask-image:linear-gradient(black,black),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%3E%3Cpath%20d%3D%22M5.213%200H16V24H9.5A4%204%200%200%201%205.636%2021.035L1.349%205.035A4%204%200%200%201%205.213%200Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"),var(--running-fill-end-mask,linear-gradient(black,black))]',
+  '[mask-image:linear-gradient(black,black),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%3E%3Cpath%20d%3D%22M4%200H16V24H4A4%204%200%200%201%200%2020V4A4%204%200%200%201%204%200Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"),var(--running-fill-end-mask,linear-gradient(black,black))]',
   '[mask-size:calc(100%_-_54px)_100%,16px_100%,40px_100%]',
   '[mask-position:15px_top,left_top,right_top]',
   '[mask-repeat:no-repeat]',
@@ -110,16 +110,12 @@ const RUNNING_FILL_MASK = [
 const RUNNING_FILL_ROUNDED_END =
   '[--running-fill-end-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2024%22%3E%3Cpath%20d%3D%22M0%200H16.25A8%208%200%200%201%2022.4%202.88L36.59%2019.9A2.5%202.5%200%200%201%2034.66%2024H0Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E")]'
 
-/**
- * The running button keeps its outer shoulder and rounds its 15° right edge.
- * The edge runs from x=40 at the top to x=46.43 at the bottom, parallel to the hatch.
- */
+/** Keeps the outer shoulder and a vertical right edge with 4px rounded corners. */
 const RUNNING_BUTTON_CLIP_SWELL =
-  "[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_24H41.217A4_4_0_0_0_45.081_18.965L40.795_2.965A4_4_0_0_0_36.931_0Z')]"
+  "[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_24H36A4_4_0_0_0_40_20V4A4_4_0_0_0_36_0Z')]"
 
-/** Extends the highlight while preserving the 40px slot and the icon's center. */
-const RUNNING_BUTTON_LAYOUT_SWELL =
-  'relative z-[1] -mr-[6.43px] w-[46.43px]! shrink-0 rounded-none pr-[6.43px]'
+/** The clip path owns the corners within the standard 40px slot. */
+const RUNNING_BUTTON_LAYOUT_SWELL = 'relative w-[40px]! shrink-0 rounded-none'
 
 const ICON_SIZE = 'size-[14px]'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index 3d2e7e8b88a..c40fe17f32f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -175,11 +175,7 @@ export function CommandList() {
             alt='Sim'
             width={99.56}
             height={48.56}
-            className='opacity-70'
-            style={{
-              filter:
-                'brightness(0) saturate(100%) invert(69%) sepia(0%) saturate(0%) hue-rotate(202deg) brightness(94%) contrast(89%)',
-            }}
+            className='opacity-70 [filter:brightness(0)_saturate(100%)_invert(69%)_sepia(0%)_saturate(0%)_hue-rotate(202deg)_brightness(94%)_contrast(89%)]'
           />
         </div>
 
diff --git a/apps/sim/components/ui/wordmark-morph.tsx b/apps/sim/components/ui/wordmark-morph.tsx
index f1f74b9457a..42950a06d3c 100644
--- a/apps/sim/components/ui/wordmark-morph.tsx
+++ b/apps/sim/components/ui/wordmark-morph.tsx
@@ -1,17 +1,17 @@
 'use client'
 
-import { type CSSProperties, useEffect, useId, useRef } from 'react'
+import { useEffect, useId, useRef } from 'react'
 import { cn } from '@sim/emcn'
 import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
 
-/**
- * The mark's ink: the platform's thinking-loader gradient tokens, so it follows
- * the theme. Light resolves to the locked `GOO_GRADIENT` recipe; dark lifts it
- * to the loader's light-on-dark material. Set through `style`, where `var()`
- * is unambiguous, rather than as a presentation attribute.
- */
-const INK_STOP_INNER = { stopColor: 'var(--thinking-ink-inner)' } as const satisfies CSSProperties
-const INK_STOP_OUTER = { stopColor: 'var(--thinking-ink-outer)' } as const satisfies CSSProperties
+/** Theme-aware ink shared by the wordmark and every shape in its animation. */
+const INK_STOPS = {
+  inner: '[stop-color:var(--thinking-ink-inner)]',
+  outer: '[stop-color:var(--thinking-ink-outer)]',
+} as const
+
+/** Brand palette: Static on light backgrounds, Graphite on dark backgrounds. */
+const FLAT_INK = '[color:#e6e6e6] dark:[color:#3b3b3b]'
 
 /**
  * The seven thinking-loader shapes in play order, each with its hold in ms.
@@ -428,10 +428,12 @@ function paintFrame(
 }
 
 interface WordmarkMorphProps {
-  /** Layout only: margins and alignment. */
+  /** Layout only: sizing, margins and alignment. */
   className?: string
   /** Compact loading indicator or responsive footer mark. */
   size?: 'sm' | 'lg'
+  /** Theme-aware gradient or solid gray ink. */
+  variant?: 'gradient' | 'flat'
 }
 
 /**
@@ -440,7 +442,11 @@ interface WordmarkMorphProps {
  * Renders a crisp resting frame, pauses outside the viewport, and stays
  * still under reduced motion. Frames update SVG attributes without React renders.
  */
-export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
+export function WordmarkMorph({
+  className,
+  size = 'sm',
+  variant = 'gradient',
+}: WordmarkMorphProps) {
   const svgRef = useRef<SVGSVGElement>(null)
   const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
   const gooId = `fwl-goo-${id}`
@@ -448,6 +454,8 @@ export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
   const wordmarkInkId = `fwl-wm-ink-${id}`
   const clipId = `fwl-clip-${id}`
   const windowId = `fwl-window-${id}`
+  const shapeInk = variant === 'flat' ? 'currentColor' : `url(#${inkId})`
+  const wordmarkInk = variant === 'flat' ? shapeInk : `url(#${wordmarkInkId})`
 
   useEffect(() => {
     const svg = svgRef.current
@@ -524,7 +532,7 @@ export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
     <div
       className={cn(
         'relative mx-auto aspect-[5/3] shrink-0',
-        size === 'sm' ? 'w-[80px]' : 'w-[clamp(180px,17vw,320px)]',
+        size === 'sm' ? 'w-[108px]' : 'w-[clamp(180px,17vw,320px)]',
         className
       )}
     >
@@ -532,7 +540,10 @@ export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
         ref={svgRef}
         viewBox='0 0 100 100'
         aria-hidden='true'
-        className='-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible'
+        className={cn(
+          '-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible',
+          variant === 'flat' && FLAT_INK
+        )}
       >
         <defs>
           <filter
@@ -544,9 +555,7 @@ export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
             colorInterpolationFilters='sRGB'
           >
             <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={0} result='blur' />
-            {/* A steep threshold: the melt between shapes keeps its liquid
-                merges, but every edge resolves within a pixel, so the mark
-                stays crisp at the cycle's full blur. */}
+            {/** The alpha threshold joins nearby shapes during the liquid morph. */}
             <feColorMatrix
               data-goo-matrix=''
               in='blur'
@@ -554,21 +563,25 @@ export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
               result='goo'
             />
           </filter>
-          <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
-            <stop style={INK_STOP_INNER} />
-            <stop offset='1' style={INK_STOP_OUTER} />
-          </radialGradient>
-          <radialGradient
-            id={wordmarkInkId}
-            cx='0'
-            cy='0'
-            r='1'
-            gradientUnits='userSpaceOnUse'
-            gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
-          >
-            <stop style={INK_STOP_INNER} />
-            <stop offset='1' style={INK_STOP_OUTER} />
-          </radialGradient>
+          {variant === 'gradient' && (
+            <>
+              <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
+                <stop className={INK_STOPS.inner} />
+                <stop offset='1' className={INK_STOPS.outer} />
+              </radialGradient>
+              <radialGradient
+                id={wordmarkInkId}
+                cx='0'
+                cy='0'
+                r='1'
+                gradientUnits='userSpaceOnUse'
+                gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
+              >
+                <stop className={INK_STOPS.inner} />
+                <stop offset='1' className={INK_STOPS.outer} />
+              </radialGradient>
+            </>
+          )}
           <clipPath id={clipId}>
             <rect width='100' height='100' />
           </clipPath>
@@ -577,12 +590,7 @@ export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
           </clipPath>
         </defs>
 
-        <g
-          filter={`url(#${gooId})`}
-          fill={`url(#${inkId})`}
-          stroke={`url(#${inkId})`}
-          strokeWidth={0}
-        >
+        <g filter={`url(#${gooId})`} fill={shapeInk} stroke={shapeInk} strokeWidth={0}>
           <g data-stage='metaballs' opacity={0} clipPath={`url(#${clipId})`}>
             <circle data-anim='metaballsA' cx='22' cy='50' r='16' />
             <circle data-anim='metaballsB' cx='78' cy='50' r='16' />
@@ -633,7 +641,7 @@ export function WordmarkMorph({ className, size = 'sm' }: WordmarkMorphProps) {
           <g
             data-stage='wm'
             opacity={1}
-            fill={`url(#${wordmarkInkId})`}
+            fill={wordmarkInk}
             transform={`translate(${round(WORDMARK_X)} ${round(WORDMARK_Y)}) scale(${WORDMARK_SCALE.toFixed(5)})`}
           >
             {WORDMARK_PATHS.map((d) => (
diff --git a/apps/sim/components/ui/workflow-loader.tsx b/apps/sim/components/ui/workflow-loader.tsx
index 0273c73d896..622d7480693 100644
--- a/apps/sim/components/ui/workflow-loader.tsx
+++ b/apps/sim/components/ui/workflow-loader.tsx
@@ -8,7 +8,7 @@ interface WorkflowLoaderProps {
 export function WorkflowLoader({ label = 'Loading workflow' }: WorkflowLoaderProps) {
   return (
     <div role='status'>
-      <WordmarkMorph />
+      <WordmarkMorph variant='flat' />
       <span className='sr-only'>{label}</span>
     </div>
   )

From 2b431b12d742325cb4a3b8f3b5eb711aeefdc1ce Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Thu, 10 Sep 2026 16:15:03 -0700
Subject: [PATCH 7/9] improvement(ui): unify loading animations

---
 .../production-workflow-stage.tsx             |  14 +-
 .../hero-platform-loop/stage-block-card.tsx   |  13 +-
 .../components/find-bar/find-bar.tsx          |   2 +-
 .../workflow-sidebar/workflow-sidebar.tsx     |   3 +-
 .../components/action-bar/action-bar.tsx      |  32 ++-
 .../components/command-list/command-list.tsx  | 115 ++++-----
 .../collapsed-sidebar-menu.tsx                |   3 +-
 .../components/search-modal/search-modal.tsx  |   3 +-
 apps/sim/components/ui/wordmark-frame.tsx     |  46 ++++
 apps/sim/components/ui/wordmark-morph.tsx     | 239 ++++++++----------
 apps/sim/lib/branding/wordmark.ts             |  10 +
 packages/emcn/src/icons/loader.tsx            |   4 +-
 12 files changed, 254 insertions(+), 230 deletions(-)
 create mode 100644 apps/sim/components/ui/wordmark-frame.tsx

diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
index 83c7e4fd1d5..f02edf8e277 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
@@ -1,16 +1,18 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, cn, Tooltip, usePrefersReducedMotion } from '@sim/emcn'
 import {
-  Button,
-  cn,
+  Circle,
   Duplicate,
+  Loader,
+  Minus,
   PlayOutline,
-  Tooltip,
+  Plus,
+  Square,
   Trash,
-  usePrefersReducedMotion,
-} from '@sim/emcn'
-import { Circle, Loader, Minus, Plus, Square, Unlock } from '@sim/emcn/icons'
+  Unlock,
+} from '@sim/emcn/icons'
 import {
   CanvasSentenceView,
   InlineChip,
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
index 5bfe35f497c..03cc93c9dbf 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
@@ -1,18 +1,17 @@
 'use client'
 
 import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { Button, cn, handleKeyboardActivation, Switch, Tooltip } from '@sim/emcn'
 import {
-  Button,
   Check,
-  cn,
+  Circle,
   Duplicate,
-  handleKeyboardActivation,
+  Loader,
   PlayOutline,
-  Switch,
-  Tooltip,
+  Square,
   Trash,
-} from '@sim/emcn'
-import { Circle, Loader, Square, Unlock } from '@sim/emcn/icons'
+  Unlock,
+} from '@sim/emcn/icons'
 import {
   BLOCK_DIMENSIONS,
   CanvasSentenceView,
diff --git a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
index 8435efc8822..46a02249072 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
@@ -106,7 +106,7 @@ export const FindBar = memo(function FindBar({
   function counterContent() {
     if (!hasQuery) return null
     if (hasMatches) return `${currentIndex + 1} of ${count}${truncated ? '+' : ''}`
-    return isLoading ? <Loader aria-hidden className='size-[13px]' animate /> : 'No results'
+    return isLoading ? <Loader aria-hidden className='size-[14px]' animate /> : 'No results'
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index 94dad6f8f39..6e479cb6597 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -10,13 +10,12 @@ import {
   DashedDividerLine,
   FieldDivider,
   Label,
-  Loader,
   OverflowText,
   Switch,
   Tooltip,
   toast,
 } from '@sim/emcn'
-import { ArrowLeft, ChevronDown, SquareArrowUpRight, X } from '@sim/emcn/icons'
+import { ArrowLeft, ChevronDown, Loader, SquareArrowUpRight, X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
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 ac46cd07a4d..0d653e63242 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
@@ -7,13 +7,22 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-  Duplicate,
-  PlayOutline,
   Tooltip,
-  Trash,
   toast,
 } from '@sim/emcn'
-import { Ban, Circle, Loader, Lock, LogOut, Palette, Square, Unlock } from '@sim/emcn/icons'
+import {
+  Ban,
+  Circle,
+  Duplicate,
+  Loader,
+  Lock,
+  LogOut,
+  Palette,
+  PlayOutline,
+  Square,
+  Trash,
+  Unlock,
+} from '@sim/emcn/icons'
 import {
   DEFAULT_NOTE_COLOR,
   isNoteColor,
@@ -96,11 +105,12 @@ const RUNNING_FILL_INSET_SWELL = 'left-[42.75px]'
 const RUNNING_FILL_INSET_PLAIN = 'left-[26px]'
 
 /**
- * A vertical entry with 4px rounded corners. The solid body overlaps each end cap
+ * A vertical entry with 6px corners, matching the buttons’ rounded-md radius.
+ * The solid body overlaps each end cap
  * by 1px to avoid seams at fractional zoom; the plain bar keeps a square end.
  */
 const RUNNING_FILL_MASK = [
-  '[mask-image:linear-gradient(black,black),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%3E%3Cpath%20d%3D%22M4%200H16V24H4A4%204%200%200%201%200%2020V4A4%204%200%200%201%204%200Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"),var(--running-fill-end-mask,linear-gradient(black,black))]',
+  '[mask-image:linear-gradient(black,black),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%3E%3Cpath%20d%3D%22M6%200H16V24H6A6%206%200%200%201%200%2018V6A6%206%200%200%201%206%200Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"),var(--running-fill-end-mask,linear-gradient(black,black))]',
   '[mask-size:calc(100%_-_54px)_100%,16px_100%,40px_100%]',
   '[mask-position:15px_top,left_top,right_top]',
   '[mask-repeat:no-repeat]',
@@ -110,9 +120,9 @@ const RUNNING_FILL_MASK = [
 const RUNNING_FILL_ROUNDED_END =
   '[--running-fill-end-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2024%22%3E%3Cpath%20d%3D%22M0%200H16.25A8%208%200%200%201%2022.4%202.88L36.59%2019.9A2.5%202.5%200%200%201%2034.66%2024H0Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E")]'
 
-/** Keeps the outer shoulder and a vertical right edge with 4px rounded corners. */
+/** Keeps the outer shoulder and matches the buttons’ 6px rounded-md inner corners. */
 const RUNNING_BUTTON_CLIP_SWELL =
-  "[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_24H36A4_4_0_0_0_40_20V4A4_4_0_0_0_36_0Z')]"
+  "[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_24H34A6_6_0_0_0_40_18V6A6_6_0_0_0_34_0Z')]"
 
 /** The clip path owns the corners within the standard 40px slot. */
 const RUNNING_BUTTON_LAYOUT_SWELL = 'relative w-[40px]! shrink-0 rounded-none'
@@ -132,15 +142,15 @@ type ActionId = 'run' | 'enabled' | 'lock' | 'duplicate' | 'remove' | 'delete' |
 function RunningActionIcon() {
   return (
     <span
-      className='relative grid size-[16px] translate-x-[8px] translate-y-px place-items-center'
+      className='relative grid size-[18px] translate-x-[8px] translate-y-px place-items-center'
       role='status'
     >
       <span className='sr-only'>Block running</span>
       <span
         aria-hidden='true'
-        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-reduce:transition-none'
+        className='-translate-x-[1px] col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-reduce:transition-none'
       >
-        <Loader className='size-[16px]' animate />
+        <Loader className='size-[18px]' animate />
       </span>
       <span
         aria-hidden='true'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index c40fe17f32f..d7dfa0bc92c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -1,12 +1,13 @@
 'use client'
 
 import { useCallback } from 'react'
-import { Button, cn, handleKeyboardActivation, Library } from '@sim/emcn'
-import { Search } from '@sim/emcn/icons'
+import { Button, buttonVariants, cn } from '@sim/emcn'
+import { Library, Search } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
-import Image from 'next/image'
 import { useParams, useRouter } from 'next/navigation'
 import { AgentIcon } from '@/components/icons'
+import { WordmarkFrame } from '@/components/ui/wordmark-frame'
+import { WORDMARK_MORPH_TRANSFORM, WORDMARK_PATHS } from '@/lib/branding/wordmark'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useSearchModalStore } from '@/stores/modals/search/store'
 
@@ -47,7 +48,7 @@ const commands: CommandItem[] = [
 
 /**
  * CommandList component that displays available commands with keyboard shortcuts
- * Centered on the screen for empty workflows
+ * Centers the Sim mark in the canvas with commands below it, matching the loading mark.
  */
 export function CommandList() {
   const params = useParams()
@@ -159,69 +160,55 @@ export function CommandList() {
   return (
     <div
       ref={preventZoomRef}
-      className={cn(
-        'pointer-events-none absolute inset-0 mb-[50px] flex items-center justify-center'
-      )}
+      className='pointer-events-none absolute inset-0 flex items-center justify-center'
     >
-      <div
-        className='pointer-events-auto flex flex-col gap-2'
-        onDragOver={handleDragOver}
-        onDrop={handleDrop}
-      >
-        {/* Logo */}
-        <div className='mb-5 flex justify-center'>
-          <Image
-            src='/logo/b&w/text/b&w.svg'
-            alt='Sim'
-            width={99.56}
-            height={48.56}
-            className='opacity-70 [filter:brightness(0)_saturate(100%)_invert(69%)_sepia(0%)_saturate(0%)_hue-rotate(202deg)_brightness(94%)_contrast(89%)]'
-          />
-        </div>
+      <div className='pointer-events-auto relative' onDragOver={handleDragOver} onDrop={handleDrop}>
+        <WordmarkFrame label='Sim'>
+          <g fill='currentColor' transform={WORDMARK_MORPH_TRANSFORM}>
+            {WORDMARK_PATHS.map((d) => (
+              <path key={d} d={d} />
+            ))}
+          </g>
+        </WordmarkFrame>
+
+        <div className='-translate-x-1/2 absolute top-full left-1/2 flex w-max flex-col gap-2 pt-5'>
+          {commands.map((command) => {
+            const Icon = command.icon
+            const shortcuts = Array.isArray(command.shortcut)
+              ? command.shortcut
+              : [command.shortcut]
+            return (
+              <Button
+                key={command.label}
+                type='button'
+                variant='ghost'
+                className='group justify-between gap-[60px] p-0 text-left'
+                onClick={() => handleCommandClick(command.label)}
+              >
+                <span className='flex items-center gap-2'>
+                  <Icon className='size-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]' />
+                  <span className='text-[var(--text-tertiary)] text-sm group-hover:text-[var(--text-primary)]'>
+                    {command.label}
+                  </span>
+                </span>
 
-        {commands.map((command) => {
-          const Icon = command.icon
-          const shortcuts = Array.isArray(command.shortcut) ? command.shortcut : [command.shortcut]
-          return (
-            <div
-              key={command.label}
-              role='button'
-              tabIndex={0}
-              className='group flex cursor-pointer items-center justify-between gap-[60px]'
-              onClick={() => handleCommandClick(command.label)}
-              onKeyDown={(event) =>
-                handleKeyboardActivation(event, () => handleCommandClick(command.label))
-              }
-            >
-              {/* Left side: Icon and Label */}
-              <div className='flex items-center gap-2'>
-                <Icon className='size-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]' />
-                <span className='text-[var(--text-tertiary)] text-sm group-hover:text-[var(--text-primary)]'>
-                  {command.label}
+                <span className='flex items-center gap-1'>
+                  {['⌘', ...shortcuts].map((shortcut) => (
+                    <kbd
+                      key={shortcut}
+                      className={cn(
+                        buttonVariants({ variant: '3d' }),
+                        'group-hover:-translate-y-0.5 w-[26px] py-[3px] font-sans text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
+                      )}
+                    >
+                      {shortcut}
+                    </kbd>
+                  ))}
                 </span>
-              </div>
-
-              {/* Right side: Keyboard Shortcut */}
-              <div className='flex items-center gap-1'>
-                <Button
-                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
-                  variant='3d'
-                >
-                  <span>⌘</span>
-                </Button>
-                {shortcuts.map((shortcut) => (
-                  <Button
-                    key={shortcut}
-                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
-                    variant='3d'
-                  >
-                    {shortcut}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          )
-        })}
+              </Button>
+            )
+          })}
+        </div>
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index 5edb833c3ac..1198a672c08 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -12,10 +12,9 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  Loader,
   OverflowText,
 } from '@sim/emcn'
-import { MoreHorizontal, Pencil, Pin, Plus, SquareArrowUpRight } from '@sim/emcn/icons'
+import { Loader, MoreHorizontal, Pencil, Pin, Plus, SquareArrowUpRight } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
 import type { FlyoutEntry } from '@/app/workspace/[workspaceId]/components/folders'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 50cbf31d42a..bdf04bafeae 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -9,7 +9,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { cn, Library, useNativeSurfaceOcclusionReady } from '@sim/emcn'
+import { cn, useNativeSurfaceOcclusionReady } from '@sim/emcn'
 import {
   Columns3,
   Database,
@@ -22,6 +22,7 @@ import {
   Home,
   Integration,
   Key,
+  Library,
   Pencil,
   Play,
   Plus,
diff --git a/apps/sim/components/ui/wordmark-frame.tsx b/apps/sim/components/ui/wordmark-frame.tsx
new file mode 100644
index 00000000000..139c3b4cba6
--- /dev/null
+++ b/apps/sim/components/ui/wordmark-frame.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode, Ref } from 'react'
+import { cn } from '@sim/emcn'
+import { WORDMARK_FLAT_INK_CLASS } from '@/lib/branding/wordmark'
+
+interface WordmarkFrameProps {
+  children: ReactNode
+  className?: string
+  size?: 'sm' | 'lg'
+  variant?: 'gradient' | 'flat'
+  svgRef?: Ref<SVGSVGElement>
+  label?: string
+}
+
+/** Identical SVG viewport and canvas alignment for the resting and animated wordmarks. */
+export function WordmarkFrame({
+  children,
+  className,
+  size = 'sm',
+  variant = 'flat',
+  svgRef,
+  label,
+}: WordmarkFrameProps) {
+  return (
+    <div
+      className={cn(
+        'relative mx-auto aspect-[5/3] shrink-0',
+        size === 'sm' ? 'w-[108px]' : 'w-[clamp(180px,17vw,320px)]',
+        className
+      )}
+    >
+      <svg
+        ref={svgRef}
+        viewBox='0 0 100 100'
+        role={label ? 'img' : undefined}
+        aria-label={label}
+        aria-hidden={label ? undefined : true}
+        className={cn(
+          '-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible',
+          variant === 'flat' && WORDMARK_FLAT_INK_CLASS
+        )}
+      >
+        {children}
+      </svg>
+    </div>
+  )
+}
diff --git a/apps/sim/components/ui/wordmark-morph.tsx b/apps/sim/components/ui/wordmark-morph.tsx
index 42950a06d3c..0ebd116eb1d 100644
--- a/apps/sim/components/ui/wordmark-morph.tsx
+++ b/apps/sim/components/ui/wordmark-morph.tsx
@@ -1,8 +1,12 @@
 'use client'
 
 import { useEffect, useId, useRef } from 'react'
-import { cn } from '@sim/emcn'
-import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
+import { WordmarkFrame } from '@/components/ui/wordmark-frame'
+import {
+  WORDMARK_MORPH_TRANSFORM,
+  WORDMARK_PATHS,
+  WORDMARK_VIEW_BOX,
+} from '@/lib/branding/wordmark'
 
 /** Theme-aware ink shared by the wordmark and every shape in its animation. */
 const INK_STOPS = {
@@ -10,9 +14,6 @@ const INK_STOPS = {
   outer: '[stop-color:var(--thinking-ink-outer)]',
 } as const
 
-/** Brand palette: Static on light backgrounds, Graphite on dark backgrounds. */
-const FLAT_INK = '[color:#e6e6e6] dark:[color:#3b3b3b]'
-
 /**
  * The seven thinking-loader shapes in play order, each with its hold in ms.
  * Order, holds, and every timing constant below are the master's - the
@@ -329,15 +330,6 @@ function sampleTrack(track: Track, at: number): Sample {
   return { x, y, opacity }
 }
 
-/**
- * The wordmark's width inside the 100-unit stage - the generator's 816×392
- * mark at 0.11164, so the word sits at the same size relative to the orb.
- */
-const WORDMARK_WIDTH = 91.1
-const WORDMARK_SCALE = WORDMARK_WIDTH / WORDMARK_VIEW_BOX.width
-const WORDMARK_HEIGHT = WORDMARK_VIEW_BOX.height * WORDMARK_SCALE
-const WORDMARK_X = (100 - WORDMARK_WIDTH) / 2
-const WORDMARK_Y = (100 - WORDMARK_HEIGHT) / 2
 const WORDMARK_CX = WORDMARK_VIEW_BOX.width / 2
 const WORDMARK_CY = WORDMARK_VIEW_BOX.height / 2
 
@@ -529,127 +521,106 @@ export function WordmarkMorph({
   }, [])
 
   return (
-    <div
-      className={cn(
-        'relative mx-auto aspect-[5/3] shrink-0',
-        size === 'sm' ? 'w-[108px]' : 'w-[clamp(180px,17vw,320px)]',
-        className
-      )}
-    >
-      <svg
-        ref={svgRef}
-        viewBox='0 0 100 100'
-        aria-hidden='true'
-        className={cn(
-          '-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible',
-          variant === 'flat' && FLAT_INK
+    <WordmarkFrame className={className} size={size} variant={variant} svgRef={svgRef}>
+      <defs>
+        <filter
+          id={gooId}
+          x='-30%'
+          y='-30%'
+          width='160%'
+          height='160%'
+          colorInterpolationFilters='sRGB'
+        >
+          <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={0} result='blur' />
+          {/** The alpha threshold joins nearby shapes during the liquid morph. */}
+          <feColorMatrix
+            data-goo-matrix=''
+            in='blur'
+            values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0'
+            result='goo'
+          />
+        </filter>
+        {variant === 'gradient' && (
+          <>
+            <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
+              <stop className={INK_STOPS.inner} />
+              <stop offset='1' className={INK_STOPS.outer} />
+            </radialGradient>
+            <radialGradient
+              id={wordmarkInkId}
+              cx='0'
+              cy='0'
+              r='1'
+              gradientUnits='userSpaceOnUse'
+              gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
+            >
+              <stop className={INK_STOPS.inner} />
+              <stop offset='1' className={INK_STOPS.outer} />
+            </radialGradient>
+          </>
         )}
-      >
-        <defs>
-          <filter
-            id={gooId}
-            x='-30%'
-            y='-30%'
-            width='160%'
-            height='160%'
-            colorInterpolationFilters='sRGB'
-          >
-            <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={0} result='blur' />
-            {/** The alpha threshold joins nearby shapes during the liquid morph. */}
-            <feColorMatrix
-              data-goo-matrix=''
-              in='blur'
-              values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0'
-              result='goo'
-            />
-          </filter>
-          {variant === 'gradient' && (
-            <>
-              <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
-                <stop className={INK_STOPS.inner} />
-                <stop offset='1' className={INK_STOPS.outer} />
-              </radialGradient>
-              <radialGradient
-                id={wordmarkInkId}
-                cx='0'
-                cy='0'
-                r='1'
-                gradientUnits='userSpaceOnUse'
-                gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
-              >
-                <stop className={INK_STOPS.inner} />
-                <stop offset='1' className={INK_STOPS.outer} />
-              </radialGradient>
-            </>
-          )}
-          <clipPath id={clipId}>
-            <rect width='100' height='100' />
-          </clipPath>
-          <clipPath id={windowId}>
-            <rect x='12.5' y='12.5' width='75' height='75' />
-          </clipPath>
-        </defs>
-
-        <g filter={`url(#${gooId})`} fill={shapeInk} stroke={shapeInk} strokeWidth={0}>
-          <g data-stage='metaballs' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle data-anim='metaballsA' cx='22' cy='50' r='16' />
-            <circle data-anim='metaballsB' cx='78' cy='50' r='16' />
-          </g>
-          <g data-stage='relay' opacity={0} clipPath={`url(#${clipId})`}>
-            <rect x='13' y='28' width='16' height='44' />
-            <rect x='71' y='28' width='16' height='44' />
-            <circle data-anim='relayBall' cx='21' cy='50' r='14' />
-          </g>
-          <g data-stage='compass' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle cx='50' cy='23' r='14' />
-            <circle cx='23' cy='50' r='14' />
-            <circle cx='77' cy='50' r='14' />
-            <circle cx='50' cy='77' r='14' />
-            <circle data-anim='compassMover' cx='50' cy='23' r='14' />
-          </g>
-          <g data-stage='corners' opacity={0} clipPath={`url(#${clipId})`}>
-            <rect x='27' y='27' width='46' height='46' />
-            <circle data-anim='cornersA' cx='27' cy='27' r='14' />
-            <circle data-anim='cornersB' cx='73' cy='27' r='14' />
-            <circle data-anim='cornersC' cx='73' cy='73' r='14' />
-            <circle data-anim='cornersD' cx='27' cy='73' r='14' />
-          </g>
-          <g data-stage='burst' opacity={0} clipPath={`url(#${windowId})`}>
-            <rect x='12.5' y='43.75' width='75' height='12.5' />
-            <rect x='43.75' y='12.5' width='12.5' height='75' />
-            <circle cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstUp' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstDown' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstLeft' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstRight' cx='50' cy='50' r='12.5' />
-          </g>
-          <g data-stage='squeeze' opacity={0} clipPath={`url(#${clipId})`}>
-            <path d='M 21.36 37.5 A 31.25 31.25 0 0 1 78.64 37.5' fill='none' strokeWidth='12.5' />
-            <path d='M 21.36 62.5 A 31.25 31.25 0 0 0 78.64 62.5' fill='none' strokeWidth='12.5' />
-            <rect data-anim='squeezeBarL' x='15' y='37.5' width='12.5' height='25' />
-            <rect data-anim='squeezeBarR' x='72.5' y='37.5' width='12.5' height='25' />
-          </g>
-          <g data-stage='thinking' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle cx='50' cy='50' r='15' />
-            <circle data-anim='thinkA' cx='50' cy='50' r='12' />
-            <circle data-anim='thinkB' cx='50' cy='50' r='12' />
-            <circle data-anim='thinkC' cx='50' cy='50' r='11' />
-          </g>
-          <g data-stage='orb' opacity={0}>
-            <circle cx='50' cy='50' r='42' />
-          </g>
-          <g
-            data-stage='wm'
-            opacity={1}
-            fill={wordmarkInk}
-            transform={`translate(${round(WORDMARK_X)} ${round(WORDMARK_Y)}) scale(${WORDMARK_SCALE.toFixed(5)})`}
-          >
-            {WORDMARK_PATHS.map((d) => (
-              <path key={d} d={d} />
-            ))}
-          </g>
+        <clipPath id={clipId}>
+          <rect width='100' height='100' />
+        </clipPath>
+        <clipPath id={windowId}>
+          <rect x='12.5' y='12.5' width='75' height='75' />
+        </clipPath>
+      </defs>
+
+      <g filter={`url(#${gooId})`} fill={shapeInk} stroke={shapeInk} strokeWidth={0}>
+        <g data-stage='metaballs' opacity={0} clipPath={`url(#${clipId})`}>
+          <circle data-anim='metaballsA' cx='22' cy='50' r='16' />
+          <circle data-anim='metaballsB' cx='78' cy='50' r='16' />
+        </g>
+        <g data-stage='relay' opacity={0} clipPath={`url(#${clipId})`}>
+          <rect x='13' y='28' width='16' height='44' />
+          <rect x='71' y='28' width='16' height='44' />
+          <circle data-anim='relayBall' cx='21' cy='50' r='14' />
+        </g>
+        <g data-stage='compass' opacity={0} clipPath={`url(#${clipId})`}>
+          <circle cx='50' cy='23' r='14' />
+          <circle cx='23' cy='50' r='14' />
+          <circle cx='77' cy='50' r='14' />
+          <circle cx='50' cy='77' r='14' />
+          <circle data-anim='compassMover' cx='50' cy='23' r='14' />
+        </g>
+        <g data-stage='corners' opacity={0} clipPath={`url(#${clipId})`}>
+          <rect x='27' y='27' width='46' height='46' />
+          <circle data-anim='cornersA' cx='27' cy='27' r='14' />
+          <circle data-anim='cornersB' cx='73' cy='27' r='14' />
+          <circle data-anim='cornersC' cx='73' cy='73' r='14' />
+          <circle data-anim='cornersD' cx='27' cy='73' r='14' />
+        </g>
+        <g data-stage='burst' opacity={0} clipPath={`url(#${windowId})`}>
+          <rect x='12.5' y='43.75' width='75' height='12.5' />
+          <rect x='43.75' y='12.5' width='12.5' height='75' />
+          <circle cx='50' cy='50' r='12.5' />
+          <circle data-anim='burstUp' cx='50' cy='50' r='12.5' />
+          <circle data-anim='burstDown' cx='50' cy='50' r='12.5' />
+          <circle data-anim='burstLeft' cx='50' cy='50' r='12.5' />
+          <circle data-anim='burstRight' cx='50' cy='50' r='12.5' />
+        </g>
+        <g data-stage='squeeze' opacity={0} clipPath={`url(#${clipId})`}>
+          <path d='M 21.36 37.5 A 31.25 31.25 0 0 1 78.64 37.5' fill='none' strokeWidth='12.5' />
+          <path d='M 21.36 62.5 A 31.25 31.25 0 0 0 78.64 62.5' fill='none' strokeWidth='12.5' />
+          <rect data-anim='squeezeBarL' x='15' y='37.5' width='12.5' height='25' />
+          <rect data-anim='squeezeBarR' x='72.5' y='37.5' width='12.5' height='25' />
+        </g>
+        <g data-stage='thinking' opacity={0} clipPath={`url(#${clipId})`}>
+          <circle cx='50' cy='50' r='15' />
+          <circle data-anim='thinkA' cx='50' cy='50' r='12' />
+          <circle data-anim='thinkB' cx='50' cy='50' r='12' />
+          <circle data-anim='thinkC' cx='50' cy='50' r='11' />
+        </g>
+        <g data-stage='orb' opacity={0}>
+          <circle cx='50' cy='50' r='42' />
+        </g>
+        <g data-stage='wm' opacity={1} fill={wordmarkInk} transform={WORDMARK_MORPH_TRANSFORM}>
+          {WORDMARK_PATHS.map((d) => (
+            <path key={d} d={d} />
+          ))}
         </g>
-      </svg>
-    </div>
+      </g>
+    </WordmarkFrame>
   )
 }
diff --git a/apps/sim/lib/branding/wordmark.ts b/apps/sim/lib/branding/wordmark.ts
index a02bf9cb782..823fca10492 100644
--- a/apps/sim/lib/branding/wordmark.ts
+++ b/apps/sim/lib/branding/wordmark.ts
@@ -9,6 +9,16 @@
  */
 export const WORDMARK_VIEW_BOX = { width: 441, height: 212 } as const
 
+/** Brand palette: Static on light backgrounds, Graphite on dark backgrounds. */
+export const WORDMARK_FLAT_INK_CLASS = '[color:#e6e6e6] dark:[color:#3b3b3b]'
+
+/** Resting mark geometry within the morph's 100-unit stage. */
+const WORDMARK_MORPH_WIDTH = 91.1
+const WORDMARK_MORPH_SCALE = WORDMARK_MORPH_WIDTH / WORDMARK_VIEW_BOX.width
+
+/** Shared resting position, preserving the animation's coordinate precision. */
+export const WORDMARK_MORPH_TRANSFORM = `translate(${((100 - WORDMARK_MORPH_WIDTH) / 2).toFixed(3)} ${((100 - WORDMARK_VIEW_BOX.height * WORDMARK_MORPH_SCALE) / 2).toFixed(3)}) scale(${WORDMARK_MORPH_SCALE.toFixed(5)})`
+
 /** Glyph outlines, drawn in `WORDMARK_VIEW_BOX` coordinates. */
 export const WORDMARK_PATHS: readonly string[] = [
   'M0 160.9H29.51C29.51 169.08 32.46 175.61 38.37 180.48C44.27 185.12 52.25 187.44 62.31 187.44C73.24 187.44 81.65 185.34 87.56 181.14C93.46 176.71 96.41 170.85 96.41 163.55C96.41 158.24 94.77 153.82 91.49 150.28C88.43 146.74 82.75 143.86 74.44 141.65L46.24 135.01C32.03 131.47 21.42 126.05 14.43 118.75C7.65 111.45 4.26 101.83 4.26 89.88C4.26 79.93 6.78 71.3 11.81 64C17.05 56.7 24.16 51.06 33.12 47.08C42.3 43.09 52.8 41.1 64.6 41.1C76.41 41.1 86.57 43.2 95.1 47.41C103.84 51.61 110.62 57.47 115.43 64.99C120.46 72.52 123.08 81.48 123.3 91.87H93.79C93.57 83.47 90.84 76.94 85.59 72.3C80.34 67.65 73.02 65.33 63.62 65.33C54 65.33 46.57 67.43 41.32 71.63C36.07 75.83 33.45 81.59 33.45 88.89C33.45 99.73 41.32 107.14 57.06 111.12L85.26 118.09C98.81 121.19 108.98 126.28 115.76 133.35C122.53 140.21 125.92 149.61 125.92 161.56C125.92 171.74 123.19 180.7 117.73 188.44C112.26 195.96 104.72 201.82 95.1 206.03C85.7 210.01 74.55 212 61.65 212C42.85 212 27.87 207.35 16.72 198.06C5.57 188.77 0 176.38 0 160.9Z',
diff --git a/packages/emcn/src/icons/loader.tsx b/packages/emcn/src/icons/loader.tsx
index 25b6c754125..d4028db9232 100644
--- a/packages/emcn/src/icons/loader.tsx
+++ b/packages/emcn/src/icons/loader.tsx
@@ -28,8 +28,8 @@ export function Loader({ animate = false, className, ...props }: LoaderProps) {
       aria-hidden='true'
       {...props}
     >
-      <circle cx='12' cy='12' r='9.5' stroke='currentColor' strokeWidth='4' opacity='.25' />
-      <circle cx='12' cy='2.5' r='2' fill='currentColor' />
+      <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' opacity='.25' />
+      <circle cx='12' cy='2' r='2' fill='currentColor' />
     </svg>
   )
 }

From 6a94595f7e64b8ced2ba7f5b0de56e3887a072bd Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Fri, 11 Sep 2026 10:50:58 -0700
Subject: [PATCH 8/9] fix(ui): preserve provider-free workflow links

---
 .../w/[workflowId]/components/panel/panel.tsx |  4 +--
 .../components/folder-item/folder-item.tsx    |  4 +--
 .../sidebar/hooks/use-workflow-operations.ts  |  4 +--
 .../w/components/workflow-navigation/index.ts |  1 +
 .../workflow-navigation-provider.tsx          |  6 +++-
 .../workflow-navigation.test.tsx              | 28 +++++++++++--------
 .../w/hooks/use-delete-selection.ts           |  4 +--
 .../w/hooks/use-delete-workflow.ts            |  4 +--
 .../w/hooks/use-duplicate-selection.ts        |  4 +--
 .../w/hooks/use-duplicate-workflow.ts         |  4 +--
 .../w/hooks/use-import-workflow.ts            |  4 +--
 11 files changed, 39 insertions(+), 28 deletions(-)

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 4625307c9e6..60c2ff6c10d 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
@@ -70,7 +70,7 @@ import { useAutoLayout } from '@/app/workspace/[workspaceId]/w/[workflowId]/hook
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import { getWorkflowLockToggleIds } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
-import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useDeleteWorkflow, useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
 import { useCopilotChatSelection } from '@/hooks/queries/copilot-chat-selection'
 import {
@@ -133,7 +133,7 @@ function copilotDraftKey(
  * @returns Panel on the right side of the workflow
  */
 export const Panel = memo(function Panel() {
-  const navigateToWorkflow = useWorkflowNavigation()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const routeWorkflowId = params.workflowId as string | undefined
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index d07eb6497bf..1c48f819f20 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -29,7 +29,7 @@ import {
   buildDragResources,
   createSidebarDragGhost,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
-import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import {
   useCanDelete,
   useDeleteFolder,
@@ -69,7 +69,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
     onItemDragStart,
     onItemDragEnd,
   } = useSidebarListContext()
-  const navigateToWorkflow = useWorkflowNavigation()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const updateFolderMutation = useUpdateFolder()
   const createWorkflowMutation = useCreateWorkflow()
   const createWorkflowMutate = createWorkflowMutation.mutate
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
index a0bb6afe025..de08036fac8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { generateId } from '@sim/utils/id'
-import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useCreateWorkflow, useWorkflowMap } from '@/hooks/queries/workflows'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -11,7 +11,7 @@ interface UseWorkflowOperationsProps {
 }
 
 export function useWorkflowOperations({ workspaceId }: UseWorkflowOperationsProps) {
-  const navigateToWorkflow = useWorkflowNavigation()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const { data: workflows = {}, isLoading: workflowsLoading } = useWorkflowMap(workspaceId)
   const createWorkflowMutation = useCreateWorkflow()
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts
index be284d5fab8..e36dbd64a61 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts
@@ -1,6 +1,7 @@
 export { WorkflowLoadingOverlay } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay'
 export { WorkflowNavigationLink } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link'
 export {
+  useNavigateToWorkflow,
   useWorkflowNavigation,
   WorkflowNavigationProvider,
 } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
index 3b563369799..65878b1cd6e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
@@ -62,7 +62,11 @@ export function WorkflowNavigationProvider({ children }: WorkflowNavigationProvi
 }
 
 export function useWorkflowNavigation() {
-  const navigate = useContext(NavigateContext)
+  return useContext(NavigateContext)
+}
+
+export function useNavigateToWorkflow() {
+  const navigate = useWorkflowNavigation()
   const router = useRouter()
   const fallback = useCallback<NavigateToWorkflow>(
     (href, options) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx
index 814f928033a..51059c4e83b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx
@@ -4,6 +4,7 @@ import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtim
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
+  useNavigateToWorkflow,
   WorkflowLoadingOverlay,
   WorkflowNavigationLink,
   WorkflowNavigationProvider,
@@ -38,6 +39,15 @@ const PATH_A = '/workspace/workspace-1/w/workflow-a'
 const PATH_B = '/workspace/workspace-1/w/workflow-b'
 const PATH_C = '/workspace/workspace-1/w/workflow-c'
 
+function FallbackNavigation() {
+  const navigate = useNavigateToWorkflow()
+  return (
+    <button type='button' onClick={() => navigate(PATH_B, { replace: true, scroll: false })}>
+      Replace workflow
+    </button>
+  )
+}
+
 interface PendingRoute {
   ready: boolean
   promise: Promise<void>
@@ -82,7 +92,11 @@ describe('workflow navigation feedback', () => {
     )
   }
 
-  function Harness({ embedded = false }: { embedded?: boolean }) {
+  interface HarnessProps {
+    embedded?: boolean
+  }
+
+  function Harness({ embedded = false }: HarnessProps) {
     const [path, setPath] = useState(PATH_A)
     const [, forceRender] = useState(0)
     updatePath = setPath
@@ -164,16 +178,8 @@ describe('workflow navigation feedback', () => {
 
   it('preserves replace navigation outside the workflow provider', () => {
     router.replace.mockImplementation(() => undefined)
-    act(() =>
-      root.render(
-        <RouterContext.Provider value={router}>
-          <WorkflowNavigationLink href={PATH_B} replace scroll={false}>
-            Replace workflow
-          </WorkflowNavigationLink>
-        </RouterContext.Provider>
-      )
-    )
-    click('Replace workflow')
+    act(() => root.render(<FallbackNavigation />))
+    act(() => container.querySelector('button')?.click())
     expect(router.replace).toHaveBeenCalledWith(PATH_B, {
       scroll: false,
       transitionTypes: undefined,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
index 28722b7065e..1a068f57413 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useDeleteFolderMutation } from '@/hooks/queries/folders'
 import { useDeleteWorkflowMutation, useWorkflows } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
@@ -45,7 +45,7 @@ export function useDeleteSelection({
   isActiveWorkflow,
   onSuccess,
 }: UseDeleteSelectionProps) {
-  const navigateToWorkflow = useWorkflowNavigation()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const { data: workflowList = [] } = useWorkflows(workspaceId)
   const deleteWorkflowMutation = useDeleteWorkflowMutation()
   const deleteFolderMutation = useDeleteFolderMutation()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-workflow.ts
index 8d9d7830d56..90df911b2ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-workflow.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useDeleteWorkflowMutation, useWorkflows } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
 
@@ -38,7 +38,7 @@ export function useDeleteWorkflow({
   isActive = false,
   onSuccess,
 }: UseDeleteWorkflowProps) {
-  const navigateToWorkflow = useWorkflowNavigation()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const { data: workflowList = [] } = useWorkflows(workspaceId)
   const deleteWorkflowMutation = useDeleteWorkflowMutation()
   const [isDeleting, setIsDeleting] = useState(false)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-selection.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-selection.ts
index 6ab28304881..274b424ec5e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-selection.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-selection.ts
@@ -2,7 +2,7 @@ import { useCallback, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import { getChildFolders, getFolderById } from '@/lib/folders/tree'
-import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useDuplicateFolderMutation } from '@/hooks/queries/folders'
 import { getFolderMap } from '@/hooks/queries/utils/folder-cache'
 import { getWorkflows } from '@/hooks/queries/utils/workflow-cache'
@@ -30,7 +30,7 @@ interface UseDuplicateSelectionProps {
  * @returns Duplicate selection handlers and state
  */
 export function useDuplicateSelection({ workspaceId, onSuccess }: UseDuplicateSelectionProps) {
-  const navigateToWorkflow = useWorkflowNavigation()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const duplicateWorkflowMutation = useDuplicateWorkflowMutation()
   const duplicateFolderMutation = useDuplicateFolderMutation()
   const [isDuplicating, setIsDuplicating] = useState(false)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
index 7a735ff87cc..5d70620fdf7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
-import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { getWorkflows } from '@/hooks/queries/utils/workflow-cache'
 import { useDuplicateWorkflowMutation } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
@@ -26,7 +26,7 @@ interface UseDuplicateWorkflowProps {
  * @returns Duplicate workflow handlers and state
  */
 export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWorkflowProps) {
-  const navigateToWorkflow = useWorkflowNavigation()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const duplicateMutation = useDuplicateWorkflowMutation()
 
   const workspaceIdRef = useRef(workspaceId)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
index 4ce9840c6fd..10b19d939b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
@@ -9,7 +9,7 @@ import {
   persistImportedWorkflow,
   sanitizePathSegment,
 } from '@/lib/workflows/operations/import-export'
-import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useCreateFolder } from '@/hooks/queries/folders'
 import { folderKeys } from '@/hooks/queries/utils/folder-keys'
 import { invalidateWorkflowLists } from '@/hooks/queries/utils/invalidate-workflow-lists'
@@ -33,7 +33,7 @@ interface UseImportWorkflowProps {
  * @returns Import state and handlers
  */
 export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
-  const navigateToWorkflow = useWorkflowNavigation()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const createWorkflowMutation = useCreateWorkflow()
   const queryClient = useQueryClient()
   const createFolderMutation = useCreateFolder()

From 28ac99000dcb0369b5352259a77a31f71f1c0ba7 Mon Sep 17 00:00:00 2001
From: Justin Blumencranz <96924014+j15z@users.noreply.github.com>
Date: Fri, 11 Sep 2026 10:55:43 -0700
Subject: [PATCH 9/9] docs(ui): document workflow navigation hooks

---
 .../workflow-navigation/workflow-navigation-provider.tsx       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
index 65878b1cd6e..15d34cb02cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
@@ -61,10 +61,12 @@ export function WorkflowNavigationProvider({ children }: WorkflowNavigationProvi
   )
 }
 
+/** Returns provider-backed navigation, or null so links outside the provider retain native behavior. */
 export function useWorkflowNavigation() {
   return useContext(NavigateContext)
 }
 
+/** Navigates with immediate workflow feedback, falling back to router push/replace outside the provider. */
 export function useNavigateToWorkflow() {
   const navigate = useWorkflowNavigation()
   const router = useRouter()
@@ -83,6 +85,7 @@ export function useNavigateToWorkflow() {
   return navigate ?? fallback
 }
 
+/** Reports pending workflow navigation within the provider; returns false outside it. */
 export function usePendingWorkflowNavigation() {
   return useContext(PendingNavigationContext)
 }