Create trigger source node components for the workflow canvas

[geoffjay]

Summary

Create custom React Flow node components for each trigger type family. These nodes are the visual representations of workflow trigger sources on the canvas - users drag them from a palette and configure their properties.

Context

The backend supports 14 trigger types organized into logical families. Each trigger type needs a custom node component that renders its configuration summary and supports selection for property editing. Nodes should be visually distinct by category using icons and color accents.

Implementation Details

1. Base trigger node component

Create ui/src/components/workflows/canvas/nodes/TriggerNode.tsx:

• Common wrapper for all trigger nodes with:
  • Category-specific icon (from lucide-react)
  • Trigger type label
  • Configuration summary (1-2 lines)
  • Output handle (right side) for connecting to agents
  • Visual category accent color
  • Selected/hover states
  • Enabled/disabled visual state

2. Trigger type node variants

Each variant renders trigger-specific config summary inside the base node:

Category	Trigger Type	Icon	Config Summary
External Sources	github_issues	GitPullRequest	owner/repo [labels]
External Sources	github_pull_requests	GitMerge	owner/repo [labels]
External Sources	linear_issues	SquareKanban	team_key / project
External Sources	webhook	Webhook	source: github/linear/any
Schedules	cron	Clock	cron expression
Schedules	delay	Timer	run_at datetime
Events	agent_lifecycle	Activity	event type
Events	agent_idle	Moon	idle_seconds threshold
Events	dispatch_result	CheckCircle	source workflow + status
Events	ask_response	MessageCircle	agent/category filter
Internal	manual	Hand	"Manual trigger"
Internal	queue	ListOrdered	queue_name
Internal	composite	GitFork	mode (AND/OR) + count

3. Node data interface

export interface TriggerNodeData {
  triggerConfig: TriggerConfig;
  label: string;
  category: TriggerCategory;
  enabled: boolean;
  onConfigChange?: (config: TriggerConfig) => void;
}

4. Register custom node types

Export a nodeTypes map for React Flow registration:

export const workflowNodeTypes = {
  trigger: TriggerNode,
  // agent node will be added in a separate issue
} satisfies NodeTypes;

5. Tests

• Render test for each trigger type variant
• Verify correct icon and summary text for each config
• Verify handle placement (output on right)
• Verify selected/disabled visual states

Files to Create

• ui/src/components/workflows/canvas/nodes/TriggerNode.tsx
• ui/src/components/workflows/canvas/nodes/TriggerNode.test.tsx
• ui/src/components/workflows/canvas/nodes/index.ts
• ui/src/components/workflows/canvas/nodeTypes.ts

Acceptance Criteria

• Base TriggerNode component renders with icon, label, summary, and output handle
• All 14 trigger types have appropriate visual representation
• Nodes are categorized (External, Schedules, Events, Internal) with distinct accent colors
• Configuration summary shows the most important fields for each trigger type
• Selected and disabled states render correctly
• Node types map is exported for React Flow registration
• Tests cover all trigger type variants

Blocked By

• Install React Flow and scaffold WorkflowCanvas base component #1095 (React Flow canvas base must exist for node type registration)
• Extend frontend TriggerConfig types to match all backend trigger variants #1096 (TriggerConfig types must be extended for all variants)

Stack Base

Stack on: feature/autonomous-pipeline after #1095 and #1096 merge.
Branch off whichever merges last, or off feature/autonomous-pipeline once both are merged.