Function AgentCreate

frontend/src/pages/AgentCreate.tsx:12–765

()

const OPENCLAW_STEPS = ['basicInfo', 'permissions'] as const;

export default function AgentCreate() {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const location = useLocation();
    const queryClient = useQueryClient();
    const [step, setStep] = useState(0);
    const [error, setError] = useState('');
    const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
    const [agentType, setAgentType] = useState<'native' | 'openclaw'>(() => {
        const params = new URLSearchParams(location.search);
        return params.get('type') === 'openclaw' ? 'openclaw' : 'native';
    });
    // Clear field error when user edits a field
    const clearFieldError = (field: string) => setFieldErrors(prev => { const n = { ...prev }; delete n[field]; return n; });
    const [createdApiKey, setCreatedApiKey] = useState('');
    // Current company (tenant) selection from layout sidebar
    const [currentTenant] = useState<string | null>(() => localStorage.getItem('current_tenant_id'));

    const [form, setForm] = useState({
        name: '',
        role_description: '',
        personality: '',
        boundaries: '',
        primary_model_id: '' as string,
        fallback_model_id: '' as string,
        permission_scope_type: 'company',
        permission_access_level: 'use',
        max_tokens_per_day: '',
        max_tokens_per_month: '',
        skill_ids: [] as string[],
    });
    const [channelValues, setChannelValues] = useState<Record<string, string>>({});

    // Fetch LLM models for step 1
    const { data: models = [] } = useQuery({
        queryKey: ['llm-models'],
        queryFn: enterpriseApi.llmModels,
    });

    // Tenant default model — used to preselect the model step so the open-source
    // default ("hire and go") path needs no clicks. User can override.
    const { data: myTenant } = useQuery({
        queryKey: ['tenant', 'me'],
        queryFn: () => tenantApi.me(),
        staleTime: 5 * 60 * 1000,
    });
    useEffect(() => {
        if (!myTenant?.default_model_id) return;
        const enabledModels = (models as any[]).filter((m: any) => m.enabled);
        const exists = enabledModels.some((m: any) => m.id === myTenant.default_model_id);
        if (exists) {
            setForm(prev => prev.primary_model_id ? prev : { ...prev, primary_model_id: myTenant.default_model_id! });
        }
    }, [myTenant?.default_model_id, models]);

    // Fetch global skills for step 3
    const { data: globalSkills = [] } = useQuery({
        queryKey: ['global-skills'],