Fix: Clicking the agent's code tool node is prohibited. (#18165)

web/src/pages/agent/canvas/node/tool-node.tsx

@@ -15,7 +15,7 @@ function InnerToolNode({
   isConnectable = true,
   selected,
 }: NodeProps<IToolNode>) {
-  const { edges, getNode, setClickedToolId } = useGraphStore();
+  const { edges, getNode } = useGraphStore();
   const upstreamAgentNodeId = edges.find((x) => x.target === id)?.source;
   const upstreamAgentNode = getNode(upstreamAgentNodeId);
   const { findMcpById } = useFindMcpById();
@@ -61,12 +61,6 @@ function InnerToolNode({
             return (
               <ToolCard
                 key={mcp.mcp_id || `mcp-${idx}`}
-                onClick={(e) => {
-                  if (mcp.mcp_id === Operator.Code) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }
-                }}
                 className="cursor-pointer"
                 data-tool={mcp.mcp_id}
               >
@@ -76,21 +70,16 @@ function InnerToolNode({
           }
 
           const tool = x as unknown as IAgentForm['tools'][number];
+          // Code has no config form, so its card is not interactive: without
+          // data-tool attributes the node click handler ignores the click.
+          const isCode = tool.component_name === Operator.Code;
 
           return (
             <ToolCard
               key={tool.id || `tool-${idx}`}
-              onClick={(e) => {
-                if (tool.component_name === Operator.Code) {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }
-
-                setClickedToolId(tool.id || tool.component_name);
-              }}
-              className="cursor-pointer"
-              data-tool={tool.component_name}
-              data-tool-id={tool.id}
+              className={isCode ? undefined : 'cursor-pointer'}
+              data-tool={isCode ? undefined : tool.component_name}
+              data-tool-id={isCode ? undefined : tool.id}
             >
               <div className="flex gap-1 items-center pointer-events-none">
                 <OperatorIcon name={tool.component_name as Operator} />

web/src/pages/agent/form/agent-form/agent-tools.tsx

@@ -78,7 +78,7 @@ export function ToolCard({
 type ActionButtonProps<T> = {
   record: T;
   deleteRecord(record: T): void;
-  edit: MouseEventHandler<HTMLOrSVGElement>;
+  edit?: MouseEventHandler<HTMLOrSVGElement>;
 };
 
 function ActionButton<T>({ deleteRecord, record, edit }: ActionButtonProps<T>) {
@@ -89,15 +89,17 @@ function ActionButton<T>({ deleteRecord, record, edit }: ActionButtonProps<T>) {
   // Wrapping into buttons to solve the issue that clicking icon occasionally not jumping to corresponding form
   return (
     <div className="flex items-center gap-4 text-text-secondary">
-      <Button
-        variant="transparent"
-        size="icon"
-        className="size-3.5 !bg-transparent !border-none"
-        data-tool={record}
-        onClick={edit}
-      >
-        <PencilLine className="size-full" />
-      </Button>
+      {edit && (
+        <Button
+          variant="transparent"
+          size="icon"
+          className="size-3.5 !bg-transparent !border-none"
+          data-tool={record}
+          onClick={edit}
+        >
+          <PencilLine className="size-full" />
+        </Button>
+      )}
 
       <Button
         variant="transparent"
@@ -147,7 +149,11 @@ export function AgentTools() {
             <ActionButton
               record={id || component_name}
               deleteRecord={deleteNodeTool(id)}
-              edit={handleEdit}
+              edit={
+                component_name === Operator.Code
+                  ? undefined // Code has no config form to edit
+                  : handleEdit
+              }
             />
           </ToolCard>
         ))}