Feat: Modify the default style of the agent node anchor #9869 (#10489)

### What problem does this PR solve? Feat: Modify the default style of the agent node anchor #9869 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2025-10-11 18:45:38 +08:00
parent 7d2f65671f
commit 6a0f448419
24 changed files with 77 additions and 195 deletions
--- a/web/src/pages/agent/components/background.tsx
+++ b/web/src/pages/agent/components/background.tsx
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -116,7 +116,7 @@ export default {
      generate: 'Generate',
      raptor: 'Raptor',
      processingType: 'Processing Type',
-      dataPipeline: 'Data Pipeline',
+      dataPipeline: 'Ingestion pipeline',
      operations: 'Operations',
      taskId: 'Task ID',
      duration: 'Duration',
@ -284,11 +284,11 @@ export default {
      fileFilter: 'File Filter',
      setDefaultTip: '',
      setDefault: 'Set as Default',
-      eidtLinkDataPipeline: 'Edit Data Pipeline',
-      linkPipelineSetTip: 'Manage data pipeline linkage with this dataset',
+      eidtLinkDataPipeline: 'Edit Ingestion pipeline',
+      linkPipelineSetTip: 'Manage Ingestion pipeline linkage with this dataset',
      default: 'Default',
-      dataPipeline: 'Data Pipeline',
-      linkDataPipeline: 'Link Data Pipeline',
+      dataPipeline: 'Ingestion pipeline',
+      linkDataPipeline: 'Link Ingestion pipeline',
      enableAutoGenerate: 'Enable Auto Generate',
      teamPlaceholder: 'Please select a team.',
      dataFlowPlaceholder: 'Please select a pipeline.',
@ -1595,7 +1595,7 @@ This delimiter is used to split the input text into several text pieces echo of
      createFromTemplate: 'Create from template',
      importJsonFile: 'Import JSON file',
      ceateAgent: 'Agent flow',
-      createPipeline: 'Data pipeline',
+      createPipeline: 'Ingestion pipeline',
      chooseAgentType: 'Choose Agent Type',
    },
    llmTools: {
@ -1688,9 +1688,9 @@ This delimiter is used to split the input text into several text pieces echo of
      <p>To keep them, please click Rerun to re-run the current stage.</p> `,
      changeStepModalConfirmText: 'Switch Anyway',
      changeStepModalCancelText: 'Cancel',
-      unlinkPipelineModalTitle: 'Unlink data pipeline',
+      unlinkPipelineModalTitle: 'Unlink Ingestion pipeline',
      unlinkPipelineModalContent: `
-      <p>Once unlinked, this Dataset will no longer be connected to the current Data Pipeline.</p> 
+      <p>Once unlinked, this Dataset will no longer be connected to the current Ingestion pipeline.</p> 
      <p>Files that are already being parsed  will continue until completion</p> 
      <p>Files that are not yet parsed will no longer be processed</p> <br/>
      <p>Are you sure you want to proceed?</p> `,
--- a/web/src/pages/agent/canvas/edge/index.tsx
+++ b/web/src/pages/agent/canvas/edge/index.tsx
@ -102,7 +102,7 @@ function InnerButtonEdge({
          ...showHighlight,
          ...placeholderHighlightStyle,
        }}
-        className={cn('text-text-secondary')}
+        className={cn('text-text-disabled')}
      />

      <EdgeLabelRenderer>
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@ -1,4 +1,4 @@
-import { useIsDarkTheme, useTheme } from '@/components/theme-provider';
+import { useTheme } from '@/components/theme-provider';
 import {
  Tooltip,
  TooltipContent,
@ -19,7 +19,6 @@ import { NotebookPen } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChatSheet } from '../chat/chat-sheet';
-import { AgentBackground } from '../components/background';
 import {
  AgentChatContext,
  AgentChatLogContext,
@ -42,6 +41,7 @@ import { useMoveNote } from '../hooks/use-move-note';
 import { usePlaceholderManager } from '../hooks/use-placeholder-manager';
 import { useDropdownManager } from './context';

+import { AgentBackground } from '@/components/canvas/background';
 import Spotlight from '@/components/spotlight';
 import {
  useHideFormSheetOnNodeDeletion,
@ -61,7 +61,6 @@ import { GenerateNode } from './node/generate-node';
 import { InvokeNode } from './node/invoke-node';
 import { IterationNode, IterationStartNode } from './node/iteration-node';
 import { KeywordNode } from './node/keyword-node';
-import { LogicNode } from './node/logic-node';
 import { MessageNode } from './node/message-node';
 import NoteNode from './node/note-node';
 import { PlaceholderNode } from './node/placeholder-node';
@ -78,7 +77,6 @@ export const nodeTypes: NodeTypes = {
  beginNode: BeginNode,
  placeholderNode: PlaceholderNode,
  relevantNode: RelevantNode,
-  logicNode: LogicNode,
  noteNode: NoteNode,
  switchNode: SwitchNode,
  generateNode: GenerateNode,
@ -173,8 +171,6 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
    }
  };

-  const isDarkTheme = useIsDarkTheme();
-
  useHideFormSheetOnNodeDeletion({ hideFormDrawer });

  const { visible, hideModal, showModal } = useSetModalState();
@ -243,7 +239,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
      >
        <defs>
          <marker
-            fill="rgb(157 149 225)"
+            fill="var(--text-disabled)"
            id="logo"
            viewBox="0 0 40 40"
            refX="8"
@ -286,12 +282,6 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
          defaultEdgeOptions={{
            type: 'buttonEdge',
            markerEnd: 'logo',
-            style: {
-              strokeWidth: 1,
-              stroke: isDarkTheme
-                ? 'rgba(91, 93, 106, 1)'
-                : 'rgba(151, 154, 171, 1)',
-            },
            zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
          }}
          deleteKeyCode={['Delete', 'Backspace']}
--- a/web/src/pages/agent/canvas/node/agent-node.tsx
+++ b/web/src/pages/agent/canvas/node/agent-node.tsx
@ -7,9 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { AgentExceptionMethod, NodeHandleId } from '../../constant';
 import useGraphStore from '../../store';
 import { isBottomSubAgent } from '../../utils';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
+import { CommonHandle, LeftEndHandle } from './handle';
+import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
@ -40,19 +39,11 @@ function InnerAgentNode({
      <NodeWrapper selected={selected}>
        {isHeadAgent && (
          <>
-            <CommonHandle
-              type="target"
-              position={Position.Left}
-              isConnectable={isConnectable}
-              style={LeftHandleStyle}
-              nodeId={id}
-              id={NodeHandleId.End}
-            ></CommonHandle>
+            <LeftEndHandle></LeftEndHandle>
            <CommonHandle
              type="source"
              position={Position.Right}
              isConnectable={isConnectable}
-              className={styles.handle}
              style={RightHandleStyle}
              nodeId={id}
              id={NodeHandleId.Start}
@ -61,18 +52,22 @@ function InnerAgentNode({
          </>
        )}

-        <Handle
-          type="target"
-          position={Position.Top}
-          isConnectable={false}
-          id={NodeHandleId.AgentTop}
-        ></Handle>
+        {isHeadAgent || (
+          <Handle
+            type="target"
+            position={Position.Top}
+            isConnectable={false}
+            id={NodeHandleId.AgentTop}
+            className="!bg-accent-primary !size-2"
+          ></Handle>
+        )}
        <Handle
          type="source"
          position={Position.Bottom}
          isConnectable={false}
          id={NodeHandleId.AgentBottom}
          style={{ left: 180 }}
+          className="!bg-accent-primary !size-2"
        ></Handle>
        <Handle
          type="source"
@ -80,6 +75,7 @@ function InnerAgentNode({
          isConnectable={false}
          id={NodeHandleId.Tool}
          style={{ left: 20 }}
+          className="!bg-accent-primary !size-2"
        ></Handle>
        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
        <section className="flex flex-col gap-2">
--- a/web/src/pages/agent/canvas/node/categorize-node.tsx
+++ b/web/src/pages/agent/canvas/node/categorize-node.tsx
@ -3,8 +3,7 @@ import { ICategorizeNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { get } from 'lodash';
 import { memo } from 'react';
-import { NodeHandleId } from '../../constant';
-import { CommonHandle } from './handle';
+import { CommonHandle, LeftEndHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@ -20,13 +19,7 @@ export function InnerCategorizeNode({
  return (
    <ToolBar selected={selected} id={id} label={data.label}>
      <NodeWrapper selected={selected}>
-        <CommonHandle
-          type="target"
-          position={Position.Left}
-          isConnectable
-          id={NodeHandleId.End}
-          nodeId={id}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>

        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>

@ -41,7 +34,6 @@ export function InnerCategorizeNode({
                  {position.name}
                </div>
                <CommonHandle
-                  // key={position.text}
                  id={position.uuid}
                  type="source"
                  position={Position.Right}
--- a/web/src/pages/agent/canvas/node/handle.tsx
+++ b/web/src/pages/agent/canvas/node/handle.tsx
@ -1,8 +1,9 @@
 import { useSetModalState } from '@/hooks/common-hooks';
 import { cn } from '@/lib/utils';
-import { Handle, HandleProps } from '@xyflow/react';
+import { Handle, HandleProps, Position } from '@xyflow/react';
 import { Plus } from 'lucide-react';
 import { useMemo } from 'react';
+import { NodeHandleId } from '../../constant';
 import { HandleContext } from '../../context';
 import { useDropdownManager } from '../context';
 import { InnerNextStepDropdown } from './dropdown/next-step-dropdown';
@ -33,7 +34,7 @@ export function CommonHandle({
      <Handle
        {...props}
        className={cn(
-          'inline-flex justify-center items-center !bg-accent-primary !size-4 !rounded-sm !border-none ',
+          'inline-flex justify-center items-center !bg-accent-primary !border-none group-hover:!size-4 group-hover:!rounded-sm',
          className,
        )}
        onClick={(e) => {
@ -47,7 +48,7 @@ export function CommonHandle({
          showModal();
        }}
      >
-        <Plus className="size-3 pointer-events-none text-text-title-invert" />
+        <Plus className="size-3 pointer-events-none text-white hidden group-hover:inline-block" />
        {visible && (
          <InnerNextStepDropdown
            hideModal={() => {
@ -62,3 +63,19 @@ export function CommonHandle({
    </HandleContext.Provider>
  );
 }
+
+export function LeftEndHandle({
+  isConnectable,
+  ...props
+}: Omit<HandleProps, 'type' | 'position'>) {
+  return (
+    <Handle
+      isConnectable={isConnectable}
+      className="!bg-accent-primary !size-2"
+      id={NodeHandleId.End}
+      type="target"
+      position={Position.Left}
+      {...props}
+    ></Handle>
+  );
+}
--- a/web/src/pages/agent/canvas/node/index.tsx
+++ b/web/src/pages/agent/canvas/node/index.tsx
@ -3,8 +3,8 @@ import { NodeProps, Position } from '@xyflow/react';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
 import { needsSingleStepDebugging } from '../../utils';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import { CommonHandle, LeftEndHandle } from './handle';
+import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
@ -23,14 +23,7 @@ function InnerRagNode({
      showRun={needsSingleStepDebugging(data.label)}
    >
      <NodeWrapper selected={selected}>
-        <CommonHandle
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
        <CommonHandle
          type="source"
          position={Position.Right}
--- a/web/src/pages/agent/canvas/node/iteration-node.tsx
+++ b/web/src/pages/agent/canvas/node/iteration-node.tsx
@ -7,8 +7,7 @@ import { NodeProps, NodeResizeControl, Position } from '@xyflow/react';
 import { memo } from 'react';
 import { NodeHandleId, Operator } from '../../constant';
 import OperatorIcon from '../../operator-icon';
-import { CommonHandle } from './handle';
-import { RightHandleStyle } from './handle-icon';
+import { CommonHandle, LeftEndHandle } from './handle';
 import styles from './index.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@ -24,30 +23,21 @@ export function InnerIterationNode({
  return (
    <ToolBar selected={selected} id={id} label={data.label} showRun={false}>
      <section
-        className={cn('h-full bg-transparent rounded-b-md ', {
+        className={cn('h-full bg-transparent rounded-b-md group', {
          [styles.selectedHeader]: selected,
        })}
      >
        <NodeResizeControl style={controlStyle} minWidth={100} minHeight={50}>
          <ResizeIcon />
        </NodeResizeControl>
-        <CommonHandle
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          className={styles.handle}
-          nodeId={id}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
        <CommonHandle
          id={NodeHandleId.Start}
          type="source"
          position={Position.Right}
          isConnectable={isConnectable}
-          className={styles.handle}
          nodeId={id}
        ></CommonHandle>
-
        <NodeHeader
          id={id}
          name={data.name}
@ -75,8 +65,6 @@ function InnerIterationStartNode({
        type="source"
        position={Position.Right}
        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
        isConnectableEnd={false}
        id={NodeHandleId.Start}
        nodeId={id}
--- a/web/src/pages/agent/canvas/node/logic-node.tsx
+++ b/web/src/pages/agent/canvas/node/logic-node.tsx
@ -1,41 +0,0 @@
-import { ILogicNode } from '@/interfaces/database/flow';
-import { NodeProps, Position } from '@xyflow/react';
-import { memo } from 'react';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
-import { NodeWrapper } from './node-wrapper';
-import { ToolBar } from './toolbar';
-
-export function InnerLogicNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<ILogicNode>) {
-  return (
-    <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper selected={selected}>
-        <CommonHandle
-          id="c"
-          type="source"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
-        <CommonHandle
-          type="source"
-          position={Position.Right}
-          isConnectable={isConnectable}
-          style={RightHandleStyle}
-          id="b"
-          nodeId={id}
-        ></CommonHandle>
-        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-      </NodeWrapper>
-    </ToolBar>
-  );
-}
-
-export const LogicNode = memo(InnerLogicNode);
--- a/web/src/pages/agent/canvas/node/message-node.tsx
+++ b/web/src/pages/agent/canvas/node/message-node.tsx
@ -1,35 +1,21 @@
 import { IMessageNode } from '@/interfaces/database/flow';
-import { NodeProps, Position } from '@xyflow/react';
+import { NodeProps } from '@xyflow/react';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo } from 'react';
-import { NodeHandleId } from '../../constant';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle } from './handle-icon';
+import { LeftEndHandle } from './handle';
 import styles from './index.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';

-function InnerMessageNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IMessageNode>) {
+function InnerMessageNode({ id, data, selected }: NodeProps<IMessageNode>) {
  const messages: string[] = get(data, 'form.messages', []);
  return (
    <ToolBar selected={selected} id={id} label={data.label}>
      <NodeWrapper selected={selected}>
-        <CommonHandle
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-          id={NodeHandleId.End}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
        {/* <CommonHandle
          type="source"
          position={Position.Right}
@ -47,7 +33,6 @@ function InnerMessageNode({
            [styles.nodeHeader]: messages.length > 0,
          })}
        ></NodeHeader>
-
        <Flex vertical gap={8} className={styles.messageNodeContainer}>
          {messages.map((message, idx) => {
            return (
--- a/web/src/pages/agent/canvas/node/node-wrapper.tsx
+++ b/web/src/pages/agent/canvas/node/node-wrapper.tsx
@ -7,7 +7,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
  return (
    <section
      className={cn(
-        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
+        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs group',
        { 'border border-accent-primary': selected },
        className,
      )}
--- a/web/src/pages/agent/canvas/node/retrieval-node.tsx
+++ b/web/src/pages/agent/canvas/node/retrieval-node.tsx
@ -7,8 +7,7 @@ import { get } from 'lodash';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
 import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import { CommonHandle, LeftEndHandle } from './handle';
 import styles from './index.less';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@ -28,22 +27,12 @@ function InnerRetrievalNode({
  return (
    <ToolBar selected={selected} id={id} label={data.label}>
      <NodeWrapper selected={selected}>
-        <CommonHandle
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          className={styles.handle}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
        <CommonHandle
          id={NodeHandleId.Start}
          type="source"
          position={Position.Right}
          isConnectable={isConnectable}
-          className={styles.handle}
-          style={RightHandleStyle}
          nodeId={id}
          isConnectableEnd={false}
        ></CommonHandle>
--- a/web/src/pages/agent/canvas/node/switch-node.tsx
+++ b/web/src/pages/agent/canvas/node/switch-node.tsx
@ -2,10 +2,10 @@ import { Card, CardContent } from '@/components/ui/card';
 import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { memo, useCallback } from 'react';
-import { NodeHandleId, SwitchOperatorOptions } from '../../constant';
+import { SwitchOperatorOptions } from '../../constant';
 import { LogicalOperatorIcon } from '../../form/switch-form';
 import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
-import { CommonHandle } from './handle';
+import { CommonHandle, LeftEndHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
@ -66,13 +66,7 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
  return (
    <ToolBar selected={selected} id={id} label={data.label} showRun={false}>
      <NodeWrapper selected={selected}>
-        <CommonHandle
-          type="target"
-          position={Position.Left}
-          isConnectable
-          nodeId={id}
-          id={NodeHandleId.End}
-        ></CommonHandle>
+        <LeftEndHandle></LeftEndHandle>
        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
        <section className="gap-2.5 flex flex-col">
          {positions.map((position, idx) => {
--- a/web/src/pages/agent/canvas/node/tool-node.tsx
+++ b/web/src/pages/agent/canvas/node/tool-node.tsx
@ -49,6 +49,7 @@ function InnerToolNode({
        type="target"
        position={Position.Top}
        isConnectable={isConnectable}
+        className="!bg-accent-primary !size-2"
      ></Handle>
      <ul className="space-y-2">
        {tools.map((x) => (
--- a/web/src/pages/agent/canvas/node/toolbar.tsx
+++ b/web/src/pages/agent/canvas/node/toolbar.tsx
@ -66,7 +66,7 @@ export function ToolBar({

  return (
    <TooltipNode selected={selected}>
-      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipTrigger className="h-full">{children}</TooltipTrigger>

      <TooltipContent position={Position.Top}>
        <section className="flex gap-2 items-center">
--- a/web/src/pages/agent/constant.tsx
+++ b/web/src/pages/agent/constant.tsx
@ -69,7 +69,6 @@ export enum Operator {
  AkShare = 'AkShare',
  YahooFinance = 'YahooFinance',
  Jin10 = 'Jin10',
-  Concentrator = 'Concentrator',
  TuShare = 'TuShare',
  Note = 'Note',
  Crawler = 'Crawler',
@ -102,7 +101,6 @@ export const AgentOperatorList = [
  Operator.RewriteQuestion,
  Operator.KeywordExtract,
  Operator.Switch,
-  Operator.Concentrator,
  Operator.Iteration,
  Operator.WaitingDialogue,
  Operator.Note,
@ -129,9 +127,6 @@ export const componentMenuList = [
  {
    name: Operator.Switch,
  },
-  {
-    name: Operator.Concentrator,
-  },
  {
    name: Operator.Iteration,
  },
@ -544,8 +539,6 @@ export const initialJin10Values = {
  ...initialQueryBaseValues,
 };

-export const initialConcentratorValues = {};
-
 export const initialTuShareValues = {
  token: 'xxx',
  src: 'eastmoney',
@ -824,7 +817,6 @@ export const RestrictedUpstreamMap = {
  [Operator.AkShare]: [Operator.Begin],
  [Operator.YahooFinance]: [Operator.Begin],
  [Operator.Jin10]: [Operator.Begin],
-  [Operator.Concentrator]: [Operator.Begin],
  [Operator.TuShare]: [Operator.Begin],
  [Operator.Crawler]: [Operator.Begin],
  [Operator.Note]: [],
@ -840,6 +832,7 @@ export const RestrictedUpstreamMap = {
  [Operator.StringTransform]: [Operator.Begin],
  [Operator.UserFillUp]: [Operator.Begin],
  [Operator.Tool]: [Operator.Begin],
+  [Operator.Placeholder]: [Operator.Begin],
 };

 export const NodeMap = {
@ -865,7 +858,6 @@ export const NodeMap = {
  [Operator.SearXNG]: 'ragNode',
  [Operator.ExeSQL]: 'ragNode',
  [Operator.Switch]: 'switchNode',
-  [Operator.Concentrator]: 'logicNode',
  [Operator.WenCai]: 'ragNode',
  [Operator.AkShare]: 'ragNode',
  [Operator.YahooFinance]: 'ragNode',
@ -908,7 +900,6 @@ export const BeginQueryTypeIconMap = {

 export const NoDebugOperatorsList = [
  Operator.Begin,
-  Operator.Concentrator,
  Operator.Message,
  Operator.RewriteQuestion,
  Operator.Switch,
--- a/web/src/pages/agent/form-sheet/form-config-map.tsx
+++ b/web/src/pages/agent/form-sheet/form-config-map.tsx
@ -136,9 +136,6 @@ export const FormConfigMap = {
  [Operator.SearXNG]: {
    component: SearXNGForm,
  },
-  [Operator.Concentrator]: {
-    component: () => <></>,
-  },
  [Operator.Note]: {
    component: () => <></>,
  },
--- a/web/src/pages/agent/hooks.tsx
+++ b/web/src/pages/agent/hooks.tsx
@ -25,7 +25,6 @@ import {
  initialBingValues,
  initialCategorizeValues,
  initialCodeValues,
-  initialConcentratorValues,
  initialCrawlerValues,
  initialDeepLValues,
  initialDuckValues,
@ -124,7 +123,6 @@ export const useInitializeOperatorParams = () => {
      [Operator.AkShare]: initialAkShareValues,
      [Operator.YahooFinance]: initialYahooFinanceValues,
      [Operator.Jin10]: initialJin10Values,
-      [Operator.Concentrator]: initialConcentratorValues,
      [Operator.TuShare]: initialTuShareValues,
      [Operator.Note]: initialNoteValues,
      [Operator.Crawler]: initialCrawlerValues,
@ -140,6 +138,7 @@ export const useInitializeOperatorParams = () => {
      [Operator.Tool]: {},
      [Operator.UserFillUp]: initialUserFillUpValues,
      [Operator.StringTransform]: initialStringTransformValues,
+      [Operator.Placeholder]: {},
    };
  }, [llmId]);

--- a/web/src/pages/agent/hooks/use-add-node.ts
+++ b/web/src/pages/agent/hooks/use-add-node.ts
@ -18,7 +18,6 @@ import {
  initialBingValues,
  initialCategorizeValues,
  initialCodeValues,
-  initialConcentratorValues,
  initialCrawlerValues,
  initialDeepLValues,
  initialDuckValues,
@ -100,7 +99,6 @@ export const useInitializeOperatorParams = () => {
      [Operator.AkShare]: initialAkShareValues,
      [Operator.YahooFinance]: initialYahooFinanceValues,
      [Operator.Jin10]: initialJin10Values,
-      [Operator.Concentrator]: initialConcentratorValues,
      [Operator.TuShare]: initialTuShareValues,
      [Operator.Note]: initialNoteValues,
      [Operator.Crawler]: initialCrawlerValues,
--- a/web/src/pages/agent/version-dialog/index.tsx
+++ b/web/src/pages/agent/version-dialog/index.tsx
@ -1,3 +1,5 @@
+import { AgentBackground } from '@/components/canvas/background';
+import Spotlight from '@/components/spotlight';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@ -22,7 +24,6 @@ import { ArrowDownToLine } from 'lucide-react';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { nodeTypes } from '../canvas';
-import { AgentBackground } from '../components/background';

 export function VersionDialog({
  hideModal,
@ -121,6 +122,7 @@ export function VersionDialog({
                        minZoom={0.1}
                      >
                        <AgentBackground></AgentBackground>
+                        <Spotlight className="z-0" opcity={0.7} coverage={70} />
                      </ReactFlow>
                    </ReactFlowProvider>
                  </section>
--- a/web/src/pages/data-flow/canvas/index.tsx
+++ b/web/src/pages/data-flow/canvas/index.tsx
@ -21,7 +21,6 @@ import '@xyflow/react/dist/style.css';
 import { NotebookPen } from 'lucide-react';
 import { memo, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AgentBackground } from '../components/background';
 import { AgentInstanceContext, HandleContext } from '../context';

 import FormSheet from '../form-sheet/next';
@ -31,6 +30,8 @@ import { useBeforeDelete } from '../hooks/use-before-delete';
 import { useMoveNote } from '../hooks/use-move-note';
 import { useDropdownManager } from './context';

+import { AgentBackground } from '@/components/canvas/background';
+import Spotlight from '@/components/spotlight';
 import { useRunDataflow } from '../hooks/use-run-dataflow';
 import {
  useHideFormSheetOnNodeDeletion,
@ -263,6 +264,7 @@ function DataFlowCanvas({ drawerVisible, hideDrawer, showLogSheet }: IProps) {
          onBeforeDelete={handleBeforeDelete}
        >
          <AgentBackground></AgentBackground>
+          <Spotlight className="z-0" opcity={0.7} coverage={70} />
          <Controls position={'bottom-center'} orientation="horizontal">
            <ControlButton>
              <Tooltip>
--- a/web/src/pages/data-flow/components/background.tsx
+++ b/web/src/pages/data-flow/components/background.tsx
@ -1,13 +0,0 @@
-import { useIsDarkTheme } from '@/components/theme-provider';
-import { Background } from '@xyflow/react';
-
-export function AgentBackground() {
-  const isDarkTheme = useIsDarkTheme();
-
-  return (
-    <Background
-      color={isDarkTheme ? 'rgba(255,255,255,0.15)' : '#A8A9B3'}
-      bgColor={isDarkTheme ? 'rgba(11, 11, 12, 1)' : 'rgba(0, 0, 0, 0.05)'}
-    />
-  );
-}
--- a/web/src/pages/data-flow/version-dialog/index.tsx
+++ b/web/src/pages/data-flow/version-dialog/index.tsx
@ -1,3 +1,5 @@
+import { AgentBackground } from '@/components/canvas/background';
+import Spotlight from '@/components/spotlight';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@ -22,7 +24,6 @@ import { ArrowDownToLine } from 'lucide-react';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { nodeTypes } from '../canvas';
-import { AgentBackground } from '../components/background';

 export function VersionDialog({
  hideModal,
@ -121,6 +122,7 @@ export function VersionDialog({
                        minZoom={0.1}
                      >
                        <AgentBackground></AgentBackground>
+                        <Spotlight className="z-0" opcity={0.7} coverage={70} />
                      </ReactFlow>
                    </ReactFlowProvider>
                  </section>