refact workflow run log

2024-12-26 14:40:42 +08:00 · 2024-12-26 14:40:42 +08:00 · 6f865b96a2
commit 6f865b96a2
parent b7e56a23a0
8 changed files with 177 additions and 301 deletions
--- a/web/app/components/workflow/nodes/iteration/panel.tsx
+++ b/web/app/components/workflow/nodes/iteration/panel.tsx
@ -53,7 +53,6 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
    isShowIterationDetail,
    backToSingleRun,
    showIterationDetail,
-    hideIterationDetail,
    runningStatus,
    handleRun,
    handleStop,
@ -181,7 +180,6 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
      {isShowIterationDetail && (
        <IterationResultPanel
          onBack={backToSingleRun}
-          onHide={hideIterationDetail}
          list={iterationRunResult}
        />
      )}
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@ -1,8 +1,6 @@
 import {
  memo,
-  useCallback,
  useEffect,
-  // useRef,
  useState,
 } from 'react'
 import {
@ -11,7 +9,6 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import copy from 'copy-to-clipboard'
-import { useBoolean } from 'ahooks'
 import ResultText from '../run/result-text'
 import ResultPanel from '../run/result-panel'
 import TracingPanel from '../run/tracing-panel'
@ -24,12 +21,9 @@ import {
 } from '../types'
 import { SimpleBtn } from '../../app/text-generate/item'
 import Toast from '../../base/toast'
-import { IterationResultPanel } from '../run/iteration-log'
-import { RetryResultPanel } from '../run/retry-log'
 import InputsPanel from './inputs-panel'
 import cn from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
-import type { IterationDurationMap, NodeTracing } from '@/types/workflow'

 const WorkflowPreview = () => {
  const { t } = useTranslation()
@ -53,44 +47,6 @@ const WorkflowPreview = () => {
      switchTab('DETAIL')
  }, [workflowRunningData])

-  const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
-  const [retryRunResult, setRetryRunResult] = useState<NodeTracing[]>([])
-  const [iterDurationMap, setIterDurationMap] = useState<IterationDurationMap>({})
-  const [isShowIterationDetail, {
-    setTrue: doShowIterationDetail,
-    setFalse: doHideIterationDetail,
-  }] = useBoolean(false)
-  const [isShowRetryDetail, {
-    setTrue: doShowRetryDetail,
-    setFalse: doHideRetryDetail,
-  }] = useBoolean(false)
-
-  const handleShowIterationDetail = useCallback((detail: NodeTracing[][], iterationDurationMap: IterationDurationMap) => {
-    setIterDurationMap(iterationDurationMap)
-    setIterationRunResult(detail)
-    doShowIterationDetail()
-  }, [doShowIterationDetail])
-
-  const handleRetryDetail = useCallback((detail: NodeTracing[]) => {
-    setRetryRunResult(detail)
-    doShowRetryDetail()
-  }, [doShowRetryDetail])
-
-  if (isShowIterationDetail) {
-    return (
-      <div className={`
-      flex flex-col w-[420px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
-    `}>
-        <IterationResultPanel
-          list={iterationRunResult}
-          onHide={doHideIterationDetail}
-          onBack={doHideIterationDetail}
-          iterDurationMap={iterDurationMap}
-        />
-      </div>
-    )
-  }
-
  return (
    <div className={`
      flex flex-col w-[420px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
@ -102,141 +58,117 @@ const WorkflowPreview = () => {
        </div>
      </div>
      <div className='grow relative flex flex-col'>
-        {isShowIterationDetail
-          ? (
-            <IterationResultPanel
-              list={iterationRunResult}
-              onHide={doHideIterationDetail}
-              onBack={doHideIterationDetail}
-              iterDurationMap={iterDurationMap}
-            />
-          )
-          : (
+        <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
+          {showInputsPanel && (
+            <div
+              className={cn(
+                'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+                currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-gray-700',
+              )}
+              onClick={() => switchTab('INPUT')}
+            >{t('runLog.input')}</div>
+          )}
+          <div
+            className={cn(
+              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
+              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+            )}
+            onClick={() => {
+              if (!workflowRunningData)
+                return
+              switchTab('RESULT')
+            }}
+          >{t('runLog.result')}</div>
+          <div
+            className={cn(
+              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
+              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+            )}
+            onClick={() => {
+              if (!workflowRunningData)
+                return
+              switchTab('DETAIL')
+            }}
+          >{t('runLog.detail')}</div>
+          <div
+            className={cn(
+              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
+              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+            )}
+            onClick={() => {
+              if (!workflowRunningData)
+                return
+              switchTab('TRACING')
+            }}
+          >{t('runLog.tracing')}</div>
+        </div>
+        <div className={cn(
+          'grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl',
+          (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-background-section-burn',
+        )}>
+          {currentTab === 'INPUT' && showInputsPanel && (
+            <InputsPanel onRun={() => switchTab('RESULT')} />
+          )}
+          {currentTab === 'RESULT' && (
            <>
-              <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
-                {showInputsPanel && (
-                  <div
-                    className={cn(
-                      'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-                      currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-gray-700',
-                    )}
-                    onClick={() => switchTab('INPUT')}
-                  >{t('runLog.input')}</div>
-                )}
-                <div
-                  className={cn(
-                    'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-                    currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
-                    !workflowRunningData && 'opacity-30 !cursor-not-allowed',
-                  )}
+              <ResultText
+                isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
+                outputs={workflowRunningData?.resultText}
+                allFiles={workflowRunningData?.result?.files as any}
+                error={workflowRunningData?.result?.error}
+                onClick={() => switchTab('DETAIL')}
+              />
+              {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData?.resultText === 'string') && (
+                <SimpleBtn
+                  className={cn('ml-4 mb-4 inline-flex space-x-1')}
                  onClick={() => {
-                    if (!workflowRunningData)
-                      return
-                    switchTab('RESULT')
-                  }}
-                >{t('runLog.result')}</div>
-                <div
-                  className={cn(
-                    'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-                    currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
-                    !workflowRunningData && 'opacity-30 !cursor-not-allowed',
-                  )}
-                  onClick={() => {
-                    if (!workflowRunningData)
-                      return
-                    switchTab('DETAIL')
-                  }}
-                >{t('runLog.detail')}</div>
-                <div
-                  className={cn(
-                    'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-                    currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
-                    !workflowRunningData && 'opacity-30 !cursor-not-allowed',
-                  )}
-                  onClick={() => {
-                    if (!workflowRunningData)
-                      return
-                    switchTab('TRACING')
-                  }}
-                >{t('runLog.tracing')}</div>
-              </div>
-              <div className={cn(
-                'grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl',
-                (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-background-section-burn',
-              )}>
-                {currentTab === 'INPUT' && showInputsPanel && (
-                  <InputsPanel onRun={() => switchTab('RESULT')} />
-                )}
-                {currentTab === 'RESULT' && (
-                  <>
-                    <ResultText
-                      isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
-                      outputs={workflowRunningData?.resultText}
-                      allFiles={workflowRunningData?.result?.files as any}
-                      error={workflowRunningData?.result?.error}
-                      onClick={() => switchTab('DETAIL')}
-                    />
-                    {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData?.resultText === 'string') && (
-                      <SimpleBtn
-                        className={cn('ml-4 mb-4 inline-flex space-x-1')}
-                        onClick={() => {
-                          const content = workflowRunningData?.resultText
-                          if (typeof content === 'string')
-                            copy(content)
-                          else
-                            copy(JSON.stringify(content))
-                          Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
-                        }}>
-                        <RiClipboardLine className='w-3.5 h-3.5' />
-                        <div>{t('common.operation.copy')}</div>
-                      </SimpleBtn>
-                    )}
-                  </>
-                )}
-                {currentTab === 'DETAIL' && (
-                  <ResultPanel
-                    inputs={workflowRunningData?.result?.inputs}
-                    outputs={workflowRunningData?.result?.outputs}
-                    status={workflowRunningData?.result?.status || ''}
-                    error={workflowRunningData?.result?.error}
-                    elapsed_time={workflowRunningData?.result?.elapsed_time}
-                    total_tokens={workflowRunningData?.result?.total_tokens}
-                    created_at={workflowRunningData?.result?.created_at}
-                    created_by={(workflowRunningData?.result?.created_by as any)?.name}
-                    steps={workflowRunningData?.result?.total_steps}
-                    exceptionCounts={workflowRunningData?.result?.exceptions_count}
-                  />
-                )}
-                {currentTab === 'DETAIL' && !workflowRunningData?.result && (
-                  <div className='flex h-full items-center justify-center bg-components-panel-bg'>
-                    <Loading />
-                  </div>
-                )}
-                {currentTab === 'TRACING' && !isShowRetryDetail && (
-                  <TracingPanel
-                    className='bg-background-section-burn'
-                    list={workflowRunningData?.tracing || []}
-                    onShowIterationDetail={handleShowIterationDetail}
-                    onShowRetryDetail={handleRetryDetail}
-                  />
-                )}
-                {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
-                  <div className='flex h-full items-center justify-center !bg-background-section-burn'>
-                    <Loading />
-                  </div>
-                )}
-                {
-                  currentTab === 'TRACING' && isShowRetryDetail && (
-                    <RetryResultPanel
-                      list={retryRunResult}
-                      onBack={doHideRetryDetail}
-                    />
-                  )
-                }
-              </div>
+                    const content = workflowRunningData?.resultText
+                    if (typeof content === 'string')
+                      copy(content)
+                    else
+                      copy(JSON.stringify(content))
+                    Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
+                  }}>
+                  <RiClipboardLine className='w-3.5 h-3.5' />
+                  <div>{t('common.operation.copy')}</div>
+                </SimpleBtn>
+              )}
            </>
          )}
-
+          {currentTab === 'DETAIL' && (
+            <ResultPanel
+              inputs={workflowRunningData?.result?.inputs}
+              outputs={workflowRunningData?.result?.outputs}
+              status={workflowRunningData?.result?.status || ''}
+              error={workflowRunningData?.result?.error}
+              elapsed_time={workflowRunningData?.result?.elapsed_time}
+              total_tokens={workflowRunningData?.result?.total_tokens}
+              created_at={workflowRunningData?.result?.created_at}
+              created_by={(workflowRunningData?.result?.created_by as any)?.name}
+              steps={workflowRunningData?.result?.total_steps}
+              exceptionCounts={workflowRunningData?.result?.exceptions_count}
+            />
+          )}
+          {currentTab === 'DETAIL' && !workflowRunningData?.result && (
+            <div className='flex h-full items-center justify-center bg-components-panel-bg'>
+              <Loading />
+            </div>
+          )}
+          {currentTab === 'TRACING' && (
+            <TracingPanel
+              className='bg-background-section-burn'
+              list={workflowRunningData?.tracing || []}
+            />
+          )}
+          {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
+            <div className='flex h-full items-center justify-center !bg-background-section-burn'>
+              <Loading />
+            </div>
+          )}
+        </div>
      </div>
    </div>
  )
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next'
 import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
-import SpecialResultPanel from './special-result-panel'
-import { useLogs } from './hooks'
 import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
@ -105,24 +103,6 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
    adjustResultHeight()
  }, [loading])

-  const {
-    showSpecialResultPanel,
-
-    showRetryDetail,
-    setShowRetryDetailFalse,
-    retryResultList,
-    handleShowRetryResultList,
-
-    showIteratingDetail,
-    setShowIteratingDetailFalse,
-    iterationResultList,
-    iterationResultDurationMap,
-    handleShowIterationResultList,
-
-    showAgentDetail,
-    setShowAgentDetailFalse,
-  } = useLogs()
-
  return (
    <div className='grow relative flex flex-col'>
      {/* tab */}
@ -152,7 +132,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
        >{t('runLog.tracing')}</div>
      </div>
      {/* panel detail */}
-      <div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
+      <div ref={ref} className={cn('relative grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl')}>
        {loading && (
          <div className='flex h-full items-center justify-center bg-components-panel-bg'>
            <Loading />
@ -179,31 +159,12 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
            exceptionCounts={runDetail.exceptions_count}
          />
        )}
-        {!loading && currentTab === 'TRACING' && !showSpecialResultPanel && (
+        {!loading && currentTab === 'TRACING' && (
          <TracingPanel
            className='bg-background-section-burn'
            list={list}
-            onShowIterationDetail={handleShowIterationResultList}
-            onShowRetryDetail={handleShowRetryResultList}
          />
        )}
-        {
-          !loading && currentTab === 'TRACING' && showSpecialResultPanel && (
-            <SpecialResultPanel
-              showRetryDetail={showRetryDetail}
-              setShowRetryDetailFalse={setShowRetryDetailFalse}
-              retryResultList={retryResultList}
-
-              showIteratingDetail={showIteratingDetail}
-              setShowIteratingDetailFalse={setShowIteratingDetailFalse}
-              iterationResultList={iterationResultList}
-              iterationResultDurationMap={iterationResultDurationMap}
-
-              showAgentDetail={showAgentDetail}
-              setShowAgentDetailFalse={setShowAgentDetailFalse}
-            />
-          )
-        }
      </div>
    </div>
  )
--- a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
@ -3,15 +3,13 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  RiArrowLeftLine,
  RiArrowRightSLine,
-  RiCloseLine,
  RiErrorWarningLine,
  RiLoader2Line,
 } from '@remixicon/react'
-import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
-import { RetryResultPanel } from '@/app/components/workflow/run/retry-log'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
 import cn from '@/utils/classnames'
 import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
@ -19,17 +17,13 @@ const i18nPrefix = 'workflow.singleRun'

 type Props = {
  list: NodeTracing[][]
-  onHide: () => void
  onBack: () => void
-  noWrap?: boolean
  iterDurationMap?: IterationDurationMap
 }

 const IterationResultPanel: FC<Props> = ({
  list,
-  onHide,
  onBack,
-  noWrap,
  iterDurationMap,
 }) => {
  const { t } = useTranslation()
@ -75,29 +69,22 @@ const IterationResultPanel: FC<Props> = ({
      </>
    )
  }
-  const [retryRunResult, setRetryRunResult] = useState<Record<string, NodeTracing[]> | undefined>()
-  const handleRetryDetail = (v: number, detail?: NodeTracing[]) => {
-    setRetryRunResult({ ...retryRunResult, [v]: detail })
-  }

-  const main = (
-    <>
-      <div className={cn(!noWrap && 'shrink-0 ', 'px-4 pt-3')}>
-        <div className='shrink-0 flex justify-between items-center h-8'>
-          <div className='system-xl-semibold text-text-primary truncate'>
-            {t(`${i18nPrefix}.testRunIteration`)}
-          </div>
-          <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
-            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
-          </div>
-        </div>
-        <div className='flex items-center py-2 space-x-1 text-text-accent-secondary cursor-pointer' onClick={onBack}>
-          <ArrowNarrowLeft className='w-4 h-4' />
-          <div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
-        </div>
+  return (
+    <div className='bg-components-panel-bg'>
+      <div
+        className='flex items-center px-4 h-8 text-text-accent-secondary cursor-pointer border-b-[0.5px] border-b-divider-regular'
+        onClick={(e) => {
+          e.stopPropagation()
+          e.nativeEvent.stopImmediatePropagation()
+          onBack()
+        }}
+      >
+        <RiArrowLeftLine className='mr-1 w-4 h-4' />
+        <div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
      </div>
      {/* List */}
-      <div className={cn(!noWrap ? 'flex-grow overflow-auto' : 'max-h-full', 'p-2 bg-components-panel-bg')}>
+      <div className='p-2 bg-components-panel-bg'>
        {list.map((iteration, index) => (
          <div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
            <div
@ -121,54 +108,19 @@ const IterationResultPanel: FC<Props> = ({
            {expandedIterations[index] && <div
              className="grow h-px bg-divider-subtle"
            ></div>}
-            {
-              !retryRunResult?.[index] && (
-                <div className={cn(
-                  'overflow-hidden transition-all duration-200',
-                  expandedIterations[index] ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0',
-                )}>
-                  <TracingPanel
-                    list={iteration}
-                    className='bg-background-section-burn'
-                    onShowRetryDetail={v => handleRetryDetail(index, v)}
-                  />
-                </div>
-              )
-            }
-            {
-              retryRunResult?.[index] && (
-                <RetryResultPanel
-                  list={retryRunResult[index]}
-                  onBack={() => handleRetryDetail(index, undefined)}
-                />
-              )
-            }
+            <div className={cn(
+              'overflow-hidden transition-all duration-200',
+              expandedIterations[index] ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0',
+            )}>
+              <TracingPanel
+                list={iteration}
+                className='bg-background-section-burn'
+              />
+            </div>
          </div>
        ))}
      </div>
-    </>
-  )
-  const handleNotBubble = useCallback((e: React.MouseEvent) => {
-    // if not do this, it will trigger the message log modal disappear(useClickAway)
-    e.stopPropagation()
-    e.nativeEvent.stopImmediatePropagation()
-  }, [])
-
-  if (noWrap)
-    return main
-
-  return (
-    <div
-      className='absolute inset-0 z-10 rounded-2xl pt-10'
-      style={{
-        backgroundColor: 'rgba(16, 24, 40, 0.20)',
-      }}
-      onClick={handleNotBubble}
-    >
-      <div className='h-full rounded-2xl bg-components-panel-bg flex flex-col'>
-        {main}
-      </div>
-    </div >
+    </div>
  )
 }
 export default React.memo(IterationResultPanel)
--- a/web/app/components/workflow/run/meta.tsx
+++ b/web/app/components/workflow/run/meta.tsx
@ -3,7 +3,7 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useTimestamp from '@/hooks/use-timestamp'

-interface Props {
+type Props = {
  status: string
  executor?: string
  startTime?: number
--- a/web/app/components/workflow/run/output-panel.tsx
+++ b/web/app/components/workflow/run/output-panel.tsx
@ -9,7 +9,7 @@ import { FileList } from '@/app/components/base/file-uploader'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'

-interface OutputPanelProps {
+type OutputPanelProps = {
  isRunning?: boolean
  outputs?: any
  error?: string
@ -47,7 +47,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
    return getProcessedFilesFromResponse(fileList)
  }, [outputs])
  return (
-    <div className='py-2'>
+    <div className='p-2'>
      {isRunning && (
        <div className='pt-4 pl-[26px]'>
          <LoadingAnim type='text' />
--- a/web/app/components/workflow/run/special-result-panel.tsx
+++ b/web/app/components/workflow/run/special-result-panel.tsx
@ -43,7 +43,6 @@ const SpecialResultPanel = ({
        showIteratingDetail && (
          <IterationResultPanel
            list={iterationResultList}
-            onHide={setShowIteratingDetailFalse}
            onBack={setShowIteratingDetailFalse}
            iterDurationMap={iterationResultDurationMap}
          />
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@ -12,16 +12,16 @@ import {
  RiMenu4Line,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { useLogs } from './hooks'
 import NodePanel from './node'
+import SpecialResultPanel from './special-result-panel'
 import {
  BlockEnum,
 } from '@/app/components/workflow/types'
-import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
+import type { NodeTracing } from '@/types/workflow'

 type TracingPanelProps = {
  list: NodeTracing[]
-  onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
-  onShowRetryDetail?: (detail: NodeTracing[]) => void
  className?: string
  hideNodeInfo?: boolean
  hideNodeProcessDetail?: boolean
@ -160,8 +160,6 @@ function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): Tracing

 const TracingPanel: FC<TracingPanelProps> = ({
  list,
-  onShowIterationDetail,
-  onShowRetryDetail,
  className,
  hideNodeInfo = false,
  hideNodeProcessDetail = false,
@ -203,6 +201,24 @@ const TracingPanel: FC<TracingPanelProps> = ({
    }
  }, [])

+  const {
+    showSpecialResultPanel,
+
+    showRetryDetail,
+    setShowRetryDetailFalse,
+    retryResultList,
+    handleShowRetryResultList,
+
+    showIteratingDetail,
+    setShowIteratingDetailFalse,
+    iterationResultList,
+    iterationResultDurationMap,
+    handleShowIterationResultList,
+
+    showAgentDetail,
+    setShowAgentDetailFalse,
+  } = useLogs()
+
  const renderNode = (node: TracingNodeProps) => {
    if (node.isParallel) {
      const isCollapsed = collapsedNodes.has(node.id)
@ -252,8 +268,8 @@ const TracingPanel: FC<TracingPanelProps> = ({
          </div>
          <NodePanel
            nodeInfo={node.data!}
-            onShowIterationDetail={onShowIterationDetail}
-            onShowRetryDetail={onShowRetryDetail}
+            onShowIterationDetail={handleShowIterationResultList}
+            onShowRetryDetail={handleShowRetryResultList}
            justShowIterationNavArrow={true}
            justShowRetryNavArrow={true}
            hideInfo={hideNodeInfo}
@ -264,6 +280,24 @@ const TracingPanel: FC<TracingPanelProps> = ({
    }
  }

+  if (showSpecialResultPanel) {
+    return (
+      <SpecialResultPanel
+        showRetryDetail={showRetryDetail}
+        setShowRetryDetailFalse={setShowRetryDetailFalse}
+        retryResultList={retryResultList}
+
+        showIteratingDetail={showIteratingDetail}
+        setShowIteratingDetailFalse={setShowIteratingDetailFalse}
+        iterationResultList={iterationResultList}
+        iterationResultDurationMap={iterationResultDurationMap}
+
+        showAgentDetail={showAgentDetail}
+        setShowAgentDetailFalse={setShowAgentDetailFalse}
+      />
+    )
+  }
+
  return (
    <div className={cn(className || 'bg-components-panel-bg', 'py-2')}>
      {treeNodes.map(renderNode)}