From 6f865b96a2b7e56b0c31047f39cd74ffe3cdd62e Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Thu, 26 Dec 2024 14:40:42 +0800
Subject: [PATCH] refact workflow run log

---
 .../workflow/nodes/iteration/panel.tsx        |   2 -
 .../workflow/panel/workflow-preview.tsx       | 282 +++++++-----------
 web/app/components/workflow/run/index.tsx     |  43 +--
 .../iteration-log/iteration-result-panel.tsx  |  96 ++----
 web/app/components/workflow/run/meta.tsx      |   2 +-
 .../components/workflow/run/output-panel.tsx  |   4 +-
 .../workflow/run/special-result-panel.tsx     |   1 -
 .../components/workflow/run/tracing-panel.tsx |  48 ++-
 8 files changed, 177 insertions(+), 301 deletions(-)

diff --git a/web/app/components/workflow/nodes/iteration/panel.tsx b/web/app/components/workflow/nodes/iteration/panel.tsx
index 2ad2cac2d9..83402e9cad 100644
--- 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}
         />
       )}
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 2e7f859b93..b4e4d4c5d1 100644
--- 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>
   )
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index b4de75fa64..557fb8b06e 100644
--- 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>
   )
diff --git a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
index 07e0db969f..19f79feb13 100644
--- 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)
diff --git a/web/app/components/workflow/run/meta.tsx b/web/app/components/workflow/run/meta.tsx
index 9326125101..d99261bb9d 100644
--- 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
diff --git a/web/app/components/workflow/run/output-panel.tsx b/web/app/components/workflow/run/output-panel.tsx
index 6a5443e51b..6a2a359483 100644
--- 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' />
diff --git a/web/app/components/workflow/run/special-result-panel.tsx b/web/app/components/workflow/run/special-result-panel.tsx
index 0995ecf1ef..c66a9f4472 100644
--- 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}
           />
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 8329b88cbd..fd6a9fdde5 100644
--- 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)}