Build node palette sidebar with drag-and-drop onto workflow canvas

[geoffjay]

Summary

Create a collapsible sidebar panel that lists all available trigger types and agents as draggable items. Users drag items from the palette onto the React Flow canvas to add new nodes to their workflow composition.

Context

The node palette is the primary mechanism for adding nodes to the workflow canvas. It replaces the dropdown-based trigger type selection in the current WorkflowForm. The palette should be categorized, searchable, and support native HTML5 drag-and-drop to integrate with React Flow's onDrop / onDragOver handlers.

Implementation Details

1. Node palette component

Create ui/src/components/workflows/canvas/NodePalette.tsx:

• Collapsible sidebar panel (left side of canvas)
• Two main sections:
  • Trigger Sources - categorized list of trigger types
  • Agents - list of available agents from the API

Trigger Sources Section

Organized by category using the getTriggerCategory() helper from #1096:

External Sources
  - GitHub Issues
  - GitHub Pull Requests
  - Linear Issues
  - Webhook

Schedules
  - Cron Schedule
  - One-time Delay

Events
  - Agent Lifecycle
  - Agent Idle
  - Dispatch Result
  - Ask Response

Internal
  - Manual Trigger
  - Queue
  - Composite

Each item shows:

• Category-specific icon (matching trigger node icons from Create trigger source node components for the workflow canvas #1097)
• Human-readable label
• Brief description tooltip

Agents Section

• List of agents fetched via useAgents() hook
• Each item shows: agent name, status badge, model
• Only running agents are draggable (others shown grayed out with tooltip)

2. Drag-and-drop implementation

• Each palette item has draggable="true" and onDragStart handler
• onDragStart sets transfer data: { type: "trigger" | "agent", triggerType?: TriggerType, agentId?: string }
• Canvas onDragOver handler: event.preventDefault() + event.dataTransfer.dropEffect = "move"
• Canvas onDrop handler:
  • Parse transfer data
  • Calculate drop position using reactFlowInstance.screenToFlowPosition()
  • Create new node at drop position with default configuration
  • For triggers: use getDefaultTriggerConfig() from Extend frontend TriggerConfig types to match all backend trigger variants #1096
  • For agents: populate from agent data via useAgents()

3. Search/filter

• Search input at top of palette filters both triggers and agents
• Matches on name, category, and description
• Empty state message when no results

4. Responsive behavior

• Palette collapses to icon-only on narrow viewports
• Toggle button to expand/collapse
• Keyboard shortcut to toggle (consistent with existing sidebar pattern)

5. Tests

• Palette renders all trigger categories and agent list
• Drag start sets correct transfer data
• Search filters items correctly
• Disabled agents are not draggable
• Collapse/expand toggle works

Files to Create

• ui/src/components/workflows/canvas/NodePalette.tsx
• ui/src/components/workflows/canvas/NodePalette.test.tsx
• Update ui/src/components/workflows/canvas/index.ts exports

Acceptance Criteria

• Sidebar palette renders categorized trigger types with icons and labels
• Agents section shows available agents with status badges
• Items are draggable onto the canvas via HTML5 drag-and-drop
• Drop creates new node at correct canvas position with default config
• Only running agents are draggable (others grayed out)
• Search input filters triggers and agents
• Palette is collapsible with toggle button
• Styling matches existing theme system
• Tests cover drag, search, and collapse interactions

Blocked By

• Create trigger source node components for the workflow canvas #1097 (trigger node components must exist so dropped triggers render correctly)
• Create agent node and prompt template edge components #1098 (agent node component must exist so dropped agents render correctly)

Stack Base

Stack on: feature/autonomous-pipeline after #1097 and #1098 merge.

[geoffjay]

✅ Triage Complete

Field	Value
Type	enhancement
Complexity	large
Milestone	v0.14.0 - Visual Workflow Builder
Labels	enhancement, ui, frontend, complexity:large

No duplicates found. All related issues (#1094–#1098, #1100–#1102) are part of the same epic but cover distinct scope.

Complexity rationale: 3 files to create/update (NodePalette.tsx, NodePalette.test.tsx, index.ts), substantial component with multiple distinct features: categorized trigger listing (13 trigger types across 4 categories), agents section with live API data from useAgents(), HTML5 drag-and-drop wiring to React Flow's onDrop/onDragOver, search/filter, responsive collapse, and keyboard shortcut. Well over 200 lines. Consistent with the complexity:large pattern established for all canvas-related frontend issues in this milestone.

Milestone confirmed: Already assigned to v0.14.0 - Visual Workflow Builder — correct fit.

Blocked by: #1097 (trigger node components) and #1098 (agent node component) must merge before work can begin.

No clarifying questions needed — acceptance criteria are clear, drag-and-drop data contract is specified, and trigger category taxonomy is fully enumerated.

[geoffjay]

Implemented in PR #1112. NodePalette sidebar with all 13 trigger types grouped by category, agent list with running/stopped states, search filter, and HTML5 drag-and-drop.