feat(frontend): Restore onboarding steps (#11027)

Wallet update removed `BUILDER_OPEN` and `BUILDER_RUN_AGENT`.

### Changes 🏗️

- Restore completion codepaths for `BUILDER_OPEN` and
`BUILDER_RUN_AGENT` for analytical purposes

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Tasks are completed silently

autogpt_platform/backend/schema.prisma

@@ -83,7 +83,7 @@ enum OnboardingStep {
   TRIGGER_WEBHOOK
   RUN_14_DAYS
   RUN_AGENTS_100
-  // No longer used but kept, so column doesn't break
+  // No longer rewarded but exist for analytical purposes
   BUILDER_OPEN
   BUILDER_RUN_AGENT
 }

autogpt_platform/frontend/src/app/(platform)/build/page.tsx

@@ -1,15 +1,22 @@
 "use client";
 
+import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
 import FlowEditor from "@/app/(platform)/build/components/legacy-builder/Flow/Flow";
 // import LoadingBox from "@/components/__legacy__/ui/loading";
 import { GraphID } from "@/lib/autogpt-server-api/types";
 import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
 import { Flow } from "./components/FlowEditor/Flow";
 import { BuilderViewTabs } from "./components/BuilderViewTabs/BuilderViewTabs";
 import { useBuilderView } from "./components/BuilderViewTabs/useBuilderViewTabs";
 
 function BuilderContent() {
   const query = useSearchParams();
+  const { completeStep } = useOnboarding();
+
+  useEffect(() => {
+    completeStep("BUILDER_OPEN");
+  }, [completeStep]);
 
   const _graphVersion = query.get("flowVersion");
   const graphVersion = _graphVersion ? parseInt(_graphVersion) : undefined;

autogpt_platform/frontend/src/components/__legacy__/Wallet.tsx

@@ -166,10 +166,6 @@ export default function Wallet() {
   const [flash, setFlash] = useState(false);
   const [walletOpen, setWalletOpen] = useState(state?.walletShown || false);
 
-  const [stepsLength, setStepsLength] = useState<number | null>(
-    state?.completedSteps?.length || null,
-  );
-
   const totalCount = useMemo(() => {
     return groups.reduce((acc, group) => acc + group.tasks.length, 0);
   }, [groups]);
@@ -185,6 +181,9 @@ export default function Wallet() {
     );
   }, [groups, state?.completedSteps]);
 
+  // Needed to show confetti when a new step is completed
+  const [stepsLength, setStepsLength] = useState(completedCount);
+
   const walletRef = useRef<HTMLButtonElement | null>(null);
 
   const onWalletOpen = useCallback(async () => {
@@ -210,20 +209,15 @@ export default function Wallet() {
     if (!state?.completedSteps) {
       return;
     }
-    // If we haven't set the length yet, just set it and return
-    if (stepsLength === null) {
-      setStepsLength(state?.completedSteps?.length);
-      return;
-    }
-    // It's enough to compare array lengths,
+    // It's enough to check completed count,
     // because the order of completed steps is not important
-    // If the length is the same, we don't need to do anything
-    if (state?.completedSteps?.length === stepsLength) {
+    // If the count is the same, we don't need to do anything
+    if (completedCount === stepsLength) {
       return;
     }
     // Otherwise, we need to set the new length
-    setStepsLength(state?.completedSteps?.length);
-    // And make confetti
+    setStepsLength(completedCount);
+    // And emit confetti
     if (walletRef.current) {
       setTimeout(() => {
         fetchCredits();

autogpt_platform/frontend/src/hooks/useAgentGraph.tsx

@@ -821,6 +821,10 @@ export default function useAgentGraph(
         path.set("flowVersion", savedAgent.version.toString());
         path.set("flowExecutionID", graphExecution.id);
         router.push(`${pathname}?${path.toString()}`);
+
+        if (state?.completedSteps.includes("BUILDER_SAVE_AGENT")) {
+          completeStep("BUILDER_RUN_AGENT");
+        }
       } catch (error) {
         // Check if this is a structured validation error from the backend
         if (error instanceof ApiError && error.isGraphValidationError()) {

autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts

@@ -955,7 +955,10 @@ export type OnboardingStep =
   // The Pro Playground
   | "TRIGGER_WEBHOOK"
   | "RUN_14_DAYS"
-  | "RUN_AGENTS_100";
+  | "RUN_AGENTS_100"
+  // No longer used but tracked
+  | "BUILDER_OPEN"
+  | "BUILDER_RUN_AGENT";
 
 export interface UserOnboarding {
   completedSteps: OnboardingStep[];

autogpt_platform/frontend/src/providers/onboarding/onboarding-provider.tsx

@@ -85,7 +85,6 @@ export default function OnboardingProvider({
   useEffect(() => {
     const fetchOnboarding = async () => {
       try {
-        console.log("Fetching onboarding data");
         const enabled = await api.isOnboardingEnabled();
         if (!enabled && pathname.startsWith("/onboarding")) {
           router.push("/marketplace");
@@ -155,7 +154,6 @@ export default function OnboardingProvider({
         }
         return { ...prev, ...newState };
       });
-      console.log("Updating onboarding state:", newState);
       // Make the API call asynchronously to not block render
       setTimeout(() => {
         api.updateUserOnboarding(newState).catch((error) => {