add meta data of run log

web/app/components/app/workflow-log/index.tsx

@@ -139,7 +139,7 @@ const Logs: FC<ILogsProps> = ({ appId }) => {
         onClose={onCloseDrawer}
         mask={false}
         footer={null}
-        panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl border border-gray-200'
+        panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] rounded-xl border border-gray-200'
       >
         <DetailPanel onClose={onCloseDrawer} appDetail={appDetail} />
       </Drawer>

web/app/components/app/workflow-log/list.tsx

@@ -123,7 +123,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
         onClose={onCloseDrawer}
         mask={isMobile}
         footer={null}
-        panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl border border-gray-200'
+        panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] rounded-xl border border-gray-200'
       >
         <DetailPanel onClose={onCloseDrawer} appDetail={appDetail} />
       </Drawer>

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

@@ -35,8 +35,8 @@ const RunPanel: FC<RunProps> = ({ activeTab, appId }) => {
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detal */}
-      <div className={cn('grow bg-white overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>
-        {currentTab === 'RESULT' && <Result appId={appId}/>}
+      <div className={cn('grow bg-white h-0 overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>
+        {currentTab === 'RESULT' && <Result />}
         {currentTab === 'TRACING' && <Tracing appId={appId}/>}
       </div>
     </div>

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

+'use client'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+// import cn from 'classnames'
+import dayjs from 'dayjs'
+
+type Props = {
+  status: 'running' | 'succeeded' | 'failed' | 'stopped'
+  executor?: string
+  startTime?: number
+  time?: number
+  tokens?: number
+  fee?: number
+  currency?: string
+  steps?: number
+}
+
+const MetaData: FC<Props> = ({
+  status,
+  executor,
+  startTime = 0,
+  time,
+  tokens,
+  fee = 0,
+  currency = 'USD',
+  steps = 1,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='relative'>
+      <div className='h-6 leading-6 text-gray-500 text-xs font-medium'>{t('runLog.meta.title')}</div>
+      <div className='py-1'>
+        <div className='flex'>
+          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.status')}</div>
+          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+            {status === 'running' && (
+              <div className='my-[5px] w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+            )}
+            {status === 'succeeded' && (
+              <span>SUCCESS</span>
+            )}
+            {status === 'failed' && (
+              <span>FAIL</span>
+            )}
+            {status === 'stopped' && (
+              <span>STOP</span>
+            )}
+          </div>
+        </div>
+        <div className='flex'>
+          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.executor')}</div>
+          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+            {status === 'running' && (
+              <div className='my-[5px] w-[88px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+            )}
+            {status !== 'running' && (
+              <span>{executor}</span>
+            )}
+          </div>
+        </div>
+        <div className='flex'>
+          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.startTime')}</div>
+          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+            {status === 'running' && (
+              <div className='my-[5px] w-[72px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+            )}
+            {status !== 'running' && (
+              <span>{dayjs(startTime * 1000).format('YYYY-MM-DD hh:mm:ss')}</span>
+            )}
+          </div>
+        </div>
+        <div className='flex'>
+          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.time')}</div>
+          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+            {status === 'running' && (
+              <div className='my-[5px] w-[72px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+            )}
+            {status !== 'running' && (
+              <span>{`${time}s`}</span>
+            )}
+          </div>
+        </div>
+        <div className='flex'>
+          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.tokens')}</div>
+          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+            {status === 'running' && (
+              <div className='my-[5px] w-[48px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+            )}
+            {status !== 'running' && (
+              <span>{`${tokens} Tokens · ${fee.toLocaleString('en-US', { style: 'currency', currency, minimumFractionDigits: 4 })}`}</span>
+            )}
+          </div>
+        </div>
+        <div className='flex'>
+          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.steps')}</div>
+          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+            {status === 'running' && (
+              <div className='my-[5px] w-[24px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+            )}
+            {status !== 'running' && (
+              <span>{steps}</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MetaData

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

 'use client'
 import type { FC } from 'react'
 // import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+// import { useTranslation } from 'react-i18next'
 // import cn from 'classnames'
 import StatusPanel from './status'
+import MetaData from './meta'
 // import Loading from '@/app/components/base/loading'
-// import Indicator from '@/app/components/header/indicator'
 
 type ResultProps = {
-  appId: string
+  // appId: string
 }
 
-const Result: FC<ResultProps> = ({ appId }) => {
-  const { t } = useTranslation()
+const Result: FC<ResultProps> = () => {
+  // const { t } = useTranslation()
   // const [currentTab, setCurrentTab] = useState<string>(activeTab)
 
   return (
     <div className='bg-white py-2'>
       <div className='px-4 py-2'>
-        <StatusPanel status='running' time={0.653} tokens={27} />
+        <StatusPanel status={'running'} time={0.653} tokens={27} />
       </div>
       <div className='px-4 py-2'>
-        <StatusPanel status='succeeded' time={0.653} tokens={27} />
+        <StatusPanel status={'succeeded'} time={0.653} tokens={27} />
       </div>
       <div className='px-4 py-2'>
-        <StatusPanel status='failed' time={0.653} tokens={27} />
+        <StatusPanel status={'failed'} time={0.653} tokens={27} error='Fail message here' />
       </div>
       <div className='px-4 py-2'>
-        <StatusPanel status='stopped' time={0.653} tokens={27} />
+        <StatusPanel status={'stopped'} time={0.653} tokens={27} />
       </div>
       <div className='px-4 py-2 flex flex-col gap-2'>
         <div>INPUT TODO</div>
         <div>OUPUT TODO</div>
       </div>
       <div className='px-4 py-2'>
-        <div className='h-[0.5px] bg-[rbga(0,0,0,0.05)]'/>
+        <div className='h-[0.5px] bg-black opacity-5'/>
+      </div>
+      <div className='px-4 py-2'>
+        <MetaData status={'running'} />
+      </div>
+      <div className='px-4 py-2'>
+        <MetaData status={'succeeded'} executor={'Vince'} startTime={1702972783} time={0.653} tokens={27} fee={0.035} currency={'USD'} steps={7} />
       </div>
-      <div className='px-4 py-2'>META DATA TODO</div>
     </div>
   )
 }

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

@@ -8,81 +8,91 @@ type ResultProps = {
   status: 'running' | 'succeeded' | 'failed' | 'stopped'
   time?: number
   tokens?: number
+  error?: string
 }
 
 const StatusPanel: FC<ResultProps> = ({
   status,
   time,
   tokens,
+  error,
 }) => {
   const { t } = useTranslation()
 
   return (
     <div
       className={cn(
-        'flex px-3 py-[10px] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs',
+        'px-3 py-[10px] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs',
         status === 'running' && '!bg-primary-50',
         status === 'succeeded' && '!bg-[#ecfdf3]',
         status === 'failed' && '!bg-[#fef3f2]',
         status === 'stopped' && '!bg-gray-200',
       )}
     >
-      <div className='mr-24'>
-        <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.status')}</div>
-        <div
-          className={cn(
-            'flex items-center gap-1 h-[18px] text-xs leading-3 font-semibold',
-            status === 'running' && '!text-primary-600',
-            status === 'succeeded' && '!text-[#039855]',
-            status === 'failed' && '!text-[#d92d20]',
-            status === 'stopped' && '!text-gray-700',
-          )}
-        >
-          {status === 'running' && (
-            <span>Running</span>
-          )}
-          {status === 'succeeded' && (
-            <>
-              <Indicator color={'green'} />
-              <span>SUCCESS</span>
-            </>
-          )}
-          {status === 'failed' && (
-            <>
-              <Indicator color={'red'} />
-              <span>FAIL</span>
-            </>
-          )}
-          {status === 'stopped' && (
-            <>
-              <Indicator color={'gray'} />
-              <span>STOP</span>
-            </>
-          )}
+      <div className='flex'>
+        <div className='mr-24'>
+          <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.status')}</div>
+          <div
+            className={cn(
+              'flex items-center gap-1 h-[18px] text-xs leading-3 font-semibold',
+              status === 'running' && '!text-primary-600',
+              status === 'succeeded' && '!text-[#039855]',
+              status === 'failed' && '!text-[#d92d20]',
+              status === 'stopped' && '!text-gray-700',
+            )}
+          >
+            {status === 'running' && (
+              <span>Running</span>
+            )}
+            {status === 'succeeded' && (
+              <>
+                <Indicator color={'green'} />
+                <span>SUCCESS</span>
+              </>
+            )}
+            {status === 'failed' && (
+              <>
+                <Indicator color={'red'} />
+                <span>FAIL</span>
+              </>
+            )}
+            {status === 'stopped' && (
+              <>
+                <Indicator color={'gray'} />
+                <span>STOP</span>
+              </>
+            )}
+          </div>
         </div>
-      </div>
-      <div className='mr-24'>
-        <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.time')}</div>
-        <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
-          {status === 'running' && (
-            <div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
-          )}
-          {status !== 'running' && (
-            <span>{`${time}s`}</span>
-          )}
+        <div className='mr-24'>
+          <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.time')}</div>
+          <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
+            {status === 'running' && (
+              <div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+            )}
+            {status !== 'running' && (
+              <span>{`${time}s`}</span>
+            )}
+          </div>
         </div>
-      </div>
-      <div className='mr-24'>
-        <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.tokens')}</div>
-        <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
-          {status === 'running' && (
-            <div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
-          )}
-          {status !== 'running' && (
-            <span>{`${tokens} Tokens`}</span>
-          )}
+        <div className='mr-24'>
+          <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.tokens')}</div>
+          <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
+            {status === 'running' && (
+              <div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+            )}
+            {status !== 'running' && (
+              <span>{`${tokens} Tokens`}</span>
+            )}
+          </div>
         </div>
       </div>
+      {status === 'failed' && error && (
+        <>
+          <div className='my-2 h-[0.5px] bg-black opacity-5'/>
+          <div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
+        </>
+      )}
     </div>
   )
 }

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

@@ -6,6 +6,16 @@ const translation = {
     time: 'ELAPSED TIME',
     tokens: 'TOTAL TOKENS',
   },
+  meta: {
+    title: 'METADATA',
+    status: 'Status',
+    version: 'Version',
+    executor: 'Executor',
+    startTime: 'Start Time',
+    time: 'Elapsed Time',
+    tokens: 'Total Tokens',
+    steps: 'Run Steps',
+  },
 }
 
 export default translation

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

@@ -6,6 +6,16 @@ const translation = {
     time: '运行时间',
     tokens: '总 token 数',
   },
+  meta: {
+    title: '元数据',
+    status: '状态',
+    version: '版本',
+    executor: '执行人',
+    startTime: '开始时间',
+    time: '运行时间',
+    tokens: '总 token 数',
+    steps: '运行步数',
+  },
 }
 
 export default translation