feat(ui): create trigger source node components for workflow canvas

[geoffjay]

Add TriggerNode custom React Flow node supporting all 14 trigger types with category-coloured styling (external/blue, schedule/violet, event/amber, internal/slate), config summaries, output handles, and selected/disabled states. Export workflowNodeTypes map. 31 tests.

Closes #1097

[geoffjay]

This change is part of the following stack:

• feat(ui): install @xyflow/react and scaffold WorkflowCanvas base component #1107
  • feat(ui): extend TriggerConfig types to match all backend trigger variants #1108
    • feat(ui): create trigger source node components for workflow canvas #1109 ◀
      • feat(ui): create agent node and prompt template edge components #1110
        • feat(ui): implement graph-to-API serialization for workflow canvas save/load #1111
          • feat(ui): build node palette sidebar with drag-and-drop onto workflow canvas #1112
            • feat(ui): add workflow builder page with routing and persistence #1113
              • feat(ui): add read-only workflow visualization with auto-layout #1114

_{Change managed by git-spice.}

[geoffjay]

Review: feat(ui): create trigger source node components for workflow canvas

Stack position: issue-1097 (#1109) stacked on issue-1096 (#1108). Parent #1108 is being reviewed simultaneously and has no blocking issues.

Overview

Adds TriggerNode — a category-coloured React Flow node supporting all 13 trigger types with config summaries, an output handle, and selected/disabled states. Registers it in workflowNodeTypes. 31 tests across all major trigger categories.

What looks good

• Icon and colour maps: TRIGGER_ICONS and CATEGORY_COLOURS are both typed as Record<TriggerType, ...> and Record<TriggerCategory, ...>, respectively. TypeScript enforces completeness on both. The ?? Hand / ?? CATEGORY_COLOURS.internal fallbacks are correct safety nets for runtime unknowns.
• configSummary switch: Covers all 13 variants plus default: return "". The github_issues/github_pull_requests fall-through case sharing is appropriate since both have the same field shape. Labels are shown with overflow truncation (+N) which is good UX for space-constrained node cards.
• filter(Boolean) on className array: Correctly removes the empty string produced by !enabled ? "opacity-50 grayscale" : "" when enabled. Pattern is consistent with AgentNode in the next PR in the stack.
• data-trigger-type attribute: Useful for E2E targeting without coupling to text content. Consistent with AgentNode's data-agent-id.
• Test coverage: 31 tests covering 9 trigger types, selected state, disabled state, and custom label. The composite test regex /AND.0 trigger/ correctly handles the separator via ..

Non-blocking notes

1. "All 14 backend trigger types" in the file doc comment — the count is 13 (same discrepancy flagged in #1108). TRIGGER_ICONS has 13 keys, configSummary has 13 cases.
2. delay and ask_response trigger types have no dedicated tests — the delay variant's new Date(run_at).toLocaleString() and ask_response's category ?? "Any category" paths are untested. Not blocking but worth a follow-up.
3. cron branch returns config.expression || "No expression" — since expression is a required string field on the cron variant (not string | undefined), the fallback is unreachable. Harmless but slightly misleading.

Verdict

Well-structured node component with solid test coverage and exhaustive type handling. LGTM.