feat(ui): create agent node and prompt template edge components

[geoffjay]

Add AgentNode (status-aware borders, tool policy summary, input handle) and PromptEdge (Bezier curve, truncated template preview, poll interval badge, click callback). Register both in workflowNodeTypes/workflowEdgeTypes. 29 tests.

Closes #1098

[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 agent node and prompt template edge components

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

Overview

Adds AgentNode (status-aware borders, tool policy summary, model display, left input handle) and PromptEdge (Bezier curve, truncated template preview, poll interval badge, click callback). Registers both in workflowNodeTypes/workflowEdgeTypes. 29 tests.

What looks good

• toolPolicySummary switch: Covers all 5 ToolPolicy modes with a default: return "Custom policy" fallback. Singular/plural handled correctly for allow_list/deny_list (1 tool allowed vs 3 tools allowed). All 6 cases tested.
• Status border colours: STATUS_BORDER is typed as Record<AgentStatus, string> — TypeScript enforces completeness. The ?? STATUS_BORDER.stopped fallback correctly handles unknown status values at runtime.
• Selected-state priority: When selected, the node uses border-blue-500 ring-2 which overrides the status border class. The logic is clear and intentional.
• PromptEdge truncation: truncateTemplate takes the first line, trims it, and truncates at 40 chars with an ellipsis. The button also sets title={promptTemplate} for full-text hover. Good UX.
• Interval badge pointer-events: none: Prevents the badge div from intercepting clicks intended for the canvas or the label button. Correct.
• EdgeLabelRenderer mock: The test correctly stubs the portal-based renderer to render inline, with a clear comment explaining why. Consistent with how later PRs in the stack handle this.

Non-blocking notes

1. onIntervalChange is declared in PromptEdgeData but never invoked — the interval badge has pointerEvents: "none" and no click handler. The callback is advertised in the interface but has no trigger path in the component. Either wire it up or remove it until needed, to avoid callers assuming it works.
2. label.querySelector("button")! in the click test (line 161) uses a non-null assertion. If the label's DOM structure changes and the button is removed, the test throws TypeError rather than a clear assertion failure. screen.getByRole("button") would give a clearer error message.
3. isCustomised comment says "not purely the default placeholder" but the implementation just checks template.trim().length > 0. There is no placeholder logic — the comment is slightly misleading.

Verdict

Clean, well-tested components. The onIntervalChange gap is worth resolving before callers start passing it expecting it to work, but nothing is blocking merge. LGTM.