From 02fcf33067e80ed450bc6e660346a350f9a00be2 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Sat, 17 Jan 2026 21:47:31 +0800
Subject: [PATCH] fix(skill-editor): remove unnecessary store subscriptions in
 tool-picker-block

Move activeTabId and fileMetadata reads from selector subscriptions to
getState() calls inside the callback. These values were only used in the
insertTools callback, not for rendering, causing unnecessary re-renders
when they changed.
---
 .../plugins/tool-block/tool-picker-block.tsx    | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-picker-block.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-picker-block.tsx
index 4da5b85917..5dfd59b111 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-picker-block.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-picker-block.tsx
@@ -17,7 +17,7 @@ import { $splitNodeContainingQuery } from '@/app/components/base/prompt-editor/u
 import { CollectionType } from '@/app/components/tools/types'
 import { toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
-import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
+import { useWorkflowStore } from '@/app/components/workflow/store'
 import { $createToolBlockNode } from './node'
 
 class ToolPickerMenuOption extends MenuOption {
@@ -36,8 +36,6 @@ const ToolPickerBlock: FC<ToolPickerBlockProps> = ({ scope = 'all' }) => {
     minLength: 0,
     maxLength: 0,
   })
-  const activeTabId = useStore(s => s.activeTabId)
-  const fileMetadata = useStore(s => s.fileMetadata)
   const storeApi = useWorkflowStore()
 
   const options = useMemo(() => [new ToolPickerMenuOption()], [])
@@ -73,11 +71,10 @@ const ToolPickerBlock: FC<ToolPickerBlockProps> = ({ scope = 'all' }) => {
         $insertNodes(nodes)
     })
 
-    const storeState = storeApi.getState()
-    const resolvedTabId = activeTabId || storeState.activeTabId
-    if (!resolvedTabId)
+    const { activeTabId, fileMetadata, setDraftMetadata, pinTab } = storeApi.getState()
+    if (!activeTabId)
       return
-    const metadata = (storeState.fileMetadata.get(resolvedTabId) || {}) as Record<string, any>
+    const metadata = (fileMetadata.get(activeTabId) || {}) as Record<string, any>
     const nextTools = { ...(metadata.tools || {}) } as Record<string, any>
     toolEntries.forEach(({ configId, tool }) => {
       const schemas = toolParametersToFormSchemas((tool.paramSchemas || []) as ToolParameter[])
@@ -91,12 +88,12 @@ const ToolPickerBlock: FC<ToolPickerBlockProps> = ({ scope = 'all' }) => {
         configuration: { fields },
       }
     })
-    storeState.setDraftMetadata(resolvedTabId, {
+    setDraftMetadata(activeTabId, {
       ...metadata,
       tools: nextTools,
     })
-    storeState.pinTab(resolvedTabId)
-  }, [activeTabId, checkForTriggerMatch, editor, fileMetadata, storeApi])
+    pinTab(activeTabId)
+  }, [checkForTriggerMatch, editor, storeApi])
 
   const renderMenu = useCallback((
     anchorElementRef: React.RefObject<HTMLElement | null>,