@gadmin2n/schematics 0.0.144 → 0.0.146

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/NodePropertyPanel.tsx

@@ -1,13 +1,14 @@
 import {
-  DeleteOutlined,
   DisconnectOutlined,
-  LinkOutlined,
   MinusCircleOutlined,
   PlusOutlined,
+  SearchOutlined,
   SendOutlined,
 } from '@ant-design/icons';
 import {
+  Alert,
   Button,
+  Card,
   Checkbox,
   Form,
   Input,
@@ -18,33 +19,49 @@ import {
   Space,
   Spin,
   Switch,
+  Tag,
   Tooltip,
   Typography,
 } from 'antd';
 import { customRequest } from 'helpers/http';
-import { useEffect, useState } from 'react';
+import type { CSSProperties, ForwardedRef } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { SchemaForm } from '../node-instances/schema-form/SchemaForm';
+import { useWorkflowFormValidation } from '../useWorkflowFormValidation';
 import type {
+  CallableWorkflowOption,
+  WorkflowEdge,
   WorkflowNode,
   WorkflowNodeInstance,
   WorkflowNodeType,
 } from '../types';
-import type { ParameterBinding } from '../types/parameter-binding';
 import { NodeOutputSummary } from './NodeOutputSummary';
-import { ParameterBindingEditor } from './ParameterBindingEditor';
+import { CreateNodeInstanceDrawer } from './CreateNodeInstanceDrawer';
+import { WorkflowCodeEditor } from './WorkflowCodeEditor';
 import '../node-instances/node-config.css';
+import type { ReferencedConfigStatus } from '../hooks/useReferencedNodeInstanceConfigs';
 
 const { Text, Title } = Typography;
 const { TextArea } = Input;
 
-const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
-  TRIGGER: { bg: '#e6f7ff', border: '#91caff' },
-  ACTION: { bg: '#f6ffed', border: '#b7eb8f' },
-  CONDITION: { bg: '#fff7e6', border: '#ffd591' },
-  FLOW_CONTROL: { bg: '#f9f0ff', border: '#d3adf7' },
-  APPROVAL: { bg: '#fff1f0', border: '#ffa39e' },
-  SUB_WORKFLOW: { bg: '#f0f5ff', border: '#adc6ff' },
+const CATEGORY_COLORS: Record<
+  string,
+  { accent: string; bg: string; border: string }
+> = {
+  TRIGGER: { accent: '#1677ff', bg: '#e6f7ff', border: '#91caff' },
+  ACTION: { accent: '#389e0d', bg: '#f6ffed', border: '#b7eb8f' },
+  CONDITION: { accent: '#d46b08', bg: '#fff7e6', border: '#ffd591' },
+  FLOW_CONTROL: { accent: '#722ed1', bg: '#f9f0ff', border: '#d3adf7' },
+  APPROVAL: { accent: '#cf1322', bg: '#fff1f0', border: '#ffa39e' },
+  SUB_WORKFLOW: { accent: '#2f54eb', bg: '#f0f5ff', border: '#adc6ff' },
 };
 
 const CATEGORY_LABELS: Record<string, string> = {
@@ -65,7 +82,6 @@ const TEXTAREA_FIELDS = new Set([
   'headers',
   'inputBindings',
   'script',
-  'rawSql',
   'data',
   'responseBody',
 ]);
@@ -87,15 +103,11 @@ function hasUiSchemaWidget(value: unknown): boolean {
 
 // Placeholder hints for specific fields
 const FIELD_PLACEHOLDERS: Record<string, string> = {
-  cron: '0 0 * * * (每天零点)',
   timezone: 'Asia/Shanghai',
-  eventName: 'order.created',
   path: '/api/webhook/my-hook',
   url: 'https://api.example.com/endpoint',
   query: 'SELECT * FROM table WHERE id = $1',
-  rawSql: 'INSERT INTO table (col) VALUES ($1)',
   condition: 'data.amount > 1000',
-  iteratorField: 'data.items',
   message: '通知内容，支持 {{variable}} 模板变量',
   subject: '邮件主题',
   field: 'data.status',
@@ -107,59 +119,75 @@ const FIELD_PLACEHOLDERS: Record<string, string> = {
   datasource: 'default',
 };
 
+type NodePropertyUpdates = {
+  label?: string;
+  config?: Record<string, any>;
+  configOverride?: Record<string, any> | null;
+  instanceRef?: WorkflowNode['instanceRef'] | null;
+};
+
+export interface NodePropertyPanelHandle {
+  getPendingUpdate: () => {
+    nodeId: string;
+    updates: NodePropertyUpdates;
+  } | null;
+  markSaved: () => void;
+}
+
 interface Props {
   node: WorkflowNode | null;
   nodeTypes: WorkflowNodeType[];
+  nodes?: WorkflowNode[];
+  edges?: WorkflowEdge[];
   currentWorkflowId?: string;
-  onSave: (
-    nodeId: string,
-    updates: {
-      label?: string;
-      config?: Record<string, any>;
-      configOverride?: Record<string, any> | null;
-      instanceRef?: WorkflowNode['instanceRef'] | null;
-    },
-  ) => void;
+  onSave: (nodeId: string, updates: NodePropertyUpdates) => void;
+  onConfigDraftChange?: (nodeId: string, config: Record<string, any>) => void;
   onLabelChange: (nodeId: string, label: string) => void;
   onAiEdit: (nodeId: string, prompt: string) => void;
-  onDelete?: (nodeId: string) => void;
   onAbort?: () => void;
   aiLoading: boolean;
+  referencedConfigs?: Record<string, Record<string, any>>;
+  referencedConfigStatus?: ReferencedConfigStatus;
+  onRetryReferencedConfigs?: () => void;
+  callableWorkflows?: CallableWorkflowOption[];
+  callableCatalogStatus?: 'loading' | 'ready' | 'error';
+  onRetryCallableCatalog?: () => void;
 }
 
-export function NodePropertyPanel({
-  node,
-  nodeTypes,
-  currentWorkflowId,
-  onSave,
-  onLabelChange,
-  onAiEdit,
-  onDelete,
-  onAbort,
-  aiLoading,
-}: Props) {
+function NodePropertyPanelImpl(
+  {
+    node,
+    nodeTypes,
+    nodes,
+    edges,
+    currentWorkflowId,
+    onSave,
+    onConfigDraftChange,
+    onLabelChange,
+    onAiEdit,
+    onAbort,
+    aiLoading,
+    referencedConfigs = {},
+    referencedConfigStatus = 'ready',
+    onRetryReferencedConfigs,
+    callableWorkflows,
+    callableCatalogStatus,
+    onRetryCallableCatalog,
+  }: Props,
+  ref: ForwardedRef<NodePropertyPanelHandle>,
+) {
   const { t, i18n } = useTranslation('workflow');
+  const formValidation = useWorkflowFormValidation();
   const [label, setLabel] = useState('');
   const [config, setConfig] = useState<Record<string, any>>({});
   const [prompt, setPrompt] = useState('');
   const [dirty, setDirty] = useState(false);
   const [activeTab, setActiveTab] = useState<'config' | 'ai'>('config');
-  const [workflowOptions, setWorkflowOptions] = useState<
-    {
-      label: string;
-      value: string;
-      inputParameters: Array<{
-        key: string;
-        label?: string;
-        required?: boolean;
-      }>;
-    }[]
-  >([]);
   const [instances, setInstances] = useState<WorkflowNodeInstance[]>([]);
-  const [selectedInstanceId, setSelectedInstanceId] = useState<string | null>(
-    null,
-  );
   const [instanceLoading, setInstanceLoading] = useState(false);
+  const [instanceLoadError, setInstanceLoadError] = useState(false);
+  const [createInstanceOpen, setCreateInstanceOpen] = useState(false);
+  const [paletteQuery, setPaletteQuery] = useState('');
   const [newInstanceName, setNewInstanceName] = useState('');
   const [newInstanceDesc, setNewInstanceDesc] = useState('');
   const [saveAsLoading, setSaveAsLoading] = useState(false);
@@ -172,7 +200,7 @@ export function NodePropertyPanel({
     ? t(`nodeTypes.${currentNodeType.type}`, {
         defaultValue: currentNodeType.label,
       })
-    : node?.type;
+    : node?.label;
   const currentNodeTypeColors =
     CATEGORY_COLORS[currentNodeType?.category ?? 'ACTION'] ??
     CATEGORY_COLORS.ACTION;
@@ -198,16 +226,22 @@ export function NodePropertyPanel({
         },
       };
     }
-    if (currentNodeType?.type === 'return_result') {
+    if (currentNodeType?.type === 'webhook_trigger') {
+      return {
+        ...currentUiSchema,
+        widget: 'external-request-config',
+      };
+    }
+    if (currentNodeType?.type === 'manual_trigger') {
       return {
         ...currentUiSchema,
-        widget: 'return-result-config',
+        widget: 'manual-trigger-config',
       };
     }
-    if (currentNodeType?.type === 'webhook_trigger') {
+    if (currentNodeType?.type === 'cron_trigger') {
       return {
         ...currentUiSchema,
-        widget: 'external-request-config',
+        widget: 'cron-trigger-config',
       };
     }
     if (currentNodeType?.type === 'external_wait') {
@@ -216,19 +250,93 @@ export function NodePropertyPanel({
         widget: 'external-wait-config',
       };
     }
+    if (
+      currentNodeType?.type === 'for_each' ||
+      currentNodeType?.type === 'sub_workflow' ||
+      currentNodeType?.type === 'approval'
+    ) {
+      return {
+        ...currentUiSchema,
+        widget:
+          currentNodeType.type === 'for_each'
+            ? 'for-each-config'
+            : currentNodeType.type === 'sub_workflow'
+              ? 'sub-workflow-config'
+              : currentUiSchema.widget,
+        options: {
+          ...(currentUiSchema.options ?? {}),
+          currentWorkflowId,
+          callableWorkflows,
+          callableCatalogStatus,
+          onRetryCallableCatalog,
+        },
+      };
+    }
     return currentNodeType?.uiSchema;
   })();
   const usesCustomConfigEditor = hasUiSchemaWidget(effectiveUiSchema);
-  const referencedInstance = instances.find(
-    (instance) => instance.id === node?.instanceRef?.instanceId,
+  const usesTopLevelApprovalSections =
+    node?.type === 'approval' && usesCustomConfigEditor;
+  const referencedConfig = node?.instanceRef
+    ? referencedConfigs[node.instanceRef.instanceId]
+    : undefined;
+  const referencedConfigUnavailable = Boolean(
+    node?.instanceRef &&
+    node.configOverride == null &&
+    referencedConfigStatus !== 'ready',
   );
   const effectiveNodeConfig =
-    node?.configOverride ?? referencedInstance?.config ?? node?.config ?? {};
+    node?.configOverride ?? referencedConfig ?? node?.config ?? {};
+  const effectiveNode = node ? { ...node, config: effectiveNodeConfig } : null;
   useEffect(() => {
     if (node) {
       setLabel(node.label);
       // Merge existing config with schema defaults
-      const mergedConfig: Record<string, any> = {};
+      const mergedConfig: Record<string, any> = { ...effectiveNodeConfig };
+      if (!usesCustomConfigEditor) {
+        for (const [key, prop] of Object.entries<any>(properties)) {
+          const existingValue = effectiveNodeConfig[key];
+          if (existingValue !== undefined) {
+            mergedConfig[key] = existingValue;
+          } else if (prop.type === 'string') {
+            mergedConfig[key] = '';
+          } else if (prop.type === 'number') {
+            mergedConfig[key] = undefined;
+          } else if (prop.type === 'boolean') {
+            mergedConfig[key] = false;
+          } else if (prop.type === 'array') {
+            mergedConfig[key] = [];
+          } else if (prop.type === 'object') {
+            mergedConfig[key] = {};
+          }
+        }
+      }
+      if (node.type === 'webhook_trigger') {
+        mergedConfig.method = 'POST';
+      }
+      setConfig(mergedConfig);
+      configForm.setFields([
+        {
+          name: ['config'],
+          value: mergedConfig,
+          errors: [],
+          warnings: [],
+          touched: false,
+        },
+      ]);
+      setDirty(false);
+      setPrompt('');
+      setAlsoSaveAsInstance(false);
+    }
+  }, [node?.id, currentNodeType]);
+
+  // The Workflow DSL is authoritative. Keep the panel synchronized even when
+  // its previous local edit was still marked dirty.
+  useEffect(() => {
+    if (!node) return;
+    setLabel(node.label);
+    const mergedConfig: Record<string, any> = { ...effectiveNodeConfig };
+    if (!usesCustomConfigEditor) {
       for (const [key, prop] of Object.entries<any>(properties)) {
         const existingValue = effectiveNodeConfig[key];
         if (existingValue !== undefined) {
@@ -245,100 +353,112 @@ export function NodePropertyPanel({
           mergedConfig[key] = {};
         }
       }
-      if (node.type === 'webhook_trigger') {
-        mergedConfig.method = 'POST';
-      }
-      setConfig(mergedConfig);
-      configForm.resetFields();
-      configForm.setFieldsValue({ config: mergedConfig });
-      setDirty(false);
-      setPrompt('');
-      setAlsoSaveAsInstance(false);
-    }
-  }, [node?.id, currentNodeType]);
-
-  // Sync form when node config/label updates externally (e.g. AI edit)
-  useEffect(() => {
-    if (!node || dirty) return;
-    setLabel(node.label);
-    const mergedConfig: Record<string, any> = {};
-    for (const [key, prop] of Object.entries<any>(properties)) {
-      const existingValue = effectiveNodeConfig[key];
-      if (existingValue !== undefined) {
-        mergedConfig[key] = existingValue;
-      } else if (prop.type === 'string') {
-        mergedConfig[key] = '';
-      } else if (prop.type === 'number') {
-        mergedConfig[key] = undefined;
-      } else if (prop.type === 'boolean') {
-        mergedConfig[key] = false;
-      } else if (prop.type === 'array') {
-        mergedConfig[key] = [];
-      } else if (prop.type === 'object') {
-        mergedConfig[key] = {};
-      }
     }
     setConfig(mergedConfig);
-    configForm.resetFields();
-    configForm.setFieldsValue({ config: mergedConfig });
+    configForm.setFields([
+      {
+        name: ['config'],
+        value: mergedConfig,
+        errors: [],
+        warnings: [],
+        touched: false,
+      },
+    ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [node?.label, JSON.stringify(effectiveNodeConfig)]);
 
-  // Load workflow list for Sub Workflow node
-  useEffect(() => {
-    if (node?.type === 'sub_workflow') {
-      customRequest<any[]>('workflow/callable', 'GET')
-        .then((res) => {
-          const list = Array.isArray(res) ? res : [];
-          setWorkflowOptions(
-            list
-              .filter((w: any) => String(w.id) !== currentWorkflowId)
-              .map((w: any) => ({
-                label: w.name,
-                value: String(w.id),
-                inputParameters: Array.isArray(w.inputParameters)
-                  ? w.inputParameters
-                  : [],
-              })),
-          );
-        })
-        .catch(() => {});
-    }
-  }, [node?.type, currentWorkflowId]);
-
   // Load instances for current node type
-  useEffect(() => {
-    if (
-      !currentNodeType?.id ||
-      currentNodeType.instancePolicy === 'INLINE_ONLY'
-    ) {
+  const loadInstances = useCallback(async () => {
+    if (!currentNodeType?.id || node?.instanceRef) {
       setInstances([]);
+      setInstanceLoadError(false);
       return;
     }
     setInstanceLoading(true);
-    customRequest<{ data: any[] }>('workflowNodeInstance/findMany', 'POST', {
-      where: { nodeTypeId: Number(currentNodeType.id), isEnabled: true },
-      take: 100,
-    })
-      .then((res) => {
-        const list = Array.isArray(res) ? res : res?.data || [];
-        setInstances(list);
-      })
-      .catch(() => setInstances([]))
-      .finally(() => setInstanceLoading(false));
-  }, [currentNodeType?.id, currentNodeType?.instancePolicy]);
+    try {
+      const res = await customRequest<{ data: any[] }>(
+        'workflowNodeInstance/findMany',
+        'POST',
+        {
+          where: { nodeTypeId: Number(currentNodeType.id), isEnabled: true },
+          take: 100,
+        },
+      );
+      const list = Array.isArray(res) ? res : res?.data || [];
+      setInstances(list);
+      setInstanceLoadError(false);
+    } catch {
+      setInstances([]);
+      setInstanceLoadError(true);
+    } finally {
+      setInstanceLoading(false);
+    }
+  }, [currentNodeType?.id, node?.instanceRef]);
+
+  useEffect(() => void loadInstances(), [loadInstances]);
+
+  const visibleNodeTypes = useMemo(() => {
+    const normalizedQuery = paletteQuery.trim().toLocaleLowerCase();
+    if (!normalizedQuery) return nodeTypes;
+    return nodeTypes.filter((nodeType) => {
+      const translated = t(`nodeTypes.${nodeType.type}`, {
+        defaultValue: nodeType.label,
+      });
+      return [translated, nodeType.label, nodeType.description, nodeType.type]
+        .filter(Boolean)
+        .some((value) =>
+          String(value).toLocaleLowerCase().includes(normalizedQuery),
+        );
+    });
+  }, [nodeTypes, paletteQuery, t]);
 
   // Reset selection when node changes
   useEffect(() => {
-    setSelectedInstanceId(null);
     setAlsoSaveAsInstance(false);
+    setCreateInstanceOpen(false);
   }, [node?.id]);
 
+  const buildCurrentUpdates = useCallback((): NodePropertyUpdates | null => {
+    if (!node || referencedConfigUnavailable) return null;
+    const currentConfig = usesCustomConfigEditor
+      ? (configForm.getFieldValue('config') ?? {})
+      : config;
+    const cleanConfig: Record<string, any> = {};
+    for (const [key, value] of Object.entries(currentConfig)) {
+      if (value !== undefined && value !== '') cleanConfig[key] = value;
+    }
+    return {
+      label,
+      config: cleanConfig,
+      ...(node.instanceRef && { configOverride: cleanConfig }),
+    };
+  }, [
+    config,
+    configForm,
+    label,
+    node,
+    referencedConfigUnavailable,
+    usesCustomConfigEditor,
+  ]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getPendingUpdate: () => {
+        const updates = buildCurrentUpdates();
+        return dirty && node && updates ? { nodeId: node.id, updates } : null;
+      },
+      markSaved: () => setDirty(false),
+    }),
+    [buildCurrentUpdates, dirty, node],
+  );
+
   if (!node) {
     // Panel state: generating
     if (aiLoading) {
       return (
         <div
+          className="workflow-node-panel"
           style={{
             width: 320,
             display: 'flex',
@@ -368,6 +488,7 @@ export function NodePropertyPanel({
 
     return (
       <div
+        className="workflow-node-panel"
         style={{
           width: 320,
           display: 'flex',
@@ -379,90 +500,87 @@ export function NodePropertyPanel({
       >
         {/* Node palette */}
         <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
-          <Text
-            type="secondary"
-            style={{ fontSize: 13, display: 'block', marginBottom: 12 }}
-          >
-            拖拽节点到左侧画布
-          </Text>
+          <div className="workflow-node-palette__intro">
+            <Text strong style={{ display: 'block', marginBottom: 3 }}>
+              {t('editor.addNode')}
+            </Text>
+            <Text
+              type="secondary"
+              style={{ fontSize: 12, display: 'block', marginBottom: 10 }}
+            >
+              {t('editor.dragNodes')}
+            </Text>
+            <Input
+              allowClear
+              prefix={<SearchOutlined />}
+              value={paletteQuery}
+              onChange={(event) => setPaletteQuery(event.target.value)}
+              placeholder={t('editor.searchNodes')}
+            />
+          </div>
           {Object.entries(
-            nodeTypes.reduce<Record<string, WorkflowNodeType[]>>((acc, nt) => {
-              const cat = nt.category || 'ACTION';
-              if (!acc[cat]) acc[cat] = [];
-              acc[cat].push(nt);
-              return acc;
-            }, {}),
+            visibleNodeTypes.reduce<Record<string, WorkflowNodeType[]>>(
+              (acc, nt) => {
+                const cat = nt.category || 'ACTION';
+                if (!acc[cat]) acc[cat] = [];
+                acc[cat].push(nt);
+                return acc;
+              },
+              {},
+            ),
           ).map(([category, types]) => {
             const colors = CATEGORY_COLORS[category] || CATEGORY_COLORS.ACTION;
+            const categoryLabel = t(`nodeCategories.${category}`, {
+              defaultValue: CATEGORY_LABELS[category] || category,
+            });
             return (
-              <div key={category} style={{ marginBottom: 12 }}>
-                <Text
-                  strong
-                  style={{
-                    fontSize: 12,
-                    color: 'var(--ant-color-text-secondary)',
-                    display: 'block',
-                    marginBottom: 6,
-                  }}
-                >
-                  {CATEGORY_LABELS[category] || category}
-                </Text>
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+              <div key={category} className="workflow-node-palette__category">
+                <div className="workflow-node-palette__category-title">
+                  <span
+                    className="workflow-node-palette__category-dot"
+                    style={{ background: colors.border }}
+                  />
+                  {categoryLabel}
+                </div>
+                <div className="workflow-node-palette__grid">
                   {types.map((nt) => (
-                    <Tooltip
+                    <div
                       key={nt.type}
-                      title={
-                        <div
-                          style={{
-                            whiteSpace: 'pre-line',
-                            fontSize: 12,
-                            lineHeight: 1.6,
-                          }}
-                        >
-                          {nt.description || nt.label}
-                        </div>
-                      }
-                      placement="left"
-                      mouseEnterDelay={0.3}
-                      styles={{ root: { maxWidth: 320 } }}
+                      draggable
+                      className="workflow-node-palette__item"
+                      style={{ borderColor: colors.border }}
+                      onDragStart={(e) => {
+                        e.dataTransfer.setData(
+                          'application/workflow-node-type',
+                          JSON.stringify(nt),
+                        );
+                        e.dataTransfer.effectAllowed = 'move';
+                      }}
                     >
-                      <div
-                        draggable
-                        onDragStart={(e) => {
-                          e.dataTransfer.setData(
-                            'application/workflow-node-type',
-                            JSON.stringify(nt),
-                          );
-                          e.dataTransfer.effectAllowed = 'move';
-                        }}
-                        style={{
-                          cursor: 'grab',
-                          padding: '5px 10px',
-                          background: colors.bg,
-                          border: `1px solid ${colors.border}`,
-                          borderRadius: 6,
-                          fontSize: 12,
-                          userSelect: 'none',
-                        }}
-                      >
+                      <Text strong style={{ fontSize: 12 }}>
                         {t(`nodeTypes.${nt.type}`, {
                           defaultValue: nt.label,
                         })}
-                      </div>
-                    </Tooltip>
+                      </Text>
+                    </div>
                   ))}
                 </div>
               </div>
             );
           })}
+          {visibleNodeTypes.length === 0 && (
+            <Text type="secondary">{t('editor.noMatchingNodes')}</Text>
+          )}
         </div>
       </div>
     );
   }
 
   function handleConfigChange(key: string, value: any) {
-    setConfig((prev) => ({ ...prev, [key]: value }));
+    const nextConfig = { ...config, [key]: value };
+    setConfig(nextConfig);
     setDirty(true);
+    if (node) onConfigDraftChange?.(node.id, nextConfig);
   }
 
   function handleLabelChange(value: string) {
@@ -474,14 +592,9 @@ export function NodePropertyPanel({
 
   async function handleSave() {
     if (!node) return;
-    const currentConfig = usesCustomConfigEditor
-      ? (configForm.getFieldValue('config') ?? {})
-      : config;
-    // Clean undefined values
-    const cleanConfig: Record<string, any> = {};
-    for (const [k, v] of Object.entries(currentConfig)) {
-      if (v !== undefined && v !== '') cleanConfig[k] = v;
-    }
+    const updates = buildCurrentUpdates();
+    if (!updates?.config) return;
+    const cleanConfig = updates.config;
     if (
       !node.instanceRef &&
       alsoSaveAsInstance &&
@@ -524,11 +637,7 @@ export function NodePropertyPanel({
         setSaveAsLoading(false);
       }
     } else {
-      onSave(node.id, {
-        label,
-        config: cleanConfig,
-        ...(node.instanceRef && { configOverride: cleanConfig }),
-      });
+      onSave(node.id, updates);
       message.success('节点已保存');
     }
     setDirty(false);
@@ -540,10 +649,8 @@ export function NodePropertyPanel({
     setPrompt('');
   }
 
-  function handleReferenceInstance() {
-    if (!node || !selectedInstanceId) return;
-    const inst = instances.find((i) => i.id === selectedInstanceId);
-    if (!inst) return;
+  function referenceInstance(inst: WorkflowNodeInstance) {
+    if (!node) return;
     onSave(node.id, {
       label: inst.name,
       config: inst.config,
@@ -554,21 +661,6 @@ export function NodePropertyPanel({
       },
     });
     setLabel(inst.name);
-    setSelectedInstanceId(null);
-  }
-
-  function handleCopyAsTemplate() {
-    if (!node || !selectedInstanceId) return;
-    const inst = instances.find((i) => i.id === selectedInstanceId);
-    if (!inst) return;
-    setConfig(inst.config);
-    setLabel(inst.name);
-    setDirty(true);
-    setSelectedInstanceId(null);
-    if (node) {
-      onLabelChange(node.id, inst.name);
-    }
-    message.success('已加载实例配置，可自由修改');
   }
 
   function handleDetachReference() {
@@ -592,115 +684,13 @@ export function NodePropertyPanel({
           })
         : (schema.title ?? key);
 
-    // Special: workflowId → Select with workflow list
-    if (key === 'workflowId') {
-      return (
-        <div key={key}>
-          <Text
-            type="secondary"
-            style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
-          >
-            {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {fieldLabel}
-          </Text>
-          <Select
-            value={value || undefined}
-            onChange={(v) => {
-              const selected = workflowOptions.find(
-                (workflow) => workflow.value === v,
-              );
-              setConfig((current) => ({
-                ...current,
-                workflowId: v,
-                inputBindings: Object.fromEntries(
-                  (selected?.inputParameters ?? []).map((parameter) => [
-                    parameter.key,
-                    { source: 'WORKFLOW', path: parameter.key },
-                  ]),
-                ),
-              }));
-              setDirty(true);
-            }}
-            placeholder="选择子流程"
-            options={workflowOptions}
-            style={{ width: '100%' }}
-            allowClear
-            showSearch
-            filterOption={(input, option) =>
-              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-            }
-          />
-        </div>
-      );
-    }
-
-    if (key === 'inputBindings' && node?.type === 'sub_workflow') {
-      const selected = workflowOptions.find(
-        (workflow) => workflow.value === config.workflowId,
-      );
-      if (!selected) {
-        return (
-          <Text key={key} type="secondary">
-            请先选择要调用的 Workflow
-          </Text>
-        );
-      }
-      if (selected.inputParameters.length === 0) {
-        return (
-          <Text key={key} type="secondary">
-            这个 Workflow 不需要调用参数
-          </Text>
-        );
-      }
-      const bindings =
-        config.inputBindings &&
-        typeof config.inputBindings === 'object' &&
-        !Array.isArray(config.inputBindings)
-          ? (config.inputBindings as Record<string, ParameterBinding>)
-          : {};
-      return (
-        <Space
-          key={key}
-          direction="vertical"
-          size={12}
-          style={{ width: '100%' }}
-        >
-          <Text strong>调用参数</Text>
-          {selected.inputParameters.map((parameter) => (
-            <div key={parameter.key}>
-              <Text style={{ display: 'block', marginBottom: 6 }}>
-                {parameter.label ?? parameter.key}
-                {parameter.required ? ' *' : ''}
-              </Text>
-              <ParameterBindingEditor
-                name={parameter.label ?? parameter.key}
-                defaultPath={parameter.key}
-                value={
-                  bindings[parameter.key] ?? {
-                    source: 'WORKFLOW',
-                    path: parameter.key,
-                  }
-                }
-                onChange={(binding) =>
-                  handleConfigChange('inputBindings', {
-                    ...bindings,
-                    [parameter.key]: binding,
-                  })
-                }
-              />
-            </div>
-          ))}
-        </Space>
-      );
-    }
-
     // String with enum → Select
     if (schema.type === 'string' && schema.enum) {
       return (
         <div key={key}>
           <Text
-            type="secondary"
-            style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
+            className="workflow-node-config__field-label"
+            style={{ marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
             {fieldLabel}
@@ -722,8 +712,8 @@ export function NodePropertyPanel({
       return (
         <div key={key}>
           <Text
-            type="secondary"
-            style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
+            className="workflow-node-config__field-label"
+            style={{ marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
             {fieldLabel}
@@ -751,8 +741,8 @@ export function NodePropertyPanel({
       return (
         <div key={key}>
           <Text
-            type="secondary"
-            style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
+            className="workflow-node-config__field-label"
+            style={{ marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
             {fieldLabel}
@@ -762,7 +752,6 @@ export function NodePropertyPanel({
             onChange={(v) => handleConfigChange(key, v)}
             placeholder={placeholder}
             style={{ width: '100%' }}
-            min={0}
           />
         </div>
       );
@@ -779,7 +768,7 @@ export function NodePropertyPanel({
             alignItems: 'center',
           }}
         >
-          <Text type="secondary" style={{ fontSize: 13 }}>
+          <Text className="workflow-node-config__field-label">
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
             {fieldLabel}
           </Text>
@@ -797,8 +786,8 @@ export function NodePropertyPanel({
       return (
         <div key={key}>
           <Text
-            type="secondary"
-            style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
+            className="workflow-node-config__field-label"
+            style={{ marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
             {fieldLabel}
@@ -822,8 +811,8 @@ export function NodePropertyPanel({
       return (
         <div key={key}>
           <Text
-            type="secondary"
-            style={{ fontSize: 13, display: 'block', marginBottom: 4 }}
+            className="workflow-node-config__field-label"
+            style={{ marginBottom: 4 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
             {fieldLabel}
@@ -867,6 +856,7 @@ export function NodePropertyPanel({
           <Button
             type="dashed"
             size="small"
+            className="workflow-panel-action"
             icon={<PlusOutlined />}
             onClick={() => {
               const emptyItem: Record<string, string> = {};
@@ -892,8 +882,8 @@ export function NodePropertyPanel({
       return (
         <div key={key}>
           <Text
-            type="secondary"
-            style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
+            className="workflow-node-config__field-label"
+            style={{ marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
             {fieldLabel}
@@ -902,10 +892,10 @@ export function NodePropertyPanel({
               (JSON)
             </Text>
           </Text>
-          <TextArea
+          <WorkflowCodeEditor
+            language="json"
             value={displayValue === '{}' ? '' : displayValue}
-            onChange={(e) => {
-              const raw = e.target.value;
+            onChange={(raw) => {
               try {
                 handleConfigChange(key, JSON.parse(raw));
               } catch {
@@ -913,8 +903,8 @@ export function NodePropertyPanel({
                 handleConfigChange(key, raw);
               }
             }}
-            placeholder={`{"key": "value"}`}
-            autoSize={{ minRows: 2, maxRows: 5 }}
+            height={150}
+            ariaLabel={`${fieldLabel} JSON`}
           />
         </div>
       );
@@ -924,8 +914,8 @@ export function NodePropertyPanel({
     return (
       <div key={key}>
         <Text
-          type="secondary"
-          style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
+          className="workflow-node-config__field-label"
+          style={{ marginBottom: 2 }}
         >
           {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
           {fieldLabel}
@@ -943,69 +933,41 @@ export function NodePropertyPanel({
 
   return (
     <div
-      className="workflow-node-config"
-      style={{
-        width:
-          usesCustomConfigEditor && currentNodeType?.type !== 'return_result'
-            ? 500
-            : 360,
-        borderLeft: '1px solid var(--ant-color-border-secondary)',
-        background: 'var(--ant-color-bg-container)',
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-      }}
+      className="workflow-node-config workflow-node-panel workflow-node-panel--editor"
+      data-testid="workflow-editor-panel-node-property"
+      style={
+        {
+          width:
+            node?.type === 'approval'
+              ? 'clamp(560px, 46vw, 680px)'
+              : 'clamp(440px, 38vw, 520px)',
+        } as CSSProperties
+      }
     >
-      {/* Header */}
-      <div
-        style={{
-          padding: '16px 16px 12px',
-          borderBottom: '1px solid var(--ant-color-border-secondary)',
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'flex-start',
-        }}
-      >
-        <Space direction="vertical" size={8} style={{ minWidth: 0 }}>
-          <Title level={5} style={{ margin: 0, fontSize: 14 }}>
+      <header className="workflow-node-panel__header">
+        <div
+          className="workflow-node-panel__identity"
+          data-testid="workflow-node-properties-node-identity"
+        >
+          <Title level={5} className="workflow-node-panel__title">
             {t('editor.nodeConfiguration')}
           </Title>
-          <div
+          <Text
+            className="workflow-node-panel__identity-name"
             style={{
-              minWidth: 180,
-              padding: '7px 10px',
+              color: currentNodeTypeColors.accent,
               background: currentNodeTypeColors.bg,
-              border: `1px solid ${currentNodeTypeColors.border}`,
-              borderRadius: 6,
+              borderColor: currentNodeTypeColors.border,
             }}
           >
-            <Text
-              type="secondary"
-              style={{ display: 'block', fontSize: 11, lineHeight: 1.2 }}
-            >
-              {t('editor.nodeType')}
-            </Text>
-            <Text strong style={{ display: 'block', marginTop: 2 }}>
-              {currentNodeTypeLabel}
-            </Text>
-          </div>
-        </Space>
-        <Button
-          type="text"
-          danger
-          icon={<DeleteOutlined />}
-          onClick={() => onDelete?.(node.id)}
-          title={t('editor.deleteNode')}
-        />
-      </div>
+            {currentNodeTypeLabel}
+          </Text>
+        </div>
+        {dirty && <Text type="warning">{t('editor.unsavedChanges')}</Text>}
+      </header>
 
       {/* Tab Switcher */}
-      <div
-        style={{
-          padding: '12px 16px 0',
-          borderBottom: '1px solid var(--ant-color-border-secondary)',
-        }}
-      >
+      <div className="workflow-node-panel__tabs">
         <Segmented
           value={activeTab}
           onChange={(val) => setActiveTab(val as 'config' | 'ai')}
@@ -1014,15 +976,19 @@ export function NodePropertyPanel({
             { label: t('editor.aiEditTab'), value: 'ai' },
           ]}
           block
-          style={{ marginBottom: 12 }}
         />
       </div>
 
       {/* Form */}
-      <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
+      <div className="workflow-node-panel__scroll">
         {activeTab === 'config' && (
-          <Space direction="vertical" size={14} style={{ width: '100%' }}>
-            <div>
+          <Space
+            className="workflow-node-panel__stack"
+            direction="vertical"
+            size={14}
+            style={{ width: '100%' }}
+          >
+            <Card size="small" styles={{ body: { padding: 16 } }}>
               <Text className="workflow-node-config__section-title">
                 {t('editor.nodeName')}
               </Text>
@@ -1030,223 +996,295 @@ export function NodePropertyPanel({
                 value={label}
                 onChange={(e) => handleLabelChange(e.target.value)}
               />
-            </div>
+            </Card>
 
             {/* Instance Selector / Reference Banner */}
-            {currentNodeType?.instancePolicy !== 'INLINE_ONLY' &&
-              !node.instanceRef && (
-                <div
-                  style={{
-                    padding: 12,
-                    background: 'var(--ant-color-fill-quaternary)',
-                    borderRadius: 6,
-                  }}
-                >
-                  <Text
-                    type="secondary"
-                    style={{ fontSize: 12, display: 'block', marginBottom: 6 }}
+            {!node.instanceRef && (
+              <Card
+                size="small"
+                className="workflow-node-panel__template-card"
+                styles={{ body: { padding: 16 } }}
+              >
+                <div className="workflow-node-panel__section-head">
+                  <div>
+                    <Text className="workflow-node-panel__section-title">
+                      {t('editor.template')}
+                    </Text>
+                    <Text className="workflow-node-panel__section-hint">
+                      {t('editor.templateOptional')}
+                    </Text>
+                  </div>
+                  <Button
+                    size="small"
+                    className="workflow-panel-action"
+                    icon={<PlusOutlined />}
+                    onClick={() => setCreateInstanceOpen(true)}
                   >
-                    {t('editor.reuseInstance')}
-                  </Text>
-                  <Select
-                    value={selectedInstanceId ?? undefined}
-                    onChange={(v) => setSelectedInstanceId(v)}
-                    placeholder={
-                      instanceLoading
-                        ? t('editor.loadingInstances')
-                        : instances.length === 0
-                          ? t('editor.noInstances')
-                          : t('editor.selectInstance')
-                    }
-                    options={instances.map((i) => ({
-                      label: i.name,
-                      value: i.id,
-                    }))}
-                    style={{ width: '100%', marginBottom: 8 }}
-                    allowClear
-                    showSearch
-                    loading={instanceLoading}
-                    disabled={instances.length === 0 && !instanceLoading}
-                    filterOption={(input, option) =>
-                      (option?.label ?? '')
-                        .toLowerCase()
-                        .includes(input.toLowerCase())
-                    }
-                  />
-                  {selectedInstanceId && (
-                    <Space size={8}>
-                      <Button
-                        size="small"
-                        icon={<LinkOutlined />}
-                        onClick={handleReferenceInstance}
-                      >
-                        {t('editor.referenceInstance')}
-                      </Button>
-                      {currentNodeType?.instancePolicy === 'OPTIONAL' && (
-                        <Button size="small" onClick={handleCopyAsTemplate}>
-                          {t('editor.copyInstanceConfig')}
-                        </Button>
-                      )}
-                    </Space>
-                  )}
+                    {t('editor.createTemplate')}
+                  </Button>
                 </div>
-              )}
+                <Select
+                  placeholder={
+                    instanceLoading
+                      ? t('editor.loadingInstances')
+                      : instances.length === 0
+                        ? t('editor.noTemplates')
+                        : t('editor.selectTemplate')
+                  }
+                  options={instances.map((i) => ({
+                    label: i.name,
+                    value: i.id,
+                  }))}
+                  style={{ width: '100%' }}
+                  showSearch
+                  loading={instanceLoading}
+                  disabled={instances.length === 0 && !instanceLoading}
+                  onChange={(instanceId) => {
+                    const instance = instances.find(
+                      (item) => item.id === instanceId,
+                    );
+                    if (instance) referenceInstance(instance);
+                  }}
+                  filterOption={(input, option) =>
+                    (option?.label ?? '')
+                      .toLowerCase()
+                      .includes(input.toLowerCase())
+                  }
+                />
+                {instanceLoadError && (
+                  <div className="workflow-inline-error">
+                    {t('editor.instanceLoadFailed')}{' '}
+                    <Button type="link" size="small" onClick={loadInstances}>
+                      {t('common.retry')}
+                    </Button>
+                  </div>
+                )}
+              </Card>
+            )}
             {node.instanceRef && (
-              <div
-                style={{
-                  padding: '10px 12px',
-                  background: 'var(--ant-color-primary-bg)',
-                  borderRadius: 6,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                }}
+              <Card
+                size="small"
+                className="workflow-node-panel__template-card workflow-node-panel__template-card--active"
+                styles={{ body: { padding: 16 } }}
               >
-                <Text style={{ fontSize: 13 }}>
-                  {t('editor.referencedInstance')}:{' '}
-                  {node.instanceRef.instanceCode}
-                </Text>
-                {currentNodeType?.instancePolicy === 'OPTIONAL' && (
+                <div className="workflow-node-panel__template-reference">
+                  <span className="workflow-node-panel__template-status" />
+                  <div className="workflow-node-panel__template-copy">
+                    <Text className="workflow-node-panel__section-title">
+                      {t('editor.referencedInstance')}
+                    </Text>
+                    <code>{node.instanceRef.instanceCode}</code>
+                  </div>
                   <Button
                     size="small"
+                    className="workflow-panel-action"
                     icon={<DisconnectOutlined />}
                     onClick={handleDetachReference}
                   >
                     {t('editor.detach')}
                   </Button>
-                )}
-              </div>
-            )}
-            {node.instanceRef && (
-              <Text type="secondary" style={{ fontSize: 12 }}>
-                {t('editor.referenceHint')}
-              </Text>
+                </div>
+                <Text className="workflow-node-panel__section-hint">
+                  {t('editor.referenceHint')}
+                </Text>
+              </Card>
             )}
 
             {/* Schema-driven config fields */}
-            {(Object.keys(properties).length > 0 || usesCustomConfigEditor) && (
-              <div>
-                {Object.keys(properties).length > 0 && (
-                  <Text className="workflow-node-config__section-title">
-                    {t('editor.parameters')}
-                  </Text>
-                )}
-                {usesCustomConfigEditor ? (
-                  <Form
-                    form={configForm}
-                    layout="vertical"
-                    onValuesChange={(_, values) => {
-                      setConfig(values.config ?? {});
-                      setDirty(true);
-                    }}
-                  >
-                    <SchemaForm
-                      schema={currentNodeType?.configSchema ?? null}
-                      uiSchema={effectiveUiSchema ?? null}
-                    />
-                  </Form>
-                ) : (
-                  <Space
-                    direction="vertical"
-                    size={10}
-                    style={{ width: '100%' }}
-                  >
-                    {Object.entries(properties).map(([key, propSchema]) =>
-                      renderConfigField(key, propSchema),
-                    )}
-                  </Space>
-                )}
-              </div>
+            {referencedConfigUnavailable ? (
+              <Alert
+                type={referencedConfigStatus === 'error' ? 'error' : 'info'}
+                showIcon
+                message={
+                  referencedConfigStatus === 'error'
+                    ? t('editor.templateConfigLoadFailed')
+                    : t('editor.templateConfigLoading')
+                }
+                description={
+                  referencedConfigStatus === 'error'
+                    ? t('editor.templateConfigLoadFailedHint')
+                    : t('editor.templateConfigLoadingHint')
+                }
+                action={
+                  referencedConfigStatus === 'error' &&
+                  onRetryReferencedConfigs ? (
+                    <Button size="small" onClick={onRetryReferencedConfigs}>
+                      {t('common.retry')}
+                    </Button>
+                  ) : undefined
+                }
+              />
+            ) : (
+              (Object.keys(properties).length > 0 || usesCustomConfigEditor) &&
+              (usesTopLevelApprovalSections ? (
+                <Form
+                  form={configForm}
+                  layout="vertical"
+                  className="workflow-node-panel__approval-sections"
+                  {...formValidation}
+                  onValuesChange={(_, values) => {
+                    const nextConfig = values.config ?? {};
+                    setConfig(nextConfig);
+                    setDirty(true);
+                    onConfigDraftChange?.(node.id, nextConfig);
+                  }}
+                >
+                  <SchemaForm
+                    schema={currentNodeType?.configSchema ?? null}
+                    uiSchema={effectiveUiSchema ?? null}
+                    validate={false}
+                  />
+                </Form>
+              ) : (
+                <Card
+                  size="small"
+                  className="workflow-node-panel__parameters-card"
+                  styles={{ body: { padding: 16 } }}
+                >
+                  {Object.keys(properties).length > 0 && (
+                    <Text className="workflow-node-config__section-title">
+                      {t('editor.parameters')}
+                    </Text>
+                  )}
+                  {usesCustomConfigEditor ? (
+                    <Form
+                      form={configForm}
+                      layout="vertical"
+                      {...formValidation}
+                      onValuesChange={(_, values) => {
+                        const nextConfig = values.config ?? {};
+                        setConfig(nextConfig);
+                        setDirty(true);
+                        onConfigDraftChange?.(node.id, nextConfig);
+                      }}
+                    >
+                      <SchemaForm
+                        schema={currentNodeType?.configSchema ?? null}
+                        uiSchema={effectiveUiSchema ?? null}
+                        validate={false}
+                      />
+                    </Form>
+                  ) : (
+                    <Space
+                      direction="vertical"
+                      size={10}
+                      style={{ width: '100%' }}
+                    >
+                      {Object.entries(properties).map(([key, propSchema]) =>
+                        renderConfigField(key, propSchema),
+                      )}
+                    </Space>
+                  )}
+                </Card>
+              ))
             )}
 
-            <NodeOutputSummary node={node} nodeType={currentNodeType} />
-
-            {/* Save section */}
-            <div>
-              {!node.instanceRef &&
-                currentNodeType?.instancePolicy !== 'REQUIRED' && (
-                  <>
-                    <Checkbox
-                      checked={alsoSaveAsInstance}
-                      onChange={(e) => setAlsoSaveAsInstance(e.target.checked)}
-                      style={{ marginBottom: 8 }}
-                    >
-                      <Text style={{ fontSize: 13 }}>
-                        {t('editor.saveAsInstance')}
-                      </Text>
-                    </Checkbox>
-                    {alsoSaveAsInstance && (
-                      <Space
-                        direction="vertical"
-                        size={6}
-                        style={{ width: '100%', marginBottom: 8 }}
-                      >
-                        <Input
-                          value={newInstanceName}
-                          onChange={(e) => setNewInstanceName(e.target.value)}
-                          placeholder={t('editor.instanceNamePlaceholder')}
-                          size="small"
-                        />
-                        <Input
-                          value={newInstanceDesc}
-                          onChange={(e) => setNewInstanceDesc(e.target.value)}
-                          placeholder={t('common.optionalDescription')}
-                          size="small"
-                        />
-                      </Space>
-                    )}
-                  </>
-                )}
-              <Button
-                type="primary"
-                block
-                loading={saveAsLoading}
-                disabled={
-                  !node.instanceRef &&
-                  alsoSaveAsInstance &&
-                  !newInstanceName.trim()
-                }
-                onClick={handleSave}
-              >
-                {t('editor.saveChanges')}
-              </Button>
-            </div>
+            {effectiveNode && !referencedConfigUnavailable && (
+              <NodeOutputSummary
+                node={{ ...effectiveNode, config }}
+                nodeType={currentNodeType}
+                nodes={nodes}
+                edges={edges}
+                nodeTypes={nodeTypes}
+              />
+            )}
           </Space>
         )}
 
         {activeTab === 'ai' && (
-          <div>
-            <Text
-              type="secondary"
-              style={{ fontSize: 13, display: 'block', marginBottom: 8 }}
-            >
+          <Card
+            size="small"
+            className="workflow-node-panel__ai"
+            styles={{ body: { padding: 16 } }}
+          >
+            <Text className="workflow-node-panel__section-title">
+              {t('editor.aiEditTab')}
+            </Text>
+            <Text className="workflow-node-panel__section-hint workflow-node-panel__ai-hint">
               {t('editor.aiEditHint')}
             </Text>
-            <div style={{ display: 'flex', gap: 4 }}>
-              <TextArea
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                placeholder={t('editor.aiEditPlaceholder')}
-                autoSize={{ minRows: 4, maxRows: 8 }}
-                onPressEnter={(e) => {
-                  if (e.ctrlKey) handleAiSubmit();
-                }}
-              />
-            </div>
+            <TextArea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder={t('editor.aiEditPlaceholder')}
+              autoSize={{ minRows: 5, maxRows: 10 }}
+              onPressEnter={(e) => {
+                if (e.ctrlKey) handleAiSubmit();
+              }}
+            />
             <Button
-              type="default"
+              type="primary"
               icon={<SendOutlined />}
               loading={aiLoading}
               onClick={handleAiSubmit}
-              disabled={!prompt.trim()}
-              style={{ marginTop: 8 }}
+              disabled={!prompt.trim() || referencedConfigUnavailable}
               block
             >
               {t('editor.send')}
             </Button>
-          </div>
+          </Card>
         )}
       </div>
+      {activeTab === 'config' && (
+        <footer className="workflow-node-panel__footer">
+          {!node.instanceRef && (
+            <div className="workflow-node-panel__save-template">
+              <Checkbox
+                checked={alsoSaveAsInstance}
+                onChange={(e) => setAlsoSaveAsInstance(e.target.checked)}
+              >
+                <Text>{t('editor.saveAsInstance')}</Text>
+              </Checkbox>
+              {alsoSaveAsInstance && (
+                <Space direction="vertical" size={6} style={{ width: '100%' }}>
+                  <Input
+                    value={newInstanceName}
+                    onChange={(e) => setNewInstanceName(e.target.value)}
+                    placeholder={t('editor.instanceNamePlaceholder')}
+                    size="small"
+                  />
+                  <Input
+                    value={newInstanceDesc}
+                    onChange={(e) => setNewInstanceDesc(e.target.value)}
+                    placeholder={t('common.optionalDescription')}
+                    size="small"
+                  />
+                </Space>
+              )}
+            </div>
+          )}
+          <Button
+            type="primary"
+            size="large"
+            block
+            loading={saveAsLoading}
+            disabled={
+              referencedConfigUnavailable ||
+              (!node.instanceRef &&
+                alsoSaveAsInstance &&
+                !newInstanceName.trim())
+            }
+            onClick={handleSave}
+          >
+            {t('editor.saveChanges')}
+          </Button>
+        </footer>
+      )}
+      <CreateNodeInstanceDrawer
+        open={createInstanceOpen}
+        nodeType={currentNodeType}
+        onCancel={() => setCreateInstanceOpen(false)}
+        onCreated={(instance) => {
+          setCreateInstanceOpen(false);
+          setInstances((current) => [
+            instance,
+            ...current.filter((item) => item.id !== instance.id),
+          ]);
+          referenceInstance(instance);
+        }}
+      />
     </div>
   );
 }
+
+export const NodePropertyPanel = forwardRef(NodePropertyPanelImpl);