fix result panel

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

@@ -1,4 +1,5 @@
 import { memo } from 'react'
+import cn from 'classnames'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
@@ -6,7 +7,7 @@ import { WorkflowRunningStatus } from '../types'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
-import { useStore } from '@/app/components/workflow/store'
+import { useStore as useRunHistoryStore } from '@/app/components/workflow/store'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { fetchWorkflowRunHistory } from '@/service/workflow'
 import Loading from '@/app/components/base/loading'
@@ -14,6 +15,7 @@ import Loading from '@/app/components/base/loading'
 const RunHistory = () => {
   const { t } = useTranslation()
   const appDetail = useAppStore(state => state.appDetail)
+  const workflowRunId = useRunHistoryStore(state => state.workflowRunId)
   const { data, isLoading } = useSWR(appDetail ? `/apps/${appDetail.id}/workflow-runs` : null, fetchWorkflowRunHistory)
 
   if (!appDetail)
@@ -25,7 +27,7 @@ const RunHistory = () => {
         {t('workflow.common.runHistory')}
         <div
           className='flex items-center justify-center w-6 h-6 cursor-pointer'
-          onClick={() => useStore.setState({ showRunHistory: false })}
+          onClick={() => useRunHistoryStore.setState({ showRunHistory: false })}
         >
           <XClose className='w-4 h-4 text-gray-500' />
         </div>
@@ -42,8 +44,11 @@ const RunHistory = () => {
           data?.data.map(item => (
             <div
               key={item.id}
-              className='flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer'
-              onClick={() => useStore.setState({ workflowRunId: item.id })}
+              className={cn(
+                'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer',
+                item.id === workflowRunId && 'bg-primary-50',
+              )}
+              onClick={() => useRunHistoryStore.setState({ workflowRunId: item.id, runningStatus: item.status as WorkflowRunningStatus })}
             >
               {
                 appDetail?.mode === 'workflow' && item.status === WorkflowRunningStatus.Failed && (
@@ -56,7 +61,12 @@ const RunHistory = () => {
                 )
               }
               <div>
-                <div className='flex items-center text-[13px] font-medium text-primary-600 leading-[18px]'>
+                <div
+                  className={cn(
+                    'flex items-center text-[13px] font-medium leading-[18px]',
+                    item.id === workflowRunId && 'text-primary-600',
+                  )}
+                >
                   Test Run#{item.sequence_number}
                 </div>
                 <div className='flex items-center text-xs text-gray-500 leading-[18px]'>

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

@@ -11,6 +11,7 @@ type Props = {
   time?: number
   tokens?: number
   steps?: number
+  showSteps?: boolean
 }
 
 const MetaData: FC<Props> = ({
@@ -20,6 +21,7 @@ const MetaData: FC<Props> = ({
   time,
   tokens,
   steps = 1,
+  showSteps = true,
 }) => {
   const { t } = useTranslation()
 
@@ -73,7 +75,7 @@ const MetaData: FC<Props> = ({
               <div className='my-[5px] w-[72px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
             )}
             {status !== 'running' && (
-              <span>{`${time}s`}</span>
+              <span>{`${time?.toFixed(3)}s`}</span>
             )}
           </div>
         </div>
@@ -88,7 +90,7 @@ const MetaData: FC<Props> = ({
             )}
           </div>
         </div>
-        {steps > 0 && (
+        {showSteps && (
           <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]'>

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

@@ -17,6 +17,7 @@ type ResultPanelProps = {
   created_by: string
   finished_at?: number
   steps: number
+  showSteps?: boolean
 }
 
 const ResultPanel: FC<ResultPanelProps> = ({
@@ -30,6 +31,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
   created_at,
   created_by,
   steps,
+  showSteps,
 }) => {
   return (
     <div className='bg-white py-2'>
@@ -46,7 +48,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
           readOnly
           title={<div>INPUT</div>}
           language={CodeLanguage.json}
-          value={inputs || ''}
+          value={JSON.stringify(inputs)}
           onChange={() => {}}
         />
         {process_data && (
@@ -54,7 +56,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
             readOnly
             title={<div>PROCESS DATA</div>}
             language={CodeLanguage.json}
-            value={process_data}
+            value={JSON.stringify(process_data)}
             onChange={() => {}}
           />
         )}
@@ -63,7 +65,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
             readOnly
             title={<div>OUTPUT</div>}
             language={CodeLanguage.json}
-            value={outputs}
+            value={JSON.stringify(outputs)}
             onChange={() => {}}
           />
         )}
@@ -79,6 +81,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
           time={elapsed_time}
           tokens={total_tokens}
           steps={steps}
+          showSteps={showSteps}
         />
       </div>
     </div>

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

@@ -30,7 +30,7 @@ const StatusPanel: FC<ResultProps> = ({
       )}
     >
       <div className='flex'>
-        <div className='mr-24'>
+        <div className='flex-[33%] max-w-[120px]'>
           <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.status')}</div>
           <div
             className={cn(
@@ -64,18 +64,18 @@ const StatusPanel: FC<ResultProps> = ({
             )}
           </div>
         </div>
-        <div className='mr-24'>
+        <div className='flex-[33%] max-w-[152px]'>
           <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>
+              <span>{`${time?.toFixed(3)}s`}</span>
             )}
           </div>
         </div>
-        <div className='mr-24'>
+        <div className='flex-[33%]'>
           <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' && (