feat: add device linking page at /link

client/App.tsx

@@ -19,6 +19,7 @@ import Index from "./pages/Index";
 import Onboarding from "./pages/Onboarding";
 import Dashboard from "./pages/Dashboard";
 import Login from "./pages/Login";
+import Link from "./pages/Link";
 import GameDevelopment from "./pages/GameDevelopment";
 import MentorshipPrograms from "./pages/MentorshipPrograms";
 import ResearchLabs from "./pages/ResearchLabs";
@@ -293,6 +294,7 @@ const App = () => (
                           element={<ProfilePassport />}
                         />
                         <Route path="/login" element={<Login />} />
+                        <Route path="/link" element={<Link />} />
                         <Route path="/signup" element={<SignupRedirect />} />
                         <Route
                           path="/reset-password"

client/pages/Link.tsx

@@ -0,0 +1,131 @@
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Link2, CheckCircle2, AlertCircle, Loader2 } from "lucide-react";
+
+export default function Link() {
+  const [code, setCode] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!code.trim() || code.length !== 6) {
+      setError("Please enter a valid 6-character code");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+    setSuccess(false);
+
+    try {
+      const response = await fetch("/api/auth/verify-device-code", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: code.toUpperCase() })
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.message || "Failed to link device");
+      }
+
+      setSuccess(true);
+      setCode("");
+    } catch (err: any) {
+      setError(err.message || "Failed to link device. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-950/20 to-slate-950 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md bg-slate-900/95 border-purple-500/20">
+        <CardHeader className="text-center space-y-4">
+          <div className="mx-auto w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center">
+            <Link2 className="h-8 w-8 text-purple-400" />
+          </div>
+          <div>
+            <CardTitle className="text-2xl text-white">Link Your Device</CardTitle>
+            <CardDescription className="text-gray-400 mt-2">
+              Enter the 6-character code displayed in your game or app
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {success ? (
+            <Alert className="bg-green-950/50 border-green-500/50">
+              <CheckCircle2 className="h-4 w-4 text-green-400" />
+              <AlertDescription className="text-green-300">
+                Device linked successfully! You can now return to your game.
+              </AlertDescription>
+            </Alert>
+          ) : (
+            <>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-2">
+                  <label htmlFor="code" className="text-sm font-medium text-gray-300">
+                    Device Code
+                  </label>
+                  <Input
+                    id="code"
+                    type="text"
+                    placeholder="ABC123"
+                    value={code}
+                    onChange={(e) => setCode(e.target.value.toUpperCase())}
+                    maxLength={6}
+                    className="text-center text-2xl tracking-widest font-mono bg-slate-800/50 border-purple-500/30 text-white placeholder:text-gray-600"
+                    disabled={loading}
+                    autoFocus
+                  />
+                </div>
+
+                {error && (
+                  <Alert className="bg-red-950/50 border-red-500/50">
+                    <AlertCircle className="h-4 w-4 text-red-400" />
+                    <AlertDescription className="text-red-300">
+                      {error}
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                <Button
+                  type="submit"
+                  className="w-full bg-purple-600 hover:bg-purple-700 text-white"
+                  disabled={loading || code.length !== 6}
+                >
+                  {loading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Linking...
+                    </>
+                  ) : (
+                    "Link Device"
+                  )}
+                </Button>
+              </form>
+
+              <div className="pt-4 border-t border-slate-700">
+                <div className="space-y-3 text-sm text-gray-400">
+                  <p className="font-semibold text-gray-300">Where to find your code:</p>
+                  <ul className="space-y-2 pl-4">
+                    <li>• <strong className="text-white">VRChat:</strong> Check the in-world AeThex panel</li>
+                    <li>• <strong className="text-white">RecRoom:</strong> Look for the code display board</li>
+                    <li>• <strong className="text-white">Other Games:</strong> Check your authentication menu</li>
+                  </ul>
+                </div>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

client/pages/docs/integrations/RecRoom.tsx

@@ -338,7 +338,7 @@ export async function updateScore(req, res) {
                 <div>
                   <h4 className="text-white font-semibold mb-1">Player Links Account</h4>
                   <p className="text-gray-400 text-sm">
-                    Player visits <code className="bg-blue-950/50 px-1 rounded">aethex.dev/dashboard?tab=link-device</code>, enters code, 
+                    Player visits <code className="bg-blue-950/50 px-1 rounded">aethex.dev/link</code>, enters code, 
                     RecRoom receives webhook with Passport ID
                   </p>
                 </div>

client/pages/docs/integrations/VRChat.tsx

@@ -232,7 +232,7 @@ public class VRChatLeaderboard : UdonSharpBehaviour
               </li>
               <li className="flex gap-3">
                 <span className="text-purple-400 font-bold">3.</span>
-                <span>Player visits <code className="bg-purple-950/50 px-2 py-1 rounded">aethex.dev/dashboard?tab=link-device</code> and enters code</span>
+                <span>Player visits <code className="bg-purple-950/50 px-2 py-1 rounded">aethex.dev/link</code> and enters code</span>
               </li>
               <li className="flex gap-3">
                 <span className="text-purple-400 font-bold">4.</span>
@@ -252,7 +252,7 @@ public void OnAuthButtonPressed()
     {
         // Display 6-digit code to player in-world
         authCodeText.text = $"Code: {response.code}";
-        Debug.Log($"Player should visit: aethex.dev/dashboard?tab=link-device&code={response.code}");
+        Debug.Log($"Player should visit: aethex.dev/link?code={response.code}");
         
         // Poll for authentication completion
         StartCoroutine(PollAuthStatus(response.code));