diff --git a/frontend/src/components/protocol/MetricFieldPicker.tsx b/frontend/src/components/protocol/MetricFieldPicker.tsx
new file mode 100644
index 00000000..66eb13d1
--- /dev/null
+++ b/frontend/src/components/protocol/MetricFieldPicker.tsx
@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { projectionLabel, type FieldProjection, type MetricField } from '@/lib/metricFields'
+
+function sameProjection(a: FieldProjection, b: FieldProjection) {
+ return a.path === b.path && (a.transform ?? null) === (b.transform ?? null)
+}
+
+// Which part of a producer's output a custom metric records: the whole output
+// (no picks), or one field per metric. `multi` lets one pass create a metric
+// per ticked field; otherwise ticking a field replaces the current pick.
+export function MetricFieldPicker({ fields, picks, multi, status, onChange }: {
+ fields: MetricField[]
+ picks: FieldProjection[]
+ multi: boolean
+ status?: string
+ onChange: (picks: FieldProjection[]) => void
+}) {
+ const [filter, setFilter] = useState('')
+ const [customPath, setCustomPath] = useState('')
+ const [customCount, setCustomCount] = useState(false)
+ const options: { projection: FieldProjection; origin?: MetricField['origin'] }[] = [
+ ...fields.flatMap((field) => [
+ { projection: { path: field.path }, origin: field.origin },
+ ...(field.countable ? [{ projection: { path: field.path, transform: 'length' as const }, origin: field.origin }] : []),
+ ]),
+ // A typed path (or a saved one no longer offered) stays visible and untickable.
+ ...picks.filter((pick) => !fields.some((field) => field.path === pick.path)).map((projection) => ({ projection })),
+ ]
+ const needle = filter.trim().toLocaleLowerCase()
+ const visible = needle ? options.filter((option) => option.projection.path.toLocaleLowerCase().includes(needle)) : options
+ function toggle(projection: FieldProjection, checked: boolean) {
+ if (!checked) onChange(picks.filter((pick) => !sameProjection(pick, projection)))
+ else onChange(multi ? [...picks, projection] : [projection])
+ }
+ function addCustom() {
+ const path = customPath.trim()
+ if (!path) return
+ toggle(customCount ? { path, transform: 'length' } : { path }, true)
+ setCustomPath('')
+ setCustomCount(false)
+ }
+
+ return
+ Field
+
+ { if (checked === true) onChange([]) }} />
+ Whole output
+
+ {options.length > 8 &&
+ {visible.map(({ projection, origin }) => {
+ const label = projectionLabel(projection)
+ return
+ sameProjection(pick, projection))} onCheckedChange={(checked) => toggle(projection, checked === true)} />
+ {label}
+ {origin === 'declared' && Output Parser }
+
+ })}
+
}
+ {status && {status}
}
+
+
+ Field path
+
+
setCustomCount(checked === true)} />Count items
+
Add path
+
+}
diff --git a/frontend/src/components/protocol/MetricsEditor.autosave.test.tsx b/frontend/src/components/protocol/MetricsEditor.autosave.test.tsx
index 98f7e257..caef858d 100644
--- a/frontend/src/components/protocol/MetricsEditor.autosave.test.tsx
+++ b/frontend/src/components/protocol/MetricsEditor.autosave.test.tsx
@@ -31,9 +31,9 @@ describe('MetricsEditor autosave', () => {
await user.click(screen.getByRole('button', { name: 'Add metrics' }))
const dialog = await screen.findByRole('dialog', { name: 'Manage metrics' })
- const contextual = new Set(['tool_calls', 'tool_error_rate', 'critic_approvals', 'critic_rejections'])
+ const contextual = new Set(['tool_calls', 'tool_error_rate', 'critic_approvals', 'critic_rejections', 'critic_invocations', 'critic_rejections_partial', 'critic_rejections_full', 'revision_rounds'])
for (const entry of METRIC_CATALOG.filter((candidate) => candidate.kind === 'runtime')) {
- const checkbox = within(dialog).getByRole('checkbox', { name: new RegExp(`^${entry.name}`) })
+ const checkbox = within(dialog).getByRole('checkbox', { name: new RegExp(`^${entry.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`) })
if (contextual.has(entry.key)) expect(checkbox).not.toBeChecked()
else expect(checkbox).toBeChecked()
}
diff --git a/frontend/src/components/protocol/MetricsEditor.tsx b/frontend/src/components/protocol/MetricsEditor.tsx
index 82e37fd4..78b4ad9c 100644
--- a/frontend/src/components/protocol/MetricsEditor.tsx
+++ b/frontend/src/components/protocol/MetricsEditor.tsx
@@ -10,7 +10,23 @@ import { AGENT_OUTPUT_PRODUCER_ID, agentOutputBindingForMetric, agentOutputSourc
import { applyCustomMetricChange, type CustomMetricProducerConfig } from '@/lib/customMetrics'
import { pythonScriptBindingForMetric, pythonScriptSourceOptions } from '@/lib/pythonScriptMetrics'
import { mcpToolBindingForMetric, mcpToolSourceOptions } from '@/lib/mcpToolMetrics'
-import { localMetricReadinessPreview, removeMetricFromMeasurementPlan, upsertRuntimeMetric } from '@/lib/measurementPlan'
+import { bindingProjection, projectionLabel } from '@/lib/metricFields'
+import { toolStepBindingForMetric, toolStepSourceOptions } from '@/lib/toolStepMetrics'
+import {
+ NODE_RUNTIME_PRODUCER_ID,
+ bindingNodeIds,
+ nodeRuntimeBindingForMetric,
+ nodeRuntimeOutput,
+ nodeRuntimeSourceOptions,
+} from '@/lib/nodeRuntimeMetrics'
+import {
+ DERIVED_PRODUCER_IDS,
+ FEATURE_PIPELINE_PRODUCER_ID,
+ TOOL_STEP_PRODUCER_ID,
+ localMetricReadinessPreview,
+ removeMetricFromMeasurementPlan,
+ upsertRuntimeMetric,
+} from '@/lib/measurementPlan'
import { METRIC_CATALOG, makeCatalogMetric, makeCustomMetric, normalizeDesignMetrics, type MetricCatalogEntry } from '@/lib/metricCatalog'
import type { ProtocolGraph } from '@/types/protocols'
import type { DesignMetric, MeasurementPlan } from '@/types/experiments'
@@ -18,6 +34,15 @@ import { CustomMetricFlow, MetricNodeLabel, type MetricNodeDisplay } from './Cus
import { NodeInspectorDialog } from './NodeInspectorDialog'
import { useDialogAutosave } from './useDialogAutosave'
+const CRITIC_METRIC_KEYS = new Set([
+ 'critic_approvals',
+ 'critic_rejections',
+ 'critic_invocations',
+ 'critic_rejections_partial',
+ 'critic_rejections_full',
+ 'revision_rounds',
+])
+
function synchronizeMeasurementPlanMetrics(plan: MeasurementPlan | null, metrics: DesignMetric[]) {
if (!plan) return null
const definitionsById = new Map(plan.metrics.map((definition) => [definition.id, definition]))
@@ -25,13 +50,19 @@ function synchronizeMeasurementPlanMetrics(plan: MeasurementPlan | null, metrics
const definition = metric.id ? definitionsById.get(metric.id) : undefined
if (!definition) return []
definitionsById.delete(definition.id)
- return [{
+ const synchronized = {
...definition,
name: metric.name,
- direction: metric.direction,
- primary: metric.primary,
description: metric.description,
unit: metric.unit,
+ }
+ // A custom metric's definition is owned by its producer's upsert -- reported
+ // ones are just {id, name}; a node runtime one also carries the value type
+ // and aggregation its output needs -- so keep it rather than rebuild it.
+ return [metric.kind === 'custom' ? { ...definition, name: metric.name } : {
+ ...synchronized,
+ direction: metric.direction,
+ primary: metric.primary,
}]
})
return { ...plan, metrics: [...orderedDefinitions, ...definitionsById.values()] }
@@ -55,6 +86,11 @@ function customMetricProducerDisplay(
if (binding.producer_id === 'asaree.python_script') {
return { label: `${agent}:${nodeLabel(binding.config.script_node_id)}`, type: 'Script' }
}
+ if (binding.producer_id === TOOL_STEP_PRODUCER_ID) return { label: nodeLabel(binding.config.node_id), type: 'Tool Step' }
+ if (binding.producer_id === FEATURE_PIPELINE_PRODUCER_ID) return { label: 'DC → FTE → FS', type: 'Feature pipeline' }
+ if (binding.producer_id === NODE_RUNTIME_PRODUCER_ID) {
+ return { label: bindingNodeIds(binding).map(nodeLabel).join(' + ') || 'No nodes', type: 'Node runtime' }
+ }
if (binding.producer_id === 'asaree.mcp_tool') {
const toolName = typeof binding.config.tool_name === 'string' ? binding.config.tool_name : null
return {
@@ -79,6 +115,7 @@ function MetricsDialog({
metrics,
measurementPlan,
graph,
+ protocolId,
metricIssueById,
}: {
open: boolean
@@ -94,6 +131,7 @@ function MetricsDialog({
metrics: DesignMetric[]
measurementPlan: MeasurementPlan | null
graph: ProtocolGraph | undefined
+ protocolId?: string
metricIssueById: Map
}) {
const selectedKeySignature = selectedKeys.join('\u0000')
@@ -137,12 +175,14 @@ function MetricsDialog({
const hasPythonMetricCandidate = pythonScriptSourceOptions(graph).some((source) => !source.disabledReason)
const hasMcpMetricCandidate = mcpToolSourceOptions(graph).some((source) => !source.disabledReason)
const hasAgentMetricCandidate = agentOutputSourceOptions(graph).some((source) => !source.disabledReason)
+ const hasToolStepMetricCandidate = toolStepSourceOptions(graph).some((source) => !source.disabledReason)
+ const hasNodeRuntimeMetricCandidate = nodeRuntimeSourceOptions(graph).some((source) => !source.disabledReason)
const canvasMetricKeys = new Set(contextualMetricSuggestions(graph).map((suggestion) => suggestion.key))
const hasValidTool = canvasMetricKeys.has('tool_error_rate')
const hasCriticGate = graph?.nodes.some((node) => node.type === 'critic_gate') ?? false
const canvasCannotProduce = (key: string) =>
((key === 'tool_calls' || key === 'tool_error_rate') && !hasValidTool)
- || ((key === 'critic_approvals' || key === 'critic_rejections') && !hasCriticGate)
+ || (CRITIC_METRIC_KEYS.has(key) && !hasCriticGate)
const unavailableBuiltInKeys = capabilitiesLoading || capabilitiesUnavailable
? []
: builtInEntries.flatMap((entry) => {
@@ -150,7 +190,7 @@ function MetricsDialog({
return unavailable ? [entry.key] : []
})
const unavailableBuiltInKeySignature = unavailableBuiltInKeys.join('\u0000')
- const canCreateCustomMetric = hasAgentMetricCandidate || hasPythonMetricCandidate || hasMcpMetricCandidate
+ const canCreateCustomMetric = hasAgentMetricCandidate || hasPythonMetricCandidate || hasMcpMetricCandidate || hasToolStepMetricCandidate || hasNodeRuntimeMetricCandidate
const changedMetrics = metrics.map((metric) => customChanges.find((change) => change.metric.id === metric.id)?.metric ?? metric)
.concat(customChanges.filter((change) => !metrics.some((metric) => metric.id === change.metric.id)).map((change) => change.metric))
const customMetricById = new Map(changedMetrics.filter((metric) => metric.kind === 'custom' && metric.id).map((metric) => [metric.id!, metric]))
@@ -168,6 +208,8 @@ function MetricsDialog({
return agentOutputBindingForMetric(stagedPlan, metricId)
?? pythonScriptBindingForMetric(stagedPlan, metricId)
?? mcpToolBindingForMetric(stagedPlan, metricId)
+ ?? toolStepBindingForMetric(stagedPlan, metricId)
+ ?? nodeRuntimeBindingForMetric(stagedPlan, metricId)
}
function stagedReadinessFor(metric: DesignMetric) {
const local = localMetricReadinessPreview(metric, stagedPlan, graph)
@@ -316,7 +358,7 @@ function MetricsDialog({
? 'Not supported by this runtime.'
: (entry.key === 'tool_calls' || entry.key === 'tool_error_rate') && !hasValidTool
? 'Connect an enabled, configured tool to an active Agent to use this metric.'
- : (entry.key === 'critic_approvals' || entry.key === 'critic_rejections') && !hasCriticGate
+ : CRITIC_METRIC_KEYS.has(entry.key) && !hasCriticGate
? 'Add a Critic Gate to the canvas to use this metric.'
: undefined
const unavailableReasonId = `metric-unavailable-${entry.key}`
@@ -336,37 +378,44 @@ function MetricsDialog({
Custom metrics Create metrics from eligible nodes on this canvas.
- {!customMetricDraft &&
setCustomMetricDraft(makeCustomMetric({ name: '', description: '' }))}>Create custom metric }
+ {!customMetricDraft &&
setCustomMetricDraft(makeCustomMetric({ name: '' }))}>Create custom metric }
{visibleCustomMetrics.length > 0 && {visibleCustomMetrics.map((metric) => {
const binding = stagedBindingForMetric(metric.id)
const readiness = stagedReadinessFor(metric)
const selectedPosition = metric.id ? customMetricIds.indexOf(metric.id) : -1
const producerDisplay = customMetricProducerDisplay(binding, graph)
+ const projection = bindingProjection(binding, metric.id)
+ const runtimeOutput = binding?.producer_id === NODE_RUNTIME_PRODUCER_ID
+ ? nodeRuntimeOutput(Object.keys(binding.outputs)[0])
+ : undefined
return
{producerDisplay
? Custom metric }
{metric.name}
+ {projection && {projectionLabel(projection)} }
+ {runtimeOutput && {runtimeOutput.key} }
{!readiness.ready && {readiness.detail} }
moveStagedCustomMetric(metric, -1)}>
moveStagedCustomMetric(metric, 1)}>
- {binding && metric.valueType === 'opaque' &&
setCustomMetricDraft(metric)}>Edit }
+ {binding && (binding.producer_id === TOOL_STEP_PRODUCER_ID || !DERIVED_PRODUCER_IDS.has(binding.producer_id)) &&
setCustomMetricDraft(metric)}>Edit }
setCustomMetricPendingDelete(metric)}>
})}
{stagedOrderAnnouncement}
{visibleCustomMetrics.length === 0 && !customMetricDraft && No custom metrics yet.
}
- {!canCreateCustomMetric && !customMetricDraft && Create custom metrics from an enabled Agent, Script, or configured MCP Tool.
}
+ {!canCreateCustomMetric && !customMetricDraft && Create custom metrics from an enabled Agent, Tool Step, Script, or configured MCP Tool.
}
{customMetricDraft && { setCustomMetricDraft(undefined); setCustomMetricDirty(false) }}
onDirtyChange={setCustomMetricDirty}
@@ -401,11 +450,13 @@ export function MetricsEditor({
metrics,
measurementPlan,
graph,
+ protocolId,
onChange,
onApplyMetrics,
disabled = false,
}: {
experimentId?: string
+ protocolId?: string
metrics: DesignMetric[]
measurementPlan: MeasurementPlan | null
graph: ProtocolGraph | undefined
@@ -502,7 +553,7 @@ export function MetricsEditor({
...nextPlan,
metrics: nextPlan.metrics.map((definition) => {
const designMetric = byId.get(definition.id)
- return designMetric ? { ...definition, primary: designMetric.primary } : definition
+ return designMetric?.kind === 'runtime' ? { ...definition, primary: designMetric.primary } : definition
}),
}
return { metrics: nextMetrics, measurementPlan: synchronizedPlan }
@@ -539,6 +590,7 @@ export function MetricsEditor({
metrics={normalized}
measurementPlan={measurementPlan}
graph={graph}
+ protocolId={protocolId}
metricIssueById={serverIssueByMetricId}
onApply={async (selectedKeys, customChanges, customMetricIds) => {
let draft = builtInDraft(selectedKeys)
diff --git a/frontend/src/components/protocol/ProtocolCanvas.test.tsx b/frontend/src/components/protocol/ProtocolCanvas.test.tsx
index 784f4afa..6eb7ddce 100644
--- a/frontend/src/components/protocol/ProtocolCanvas.test.tsx
+++ b/frontend/src/components/protocol/ProtocolCanvas.test.tsx
@@ -15,6 +15,8 @@ import {
defaultReasonActPatternNodeData,
defaultScriptNodeData,
type ProtocolGraph,
+ type ProtocolRun,
+ type TestRun,
} from '@/types/protocols'
import { ProtocolCanvas } from './ProtocolCanvas'
@@ -44,6 +46,58 @@ function renderCanvas(graph: ProtocolGraph, experimentId: string | null = null)
return { client, ...result }
}
+function protocolRun(overrides: Partial = {}): ProtocolRun {
+ return {
+ id: 'production-run',
+ protocol_id: 'protocol-1',
+ status: 'running',
+ node_runs: {},
+ conversation: null,
+ error: null,
+ replicate_label: 'replicate-1',
+ replicate_result_id: 'replicate-result-1',
+ factor_values: {},
+ design_revision_id: 'design-revision-1',
+ protocol_revision_id: 'protocol-revision-1',
+ target_node_id: null,
+ cancel_requested_at: null,
+ created_at: '2026-10-01T12:00:00Z',
+ updated_at: '2026-10-01T12:00:00Z',
+ observations: [],
+ artifacts: [],
+ ...overrides,
+ }
+}
+
+function testRun(overrides: Partial = {}): TestRun {
+ return {
+ id: 'test-run',
+ protocol_id: 'protocol-1',
+ status: 'completed',
+ error: null,
+ protocol_revision_id: 'protocol-revision-1',
+ created_at: '2026-09-30T12:00:00Z',
+ updated_at: '2026-09-30T12:01:00Z',
+ observations: [],
+ artifacts: [],
+ conversation: null,
+ tested_published_revision: null,
+ freshness: { out_of_date: false, reasons: [] },
+ resources: {
+ task: { duration_seconds: null, cost_usd: null },
+ evaluation: { duration_seconds: null, cost_usd: null },
+ total: { duration_seconds: null, cost_usd: null },
+ },
+ execution_summary: {
+ node_runs: {},
+ started_at: null,
+ completed_at: '2026-09-30T12:01:00Z',
+ cancel_requested_at: null,
+ },
+ ...overrides,
+ }
+}
+
describe('ProtocolCanvas connector adds', () => {
afterEach(() => vi.unstubAllGlobals())
@@ -166,6 +220,39 @@ describe('ProtocolCanvas connector adds', () => {
expect(document.querySelector('[data-nodeid="model-1"][data-handleid="model"]')).toHaveClass('connectable')
})
+ it('draws Tool Step main-flow arrows under Sequential and Critic Gate strategies', async () => {
+ const graph: ProtocolGraph = {
+ nodes: [
+ { id: 'agent-1', type: 'agent', position: { x: 100, y: 100 }, data: defaultAgentNodeData('Writer') },
+ {
+ id: 'tool-step-1',
+ type: 'tool_step',
+ position: { x: 400, y: 100 },
+ data: { label: 'Fetch', config: { tool_name: '', arguments: {}, hash_checks: {}, timeout_seconds: null } },
+ },
+ { id: 'agent-2', type: 'agent', position: { x: 700, y: 100 }, data: defaultAgentNodeData('Reviewer') },
+ ],
+ edges: [
+ { id: 'into-tool', source: 'agent-1', target: 'tool-step-1' },
+ { id: 'out-of-tool', source: 'tool-step-1', target: 'agent-2' },
+ ],
+ }
+
+ const sequential = renderCanvas(graph)
+ await waitFor(() => expect(sequential.container.querySelector('.react-flow__arrowhead')).toBeInTheDocument())
+ sequential.unmount()
+
+ vi.spyOn(experimentsApi, 'get').mockResolvedValue({
+ id: 'experiment-1', name: 'Experiment', description: null, hypothesis: null, design_type: 'factorial', task_brief: null,
+ design_spec: { factors: [], metrics: [], coordination_strategy: { slug: 'critic_gate', params: {} } },
+ 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,
+ })
+ const critic = renderCanvas(graph, 'experiment-1')
+ await waitFor(() => expect(critic.container.querySelector('.react-flow__arrowhead')).toBeInTheDocument())
+ })
+
it('adds a connector-only Sub-Agent from an Agent', async () => {
const user = userEvent.setup()
const { client } = renderCanvas({
@@ -306,4 +393,39 @@ describe('ProtocolCanvas connector adds', () => {
expect(screen.queryByText('Bind to a field on the canvas')).not.toBeInTheDocument()
})
+ it('keeps the Test Run label when a production replicate is running', async () => {
+ const run = protocolRun()
+ vi.mocked(protocolsApi.listRuns).mockResolvedValue([run])
+ vi.spyOn(protocolsApi, 'getRun').mockResolvedValue(run)
+
+ renderCanvas({ nodes: [], edges: [] })
+
+ await screen.findByRole('button', { name: 'Stop' })
+ expect(screen.getByRole('button', { name: 'Test Run' })).toBeDisabled()
+ expect(screen.queryByRole('button', { name: 'Test Run running…' })).not.toBeInTheDocument()
+ })
+
+ it('stops the active production replicate instead of a completed Test Run', async () => {
+ const user = userEvent.setup()
+ const run = protocolRun()
+ vi.mocked(protocolsApi.listRuns).mockResolvedValue([run])
+ vi.spyOn(protocolsApi, 'getRun').mockResolvedValue(run)
+ vi.spyOn(protocolsApi, 'getLatestTestRun').mockResolvedValue(testRun())
+ const cancelRun = vi.spyOn(protocolsApi, 'cancelRun').mockResolvedValue({
+ ...run,
+ cancel_requested_at: '2026-10-01T12:00:30Z',
+ })
+ 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: [], edges: [] }, 'experiment-1')
+
+ await user.click(await screen.findByRole('button', { name: 'Stop' }))
+ expect(cancelRun).toHaveBeenCalledWith('protocol-1', 'production-run')
+ })
+
})
diff --git a/frontend/src/components/protocol/ProtocolCanvas.tsx b/frontend/src/components/protocol/ProtocolCanvas.tsx
index 41db3cee..3e65e3bd 100644
--- a/frontend/src/components/protocol/ProtocolCanvas.tsx
+++ b/frontend/src/components/protocol/ProtocolCanvas.tsx
@@ -33,6 +33,7 @@ import {
defaultAnthropicModelNodeData,
defaultAzureFoundryModelNodeData,
defaultCriticGateNodeData,
+ defaultToolStepNodeData,
defaultDatasetNodeData,
defaultLocalModelNodeData,
defaultMcpToolNodeData,
@@ -47,6 +48,7 @@ import {
import type {
AgentNodeData,
CriticGateNodeData,
+ ToolStepNodeData,
DatasetNodeData,
ModelNodeData,
McpToolNodeData,
@@ -75,6 +77,7 @@ import { AgentNodeInspector } from './AgentNodeInspector'
import { agentTracedLabel, factorBoundField, revealsHiddenMcpServers, toolFactorServerId, unboundBindableFields, type UnboundField } from './bindableFields'
import { CanvasControls } from './CanvasControls'
import { CriticGateNodeInspector } from './CriticGateNodeInspector'
+import { ToolStepNodeInspector } from './ToolStepNodeInspector'
import { DatasetNodeInspector } from './DatasetNodeInspector'
import { DeleteNodeConfirmDialog } from './DeleteNodeConfirmDialog'
import { DEFAULT_ZOOM } from './constants'
@@ -110,7 +113,7 @@ import {
} from './ProtocolCanvasContext'
import { ReasonActPatternNodeInspector } from './ReasonActPatternNodeInspector'
import { RunConfirmDialog } from './RunConfirmDialog'
-import { ReopenTestRunResultsButton, TestRunResults } from './TestRunResults'
+import { describeRun, ReopenTestRunResultsButton, TestRunResults } from './TestRunResults'
import type { RunScope } from './runSummary'
import { ScriptNodeInspector } from './ScriptNodeInspector'
import { SingleAgentBaselinePatternNodeInspector } from './SingleAgentBaselinePatternNodeInspector'
@@ -122,10 +125,10 @@ import { OkfDocumentNodeInspector } from './OkfDocumentNodeInspector'
import { SkillBrowserPanel } from './SkillBrowserPanel'
import { SKILL_BROWSE, nodeDataForSkill } from './skillCatalog'
import { SkillNodeInspector } from './SkillNodeInspector'
-import { ConversationTranscript } from './ConversationTranscript'
import { InteractEdge } from './edges/InteractEdge'
import { AgentNode } from './nodes/AgentNode'
import { CriticGateNode } from './nodes/CriticGateNode'
+import { ToolStepNode } from './nodes/ToolStepNode'
import { DatasetNode } from './nodes/DatasetNode'
import { ModelNode } from './nodes/ModelNode'
import { McpClientToolNode } from './nodes/McpClientToolNode'
@@ -167,6 +170,7 @@ const NODE_TYPES = {
// that distinguishes it. Same data, same inspector.
mcp_client_tool: McpClientToolNode,
critic_gate: CriticGateNode,
+ tool_step: ToolStepNode,
// 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.
@@ -217,6 +221,7 @@ function defaultDataFor(nodeType: string): ProtocolNode['data'] {
// it.
if (nodeType === 'mcp_tool') return defaultMcpToolNodeData()
if (nodeType === 'critic_gate') return defaultCriticGateNodeData()
+ if (nodeType === 'tool_step') return defaultToolStepNodeData()
if (nodeType === 'model_anthropic') return defaultAnthropicModelNodeData()
if (nodeType === 'model_openai') return defaultOpenAiModelNodeData()
if (nodeType === 'model_azure_foundry') return defaultAzureFoundryModelNodeData()
@@ -280,6 +285,10 @@ function datasetIdsInGraph(nodes: Node[], factors: DesignFactor[] = EMPTY_FACTOR
// callable capability of its own, so it shares Tool's slot rather than
// 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.
+// What MainEdgeAddStub and an edge's insert button can add: the main-flow
+// steps, i.e. an Agent's turn or a Tool Step's fixed call.
+const MAIN_FLOW_NODE_TYPES = ['agent', 'tool_step']
+
const CONNECTOR_PANEL_INFO: Record = {
model: { allowedTypes: MODEL_NODE_TYPES, title: 'Add Model' },
tool: { allowedTypes: [MCP_SERVER_BROWSE, 'script'], title: 'Add Tool' },
@@ -543,7 +552,7 @@ export const ProtocolCanvas = forwardRef(null)
const [testResultsOpen, setTestResultsOpen] = useState(false)
- const [playResultsOpen, setPlayResultsOpen] = useState(false)
+ const [runResultsOpen, setRunResultsOpen] = useState(false)
const paneRef = useRef(null)
const { screenToFlowPosition, fitView } = useReactFlow()
@@ -635,7 +644,7 @@ export const ProtocolCanvas = forwardRef protocolsApi.testRun(protocolId),
onSuccess: (run) => {
setRunId(run.id)
- setPlayResultsOpen(false)
+ setRunResultsOpen(false)
setTestResultsOpen(true)
queryClient.setQueryData(['protocols', protocolId, 'test-run'], run)
queryClient.invalidateQueries({ queryKey: ['experiments', experimentId] })
@@ -652,7 +661,7 @@ export const ProtocolCanvas = forwardRef {
setRunId(run.id)
setTestResultsOpen(false)
- setPlayResultsOpen(true)
+ setRunResultsOpen(true)
},
})
@@ -680,7 +689,11 @@ export const ProtocolCanvas = forwardRef= activeProtocolRun.createdAt ? activeTestRun : activeProtocolRun
+ : activeTestRun ?? activeProtocolRun
// Stop button -- only raises cancel_requested_at; run_protocol's own node
// loop (polled between nodes, not mid-node) is what actually honors it.
@@ -743,14 +771,15 @@ export const ProtocolCanvas = forwardRef protocolsApi.cancelRun(protocolId, testRunQuery.data?.id ?? runId!),
+ mutationFn: () => protocolsApi.cancelRun(protocolId, cancellableRun!.id),
onSuccess: () => {
runQuery.refetch()
testRunQuery.refetch()
},
})
- const cancelRequested = !!testRunQuery.data?.execution_summary.cancel_requested_at || !!runQuery.data?.cancel_requested_at
- const showStandaloneConversation = !!runQuery.data?.conversation && runQuery.data.id !== testRunQuery.data?.id
+ const cancelRequested = !!cancellableRun?.cancelRequested
+ const runResultLabel = runQuery.data?.target_node_id ? 'Play Results' : 'Latest Run'
+ const runResultTitle = runQuery.data?.replicate_label ? `Cell Run · ${runQuery.data.replicate_label}` : runResultLabel
// A connected execution-pattern node must never be deletable directly
// (Backspace/Delete key, NodeHoverToolbar's trash icon -- both go through
@@ -1013,6 +1042,9 @@ export const ProtocolCanvas = forwardRef nodeDisplayNames(nodes), [nodes])
+ const runResultKind = runQuery.data?.target_node_id
+ ? `Play of ${nodeNames.get(runQuery.data.target_node_id) ?? runQuery.data.target_node_id}`
+ : runQuery.data?.replicate_label ? 'Cell run' : 'Graph run'
const nodeTypes = useMemo(() => new Map(nodes.map((node) => [node.id, node.type ?? ''])), [nodes])
// The experiment's declared coordination strategy, which decides what the
@@ -1025,6 +1057,7 @@ export const ProtocolCanvas = forwardRef(() => {
- if (!isSequential) return edges
- const agentIds = new Set(nodes.filter((node) => node.type === 'agent').map((node) => node.id))
+ if (!isDirectedFlow) return edges
return edges.map((edge) => {
- const isAgentFlow =
- !edge.sourceHandle &&
- !edge.targetHandle &&
- agentIds.has(edge.source) &&
- agentIds.has(edge.target)
- if (!isAgentFlow) return edge
+ if (edge.sourceHandle || edge.targetHandle) return edge
return {
...edge,
- data: { ...edge.data, sequentialAgentFlow: true },
+ data: { ...edge.data, directedFlow: true },
markerEnd: {
type: MarkerType.ArrowClosed,
width: 12,
@@ -1059,7 +1086,7 @@ export const ProtocolCanvas = forwardRef()
for (const metricId of Object.values(producer.outputs)) {
@@ -1560,9 +1589,9 @@ export const ProtocolCanvas = forwardRef n.id === originId)
@@ -1571,24 +1600,28 @@ export const ProtocolCanvas = forwardRef n.position), desired)
const newId = newNodeId()
- const newNode: Node = { id: newId, type: 'agent', position, data: defaultDataFor('agent') }
+ const newNode: Node = { id: newId, type: nodeType, position, data: dataOverride ?? defaultDataFor(nodeType) }
const mainEdge: Edge =
direction === 'outgoing'
? { id: newNodeId(), source: originId, target: newId }
: { id: newNodeId(), source: newId, target: originId }
- const { patternNode, patternEdge } = agentDefaultPattern(newId, position, nodes.map((n) => n.position))
- setNodes((nds) => nds.concat(newNode, patternNode))
- setEdges((eds) => eds.concat(mainEdge, patternEdge))
+ const pattern = nodeType === 'agent' ? agentDefaultPattern(newId, position, nodes.map((n) => n.position)) : null
+ setNodes((nds) => nds.concat(newNode, ...(pattern ? [pattern.patternNode] : [])))
+ setEdges((eds) => eds.concat(mainEdge, ...(pattern ? [pattern.patternEdge] : [])))
setPendingMainEdgeAdd(null)
setAddPanelOpen(false)
setSelectedNodeId(newId)
return
}
if (pendingEdgeInsert) {
- // Splits the original edge into origin->newAgent->target -- always an
- // Agent (AddNodePanel restricted to ['agent'] below), positioned at
+ // Splits the original edge into origin->new->target -- an Agent or a
+ // Tool Step (AddNodePanel restricted to MAIN_FLOW_NODE_TYPES below), positioned at
// the midpoint of the two nodes the removed edge used to connect.
const { edgeId, source, target } = pendingEdgeInsert
+ // The first half keeps the split edge's handoff: same sender, so the
+ // narrowed fields still apply. The second half starts at Full output --
+ // the new node has no Output Parser to narrow yet.
+ const handoff = edges.find((e) => e.id === edgeId)?.data?.handoff
const sourceNode = nodes.find((n) => n.id === source)
const targetNode = nodes.find((n) => n.id === target)
const desired =
@@ -1597,16 +1630,16 @@ export const ProtocolCanvas = forwardRef n.position), desired)
const newId = newNodeId()
- const newNode: Node = { id: newId, type: 'agent', position, data: defaultDataFor('agent') }
- const { patternNode, patternEdge } = agentDefaultPattern(newId, position, nodes.map((n) => n.position))
- setNodes((nds) => nds.concat(newNode, patternNode))
+ const newNode: Node = { id: newId, type: nodeType, position, data: dataOverride ?? defaultDataFor(nodeType) }
+ const pattern = nodeType === 'agent' ? agentDefaultPattern(newId, position, nodes.map((n) => n.position)) : null
+ setNodes((nds) => nds.concat(newNode, ...(pattern ? [pattern.patternNode] : [])))
setEdges((eds) =>
eds
.filter((e) => e.id !== edgeId)
.concat(
- { id: newNodeId(), source, target: newId },
+ { id: newNodeId(), source, target: newId, ...(handoff ? { data: { handoff } } : {}) },
{ id: newNodeId(), source: newId, target },
- patternEdge,
+ ...(pattern ? [pattern.patternEdge] : []),
),
)
setPendingEdgeInsert(null)
@@ -1867,6 +1900,17 @@ export const ProtocolCanvas = forwardRef n.id === selectedNodeId) ?? null
+ // What's wired into a selected Tool Step's Tool connector: its MCP Tool
+ // node (the callable tools and their server) and any Script node.
+ const toolStepSources =
+ selectedNode?.type === 'tool_step'
+ ? edges
+ .filter((edge) => edge.target === selectedNode.id && edge.targetHandle === 'tool')
+ .map((edge) => nodes.find((node) => node.id === edge.source))
+ : []
+ const toolStepMcpNodes = toolStepSources.filter(
+ (node): node is typeof node & { data: McpToolNodeData } => !!node && MCP_TOOL_NODE_TYPES.includes(node.type ?? ''),
+ )
// Computed once per selection change, not per FactorBindableField -- an
// 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
@@ -1908,6 +1952,7 @@ export const ProtocolCanvas = forwardRef cancelMutation.mutate()}
>
setTestResultsOpen(true)} refresh={() => { testRunQuery.refetch() }} />
+ setTestResultsOpen(true)} refresh={() => { testRunQuery.refetch() }} />
)}
- {playResult && !playResultsOpen && (
- setPlayResultsOpen(true)} refresh={() => { runQuery.refetch() }} />
+ {runResult && !runResultsOpen && (
+ setRunResultsOpen(true)} refresh={() => { runQuery.refetch() }} />
)}
setTestResultsOpen(false)} />
)}
- {playResultsOpen && playResult && (
- setPlayResultsOpen(false)} />
+ {runResultsOpen && runResult && (
+ setRunResultsOpen(false)} />
)}
- {/* One top-left column rather than two independently-positioned
- overlays: the lock badge and the transcript are both anchored
- here, and stacking them is what keeps them from landing on top of
- each other. `items-start` so each stays its own natural width.
- Top-LEFT because bottom-right is the MiniMap's corner and
- top-right is the Add/menu buttons'. The column itself is
- `pointer-events-none` so the empty space it reserves stays part of
- the canvas -- panning and node drags must still work under it --
- and each child turns events back on for itself. */}
- {(experimentLocked || showStandaloneConversation) && (
-
- {experimentLocked && (
-
-
- )}
- {showStandaloneConversation && runQuery.data?.conversation && (
-
- )}
+ {experimentLocked && (
+
+
)}
setSelectedNodeId(null)}
/>
+ ) : selectedNode?.type === 'tool_step' ? (
+ node.data.config?.tool_names ?? [])}
+ serverId={toolStepMcpNodes[0]?.data.config?.server_id ?? null}
+ hasScript={toolStepSources.some((node) => node?.type === 'script')}
+ nodeRun={latestNodeRuns?.[selectedNode.id]}
+ onChange={updateNodeData}
+ onDelete={requestDeleteNode}
+ onClose={() => setSelectedNodeId(null)}
+ />
) : MODEL_NODE_TYPES.includes(selectedNode?.type ?? '') ? (
publishAndRunMutation.mutate()}
- confirmLabel={pendingRunConfirm.type === 'graph' ? 'Start Test Run' : undefined}
+ confirmLabel={pendingRunConfirm.type === 'graph' ? 'Test Run' : undefined}
/>
)}
{factorPickerNodeId && (
diff --git a/frontend/src/components/protocol/RunConfirmDialog.test.tsx b/frontend/src/components/protocol/RunConfirmDialog.test.tsx
index 8f116506..cee5526f 100644
--- a/frontend/src/components/protocol/RunConfirmDialog.test.tsx
+++ b/frontend/src/components/protocol/RunConfirmDialog.test.tsx
@@ -80,4 +80,44 @@ describe('RunConfirmDialog', () => {
expect(screen.queryByText(/stopped at this iteration limit/)).not.toBeInTheDocument()
})
+
+ it('offers only publish-and-run for a canvas that was never published', () => {
+ render(
+ {confirmError}
}
- {hasUnpublishedChanges && (
+ {needsPublishChoice && (
-
Canvas has unpublished changes
+
{neverPublished ? 'Canvas has not been published' : 'Canvas has unpublished changes'}
- This run will use published canvas v{publishedRevision}. Publish the latest canvas first to run the changes you are viewing.
+ {neverPublished
+ ? 'Runs always use a published canvas. Publish the canvas you are viewing to run it.'
+ : `This run will use published canvas v${publishedRevision}. Publish the latest canvas first to run the changes you are viewing.`}
{publishError &&
{publishError}
}
Cancel
- {hasUnpublishedChanges ? (
+ {needsPublishChoice ? (
<>
-
- Test Run published v{publishedRevision}
-
+ {!neverPublished && (
+
+ {actionLabel} (published v{publishedRevision})
+
+ )}
- {isPublishing ? 'Publishing…' : 'Publish & Test Run'}
+ {isPublishing ? 'Publishing…' : isConfirming ? 'Starting…' : `Publish & ${actionLabel}`}
) : (
diff --git a/frontend/src/components/protocol/RunsTab.tsx b/frontend/src/components/protocol/RunsTab.tsx
index 7a7130df..912bf051 100644
--- a/frontend/src/components/protocol/RunsTab.tsx
+++ b/frontend/src/components/protocol/RunsTab.tsx
@@ -398,20 +398,17 @@ export function RunAllCellsButton({
(pendingReplicateCount === 0 && previouslyRunCells.length === 0) ||
regenerationRequired ||
unboundFactors.length > 0 ||
- bindingDiscrepancies.length > 0 ||
- !protocol.published_revision_id
+ bindingDiscrepancies.length > 0
const blockedTitle = regenerationRequired
? 'Design changed — review and regenerate before running the experiment.'
: unboundFactors.length > 0
? `Rebind or remove: ${unboundFactors.join(', ')}.`
: bindingDiscrepancies.length > 0
? 'Canvas values and generated factor levels disagree. Resolve the warning in Runs before starting.'
- : !protocol?.published_revision_id
- ? 'Publish a valid canvas before running cells.'
- : replicates.length === 0
- ? 'Generate design first — there are no cells to run yet.'
- : pendingReplicateCount === 0 && previouslyRunCells.length === 0
- ? 'All selected replicates are already running.'
+ : replicates.length === 0
+ ? 'Generate design first — there are no cells to run yet.'
+ : pendingReplicateCount === 0 && previouslyRunCells.length === 0
+ ? 'All selected replicates are already running.'
: undefined
const runnableReplicateCount = pendingReplicateCount + selectedReruns.size
const actionLabel = label ?? (hasCompletedRun ? 'Re-run all cells' : 'Run all cells')
@@ -658,15 +655,13 @@ function RunReplicateButton({
runMutation.mutate()
},
})
- const runBlocked = !protocol || regenerationRequired || unboundFactors.length > 0 || bindingDiscrepancies.length > 0 || !protocol.published_revision_id
+ const runBlocked = !protocol || regenerationRequired || unboundFactors.length > 0 || bindingDiscrepancies.length > 0
const blockedTitle = regenerationRequired
? 'Design changed — review and regenerate before running this replicate.'
: unboundFactors.length > 0
? `Rebind or remove: ${unboundFactors.join(', ')}.`
: bindingDiscrepancies.length > 0
? 'Canvas values and generated factor levels disagree. Resolve the warning in Runs before starting.'
- : !protocol?.published_revision_id
- ? 'Publish a valid canvas before running replicates.'
: undefined
const errorMessage = runMutation.error instanceof ApiError && typeof runMutation.error.detail === 'string'
? runMutation.error.detail
diff --git a/frontend/src/components/protocol/TestRunResults.test.tsx b/frontend/src/components/protocol/TestRunResults.test.tsx
index 2f6e9741..63299072 100644
--- a/frontend/src/components/protocol/TestRunResults.test.tsx
+++ b/frontend/src/components/protocol/TestRunResults.test.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react'
-import { render, screen, within } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, expect, it, vi } from 'vitest'
import type { TestRun } from '@/types/protocols'
@@ -61,6 +61,21 @@ describe('TestRunResults', () => {
expect(screen.getByText('Analyze this.')).toBeInTheDocument()
})
+ it('minimizes and restores the agent conversation flow', async () => {
+ const user = userEvent.setup()
+ render( {
expect(screen.getByLabelText('Test Run Results')).toBeInTheDocument()
expect(screen.getByText('Task execution in progress…')).toBeInTheDocument()
})
+
+ it('minimizes, restores, and moves the results window', async () => {
+ const user = userEvent.setup()
+ render(
nodeTypes?: Map
title?: string
+ // What kind of run this is (Test Run, node Play, cell run...), shown in the
+ // header so two open panels can't be mistaken for the same run.
+ kind?: string
}) {
const [nodeProgressCollapsed, setNodeProgressCollapsed] = useState(false)
+ const [collapsed, setCollapsed] = useState(false)
+ const drag = useDraggableOverlay({ recomputeKey: collapsed })
const running = !TERMINAL_RUN_STATUSES.has(run.status)
const canvasOrder = new Map(Array.from(nodeTypes.keys(), (nodeId, index) => [nodeId, index]))
const nodeRuns = Object.entries(run.execution_summary.node_runs)
@@ -106,25 +113,52 @@ export function TestRunResults({
return leftOrder - rightOrder || (nodeNames.get(leftId) ?? leftId).localeCompare(nodeNames.get(rightId) ?? rightId)
})
const nodeRunGroups = [
- { label: 'Agents', entries: nodeRuns.filter(([nodeId]) => nodeTypes.get(nodeId) !== 'critic_gate') },
+ {
+ label: 'Agents',
+ entries: nodeRuns.filter(([nodeId]) => !['critic_gate', 'tool_step'].includes(nodeTypes.get(nodeId) ?? '')),
+ },
+ { label: 'Tool steps', entries: nodeRuns.filter(([nodeId]) => nodeTypes.get(nodeId) === 'tool_step') },
{ label: 'Critic gates', entries: nodeRuns.filter(([nodeId]) => nodeTypes.get(nodeId) === 'critic_gate') },
].filter((group) => group.entries.length > 0)
- const timestamp = new Date(run.created_at)
return (
-
-
+
+
{title}
{run.freshness.out_of_date && Out of date }
{outcomeLabel(run)}
- {run.tested_published_revision && <> · Published revision {run.tested_published_revision.number} · {Number.isNaN(timestamp.valueOf()) ? run.created_at : timestamp.toLocaleString()}}
+ · {kind} · {shortRunId(run.id)}
+ {run.tested_published_revision && <> · Published revision {run.tested_published_revision.number}}
+ {' · '}{formatRunTime(run.created_at)}
-
+
+ event.stopPropagation()}
+ onClick={() => {
+ drag.preservePositionOnNextLayout()
+ setCollapsed((value) => !value)
+ }}
+ >
+ {collapsed ?
+ event.stopPropagation()} onClick={onClose}>
+
+
-
+ {!collapsed &&
{run.freshness.out_of_date && (
Out of date
{staleReason(run.freshness.reasons)}
@@ -176,11 +210,24 @@ export function TestRunResults({
{run.artifacts.length > 0 &&
Evaluation artifacts {run.artifacts.map((artifact) =>
{artifact.artifact_key} · producer {artifact.producer.binding_id}
{JSON.stringify(artifact.payload, null, 2)} )}
}
Resources
Unknown cost means the provider did not report pricing; it is never treated as zero.
-
+ }
)
}
-export function ReopenTestRunResultsButton({ onOpen, refresh, label = 'Test Run Results' }: { onOpen: () => void; refresh: () => void; label?: string }) {
- return
{ onOpen(); refresh() }} title={`Reopen and refresh ${label}`}>{label}
+const shortRunId = (id: string) => id.slice(0, 8)
+
+function formatRunTime(createdAt: string) {
+ const timestamp = new Date(createdAt)
+ return Number.isNaN(timestamp.valueOf()) ? createdAt : timestamp.toLocaleString()
+}
+
+// One line naming a run -- kind, short id, start time -- shared by the reopen
+// button's tooltip and the panel header so both identify the run identically.
+export function describeRun(kind: string, run: { id: string; created_at: string }) {
+ return `${kind} · ${shortRunId(run.id)} · ${formatRunTime(run.created_at)}`
+}
+
+export function ReopenTestRunResultsButton({ onOpen, refresh, label = 'Test Run Results', detail }: { onOpen: () => void; refresh: () => void; label?: string; detail?: string }) {
+ return
{ onOpen(); refresh() }} title={detail ? `${label}: ${detail}\nClick to reopen and refresh` : `Reopen and refresh ${label}`}>{label}
}
diff --git a/frontend/src/components/protocol/ToolStepNodeInspector.tsx b/frontend/src/components/protocol/ToolStepNodeInspector.tsx
new file mode 100644
index 00000000..ebd00eca
--- /dev/null
+++ b/frontend/src/components/protocol/ToolStepNodeInspector.tsx
@@ -0,0 +1,373 @@
+import { useRef, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Cog, Plus, X } from 'lucide-react'
+import { mcpServersApi } from '@/api/client'
+import { nodeAccent } from '@/lib/nodeAccent'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { EditableNodeTitle } from './EditableNodeTitle'
+import { NodeInspectorDialog } from './NodeInspectorDialog'
+import { NodeRunOutputPanel } from './NodeRunOutputPanel'
+import { RESIZE_HANDLE_CLASSNAME, useResizablePane } from './useResizablePane'
+import type {
+ NodeRunState,
+ ProtocolNode,
+ ToolStepArgumentSource,
+ ToolStepNodeConfig,
+ ToolStepNodeData,
+} from '@/types/protocols'
+
+const ACCENT = nodeAccent('tool_step')
+const MIN_CONFIG_WIDTH = 380
+const RESIZE_GUTTER_WIDTH = 16
+
+type SourceKey = 'unset' | 'value' | 'payload_json' | 'payload_object' | 'script_code' | 'workspace_id'
+
+const SOURCE_LABELS: Record
= {
+ unset: 'Not sent',
+ value: 'Fixed value',
+ payload_json: 'Upstream payload (JSON text)',
+ payload_object: 'Upstream payload (object)',
+ script_code: "Wired Script's code",
+ workspace_id: 'Workspace ID',
+}
+
+interface SchemaProperty {
+ type?: string
+ description?: string
+}
+
+function sourceKey(argument: ToolStepArgumentSource | undefined): SourceKey {
+ if (!argument) return 'unset'
+ if (argument.source === 'upstream_payload') return argument.format === 'object' ? 'payload_object' : 'payload_json'
+ return argument.source
+}
+
+function argumentFor(key: SourceKey, schemaType: string | undefined): ToolStepArgumentSource | undefined {
+ switch (key) {
+ case 'unset':
+ return undefined
+ case 'value':
+ return { source: 'value', value: schemaType === 'string' ? '' : null }
+ case 'payload_json':
+ return { source: 'upstream_payload', format: 'json_string' }
+ case 'payload_object':
+ return { source: 'upstream_payload', format: 'object' }
+ default:
+ return { source: key }
+ }
+}
+
+function valueText(value: unknown): string {
+ if (value === null || value === undefined) return ''
+ return typeof value === 'string' ? value : JSON.stringify(value)
+}
+
+// A string-typed parameter keeps exactly what was typed; anything else is read
+// as JSON when it parses (so `7` is a number, `true` a boolean), else as text.
+function parseValue(text: string, schemaType: string | undefined): unknown {
+ if (schemaType === 'string') return text
+ if (text.trim() === '') return null
+ try {
+ return JSON.parse(text)
+ } catch {
+ return text
+ }
+}
+
+function schemaProperties(inputSchema: unknown): Record | null {
+ if (!inputSchema || typeof inputSchema !== 'object') return null
+ const properties = (inputSchema as { properties?: unknown }).properties
+ return properties && typeof properties === 'object' ? (properties as Record) : null
+}
+
+// Same NodeInspectorDialog shell as CriticGateNodeInspector. `toolOptions` is
+// the wired MCP Tool node's own enabled tools: a Tool Step may only call one
+// its MCP node allow-lists (services/tool_steps.py's validate_tool_step), so
+// the picker offers exactly those rather than a free-text name. The argument
+// rows come from the selected tool's own input schema, as its server
+// published it -- nothing here knows any particular tool's parameters.
+export function ToolStepNodeInspector({
+ node,
+ toolOptions,
+ serverId,
+ hasScript,
+ nodeRun,
+ onChange,
+ onDelete,
+ onClose,
+}: {
+ node: (ProtocolNode & { data: ToolStepNodeData }) | null
+ toolOptions: string[]
+ serverId: string | null
+ hasScript: boolean
+ nodeRun?: NodeRunState
+ onChange: (nodeId: string, data: ToolStepNodeData) => void
+ onDelete: (nodeId: string) => void
+ onClose: () => void
+}) {
+ const columnsRef = useRef(null)
+ const outputPane = useResizablePane({
+ storageKey: 'asaree:tool-step-output-pane-width',
+ defaultWidth: 384,
+ minWidth: 280,
+ maxWidth: 760,
+ side: 'right',
+ resolveMaxWidth: () =>
+ (columnsRef.current?.clientWidth ?? Number.POSITIVE_INFINITY) - MIN_CONFIG_WIDTH - RESIZE_GUTTER_WIDTH,
+ recomputeKey: node?.id ?? '',
+ })
+ const serversQuery = useQuery({
+ queryKey: ['mcp-servers'],
+ queryFn: mcpServersApi.list,
+ staleTime: 60_000,
+ enabled: !!serverId,
+ })
+ const [newArgument, setNewArgument] = useState('')
+ if (!node) return null
+ const data = node.data
+ const config = data.config
+ const mapped = config.arguments ?? {}
+ const hashChecks = config.hash_checks ?? {}
+ const options = config.tool_name && !toolOptions.includes(config.tool_name) ? [config.tool_name, ...toolOptions] : toolOptions
+ const tool = serversQuery.data
+ ?.find((server) => server.id === serverId)
+ ?.capabilities?.tools?.find((candidate) => candidate.name === config.tool_name)
+ const properties = schemaProperties(tool?.input_schema)
+ // Schema parameters first, in the server's order, then anything mapped that
+ // the schema doesn't list (or all of them when no schema is available).
+ const argumentNames = [
+ ...Object.keys(properties ?? {}),
+ ...Object.keys(mapped).filter((name) => !properties || !(name in properties)),
+ ]
+
+ function patchConfig(patch: Partial) {
+ onChange(node!.id, { ...data, config: { ...config, ...patch } })
+ }
+
+ function setArgument(name: string, argument: ToolStepArgumentSource | undefined) {
+ const next = { ...mapped }
+ if (argument) next[name] = argument
+ else delete next[name]
+ // A hash check on an argument that's no longer sent could never pass.
+ const checks = Object.fromEntries(Object.entries(hashChecks).filter(([, arg]) => arg in next))
+ patchConfig({ arguments: next, hash_checks: checks })
+ }
+
+ function setHashCheck(oldField: string, field: string, argument: string) {
+ const entries = Object.entries(hashChecks).map(([f, a]) => (f === oldField ? [field, argument] : [f, a]))
+ patchConfig({ hash_checks: Object.fromEntries(entries) })
+ }
+
+ return (
+ {
+ if (!open) onClose()
+ }}
+ accent={ACCENT}
+ title={
+ <>
+ onChange(node.id, { ...data, label })} />
+
+ }
+ onDelete={() => onDelete(node.id)}
+ onClose={onClose}
+ >
+
+
+
+ Calls one MCP tool directly -- no model decides whether or how to call it. Choose where each argument's
+ value comes from; an argument that isn't mapped isn't sent.
+
+
+
+ Tool
+ patchConfig({ tool_name: value ?? '' })}>
+
+
+ {(value) => value || (options.length ? 'Select a tool…' : 'Wire an MCP Tool node to the Tool connector')}
+
+
+
+ {options.map((name) => (
+
+ {name}
+
+ ))}
+
+
+
+
+ {config.tool_name && (
+
+
Arguments
+ {!properties && (
+
+ {serversQuery.isLoading
+ ? 'Loading the tool’s parameters…'
+ : 'This tool’s parameters aren’t available -- add arguments by name.'}
+
+ )}
+ {argumentNames.map((name) => {
+ const property = properties?.[name]
+ const argument = mapped[name]
+ const key = sourceKey(argument)
+ const text = argument?.source === 'value' ? valueText(argument.value) : ''
+ return (
+
+
+
+ {name}
+ {property?.type && : {property.type} }
+
+ setArgument(name, argumentFor((value ?? 'unset') as SourceKey, property?.type))}
+ >
+
+ {(value) => SOURCE_LABELS[(value ?? 'unset') as SourceKey]}
+
+
+ {(Object.keys(SOURCE_LABELS) as SourceKey[]).map((option) => (
+
+ {SOURCE_LABELS[option]}
+
+ ))}
+
+
+
+ {key === 'value' &&
+ (text.length > 60 || text.includes('\n') ? (
+