feat(onboarding): step-agent-create calls real createAgentAction + findOrCreate

src/features/onboarding/steps/step-agent-create.tsx

@@ -2,35 +2,70 @@
 
 import { useState } from "react";
 import { useOnboarding } from "@onboardjs/react";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { X } from "lucide-react";
-import { OnboardingAgent, OnboardingDefaultsData } from "@/features/onboarding/onboarding.types";
+import { createAgentAction } from "@/features/agents/agents.action";
+import type { OnboardingAgent, OnboardingDefaultsData } from "@/features/onboarding/onboarding.types";
 
 export const StepAgentCreate = () => {
     const { next, updateContext, state } = useOnboarding();
     const defaults = (state?.context.flowData.defaults ?? {}) as OnboardingDefaultsData;
-    const [name, setName] = useState("");
+    const existingAgents = (state?.context.flowData.agents ?? []) as OnboardingAgent[];
-    const [agents, setAgents] = useState<OnboardingAgent[]>([]);
+    const orgId = (state?.context.flowData.org as any)?.id as string | undefined;
 
-    const addAgent = () => {
+    const [name, setName] = useState("");
+    const [pendingAgents, setPendingAgents] = useState<{ tempId: string; name: string }[]>([]);
+
+    const addPending = () => {
         if (!name.trim()) return;
-        setAgents((prev) => [
+        setPendingAgents((prev) => [...prev, { tempId: crypto.randomUUID(), name: name.trim() }]);
-            ...prev,
-            { id: `agent-${prev.length + 1}`, name: name.trim(), notifierId: defaults.notifierId, storageId: defaults.storageId },
-        ]);
         setName("");
     };
 
-    const removeAgent = (id: string) => {
+    const removePending = (tempId: string) => {
-        setAgents((prev) => prev.filter((a) => a.id !== id));
+        setPendingAgents((prev) => prev.filter((a) => a.tempId !== tempId));
     };
 
-    const onContinue = async () => {
+    const mutation = useMutation({
-        await updateContext({ flowData: { ...state?.context.flowData, agents } });
+        mutationFn: async () => {
+            const created: OnboardingAgent[] = [];
+            for (const pa of pendingAgents) {
+                const result = await createAgentAction({
+                    organizationId: orgId,
+                    data: {
+                        name: pa.name,
+                        description: "",
+                    },
+                });
+                if (!result?.data?.data) {
+                    throw new Error(`Failed to create agent "${pa.name}"`);
+                }
+                created.push({
+                    id: result.data.data.id,
+                    name: result.data.data.name,
+                    notifierId: defaults.notifierId,
+                    storageId: defaults.storageId,
+                });
+            }
+            const allAgents = [...existingAgents, ...created];
+            await updateContext({
+                flowData: { ...state?.context.flowData, agents: allAgents },
+            });
             await next();
-    };
+        },
+        onError: (err: Error) => {
+            toast.error(err.message);
+        },
+    });
+
+    const allDisplayed = [
+        ...existingAgents.map((a) => ({ id: a.id, name: a.name, persisted: true })),
+        ...pendingAgents.map((p) => ({ id: p.tempId, name: p.name, persisted: false })),
+    ];
 
     return (
         <div className="flex flex-col gap-4">
@@ -43,24 +78,30 @@ export const StepAgentCreate = () => {
                     value={name}
                     onChange={(e) => setName(e.target.value)}
                     placeholder="agent-prod"
-                    onKeyDown={(e) => e.key === "Enter" && addAgent()}
+                    onKeyDown={(e) => e.key === "Enter" && addPending()}
                 />
-                <Button type="button" variant="outline" onClick={addAgent}>
+                <Button type="button" variant="outline" onClick={addPending}>
                     Add
                 </Button>
             </div>
             <div className="flex flex-wrap gap-2">
-                {agents.map((agent) => (
+                {allDisplayed.map((a) => (
-                    <Badge key={agent.id} variant="secondary" className="gap-1">
+                    <Badge key={a.id} variant={a.persisted ? "default" : "secondary"} className="gap-1">
-                        {agent.name}
+                        {a.name}
-                        <button type="button" onClick={() => removeAgent(agent.id)}>
+                        {!a.persisted && (
+                            <button type="button" onClick={() => removePending(a.id)}>
                                 <X className="size-3" />
                             </button>
+                        )}
                     </Badge>
                 ))}
             </div>
-            <Button type="button" onClick={onContinue}>
+            <Button
-                Continue
+                type="button"
+                onClick={() => mutation.mutate()}
+                disabled={mutation.isPending}
+            >
+                {mutation.isPending ? "Creating…" : "Continue"}
             </Button>
         </div>
     );