refactor(onboarding): extract useAgentStatus and useGenerateEdgeKey hooks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/features/onboarding/hooks/use-agent-status.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useOnboarding } from "@onboardjs/react";
+import { getAgentStatusAction } from "@/features/onboarding/actions/get-agent-status.action";
+import type { OnboardingAgent } from "@/features/onboarding/types";
+
+export const useAgentStatus = () => {
+  const { state } = useOnboarding();
+  const agents = (state?.context.flowData.agents ?? []) as OnboardingAgent[];
+  const firstAgentId = agents[0]?.id;
+
+  return useQuery({
+    queryKey: ["onboarding-agent-status", firstAgentId],
+    queryFn: async () => {
+      if (!firstAgentId) return { connected: false };
+      const result = await getAgentStatusAction({ agentId: firstAgentId });
+      return result?.data ?? { connected: false };
+    },
+    refetchInterval: 3_000,
+    enabled: !!firstAgentId,
+  });
+};

src/features/onboarding/hooks/use-generate-edge-key.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { generateEdgeKeyAction } from "@/features/onboarding/actions/generate-edge-key.action";
+
+export const useGenerateEdgeKey = (agentId: string) => {
+  return useQuery({
+    queryKey: ["onboarding-edge-key", agentId],
+    queryFn: async () => {
+      const result = await generateEdgeKeyAction({ agentId });
+      if (!result?.data?.key) throw new Error("Failed to generate key");
+      return result.data.key;
+    },
+    staleTime: Infinity,
+    enabled: !!agentId,
+  });
+};

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

@@ -1,11 +1,10 @@
 "use client";
 
 import { useOnboarding } from "@onboardjs/react";
-import { useQuery } from "@tanstack/react-query";
-import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { CodeSnippet } from "@/components/common/code-snippet";
-import { generateEdgeKeyAction } from "@/features/onboarding/actions/generate-edge-key.action";
+import { useGenerateEdgeKey } from "@/features/onboarding/hooks/use-generate-edge-key";
 import type { OnboardingAgent } from "@/features/onboarding/types";
 
 export const StepAgentKey = () => {
@@ -31,15 +30,7 @@ export const StepAgentKey = () => {
 };
 
 const AgentKeyBlock = ({ agent }: { agent: OnboardingAgent }) => {
-    const { data, isLoading } = useQuery({
+  const { data, isLoading } = useGenerateEdgeKey(agent.id);
-        queryKey: ["edge-key", agent.id],
-        queryFn: async () => {
-            const result = await generateEdgeKeyAction({ agentId: agent.id });
-            if (!result?.data?.key) throw new Error("Failed to generate key");
-            return result.data.key;
-        },
-        staleTime: Infinity,
-    });
 
   if (isLoading) {
     return (

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

@@ -2,26 +2,14 @@
 
 import { useEffect } from "react";
 import { useOnboarding } from "@onboardjs/react";
-import { useQuery } from "@tanstack/react-query";
 import { Loader2 } from "lucide-react";
-import { getAgentStatusAction } from "@/features/onboarding/actions/get-agent-status.action";
+import { useAgentStatus } from "@/features/onboarding/hooks/use-agent-status";
 import type { OnboardingAgent } from "@/features/onboarding/types";
 
 export const StepAgentWaiting = () => {
   const { next, state } = useOnboarding();
   const agents = (state?.context.flowData.agents ?? []) as OnboardingAgent[];
-    const firstAgentId = agents[0]?.id;
+  const { data } = useAgentStatus();
-
-    const { data } = useQuery({
-        queryKey: ["agent-status", firstAgentId],
-        queryFn: async () => {
-            if (!firstAgentId) return { connected: false };
-            const result = await getAgentStatusAction({ agentId: firstAgentId });
-            return result?.data ?? { connected: false };
-        },
-        refetchInterval: 3000,
-        enabled: !!firstAgentId,
-    });
 
   useEffect(() => {
     if (data?.connected) {
@@ -33,9 +21,7 @@ export const StepAgentWaiting = () => {
     <div className="flex flex-col items-center justify-center gap-4 h-full text-center">
       <Loader2 className="size-10 animate-spin text-primary" />
       <h1 className="text-xl font-semibold">Waiting for your agent</h1>
-            <p className="text-sm text-muted-foreground">
+      <p className="text-sm text-muted-foreground">Checking connectivity every 3 seconds…</p>
-                Checking connectivity every 3 seconds…
-            </p>
       {agents.length > 0 && (
         <p className="text-xs text-muted-foreground">Agent: {agents[0].name}</p>
       )}