feat(onboarding): compute edgeKey directly on the server side to avoid lazy loading

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

@@ -5,6 +5,8 @@ import { useOnboarding } from "@onboardjs/react";
 import { toast } from "sonner";
 import { createAgentAction } from "@/features/agents/agents.action";
 import type { OnboardingAgent, OnboardingDefaultsData } from "@/features/onboarding/types";
+import { generateEdgeKey } from "@/utils/edge_key";
+import { getServerUrl } from "@/utils/get-server-url";
 
 export const useCreateAgent = () => {
   const { state, updateContext } = useOnboarding();
@@ -23,9 +25,12 @@ export const useCreateAgent = () => {
         throw new Error(result?.serverError ?? `Failed to create agent "${name}"`);
       }
 
+      const edgeKey = await generateEdgeKey(getServerUrl(), result.data.data.id);
+
       const newAgent: OnboardingAgent = {
         id: result.data.data.id,
         name: result.data.data.name,
+        edgeKey,
         notifierId: defaults.notifierId,
         storageId: defaults.storageId,
       };

src/features/onboarding/onboarding-state.ts

@@ -15,6 +15,8 @@ import type {
   OnboardingFlowData,
   OnboardingMeta,
 } from "@/features/onboarding/types";
+import { generateEdgeKey } from "@/utils/edge_key";
+import { getServerUrl } from "@/utils/get-server-url";
 
 export type ResolvedOnboardingState =
   | { redirect: "/dashboard/home" }
@@ -86,7 +88,13 @@ export async function resolveOnboardingState(): Promise<ResolvedOnboardingState>
     storageId: settings?.defaultStorageChannelId ?? undefined,
   };
 
-  const agentData = (agents ?? []).map((a) => ({ id: a.id, name: a.name }));
+  const agentData = await Promise.all(
+    (agents ?? []).map(async (a) => ({
+      id: a.id,
+      name: a.name,
+      edgeKey: await generateEdgeKey(getServerUrl(), a.id),
+    }))
+  );
 
   const databases = (agents as AgentWith[]).flatMap((a) =>
     (a.databases ?? []).map((d) => ({

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

@@ -4,7 +4,6 @@ import { useOnboarding } from "@onboardjs/react";
 import { Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { CodeSnippet } from "@/components/common/code-snippet";
-import { useGenerateEdgeKey } from "@/features/onboarding/hooks/use-generate-edge-key";
 import type { OnboardingAgent } from "@/features/onboarding/types";
 
 export const StepAgentKey = () => {
@@ -30,24 +29,22 @@ export const StepAgentKey = () => {
 };
 
 const AgentKeyBlock = ({ agent }: { agent: OnboardingAgent }) => {
-  const { data, isLoading } = useGenerateEdgeKey(agent.id);
-
-  if (isLoading) {
+  if (!agent.edgeKey) {
     return (
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground p-4 rounded-lg border border-border bg-muted/50">
         <Loader2 className="size-4 animate-spin" />
         Generating key for {agent.name}…
       </div>
     );
   }
 
-  const command = `portabase agent "${agent.name}" --key ${data}`;
+  const command = `portabase agent "${agent.name}" --key ${agent.edgeKey}`;
 
   return (
     <div className="flex flex-col gap-3 p-4 rounded-lg border border-border">
       <p className="text-sm font-medium">{agent.name}</p>
       <CodeSnippet title="Installation Command" code={command} />
-      <CodeSnippet title="Agent Key (manual)" code={data ?? ""} />
+      <CodeSnippet title="Agent Key (manual)" code={agent.edgeKey} />
     </div>
   );
 };

src/features/onboarding/types/index.ts

@@ -50,6 +50,7 @@ export type OnboardingDefaultsData = {
 export type OnboardingAgent = {
   id: string;
   name: string;
+  edgeKey?: string;
   notifierId?: string;
   storageId?: string;
 };