add icon for tool node

web/app/components/workflow/hooks/use-workflow-run.ts

@@ -271,8 +271,14 @@ export const useWorkflowRun = () => {
           setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
             const currentIndex = draft.tracing!.findIndex(trace => trace.node_id === data.node_id)
 
-            if (currentIndex > -1 && draft.tracing)
-              draft.tracing[currentIndex] = data as any
+            if (currentIndex > -1 && draft.tracing) {
+              draft.tracing[currentIndex] = {
+                ...(draft.tracing[currentIndex].extras
+                  ? { extras: draft.tracing[currentIndex].extras }
+                  : {}),
+                ...data,
+              } as any
+            }
           }))
 
           const newNodes = produce(nodes, (draft) => {

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

@@ -4,6 +4,7 @@ import {
 } from 'react'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import OutputPanel from '../run/output-panel'
 import ResultPanel from '../run/result-panel'
 import TracingPanel from '../run/tracing-panel'
 import { useStore } from '../store'
@@ -34,6 +35,13 @@ const WorkflowPreview = () => {
             )}
             onClick={() => 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',
+            )}
+            onClick={() => 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',
@@ -42,8 +50,19 @@ const WorkflowPreview = () => {
             onClick={() => switchTab('TRACING')}
           >{t('runLog.tracing')}</div>
         </div>
-        <div className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab === 'TRACING' && '!bg-gray-50')}>
+        <div className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-gray-50')}>
           {currentTab === 'RESULT' && (
+            <OutputPanel
+              outputs={workflowRunningData?.result?.outputs}
+              error={workflowRunningData?.result?.error}
+            />
+          )}
+          {currentTab === 'RESULT' && !workflowRunningData?.result && (
+            <div className='flex h-full items-center justify-center bg-white'>
+              <Loading />
+            </div>
+          )}
+          {currentTab === 'DETAIL' && (
             <ResultPanel
               inputs={workflowRunningData?.result?.inputs}
               outputs={workflowRunningData?.result?.outputs}
@@ -56,7 +75,7 @@ const WorkflowPreview = () => {
               steps={workflowRunningData?.result?.total_steps}
             />
           )}
-          {currentTab === 'RESULT' && !workflowRunningData?.result && (
+          {currentTab === 'DETAIL' && !workflowRunningData?.result && (
             <div className='flex h-full items-center justify-center bg-white'>
               <Loading />
             </div>

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

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
 import { ToastContext } from '@/app/components/base/toast'
@@ -14,7 +15,7 @@ import type { WorkflowRunDetailResponse } from '@/models/log'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
 export type RunProps = {
-  activeTab?: 'RESULT' | 'TRACING'
+  activeTab?: 'RESULT' | 'DETAIL' | 'TRACING'
   runID: string
   getResultCallback?: (result: WorkflowRunDetailResponse) => void
 }
@@ -100,6 +101,13 @@ const RunPanel: FC<RunProps> = ({ activeTab = 'RESULT', runID, getResultCallback
           )}
           onClick={() => 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',
+          )}
+          onClick={() => 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',
@@ -109,13 +117,19 @@ const RunPanel: FC<RunProps> = ({ activeTab = 'RESULT', runID, getResultCallback
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detal */}
-      <div className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab === 'TRACING' && '!bg-gray-50')}>
+      <div className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-gray-50')}>
         {loading && (
           <div className='flex h-full items-center justify-center bg-white'>
             <Loading />
           </div>
         )}
         {!loading && currentTab === 'RESULT' && runDetail && (
+          <OutputPanel
+            outputs={runDetail.outputs}
+            error={runDetail.error}
+          />
+        )}
+        {!loading && currentTab === 'DETAIL' && runDetail && (
           <ResultPanel
             inputs={runDetail.inputs}
             outputs={runDetail.outputs}

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

@@ -58,7 +58,7 @@ const NodePanel: FC<Props> = ({ nodeInfo, className, hideInfo = false }) => {
               !collapseState && 'rotate-90',
             )}
           />
-          <BlockIcon className='shrink-0 mr-2' type={nodeInfo.node_type} />
+          <BlockIcon className='shrink-0 mr-2' type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon} />
           <div className='grow text-gray-700 text-[13px] leading-[16px] font-semibold truncate' title={nodeInfo.title}>{nodeInfo.title}</div>
           {nodeInfo.status !== 'running' && !hideInfo && (
             <div className='shrink-0 text-gray-500 text-xs leading-[18px]'>{`${getTime(nodeInfo.elapsed_time || 0)} · ${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens`}</div>

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

@@ -0,0 +1,48 @@
+'use client'
+import type { FC } from 'react'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { Markdown } from '@/app/components/base/markdown'
+
+type OutputPanelProps = {
+  outputs?: any
+  error?: string
+}
+
+const OutputPanel: FC<OutputPanelProps> = ({
+  outputs,
+  error,
+}) => {
+  return (
+    <div className='bg-gray-50 py-2'>
+      {error && (
+        <div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs'>
+          <div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
+        </div>
+      )}
+      {!outputs && (
+        <div className='px-4 py-2'>
+          <Markdown content='No Output' />
+        </div>
+      )}
+      {outputs && Object.keys(outputs).length === 1 && (
+        <div className='px-4 py-2'>
+          <Markdown content={outputs[Object.keys(outputs)[0]] || ''} />
+        </div>
+      )}
+      {outputs && Object.keys(outputs).length > 1 && (
+        <div className='px-4 py-2 flex flex-col gap-2'>
+          <CodeEditor
+            readOnly
+            title={<div></div>}
+            language={CodeLanguage.json}
+            value={outputs}
+            isJSONStringifyBeauty
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default OutputPanel

web/i18n/en-US/run-log.ts

@@ -1,5 +1,6 @@
 const translation = {
   result: 'RESULT',
+  detail: 'DETAIL',
   tracing: 'TRACING',
   resultPanel: {
     status: 'STATUS',

web/i18n/zh-Hans/run-log.ts

@@ -1,5 +1,6 @@
 const translation = {
   result: '结果',
+  detail: '详情',
   tracing: '追踪',
   resultPanel: {
     status: '状态',

web/types/workflow.ts

@@ -30,6 +30,7 @@ export type NodeTracing = {
     email: string
   }
   finished_at: number
+  extras?: any
   expand?: boolean // for UI
 }
 
@@ -96,6 +97,7 @@ export type NodeStartedResponse = {
     predecessor_node_id?: string
     inputs: any
     created_at: number
+    extras?: any
   }
 }