add suspended status

2025-08-08 11:27:11 +08:00 · 2025-08-08 11:27:11 +08:00 · c28720529e
parent 242826013e
commit c28720529e
6 changed files with 62 additions and 8 deletions
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@ -55,6 +55,14 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
        </div>
      )
    }
+    if (status === 'suspended') {
+      return (
+        <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
+          <Indicator color={'yellow'} />
+          <span className='text-util-colors-warning-warning-600'>Pending</span>
+        </div>
+      )
+    }
    if (status === 'running') {
      return (
        <div className='system-xs-semibold-uppercase inline-flex items-center gap-1'>
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@ -8,6 +8,7 @@ import {
  RiCheckboxCircleFill,
  RiErrorWarningLine,
  RiLoader2Line,
+  RiPauseCircleFill,
 } from '@remixicon/react'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
@ -152,6 +153,9 @@ const NodePanel: FC<Props> = ({
          {nodeInfo.status === 'stopped' && (
            <RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
          )}
+          {nodeInfo.status === 'suspended' && (
+            <RiPauseCircleFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
+          )}
          {nodeInfo.status === 'exception' && (
            <RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
          )}
@ -222,6 +226,11 @@ const NodePanel: FC<Props> = ({
                  {nodeInfo.error}
                </StatusContainer>
              )}
+              {(nodeInfo.status === 'suspended') && (
+                <StatusContainer status='suspended'>
+                  <div className='system-xs-regular text-text-warning'>{t('workflow.nodes.humanInput.log.reasonContent')}</div>
+                </StatusContainer>
+              )}
            </div>
            {nodeInfo.inputs && (
              <div className={cn('mb-1')}>
--- a/web/app/components/workflow/run/status-container.tsx
+++ b/web/app/components/workflow/run/status-container.tsx
@ -27,9 +27,9 @@ const StatusContainer: FC<Props> = ({
        status === 'failed' && 'border-[rgba(240,68,56,0.8)] bg-workflow-display-error-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-error.svg)] text-text-warning',
        status === 'failed' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(240,68,56,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
        status === 'failed' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(240,68,56,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
-        status === 'stopped' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
-        status === 'stopped' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
-        status === 'stopped' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
+        (status === 'stopped' || status === 'suspended') && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
+        (status === 'stopped' || status === 'suspended') && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
+        (status === 'stopped' || status === 'suspended') && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
        status === 'exception' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
        status === 'exception' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
        status === 'exception' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@ -12,6 +12,7 @@ type ResultProps = {
  tokens?: number
  error?: string
  exceptionCounts?: number
+  inputURL?: string
 }

 const StatusPanel: FC<ResultProps> = ({
@ -20,6 +21,7 @@ const StatusPanel: FC<ResultProps> = ({
  tokens,
  error,
  exceptionCounts,
+  inputURL,
 }) => {
  const { t } = useTranslation()
  const docLink = useDocLink()
@ -38,7 +40,7 @@ const StatusPanel: FC<ResultProps> = ({
              status === 'succeeded' && 'text-util-colors-green-green-600',
              status === 'partial-succeeded' && 'text-util-colors-green-green-600',
              status === 'failed' && 'text-util-colors-red-red-600',
-              status === 'stopped' && 'text-util-colors-warning-warning-600',
+              (status === 'stopped' || status === 'suspended') && 'text-util-colors-warning-warning-600',
              status === 'running' && 'text-util-colors-blue-light-blue-light-600',
            )}
          >
@ -78,15 +80,21 @@ const StatusPanel: FC<ResultProps> = ({
                <span>STOP</span>
              </>
            )}
+            {status === 'suspended' && (
+              <>
+                <Indicator color={'yellow'} />
+                <span>PENDING</span>
+              </>
+            )}
          </div>
        </div>
        <div className='max-w-[152px] flex-[33%]'>
          <div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('runLog.resultPanel.time')}</div>
          <div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
-            {status === 'running' && (
+            {(status === 'running' || status === 'suspended') && (
              <div className='h-2 w-16 rounded-sm bg-text-quaternary' />
            )}
-            {status !== 'running' && (
+            {status !== 'running' && status !== 'suspended' && (
              <span>{time ? `${time?.toFixed(3)}s` : '-'}</span>
            )}
          </div>
@ -94,10 +102,10 @@ const StatusPanel: FC<ResultProps> = ({
        <div className='flex-[33%]'>
          <div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('runLog.resultPanel.tokens')}</div>
          <div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
-            {status === 'running' && (
+            {(status === 'running' || status === 'suspended') && (
              <div className='h-2 w-20 rounded-sm bg-text-quaternary' />
            )}
-            {status !== 'running' && (
+            {status !== 'running' && status !== 'suspended' && (
              <span>{`${tokens || 0} Tokens`}</span>
            )}
          </div>
@ -146,6 +154,25 @@ const StatusPanel: FC<ResultProps> = ({
          </>
        )
      }
+      {status === 'suspended' && (
+        <>
+          <div className='my-2 h-[0.5px] bg-divider-deep'/>
+          <div className='system-xs-medium space-y-1 text-text-warning'>
+            <div className='flex items-center gap-1'>
+              <div className='w-[96px] uppercase'>{t('workflow.nodes.humanInput.log.reason')}</div>
+              <div className='truncate'>{t('workflow.nodes.humanInput.log.reasonContent')}</div>
+            </div>
+            <div className='flex items-center gap-1'>
+              <div className='w-[96px] uppercase'>{t('workflow.nodes.humanInput.log.inputURL')}</div>
+              <a
+                href={inputURL}
+                target='_blank'
+                className='text-text-accent'
+              >{inputURL}</a>
+            </div>
+          </div>
+        </>
+      )}
    </StatusContainer>
  )
 }
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@ -982,6 +982,11 @@ const translation = {
        noDeliveryMethodEnabled: 'Please enable at least one delivery method',
        noUserActions: 'Please add at least one user action',
      },
+      log: {
+        reason: 'Reason:',
+        reasonContent: 'Human input required to proceed',
+        inputURL: 'Input URL:',
+      },
    },
  },
  tracing: {
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@ -983,6 +983,11 @@ const translation = {
        noDeliveryMethodEnabled: '请至少启用一种提交方式',
        noUserActions: '请添加至少一个用户操作',
      },
+      log: {
+        reason: '原因：',
+        reasonContent: '需要人类输入才能继续',
+        inputURL: '输入 URL ：',
+      },
    },
  },
  tracing: {