From bfecc73de92c5643fa6d56cbf69f02d1f9f7013d Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Dec 2024 17:58:34 +0800
Subject: [PATCH 1/3] support extra for tool selector

---
 .../plugin-detail-panel/tool-selector/index.tsx       | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index 18ff2a3707..a1d7573c8b 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -41,8 +41,8 @@ type Props = {
   value?: {
     provider: string
     tool_name: string
-    description?: string
     parameters?: Record<string, any>
+    extra?: Record<string, any>
   }
   disabled?: boolean
   placement?: Placement
@@ -50,8 +50,8 @@ type Props = {
   onSelect: (tool: {
     provider: string
     tool_name: string
-    description?: string
     parameters?: Record<string, any>
+    extra?: Record<string, any>
   }) => void
   supportAddCustomTool?: boolean
   scope?: string
@@ -101,7 +101,10 @@ const ToolSelector: FC<Props> = ({
   const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onSelect({
       ...value,
-      description: e.target.value || '',
+      extra: {
+        ...value?.extra,
+        description: e.target.value || '',
+      },
     } as any)
   }
 
@@ -186,7 +189,7 @@ const ToolSelector: FC<Props> = ({
                 <Textarea
                   className='resize-none'
                   placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
-                  value={value?.description || ''}
+                  value={value?.extra?.description || ''}
                   onChange={handleDescriptionChange}
                 />
               </div>

From 95da3a4cf196ad98592381812ba3f74cd3c8efd8 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Dec 2024 18:58:01 +0800
Subject: [PATCH 2/3] tool credential panel

---
 .../plugins/plugin-detail-panel/index.tsx     |  14 +-
 .../tool-selector/index.tsx                   | 220 ++++++++++--------
 .../tool-selector/tool-credentials-form.tsx   |  50 ++--
 .../tool-selector/tool-trigger.tsx            |   8 +-
 4 files changed, 156 insertions(+), 136 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 3e746741cc..3378d75b5b 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -59,14 +59,12 @@ const PluginDetailPanel: FC<Props> = ({
             {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
             {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
             {!!detail.declaration.model && <ModelList detail={detail} />}
-            {false && (
-              <div className='px-4 py-2'>
-                <ToolSelector
-                  value={value}
-                  onSelect={item => testChange(item)}
-                />
-              </div>
-            )}
+            <div className='px-4 py-2'>
+              <ToolSelector
+                value={value}
+                onSelect={item => testChange(item)}
+              />
+            </div>
           </div>
         </>
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index a1d7573c8b..732c94103f 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  RiArrowLeftLine,
   RiArrowRightUpLine,
 } from '@remixicon/react'
 import {
@@ -39,7 +40,7 @@ import cn from '@/utils/classnames'
 
 type Props = {
   value?: {
-    provider: string
+    provider_name: string
     tool_name: string
     parameters?: Record<string, any>
     extra?: Record<string, any>
@@ -48,7 +49,7 @@ type Props = {
   placement?: Placement
   offset?: OffsetOptions
   onSelect: (tool: {
-    provider: string
+    provider_name: string
     tool_name: string
     parameters?: Record<string, any>
     extra?: Record<string, any>
@@ -79,7 +80,7 @@ const ToolSelector: FC<Props> = ({
   const currentProvider = useMemo(() => {
     const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
     return mergedTools.find((toolWithProvider) => {
-      return toolWithProvider.id === value?.provider && toolWithProvider.tools.some(tool => tool.name === value?.tool_name)
+      return toolWithProvider.id === value?.provider_name && toolWithProvider.tools.some(tool => tool.name === value?.tool_name)
     })
   }, [value, buildInTools, customTools, workflowTools])
 
@@ -87,10 +88,12 @@ const ToolSelector: FC<Props> = ({
   const handleSelectTool = (tool: ToolDefaultValue) => {
     const paramValues = addDefaultValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas as any))
     const toolValue = {
-      provider: tool.provider_id,
+      provider_name: tool.provider_id,
       tool_name: tool.tool_name,
-      description: '',
       parameters: paramValues,
+      extra: {
+        description: '',
+      },
     }
     onSelect(toolValue)
     setIsShowChooseTool(false)
@@ -160,75 +163,122 @@ const ToolSelector: FC<Props> = ({
           />
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <div className="relative w-[361px] min-h-20 max-h-[642px] overflow-y-auto pb-2 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
-            <div className='px-4 pt-3.5 pb-1 text-text-primary system-xl-semibold'>{t('plugin.detailPanel.toolSelector.title')}</div>
-            {/* base form */}
-            <div className='px-4 py-2 flex flex-col gap-3'>
-              <div className='flex flex-col gap-1'>
-                <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
-                <ToolPicker
-                  placement='bottom'
-                  offset={offset}
-                  trigger={
-                    <ToolTrigger
-                      open={isShowChooseTool}
-                      value={value}
-                      provider={currentProvider}
+          <div className={cn('relative w-[361px] min-h-20 max-h-[642px] pb-4 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
+            {!isShowSettingAuth && (
+              <>
+                <div className='px-4 pt-3.5 pb-1 text-text-primary system-xl-semibold'>{t('plugin.detailPanel.toolSelector.title')}</div>
+                {/* base form */}
+                <div className='px-4 py-2 flex flex-col gap-3'>
+                  <div className='flex flex-col gap-1'>
+                    <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
+                    <ToolPicker
+                      placement='bottom'
+                      offset={offset}
+                      trigger={
+                        <ToolTrigger
+                          open={isShowChooseTool}
+                          value={value}
+                          provider={currentProvider}
+                        />
+                      }
+                      isShow={isShowChooseTool}
+                      onShowChange={setIsShowChooseTool}
+                      disabled={false}
+                      supportAddCustomTool
+                      onSelect={handleSelectTool}
+                      scope={scope}
                     />
-                  }
-                  isShow={isShowChooseTool}
-                  onShowChange={setIsShowChooseTool}
-                  disabled={false}
-                  supportAddCustomTool
-                  onSelect={handleSelectTool}
-                  scope={scope}
-                />
-              </div>
-              <div className='flex flex-col gap-1'>
-                <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
-                <Textarea
-                  className='resize-none'
-                  placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
-                  value={value?.extra?.description || ''}
-                  onChange={handleDescriptionChange}
-                />
-              </div>
-            </div>
-            {/* authorization */}
-            {!isShowSettingAuth && currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
-              <div className='px-4 pt-3 flex flex-col'>
-                <div className='flex items-center gap-2'>
-                  <div className='text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.auth')}</div>
-                  <Divider bgStyle='gradient' className='grow' />
+                  </div>
+                  <div className='flex flex-col gap-1'>
+                    <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                    <Textarea
+                      className='resize-none'
+                      placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
+                      value={value?.extra?.description || ''}
+                      onChange={handleDescriptionChange}
+                      disabled={!value?.provider_name}
+                    />
+                  </div>
                 </div>
-                <div className='py-2'>
-                  {!currentProvider.is_team_authorization && (
-                    <Button
-                      variant='primary'
-                      className={cn('shrink-0 w-full')}
-                      onClick={() => setShowSettingAuth(true)}
-                      disabled={!isCurrentWorkspaceManager}
-                    >
-                      {t('tools.auth.unauthorized')}
-                    </Button>
-                  )}
-                  {currentProvider.is_team_authorization && (
-                    <Button
-                      variant='secondary'
-                      className={cn('shrink-0 w-full')}
-                      onClick={() => setShowSettingAuth(true)}
-                      disabled={!isCurrentWorkspaceManager}
-                    >
-                      <Indicator className='mr-2' color={'green'} />
-                      {t('tools.auth.authorized')}
-                    </Button>
-                  )}
-                </div>
-              </div>
+                {/* authorization */}
+                {currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
+                  <div className='px-4 pt-3 flex flex-col'>
+                    <div className='flex items-center gap-2'>
+                      <div className='text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.auth')}</div>
+                      <Divider bgStyle='gradient' className='grow' />
+                    </div>
+                    <div className='py-2'>
+                      {!currentProvider.is_team_authorization && (
+                        <Button
+                          variant='primary'
+                          className={cn('shrink-0 w-full')}
+                          onClick={() => setShowSettingAuth(true)}
+                          disabled={!isCurrentWorkspaceManager}
+                        >
+                          {t('tools.auth.unauthorized')}
+                        </Button>
+                      )}
+                      {currentProvider.is_team_authorization && (
+                        <Button
+                          variant='secondary'
+                          className={cn('shrink-0 w-full')}
+                          onClick={() => setShowSettingAuth(true)}
+                          disabled={!isCurrentWorkspaceManager}
+                        >
+                          <Indicator className='mr-2' color={'green'} />
+                          {t('tools.auth.authorized')}
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                )}
+                {/* tool settings */}
+                {currentToolParams.length > 0 && currentProvider?.is_team_authorization && (
+                  <div className='px-4 pt-3'>
+                    <div className='flex items-center gap-2'>
+                      <div className='text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.settings')}</div>
+                      <Divider bgStyle='gradient' className='grow' />
+                    </div>
+                    <div className='py-2'>
+                      <Form
+                        value={value?.parameters || {}}
+                        onChange={handleFormChange}
+                        formSchemas={formSchemas as any}
+                        isEditMode={true}
+                        showOnVariableMap={{}}
+                        validating={false}
+                        inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
+                        fieldMoreInfo={item => item.url
+                          ? (<a
+                            href={item.url}
+                            target='_blank' rel='noopener noreferrer'
+                            className='inline-flex items-center text-xs text-text-accent'
+                          >
+                            {t('tools.howToGet')}
+                            <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                          </a>)
+                          : null}
+                      />
+                    </div>
+                  </div>
+                )}
+              </>
             )}
             {/* authorization panel */}
             {isShowSettingAuth && currentProvider && (
-              <div className='px-4 pb-4 border-t border-divider-subtle'>
+              <>
+                <div className='relative pt-3.5 flex flex-col gap-1'>
+                  <div className='absolute -top-2 left-2 w-[345px] pt-2 rounded-t-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'></div>
+                  <div
+                    className='px-3 h-6 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
+                    onClick={() => setShowSettingAuth(false)}
+                  >
+                    <RiArrowLeftLine className='w-4 h-4' />
+                    BACK
+                  </div>
+                  <div className='px-4 text-text-primary system-xl-semibold'>{t('tools.auth.setupModalTitle')}</div>
+                  <div className='px-4 text-text-tertiary system-xs-regular'>{t('tools.auth.setupModalTitleDescription')}</div>
+                </div>
                 <ToolCredentialForm
                   collection={currentProvider}
                   onCancel={() => setShowSettingAuth(false)}
@@ -237,37 +287,7 @@ const ToolSelector: FC<Props> = ({
                     credentials: value,
                   })}
                 />
-              </div>
-            )}
-            {/* tool settings */}
-            {currentToolParams.length > 0 && currentProvider?.is_team_authorization && (
-              <div className='px-4 pt-3'>
-                <div className='flex items-center gap-2'>
-                  <div className='text-text-tertiary system-xs-medium-uppercase'>{t('plugin.detailPanel.toolSelector.settings')}</div>
-                  <Divider bgStyle='gradient' className='grow' />
-                </div>
-                <div className='py-2'>
-                  <Form
-                    value={value?.parameters || {}}
-                    onChange={handleFormChange}
-                    formSchemas={formSchemas as any}
-                    isEditMode={true}
-                    showOnVariableMap={{}}
-                    validating={false}
-                    inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
-                    fieldMoreInfo={item => item.url
-                      ? (<a
-                        href={item.url}
-                        target='_blank' rel='noopener noreferrer'
-                        className='inline-flex items-center text-xs text-text-accent'
-                      >
-                        {t('tools.howToGet')}
-                        <RiArrowRightUpLine className='ml-1 w-3 h-3' />
-                      </a>)
-                      : null}
-                  />
-                </div>
-              </div>
+              </>
             )}
           </div>
         </PortalToFollowElemContent>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
index 327605166c..857c0678cd 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
@@ -53,33 +53,35 @@ const ToolCredentialForm: FC<Props> = ({
   }
 
   return (
-    <div className='h-full'>
+    <>
       {!credentialSchema
         ? <div className='pt-3'><Loading type='app' /></div>
         : (
           <>
-            <Form
-              value={tempCredential}
-              onChange={(v) => {
-                setTempCredential(v)
-              }}
-              formSchemas={credentialSchema}
-              isEditMode={true}
-              showOnVariableMap={{}}
-              validating={false}
-              inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
-              fieldMoreInfo={item => item.url
-                ? (<a
-                  href={item.url}
-                  target='_blank' rel='noopener noreferrer'
-                  className='inline-flex items-center text-xs text-primary-600'
-                >
-                  {t('tools.howToGet')}
-                  <RiArrowRightUpLine className='ml-1 w-3 h-3' />
-                </a>)
-                : null}
-            />
-            <div className={cn('mt-1 flex justify-end')} >
+            <div className='px-4 max-h-[464px] overflow-y-auto'>
+              <Form
+                value={tempCredential}
+                onChange={(v) => {
+                  setTempCredential(v)
+                }}
+                formSchemas={credentialSchema}
+                isEditMode={true}
+                showOnVariableMap={{}}
+                validating={false}
+                inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
+                fieldMoreInfo={item => item.url
+                  ? (<a
+                    href={item.url}
+                    target='_blank' rel='noopener noreferrer'
+                    className='inline-flex items-center text-xs text-text-accent'
+                  >
+                    {t('tools.howToGet')}
+                    <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                  </a>)
+                  : null}
+              />
+            </div>
+            <div className={cn('mt-1 flex justify-end px-4')} >
               <div className='flex space-x-2'>
                 <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
                 <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
@@ -89,7 +91,7 @@ const ToolCredentialForm: FC<Props> = ({
         )
       }
 
-    </div >
+    </>
   )
 }
 export default React.memo(ToolCredentialForm)
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
index a8c333dee1..adea79adf5 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
@@ -14,7 +14,7 @@ type Props = {
   open: boolean
   provider?: ToolWithProvider
   value?: {
-    provider: string
+    provider_name: string
     tool_name: string
   }
   isConfigure?: boolean
@@ -31,9 +31,9 @@ const ToolTrigger = ({
     <div className={cn(
       'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
       open && 'bg-state-base-hover-alt',
-      value?.provider && 'pl-1.5 py-1.5',
+      value?.provider_name && 'pl-1.5 py-1.5',
     )}>
-      {value?.provider && provider && (
+      {value?.provider_name && provider && (
         <div className='shrink-0 mr-1 p-px rounded-lg bg-components-panel-bg border border-components-panel-border'>
           <BlockIcon
             className='!w-4 !h-4'
@@ -45,7 +45,7 @@ const ToolTrigger = ({
       {value?.tool_name && (
         <div className='grow system-sm-medium text-components-input-text-filled'>{value.tool_name}</div>
       )}
-      {!value?.provider && (
+      {!value?.provider_name && (
         <div className='grow text-components-input-text-placeholder system-sm-regular'>
           {!isConfigure ? t('plugin.detailPanel.toolSelector.placeholder') : t('plugin.detailPanel.configureTool')}
         </div>

From c23fe3b67f311ab0c19125a6f3bb701249e92d7d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 26 Dec 2024 18:38:59 +0800
Subject: [PATCH 3/3] chore: format

---
 .../workflow/header/view-history.tsx          |   2 +-
 web/app/components/workflow/run/index.tsx     |   2 +-
 .../components/workflow/run/tracing-panel.tsx | 158 ++----------------
 .../workflow/run/utils/format-log/index.ts    |  17 +-
 .../utils/format-log/parallel/index.backup.ts | 132 +++++++++++++++
 .../run/utils/format-log/parallel/index.ts    | 127 ++++++++++++++
 web/types/workflow.ts                         |  10 +-
 7 files changed, 294 insertions(+), 154 deletions(-)
 create mode 100644 web/app/components/workflow/run/utils/format-log/parallel/index.backup.ts

diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index a18ddad65d..82d8a302c5 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -202,7 +202,7 @@ const ViewHistory = ({
                             {`Test ${isChatMode ? 'Chat' : 'Run'}#${item.sequence_number}`}
                           </div>
                           <div className='flex items-center text-xs text-gray-500 leading-[18px]'>
-                            {item.created_by_account.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
+                            {item.created_by_account?.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
                           </div>
                         </div>
                       </div>
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 557fb8b06e..c1249f7224 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -61,7 +61,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
       const { data: nodeList } = await fetchTracingList({
         url: `/apps/${appID}/workflow-runs/${runID}/node-executions`,
       })
-      setList(formatNodeList(nodeList))
+      setList(formatNodeList(nodeList, t))
     }
     catch (err) {
       notify({
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 109283c511..f8af35219b 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -11,13 +11,9 @@ import {
   RiArrowDownSLine,
   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 { NodeTracing } from '@/types/workflow'
 
 type TracingPanelProps = {
@@ -27,145 +23,14 @@ type TracingPanelProps = {
   hideNodeProcessDetail?: boolean
 }
 
-type TracingNodeProps = {
-  id: string
-  uniqueId: string
-  isParallel: boolean
-  data: NodeTracing | null
-  children: TracingNodeProps[]
-  parallelTitle?: string
-  branchTitle?: string
-  hideNodeInfo?: boolean
-  hideNodeProcessDetail?: boolean
-}
-
-function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): TracingNodeProps[] {
-  const rootNodes: TracingNodeProps[] = []
-  const parallelStacks: { [key: string]: TracingNodeProps } = {}
-  const levelCounts: { [key: string]: number } = {}
-  const parallelChildCounts: { [key: string]: Set<string> } = {}
-  let uniqueIdCounter = 0
-  const getUniqueId = () => {
-    uniqueIdCounter++
-    return `unique-${uniqueIdCounter}`
-  }
-
-  const getParallelTitle = (parentId: string | null): string => {
-    const levelKey = parentId || 'root'
-    if (!levelCounts[levelKey])
-      levelCounts[levelKey] = 0
-
-    levelCounts[levelKey]++
-
-    const parentTitle = parentId ? parallelStacks[parentId]?.parallelTitle : ''
-    const levelNumber = parentTitle ? Number.parseInt(parentTitle.split('-')[1]) + 1 : 1
-    const letter = parallelChildCounts[levelKey]?.size > 1 ? String.fromCharCode(64 + levelCounts[levelKey]) : ''
-    return `${t('workflow.common.parallel')}-${levelNumber}${letter}`
-  }
-
-  const getBranchTitle = (parentId: string | null, branchNum: number): string => {
-    const levelKey = parentId || 'root'
-    const parentTitle = parentId ? parallelStacks[parentId]?.parallelTitle : ''
-    const levelNumber = parentTitle ? Number.parseInt(parentTitle.split('-')[1]) + 1 : 1
-    const letter = parallelChildCounts[levelKey]?.size > 1 ? String.fromCharCode(64 + levelCounts[levelKey]) : ''
-    const branchLetter = String.fromCharCode(64 + branchNum)
-    return `${t('workflow.common.branch')}-${levelNumber}${letter}-${branchLetter}`
-  }
-
-  // Count parallel children (for figuring out if we need to use letters)
-  for (const node of nodes) {
-    const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
-    const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
-
-    if (parallel_id) {
-      const parentKey = parent_parallel_id || 'root'
-      if (!parallelChildCounts[parentKey])
-        parallelChildCounts[parentKey] = new Set()
-
-      parallelChildCounts[parentKey].add(parallel_id)
-    }
-  }
-
-  for (const node of nodes) {
-    const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
-    const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
-    const parallel_start_node_id = node.parallel_start_node_id ?? node.execution_metadata?.parallel_start_node_id ?? null
-    const parent_parallel_start_node_id = node.parent_parallel_start_node_id ?? node.execution_metadata?.parent_parallel_start_node_id ?? null
-
-    if (!parallel_id || node.node_type === BlockEnum.End) {
-      rootNodes.push({
-        id: node.id,
-        uniqueId: getUniqueId(),
-        isParallel: false,
-        data: node,
-        children: [],
-      })
-    }
-    else {
-      if (!parallelStacks[parallel_id]) {
-        const newParallelGroup: TracingNodeProps = {
-          id: parallel_id,
-          uniqueId: getUniqueId(),
-          isParallel: true,
-          data: null,
-          children: [],
-          parallelTitle: '',
-        }
-        parallelStacks[parallel_id] = newParallelGroup
-
-        if (parent_parallel_id && parallelStacks[parent_parallel_id]) {
-          const sameBranchIndex = parallelStacks[parent_parallel_id].children.findLastIndex(c =>
-            c.data?.execution_metadata?.parallel_start_node_id === parent_parallel_start_node_id || c.data?.parallel_start_node_id === parent_parallel_start_node_id,
-          )
-          parallelStacks[parent_parallel_id].children.splice(sameBranchIndex + 1, 0, newParallelGroup)
-          newParallelGroup.parallelTitle = getParallelTitle(parent_parallel_id)
-        }
-        else {
-          newParallelGroup.parallelTitle = getParallelTitle(parent_parallel_id)
-          rootNodes.push(newParallelGroup)
-        }
-      }
-      const branchTitle = parallel_start_node_id === node.node_id ? getBranchTitle(parent_parallel_id, parallelStacks[parallel_id].children.length + 1) : ''
-      if (branchTitle) {
-        parallelStacks[parallel_id].children.push({
-          id: node.id,
-          uniqueId: getUniqueId(),
-          isParallel: false,
-          data: node,
-          children: [],
-          branchTitle,
-        })
-      }
-      else {
-        let sameBranchIndex = parallelStacks[parallel_id].children.findLastIndex(c =>
-          c.data?.execution_metadata?.parallel_start_node_id === parallel_start_node_id || c.data?.parallel_start_node_id === parallel_start_node_id,
-        )
-        if (parallelStacks[parallel_id].children[sameBranchIndex + 1]?.isParallel)
-          sameBranchIndex++
-
-        parallelStacks[parallel_id].children.splice(sameBranchIndex + 1, 0, {
-          id: node.id,
-          uniqueId: getUniqueId(),
-          isParallel: false,
-          data: node,
-          children: [],
-          branchTitle,
-        })
-      }
-    }
-  }
-
-  return rootNodes
-}
-
 const TracingPanel: FC<TracingPanelProps> = ({
   list,
   className,
   hideNodeInfo = false,
   hideNodeProcessDetail = false,
 }) => {
-  const { t } = useTranslation()
-  const treeNodes = buildLogTree(list, t)
+  const treeNodes = list
+  console.log(treeNodes)
   const [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set())
   const [hoveredParallel, setHoveredParallel] = useState<string | null>(null)
 
@@ -219,13 +84,16 @@ const TracingPanel: FC<TracingPanelProps> = ({
     setAgentResultList,
   } = useLogs()
 
-  const renderNode = (node: TracingNodeProps) => {
-    if (node.isParallel) {
+
+  const renderNode = (node: NodeTracing) => {
+    const isParallelFirstNode = !!node.parallelDetail?.isParallelStartNode
+    if (isParallelFirstNode) {
+      const parallelDetail = node.parallelDetail!
       const isCollapsed = collapsedNodes.has(node.id)
       const isHovered = hoveredParallel === node.id
       return (
         <div
-          key={node.uniqueId}
+          key={node.id}
           className="ml-4 mb-2 relative"
           data-parallel-id={node.id}
           onMouseEnter={() => handleParallelMouseEnter(node.id)}
@@ -242,7 +110,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
               {isHovered ? <RiArrowDownSLine className="w-3 h-3" /> : <RiMenu4Line className="w-3 h-3 text-text-tertiary" />}
             </button>
             <div className="system-xs-semibold-uppercase text-text-secondary flex items-center">
-              <span>{node.parallelTitle}</span>
+              <span>{parallelDetail.parallelTitle}</span>
             </div>
             <div
               className="mx-2 grow h-px bg-divider-subtle"
@@ -254,7 +122,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
               'absolute top-0 bottom-0 left-[5px] w-[2px]',
               isHovered ? 'bg-text-accent-secondary' : 'bg-divider-subtle',
             )}></div>
-            {node.children.map(renderNode)}
+            {parallelDetail.children!.map(renderNode)}
           </div>
         </div>
       )
@@ -262,12 +130,12 @@ const TracingPanel: FC<TracingPanelProps> = ({
     else {
       const isHovered = hoveredParallel === node.id
       return (
-        <div key={node.uniqueId}>
+        <div key={node.id}>
           <div className={cn('pl-4 -mb-1.5 system-2xs-medium-uppercase', isHovered ? 'text-text-tertiary' : 'text-text-quaternary')}>
-            {node.branchTitle}
+            {node?.parallelDetail?.branchTitle}
           </div>
           <NodePanel
-            nodeInfo={node.data!}
+            nodeInfo={node!}
             onShowIterationDetail={handleShowIterationResultList}
             onShowRetryDetail={handleShowRetryResultList}
             onShowAgentResultList={setAgentResultList}
diff --git a/web/app/components/workflow/run/utils/format-log/index.ts b/web/app/components/workflow/run/utils/format-log/index.ts
index 4f996e2f26..4a974fc35a 100644
--- a/web/app/components/workflow/run/utils/format-log/index.ts
+++ b/web/app/components/workflow/run/utils/format-log/index.ts
@@ -1,15 +1,22 @@
 import type { NodeTracing } from '@/types/workflow'
 import formatIterationNode from './iteration'
+import formatParallelNode from './parallel'
 import formatRetryNode from './retry'
 import formatAgentNode from './agent'
 
-const formatToTracingNodeList = (list: NodeTracing[]) => {
+const formatToTracingNodeList = (list: NodeTracing[], t: any) => {
   const allItems = [...list].reverse()
-  const formattedIterationList = formatIterationNode(allItems)
-  const formattedRetryList = formatRetryNode(formattedIterationList)
-  const formattedAgentList = formatAgentNode(formattedRetryList)
+  /*
+  * First handle not change list structure node
+  * Because Handle struct node will put the node in different
+  */
+  const formattedAgentList = formatAgentNode(allItems)
+  const formattedRetryList = formatRetryNode(formattedAgentList) // retry one node
+  // would change the structure of the list. Iteration and parallel can include each other.
+  const formattedIterationList = formatIterationNode(formattedRetryList)
+  const formattedParallelList = formatParallelNode(formattedIterationList, t)
 
-  const result = formattedAgentList
+  const result = formattedParallelList
   // console.log(allItems)
   // console.log(result)
 
diff --git a/web/app/components/workflow/run/utils/format-log/parallel/index.backup.ts b/web/app/components/workflow/run/utils/format-log/parallel/index.backup.ts
new file mode 100644
index 0000000000..f30d03c839
--- /dev/null
+++ b/web/app/components/workflow/run/utils/format-log/parallel/index.backup.ts
@@ -0,0 +1,132 @@
+import type { NodeTracing } from '@/types/workflow'
+
+type TracingNodeProps = {
+  id: string
+  uniqueId: string
+  isParallel: boolean
+  data: NodeTracing | null
+  children: TracingNodeProps[]
+  parallelTitle?: string
+  branchTitle?: string
+  hideNodeInfo?: boolean
+  hideNodeProcessDetail?: boolean
+}
+
+function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): TracingNodeProps[] {
+  const rootNodes: TracingNodeProps[] = []
+  const parallelStacks: { [key: string]: TracingNodeProps } = {}
+  const levelCounts: { [key: string]: number } = {}
+  const parallelChildCounts: { [key: string]: Set<string> } = {}
+  let uniqueIdCounter = 0
+  const getUniqueId = () => {
+    uniqueIdCounter++
+    return `unique-${uniqueIdCounter}`
+  }
+
+  const getParallelTitle = (parentId: string | null): string => {
+    const levelKey = parentId || 'root'
+    if (!levelCounts[levelKey])
+      levelCounts[levelKey] = 0
+
+    levelCounts[levelKey]++
+
+    const parentTitle = parentId ? parallelStacks[parentId]?.parallelTitle : ''
+    const levelNumber = parentTitle ? Number.parseInt(parentTitle.split('-')[1]) + 1 : 1
+    const letter = parallelChildCounts[levelKey]?.size > 1 ? String.fromCharCode(64 + levelCounts[levelKey]) : ''
+    return `${t('workflow.common.parallel')}-${levelNumber}${letter}`
+  }
+
+  const getBranchTitle = (parentId: string | null, branchNum: number): string => {
+    const levelKey = parentId || 'root'
+    const parentTitle = parentId ? parallelStacks[parentId]?.parallelTitle : ''
+    const levelNumber = parentTitle ? Number.parseInt(parentTitle.split('-')[1]) + 1 : 1
+    const letter = parallelChildCounts[levelKey]?.size > 1 ? String.fromCharCode(64 + levelCounts[levelKey]) : ''
+    const branchLetter = String.fromCharCode(64 + branchNum)
+    return `${t('workflow.common.branch')}-${levelNumber}${letter}-${branchLetter}`
+  }
+
+  // Count parallel children (for figuring out if we need to use letters)
+  for (const node of nodes) {
+    const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
+    const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
+
+    if (parallel_id) {
+      const parentKey = parent_parallel_id || 'root'
+      if (!parallelChildCounts[parentKey])
+        parallelChildCounts[parentKey] = new Set()
+
+      parallelChildCounts[parentKey].add(parallel_id)
+    }
+  }
+
+  for (const node of nodes) {
+    const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
+    const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
+    const parallel_start_node_id = node.parallel_start_node_id ?? node.execution_metadata?.parallel_start_node_id ?? null
+    const parent_parallel_start_node_id = node.parent_parallel_start_node_id ?? node.execution_metadata?.parent_parallel_start_node_id ?? null
+
+    if (!parallel_id || node.node_type === BlockEnum.End) {
+      rootNodes.push({
+        id: node.id,
+        uniqueId: getUniqueId(),
+        isParallel: false,
+        data: node,
+        children: [],
+      })
+    }
+    else {
+      if (!parallelStacks[parallel_id]) {
+        const newParallelGroup: TracingNodeProps = {
+          id: parallel_id,
+          uniqueId: getUniqueId(),
+          isParallel: true,
+          data: null,
+          children: [],
+          parallelTitle: '',
+        }
+        parallelStacks[parallel_id] = newParallelGroup
+
+        if (parent_parallel_id && parallelStacks[parent_parallel_id]) {
+          const sameBranchIndex = parallelStacks[parent_parallel_id].children.findLastIndex(c =>
+            c.data?.execution_metadata?.parallel_start_node_id === parent_parallel_start_node_id || c.data?.parallel_start_node_id === parent_parallel_start_node_id,
+          )
+          parallelStacks[parent_parallel_id].children.splice(sameBranchIndex + 1, 0, newParallelGroup)
+          newParallelGroup.parallelTitle = getParallelTitle(parent_parallel_id)
+        }
+        else {
+          newParallelGroup.parallelTitle = getParallelTitle(parent_parallel_id)
+          rootNodes.push(newParallelGroup)
+        }
+      }
+      const branchTitle = parallel_start_node_id === node.node_id ? getBranchTitle(parent_parallel_id, parallelStacks[parallel_id].children.length + 1) : ''
+      if (branchTitle) {
+        parallelStacks[parallel_id].children.push({
+          id: node.id,
+          uniqueId: getUniqueId(),
+          isParallel: false,
+          data: node,
+          children: [],
+          branchTitle,
+        })
+      }
+      else {
+        let sameBranchIndex = parallelStacks[parallel_id].children.findLastIndex(c =>
+          c.data?.execution_metadata?.parallel_start_node_id === parallel_start_node_id || c.data?.parallel_start_node_id === parallel_start_node_id,
+        )
+        if (parallelStacks[parallel_id].children[sameBranchIndex + 1]?.isParallel)
+          sameBranchIndex++
+
+        parallelStacks[parallel_id].children.splice(sameBranchIndex + 1, 0, {
+          id: node.id,
+          uniqueId: getUniqueId(),
+          isParallel: false,
+          data: node,
+          children: [],
+          branchTitle,
+        })
+      }
+    }
+  }
+
+  return rootNodes
+}
diff --git a/web/app/components/workflow/run/utils/format-log/parallel/index.ts b/web/app/components/workflow/run/utils/format-log/parallel/index.ts
index e69de29bb2..214285d39b 100644
--- a/web/app/components/workflow/run/utils/format-log/parallel/index.ts
+++ b/web/app/components/workflow/run/utils/format-log/parallel/index.ts
@@ -0,0 +1,127 @@
+import { BlockEnum } from '@/app/components/workflow/types'
+import type { NodeTracing } from '@/types/workflow'
+
+function addTitle({
+  list, level, parallelNumRecord,
+}: {
+  list: NodeTracing[], level: number, parallelNumRecord: Record<string, number>
+}, t: any) {
+  let branchIndex = 0
+  list.forEach((node) => {
+    const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
+    const parallel_start_node_id = node.parallel_start_node_id ?? node.execution_metadata?.parallel_start_node_id ?? null
+
+    const isNotInParallel = !parallel_id || node.node_type === BlockEnum.End
+    if (isNotInParallel)
+      return
+
+    const isParallelStartNode = node.parallelDetail?.isParallelStartNode
+    if (isParallelStartNode)
+      parallelNumRecord.num++
+
+    const letter = parallelNumRecord.num > 1 ? String.fromCharCode(64 + level) : ''
+    const parallelLevelInfo = `${parallelNumRecord.num}${letter}`
+
+    if (isParallelStartNode) {
+      node.parallelDetail!.isParallelStartNode = true
+      node.parallelDetail!.parallelTitle = `${t('workflow.common.parallel')}-${parallelLevelInfo}`
+    }
+
+    const isBrachStartNode = parallel_start_node_id === node.node_id
+    if (isBrachStartNode) {
+      branchIndex++
+      const branchLetter = String.fromCharCode(64 + branchIndex)
+      if (!node.parallelDetail) {
+        node.parallelDetail = {
+          branchTitle: '',
+        }
+      }
+
+      node.parallelDetail!.branchTitle = `${t('workflow.common.branch')}-${parallelLevelInfo}-${branchLetter}`
+    }
+
+    if (node.parallelDetail?.children && node.parallelDetail.children.length > 0) {
+      addTitle({
+        list: node.parallelDetail.children,
+        level: level + 1,
+        parallelNumRecord,
+      }, t)
+    }
+  })
+}
+
+// list => group by parallel_id(parallel tree).
+const format = (list: NodeTracing[], t: any): NodeTracing[] => {
+  const result: NodeTracing[] = [...list]
+  const parallelFirstNodeMap: Record<string, string> = {}
+  // list to tree by parent_parallel_start_node_id and parallel_start_node_id
+  result.forEach((node) => {
+    const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
+    const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
+    const parent_parallel_start_node_id = node.parent_parallel_start_node_id ?? node.execution_metadata?.parent_parallel_start_node_id ?? null
+    const isNotInParallel = !parallel_id || node.node_type === BlockEnum.End
+    if (isNotInParallel)
+      return
+
+    const isParallelStartNode = !parallelFirstNodeMap[parallel_id]
+    if (isParallelStartNode) {
+      const selfNode = { ...node }
+      node.parallelDetail = {
+        isParallelStartNode: true,
+        children: [selfNode],
+      }
+      parallelFirstNodeMap[parallel_id] = node.node_id
+      const isRootLevel = !parent_parallel_id
+      if (isRootLevel)
+        return
+
+      const parentParallelStartNode = result.find(item => item.node_id === parent_parallel_start_node_id)
+      // append to parent parallel start node
+      if (parentParallelStartNode) {
+        if (!parentParallelStartNode?.parallelDetail) {
+          parentParallelStartNode!.parallelDetail = {
+            children: [],
+          }
+        }
+        if (parentParallelStartNode!.parallelDetail.children)
+          parentParallelStartNode!.parallelDetail.children.push(node)
+      }
+    }
+
+    // append to parallel start node
+    const parallelStartNode = result.find(item => item.node_id === parallelFirstNodeMap[parallel_id])
+    if (parallelStartNode && parallelStartNode.parallelDetail && parallelStartNode!.parallelDetail!.children)
+      parallelStartNode!.parallelDetail!.children.push(node)
+  })
+
+  const filteredInParallelSubNodes = result.filter((node) => {
+    const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
+    const isNotInParallel = !parallel_id || node.node_type === BlockEnum.End
+    if (isNotInParallel)
+      return true
+
+    const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
+
+    if (parent_parallel_id)
+      return false
+
+    const isParallelStartNode = node.parallelDetail?.isParallelStartNode
+    if (!isParallelStartNode)
+      return false
+
+    return true
+  })
+
+  const parallelNumRecord: Record<string, number> = {
+    num: 0,
+  }
+
+  addTitle({
+    list: filteredInParallelSubNodes,
+    level: 1,
+    parallelNumRecord,
+  }, t)
+
+  return filteredInParallelSubNodes
+}
+export default format
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index c89f5536a0..29fc91b06b 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -68,12 +68,18 @@ export type NodeTracing = {
   expand?: boolean // for UI
   details?: NodeTracing[][] // iteration detail
   retryDetail?: NodeTracing[] // retry detail
-  agentLog?: AgentLogItemWithChildren[]
+  retry_index?: number
+  parallelDetail?: { // parallel detail. if is in parallel, this field will be set
+    isParallelStartNode?: boolean
+    parallelTitle?: string
+    branchTitle?: string
+    children?: NodeTracing[]
+  }
   parallel_id?: string
   parallel_start_node_id?: string
   parent_parallel_id?: string
   parent_parallel_start_node_id?: string
-  retry_index?: number
+  agentLog?: AgentLogItemWithChildren[] // agent log
 }
 
 export type FetchWorkflowDraftResponse = {