feat: Human Input Node (#32060)

The frontend and backend implementation for the human input node.

Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>

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

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import type { WorkflowRunDetailResponse } from '@/models/log'
 import type { NodeTracing } from '@/types/workflow'
-import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -182,6 +181,7 @@ const RunPanel: FC<RunProps> = ({
             steps={runDetail.total_steps}
             exceptionCounts={runDetail.exceptions_count}
             isListening={isListening}
+            workflowRunId={runDetail.id}
           />
         )}
         {!loading && currentTab === 'DETAIL' && !runDetail && isListening && (

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

@@ -50,6 +50,9 @@ const MetaData: FC<Props> = ({
             {status === 'stopped' && (
               <span>STOP</span>
             )}
+            {status === 'paused' && (
+              <span>PENDING</span>
+            )}
           </div>
         </div>
         <div className="flex">
@@ -88,10 +91,10 @@ const MetaData: FC<Props> = ({
         <div className="flex">
           <div className="system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary">{t('meta.tokens', { ns: 'runLog' })}</div>
           <div className="system-xs-regular grow px-2 py-1.5 text-text-secondary">
-            {status === 'running' && (
-              <div className="my-1 h-2 w-[48px] rounded-sm bg-text-quaternary" />
+            {['running', 'paused'].includes(status) && (
+              <div className="my-1 h-2 w-[48px] animate-pulse rounded-sm bg-text-quaternary" />
             )}
-            {status !== 'running' && (
+            {!['running', 'paused'].includes(status) && (
               <span>{`${tokens || 0} Tokens`}</span>
             )}
           </div>

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

@@ -11,8 +11,9 @@ import {
   RiAlertFill,
   RiArrowRightSLine,
   RiCheckboxCircleFill,
-  RiErrorWarningLine,
+  RiErrorWarningFill,
   RiLoader2Line,
+  RiPauseCircleFill,
 } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -144,7 +145,7 @@ const NodePanel: FC<Props> = ({
               {nodeInfo.title}
             </div>
           </Tooltip>
-          {nodeInfo.status !== 'running' && !hideInfo && (
+          {!['running', 'paused'].includes(nodeInfo.status) && !hideInfo && (
             <div className="system-xs-regular shrink-0 text-text-tertiary">
               {nodeInfo.execution_metadata?.total_tokens ? `${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens · ` : ''}
               {`${getTime(nodeInfo.elapsed_time || 0)}`}
@@ -154,11 +155,14 @@ const NodePanel: FC<Props> = ({
             <RiCheckboxCircleFill className="ml-2 h-3.5 w-3.5 shrink-0 text-text-success" />
           )}
           {nodeInfo.status === 'failed' && (
-            <RiErrorWarningLine className="ml-2 h-3.5 w-3.5 shrink-0 text-text-warning" />
+            <RiErrorWarningFill className="ml-2 h-3.5 w-3.5 shrink-0 text-text-destructive" />
           )}
           {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 === 'paused' && (
+            <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')} />
           )}
@@ -229,6 +233,11 @@ const NodePanel: FC<Props> = ({
                   {nodeInfo.error}
                 </StatusContainer>
               )}
+              {(nodeInfo.status === 'paused') && (
+                <StatusContainer status="paused">
+                  <div className="system-xs-regular text-text-warning">{t('nodes.humanInput.log.reasonContent', { ns: 'workflow' })}</div>
+                </StatusContainer>
+              )}
             </div>
             {nodeInfo.inputs && (
               <div className={cn('mb-1')}>

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

@@ -41,6 +41,7 @@ export type ResultPanelProps = {
   exceptionCounts?: number
   execution_metadata?: any
   isListening?: boolean
+  workflowRunId?: string
   handleShowIterationResultList?: (detail: NodeTracing[][], iterDurationMap: any) => void
   handleShowLoopResultList?: (detail: NodeTracing[][], loopDurationMap: any) => void
   onShowRetryDetail?: (detail: NodeTracing[]) => void
@@ -67,6 +68,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
   exceptionCounts,
   execution_metadata,
   isListening = false,
+  workflowRunId,
   handleShowIterationResultList,
   handleShowLoopResultList,
   onShowRetryDetail,
@@ -89,6 +91,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
           error={error}
           exceptionCounts={exceptionCounts}
           isListening={isListening}
+          workflowRunId={workflowRunId}
         />
       </div>
       <div className="px-4">

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

@@ -9,6 +9,7 @@ import StatusContainer from '@/app/components/workflow/run/status-container'
 
 type ResultTextProps = {
   isRunning?: boolean
+  isPaused?: boolean
   outputs?: any
   error?: string
   onClick?: () => void
@@ -17,6 +18,7 @@ type ResultTextProps = {
 
 const ResultText: FC<ResultTextProps> = ({
   isRunning,
+  isPaused,
   outputs,
   error,
   onClick,
@@ -37,7 +39,7 @@ const ResultText: FC<ResultTextProps> = ({
           </StatusContainer>
         </div>
       )}
-      {!isRunning && !outputs && !error && !allFiles?.length && (
+      {!isPaused && !isRunning && !outputs && !error && !allFiles?.length && (
         <div className="mt-[120px] flex flex-col items-center px-4 py-2 text-[13px] leading-[18px] text-gray-500">
           <ImageIndentLeft className="h-6 w-6 text-gray-400" />
           <div className="mr-2">{t('resultEmpty.title', { ns: 'runLog' })}</div>

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

@@ -28,9 +28,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 === 'paused') && '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 === 'paused') && 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 === 'paused') && 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)]',

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

@@ -1,9 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Indicator from '@/app/components/header/indicator'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import { useDocLink } from '@/context/i18n'
+import { useWorkflowPausedDetails } from '@/service/use-log'
 import { cn } from '@/utils/classnames'
 
 type ResultProps = {
@@ -13,6 +15,7 @@ type ResultProps = {
   error?: string
   exceptionCounts?: number
   isListening?: boolean
+  workflowRunId?: string
 }
 
 const StatusPanel: FC<ResultProps> = ({
@@ -22,9 +25,45 @@ const StatusPanel: FC<ResultProps> = ({
   error,
   exceptionCounts,
   isListening = false,
+  workflowRunId,
 }) => {
   const { t } = useTranslation()
   const docLink = useDocLink()
+  const { data: pausedDetails } = useWorkflowPausedDetails({
+    workflowRunId: workflowRunId || '',
+    enabled: status === 'paused',
+  })
+
+  const pausedReasons = useMemo(() => {
+    const reasons: string[] = []
+    if (!pausedDetails)
+      return reasons
+    const hasHumanInputNode = pausedDetails.paused_nodes.some(
+      node => node.pause_type.type === 'human_input',
+    )
+    if (hasHumanInputNode) {
+      reasons.push(t('nodes.humanInput.log.reasonContent', { ns: 'workflow' }))
+    }
+    return reasons
+  }, [pausedDetails, t])
+
+  const pausedInputURLs = useMemo(() => {
+    const inputURLs: string[] = []
+    if (!pausedDetails)
+      return inputURLs
+    const { paused_nodes } = pausedDetails
+    const hasHumanInputNode = paused_nodes.some(
+      node => node.pause_type.type === 'human_input',
+    )
+    if (hasHumanInputNode) {
+      paused_nodes.forEach((node) => {
+        if (node.pause_type.type === 'human_input') {
+          inputURLs.push(node.pause_type.backstage_input_url)
+        }
+      })
+    }
+    return inputURLs
+  }, [pausedDetails])
 
   return (
     <StatusContainer status={status}>
@@ -41,7 +80,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 === 'paused') && 'text-util-colors-warning-warning-600',
               status === 'running' && 'text-util-colors-blue-light-blue-light-600',
             )}
           >
@@ -81,15 +120,21 @@ const StatusPanel: FC<ResultProps> = ({
                 <span>STOP</span>
               </>
             )}
+            {status === 'paused' && (
+              <>
+                <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('resultPanel.time', { ns: 'runLog' })}</div>
           <div className="system-sm-medium flex items-center gap-1 text-text-secondary">
-            {status === 'running' && (
-              <div className="h-2 w-16 rounded-sm bg-text-quaternary" />
+            {(status === 'running' || status === 'paused') && (
+              <div className="h-2 w-16 animate-pulse rounded-sm bg-text-quaternary" />
             )}
-            {status !== 'running' && (
+            {status !== 'running' && status !== 'paused' && (
               <span>{time ? `${time?.toFixed(3)}s` : '-'}</span>
             )}
           </div>
@@ -97,10 +142,10 @@ const StatusPanel: FC<ResultProps> = ({
         <div className="flex-[33%]">
           <div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('resultPanel.tokens', { ns: 'runLog' })}</div>
           <div className="system-sm-medium flex items-center gap-1 text-text-secondary">
-            {status === 'running' && (
-              <div className="h-2 w-20 rounded-sm bg-text-quaternary" />
+            {(status === 'running' || status === 'paused') && (
+              <div className="h-2 w-20 animate-pulse rounded-sm bg-text-quaternary" />
             )}
-            {status !== 'running' && (
+            {status !== 'running' && status !== 'paused' && (
               <span>{`${tokens || 0} Tokens`}</span>
             )}
           </div>
@@ -149,6 +194,40 @@ const StatusPanel: FC<ResultProps> = ({
           </>
         )
       }
+      {status === 'paused' && (
+        <>
+          <div className="my-2 h-[0.5px] bg-divider-deep" />
+          <div className="system-xs-medium flex flex-col gap-y-2">
+            <div className="flex flex-col gap-y-0.5">
+              <div className="system-2xs-medium-uppercase text-text-tertiary">{t('nodes.humanInput.log.reason', { ns: 'workflow' })}</div>
+              {
+                pausedReasons.length > 0
+                  ? pausedReasons.map(reason => (
+                      <div className="system-xs-medium truncate text-text-secondary" key={reason}>{reason}</div>
+                    ))
+                  : (
+                      <div className="h-2 w-20 animate-pulse rounded-sm bg-text-quaternary" />
+                    )
+              }
+            </div>
+            {pausedInputURLs.length > 0 && (
+              <div className="flex flex-col gap-y-0.5">
+                <div className="system-2xs-medium-uppercase text-text-tertiary">{t('nodes.humanInput.log.backstageInputURL', { ns: 'workflow' })}</div>
+                {pausedInputURLs.map(url => (
+                  <a
+                    key={url}
+                    href={url}
+                    target="_blank"
+                    className="system-xs-medium text-text-accent"
+                  >
+                    {url}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
     </StatusContainer>
   )
 }

web/app/components/workflow/run/utils/format-log/human-input/index.ts

@@ -0,0 +1,59 @@
+import type { NodeTracing } from '@/types/workflow'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+/**
+ * Format human-input nodes to ensure only the latest status is kept for each node.
+ * Human-input nodes can have multiple log entries as their status changes
+ * (e.g., running -> paused -> succeeded/failed).
+ * This function keeps only the entry with the latest index for each unique node_id.
+ */
+const formatHumanInputNode = (list: NodeTracing[]): NodeTracing[] => {
+  // Group human-input nodes by node_id
+  const humanInputNodeMap = new Map<string, NodeTracing>()
+
+  // Track which node_ids are human-input type
+  const humanInputNodeIds = new Set<string>()
+
+  // First pass: identify human-input nodes and keep the one with the highest index
+  list.forEach((item) => {
+    if (item.node_type === BlockEnum.HumanInput) {
+      humanInputNodeIds.add(item.node_id)
+
+      const existingNode = humanInputNodeMap.get(item.node_id)
+      if (!existingNode || item.index > existingNode.index) {
+        humanInputNodeMap.set(item.node_id, item)
+      }
+    }
+  })
+
+  // If no human-input nodes, return the list as is
+  if (humanInputNodeIds.size === 0)
+    return list
+
+  // Second pass: filter the list to remove duplicate human-input nodes
+  // and keep only the latest one for each node_id
+  const result: NodeTracing[] = []
+  const addedHumanInputNodeIds = new Set<string>()
+
+  list.forEach((item) => {
+    if (item.node_type === BlockEnum.HumanInput) {
+      // Only add the human-input node with the highest index
+      if (!addedHumanInputNodeIds.has(item.node_id)) {
+        const latestNode = humanInputNodeMap.get(item.node_id)
+        if (latestNode) {
+          result.push(latestNode)
+          addedHumanInputNodeIds.add(item.node_id)
+        }
+      }
+      // Skip duplicate human-input nodes
+    }
+    else {
+      // Keep all non-human-input nodes
+      result.push(item)
+    }
+  })
+
+  return result
+}
+
+export default formatHumanInputNode

web/app/components/workflow/run/utils/format-log/index.ts

@@ -2,6 +2,7 @@ import type { NodeTracing } from '@/types/workflow'
 import { cloneDeep } from 'es-toolkit/object'
 import { BlockEnum } from '../../../types'
 import formatAgentNode from './agent'
+import formatHumanInputNode from './human-input'
 import { addChildrenToIterationNode } from './iteration'
 import { addChildrenToLoopNode } from './loop'
 import formatParallelNode from './parallel'
@@ -83,7 +84,8 @@ const formatToTracingNodeList = (list: NodeTracing[], t: any) => {
   * Because Handle struct node will put the node in different
   */
   const formattedAgentList = formatAgentNode(allItems)
-  const formattedRetryList = formatRetryNode(formattedAgentList) // retry one node
+  const formattedHumanInputList = formatHumanInputNode(formattedAgentList) // Keep only latest status for human-input nodes
+  const formattedRetryList = formatRetryNode(formattedHumanInputList) // retry one node
   // would change the structure of the list. Iteration and parallel can include each other.
   const formattedLoopAndIterationList = formatIterationAndLoopNode(formattedRetryList, t)
   const formattedParallelList = formatParallelNode(formattedLoopAndIterationList, t)