feat(onboarding): add step-agent-key with edgeKey generation via server action

src/features/onboarding/actions/generate-edge-key.action.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { userAction } from "@/lib/safe-actions/actions";
+import { z } from "zod";
+import { generateEdgeKey } from "@/utils/edge_key";
+import { env } from "@/env.mjs";
+
+export const generateEdgeKeyAction = userAction
+    .schema(z.object({ agentId: z.string() }))
+    .action(async ({ parsedInput }) => {
+        const serverUrl = env.PROJECT_URL ?? "http://localhost:8887";
+        const key = await generateEdgeKey(serverUrl, parsedInput.agentId);
+        return { key };
+    });

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

@@ -0,0 +1,62 @@
+"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 { CodeSnippet } from "@/components/common/code-snippet";
+import { generateEdgeKeyAction } from "@/features/onboarding/actions/generate-edge-key.action";
+import type { OnboardingAgent } from "@/features/onboarding/onboarding.types";
+
+export const StepAgentKey = () => {
+    const { next, state } = useOnboarding();
+    const agents = (state?.context.flowData.agents ?? []) as OnboardingAgent[];
+
+    return (
+        <div className="flex flex-col gap-6">
+            <div>
+                <h1 className="text-2xl font-semibold">Connect your agent</h1>
+                <p className="text-sm text-muted-foreground mt-1">
+                    Run the command below on your server. The next step waits for the agent to connect.
+                </p>
+            </div>
+            {agents.map((agent) => (
+                <AgentKeyBlock key={agent.id} agent={agent} />
+            ))}
+            <Button type="button" onClick={() => next()}>
+                I&apos;ve run the command →
+            </Button>
+        </div>
+    );
+};
+
+const AgentKeyBlock = ({ agent }: { agent: OnboardingAgent }) => {
+    const { data, isLoading } = useQuery({
+        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 (
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Loader2 className="size-4 animate-spin" />
+                Generating key for {agent.name}…
+            </div>
+        );
+    }
+
+    const command = `portabase agent "${agent.name}" --key ${data}`;
+
+    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 ?? ""} />
+        </div>
+    );
+};