feat: Added search functionality in the tracking panel, supporting deep search and filtering of node content.

web/app/components/workflow/panel/workflow-preview.tsx

@@ -204,6 +204,7 @@ const WorkflowPreview = () => {
             <TracingPanel
               className='bg-background-section-burn'
               list={workflowRunningData?.tracing || []}
+              enableSearch={true}
             />
           )}
           {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (

web/app/components/workflow/run/index.tsx

@@ -162,6 +162,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
           <TracingPanel
             className='bg-background-section-burn'
             list={list}
+            enableSearch={true}
           />
         )}
       </div>

web/app/components/workflow/run/tracing-panel.tsx

@@ -4,12 +4,15 @@ import
 React,
 {
   useCallback,
+  useMemo,
   useState,
 } from 'react'
 import cn from 'classnames'
 import {
   RiArrowDownSLine,
+  RiCloseLine,
   RiMenu4Line,
+  RiSearchLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useLogs } from './hooks'
@@ -23,6 +26,7 @@ type TracingPanelProps = {
   className?: string
   hideNodeInfo?: boolean
   hideNodeProcessDetail?: boolean
+  enableSearch?: boolean
 }
 
 const TracingPanel: FC<TracingPanelProps> = ({
@@ -30,9 +34,96 @@ const TracingPanel: FC<TracingPanelProps> = ({
   className,
   hideNodeInfo = false,
   hideNodeProcessDetail = false,
+  enableSearch = false,
 }) => {
   const { t } = useTranslation()
+  const [searchQuery, setSearchQuery] = useState('')
+
   const treeNodes = formatNodeList(list, t)
+
+  // 递归计算节点总数（包括子节点）
+  const countNodesRecursively = useCallback((nodes: any[]): number => {
+    return nodes.reduce((count, node) => {
+      let nodeCount = 1
+      if (node.parallelDetail?.children)
+        nodeCount += countNodesRecursively(node.parallelDetail.children)
+      return count + nodeCount
+    }, 0)
+  }, [])
+
+  // 深度递归搜索过滤逻辑
+  const filteredNodes = useMemo(() => {
+    if (!searchQuery.trim()) return treeNodes
+
+    const query = searchQuery.toLowerCase().trim()
+
+    // 深度搜索对象内容
+    const searchInObject = (obj: any): boolean => {
+      if (!obj) return false
+      if (typeof obj === 'string') return obj.toLowerCase().includes(query)
+      if (typeof obj === 'number') return obj.toString().includes(query)
+      if (Array.isArray(obj)) return obj.some(item => searchInObject(item))
+      if (typeof obj === 'object')
+        return Object.values(obj).some(value => searchInObject(value))
+      return false
+    }
+
+    // 搜索单个节点的所有内容
+    const searchInNode = (node: any): boolean => {
+      return (
+        node.title?.toLowerCase().includes(query)
+        || node.node_type?.toLowerCase().includes(query)
+        || node.status?.toLowerCase().includes(query)
+        || searchInObject(node.inputs)
+        || searchInObject(node.outputs)
+        || searchInObject(node.process_data)
+        || searchInObject(node.execution_metadata)
+      )
+    }
+
+    // 递归搜索节点及其所有子节点
+    const searchNodeRecursively = (node: any): boolean => {
+      // 搜索当前节点
+      if (searchInNode(node)) return true
+
+      // 搜索并行分支子节点
+      if (node.parallelDetail?.children)
+        return node.parallelDetail.children.some((child: any) => searchNodeRecursively(child))
+
+      return false
+    }
+
+    // 递归过滤节点树，保持层级结构
+    const filterNodesRecursively = (nodes: any[]): any[] => {
+      return nodes.reduce((acc: any[], node: any) => {
+        const nodeMatches = searchInNode(node)
+        const hasMatchingChildren = node.parallelDetail?.children
+          ? node.parallelDetail.children.some((child: any) => searchNodeRecursively(child))
+          : false
+
+        if (nodeMatches || hasMatchingChildren) {
+          const filteredNode = { ...node }
+
+          // 如果有并行子节点，递归过滤它们
+          if (node.parallelDetail?.children) {
+            const filteredChildren = filterNodesRecursively(node.parallelDetail.children)
+            if (filteredChildren.length > 0) {
+              filteredNode.parallelDetail = {
+                ...node.parallelDetail,
+                children: filteredChildren,
+              }
+            }
+          }
+
+          acc.push(filteredNode)
+        }
+
+        return acc
+      }, [])
+    }
+
+    return filterNodesRecursively(treeNodes)
+  }, [treeNodes, searchQuery])
   const [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set())
   const [hoveredParallel, setHoveredParallel] = useState<string | null>(null)
 
@@ -185,13 +276,62 @@ const TracingPanel: FC<TracingPanelProps> = ({
 
   return (
     <div
-      className={cn('py-2', className)}
+      className={cn('flex h-full flex-col', className)}
       onClick={(e) => {
         e.stopPropagation()
         e.nativeEvent.stopImmediatePropagation()
       }}
     >
-      {treeNodes.map(renderNode)}
+      {/* 搜索框 */}
+      {enableSearch && (
+        <div className="border-b border-divider-subtle px-4 py-3">
+          <div className="flex h-8 items-center rounded-lg bg-components-input-bg-normal px-2 hover:bg-components-input-bg-hover">
+            <RiSearchLine className="mr-1.5 h-4 w-4 shrink-0 text-components-input-text-placeholder" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+              placeholder={t('workflow.common.searchNodes') || 'Search nodes, types, inputs, outputs...'}
+              className="system-sm-regular block h-[18px] grow appearance-none border-0 bg-transparent text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder"
+              autoComplete="off"
+            />
+            {searchQuery && (
+              <div className="ml-1 cursor-pointer" onClick={() => setSearchQuery('')}>
+                <RiCloseLine className="h-4 w-4 text-components-input-text-placeholder hover:text-text-tertiary" />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 搜索结果统计 */}
+      {enableSearch && searchQuery && (
+        <div className="border-b border-divider-subtle px-4 py-2">
+          <div className="system-xs-regular text-text-tertiary">
+            {filteredNodes.length === 0
+              ? t('workflow.common.noSearchResults')
+              : t('workflow.common.searchResults', {
+                matched: countNodesRecursively(filteredNodes),
+                total: countNodesRecursively(treeNodes),
+              })}
+          </div>
+        </div>
+      )}
+
+      {/* 无搜索结果提示 */}
+      {enableSearch && searchQuery && filteredNodes.length === 0 && (
+        <div className="flex flex-1 flex-col items-center justify-center text-text-tertiary">
+          <div className="system-sm-medium mb-2">{t('workflow.common.noSearchResults')}</div>
+          <div className="system-xs-regular">
+            {t('workflow.common.searchHint', { query: searchQuery })}
+          </div>
+        </div>
+      )}
+
+      {/* 追踪内容 */}
+      <div className={cn('flex-1 overflow-y-auto py-2', { 'py-0': enableSearch })}>
+        {filteredNodes.length > 0 && filteredNodes.map(renderNode)}
+      </div>
     </div>
   )
 }

web/i18n/de-DE/workflow.ts

@@ -40,6 +40,10 @@ const translation = {
     maxTreeDepth: 'Maximales Limit von {{depth}} Knoten pro Ast',
     workflowProcess: 'Arbeitsablauf',
     notRunning: 'Noch nicht ausgeführt',
+    searchNodes: 'Knoten, Typen, Eingaben, Ausgaben suchen...',
+    noSearchResults: 'Keine Suchergebnisse',
+    searchResults: '{{matched}} von {{total}} Knoten',
+    searchHint: 'Versuchen Sie andere Schlüsselwörter für "{{query}}"',
     previewPlaceholder: 'Geben Sie den Inhalt in das Feld unten ein, um das Debuggen des Chatbots zu starten',
     effectVarConfirm: {
       title: 'Variable entfernen',

web/i18n/en-US/workflow.ts

@@ -50,6 +50,10 @@ const translation = {
     needAnswerNode: 'The Answer node must be added',
     workflowProcess: 'Workflow Process',
     notRunning: 'Not running yet',
+    searchNodes: 'Search nodes, types, inputs, outputs...',
+    noSearchResults: 'No search results',
+    searchResults: '{{matched}} of {{total}} nodes',
+    searchHint: 'Try different keywords for "{{query}}"',
     previewPlaceholder: 'Enter content in the box below to start debugging the Chatbot',
     effectVarConfirm: {
       title: 'Remove Variable',

web/i18n/es-ES/workflow.ts

@@ -40,6 +40,10 @@ const translation = {
     maxTreeDepth: 'Límite máximo de {{depth}} nodos por rama',
     workflowProcess: 'Proceso de flujo de trabajo',
     notRunning: 'Aún no se está ejecutando',
+    searchNodes: 'Buscar nodos, tipos, entradas, salidas...',
+    noSearchResults: 'Sin resultados de búsqueda',
+    searchResults: '{{matched}} de {{total}} nodos',
+    searchHint: 'Prueba con diferentes palabras clave para "{{query}}"',
     previewPlaceholder: 'Ingrese contenido en el cuadro de abajo para comenzar a depurar el Chatbot',
     effectVarConfirm: {
       title: 'Eliminar variable',

web/i18n/fr-FR/workflow.ts

@@ -40,6 +40,10 @@ const translation = {
     maxTreeDepth: 'Limite maximale de {{depth}} nœuds par branche',
     workflowProcess: 'Processus de flux de travail',
     notRunning: 'Pas encore en cours d\'exécution',
+    searchNodes: 'Rechercher nœuds, types, entrées, sorties...',
+    noSearchResults: 'Aucun résultat de recherche',
+    searchResults: '{{matched}} sur {{total}} nœuds',
+    searchHint: 'Essayez des mots-clés différents pour "{{query}}"',
     previewPlaceholder: 'Entrez le contenu dans la boîte ci-dessous pour commencer à déboguer le Chatbot',
     effectVarConfirm: {
       title: 'Supprimer la variable',

web/i18n/ja-JP/workflow.ts

@@ -50,6 +50,10 @@ const translation = {
     needAnswerNode: '回答ブロックを追加する必要があります',
     workflowProcess: 'ワークフロー処理',
     notRunning: 'まだ実行されていません',
+    searchNodes: 'ノード、タイプ、入力、出力を検索...',
+    noSearchResults: '検索結果がありません',
+    searchResults: '{{total}}件中{{matched}}件のノード',
+    searchHint: '"{{query}}"について別のキーワードを試してください',
     previewPlaceholder: '入力欄にテキストを入力してチャットボットのデバッグを開始',
     effectVarConfirm: {
       title: '変数の削除',

web/i18n/ko-KR/workflow.ts

@@ -40,6 +40,10 @@ const translation = {
     maxTreeDepth: '분기당 최대 {{depth}} 노드 제한',
     workflowProcess: '워크플로우 과정',
     notRunning: '아직 실행되지 않음',
+    searchNodes: '노드, 유형, 입력, 출력 검색...',
+    noSearchResults: '검색 결과 없음',
+    searchResults: '{{total}}개 중 {{matched}}개 노드',
+    searchHint: '"{{query}}"에 대해 다른 키워드를 시도해 보세요',
     previewPlaceholder: '디버깅을 시작하려면 아래 상자에 내용을 입력하세요',
     effectVarConfirm: {
       title: '변수 제거',

web/i18n/ru-RU/workflow.ts

@@ -40,6 +40,10 @@ const translation = {
     maxTreeDepth: 'Максимальный предел {{depth}} узлов на ветку',
     workflowProcess: 'Процесс рабочего процесса',
     notRunning: 'Еще не запущено',
+    searchNodes: 'Поиск узлов, типов, входов, выходов...',
+    noSearchResults: 'Нет результатов поиска',
+    searchResults: '{{matched}} из {{total}} узлов',
+    searchHint: 'Попробуйте другие ключевые слова для "{{query}}"',
     previewPlaceholder: 'Введите текст в поле ниже, чтобы начать отладку чат-бота',
     effectVarConfirm: {
       title: 'Удалить переменную',

web/i18n/zh-Hans/workflow.ts

@@ -49,6 +49,10 @@ const translation = {
     needAnswerNode: '必须添加直接回复节点',
     workflowProcess: '工作流',
     notRunning: '尚未运行',
+    searchNodes: '搜索节点、类型、输入、输出...',
+    noSearchResults: '无搜索结果',
+    searchResults: '{{matched}} / {{total}} 个节点',
+    searchHint: '尝试使用不同的关键词搜索 "{{query}}"',
     previewPlaceholder: '在下面的框中输入内容开始调试聊天机器人',
     effectVarConfirm: {
       title: '移除变量',

web/i18n/zh-Hant/workflow.ts

@@ -42,6 +42,10 @@ const translation = {
     needAnswerNode: '必須添加直接回覆節點',
     workflowProcess: '工作流',
     notRunning: '尚未運行',
+    searchNodes: '搜索節點、類型、輸入、輸出...',
+    noSearchResults: '無搜索結果',
+    searchResults: '{{matched}} / {{total}} 個節點',
+    searchHint: '嘗試使用不同的關鍵詞搜索 "{{query}}"',
     previewPlaceholder: '在下面的框中輸入內容開始調試聊天機器人',
     effectVarConfirm: {
       title: '移除變量',