add run log status

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

@@ -25,14 +25,14 @@ const RunPanel: FC<RunProps> = ({ activeTab, appId }) => {
             currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
           )}
           onClick={() => setCurrentTab('RESULT')}
-        >{t('appLog.runDetail.result')}</div>
+        >{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 === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
           )}
           onClick={() => setCurrentTab('TRACING')}
-        >{t('appLog.runDetail.tracing')}</div>
+        >{t('runLog.tracing')}</div>
       </div>
       {/* panel detal */}
       <div className={cn('grow bg-white overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>

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

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 // import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 // import cn from 'classnames'
+import StatusPanel from './status'
 // import Loading from '@/app/components/base/loading'
 // import Indicator from '@/app/components/header/indicator'
 
@@ -15,8 +16,27 @@ const Result: FC<ResultProps> = ({ appId }) => {
   // const [currentTab, setCurrentTab] = useState<string>(activeTab)
 
   return (
-    <div className='bg-white'>
-      Result panel = TODO
+    <div className='bg-white py-2'>
+      <div className='px-4 py-2'>
+        <StatusPanel status='running' time={0.653} tokens={27} />
+      </div>
+      <div className='px-4 py-2'>
+        <StatusPanel status='succeeded' time={0.653} tokens={27} />
+      </div>
+      <div className='px-4 py-2'>
+        <StatusPanel status='failed' time={0.653} tokens={27} />
+      </div>
+      <div className='px-4 py-2'>
+        <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>
+      <div className='px-4 py-2'>META DATA TODO</div>
     </div>
   )
 }

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

@@ -0,0 +1,90 @@
+'use client'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import Indicator from '@/app/components/header/indicator'
+
+type ResultProps = {
+  status: 'running' | 'succeeded' | 'failed' | 'stopped'
+  time?: number
+  tokens?: number
+}
+
+const StatusPanel: FC<ResultProps> = ({
+  status,
+  time,
+  tokens,
+}) => {
+  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',
+        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>
+      </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>
+      </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>
+      </div>
+    </div>
+  )
+}
+
+export default StatusPanel