Create agent node and prompt template edge components

[geoffjay]

Summary

Create the agent node component and custom edge component for the workflow canvas. Agent nodes are the target of workflow connections - they represent which agent executes the triggered work. Edges between trigger nodes and agent nodes carry the prompt template configuration.

Context

In the visual workflow model, each workflow is represented as a trigger node connected to an agent node via an edge. The edge is not just a visual connector - it carries the prompt template that defines what message the agent receives when the trigger fires. This mirrors the backend WorkflowConfig which binds a TriggerConfig to an agent_id with a prompt_template.

Implementation Details

1. Agent node component

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

• Displays agent information:
  • Agent name (primary text)
  • Status badge (running/stopped/pending/failed) using existing AgentStatusBadge
  • Model name (e.g., "claude-sonnet-4-20250514")
  • Tool policy summary (e.g., "Allow all", "3 tools allowed")
• Input handle on the left side (receives connections from triggers)
• Visual styling:
  • Distinct from trigger nodes (different shape/border treatment)
  • Status-aware coloring (green border for running, red for failed, etc.)
  • Agent icon from lucide-react (Bot)

export interface AgentNodeData {
  agentId: string;
  name: string;
  status: AgentStatus;
  model?: string;
  toolPolicy: ToolPolicy;
  onAgentChange?: (agentId: string) => void;
}

2. Prompt template edge component

Create ui/src/components/workflows/canvas/edges/PromptEdge.tsx:

• Custom React Flow edge that visualizes the prompt template binding:
  • Renders as a styled Bezier curve (using React Flow's getBezierPath)
  • Edge label shows truncated prompt template preview (first 40 chars)
  • Click/double-click opens the existing PromptTemplateEditor in a side panel or modal
  • Visual indicator when prompt is empty/default vs. customized
  • Poll interval display as a small badge on the edge

export interface PromptEdgeData {
  promptTemplate: string;
  pollIntervalSecs: number;
  enabled: boolean;
  onPromptChange?: (template: string) => void;
  onIntervalChange?: (secs: number) => void;
}

3. Register node and edge types

Update ui/src/components/workflows/canvas/nodeTypes.ts:

export const workflowNodeTypes = {
  trigger: TriggerNode,
  agent: AgentNode,
} satisfies NodeTypes;

export const workflowEdgeTypes = {
  prompt: PromptEdge,
} satisfies EdgeTypes;

4. Tests

• Agent node renders with name, status badge, model, and tool policy
• Agent node shows correct status colors
• Prompt edge renders with truncated template preview
• Edge click triggers prompt editor callback
• Edge visual state changes for empty vs. customized prompts

Files to Create/Modify

• ui/src/components/workflows/canvas/nodes/AgentNode.tsx - new
• ui/src/components/workflows/canvas/nodes/AgentNode.test.tsx - new
• ui/src/components/workflows/canvas/edges/PromptEdge.tsx - new
• ui/src/components/workflows/canvas/edges/PromptEdge.test.tsx - new
• ui/src/components/workflows/canvas/edges/index.ts - new barrel
• ui/src/components/workflows/canvas/nodeTypes.ts - update with agent + edge types
• ui/src/components/workflows/canvas/nodes/index.ts - update exports

Acceptance Criteria

• Agent node displays name, status badge, model, and tool policy summary
• Agent node has input handle on the left for incoming connections
• Agent node styling reflects agent status (running = green, failed = red, etc.)
• Prompt edge renders as styled Bezier curve with template preview label
• Edge click triggers callback to open prompt template editor
• Edge shows poll interval badge
• Empty/default prompts are visually distinct from customized ones
• Both node and edge types registered in shared workflowNodeTypes/workflowEdgeTypes
• Tests cover rendering and interaction for both components

Blocked By

• Install React Flow and scaffold WorkflowCanvas base component #1095 (React Flow canvas base must exist for node/edge type registration)

Stack Base

Stack on: feature/autonomous-pipeline after #1095 merges.

[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–#1097, #1099–#1102) are part of the same epic but cover distinct scope.

Complexity rationale: 7 files to create/modify (AgentNode.tsx, AgentNode.test.tsx, PromptEdge.tsx, PromptEdge.test.tsx, edges/index.ts, nodeTypes.ts, nodes/index.ts). Two new visual components with distinct requirements: a status-aware agent node (with coloured border, status badge, tool policy summary, input handle) and a custom Bezier edge with interactive prompt template preview, click-to-edit callback, poll interval badge, and empty/customised visual distinction. Consistent with the complexity:large pattern for all canvas component issues in this milestone.

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

Blocked by: #1095 (React Flow canvas base must exist for node/edge type registration).

No clarifying questions needed — AgentNodeData and PromptEdgeData interfaces are fully specified, visual behaviour is described, and acceptance criteria are comprehensive.