feat: miss option

web/apps/web/src/components/workflow/node-card/index.tsx

@@ -14,9 +14,19 @@ const NodeCard: React.FC<
   NodeData & {
     children: React.ReactNode;
     selected?: boolean;
+    has_error?: boolean;
     mode?: string;
   }
-> = ({ id, children, runtime_data, selected, name, display_name, mode }) => {
+> = ({
+  id,
+  children,
+  runtime_data,
+  selected,
+  name,
+  display_name,
+  mode,
+  has_error,
+}) => {
   const selectRef = useRef(null);
   const active = useHover(selectRef);
   const isUndefined = mode === 'undefined';
@@ -35,7 +45,9 @@ const NodeCard: React.FC<
         },
         {
           '!border-critical':
-            runtime_data?.node_status === NodeStatusEnum.failed || isUndefined,
+            runtime_data?.node_status === NodeStatusEnum.failed ||
+            isUndefined ||
+            has_error,
         },
         {
           '!border-brand': runtime_data?.node_status === NodeStatusEnum.start,

web/apps/web/src/components/workflow/node-form/index.tsx

@@ -44,10 +44,22 @@ interface NodeFormProps {
   loading?: boolean;
   modeMap?: Record<string, TFieldMode>;
   onModeChange?: (name: string, mode: TFieldMode) => void;
+  onStatusChange?: (status?: string) => void;
 }
 
 const NodeForm = forwardRef<FormRef, NodeFormProps>(
-  ({ values, onChange, schema, loading, onModeChange, modeMap }, ref) => {
+  (
+    {
+      values,
+      onChange,
+      schema,
+      loading,
+      onModeChange,
+      onStatusChange,
+      modeMap,
+    },
+    ref,
+  ) => {
     const { schema: formSchema, formKey } = useSchemaContext(state => ({
       schema: state.schema,
       formKey: state.formKey,
@@ -65,8 +77,6 @@ const NodeForm = forwardRef<FormRef, NodeFormProps>(
       }
     }, [currentSchema, loading, defaultValues]);
 
-    console.log('values: ', values);
-
     if (loading || isEmpty(currentSchema)) {
       return <FormSkeleton />;
     }
@@ -80,6 +90,7 @@ const NodeForm = forwardRef<FormRef, NodeFormProps>(
         schema={currentSchema}
         modeMap={modeMap}
         onModeChange={onModeChange}
+        onStatusChange={onStatusChange}
         components={{
           Input,
           Select,

web/apps/web/src/components/workflow/nodes/widget-node/index.tsx

@@ -6,7 +6,7 @@ import {
 import { TValues, TFieldMode } from '@shellagent/form-engine';
 import { FormRef } from '@shellagent/ui';
 import { useKeyPress } from 'ahooks';
-import React, { useCallback, useRef, useEffect } from 'react';
+import React, { useCallback, useRef, useEffect, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { useWorkflowState } from '@/stores/workflow/use-workflow-state';
@@ -37,6 +37,8 @@ const WidgetNode: React.FC<NodeProps<WidgetNodeType>> = ({
     setCurrentCopyId: state.setCurrentCopyId,
   }));
 
+  const [hasError, setHasError] = useState(false);
+
   const {
     setNodeData,
     nodeData,
@@ -144,14 +146,23 @@ const WidgetNode: React.FC<NodeProps<WidgetNodeType>> = ({
     }
   });
 
+  const onStatusChange = (status?: string) => {
+    setHasError(status === 'error');
+  };
+
   return (
-    <NodeCard selected={selected} mode={nodeData[data.id]?.mode} {...data}>
+    <NodeCard
+      selected={selected}
+      mode={nodeData[data.id]?.mode}
+      has_error={hasError}
+      {...data}>
       <NodeForm
         ref={formRef}
         loading={loading.getReactFlow}
         values={nodeData[data.id]}
         onChange={onChange}
         onModeChange={onModeChange}
+        onStatusChange={onStatusChange}
         modeMap={fieldsModeMap?.[data.id] || {}}
       />
     </NodeCard>

web/packages/form-engine/src/components/control/index.tsx

@@ -14,6 +14,7 @@ import {
   TooltipContent,
   IconButton,
   Switch,
+  Text,
 } from '@shellagent/ui';
 import { isEmpty, omit } from 'lodash-es';
 import React, { useMemo, useRef, useState } from 'react';
@@ -37,7 +38,7 @@ type Mode = 'raw' | 'ui' | 'ref';
  */
 const Control: React.FC<IControlProps> = props => {
   const { name } = props;
-  const { fields, components, remove, modeMap, onModeChange } =
+  const { fields, components, remove, modeMap, onModeChange, onStatusChange } =
     useFormEngineContext();
   const { setValue, getValues } = useFormContext();
   const { schema, state, parent } = fields[name] || {};
@@ -284,11 +285,26 @@ const Control: React.FC<IControlProps> = props => {
           if (xOnChangePropsName) {
             newField[xOnChangePropsName] = field.onChange;
           }
+          const missOption =
+            xComponentProps?.options?.length &&
+            !xComponentProps?.options?.find(
+              (item: { value: string }) =>
+                item.value === (newField[valuePropsName] as unknown as string),
+            );
+          if (missOption) {
+            onStatusChange?.('error');
+          }
           const FormItemWithDesc =
             (!checked && xSwithable) || xHiddenControl ? null : (
               <div className="grow">
                 <FormControl>{renderFormItem()}</FormControl>
                 {fieldState.error ? <FormMessage /> : null}
+                {missOption ? (
+                  <Text color="critical">
+                    {newField[valuePropsName] as unknown as string} is
+                    undefined.
+                  </Text>
+                ) : null}
               </div>
             );
 

web/packages/form-engine/src/components/provider/index.tsx

@@ -26,6 +26,7 @@ const FormEngineContext = createContext<{
   reorder: (path: TPath, startIndex: number, endIndex: number) => void;
   modeMap?: Record<string, TFieldMode>;
   onModeChange?: (name: string, mode: TFieldMode) => void;
+  onStatusChange?: (status?: string) => void;
 }>({
   components: {},
   fields: {},
@@ -42,6 +43,7 @@ export interface IFormEngineProviderProps {
   layout?: 'Horizontal' | 'Vertical';
   modeMap?: Record<string, TFieldMode>;
   onModeChange?: (name: string, mode: TFieldMode) => void;
+  onStatusChange?: (status?: string) => void;
   children: React.ReactNode | React.ReactNode[];
 }
 
@@ -52,7 +54,8 @@ export const useFormEngineContext = () => {
 const Counter: { [path: string]: number } = {};
 
 export const FormEngineProvider: React.FC<IFormEngineProviderProps> = props => {
-  const { children, fields, components, parent, layout } = props;
+  const { children, fields, components, parent, layout, onStatusChange } =
+    props;
   const { getValues, setValue } = useFormContext();
 
   const [modeMap, setModeMap] = useImmer(props.modeMap || {});
@@ -178,6 +181,7 @@ export const FormEngineProvider: React.FC<IFormEngineProviderProps> = props => {
         reorder,
         modeMap,
         onModeChange,
+        onStatusChange,
       }}>
       {children}
     </FormEngineContext.Provider>

web/packages/form-engine/src/index.tsx

@@ -37,6 +37,7 @@ export interface IFormEngineProps {
   children?: React.ReactNode;
   modeMap?: Record<string, TFieldMode>;
   onModeChange?: (name: string, mode: TFieldMode) => void;
+  onStatusChange?: (status?: string) => void;
 }
 
 const FormEngine = forwardRef<FormRef, IFormEngineProps>((props, ref) => {
@@ -52,6 +53,7 @@ const FormEngine = forwardRef<FormRef, IFormEngineProps>((props, ref) => {
     onModeChange,
     onChange,
     onSubmit,
+    onStatusChange,
   } = props;
 
   const [fields, setFields] = useState(createFields(schema, values));
@@ -107,6 +109,7 @@ const FormEngine = forwardRef<FormRef, IFormEngineProps>((props, ref) => {
           <FormEngineProvider
             modeMap={modeMap}
             onModeChange={onModeChange}
+            onStatusChange={onStatusChange}
             fields={fields}
             parent={parent}
             layout={layout}