fix and update claude rule

Author: khaliqgant

.claude/rules/react-dashboard.md

@@ -54,6 +54,38 @@ paths:
 - Handle loading and error states appropriately
 - Use `try/catch` for async operations
 
+## Next.js App Router
+
+- Pages using `useSearchParams()` MUST be wrapped in a `<Suspense>` boundary for static generation
+- Pattern: Create a `{Page}Content` component that uses the hook, wrap it in `<Suspense>` in the default export
+- Always provide a loading fallback component
+
+```tsx
+// Required pattern for useSearchParams
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+function PageLoading() {
+  return <div>Loading...</div>;
+}
+
+function PageContent() {
+  const searchParams = useSearchParams();
+  const param = searchParams.get('param');
+  // ... component logic
+}
+
+export default function Page() {
+  return (
+    <Suspense fallback={<PageLoading />}>
+      <PageContent />
+    </Suspense>
+  );
+}
+```
+
+- See `app/cloud/link/page.tsx` and `app/login/page.tsx` for examples
+
 ## Common Patterns
 
 ```tsx

.trajectories/active/traj_rsavt0jipi3c.json

@@ -43,6 +43,30 @@
             "reasoning": "Added useSearchParams to read return query param and redirect back after login instead of always going to /app"
           },
           "significance": "high"
+        },
+        {
+          "ts": 1767860361297,
+          "type": "decision",
+          "content": "Added Suspense boundary to login page: Added Suspense boundary to login page",
+          "raw": {
+            "question": "Added Suspense boundary to login page",
+            "chosen": "Added Suspense boundary to login page",
+            "alternatives": [],
+            "reasoning": "useSearchParams requires Suspense for Next.js static generation - wrapped LoginContent in Suspense with LoginLoading fallback"
+          },
+          "significance": "high"
+        },
+        {
+          "ts": 1767860499290,
+          "type": "decision",
+          "content": "Added useSearchParams/Suspense rule to react-dashboard.md: Added useSearchParams/Suspense rule to react-dashboard.md",
+          "raw": {
+            "question": "Added useSearchParams/Suspense rule to react-dashboard.md",
+            "chosen": "Added useSearchParams/Suspense rule to react-dashboard.md",
+            "alternatives": [],
+            "reasoning": "Prevents future build failures - useSearchParams requires Suspense boundary for Next.js static generation"
+          },
+          "significance": "high"
         }
       ]
     }

.trajectories/index.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "lastUpdated": "2026-01-08T08:05:07.874Z",
+  "lastUpdated": "2026-01-08T08:21:39.291Z",
   "trajectories": {
     "traj_ozd98si6a7ns": {
       "title": "Fix thinking indicator showing on all messages",

src/dashboard/app/login/page.tsx

@@ -8,12 +8,28 @@
 
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Nango from '@nangohq/frontend';
 import { LogoIcon } from '../../react-components/Logo';
 
-export default function LoginPage() {
+// Loading fallback for Suspense
+function LoginLoading() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex flex-col items-center justify-center p-4">
+      <div className="relative z-10 w-full max-w-md">
+        <div className="flex flex-col items-center mb-8">
+          <LogoIcon size={48} withGlow={true} />
+          <h1 className="mt-4 text-2xl font-bold text-white">Agent Relay</h1>
+          <p className="mt-2 text-text-muted">Loading...</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Main login content that uses useSearchParams
+function LoginContent() {
   const searchParams = useSearchParams();
   const [isReady, setIsReady] = useState(false);
   const [isAuthenticating, setIsAuthenticating] = useState(false);
@@ -253,3 +269,12 @@ export default function LoginPage() {
     </div>
   );
 }
+
+// Export page wrapped in Suspense for static generation
+export default function LoginPage() {
+  return (
+    <Suspense fallback={<LoginLoading />}>
+      <LoginContent />
+    </Suspense>
+  );
+}