diff --git a/internal/ai/workflow/dsl/types.go b/internal/ai/workflow/dsl/types.go
index d193648..5f0cc57 100644
--- a/internal/ai/workflow/dsl/types.go
+++ b/internal/ai/workflow/dsl/types.go
@@ -7,6 +7,7 @@ const SchemaVersion = 2
 type Definition struct {
 	SchemaVersion int    `json:"schemaVersion"`
 	Nodes         []Node `json:"nodes"`
+	Annotations   []Node `json:"annotations,omitempty"`
 	Edges         []Edge `json:"edges"`
 }
 
@@ -187,3 +188,22 @@ func (d *NodeData) UnmarshalJSON(data []byte) error {
 	}
 	return nil
 }
+
+func (d NodeData) MarshalJSON() ([]byte, error) {
+	type alias NodeData
+	base, err := json.Marshal(alias(d))
+	if err != nil {
+		return nil, err
+	}
+	values := make(map[string]json.RawMessage)
+	if err := json.Unmarshal(base, &values); err != nil {
+		return nil, err
+	}
+	for key, value := range d.Extra {
+		if _, exists := values[key]; exists {
+			continue
+		}
+		values[key] = value
+	}
+	return json.Marshal(values)
+}
diff --git a/internal/ai/workflow/dsl/types_test.go b/internal/ai/workflow/dsl/types_test.go
index 2b6f30e..e1e4b7c 100644
--- a/internal/ai/workflow/dsl/types_test.go
+++ b/internal/ai/workflow/dsl/types_test.go
@@ -2,6 +2,7 @@ package dsl_test
 
 import (
 	"encoding/json"
+	"strings"
 	"testing"
 
 	"agent-desk/internal/ai/workflow/dsl"
@@ -81,3 +82,32 @@ func TestDefinitionUnmarshalsFlowGramStyleSchema(t *testing.T) {
 		t.Fatalf("unexpected edge: %#v", edge)
 	}
 }
+
+func TestDefinitionPreservesCanvasAnnotations(t *testing.T) {
+	var def dsl.Definition
+	err := json.Unmarshal([]byte(`{
+		"schemaVersion": 2,
+		"nodes": [],
+		"annotations": [{
+			"id": "comment_1",
+			"type": "comment",
+			"meta": {"position": {"x": 12, "y": 34}},
+			"data": {"note": "check this branch", "size": {"width": 240, "height": 150}}
+		}],
+		"edges": []
+	}`), &def)
+	if err != nil {
+		t.Fatalf("unmarshal definition: %v", err)
+	}
+	if len(def.Annotations) != 1 || def.Annotations[0].ID != "comment_1" {
+		t.Fatalf("expected annotation to be preserved, got %#v", def.Annotations)
+	}
+	encoded, err := json.Marshal(def)
+	if err != nil {
+		t.Fatalf("marshal definition: %v", err)
+	}
+	if !strings.Contains(string(encoded), `"annotations"`) ||
+		!strings.Contains(string(encoded), `"check this branch"`) {
+		t.Fatalf("expected annotation JSON to round trip, got %s", encoded)
+	}
+}
diff --git a/web/app/dashboard/ai-workflow-runs/_components/workflow-run-audit-graph.tsx b/web/app/dashboard/ai-workflow-runs/_components/workflow-run-audit-graph.tsx
index 1d457f3..183e4af 100644
--- a/web/app/dashboard/ai-workflow-runs/_components/workflow-run-audit-graph.tsx
+++ b/web/app/dashboard/ai-workflow-runs/_components/workflow-run-audit-graph.tsx
@@ -2,7 +2,6 @@
 
 import { useMemo, useState } from "react"
 
-import { EditorRenderer, FreeLayoutEditorProvider } from "@flowgram.ai/free-layout-editor"
 import { AlertTriangleIcon, CheckCircle2Icon, TimerIcon } from "lucide-react"
 
 import { JsonTreeViewer } from "@/components/json-tree-viewer"
@@ -11,26 +10,21 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import type { AIWorkflowNodeRun, AIWorkflowRun } from "@/lib/api/admin"
 import { cn } from "@/lib/utils"
 
-import { useFlowgramEditorProps } from "../../ai-workflows/_components/flowgram-editor-provider"
+import { WorkflowReadonlyCanvas } from "../../ai-workflows/_components/editor/workflow-editor"
 
 export function WorkflowRunAuditGraph({ run }: { run: AIWorkflowRun }) {
-  const nodeRuns = run.nodes ?? []
+  const nodeRuns = useMemo(() => run.nodes ?? [], [run.nodes])
   const firstNodeId = nodeRuns[0]?.nodeId ?? run.definition?.nodes?.[0]?.id ?? ""
   const [selectedNodeId, setSelectedNodeId] = useState(firstNodeId)
   const selectedNodeRun = nodeRuns.find((item) => item.nodeId === selectedNodeId) ?? nodeRuns[0]
   const executedNodeIds = useMemo(() => new Set(nodeRuns.map((item) => item.nodeId)), [nodeRuns])
-  const editorProps = useFlowgramEditorProps({
-    definition: run.definition ?? { schemaVersion: 2, nodes: [], edges: [] },
-    nodeSpecs: [],
-    readonly: true,
-  })
 
   return (
     <div className="grid min-h-[520px] grid-cols-[minmax(0,1fr)_320px] overflow-hidden border">
       <div className="relative min-w-0">
-        <FreeLayoutEditorProvider {...editorProps}>
-          <EditorRenderer className="h-full w-full" />
-        </FreeLayoutEditorProvider>
+        <WorkflowReadonlyCanvas
+          definition={run.definition ?? { schemaVersion: 2, nodes: [], edges: [] }}
+        />
         <div className="pointer-events-none absolute left-3 top-3 flex flex-wrap gap-2">
           <Badge variant="secondary" className="gap-1">
             <CheckCircle2Icon className="size-3" />
diff --git a/web/app/dashboard/ai-workflows/_components/editor/base-node.tsx b/web/app/dashboard/ai-workflows/_components/editor/base-node.tsx
new file mode 100644
index 0000000..f681a3e
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/base-node.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+/* eslint-disable react-hooks/refs -- FlowGram useNodeRender exposes reactive render state through a ref-backed adapter. */
+
+import { useLayoutEffect, useState } from "react"
+
+import {
+  WorkflowPortRender,
+  type WorkflowNodeProps,
+  useNodeRender,
+} from "@flowgram.ai/free-layout-editor"
+import { usePanelManager } from "@flowgram.ai/panel-manager-plugin"
+
+import { cn } from "@/lib/utils"
+
+import { WorkflowEditorSurfaceProvider } from "./editor-context"
+import { usePortClick } from "./use-port-click"
+
+export const NODE_FORM_PANEL = "workflow-node-form"
+
+export function BaseNode(props: WorkflowNodeProps) {
+  const render = useNodeRender(props.node)
+  const panelManager = usePanelManager()
+  const onPortClick = usePortClick()
+  const [dragging, setDragging] = useState(false)
+
+  useLayoutEffect(() => {
+    if (String(render.node.flowNodeType) !== "condition") return
+    const frame = window.requestAnimationFrame(() => {
+      render.node.ports.updateDynamicPorts()
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [render.data, render.node])
+
+  return (
+    <WorkflowEditorSurfaceProvider surface="canvas">
+      <div
+        ref={render.nodeRef}
+        className={cn(
+          "relative flex w-[360px] flex-col rounded-lg border bg-white",
+          "border-[rgba(6,7,9,0.15)] shadow-[0_2px_6px_rgba(0,0,0,0.04),0_4px_12px_rgba(0,0,0,0.02)]",
+          render.selected && "border-[#4e40e5]"
+        )}
+        draggable={!render.readonly}
+        onDragStart={(event) => {
+          render.startDrag(event)
+          setDragging(true)
+        }}
+        onTouchStart={(event) => {
+          render.startDrag(event as unknown as React.MouseEvent)
+          setDragging(true)
+        }}
+        onMouseUp={() => setDragging(false)}
+        onClick={(event) => {
+          render.selectNode(event)
+          if (!render.readonly && !dragging) {
+            panelManager.open(NODE_FORM_PANEL, "docked-right", {
+              props: { nodeId: render.node.id },
+            })
+          }
+        }}
+        onFocus={render.onFocus}
+        onBlur={render.onBlur}
+      >
+        {render.form?.render()}
+      </div>
+      {render.ports.map((port) => (
+        <WorkflowPortRender
+          key={port.id}
+          entity={port}
+          onClick={render.readonly ? undefined : onPortClick}
+        />
+      ))}
+    </WorkflowEditorSurfaceProvider>
+  )
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/comment-node.tsx b/web/app/dashboard/ai-workflows/_components/editor/comment-node.tsx
new file mode 100644
index 0000000..9e31e03
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/comment-node.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+/* eslint-disable react-hooks/refs -- FlowGram useNodeRender exposes reactive render state through a ref-backed adapter. */
+
+import { useLayoutEffect } from "react"
+
+import {
+  Field,
+  FlowNodeFormData,
+  Form,
+  type FormModelV2,
+  type WorkflowNodeProps,
+  useNodeRender,
+} from "@flowgram.ai/free-layout-editor"
+import { Trash2Icon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type CommentSize = {
+  width?: number
+  height?: number
+}
+
+export function CommentNode(props: WorkflowNodeProps) {
+  const render = useNodeRender(props.node)
+  const formModel = render.node
+    .getData(FlowNodeFormData)
+    .getFormModel<FormModelV2>()
+  const size = (formModel?.getValueIn("size") ?? {}) as CommentSize
+  const width = Math.max(120, Number(size.width) || 240)
+  const height = Math.max(80, Number(size.height) || 150)
+
+  useLayoutEffect(() => {
+    render.node.transform.update({
+      size: { width, height },
+    })
+  }, [height, render.node, width])
+
+  return (
+    <div
+      ref={render.nodeRef}
+      className={cn(
+        "group relative rounded-lg border border-[#f5c451] bg-[#fff9dc] p-2 text-[#594a16] shadow-sm",
+        render.selected && "border-[#f59e0b] ring-1 ring-[#f59e0b]/25"
+      )}
+      style={{ width, height }}
+      onMouseDown={render.selectNode}
+      onFocus={render.onFocus}
+      onBlur={render.onBlur}
+    >
+      <div
+        className="absolute inset-x-0 top-0 h-7 cursor-move"
+        draggable={!render.readonly}
+        onDragStart={render.startDrag}
+      />
+      {!render.readonly ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-xs"
+          aria-label="删除注释"
+          className="absolute right-1 top-1 z-10 text-[#a46b00] opacity-0 hover:bg-[#f5c451]/20 group-hover:opacity-100"
+          onClick={(event) => {
+            event.stopPropagation()
+            render.deleteNode()
+          }}
+        >
+          <Trash2Icon />
+        </Button>
+      ) : null}
+      <Form control={formModel?.formControl}>
+        <Field<string> name="note">
+          {({ field }) => (
+            <textarea
+              value={field.value ?? ""}
+              readOnly={render.readonly}
+              aria-label="注释内容"
+              placeholder="输入注释..."
+              className="relative mt-5 h-[calc(100%-1.25rem)] w-full resize-none border-0 bg-transparent p-0 text-sm leading-6 outline-none placeholder:text-[#9a8650]"
+              onMouseDown={(event) => event.stopPropagation()}
+              onChange={(event) => field.onChange(event.target.value)}
+            />
+          )}
+        </Field>
+      </Form>
+    </div>
+  )
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/editor-canvas-events.tsx b/web/app/dashboard/ai-workflows/_components/editor/editor-canvas-events.tsx
new file mode 100644
index 0000000..c707d9a
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/editor-canvas-events.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { WorkflowNodePanelService } from "@flowgram.ai/free-node-panel-plugin"
+import {
+  useClientContext,
+  useService,
+  WorkflowDragService,
+  WorkflowSelectService,
+  type WorkflowNodeEntity,
+  type WorkflowNodeJSON,
+} from "@flowgram.ai/free-layout-editor"
+
+export function EditorCanvasEvents() {
+  const context = useClientContext()
+  const nodePanel = useService(WorkflowNodePanelService)
+  const selection = useService(WorkflowSelectService)
+  const dragService = useService(WorkflowDragService)
+
+  useEffect(() => {
+    const element = context.playground.node
+    const handleContextMenu = (event: MouseEvent) => {
+      if (context.playground.config.readonlyOrDisabled) return
+      const position = context.playground.config.getPosFromMouseEvent(event)
+      event.preventDefault()
+      event.stopPropagation()
+      void nodePanel.callNodePanel({
+        position,
+        onSelect: (result) => {
+          if (!result) return
+          const nodePosition = dragService.adjustSubNodePosition(
+            result.nodeType,
+            undefined,
+            position
+          )
+          const node: WorkflowNodeEntity =
+            context.document.createWorkflowNodeByType(
+              result.nodeType,
+              nodePosition,
+              result.nodeJSON ?? ({} as WorkflowNodeJSON)
+            )
+          selection.selectNode(node)
+        },
+        onClose: () => undefined,
+      })
+    }
+    element.addEventListener("contextmenu", handleContextMenu)
+    return () => element.removeEventListener("contextmenu", handleContextMenu)
+  }, [context, dragService, nodePanel, selection])
+
+  return null
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/editor-context.tsx b/web/app/dashboard/ai-workflows/_components/editor/editor-context.tsx
new file mode 100644
index 0000000..a2f3042
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/editor-context.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { createContext, useContext, type ReactNode } from "react"
+
+import type { WorkflowEditorContextValue } from "./types"
+
+const WorkflowEditorContext = createContext<WorkflowEditorContextValue | null>(null)
+const WorkflowEditorSurfaceContext = createContext<"canvas" | "sidebar">("canvas")
+
+export function WorkflowEditorContextProvider({
+  value,
+  children,
+}: {
+  value: WorkflowEditorContextValue
+  children: ReactNode
+}) {
+  return (
+    <WorkflowEditorContext.Provider value={value}>
+      {children}
+    </WorkflowEditorContext.Provider>
+  )
+}
+
+export function WorkflowEditorSurfaceProvider({
+  surface,
+  children,
+}: {
+  surface: "canvas" | "sidebar"
+  children: ReactNode
+}) {
+  return (
+    <WorkflowEditorSurfaceContext.Provider value={surface}>
+      {children}
+    </WorkflowEditorSurfaceContext.Provider>
+  )
+}
+
+export function useWorkflowEditorContext() {
+  const value = useContext(WorkflowEditorContext)
+  if (!value) {
+    throw new Error("WorkflowEditorContext is unavailable")
+  }
+  return value
+}
+
+export function useWorkflowEditorSurface() {
+  return useContext(WorkflowEditorSurfaceContext)
+}
+
diff --git a/web/app/dashboard/ai-workflows/_components/editor/editor-provider.tsx b/web/app/dashboard/ai-workflows/_components/editor/editor-provider.tsx
new file mode 100644
index 0000000..b7768c2
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/editor-provider.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { useMemo } from "react"
+
+import { createFreeAutoLayoutPlugin } from "@flowgram.ai/free-auto-layout-plugin"
+import { createDownloadPlugin } from "@flowgram.ai/export-plugin"
+import {
+  type FreeLayoutPluginContext,
+  type FreeLayoutProps,
+  type WorkflowJSON,
+} from "@flowgram.ai/free-layout-editor"
+import { createFreeLinesPlugin } from "@flowgram.ai/free-lines-plugin"
+import { createFreeNodePanelPlugin } from "@flowgram.ai/free-node-panel-plugin"
+import { createFreeSnapPlugin } from "@flowgram.ai/free-snap-plugin"
+import { createFreeStackPlugin } from "@flowgram.ai/free-stack-plugin"
+import { createMinimapPlugin } from "@flowgram.ai/minimap-plugin"
+import {
+  createPanelManagerPlugin,
+  type PanelFactory,
+} from "@flowgram.ai/panel-manager-plugin"
+
+import type {
+  AIWorkflowDefinition,
+  AIWorkflowNodeSpec,
+} from "@/lib/api/admin"
+
+import { BaseNode, NODE_FORM_PANEL } from "./base-node"
+import { CommentNode } from "./comment-node"
+import { LineAddButton } from "./line-add-button"
+import { NodeFormPanel } from "./node-form-panel"
+import { NodePanel } from "./node-panel"
+import { buildNodeRegistries } from "./node-registry"
+import { onDragLineEnd } from "./on-drag-line-end"
+import {
+  prepareDefinitionForEditor,
+  serializeDefinition,
+} from "./workflow-model"
+
+export function useWorkflowEditorProps({
+  definition,
+  nodeSpecs,
+  readonly = false,
+  onDefinitionChange,
+}: {
+  definition: AIWorkflowDefinition
+  nodeSpecs: AIWorkflowNodeSpec[]
+  readonly?: boolean
+  onDefinitionChange?: (definition: AIWorkflowDefinition) => void
+}): FreeLayoutProps {
+  return useMemo(() => {
+    const panelFactories: PanelFactory<{ nodeId: string }>[] = readonly
+      ? []
+      : [
+          {
+            key: NODE_FORM_PANEL,
+            defaultSize: 500,
+            minSize: 300,
+            maxSize: 800,
+            render: (props) => <NodeFormPanel {...props} />,
+          },
+        ]
+
+    return {
+      background: true,
+      readonly,
+      twoWayConnection: true,
+      enableReadonlyNodeDragging: false,
+      playground: { preventGlobalGesture: true },
+      scroll: { disableScrollBar: true, enableScrollLimit: false },
+      initialData: prepareDefinitionForEditor(definition) as WorkflowJSON,
+      nodeRegistries: buildNodeRegistries(nodeSpecs),
+      getNodeDefaultRegistry: (type) => ({
+        type,
+        meta: { defaultExpanded: true },
+      }),
+      fromNodeJSON: (_node, json) => json,
+      toNodeJSON: (_node, json) => json,
+      materials: {
+        renderDefaultNode: BaseNode,
+        renderNodes: { comment: CommentNode },
+      },
+      nodeEngine: { enable: true },
+      variableEngine: { enable: true },
+      history: {
+        enable: !readonly,
+        enableChangeNode: !readonly,
+      },
+      lineColor: {
+        hidden: "transparent",
+        default: "#94a3b8",
+        drawing: "#2563eb",
+        hovered: "#2563eb",
+        selected: "#2563eb",
+        error: "#dc2626",
+        flowing: "#2563eb",
+      },
+      canAddLine: (_ctx, fromPort, toPort) => {
+        if (readonly || fromPort.node === toPort.node) return false
+        return !fromPort.node.lines.allInputNodes.includes(toPort.node)
+      },
+      canDeleteLine: () => !readonly,
+      canDeleteNode: (_ctx, node) =>
+        !readonly && !["start", "end"].includes(String(node.flowNodeType)),
+      onContentChange: (ctx) => {
+        if (readonly || ctx.document.disposed) return
+        onDefinitionChange?.(
+          serializeDefinition(ctx.document.toJSON() as AIWorkflowDefinition)
+        )
+      },
+      onDragLineEnd: readonly ? undefined : onDragLineEnd,
+      onAllLayersRendered: (ctx: FreeLayoutPluginContext) => {
+        window.requestAnimationFrame(() => ctx.tools.fitView(false))
+      },
+      plugins: () => [
+        createFreeStackPlugin({}),
+        createFreeLinesPlugin({
+          renderInsideLine: readonly ? undefined : LineAddButton,
+        }),
+        createMinimapPlugin({
+          disableLayer: true,
+          canvasStyle: {
+            canvasWidth: 176,
+            canvasHeight: 104,
+            canvasPadding: 32,
+            canvasBackground: "#f8fafc",
+            viewportBackground: "rgba(255,255,255,.7)",
+            viewportBorderColor: "#cbd5e1",
+            nodeColor: "#cbd5e1",
+          },
+        }),
+        createFreeSnapPlugin({
+          edgeColor: "#2563eb",
+          alignColor: "#2563eb",
+        }),
+        createFreeAutoLayoutPlugin({}),
+        createDownloadPlugin({
+          getFilename: (format) => `workflow.${format}`,
+        }),
+        ...(readonly
+          ? []
+          : [
+              createFreeNodePanelPlugin({ renderer: NodePanel }),
+              createPanelManagerPlugin({
+                factories: panelFactories,
+                autoResize: true,
+              }),
+            ]),
+      ],
+    }
+  }, [definition, nodeSpecs, onDefinitionChange, readonly])
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/editor-tools.tsx b/web/app/dashboard/ai-workflows/_components/editor/editor-tools.tsx
new file mode 100644
index 0000000..fc75a09
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/editor-tools.tsx
@@ -0,0 +1,483 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+import {
+  FlowDownloadFormat,
+  FlowDownloadService,
+} from "@flowgram.ai/export-plugin"
+import { WorkflowNodePanelService } from "@flowgram.ai/free-node-panel-plugin"
+import {
+  type InteractiveType,
+  useClientContext,
+  usePlayground,
+  usePlaygroundTools,
+  useRefresh,
+  useService,
+  WorkflowDocument,
+  WorkflowDragService,
+  WorkflowLinesManager,
+  WorkflowSelectService,
+  type WorkflowNodeEntity,
+  type WorkflowNodeJSON,
+} from "@flowgram.ai/free-layout-editor"
+import { MinimapRender } from "@flowgram.ai/minimap-plugin"
+import {
+  AlertTriangleIcon,
+  CheckIcon,
+  DownloadIcon,
+  FocusIcon,
+  GitBranchIcon,
+  HandIcon,
+  LayoutDashboardIcon,
+  LockIcon,
+  MousePointer2Icon,
+  MessageSquareTextIcon,
+  PlusIcon,
+  Redo2Icon,
+  Undo2Icon,
+  UnlockIcon,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import type { AIWorkflowValidationResult } from "@/lib/api/admin"
+
+const INTERACTIVE_TYPE_KEY = "workflow_prefer_interactive_type"
+
+export function EditorTools({
+  onValidate,
+  onValidation,
+}: {
+  onValidate: () => Promise<AIWorkflowValidationResult>
+  onValidation: (result: AIWorkflowValidationResult) => void
+}) {
+  const tools = usePlaygroundTools({ maxZoom: 2, minZoom: 0.25 })
+  const playground = usePlayground()
+  const refresh = useRefresh()
+  const { history } = useClientContext()
+  const document = useService(WorkflowDocument)
+  const linesManager = useService(WorkflowLinesManager)
+  const selection = useService(WorkflowSelectService)
+  const dragService = useService(WorkflowDragService)
+  const nodePanel = useService(WorkflowNodePanelService)
+  const downloadService = useService(FlowDownloadService)
+  const addButtonRef = useRef<HTMLButtonElement>(null)
+  const [minimapVisible, setMinimapVisible] = useState(true)
+  const [validating, setValidating] = useState(false)
+  const [interactiveType, setInteractiveType] =
+    useState<InteractiveType>("PAD" as InteractiveType)
+  const [historyState, setHistoryState] = useState({
+    undo: history.canUndo(),
+    redo: history.canRedo(),
+  })
+
+  useEffect(() => {
+    const preferred = readPreferredInteractiveType()
+    setInteractiveType(preferred)
+    tools.setInteractiveType(preferred)
+  }, [tools])
+
+  useEffect(() => {
+    const disposable = history.undoRedoService.onChange(() =>
+      setHistoryState({ undo: history.canUndo(), redo: history.canRedo() })
+    )
+    return () => disposable.dispose()
+  }, [history])
+
+  useEffect(() => {
+    const disposable = playground.config.onReadonlyOrDisabledChange(refresh)
+    return () => disposable.dispose()
+  }, [playground, refresh])
+
+  async function addNode() {
+    const rect = addButtonRef.current?.getBoundingClientRect()
+    if (!rect) return
+    const position = playground.config.getPosFromMouseEvent({
+      clientX: rect.left + 64,
+      clientY: rect.top - 7,
+    })
+    await nodePanel.callNodePanel({
+      position,
+      enableMultiAdd: true,
+      onSelect: (result) => {
+        if (!result) return
+        const node: WorkflowNodeEntity = document.createWorkflowNodeByType(
+          result.nodeType,
+          undefined,
+          result.nodeJSON ?? ({} as WorkflowNodeJSON)
+        )
+        selection.selectNode(node)
+      },
+      onClose: () => undefined,
+    })
+  }
+
+  async function validate(purpose: "problem" | "test" = "problem") {
+    setValidating(true)
+    try {
+      const result = await onValidate()
+      onValidation(result)
+      if (purpose === "test" && result.valid) {
+        toast.success(
+          "预运行检查已通过；实际工作流会由已关联 Agent 的会话触发"
+        )
+      }
+      return result
+    } finally {
+      setValidating(false)
+    }
+  }
+
+  async function createComment(event: React.MouseEvent<HTMLButtonElement>) {
+    const position = playground.config.getPosFromMouseEvent(event)
+    const node = document.createWorkflowNodeByType(
+      "comment",
+      { x: position.x, y: position.y - 75 },
+      {
+        id: `comment_${Date.now()}`,
+        type: "comment",
+        data: {
+          size: { width: 240, height: 150 },
+          note: "",
+        },
+      } as WorkflowNodeJSON
+    )
+    await new Promise<void>((resolve) =>
+      window.requestAnimationFrame(() => resolve())
+    )
+    selection.selectNode(node)
+    if (event.detail !== 0) {
+      dragService.startDragSelectedNodes(event)
+    }
+  }
+
+  async function download(format: FlowDownloadFormat) {
+    await downloadService.download({ format })
+    toast.success(`已导出 ${format.toUpperCase()}`)
+  }
+
+  const readonly = playground.config.readonly
+
+  return (
+    <div className="pointer-events-none absolute bottom-4 left-4 z-30 flex min-w-[360px] gap-2">
+      <div className="pointer-events-auto flex h-10 items-center gap-0.5 rounded-[10px] border border-[rgba(68,83,130,0.25)] bg-white px-1 shadow-[0_2px_6px_rgba(0,0,0,0.04),0_4px_12px_rgba(0,0,0,0.02)]">
+        <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <DropdownMenuTrigger
+                  render={
+                    <Button variant="ghost" size="icon-sm" aria-label="交互模式" />
+                  }
+                />
+              }
+            >
+              {interactiveType === ("MOUSE" as InteractiveType) ? (
+                <MousePointer2Icon />
+              ) : (
+                <HandIcon />
+              )}
+            </TooltipTrigger>
+            <TooltipContent>
+              {interactiveType === ("MOUSE" as InteractiveType)
+                ? "鼠标友好模式"
+                : "触控板友好模式"}
+            </TooltipContent>
+          </Tooltip>
+          <DropdownMenuContent side="top" align="start" className="w-[420px] p-3">
+            <div className="mb-3 text-base font-semibold">交互模式</div>
+            <div className="grid grid-cols-2 gap-2">
+              <InteractionOption
+                selected={interactiveType === ("MOUSE" as InteractiveType)}
+                icon={<MousePointer2Icon />}
+                title="鼠标友好"
+                description="按住鼠标左键拖动画布，滚轮缩放。"
+                onClick={() =>
+                  changeInteractiveType(
+                    "MOUSE" as InteractiveType,
+                    tools.setInteractiveType,
+                    setInteractiveType
+                  )
+                }
+              />
+              <InteractionOption
+                selected={interactiveType === ("PAD" as InteractiveType)}
+                icon={<HandIcon />}
+                title="触控板友好"
+                description="双指移动画布，双指捏合缩放。"
+                onClick={() =>
+                  changeInteractiveType(
+                    "PAD" as InteractiveType,
+                    tools.setInteractiveType,
+                    setInteractiveType
+                  )
+                }
+              />
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <ToolButton
+          label="自动布局"
+          disabled={readonly}
+          onClick={() =>
+            void tools.autoLayout({
+              enableAnimation: true,
+              animationDuration: 1000,
+              layoutConfig: { rankdir: "LR", nodesep: 100, ranksep: 100 },
+            })
+          }
+        >
+          <LayoutDashboardIcon />
+        </ToolButton>
+        <ToolButton label="切换线型" onClick={() => linesManager.switchLineType()}>
+          <GitBranchIcon />
+        </ToolButton>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <button
+                type="button"
+                className="w-[50px] rounded-lg border border-[rgba(68,83,130,0.25)] px-1 py-1 text-xs hover:bg-muted"
+              />
+            }
+          >
+            {Math.floor(tools.zoom * 100)}%
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="top" align="start">
+            <DropdownMenuItem onClick={() => tools.zoomin()}>
+              放大
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => tools.zoomout()}>
+              缩小
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {[0.5, 1, 1.5, 2].map((zoom) => (
+              <DropdownMenuItem
+                key={zoom}
+                onClick={() => playground.config.updateZoom(zoom)}
+              >
+                缩放至 {zoom * 100}%
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <ToolButton label="适应画布" onClick={() => tools.fitView()}>
+          <FocusIcon />
+        </ToolButton>
+        <ToolButton
+          label="缩略图"
+          active={minimapVisible}
+          onClick={() => setMinimapVisible((value) => !value)}
+        >
+          <LayoutDashboardIcon />
+        </ToolButton>
+        {minimapVisible ? (
+          <div className="absolute bottom-[60px] left-0 w-[198px] overflow-hidden rounded-lg border bg-white shadow-sm">
+            <MinimapRender
+              panelStyles={{}}
+              containerStyles={{
+                pointerEvents: "auto",
+                position: "relative",
+                inset: "unset",
+              }}
+              inactiveStyle={{
+                opacity: 1,
+                scale: 1,
+                translateX: 0,
+                translateY: 0,
+              }}
+            />
+          </div>
+        ) : null}
+        <ToolButton
+          label={readonly ? "切换为可编辑" : "切换为只读"}
+          onClick={() => {
+            playground.config.readonly = !playground.config.readonly
+          }}
+        >
+          {readonly ? <LockIcon /> : <UnlockIcon />}
+        </ToolButton>
+        <ToolButton
+          label="添加注释"
+          disabled={readonly}
+          onClick={(event) => void createComment(event)}
+        >
+          <MessageSquareTextIcon />
+        </ToolButton>
+        <ToolButton
+          label="撤销"
+          disabled={!historyState.undo || readonly}
+          onClick={() => void history.undo()}
+        >
+          <Undo2Icon />
+        </ToolButton>
+        <ToolButton
+          label="重做"
+          disabled={!historyState.redo || readonly}
+          onClick={() => void history.redo()}
+        >
+          <Redo2Icon />
+        </ToolButton>
+        <ToolButton
+          label="问题"
+          disabled={validating}
+          onClick={() => void validate("problem")}
+        >
+          <AlertTriangleIcon />
+        </ToolButton>
+
+        <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <DropdownMenuTrigger
+                  render={
+                    <Button variant="ghost" size="icon-sm" aria-label="下载" />
+                  }
+                />
+              }
+            >
+              <DownloadIcon />
+            </TooltipTrigger>
+            <TooltipContent>下载</TooltipContent>
+          </Tooltip>
+          <DropdownMenuContent side="top" align="start">
+            {Object.values(FlowDownloadFormat).map((format) => (
+              <DropdownMenuItem
+                key={format}
+                disabled={readonly}
+                onClick={() => void download(format)}
+              >
+                {format.toUpperCase()}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div className="mx-1 h-4 w-px bg-border" />
+        <Button
+          ref={addButtonRef}
+          size="sm"
+          className="h-8 rounded-lg border-0 bg-[rgba(171,181,255,0.3)] text-[#4e40e5] shadow-none hover:bg-[rgba(171,181,255,0.45)]"
+          disabled={readonly}
+          onClick={() => void addNode()}
+        >
+          <PlusIcon />
+          添加节点
+        </Button>
+        <div className="mx-1 h-4 w-px bg-border" />
+        <Button
+          size="sm"
+          className="h-8 rounded-lg bg-[rgba(171,181,255,0.3)] text-[#4e40e5] shadow-none hover:bg-[rgba(171,181,255,0.45)]"
+          disabled={readonly || validating}
+          onClick={() => void validate("test")}
+        >
+          <CheckIcon />
+          测试运行
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function InteractionOption({
+  selected,
+  icon,
+  title,
+  description,
+  onClick,
+}: {
+  selected: boolean
+  icon: React.ReactNode
+  title: string
+  description: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      className={`rounded-lg border p-3 text-left ${
+        selected ? "border-[#4e40e5] bg-[#f5f3ff]" : "hover:bg-muted/50"
+      }`}
+      onClick={onClick}
+    >
+      <span className={selected ? "text-[#4e40e5]" : "text-muted-foreground"}>
+        {icon}
+      </span>
+      <span className="mt-2 block text-sm font-semibold">{title}</span>
+      <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+        {description}
+      </span>
+    </button>
+  )
+}
+
+function ToolButton({
+  label,
+  disabled,
+  active,
+  onClick,
+  children,
+}: {
+  label: string
+  disabled?: boolean
+  active?: boolean
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
+  children: React.ReactNode
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className={active ? "bg-muted" : undefined}
+            aria-label={label}
+            disabled={disabled}
+            onClick={onClick}
+          />
+        }
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function readPreferredInteractiveType() {
+  const stored = window.localStorage.getItem(INTERACTIVE_TYPE_KEY)
+  if (stored === "MOUSE" || stored === "PAD") {
+    return stored as InteractiveType
+  }
+  return /Macintosh|MacIntel|MacPPC|Mac68K|iPad/.test(navigator.userAgent)
+    ? ("PAD" as InteractiveType)
+    : ("MOUSE" as InteractiveType)
+}
+
+function changeInteractiveType(
+  value: InteractiveType,
+  update: (value: InteractiveType) => void,
+  setValue: (value: InteractiveType) => void
+) {
+  window.localStorage.setItem(INTERACTIVE_TYPE_KEY, value)
+  update(value)
+  setValue(value)
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/line-add-button.tsx b/web/app/dashboard/ai-workflows/_components/editor/line-add-button.tsx
new file mode 100644
index 0000000..a44c82c
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/line-add-button.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { useCallback } from "react"
+
+import {
+  WorkflowNodePanelService,
+  WorkflowNodePanelUtils,
+} from "@flowgram.ai/free-node-panel-plugin"
+import type { LineRenderProps } from "@flowgram.ai/free-lines-plugin"
+import {
+  delay,
+  HistoryService,
+  useService,
+  WorkflowDocument,
+  WorkflowDragService,
+  WorkflowLinesManager,
+  type WorkflowNodeEntity,
+  type WorkflowNodeJSON,
+} from "@flowgram.ai/free-layout-editor"
+import { PlusIcon } from "lucide-react"
+
+export function LineAddButton({
+  line,
+  selected,
+  hovered,
+  color,
+}: LineRenderProps) {
+  const nodePanel = useService(WorkflowNodePanelService)
+  const document = useService(WorkflowDocument)
+  const dragService = useService(WorkflowDragService)
+  const linesManager = useService(WorkflowLinesManager)
+  const history = useService(HistoryService)
+  const { fromPort, toPort } = line
+
+  const addNode = useCallback(async () => {
+    if (!fromPort || !toPort) return
+    const position = {
+      x: (line.position.from.x + line.position.to.x) / 2,
+      y: (line.position.from.y + line.position.to.y) / 2,
+    }
+    const containerNode = fromPort.node.parent
+    const result = await nodePanel.singleSelectNodePanel({
+      position,
+      containerNode,
+      panelProps: { fromPort, enableScrollClose: true },
+    })
+    if (!result) return
+    const nodePosition = WorkflowNodePanelUtils.adjustNodePosition({
+      nodeType: result.nodeType,
+      position,
+      fromPort,
+      toPort,
+      containerNode,
+      document,
+      dragService,
+    })
+    const node: WorkflowNodeEntity = document.createWorkflowNodeByType(
+      result.nodeType,
+      nodePosition,
+      result.nodeJSON ?? ({} as WorkflowNodeJSON),
+      containerNode?.id
+    )
+    WorkflowNodePanelUtils.subNodesAutoOffset({
+      node,
+      fromPort,
+      toPort,
+      containerNode,
+      historyService: history,
+      dragService,
+      linesManager,
+    })
+    await delay(20)
+    WorkflowNodePanelUtils.buildLine({ fromPort, node, toPort, linesManager })
+    line.dispose()
+  }, [document, dragService, fromPort, history, line, linesManager, nodePanel, toPort])
+
+  if (!selected && !hovered) return null
+  return (
+    <button
+      type="button"
+      className="absolute z-10 flex size-6 items-center justify-center rounded-full border-2 bg-white shadow-sm hover:scale-110"
+      style={{
+        color,
+        borderColor: color,
+        transform: `translate(-50%, -50%) translate(${line.center.labelX}px, ${line.center.labelY}px)`,
+      }}
+      onClick={(event) => {
+        event.stopPropagation()
+        void addNode()
+      }}
+      aria-label="在线路中插入节点"
+    >
+      <PlusIcon className="size-3.5" />
+    </button>
+  )
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/node-form-panel.tsx b/web/app/dashboard/ai-workflows/_components/editor/node-form-panel.tsx
new file mode 100644
index 0000000..30a31a1
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/node-form-panel.tsx
@@ -0,0 +1,438 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import {
+  PlaygroundEntityContext,
+  type WorkflowNodeEntity,
+  useClientContext,
+  useNodeRender,
+} from "@flowgram.ai/free-layout-editor"
+import { usePanelManager } from "@flowgram.ai/panel-manager-plugin"
+import { PlusIcon, Trash2Icon, XIcon } from "lucide-react"
+
+import { OptionCombobox } from "@/components/option-combobox"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  fetchKnowledgeBasesAll,
+  type AIWorkflowDefinition,
+  type AIWorkflowNodeSpec,
+  type AIWorkflowValue,
+  type KnowledgeBase,
+} from "@/lib/api/admin"
+import { Status } from "@/lib/generated/enums"
+
+import { NODE_FORM_PANEL } from "./base-node"
+import {
+  WorkflowEditorSurfaceProvider,
+  useWorkflowEditorContext,
+} from "./editor-context"
+import { WorkflowNodeIcon } from "./node-icon"
+import {
+  buildAvailableVariables,
+  nextBranchID,
+  normalizeConditionBranches,
+  parseRefKey,
+  refKey,
+} from "./workflow-model"
+import type { WorkflowConditionBranch } from "./types"
+
+const operatorOptions = [
+  { value: "eq", label: "等于" },
+  { value: "neq", label: "不等于" },
+  { value: "contains", label: "包含" },
+  { value: "not_contains", label: "不包含" },
+  { value: "gt", label: "大于" },
+  { value: "gte", label: "大于等于" },
+  { value: "lt", label: "小于" },
+  { value: "lte", label: "小于等于" },
+  { value: "exists", label: "存在" },
+  { value: "empty", label: "为空" },
+]
+
+export function NodeFormPanel({ nodeId }: { nodeId: string }) {
+  const { document } = useClientContext()
+  const node = document.getNode(nodeId)
+  if (!node) return null
+
+  return (
+    <PlaygroundEntityContext.Provider value={node}>
+      <WorkflowEditorSurfaceProvider surface="sidebar">
+        <NodeForm node={node} />
+      </WorkflowEditorSurfaceProvider>
+    </PlaygroundEntityContext.Provider>
+  )
+}
+
+function NodeForm({ node }: { node: WorkflowNodeEntity }) {
+  const panelManager = usePanelManager()
+  const render = useNodeRender(node)
+  const { document } = useClientContext()
+  const { nodeSpecs } = useWorkflowEditorContext()
+  const spec = nodeSpecs.find((item) => item.type === String(node.flowNodeType))
+  const data = render.data ?? {}
+  const definition = document.toJSON() as AIWorkflowDefinition
+  const variables = buildAvailableVariables(definition, node.id, nodeSpecs)
+  const canDelete = !["start", "end"].includes(String(node.flowNodeType))
+
+  function updateData(next: Record<string, unknown>) {
+    render.updateData({ ...data, ...next })
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-[#fbfbfb]">
+      <div className="flex h-[58px] shrink-0 items-center gap-3 border-b border-[rgba(82,100,154,0.13)] px-4">
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-[#f2f3ff] text-[#4e40e5]">
+          <WorkflowNodeIcon name={spec?.icon} className="size-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-semibold text-[#060709]">
+            {String(data.title || spec?.title || node.flowNodeType)}
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={() => panelManager.close(NODE_FORM_PANEL)}
+          aria-label="关闭配置"
+        >
+          <XIcon className="size-4" />
+        </Button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <FormSection title="基本信息">
+          <FormField label="节点名称">
+            <Input
+              value={String(data.title ?? "")}
+              placeholder={spec?.title}
+              onChange={(event) => updateData({ title: event.target.value })}
+            />
+          </FormField>
+        </FormSection>
+        <InputSection
+          spec={spec}
+          inputsValues={data.inputsValues ?? {}}
+          variables={variables}
+          onChange={(inputsValues) => updateData({ inputsValues })}
+        />
+        {String(node.flowNodeType) === "knowledge_retrieve" ? (
+          <KnowledgeSection
+            config={asRecord(data.config)}
+            onChange={(config) => updateData({ config })}
+          />
+        ) : null}
+        {String(node.flowNodeType) === "condition" ? (
+          <ConditionSection
+            branches={normalizeConditionBranches({ data })}
+            variables={variables}
+            onChange={(branches) =>
+              updateData({
+                config: { ...asRecord(data.config), branches },
+                portKeys: branches.map((branch) => branch.id),
+                ports: branches.map((branch) => branch.id),
+              })
+            }
+          />
+        ) : null}
+        <OutputSection spec={spec} />
+      </div>
+      {canDelete ? (
+        <div className="shrink-0 border-t p-4">
+          <Button
+            variant="outline"
+            className="w-full text-destructive hover:text-destructive"
+            onClick={() => {
+              render.deleteNode()
+              panelManager.close(NODE_FORM_PANEL)
+            }}
+          >
+            <Trash2Icon className="size-4" />
+            删除节点
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function InputSection({
+  spec,
+  inputsValues,
+  variables,
+  onChange,
+}: {
+  spec?: AIWorkflowNodeSpec
+  inputsValues: Record<string, AIWorkflowValue>
+  variables: ReturnType<typeof buildAvailableVariables>
+  onChange: (value: Record<string, AIWorkflowValue>) => void
+}) {
+  if (!spec?.inputSchema?.length) return null
+  const options = variables.map((variable) => ({
+    value: `${variable.nodeId}.${variable.name}`,
+    label: variable.label || variable.name,
+    group: variable.nodeTitle,
+    subtitle: `${variable.nodeId}.${variable.name}`,
+    description: variable.description,
+  }))
+  return (
+    <FormSection title="输入">
+      {spec.inputSchema.map((input) => (
+        <FormField
+          key={input.name}
+          label={input.label || input.name}
+          required={input.required}
+          hint={input.description}
+        >
+          <OptionCombobox
+            value={refKey(inputsValues[input.name])}
+            options={options}
+            placeholder="选择上游变量"
+            searchPlaceholder="搜索变量"
+            preserveExternalSelection
+            onChange={(value) => {
+              const parsed = parseRefKey(value)
+              if (!parsed) return
+              onChange({ ...inputsValues, [input.name]: parsed })
+            }}
+          />
+        </FormField>
+      ))}
+    </FormSection>
+  )
+}
+
+function KnowledgeSection({
+  config,
+  onChange,
+}: {
+  config: Record<string, unknown>
+  onChange: (value: Record<string, unknown>) => void
+}) {
+  const [items, setItems] = useState<KnowledgeBase[]>([])
+  useEffect(() => {
+    let active = true
+    fetchKnowledgeBasesAll({ status: Status.Ok })
+      .then((result) => active && setItems(result ?? []))
+      .catch(() => active && setItems([]))
+    return () => {
+      active = false
+    }
+  }, [])
+  const values = normalizeIDs(config.knowledgeBaseIds).map(String)
+  return (
+    <FormSection title="知识库">
+      <FormField label="检索范围" required hint="可选择多个已启用知识库。">
+        <OptionCombobox
+          multiple
+          values={values}
+          options={items.map((item) => ({
+            value: String(item.id),
+            label: item.name,
+          }))}
+          placeholder="选择知识库"
+          searchPlaceholder="搜索知识库"
+          onValuesChange={(next) =>
+            onChange({
+              ...config,
+              knowledgeBaseIds: next.map(Number).filter((id) => id > 0),
+            })
+          }
+        />
+      </FormField>
+    </FormSection>
+  )
+}
+
+function ConditionSection({
+  branches,
+  variables,
+  onChange,
+}: {
+  branches: WorkflowConditionBranch[]
+  variables: ReturnType<typeof buildAvailableVariables>
+  onChange: (branches: WorkflowConditionBranch[]) => void
+}) {
+  const variableOptions = variables.map((variable) => ({
+    value: `${variable.nodeId}.${variable.name}`,
+    label: variable.label || variable.name,
+    group: variable.nodeTitle,
+    subtitle: `${variable.nodeId}.${variable.name}`,
+  }))
+  const fallback = branches.find((branch) => branch.default)
+  const regular = branches.filter((branch) => !branch.default)
+
+  function update(branch: WorkflowConditionBranch) {
+    onChange(branches.map((item) => (item.id === branch.id ? branch : item)))
+  }
+
+  return (
+    <FormSection
+      title="条件分支"
+      action={
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            const next: WorkflowConditionBranch = {
+              id: nextBranchID(branches),
+              name: `条件 ${regular.length + 1}`,
+              targetNodeId: "",
+              condition: { operator: "eq" },
+            }
+            onChange([...regular, next, fallback].filter(Boolean) as WorkflowConditionBranch[])
+          }}
+        >
+          <PlusIcon className="size-4" />
+          添加
+        </Button>
+      }
+    >
+      {[...regular, ...(fallback ? [fallback] : [])].map((branch) => (
+        <div key={branch.id} className="rounded-md bg-slate-50 p-3">
+          <div className="flex items-center gap-2">
+            <Input
+              value={branch.name ?? ""}
+              onChange={(event) => update({ ...branch, name: event.target.value })}
+            />
+            {!branch.default ? (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="shrink-0 text-slate-500 hover:text-destructive"
+                onClick={() => onChange(branches.filter((item) => item.id !== branch.id))}
+              >
+                <Trash2Icon className="size-4" />
+              </Button>
+            ) : null}
+          </div>
+          {branch.default ? (
+            <p className="mt-2 text-xs text-slate-500">其他条件均不匹配时进入此分支。</p>
+          ) : (
+            <div className="mt-3 grid gap-2">
+              <OptionCombobox
+                value={refKey(branch.condition?.left)}
+                options={variableOptions}
+                placeholder="选择变量"
+                preserveExternalSelection
+                onChange={(value) =>
+                  update({
+                    ...branch,
+                    condition: {
+                      ...branch.condition,
+                      left: parseRefKey(value),
+                    },
+                  })
+                }
+              />
+              <OptionCombobox
+                value={branch.condition?.operator ?? "eq"}
+                options={operatorOptions}
+                placeholder="选择运算符"
+                onChange={(operator) =>
+                  update({
+                    ...branch,
+                    condition: { ...branch.condition, operator },
+                  })
+                }
+              />
+              {!["exists", "empty"].includes(branch.condition?.operator ?? "") ? (
+                <Input
+                  value={String(branch.condition?.right ?? "")}
+                  placeholder="比较值"
+                  onChange={(event) =>
+                    update({
+                      ...branch,
+                      condition: {
+                        ...branch.condition,
+                        right: event.target.value,
+                      },
+                    })
+                  }
+                />
+              ) : null}
+            </div>
+          )}
+        </div>
+      ))}
+    </FormSection>
+  )
+}
+
+function OutputSection({ spec }: { spec?: AIWorkflowNodeSpec }) {
+  if (!spec?.outputSchema?.length) return null
+  return (
+    <FormSection title="输出">
+      <div className="divide-y rounded-md border">
+        {spec.outputSchema.map((output) => (
+          <div key={output.name} className="px-3 py-2.5">
+            <div className="flex items-center justify-between gap-3 text-sm">
+              <span className="font-medium">{output.label || output.name}</span>
+              <span className="font-mono text-xs text-slate-500">{output.type}</span>
+            </div>
+            {output.description ? (
+              <p className="mt-1 text-xs leading-5 text-slate-500">{output.description}</p>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </FormSection>
+  )
+}
+
+function FormSection({
+  title,
+  action,
+  children,
+}: {
+  title: string
+  action?: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <section className="border-b px-5 py-5 last:border-b-0">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <h3 className="text-sm font-semibold text-slate-900">{title}</h3>
+        {action}
+      </div>
+      <div className="space-y-4">{children}</div>
+    </section>
+  )
+}
+
+function FormField({
+  label,
+  required,
+  hint,
+  children,
+}: {
+  label: string
+  required?: boolean
+  hint?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="space-y-2">
+      <Label>
+        {label}
+        {required ? <span className="ml-1 text-destructive">*</span> : null}
+      </Label>
+      {children}
+      {hint ? <p className="text-xs leading-5 text-slate-500">{hint}</p> : null}
+    </div>
+  )
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {}
+}
+
+function normalizeIDs(value: unknown) {
+  if (!Array.isArray(value)) return []
+  return Array.from(
+    new Set(value.map(Number).filter((item) => Number.isInteger(item) && item > 0))
+  )
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/node-icon.tsx b/web/app/dashboard/ai-workflows/_components/editor/node-icon.tsx
new file mode 100644
index 0000000..3c0c4dd
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/node-icon.tsx
@@ -0,0 +1,46 @@
+import {
+  BookOpenIcon,
+  BotIcon,
+  CircleHelpIcon,
+  ClipboardListIcon,
+  FlagIcon,
+  GitBranchIcon,
+  HeadphonesIcon,
+  MessageCircleIcon,
+  PlayCircleIcon,
+  SearchIcon,
+  SendIcon,
+  ShieldCheckIcon,
+  TicketIcon,
+  UserCheckIcon,
+  type LucideIcon,
+} from "lucide-react"
+
+const icons: Record<string, LucideIcon> = {
+  PlayCircleIcon,
+  MessageCircleIcon,
+  ShieldCheckIcon,
+  BookOpenIcon,
+  HelpCircleIcon: CircleHelpIcon,
+  BotIcon,
+  GitBranchIcon,
+  SearchIcon,
+  ClipboardListIcon,
+  UserCheckIcon,
+  TicketIcon,
+  HeadphonesIcon,
+  SendIcon,
+  FlagIcon,
+}
+
+export function WorkflowNodeIcon({
+  name,
+  className,
+}: {
+  name?: string
+  className?: string
+}) {
+  const Icon = icons[name ?? ""] ?? GitBranchIcon
+  return <Icon className={className} />
+}
+
diff --git a/web/app/dashboard/ai-workflows/_components/editor/node-panel.tsx b/web/app/dashboard/ai-workflows/_components/editor/node-panel.tsx
new file mode 100644
index 0000000..59e9b87
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/node-panel.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import type {
+  NodePanelRenderProps,
+  NodePanelResult,
+} from "@flowgram.ai/free-node-panel-plugin"
+import { useClientContext } from "@flowgram.ai/free-layout-editor"
+
+import { useWorkflowEditorContext } from "./editor-context"
+import { WorkflowNodeIcon } from "./node-icon"
+import { createNodeJSON } from "./workflow-model"
+
+export function NodePanel({
+  position,
+  onSelect,
+  onClose,
+}: NodePanelRenderProps) {
+  const { nodeSpecs } = useWorkflowEditorContext()
+  const { document } = useClientContext()
+  const visibleSpecs = nodeSpecs.filter((spec) => spec.type !== "start")
+
+  function select(spec: (typeof nodeSpecs)[number], event: React.MouseEvent) {
+    onSelect({
+      nodeType: spec.type,
+      nodeJSON: createNodeJSON(
+        spec,
+        document.getAllNodes().map((node) => node.id)
+      ),
+      selectEvent: event,
+    } satisfies Exclude<NodePanelResult, undefined>)
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="fixed inset-0 z-40 cursor-default"
+        onClick={onClose}
+        aria-label="关闭节点面板"
+      />
+      <div
+        className="absolute z-50 w-[180px] overflow-hidden rounded-lg border border-[rgba(68,83,130,0.25)] bg-white p-2 shadow-[0_4px_12px_rgba(0,0,0,0.02),0_2px_6px_rgba(0,0,0,0.04)]"
+        style={{
+          left: position.x + 30,
+          top: position.y,
+          transform: "translateY(-100%)",
+        }}
+      >
+        <div className="max-h-[500px] overflow-y-auto [scrollbar-width:none]">
+          {visibleSpecs.map((spec) => (
+            <button
+              key={spec.type}
+              type="button"
+              data-testid={`demo-free-node-list-${spec.type}`}
+              className="flex h-8 w-full items-center rounded-[5px] px-[15px] text-left hover:bg-[hsla(252,62%,55%,0.09)] hover:text-[hsl(252,62%,55%)]"
+              onClick={(event) => select(spec, event)}
+            >
+              <WorkflowNodeIcon name={spec.icon} className="size-3.5 shrink-0" />
+              <span className="ml-2.5 truncate text-xs">{spec.title}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/node-registry.tsx b/web/app/dashboard/ai-workflows/_components/editor/node-registry.tsx
new file mode 100644
index 0000000..d827400
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/node-registry.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  Field,
+  type WorkflowNodeRegistry,
+} from "@flowgram.ai/free-layout-editor"
+
+import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
+
+import { WorkflowNodeIcon } from "./node-icon"
+import { normalizeConditionBranches } from "./workflow-model"
+
+export function buildNodeRegistries(
+  nodeSpecs: AIWorkflowNodeSpec[]
+): WorkflowNodeRegistry[] {
+  return [
+    ...nodeSpecs.map((spec) => ({
+    type: spec.type,
+    meta: {
+      defaultExpanded: true,
+      isStart: spec.type === "start",
+      deleteDisable: spec.type === "start" || spec.type === "end",
+      copyDisable: spec.type === "start" || spec.type === "end",
+      nodePanelVisible: spec.type !== "start",
+      useDynamicPort: spec.type === "condition",
+      defaultPorts: getDefaultPorts(spec.type),
+    },
+    formMeta: {
+      render: () => <CanvasNodeContent spec={spec} />,
+    },
+    })),
+    {
+      type: "comment",
+      meta: {
+        sidebarDisabled: true,
+        nodePanelVisible: false,
+        defaultPorts: [],
+        renderKey: "comment",
+        size: { width: 240, height: 150 },
+      },
+      formMeta: {
+        render: () => <></>,
+      },
+      getInputPoints: () => [],
+      getOutputPoints: () => [],
+    },
+  ]
+}
+
+function CanvasNodeContent({ spec }: { spec: AIWorkflowNodeSpec }) {
+  return (
+    <Field<string> name="title">
+      {({ field }) => (
+        <div className="w-[360px] select-none">
+          <div className="flex items-center gap-2 border-b border-[rgba(82,100,154,0.13)] px-4 py-3">
+            <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-[#f2f3ff] text-[#4e40e5]">
+              <WorkflowNodeIcon name={spec.icon} className="size-3.5" />
+            </span>
+            <div className="min-w-0 flex-1 truncate text-sm font-semibold text-[#060709]">
+              {field.value || spec.title}
+            </div>
+          </div>
+          <div className="px-4 py-3">
+          <div className="flex items-start gap-3">
+            <div className="min-w-0 flex-1">
+              <div className="line-clamp-2 text-xs leading-5 text-[rgba(6,7,9,0.5)]">
+                {spec.description}
+              </div>
+            </div>
+          </div>
+          {spec.type === "condition" ? (
+            <Field<Record<string, unknown>> name="config">
+              {({ field: configField }) => {
+                const branches = normalizeConditionBranches({
+                  data: { config: configField.value },
+                })
+                return (
+                  <div className="mt-3 space-y-1.5 border-t border-[rgba(82,100,154,0.13)] pt-2.5">
+                    {branches.map((branch, index) => (
+                      <div
+                        key={branch.id}
+                        className="relative flex items-center gap-2 rounded-md bg-[#f7f7fa] px-2 py-1.5 text-xs"
+                      >
+                        <span className="w-8 shrink-0 font-medium uppercase text-[#4e40e5]">
+                          {branch.default ? "else" : index === 0 ? "if" : "elif"}
+                        </span>
+                        <span className="min-w-0 flex-1 truncate text-[rgba(6,7,9,0.65)]">
+                          {branch.name || branch.id}
+                        </span>
+                        <span
+                          data-port-id={branch.id}
+                          data-port-type="output"
+                          className="absolute -right-4 top-1/2 size-0"
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )
+              }}
+            </Field>
+          ) : null}
+          </div>
+        </div>
+      )}
+    </Field>
+  )
+}
+
+function getDefaultPorts(type: string) {
+  if (type === "start") return [{ type: "output" as const }]
+  if (type === "end") return [{ type: "input" as const }]
+  if (type === "condition") return [{ type: "input" as const }]
+  return [{ type: "input" as const }, { type: "output" as const }]
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/on-drag-line-end.ts b/web/app/dashboard/ai-workflows/_components/editor/on-drag-line-end.ts
new file mode 100644
index 0000000..b9a866b
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/on-drag-line-end.ts
@@ -0,0 +1,57 @@
+import {
+  WorkflowNodePanelService,
+  WorkflowNodePanelUtils,
+} from "@flowgram.ai/free-node-panel-plugin"
+import {
+  delay,
+  type FreeLayoutPluginContext,
+  type onDragLineEndParams,
+  WorkflowDragService,
+  WorkflowLinesManager,
+  type WorkflowNodeEntity,
+  type WorkflowNodeJSON,
+} from "@flowgram.ai/free-layout-editor"
+
+export async function onDragLineEnd(
+  context: FreeLayoutPluginContext,
+  params: onDragLineEndParams
+) {
+  const { fromPort, toPort, mousePos, line, originLine } = params
+  if (originLine || !line || toPort || !fromPort) return
+
+  const nodePanel = context.get(WorkflowNodePanelService)
+  const dragService = context.get(WorkflowDragService)
+  const linesManager = context.get(WorkflowLinesManager)
+  const containerNode = fromPort.node.parent
+  const result = await nodePanel.singleSelectNodePanel({
+    position:
+      fromPort.location === "bottom"
+        ? { x: mousePos.x - 165, y: mousePos.y + 60 }
+        : mousePos,
+    containerNode,
+    panelProps: {
+      enableNodePlaceholder: true,
+      enableScrollClose: true,
+      fromPort,
+    },
+  })
+  if (!result) return
+
+  const position = WorkflowNodePanelUtils.adjustNodePosition({
+    nodeType: result.nodeType,
+    position: mousePos,
+    fromPort,
+    toPort,
+    containerNode,
+    document: context.document,
+    dragService,
+  })
+  const node: WorkflowNodeEntity = context.document.createWorkflowNodeByType(
+    result.nodeType,
+    position,
+    result.nodeJSON ?? ({} as WorkflowNodeJSON),
+    containerNode?.id
+  )
+  await delay(20)
+  WorkflowNodePanelUtils.buildLine({ fromPort, node, linesManager })
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/types.ts b/web/app/dashboard/ai-workflows/_components/editor/types.ts
new file mode 100644
index 0000000..726c63b
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/types.ts
@@ -0,0 +1,34 @@
+import type {
+  AIWorkflowDefinition,
+  AIWorkflowNodeSpec,
+  AIWorkflowValue,
+  AIWorkflowVariableSpec,
+} from "@/lib/api/admin"
+
+export type WorkflowNode = AIWorkflowDefinition["nodes"][number]
+export type WorkflowEdge = AIWorkflowDefinition["edges"][number]
+
+export type WorkflowCondition = {
+  left?: AIWorkflowValue
+  operator?: string
+  right?: unknown
+}
+
+export type WorkflowConditionBranch = {
+  id: string
+  name?: string
+  targetNodeId: string
+  condition?: WorkflowCondition
+  default?: boolean
+}
+
+export type WorkflowVariable = AIWorkflowVariableSpec & {
+  nodeId: string
+  nodeTitle: string
+}
+
+export type WorkflowEditorContextValue = {
+  nodeSpecs: AIWorkflowNodeSpec[]
+  readonly: boolean
+}
+
diff --git a/web/app/dashboard/ai-workflows/_components/editor/use-port-click.ts b/web/app/dashboard/ai-workflows/_components/editor/use-port-click.ts
new file mode 100644
index 0000000..ab7e13f
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/use-port-click.ts
@@ -0,0 +1,69 @@
+"use client"
+
+import { useCallback } from "react"
+
+import {
+  WorkflowNodePanelService,
+  WorkflowNodePanelUtils,
+} from "@flowgram.ai/free-node-panel-plugin"
+import {
+  delay,
+  usePlayground,
+  useService,
+  WorkflowDocument,
+  WorkflowDragService,
+  WorkflowLinesManager,
+  type WorkflowNodeEntity,
+  type WorkflowNodeJSON,
+  type WorkflowPortEntity,
+} from "@flowgram.ai/free-layout-editor"
+
+export function usePortClick() {
+  const playground = usePlayground()
+  const nodePanel = useService(WorkflowNodePanelService)
+  const document = useService(WorkflowDocument)
+  const dragService = useService(WorkflowDragService)
+  const linesManager = useService(WorkflowLinesManager)
+
+  return useCallback(
+    async (event: React.MouseEvent, port: WorkflowPortEntity) => {
+      if (port.portType === "input") return
+      const mousePosition = playground.config.getPosFromMouseEvent(event)
+      const containerNode = port.node.parent
+      const result = await nodePanel.singleSelectNodePanel({
+        position: mousePosition,
+        containerNode,
+        panelProps: {
+          enableScrollClose: true,
+          fromPort: port,
+        },
+      })
+      if (!result) return
+
+      const nodePosition = WorkflowNodePanelUtils.adjustNodePosition({
+        nodeType: result.nodeType,
+        position:
+          port.location === "bottom"
+            ? { x: mousePosition.x, y: mousePosition.y + 100 }
+            : { x: mousePosition.x + 100, y: mousePosition.y },
+        fromPort: port,
+        containerNode,
+        document,
+        dragService,
+      })
+      const node: WorkflowNodeEntity = document.createWorkflowNodeByType(
+        result.nodeType,
+        nodePosition,
+        result.nodeJSON ?? ({} as WorkflowNodeJSON),
+        containerNode?.id
+      )
+      await delay(20)
+      WorkflowNodePanelUtils.buildLine({
+        fromPort: port,
+        node,
+        linesManager,
+      })
+    },
+    [document, dragService, linesManager, nodePanel, playground]
+  )
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/workflow-editor.tsx b/web/app/dashboard/ai-workflows/_components/editor/workflow-editor.tsx
new file mode 100644
index 0000000..3878095
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/workflow-editor.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import { useState } from "react"
+
+import {
+  EditorRenderer,
+  FreeLayoutEditorProvider,
+} from "@flowgram.ai/free-layout-editor"
+import { DockedPanelLayer } from "@flowgram.ai/panel-manager-plugin"
+import { AlertCircleIcon, CheckCircle2Icon, XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import type {
+  AIWorkflowDefinition,
+  AIWorkflowNodeSpec,
+  AIWorkflowValidationResult,
+} from "@/lib/api/admin"
+
+import { EditorTools } from "./editor-tools"
+import { EditorCanvasEvents } from "./editor-canvas-events"
+import { WorkflowEditorContextProvider } from "./editor-context"
+import { useWorkflowEditorProps } from "./editor-provider"
+
+export function WorkflowEditor({
+  definition,
+  nodeSpecs,
+  onDefinitionChange,
+  onValidate,
+}: {
+  definition: AIWorkflowDefinition
+  nodeSpecs: AIWorkflowNodeSpec[]
+  onDefinitionChange: (definition: AIWorkflowDefinition) => void
+  onValidate: () => Promise<AIWorkflowValidationResult>
+}) {
+  const [validation, setValidation] =
+    useState<AIWorkflowValidationResult | null>(null)
+  const props = useWorkflowEditorProps({
+    definition,
+    nodeSpecs,
+    onDefinitionChange,
+  })
+
+  return (
+    <WorkflowEditorContextProvider value={{ nodeSpecs, readonly: false }}>
+      <div className="relative h-full min-h-[560px] overflow-hidden bg-slate-50">
+        <FreeLayoutEditorProvider {...props}>
+          <DockedPanelLayer>
+            <EditorRenderer className="h-full w-full" />
+            <EditorCanvasEvents />
+            <EditorTools
+              onValidate={onValidate}
+              onValidation={setValidation}
+            />
+          </DockedPanelLayer>
+          {validation ? (
+            <ProblemPanel
+              validation={validation}
+              onClose={() => setValidation(null)}
+            />
+          ) : null}
+        </FreeLayoutEditorProvider>
+      </div>
+    </WorkflowEditorContextProvider>
+  )
+}
+
+function ProblemPanel({
+  validation,
+  onClose,
+}: {
+  validation: AIWorkflowValidationResult
+  onClose: () => void
+}) {
+  return (
+    <div className="absolute inset-x-0 bottom-0 z-40 h-[210px] border-t border-[rgba(82,100,154,0.13)] bg-[#fbfbfb] shadow-[0_-4px_12px_rgba(0,0,0,0.04)]">
+      <div className="flex h-[50px] items-center justify-between px-3">
+        <div className="flex items-center gap-2 text-sm font-semibold">
+          问题
+          {validation.valid ? (
+            <CheckCircle2Icon className="size-4 text-emerald-600" />
+          ) : (
+            <span className="rounded-full bg-destructive px-1.5 py-0.5 text-[10px] leading-none text-white">
+              {validation.errors.length}
+            </span>
+          )}
+        </div>
+        <Button variant="ghost" size="icon-sm" onClick={onClose}>
+          <XIcon />
+        </Button>
+      </div>
+      <div className="h-[160px] overflow-y-auto px-3 pb-3">
+        {validation.valid ? (
+          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+            未发现问题
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {validation.errors.map((error, index) => (
+              <div
+                key={`${error.field}-${index}`}
+                className="flex items-start gap-2 rounded border border-border px-3 py-2 text-sm"
+              >
+                <AlertCircleIcon className="mt-0.5 size-4 shrink-0 text-destructive" />
+                <div>
+                  <div className="font-mono text-xs text-muted-foreground">
+                    {error.field}
+                  </div>
+                  <div className="mt-0.5">{error.message}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function WorkflowReadonlyCanvas({
+  definition,
+  nodeSpecs = [],
+}: {
+  definition: AIWorkflowDefinition
+  nodeSpecs?: AIWorkflowNodeSpec[]
+}) {
+  const resolvedSpecs =
+    nodeSpecs.length > 0
+      ? nodeSpecs
+      : Array.from(new Set(definition.nodes.map((node) => node.type))).map(
+          (type) => ({
+            type,
+            title:
+              String(
+                definition.nodes.find((node) => node.type === type)?.data?.title
+              ) || type,
+            description: "工作流节点",
+            icon: type === "start" ? "PlayCircleIcon" : type === "end" ? "FlagIcon" : "GitBranchIcon",
+            riskLevel: "low" as const,
+            interruptible: false,
+            requiresConfirmationPredecessor: false,
+          })
+        )
+  const props = useWorkflowEditorProps({
+    definition,
+    nodeSpecs: resolvedSpecs,
+    readonly: true,
+  })
+  return (
+    <WorkflowEditorContextProvider value={{ nodeSpecs: resolvedSpecs, readonly: true }}>
+      <FreeLayoutEditorProvider {...props}>
+        <EditorRenderer className="h-full w-full" />
+      </FreeLayoutEditorProvider>
+    </WorkflowEditorContextProvider>
+  )
+}
diff --git a/web/app/dashboard/ai-workflows/_components/editor/workflow-model.ts b/web/app/dashboard/ai-workflows/_components/editor/workflow-model.ts
new file mode 100644
index 0000000..11e95ce
--- /dev/null
+++ b/web/app/dashboard/ai-workflows/_components/editor/workflow-model.ts
@@ -0,0 +1,273 @@
+import type {
+  AIWorkflowDefinition,
+  AIWorkflowNodeSpec,
+  AIWorkflowValue,
+} from "@/lib/api/admin"
+
+import type {
+  WorkflowConditionBranch,
+  WorkflowNode,
+  WorkflowVariable,
+} from "./types"
+
+const defaultBranch: WorkflowConditionBranch = {
+  id: "default",
+  name: "默认分支",
+  targetNodeId: "",
+  default: true,
+}
+
+export function prepareDefinitionForEditor(
+  definition: AIWorkflowDefinition
+): AIWorkflowDefinition {
+  const branchIDsByNode = new Map<string, Set<string>>()
+  const executableNodes = (definition.nodes ?? []).map((node) => {
+    if (node.type !== "condition") {
+      return node
+    }
+    const branches = normalizeConditionBranches(node)
+    branchIDsByNode.set(node.id, new Set(branches.map((branch) => branch.id)))
+    return {
+      ...node,
+      data: {
+        ...node.data,
+        config: {
+          ...asRecord(node.data?.config),
+          branches,
+        },
+        portKeys: branches.map((branch) => branch.id),
+        ports: branches.map((branch) => branch.id),
+      },
+    }
+  })
+  const nodes = normalizeEditorPositions([
+    ...executableNodes,
+    ...(definition.annotations ?? []),
+  ])
+
+  return {
+    schemaVersion: definition.schemaVersion || 2,
+    nodes,
+    annotations: undefined,
+    edges: (definition.edges ?? [])
+      .filter((edge) => {
+        if (!edge.sourcePortID) return true
+        const branchIDs = branchIDsByNode.get(edge.sourceNodeID)
+        return !branchIDs || branchIDs.has(edge.sourcePortID)
+      })
+      .map((edge) => {
+        if (edge.sourcePortID) return edge
+        const source = nodes.find((node) => node.id === edge.sourceNodeID)
+        if (source?.type !== "condition") return edge
+        const branch = normalizeConditionBranches(source).find(
+          (item) => item.targetNodeId === edge.targetNodeID
+        )
+        return branch ? { ...edge, sourcePortID: branch.id } : edge
+      }),
+  }
+}
+
+export function serializeDefinition(
+  definition: AIWorkflowDefinition
+): AIWorkflowDefinition {
+  const edges = definition.edges ?? []
+  const annotations = (definition.nodes ?? []).filter(
+    (node) => node.type === "comment"
+  )
+  return {
+    schemaVersion: definition.schemaVersion || 2,
+    nodes: (definition.nodes ?? []).filter((node) => node.type !== "comment").map((node) => {
+      const data = { ...node.data }
+      delete data.portKeys
+      delete data.ports
+      if (node.type === "condition") {
+        const branches = normalizeConditionBranches(node).map((branch) => {
+          const edge = edges.find(
+            (item) =>
+              item.sourceNodeID === node.id &&
+              item.sourcePortID === branch.id
+          )
+          return {
+            ...branch,
+            targetNodeId: edge?.targetNodeID ?? branch.targetNodeId ?? "",
+          }
+        })
+        data.config = { ...asRecord(data.config), branches }
+      }
+      return { ...node, data }
+    }),
+    annotations,
+    edges,
+  }
+}
+
+export function createNodeJSON(
+  spec: AIWorkflowNodeSpec,
+  existingNodeIDs: string[] = []
+): WorkflowNode {
+  const id = uniqueNodeID(spec.type, existingNodeIDs)
+  const config =
+    spec.type === "condition" ? { branches: [defaultBranch] } : {}
+  return {
+    id,
+    type: spec.type,
+    meta: { position: { x: 0, y: 0 } },
+    data: {
+      title: spec.title || spec.type,
+      config,
+      inputsValues: spec.defaultInputs ?? {},
+      ...(spec.type === "condition"
+        ? { portKeys: [defaultBranch.id], ports: [defaultBranch.id] }
+        : {}),
+    },
+  }
+}
+
+export function normalizeConditionBranches(
+  node: Pick<WorkflowNode, "data">
+): WorkflowConditionBranch[] {
+  const config = asRecord(node.data?.config)
+  const values = Array.isArray(config.branches) ? config.branches : []
+  const branches = values
+    .map(normalizeBranch)
+    .filter((item): item is WorkflowConditionBranch => Boolean(item))
+  const nonDefault = branches.filter((branch) => !branch.default)
+  const fallback =
+    branches.find((branch) => branch.default) ?? defaultBranch
+  return [...nonDefault, fallback]
+}
+
+export function nextBranchID(branches: WorkflowConditionBranch[]) {
+  const used = new Set(branches.map((branch) => branch.id))
+  for (let index = 1; index < 10000; index += 1) {
+    const id = `branch_${index}`
+    if (!used.has(id)) return id
+  }
+  return `branch_${Date.now()}`
+}
+
+export function buildAvailableVariables(
+  definition: AIWorkflowDefinition,
+  nodeID: string,
+  specs: AIWorkflowNodeSpec[]
+): WorkflowVariable[] {
+  const ancestors = collectAncestorIDs(definition, nodeID)
+  const specByType = new Map(specs.map((spec) => [spec.type, spec]))
+  return ancestors.flatMap((ancestorID) => {
+    const node = definition.nodes.find((item) => item.id === ancestorID)
+    if (!node) return []
+    const spec = specByType.get(node.type)
+    return (spec?.outputSchema ?? []).map((output) => ({
+      ...output,
+      nodeId: node.id,
+      nodeTitle: String(node.data?.title || spec?.title || node.type),
+    }))
+  })
+}
+
+export function refValue(nodeID: string, field: string): AIWorkflowValue {
+  return { type: "ref", content: [nodeID, field] }
+}
+
+export function refKey(value: AIWorkflowValue | undefined) {
+  if (value?.type !== "ref" || !Array.isArray(value.content)) return ""
+  return `${value.content[0]}.${value.content[1]}`
+}
+
+export function parseRefKey(value: string): AIWorkflowValue | undefined {
+  const separator = value.indexOf(".")
+  if (separator <= 0 || separator === value.length - 1) return undefined
+  return refValue(value.slice(0, separator), value.slice(separator + 1))
+}
+
+function uniqueNodeID(type: string, existingNodeIDs: string[]) {
+  const normalized = type.replace(/[^a-zA-Z0-9_]/g, "_") || "node"
+  const used = new Set(existingNodeIDs)
+  for (let index = 1; index < 10000; index += 1) {
+    const id = `${normalized}_${index}`
+    if (!used.has(id)) return id
+  }
+  return `${normalized}_${Date.now()}`
+}
+
+function normalizeEditorPositions(
+  nodes: AIWorkflowDefinition["nodes"]
+): AIWorkflowDefinition["nodes"] {
+  const executableXs = Array.from(
+    new Set(
+      nodes
+        .filter((node) => node.type !== "comment")
+        .map((node) => node.meta.position.x)
+    )
+  ).sort((left, right) => left - right)
+  const positiveGaps = executableXs
+    .slice(1)
+    .map((x, index) => x - executableXs[index])
+    .filter((gap) => gap > 0)
+  const minimumGap = positiveGaps.length ? Math.min(...positiveGaps) : 0
+  if (!minimumGap || minimumGap >= 460) return nodes
+
+  const origin = executableXs[0]
+  const scale = 460 / minimumGap
+  return nodes.map((node) =>
+    node.type === "comment"
+      ? node
+      : {
+          ...node,
+          meta: {
+            ...node.meta,
+            position: {
+              ...node.meta.position,
+              x: origin + (node.meta.position.x - origin) * scale,
+            },
+          },
+        }
+  )
+}
+
+function normalizeBranch(value: unknown): WorkflowConditionBranch | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null
+  const item = value as Record<string, unknown>
+  const id = String(item.id ?? "").trim()
+  if (!id) return null
+  return {
+    id,
+    name: String(item.name ?? "").trim(),
+    targetNodeId: String(item.targetNodeId ?? "").trim(),
+    default: Boolean(item.default),
+    condition:
+      item.condition && typeof item.condition === "object"
+        ? (item.condition as WorkflowConditionBranch["condition"])
+        : undefined,
+  }
+}
+
+function collectAncestorIDs(
+  definition: AIWorkflowDefinition,
+  nodeID: string
+) {
+  const incoming = new Map<string, string[]>()
+  for (const edge of definition.edges ?? []) {
+    incoming.set(edge.targetNodeID, [
+      ...(incoming.get(edge.targetNodeID) ?? []),
+      edge.sourceNodeID,
+    ])
+  }
+  const queue = [...(incoming.get(nodeID) ?? [])]
+  const visited = new Set<string>()
+  while (queue.length) {
+    const current = queue.shift()
+    if (!current || visited.has(current)) continue
+    visited.add(current)
+    queue.push(...(incoming.get(current) ?? []))
+  }
+  return definition.nodes
+    .map((node) => node.id)
+    .filter((id) => visited.has(id))
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {}
+}
diff --git a/web/app/dashboard/ai-workflows/_components/flowgram-editor-provider.tsx b/web/app/dashboard/ai-workflows/_components/flowgram-editor-provider.tsx
deleted file mode 100644
index dff3f43..0000000
--- a/web/app/dashboard/ai-workflows/_components/flowgram-editor-provider.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-
-import {
-  type FreeLayoutPluginContext,
-  type FreeLayoutProps,
-  type WorkflowNodeEntity,
-  type WorkflowJSON,
-} from "@flowgram.ai/free-layout-editor"
-import { createFreeLinesPlugin } from "@flowgram.ai/free-lines-plugin"
-import { createFreeSnapPlugin } from "@flowgram.ai/free-snap-plugin"
-import { createMinimapPlugin } from "@flowgram.ai/minimap-plugin"
-
-import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
-
-import { FlowgramNodeRenderer } from "./flowgram-node-renderer"
-import { buildFlowgramNodeRegistries } from "./flowgram-node-registries"
-import { WorkflowLineAddButton } from "./workflow-line-add-button"
-import {
-  normalizeConditionPortsForFlowgram,
-  syncConditionBranchTargetsFromEdges,
-} from "./workflow-utils"
-
-export function useFlowgramEditorProps({
-  definition,
-  nodeSpecs,
-  readonly = false,
-  onDefinitionChange,
-}: {
-  definition: AIWorkflowDefinition
-  nodeSpecs: AIWorkflowNodeSpec[]
-  readonly?: boolean
-  onDefinitionChange?: (definition: AIWorkflowDefinition) => void
-}) {
-  return useMemo<FreeLayoutProps>(
-    () => {
-      const initialData = normalizeConditionPortsForFlowgram(definition)
-      return {
-        background: true,
-        readonly,
-        scroll: {
-          disableScrollBar: true,
-        },
-        initialData: initialData as WorkflowJSON,
-        fromNodeJSON(_node, json) {
-          return json
-        },
-        toNodeJSON(_node, json) {
-          return json
-        },
-        materials: {
-          renderDefaultNode: FlowgramNodeRenderer,
-        },
-        nodeRegistries: buildFlowgramNodeRegistries(nodeSpecs),
-        nodeEngine: {
-          enable: true,
-        },
-        history: {
-          enable: !readonly,
-          enableChangeNode: !readonly,
-        },
-        canDeleteNode: (_ctx, node) => {
-          const type = String(node.flowNodeType ?? "")
-          return type !== "start"
-        },
-        canDeleteLine: () => !readonly,
-        onContentChange: (ctx) => {
-          if (readonly) {
-            return
-          }
-          const next = normalizeConditionPortsForFlowgram(
-            syncConditionBranchTargetsFromEdges(ctx.document.toJSON() as AIWorkflowDefinition)
-          )
-          onDefinitionChange?.(next)
-        },
-        onAllLayersRendered: (ctx) => {
-          scrollToInitialNode(ctx)
-        },
-        getNodeDefaultRegistry(type) {
-          return {
-            type,
-            meta: {
-              defaultExpanded: true,
-            },
-          }
-        },
-        plugins: () => [
-          createFreeLinesPlugin({
-            renderInsideLine: WorkflowLineAddButton,
-          }),
-          createMinimapPlugin({
-            disableLayer: true,
-          }),
-          createFreeSnapPlugin({}),
-        ],
-      }
-    },
-    [definition, nodeSpecs, onDefinitionChange, readonly]
-  )
-}
-
-function scrollToInitialNode(ctx: FreeLayoutPluginContext) {
-  const nodes = ctx.document.getAllNodes()
-  const startNode = nodes.find((node) => String(node.flowNodeType ?? "") === "start")
-  const targetNode = startNode ?? findLeftTopNode(nodes)
-  if (!targetNode) {
-    return
-  }
-
-  window.requestAnimationFrame(() => {
-    const viewport = ctx.playground.config.getViewport(false)
-    void ctx.playground.scrollToView({
-      bounds: targetNode.transform.bounds,
-      scrollDelta: {
-        x: Math.max(viewport.width / 2 - 250, 0),
-        y: Math.max(viewport.height / 2 - 180, 0),
-      },
-      zoom: 1,
-      scrollToCenter: true,
-    })
-  })
-}
-
-function findLeftTopNode(nodes: WorkflowNodeEntity[]) {
-  return [...nodes].sort((left, right) => {
-    const leftBounds = left.transform.bounds
-    const rightBounds = right.transform.bounds
-    if (leftBounds.left !== rightBounds.left) {
-      return leftBounds.left - rightBounds.left
-    }
-    return leftBounds.top - rightBounds.top
-  })[0]
-}
diff --git a/web/app/dashboard/ai-workflows/_components/flowgram-node-registries.tsx b/web/app/dashboard/ai-workflows/_components/flowgram-node-registries.tsx
deleted file mode 100644
index 1a136e7..0000000
--- a/web/app/dashboard/ai-workflows/_components/flowgram-node-registries.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Field, type WorkflowNodeRegistry, useNodeRender } from "@flowgram.ai/free-layout-editor"
-
-import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
-import { WorkflowConditionNodeContent } from "./workflow-condition-node-content"
-import { WorkflowNodeCard } from "./workflow-node-card"
-
-export function buildFlowgramNodeRegistries(nodeSpecs: AIWorkflowNodeSpec[]): WorkflowNodeRegistry[] {
-  const seen = new Set<string>()
-  const specs = nodeSpecs.length > 0
-    ? nodeSpecs
-    : [
-        {
-          type: "start",
-          title: "开始",
-          description: "流程入口",
-          icon: "PlayCircleIcon",
-          riskLevel: "low" as const,
-          interruptible: false,
-          requiresConfirmationPredecessor: false,
-        },
-        {
-          type: "end",
-          title: "结束",
-          description: "流程结束",
-          icon: "FlagIcon",
-          riskLevel: "low" as const,
-          interruptible: false,
-          requiresConfirmationPredecessor: false,
-        },
-      ]
-
-  return specs
-    .filter((spec) => {
-      if (!spec.type || seen.has(spec.type)) {
-        return false
-      }
-      seen.add(spec.type)
-      return true
-    })
-    .map((spec) => ({
-      type: spec.type,
-      meta: {
-        defaultExpanded: true,
-        isStart: spec.type === "start",
-        deleteDisable: spec.type === "start",
-        copyDisable: spec.type === "start",
-        defaultPorts: defaultPortsForNodeType(spec.type),
-      },
-      formMeta: {
-        render: () => (
-          <FlowgramNodeForm
-          nodeType={spec.type}
-          fallbackTitle={spec.title || spec.type}
-          icon={spec.icon}
-        />
-        ),
-      },
-    }))
-}
-
-function FlowgramNodeForm({
-  nodeType,
-  fallbackTitle,
-  icon,
-}: {
-  nodeType: string
-  fallbackTitle: string
-  icon: string
-}) {
-  const { node, selected } = useNodeRender()
-  const nodeId = String(node.id ?? "")
-
-  return (
-    <Field<string> name="title">
-      {({ field }) => (
-        <WorkflowNodeCard
-          title={field.value || fallbackTitle}
-          icon={icon}
-          selected={selected}
-        >
-          {nodeType === "condition" ? (
-            <Field<Record<string, unknown>> name="config">
-              {({ field: configField }) => (
-                <WorkflowConditionNodeContent
-                  configValue={configField.value}
-                  nodeId={nodeId}
-                  onChange={configField.onChange}
-                />
-              )}
-            </Field>
-          ) : null}
-        </WorkflowNodeCard>
-      )}
-    </Field>
-  )
-}
-
-function defaultPortsForNodeType(type: string) {
-  if (type === "start") {
-    return [{ type: "output" as const }]
-  }
-  if (type === "end") {
-    return [{ type: "input" as const }]
-  }
-  if (type === "condition") {
-    return [{ type: "input" as const }]
-  }
-  return [{ type: "input" as const }, { type: "output" as const }]
-}
diff --git a/web/app/dashboard/ai-workflows/_components/flowgram-node-renderer.tsx b/web/app/dashboard/ai-workflows/_components/flowgram-node-renderer.tsx
deleted file mode 100644
index df1d4b2..0000000
--- a/web/app/dashboard/ai-workflows/_components/flowgram-node-renderer.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import "@flowgram.ai/free-layout-editor/index.css"
-
-import {
-  useNodeRender,
-  WorkflowNodeRenderer,
-  type WorkflowNodeProps,
-} from "@flowgram.ai/free-layout-editor"
-import { useLayoutEffect } from "react"
-
-import { cn } from "@/lib/utils"
-import { useWorkflowPortAdd } from "./workflow-port-add-context"
-
-export function FlowgramNodeRenderer(props: WorkflowNodeProps) {
-  const { selected, node, form } = useNodeRender()
-  const requestPortAdd = useWorkflowPortAdd()
-  const nodeType = String(node.flowNodeType ?? "")
-
-  useLayoutEffect(() => {
-    if (nodeType !== "condition") return
-    const frame = window.requestAnimationFrame(() => {
-      node.ports.updateDynamicPorts()
-    })
-    return () => window.cancelAnimationFrame(frame)
-  })
-
-  return (
-    <WorkflowNodeRenderer
-      node={props.node}
-      className={cn(
-        "overflow-visible rounded-lg border transition-colors",
-        selected ? "border-(--g-selection-background)" : "border-transparent"
-      )}
-      style={{ padding: 0 }}
-      portClassName="workflow-node-port"
-      portPrimaryColor="#2575FC"
-      portSecondaryColor="#c9cdd4"
-      portBackgroundColor="#FFFFFF"
-      onPortClick={(port, event) => {
-        if (port.portType !== "output" || typeof event === "function") {
-          return
-        }
-        event.stopPropagation()
-        requestPortAdd?.({ sourcePort: port, event })
-      }}
-    >
-      {form?.render()}
-    </WorkflowNodeRenderer>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx b/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx
deleted file mode 100644
index 00dcf51..0000000
--- a/web/app/dashboard/ai-workflows/_components/node-config-panel.tsx
+++ /dev/null
@@ -1,793 +0,0 @@
-"use client"
-
-import { useEffect, useMemo, useState, type ReactNode } from "react"
-import { CheckIcon, ChevronsUpDownIcon, Trash2Icon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
-import { Input } from "@/components/ui/input"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { OptionCombobox } from "@/components/option-combobox"
-import { fetchKnowledgeBasesAll, type AIWorkflowDefinition, type AIWorkflowNodeSpec, type KnowledgeBase } from "@/lib/api/admin"
-import { Status } from "@/lib/generated/enums"
-import { cn } from "@/lib/utils"
-
-import { VariableSelector } from "./variable-selector"
-import {
-  buildVariableSpecDisplay,
-  createConditionBranchID,
-  isRefValue,
-  normalizeNodeConfig,
-  refField,
-  refNodeId,
-  type WorkflowConditionBranch,
-  type WorkflowVariableRef,
-} from "./workflow-utils"
-
-export type WorkflowBranchSummary = {
-  branchId: string
-  targetNodeId?: string
-  targetName?: string
-}
-
-const CONDITION_OPERATOR_OPTIONS = [
-  { value: "eq", label: "等于" },
-  { value: "neq", label: "不等于" },
-  { value: "contains", label: "包含" },
-  { value: "not_contains", label: "不包含" },
-  { value: "gt", label: "大于" },
-  { value: "gte", label: "大于等于" },
-  { value: "lt", label: "小于" },
-  { value: "lte", label: "小于等于" },
-  { value: "exists", label: "存在" },
-  { value: "empty", label: "为空" },
-]
-
-const inspectorInputClassName = "h-8 rounded-sm border-slate-200 bg-white px-2 text-sm shadow-none"
-const inspectorComboboxClassName = "h-8 rounded-sm border-slate-200 bg-white text-sm shadow-none"
-
-export function NodeConfigPanel({
-  node,
-  nodeSpec,
-  nodes,
-  availableVariables,
-  showHeader = true,
-  showConditionBranches = true,
-  onChange,
-  onDelete,
-}: {
-  node: AIWorkflowDefinition["nodes"][number] | null
-  nodeSpec?: AIWorkflowNodeSpec
-  nodes: AIWorkflowDefinition["nodes"]
-  availableVariables?: WorkflowVariableRef[]
-  branchSummaries?: WorkflowBranchSummary[]
-  showHeader?: boolean
-  showConditionBranches?: boolean
-  onChange: (nodeId: string, data: AIWorkflowDefinition["nodes"][number]["data"]) => void
-  onDelete?: (nodeId: string) => void
-}) {
-  if (!node) {
-    return (
-      <div className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
-        未选择节点
-      </div>
-    )
-  }
-
-  const inputsValues = node.data?.inputsValues ?? {}
-  const inputSchema = nodeSpec?.inputSchema ?? []
-  const outputSchema = nodeSpec?.outputSchema ?? []
-  const canDelete = node.type !== "start" && node.type !== "end"
-  const config = normalizeNodeConfig(node.data?.config)
-  const branches = config.branches ?? []
-  const updateData = (data: Partial<AIWorkflowDefinition["nodes"][number]["data"]>) => {
-    onChange(node.id, {
-      ...(node.data ?? {}),
-      ...data,
-    })
-  }
-  const updateConfig = (nextConfig: Record<string, unknown>) => updateData({ config: nextConfig })
-  const inputFields = inputSchema.map((input) => {
-    const value = inputsValues[input.name]
-    return (
-      <InspectorField
-        key={input.name}
-        label={input.label || input.name}
-        required={input.required}
-        fieldName={input.name}
-        fieldType={input.type}
-      >
-        <VariableSelector
-          value={isRefValue(value) ? value : undefined}
-          variables={availableVariables ?? []}
-          placeholder="选择变量"
-          triggerClassName={inspectorComboboxClassName}
-          onChange={(next) => {
-            updateData({
-              inputsValues: {
-                ...inputsValues,
-                [input.name]: next,
-              },
-            })
-          }}
-        />
-        {input.description ? <InspectorHint>{input.description}</InspectorHint> : null}
-      </InspectorField>
-    )
-  })
-  const outputFields = outputSchema.map((output) => {
-    const item = buildVariableSpecDisplay(output)
-    return (
-      <InspectorField key={item.key} label={item.label} detail={item.subtitle}>
-        {item.description ? <InspectorHint>{item.description}</InspectorHint> : null}
-      </InspectorField>
-    )
-  })
-  const updateBranch = (branch: WorkflowConditionBranch) => {
-    const nextBranches = branches.some((item) => item.id === branch.id)
-      ? branches.map((item) => (item.id === branch.id ? branch : item))
-      : [...branches, branch]
-    updateConfig({ ...config, branches: nextBranches })
-  }
-  const deleteBranch = (branchId: string) => {
-    updateConfig({ ...config, branches: branches.filter((branch) => branch.id !== branchId) })
-  }
-  const addBranch = () => {
-    const targetNodeId = nodes.find((item) => item.id !== node.id && item.type !== "start")?.id ?? ""
-    updateBranch({
-      id: createConditionBranchID(branches),
-      name: "新分支",
-      targetNodeId,
-      condition: {
-        operator: "eq",
-      },
-    })
-  }
-
-  return (
-    <div className="pb-3">
-      {showHeader ? (
-        <div className="border-b px-4 py-3">
-          <div className="flex items-start justify-between gap-2">
-            <div className="min-w-0">
-              <div className="truncate text-sm font-medium">
-                {node.data?.title || nodeSpec?.title || node.type}
-              </div>
-              <div className="mt-1 truncate text-sm text-muted-foreground">{node.id}</div>
-            </div>
-            {canDelete ? (
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="size-8 shrink-0 text-muted-foreground hover:text-destructive"
-                onClick={() => onDelete?.(node.id)}
-                aria-label="删除节点"
-              >
-                <Trash2Icon className="size-4" />
-              </Button>
-            ) : null}
-          </div>
-        </div>
-      ) : null}
-      <div className="overflow-hidden border-y border-slate-200 bg-white">
-        <InspectorParameterTabs
-          key={node.id}
-          inputCount={inputSchema.length}
-          outputCount={outputSchema.length}
-          inputContent={inputFields}
-          outputContent={outputFields}
-        />
-
-        {node.type === "knowledge_retrieve" ? (
-          <KnowledgeRetrieveConfigPanel
-            config={config}
-            onChange={(nextConfig) => updateConfig(nextConfig)}
-          />
-        ) : null}
-
-        {showConditionBranches && (node.type === "condition" || branches.length > 0) ? (
-          <ConditionBranchesEditor
-            branches={branches}
-            nodes={nodes}
-            currentNodeId={node.id}
-            variables={availableVariables ?? []}
-            onAdd={addBranch}
-            onChange={updateBranch}
-            onDelete={deleteBranch}
-          />
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-export function ConditionBranchConfigPanel({
-  node,
-  nodes,
-  branchId,
-  variables,
-  onChange,
-}: {
-  node: AIWorkflowDefinition["nodes"][number]
-  nodes: AIWorkflowDefinition["nodes"]
-  branchId: string
-  variables: WorkflowVariableRef[]
-  onChange: (nodeId: string, data: AIWorkflowDefinition["nodes"][number]["data"]) => void
-}) {
-  const config = normalizeNodeConfig(node.data?.config)
-  const branches = config.branches ?? []
-  const branch = branches.find((item) => item.id === branchId)
-  const targetOptions = buildTargetOptions(nodes, node.id)
-
-  if (!branch) {
-    return (
-      <div className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
-        条件分支不存在
-      </div>
-    )
-  }
-
-  const updateBranch = (nextBranch: WorkflowConditionBranch) => {
-    onChange(node.id, {
-      ...(node.data ?? {}),
-      config: {
-        ...config,
-        branches: branches.map((item) => (item.id === nextBranch.id ? nextBranch : item)),
-      },
-    })
-  }
-
-  return (
-    <div className="pb-3">
-      <div className="overflow-hidden border-y border-slate-200 bg-white">
-        <InspectorSection title="分支" meta={branch.default ? "默认" : "条件"}>
-          <InspectorRow label="目标节点">
-            <OptionCombobox
-              value={branch.targetNodeId}
-              options={targetOptions}
-              placeholder="选择目标节点"
-              triggerClassName={inspectorComboboxClassName}
-              preserveExternalSelection
-              onChange={(targetNodeId) => updateBranch({ ...branch, targetNodeId })}
-            />
-          </InspectorRow>
-
-          <InspectorRow label="默认分支">
-            <label className="inline-flex h-8 items-center gap-2 text-sm text-slate-700">
-              <input
-                type="checkbox"
-                checked={branch.default === true}
-                className="size-3.5"
-                onChange={(event) => updateBranch({
-                  ...branch,
-                  default: event.target.checked,
-                  condition: event.target.checked ? undefined : branch.condition,
-                })}
-              />
-              其他条件不匹配时执行
-            </label>
-          </InspectorRow>
-        </InspectorSection>
-
-        {branch.default ? (
-          <InspectorSection title="条件表达式">
-            <div className="px-3 py-2 text-sm text-slate-500">
-              默认分支不需要条件表达式，会在其他条件不匹配时执行。
-            </div>
-          </InspectorSection>
-        ) : (
-          <InspectorSection title="条件表达式">
-            <ConditionFields branch={branch} variables={variables} onChange={updateBranch} />
-          </InspectorSection>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function KnowledgeRetrieveConfigPanel({
-  config,
-  onChange,
-}: {
-  config: Record<string, unknown>
-  onChange: (config: Record<string, unknown>) => void
-}) {
-  const [knowledgeBases, setKnowledgeBases] = useState<KnowledgeBase[]>([])
-  const [open, setOpen] = useState(false)
-  const selectedKnowledgeIds = normalizeKnowledgeBaseIds(config.knowledgeBaseIds)
-  const knowledgeOptions = useMemo(
-    () => knowledgeBases.map((item) => ({ value: String(item.id), label: item.name })),
-    [knowledgeBases]
-  )
-  const selectedKnowledgeOptions = selectedKnowledgeIds
-    .map((id) => knowledgeOptions.find((option) => Number(option.value) === id))
-    .filter((option): option is { value: string; label: string } => Boolean(option))
-
-  useEffect(() => {
-    let cancelled = false
-    fetchKnowledgeBasesAll({ status: Status.Ok })
-      .then((items) => {
-        if (!cancelled) {
-          setKnowledgeBases(items ?? [])
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setKnowledgeBases([])
-        }
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [])
-
-  const updateKnowledgeBaseIds = (ids: number[]) => {
-    onChange({ ...config, knowledgeBaseIds: uniquePositiveNumbers(ids) })
-  }
-  const toggleKnowledgeBase = (value: string) => {
-    const id = Number(value)
-    if (!Number.isFinite(id) || id <= 0) return
-    if (selectedKnowledgeIds.includes(id)) {
-      updateKnowledgeBaseIds(selectedKnowledgeIds.filter((item) => item !== id))
-      return
-    }
-    updateKnowledgeBaseIds([...selectedKnowledgeIds, id])
-  }
-  return (
-    <InspectorSection title="节点配置" meta={`${selectedKnowledgeIds.length} 个知识库`}>
-      <InspectorRow label="知识库" required>
-        <div className="space-y-2">
-          <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger
-              render={
-                <Button
-                  type="button"
-                  variant="outline"
-                  role="combobox"
-                  className={cn("m-0 w-full justify-between font-normal", inspectorComboboxClassName)}
-                />
-              }
-            >
-              <span className="truncate">
-                {selectedKnowledgeOptions.length === 0
-                  ? "选择知识库"
-                  : selectedKnowledgeOptions.length === 1
-                    ? selectedKnowledgeOptions[0].label
-                    : `已选择 ${selectedKnowledgeOptions.length} 个知识库`}
-              </span>
-              <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
-            </PopoverTrigger>
-            <PopoverContent
-              className="w-(--radix-popover-trigger-width) p-0"
-              align="start"
-              data-workflow-preserve-selection
-            >
-              <Command>
-                <CommandInput placeholder="搜索知识库" />
-                <CommandList>
-                  <CommandEmpty>没有可用知识库</CommandEmpty>
-                  <CommandGroup>
-                    {knowledgeOptions.map((option) => {
-                      const selected = selectedKnowledgeIds.includes(Number(option.value))
-                      return (
-                        <CommandItem
-                          key={option.value}
-                          value={`${option.label} ${option.value}`}
-                          onSelect={() => toggleKnowledgeBase(option.value)}
-                        >
-                          <CheckIcon
-                            className={cn(
-                              "mr-2 size-4 shrink-0",
-                              selected ? "opacity-100" : "opacity-0"
-                            )}
-                          />
-                          <span className="truncate">{option.label}</span>
-                        </CommandItem>
-                      )
-                    })}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-          {selectedKnowledgeOptions.length === 0 ? (
-            <div className="text-sm text-slate-500">
-              未选择知识库，流程发布校验不会通过。
-            </div>
-          ) : null}
-        </div>
-      </InspectorRow>
-    </InspectorSection>
-  )
-}
-
-function ConditionBranchesEditor({
-  branches,
-  nodes,
-  currentNodeId,
-  variables,
-  onAdd,
-  onChange,
-  onDelete,
-}: {
-  branches: WorkflowConditionBranch[]
-  nodes: AIWorkflowDefinition["nodes"]
-  currentNodeId: string
-  variables: WorkflowVariableRef[]
-  onAdd: () => void
-  onChange: (branch: WorkflowConditionBranch) => void
-  onDelete: (branchId: string) => void
-}) {
-  const targetOptions = buildTargetOptions(nodes, currentNodeId)
-
-  return (
-    <InspectorSection
-      title="条件分支"
-      meta={`${branches.length} 项`}
-      action={
-        <Button type="button" variant="ghost" size="sm" className="h-7 px-2 text-sm text-slate-600" onClick={onAdd}>
-          添加
-        </Button>
-      }
-    >
-      {branches.length === 0 ? (
-        <div className="px-3 py-3 text-sm text-slate-500">
-          暂无分支。条件节点需要至少一个默认分支或条件分支。
-        </div>
-      ) : null}
-      <div className="divide-y divide-slate-100">
-        {branches.map((branch) => {
-          return (
-            <div key={branch.id} className="bg-white px-3 py-2">
-              <div className="grid grid-cols-[44px_minmax(0,1fr)_auto] items-center gap-2">
-                <span className="inline-flex h-5 shrink-0 items-center justify-center rounded-sm border border-slate-200 bg-slate-50 px-1.5 font-mono text-xs font-semibold text-slate-600">
-                  {branch.default ? "ELSE" : "IF"}
-                </span>
-                <Input
-                  value={branch.name ?? ""}
-                  placeholder={branch.id}
-                  className={cn(inspectorInputClassName, "min-w-0 border-transparent bg-transparent px-1 font-medium")}
-                  onChange={(event) => onChange({ ...branch, name: event.target.value })}
-                />
-                {branch.default ? null : (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="h-8 px-2 text-sm text-slate-500 hover:text-destructive"
-                    onClick={() => onDelete(branch.id)}
-                  >
-                    删除
-                  </Button>
-                )}
-              </div>
-
-              <div className="mt-2 grid grid-cols-[72px_minmax(0,1fr)] items-center gap-2">
-                <div className="text-sm text-slate-500">目标节点</div>
-                <OptionCombobox
-                  value={branch.targetNodeId}
-                  options={targetOptions}
-                  placeholder="选择目标节点"
-                  triggerClassName={inspectorComboboxClassName}
-                  preserveExternalSelection
-                  onChange={(targetNodeId) => onChange({ ...branch, targetNodeId })}
-                />
-              </div>
-
-              <label className="mt-2 flex items-center gap-2 pl-[72px] text-sm text-slate-500">
-                <input
-                  type="checkbox"
-                  checked={branch.default === true}
-                  className="size-3.5"
-                  onChange={(event) => onChange({
-                    ...branch,
-                    default: event.target.checked,
-                    condition: event.target.checked ? undefined : branch.condition,
-                  })}
-                />
-                默认分支
-              </label>
-
-              {branch.default ? null : (
-                <div className="border-t border-slate-200 pt-2">
-                  <ConditionFields branch={branch} variables={variables} onChange={onChange} compact />
-                </div>
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </InspectorSection>
-  )
-}
-
-function ConditionFields({
-  branch,
-  variables,
-  onChange,
-  compact = false,
-}: {
-  branch: WorkflowConditionBranch
-  variables: WorkflowVariableRef[]
-  onChange: (branch: WorkflowConditionBranch) => void
-  compact?: boolean
-}) {
-  const condition = branch.condition ?? {}
-  const selectedVariable = isRefValue(condition.left)
-    ? variables.find((item) => item.nodeId === refNodeId(condition.left) && item.field === refField(condition.left))
-    : undefined
-  const valueOptions = selectedVariable?.valueOptions ?? []
-  const rightDisabled = ["exists", "empty"].includes(condition.operator ?? "")
-
-  return (
-    <div className={cn("divide-y divide-slate-100", compact && "divide-y-0")}>
-      <div className={cn("grid grid-cols-[92px_minmax(0,1fr)] items-start gap-2 px-3 py-2", compact && "grid-cols-[72px_minmax(0,1fr)] px-0 py-1")}>
-        <div className="pt-1.5 text-sm text-slate-500">左值</div>
-        <VariableSelector
-          value={isRefValue(condition.left) ? condition.left : undefined}
-          variables={variables}
-          placeholder="选择变量"
-          triggerClassName={inspectorComboboxClassName}
-          onChange={(left) => onChange({
-            ...branch,
-            condition: { ...condition, left },
-          })}
-        />
-      </div>
-      <div className={cn("grid grid-cols-[92px_minmax(0,1fr)_minmax(0,1fr)] items-start gap-2 px-3 py-2", compact && "grid-cols-[72px_minmax(0,1fr)_96px] px-0 py-1")}>
-        <div className="pt-1.5 text-sm text-slate-500">判断</div>
-        <div>
-          <OptionCombobox
-            value={condition.operator ?? ""}
-            options={CONDITION_OPERATOR_OPTIONS}
-            placeholder="选择操作符"
-            triggerClassName={inspectorComboboxClassName}
-            preserveExternalSelection
-            onChange={(operator) => onChange({
-              ...branch,
-              condition: { ...condition, operator },
-            })}
-          />
-        </div>
-        <div className={cn(rightDisabled && "opacity-50")}>
-          {valueOptions.length > 0 && !rightDisabled ? (
-            <OptionCombobox
-              value={stringifyConditionRight(condition.right)}
-              options={valueOptions.map((option) => ({
-                value: stringifyConditionRight(option.value),
-                label: option.label || stringifyConditionRight(option.value),
-                description: option.description,
-              }))}
-              placeholder="选择取值"
-              triggerClassName={inspectorComboboxClassName}
-              preserveExternalSelection
-              onChange={(nextValue) => {
-                const selectedOption = valueOptions.find((option) => stringifyConditionRight(option.value) === nextValue)
-                onChange({
-                  ...branch,
-                  condition: { ...condition, right: selectedOption?.value ?? nextValue },
-                })
-              }}
-            />
-          ) : (
-            <Input
-              value={stringifyConditionRight(condition.right)}
-              disabled={rightDisabled}
-              className={inspectorInputClassName}
-              onChange={(event) => onChange({
-                ...branch,
-                condition: { ...condition, right: event.target.value },
-              })}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function InspectorParameterTabs({
-  inputCount,
-  outputCount,
-  inputContent,
-  outputContent,
-}: {
-  inputCount: number
-  outputCount: number
-  inputContent: ReactNode
-  outputContent: ReactNode
-}) {
-  const tabs = [
-    inputCount > 0 ? { value: "input", label: "输入", count: inputCount, content: inputContent } : null,
-    outputCount > 0 ? { value: "output", label: "输出", count: outputCount, content: outputContent } : null,
-  ].filter((item): item is { value: string; label: string; count: number; content: ReactNode } => Boolean(item))
-
-  if (tabs.length === 0) {
-    return null
-  }
-
-  if (tabs.length === 1) {
-    return (
-      <InspectorSection title={tabs[0].label} meta={`${tabs[0].count} 项`}>
-        {tabs[0].content}
-      </InspectorSection>
-    )
-  }
-
-  return (
-    <section className="border-b border-slate-200 last:border-b-0">
-      <Tabs defaultValue={tabs[0].value} className="gap-0">
-        <div className="flex min-h-9 items-center border-b border-slate-100 bg-slate-100 px-3 py-1">
-          <TabsList variant="line" className="h-6 gap-1 rounded-none bg-transparent p-0">
-            {tabs.map((tab) => (
-              <TabsTrigger
-                key={tab.value}
-                value={tab.value}
-              >
-                <span>{tab.label}</span>
-                <span className="ml-1.5 font-mono text-xs text-slate-400 data-active:text-slate-500">{tab.count}</span>
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </div>
-        {tabs.map((tab) => (
-          <TabsContent key={tab.value} value={tab.value} className="m-0">
-            {tab.content}
-          </TabsContent>
-        ))}
-      </Tabs>
-    </section>
-  )
-}
-
-function InspectorSection({
-  title,
-  meta,
-  action,
-  children,
-}: {
-  title: string
-  meta?: string
-  action?: ReactNode
-  children: ReactNode
-}) {
-  return (
-    <section className="border-b border-slate-200 last:border-b-0">
-      <div className="flex min-h-8 items-center justify-between gap-2 border-b border-slate-100 bg-slate-50/80 px-3 py-1">
-        <div className="min-w-0">
-          <div className="truncate text-sm font-semibold uppercase tracking-wide text-slate-500">{title}</div>
-        </div>
-        <div className="flex shrink-0 items-center gap-2">
-          {meta ? <span className="font-mono text-xs text-slate-400">{meta}</span> : null}
-          {action}
-        </div>
-      </div>
-      <div>{children}</div>
-    </section>
-  )
-}
-
-function InspectorRow({
-  label,
-  detail,
-  required,
-  children,
-}: {
-  label: string
-  detail?: string
-  required?: boolean
-  children: ReactNode
-}) {
-  return (
-    <div className="grid grid-cols-[112px_minmax(0,1fr)] gap-3 border-b border-slate-100 px-3 py-2 last:border-b-0">
-      <div className="min-w-0 pt-1">
-        <div className="flex min-w-0 items-center gap-1">
-          <span className="truncate text-sm font-medium text-slate-700">{label}</span>
-          {required ? <span className="text-xs text-destructive">*</span> : null}
-        </div>
-        {detail ? <div className="mt-0.5 truncate font-mono text-xs leading-5 text-slate-400">{detail}</div> : null}
-      </div>
-      <div className="min-w-0">{children}</div>
-    </div>
-  )
-}
-
-function InspectorField({
-  label,
-  detail,
-  fieldName,
-  fieldType,
-  required,
-  children,
-}: {
-  label: string
-  detail?: string
-  fieldName?: string
-  fieldType?: string
-  required?: boolean
-  children: ReactNode
-}) {
-  const metaItems = [
-    fieldName ? { label: "字段", value: fieldName } : null,
-    fieldType ? { label: "类型", value: fieldType } : null,
-  ].filter((item): item is { label: string; value: string } => Boolean(item))
-
-  return (
-    <div className="border-b border-slate-100 px-3 py-2.5 last:border-b-0">
-      <div className="flex min-w-0 items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="flex min-w-0 items-start gap-1">
-            <span className="min-w-0 break-words text-sm font-medium leading-5 text-slate-700">{label}</span>
-            {required ? <span className="shrink-0 text-xs text-destructive">*</span> : null}
-          </div>
-          {detail ? <div className="mt-1 break-all font-mono text-xs leading-5 text-slate-400">{detail}</div> : null}
-        </div>
-      </div>
-      {metaItems.length > 0 ? (
-        <div className="mt-1.5 flex flex-wrap gap-1">
-          {metaItems.map((item) => (
-            <span
-              key={item.label}
-              className="inline-flex min-w-0 max-w-full items-center gap-1 rounded-sm border border-slate-200 bg-slate-50 px-1.5 py-0.5 font-mono text-xs leading-5 text-slate-500"
-            >
-              <span className="shrink-0 text-slate-400">{item.label}</span>
-              <span className="min-w-0 break-all">{item.value}</span>
-            </span>
-          ))}
-        </div>
-      ) : null}
-      <div className="mt-2 min-w-0">{children}</div>
-    </div>
-  )
-}
-
-function InspectorHint({ children }: { children: ReactNode }) {
-  return <div className="mt-1.5 text-sm leading-5 text-slate-500">{children}</div>
-}
-
-function buildTargetOptions(nodes: AIWorkflowDefinition["nodes"], currentNodeId: string) {
-  return nodes
-    .filter((node) => node.id !== currentNodeId && node.type !== "start")
-    .map((node) => ({
-      value: node.id,
-      label: node.data?.title || node.type || node.id,
-    }))
-}
-
-function stringifyConditionRight(value: unknown) {
-  if (value === undefined || value === null) {
-    return ""
-  }
-  if (typeof value === "string") {
-    return value
-  }
-  return JSON.stringify(value)
-}
-
-function normalizeKnowledgeBaseIds(value: unknown) {
-  if (!Array.isArray(value)) {
-    return []
-  }
-  return uniquePositiveNumbers(
-    value
-      .map((item) => Number(item))
-      .filter((item) => Number.isFinite(item))
-  )
-}
-
-function uniquePositiveNumbers(input: number[]) {
-  return Array.from(new Set(input.filter((item) => item > 0)))
-}
diff --git a/web/app/dashboard/ai-workflows/_components/variable-selector.tsx b/web/app/dashboard/ai-workflows/_components/variable-selector.tsx
deleted file mode 100644
index 3aa9c77..0000000
--- a/web/app/dashboard/ai-workflows/_components/variable-selector.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-
-import { OptionCombobox } from "@/components/option-combobox"
-
-import {
-  buildVariableOption,
-  createRefValue,
-  refField,
-  refNodeId,
-  type WorkflowVariableRef,
-  type WorkflowVariableSelector,
-} from "./workflow-utils"
-
-export function VariableSelector({
-  value,
-  variables,
-  onChange,
-  placeholder = "选择变量",
-  triggerClassName,
-}: {
-  value?: WorkflowVariableSelector
-  variables: WorkflowVariableRef[]
-  onChange: (value: WorkflowVariableSelector) => void
-  placeholder?: string
-  triggerClassName?: string
-}) {
-  const selected = value ? `${refNodeId(value)}.${refField(value)}` : ""
-  const options = variables.map(buildVariableOption)
-
-  return (
-    <OptionCombobox
-      value={selected}
-      options={options}
-      placeholder={placeholder}
-      triggerClassName={triggerClassName}
-      preserveExternalSelection
-      onChange={(next) => {
-        const variable = variables.find((item) => `${item.nodeId}.${item.field}` === next)
-        if (variable) {
-          onChange(createRefValue(variable.nodeId, variable.field))
-        }
-      }}
-    />
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-branch-selection.tsx b/web/app/dashboard/ai-workflows/_components/workflow-branch-selection.tsx
deleted file mode 100644
index c128db0..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-branch-selection.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client"
-
-import { createContext, useContext, useMemo, type ReactNode } from "react"
-
-export type SelectedWorkflowBranch = {
-  nodeId: string
-  branchId: string
-}
-
-type WorkflowBranchSelectionContextValue = {
-  selectedBranch: SelectedWorkflowBranch | null
-  onSelectBranch: (branch: SelectedWorkflowBranch | null) => void
-}
-
-const WorkflowBranchSelectionContext = createContext<WorkflowBranchSelectionContextValue>({
-  selectedBranch: null,
-  onSelectBranch: () => {},
-})
-
-export function WorkflowBranchSelectionProvider({
-  selectedBranch,
-  onSelectBranch,
-  children,
-}: WorkflowBranchSelectionContextValue & {
-  children: ReactNode
-}) {
-  const value = useMemo(
-    () => ({ selectedBranch, onSelectBranch }),
-    [onSelectBranch, selectedBranch]
-  )
-
-  return (
-    <WorkflowBranchSelectionContext.Provider value={value}>
-      {children}
-    </WorkflowBranchSelectionContext.Provider>
-  )
-}
-
-export function useWorkflowBranchSelection() {
-  return useContext(WorkflowBranchSelectionContext)
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-canvas-controls.tsx b/web/app/dashboard/ai-workflows/_components/workflow-canvas-controls.tsx
deleted file mode 100644
index 073eddb..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-canvas-controls.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client"
-
-import type { ReactNode } from "react"
-import { Maximize2Icon, MinusIcon, PlusIcon, SparklesIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-
-export function WorkflowCanvasControls({
-  zoomPercent,
-  onZoomIn,
-  onZoomOut,
-  onResetZoom,
-  onFitView,
-  onAutoLayout,
-  autoLayoutDisabled = false,
-}: {
-  zoomPercent?: string
-  onZoomIn?: () => void
-  onZoomOut?: () => void
-  onResetZoom?: () => void
-  onFitView?: () => void
-  onAutoLayout?: () => void
-  autoLayoutDisabled?: boolean
-}) {
-  return (
-    <div className="inline-flex h-9 items-center gap-0.5 rounded-md border border-slate-200/80 bg-white/95 p-1 shadow-sm backdrop-blur">
-      <CanvasControlButton label="缩小" onClick={onZoomOut}>
-        <MinusIcon className="size-3.5" />
-      </CanvasControlButton>
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-7 w-12 px-1 text-xs tabular-nums text-slate-700 hover:bg-slate-100 hover:text-slate-950"
-              aria-label="重置为 100%"
-              disabled={!onResetZoom}
-              onClick={onResetZoom}
-            />
-          }
-        >
-          {zoomPercent ?? "100%"}
-        </TooltipTrigger>
-        <TooltipContent>重置为 100%</TooltipContent>
-      </Tooltip>
-      <CanvasControlButton label="放大" onClick={onZoomIn}>
-        <PlusIcon className="size-3.5" />
-      </CanvasControlButton>
-      <span className="mx-1 h-4 w-px shrink-0 bg-slate-200" />
-      <CanvasControlButton label="适配画布" onClick={onFitView}>
-        <Maximize2Icon className="size-3.5" />
-      </CanvasControlButton>
-      <CanvasControlButton label="自动布局" onClick={onAutoLayout} disabled={autoLayoutDisabled}>
-        <SparklesIcon className="size-3.5" />
-      </CanvasControlButton>
-    </div>
-  )
-}
-
-function CanvasControlButton({
-  label,
-  onClick,
-  disabled = false,
-  children,
-}: {
-  label: string
-  onClick?: () => void
-  disabled?: boolean
-  children: ReactNode
-}) {
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-xs"
-            className="size-7 text-slate-700 hover:bg-slate-100 hover:text-slate-950"
-            aria-label={label}
-            disabled={disabled || !onClick}
-            onClick={onClick}
-          />
-        }
-      >
-        {children}
-      </TooltipTrigger>
-      <TooltipContent>{label}</TooltipContent>
-    </Tooltip>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-condition-node-content.tsx b/web/app/dashboard/ai-workflows/_components/workflow-condition-node-content.tsx
deleted file mode 100644
index 9b4534e..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-condition-node-content.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { PlusIcon, XIcon } from "lucide-react"
-import { useService, WorkflowLinesManager } from "@flowgram.ai/free-layout-editor"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-import { useWorkflowBranchSelection } from "./workflow-branch-selection"
-import {
-  createConditionBranchID,
-  isConditionBranchEdge,
-  isBranchRowActionTarget,
-  normalizeNodeConfig,
-  type WorkflowConditionBranch,
-} from "./workflow-utils"
-
-export function WorkflowConditionNodeContent({
-  configValue,
-  nodeId,
-  onChange,
-}: {
-  configValue: Record<string, unknown> | undefined
-  nodeId: string
-  onChange: (value: Record<string, unknown>) => void
-}) {
-  const linesManager = useService(WorkflowLinesManager)
-  const { selectedBranch, onSelectBranch } = useWorkflowBranchSelection()
-  const config = normalizeNodeConfig(configValue)
-  const branches = ensureConditionBranches(config.branches ?? [])
-
-  const updateBranches = (nextBranches: WorkflowConditionBranch[]) => {
-    onChange({
-      ...config,
-      branches: ensureConditionBranches(nextBranches),
-    })
-  }
-  const deleteBranch = (branchId: string) => {
-    linesManager.getAllLines().forEach((line) => {
-      if (isConditionBranchEdge(line.toJSON(), nodeId, branchId)) {
-        line.dispose()
-      }
-    })
-    updateBranches(branches.filter((branch) => branch.id !== branchId))
-    if (selectedBranch?.nodeId === nodeId && selectedBranch.branchId === branchId) {
-      onSelectBranch?.(null)
-    }
-  }
-
-  return (
-    <div className="space-y-2">
-      <div className="space-y-1.5">
-        {branches.map((branch, index) => (
-          <WorkflowConditionBranchRow
-            key={branch.id}
-            branch={branch}
-            index={index}
-            selected={selectedBranch?.nodeId === nodeId && selectedBranch.branchId === branch.id}
-            onSelect={() => onSelectBranch?.({ nodeId, branchId: branch.id })}
-            onDelete={() => deleteBranch(branch.id)}
-          />
-        ))}
-      </div>
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        className="h-7 px-2 text-xs text-muted-foreground"
-        onClick={(event) => {
-          event.stopPropagation()
-          updateBranches([
-            ...branches,
-            {
-              id: createConditionBranchID(branches),
-              name: "新条件",
-              targetNodeId: "",
-              condition: { operator: "eq" },
-            },
-          ])
-        }}
-      >
-        <PlusIcon className="size-3.5" />
-        添加条件
-      </Button>
-    </div>
-  )
-}
-
-function WorkflowConditionBranchRow({
-  branch,
-  index,
-  selected,
-  onSelect,
-  onDelete,
-}: {
-  branch: WorkflowConditionBranch
-  index: number
-  selected: boolean
-  onSelect: () => void
-  onDelete: () => void
-}) {
-  const branchType = branch.default ? "else" : index === 0 ? "if" : "elseif"
-
-  return (
-    <div
-      className={cn(
-        "relative flex min-h-10 cursor-pointer items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs transition-colors",
-        selected
-          ? "border-(--g-selection-background) bg-background shadow-sm"
-          : "border-border/50 bg-background/70 hover:border-border hover:bg-background"
-      )}
-      onPointerDownCapture={(event) => {
-        event.stopPropagation()
-        if (isBranchRowActionTarget(event.target)) {
-          return
-        }
-        onSelect()
-      }}
-      onMouseDownCapture={(event) => {
-        event.stopPropagation()
-      }}
-      onClick={(event) => {
-        event.stopPropagation()
-      }}
-    >
-      <span className="shrink-0 rounded-md border bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
-        {branchType}
-      </span>
-      <span className="min-w-0 flex-1 truncate font-medium text-foreground/90">
-        {branch.name || (branch.default ? "默认分支" : branch.id)}
-      </span>
-      {branch.default ? null : (
-        <button
-          type="button"
-          className="flex size-5 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
-          aria-label={`删除条件 ${branch.name || branch.id}`}
-          onPointerDownCapture={(event) => {
-            event.stopPropagation()
-          }}
-          onMouseDownCapture={(event) => {
-            event.stopPropagation()
-          }}
-          onClick={(event) => {
-            event.stopPropagation()
-            onDelete()
-          }}
-        >
-          <XIcon className="size-3.5" />
-        </button>
-      )}
-      <span
-        data-port-id={branch.id}
-        data-port-type="output"
-        className="absolute -right-4 top-1/2 size-0"
-      />
-    </div>
-  )
-}
-
-function ensureConditionBranches(branches: WorkflowConditionBranch[]) {
-  const normalized = branches.some((branch) => branch.default)
-    ? branches
-    : [...branches, { id: "default", name: "默认分支", targetNodeId: "", default: true }]
-  return [
-    ...normalized.filter((branch) => !branch.default),
-    ...normalized.filter((branch) => branch.default).slice(0, 1),
-  ]
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
deleted file mode 100644
index 2201134..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client"
-
-import { useState, type PointerEvent as ReactPointerEvent } from "react"
-import { XIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
-
-import type { SelectedWorkflowBranch } from "./workflow-branch-selection"
-import { ConditionBranchConfigPanel, NodeConfigPanel } from "./node-config-panel"
-import { WorkflowNodeIcon } from "./workflow-node-icon"
-import {
-  getAvailableVariables,
-  normalizeNodeConfig,
-  type WorkflowNodeData,
-} from "./workflow-utils"
-
-const PANEL_DEFAULT_WIDTH = 460
-const PANEL_MIN_WIDTH = 320
-const PANEL_MAX_WIDTH = 600
-
-export function WorkflowConfigPanel({
-  definition,
-  nodeSpecs,
-  selectedNodeId,
-  selectedBranch,
-  onClose,
-  onChangeNodeData,
-  onDeleteNode,
-}: {
-  definition: AIWorkflowDefinition
-  nodeSpecs: AIWorkflowNodeSpec[]
-  selectedNodeId: string
-  selectedBranch: SelectedWorkflowBranch | null
-  onClose: () => void
-  onChangeNodeData: (nodeId: string, data: WorkflowNodeData) => void
-  onDeleteNode: (nodeId: string) => void
-}) {
-  const [panelWidth, setPanelWidth] = useState(PANEL_DEFAULT_WIDTH)
-  const selectedNode = definition.nodes.find((node) => node.id === selectedNodeId) ?? null
-  const selectedNodeSpec = selectedNode
-    ? nodeSpecs.find((spec) => spec.type === selectedNode.type)
-    : undefined
-  const availableVariables = selectedNode
-    ? getAvailableVariables(definition, selectedNode.id, nodeSpecs)
-    : []
-  const selectedBranchItem = selectedNode && selectedBranch?.nodeId === selectedNode.id
-    ? normalizeNodeConfig(selectedNode.data?.config).branches?.find((branch) => branch.id === selectedBranch.branchId) ?? null
-    : null
-  const panelTitle = selectedBranchItem
-    ? selectedBranchItem.name || selectedBranchItem.id
-    : selectedNode?.data?.title || selectedNodeSpec?.title || selectedNode?.type || ""
-  const panelDescription = selectedBranchItem
-    ? ""
-    : selectedNodeSpec?.description || ""
-  const panelIcon = selectedBranchItem ? "GitBranchIcon" : selectedNodeSpec?.icon
-
-  if (!selectedNode) {
-    return null
-  }
-
-  const updatePanelTitle = (title: string) => {
-    if (selectedBranchItem && selectedBranch) {
-      const config = normalizeNodeConfig(selectedNode.data?.config)
-      onChangeNodeData(selectedNode.id, {
-        ...(selectedNode.data ?? {}),
-        config: {
-          ...config,
-          branches: (config.branches ?? []).map((branch) => (
-            branch.id === selectedBranch.branchId ? { ...branch, name: title } : branch
-          )),
-        },
-      })
-      return
-    }
-    onChangeNodeData(selectedNode.id, {
-      ...(selectedNode.data ?? {}),
-      title,
-    })
-  }
-  const startResize = (event: ReactPointerEvent<HTMLDivElement>) => {
-    event.preventDefault()
-    const startX = event.clientX
-    const startWidth = panelWidth
-    const maxWidth = Math.max(PANEL_MIN_WIDTH, Math.min(PANEL_MAX_WIDTH, window.innerWidth - 320))
-
-    const resize = (moveEvent: PointerEvent) => {
-      const nextWidth = startWidth + startX - moveEvent.clientX
-      setPanelWidth(Math.min(Math.max(nextWidth, PANEL_MIN_WIDTH), maxWidth))
-    }
-    const stopResize = () => {
-      window.removeEventListener("pointermove", resize)
-      window.removeEventListener("pointerup", stopResize)
-    }
-
-    window.addEventListener("pointermove", resize)
-    window.addEventListener("pointerup", stopResize)
-  }
-
-  return (
-    <div
-      data-workflow-preserve-selection
-      className="pointer-events-none absolute inset-y-3 right-3 z-50 flex max-w-[calc(100%-1.5rem)]"
-      style={{ width: panelWidth }}
-    >
-      <div
-        role="separator"
-        aria-orientation="vertical"
-        aria-label="调整属性面板宽度"
-        className="group pointer-events-auto absolute inset-y-2 left-0 z-10 flex w-3 -translate-x-1.5 cursor-col-resize items-center justify-center"
-        onPointerDown={startResize}
-      >
-        <span className="h-12 w-1 rounded-full bg-slate-300/80 transition-colors group-hover:bg-blue-400" />
-      </div>
-      <section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-white shadow-[0_18px_45px_rgba(15,23,42,0.18)] backdrop-blur">
-        <div className="shrink-0 border-slate-200 px-4 py-3">
-          <div className="flex min-w-0 items-center justify-between gap-3">
-            <div className="flex min-w-0 flex-1 items-center gap-2.5">
-              <WorkflowNodeIcon
-                icon={panelIcon}
-                size="sm"
-                className="rounded-md shadow-none"
-              />
-              <div className="min-w-0 flex-1">
-                <Input
-                  value={panelTitle}
-                  placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
-                  className="h-7 w-full rounded-md border-transparent bg-transparent px-1 text-sm font-semibold leading-5 text-slate-900 shadow-none transition-colors hover:border-slate-200 hover:bg-slate-50 focus-visible:border-blue-300 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-100"
-                  onChange={(event) => updatePanelTitle(event.target.value)}
-                />
-              </div>
-            </div>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
-              aria-label="关闭属性面板"
-              onClick={onClose}
-            >
-              <XIcon className="size-4" />
-            </Button>
-          </div>
-          {panelDescription ? (
-            <div className="mt-1 text-sm leading-5 text-slate-500">
-              {panelDescription}
-            </div>
-          ) : null}
-        </div>
-        <ScrollArea className="min-h-0 flex-1">
-          <div>
-            {selectedBranchItem && selectedBranch ? (
-              <ConditionBranchConfigPanel
-                node={selectedNode}
-                nodes={definition.nodes}
-                branchId={selectedBranch.branchId}
-                variables={availableVariables}
-                onChange={onChangeNodeData}
-              />
-            ) : (
-              <NodeConfigPanel
-                node={selectedNode}
-                nodeSpec={selectedNodeSpec}
-                nodes={definition.nodes}
-                availableVariables={availableVariables}
-                showHeader={false}
-                showConditionBranches={selectedNode.type !== "condition"}
-                onChange={onChangeNodeData}
-                onDelete={onDeleteNode}
-              />
-            )}
-          </div>
-        </ScrollArea>
-      </section>
-    </div>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx
deleted file mode 100644
index 45493f6..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor-status.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client"
-
-import { AlertTriangleIcon, CheckCircle2Icon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-import type { WorkflowDraftValidation } from "./workflow-utils"
-
-export function WorkflowEditorStatus({
-  validation,
-  nodeCount,
-  edgeCount,
-}: {
-  validation: WorkflowDraftValidation
-  nodeCount: number
-  edgeCount: number
-}) {
-  return (
-    <div className="pointer-events-none inline-flex w-fit max-w-full items-center gap-2 px-1 text-xs text-slate-500">
-      <span
-        className={cn(
-          "inline-flex shrink-0 items-center gap-1",
-          validation.valid ? "text-emerald-600" : "text-amber-700"
-        )}
-      >
-        {validation.valid ? (
-          <CheckCircle2Icon className="size-3" />
-        ) : (
-          <AlertTriangleIcon className="size-3" />
-        )}
-        {validation.valid ? "检查通过" : `${validation.errors.length} 个问题`}
-      </span>
-      <span className="shrink-0 text-slate-300">/</span>
-      <span className="shrink-0">{nodeCount} 节点</span>
-      <span className="shrink-0 text-slate-300">·</span>
-      <span className="shrink-0">{edgeCount} 连线</span>
-    </div>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx
deleted file mode 100644
index c396446..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor-toolbar.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client"
-
-import type { ReactNode } from "react"
-import {
-  CheckIcon,
-  Redo2Icon,
-  RotateCcwIcon,
-  SaveIcon,
-  SendIcon,
-  Undo2Icon,
-} from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-
-export function WorkflowEditorToolbar({
-  toolbarExtra,
-  onUndo,
-  undoDisabled = false,
-  onRedo,
-  redoDisabled = false,
-  onRestoreDefault,
-  restoreDefaultDisabled = false,
-  onValidate,
-  validateDisabled = false,
-  onSaveDraft,
-  saveDraftDisabled = false,
-  onPublish,
-  publishDisabled = false,
-}: {
-  toolbarExtra?: ReactNode
-  onUndo?: () => void
-  undoDisabled?: boolean
-  onRedo?: () => void
-  redoDisabled?: boolean
-  onRestoreDefault?: () => void
-  restoreDefaultDisabled?: boolean
-  onValidate?: () => void
-  validateDisabled?: boolean
-  onSaveDraft?: () => void
-  saveDraftDisabled?: boolean
-  onPublish?: () => void
-  publishDisabled?: boolean
-}) {
-  return (
-    <div className="inline-flex min-h-9 w-fit max-w-full items-center rounded-md bg-white/95 px-1.5 py-1 shadow-sm backdrop-blur">
-      <div className="flex min-w-0 items-center gap-0.5 overflow-x-auto overflow-y-hidden">
-        {toolbarExtra}
-        <span className="mx-1 h-4 w-px shrink-0 bg-slate-200" />
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={undoDisabled} onClick={onUndo}>
-          <Undo2Icon className="size-3.5" />
-          撤销
-        </Button>
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={redoDisabled} onClick={onRedo}>
-          <Redo2Icon className="size-3.5" />
-          重做
-        </Button>
-        <span className="mx-1 h-4 w-px shrink-0 bg-slate-200" />
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={restoreDefaultDisabled} onClick={onRestoreDefault}>
-          <RotateCcwIcon className="size-3.5" />
-          恢复默认
-        </Button>
-        <span className="mx-1 h-4 w-px shrink-0 bg-slate-200" />
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={validateDisabled} onClick={onValidate}>
-          <CheckIcon className="size-3.5" />
-          检查
-        </Button>
-        <Button type="button" variant="ghost" size="sm" className="h-7 shrink-0 px-2 text-xs text-slate-700 hover:bg-slate-100 hover:text-slate-950" disabled={saveDraftDisabled} onClick={onSaveDraft}>
-          <SaveIcon className="size-3.5" />
-          保存
-        </Button>
-        <Button type="button" size="sm" className="h-7 shrink-0 bg-[#2575FC] px-2 text-xs hover:bg-[#1b63d8]" disabled={publishDisabled} onClick={onPublish}>
-          <SendIcon className="size-3.5" />
-          发布
-        </Button>
-      </div>
-    </div>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
deleted file mode 100644
index 1c8d9de..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
+++ /dev/null
@@ -1,425 +0,0 @@
-"use client"
-
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react"
-
-import {
-  EditorRenderer,
-  FreeLayoutEditorProvider,
-  WorkflowDocument,
-  type WorkflowLineEntity,
-  WorkflowLinesManager,
-  WorkflowSelectService,
-  type WorkflowJSON,
-  type WorkflowNodeJSON,
-  type WorkflowPortEntity,
-  useClientContext,
-  useUndoRedo,
-  usePlaygroundTools,
-  useService,
-} from "@flowgram.ai/free-layout-editor"
-
-import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
-import { cn } from "@/lib/utils"
-
-import { useFlowgramEditorProps } from "./flowgram-editor-provider"
-import {
-  WorkflowBranchSelectionProvider,
-  type SelectedWorkflowBranch,
-} from "./workflow-branch-selection"
-import { WorkflowCanvasControls } from "./workflow-canvas-controls"
-import { WorkflowConfigPanel } from "./workflow-config-sidebar"
-import { WorkflowEditorStatus } from "./workflow-editor-status"
-import { WorkflowEditorToolbar } from "./workflow-editor-toolbar"
-import {
-  WorkflowPortAddProvider,
-  type WorkflowPortAddRequest,
-} from "./workflow-port-add-context"
-import {
-  WorkflowPortNodeMenu,
-  type WorkflowPortNodeMenuState,
-} from "./workflow-port-node-menu"
-import {
-  createWorkflowNodeFromSpec,
-  deleteWorkflowNode,
-  shouldClearWorkflowSelectionOnPointerDown,
-  updateWorkflowNodeData,
-  validateWorkflowDefinition,
-  type WorkflowNodeData,
-} from "./workflow-utils"
-
-export function WorkflowEditor({
-  definition,
-  nodeSpecs,
-  onDefinitionChange,
-  onRestoreDefault,
-  restoreDefaultDisabled = false,
-  historyDisabled = false,
-  onValidate,
-  validateDisabled = false,
-  onSaveDraft,
-  saveDraftDisabled = false,
-  onPublish,
-  publishDisabled = false,
-  toolbarExtra,
-}: {
-  definition: AIWorkflowDefinition
-  nodeSpecs: AIWorkflowNodeSpec[]
-  onDefinitionChange: (definition: AIWorkflowDefinition) => void
-  onRestoreDefault?: () => void
-  restoreDefaultDisabled?: boolean
-  historyDisabled?: boolean
-  onValidate?: () => void
-  validateDisabled?: boolean
-  onSaveDraft?: () => void
-  saveDraftDisabled?: boolean
-  onPublish?: () => void
-  publishDisabled?: boolean
-  toolbarExtra?: ReactNode
-}) {
-  const [localDefinition, setLocalDefinition] = useState(definition)
-  const [selectedNodeId, setSelectedNodeId] = useState("")
-  const [selectedBranch, setSelectedBranch] = useState<SelectedWorkflowBranch | null>(null)
-  const branchSelectAtRef = useRef(0)
-
-  const validation = useMemo(
-    () => validateWorkflowDefinition(localDefinition, nodeSpecs),
-    [localDefinition, nodeSpecs]
-  )
-
-  const editorProps = useFlowgramEditorProps({
-    definition: localDefinition,
-    nodeSpecs,
-    onDefinitionChange: (next) => {
-      setLocalDefinition(next)
-      onDefinitionChange(next)
-    },
-  })
-
-  const handleSelectBranch = useCallback(
-    (branch: SelectedWorkflowBranch | null) => {
-      if (!branch) {
-        setSelectedBranch(null)
-        return
-      }
-      branchSelectAtRef.current = Date.now()
-      setSelectedNodeId(branch.nodeId)
-      setSelectedBranch(branch)
-    },
-    []
-  )
-
-  return (
-    <WorkflowBranchSelectionProvider
-      selectedBranch={selectedBranch}
-      onSelectBranch={handleSelectBranch}
-    >
-      <FreeLayoutEditorProvider {...editorProps}>
-        <WorkflowEditorInner
-          definition={localDefinition}
-          nodeSpecs={nodeSpecs}
-          selectedNodeId={selectedNodeId}
-          selectedBranch={selectedBranch}
-          validation={validation}
-          toolbarExtra={toolbarExtra}
-          onDefinitionChange={(next) => {
-            setLocalDefinition(next)
-            onDefinitionChange(next)
-          }}
-          onSelectNode={(nodeId) => {
-            setSelectedNodeId(nodeId)
-            if (!nodeId || Date.now() - branchSelectAtRef.current > 160) {
-              setSelectedBranch(null)
-            }
-          }}
-          onSelectBranch={handleSelectBranch}
-          historyDisabled={historyDisabled}
-          onRestoreDefault={onRestoreDefault}
-          restoreDefaultDisabled={restoreDefaultDisabled}
-          onValidate={onValidate}
-          validateDisabled={validateDisabled}
-          onSaveDraft={onSaveDraft}
-          saveDraftDisabled={saveDraftDisabled}
-          onPublish={onPublish}
-          publishDisabled={publishDisabled}
-        />
-      </FreeLayoutEditorProvider>
-    </WorkflowBranchSelectionProvider>
-  )
-}
-
-function WorkflowEditorInner({
-  definition,
-  nodeSpecs,
-  selectedNodeId,
-  selectedBranch,
-  validation,
-  toolbarExtra,
-  onDefinitionChange,
-  onSelectNode,
-  onSelectBranch,
-  historyDisabled,
-  onRestoreDefault,
-  restoreDefaultDisabled,
-  onValidate,
-  validateDisabled,
-  onSaveDraft,
-  saveDraftDisabled,
-  onPublish,
-  publishDisabled,
-}: {
-  definition: AIWorkflowDefinition
-  nodeSpecs: AIWorkflowNodeSpec[]
-  selectedNodeId: string
-  selectedBranch: SelectedWorkflowBranch | null
-  validation: ReturnType<typeof validateWorkflowDefinition>
-  toolbarExtra?: ReactNode
-  onDefinitionChange: (definition: AIWorkflowDefinition) => void
-  onSelectNode: (nodeId: string) => void
-  onSelectBranch: (branch: SelectedWorkflowBranch | null) => void
-  historyDisabled?: boolean
-  onRestoreDefault?: () => void
-  restoreDefaultDisabled?: boolean
-  onValidate?: () => void
-  validateDisabled?: boolean
-  onSaveDraft?: () => void
-  saveDraftDisabled?: boolean
-  onPublish?: () => void
-  publishDisabled?: boolean
-}) {
-  const context = useClientContext()
-  const playgroundTools = usePlaygroundTools()
-  const undoRedo = useUndoRedo()
-  const workflowDocument = useService(WorkflowDocument)
-  const linesManager = useService(WorkflowLinesManager)
-  const selectService = useService(WorkflowSelectService)
-  const editorRootRef = useRef<HTMLDivElement>(null)
-  const [autoLayouting, setAutoLayouting] = useState(false)
-  const [nodeMenu, setNodeMenu] = useState<(
-    WorkflowPortNodeMenuState & {
-      sourcePort: WorkflowPortEntity
-      targetPort?: WorkflowPortEntity
-      line?: WorkflowLineEntity
-    }
-  ) | null>(null)
-  const zoomPercent = `${Math.round(playgroundTools.zoom * 100)}%`
-
-  useEffect(() => {
-    const disposable = selectService.onSelectionChanged(() => {
-      const selectedNode = selectService.selectedNodes.length === 1
-        ? selectService.selectedNodes[0]
-        : null
-      onSelectNode(selectedNode?.id ?? "")
-    })
-    return () => disposable.dispose()
-  }, [onSelectNode, selectService])
-
-  const emitCurrentDefinition = () => {
-    onDefinitionChange(context.document.toJSON() as AIWorkflowDefinition)
-  }
-
-  const undo = async () => {
-    await undoRedo.undo()
-    emitCurrentDefinition()
-  }
-
-  const redo = async () => {
-    await undoRedo.redo()
-    emitCurrentDefinition()
-  }
-
-  const openNodeMenuFromPort = useCallback((request: WorkflowPortAddRequest) => {
-    const rootRect = editorRootRef.current?.getBoundingClientRect()
-    setNodeMenu({
-      sourcePort: request.sourcePort,
-      targetPort: request.targetPort,
-      line: request.line,
-      x: rootRect ? request.event.clientX - rootRect.left + 10 : request.event.clientX,
-      y: rootRect ? request.event.clientY - rootRect.top - 10 : request.event.clientY,
-    })
-  }, [])
-
-  const addNodeFromPort = async (spec: AIWorkflowNodeSpec) => {
-    if (!nodeMenu) {
-      return
-    }
-    const sourcePort = nodeMenu.sourcePort
-    const nextNode = createWorkflowNodeFromSpec(
-      spec,
-      context.document.toJSON().nodes ?? definition.nodes,
-      nextNodePositionFromAddMenu(nodeMenu)
-    )
-    const created = workflowDocument.createWorkflowNodeByType(
-      spec.type,
-      nextNode.meta?.position,
-      nextNode as WorkflowNodeJSON
-    )
-    linesManager.createLine({
-      from: sourcePort.node.id,
-      fromPort: sourcePort.portID,
-      to: created.id,
-      toPort: "",
-    })
-    if (nodeMenu.targetPort) {
-      linesManager.createLine({
-        from: created.id,
-        fromPort: "",
-        to: nodeMenu.targetPort.node.id,
-        toPort: nodeMenu.targetPort.portID,
-      })
-      if (nodeMenu.line && !nodeMenu.line.disposed) {
-        nodeMenu.line.dispose()
-      }
-    }
-    setNodeMenu(null)
-    await selectService.selectNodeAndScrollToView(created)
-    onSelectNode(created.id)
-    emitCurrentDefinition()
-  }
-
-  const updateNodeData = (nodeId: string, data: WorkflowNodeData) => {
-    const next = updateWorkflowNodeData(definition, nodeId, data)
-    context.operation.fromJSON(next as WorkflowJSON)
-    onDefinitionChange(context.document.toJSON() as AIWorkflowDefinition)
-  }
-
-  const removeNode = (nodeId: string) => {
-    const next = deleteWorkflowNode(definition, nodeId)
-    context.operation.fromJSON(next as WorkflowJSON)
-    const nextSelectedNodeId = next.nodes[0]?.id ?? ""
-    onSelectNode(nextSelectedNodeId)
-    onDefinitionChange(context.document.toJSON() as AIWorkflowDefinition)
-  }
-
-  const autoLayout = async () => {
-    if (autoLayouting || definition.nodes.length < 2) {
-      return
-    }
-    setAutoLayouting(true)
-    try {
-      await playgroundTools.autoLayout({
-        enableAnimation: true,
-        animationDuration: 240,
-        disableFitView: true,
-      })
-      playgroundTools.fitView(true)
-      emitCurrentDefinition()
-    } finally {
-      setAutoLayouting(false)
-    }
-  }
-
-  const resetZoom = () => {
-    context.playground.config.updateConfig({
-      zoom: 1,
-    })
-  }
-
-  const closeConfigPanel = () => {
-    selectService.clear()
-    onSelectNode("")
-    onSelectBranch(null)
-  }
-
-  const clearSelectionFromCanvas = () => {
-    setNodeMenu(null)
-    closeConfigPanel()
-  }
-
-  return (
-    <div
-      ref={editorRootRef}
-      data-workflow-editor-root
-      className="relative isolate h-full min-h-0 w-full flex-1 overflow-hidden border bg-[var(--g-editor-background)]"
-      onPointerDownCapture={(event) => {
-        if (shouldClearWorkflowSelectionOnPointerDown(event.target)) {
-          clearSelectionFromCanvas()
-        }
-      }}
-    >
-      <div
-        data-workflow-preserve-selection
-        className={cn(
-          "absolute left-3 top-3 z-50 flex max-w-[calc(100%-1.5rem)] flex-col items-start gap-1.5",
-          selectedNodeId && "max-w-[calc(100%-25rem)]"
-        )}
-      >
-        <WorkflowEditorToolbar
-          toolbarExtra={toolbarExtra}
-          onUndo={() => void undo()}
-          undoDisabled={historyDisabled || !undoRedo.canUndo}
-          onRedo={() => void redo()}
-          redoDisabled={historyDisabled || !undoRedo.canRedo}
-          onRestoreDefault={onRestoreDefault}
-          restoreDefaultDisabled={restoreDefaultDisabled}
-          onValidate={onValidate}
-          validateDisabled={validateDisabled}
-          onSaveDraft={onSaveDraft}
-          saveDraftDisabled={saveDraftDisabled}
-          onPublish={onPublish}
-          publishDisabled={publishDisabled}
-        />
-      </div>
-
-      <div data-workflow-preserve-selection className="absolute bottom-4 left-4 z-50">
-        <WorkflowCanvasControls
-          zoomPercent={zoomPercent}
-          onZoomIn={() => playgroundTools.zoomin(true)}
-          onZoomOut={() => playgroundTools.zoomout(true)}
-          onResetZoom={resetZoom}
-          onFitView={() => playgroundTools.fitView(true)}
-          onAutoLayout={() => void autoLayout()}
-          autoLayoutDisabled={autoLayouting || definition.nodes.length < 2}
-        />
-      </div>
-
-      <div data-workflow-preserve-selection className="absolute bottom-4 right-4 z-50">
-        <WorkflowEditorStatus
-          validation={validation}
-          nodeCount={definition.nodes.length}
-          edgeCount={definition.edges.length}
-        />
-      </div>
-
-      <WorkflowPortAddProvider onRequestAdd={openNodeMenuFromPort}>
-        <EditorRenderer className="h-full w-full" />
-      </WorkflowPortAddProvider>
-
-      <WorkflowPortNodeMenu
-        open={Boolean(nodeMenu)}
-        position={nodeMenu}
-        nodeSpecs={nodeSpecs}
-        onSelect={(spec) => void addNodeFromPort(spec)}
-        onClose={() => setNodeMenu(null)}
-      />
-
-      <WorkflowConfigPanel
-        definition={definition}
-        nodeSpecs={nodeSpecs}
-        selectedNodeId={selectedNodeId}
-        selectedBranch={selectedBranch}
-        onClose={closeConfigPanel}
-        onChangeNodeData={updateNodeData}
-        onDeleteNode={removeNode}
-      />
-    </div>
-  )
-}
-
-function nextNodePositionFromAddMenu(
-  menu: WorkflowPortNodeMenuState & {
-    sourcePort: WorkflowPortEntity
-    targetPort?: WorkflowPortEntity
-    line?: WorkflowLineEntity
-  }
-) {
-  if (menu.line && !menu.line.disposed) {
-    return {
-      x: menu.line.center.labelX,
-      y: menu.line.center.labelY - 40,
-    }
-  }
-  return {
-    x: menu.sourcePort.point.x + 120,
-    y: menu.sourcePort.point.y - 40,
-  }
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-line-add-button.tsx b/web/app/dashboard/ai-workflows/_components/workflow-line-add-button.tsx
deleted file mode 100644
index 3c48686..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-line-add-button.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client"
-
-import type { LineRenderProps } from "@flowgram.ai/free-lines-plugin"
-import { PlusIcon } from "lucide-react"
-import { usePlayground } from "@flowgram.ai/free-layout-editor"
-
-import { useWorkflowPortAdd } from "./workflow-port-add-context"
-
-export function WorkflowLineAddButton({
-  line,
-  selected,
-  hovered,
-  color,
-}: LineRenderProps) {
-  const playground = usePlayground()
-  const requestPortAdd = useWorkflowPortAdd()
-  const { fromPort, toPort } = line
-  const visible = !line.disposed && !playground.config.readonly && (selected || hovered)
-
-  if (!visible) {
-    return null
-  }
-
-  return (
-    <button
-      type="button"
-      className="absolute flex size-6 items-center justify-center rounded-full border border-white bg-white text-[#2575FC] shadow-sm transition-transform" // hover:scale-105
-      style={{
-        transform: `translate(-50%, -50%) translate(${line.center.labelX}px, ${line.center.labelY}px)`,
-        color,
-        pointerEvents: "all",
-      }}
-      aria-label="添加节点"
-      data-line-id={line.id}
-      onClick={(event) => {
-        event.stopPropagation()
-        if (!fromPort || !toPort) {
-          return
-        }
-        requestPortAdd?.({
-          sourcePort: fromPort,
-          targetPort: toPort,
-          line,
-          event,
-        })
-      }}
-    >
-      <PlusIcon className="size-3.5" strokeWidth={2.4} />
-    </button>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx b/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx
deleted file mode 100644
index 0f0206e..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ReactNode } from "react"
-
-import { cn } from "@/lib/utils"
-import { WorkflowNodeIcon } from "./workflow-node-icon"
-
-export function WorkflowNodeCard({
-  title,
-  icon,
-  selected,
-  children,
-}: {
-  title: string
-  icon: string
-  selected: boolean
-  children?: ReactNode
-}) {
-  return (
-    <div
-      data-workflow-preserve-selection
-      className={cn(
-        "group relative rounded-lg bg-[#FFFFFF] p-0.5 transition-all",
-        "w-[242px]",
-        selected
-          ? "border-[var(--g-selection-background)] shadow-[0_8px_24px_rgba(20,24,38,0.14)]"
-          : "border-border/80 shadow-sm hover:border-border hover:shadow-md"
-      )}
-    >
-      <div className="overflow-visible rounded-lg border border-transparent bg-[#FFFFFF]">
-        <div className="flex min-h-12 items-center gap-2 px-3 py-2.5">
-          <WorkflowNodeIcon icon={icon} />
-          <div className="min-w-0 flex-1">
-            <div className="truncate text-sm font-semibold leading-5 text-foreground">
-              {title}
-            </div>
-          </div>
-        </div>
-        {children ? <div className="border-t bg-muted/20 px-3 py-2.5">{children}</div> : null}
-      </div>
-    </div>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-node-icon.tsx b/web/app/dashboard/ai-workflows/_components/workflow-node-icon.tsx
deleted file mode 100644
index dfacd5b..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-node-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cn } from "@/lib/utils"
-import { FileTextIcon, type LucideIcon } from "lucide-react"
-import * as LucideIcons from "lucide-react"
-
-const lucideIconComponents = LucideIcons as unknown as Record<string, LucideIcon>
-
-export function WorkflowNodeIcon({
-  icon,
-  size = "md",
-  className,
-}: {
-  icon?: string
-  size?: "sm" | "md"
-  className?: string
-}) {
-  const Icon = icon ? lucideIconComponents[icon] ?? FileTextIcon : FileTextIcon
-
-  return (
-    <span
-      className={cn(
-        "flex shrink-0 items-center justify-center rounded-lg bg-[#2575FC] text-white shadow-sm",
-        size === "md" ? "size-7" : "size-6",
-        className
-      )}
-    >
-      <Icon className={size === "md" ? "size-4" : "size-3.5"} />
-    </span>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-port-add-context.tsx b/web/app/dashboard/ai-workflows/_components/workflow-port-add-context.tsx
deleted file mode 100644
index 6024d8c..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-port-add-context.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client"
-
-import { createContext, useContext } from "react"
-
-import type { WorkflowLineEntity, WorkflowPortEntity } from "@flowgram.ai/free-layout-editor"
-
-export type WorkflowPortAddRequest = {
-  sourcePort: WorkflowPortEntity
-  targetPort?: WorkflowPortEntity
-  line?: WorkflowLineEntity
-  event: React.MouseEvent
-}
-
-const WorkflowPortAddContext = createContext<((request: WorkflowPortAddRequest) => void) | null>(null)
-
-export function WorkflowPortAddProvider({
-  onRequestAdd,
-  children,
-}: {
-  onRequestAdd: (request: WorkflowPortAddRequest) => void
-  children: React.ReactNode
-}) {
-  return (
-    <WorkflowPortAddContext.Provider value={onRequestAdd}>
-      {children}
-    </WorkflowPortAddContext.Provider>
-  )
-}
-
-export function useWorkflowPortAdd() {
-  return useContext(WorkflowPortAddContext)
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-port-node-menu.tsx b/web/app/dashboard/ai-workflows/_components/workflow-port-node-menu.tsx
deleted file mode 100644
index c6e7e7d..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-port-node-menu.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client"
-
-import { useEffect, useMemo, useRef } from "react"
-
-import { ScrollArea } from "@/components/ui/scroll-area"
-import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
-import { WorkflowNodeIcon } from "./workflow-node-icon"
-
-export type WorkflowPortNodeMenuState = {
-  x: number
-  y: number
-}
-
-export function WorkflowPortNodeMenu({
-  open,
-  position,
-  nodeSpecs,
-  onSelect,
-  onClose,
-}: {
-  open: boolean
-  position: WorkflowPortNodeMenuState | null
-  nodeSpecs: AIWorkflowNodeSpec[]
-  onSelect: (spec: AIWorkflowNodeSpec) => void
-  onClose: () => void
-}) {
-  const menuRef = useRef<HTMLDivElement>(null)
-  const insertableNodeSpecs = useMemo(
-    () => nodeSpecs.filter((spec) => spec.type !== "start"),
-    [nodeSpecs]
-  )
-
-  useEffect(() => {
-    if (!open) {
-      return
-    }
-    const closeOnPointerDown = (event: PointerEvent) => {
-      const target = event.target
-      if (target instanceof Node && menuRef.current?.contains(target)) {
-        return
-      }
-      onClose()
-    }
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        onClose()
-      }
-    }
-    window.addEventListener("pointerdown", closeOnPointerDown)
-    window.addEventListener("keydown", closeOnEscape)
-    return () => {
-      window.removeEventListener("pointerdown", closeOnPointerDown)
-      window.removeEventListener("keydown", closeOnEscape)
-    }
-  }, [onClose, open])
-
-  if (!open || !position) {
-    return null
-  }
-
-  return (
-    <div
-      ref={menuRef}
-      data-workflow-preserve-selection
-      className="pointer-events-auto absolute z-[80] w-64 overflow-hidden rounded-lg border border-slate-200 bg-white py-1.5 shadow-[0_14px_35px_rgba(15,23,42,0.16)]"
-      style={{
-        left: position.x,
-        top: position.y,
-      }}
-      onPointerDown={(event) => event.stopPropagation()}
-    >
-      <div className="border-b border-slate-100 px-3 pb-2 pt-1 text-xs font-medium text-slate-500">
-        添加节点
-      </div>
-      <ScrollArea className="h-80 max-h-[min(20rem,calc(100vh-8rem))]">
-        <div className="p-1.5">
-          {insertableNodeSpecs.map((spec) => (
-            <button
-              key={spec.type}
-              type="button"
-              className="flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-slate-50"
-              onClick={(event) => {
-                event.stopPropagation()
-                onSelect(spec)
-              }}
-            >
-              <WorkflowNodeIcon icon={spec.icon} size="sm" className="mt-0.5" />
-              <span className="min-w-0">
-                <span className="block truncate font-medium text-slate-900">
-                  {spec.title || spec.type}
-                </span>
-                {spec.description ? (
-                  <span className="line-clamp-2 text-xs text-slate-500">
-                    {spec.description}
-                  </span>
-                ) : null}
-              </span>
-            </button>
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  )
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-utils.test.mjs b/web/app/dashboard/ai-workflows/_components/workflow-utils.test.mjs
deleted file mode 100644
index 09dbdd2..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-utils.test.mjs
+++ /dev/null
@@ -1,488 +0,0 @@
-import assert from "node:assert/strict"
-import { describe, it } from "node:test"
-import { readFile } from "node:fs/promises"
-import vm from "node:vm"
-import ts from "typescript"
-
-function plain(value) {
-  return JSON.parse(JSON.stringify(value))
-}
-
-async function loadModule() {
-  const source = await readFile(new URL("./workflow-utils.ts", import.meta.url), "utf8")
-  const compiled = ts.transpileModule(source, {
-    compilerOptions: {
-      target: ts.ScriptTarget.ES2017,
-      module: ts.ModuleKind.CommonJS,
-    },
-    fileName: "workflow-utils.ts",
-  })
-  const sandbox = {
-    exports: {},
-    module: { exports: {} },
-  }
-  sandbox.exports = sandbox.module.exports
-  vm.runInNewContext(compiled.outputText, sandbox)
-  return sandbox.module.exports
-}
-
-function workflowNode(id, type, position = { x: 0, y: 0 }, data = {}) {
-  return {
-    id,
-    type,
-    meta: { position },
-    data: {
-      title: type,
-      config: {},
-      inputsValues: {},
-      ...data,
-    },
-  }
-}
-
-function workflowEdge(sourceNodeID, targetNodeID, extra = {}) {
-  return {
-    sourceNodeID,
-    targetNodeID,
-    ...extra,
-  }
-}
-
-describe("FlowGram value helpers", () => {
-  it("creates and reads reference values", async () => {
-    const { createRefValue, isRefValue, refField, refNodeId } = await loadModule()
-
-    const value = createRefValue("start_1", "userMessage")
-
-    assert.deepEqual(plain(value), { type: "ref", content: ["start_1", "userMessage"] })
-    assert.equal(isRefValue(value), true)
-    assert.equal(refNodeId(value), "start_1")
-    assert.equal(refField(value), "userMessage")
-    assert.equal(isRefValue({ type: "constant", content: "hello" }), false)
-  })
-})
-
-describe("validateWorkflowDefinition", () => {
-  it("rejects a workflow without exactly one start node", async () => {
-    const { validateWorkflowDefinition } = await loadModule()
-
-    const result = validateWorkflowDefinition({
-      schemaVersion: 2,
-      nodes: [workflowNode("end_1", "end")],
-      edges: [],
-    })
-
-    assert.equal(result.valid, false)
-    assert.match(result.errors.join("\n"), /exactly one start/)
-  })
-
-  it("rejects dangling FlowGram edges", async () => {
-    const { validateWorkflowDefinition } = await loadModule()
-
-    const result = validateWorkflowDefinition({
-      schemaVersion: 2,
-      nodes: [workflowNode("start_1", "start"), workflowNode("end_1", "end")],
-      edges: [workflowEdge("start_1", "missing_1")],
-    })
-
-    assert.equal(result.valid, false)
-    assert.match(result.errors.join("\n"), /target node does not exist: missing_1/)
-  })
-
-  it("rejects missing required inputs from node specs", async () => {
-    const { validateWorkflowDefinition } = await loadModule()
-
-    const result = validateWorkflowDefinition(
-      {
-        schemaVersion: 2,
-        nodes: [
-          workflowNode("start_1", "start"),
-          workflowNode("reply_1", "send_reply", { x: 240, y: 0 }, { title: "发送回复" }),
-          workflowNode("end_1", "end", { x: 480, y: 0 }),
-        ],
-        edges: [workflowEdge("start_1", "reply_1"), workflowEdge("reply_1", "end_1")],
-      },
-      [
-        {
-          type: "send_reply",
-          title: "发送回复",
-          inputSchema: [{ name: "replyText", label: "回复内容", type: "string", required: true }],
-        },
-      ]
-    )
-
-    assert.equal(result.valid, false)
-    assert.match(result.errors.join("\n"), /发送回复 missing required input: 回复内容/)
-  })
-
-  it("accepts a valid schema v2 workflow", async () => {
-    const { createRefValue, validateWorkflowDefinition } = await loadModule()
-
-    const result = validateWorkflowDefinition(
-      {
-        schemaVersion: 2,
-        nodes: [
-          workflowNode("start_1", "start"),
-          workflowNode("reply_1", "send_reply", { x: 240, y: 0 }, {
-            inputsValues: { replyText: createRefValue("start_1", "userMessage") },
-          }),
-          workflowNode("end_1", "end", { x: 480, y: 0 }),
-        ],
-        edges: [workflowEdge("start_1", "reply_1"), workflowEdge("reply_1", "end_1")],
-      },
-      [
-        {
-          type: "send_reply",
-          inputSchema: [{ name: "replyText", type: "string", required: true }],
-        },
-      ]
-    )
-
-    assert.deepEqual(plain(result), { valid: true, errors: [] })
-  })
-
-  it("rejects knowledge retrieve nodes without node knowledge bases", async () => {
-    const { createRefValue, validateWorkflowDefinition } = await loadModule()
-
-    const result = validateWorkflowDefinition({
-      schemaVersion: 2,
-      nodes: [
-        workflowNode("start_1", "start"),
-        workflowNode("retrieve_1", "knowledge_retrieve", { x: 240, y: 0 }, {
-          title: "知识检索",
-          inputsValues: { query: createRefValue("start_1", "userMessage") },
-          config: { knowledgeBaseIds: [] },
-        }),
-        workflowNode("end_1", "end", { x: 480, y: 0 }),
-      ],
-      edges: [workflowEdge("start_1", "retrieve_1"), workflowEdge("retrieve_1", "end_1")],
-    })
-
-    assert.equal(result.valid, false)
-    assert.match(result.errors.join("\n"), /需要选择至少一个知识库/)
-  })
-})
-
-describe("createWorkflowNodeFromSpec", () => {
-  it("creates a FlowGram schema v2 node with default inputs", async () => {
-    const { createWorkflowNodeFromSpec } = await loadModule()
-
-    const node = createWorkflowNodeFromSpec(
-      {
-        type: "llm_reply",
-        title: "AI 回复",
-        defaultInputs: {
-          userMessage: { type: "ref", content: ["start_1", "userMessage"] },
-        },
-      },
-      [{ id: "llm_reply_1" }],
-      { x: 120, y: 240 }
-    )
-
-    assert.deepEqual(plain(node), {
-      id: "llm_reply_2",
-      type: "llm_reply",
-      meta: { position: { x: 120, y: 240 } },
-      data: {
-        title: "AI 回复",
-        config: {},
-        inputsValues: {
-          userMessage: { type: "ref", content: ["start_1", "userMessage"] },
-        },
-      },
-    })
-  })
-})
-
-describe("getAvailableVariables", () => {
-  it("returns upstream output variables in dependency order", async () => {
-    const { getAvailableVariables } = await loadModule()
-
-    const variables = getAvailableVariables(
-      {
-        schemaVersion: 2,
-        nodes: [
-          workflowNode("start_1", "start", { x: 0, y: 0 }, { title: "开始" }),
-          workflowNode("retrieve_1", "knowledge_retrieve", { x: 240, y: 0 }, { title: "知识检索" }),
-          workflowNode("reply_1", "llm_reply", { x: 480, y: 0 }, { title: "AI 回复" }),
-          workflowNode("end_1", "end", { x: 720, y: 0 }),
-        ],
-        edges: [
-          workflowEdge("start_1", "retrieve_1"),
-          workflowEdge("retrieve_1", "reply_1"),
-          workflowEdge("reply_1", "end_1"),
-        ],
-      },
-      "reply_1",
-      [
-        {
-          type: "start",
-          outputSchema: [{ name: "userMessage", label: "用户消息", type: "string", description: "input" }],
-        },
-        {
-          type: "knowledge_retrieve",
-          outputSchema: [{ name: "documents", label: "文档", type: "array<object>", description: "docs" }],
-        },
-      ]
-    )
-
-    assert.deepEqual(plain(variables), [
-      {
-        nodeId: "start_1",
-        nodeName: "开始",
-        field: "userMessage",
-        label: "用户消息",
-        type: "string",
-        description: "input",
-      },
-      {
-        nodeId: "retrieve_1",
-        nodeName: "知识检索",
-        field: "documents",
-        label: "文档",
-        type: "array<object>",
-        description: "docs",
-      },
-    ])
-  })
-})
-
-describe("workflow variable display helpers", () => {
-  it("builds business-first variable options with technical details", async () => {
-    const { buildVariableOption } = await loadModule()
-
-    assert.deepEqual(plain(buildVariableOption({
-      nodeId: "start_1",
-      nodeName: "开始",
-      field: "userMessage",
-      label: "用户消息",
-      type: "string",
-      description: "客户本轮发送的消息内容",
-    })), {
-      value: "start_1.userMessage",
-      label: "开始 / 用户消息",
-      subtitle: "start_1.userMessage · string",
-      description: "客户本轮发送的消息内容",
-    })
-  })
-
-  it("builds variable spec display rows for readonly node outputs", async () => {
-    const { buildVariableSpecDisplay } = await loadModule()
-
-    assert.deepEqual(plain(buildVariableSpecDisplay({
-      name: "replyText",
-      label: "回复内容",
-      type: "string",
-      description: "发送给客户的最终回复文本",
-    })), {
-      key: "replyText",
-      label: "回复内容",
-      subtitle: "replyText · string",
-      description: "发送给客户的最终回复文本",
-    })
-  })
-})
-
-describe("workflow branch interaction helpers", () => {
-  it("detects branch row action targets inside buttons", async () => {
-    const { isBranchRowActionTarget } = await loadModule()
-
-    assert.equal(isBranchRowActionTarget({
-      closest(selector) {
-        return selector === "button" ? {} : null
-      },
-    }), true)
-    assert.equal(isBranchRowActionTarget({
-      closest() {
-        return null
-      },
-    }), false)
-  })
-
-  it("clears workflow selection only when clicking outside preserved regions", async () => {
-    const { shouldClearWorkflowSelectionOnPointerDown } = await loadModule()
-
-    assert.equal(shouldClearWorkflowSelectionOnPointerDown({
-      closest(selector) {
-        return selector === "[data-workflow-preserve-selection]" ? {} : null
-      },
-    }), false)
-    assert.equal(shouldClearWorkflowSelectionOnPointerDown({
-      closest() {
-        return null
-      },
-    }), true)
-  })
-})
-
-describe("workflow definition mutations", () => {
-  it("updates node data without changing unrelated nodes", async () => {
-    const { updateWorkflowNodeData } = await loadModule()
-    const definition = {
-      schemaVersion: 2,
-      nodes: [
-        workflowNode("start_1", "start"),
-        workflowNode("reply_1", "send_reply", { x: 240, y: 0 }),
-      ],
-      edges: [workflowEdge("start_1", "reply_1")],
-    }
-
-    const next = updateWorkflowNodeData(definition, "reply_1", {
-      title: "发送回复",
-      config: { staticReply: "hello" },
-      inputsValues: {},
-    })
-
-    assert.equal(next.nodes[0].data.title, "start")
-    assert.deepEqual(plain(next.nodes[1].data), {
-      title: "发送回复",
-      config: { staticReply: "hello" },
-      inputsValues: {},
-    })
-  })
-
-  it("deletes non-start nodes and related edges while keeping start protected", async () => {
-    const { deleteWorkflowNode } = await loadModule()
-    const definition = {
-      schemaVersion: 2,
-      nodes: [
-        workflowNode("start_1", "start"),
-        workflowNode("reply_1", "send_reply", { x: 240, y: 0 }),
-        workflowNode("end_1", "end", { x: 480, y: 0 }),
-      ],
-      edges: [workflowEdge("start_1", "reply_1"), workflowEdge("reply_1", "end_1")],
-    }
-
-    const next = deleteWorkflowNode(definition, "reply_1")
-    assert.deepEqual(next.nodes.map((node) => node.id), ["start_1", "end_1"])
-    assert.deepEqual(next.edges, [])
-
-    const protectedDefinition = deleteWorkflowNode(definition, "start_1")
-    assert.deepEqual(protectedDefinition, definition)
-
-    const withoutEnd = deleteWorkflowNode(definition, "end_1")
-    assert.deepEqual(withoutEnd.nodes.map((node) => node.id), ["start_1", "reply_1"])
-    assert.deepEqual(withoutEnd.edges, [workflowEdge("start_1", "reply_1")])
-  })
-
-  it("upserts and deletes condition branches in node config", async () => {
-    const { deleteConditionBranch, upsertConditionBranch } = await loadModule()
-    const definition = {
-      schemaVersion: 2,
-      nodes: [
-        workflowNode("condition_1", "condition", { x: 240, y: 0 }, {
-          config: {
-            branches: [{ id: "default", name: "默认", targetNodeId: "end_1", default: true }],
-          },
-        }),
-        workflowNode("end_1", "end", { x: 480, y: 0 }),
-      ],
-      edges: [
-        workflowEdge("condition_1", "end_1", { sourcePortID: "default" }),
-      ],
-    }
-
-    const updated = upsertConditionBranch(definition, "condition_1", {
-      id: "vip",
-      name: "VIP",
-      targetNodeId: "end_1",
-      condition: {
-        left: { type: "ref", content: ["start_1", "priority"] },
-        operator: "eq",
-        right: "vip",
-      },
-    })
-
-    assert.deepEqual(plain(updated.nodes[0].data.config.branches.map((branch) => branch.id)), ["default", "vip"])
-
-    updated.edges.push(workflowEdge("condition_1", "end_1", { sourcePortID: "vip" }))
-
-    const deleted = deleteConditionBranch(updated, "condition_1", "vip")
-    assert.deepEqual(plain(deleted.nodes[0].data.config.branches.map((branch) => branch.id)), ["default"])
-    assert.deepEqual(plain(deleted.edges.map((edge) => edge.sourcePortID)), ["default"])
-  })
-
-  it("matches condition branch lines by source node and branch port", async () => {
-    const { isConditionBranchEdge } = await loadModule()
-
-    assert.equal(isConditionBranchEdge(
-      workflowEdge("condition_1", "vip_reply", { sourcePortID: "vip" }),
-      "condition_1",
-      "vip"
-    ), true)
-    assert.equal(isConditionBranchEdge(
-      workflowEdge("condition_1", "default_reply", { sourcePortID: "default" }),
-      "condition_1",
-      "vip"
-    ), false)
-    assert.equal(isConditionBranchEdge(
-      workflowEdge("other_condition", "vip_reply", { sourcePortID: "vip" }),
-      "condition_1",
-      "vip"
-    ), false)
-  })
-
-  it("adds FlowGram source ports for condition edges without removing existing lines", async () => {
-    const { normalizeConditionPortsForFlowgram } = await loadModule()
-    const definition = {
-      schemaVersion: 2,
-      nodes: [
-        workflowNode("condition_1", "condition", { x: 240, y: 0 }, {
-          config: {
-            branches: [
-              { id: "vip", name: "VIP", targetNodeId: "vip_reply", condition: { operator: "eq" } },
-              { id: "default", name: "默认", targetNodeId: "normal_reply", default: true },
-            ],
-          },
-        }),
-        workflowNode("vip_reply", "llm_reply", { x: 520, y: 0 }),
-        workflowNode("normal_reply", "llm_reply", { x: 520, y: 120 }),
-      ],
-      edges: [
-        workflowEdge("condition_1", "vip_reply"),
-        workflowEdge("condition_1", "normal_reply"),
-      ],
-    }
-
-    const next = normalizeConditionPortsForFlowgram(definition)
-
-    assert.deepEqual(plain(next.nodes[0].data.portKeys), ["vip", "default"])
-    assert.deepEqual(plain(next.nodes[0].data.ports), ["vip", "default"])
-    assert.deepEqual(plain(next.edges), [
-      workflowEdge("condition_1", "vip_reply", { sourcePortID: "vip" }),
-      workflowEdge("condition_1", "normal_reply", { sourcePortID: "default" }),
-    ])
-  })
-
-  it("syncs branch targets from condition source ports while preserving unrelated edges", async () => {
-    const { syncConditionBranchTargetsFromEdges } = await loadModule()
-    const definition = {
-      schemaVersion: 2,
-      nodes: [
-        workflowNode("condition_1", "condition", { x: 240, y: 0 }, {
-          config: {
-            branches: [
-              { id: "vip", name: "VIP", targetNodeId: "", condition: { operator: "eq" } },
-              { id: "default", name: "默认", targetNodeId: "", default: true },
-            ],
-          },
-          portKeys: ["vip", "default"],
-          ports: ["vip", "default"],
-        }),
-        workflowNode("vip_reply", "llm_reply", { x: 520, y: 0 }),
-        workflowNode("normal_reply", "llm_reply", { x: 520, y: 120 }),
-      ],
-      edges: [
-        workflowEdge("condition_1", "vip_reply", { sourcePortID: "vip" }),
-        workflowEdge("condition_1", "normal_reply", { sourcePortID: "default" }),
-        workflowEdge("vip_reply", "normal_reply"),
-      ],
-    }
-
-    const next = syncConditionBranchTargetsFromEdges(definition)
-
-    assert.equal(next.nodes[0].data.config.branches[0].targetNodeId, "vip_reply")
-    assert.equal(next.nodes[0].data.config.branches[1].targetNodeId, "normal_reply")
-    assert.equal(next.edges.length, 3)
-  })
-})
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-utils.ts b/web/app/dashboard/ai-workflows/_components/workflow-utils.ts
deleted file mode 100644
index 8a25cab..0000000
--- a/web/app/dashboard/ai-workflows/_components/workflow-utils.ts
+++ /dev/null
@@ -1,557 +0,0 @@
-import type { AIWorkflowDefinition, AIWorkflowNodeSpec, AIWorkflowValue } from "@/lib/api/admin"
-
-export type WorkflowNodePosition = {
-  x: number
-  y: number
-}
-
-export type WorkflowVariableType =
-  | "string"
-  | "number"
-  | "integer"
-  | "boolean"
-  | "object"
-  | "array<string>"
-  | "array<int>"
-  | "array<object>"
-  | "any"
-
-export type WorkflowVariableValueOption = {
-  value: unknown
-  label: string
-  description?: string
-}
-
-export type WorkflowVariableSpec = {
-  name: string
-  label?: string
-  type: WorkflowVariableType
-  required?: boolean
-  description?: string
-  operators?: string[]
-  valueOptions?: WorkflowVariableValueOption[]
-}
-
-export type WorkflowValue = AIWorkflowValue
-export type WorkflowVariableSelector = Extract<AIWorkflowValue, { type: "ref" }>
-
-export type WorkflowCondition = {
-  expression?: string
-  left?: WorkflowValue
-  operator?: string
-  right?: unknown
-}
-
-export type WorkflowConditionBranch = {
-  id: string
-  name?: string
-  targetNodeId: string
-  condition?: WorkflowCondition
-  default?: boolean
-}
-
-export type WorkflowNodeConfig = Record<string, unknown> & {
-  branches?: WorkflowConditionBranch[]
-}
-
-export type WorkflowVariableRef = {
-  nodeId: string
-  nodeName: string
-  field: string
-  label?: string
-  type: string
-  description: string
-  operators?: string[]
-  valueOptions?: WorkflowVariableValueOption[]
-}
-
-export type WorkflowVariableOption = {
-  value: string
-  label: string
-  subtitle: string
-  description: string
-}
-
-export type WorkflowVariableSpecDisplay = {
-  key: string
-  label: string
-  subtitle: string
-  description: string
-}
-
-export type WorkflowNodeSpec = AIWorkflowNodeSpec
-
-export type WorkflowDraftValidation = {
-  valid: boolean
-  errors: string[]
-}
-
-export type WorkflowNode = AIWorkflowDefinition["nodes"][number]
-export type WorkflowNodeData = WorkflowNode["data"]
-export type WorkflowEdge = AIWorkflowDefinition["edges"][number]
-
-export function createRefValue(nodeId: string, field: string): WorkflowVariableSelector {
-  return { type: "ref", content: [nodeId, field] }
-}
-
-export function isRefValue(value: WorkflowValue | undefined): value is WorkflowVariableSelector {
-  return value?.type === "ref" && Array.isArray(value.content) && value.content.length >= 2
-}
-
-export function refNodeId(value: WorkflowValue | undefined): string {
-  return isRefValue(value) ? value.content[0] : ""
-}
-
-export function refField(value: WorkflowValue | undefined): string {
-  return isRefValue(value) ? value.content[1] : ""
-}
-
-export function buildVariableOption(variable: WorkflowVariableRef): WorkflowVariableOption {
-  const ref = `${variable.nodeId}.${variable.field}`
-  const label = `${variable.nodeName} / ${variable.label || variable.field}`
-  return {
-    value: ref,
-    label,
-    subtitle: [ref, variable.type].filter(Boolean).join(" · "),
-    description: variable.description,
-  }
-}
-
-export function buildVariableSpecDisplay(variable: WorkflowVariableSpec): WorkflowVariableSpecDisplay {
-  return {
-    key: variable.name,
-    label: variable.label || variable.name,
-    subtitle: [variable.name, variable.type].filter(Boolean).join(" · "),
-    description: variable.description || "",
-  }
-}
-
-export function isBranchRowActionTarget(target: EventTarget | null): boolean {
-  const maybeElement = target as { closest?: (selector: string) => Element | null } | null
-  return typeof maybeElement?.closest === "function" && maybeElement.closest("button") !== null
-}
-
-export function shouldClearWorkflowSelectionOnPointerDown(target: EventTarget | null): boolean {
-  const maybeElement = target as { closest?: (selector: string) => Element | null } | null
-  if (typeof maybeElement?.closest !== "function") {
-    return false
-  }
-  return maybeElement.closest("[data-workflow-preserve-selection]") === null
-}
-
-export function getNodeTitle(
-  node: AIWorkflowDefinition["nodes"][number] | undefined,
-  specs: AIWorkflowNodeSpec[] = []
-) {
-  if (!node) {
-    return ""
-  }
-  return node.data?.title || specs.find((item) => item.type === node.type)?.title || node.type || node.id
-}
-
-export function validateWorkflowDefinition(
-  definition: AIWorkflowDefinition,
-  nodeSpecs: AIWorkflowNodeSpec[] = []
-): WorkflowDraftValidation {
-  const errors: string[] = []
-  const nodes = definition.nodes ?? []
-  const edges = definition.edges ?? []
-  const startNodes = nodes.filter((node) => node.type === "start")
-  const endNodes = nodes.filter((node) => node.type === "end")
-
-  if (startNodes.length !== 1) {
-    errors.push("workflow must contain exactly one start node")
-  }
-  if (endNodes.length === 0) {
-    errors.push("workflow must contain at least one end node")
-  }
-
-  const nodeIds = new Set<string>()
-  for (const node of nodes) {
-    if (!node.id?.trim()) {
-      errors.push("node id is required")
-      continue
-    }
-    if (nodeIds.has(node.id)) {
-      errors.push(`duplicate node id: ${node.id}`)
-    }
-    nodeIds.add(node.id)
-    if (!node.type?.trim()) {
-      errors.push(`node type is required: ${node.id}`)
-    }
-    if (node.type === "knowledge_retrieve") {
-      const config = normalizeNodeConfig(node.data?.config)
-      const knowledgeBaseIds = Array.isArray(config.knowledgeBaseIds) ? config.knowledgeBaseIds : []
-      if (knowledgeBaseIds.length === 0) {
-        errors.push(`${getNodeTitle(node, nodeSpecs)} 需要选择至少一个知识库`)
-      } else if (knowledgeBaseIds.some((id) => Number(id) <= 0)) {
-        errors.push(`${getNodeTitle(node, nodeSpecs)} 知识库 ID 必须大于 0`)
-      }
-    }
-  }
-
-  for (const edge of edges) {
-    if (!nodeIds.has(edge.sourceNodeID)) {
-      errors.push(`edge source node does not exist: ${edge.sourceNodeID}`)
-    }
-    if (!nodeIds.has(edge.targetNodeID)) {
-      errors.push(`edge target node does not exist: ${edge.targetNodeID}`)
-    }
-  }
-
-  const specByType = new Map(nodeSpecs.map((spec) => [spec.type, spec]))
-  for (const node of nodes) {
-    const spec = specByType.get(node.type)
-    if (!spec) {
-      continue
-    }
-    const inputsValues = node.data?.inputsValues ?? {}
-    for (const input of spec.inputSchema ?? []) {
-      if (input.required && !inputsValues[input.name]) {
-        errors.push(`${getNodeTitle(node, nodeSpecs)} missing required input: ${input.label || input.name}`)
-      }
-    }
-  }
-
-  return { valid: errors.length === 0, errors }
-}
-
-export function createWorkflowNodeFromSpec(
-  spec: AIWorkflowNodeSpec,
-  existingNodes: Pick<AIWorkflowDefinition["nodes"][number], "id">[],
-  position: WorkflowNodePosition
-): AIWorkflowDefinition["nodes"][number] {
-  const id = uniqueNodeId(existingNodes, spec.type)
-  const defaultConfig = spec.type === "condition"
-    ? { branches: [{ id: "default", name: "默认分支", targetNodeId: "", default: true }] }
-    : {}
-  return {
-    id,
-    type: spec.type,
-    meta: { position },
-    data: {
-      title: spec.title || spec.type,
-      config: defaultConfig,
-      inputsValues: spec.defaultInputs ?? {},
-    },
-  }
-}
-
-export function updateWorkflowNodeData(
-  definition: AIWorkflowDefinition,
-  nodeId: string,
-  data: WorkflowNodeData
-): AIWorkflowDefinition {
-  return {
-    ...definition,
-    nodes: definition.nodes.map((node) => (
-      node.id === nodeId ? { ...node, data } : node
-    )),
-  }
-}
-
-export function deleteWorkflowNode(
-  definition: AIWorkflowDefinition,
-  nodeId: string
-): AIWorkflowDefinition {
-  const node = definition.nodes.find((item) => item.id === nodeId)
-  if (!node || node.type === "start") {
-    return definition
-  }
-  return {
-    ...definition,
-    nodes: definition.nodes.filter((item) => item.id !== nodeId),
-    edges: definition.edges.filter((edge) => (
-      edge.sourceNodeID !== nodeId && edge.targetNodeID !== nodeId
-    )),
-  }
-}
-
-export function upsertConditionBranch(
-  definition: AIWorkflowDefinition,
-  nodeId: string,
-  branch: WorkflowConditionBranch
-): AIWorkflowDefinition {
-  const node = definition.nodes.find((item) => item.id === nodeId)
-  if (!node) {
-    return definition
-  }
-  const config = normalizeNodeConfig(node.data?.config)
-  const branches = config.branches ?? []
-  const nextBranches = branches.some((item) => item.id === branch.id)
-    ? branches.map((item) => (item.id === branch.id ? branch : item))
-    : [...branches, branch]
-  return updateWorkflowNodeData(definition, nodeId, {
-    ...(node.data ?? {}),
-    config: { ...config, branches: nextBranches },
-  })
-}
-
-export function deleteConditionBranch(
-  definition: AIWorkflowDefinition,
-  nodeId: string,
-  branchId: string
-): AIWorkflowDefinition {
-  const node = definition.nodes.find((item) => item.id === nodeId)
-  if (!node) {
-    return definition
-  }
-  const config = normalizeNodeConfig(node.data?.config)
-  const nextDefinition = updateWorkflowNodeData(definition, nodeId, {
-    ...(node.data ?? {}),
-    config: {
-      ...config,
-      branches: (config.branches ?? []).filter((branch) => branch.id !== branchId),
-    },
-  })
-  return {
-    ...nextDefinition,
-    edges: nextDefinition.edges.filter((edge) => !isConditionBranchEdge(edge, nodeId, branchId)),
-  }
-}
-
-export function isConditionBranchEdge(
-  edge: { sourceNodeID?: unknown; sourcePortID?: unknown },
-  nodeId: string,
-  branchId: string
-): boolean {
-  return String(edge.sourceNodeID ?? "") === nodeId && String(edge.sourcePortID ?? "") === branchId
-}
-
-export function normalizeConditionPortsForFlowgram(
-  definition: AIWorkflowDefinition
-): AIWorkflowDefinition {
-  const branchIdsByNodeId = new Map<string, Set<string>>()
-  for (const node of definition.nodes) {
-    if (node.type !== "condition") {
-      continue
-    }
-    const config = normalizeNodeConfig(node.data?.config)
-    const branches = ensureConditionBranches(config.branches ?? [])
-    branchIdsByNodeId.set(node.id, new Set(branches.map((branch) => branch.id)))
-  }
-
-  return {
-    ...definition,
-    nodes: definition.nodes.map((node) => {
-      if (node.type !== "condition") {
-        return node
-      }
-      const config = normalizeNodeConfig(node.data?.config)
-      const branches = ensureConditionBranches(config.branches ?? [])
-      return {
-        ...node,
-        data: {
-          ...(node.data ?? {}),
-          config: { ...config, branches },
-          portKeys: branches.map((branch) => branch.id),
-          ports: branches.map((branch) => branch.id),
-        },
-      }
-    }),
-    edges: definition.edges.filter((edge) => {
-      if (!edge.sourcePortID) {
-        return true
-      }
-      const branchIds = branchIdsByNodeId.get(edge.sourceNodeID)
-      return !branchIds || branchIds.has(edge.sourcePortID)
-    }).map((edge) => {
-      const source = definition.nodes.find((node) => node.id === edge.sourceNodeID)
-      if (!source || source.type !== "condition" || edge.sourcePortID) {
-        return edge
-      }
-      const branch = findConditionBranchForTarget(source, edge.targetNodeID)
-      return branch ? { ...edge, sourcePortID: branch.id } : edge
-    }),
-  }
-}
-
-export function syncConditionBranchTargetsFromEdges(
-  definition: AIWorkflowDefinition
-): AIWorkflowDefinition {
-  return {
-    ...definition,
-    nodes: definition.nodes.map((node) => {
-      if (node.type !== "condition") {
-        return node
-      }
-      const config = normalizeNodeConfig(node.data?.config)
-      const branches = ensureConditionBranches(config.branches ?? [])
-      const nextBranches = branches.map((branch) => {
-        const edge = definition.edges.find((item) => (
-          item.sourceNodeID === node.id && item.sourcePortID === branch.id
-        ))
-        return edge ? { ...branch, targetNodeId: edge.targetNodeID } : branch
-      })
-      return {
-        ...node,
-        data: {
-          ...(node.data ?? {}),
-          config: { ...config, branches: nextBranches },
-          portKeys: nextBranches.map((branch) => branch.id),
-          ports: nextBranches.map((branch) => branch.id),
-        },
-      }
-    }),
-  }
-}
-
-export function normalizeNodeConfig(config: unknown): WorkflowNodeConfig {
-  if (!config || typeof config !== "object" || Array.isArray(config)) {
-    return {}
-  }
-  const record = config as Record<string, unknown>
-  const branches = Array.isArray(record.branches)
-    ? record.branches
-        .map(normalizeConditionBranch)
-        .filter((branch): branch is WorkflowConditionBranch => branch !== null)
-    : undefined
-  return {
-    ...record,
-    ...(branches ? { branches } : {}),
-  } as WorkflowNodeConfig
-}
-
-function ensureConditionBranches(branches: WorkflowConditionBranch[]) {
-  if (branches.some((branch) => branch.default)) {
-    return orderConditionBranches(branches)
-  }
-  return orderConditionBranches([
-    ...branches,
-    { id: "default", name: "默认分支", targetNodeId: "", default: true },
-  ])
-}
-
-function orderConditionBranches(branches: WorkflowConditionBranch[]) {
-  return [
-    ...branches.filter((branch) => !branch.default),
-    ...branches.filter((branch) => branch.default).slice(0, 1),
-  ]
-}
-
-function findConditionBranchForTarget(
-  node: AIWorkflowDefinition["nodes"][number],
-  targetNodeId: string
-) {
-  const branches = ensureConditionBranches(normalizeNodeConfig(node.data?.config).branches ?? [])
-  return branches.find((branch) => branch.targetNodeId === targetNodeId)
-}
-
-export function createConditionBranchID(existingBranches: WorkflowConditionBranch[]) {
-  const existingIDs = new Set(existingBranches.map((branch) => branch.id))
-  for (let index = 1; index < 10000; index++) {
-    const id = `branch_${index}`
-    if (!existingIDs.has(id)) {
-      return id
-    }
-  }
-  return `branch_${Date.now()}`
-}
-
-export function getAvailableVariables(
-  definition: AIWorkflowDefinition,
-  nodeId: string,
-  nodeSpecs: AIWorkflowNodeSpec[]
-): WorkflowVariableRef[] {
-  const ancestorIds = collectAncestorNodeIds(definition, nodeId)
-  const specByType = new Map(nodeSpecs.map((spec) => [spec.type, spec]))
-  const ret: WorkflowVariableRef[] = []
-
-  for (const id of ancestorIds) {
-    const node = definition.nodes.find((item) => item.id === id)
-    if (!node) {
-      continue
-    }
-    const spec = specByType.get(node.type)
-    for (const output of spec?.outputSchema ?? []) {
-      ret.push({
-        nodeId: node.id,
-        nodeName: getNodeTitle(node, nodeSpecs),
-        field: output.name,
-        label: output.label,
-        type: output.type,
-        description: output.description || "",
-        operators: output.operators,
-        valueOptions: output.valueOptions,
-      })
-    }
-  }
-
-  return ret
-}
-
-function collectAncestorNodeIds(definition: AIWorkflowDefinition, nodeId: string): string[] {
-  const incoming = new Map<string, string[]>()
-  for (const edge of definition.edges ?? []) {
-    const list = incoming.get(edge.targetNodeID) ?? []
-    list.push(edge.sourceNodeID)
-    incoming.set(edge.targetNodeID, list)
-  }
-
-  const result: string[] = []
-  const seen = new Set<string>()
-  const visit = (id: string) => {
-    for (const source of incoming.get(id) ?? []) {
-      if (seen.has(source)) {
-        continue
-      }
-      seen.add(source)
-      visit(source)
-      result.push(source)
-    }
-  }
-  visit(nodeId)
-  return result
-}
-
-function uniqueNodeId(existingNodes: Pick<AIWorkflowDefinition["nodes"][number], "id">[], nodeType: string) {
-  const normalizedType = nodeType.replace(/[^a-zA-Z0-9_]/g, "_") || "node"
-  const existingIDs = new Set(existingNodes.map((node) => node.id))
-  for (let index = 1; index < 10000; index++) {
-    const id = `${normalizedType}_${index}`
-    if (!existingIDs.has(id)) {
-      return id
-    }
-  }
-  return `${normalizedType}_${Date.now()}`
-}
-
-function normalizeConditionBranch(value: unknown): WorkflowConditionBranch | null {
-  if (!value || typeof value !== "object" || Array.isArray(value)) {
-    return null
-  }
-  const record = value as Record<string, unknown>
-  const id = typeof record.id === "string" ? record.id : ""
-  const targetNodeId = typeof record.targetNodeId === "string" ? record.targetNodeId : ""
-  if (!id) {
-    return null
-  }
-  return {
-    id,
-    name: typeof record.name === "string" ? record.name : undefined,
-    targetNodeId,
-    default: record.default === true,
-    condition: normalizeCondition(record.condition),
-  }
-}
-
-function normalizeCondition(value: unknown): WorkflowCondition | undefined {
-  if (!value || typeof value !== "object" || Array.isArray(value)) {
-    return undefined
-  }
-  const record = value as Record<string, unknown>
-  return {
-    expression: typeof record.expression === "string" ? record.expression : undefined,
-    left: isWorkflowValue(record.left) ? record.left : undefined,
-    operator: typeof record.operator === "string" ? record.operator : undefined,
-    right: record.right,
-  }
-}
-
-function isWorkflowValue(value: unknown): value is WorkflowValue {
-  if (!value || typeof value !== "object" || Array.isArray(value)) {
-    return false
-  }
-  const type = (value as Record<string, unknown>).type
-  return type === "ref" || type === "constant" || type === "template"
-}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-workbench.tsx b/web/app/dashboard/ai-workflows/_components/workflow-workbench.tsx
index 8ecacae..20b8725 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-workbench.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-workbench.tsx
@@ -1,35 +1,373 @@
 "use client"
 
 import { useCallback, useEffect, useState } from "react"
+
 import { ArrowLeftIcon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
 
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs"
 import { Textarea } from "@/components/ui/textarea"
+import {
+  createAIWorkflow,
+  fetchAIWorkflow,
+  fetchAIWorkflowNodeSpecs,
+  fetchAIWorkflowUsage,
+  fetchAIWorkflowVersions,
+  publishAIWorkflow,
+  restoreAIWorkflowVersion,
+  updateAIWorkflow,
+  validateAIWorkflow,
+  type AIWorkflow,
+  type AIWorkflowDefinition,
+  type AIWorkflowNodeSpec,
+  type AIWorkflowUsage,
+  type AIWorkflowVersion,
+} from "@/lib/api/admin"
 import { formatDateTime } from "@/lib/utils"
-import { createAIWorkflow, fetchAIWorkflow, fetchAIWorkflowNodeSpecs, fetchAIWorkflowUsage, fetchAIWorkflowVersions, publishAIWorkflow, restoreAIWorkflowVersion, updateAIWorkflow, validateAIWorkflow, type AIWorkflow, type AIWorkflowDefinition, type AIWorkflowNodeSpec, type AIWorkflowUsage, type AIWorkflowVersion } from "@/lib/api/admin"
 
-import { WorkflowEditor } from "./workflow-editor"
+import { WorkflowEditor } from "./editor/workflow-editor"
 
-const emptyDefinition: AIWorkflowDefinition = { schemaVersion: 2, nodes: [{ id: "start_1", type: "start", meta: { position: { x: 0, y: 80 } }, data: { title: "开始", config: {}, inputsValues: {} } }, { id: "end_1", type: "end", meta: { position: { x: 260, y: 80 } }, data: { title: "结束", config: {}, inputsValues: {} } }], edges: [{ sourceNodeID: "start_1", targetNodeID: "end_1", sourcePortID: "edge_start_end" }] }
-
-export function WorkflowWorkbench({ workflowID, onClose, onSaved }: { workflowID?: number; onClose?: () => void; onSaved?: () => void }) {
-  const router = useRouter()
-  const [active, setActive] = useState<AIWorkflow | null>(null); const [nodeSpecs, setNodeSpecs] = useState<AIWorkflowNodeSpec[]>([])
-  const [name, setName] = useState(""); const [description, setDescription] = useState(""); const [definition, setDefinition] = useState<AIWorkflowDefinition>(emptyDefinition)
-  const [versions, setVersions] = useState<AIWorkflowVersion[]>([]); const [usage, setUsage] = useState<AIWorkflowUsage[]>([]); const [saving, setSaving] = useState(false); const [dirty, setDirty] = useState(false)
-  const [metadataOpen, setMetadataOpen] = useState(false); const [metadataName, setMetadataName] = useState(""); const [metadataDescription, setMetadataDescription] = useState("")
-  const load = useCallback(async () => { const specs = await fetchAIWorkflowNodeSpecs(); setNodeSpecs(specs ?? []); if (!workflowID) return; const [item, versionPage, uses] = await Promise.all([fetchAIWorkflow(workflowID), fetchAIWorkflowVersions({ workflowId: workflowID, limit: 50 }), fetchAIWorkflowUsage(workflowID)]); setActive(item); setName(item.name); setDescription(item.description); setDefinition(item.draftDefinition); setVersions(versionPage.results ?? []); setUsage(uses ?? []); setDirty(false) }, [workflowID])
-  useEffect(() => { void load().catch((error) => toast.error(error instanceof Error ? error.message : "加载工作流失败")) }, [load])
-  const openMetadata = () => { setMetadataName(name); setMetadataDescription(description); setMetadataOpen(true) }
-  const applyMetadata = () => { setName(metadataName); setDescription(metadataDescription); setDirty(true); setMetadataOpen(false) }
-  async function save() { if (!name.trim()) return toast.error("请填写工作流名称"); setSaving(true); try { if (active) { await updateAIWorkflow({ id: active.id, name: name.trim(), description: description.trim(), definition }); await load() } else { const created = await createAIWorkflow({ name: name.trim(), description: description.trim(), definition }); setActive(created); setName(created.name); setDescription(created.description); setDefinition(created.draftDefinition) }; onSaved?.(); toast.success("草稿已保存") } catch (error) { toast.error(error instanceof Error ? error.message : "保存失败") } finally { setSaving(false) } }
-  async function publish() { if (!active) return toast.error("请先保存草稿"); setSaving(true); try { const version = await publishAIWorkflow(active.id, definition); await load(); toast.success(`已发布 v${version.version}`) } catch (error) { toast.error(error instanceof Error ? error.message : "发布失败") } finally { setSaving(false) } }
-  async function restore(version: AIWorkflowVersion) { if (!active) return; try { await restoreAIWorkflowVersion(active.id, version.id); await load(); toast.success(`已将 v${version.version} 恢复为草稿`) } catch (error) { toast.error(error instanceof Error ? error.message : "恢复失败") } }
-  return <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background"><header className="shrink-0 border-b px-6 py-4"><div className="flex items-center gap-4"><Button variant="ghost" size="icon" onClick={() => router.push("/dashboard/ai-workflows")}><ArrowLeftIcon className="size-4" /></Button><div className="min-w-0 flex-1"><div className="flex items-center gap-2"><h1 className="truncate text-lg font-semibold">{name || "新建工作流"}</h1><Badge variant={active?.publishedVersionId ? "secondary" : "outline"}>{active?.publishedVersionId ? "已发布" : "草稿"}</Badge>{dirty ? <span className="text-xs text-amber-600">未保存</span> : null}</div><p className="mt-1 line-clamp-1 text-sm text-muted-foreground">{description || "暂未填写业务说明"}</p></div><div className="flex shrink-0 gap-2"><Button variant="ghost" onClick={openMetadata}>编辑信息</Button><Button variant="outline" disabled={saving} onClick={() => void validateAIWorkflow(definition).then((result) => toast[result.valid ? "success" : "error"](result.valid ? "校验通过" : `发现 ${result.errors.length} 个问题`))}>校验</Button><Button variant="outline" disabled={saving} onClick={() => void save()}>保存草稿</Button><Button disabled={saving || !active} onClick={() => void publish()}>发布版本</Button></div></div></header><Tabs defaultValue="editor" className="flex min-h-0 flex-1 flex-col"><div className="shrink-0 border-b px-6"><TabsList className="h-11 bg-transparent"><TabsTrigger value="editor">编辑画布</TabsTrigger><TabsTrigger value="versions">版本历史 ({versions.length})</TabsTrigger><TabsTrigger value="usage">使用情况 ({usage.length})</TabsTrigger></TabsList></div><TabsContent value="editor" className="min-h-0 flex-1 overflow-hidden data-[state=inactive]:hidden"><WorkflowEditor definition={definition} nodeSpecs={nodeSpecs} onDefinitionChange={(next) => { setDefinition(next); setDirty(true) }} onSaveDraft={() => void save()} onPublish={() => void publish()} saveDraftDisabled={saving} publishDisabled={saving || !active} /></TabsContent><TabsContent value="versions" className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-6">{versions.length ? versions.map((version) => <div key={version.id} className="mb-3 flex items-center gap-4 rounded-lg border p-4"><Badge>v{version.version}</Badge><div className="min-w-0 flex-1"><div className="text-sm font-medium">发布于 {formatDateTime(version.publishedAt || version.createdAt)}</div><div className="text-xs text-muted-foreground">发布人：{version.publishedByName || "-"}</div></div><Button variant="outline" size="sm" onClick={() => void restore(version)}>恢复为草稿</Button></div>) : <p className="text-sm text-muted-foreground">尚未发布版本。</p>}</TabsContent><TabsContent value="usage" className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-6">{usage.length ? usage.map((item) => <div key={`${item.aiAgentId}-${item.workflowVersionId}`} className="mb-3 flex items-center justify-between rounded-lg border p-4"><div><div className="font-medium">{item.aiAgentName}</div><div className="mt-1 text-sm text-muted-foreground">固定关联 v{item.workflowVersion}</div></div><Badge variant={item.enabled ? "secondary" : "outline"}>{item.enabled ? "启用" : "已停用"}</Badge></div>) : <p className="text-sm text-muted-foreground">暂未被任何 Agent 使用。</p>}</TabsContent></Tabs><Dialog open={metadataOpen} onOpenChange={setMetadataOpen}><DialogContent><DialogHeader><DialogTitle>编辑工作流信息</DialogTitle></DialogHeader><div className="space-y-4"><Input value={metadataName} onChange={(event) => setMetadataName(event.target.value)} placeholder="工作流名称" /><Textarea value={metadataDescription} onChange={(event) => setMetadataDescription(event.target.value)} placeholder="适用场景、目标与业务边界" /></div><DialogFooter><Button variant="outline" onClick={() => setMetadataOpen(false)}>取消</Button><Button onClick={applyMetadata}>确认</Button></DialogFooter></DialogContent></Dialog></div>
+const emptyDefinition: AIWorkflowDefinition = {
+  schemaVersion: 2,
+  nodes: [
+    {
+      id: "start_1",
+      type: "start",
+      meta: { position: { x: 0, y: 80 } },
+      data: { title: "开始", config: {}, inputsValues: {} },
+    },
+    {
+      id: "end_1",
+      type: "end",
+      meta: { position: { x: 260, y: 80 } },
+      data: { title: "结束", config: {}, inputsValues: {} },
+    },
+  ],
+  edges: [
+    {
+      sourceNodeID: "start_1",
+      targetNodeID: "end_1",
+      sourcePortID: "edge_start_end",
+    },
+  ],
+}
+
+type WorkflowWorkbenchProps = {
+  workflowID?: number
+  onClose?: () => void
+  onSaved?: () => void
+}
+
+export function WorkflowWorkbench({
+  workflowID,
+  onClose,
+  onSaved,
+}: WorkflowWorkbenchProps) {
+  const router = useRouter()
+  const [active, setActive] = useState<AIWorkflow | null>(null)
+  const [nodeSpecs, setNodeSpecs] = useState<AIWorkflowNodeSpec[]>([])
+  const [name, setName] = useState("")
+  const [description, setDescription] = useState("")
+  const [definition, setDefinition] =
+    useState<AIWorkflowDefinition>(emptyDefinition)
+  const [versions, setVersions] = useState<AIWorkflowVersion[]>([])
+  const [usage, setUsage] = useState<AIWorkflowUsage[]>([])
+  const [saving, setSaving] = useState(false)
+  const [dirty, setDirty] = useState(false)
+  const [metadataOpen, setMetadataOpen] = useState(false)
+  const [metadataName, setMetadataName] = useState("")
+  const [metadataDescription, setMetadataDescription] = useState("")
+
+  const load = useCallback(async () => {
+    const specs = await fetchAIWorkflowNodeSpecs()
+    setNodeSpecs(specs ?? [])
+    if (!workflowID) return
+
+    const [item, versionPage, uses] = await Promise.all([
+      fetchAIWorkflow(workflowID),
+      fetchAIWorkflowVersions({ workflowId: workflowID, limit: 50 }),
+      fetchAIWorkflowUsage(workflowID),
+    ])
+    setActive(item)
+    setName(item.name)
+    setDescription(item.description)
+    setDefinition(item.draftDefinition)
+    setVersions(versionPage.results ?? [])
+    setUsage(uses ?? [])
+    setDirty(false)
+  }, [workflowID])
+
+  useEffect(() => {
+    void load().catch((error) =>
+      toast.error(error instanceof Error ? error.message : "加载工作流失败")
+    )
+  }, [load])
+
+  function openMetadata() {
+    setMetadataName(name)
+    setMetadataDescription(description)
+    setMetadataOpen(true)
+  }
+
+  function applyMetadata() {
+    setName(metadataName)
+    setDescription(metadataDescription)
+    setDirty(true)
+    setMetadataOpen(false)
+  }
+
+  async function save() {
+    if (!name.trim()) {
+      toast.error("请填写工作流名称")
+      return
+    }
+    setSaving(true)
+    try {
+      if (active) {
+        await updateAIWorkflow({
+          id: active.id,
+          name: name.trim(),
+          description: description.trim(),
+          definition,
+        })
+        await load()
+      } else {
+        const created = await createAIWorkflow({
+          name: name.trim(),
+          description: description.trim(),
+          definition,
+        })
+        setActive(created)
+        setName(created.name)
+        setDescription(created.description)
+        setDefinition(created.draftDefinition)
+        setDirty(false)
+      }
+      onSaved?.()
+      toast.success("草稿已保存")
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "保存失败")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function publish() {
+    if (!active) {
+      toast.error("请先保存草稿")
+      return
+    }
+    setSaving(true)
+    try {
+      const version = await publishAIWorkflow(active.id, definition)
+      await load()
+      toast.success(`已发布 v${version.version}`)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "发布失败")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function restore(version: AIWorkflowVersion) {
+    if (!active) return
+    try {
+      await restoreAIWorkflowVersion(active.id, version.id)
+      await load()
+      toast.success(`已将 v${version.version} 恢复为草稿`)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "恢复失败")
+    }
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
+      <header className="shrink-0 border-b px-6 py-4">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              onClose ? onClose() : router.push("/dashboard/ai-workflows")
+            }
+          >
+            <ArrowLeftIcon className="size-4" />
+          </Button>
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <h1 className="truncate text-lg font-semibold">
+                {name || "新建工作流"}
+              </h1>
+              <Badge
+                variant={active?.publishedVersionId ? "secondary" : "outline"}
+              >
+                {active?.publishedVersionId ? "已发布" : "草稿"}
+              </Badge>
+              {dirty ? (
+                <span className="text-xs text-amber-600">未保存</span>
+              ) : null}
+            </div>
+            <p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
+              {description || "暂未填写业务说明"}
+            </p>
+          </div>
+          <div className="flex shrink-0 gap-2">
+            <Button variant="ghost" onClick={openMetadata}>
+              编辑信息
+            </Button>
+            <Button
+              variant="outline"
+              disabled={saving}
+              onClick={() => void save()}
+            >
+              保存草稿
+            </Button>
+            <Button
+              disabled={saving || !active}
+              onClick={() => void publish()}
+            >
+              发布版本
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <Tabs defaultValue="editor" className="flex min-h-0 flex-1 flex-col">
+        <div className="shrink-0 border-b px-6">
+          <TabsList className="h-11 bg-transparent">
+            <TabsTrigger value="editor">编辑画布</TabsTrigger>
+            <TabsTrigger value="versions">
+              版本历史 ({versions.length})
+            </TabsTrigger>
+            <TabsTrigger value="usage">使用情况 ({usage.length})</TabsTrigger>
+          </TabsList>
+        </div>
+
+        <TabsContent
+          value="editor"
+          className="min-h-0 flex-1 overflow-hidden data-[state=inactive]:hidden"
+        >
+          {nodeSpecs.length ? (
+            <WorkflowEditor
+              definition={definition}
+              nodeSpecs={nodeSpecs}
+              onDefinitionChange={(next) => {
+                setDefinition(next)
+                setDirty(true)
+              }}
+              onValidate={() => validateAIWorkflow(definition)}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+              正在加载节点能力…
+            </div>
+          )}
+        </TabsContent>
+
+        <TabsContent
+          value="versions"
+          className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-6"
+        >
+          {versions.length ? (
+            versions.map((version) => (
+              <div
+                key={version.id}
+                className="mb-3 flex items-center gap-4 rounded-lg border p-4"
+              >
+                <Badge>v{version.version}</Badge>
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium">
+                    发布于{" "}
+                    {formatDateTime(version.publishedAt || version.createdAt)}
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    发布人：{version.publishedByName || "-"}
+                  </div>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => void restore(version)}
+                >
+                  恢复为草稿
+                </Button>
+              </div>
+            ))
+          ) : (
+            <p className="text-sm text-muted-foreground">尚未发布版本。</p>
+          )}
+        </TabsContent>
+
+        <TabsContent
+          value="usage"
+          className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-6"
+        >
+          {usage.length ? (
+            usage.map((item) => (
+              <div
+                key={`${item.aiAgentId}-${item.workflowVersionId}`}
+                className="mb-3 flex items-center justify-between rounded-lg border p-4"
+              >
+                <div>
+                  <div className="font-medium">{item.aiAgentName}</div>
+                  <div className="mt-1 text-sm text-muted-foreground">
+                    固定关联 v{item.workflowVersion}
+                  </div>
+                </div>
+                <Badge variant={item.enabled ? "secondary" : "outline"}>
+                  {item.enabled ? "启用" : "已停用"}
+                </Badge>
+              </div>
+            ))
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              暂未被任何 Agent 使用。
+            </p>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      <Dialog open={metadataOpen} onOpenChange={setMetadataOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>编辑工作流信息</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <Input
+              value={metadataName}
+              onChange={(event) => setMetadataName(event.target.value)}
+              placeholder="工作流名称"
+            />
+            <Textarea
+              value={metadataDescription}
+              onChange={(event) => setMetadataDescription(event.target.value)}
+              placeholder="适用场景、目标与业务边界"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setMetadataOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={applyMetadata}>确认</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
 }
diff --git a/web/app/globals.css b/web/app/globals.css
index b2751d2..c3f4cb5 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -366,15 +366,3 @@
     @apply font-sans;
   }
 }
-
-.workflow-node-port:hover .bg:not(.hasError),
-.workflow-node-port.hovered .bg:not(.hasError) {
-  cursor: crosshair;
-  transform: scale(1, 1) !important;
-  background: #2575fc !important;
-}
-
-.workflow-node-port:hover .bg > .symbol,
-.workflow-node-port.hovered .bg > .symbol {
-  opacity: 1 !important;
-}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 130fa8b..2287cd1 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -10,6 +10,7 @@ import { Toaster } from "@/components/ui/sonner"
 import { AppI18nProvider } from "@/i18n/provider"
 
 import "@/app/globals.css"
+import "@flowgram.ai/free-layout-editor/index.css"
 import "md-editor-rt/lib/style.css"
 import "@/styles/main.scss"
 
diff --git a/web/lib/api/admin.ts b/web/lib/api/admin.ts
index 4a94835..aac65f0 100644
--- a/web/lib/api/admin.ts
+++ b/web/lib/api/admin.ts
@@ -375,7 +375,17 @@ export type AIWorkflowVariableSpec = {
 
 export type AIWorkflowDefinition = {
   schemaVersion: number
-  nodes: {
+  nodes: AIWorkflowCanvasNode[]
+  annotations?: AIWorkflowCanvasNode[]
+  edges: {
+    sourceNodeID: string
+    targetNodeID: string
+    sourcePortID?: string
+    targetPortID?: string
+  }[]
+}
+
+export type AIWorkflowCanvasNode = {
     id: string
     type: string
     meta: {
@@ -389,13 +399,6 @@ export type AIWorkflowDefinition = {
       inputsValues?: Record<string, AIWorkflowValue>
       [key: string]: unknown
     }
-  }[]
-  edges: {
-    sourceNodeID: string
-    targetNodeID: string
-    sourcePortID?: string
-    targetPortID?: string
-  }[]
 }
 
 export type AIWorkflow = {
diff --git a/web/package.json b/web/package.json
index 20d32bc..1bf8a30 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,10 +16,15 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@flowgram.ai/export-plugin": "1.0.11",
+    "@flowgram.ai/free-auto-layout-plugin": "1.0.11",
     "@flowgram.ai/free-layout-editor": "1.0.11",
     "@flowgram.ai/free-lines-plugin": "1.0.11",
+    "@flowgram.ai/free-node-panel-plugin": "1.0.11",
     "@flowgram.ai/free-snap-plugin": "1.0.11",
+    "@flowgram.ai/free-stack-plugin": "1.0.11",
     "@flowgram.ai/minimap-plugin": "1.0.11",
+    "@flowgram.ai/panel-manager-plugin": "1.0.11",
     "@hookform/resolvers": "^5.2.2",
     "@tanstack/react-table": "^8.21.3",
     "@tiptap/extension-image": "^3.20.2",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index ea4cb3c..59ad266 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -23,18 +23,33 @@ importers:
       '@dnd-kit/utilities':
         specifier: ^3.2.2
         version: 3.2.2(react@19.2.3)
+      '@flowgram.ai/export-plugin':
+        specifier: 1.0.11
+        version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/free-auto-layout-plugin':
+        specifier: 1.0.11
+        version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
       '@flowgram.ai/free-layout-editor':
         specifier: 1.0.11
         version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
       '@flowgram.ai/free-lines-plugin':
         specifier: 1.0.11
         version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
+      '@flowgram.ai/free-node-panel-plugin':
+        specifier: 1.0.11
+        version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@flowgram.ai/free-snap-plugin':
         specifier: 1.0.11
         version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
+      '@flowgram.ai/free-stack-plugin':
+        specifier: 1.0.11
+        version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
       '@flowgram.ai/minimap-plugin':
         specifier: 1.0.11
         version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/panel-manager-plugin':
+        specifier: 1.0.11
+        version: 1.0.11(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(reflect-metadata@0.2.2)
       '@hookform/resolvers':
         specifier: ^5.2.2
         version: 5.2.2(react-hook-form@7.71.2(react@19.2.3))
@@ -572,6 +587,12 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
+  '@flowgram.ai/export-plugin@1.0.11':
+    resolution: {integrity: sha512-drJley1YMVqANTcl+n/TDvxa75F07z7u1jme/Y1H8P1h9aOAhem+q1oJZgw7WSAK7eG7Sy1qxNb6yeqaKlzz6g==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   '@flowgram.ai/form-core@1.0.11':
     resolution: {integrity: sha512-qucie8ekXkfJbXMvPSUGR1CZufBZ1qqHbYNITZhxwR3X54MF7vieFD/6fb7H7jic2z5ad4aCOJcIDe5uD0hQjg==}
     peerDependencies:
@@ -622,6 +643,12 @@ packages:
       react-dom: '>=16.8'
       styled-components: '>=5'
 
+  '@flowgram.ai/free-node-panel-plugin@1.0.11':
+    resolution: {integrity: sha512-1XqzHZhimJLK6G3zUhHUKBHgLlnWNRmWYmpCci0e9yKzOBduS6xZTfMSgc7bl5TeaG9u++nooTqirx6xP5kwXQ==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   '@flowgram.ai/free-snap-plugin@1.0.11':
     resolution: {integrity: sha512-6YPtxwIYkUgj2BBBQgJvIPeSgDZQJpHSDl9r6FyJyalAdQKHeKniCBAR8b3tgaQf/oKR1v/8zt01h+IzMFhodQ==}
     peerDependencies:
@@ -681,6 +708,15 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
+  '@flowgram.ai/panel-manager-plugin@1.0.11':
+    resolution: {integrity: sha512-piax49+HwMiU+zHT5L8ttQ7O64gqJSpvlHXt68jrVDMlExMPX62R89imvTSuFDyPVjOGjoqsVaRFb8cUlNtbtw==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    peerDependenciesMeta:
+      react:
+        optional: true
+
   '@flowgram.ai/playground-react@1.0.11':
     resolution: {integrity: sha512-4NORKKYGoH2lyRzf7VW2NFlaHZbE1dpXVAi1ehr27g4L24TUxJCWVRWi8vrCph9hrlucs86Iw1SAFOVP1dnsSQ==}
     peerDependencies:
@@ -3407,6 +3443,9 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  modern-screenshot@4.6.7:
+    resolution: {integrity: sha512-0GhgI6i6le4AhKzCvLYjwEmsP47kTsX45iT5yuAzsLTi/7i3Rjxe8fbH2VjGJLuyOThwsa0CdQAPd4auoEtsZg==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -4460,6 +4499,21 @@ packages:
   zod@4.3.6:
     resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
   zustand@5.0.12:
     resolution: {integrity: sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==}
     engines: {node: '>=12.20.0'}
@@ -5153,6 +5207,20 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       reflect-metadata: 0.2.2
 
+  '@flowgram.ai/export-plugin@1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@flowgram.ai/core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/document': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/utils': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      inversify: 6.2.2(reflect-metadata@0.2.2)
+      js-yaml: 4.1.1
+      lodash-es: 4.18.1
+      modern-screenshot: 4.6.7
+      nanoid: 5.1.16
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      reflect-metadata: 0.2.2
+
   '@flowgram.ai/form-core@1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@flowgram.ai/core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -5263,6 +5331,18 @@ snapshots:
       reflect-metadata: 0.2.2
       styled-components: 6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
 
+  '@flowgram.ai/free-node-panel-plugin@1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@flowgram.ai/core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/document': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/free-history-plugin': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/free-layout-core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/utils': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      inversify: 6.2.2(reflect-metadata@0.2.2)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      reflect-metadata: 0.2.2
+
   '@flowgram.ai/free-snap-plugin@1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))':
     dependencies:
       '@flowgram.ai/core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -5388,6 +5468,23 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       reflect-metadata: 0.2.2
 
+  '@flowgram.ai/panel-manager-plugin@1.0.11(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(reflect-metadata@0.2.2)':
+    dependencies:
+      '@flowgram.ai/core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@flowgram.ai/utils': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      clsx: 1.2.1
+      inversify: 6.2.2(reflect-metadata@0.2.2)
+      nanoid: 5.1.16
+      react-dom: 19.2.3(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
+      zustand: 4.5.7(@types/react@19.2.14)(react@19.2.3)
+    optionalDependencies:
+      react: 19.2.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+      - reflect-metadata
+
   '@flowgram.ai/playground-react@1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@flowgram.ai/background-plugin': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -8145,6 +8242,8 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  modern-screenshot@4.6.7: {}
+
   ms@2.1.3: {}
 
   msw@2.12.10(@types/node@20.19.37)(typescript@5.9.3):
@@ -9423,6 +9522,13 @@ snapshots:
 
   zod@4.3.6: {}
 
+  zustand@4.5.7(@types/react@19.2.14)(react@19.2.3):
+    dependencies:
+      use-sync-external-store: 1.6.0(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      react: 19.2.3
+
   zustand@5.0.12(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)):
     optionalDependencies:
       '@types/react': 19.2.14