Fix: Remove the right anchor point of the tool node (#18224)

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

@@ -1,5 +1,4 @@
 import { BaseNode } from '@/interfaces/database/agent';
-import { cn } from '@/lib/utils';
 import { Handle, NodeProps, Position } from '@xyflow/react';
 import { get } from 'lodash';
 import { memo, useMemo } from 'react';
@@ -9,7 +8,7 @@ import { AgentFormSchemaType } from '../../form/agent-form';
 import useGraphStore from '../../store';
 import { hasSubAgent, isBottomSubAgent } from '../../utils';
 import { LLMLabelCard } from './card';
-import { CommonHandle, LeftEndHandle } from './handle';
+import { BottomHandle, CommonHandle, LeftEndHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@@ -68,26 +67,12 @@ function InnerAgentNode({
             className="!bg-accent-primary !size-2"
           ></Handle>
         )}
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          isConnectable={false}
+        <BottomHandle
           id={NodeHandleId.AgentBottom}
-          style={{ left: 180 }}
-          className={cn('!bg-accent-primary !size-2 invisible', {
-            visible: hasSubAgent(edges, id),
-          })}
-        ></Handle>
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          isConnectable={false}
-          id={NodeHandleId.Tool}
-          style={{ left: 20 }}
-          className={cn('!bg-accent-primary !size-2 invisible', {
-            visible: hasTools,
-          })}
-        ></Handle>
+          left={180}
+          visible={hasSubAgent(edges, id)}
+        />
+        <BottomHandle id={NodeHandleId.Tool} left={20} visible={hasTools} />
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
         <section className="flex flex-col gap-2">
           <LLMLabelCard llmId={get(data, 'form.llm_id')}></LLMLabelCard>

web/src/pages/agent/canvas/node/handle.tsx

@@ -1,7 +1,7 @@
 import { useSetModalState } from '@/hooks/common-hooks';
 import { cn } from '@/lib/utils';
 import { Handle, HandleProps, Position } from '@xyflow/react';
-import { Plus } from 'lucide-react';
+import { Plus, ChevronDown } from 'lucide-react';
 import { useMemo } from 'react';
 import { NodeHandleId } from '../../constant';
 import { HandleContext } from '../../context';
@@ -100,3 +100,29 @@ export function LeftEndHandle({
     ></Handle>
   );
 }
+
+export function BottomHandle({
+  id,
+  left,
+  visible,
+}: {
+  id: NodeHandleId;
+  left: number;
+  visible: boolean;
+}) {
+  return (
+    <Handle
+      type="source"
+      position={Position.Bottom}
+      isConnectable={false}
+      id={id}
+      style={{ left }}
+      className={cn(
+        '!size-3.5 !bg-text-disabled !border-border-button inline-flex items-center justify-center invisible',
+        { visible },
+      )}
+    >
+      <ChevronDown className="size-2.5 text-bg-base pointer-events-none" />
+    </Handle>
+  );
+}

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

@@ -39,17 +39,7 @@ function InnerToolNode({
         type="target"
         position={Position.Top}
         isConnectable={isConnectable}
-        className="!bg-accent-primary !size-2"
-      />
-      {/* v1 ExeSQL and similar "tool" components route their result
-          downstream, so they need a source handle too. Without this,
-          any edge where the toolNode is the source silently fails to
-          render. */}
-      <Handle
-        id={NodeHandleId.Start}
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
+        isConnectableStart={false}
         className="!bg-accent-primary !size-2"
       />