refactor: workflow monitor(aka inspect) node

ui/src/components/access/AccessFormSSHConfig.tsx

@@ -120,7 +120,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
 
         <div className="w-1/3">
           <Form.Item name="port" label={t("access.form.ssh_port.label")} rules={[formRule]}>
-            <InputNumber className="w-full" placeholder={t("access.form.ssh_port.placeholder")} min={1} max={65535} />
+            <InputNumber className="w-full" min={1} max={65535} placeholder={t("access.form.ssh_port.placeholder")} />
           </Form.Item>
         </div>
       </div>

ui/src/components/access/AccessSelect.tsx

@@ -37,7 +37,7 @@ const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
     if (!access) {
       return (
         <Space className="max-w-full grow truncate" size={4}>
-          <Avatar size="small" />
+          <Avatar shape="square" size="small" />
           <Typography.Text className="leading-loose" ellipsis>
             {key}
           </Typography.Text>
@@ -48,7 +48,7 @@ const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
     const provider = accessProvidersMap.get(access.provider);
     return (
       <Space className="max-w-full grow truncate" size={4}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="leading-loose" ellipsis>
           {access.name}
         </Typography.Text>

ui/src/components/provider/ACMEDns01ProviderPicker.tsx

@@ -67,7 +67,7 @@ const ACMEDns01ProviderPicker = ({ className, style, autoFocus, filter, placehol
                     }}
                   >
                     <Flex className="size-full overflow-hidden" align="center" gap={8}>
-                      <Avatar src={provider.icon} size="small" />
+                      <Avatar shape="square" src={provider.icon} size="small" />
                       <Typography.Text className="line-clamp-2 flex-1">{t(provider.name)}</Typography.Text>
                     </Flex>
                   </Card>

ui/src/components/provider/ACMEDns01ProviderSelect.tsx

@@ -32,7 +32,7 @@ const ACMEDns01ProviderSelect = ({ filter, ...props }: ACMEDns01ProviderSelectPr
     const provider = acmeDns01ProvidersMap.get(key);
     return (
       <Space className="max-w-full grow overflow-hidden truncate" size={4}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="leading-loose" ellipsis>
           {t(provider?.name ?? "")}
         </Typography.Text>

ui/src/components/provider/AccessProviderPicker.tsx

@@ -86,12 +86,12 @@ const AccessProviderPicker = ({ className, style, autoFocus, filter, placeholder
                     }}
                   >
                     <Flex className="size-full overflow-hidden" align="center" gap={8}>
-                      <Avatar src={provider.icon} size="small" />
+                      <Avatar shape="square" src={provider.icon} size="small" />
                       <div className="flex-1 overflow-hidden">
                         <Typography.Text className="mb-1 line-clamp-1" type={provider.builtin ? "secondary" : undefined}>
                           {t(provider.name)}
                         </Typography.Text>
-                        <div className="origin-left scale-[80%]">
+                        <div className="origin-left scale-[75%]">
                           <Show when={provider.builtin}>
                             <Tag>{t("access.props.provider.builtin")}</Tag>
                           </Show>

ui/src/components/provider/AccessProviderSelect.tsx

@@ -49,12 +49,12 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
     return (
       <div className="flex max-w-full items-center justify-between gap-4 overflow-hidden">
         <Space className="max-w-full grow truncate" size={4}>
-          <Avatar src={provider.icon} size="small" />
+          <Avatar shape="square" src={provider.icon} size="small" />
           <Typography.Text className="leading-loose" type={provider.builtin ? "secondary" : undefined} ellipsis>
             {t(provider.name)}
           </Typography.Text>
         </Space>
-        <div className="origin-right scale-[80%]">
+        <div className="origin-right scale-[75%]">
           <Show when={provider.builtin}>
             <Tag>{t("access.props.provider.builtin")}</Tag>
           </Show>

ui/src/components/provider/CAProviderSelect.tsx

@@ -48,7 +48,7 @@ const CAProviderSelect = ({ filter, ...props }: CAProviderSelectProps) => {
     const provider = caProvidersMap.get(key);
     return (
       <Space className="max-w-full grow overflow-hidden truncate" size={4}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="leading-loose" ellipsis>
           {t(provider?.name ?? "")}
         </Typography.Text>

ui/src/components/provider/DeploymentProviderPicker.tsx

@@ -104,7 +104,7 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, filter, placeho
                       >
                         <Tooltip title={t(provider.name)} mouseEnterDelay={1}>
                           <Flex className="size-full overflow-hidden" align="center" gap={8}>
-                            <Avatar src={provider.icon} size="small" />
+                            <Avatar shape="square" src={provider.icon} size="small" />
                             <Typography.Text className="line-clamp-2 flex-1">{t(provider.name)}</Typography.Text>
                           </Flex>
                         </Tooltip>

ui/src/components/provider/DeploymentProviderSelect.tsx

@@ -32,7 +32,7 @@ const DeploymentProviderSelect = ({ filter, ...props }: DeploymentProviderSelect
     const provider = deploymentProvidersMap.get(key);
     return (
       <Space className="max-w-full grow overflow-hidden truncate" size={4}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="leading-loose" ellipsis>
           {t(provider?.name ?? "")}
         </Typography.Text>

ui/src/components/provider/NotificationProviderSelect.tsx

@@ -32,7 +32,7 @@ const NotificationProviderSelect = ({ filter, ...props }: NotificationProviderSe
     const provider = notificationProvidersMap.get(key);
     return (
       <Space className="max-w-full grow overflow-hidden truncate" size={4}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="leading-loose" ellipsis>
           {t(provider?.name ?? "")}
         </Typography.Text>

ui/src/components/workflow/WorkflowElement.tsx

@@ -9,10 +9,11 @@ import DeployNode from "./node/DeployNode";
 import EndNode from "./node/EndNode";
 import ExecuteResultBranchNode from "./node/ExecuteResultBranchNode";
 import ExecuteResultNode from "./node/ExecuteResultNode";
+import MonitorNode from "./node/MonitorNode";
 import NotifyNode from "./node/NotifyNode";
 import StartNode from "./node/StartNode";
+import UnknownNode from "./node/UnknownNode";
 import UploadNode from "./node/UploadNode";
-import InspectNode from "./node/InspectNode";
 
 export type WorkflowElementProps = {
   node: WorkflowNode;
@@ -32,9 +33,9 @@ const WorkflowElement = ({ node, disabled, branchId, branchIndex }: WorkflowElem
 
       case WorkflowNodeType.Upload:
         return <UploadNode node={node} disabled={disabled} />;
-      
-      case WorkflowNodeType.Inspect:
-        return <InspectNode node={node} disabled={disabled} />;
+
+      case WorkflowNodeType.Monitor:
+        return <MonitorNode node={node} disabled={disabled} />;
 
       case WorkflowNodeType.Deploy:
         return <DeployNode node={node} disabled={disabled} />;
@@ -60,7 +61,7 @@ const WorkflowElement = ({ node, disabled, branchId, branchIndex }: WorkflowElem
 
       default:
         console.warn(`[certimate] unsupported workflow node type: ${node.type}`);
-        return <></>;
+        return <UnknownNode node={node} />;
     }
   }, [node, disabled, branchId, branchIndex]);
 

ui/src/components/workflow/node/AddNode.tsx

@@ -3,11 +3,11 @@ import { useTranslation } from "react-i18next";
 import {
   CloudUploadOutlined as CloudUploadOutlinedIcon,
   DeploymentUnitOutlined as DeploymentUnitOutlinedIcon,
+  MonitorOutlined as MonitorOutlinedIcon,
   PlusOutlined as PlusOutlinedIcon,
   SendOutlined as SendOutlinedIcon,
   SisternodeOutlined as SisternodeOutlinedIcon,
   SolutionOutlined as SolutionOutlinedIcon,
-  MonitorOutlined as MonitorOutlinedIcon,
 } from "@ant-design/icons";
 import { Dropdown } from "antd";
 
@@ -28,7 +28,7 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
     return [
       [WorkflowNodeType.Apply, "workflow_node.apply.label", <SolutionOutlinedIcon />],
       [WorkflowNodeType.Upload, "workflow_node.upload.label", <CloudUploadOutlinedIcon />],
-      [WorkflowNodeType.Inspect, "workflow_node.inspect.label", <MonitorOutlinedIcon />],
+      [WorkflowNodeType.Monitor, "workflow_node.monitor.label", <MonitorOutlinedIcon />],
       [WorkflowNodeType.Deploy, "workflow_node.deploy.label", <DeploymentUnitOutlinedIcon />],
       [WorkflowNodeType.Notify, "workflow_node.notify.label", <SendOutlinedIcon />],
       [WorkflowNodeType.Branch, "workflow_node.branch.label", <SisternodeOutlinedIcon />],

ui/src/components/workflow/node/ConditionNode.tsx

@@ -1,14 +1,17 @@
 import { memo, useRef, useState } from "react";
 import { MoreOutlined as MoreOutlinedIcon } from "@ant-design/icons";
 import { Button, Card, Popover } from "antd";
+import { produce } from "immer";
+
+import type { Expr, WorkflowNodeIoValueType } from "@/domain/workflow";
+import { ExprType } from "@/domain/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
 
 import SharedNode, { type SharedNodeProps } from "./_SharedNode";
 import AddNode from "./AddNode";
-import ConditionNodeConfigForm, { ConditionItem, ConditionNodeConfigFormFieldValues, ConditionNodeConfigFormInstance } from "./ConditionNodeConfigForm";
-import { Expr, WorkflowNodeIoValueType, ExprType } from "@/domain/workflow";
-import { produce } from "immer";
-import { useWorkflowStore } from "@/stores/workflow";
-import { useZustandShallowSelector } from "@/hooks";
+import type { ConditionItem, ConditionNodeConfigFormFieldValues, ConditionNodeConfigFormInstance } from "./ConditionNodeConfigForm";
+import ConditionNodeConfigForm from "./ConditionNodeConfigForm";
 
 export type ConditionNodeProps = SharedNodeProps & {
   branchId: string;

ui/src/components/workflow/node/DeployNode.tsx

@@ -46,7 +46,7 @@ const DeployNode = ({ node, disabled }: DeployNodeProps) => {
     const provider = deploymentProvidersMap.get(config.provider);
     return (
       <Flex className="size-full overflow-hidden" align="center" gap={8}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="flex-1 truncate">{t(provider?.name ?? "")}</Typography.Text>
       </Flex>
     );

ui/src/components/workflow/node/InspectNodeConfigForm.tsx

@@ -1,97 +0,0 @@
-import { forwardRef, memo, useImperativeHandle } from "react";
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type WorkflowNodeConfigForInspect } from "@/domain/workflow";
-import { useAntdForm } from "@/hooks";
-
-import { validDomainName, validIPv4Address, validPortNumber } from "@/utils/validators";
-
-type InspectNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForInspect>;
-
-export type InspectNodeConfigFormProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  disabled?: boolean;
-  initialValues?: InspectNodeConfigFormFieldValues;
-  onValuesChange?: (values: InspectNodeConfigFormFieldValues) => void;
-};
-
-export type InspectNodeConfigFormInstance = {
-  getFieldsValue: () => ReturnType<FormInstance<InspectNodeConfigFormFieldValues>["getFieldsValue"]>;
-  resetFields: FormInstance<InspectNodeConfigFormFieldValues>["resetFields"];
-  validateFields: FormInstance<InspectNodeConfigFormFieldValues>["validateFields"];
-};
-
-const initFormModel = (): InspectNodeConfigFormFieldValues => {
-  return {
-    domain: "",
-    port: "443",
-    path: "",
-    host: "",
-  };
-};
-
-const InspectNodeConfigForm = forwardRef<InspectNodeConfigFormInstance, InspectNodeConfigFormProps>(
-  ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
-    const { t } = useTranslation();
-
-    const formSchema = z.object({
-      host: z.string().refine((val) => validIPv4Address(val) || validDomainName(val), {
-        message: t("workflow_node.inspect.form.host.placeholder"),
-      }),
-      domain: z.string().optional(),
-      port: z.string().refine((val) => validPortNumber(val), {
-        message: t("workflow_node.inspect.form.port.placeholder"),
-      }),
-      path: z.string().optional(),
-    });
-    const formRule = createSchemaFieldRule(formSchema);
-    const { form: formInst, formProps } = useAntdForm({
-      name: "workflowNodeInspectConfigForm",
-      initialValues: initialValues ?? initFormModel(),
-    });
-
-    const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-      onValuesChange?.(values as InspectNodeConfigFormFieldValues);
-    };
-
-    useImperativeHandle(ref, () => {
-      return {
-        getFieldsValue: () => {
-          return formInst.getFieldsValue(true);
-        },
-        resetFields: (fields) => {
-          return formInst.resetFields(fields as (keyof InspectNodeConfigFormFieldValues)[]);
-        },
-        validateFields: (nameList, config) => {
-          return formInst.validateFields(nameList, config);
-        },
-      } as InspectNodeConfigFormInstance;
-    });
-
-    return (
-      <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
-        <Form.Item name="host" label={t("workflow_node.inspect.form.host.label")} rules={[formRule]}>
-          <Input variant="filled" placeholder={t("workflow_node.inspect.form.host.placeholder")} />
-        </Form.Item>
-
-        <Form.Item name="port" label={t("workflow_node.inspect.form.port.label")} rules={[formRule]}>
-          <Input variant="filled" placeholder={t("workflow_node.inspect.form.port.placeholder")} />
-        </Form.Item>
-
-        <Form.Item name="domain" label={t("workflow_node.inspect.form.domain.label")} rules={[formRule]}>
-          <Input variant="filled" placeholder={t("workflow_node.inspect.form.domain.placeholder")} />
-        </Form.Item>
-
-        <Form.Item name="path" label={t("workflow_node.inspect.form.path.label")} rules={[formRule]}>
-          <Input variant="filled" placeholder={t("workflow_node.inspect.form.path.placeholder")} />
-        </Form.Item>
-      </Form>
-    );
-  }
-);
-
-export default memo(InspectNodeConfigForm);

ui/src/components/workflow/node/MonitorNode.tsx

@@ -3,43 +3,43 @@ import { useTranslation } from "react-i18next";
 import { Flex, Typography } from "antd";
 import { produce } from "immer";
 
-import { type WorkflowNodeConfigForInspect, WorkflowNodeType } from "@/domain/workflow";
+import { type WorkflowNodeConfigForMonitor, WorkflowNodeType } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
 
 import SharedNode, { type SharedNodeProps } from "./_SharedNode";
-import InspectNodeConfigForm, { type InspectNodeConfigFormInstance } from "./InspectNodeConfigForm";
+import MonitorNodeConfigForm, { type MonitorNodeConfigFormInstance } from "./MonitorNodeConfigForm";
 
-export type InspectNodeProps = SharedNodeProps;
+export type MonitorNodeProps = SharedNodeProps;
 
-const InspectNode = ({ node, disabled }: InspectNodeProps) => {
-  if (node.type !== WorkflowNodeType.Inspect) {
-    console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Inspect}`);
+const MonitorNode = ({ node, disabled }: MonitorNodeProps) => {
+  if (node.type !== WorkflowNodeType.Monitor) {
+    console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Monitor}`);
   }
 
   const { t } = useTranslation();
 
   const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
 
-  const formRef = useRef<InspectNodeConfigFormInstance>(null);
+  const formRef = useRef<MonitorNodeConfigFormInstance>(null);
   const [formPending, setFormPending] = useState(false);
 
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const getFormValues = () => formRef.current!.getFieldsValue() as WorkflowNodeConfigForInspect;
+  const getFormValues = () => formRef.current!.getFieldsValue() as WorkflowNodeConfigForMonitor;
 
   const wrappedEl = useMemo(() => {
-    if (node.type !== WorkflowNodeType.Inspect) {
-      console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Inspect}`);
+    if (node.type !== WorkflowNodeType.Monitor) {
+      console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Monitor}`);
     }
 
     if (!node.validated) {
       return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
     }
 
-    const config = (node.config as WorkflowNodeConfigForInspect) ?? {};
+    const config = (node.config as WorkflowNodeConfigForMonitor) ?? {};
     return (
       <Flex className="size-full overflow-hidden" align="center" gap={8}>
-        <Typography.Text className="truncate">{config.host ?? ""}</Typography.Text>
+        <Typography.Text className="truncate">{config.domain || config.host || ""}</Typography.Text>
       </Flex>
     );
   }, [node]);
@@ -81,10 +81,10 @@ const InspectNode = ({ node, disabled }: InspectNodeProps) => {
         onOpenChange={(open) => setDrawerOpen(open)}
         getFormValues={() => formRef.current!.getFieldsValue()}
       >
-        <InspectNodeConfigForm ref={formRef} disabled={disabled} initialValues={node.config} />
+        <MonitorNodeConfigForm ref={formRef} disabled={disabled} initialValues={node.config} />
       </SharedNode.ConfigDrawer>
     </>
   );
 };
 
-export default memo(InspectNode);
+export default memo(MonitorNode);

ui/src/components/workflow/node/MonitorNodeConfigForm.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, memo, useImperativeHandle } from "react";
+import { useTranslation } from "react-i18next";
+import { Alert, Form, type FormInstance, Input, InputNumber } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { type WorkflowNodeConfigForMonitor } from "@/domain/workflow";
+import { useAntdForm } from "@/hooks";
+import { validDomainName, validIPv4Address, validIPv6Address, validPortNumber } from "@/utils/validators";
+
+type MonitorNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForMonitor>;
+
+export type MonitorNodeConfigFormProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  initialValues?: MonitorNodeConfigFormFieldValues;
+  onValuesChange?: (values: MonitorNodeConfigFormFieldValues) => void;
+};
+
+export type MonitorNodeConfigFormInstance = {
+  getFieldsValue: () => ReturnType<FormInstance<MonitorNodeConfigFormFieldValues>["getFieldsValue"]>;
+  resetFields: FormInstance<MonitorNodeConfigFormFieldValues>["resetFields"];
+  validateFields: FormInstance<MonitorNodeConfigFormFieldValues>["validateFields"];
+};
+
+const initFormModel = (): MonitorNodeConfigFormFieldValues => {
+  return {
+    host: "",
+    port: 443,
+    requestPath: "/",
+  };
+};
+
+const MonitorNodeConfigForm = forwardRef<MonitorNodeConfigFormInstance, MonitorNodeConfigFormProps>(
+  ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
+    const { t } = useTranslation();
+
+    const formSchema = z.object({
+      host: z.string().refine((v) => {
+        return validDomainName(v) || validIPv4Address(v) || validIPv6Address(v);
+      }, t("common.errmsg.host_invalid")),
+      port: z.preprocess(
+        (v) => Number(v),
+        z
+          .number()
+          .int(t("workflow_node.monitor.form.port.placeholder"))
+          .refine((v) => validPortNumber(v), t("common.errmsg.port_invalid"))
+      ),
+      domain: z
+        .string()
+        .nullish()
+        .refine((v) => {
+          if (!v) return true;
+          return validDomainName(v);
+        }, t("common.errmsg.domain_invalid")),
+      requestPath: z.string().nullish(),
+    });
+    const formRule = createSchemaFieldRule(formSchema);
+    const { form: formInst, formProps } = useAntdForm({
+      name: "workflowNodeMonitorConfigForm",
+      initialValues: initialValues ?? initFormModel(),
+    });
+
+    const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+      onValuesChange?.(values as MonitorNodeConfigFormFieldValues);
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        getFieldsValue: () => {
+          return formInst.getFieldsValue(true);
+        },
+        resetFields: (fields) => {
+          return formInst.resetFields(fields as (keyof MonitorNodeConfigFormFieldValues)[]);
+        },
+        validateFields: (nameList, config) => {
+          return formInst.validateFields(nameList, config);
+        },
+      } as MonitorNodeConfigFormInstance;
+    });
+
+    return (
+      <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
+        <Form.Item>
+          <Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.monitor.form.guide") }}></span>} />
+        </Form.Item>
+
+        <div className="flex space-x-2">
+          <div className="w-2/3">
+            <Form.Item name="host" label={t("workflow_node.monitor.form.host.label")} rules={[formRule]}>
+              <Input placeholder={t("workflow_node.monitor.form.host.placeholder")} />
+            </Form.Item>
+          </div>
+
+          <div className="w-1/3">
+            <Form.Item name="port" label={t("workflow_node.monitor.form.port.label")} rules={[formRule]}>
+              <InputNumber className="w-full" min={1} max={65535} placeholder={t("workflow_node.monitor.form.port.placeholder")} />
+            </Form.Item>
+          </div>
+        </div>
+
+        <Form.Item name="domain" label={t("workflow_node.monitor.form.domain.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow_node.monitor.form.domain.placeholder")} />
+        </Form.Item>
+
+        <Form.Item name="requestPath" label={t("workflow_node.monitor.form.request_path.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow_node.monitor.form.request_path.placeholder")} />
+        </Form.Item>
+      </Form>
+    );
+  }
+);
+
+export default memo(MonitorNodeConfigForm);

ui/src/components/workflow/node/NotifyNode.tsx

@@ -43,7 +43,7 @@ const NotifyNode = ({ node, disabled }: NotifyNodeProps) => {
     const provider = notificationProvidersMap.get(config.provider);
     return (
       <Flex className="size-full overflow-hidden" align="center" gap={8}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="flex-1 truncate">{t(channel?.name ?? provider?.name ?? "　")}</Typography.Text>
         <Typography.Text className="truncate" type="secondary">
           {config.subject ?? ""}

ui/src/components/workflow/node/UnknownNode.tsx

@@ -0,0 +1,45 @@
+import { memo } from "react";
+import { CloseCircleOutlined as CloseCircleOutlinedIcon } from "@ant-design/icons";
+import { Alert, Button, Card } from "antd";
+
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
+
+import { type SharedNodeProps } from "./_SharedNode";
+import AddNode from "./AddNode";
+
+export type MonitorNodeProps = SharedNodeProps;
+
+const UnknownNode = ({ node, disabled }: MonitorNodeProps) => {
+  const { removeNode } = useWorkflowStore(useZustandShallowSelector(["removeNode"]));
+
+  const handleClickRemove = () => {
+    removeNode(node.id);
+  };
+
+  return (
+    <>
+      <Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable variant="borderless">
+        <div className="cursor-pointer ">
+          <Alert
+            type="error"
+            message={
+              <div className="flex items-center justify-between gap-4 overflow-hidden">
+                <div className="flex-1 text-center text-xs">
+                  INVALID NODE
+                  <br />
+                  PLEASE REMOVE
+                </div>
+                <Button color="primary" icon={<CloseCircleOutlinedIcon />} variant="text" onClick={handleClickRemove} />
+              </div>
+            }
+          />
+        </div>
+      </Card>
+
+      <AddNode node={node} disabled={disabled} />
+    </>
+  );
+};
+
+export default memo(UnknownNode);