fix(workflows): apply semantic colors to native triggers

Author: andresdjasso

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx

@@ -21,7 +21,7 @@ import {
   Info,
 } from '@sim/emcn'
 import { ChevronDown, Search } from '@sim/emcn/icons'
-import { WorkflowTypeIcon } from '@sim/workflow-renderer'
+import { hasWorkflowTypeRole, WorkflowTypeIcon } from '@sim/workflow-renderer'
 import clsx from 'clsx'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
@@ -210,6 +210,7 @@ function getTriggers(overlayVersion: number): BlockItem[] {
       config: trigger,
       icon: trigger.icon,
       bgColor: trigger.bgColor,
+      workflowType: hasWorkflowTypeRole(trigger.type) ? trigger.type : undefined,
       docsLink: trigger.docsLink,
     }))
   }
@@ -273,6 +274,7 @@ function ensureBlockCaches() {
     config: block,
     icon: block.icon,
     bgColor: block.bgColor,
+    workflowType: hasWorkflowTypeRole(block.type) ? block.type : undefined,
   }))
 
   regularBlockItems.sort((a, b) => a.name.localeCompare(b.name))

apps/sim/lib/workflows/blocks/workflow-block-view-interaction.test.tsx

@@ -5,6 +5,7 @@ import { act } from 'react'
 import {
   getWorkflowTypeAccent,
   getWorkflowTypeRole,
+  hasWorkflowTypeRole,
   WorkflowBlockView,
   WorkflowTypeIcon,
   WorkflowTypeTag,
@@ -189,6 +190,12 @@ describe('WorkflowTypeTag colors', () => {
     expect(getWorkflowTypeRole('a2a')).toBe('neutral')
     expect(getWorkflowTypeRole('image_generator_v2')).toBe('generative')
     expect(getWorkflowTypeRole('knowledge')).toBe('knowledge')
+    expect(getWorkflowTypeRole('start_trigger')).toBe('flow')
+    expect(getWorkflowTypeRole('schedule')).toBe('flow')
+    expect(getWorkflowTypeRole('generic_webhook')).toBe('interface')
+    expect(getWorkflowTypeRole('imap')).toBe('interface')
+    expect(getWorkflowTypeRole('rss')).toBe('knowledge')
+    expect(getWorkflowTypeRole('sim_workspace_event')).toBe('interface')
 
     expect(getWorkflowTypeAccent('agent')).toEqual({ variant: 'workflow', tone: 'inverse' })
     expect(getWorkflowTypeAccent('api')).toEqual({ variant: 'workflow', tone: 'blue' })
@@ -203,6 +210,15 @@ describe('WorkflowTypeTag colors', () => {
     expect(getWorkflowTypeAccent('knowledge')).toEqual({ variant: 'workflow', tone: 'content' })
   })
 
+  it('distinguishes semantic workflow types from branded providers', () => {
+    expect(hasWorkflowTypeRole('start_trigger')).toBe(true)
+    expect(hasWorkflowTypeRole('schedule')).toBe(true)
+    expect(hasWorkflowTypeRole('generic_webhook')).toBe(true)
+    expect(hasWorkflowTypeRole('table')).toBe(true)
+    expect(hasWorkflowTypeRole('circleback')).toBe(false)
+    expect(hasWorkflowTypeRole('airtable')).toBe(false)
+  })
+
   it('renders compact workflow icons with their canonical fill and ink', () => {
     const host = document.createElement('div')
     document.body.appendChild(host)

packages/workflow-renderer/src/index.ts

@@ -44,6 +44,7 @@ export {
   getNearestBranchCursorHandleId,
   getWorkflowTypeAccent,
   getWorkflowTypeRole,
+  hasWorkflowTypeRole,
   WorkflowBlockView,
   type WorkflowBlockViewProps,
   WorkflowTypeIcon,

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

@@ -126,10 +126,12 @@ const WORKFLOW_TYPE_ROLES = {
   file_v4: 'knowledge',
   file_v5: 'knowledge',
   function: 'logic',
+  generic_webhook: 'interface',
   guardrails: 'logic',
   human_in_the_loop: 'state',
   image_generator: 'generative',
   image_generator_v2: 'generative',
+  imap: 'interface',
   knowledge: 'knowledge',
   logs: 'records',
   logs_v2: 'records',
@@ -143,7 +145,11 @@ const WORKFLOW_TYPE_ROLES = {
   response: 'interface',
   router: 'flow',
   router_v2: 'flow',
+  rss: 'knowledge',
+  schedule: 'flow',
   search: 'knowledge',
+  sim_workspace_event: 'interface',
+  start_trigger: 'flow',
   starter: 'neutral',
   stt: 'generative',
   stt_v2: 'generative',
@@ -166,6 +172,9 @@ const WORKFLOW_TYPE_ROLES = {
 
 const DEFAULT_WORKFLOW_TYPE_ROLE: WorkflowTypeRole = 'neutral'
 
+export const hasWorkflowTypeRole = (type: string): type is keyof typeof WORKFLOW_TYPE_ROLES =>
+  Object.hasOwn(WORKFLOW_TYPE_ROLES, type)
+
 export const getWorkflowTypeRole = (type: string): WorkflowTypeRole =>
   WORKFLOW_TYPE_ROLES[type as keyof typeof WORKFLOW_TYPE_ROLES] ?? DEFAULT_WORKFLOW_TYPE_ROLE