Dev automata validate

web/apps/web/src/app/app/detail/page.tsx

@@ -14,12 +14,13 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { edgeTypes, materialList, nodeTypes } from '@/components/app/constants';
 import FlowHeader from '@/components/app/flow-header';
 import { Header } from '@/components/app/header';
+import { ComfyUIEditorModal } from '@/components/app/plugins/comfyui/widgets/comfyui-editor';
+import { ValidationDialog } from '@/components/app/validation-dialog';
 import { AppBuilderChatModel } from '@/components/chat/app-builder-chat.model';
 import { ListFooterExtra } from '@/components/common/list-footer-extra';
 import { ImageCanvasDialog } from '@/components/image-canvas/open-image-canvas';
 import { AppBuilderModel } from '@/stores/app/models/app-builder.model';
 import { useAppState } from '@/stores/app/use-app-state';
-import { ComfyUIEditorModal } from '@/components/app/plugins/comfyui/widgets/comfyui-editor';
 
 enableMapSet();
 
@@ -109,6 +110,7 @@ const FlowEngineWrapper = observer(
             <FlowHeader appId={appId} versionName={versionName} />
             <StateConfigSheet />
             <TransitionSheet />
+            <ValidationDialog />
           </div>
         }
         onDoubleClick={onDoubleClick}

web/apps/web/src/app/container.ts

@@ -7,11 +7,12 @@ import { ImageCanvasModel } from 'image-canvas/model';
 import { Container, ContainerModule, interfaces } from 'inversify';
 import * as Mobx from 'mobx';
 import { toast } from 'react-toastify';
+
 import { ComfyUIModel } from '@/components/app/plugins/comfyui/comfyui.model';
 import { AssistantModel } from '@/components/assistant/model';
-import { FeedbackModel } from '@/components/feedback/model';
 import { AppBuilderChatModel } from '@/components/chat/app-builder-chat.model';
 import { DownloadModel } from '@/components/download/download.model';
+import { FeedbackModel } from '@/components/feedback/model';
 import { OpenImageCanvasModel } from '@/components/image-canvas/open-image-canvas.model';
 import { ModelsCommonModel } from '@/components/manager/manager-content/models/models-common.model';
 import { ModelsInstalledModel } from '@/components/manager/manager-content/models/models-installed.model';
@@ -103,7 +104,8 @@ export const webModule = new ContainerModule(bind => {
   bind<ComfyUIModel>('ComfyUIModel').to(ComfyUIModel).inSingletonScope();
 
   // refactor app builder
-  bind<AppBuilderModel>('AppBuilderModel')
+  container
+    .bind<AppBuilderModel>('AppBuilderModel')
     .to(AppBuilderModel)
     .inSingletonScope()
     .onActivation((_ctx: interfaces.Context, model: AppBuilderModel) => {
@@ -120,6 +122,10 @@ export const webModule = new ContainerModule(bind => {
         (window as any)._get_app_builder_scopes = function () {
           return model.scopes;
         };
+        /* eslint-disable no-underscore-dangle, func-names */
+        (window as any)._get_app_builder_validate_issues = function () {
+          return Mobx.toJS(model.validateIssues);
+        };
       }
       return model;
     });

web/apps/web/src/components/app/config-form/button-config/index.tsx

@@ -3,8 +3,8 @@
 import { TValues } from '@shellagent/form-engine';
 
 import NodeForm from '@/components/app/node-form';
+import { buttonConfigSchema } from '@/stores/app/schema/button-config';
 import { useAppState } from '@/stores/app/use-app-state';
-import { buttonConfigSchema } from '@/stores/app/utils/schema';
 
 interface ButtonConfigProps {
   values: TValues;

web/apps/web/src/components/app/config-form/widget-config/index.tsx

@@ -8,7 +8,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 
 import NodeForm from '@/components/app/node-form';
 import { getPlugin } from '@/components/app/plugins';
-import { getSchemaByWidget } from '@/stores/app/utils/get-widget-schema';
+import { getSchemaByWidget } from '@/stores/app/schema/get-widget-schema';
 import { useWorkflowStore } from '@/stores/workflow/workflow-provider';
 
 export interface WidgetConfigProps {

web/apps/web/src/components/app/config-form/workflow-config/index.tsx

@@ -8,7 +8,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 
 import NodeForm from '@/components/app/node-form';
 import { AppBuilderModel } from '@/stores/app/models/app-builder.model';
-import { getWorkflowSchema } from '@/stores/app/utils/get-workflow-schema';
+import { getWorkflowSchema } from '@/stores/app/schema/get-workflow-schema';
 import { useWorkflowStore } from '@/stores/workflow/workflow-provider';
 
 interface WorkflowConfigProps {

web/apps/web/src/components/app/constants.tsx

@@ -44,6 +44,7 @@ export const defaultFlow: IFlow = {
       data: {
         type: NodeTypeEnum.start,
         id: NodeIdEnum.start,
+        display_name: 'Start',
       },
       selected: false,
       positionAbsolute: {

web/apps/web/src/components/app/editable-title/index.tsx

@@ -1,8 +1,11 @@
 'use client';
 
-import { PencilSquare, Heading, Input } from '@shellagent/ui';
+import { PencilSquare, Heading, Input, Text } from '@shellagent/ui';
+import { debounce } from 'lodash-es';
 import { useState, useEffect } from 'react';
 
+import { validateCustomKey } from '@/stores/app/utils/validator';
+
 interface EditableTitleProps {
   value: string;
   onChange: (value: string) => void;
@@ -14,15 +17,34 @@ export const EditableTitle: React.FC<EditableTitleProps> = ({
 }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [titleInput, setTitleInput] = useState(value);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setTitleInput(value);
   }, [value]);
 
+  const validateDebounced = debounce(async (input: string) => {
+    try {
+      await validateCustomKey(input);
+    } catch (err: any) {
+      setError(err);
+    }
+  }, 300);
+
+  useEffect(() => {
+    if (isEditing && titleInput !== value) {
+      validateDebounced(titleInput);
+    }
+    return () => {
+      validateDebounced.cancel();
+    };
+  }, [titleInput, isEditing]);
+
   const handleTitleChange = () => {
-    if (titleInput.trim() === '') {
+    if (titleInput.trim() === '' || error) {
       setTitleInput(value);
       setIsEditing(false);
+      setError(null);
       return;
     }
     onChange(titleInput.trim());
@@ -31,21 +53,28 @@ export const EditableTitle: React.FC<EditableTitleProps> = ({
 
   if (isEditing) {
     return (
-      <div className="flex items-center">
-        <Input
-          aria-label="Edit title"
-          className="max-w-[200px] h-7 rounded-lg border border-default bg-surface-search-field p-1.5 text-sm"
-          autoFocus
-          value={titleInput}
-          onChange={e => setTitleInput(e.target.value)}
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              handleTitleChange();
-            }
-          }}
-          onBlur={handleTitleChange}
-          maxLength={50}
-        />
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center">
+          <Input
+            aria-label="Edit title"
+            className="max-w-[200px] h-7 rounded-lg border border-default bg-surface-search-field p-1.5 text-sm"
+            autoFocus
+            value={titleInput}
+            onChange={e => setTitleInput(e.target.value)}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                handleTitleChange();
+              }
+            }}
+            onBlur={handleTitleChange}
+            maxLength={50}
+          />
+        </div>
+        {error && (
+          <Text size="sm" color="critical">
+            {error}
+          </Text>
+        )}
       </div>
     );
   }