refactor(web): redesign workflow checklist panel with grouped tree view and Popover primitive

Migrate checklist from flat card list using deprecated PortalToFollowElem to
grouped tree view using base-ui Popover. Split into checklist/ directory with
separate components: plugin group with batch install, per-node groups with
sub-items and "Go to fix" hover action, and tree-line SVG indicators.

web/app/components/workflow/header/checklist.tsx

@@ -1,201 +0,0 @@
-import type { ChecklistItem } from '../hooks/use-checklist'
-import type {
-  BlockEnum,
-  CommonEdgeType,
-} from '../types'
-import {
-  RiCloseLine,
-  RiListCheck3,
-} from '@remixicon/react'
-import {
-  memo,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  useEdges,
-} from 'reactflow'
-import { Warning } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import { IconR } from '@/app/components/base/icons/src/vender/line/arrows'
-import {
-  ChecklistSquare,
-} from '@/app/components/base/icons/src/vender/line/general'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
-import { cn } from '@/utils/classnames'
-import BlockIcon from '../block-icon'
-import {
-  useChecklist,
-  useNodesInteractions,
-} from '../hooks'
-
-type WorkflowChecklistProps = {
-  disabled: boolean
-  showGoTo?: boolean
-  onItemClick?: (item: ChecklistItem) => void
-}
-const WorkflowChecklist = ({
-  disabled,
-  showGoTo = true,
-  onItemClick,
-}: WorkflowChecklistProps) => {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const edges = useEdges<CommonEdgeType>()
-  const nodes = useNodes()
-  const needWarningNodes = useChecklist(nodes, edges)
-  const { handleNodeSelect } = useNodesInteractions()
-
-  const handleChecklistItemClick = (item: ChecklistItem) => {
-    const goToEnabled = showGoTo && item.canNavigate && !item.disableGoTo
-    if (!goToEnabled)
-      return
-    if (onItemClick)
-      onItemClick(item)
-    else
-      handleNodeSelect(item.id)
-    setOpen(false)
-  }
-
-  return (
-    <PortalToFollowElem
-      placement="bottom-end"
-      offset={{
-        mainAxis: 12,
-        crossAxis: 4,
-      }}
-      open={open}
-      onOpenChange={setOpen}
-    >
-      <PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}>
-        <div
-          className={cn(
-            'relative ml-0.5 flex h-7 w-7 items-center justify-center rounded-md',
-            disabled && 'cursor-not-allowed opacity-50',
-          )}
-        >
-          <div
-            className={cn('group flex h-full w-full cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
-          >
-            <RiListCheck3
-              className={cn('h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
-            />
-          </div>
-          {
-            !!needWarningNodes.length && (
-              <div className="absolute -right-1.5 -top-1.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-gray-100 bg-[#F79009] text-[11px] font-semibold text-white">
-                {needWarningNodes.length}
-              </div>
-            )
-          }
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-[12]">
-        <div
-          className="w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg"
-          style={{
-            maxHeight: 'calc(2 / 3 * 100vh)',
-          }}
-        >
-          <div className="text-md sticky top-0 z-[1] flex h-[44px] items-center bg-components-panel-bg pl-4 pr-3 pt-3 font-semibold text-text-primary">
-            <div className="grow">
-              {t('panel.checklist', { ns: 'workflow' })}
-              {needWarningNodes.length ? `(${needWarningNodes.length})` : ''}
-            </div>
-            <div
-              className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center"
-              onClick={() => setOpen(false)}
-            >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-            </div>
-          </div>
-          <div className="pb-2">
-            {
-              !!needWarningNodes.length && (
-                <>
-                  <div className="px-4 pt-1 text-xs text-text-tertiary">{t('panel.checklistTip', { ns: 'workflow' })}</div>
-                  <div className="px-4 py-2">
-                    {
-                      needWarningNodes.map(node => (
-                        <div
-                          key={node.id}
-                          className={cn(
-                            'group mb-2 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0',
-                            showGoTo && node.canNavigate && !node.disableGoTo ? 'cursor-pointer' : 'cursor-default opacity-80',
-                          )}
-                          onClick={() => handleChecklistItemClick(node)}
-                        >
-                          <div className="flex h-9 items-center p-2 text-xs font-medium text-text-secondary">
-                            <BlockIcon
-                              type={node.type as BlockEnum}
-                              className="mr-1.5"
-                              toolIcon={node.toolIcon}
-                            />
-                            <span className="grow truncate">
-                              {node.title}
-                            </span>
-                            {
-                              (showGoTo && node.canNavigate && !node.disableGoTo) && (
-                                <div className="flex h-4 w-[60px] shrink-0 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-                                  <span className="whitespace-nowrap text-xs font-medium leading-4 text-primary-600">
-                                    {t('panel.goTo', { ns: 'workflow' })}
-                                  </span>
-                                  <IconR className="h-3.5 w-3.5 text-primary-600" />
-                                </div>
-                              )
-                            }
-                          </div>
-                          <div
-                            className={cn(
-                              'rounded-b-lg border-t-[0.5px] border-divider-regular',
-                              (node.unConnected || node.errorMessage) && 'bg-gradient-to-r from-components-badge-bg-orange-soft to-transparent',
-                            )}
-                          >
-                            {
-                              node.unConnected && (
-                                <div className="px-3 py-1 first:pt-1.5 last:pb-1.5">
-                                  <div className="flex text-xs leading-4 text-text-tertiary">
-                                    <Warning className="mr-2 mt-[2px] h-3 w-3 text-[#F79009]" />
-                                    {t('common.needConnectTip', { ns: 'workflow' })}
-                                  </div>
-                                </div>
-                              )
-                            }
-                            {
-                              node.errorMessage && (
-                                <div className="px-3 py-1 first:pt-1.5 last:pb-1.5">
-                                  <div className="flex text-xs leading-4 text-text-tertiary">
-                                    <Warning className="mr-2 mt-[2px] h-3 w-3 text-[#F79009]" />
-                                    {node.errorMessage}
-                                  </div>
-                                </div>
-                              )
-                            }
-                          </div>
-                        </div>
-                      ))
-                    }
-                  </div>
-                </>
-              )
-            }
-            {
-              !needWarningNodes.length && (
-                <div className="mx-4 mb-3 rounded-lg bg-components-panel-bg py-4 text-center text-xs text-text-tertiary">
-                  <ChecklistSquare className="mx-auto mb-[5px] h-8 w-8 text-text-quaternary" />
-                  {t('panel.checklistResolved', { ns: 'workflow' })}
-                </div>
-              )
-            }
-          </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-
-export default memo(WorkflowChecklist)

web/app/components/workflow/header/checklist/index.tsx

@@ -0,0 +1,150 @@
+import type { ChecklistItem } from '../../hooks/use-checklist'
+import type {
+  CommonEdgeType,
+} from '../../types'
+import {
+  memo,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  useEdges,
+} from 'reactflow'
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
+import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
+import { cn } from '@/utils/classnames'
+import {
+  useChecklist,
+  useNodesInteractions,
+} from '../../hooks'
+import { ChecklistNodeGroup } from './node-group'
+import { ChecklistPluginGroup } from './plugin-group'
+
+type WorkflowChecklistProps = {
+  disabled: boolean
+  showGoTo?: boolean
+  onItemClick?: (item: ChecklistItem) => void
+}
+
+const WorkflowChecklist = ({
+  disabled,
+  showGoTo = true,
+  onItemClick,
+}: WorkflowChecklistProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const edges = useEdges<CommonEdgeType>()
+  const nodes = useNodes()
+  const needWarningNodes = useChecklist(nodes, edges)
+  const { handleNodeSelect } = useNodesInteractions()
+
+  const { pluginItems, nodeItems } = useMemo(() => {
+    const plugins: ChecklistItem[] = []
+    const regular: ChecklistItem[] = []
+    for (const item of needWarningNodes) {
+      if (item.isPluginMissing)
+        plugins.push(item)
+      else
+        regular.push(item)
+    }
+    return { pluginItems: plugins, nodeItems: regular }
+  }, [needWarningNodes])
+
+  const handleItemClick = (item: ChecklistItem) => {
+    if (onItemClick)
+      onItemClick(item)
+    else
+      handleNodeSelect(item.id)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={newOpen => !disabled && setOpen(newOpen)}>
+      <PopoverTrigger
+        render={(
+          <div
+            className={cn(
+              'relative ml-0.5 flex h-7 w-7 items-center justify-center rounded-md',
+              disabled && 'cursor-not-allowed opacity-50',
+            )}
+            aria-disabled={disabled || undefined}
+          >
+            <div
+              className={cn('group flex h-full w-full cursor-pointer items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
+            >
+              <span
+                className={cn('i-ri-list-check-3 h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
+              />
+            </div>
+            {!!needWarningNodes.length && (
+              <div className="absolute -right-1.5 -top-1.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full border border-gray-100 bg-text-warning-secondary text-[11px] font-semibold text-white">
+                {needWarningNodes.length}
+              </div>
+            )}
+          </div>
+        )}
+      />
+      <PopoverContent
+        placement="bottom-start"
+        sideOffset={12}
+        alignOffset={-30}
+        popupClassName="w-[420px] rounded-2xl bg-background-default-subtle"
+      >
+        <div
+          className="overflow-y-auto"
+          style={{ maxHeight: 'calc(2 / 3 * 100vh)' }}
+        >
+          <div className="flex flex-col gap-0.5 px-3 pb-1 pt-3.5">
+            <div className="flex items-start px-1">
+              <div className="min-w-0 grow pr-8">
+                <h2 className="text-base font-semibold leading-6 text-text-primary">
+                  {t('panel.checklist', { ns: 'workflow' })}
+                  {needWarningNodes.length > 0 && `(${needWarningNodes.length})`}
+                </h2>
+              </div>
+              <PopoverClose className="-mr-0.5 -mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg">
+                <span className="i-ri-close-line size-4 text-text-tertiary" />
+              </PopoverClose>
+            </div>
+            {needWarningNodes.length > 0 && (
+              <p className="px-1 text-xs leading-4 text-text-tertiary">
+                {t('panel.checklistDescription', { ns: 'workflow' })}
+              </p>
+            )}
+          </div>
+
+          {needWarningNodes.length > 0
+            ? (
+                <div className="flex flex-col gap-1 px-4 pb-4 pt-1">
+                  {pluginItems.length > 0 && (
+                    <ChecklistPluginGroup items={pluginItems} />
+                  )}
+                  {nodeItems.map(item => (
+                    <ChecklistNodeGroup
+                      key={item.id}
+                      item={item}
+                      showGoTo={showGoTo}
+                      onItemClick={handleItemClick}
+                    />
+                  ))}
+                </div>
+              )
+            : (
+                <div className="mx-4 mb-3 rounded-lg py-4 text-center text-xs text-text-tertiary">
+                  <span className="i-custom-vender-line-general-checklist-square mx-auto mb-[5px] block h-8 w-8 text-text-quaternary" />
+                  {t('panel.checklistResolved', { ns: 'workflow' })}
+                </div>
+              )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default memo(WorkflowChecklist)

web/app/components/workflow/header/checklist/item-indicator.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/utils/classnames'
+
+type ItemIndicatorProps = {
+  className?: string
+}
+
+export const ItemIndicator = ({ className }: ItemIndicatorProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="24"
+      viewBox="0 0 20 24"
+      fill="none"
+      className={cn('shrink-0', className)}
+    >
+      <path d="M9.5 0H10.5V24H9.5V0Z" fill="currentColor" className="text-divider-regular" />
+      <circle cx="10" cy="12" r="3.25" fill="#F79009" stroke="white" strokeWidth="1.5" />
+    </svg>
+  )
+}

web/app/components/workflow/header/checklist/node-group.tsx

@@ -0,0 +1,75 @@
+import type { ChecklistItem } from '../../hooks/use-checklist'
+import type { BlockEnum } from '../../types'
+import { memo, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
+import BlockIcon from '../../block-icon'
+import { ItemIndicator } from './item-indicator'
+
+type ChecklistSubItem = {
+  key: string
+  message: string
+}
+
+export const ChecklistNodeGroup = memo(({
+  item,
+  showGoTo,
+  onItemClick,
+}: {
+  item: ChecklistItem
+  showGoTo: boolean
+  onItemClick: (item: ChecklistItem) => void
+}) => {
+  const { t } = useTranslation()
+  const goToEnabled = showGoTo && item.canNavigate && !item.disableGoTo
+
+  const subItems = useMemo(() => {
+    const items: ChecklistSubItem[] = []
+    if (item.errorMessage)
+      items.push({ key: 'error', message: item.errorMessage })
+    if (item.unConnected)
+      items.push({ key: 'unconnected', message: t('common.needConnectTip', { ns: 'workflow' }) })
+    return items
+  }, [item.errorMessage, item.unConnected, t])
+
+  return (
+    <div className="overflow-clip rounded-[10px] bg-components-panel-on-panel-item-bg">
+      <div className="flex items-center gap-2 px-2 pt-2">
+        <BlockIcon
+          type={item.type as BlockEnum}
+          size="sm"
+          toolIcon={item.toolIcon}
+        />
+        <span className="min-w-0 grow truncate text-sm font-medium leading-5 text-text-primary">
+          {item.title}
+        </span>
+      </div>
+      <div className="p-1">
+        {subItems.map(sub => (
+          <div
+            key={sub.key}
+            className={cn(
+              'group/item flex items-center gap-2 rounded-lg px-1',
+              goToEnabled && 'cursor-pointer hover:bg-state-base-hover',
+            )}
+            onClick={() => goToEnabled && onItemClick(item)}
+          >
+            <ItemIndicator />
+            <span className="min-w-0 grow truncate text-xs leading-4 text-text-warning">
+              {sub.message}
+            </span>
+            {goToEnabled && (
+              <div className="flex shrink-0 items-center gap-0.5 pr-0.5 opacity-0 transition-opacity duration-150 group-hover/item:opacity-100">
+                <span className="whitespace-nowrap text-xs font-medium leading-4 text-text-accent">
+                  {t('panel.goToFix', { ns: 'workflow' })}
+                </span>
+                <span className="i-ri-arrow-right-line size-3.5 text-text-accent" />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})
+ChecklistNodeGroup.displayName = 'ChecklistNodeGroup'

web/app/components/workflow/header/checklist/plugin-group.tsx

@@ -0,0 +1,95 @@
+import type { MouseEventHandler } from 'react'
+import type { ChecklistItem } from '../../hooks/use-checklist'
+import type { BlockEnum } from '../../types'
+import { memo, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
+import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
+import BlockIcon from '../../block-icon'
+import { ItemIndicator } from './item-indicator'
+
+export const ChecklistPluginGroup = memo(({
+  items,
+}: {
+  items: ChecklistItem[]
+}) => {
+  const { t } = useTranslation()
+  const install = useInstallPackageFromMarketPlace()
+  const [installing, setInstalling] = useState(false)
+
+  const identifiers = useMemo(
+    () => items
+      .map(i => i.pluginUniqueIdentifier)
+      .filter((id): id is string => Boolean(id)),
+    [items],
+  )
+
+  const handleInstallAll: MouseEventHandler = async (e) => {
+    e.stopPropagation()
+    if (installing || identifiers.length === 0)
+      return
+    setInstalling(true)
+    for (const id of identifiers) {
+      try {
+        const response = await install.mutateAsync(id)
+        if (response?.task_id) {
+          const { check } = checkTaskStatus()
+          await check({ taskId: response.task_id, pluginUniqueIdentifier: id })
+        }
+      }
+      catch {
+        // continue installing remaining plugins
+      }
+    }
+    setInstalling(false)
+    install.reset()
+  }
+
+  return (
+    <div className="overflow-clip rounded-[10px] bg-components-panel-on-panel-item-bg">
+      <div className="flex items-center gap-2 px-2 pt-2">
+        <div className="flex size-5 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-icon-bg-midnight-solid shadow-xs">
+          <span className="i-ri-download-line size-3.5 text-white" />
+        </div>
+        <span className="min-w-0 grow truncate text-sm font-medium leading-5 text-text-primary">
+          {t('nodes.common.pluginsNotInstalled', { ns: 'workflow', count: items.length })}
+        </span>
+        <Button
+          variant="secondary"
+          size="small"
+          onClick={handleInstallAll}
+          disabled={installing || identifiers.length === 0}
+        >
+          {installing
+            ? (
+                <>
+                  {t('nodes.agent.pluginInstaller.installing', { ns: 'workflow' })}
+                  <span className="i-ri-loader-2-line ml-1 size-3 animate-spin" />
+                </>
+              )
+            : t('nodes.agent.pluginInstaller.install', { ns: 'workflow' })}
+        </Button>
+      </div>
+      <div className="p-1">
+        {items.map(item => (
+          <div
+            key={item.id}
+            className="flex items-center gap-2 rounded-lg px-1"
+          >
+            <ItemIndicator />
+            <BlockIcon
+              type={item.type as BlockEnum}
+              size="xs"
+              toolIcon={item.toolIcon}
+            />
+            <span className="min-w-0 grow truncate text-xs leading-4 text-text-warning">
+              {item.title}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})
+ChecklistPluginGroup.displayName = 'ChecklistPluginGroup'

web/app/components/workflow/hooks/use-checklist.ts

@@ -68,6 +68,8 @@ export type ChecklistItem = {
   errorMessage?: string
   canNavigate: boolean
   disableGoTo?: boolean
+  isPluginMissing?: boolean
+  pluginUniqueIdentifier?: string
 }
 
 const START_NODE_TYPES: BlockEnum[] = [
@@ -212,6 +214,10 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
             errorMessage,
             canNavigate: !isPluginMissing,
             disableGoTo: isPluginMissing,
+            isPluginMissing,
+            pluginUniqueIdentifier: isPluginMissing
+              ? (node.data as { plugin_unique_identifier?: string }).plugin_unique_identifier
+              : undefined,
           })
         }
       }