chore: optimize code quality and performance

web/app/components/workflow/skill/file-tree/tree-guide-lines.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as React from 'react'
+import { useMemo } from 'react'
 
 type TreeGuideLinesProps = {
   level: number
@@ -16,20 +17,20 @@ const TreeGuideLines: React.FC<TreeGuideLinesProps> = ({
   indentSize = INDENT_SIZE,
   lineOffset = DEFAULT_LINE_OFFSET,
 }) => {
-  if (level === 0)
-    return null
+  const guides = useMemo(() => {
+    if (level === 0)
+      return null
 
-  return (
-    <>
-      {Array.from({ length: level }).map((_, i) => (
-        <div
-          key={`guide-${i}`}
-          className="absolute bottom-0 top-0 border-l border-divider-subtle"
-          style={{ left: `${(i + 1) * indentSize - lineOffset}px` }}
-        />
-      ))}
-    </>
-  )
+    return Array.from({ length: level }, (_, i) => (
+      <div
+        key={`guide-${i}`}
+        className="absolute bottom-0 top-0 border-l border-divider-subtle"
+        style={{ left: `${(i + 1) * indentSize - lineOffset}px` }}
+      />
+    ))
+  }, [level, indentSize, lineOffset])
+
+  return guides
 }
 
 export default React.memo(TreeGuideLines)