-
-
Input
- {/* First, because it is the context everything below is read
- against: every incoming edge delivers, so "what am I even given?"
- has to be answerable before the assembled prompt underneath means
- anything. */}
-
-
fetchPromptPreview(node.id)}
- />
- {/* Below the design-time preview, because it supersedes it: a
- placeholder proves nothing about a run that actually happened. */}
- {nodeRun?.run_id && (
- // Boxed to match the preview above it -- in this pane the two are a
- // matched pair, where elsewhere the panel is one item in a list.
-
-
+ {!isSubAgent && (
+ <>
+
+
Input
+ {/* First, because it is the context everything below is read
+ against: every incoming edge delivers, so "what am I even given?"
+ has to be answerable before the assembled prompt underneath means
+ anything. */}
+
+
fetchPromptPreview(node.id)}
+ />
+ {/* Below the design-time preview, because it supersedes it: a
+ placeholder proves nothing about a run that actually happened. */}
+ {nodeRun?.run_id && (
+ // Boxed to match the preview above it -- in this pane the two are a
+ // matched pair, where elsewhere the panel is one item in a list.
+
+
+
+ )}
+ referenceLabel(ref, referenceScope.names))}
+ />
- )}
-
referenceLabel(ref, referenceScope.names))}
- />
-
+
Parameters
@@ -509,10 +532,15 @@ export function AgentNodeInspector({
Output
{/* Mirroring Receives on the far side: who this answer is handed to,
stated above the answer itself. */}
-
+ {!isSubAgent && }
{/* The received prompt lives in the Input pane instead -- see the
layout note at the top of this file. */}
-
+
{isGateRun ? 'Passed-through output' : 'Output'}
- {nodeRun.output_text}
+
+ {nodeRun.output_text}
+
) : (
No output yet.
diff --git a/frontend/src/components/protocol/ProtocolCanvas.test.tsx b/frontend/src/components/protocol/ProtocolCanvas.test.tsx
index 9cb57a8..cba5297 100644
--- a/frontend/src/components/protocol/ProtocolCanvas.test.tsx
+++ b/frontend/src/components/protocol/ProtocolCanvas.test.tsx
@@ -6,7 +6,16 @@ import { MemoryRouter } from 'react-router-dom'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { experimentsApi, protocolsApi } from '@/api/client'
import { protocolGraphQueryKey } from '@/lib/protocolGraph'
-import { defaultAgentNodeData, defaultScriptNodeData, type ProtocolGraph } from '@/types/protocols'
+import {
+ defaultAgentNodeData,
+ defaultAnthropicModelNodeData,
+ defaultCriticGateNodeData,
+ defaultMemoryNodeData,
+ defaultOutputParserNodeData,
+ defaultReasonActPatternNodeData,
+ defaultScriptNodeData,
+ type ProtocolGraph,
+} from '@/types/protocols'
import { ProtocolCanvas } from './ProtocolCanvas'
vi.mock('./PythonCodeEditor', () => ({
@@ -126,6 +135,77 @@ describe('ProtocolCanvas connector adds', () => {
expect(screen.queryByText('Parser')).not.toBeInTheDocument()
})
+ it('makes occupied single-capacity connector handles non-connectable', async () => {
+ const agentData = defaultAgentNodeData('Writer')
+ agentData.config.require_output_parser = true
+ renderCanvas({
+ nodes: [
+ { id: 'agent-1', type: 'agent', position: { x: 100, y: 100 }, data: agentData },
+ { id: 'gate-1', type: 'critic_gate', position: { x: 400, y: 100 }, data: defaultCriticGateNodeData() },
+ { id: 'model-1', type: 'model_anthropic', position: { x: 0, y: 0 }, data: defaultAnthropicModelNodeData() },
+ { id: 'memory-1', type: 'memory', position: { x: 0, y: 0 }, data: defaultMemoryNodeData() },
+ { id: 'pattern-1', type: 'pattern_reason_act', position: { x: 0, y: 0 }, data: defaultReasonActPatternNodeData() },
+ { id: 'parser-1', type: 'output_parser', position: { x: 0, y: 0 }, data: defaultOutputParserNodeData() },
+ ],
+ edges: [
+ { id: 'model-agent', source: 'model-1', sourceHandle: 'model', target: 'agent-1', targetHandle: 'model' },
+ { id: 'model-gate', source: 'model-1', sourceHandle: 'model', target: 'gate-1', targetHandle: 'model' },
+ { id: 'memory-agent', source: 'memory-1', sourceHandle: 'memory', target: 'agent-1', targetHandle: 'memory' },
+ { id: 'pattern-agent', source: 'pattern-1', sourceHandle: 'architectural_pattern', target: 'agent-1', targetHandle: 'architectural_pattern' },
+ { id: 'parser-agent', source: 'parser-1', sourceHandle: 'output_parser', target: 'agent-1', targetHandle: 'output_parser' },
+ ],
+ })
+
+ await screen.findByText('Writer')
+ for (const handleId of ['model', 'memory', 'architectural_pattern', 'output_parser']) {
+ const handle = document.querySelector(`[data-nodeid="agent-1"][data-handleid="${handleId}"]`)
+ expect(handle).toBeInTheDocument()
+ expect(handle).not.toHaveClass('connectable')
+ }
+ expect(document.querySelector('[data-nodeid="gate-1"][data-handleid="model"]')).not.toHaveClass('connectable')
+ expect(document.querySelector('[data-nodeid="model-1"][data-handleid="model"]')).toHaveClass('connectable')
+ })
+
+ it('adds a connector-only Sub-Agent from an Agent', async () => {
+ const user = userEvent.setup()
+ const { client } = renderCanvas({
+ nodes: [{ id: 'agent-1', type: 'agent', position: { x: 100, y: 100 }, data: defaultAgentNodeData('Planner') }],
+ edges: [],
+ })
+
+ fireEvent.click(await screen.findByTitle('Add Sub-Agents'))
+ await user.click(await screen.findByRole('button', { name: /^Sub-Agent A delegated worker/ }))
+
+ await waitFor(() => {
+ const graph = client.getQueryData
(protocolGraphQueryKey('protocol-1'))
+ const child = graph?.nodes.find((node) => node.type === 'sub_agent')
+ const patternEdge = graph?.edges.find(
+ (edge) => edge.target === child?.id && edge.targetHandle === 'architectural_pattern',
+ )
+ const pattern = graph?.nodes.find((node) => node.id === patternEdge?.source)
+ expect(child).toBeDefined()
+ expect(graph?.edges).toContainEqual(expect.objectContaining({
+ source: child!.id,
+ sourceHandle: 'sub_agents',
+ target: 'agent-1',
+ targetHandle: 'sub_agents',
+ }))
+ expect(child!.position.x).toBe(100)
+ expect(child!.position.y).toBeGreaterThanOrEqual(400)
+ expect(pattern).toBeDefined()
+ expect(pattern!.position.x).toBeGreaterThanOrEqual(child!.position.x - 50)
+ expect(pattern!.position.x).toBeLessThanOrEqual(child!.position.x + 50)
+ expect(pattern!.position.y).toBeGreaterThan(100)
+ expect(pattern!.position.y).toBeLessThan(child!.position.y)
+ })
+
+ expect(screen.getByText('Parent')).toBeInTheDocument()
+ expect(screen.getAllByText('Sub-Agent').length).toBeGreaterThan(0)
+ expect(screen.queryByText('Input')).not.toBeInTheDocument()
+ expect(screen.getByText('Output')).toBeInTheDocument()
+ expect(screen.queryByText('Nothing downstream — this is the final output.')).not.toBeInTheDocument()
+ })
+
it('does not expose custom metric controls in the Script inspector', async () => {
const scriptData = defaultScriptNodeData('Score script')
scriptData.config.code = 'def evaluate(output): return 1'
@@ -205,4 +285,25 @@ describe('ProtocolCanvas connector adds', () => {
expect(screen.getByText('Factor name')).toBeInTheDocument()
})
+ it('binds the Agent inspector header action directly to Active', async () => {
+ const user = userEvent.setup()
+ vi.spyOn(experimentsApi, 'get').mockResolvedValue({
+ id: 'experiment-1', name: 'Experiment', description: null, hypothesis: null, design_type: 'factorial', task_brief: null,
+ design_spec: { factors: [], metrics: [] }, measurement_plan: null, dataset_ids: [], dataset_id: null,
+ locked_at: null, locked_protocol_revision_id: null, locked_design_spec: null, locked_measurement_plan: null,
+ created_at: '', updated_at: '', archived_at: null,
+ })
+ renderCanvas({
+ nodes: [{ id: 'agent-1', type: 'agent', position: { x: 100, y: 100 }, data: defaultAgentNodeData('Writer') }],
+ edges: [],
+ }, 'experiment-1')
+
+ fireEvent.doubleClick(await screen.findByText('Writer'))
+ await user.click(screen.getAllByRole('button', { name: 'Make experimental factor' })[0])
+
+ expect(await screen.findByText('Writer:Active')).toBeInTheDocument()
+ expect(screen.getByText('Levels: true, false')).toBeInTheDocument()
+ expect(screen.queryByText('Bind to a field on the canvas')).not.toBeInTheDocument()
+ })
+
})
diff --git a/frontend/src/components/protocol/ProtocolCanvas.tsx b/frontend/src/components/protocol/ProtocolCanvas.tsx
index eb3a016..9b27f01 100644
--- a/frontend/src/components/protocol/ProtocolCanvas.tsx
+++ b/frontend/src/components/protocol/ProtocolCanvas.tsx
@@ -3,6 +3,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
addEdge,
Background,
+ MarkerType,
MiniMap,
ReactFlow,
useEdgesState,
@@ -28,15 +29,15 @@ import { nodeDisplayNames } from '@/lib/nodeNames'
import { raiseForTruncation, suggestedMaxIterations } from '@/lib/reasonActIterations'
import {
defaultAgentNodeData,
- defaultAnthropicLlmNodeData,
- defaultAzureFoundryLlmNodeData,
+ defaultAnthropicModelNodeData,
+ defaultAzureFoundryModelNodeData,
defaultCriticGateNodeData,
defaultDatasetNodeData,
- defaultLocalLlmNodeData,
+ defaultLocalModelNodeData,
defaultMcpToolNodeData,
defaultMemoryNodeData,
- defaultOpenAiLlmNodeData,
- defaultOpenRouterLlmNodeData,
+ defaultOpenAiModelNodeData,
+ defaultOpenRouterModelNodeData,
defaultOutputParserNodeData,
defaultReasonActPatternNodeData,
defaultScriptNodeData,
@@ -46,7 +47,7 @@ import type {
AgentNodeData,
CriticGateNodeData,
DatasetNodeData,
- LlmNodeData,
+ ModelNodeData,
McpToolNodeData,
MemoryNodeData,
NodeRunState,
@@ -77,8 +78,14 @@ import { DatasetNodeInspector } from './DatasetNodeInspector'
import { DeleteNodeConfirmDialog } from './DeleteNodeConfirmDialog'
import { DEFAULT_ZOOM } from './constants'
import { FactorEditorDialog } from './FactorEditorDialog'
-import { CONNECTOR_CHILD_CLEARANCE, connectorNodeOffsetX, findFreePosition, tidyLayout } from './layout'
-import { LlmNodeInspector } from './LlmNodeInspector'
+import {
+ CONNECTOR_CHILD_CLEARANCE,
+ SUB_AGENT_CHILD_OFFSET_Y,
+ connectorNodeOffsetX,
+ findFreePosition,
+ tidyLayout,
+} from './layout'
+import { ModelNodeInspector } from './ModelNodeInspector'
import { DatasetBrowserPanel } from './DatasetBrowserPanel'
import { DATASET_BROWSE, nodeDataForDataset } from './datasetCatalog'
import { McpServerBrowserPanel } from './McpServerBrowserPanel'
@@ -119,7 +126,7 @@ import { InteractEdge } from './edges/InteractEdge'
import { AgentNode } from './nodes/AgentNode'
import { CriticGateNode } from './nodes/CriticGateNode'
import { DatasetNode } from './nodes/DatasetNode'
-import { LlmNode } from './nodes/LlmNode'
+import { ModelNode } from './nodes/ModelNode'
import { McpClientToolNode } from './nodes/McpClientToolNode'
import { McpToolNode } from './nodes/McpToolNode'
import { MemoryNode } from './nodes/MemoryNode'
@@ -131,17 +138,16 @@ import { OkfBundleNode } from './nodes/OkfBundleNode'
import { OkfDocumentNode } from './nodes/OkfDocumentNode'
import { SkillNode } from './nodes/SkillNode'
import { ProtocolCanvasMenu } from './ProtocolCanvasMenu'
+import {
+ MODEL_NODE_TYPES,
+ PATTERN_NODE_TYPES,
+ isProtocolConnectionValid,
+} from './connectionValidation'
-// One node type per LLM provider / architectural pattern (see LlmNodeData/
+// One node type per LLM provider / architectural pattern (see ModelNodeData/
// ReasonActPatternNodeData's own comments in types/protocols.ts) -- each
// connector slot accepts this whole family, not one exact type, mirroring
// how the "tool" slot already accepts any mcp_tool node.
-const LLM_NODE_TYPES = ['llm_anthropic', 'llm_openai', 'llm_azure_foundry', 'llm_openrouter', 'llm_local']
-const PATTERN_NODE_TYPES = ['pattern_reason_act', 'pattern_single_agent_baseline']
-// The Knowledge slot's family, mirroring _KNOWLEDGE_NODE_TYPES in
-// services/protocol_execution.py: a server-side folder or an uploaded single
-// concept, both resolved identically into the agent's tool allow-list.
-const KNOWLEDGE_NODE_TYPES = ['okf_bundle', 'okf_document']
// The four connector slots that live on an Agent's TOP edge (see
// AgentNode.tsx) -- a node feeding one of these is placed ABOVE its agent,
// every other slot's source below it.
@@ -149,6 +155,7 @@ const TOP_EDGE_SLOTS = new Set(['architectural_pattern', 'skill',
const NODE_TYPES = {
agent: AgentNode,
+ sub_agent: AgentNode,
// Both MCP-tool types render through the same component (as the five LLM
// provider types do) -- they carry identical data and differ only in
// whether their server was picked in the browser or in a dropdown.
@@ -162,11 +169,11 @@ const NODE_TYPES = {
// All five LLM provider types render through the same component -- it
// derives icon/accent/placeholder from data.config.provider, not from
// which of these five keys it was registered under.
- llm_anthropic: LlmNode,
- llm_openai: LlmNode,
- llm_azure_foundry: LlmNode,
- llm_openrouter: LlmNode,
- llm_local: LlmNode,
+ model_anthropic: ModelNode,
+ model_openai: ModelNode,
+ model_azure_foundry: ModelNode,
+ model_openrouter: ModelNode,
+ model_local: ModelNode,
memory: MemoryNode,
output_parser: OutputParserNode,
dataset: DatasetNode,
@@ -209,18 +216,18 @@ function defaultDataFor(nodeType: string): ProtocolNode['data'] {
// it.
if (nodeType === 'mcp_tool') return defaultMcpToolNodeData()
if (nodeType === 'critic_gate') return defaultCriticGateNodeData()
- if (nodeType === 'llm_anthropic') return defaultAnthropicLlmNodeData()
- if (nodeType === 'llm_openai') return defaultOpenAiLlmNodeData()
- if (nodeType === 'llm_azure_foundry') return defaultAzureFoundryLlmNodeData()
- if (nodeType === 'llm_openrouter') return defaultOpenRouterLlmNodeData()
- if (nodeType === 'llm_local') return defaultLocalLlmNodeData()
+ if (nodeType === 'model_anthropic') return defaultAnthropicModelNodeData()
+ if (nodeType === 'model_openai') return defaultOpenAiModelNodeData()
+ if (nodeType === 'model_azure_foundry') return defaultAzureFoundryModelNodeData()
+ if (nodeType === 'model_openrouter') return defaultOpenRouterModelNodeData()
+ if (nodeType === 'model_local') return defaultLocalModelNodeData()
if (nodeType === 'memory') return defaultMemoryNodeData()
if (nodeType === 'output_parser') return defaultOutputParserNodeData()
if (nodeType === 'dataset') return defaultDatasetNodeData()
if (nodeType === 'script') return defaultScriptNodeData()
if (nodeType === 'pattern_reason_act') return defaultReasonActPatternNodeData()
if (nodeType === 'pattern_single_agent_baseline') return defaultSingleAgentBaselinePatternNodeData()
- return defaultAgentNodeData()
+ return defaultAgentNodeData(nodeType === 'sub_agent' ? 'Sub-Agent' : 'Agent')
}
// The registered datasets this canvas declares, in the order their nodes were
@@ -265,7 +272,7 @@ function datasetIdsInGraph(nodes: Node[], factors: DesignFactor[] = EMPTY_FACTOR
// Mirrors isValidConnection's own per-slot source-type-family rule -- the
// panel that opens for a connector "+" is pre-filtered to that slot's whole
-// family of node types (LLM_NODE_TYPES/PATTERN_NODE_TYPES above) rather than
+// family of node types (MODEL_NODE_TYPES/PATTERN_NODE_TYPES above) rather than
// the full catalog. Tool's own family includes Script alongside mcp_tool
// (one connector accepting several kinds of node -- see AgentNode.tsx's own
// comment on its Tool handle): a Script is a pure config source with no
@@ -273,7 +280,7 @@ function datasetIdsInGraph(nodes: Node[], factors: DesignFactor[] = EMPTY_FACTOR
// getting a dedicated one. Dataset used to share it too, but now has its
// own slot -- what an agent operates ON, not a capability it operates WITH.
const CONNECTOR_PANEL_INFO: Record = {
- ai: { allowedTypes: LLM_NODE_TYPES, title: 'Add AI' },
+ model: { allowedTypes: MODEL_NODE_TYPES, title: 'Add Model' },
tool: { allowedTypes: [MCP_SERVER_BROWSE, 'script'], title: 'Add Tool' },
memory: { allowedTypes: ['memory'], title: 'Add Memory' },
output_parser: { allowedTypes: ['output_parser'], title: 'Add Output Parser' },
@@ -284,6 +291,7 @@ const CONNECTOR_PANEL_INFO: Record "ai", on every edge, when the connector's caption became "AI".
+// * "llm" -> "ai" -> "model", on every edge as the connector vocabulary evolved.
+// * "llm_*" -> "model_*", for the five provider-node discriminators.
// * "tool" -> "resource" for DATASET-sourced edges only -- Dataset used to
// share the Tool slot with mcp_tool/script, which both keep "tool". Hence
// the source-type check rather than a blanket swap.
@@ -315,14 +324,35 @@ function parserPositionFor(agent: Node, otherNodes: Node[]) {
// the right handle and the next autosave persists the fix. This is one of
// three layers, none of them load-bearing alone: Alembic data migrations
// (3f1a7c9b2e04, b7c2d9e14a35) make stored graphs canonical, the backend keeps
-// resolving the old spellings (_LEGACY_AI_HANDLES / _LEGACY_DATASET_HANDLES in
+// resolving the old spellings (_LEGACY_MODEL_HANDLES / _LEGACY_DATASET_HANDLES in
// services/protocol_execution.py) so a graph that's never opened still runs,
// and this covers a tab that loaded before the deploy and is still autosaving
// old-spelling edges.
+const LEGACY_MODEL_NODE_TYPES: Record = {
+ llm_anthropic: 'model_anthropic',
+ llm_openai: 'model_openai',
+ llm_azure_foundry: 'model_azure_foundry',
+ llm_openrouter: 'model_openrouter',
+ llm_local: 'model_local',
+}
+
+function migrateLegacyNodes(graph: ProtocolGraph): Node[] {
+ return (graph.nodes as Node[]).map((node) => {
+ const type = LEGACY_MODEL_NODE_TYPES[node.type ?? '']
+ return type ? { ...node, type } : node
+ })
+}
+
function migrateLegacyHandles(graph: ProtocolGraph): Edge[] {
const datasetIds = new Set(graph.nodes.filter((n) => n.type === 'dataset').map((n) => n.id))
return (graph.edges as Edge[]).map((e) => {
- if (e.targetHandle === 'llm') return { ...e, sourceHandle: 'ai', targetHandle: 'ai' }
+ if (e.targetHandle === 'ai' || e.targetHandle === 'llm' || e.sourceHandle === 'ai' || e.sourceHandle === 'llm') {
+ return {
+ ...e,
+ sourceHandle: e.sourceHandle === 'ai' || e.sourceHandle === 'llm' ? 'model' : e.sourceHandle,
+ targetHandle: e.targetHandle === 'ai' || e.targetHandle === 'llm' ? 'model' : e.targetHandle,
+ }
+ }
if (e.targetHandle === 'resource' || (e.targetHandle === 'tool' && datasetIds.has(e.source))) {
return { ...e, sourceHandle: 'dataset', targetHandle: 'dataset' }
}
@@ -365,7 +395,7 @@ export const ProtocolCanvas = forwardRef(function ProtocolCanvas({ protocolId, experimentId, initialGraph, hasUnpublishedChanges, publishedRevision, experimentLocked = false }, canvasHandleRef) {
- const [nodes, setNodes, onNodesChange] = useNodesState(initialGraph.nodes as Node[])
+ const [nodes, setNodes, onNodesChange] = useNodesState(migrateLegacyNodes(initialGraph))
const [edges, setEdges, onEdgesChange] = useEdgesState(migrateLegacyHandles(initialGraph))
const queryClient = useQueryClient()
@@ -515,10 +545,6 @@ export const ProtocolCanvas = forwardRef {
- if (!experimentLocked) setEdges((eds) => addEdge(connection, eds))
- }, [experimentLocked, setEdges])
-
// "Tidy up" -- reposition every node into a generated layout (see
// layout.ts's tidyLayout). Goes through this component's own setNodes
// rather than useReactFlow().setNodes because the flow is controlled, and
@@ -731,11 +757,30 @@ export const ProtocolCanvas = forwardRef new Set(edges.filter((e) => e.targetHandle === 'ai').map((e) => e.target)), [edges])
+ const agentIdsWithModel = useMemo(() => new Set(edges.filter((e) => e.targetHandle === 'model').map((e) => e.target)), [edges])
const agentIdsWithParser = useMemo(
() => new Set(edges.filter((e) => e.targetHandle === 'output_parser').map((e) => e.target)),
[edges],
)
+ const agentIdsWithSubAgents = useMemo(
+ () => {
+ const activeSubAgents = new Set(
+ nodes.filter((node) => node.type === 'sub_agent' && node.data.active !== false).map((node) => node.id),
+ )
+ return new Set(
+ edges.filter((edge) => edge.targetHandle === 'sub_agents' && activeSubAgents.has(edge.source)).map((edge) => edge.target),
+ )
+ },
+ [edges, nodes],
+ )
+ const connectedActiveSubAgentIds = useMemo(() => {
+ const activeSubAgents = new Set(
+ nodes.filter((node) => node.type === 'sub_agent' && node.data.active !== false).map((node) => node.id),
+ )
+ return new Set(
+ edges.filter((edge) => edge.targetHandle === 'sub_agents' && activeSubAgents.has(edge.source)).map((edge) => edge.source),
+ )
+ }, [edges, nodes])
// The canvas's per-node Play icon is only offered for a node with no
// upstream *main* pipeline edge (mirrors services.protocol_execution's
@@ -753,7 +798,7 @@ export const ProtocolCanvas = forwardRef {
const nodeTypeById = new Map(nodes.map((n) => [n.id, n.type]))
+ const activeSubAgents = new Set(
+ nodes.filter((node) => node.type === 'sub_agent' && node.data.active !== false).map((node) => node.id),
+ )
return new Set(
edges
.filter((e) => {
+ if (e.targetHandle === 'sub_agents') return activeSubAgents.has(e.source)
if (e.targetHandle === 'knowledge' || e.targetHandle === 'skill') return true
if (e.targetHandle !== 'tool') return false
const sourceType = nodeTypeById.get(e.source)
@@ -926,7 +975,7 @@ export const ProtocolCanvas = forwardRef [n.id, n]))
const map = new Map()
for (const e of edges) {
- if (e.targetHandle !== 'ai') continue
- const config = (nodeById.get(e.source)?.data as LlmNodeData | undefined)?.config
+ if (e.targetHandle !== 'model') continue
+ const config = (nodeById.get(e.source)?.data as ModelNodeData | undefined)?.config
if (config) map.set(e.target, { provider: config.provider, model: config.model })
}
return map
@@ -948,6 +997,7 @@ export const ProtocolCanvas = forwardRef nodeDisplayNames(nodes), [nodes])
+ const nodeTypes = useMemo(() => new Map(nodes.map((node) => [node.id, node.type ?? ''])), [nodes])
// The experiment's declared coordination strategy, which decides what the
// main handles MEAN -- whether a lead marker is in force, and whether the
@@ -960,6 +1010,41 @@ export const ProtocolCanvas = forwardRef {
+ if (experimentLocked) return
+ setEdges((currentEdges) =>
+ isProtocolConnectionValid(connection, nodes, currentEdges, isSequential)
+ ? addEdge(connection, currentEdges)
+ : currentEdges,
+ )
+ }, [experimentLocked, isSequential, nodes, setEdges])
+
+ const renderedEdges = useMemo(() => {
+ if (!isSequential) return edges
+ const agentIds = new Set(nodes.filter((node) => node.type === 'agent').map((node) => node.id))
+ return edges.map((edge) => {
+ const isAgentFlow =
+ !edge.sourceHandle &&
+ !edge.targetHandle &&
+ agentIds.has(edge.source) &&
+ agentIds.has(edge.target)
+ if (!isAgentFlow) return edge
+ return {
+ ...edge,
+ data: { ...edge.data, sequentialAgentFlow: true },
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ width: 12,
+ height: 12,
+ color: 'color-mix(in oklch, var(--muted-foreground), transparent 30%)',
+ },
+ }
+ })
+ }, [edges, isSequential, nodes])
+
// Which main-flow sides are already taken. Only consulted under
// 'sequential', where the chain rule caps each side at one edge
// (validate_sequential_chain), so the "+" stub can hide instead of offering
@@ -978,28 +1063,34 @@ export const ProtocolCanvas = forwardRef {
return nodes.map((n) => {
const patternHostId = patternHostIds.get(n.id)
+ const isAgentLike = n.type === 'agent' || n.type === 'sub_agent'
return {
...n,
deletable: !nonDeletablePatternNodeIds.has(n.id),
data: {
...n.data,
+ isSubAgent: n.type === 'sub_agent',
runStatus: latestNodeRuns?.[n.id]?.status,
runTruncated: Boolean(latestNodeRuns?.[n.id]?.truncation),
- missingLlm: n.type === 'agent' && !agentIdsWithLlm.has(n.id),
+ missingModel:
+ (n.type === 'agent' || (n.type === 'sub_agent' && connectedActiveSubAgentIds.has(n.id))) &&
+ !agentIdsWithModel.has(n.id),
// "Require specific output format" is on, but nothing says what the
- // format is. Unlike missingLlm this doesn't stop the run -- the agent
+ // format is. Unlike missingModel this doesn't stop the run -- the agent
// just answers in prose, which is the outcome the switch was flipped
// to prevent, so it has to be visible on the card and not only in the
// inspector the user has already closed. A legacy stored contract
// counts as the answer: the executor falls back to it.
missingOutputParser:
- n.type === 'agent' &&
+ isAgentLike &&
(n.data as AgentNodeData).config?.require_output_parser === true &&
!agentIdsWithParser.has(n.id) &&
!(n.data as AgentNodeData).config?.output_contract,
- canRunAlone: n.type === 'agent' && !agentIdsWithUpstream.has(n.id),
- hasPeers: n.type === 'agent' && (peerIdsByAgent.get(n.id)?.length ?? 0) > 0,
- llmConfig: n.type === 'agent' ? llmConfigByAgent.get(n.id) ?? null : null,
+ canRunAlone: isAgentLike && !agentIdsWithUpstream.has(n.id),
+ hasPeers:
+ n.type === 'agent' &&
+ ((peerIdsByAgent.get(n.id)?.length ?? 0) > 0 || agentIdsWithSubAgents.has(n.id)),
+ llmConfig: isAgentLike ? llmConfigByAgent.get(n.id) ?? null : null,
// Gated on the strategy, not just the flag: a "Lead" badge left over
// from a Peer Collaboration experiment that has since been switched
// to Sequential would claim a role nothing acts on. The flag itself
@@ -1043,8 +1134,10 @@ export const ProtocolCanvas = forwardRef {
if (!experimentId || experimentLocked) return
@@ -1397,7 +1485,7 @@ export const ProtocolCanvas = forwardRef n.position), desired, CONNECTOR_CHILD_CLEARANCE)
+ const position = findFreePosition(
+ nodes.map((n) => n.position),
+ desired,
+ slot === 'sub_agents' ? { width: 320, height: 140 } : CONNECTOR_CHILD_CLEARANCE,
+ )
const newId = newNodeId()
// Execution pattern is capped at one but must never go to zero (see
// AgentNode.tsx's own comment) -- its "+" stays visible even once
@@ -1420,16 +1514,24 @@ export const ProtocolCanvas = forwardRef e.target === originId && e.targetHandle === 'architectural_pattern')
: undefined
- setNodes((nds) =>
- nds
- .filter((n) => n.id !== existingPatternEdge?.source)
- .concat({ id: newId, type: nodeType, position, data: dataOverride ?? defaultDataFor(nodeType) }),
- )
- setEdges((eds) =>
- eds
- .filter((e) => e.id !== existingPatternEdge?.id)
- .concat({ id: newNodeId(), source: newId, sourceHandle: slot, target: originId, targetHandle: slot }),
- )
+ const connectorNode: Node = { id: newId, type: nodeType, position, data: dataOverride ?? defaultDataFor(nodeType) }
+ const ownerEdge: Edge = { id: newNodeId(), source: newId, sourceHandle: slot, target: originId, targetHandle: slot }
+ if (nodeType === 'sub_agent') {
+ const { patternNode, patternEdge } = agentDefaultPattern(newId, position, nodes.map((n) => n.position))
+ setNodes((nds) => nds.concat(connectorNode, patternNode))
+ setEdges((eds) => eds.concat(ownerEdge, patternEdge))
+ } else {
+ setNodes((nds) =>
+ nds
+ .filter((n) => n.id !== existingPatternEdge?.source)
+ .concat(connectorNode),
+ )
+ setEdges((eds) =>
+ eds
+ .filter((e) => e.id !== existingPatternEdge?.id)
+ .concat(ownerEdge),
+ )
+ }
setPendingConnectorAdd(null)
setAddPanelOpen(false)
// Picking a node from the connector panel goes straight into that
@@ -1528,7 +1630,7 @@ export const ProtocolCanvas = forwardRef n.type === 'agent' && !edges.some((e) => e.target === n.id && e.targetHandle === 'output_parser'),
+ (n) => (n.type === 'agent' || n.type === 'sub_agent') && !edges.some((e) => e.target === n.id && e.targetHandle === 'output_parser'),
)
const asking = parserless.filter((n) => (n.data as AgentNodeData).config?.require_output_parser === true)
const host = (asking.length === 1 ? asking : parserless.length === 1 ? parserless : [])[0]
@@ -1717,7 +1819,7 @@ export const ProtocolCanvas = forwardRef n.id === selectedNodeId) ?? null
// Computed once per selection change, not per FactorBindableField -- an
- // LLM/Tool/Memory node's plain label alone doesn't say which agent it
+ // Model/Tool/Memory node's plain label alone doesn't say which agent it
// belongs to (see bindableFields.ts's own comment), so every inspector
// that wraps a field in "+ Make experimental factor" gets this instead of
// data.label for that purpose specifically; the header title itself still
@@ -1757,7 +1859,7 @@ export const ProtocolCanvas = forwardRef {
- const sourceNode = nodes.find((n) => n.id === connection.source)
- const targetNode = nodes.find((n) => n.id === connection.target)
- if (!sourceNode || !targetNode) return false
- switch (connection.targetHandle) {
- case 'ai':
- return (
- LLM_NODE_TYPES.includes(sourceNode.type ?? '') &&
- (targetNode.type === 'agent' || targetNode.type === 'critic_gate')
- )
- case 'tool':
- return (
- (MCP_TOOL_NODE_TYPES.includes(sourceNode.type ?? '') || sourceNode.type === 'script') &&
- targetNode.type === 'agent'
- )
- case 'memory':
- return sourceNode.type === 'memory' && targetNode.type === 'agent'
- case 'output_parser':
- // Agent only, deliberately not critic_gate: a gate's answer is a
- // pass/fail decision the executor already reads structurally, so
- // there is nothing for a contract to extract.
- return sourceNode.type === 'output_parser' && targetNode.type === 'agent'
- case 'architectural_pattern':
- return PATTERN_NODE_TYPES.includes(sourceNode.type ?? '') && targetNode.type === 'agent'
- case 'skill':
- return sourceNode.type === 'skill' && targetNode.type === 'agent'
- case 'dataset':
- // Uncapped: a cell's workspace holds one dataset per named SLOT, so
- // several datasets on one agent is a supported shape, not a run-time
- // error (see AgentNode.tsx's Dataset comment). Wiring order is the
- // order the agent's prompt lists the slots in. Note this is still
- // distinct from COMPARING datasets across cells, which is a
- // 'dataset_config' factor.
- return sourceNode.type === 'dataset' && targetNode.type === 'agent'
- case 'knowledge':
- // The one connector with two source types -- bundles and uploaded
- // documents are interchangeable here, since both resolve to the same
- // per-directory OKF server.
- return KNOWLEDGE_NODE_TYPES.includes(sourceNode.type ?? '') && targetNode.type === 'agent'
- default: {
- // A plain "main" pipeline edge -- LLM/memory/pattern/mcp_tool/
- // dataset/skill/knowledge/script nodes have no main handle to drag from in
- // the first place, so this mostly guards against a stray
- // connection, not real interactive use.
- const sourceCanFeedMainFlow =
- !LLM_NODE_TYPES.includes(sourceNode.type ?? '') &&
- sourceNode.type !== 'memory' &&
- sourceNode.type !== 'output_parser' &&
- !MCP_TOOL_NODE_TYPES.includes(sourceNode.type ?? '') &&
- sourceNode.type !== 'dataset' &&
- sourceNode.type !== 'skill' &&
- !KNOWLEDGE_NODE_TYPES.includes(sourceNode.type ?? '') &&
- sourceNode.type !== 'script' &&
- !PATTERN_NODE_TYPES.includes(sourceNode.type ?? '')
- if (!sourceCanFeedMainFlow) return false
- // Under Sequential the main flow is a chain: one edge out of each
- // node, one into each. Enforced here so the canvas refuses the fork
- // as you draw it, rather than validate_sequential_chain rejecting the
- // whole protocol at publish time. Other strategies leave the main
- // flow unrestricted -- a fork is exactly the shape Peer Collaboration
- // exists for, and a Critic Gate pipeline routes around agents.
- if (!isSequential) return true
- return (
- !edges.some((e) => e.source === connection.source && !CONNECTOR_HANDLES.has(e.targetHandle ?? '')) &&
- !edges.some((e) => e.target === connection.target && !CONNECTOR_HANDLES.has(e.targetHandle ?? ''))
- )
- }
- }
- },
+ (connection: Edge | Connection) => isProtocolConnectionValid(connection, nodes, edges, isSequential),
[nodes, edges, isSequential],
)
@@ -1886,7 +1920,7 @@ export const ProtocolCanvas = forwardRef