Merge branch 'develop' into feature/KnowledgeBase_zy

2026-05-06 14:16:08 +08:00
parent a947d6d095 03d9600c49
commit b2f366b031
62 changed files with 2639 additions and 1464 deletions
--- a/web/package.json
+++ b/web/package.json
@@ -62,6 +62,7 @@
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "tailwindcss": "^4.1.14",
+    "x6-html-shape": "^0.4.9",
    "xlsx": "^0.18.5",
    "zustand": "^5.0.8"
  },
--- a/web/src/components/Chat/ChatContent.tsx
+++ b/web/src/components/Chat/ChatContent.tsx
@@ -8,12 +8,11 @@ import { type FC, useRef, useEffect, useState } from 'react'
 import clsx from 'clsx'
 import Markdown from '@/components/Markdown'
 import type { ChatContentProps } from './types'
-import { Spin, Image, Flex, Button } from 'antd'
+import { Spin, Flex, Button } from 'antd'
 import { SoundOutlined } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'

-import AudioPlayer from './AudioPlayer'
-import VideoPlayer from './VideoPlayer'
+import MessageFiles from './MessageFiles'

 const getFileUrl = (file: any) => {
  return file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined)
@@ -149,72 +148,7 @@ const ChatContent: FC<ChatContentProps> = ({
                    {labelFormat(item)}
                  </div>
                }
-                {item?.meta_data?.files && item.meta_data?.files.length > 0 && <Flex gap={8} vertical align="end" className="rb:mb-2!">
-                  {item.meta_data?.files?.map((file) => {
-                    if (file.type.includes('image')) {
-                      return (
-                        <div key={file.url || file.uid} className={`rb:inline-block rb:group rb:relative rb:rounded-lg ${contentClassNames}`}>
-                          <Image src={getFileUrl(file)} alt={file.name} className="rb:w-full rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" />
-                        </div>
-                      )
-                    }
-                    if (file.type.includes('video')) {
-                      return (
-                        <div key={file.url || file.uid} className="rb:w-50">
-                          {/* <video src={getFileUrl(file)} controls className="rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" /> */}
-                          <VideoPlayer key={file.url || file.uid} src={getFileUrl(file)} />
-                        </div>
-                      )
-                    }
-                    if (file.type.includes('audio')) {
-                      return (
-                        <div key={file.url || file.uid} className="rb:w-50">
-                          <AudioPlayer key={file.url || file.uid} src={getFileUrl(file)} />
-                        </div>
-                      )
-                    }
-
-                    const documentType = (file.file_type || file.type)?.split('/')
-                    return (
-                      <Flex
-                        key={file.url || file.uid}
-                        align="center"
-                        gap={10}
-                        className="rb:text-left rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb-border rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]"
-                        onClick={() => handleDownload(file)}
-                      >
-                        <div
-                          className={clsx(
-                            "rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
-                            file.type?.includes('pdf')
-                              ? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
-                              : (file.type?.includes('excel') || file.type?.includes('spreadsheetml.sheet')) || file.type?.includes('xls') || file.type?.includes('xlsx')
-                                ? "rb:bg-[url('@/assets/images/file/excel.svg')]"
-                                : file.type?.includes('csv')
-                                  ? "rb:bg-[url('@/assets/images/file/csv.svg')]"
-                                  : file.type?.includes('html')
-                                    ? "rb:bg-[url('@/assets/images/file/html.svg')]"
-                                    : file.type?.includes('json')
-                                      ? "rb:bg-[url('@/assets/images/file/json.svg')]"
-                                      : file.type?.includes('ppt')
-                                        ? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
-                                        : file.type?.includes('markdown')
-                                          ? "rb:bg-[url('@/assets/images/file/md.svg')]"
-                                          : file.type?.includes('text')
-                                            ? "rb:bg-[url('@/assets/images/file/txt.svg')]"
-                                            : (file.type?.includes('doc') || file.type?.includes('docx') || file.type?.includes('word') || file.type?.includes('wordprocessingml.document'))
-                                              ? "rb:bg-[url('@/assets/images/file/word.svg')]"
-                                              : "rb:bg-[url('@/assets/images/file/txt.svg')]"
-                          )}
-                        ></div>
-                        <div className="rb:flex-1 rb:w-32.5">
-                          <div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
-                          <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{documentType?.[documentType.length - 1]} · {file.size}</div>
-                        </div>
-                      </Flex>
-                    )
-                  })}
-                </Flex>}
+                <MessageFiles files={item.meta_data?.files ?? []} contentClassNames={contentClassNames} onDownload={handleDownload} />
                {/* Message bubble */}
                <div className={clsx('rb:text-left rb:leading-5 rb:inline-block rb:wrap-break-word rb:relative', item.role === 'user' ? contentClassNames : '', {
                  // Error message style (content is null and not assistant message)
--- a/web/src/components/Chat/MessageFiles.tsx
+++ b/web/src/components/Chat/MessageFiles.tsx
@@ -0,0 +1,87 @@
+import { Image, Flex } from 'antd'
+import clsx from 'clsx'
+import AudioPlayer from './AudioPlayer'
+import VideoPlayer from './VideoPlayer'
+
+const getFileUrl = (file: any) =>
+  file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined)
+
+const DOC_ICONS: [string[], string][] = [
+  [['pdf'], "rb:bg-[url('@/assets/images/file/pdf.svg')]"],
+  [['excel', 'spreadsheetml.sheet', 'xls', 'xlsx'], "rb:bg-[url('@/assets/images/file/excel.svg')]"],
+  [['csv'], "rb:bg-[url('@/assets/images/file/csv.svg')]"],
+  [['html'], "rb:bg-[url('@/assets/images/file/html.svg')]"],
+  [['json'], "rb:bg-[url('@/assets/images/file/json.svg')]"],
+  [['ppt'], "rb:bg-[url('@/assets/images/file/ppt.svg')]"],
+  [['markdown'], "rb:bg-[url('@/assets/images/file/md.svg')]"],
+  [['text'], "rb:bg-[url('@/assets/images/file/txt.svg')]"],
+  [['doc', 'docx', 'word', 'wordprocessingml.document'], "rb:bg-[url('@/assets/images/file/word.svg')]"],
+]
+
+const getDocIcon = (parts: string[]) => {
+  const match = DOC_ICONS.find(([keys]) => keys.some(k => parts.includes(k)))
+  return match ? match[1] : "rb:bg-[url('@/assets/images/file/txt.svg')]"
+}
+
+interface MessageFilesProps {
+  files: any[]
+  contentClassNames?: string | Record<string, boolean>
+  onDownload: (file: any) => void
+}
+
+const MessageFiles = ({ files, contentClassNames, onDownload }: MessageFilesProps) => {
+  if (!files?.length) return null
+  return (
+    <Flex gap={8} vertical align="end" className="rb:mb-2!">
+      {files.map((file) => {
+        const key = file.url || file.uid
+        if (file.type.includes('image')) {
+          return (
+            <div key={key} className={clsx('rb:inline-block rb:group rb:relative rb:rounded-lg', contentClassNames)}>
+              <Image src={getFileUrl(file)} alt={file.name} className="rb:w-full rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" />
+            </div>
+          )
+        }
+        if (file.type.includes('video')) {
+          return (
+            <div key={key} className="rb:w-50">
+              <VideoPlayer src={getFileUrl(file)} />
+            </div>
+          )
+        }
+        if (file.type.includes('audio')) {
+          return (
+            <div key={key} className="rb:w-50">
+              <AudioPlayer src={getFileUrl(file)} />
+            </div>
+          )
+        }
+        const documentType = (file.file_type || file.type)?.split('/') ?? []
+        return (
+          <Flex
+            key={key}
+            align="center"
+            gap={10}
+            className="rb:text-left rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb-border rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]"
+            onClick={() => onDownload(file)}
+          >
+            <div
+              className={clsx(
+                "rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
+                getDocIcon(documentType)
+              )}
+            />
+            <div className="rb:flex-1 rb:w-32.5">
+              <div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
+              <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">
+                {documentType?.[documentType.length - 1]} · {file.size}
+              </div>
+            </div>
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+
+export default MessageFiles
--- a/web/src/components/Knowledge/KnowledgeConfigModal.tsx
+++ b/web/src/components/Knowledge/KnowledgeConfigModal.tsx
@@ -54,10 +54,14 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig

  useEffect(() => {
    if (values?.retrieve_type) {
+      const resetValues: KnowledgeConfigForm = {}
      const fieldsToReset = Object.keys(values).filter(key =>
        key !== 'kb_id' && key !== 'retrieve_type' && key !== 'top_k'
      ) as (keyof KnowledgeConfigForm)[];
-      form.resetFields(fieldsToReset);
+      fieldsToReset.forEach(key => {
+        resetValues[key] = undefined
+      })
+      form.setFieldsValue(resetValues);
    }
  }, [values?.retrieve_type])

--- a/web/src/components/Knowledge/KnowledgeGlobalConfigModal.tsx
+++ b/web/src/components/Knowledge/KnowledgeGlobalConfigModal.tsx
@@ -40,7 +40,8 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno

  useEffect(() => {
    if (values?.rerank_model) {
-      form.setFieldsValue({ ...data })
+      const { rerank_model, ...rest } = data;
+      form.setFieldsValue({ ...rest })
    } else {
      form.setFieldsValue({ reranker_id: undefined, reranker_top_k: undefined })
    }
--- a/web/src/components/OverflowTags/index.tsx
+++ b/web/src/components/OverflowTags/index.tsx
@@ -3,14 +3,14 @@ import { Popover, type PopoverProps } from 'antd'
 import Tag, { type TagProps } from '@/components/Tag'

 interface OverflowTagsProps {
-  items: ReactNode[];
+  items?: ReactNode[];
  gap?: number;
  numTagColor?: TagProps['color'];
  numTag?: (num?: number) => ReactNode;
  popoverProps?: PopoverProps | false;
 }

-const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag, popoverProps }: OverflowTagsProps) => {
+const OverflowTags = ({ items = [], gap = 8, numTagColor = 'default', numTag, popoverProps }: OverflowTagsProps) => {
  const containerRef = useRef<HTMLDivElement>(null)
  const measureRef = useRef<HTMLDivElement>(null)
  const [visibleCount, setVisibleCount] = useState(items.length)
@@ -20,7 +20,7 @@ const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag, popover
    if (!measure || containerWidth === 0) return

    const children = Array.from(measure.children) as HTMLElement[]
-    if (!children.length) return
+    if (!children.length) { setVisibleCount(0); return }

    // last child is the sample +N tag
    const extraTagWidth = (children[children.length - 1] as HTMLElement).offsetWidth
--- a/web/src/components/SiderMenu/index.tsx
+++ b/web/src/components/SiderMenu/index.tsx
@@ -399,7 +399,7 @@ const Menu: FC<{
        className="rb:overflow-y-auto rb:flex-1!"
      />
      {/* Return to space button for superusers */}
-      {user?.is_superuser && source === 'space' &&
+      {source === 'space' &&
        <Flex gap={4} vertical className="rb:my-3! rb:mx-3!">
          <Divider className="rb:mb-2.5! rb:mt-0! rb:border-[#DFE4ED]! rb:mx-2! rb:min-w-[calc(100%-20px)]! rb:w-[calc(100%-20px)]!" />
          <Flex
@@ -412,16 +412,18 @@ const Menu: FC<{
            <div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/menuNew/switch.svg')]"></div>
            {collapsed ? null : t('common.switchSpace')}
          </Flex>
-          <Flex
-            gap={8}
-            align="center"
-            justify="start"
-            onClick={goToSpace}
-            className="rb:p-2.5! rb:text-[13px] rb:hover:bg-[rgba(223,228,237,0.5)] rb:rounded-lg rb:leading-3.5 rb:font-regular rb:text-center rb:cursor-pointer"
-          >
-            <div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/menuNew/return.svg')]"></div>
-            {collapsed ? null : t('common.returnToSpace')}
-          </Flex>
+          {user?.is_superuser &&
+            <Flex
+              gap={8}
+              align="center"
+              justify="start"
+              onClick={goToSpace}
+              className="rb:p-2.5! rb:text-[13px] rb:hover:bg-[rgba(223,228,237,0.5)] rb:rounded-lg rb:leading-3.5 rb:font-regular rb:text-center rb:cursor-pointer"
+            >
+              <div className="rb:cursor-pointer rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/menuNew/return.svg')]"></div>
+              {collapsed ? null : t('common.returnToSpace')}
+            </Flex>
+          }
        </Flex>
      }
      {source === 'manage' && subscription && !collapsed &&
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -1540,6 +1540,7 @@ export const en = {
      json_output: 'Support JSON formatted output',
      thinking_budget_tokens: 'thinking budget tokens',
      thinking_budget_tokens_max_error: "Cannot exceed the max tokens limit ({{max}})",
+      thinking_budget_tokens_min_error: "Cannot be less than {{min}}",
      logSearchPlaceholder: 'Search log content',
    },
    userMemory: {
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -871,6 +871,7 @@ export const zh = {
      json_output: '支持JSON格式化输出',
      thinking_budget_tokens: '深度思考预算Token数',
      thinking_budget_tokens_max_error: "不能超过 最大令牌数 ({{max}})",
+      thinking_budget_tokens_min_error: "不能小于 {{min}}",
      logSearchPlaceholder: '搜索日志内容',
    },
    table: {
--- a/web/src/vendor/x6-html-shape/index.js
+++ b/web/src/vendor/x6-html-shape/index.js
@@ -0,0 +1,182 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-05-06 11:54:23 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-05-06 11:54:23 
+ */
+// Patched x6-html-shape: replaces View.createElement (removed in X6 3.x) with document.createElement
+import { Node as p, NodeView as l, Graph as C, Dom as s } from "@antv/x6";
+import { getConfig as w, clickable as x, isInputElement as y, forwardEvent as S } from "./utils.js";
+
+const u = "html-shape", h = "html-shape-view", T = p.define(w(h)), m = {};
+
+export function register(i) {
+  const { shape: e, render: n, inherit: t = u, ...o } = i;
+  if (!e) throw new Error("should specify shape in config");
+  m[e] = n;
+  C.registerNode(e, { inherit: t, ...o }, true);
+}
+
+const a = "html";
+
+// Determine which HTML layer a node belongs to.
+// Parent (loop/iteration) nodes go behind the SVG layer so edges render above them.
+// All other nodes go in front of the SVG layer so they render above edges.
+function isBackNode(cell) {
+  const type = cell.getData?.()?.type;
+  return type === 'loop' || type === 'iteration';
+}
+
+// Ensure the two HTML container layers exist and are correctly positioned.
+function ensureHtmlLayers(graph) {
+  if (!graph._htmlBack) {
+    const back = graph._htmlBack = document.createElement('div');
+    s.css(back, {
+      position: 'absolute', width: '100%', height: '100%',
+      'touch-action': 'none', 'user-select': 'none', 'pointer-events': 'none',
+      'z-index': 0, 'transform-origin': 'left top',
+    });
+    back.classList.add('x6-html-shape-container', 'x6-html-shape-back');
+    const svg = graph.container.querySelector('svg');
+    // back layer: before SVG → visually behind edges
+    graph.container.insertBefore(back, svg || null);
+  }
+  if (!graph._htmlFront) {
+    const front = graph._htmlFront = document.createElement('div');
+    s.css(front, {
+      position: 'absolute', width: '100%', height: '100%',
+      'touch-action': 'none', 'user-select': 'none', 'pointer-events': 'none',
+      'z-index': 0, 'transform-origin': 'left top',
+    });
+    front.classList.add('x6-html-shape-container', 'x6-html-shape-front');
+    // front layer: after SVG → visually above edges
+    graph.container.append(front);
+  }
+  // Keep legacy alias so updateHtmlContainerSize can iterate both
+  graph.htmlContainers = [graph._htmlBack, graph._htmlFront];
+}
+
+class BaseHTMLShapeView extends l {
+  confirmUpdate(e) {
+    const n = super.confirmUpdate(e);
+    return this.handleAction(n, a, () => {
+      if (!this.mounted) {
+        const t = m[this.cell.shape], o = this.ensureComponentContainer();
+        t && o && (this.mounted = t(this.cell, this.graph, o) || true,
+          this.onMounted(),
+          o.addEventListener("mousedown", this.prevEvent, true),
+          o.addEventListener("mouseup", this.prevEvent, true));
+      }
+    });
+  }
+  prevEvent(e) {
+    (x(e.target) || y(e.target)) && (e.preventDefault(), e.stopPropagation());
+  }
+  ensureComponentContainer() {}
+  onMounted() {}
+  onUnMount() {
+    if (this.onZIndexChange) {
+      this.cell.off("change:zIndex", this.onZIndexChange);
+    }
+    if (this.onNodeMoving) {
+      this.graph.off("node:moving", this.onNodeMoving);
+    }
+  }
+  unmount() {
+    typeof this.mounted == "function" && this.mounted();
+    this.componentContainer && this.componentContainer.remove();
+    this.onUnMount();
+    return super.unmount(), this;
+  }
+}
+
+BaseHTMLShapeView.config({ bootstrap: [a], actions: { component: a } });
+
+class HTMLShapeView extends BaseHTMLShapeView {
+  constructor(...e) {
+    super(...e);
+    this.cell.on("change:visible", ({ cell: n }) => {
+      if (n.view === h) {
+        const t = this.graph.findViewByCell(n.id);
+        t && Promise.resolve().then(() => {
+          t.componentContainer.style.display = t.container.style.display;
+        });
+      }
+    });
+  }
+  onMounted() {
+    const listeners = this.graph.listeners;
+    // Always register per-cell zIndex listener regardless of shared transform events
+    this.onZIndexChange = () => this.updateContainerStyle();
+    this.cell.on("change:zIndex", this.onZIndexChange);
+    if (listeners?.hasTransformEvent?.length) return;
+    this.onTranslate = this.updateHtmlContainerSize.bind(this);
+    this.graph.on("translate", this.onTranslate);
+    this.graph.on("scale", this.onTranslate);
+    this.graph.on("node:change:position", this.onTranslate);
+    this.graph.on("hasTransformEvent", this.onTranslate);
+    // While dragging, lift this node's componentContainer to the top of its
+    // layer so its ports are never obscured by a sibling node underneath.
+    this.onNodeMoving = ({ node }) => {
+      if (node === this.cell && this.componentContainer) {
+        const layer = isBackNode(this.cell) ? this.graph._htmlBack : this.graph._htmlFront;
+        layer.append(this.componentContainer);
+      }
+    };
+    this.graph.on("node:moving", this.onNodeMoving);
+    this.updateHtmlContainerSize();
+  }
+  ensureComponentContainer() {
+    ensureHtmlLayers(this.graph);
+    const layer = isBackNode(this.cell) ? this.graph._htmlBack : this.graph._htmlFront;
+    if (!this.componentContainer) {
+      const e = this.componentContainer = document.createElement("div");
+      s.css(e, {
+        "pointer-events": "auto", "touch-action": "none", "user-select": "none",
+        "transform-origin": "center", position: "absolute"
+      });
+      e.classList.add("x6-html-shape-node");
+      "click,dblclick,contextmenu,mousedown,mousemove,mouseup,mouseover,mouseout,mouseenter,mouseleave"
+        .split(",").forEach(t => S(t, e, this.container));
+      layer.append(e);
+    }
+    return this.componentContainer;
+  }
+  resize() { super.resize(); this.updateContainerStyle(); }
+  updateTransform() { super.updateTransform(); this.updateContainerStyle(); }
+  updateContainerStyle() {
+    const e = this.ensureComponentContainer();
+    const { x: n, y: t } = this.cell.getBBox();
+    const { width: o, height: r } = this.cell.getSize();
+    const g = getComputedStyle(this.container).cursor;
+    const f = this.cell.getZIndex() ?? 0;
+    // Shrink the interactive width by the port hover radius (6px) so the right
+    // port circle is fully outside the componentContainer and never blocked by it.
+    // overflow:visible keeps the visual rendering intact.
+    const PORT_RADIUS = 6;
+    s.css(e, {
+      cursor: g, height: r + "px", width: (o - PORT_RADIUS) + "px",
+      overflow: "visible",
+      "z-index": f,
+      transform: `translate(${n}px, ${t}px) rotate(${this.cell.getAngle()}deg)`
+    });
+  }
+  updateHtmlContainerSize() {
+    const { graph: e } = this;
+    const t = e.transform.getMatrix();
+    const { offsetHeight: o, offsetWidth: r } = e.container;
+    const n = e.transform.getZoom();
+    const style = {
+      transform: `matrix(${t.a}, ${t.b}, ${t.c}, ${t.d}, ${t.e}, ${t.f})`,
+      width: r / n + "px",
+      height: o / n + "px",
+    };
+    // Update both layers
+    (e.htmlContainers || [e._htmlBack, e._htmlFront].filter(Boolean)).forEach(c => s.css(c, style));
+  }
+}
+
+l.registry.register(h, HTMLShapeView, true);
+p.registry.register(u, T, true);
+
+export { BaseHTMLShapeView, T as HTMLShape, u as HTMLShapeName, HTMLShapeView, h as HTMLView, a as action };
--- a/web/src/vendor/x6-html-shape/react.js
+++ b/web/src/vendor/x6-html-shape/react.js
@@ -0,0 +1,7 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-05-06 11:54:26 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-05-06 11:54:26 
+ */
+export { default } from "x6-html-shape/dist/react.js";
--- a/web/src/vendor/x6-html-shape/utils.js
+++ b/web/src/vendor/x6-html-shape/utils.js
@@ -0,0 +1,104 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-05-06 11:54:29 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-05-06 11:54:29 
+ */
+import { Dom as u, ObjectExt as l, Markup as c } from "@antv/x6";
+const o = "fo-shape-view";
+function p(t, e, r) {
+  e.addEventListener(t, function(n) {
+    r.dispatchEvent(new n.constructor(n.type, n)), n.preventDefault(), n.stopPropagation();
+  });
+}
+function s(t, e = 3) {
+  return !t || !u.isHTMLElement(t) || e <= 0 ? !1 : ["a", "button"].includes(u.tagName(t)) || t.getAttribute("role") === "button" || t.getAttribute("type") === "button" ? !0 : s(t.parentNode, e - 1);
+}
+function g(t) {
+  if (u.tagName(t) === "input") {
+    const r = t.getAttribute("type");
+    if (r == null || ["text", "password", "number", "email", "search", "tel", "url"].includes(
+      r
+    ))
+      return !0;
+  }
+  return !1;
+}
+function f(t = "rect", e = !0) {
+  return [
+    {
+      tagName: t,
+      selector: "body"
+    },
+    e ? c.getForeignObjectMarkup() : null,
+    {
+      tagName: "text",
+      selector: "label"
+    }
+  ].filter((r) => r);
+}
+function b(t) {
+  return {
+    view: t,
+    markup: f("rect", t === o),
+    attrs: {
+      body: {
+        // fill: "none",
+        // 这里很奇怪，none的时候不能触发节点移动，改成transparent可以触发
+        fill: "transparent",
+        stroke: "none",
+        refWidth: "100%",
+        refHeight: "100%"
+      },
+      label: {
+        fontSize: 14,
+        fill: "#333",
+        refX: "50%",
+        refY: "50%",
+        textAnchor: "middle",
+        textVerticalAnchor: "middle"
+      },
+      fo: {
+        refWidth: "100%",
+        refHeight: "100%"
+      }
+    },
+    propHooks(e) {
+      if (e.markup == null) {
+        const { primer: r, view: n } = e;
+        if (r && r !== "rect") {
+          e.markup = f(r, n === o);
+          let i = {};
+          r === "circle" ? i = {
+            refCx: "50%",
+            refCy: "50%",
+            refR: "50%"
+          } : r === "ellipse" && (i = {
+            refCx: "50%",
+            refCy: "50%",
+            refRx: "50%",
+            refRy: "50%"
+          }), e.attrs = l.merge(
+            {},
+            {
+              body: {
+                refWidth: null,
+                refHeight: null,
+                ...i
+              }
+            },
+            e.attrs || {}
+          );
+        }
+      }
+      return e;
+    }
+  };
+}
+export {
+  o as FOView,
+  s as clickable,
+  p as forwardEvent,
+  b as getConfig,
+  g as isInputElement
+};
--- a/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeConfigModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:25:37 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-07 22:35:08
+ * @Last Modified time: 2026-04-29 17:21:46
 */
 /**
 * Knowledge Configuration Modal
@@ -91,10 +91,14 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig

  useEffect(() => {
    if (values?.retrieve_type) {
+      const resetValues: KnowledgeConfigForm = {}
      const fieldsToReset = Object.keys(values).filter(key =>
        key !== 'kb_id' && key !== 'retrieve_type' && key !== 'top_k'
      ) as (keyof KnowledgeConfigForm)[];
-      form.resetFields(fieldsToReset);
+      fieldsToReset.forEach(key => {
+        resetValues[key] = undefined
+      })
+      form.setFieldsValue(resetValues);
    }
  }, [values?.retrieve_type])

--- a/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeGlobalConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/Knowledge/KnowledgeGlobalConfigModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:25:42 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-07 17:03:22
+ * @Last Modified time: 2026-04-29 17:21:05
 */
 /**
 * Knowledge Global Configuration Modal
@@ -67,7 +67,8 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno

  useEffect(() => {
    if (values?.rerank_model) {
-      form.setFieldsValue({ ...data })
+      const { rerank_model, ...rest } = data;
+      form.setFieldsValue({ ...rest })
    } else {
      form.setFieldsValue({ reranker_id: undefined, reranker_top_k: undefined })
    }
--- a/web/src/views/ApplicationConfig/components/ModelConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ModelConfigModal.tsx
@@ -49,6 +49,8 @@ const configFields = [
  { key: 'n', max: 10, min: 1, step: 1, defaultValue: 1 },
 ]

+const minThinkingBudgetTokens = 128;
+const defaultThinkingBudgetTokens = 1000;
 const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(({
  refresh,
  data,
@@ -108,7 +110,7 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
    const newValues: ModelConfig = {
      capability: (option as Model).capability,
      deep_thinking: false,
-      thinking_budget_tokens: undefined,
+      thinking_budget_tokens: defaultThinkingBudgetTokens,
      json_output: false,
    }
    if (source === 'chat') {
@@ -128,6 +130,12 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
    form.setFieldsValue({ ...rest })
  }, [data?.default_model_config_id])

+  useEffect(() => {
+    if (values?.deep_thinking && !values?.thinking_budget_tokens) {
+      form.setFieldValue('thinking_budget_tokens', defaultThinkingBudgetTokens)
+    }
+  }, [values?.deep_thinking])
+
  const handleReset = () => {
    if (!id) return
    resetAppModelConfig(id).then((res) => {
@@ -178,15 +186,20 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
          name="thinking_budget_tokens"
          label={t('application.thinking_budget_tokens')}
          hidden={!['model', 'chat'].includes(source) || !(values?.deep_thinking || values?.capability?.includes('thinking'))}
-          extra={<>{t('application.range')}: [{0}, {t(`application.max_tokens`)}: {values?.max_tokens}]</>}
+          extra={<>{t('application.range')}: [{minThinkingBudgetTokens}, {t(`application.max_tokens`)}: {values?.max_tokens}]</>}
          rules={[
            { required: values?.deep_thinking, message: t('common.pleaseEnter') },
            {
              validator: (_, value) => {
                const maxTokens = values?.max_tokens
                const deep_thinking = values?.deep_thinking;
-                if (deep_thinking && value !== undefined && maxTokens !== undefined && value > maxTokens) {
-                  return Promise.reject(t('application.thinking_budget_tokens_max_error', { max: maxTokens }))
+                if (deep_thinking && value !== undefined) {
+                  if (value < minThinkingBudgetTokens) {
+                    return Promise.reject(t('application.thinking_budget_tokens_min_error', { min: minThinkingBudgetTokens }))
+                  }
+                  if (maxTokens !== undefined && value > maxTokens) {
+                    return Promise.reject(t('application.thinking_budget_tokens_max_error', { max: maxTokens }))
+                  }
                }
                return Promise.resolve()
              }
@@ -195,7 +208,7 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
        >
          <RbSlider
            step={1}
-            min={0}
+            min={minThinkingBudgetTokens}
            max={32000}
            isInput={true}
            disabled={!values?.deep_thinking}
--- a/web/src/views/Ontology/index.tsx
+++ b/web/src/views/Ontology/index.tsx
@@ -166,10 +166,10 @@ const Ontology: FC = () => {
              <div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{item.scene_description}</div>
            </Tooltip>

-            <div className="rb:mt-2">
+            <div className="rb:mt-2 rb:h-5.5">
              <OverflowTags
                popoverProps={false}
-                items={[...item.entity_type?.map((type, i) => <Tag key={i} variant="borderless" color="dark">{type}</Tag>), <Tag variant="borderless" color="dark">{`+${item.type_num - 3}`}</Tag>]}
+                items={item.entity_type ? [...item.entity_type.map((type, i) => <Tag key={i} variant="borderless" color="dark">{type}</Tag>), <Tag variant="borderless" color="dark">{`+${item.type_num - 3}`}</Tag>] : []}
                numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${item.type_num - 3 + (num ? num - 1 : 0)}`}</Tag>}
              />
            </div>
--- a/web/src/views/ToolManagement/components/CustomToolModal.tsx
+++ b/web/src/views/ToolManagement/components/CustomToolModal.tsx
@@ -101,6 +101,7 @@ const CustomToolModal = forwardRef<CustomToolModalRef, CustomToolModalProps>(({
      });
  };
  const formatSchema = (value: string) => {
+    if (!value || value.trim() === '') return
    setParseSchemaData({} as ParseSchemaData)
    parseSchema({ schema_content: value })
      .then(res => {
--- a/web/src/views/Workflow/components/CanvasToolbar.tsx
+++ b/web/src/views/Workflow/components/CanvasToolbar.tsx
@@ -57,7 +57,6 @@ const CanvasToolbar: FC<CanvasToolbarProps> = ({
            }
          }}
          labelRender={(props) => {
-            console.log('props', props)
            return `${props.value}%`
          }}
          className="rb:w-20 rb:h-4!"
--- a/web/src/views/Workflow/components/Chat/Chat.tsx
+++ b/web/src/views/Workflow/components/Chat/Chat.tsx
@@ -66,8 +66,6 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
  const [fileList, setFileList] = useState<any[]>([])
  const [message, setMessage] = useState<string | undefined>(undefined)

-  console.log('abortRef', abortRef, chatList)
-
  /**
   * Opens the chat drawer and loads workflow variables from the start node
   */
--- a/web/src/views/Workflow/components/Nodes/AddNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/AddNode.tsx
@@ -4,194 +4,22 @@
 * @Last Modified by: ZhaoYing
 * @Last Modified time: 2026-03-30 11:55:10
 */
-import { useState } from 'react';
-import { Popover, Flex } from 'antd';
-import clsx from 'clsx';
+import { Flex } from 'antd';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
-import { nodeLibrary, graphNodeLibrary, edgeAttrs, nodeWidth } from '../../constant';
-import { useTranslation } from 'react-i18next';

-const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
+const AddNode: ReactShapeConfig['component'] = ({ node }) => {
  const data = node?.getData() || {};
-  const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
-
-  // Handle node selection from popover and create new node replacing the add-node placeholder
-  const handleNodeSelect = (selectedNodeType: any) => {
-    const parentBBox = node.getBBox();
-    const cycleId = data.cycle;
-    const horizontalSpacing = 0;
-
-    const id = `${selectedNodeType.type.replace(/-/g, '_') }_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
-    const newNode = graph.addNode({
-      ...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default),
-      x: parentBBox.x + horizontalSpacing,
-      y: parentBBox.y - 12,
-      id,
-      data: {
-        id,
-        type: selectedNodeType.type,
-        icon: selectedNodeType.icon,
-        name: t(`workflow.${selectedNodeType.type}`),
-        cycle: cycleId,
-        parentId: data.parentId,
-        config: selectedNodeType.config || {}
-      },
-    });
-
-    // Add new node as child of parent node
-    if (cycleId) {
-      const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
-      if (parentNode) {
-        parentNode.addChild(newNode);
-      }
-    }
-
-    const incomingEdges = graph.getIncomingEdges(node);
-    const outgoingEdges = graph.getOutgoingEdges(node);
-    const addedEdges: any[] = [];
-
-    incomingEdges?.forEach((edge: any) => {
-      addedEdges.push(graph.addEdge({
-        source: { cell: edge.getSourceCellId(), port: edge.getSourcePortId() },
-        target: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'left')?.id || 'left' },
-        ...edgeAttrs
-      }));
-    });
-
-    outgoingEdges?.forEach((edge: any) => {
-      const targetCell = graph.getCellById(edge.getTargetCellId()) as any;
-      const targetPortId = targetCell?.getPorts?.()?.find((port: any) => port.group === 'left')?.id || edge.getTargetPortId();
-      addedEdges.push(graph.addEdge({
-        source: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'right')?.id || 'right' },
-        target: { cell: edge.getTargetCellId(), port: targetPortId },
-        ...edgeAttrs
-      }));
-    });
-
-    // Remove all add-node type nodes
-    graph.getNodes().forEach((n: any) => {
-      if (n.getData()?.type === 'add-node' && n.getData()?.cycle === cycleId) {
-        n.remove();
-      }
-    });
-
-    setTimeout(() => {
-      addedEdges.forEach(e => {
-        const src = graph.getCellById(e.getSourceCellId());
-        const tgt = graph.getCellById(e.getTargetCellId());
-        if (src?.isNode()) src.toFront();
-        if (tgt?.isNode()) tgt.toFront();
-      });
-    }, 50);
-
-    // Automatically adjust loop node size
-    const loopNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
-    if (loopNode) {
-      const adjustLoopSize = () => {
-        const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === cycleId);
-        if (childNodes.length > 0) {
-          const bounds = childNodes.reduce((acc, child) => {
-            const bbox = child.getBBox();
-            return {
-              minX: Math.min(acc.minX, bbox.x),
-              minY: Math.min(acc.minY, bbox.y),
-              maxX: Math.max(acc.maxX, bbox.x + bbox.width),
-              maxY: Math.max(acc.maxY, bbox.y + bbox.height)
-            };
-          }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
-          
-          const padding = 50;
-          const newWidth = Math.max(nodeWidth, bounds.maxX - bounds.minX + padding * 2);
-          const newHeight = Math.max(120, bounds.maxY - bounds.minY + padding * 2);
-          
-          loopNode.prop('size', { width: newWidth, height: newHeight });
-          
-          // Update right port x position
-          const ports = loopNode.getPorts();
-          ports.forEach(port => {
-            if (port.group === 'right' && port.args) {
-              loopNode.portProp(port.id!, 'args/x', newWidth);
-            }
-          });
-        }
-      };
-      
-      adjustLoopSize();
-      
-      // Listen to child node movement events
-      const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === cycleId);
-      childNodes.forEach((childNode: any) => {
-        childNode.on('change:position', adjustLoopSize);
-      });
-    }
-    setOpen(false);
-  };
-
-  const content = (
-    <div style={{ maxHeight: '300px', overflowY: 'auto', minWidth: `${nodeWidth}px'` }}>
-      {nodeLibrary.map((category, categoryIndex) => {
-        const filteredNodes = category.nodes.filter(nodeType => 
-          nodeType.type !== 'start' && nodeType.type !== 'end' && nodeType.type !== 'iteration' && nodeType.type !== 'loop' && nodeType.type !== 'cycle-start'
-        );
-        
-        if (filteredNodes.length === 0) return null;
-        
-        return (
-          <div key={category.category}>
-            {categoryIndex > 0 && <div style={{ height: '1px', background: '#f0f0f0', margin: '4px 0' }} />}
-            <div style={{ padding: '4px 12px', fontSize: '12px', color: '#999', fontWeight: 'bold' }}>
-              {t(`workflow.${category.category}`)}
-            </div>
-            {filteredNodes.map((nodeType) => (
-              <div
-                key={nodeType.type}
-                style={{
-                  padding: '8px 12px',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px',
-                }}
-                onClick={() => handleNodeSelect(nodeType)}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = '#f0f8ff';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'white';
-                }}
-              >
-                <div className={`rb:size-4 rb:bg-cover ${nodeType.icon}`} />
-                <span style={{ fontSize: '14px' }}>{t(`workflow.${nodeType.type}`)}</span>
-              </div>
-            ))}
-          </div>
-        );
-      })}
-    </div>
-  );

  return (
-    <Popover
-      content={content}
-      trigger="click"
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottomLeft"
+    <Flex
+      align="center"
+      justify="center"
+      gap={4}
+      className="rb:text-[#212332] rb:font-medium rb:text-[12px] rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:border rb:rounded-lg rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:border-[#FCFCFD] rb:flex rb:items-center rb:justify-center"
    >
-      <Flex
-        align="center"
-        justify="center"
-        gap={4}
-        className={clsx('rb:text-[#212332] rb:font-medium rb:text-[12px] rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:border rb:rounded-lg rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:border-[#FCFCFD] rb:flex rb:items-center rb:justify-center', {
-          'rb:border-orange-500 rb:border-[3px] rb:bg-[#FCFCFD] rb:text-[#475467]': data.isSelected,
-          'rb:border-[#d1d5db] rb:bg-[#FCFCFD] rb:text-[#374151]': !data.isSelected
-        })}
-      >
-        <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/workflow/node_plus.png')]"></div>
-        {data.label}
-      </Flex>
-    </Popover>
+      <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/workflow/node_plus.png')]"></div>
+      {data.label}
+    </Flex>
  );
 };

--- a/web/src/views/Workflow/components/Nodes/ConditionNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/ConditionNode.tsx
@@ -99,7 +99,7 @@ const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
      {data.type === 'if-else' &&
        <Flex vertical gap={4} className="rb:mt-3!">
          {data.config?.cases?.defaultValue.map((item: any, index: number) => (
-            <div key={index} className={item.expressions.length > 0 ? '' : 'rb:mb-1'}>
+            <div key={index}>
              <Flex justify={item.expressions.length > 0 ? "space-between" : 'end'} className="rb:mb-1! rb:leading-4">
                {item.expressions.length > 0 && <span className="rb:text-[#5B6167] rb:text-[10px] rb:pl-1">CASE{index + 1}</span>}
                <span className="rb:text-[#212332] rb:font-medium rb:text-[12px]">{index === 0 ? 'IF' : `ELIF`}</span>
--- a/web/src/views/Workflow/components/Nodes/LoopNode.tsx
+++ b/web/src/views/Workflow/components/Nodes/LoopNode.tsx
@@ -1,134 +1,15 @@
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next'
 import clsx from 'clsx';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
 import { Flex } from 'antd';
 import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next'

-import { graphNodeLibrary, edgeAttrs } from '../../constant';
 import NodeTools from './NodeTools'

-const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
+const LoopNode: ReactShapeConfig['component'] = ({ node }) => {
  const data = node.getData() || {};
  const { t } = useTranslation()

-  useEffect(() => {
-    // 使用setTimeout确保在所有节点都添加完成后再创建连线
-    const timer = setTimeout(() => {
-      initNodes()
-      checkAndAddAddNode()
-    }, 50)
-    
-    return () => clearTimeout(timer)
-  }, [graph])
-
-  const checkAndAddAddNode = () => {
-    if (!graph) return;
-    
-    const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === data.id);
-    const cycleStartNodes = childNodes.filter((n: any) => n.getData()?.type === 'cycle-start');
-    
-    // 如果只有一个cycle-start节点且没有其他类型的子节点，则添加add-node
-    if (cycleStartNodes.length === 1 && childNodes.length === 1) {
-      const cycleStartNode = cycleStartNodes[0];
-      const cycleStartBBox = cycleStartNode.getBBox();
-      
-      const addNode = graph.addNode({
-        ...graphNodeLibrary.addStart,
-        x: cycleStartBBox.x + 84,
-        y: cycleStartBBox.y + 4,
-        data: {
-          type: 'add-node',
-          label: t('workflow.addNode'),
-          icon: '+',
-          parentId: node.id,
-          cycle: data.id,
-        },
-      });
-      
-      node.addChild(addNode);
-      
-      // 连接cycle-start和add-node
-      const sourcePorts = cycleStartNode.getPorts();
-      const targetPorts = addNode.getPorts();
-      const sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
-      const targetPort = targetPorts.find((port: any) => port.group === 'left')?.id || 'left';
-
-      // 然后创建连线
-      graph.addEdge({
-        source: { cell: cycleStartNode.id, port: sourcePort },
-        target: { cell: addNode.id, port: targetPort },
-        ...edgeAttrs,
-      });
-
-      cycleStartNode.toFront()
-      addNode.toFront()
-    }
-  }
-
-  const initNodes = () => {
-    // 检查是否存在cycle为当前节点ID的子节点，若存在则不调用initNodes，避免重复创建
-    const existingCycleNodes = graph.getNodes().filter((n: any) => 
-      n.getData()?.cycle === data.id
-    );
-    if (existingCycleNodes.length > 0) return;
-    // 添加默认子节点
-    const parentBBox = node.getBBox();
-    const centerX = parentBBox.x + 24;
-    const centerY = parentBBox.y + 70;
-
-    const cycleStartNodeId = `cycle_start_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
-    const cycleStartNode = graph.addNode({
-      ...graphNodeLibrary.cycleStart,
-      x: centerX,
-      y: centerY,
-      id: cycleStartNodeId,
-      data: {
-        id: cycleStartNodeId,
-        type: 'cycle-start',
-        parentId: node.id,
-        isDefault: true, // 标记为默认节点，不可删除
-        cycle: data.id,
-      },
-    });
-    const addNode = graph.addNode({
-      ...graphNodeLibrary.addStart,
-      x: centerX + 84,
-      y: centerY + 4,
-      data: {
-        type: 'add-node',
-        label: t('workflow.addNode'),
-        icon: '+',
-        parentId: node.id,
-        cycle: data.id,
-      },
-    });
-    node.addChild(cycleStartNode)
-    node.addChild(addNode)
-    const sourcePorts = cycleStartNode.getPorts()
-    const targetPorts = addNode.getPorts()
-    let sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
-
-    const edgeConfig = {
-      source: {
-        cell: cycleStartNode.id,
-        port: sourcePort
-      },
-      target: {
-        cell: addNode.id,
-        port: targetPorts.find((port: any) => port.group === 'left')?.id || 'left'
-      },
-      ...edgeAttrs
-    }
-    graph.addEdge(edgeConfig)
-
-    setTimeout(() => {
-
-      cycleStartNode.toFront()
-      addNode.toFront()
-    }, 0)
-  }
-
  return (
    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-3 rb:border rb:rounded-2xl rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)]', {
      'rb:border-[#171719]!': data.isSelected && !data.executionStatus,
--- a/web/src/views/Workflow/components/PortClickHandler.tsx
+++ b/web/src/views/Workflow/components/PortClickHandler.tsx
@@ -1,14 +1,49 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-02-09 18:30:28 
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-30 15:14:02
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2026-05-06 11:46:02
 */
 import { useEffect, useState } from 'react';
 import { Flex, Popover } from 'antd';
 import { useTranslation } from 'react-i18next';
+import { createPortal } from 'react-dom';
+
 import { nodeLibrary, graphNodeLibrary, edgeAttrs, nodeWidth } from '../constant';

+
+// Shared helper: adjust loop/iteration container size to fit child nodes
+export const adjustCycleContainerSize = (graph: any, cycleId: string) => {
+  const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
+  if (parentNode) {
+    const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === cycleId);
+    if (childNodes.length > 0) {
+      const bounds = childNodes.reduce((acc: any, child: any) => {
+        const b = child.getBBox();
+        return {
+          minX: Math.min(acc.minX, b.x),
+          minY: Math.min(acc.minY, b.y),
+          maxX: Math.max(acc.maxX, b.x + b.width),
+          maxY: Math.max(acc.maxY, b.y + b.height)
+        };
+      }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
+      const padding = 50;
+      const newWidth = Math.max(nodeWidth, bounds.maxX - bounds.minX + padding * 2);
+      const newHeight = Math.max(120, bounds.maxY - bounds.minY + padding * 2);
+      parentNode.prop('size', { width: newWidth, height: newHeight });
+      parentNode.getPorts().forEach((port: any) => {
+        if (port.group === 'right' && port.args) {
+          parentNode.portProp(port.id!, 'args/x', newWidth);
+        }
+      });
+      // childNodes.forEach((childNode: any) => {
+      //   childNode.off('change:position');
+      //   childNode.on('change:position', () => adjustCycleContainerSize(graph, cycleId));
+      // });
+    }
+  }
+};
+
 interface PortClickHandlerProps {
  graph: any;
 }
@@ -16,7 +51,6 @@ interface PortClickHandlerProps {
 const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
  const { t } = useTranslation();
  const [popoverVisible, setPopoverVisible] = useState(false);
-  const [popoverPosition, setPopoverPosition] = useState({ x: 0, y: 0 });
  const [sourceNode, setSourceNode] = useState<any>(null);
  const [sourcePort, setSourcePort] = useState<string>('');
  const [tempElement, setTempElement] = useState<HTMLElement | null>(null);
@@ -24,12 +58,11 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {

  useEffect(() => {
    const handlePortClick = (event: CustomEvent) => {
-      const { node, port, element, rect, edgeInsertion } = event.detail;
+      const { node, port, element, edgeInsertion } = event.detail;
      setSourceNode(node);
      setSourcePort(port);
      setTempElement(element);
      setEdgeInsertion(edgeInsertion || null);
-      setPopoverPosition({ x: rect.left, y: rect.top });
      setPopoverVisible(true);
    };

@@ -43,70 +76,114 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
    };
  }, []);

-  // Handle node selection from popover menu and create new node with edge connection
  const handleNodeSelect = (selectedNodeType: any) => {
    if (!sourceNode || !graph) return;

    const sourceNodeData = sourceNode.getData();
    const sourceNodeType = sourceNodeData?.type;
+    const isCycleSubNode = !!sourceNodeData.cycle;
+    const isCycleContainer = (type: string) => type === 'loop' || type === 'iteration';
+    const newNodeType = selectedNodeType.type;
+
+    // Save add-node placeholder position before disabling history
+
+    // AddNode placeholder mode: replace the add-node placeholder with the selected node
+    if (sourceNodeType === 'add-node') {
+      const placeholderBBox = sourceNode.getBBox();
+      const cycleId = sourceNodeData.cycle;
+      const id = `${selectedNodeType.type.replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      const newNode = graph.addNode({
+        ...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default),
+        x: placeholderBBox.x,
+        y: placeholderBBox.y - 12,
+        id,
+        data: {
+          id,
+          type: selectedNodeType.type,
+          icon: selectedNodeType.icon,
+          name: t(`workflow.${selectedNodeType.type}`),
+          cycle: cycleId,
+          parentId: sourceNodeData.parentId,
+          config: selectedNodeType.config || {},
+        },
+      });
+      if (cycleId) {
+        const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
+        if (parentNode) parentNode.addChild(newNode);
+      }
+      const incomingEdges = graph.getIncomingEdges(sourceNode);
+      const outgoingEdges = graph.getOutgoingEdges(sourceNode);
+      const addedEdges: any[] = [];
+      incomingEdges?.forEach((edge: any) => {
+        addedEdges.push(graph.addEdge({
+          source: { cell: edge.getSourceCellId(), port: edge.getSourcePortId() },
+          target: { cell: newNode.id, port: newNode.getPorts().find((p: any) => p.group === 'left')?.id || 'left' },
+          ...edgeAttrs,
+        }));
+      });
+      outgoingEdges?.forEach((edge: any) => {
+        const targetCell = graph.getCellById(edge.getTargetCellId()) as any;
+        const targetPortId = targetCell?.getPorts?.()?.find((p: any) => p.group === 'left')?.id || edge.getTargetPortId();
+        addedEdges.push(graph.addEdge({
+          source: { cell: newNode.id, port: newNode.getPorts().find((p: any) => p.group === 'right')?.id || 'right' },
+          target: { cell: edge.getTargetCellId(), port: targetPortId },
+          ...edgeAttrs,
+        }));
+      });
+      graph.getNodes().forEach((n: any) => {
+        if (n.getData()?.type === 'add-node' && n.getData()?.cycle === cycleId) n.remove();
+      });
+      setTimeout(() => {
+        addedEdges.forEach(e => {
+          const src = graph.getCellById(e.getSourceCellId());
+          const tgt = graph.getCellById(e.getTargetCellId());
+          if (src?.isNode()) src.toFront();
+          if (tgt?.isNode()) tgt.toFront();
+        });
+      }, 50);
+      if (cycleId) adjustCycleContainerSize(graph, cycleId);
+      if (tempElement) { document.body.removeChild(tempElement); setTempElement(null); }
+      setPopoverVisible(false);
+      return;
+    }
    
    // If it's a cycle-start node, handle the add-node placeholder
    let addNodePosition = null;
-    const isCycleSubNode = sourceNodeData.cycle
    if (isCycleSubNode && sourceNodeType === 'cycle-start') {
      const cycleId = sourceNodeData.cycle;
-      const addNodes = graph.getNodes().filter((n: any) => 
+      const addNodes = graph.getNodes().filter((n: any) =>
        n.getData()?.type === 'add-node' && n.getData()?.cycle === cycleId
      );
-      
-      if (addNodes.length > 0) {
-        const addNode = addNodes[0];
-        addNodePosition = addNode.getBBox();
-        addNode.remove();
-      }
+      if (addNodes.length > 0) addNodePosition = addNodes[0].getBBox();
    }
-    
-    // Calculate new node position to avoid overlapping
+
+    // Calculate position
    const sourceBBox = sourceNode.getBBox();
-    const nodeWidth = graphNodeLibrary[selectedNodeType.type]?.width || 120;
-    const nodeHeight = graphNodeLibrary[selectedNodeType.type]?.height || 88;
-    const horizontalSpacing = isCycleSubNode ? 48 : 80;
-    const verticalSpacing = 10;
-    
-    // Get source port group information
+    const nw = graphNodeLibrary[newNodeType]?.width || 120;
+    const nh = graphNodeLibrary[newNodeType]?.height || 88;
+    const hSpacing = isCycleSubNode ? 48 : 80;
+    const vSpacing = 10;
    const sourcePortInfo = sourceNode.getPorts().find((p: any) => p.id === sourcePort);
    const sourcePortGroup = sourcePortInfo?.group || sourcePort;
-    
-    // Calculate new node position
-    let newX, newY;
+
+    let newX: number, newY: number;
    if (edgeInsertion) {
-      // Edge insertion: place new node on the same row as target, between source and target
      const targetBBox = edgeInsertion.targetCell.getBBox();
      const gap = targetBBox.x - (sourceBBox.x + sourceBBox.width);
-      const requiredSpace = nodeWidth + horizontalSpacing * 4;
-
-      // New node x: right after source + spacing
-      newX = sourceBBox.x + sourceBBox.width + horizontalSpacing;
-      // Same row as target node
-      newY = targetBBox.y + (targetBBox.height - nodeHeight) / 2;
-
-      // If not enough space, shift target and all downstream nodes to the right
+      const requiredSpace = nw + hSpacing * 4;
+      newX = sourceBBox.x + sourceBBox.width + hSpacing;
+      newY = targetBBox.y + (targetBBox.height - nh) / 2;
      if (gap < requiredSpace) {
        const shiftX = requiredSpace - gap;
        const visited = new Set<string>();
        const shiftDownstream = (cell: any) => {
-          const cellId = cell.id;
-          if (visited.has(cellId)) return;
-          visited.add(cellId);
+          if (visited.has(cell.id)) return;
+          visited.add(cell.id);
          const pos = cell.getPosition();
          cell.setPosition(pos.x + shiftX, pos.y);
-          // Recursively shift nodes connected from right ports
          graph.getConnectedEdges(cell, { outgoing: true }).forEach((e: any) => {
-            const tId = e.getTargetCellId();
-            if (tId && !visited.has(tId)) {
-              const tCell = graph.getCellById(tId);
-              if (tCell?.isNode()) shiftDownstream(tCell);
-            }
+            const tCell = graph.getCellById(e.getTargetCellId());
+            if (tCell?.isNode()) shiftDownstream(tCell);
          });
        };
        shiftDownstream(edgeInsertion.targetCell);
@@ -114,208 +191,154 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
    } else if (addNodePosition) {
      newX = addNodePosition.x;
      newY = addNodePosition.y;
+    } else if (sourcePortGroup === 'left') {
+      newX = sourceBBox.x - nw * 2 - hSpacing;
+      newY = sourceBBox.y;
    } else {
-      // Determine node placement direction based on port position
-      if (sourcePortGroup === 'left') {
-      // Left port: add node to the left
-        newX = sourceBBox.x - nodeWidth*2 - horizontalSpacing;
-        newY = sourceBBox.y;
-      } else {
-        // Right port: add node to the right
-        newX = sourceBBox.x + sourceBBox.width + horizontalSpacing;
-        newY = sourceBBox.y;
-      }
-      
-      // Check if position overlaps with existing nodes (only consider connected nodes)
-      const checkOverlap = (x: number, y: number) => {
-      // Get nodes connected to the source node
-        const connectedNodes = new Set();
-        graph.getConnectedEdges(sourceNode).forEach((edge: any) => {
-          const sourceId = edge.getSourceCellId();
-          const targetId = edge.getTargetCellId();
-          if (sourceId !== sourceNode.id) connectedNodes.add(sourceId);
-          if (targetId !== sourceNode.id) connectedNodes.add(targetId);
+      newX = sourceBBox.x + sourceBBox.width + hSpacing;
+      newY = sourceBBox.y;
+      const connectedNodes = new Set<string>();
+      graph.getConnectedEdges(sourceNode).forEach((e: any) => {
+        [e.getSourceCellId(), e.getTargetCellId()].forEach((cid: string) => {
+          if (cid !== sourceNode.id) connectedNodes.add(cid);
        });
-        
-        return graph.getNodes().some((node: any) => {
-          if (node.id === sourceNode.id) return false;
-          if (!connectedNodes.has(node.id)) return false; // Only consider connected nodes
-          const bbox = node.getBBox();
-          return !(x + nodeWidth < bbox.x || x > bbox.x + bbox.width || 
-                  y + nodeHeight < bbox.y || y > bbox.y + bbox.height);
+      });
+      const checkOverlap = (x: number, y: number) =>
+        graph.getNodes().some((n: any) => {
+          if (n.id === sourceNode.id || !connectedNodes.has(n.id)) return false;
+          const b = n.getBBox();
+          return !(x + nw < b.x || x > b.x + b.width || y + nh < b.y || y > b.y + b.height);
        });
-      };
-
-      // If position is occupied, search downward for empty space
-      while (checkOverlap(newX, newY)) {
-        newY += nodeHeight + verticalSpacing;
-      }
+      while (checkOverlap(newX, newY)) newY += nh + vSpacing;
    }
-    
-    // Create new node
-    const id = `${selectedNodeType.type.replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+
+    // Disable history for all graph mutations
+    graph.disableHistory();
+
+    // Remove add-node placeholder
+    if (isCycleSubNode && sourceNodeType === 'cycle-start') {
+      const cycleId = sourceNodeData.cycle;
+      graph.getNodes()
+        .filter((n: any) => n.getData()?.type === 'add-node' && n.getData()?.cycle === cycleId)
+        .forEach((n: any) => n.remove());
+    }
+
+    const id = `${newNodeType.replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    const newNode = graph.addNode({
-      ...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default),
+      ...(graphNodeLibrary[newNodeType] || graphNodeLibrary.default),
      x: newX,
      y: newY - (isCycleSubNode && sourceNodeType === 'cycle-start' ? 12 : 0),
      id,
      data: {
        id,
-        type: selectedNodeType.type,
+        type: newNodeType,
        icon: selectedNodeType.icon,
-        name: t(`workflow.${selectedNodeType.type}`),
-        cycle: sourceNodeData.cycle, // Inherit cycle from source node
+        name: t(`workflow.${newNodeType}`),
+        cycle: sourceNodeData.cycle,
        config: selectedNodeType.config || {}
      },
    });

-    // Add new node as child of parent node
    if (sourceNodeData.cycle) {
      const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle);
-      if (parentNode) {
-        parentNode.addChild(newNode);
-      }
+      if (parentNode) parentNode.addChild(newNode, { silent: true });
    }

-    // Edge insertion: remove old edge immediately before creating new edges
    if (edgeInsertion) {
      const { edge: oldEdge } = edgeInsertion;
-      if (oldEdge.id && graph.getCellById(oldEdge.id)) {
-        graph.removeCell(oldEdge.id);
-      } else {
-        graph.removeEdge(oldEdge);
-      }
+      if (oldEdge.id && graph.getCellById(oldEdge.id)) graph.removeCell(oldEdge.id);
+      else graph.removeEdge(oldEdge);
    }

-    // Create edge connection
-    setTimeout(() => {
-      const newPorts = newNode.getPorts();
+    const newPorts = newNode.getPorts();
+    const addedCells: any[] = [newNode];

-      const addedEdges: any[] = [];
-      if (edgeInsertion) {
-        // Edge insertion: create source→new and new→target edges
-        const { targetCell, targetPort: origTargetPort } = edgeInsertion;
-        const newLeftPort = newPorts.find((p: any) => p.group === 'left')?.id || 'left';
-        const newRightPort = newPorts.find((p: any) => p.group === 'right')?.id || 'right';
-        addedEdges.push(graph.addEdge({
-          source: { cell: sourceNode.id, port: sourcePort },
-          target: { cell: newNode.id, port: newLeftPort },
-          ...edgeAttrs
-        }));
-        addedEdges.push(graph.addEdge({
-          source: { cell: newNode.id, port: newRightPort },
-          target: { cell: targetCell.id, port: origTargetPort },
-          ...edgeAttrs
-        }));
-        setEdgeInsertion(null);
-      } else if (sourcePortGroup === 'left') {
-        // Connect from left port to new node's right side
-        const targetPort = newPorts.find((port: any) => port.group === 'right')?.id || 'right';
-        addedEdges.push(graph.addEdge({
-          source: { cell: newNode.id, port: targetPort },
-          target: { cell: sourceNode.id, port: sourcePort },
-          ...edgeAttrs
-        }));
-      } else {
-        // Connect from right port to new node's left side
-        const targetPort = newPorts.find((port: any) => port.group === 'left')?.id || 'left';
-        addedEdges.push(graph.addEdge({
-          source: { cell: sourceNode.id, port: sourcePort },
-          target: { cell: newNode.id, port: targetPort },
-          ...edgeAttrs
-        }));
-      }
+    const addedEdges: any[] = [];
+    if (edgeInsertion) {
+      // Edge insertion: create source→new and new→target edges
+      const { targetCell, targetPort: origTargetPort } = edgeInsertion;
+      const newLeftPort = newPorts.find((p: any) => p.group === 'left')?.id || 'left';
+      const newRightPort = newPorts.find((p: any) => p.group === 'right')?.id || 'right';
+      addedEdges.push(graph.addEdge({ source: { cell: sourceNode.id, port: sourcePort }, target: { cell: newNode.id, port: newLeftPort }, ...edgeAttrs }));
+      addedEdges.push(graph.addEdge({ source: { cell: newNode.id, port: newRightPort }, target: { cell: targetCell.id, port: origTargetPort }, ...edgeAttrs }));
+      setEdgeInsertion(null);
+    } else {
+      // Connect from right port to new node's left side
+      const tp = newPorts.find((p: any) => p.group === 'left')?.id || 'left';
+      addedEdges.push(graph.addEdge({ source: { cell: sourceNode.id, port: sourcePort }, target: { cell: newNode.id, port: tp }, ...edgeAttrs }));
+    }
      
+    // If adding a loop/iteration node, create cycle-start, add-node and inner edge regardless of source type
+    if (isCycleContainer(newNodeType)) {
+      const parentBBox = newNode.getBBox();
+      const cycleStartId = `cycle_start_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      const cycleStartNode = graph.addNode({
+        ...graphNodeLibrary.cycleStart,
+        x: parentBBox.x + 24,
+        y: parentBBox.y + 70,
+        id: cycleStartId,
+        data: { id: cycleStartId, type: 'cycle-start', parentId: id, isDefault: true, cycle: id },
+      });
+      const addNodePlaceholder = graph.addNode({
+        ...graphNodeLibrary.addStart,
+        x: parentBBox.x + 24 + 84,
+        y: parentBBox.y + 70 + 4,
+        data: { type: 'add-node', label: t('workflow.addNode'), icon: '+', parentId: id, cycle: id },
+      });
+      newNode.addChild(cycleStartNode, { silent: true });
+      newNode.addChild(addNodePlaceholder, { silent: true });
+      const innerEdge = graph.addEdge({
+        source: { cell: cycleStartNode.id, port: cycleStartNode.getPorts().find((p: any) => p.group === 'right')?.id || 'right' },
+        target: { cell: addNodePlaceholder.id, port: addNodePlaceholder.getPorts().find((p: any) => p.group === 'left')?.id || 'left' },
+        ...edgeAttrs,
+      });
+      addedCells.push(cycleStartNode, addNodePlaceholder, innerEdge);
+    }
+
      // Adjust loop node size when child node is added via port within loop node
      const cycleId = sourceNodeData.cycle;
      if (cycleId) {
-        const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
-
-        if (parentNode) {
-          const adjustLoopSize = () => {
-            const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === cycleId);
-            if (childNodes.length > 0) {
-              const bounds = childNodes.reduce((acc: any, child: any) => {
-                const bbox = child.getBBox();
-                return {
-                  minX: Math.min(acc.minX, bbox.x),
-                  minY: Math.min(acc.minY, bbox.y),
-                  maxX: Math.max(acc.maxX, bbox.x + bbox.width),
-                  maxY: Math.max(acc.maxY, bbox.y + bbox.height)
-                };
-              }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
-
-              const padding = 50;
-              const newWidth = Math.max(nodeWidth, bounds.maxX - bounds.minX + padding * 2);
-              const newHeight = Math.max(120, bounds.maxY - bounds.minY + padding * 2);
-
-              parentNode.prop('size', { width: newWidth, height: newHeight });
-              
-              // Update right port x position
-              const ports = parentNode.getPorts();
-              ports.forEach((port: any) => {
-                if (port.group === 'right' && port.args) {
-                  parentNode.portProp(port.id!, 'args/x', newWidth);
-                }
-              });
-            }
-          }; 
-          
-          adjustLoopSize();
-          
-          // Listen to child node movement events
-          const childNodes = graph.getNodes().filter((n: any) => n.getData()?.cycle === cycleId);
-          childNodes.forEach((childNode: any) => {
-            childNode.on('change:position', adjustLoopSize);
-          });
-        }
+        adjustCycleContainerSize(graph, cycleId);
      }

-      const isCycleContainer = (type: string) => type === 'loop' || type === 'iteration';
-      const newNodeType = selectedNodeType.type;
+    // toFront
+    const bringCycleChildrenToFront = (cycleContainerId: string) => {
+      graph.getEdges().forEach((e: any) => {
+        const src = graph.getCellById(e.getSourceCellId());
+        const tgt = graph.getCellById(e.getTargetCellId());
+        if (src?.getData()?.cycle === cycleContainerId || tgt?.getData()?.cycle === cycleContainerId) e.toFront();
+      });
+      graph.getNodes().forEach((n: any) => { if (n.getData()?.cycle === cycleContainerId) n.toFront(); });
+    };

-      // Helper: bring all child nodes and their edges of a cycle container to front
-      const bringCycleChildrenToFront = (cycleContainerId: string) => {
-        
-        graph.getEdges().forEach((e: any) => {
-          const src = graph.getCellById(e.getSourceCellId());
-          const tgt = graph.getCellById(e.getTargetCellId());
-          if (src?.getData()?.cycle === cycleContainerId || tgt?.getData()?.cycle === cycleContainerId) e.toFront();
-        });
-        graph.getNodes().forEach((n: any) => {
-          if (n.getData()?.cycle === cycleContainerId) n.toFront();
-        });
-      };
+    if (isCycleContainer(sourceNodeType)) {
+      newNode.toFront(); sourceNode.toFront(); bringCycleChildrenToFront(sourceNodeData.id);
+      if (isCycleContainer(newNodeType)) bringCycleChildrenToFront(id);
+    } else if (isCycleContainer(newNodeType)) {
+      newNode.toFront(); sourceNode.toFront(); bringCycleChildrenToFront(id);
+    } else {
+      addedCells.forEach(c => { if (c.isNode?.()) c.toFront(); });
+    }

-      if (isCycleContainer(sourceNodeType)) {
-        console.log('isCycleContainer(sourceNodeType)')
-        // Case 4: source is a loop/iteration node — bring new node to front, then its children
-        newNode.toFront();
-        sourceNode.toFront();
-        bringCycleChildrenToFront(sourceNodeData.id);
-      } else if (isCycleContainer(newNodeType)) {
-        console.log('isCycleContainer(newNodeType)')
-        // Case 3: adding a loop/iteration node from a normal node — bring new node to front, then its children
-        newNode.toFront();
-        sourceNode.toFront()
-        bringCycleChildrenToFront(id);
-      } else {
-        // Case 2: normal node → normal node
-        addedEdges.forEach(e => {
-          const src = graph.getCellById(e.getSourceCellId());
-          const tgt = graph.getCellById(e.getTargetCellId());
-          if (src?.isNode()) src.toFront();
-          if (tgt?.isNode()) tgt.toFront();
-        });
-      }
-    }, 50);
+    // Re-enable history and manually push one batch frame for all added cells
+    graph.enableHistory();
+    const history = graph.getPlugin('history') as any;
+    if (history) {
+      const batchFrame = [...addedCells, ...addedEdges].map((cell: any) => ({
+        batch: true,
+        event: 'cell:added',
+        data: { id: cell.id, node: cell.isNode(), edge: cell.isEdge(), props: cell.toJSON() },
+        options: {},
+      }));
+      history.undoStack.push(batchFrame);
+      history.redoStack = [];
+      graph.trigger('history:change', { cmds: batchFrame, options: { name: 'add-node' } });
+    }

-    // Clean up temporary element
    if (tempElement) {
      document.body.removeChild(tempElement);
      setTempElement(null);
    }
-    
    setPopoverVisible(false);
  };

@@ -372,7 +395,7 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {

  if (!tempElement) return null;

-  return (
+  return createPortal(
    <Popover
      content={content}
      open={popoverVisible}
@@ -380,15 +403,13 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
        if (!visible) handlePopoverClose();
      }}
      placement="right"
-      overlayStyle={{
-        position: 'fixed',
-        left: popoverPosition.x + 10,
-        top: popoverPosition.y - 10,
-      }}
+      autoAdjustOverflow
+      getPopupContainer={() => document.body}
    >
-      <div />
-    </Popover>
+      <div style={{ width: '1px', height: '1px' }} />
+    </Popover>,
+    tempElement
  );
 };

-export default PortClickHandler;
+export default PortClickHandler;
--- a/web/src/views/Workflow/components/Properties/CaseList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/CaseList/index.tsx
@@ -355,14 +355,13 @@ const CaseList: FC<CaseListProps> = ({
  // Update node ports based on case count changes (add/remove cases)
  const updateNodePorts = (caseCount: number, removedCaseIndex?: number) => {
    if (!selectedNode || !graphRef?.current) return;
-    
-    // Get current port count to determine if it's an add or remove operation
-    const currentPorts = selectedNode.getPorts().filter((port: any) => port.group === 'right');
-    const currentCaseCount = currentPorts.length - 1; // Exclude ELSE port
+    const graph = graphRef.current;
+
+    const currentRightPorts = selectedNode.getPorts().filter((port: any) => port.group === 'right');
+    const currentCaseCount = currentRightPorts.length - 1;
    const isAddingCase = removedCaseIndex === undefined && caseCount > currentCaseCount;
-    
-    // Save existing edge connections (including left-side port connections)
-    const existingEdges = graphRef.current.getEdges().filter((edge: any) => 
+
+    const existingEdges = graph.getEdges().filter((edge: any) =>
      edge.getSourceCellId() === selectedNode.id || edge.getTargetCellId() === selectedNode.id
    );
    const edgeConnections = existingEdges.map((edge: any) => ({
@@ -371,113 +370,70 @@ const CaseList: FC<CaseListProps> = ({
      targetCellId: edge.getTargetCellId(),
      targetPortId: edge.getTargetPortId(),
      sourceCellId: edge.getSourceCellId(),
-      isIncoming: edge.getTargetCellId() === selectedNode.id
+      isIncoming: edge.getTargetCellId() === selectedNode.id,
    }));
-    
-    // Remove all existing right-side ports
-    const existingPorts = selectedNode.getPorts();
-    existingPorts.forEach((port: any) => {
-      if (port.group === 'right') {
-        selectedNode.removePort(port.id);
+
+    const cases = form.getFieldValue(name) || [];
+    const leftPorts = selectedNode.getPorts().filter((p: any) => p.group !== 'right');
+    const newRightPorts = Array.from({ length: caseCount + 1 }, (_, i) => ({
+      id: `CASE${i + 1}`,
+      group: 'right',
+      args: { x: nodeWidth, y: getConditionNodeCasePortY(cases, i) },
+    }));
+
+    graph.startBatch('update-ports');
+
+    existingEdges.forEach((edge: any) => graph.removeCell(edge));
+    // Replace all ports in one prop call — produces a single cell:change:ports command
+    selectedNode.prop('ports/items', [...leftPorts, ...newRightPorts], { rewrite: true });
+    selectedNode.prop('size', { width: nodeWidth, height: calcConditionNodeTotalHeight(cases) });
+
+    edgeConnections.forEach(({sourcePortId, targetCellId, targetPortId, sourceCellId, isIncoming }: any) => {
+      if (isIncoming) {
+        const sourceCell = graph.getCellById(sourceCellId);
+        if (sourceCell) {
+          graph.addEdge({
+            source: { cell: sourceCellId, port: sourcePortId },
+            target: { cell: selectedNode.id, port: targetPortId },
+            ...edgeAttrs
+          });
+          sourceCell.toFront();
+          bringLoopChildrenToFront(sourceCell);
+          selectedNode.toFront();
+          bringLoopChildrenToFront(selectedNode);
+        }
+        return;
+      }
+      const originalCaseNumber = parseInt(sourcePortId.match(/CASE(\d+)/)?.[1] || '0');
+      if (removedCaseIndex !== undefined && originalCaseNumber === removedCaseIndex + 1) return;
+      let newPortId = sourcePortId;
+
+      if (removedCaseIndex !== undefined) {
+        if (originalCaseNumber > removedCaseIndex + 1) {
+          newPortId = `CASE${originalCaseNumber - 1}`;
+        } else if (originalCaseNumber === currentCaseCount + 1) {
+          newPortId = `CASE${caseCount + 1}`;
+        }
+      } else if (isAddingCase && originalCaseNumber === currentCaseCount + 1) {
+        newPortId = `CASE${caseCount + 1}`;
+      }
+      if (newRightPorts.find((p) => p.id === newPortId)) {
+        const targetCell = graph.getCellById(targetCellId);
+        if (targetCell) {
+          graph.addEdge({
+            source: { cell: selectedNode.id, port: newPortId },
+            target: { cell: targetCellId, port: targetPortId },
+            ...edgeAttrs
+          });
+          selectedNode.toFront();
+          bringLoopChildrenToFront(selectedNode);
+          targetCell.toFront();
+          bringLoopChildrenToFront(targetCell);
+        }
      }
    });

-    const cases = form.getFieldValue(name) || [];
-    selectedNode.prop('size', { width: nodeWidth, height: calcConditionNodeTotalHeight(cases) });
-
-    // Add ELIF ports
-    for (let i = 0; i < caseCount; i++) {
-      selectedNode.addPort({
-        id: `CASE${i + 1}`,
-        group: 'right',
-        args: {
-          x: nodeWidth,
-          y: getConditionNodeCasePortY(cases, i),
-        },
-      });
-    }
-    
-    // Add ELSE port
-    selectedNode.addPort({
-      id: `CASE${caseCount + 1}`,
-      group: 'right',
-      args: {
-        x: nodeWidth,
-        y: getConditionNodeCasePortY(cases, caseCount),
-      },
-    });
-    
-    // Restore edge connections
-    setTimeout(() => {
-      edgeConnections.forEach(({ edge, sourcePortId, targetCellId, targetPortId, sourceCellId, isIncoming }: any) => {
-        // If it's an incoming connection (left-side port), restore directly
-        if (isIncoming) {
-          const sourceCell = graphRef.current?.getCellById(sourceCellId);
-          if (sourceCell) {
-            graphRef.current?.addEdge({
-              source: { cell: sourceCellId, port: sourcePortId },
-              target: { cell: selectedNode.id, port: targetPortId },
-              ...edgeAttrs,
-            });
-          }
-          sourceCell.toFront()
-          selectedNode.toFront()
-          bringLoopChildrenToFront(sourceCell)
-          bringLoopChildrenToFront(selectedNode)
-          graphRef.current?.removeCell(edge);
-          return;
-        }
-        
-        // Handle right-side port connections
-        const originalCaseNumber = parseInt(sourcePortId.match(/CASE(\d+)/)?.[1] || '0');
-        
-        // If it's a remove operation and the port is being removed, delete the connection
-        if (removedCaseIndex !== undefined && originalCaseNumber === removedCaseIndex + 1) {
-          graphRef.current?.removeCell(edge);
-          return;
-        }
-        
-        let newPortId = sourcePortId;
-        
-        // If it's a remove operation, remap port IDs
-        if (removedCaseIndex !== undefined) {
-          if (originalCaseNumber > removedCaseIndex + 1) {
-            // Ports after the removed port, shift numbering forward
-            newPortId = `CASE${originalCaseNumber - 1}`;
-          }
-          // ELSE port always maps to the new ELSE port position
-          else if (originalCaseNumber === currentCaseCount + 1) {
-            newPortId = `CASE${caseCount + 1}`;
-          }
-        } else if (isAddingCase) {
-          // If it's an add operation, ELSE port needs to be remapped
-          if (originalCaseNumber === currentCaseCount + 1) {
-            newPortId = `CASE${caseCount + 1}`; // New ELSE port
-          }
-          // Newly added ports don't restore any connections
-        }
-        
-        const newPorts = selectedNode.getPorts();
-        const matchingPort = newPorts.find((port: any) => port.id === newPortId);
-        
-        if (matchingPort) {
-          const targetCell = graphRef.current?.getCellById(targetCellId);
-          if (targetCell) {
-            graphRef.current?.addEdge({
-              source: { cell: selectedNode.id, port: newPortId },
-              target: { cell: targetCellId, port: targetPortId },
-              ...edgeAttrs
-            });
-            selectedNode.toFront()
-            bringLoopChildrenToFront(selectedNode)
-            targetCell.toFront()
-            bringLoopChildrenToFront(targetCell)
-          }
-        }
-        
-        graphRef.current?.removeCell(edge);
-      });
-    }, 50);
+    graph.stopBatch('update-ports');
  };

  const handleChangeLogicalOperator = (index: number) => {
--- a/web/src/views/Workflow/components/Properties/CategoryList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/CategoryList/index.tsx
@@ -42,109 +42,73 @@ const CategoryList: FC<CategoryListProps> = ({ parentName, selectedNode, graphRe
  // Update node ports based on category count changes (add/remove categories)
  const updateNodePorts = (caseCount: number, removedCaseIndex?: number) => {
    if (!selectedNode || !graphRef?.current) return;
+    const graph = graphRef.current;

-    // Save existing edge connections (including left-side port connections)
-    const existingEdges = graphRef.current.getEdges().filter((edge: any) =>
+    const existingEdges = graph.getEdges().filter((edge: any) =>
      edge.getSourceCellId() === selectedNode.id || edge.getTargetCellId() === selectedNode.id
    );
    const edgeConnections = existingEdges.map((edge: any) => ({
-      edge,
      sourcePortId: edge.getSourcePortId(),
      targetCellId: edge.getTargetCellId(),
      targetPortId: edge.getTargetPortId(),
      sourceCellId: edge.getSourceCellId(),
-      isIncoming: edge.getTargetCellId() === selectedNode.id
+      isIncoming: edge.getTargetCellId() === selectedNode.id,
    }));

-    // Remove all existing right-side ports
-    const existingPorts = selectedNode.getPorts();
-    existingPorts.forEach((port: any) => {
-      if (port.group === 'right') {
-        selectedNode.removePort(port.id);
-      }
-    });
+    graph.startBatch('update-ports');
+
+    existingEdges.forEach((edge: any) => graph.removeCell(edge));
+    // Replace all ports in one prop call — produces a single cell:change:ports command
+    const leftPorts = selectedNode.getPorts().filter((p: any) => p.group !== 'right');
+    const newRightPorts = Array.from({ length: caseCount }, (_, i) => ({
+      id: `CASE${i + 1}`,
+      group: 'right',
+      args: { x: nodeWidth, y: portItemArgsY * i + conditionNodePortItemArgsY },
+    }));
+    selectedNode.prop('ports/items', [...leftPorts, ...newRightPorts], { rewrite: true });

-    // Calculate new node height: base height 88px + 30px for each additional port
    const newHeight = conditionNodeHeight + (caseCount - 2) * conditionNodeItemHeight;
+    selectedNode.prop('size', { width: nodeWidth, height: newHeight < conditionNodeHeight ? conditionNodeHeight : newHeight });

-    selectedNode.prop('size', { width: nodeWidth, height: newHeight < conditionNodeHeight ? conditionNodeHeight : newHeight })
-
-    // Update right port x position
-    const currentPorts = selectedNode.getPorts();
-    currentPorts.forEach(port => {
-      if (port.group === 'right' && port.args) {
-        selectedNode.portProp(port.id!, 'args/x', nodeWidth);
+    edgeConnections.forEach(({ sourcePortId, targetCellId, targetPortId, sourceCellId, isIncoming }: any) => {
+      if (isIncoming) {
+        const sourceCell = graph.getCellById(sourceCellId);
+        if (sourceCell) {
+          graph.addEdge({
+            source: { cell: sourceCellId, port: sourcePortId },
+            target: { cell: selectedNode.id, port: targetPortId },
+            ...edgeAttrs
+          });
+          sourceCell.toFront();
+          bringLoopChildrenToFront(sourceCell);
+          selectedNode.toFront();
+          bringLoopChildrenToFront(selectedNode);
+        }
+        return;
+      }
+      const originalCaseNumber = parseInt(sourcePortId.match(/CASE(\d+)/)?.[1] || '0');
+      if (removedCaseIndex !== undefined && originalCaseNumber === removedCaseIndex + 1) return;
+      let newPortId = sourcePortId;
+      if (removedCaseIndex !== undefined && originalCaseNumber > removedCaseIndex + 1) {
+        newPortId = `CASE${originalCaseNumber - 1}`;
+      }
+      if (newRightPorts.find((p) => p.id === newPortId)) {
+        const targetCell = graph.getCellById(targetCellId);
+        if (targetCell) {
+          graph.addEdge({
+            source: { cell: selectedNode.id, port: newPortId },
+            target: { cell: targetCellId, port: targetPortId },
+            ...edgeAttrs
+          });
+          selectedNode.toFront();
+          bringLoopChildrenToFront(selectedNode);
+          targetCell.toFront();
+          bringLoopChildrenToFront(targetCell);
+        }
      }
    });

-    // Add category ports
-    for (let i = 0; i < caseCount; i++) {
-      selectedNode.addPort({
-        id: `CASE${i + 1}`,
-        group: 'right',
-        args: {
-          x: nodeWidth,
-          y: portItemArgsY * i + conditionNodePortItemArgsY,
-        },
-      });
-    }
-    // Restore edge connections
-    setTimeout(() => {
-      edgeConnections.forEach(({ edge, sourcePortId, targetCellId, targetPortId, sourceCellId, isIncoming }: any) => {
-        graphRef.current?.removeCell(edge);
-        
-        // If it's an incoming connection (left-side port), restore directly
-        if (isIncoming) {
-          const sourceCell = graphRef.current?.getCellById(sourceCellId);
-          if (sourceCell) {
-            graphRef.current?.addEdge({
-              source: { cell: sourceCellId, port: sourcePortId },
-              target: { cell: selectedNode.id, port: targetPortId },
-              ...edgeAttrs
-            });
-            sourceCell.toFront()
-            bringLoopChildrenToFront(sourceCell)
-            selectedNode.toFront()
-            bringLoopChildrenToFront(selectedNode)
-          }
-          return;
-        }
-
-        // Handle right-side port connections
-        const originalCaseNumber = parseInt(sourcePortId.match(/CASE(\d+)/)?.[1] || '0');
-
-        // If it's a removed port, don't recreate the connection
-        if (removedCaseIndex !== undefined && originalCaseNumber === removedCaseIndex + 1) {
-          return;
-        }
-
-        let newPortId = sourcePortId;
-
-        // If a port was removed, remap subsequent port IDs
-        if (removedCaseIndex !== undefined && originalCaseNumber > removedCaseIndex + 1) {
-          newPortId = `CASE${originalCaseNumber - 1}`;
-        }
-
-        // Check if the new port exists
-        const newPorts = selectedNode.getPorts();
-        const matchingPort = newPorts.find((port: any) => port.id === newPortId);
-
-        if (matchingPort) {
-          const targetCell = graphRef.current?.getCellById(targetCellId);
-          if (targetCell) {
-            graphRef.current?.addEdge({
-              source: { cell: selectedNode.id, port: newPortId },
-              target: { cell: targetCellId, port: targetPortId },
-              ...edgeAttrs
-            });
-            selectedNode.toFront()
-            bringLoopChildrenToFront(selectedNode)
-            targetCell.toFront()
-            bringLoopChildrenToFront(targetCell)
-          }
-        }
-      });
-    }, 50);
+    graph.stopBatch('update-ports');
  };

  const handleAddCategory = (addFunc: Function) => {
--- a/web/src/views/Workflow/components/Properties/Knowledge/KnowledgeConfigModal.tsx
+++ b/web/src/views/Workflow/components/Properties/Knowledge/KnowledgeConfigModal.tsx
@@ -67,10 +67,14 @@ const KnowledgeConfigModal = forwardRef<KnowledgeConfigModalRef, KnowledgeConfig

  useEffect(() => {
    if (values?.retrieve_type) {
-      const fieldsToReset = Object.keys(values).filter(key =>
+      const resetValues: KnowledgeConfigForm = {}
+      const fieldsToReset = Object.keys(values).filter(key => 
        key !== 'kb_id' && key !== 'retrieve_type' && key !== 'top_k'
      ) as (keyof KnowledgeConfigForm)[];
-      form.resetFields(fieldsToReset);
+      fieldsToReset.forEach(key => {
+        resetValues[key] = undefined
+      })
+      form.setFieldsValue(resetValues);
    }
  }, [values?.retrieve_type])

--- a/web/src/views/Workflow/components/Properties/Knowledge/KnowledgeGlobalConfigModal.tsx
+++ b/web/src/views/Workflow/components/Properties/Knowledge/KnowledgeGlobalConfigModal.tsx
@@ -47,7 +47,8 @@ const KnowledgeGlobalConfigModal = forwardRef<KnowledgeGlobalConfigModalRef, Kno

  useEffect(() => {
    if (values?.rerank_model) {
-      form.setFieldsValue({ ...data })
+      const { rerank_model, ...rest } = data;
+      form.setFieldsValue({ ...rest })
    } else {
      form.setFieldsValue({ reranker_id: undefined, reranker_top_k: undefined })
    }
--- a/web/src/views/Workflow/components/Properties/ModelConfig/index.tsx
+++ b/web/src/views/Workflow/components/Properties/ModelConfig/index.tsx
@@ -1,8 +1,8 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-03-07 14:55:04 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-04-17 10:05:32 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-04-29 17:08:19
 */
 import { type FC, useEffect, useState } from "react";
 import { useTranslation } from 'react-i18next'
@@ -28,7 +28,6 @@ const ModelConfig: FC = () => {
    if (model_id && options) {
      const model = options.find(item => item.id === model_id)
      setSelectedModel(model || null)
-      form.setFieldValue('json_output', false)
    } else {
      setSelectedModel(null)
    }
@@ -47,6 +46,7 @@ const ModelConfig: FC = () => {
          params={{ type: 'llm,chat' }}
          className="rb:w-full!"
          size="small"
+          onChange={() => form.setFieldValue('json_output', false)}
          updateOptions={updateOptions}
        />
      </Form.Item>
--- a/web/src/views/Workflow/components/Properties/ToolConfig/index.tsx
+++ b/web/src/views/Workflow/components/Properties/ToolConfig/index.tsx
@@ -242,10 +242,11 @@ const ToolConfig: FC<{ options: Suggestion[]; }> = ({
              className={parameter.type === 'boolean' ? 'rb:mb-0!' : ''}
            >
              {parameter.type === 'string' && parameter.enum && parameter.enum.length > 0
-                ? <Select size="small" options={parameter.enum.map(vo => ({ value: vo, label: vo }))} placeholder={t('common.pleaseSelect')} />
+                ? <Select key={values.tool_id} size="small" options={parameter.enum.map(vo => ({ value: vo, label: vo }))} placeholder={t('common.pleaseSelect')} />
                : parameter.type === 'boolean'
-                  ? <Switch size="small" />
+                  ? <Switch key={values.tool_id} size="small" />
                  : <Editor
+                    key={values.tool_id}
                    variant="outlined"
                    type="input"
                    size="small"
--- a/web/src/views/Workflow/constant.ts
+++ b/web/src/views/Workflow/constant.ts
@@ -1,8 +1,8 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:06:18 
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-21 18:23:31
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-05-06 11:53:21 
 */
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
 import type { GroupMetadata, PortMetadata } from '@antv/x6/lib/model/port';
@@ -948,6 +948,15 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
    width: nodeWidth,
    height: 120,
    shape: 'notes-node',
+  },
+  output: {
+    width: nodeWidth,
+    height: 76,
+    shape: 'normal-node',
+    ports: {
+      groups: { left: leftPortGroup },
+      items: [defaultPortItems[0]],
+    },
  }
 }

--- a/web/src/views/Workflow/hooks/useWorkflowGraph.ts
+++ b/web/src/views/Workflow/hooks/useWorkflowGraph.ts
@@ -1,15 +1,16 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:17:48 
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-24 17:21:09
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2026-05-06 11:44:06
 */
 import { Clipboard, Graph, Keyboard, MiniMap, Node, Snapline, History, type Edge } from '@antv/x6';
-import type { HistoryCommand as Command } from '@antv/x6/lib/plugin/history/type';
-import { register } from '@antv/x6-react-shape';
+import { register as registerReactShape } from '@antv/x6-react-shape';
 import type { PortMetadata } from '@antv/x6/lib/model/port';
 import { App } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, createElement } from 'react';
+import type { RefObject, Dispatch, SetStateAction, MutableRefObject, DragEvent } from 'react';
+import { createRoot } from 'react-dom/client';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';

@@ -17,18 +18,20 @@ import { getWorkflowConfig, saveWorkflowConfig } from '@/api/application';
 import { useUser } from '@/store/user';
 import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';
 import { conditionNodeHeight, conditionNodeItemHeight, conditionNodePortItemArgsY, defaultAbsolutePortGroups, defaultPortItems, edgeAttrs, edgeHoverTool, edge_color, edge_selected_color, edge_width, graphNodeLibrary, nodeLibrary, nodeRegisterLibrary, nodeWidth, notesConfig, portAttrs, portItemArgsY, portMarkup, portTextAttrs, unknownNode } from '../constant';
-import type { ChatVariable, NodeProperties, WorkflowConfig } from '../types';
+import type { ChatVariable, HistoryRecord, NodeProperties, WorkflowConfig } from '../types';
 import { calcConditionNodeTotalHeight, getConditionNodeCasePortY } from '../utils';
 import { useWorkflowStore } from '@/store/workflow';

+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 /**
 * Props for useWorkflowGraph hook
 */
 export interface UseWorkflowGraphProps {
  /** Reference to the main graph container element */
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: RefObject<HTMLDivElement>;
  /** Reference to the minimap container element */
-  miniMapRef: React.RefObject<HTMLDivElement>;
+  miniMapRef: RefObject<HTMLDivElement>;
  /** Callback when features config is loaded */
  onFeaturesLoad?: (features: FeaturesConfigForm | undefined) => void;
 }
@@ -40,23 +43,23 @@ export interface UseWorkflowGraphReturn {
  /** Current workflow configuration */
  config: WorkflowConfig | null;
  /** Function to update workflow configuration */
-  setConfig: React.Dispatch<React.SetStateAction<WorkflowConfig | null>>;
+  setConfig: Dispatch<SetStateAction<WorkflowConfig | null>>;
  /** Reference to the X6 graph instance */
-  graphRef: React.MutableRefObject<Graph | undefined>;
+  graphRef: MutableRefObject<Graph | undefined>;
  /** Currently selected node */
  selectedNode: Node | null;
  /** Function to update selected node */
-  setSelectedNode: React.Dispatch<React.SetStateAction<Node | null>>;
+  setSelectedNode: Dispatch<SetStateAction<Node | null>>;
  /** Current zoom level of the graph */
  zoomLevel: number;
  /** Function to update zoom level */
-  setZoomLevel: React.Dispatch<React.SetStateAction<number>>;
+  setZoomLevel: Dispatch<SetStateAction<number>>;
  /** Whether hand/pan mode is enabled */
  isHandMode: boolean;
  /** Function to toggle hand mode */
-  setIsHandMode: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsHandMode: Dispatch<SetStateAction<boolean>>;
  /** Handler for dropping nodes onto canvas */
-  onDrop: (event: React.DragEvent) => void;
+  onDrop: (event: DragEvent) => void;
  /** Handler for clicking blank canvas area */
  blankClick: () => void;
  /** Handler for delete keyboard event */
@@ -78,7 +81,7 @@ export interface UseWorkflowGraphReturn {
  /** Chat variables for workflow */
  chatVariables: ChatVariable[];
  /** Function to update chat variables */
-  setChatVariables: React.Dispatch<React.SetStateAction<ChatVariable[]>>;
+  setChatVariables: Dispatch<SetStateAction<ChatVariable[]>>;

  handleAddNotes: () => void;
  handleSaveFeaturesConfig: (value: FeaturesConfigForm) => void;
@@ -86,6 +89,10 @@ export interface UseWorkflowGraphReturn {
  /** Get start node output variable list (user-defined + system variables) */
  getStartNodeVariables: () => Array<{ name: string; type: string; readonly?: boolean }>;
  nodeClick: ({ node }: { node: Node }) => void;
+  /** All recorded history operations */
+  historyRecords: HistoryRecord[];
+  /** Clear history records */
+  clearHistoryRecords: () => void;
 }

 /**
@@ -119,14 +126,17 @@ export const useWorkflowGraph = ({
  const featuresRef = useRef<FeaturesConfigForm | undefined>(undefined)
  const [canUndo, setCanUndo] = useState(false)
  const [canRedo, setCanRedo] = useState(false)
-
+  const [historyRecords, setHistoryRecords] = useState<HistoryRecord[]>([])
+  const lastHistoryRef = useRef<{ cellIds: string[]; timestamp: number; type: string } | null>(null)
+  const syncChildRelationshipsRef = useRef<() => void>(() => { })
+  const isSyncingRef = useRef(false)
  useEffect(() => {
    if (!graphRef.current) return
    graphRef.current.getNodes().forEach(node => {
      const data = node.getData()
      if (data?.type === 'if-else' || data?.type === 'question-classifier') {
        console.log('chatVariables', chatVariables)
-        node.setData({ ...data, chatVariables }, { silent: true })
+        node.setData({ ...data, chatVariables })
      }
    })
  }, [chatVariables])
@@ -160,6 +170,21 @@ export const useWorkflowGraph = ({
    initWorkflow()
  }, [config, graphRef.current])

+  /**
+   * Assign explicit zIndex values to enforce layer order:
+   *   parent nodes (loop/iteration) → child edges → child nodes
+   * Ports live inside each node's SVG container and are always above
+   * edges once the node zIndex is higher than the edge zIndex.
+   */
+  const reorderCells = (graph: Graph) => {
+    // Safari uses x6-html-shape (dual HTML layer architecture).
+    // zIndex controls order within each HTML layer and SVG layer.
+    graph.getEdges().forEach(edge => edge.setZIndex(0));
+    graph.getNodes().forEach(node => {
+      node.setZIndex(node.getData()?.cycle ? 2 : 1);
+    });
+  };
+
  /**
   * Initialize workflow graph with nodes and edges from configuration
   */
@@ -343,7 +368,7 @@ export const useWorkflowGraph = ({
          if (parentNode) {
            const addedChild = graphRef.current?.addNode(childNode)
            if (addedChild) {
-              parentNode.addChild(addedChild)
+              parentNode.addChild(addedChild, { silent: true })
            }
          }
        }
@@ -374,8 +399,6 @@ export const useWorkflowGraph = ({
              const newWidth = Math.max(parentBBox.width, maxX - minX + padding * 2)
              const newHeight = Math.max(parentBBox.height, maxY - minY + padding * 2 + headerHeight)

-              console.log('newWidth', newHeight, newWidth)
-
              parentNode.prop('size', { width: newWidth, height: newHeight })

              // Update x position of right group ports
@@ -470,26 +493,157 @@ export const useWorkflowGraph = ({
    if (nodes.length > 0 || edges.length > 0) {
      setTimeout(() => {
        if (graphRef.current) {
-          graphRef.current.getNodes().forEach(node => {
-            if (!node.getData()?.cycle) node.toFront();
-          });
-          // Bring edges to front first, then child nodes above edges; parent nodes stay behind
-          graphRef.current.getEdges().forEach(edge => {
-            const sourceCell = graphRef.current?.getCellById(edge.getSourceCellId());
-            const targetCell = graphRef.current?.getCellById(edge.getTargetCellId());
-            if (sourceCell?.getData()?.cycle || targetCell?.getData()?.cycle) {
-              edge.toFront();
-            }
-          });
-          graphRef.current.getNodes().forEach(node => {
-            if (node.getData()?.cycle) node.toFront();
-          });
+          if (isSafari) {
+            reorderCells(graphRef.current)
+          } else {
+            graphRef.current.getNodes().forEach(node => {
+              if (!node.getData()?.cycle) node.toFront();
+            });
+            // Bring edges to front first, then child nodes above edges; parent nodes stay behind
+            graphRef.current.getEdges().forEach(edge => {
+              const sourceCell = graphRef.current?.getCellById(edge.getSourceCellId());
+              const targetCell = graphRef.current?.getCellById(edge.getTargetCellId());
+              if (sourceCell?.getData()?.cycle || targetCell?.getData()?.cycle) {
+                edge.toFront();
+              }
+            });
+            graphRef.current.getNodes().forEach(node => {
+              if (node.getData()?.cycle) node.toFront();
+            });
+          }
          graphRef.current.enableHistory()
          graphRef.current.cleanHistory()
        }
-      }, 200)
+      }, isSafari ? 0 : 200)
+    } else {
+      graphRef.current.enableHistory()
+      graphRef.current.cleanHistory()
    }
  }
+
+  const resizeGroupNodes = (graph: Graph) => {
+    graph.getNodes().forEach(parentNode => {
+      const parentType = parentNode.getData()?.type
+      if (parentType !== 'loop' && parentType !== 'iteration') return
+      const children = graph.getNodes().filter(
+        n => n.getData()?.cycle === parentNode.getData()?.id && n.getData()?.type !== 'add-node'
+      )
+      if (!children.length) return
+      const padding = 24
+      const headerHeight = 50
+      const childBounds = children.map(c => c.getBBox())
+      const minX = Math.min(...childBounds.map(b => b.x))
+      const minY = Math.min(...childBounds.map(b => b.y))
+      const maxX = Math.max(...childBounds.map(b => b.x + b.width))
+      const maxY = Math.max(...childBounds.map(b => b.y + b.height))
+      const parentBBox = parentNode.getBBox()
+      const newWidth = Math.max(parentBBox.width, maxX - minX + padding * 2)
+      const newHeight = Math.max(parentBBox.height, maxY - minY + padding * 2 + headerHeight)
+      parentNode.prop('size', { width: newWidth, height: newHeight })
+      parentNode.getPorts().forEach(port => {
+        if (port.group === 'right' && port.args) {
+          parentNode.portProp(port.id!, 'args/x', newWidth)
+        }
+      })
+    })
+  }
+
+  const syncChildRelationships = () => {
+    if (!graphRef.current) return
+    const graph = graphRef.current
+    graph.disableHistory()
+    graph.getNodes().forEach(node => {
+      const nodeData = node.getData()
+      const children = node.getChildren()
+
+      const cycleId = nodeData?.cycle
+
+      if (cycleId) {
+        const parentNode = graph.getCellById(cycleId) as Node | null
+        if (!parentNode) return
+        if (!parentNode.getChildren()?.some(c => c.id === node.id)) {
+          parentNode.addChild(node, { silent: true })
+        }
+      }
+
+      if (nodeData.type === 'if-else') {
+        const rightPorts = node.getPorts().filter(p => p.group === 'right')
+        const caseCount = rightPorts.length - 1 // last port is ELSE
+        const currentCases: any[] = nodeData.config?.cases?.defaultValue ?? []
+        const newCases = caseCount !== currentCases.length
+          ? Array.from({ length: caseCount }, (_, i) => currentCases[i] ?? { logical_operator: 'and', expressions: [] })
+          : currentCases
+        if (caseCount !== currentCases.length) {
+          node.setData({
+            ...nodeData,
+            config: { ...nodeData.config, cases: { ...nodeData.config.cases, defaultValue: newCases } }
+          }, { deep: false, silent: true })
+        }
+        // Sync node height and port Y positions
+        node.prop('size', { width: nodeWidth, height: calcConditionNodeTotalHeight(newCases) })
+        newCases.forEach((_c: any, i: number) => {
+          node.portProp(`CASE${i + 1}`, 'args/y', getConditionNodeCasePortY(newCases, i))
+        })
+        node.portProp(`CASE${newCases.length + 1}`, 'args/y', getConditionNodeCasePortY(newCases, newCases.length))
+        node.toFront()
+        graph.getEdges().filter(e => e.getSourceCellId() === node.id).forEach(e => {
+          const tgt = graph.getCellById(e.getTargetCellId())
+          tgt?.toFront()
+        })
+      } else if (nodeData.type === 'question-classifier') {
+        const rightPorts = node.getPorts().filter(p => p.group === 'right')
+        const currentCategories: any[] = nodeData.config?.categories?.defaultValue ?? []
+        const categoryCount = rightPorts.length
+        const newCategories = categoryCount !== currentCategories.length
+          ? rightPorts.map((port, i) => {
+            if (currentCategories[i]) return currentCategories[i]
+            const edge = graph.getEdges().find(e => e.getSourceCellId() === node.id && e.getSourcePortId() === port.id)
+            return edge ? { name: '' } : {}
+          })
+          : currentCategories
+        if (categoryCount !== currentCategories.length) {
+          node.setData({
+            ...nodeData,
+            config: { ...nodeData.config, categories: { ...nodeData.config.categories, defaultValue: [...newCategories] } }
+          }, { deep: false, silent: true })
+        }
+        // Sync node height and port Y positions
+        const newHeight = conditionNodeHeight + (categoryCount - 2) * conditionNodeItemHeight
+        node.prop('size', { width: nodeWidth, height: Math.max(newHeight, conditionNodeHeight) })
+        rightPorts.forEach((_p, i) => {
+          node.portProp(`CASE${i + 1}`, 'args/y', portItemArgsY * i + conditionNodePortItemArgsY)
+        })
+        node.toFront()
+        graph.getEdges().filter(e => e.getSourceCellId() === node.id).forEach(e => {
+          const tgt = graph.getCellById(e.getTargetCellId())
+          tgt?.toFront()
+        })
+      }
+
+      if (children?.length) {
+        children.forEach(child => {
+          if (!child.isNode()) return
+          const childCycleId = (child as Node).getData?.()?.cycle
+          if (childCycleId !== node.id && childCycleId !== node.getData?.()?.id) {
+            node.removeChild(child, { silent: true })
+          }
+        })
+      }
+    })
+    resizeGroupNodes(graph)
+    graph.getEdges().forEach(edge => {
+      const src = graph.getCellById(edge.getSourceCellId())
+      const tgt = graph.getCellById(edge.getTargetCellId())
+      if (src?.getData()?.cycle || tgt?.getData()?.cycle) {
+        edge.toFront()
+      }
+    })
+    graph.getNodes().forEach(node => {
+      if (node.getData()?.cycle) node.toFront()
+    })
+    graph.enableHistory()
+  }
+  syncChildRelationshipsRef.current = syncChildRelationships
  /**
   * Setup X6 graph plugins (MiniMap, Snapline, Clipboard, Keyboard)
   */
@@ -525,18 +679,44 @@ export const useWorkflowGraph = ({
      new History({
        enabled: false,
        beforeAddCommand(_event, args: any) {
-          const event = args?.key ? `cell:change:${args.key}` : _event;
-          if (event.startsWith('cell:change:') &&
-            event !== 'cell:change:position' &&
-            event !== 'cell:change:source' &&
-            event !== 'cell:change:target') return false;
+          const key = args?.key
+          if (key === 'attrs' || key === 'tools') return false
        },
      }),
    );
-    graphRef.current.on('history:change', ({ cmds }: { cmds: Command[] }) => {
+    const MERGE_INTERVAL = 1000
+    graphRef.current.on('history:change', ({ cmds, options }: { cmds: any[]; options: any }) => {
      setCanUndo(graphRef.current?.canUndo() ?? false)
      setCanRedo(graphRef.current?.canRedo() ?? false)
+      console.log('history:change', cmds, options)
+      const batchName: string | undefined = options?.name
+      const actionType = batchName === 'undo' ? 'undo' : batchName === 'redo' ? 'redo' : batchName ? 'batch' : 'change'
+      const cellIds = [...new Set(cmds?.map((cmd: any) => cmd.data?.id).filter(Boolean))]
+      const now = Date.now()
+      const last = lastHistoryRef.current
+      const canMerge =
+        actionType === 'change' &&
+        last?.type === 'change' &&
+        now - last.timestamp < MERGE_INTERVAL &&
+        cellIds.length > 0 &&
+        cellIds.length === last.cellIds.length &&
+        cellIds.every((id, i) => id === last.cellIds[i])
+      if (canMerge) {
+        lastHistoryRef.current!.timestamp = now
+        setHistoryRecords(prev => {
+          const next = [...prev]
+          next[next.length - 1] = { ...next[next.length - 1], timestamp: now }
+          return next
+        })
+      } else {
+        const record: HistoryRecord = { type: actionType, timestamp: now, batchName, cellIds }
+        lastHistoryRef.current = { cellIds, timestamp: now, type: actionType }
+        setHistoryRecords(prev => [...prev, record])
+      }
    })
+
+    graphRef.current.on('history:undo', () => { if (!isSyncingRef.current) syncChildRelationshipsRef.current() })
+    graphRef.current.on('history:redo', () => { if (!isSyncingRef.current) syncChildRelationshipsRef.current() })
  };
  // 显示/隐藏连接桩
  // const showPorts = (show: boolean) => {
@@ -551,12 +731,33 @@ export const useWorkflowGraph = ({
   * @param node - Clicked node
   */
  const nodeClick = ({ node }: { node: Node }) => {
+    // add-node type: dispatch port:click to open node selection popover
+    // Must handle before blankClick() to avoid blank:click closing the popover immediately
+    const nodeData = node.getData()
+    if (nodeData?.type === 'add-node') {
+      const b = node.getBBox();
+      const screenPos = graphRef.current!.localToClient(b.x + b.width, b.y + b.height / 2);
+      const tempDiv = document.createElement('div');
+      tempDiv.style.cssText = `position:fixed;left:${screenPos.x}px;top:${screenPos.y}px;width:1px;height:1px;z-index:9999;`;
+      document.body.appendChild(tempDiv);
+      window.dispatchEvent(new CustomEvent('port:click', {
+        detail: {
+          node,
+          port: 'right',
+          element: tempDiv,
+          rect: { left: screenPos.x, top: screenPos.y },
+          edgeInsertion: null,
+        },
+      }));
+      return;
+    }
+
    blankClick()

    setTimeout(() => {
-      // Ignore add-node type node clicks
+    // Ignore add-node type node clicks
      const nodeData = node.getData()
-      if (nodeData?.type === 'add-node' || nodeData.type === 'break' || nodeData.type === 'cycle-start') {
+      if (nodeData.type === 'break' || nodeData.type === 'cycle-start') {
        setSelectedNode(null)
        return;
      }
@@ -569,13 +770,13 @@ export const useWorkflowGraph = ({
          vo.setData({
            ...data,
            isSelected: false,
-          });
+          }, { silent: true });
        }
      });
      node.setData({
        ...nodeData,
        isSelected: true,
-      });
+      }, { silent: true });
      clearEdgeSelect()
      if (nodeData.type !== 'notes') {
        setSelectedNode(node);
@@ -589,7 +790,7 @@ export const useWorkflowGraph = ({
  const edgeClick = ({ edge }: { edge: Edge }) => {
    clearEdgeSelect();
    edge.setAttrByPath('line/stroke', edge_selected_color);
-    edge.setData({ ...edge.getData(), isSelected: true });
+    edge.setData({ ...edge.getData(), isSelected: true }, { silent: true });
    clearNodeSelect();
  };
  /**
@@ -604,7 +805,7 @@ export const useWorkflowGraph = ({
        node.setData({
          ...data,
          isSelected: false,
-        });
+        }, { silent: true });
      }
    });
    setSelectedNode(null);
@@ -614,7 +815,7 @@ export const useWorkflowGraph = ({
   */
  const clearEdgeSelect = () => {
    graphRef.current?.getEdges().forEach(e => {
-      e.setData({ ...e.getData(), isSelected: false, isNodeHover: false });
+      e.setData({ ...e.getData(), isSelected: false, isNodeHover: false }, { silent: true });
      e.setAttrByPath('line/stroke', edge_color);
      e.setAttrByPath('line/strokeWidth', edge_width);
    });
@@ -644,7 +845,8 @@ export const useWorkflowGraph = ({
    const cycle = node.getData()?.cycle;
    if (cycle) {
      const parentNode = graphRef.current!.getNodes().find(n => n.id === cycle);
-      if (parentNode?.getData()?.isGroup) {
+      const parentType = parentNode?.getData()?.type;
+      if (parentNode?.getData()?.isGroup || (parentNode && (parentType === 'loop' || parentType === 'iteration'))) {
        // Get parent node and child node bounding boxes
        const parentBBox = parentNode.getBBox();
        const childBBox = node.getBBox();
@@ -753,8 +955,6 @@ export const useWorkflowGraph = ({
          // Find corresponding parent node
          const parentNode = nodes?.find(n => n.id === nodeData.cycle);
          if (parentNode) {
-            // Use removeChild method to delete child node
-            parentNode.removeChild(nodeToDelete);
            parentNodesToUpdate.push(parentNode);
          }
          // Add child node to deletion list
@@ -782,42 +982,51 @@ export const useWorkflowGraph = ({

    // Delete all collected nodes and edges
    if (cells.length > 0) {
+      // Pre-calculate which parents need an add-node restored (before removal changes the graph)
+      const parentsNeedingAddNode = parentNodesToUpdate
+        .filter(parentNode => {
+          const parentShape = parentNode.shape;
+          if (parentShape !== 'loop-node' && parentShape !== 'iteration-node') return false;
+          const parentData = parentNode.getData();
+          const allChildren = graphRef.current!.getNodes().filter(n => n.getData()?.cycle === parentData.id);
+          const cycleStartNodes = allChildren.filter(n => n.getData()?.type === 'cycle-start');
+          // After deletion, only cycle-start will remain
+          const nonCycleStartToDelete = cells.filter(c =>
+            c.isNode() &&
+            (c as Node).getData()?.cycle === parentData.id &&
+            (c as Node).getData()?.type !== 'cycle-start'
+          );
+          return cycleStartNodes.length === 1 && (allChildren.length - nonCycleStartToDelete.length) === 1;
+        })
+        .map(parentNode => ({
+          parentNode,
+          cycleStartNode: graphRef.current!.getNodes().find(
+            n => n.getData()?.cycle === parentNode.getData().id && n.getData()?.type === 'cycle-start'
+          )!
+        }))
+        .filter(({ cycleStartNode }) => !!cycleStartNode);
+
+      graphRef.current?.startBatch('delete');
      graphRef.current?.removeCells(cells);

-      // If parent is iteration/loop and only cycle-start remains, add add-node connected to it
-      parentNodesToUpdate.forEach(parentNode => {
-        const parentShape = parentNode.shape;
-        if (parentShape !== 'loop-node' && parentShape !== 'iteration-node') return;
+      parentsNeedingAddNode.forEach(({ parentNode, cycleStartNode }) => {
        const parentData = parentNode.getData();
-        const remainingChildren = graphRef.current!.getNodes().filter(
-          n => n.getData()?.cycle === parentData.id
-        );
-        const cycleStartNodes = remainingChildren.filter(n => n.getData()?.type === 'cycle-start');
-        if (cycleStartNodes.length === 1 && remainingChildren.length === 1) {
-          const cycleStartNode = cycleStartNodes[0];
-          const bbox = cycleStartNode.getBBox();
-          const addNode = graphRef.current!.addNode({
-            ...graphNodeLibrary.addStart,
-            x: bbox.x + 84,
-            y: bbox.y + 4,
-            data: {
-              type: 'add-node',
-              parentId: parentNode.id,
-              cycle: parentData.id,
-              label: t('workflow.addNode'),
-              icon: '+',
-            },
-          });
-          parentNode.addChild(addNode);
-          const sourcePort = cycleStartNode.getPorts().find(p => p.group === 'right')?.id || 'right';
-          const targetPort = addNode.getPorts().find(p => p.group === 'left')?.id || 'left';
-          graphRef.current!.addEdge({
-            source: { cell: cycleStartNode.id, port: sourcePort },
-            target: { cell: addNode.id, port: targetPort },
-            ...edgeAttrs,
-          });
-        }
+        const bbox = cycleStartNode.getBBox();
+        const addNode = graphRef.current!.addNode({
+          ...graphNodeLibrary.addStart,
+          x: bbox.x + 84,
+          y: bbox.y + 4,
+          data: { type: 'add-node', parentId: parentNode.id, cycle: parentData.id, label: t('workflow.addNode'), icon: '+' },
+        });
+        parentNode.addChild(addNode, { silent: true });
+        graphRef.current!.addEdge({
+          source: { cell: cycleStartNode.id, port: cycleStartNode.getPorts().find(p => p.group === 'right')?.id || 'right' },
+          target: { cell: addNode.id, port: addNode.getPorts().find(p => p.group === 'left')?.id || 'left' },
+          ...edgeAttrs,
+        });
      });
+
+      graphRef.current?.stopBatch('delete');
    }
    return false;
  };
@@ -857,13 +1066,37 @@ export const useWorkflowGraph = ({
  /**
   * Initialize X6 graph with configuration and event listeners
   */
-  const init = () => {
+  const init = async () => {
    if (!containerRef.current || !miniMapRef.current) return;

    // Register React shapes
-    nodeRegisterLibrary.forEach((item) => {
-      register(item);
-    });
+    // Safari: use x6-html-shape to avoid foreignObject rendering issues
+    if (isSafari) {
+      const { register: registerHtmlShape } = await import('x6-html-shape');
+      nodeRegisterLibrary.forEach(({ shape, width, height, component }) => {
+        registerHtmlShape({
+          shape,
+          width,
+          height,
+          render(node: Node, _graph: unknown, container: HTMLElement) {
+            const root = createRoot(container);
+            const doRender = () => {
+              root.render(createElement(component as any, { node, graph: node.model?.graph, data: node.getData() }));
+            };
+            doRender();
+            node.on('change:data', doRender);
+            return () => {
+              node.off('change:data', doRender);
+              root.unmount();
+            };
+          },
+        });
+      });
+    } else {
+      nodeRegisterLibrary.forEach((item) => {
+        registerReactShape(item);
+      });
+    }

    const container = containerRef.current;
    graphRef.current = new Graph({
@@ -1036,7 +1269,7 @@ export const useWorkflowGraph = ({
      graphRef.current?.getConnectedEdges(node).forEach(edge => {
        if (!edge.getData()?.isSelected) {
          edge.setAttrByPath('line/stroke', edge_selected_color);
-          edge.setData({ ...edge.getData(), isNodeHover: true });
+          edge.setData({ ...edge.getData(), isNodeHover: true }, { silent: true });
        }
      });
    });
@@ -1044,7 +1277,7 @@ export const useWorkflowGraph = ({
      graphRef.current?.getConnectedEdges(node).forEach(edge => {
        if (!edge.getData()?.isSelected) {
          edge.setAttrByPath('line/stroke', edge_color);
-          edge.setData({ ...edge.getData(), isNodeHover: false });
+          edge.setData({ ...edge.getData(), isNodeHover: false }, { silent: true });
        }
      });
    });
@@ -1053,10 +1286,71 @@ export const useWorkflowGraph = ({
    // Listen to node move event
    graphRef.current.on('node:moved', nodeMoved);

+    if (isSafari) {
+      // When a parent (loop/iteration) node moves, keep child nodes in sync.
+      // Store each child's offset relative to the parent at drag start, then
+      // reapply it every frame to avoid cumulative delta errors.
+      const dragOffsets = new Map<string, { dx: number; dy: number }>();
+
+      graphRef.current.on('node:moving', ({ node }: { node: Node }) => {
+        const data = node.getData();
+        if (data?.type !== 'loop' && data?.type !== 'iteration') return;
+        const pos = node.getPosition();
+        const PORT_RADIUS = 6;
+
+        // Update parent componentContainer directly
+        const parentView = graphRef.current?.findViewByCell(node) as any;
+        if (parentView?.componentContainer) {
+          parentView.componentContainer.style.transform =
+            `translate(${pos.x + PORT_RADIUS}px, ${pos.y}px)`;
+        }
+
+        const children = graphRef.current?.getNodes().filter(child => {
+          const cycle = child.getData()?.cycle;
+          return cycle === data.id || cycle === node.id;
+        }) ?? [];
+
+        // First event for this drag: record offsets
+        if (!dragOffsets.has(node.id)) {
+          children.forEach(child => {
+            const cp = child.getPosition();
+            dragOffsets.set(child.id, { dx: cp.x - pos.x, dy: cp.y - pos.y });
+          });
+        }
+
+        // Apply stored offsets to keep children in place relative to parent
+        children.forEach(child => {
+          const off = dragOffsets.get(child.id);
+          if (!off) return;
+          const nx = pos.x + off.dx;
+          const ny = pos.y + off.dy;
+          child.setPosition(nx, ny);
+          const childView = graphRef.current?.findViewByCell(child) as any;
+          if (childView?.componentContainer) {
+            childView.componentContainer.style.transform =
+              `translate(${nx + PORT_RADIUS}px, ${ny}px)`;
+          }
+        });
+      });
+
+      graphRef.current.on('node:moved', ({ node }: { node: Node }) => {
+        // Clear offsets for this parent and all its children
+        const data = node.getData();
+        graphRef.current?.getNodes().forEach(child => {
+          const cycle = child.getData()?.cycle;
+          if (cycle === data?.id || cycle === node.id) dragOffsets.delete(child.id);
+        });
+        dragOffsets.delete(node.id);
+        nodeMoved({ node });
+      });
+    }
+
    graphRef.current.on('node:removed', blankClick)
-    // When edge connected, bring connected nodes' ports to front
+    // When edge connected, reorder all cells to maintain correct layer order
    graphRef.current.on('edge:connected', ({ isNew, edge }) => {
-      if (isNew) {
+      if (isSafari && isNew && graphRef.current) {
+        reorderCells(graphRef.current);
+      } else if (!isSafari && isNew) {
        const sourceCellId = edge.getSourceCellId()
        const targetCellId = edge.getTargetCellId()
        const sourceCell = graphRef.current?.getCellById(sourceCellId);
@@ -1126,8 +1420,8 @@ export const useWorkflowGraph = ({
    // Delete selected nodes and edges
    graphRef.current.bindKey(['ctrl+d', 'cmd+d', 'delete', 'backspace'], deleteEvent);
    // Undo / Redo
-    graphRef.current.bindKey(['ctrl+z', 'cmd+z'], () => { graphRef.current?.undo(); return false; });
-    graphRef.current.bindKey(['ctrl+y', 'cmd+y', 'ctrl+shift+z', 'cmd+shift+z'], () => { graphRef.current?.redo(); return false; });
+    graphRef.current.bindKey(['ctrl+z', 'cmd+z'], () => { undo(); return false; });
+    graphRef.current.bindKey(['ctrl+y', 'cmd+y', 'ctrl+shift+z', 'cmd+shift+z'], () => { redo(); return false; });

  };

@@ -1170,7 +1464,7 @@ export const useWorkflowGraph = ({
   * Creates new node at drop position
   * @param event - React drag event
   */
-  const onDrop = (event: React.DragEvent) => {
+  const onDrop = (event: DragEvent) => {
    if (!graphRef.current) return;
    event.preventDefault();
    const dragData = JSON.parse(event.dataTransfer.getData('application/json'));
@@ -1193,13 +1487,51 @@ export const useWorkflowGraph = ({
    };

    if (dragData.type === 'loop' || dragData.type === 'iteration') {
-      graphRef.current.addNode({
+      graph.disableHistory()
+      const parentNode = graphRef.current.addNode({
        ...graphNodeLibrary[dragData.type],
        x: point.x - 150,
        y: point.y - 100,
        id: cleanNodeData.id,
        data: { ...cleanNodeData, isGroup: true },
-      });
+      })
+      const parentBBox = parentNode.getBBox()
+      const cycleStartId = `cycle_start_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+      const cycleStartNode = graphRef.current.addNode({
+        ...graphNodeLibrary.cycleStart,
+        x: parentBBox.x + 24,
+        y: parentBBox.y + 70,
+        id: cycleStartId,
+        data: { id: cycleStartId, type: 'cycle-start', parentId: cleanNodeData.id, isDefault: true, cycle: cleanNodeData.id },
+      })
+      const addNode = graphRef.current.addNode({
+        ...graphNodeLibrary.addStart,
+        x: parentBBox.x + 24 + 84,
+        y: parentBBox.y + 70 + 4,
+        data: { type: 'add-node', label: t('workflow.addNode'), icon: '+', parentId: cleanNodeData.id, cycle: cleanNodeData.id },
+      })
+      parentNode.addChild(cycleStartNode, { silent: true })
+      parentNode.addChild(addNode, { silent: true })
+      const newEdge = graphRef.current.addEdge({
+        source: { cell: cycleStartNode.id, port: cycleStartNode.getPorts().find(p => p.group === 'right')?.id || 'right' },
+        target: { cell: addNode.id, port: addNode.getPorts().find(p => p.group === 'left')?.id || 'left' },
+        ...edgeAttrs,
+      })
+      cycleStartNode.toFront()
+      addNode.toFront()
+      graph.enableHistory()
+      // Manually push a single batch frame covering all 4 cells into undoStack
+      const history = graph.getPlugin('history') as History
+      const makeBatchCmd = (cell: any) => ({
+        batch: true,
+        event: 'cell:added',
+        data: { id: cell.id, node: cell.isNode(), edge: cell.isEdge(), props: cell.toJSON() },
+        options: {},
+      })
+      const batchFrame = [parentNode, cycleStartNode, addNode, newEdge].map(makeBatchCmd)
+      ;(history as any).undoStack.push(batchFrame)
+      ;(history as any).redoStack = []
+      graph.trigger('history:change', { cmds: batchFrame, options: { name: 'add-group' } })
    } else if (dragData.type === 'if-else') {
      // Create condition node
      graphRef.current.addNode({
@@ -1446,8 +1778,80 @@ export const useWorkflowGraph = ({
    return userVars
  }

-  const undo = () => graphRef.current?.undo()
-  const redo = () => graphRef.current?.redo()
+  const clearHistoryRecords = () => {
+    setHistoryRecords([])
+    lastHistoryRef.current = null
+  }
+
+  const getStackCellIds = (cmds: any): string[] => {
+    const arr = Array.isArray(cmds) ? cmds : [cmds]
+    return [...new Set(arr.map((c: any) => c.data?.id).filter(Boolean))]
+  }
+
+  const isSkippableFrame = (frame: any): boolean => {
+    const arr = Array.isArray(frame) ? frame : [frame]
+    return arr.every((c: any) => ['zIndex', 'attrs', 'tools'].includes(c.data?.key))
+  }
+
+  const undo = () => {
+    const history = graphRef.current?.getPlugin('history') as History | undefined
+    if (!history || history.getUndoSize() === 0) return
+    const undoStack = (history as any).undoStack as any[]
+    isSyncingRef.current = true
+    while (undoStack.length > 0 && isSkippableFrame(undoStack[undoStack.length - 1])) {
+      graphRef.current!.undo()
+    }
+    if (undoStack.length === 0) {
+      isSyncingRef.current = false
+      return
+    }
+    const topIds = getStackCellIds(undoStack[undoStack.length - 1])
+    graphRef.current!.undo()
+    while (undoStack.length > 0) {
+      if (isSkippableFrame(undoStack[undoStack.length - 1])) {
+        graphRef.current!.undo()
+        continue
+      }
+      const nextIds = getStackCellIds(undoStack[undoStack.length - 1])
+      if (nextIds.length === topIds.length && nextIds.every((id, i) => id === topIds[i])) {
+        graphRef.current!.undo()
+      } else {
+        break
+      }
+    }
+    isSyncingRef.current = false
+    syncChildRelationships()
+  }
+
+  const redo = () => {
+    const history = graphRef.current?.getPlugin('history') as History | undefined
+    if (!history || history.getRedoSize() === 0) return
+    const redoStack = (history as any).redoStack as any[]
+    isSyncingRef.current = true
+    while (redoStack.length > 0 && isSkippableFrame(redoStack[redoStack.length - 1])) {
+      graphRef.current!.redo()
+    }
+    if (redoStack.length === 0) {
+      isSyncingRef.current = false
+      return
+    }
+    const topIds = getStackCellIds(redoStack[redoStack.length - 1])
+    graphRef.current!.redo()
+    while (redoStack.length > 0) {
+      if (isSkippableFrame(redoStack[redoStack.length - 1])) {
+        graphRef.current!.redo()
+        continue
+      }
+      const nextIds = getStackCellIds(redoStack[redoStack.length - 1])
+      if (nextIds.length === topIds.length && nextIds.every((id, i) => id === topIds[i])) {
+        graphRef.current!.redo()
+      } else {
+        break
+      }
+    }
+    isSyncingRef.current = false
+    syncChildRelationships()
+  }

  const handleSaveFeaturesConfig = (value?: FeaturesConfigForm) => {
    const { statement = '' } = value?.opening_statement || {}
@@ -1488,20 +1892,16 @@ export const useWorkflowGraph = ({
    if (!graphRef.current) return;
    const nodes = graphRef.current.getNodes();

-    const lastWithSub = [...chatHistory].reverse().find(item => item.subContent?.length);
-    // Reset all node execution status first
+    // Reset all node execution status on every chatHistory change
    nodes.forEach(node => {
      const data = node.getData();
-      if (typeof data.executionStatus === 'string') {
-        node.setData({ ...data, executionStatus: undefined });
-      }
+      node.setData({ ...data, executionStatus: '' });
    });
-    if (!lastWithSub?.subContent) return;
-    // Build a nodeId -> status map first
-    const statusMap: Record<string, string> = {};
-    lastWithSub.subContent.forEach(sub => {
+
+    const lastAssistant = [...chatHistory].reverse().find(item => item.role === 'assistant');
+    if (!lastAssistant?.subContent?.length) return;
+    lastAssistant.subContent.forEach(sub => {
      if (typeof sub.status === 'string') {
-        statusMap[sub.node_id] = sub.status;
        const node = nodes.find(n => n.getData()?.id === sub.node_id);
        if (node) {
          node.setData({ ...node.getData(), executionStatus: sub.status });
@@ -1537,5 +1937,7 @@ export const useWorkflowGraph = ({
    canRedo,
    undo,
    redo,
+    historyRecords,
+    clearHistoryRecords,
  };
 };
--- a/web/src/views/Workflow/types.ts
+++ b/web/src/views/Workflow/types.ts
@@ -113,4 +113,13 @@ export interface ChatVariable {
 }
 export interface AddChatVariableRef {
  handleOpen: (value?: ChatVariable) => void;
+}
+
+export type HistoryActionType = 'add' | 'remove' | 'change' | 'undo' | 'redo' | 'batch'
+
+export interface HistoryRecord {
+  type: HistoryActionType;
+  timestamp: number;
+  batchName?: string;
+  cellIds?: string[];
 }
--- a/web/src/views/Workflow/utils.ts
+++ b/web/src/views/Workflow/utils.ts
@@ -17,6 +17,7 @@ export const isSubExprSet = (sub: any) => {
 * Uses the same per-expression height logic as getConditionNodeCasePortY.
 */
 export const calcConditionNodeTotalHeight = (cases: any[]) => {
+  if (!cases?.length) return conditionNodeHeight;
  const casesHeight = cases.reduce((acc: number, c: any) => {
    const exprs = c?.expressions ?? [];
    const n = exprs.length;
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -44,6 +44,9 @@ export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
+      'x6-html-shape': resolve(__dirname, 'src/vendor/x6-html-shape/index.js'),
+      'x6-html-shape/dist/react': resolve(__dirname, 'src/vendor/x6-html-shape/react.js'),
+      'x6-html-shape/dist/utils.js': resolve(__dirname, 'src/vendor/x6-html-shape/utils.js'),
    },
  },
  base: './', // 使用相对路径，确保资源能正确加载