diff --git a/.github/skills/vercel-react-best-practices/AGENTS.md b/.github/skills/vercel-react-best-practices/AGENTS.md
index f9b9e99..07b11fe 100644
--- a/.github/skills/vercel-react-best-practices/AGENTS.md
+++ b/.github/skills/vercel-react-best-practices/AGENTS.md
@@ -94,15 +94,15 @@ Move `await` operations into the branches where they're actually used to avoid b
 
 ```typescript
 async function handleRequest(userId: string, skipProcessing: boolean) {
-  const userData = await fetchUserData(userId)
-  
+  const userData = await fetchUserData(userId);
+
   if (skipProcessing) {
     // Returns immediately but still waited for userData
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Only this branch uses userData
-  return processUserData(userData)
+  return processUserData(userData);
 }
 ```
 
@@ -112,12 +112,12 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 async function handleRequest(userId: string, skipProcessing: boolean) {
   if (skipProcessing) {
     // Returns immediately without waiting
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Fetch only when needed
-  const userData = await fetchUserData(userId)
-  return processUserData(userData)
+  const userData = await fetchUserData(userId);
+  return processUserData(userData);
 }
 ```
 
@@ -126,35 +126,35 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 ```typescript
 // Incorrect: always fetches permissions
 async function updateResource(resourceId: string, userId: string) {
-  const permissions = await fetchPermissions(userId)
-  const resource = await getResource(resourceId)
-  
+  const permissions = await fetchPermissions(userId);
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: "Not found" };
   }
-  
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: "Forbidden" };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 
 // Correct: fetches only when needed
 async function updateResource(resourceId: string, userId: string) {
-  const resource = await getResource(resourceId)
-  
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: "Not found" };
   }
-  
-  const permissions = await fetchPermissions(userId)
-  
+
+  const permissions = await fetchPermissions(userId);
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: "Forbidden" };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 ```
 
@@ -169,25 +169,26 @@ For operations with partial dependencies, use `better-all` to maximize paralleli
 **Incorrect: profile waits for config unnecessarily**
 
 ```typescript
-const [user, config] = await Promise.all([
-  fetchUser(),
-  fetchConfig()
-])
-const profile = await fetchProfile(user.id)
+const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
+const profile = await fetchProfile(user.id);
 ```
 
 **Correct: config and profile run in parallel**
 
 ```typescript
-import { all } from 'better-all'
+import { all } from "better-all";
 
 const { user, config, profile } = await all({
-  async user() { return fetchUser() },
-  async config() { return fetchConfig() },
+  async user() {
+    return fetchUser();
+  },
+  async config() {
+    return fetchConfig();
+  },
   async profile() {
-    return fetchProfile((await this.$.user).id)
-  }
-})
+    return fetchProfile((await this.$.user).id);
+  },
+});
 ```
 
 Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)
@@ -202,10 +203,10 @@ In API routes and Server Actions, start independent operations immediately, even
 
 ```typescript
 export async function GET(request: Request) {
-  const session = await auth()
-  const config = await fetchConfig()
-  const data = await fetchData(session.user.id)
-  return Response.json({ data, config })
+  const session = await auth();
+  const config = await fetchConfig();
+  const data = await fetchData(session.user.id);
+  return Response.json({ data, config });
 }
 ```
 
@@ -213,14 +214,11 @@ export async function GET(request: Request) {
 
 ```typescript
 export async function GET(request: Request) {
-  const sessionPromise = auth()
-  const configPromise = fetchConfig()
-  const session = await sessionPromise
-  const [config, data] = await Promise.all([
-    configPromise,
-    fetchData(session.user.id)
-  ])
-  return Response.json({ data, config })
+  const sessionPromise = auth();
+  const configPromise = fetchConfig();
+  const session = await sessionPromise;
+  const [config, data] = await Promise.all([configPromise, fetchData(session.user.id)]);
+  return Response.json({ data, config });
 }
 ```
 
@@ -235,19 +233,15 @@ When async operations have no interdependencies, execute them concurrently using
 **Incorrect: sequential execution, 3 round trips**
 
 ```typescript
-const user = await fetchUser()
-const posts = await fetchPosts()
-const comments = await fetchComments()
+const user = await fetchUser();
+const posts = await fetchPosts();
+const comments = await fetchComments();
 ```
 
 **Correct: parallel execution, 1 round trip**
 
 ```typescript
-const [user, posts, comments] = await Promise.all([
-  fetchUser(),
-  fetchPosts(),
-  fetchComments()
-])
+const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
 ```
 
 ### 1.5 Strategic Suspense Boundaries
@@ -260,8 +254,8 @@ Instead of awaiting data in async components before returning JSX, use Suspense
 
 ```tsx
 async function Page() {
-  const data = await fetchData() // Blocks entire page
-  
+  const data = await fetchData(); // Blocks entire page
+
   return (
     <div>
       <div>Sidebar</div>
@@ -271,7 +265,7 @@ async function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 ```
 
@@ -292,12 +286,12 @@ function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 async function DataDisplay() {
-  const data = await fetchData() // Only blocks this component
-  return <div>{data.content}</div>
+  const data = await fetchData(); // Only blocks this component
+  return <div>{data.content}</div>;
 }
 ```
 
@@ -308,8 +302,8 @@ Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
 ```tsx
 function Page() {
   // Start fetch immediately, but don't await
-  const dataPromise = fetchData()
-  
+  const dataPromise = fetchData();
+
   return (
     <div>
       <div>Sidebar</div>
@@ -320,17 +314,17 @@ function Page() {
       </Suspense>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Unwraps the promise
-  return <div>{data.content}</div>
+  const data = use(dataPromise); // Unwraps the promise
+  return <div>{data.content}</div>;
 }
 
 function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Reuses the same promise
-  return <div>{data.summary}</div>
+  const data = use(dataPromise); // Reuses the same promise
+  return <div>{data.summary}</div>;
 }
 ```
 
@@ -369,24 +363,24 @@ Popular icon and component libraries can have **up to 10,000 re-exports** in the
 **Incorrect: imports entire library**
 
 ```tsx
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from "lucide-react";
 // Loads 1,583 modules, takes ~2.8s extra in dev
 // Runtime cost: 200-800ms on every cold start
 
-import { Button, TextField } from '@mui/material'
+import { Button, TextField } from "@mui/material";
 // Loads 2,225 modules, takes ~4.2s extra in dev
 ```
 
 **Correct: imports only what you need**
 
 ```tsx
-import Check from 'lucide-react/dist/esm/icons/check'
-import X from 'lucide-react/dist/esm/icons/x'
-import Menu from 'lucide-react/dist/esm/icons/menu'
+import Check from "lucide-react/dist/esm/icons/check";
+import X from "lucide-react/dist/esm/icons/x";
+import Menu from "lucide-react/dist/esm/icons/menu";
 // Loads only 3 modules (~2KB vs ~1MB)
 
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
 // Loads only what you use
 ```
 
@@ -396,12 +390,12 @@ import TextField from '@mui/material/TextField'
 // next.config.js - use optimizePackageImports
 module.exports = {
   experimental: {
-    optimizePackageImports: ['lucide-react', '@mui/material']
-  }
-}
+    optimizePackageImports: ["lucide-react", "@mui/material"],
+  },
+};
 
 // Then you can keep the ergonomic barrel imports:
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from "lucide-react";
 // Automatically transformed to direct imports at build time
 ```
 
@@ -420,19 +414,25 @@ Load large data or modules only when a feature is activated.
 **Example: lazy-load animation frames**
 
 ```tsx
-function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
-  const [frames, setFrames] = useState<Frame[] | null>(null)
+function AnimationPlayer({
+  enabled,
+  setEnabled,
+}: {
+  enabled: boolean;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [frames, setFrames] = useState<Frame[] | null>(null);
 
   useEffect(() => {
-    if (enabled && !frames && typeof window !== 'undefined') {
-      import('./animation-frames.js')
-        .then(mod => setFrames(mod.frames))
-        .catch(() => setEnabled(false))
+    if (enabled && !frames && typeof window !== "undefined") {
+      import("./animation-frames.js")
+        .then((mod) => setFrames(mod.frames))
+        .catch(() => setEnabled(false));
     }
-  }, [enabled, frames, setEnabled])
+  }, [enabled, frames, setEnabled]);
 
-  if (!frames) return <Skeleton />
-  return <Canvas frames={frames} />
+  if (!frames) return <Skeleton />;
+  return <Canvas frames={frames} />;
 }
 ```
 
@@ -447,7 +447,7 @@ Analytics, logging, and error tracking don't block user interaction. Load them a
 **Incorrect: blocks initial bundle**
 
 ```tsx
-import { Analytics } from '@vercel/analytics/react'
+import { Analytics } from "@vercel/analytics/react";
 
 export default function RootLayout({ children }) {
   return (
@@ -457,19 +457,18 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
 **Correct: loads after hydration**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const Analytics = dynamic(
-  () => import('@vercel/analytics/react').then(m => m.Analytics),
-  { ssr: false }
-)
+const Analytics = dynamic(() => import("@vercel/analytics/react").then((m) => m.Analytics), {
+  ssr: false,
+});
 
 export default function RootLayout({ children }) {
   return (
@@ -479,7 +478,7 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
@@ -492,25 +491,24 @@ Use `next/dynamic` to lazy-load large components not needed on initial render.
 **Incorrect: Monaco bundles with main chunk ~300KB**
 
 ```tsx
-import { MonacoEditor } from './monaco-editor'
+import { MonacoEditor } from "./monaco-editor";
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
 **Correct: Monaco loads on demand**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const MonacoEditor = dynamic(
-  () => import('./monaco-editor').then(m => m.MonacoEditor),
-  { ssr: false }
-)
+const MonacoEditor = dynamic(() => import("./monaco-editor").then((m) => m.MonacoEditor), {
+  ssr: false,
+});
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
@@ -525,20 +523,16 @@ Preload heavy bundles before they're needed to reduce perceived latency.
 ```tsx
 function EditorButton({ onClick }: { onClick: () => void }) {
   const preload = () => {
-    if (typeof window !== 'undefined') {
-      void import('./monaco-editor')
+    if (typeof window !== "undefined") {
+      void import("./monaco-editor");
     }
-  }
+  };
 
   return (
-    <button
-      onMouseEnter={preload}
-      onFocus={preload}
-      onClick={onClick}
-    >
+    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
       Open Editor
     </button>
-  )
+  );
 }
 ```
 
@@ -547,14 +541,12 @@ function EditorButton({ onClick }: { onClick: () => void }) {
 ```tsx
 function FlagsProvider({ children, flags }: Props) {
   useEffect(() => {
-    if (flags.editorEnabled && typeof window !== 'undefined') {
-      void import('./monaco-editor').then(mod => mod.init())
+    if (flags.editorEnabled && typeof window !== "undefined") {
+      void import("./monaco-editor").then((mod) => mod.init());
     }
-  }, [flags.editorEnabled])
+  }, [flags.editorEnabled]);
 
-  return <FlagsContext.Provider value={flags}>
-    {children}
-  </FlagsContext.Provider>
+  return <FlagsContext.Provider value={flags}>{children}</FlagsContext.Provider>;
 }
 ```
 
@@ -577,20 +569,20 @@ Optimizing server-side rendering and data fetching eliminates server-side waterf
 **Implementation:**
 
 ```typescript
-import { LRUCache } from 'lru-cache'
+import { LRUCache } from "lru-cache";
 
 const cache = new LRUCache<string, any>({
   max: 1000,
-  ttl: 5 * 60 * 1000  // 5 minutes
-})
+  ttl: 5 * 60 * 1000, // 5 minutes
+});
 
 export async function getUser(id: string) {
-  const cached = cache.get(id)
-  if (cached) return cached
+  const cached = cache.get(id);
+  if (cached) return cached;
 
-  const user = await db.user.findUnique({ where: { id } })
-  cache.set(id, user)
-  return user
+  const user = await db.user.findUnique({ where: { id } });
+  cache.set(id, user);
+  return user;
 }
 
 // Request 1: DB query, result cached
@@ -615,13 +607,13 @@ The React Server/Client boundary serializes all object properties into strings a
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()  // 50 fields
-  return <Profile user={user} />
+  const user = await fetchUser(); // 50 fields
+  return <Profile user={user} />;
 }
 
-'use client'
+("use client");
 function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>  // uses 1 field
+  return <div>{user.name}</div>; // uses 1 field
 }
 ```
 
@@ -629,13 +621,13 @@ function Profile({ user }: { user: User }) {
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()
-  return <Profile name={user.name} />
+  const user = await fetchUser();
+  return <Profile name={user.name} />;
 }
 
-'use client'
+("use client");
 function Profile({ name }: { name: string }) {
-  return <div>{name}</div>
+  return <div>{name}</div>;
 }
 ```
 
@@ -649,18 +641,18 @@ React Server Components execute sequentially within a tree. Restructure with com
 
 ```tsx
 export default async function Page() {
-  const header = await fetchHeader()
+  const header = await fetchHeader();
   return (
     <div>
       <div>{header}</div>
       <Sidebar />
     </div>
-  )
+  );
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 ```
 
@@ -668,13 +660,13 @@ async function Sidebar() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 export default function Page() {
@@ -683,7 +675,7 @@ export default function Page() {
       <Header />
       <Sidebar />
     </div>
-  )
+  );
 }
 ```
 
@@ -691,13 +683,13 @@ export default function Page() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 function Layout({ children }: { children: ReactNode }) {
@@ -706,7 +698,7 @@ function Layout({ children }: { children: ReactNode }) {
       <Header />
       {children}
     </div>
-  )
+  );
 }
 
 export default function Page() {
@@ -714,7 +706,7 @@ export default function Page() {
     <Layout>
       <Sidebar />
     </Layout>
-  )
+  );
 }
 ```
 
@@ -727,15 +719,15 @@ Use `React.cache()` for server-side request deduplication. Authentication and da
 **Usage:**
 
 ```typescript
-import { cache } from 'react'
+import { cache } from "react";
 
 export const getCurrentUser = cache(async () => {
-  const session = await auth()
-  if (!session?.user?.id) return null
+  const session = await auth();
+  if (!session?.user?.id) return null;
   return await db.user.findUnique({
-    where: { id: session.user.id }
-  })
-})
+    where: { id: session.user.id },
+  });
+});
 ```
 
 Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
@@ -748,20 +740,20 @@ Within a single request, multiple calls to `getCurrentUser()` execute the query
 
 ```typescript
 const getUser = cache(async (params: { uid: number }) => {
-  return await db.user.findUnique({ where: { id: params.uid } })
-})
+  return await db.user.findUnique({ where: { id: params.uid } });
+});
 
 // Each call creates new object, never hits cache
-getUser({ uid: 1 })
-getUser({ uid: 1 })  // Cache miss, runs query again
+getUser({ uid: 1 });
+getUser({ uid: 1 }); // Cache miss, runs query again
 ```
 
 **Correct: cache hit**
 
 ```typescript
-const params = { uid: 1 }
-getUser(params)  // Query runs
-getUser(params)  // Cache hit (same reference)
+const params = { uid: 1 };
+getUser(params); // Query runs
+getUser(params); // Cache hit (same reference)
 ```
 
 If you must pass objects, pass the same reference:
@@ -793,46 +785,46 @@ Use Next.js's `after()` to schedule work that should execute after a response is
 **Incorrect: blocks response**
 
 ```tsx
-import { logUserAction } from '@/app/utils'
+import { logUserAction } from "@/app/utils";
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Logging blocks the response
-  const userAgent = request.headers.get('user-agent') || 'unknown'
-  await logUserAction({ userAgent })
-  
-  return new Response(JSON.stringify({ status: 'success' }), {
+  const userAgent = request.headers.get("user-agent") || "unknown";
+  await logUserAction({ userAgent });
+
+  return new Response(JSON.stringify({ status: "success" }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
 **Correct: non-blocking**
 
 ```tsx
-import { after } from 'next/server'
-import { headers, cookies } from 'next/headers'
-import { logUserAction } from '@/app/utils'
+import { after } from "next/server";
+import { headers, cookies } from "next/headers";
+import { logUserAction } from "@/app/utils";
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Log after response is sent
   after(async () => {
-    const userAgent = (await headers()).get('user-agent') || 'unknown'
-    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
-    
-    logUserAction({ sessionCookie, userAgent })
-  })
-  
-  return new Response(JSON.stringify({ status: 'success' }), {
+    const userAgent = (await headers()).get("user-agent") || "unknown";
+    const sessionCookie = (await cookies()).get("session-id")?.value || "anonymous";
+
+    logUserAction({ sessionCookie, userAgent });
+  });
+
+  return new Response(JSON.stringify({ status: "success" }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
@@ -879,12 +871,12 @@ function useKeyboardShortcut(key: string, callback: () => void) {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === key) {
-        callback()
+        callback();
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [key, callback])
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [key, callback]);
 }
 ```
 
@@ -893,45 +885,49 @@ When using the `useKeyboardShortcut` hook multiple times, each instance will reg
 **Correct: N instances = 1 listener**
 
 ```tsx
-import useSWRSubscription from 'swr/subscription'
+import useSWRSubscription from "swr/subscription";
 
 // Module-level Map to track callbacks per key
-const keyCallbacks = new Map<string, Set<() => void>>()
+const keyCallbacks = new Map<string, Set<() => void>>();
 
 function useKeyboardShortcut(key: string, callback: () => void) {
   // Register this callback in the Map
   useEffect(() => {
     if (!keyCallbacks.has(key)) {
-      keyCallbacks.set(key, new Set())
+      keyCallbacks.set(key, new Set());
     }
-    keyCallbacks.get(key)!.add(callback)
+    keyCallbacks.get(key)!.add(callback);
 
     return () => {
-      const set = keyCallbacks.get(key)
+      const set = keyCallbacks.get(key);
       if (set) {
-        set.delete(callback)
+        set.delete(callback);
         if (set.size === 0) {
-          keyCallbacks.delete(key)
+          keyCallbacks.delete(key);
         }
       }
-    }
-  }, [key, callback])
+    };
+  }, [key, callback]);
 
-  useSWRSubscription('global-keydown', () => {
+  useSWRSubscription("global-keydown", () => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && keyCallbacks.has(e.key)) {
-        keyCallbacks.get(e.key)!.forEach(cb => cb())
+        keyCallbacks.get(e.key)!.forEach((cb) => cb());
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  })
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  });
 }
 
 function Profile() {
   // Multiple shortcuts will share the same listener
-  useKeyboardShortcut('p', () => { /* ... */ }) 
-  useKeyboardShortcut('k', () => { /* ... */ })
+  useKeyboardShortcut("p", () => {
+    /* ... */
+  });
+  useKeyboardShortcut("k", () => {
+    /* ... */
+  });
   // ...
 }
 ```
@@ -946,34 +942,34 @@ Add `{ passive: true }` to touch and wheel event listeners to enable immediate s
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch)
-  document.addEventListener('wheel', handleWheel)
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener("touchstart", handleTouch);
+  document.addEventListener("wheel", handleWheel);
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener("touchstart", handleTouch);
+    document.removeEventListener("wheel", handleWheel);
+  };
+}, []);
 ```
 
 **Correct:**
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch, { passive: true })
-  document.addEventListener('wheel', handleWheel, { passive: true })
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener("touchstart", handleTouch, { passive: true });
+  document.addEventListener("wheel", handleWheel, { passive: true });
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener("touchstart", handleTouch);
+    document.removeEventListener("wheel", handleWheel);
+  };
+}, []);
 ```
 
 **Use passive when:** tracking/analytics, logging, any listener that doesn't call `preventDefault()`.
@@ -990,43 +986,43 @@ SWR enables request deduplication, caching, and revalidation across component in
 
 ```tsx
 function UserList() {
-  const [users, setUsers] = useState([])
+  const [users, setUsers] = useState([]);
   useEffect(() => {
-    fetch('/api/users')
-      .then(r => r.json())
-      .then(setUsers)
-  }, [])
+    fetch("/api/users")
+      .then((r) => r.json())
+      .then(setUsers);
+  }, []);
 }
 ```
 
 **Correct: multiple instances share one request**
 
 ```tsx
-import useSWR from 'swr'
+import useSWR from "swr";
 
 function UserList() {
-  const { data: users } = useSWR('/api/users', fetcher)
+  const { data: users } = useSWR("/api/users", fetcher);
 }
 ```
 
 **For immutable data:**
 
 ```tsx
-import { useImmutableSWR } from '@/lib/swr'
+import { useImmutableSWR } from "@/lib/swr";
 
 function StaticContent() {
-  const { data } = useImmutableSWR('/api/config', fetcher)
+  const { data } = useImmutableSWR("/api/config", fetcher);
 }
 ```
 
 **For mutations:**
 
 ```tsx
-import { useSWRMutation } from 'swr/mutation'
+import { useSWRMutation } from "swr/mutation";
 
 function UpdateButton() {
-  const { trigger } = useSWRMutation('/api/user', updateUser)
-  return <button onClick={() => trigger()}>Update</button>
+  const { trigger } = useSWRMutation("/api/user", updateUser);
+  return <button onClick={() => trigger()}>Update</button>;
 }
 ```
 
@@ -1042,18 +1038,18 @@ Add version prefix to keys and store only needed fields. Prevents schema conflic
 
 ```typescript
 // No version, stores everything, no error handling
-localStorage.setItem('userConfig', JSON.stringify(fullUserObject))
-const data = localStorage.getItem('userConfig')
+localStorage.setItem("userConfig", JSON.stringify(fullUserObject));
+const data = localStorage.getItem("userConfig");
 ```
 
 **Correct:**
 
 ```typescript
-const VERSION = 'v2'
+const VERSION = "v2";
 
 function saveConfig(config: { theme: string; language: string }) {
   try {
-    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config))
+    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config));
   } catch {
     // Throws in incognito/private browsing, quota exceeded, or disabled
   }
@@ -1061,21 +1057,21 @@ function saveConfig(config: { theme: string; language: string }) {
 
 function loadConfig() {
   try {
-    const data = localStorage.getItem(`userConfig:${VERSION}`)
-    return data ? JSON.parse(data) : null
+    const data = localStorage.getItem(`userConfig:${VERSION}`);
+    return data ? JSON.parse(data) : null;
   } catch {
-    return null
+    return null;
   }
 }
 
 // Migration from v1 to v2
 function migrate() {
   try {
-    const v1 = localStorage.getItem('userConfig:v1')
+    const v1 = localStorage.getItem("userConfig:v1");
     if (v1) {
-      const old = JSON.parse(v1)
-      saveConfig({ theme: old.darkMode ? 'dark' : 'light', language: old.lang })
-      localStorage.removeItem('userConfig:v1')
+      const old = JSON.parse(v1);
+      saveConfig({ theme: old.darkMode ? "dark" : "light", language: old.lang });
+      localStorage.removeItem("userConfig:v1");
     }
   } catch {}
 }
@@ -1087,10 +1083,13 @@ function migrate() {
 // User object has 20+ fields, only store what UI needs
 function cachePrefs(user: FullUser) {
   try {
-    localStorage.setItem('prefs:v1', JSON.stringify({
-      theme: user.preferences.theme,
-      notifications: user.preferences.notifications
-    }))
+    localStorage.setItem(
+      "prefs:v1",
+      JSON.stringify({
+        theme: user.preferences.theme,
+        notifications: user.preferences.notifications,
+      })
+    );
   } catch {}
 }
 ```
@@ -1117,14 +1116,14 @@ Don't subscribe to dynamic state (searchParams, localStorage) if you only read i
 
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
-  const searchParams = useSearchParams()
+  const searchParams = useSearchParams();
 
   const handleShare = () => {
-    const ref = searchParams.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const ref = searchParams.get("ref");
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -1133,12 +1132,12 @@ function ShareButton({ chatId }: { chatId: string }) {
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
   const handleShare = () => {
-    const params = new URLSearchParams(window.location.search)
-    const ref = params.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const params = new URLSearchParams(window.location.search);
+    const ref = params.get("ref");
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -1153,12 +1152,12 @@ Extract expensive work into memoized components to enable early returns before c
 ```tsx
 function Profile({ user, loading }: Props) {
   const avatar = useMemo(() => {
-    const id = computeAvatarId(user)
-    return <Avatar id={id} />
-  }, [user])
+    const id = computeAvatarId(user);
+    return <Avatar id={id} />;
+  }, [user]);
 
-  if (loading) return <Skeleton />
-  return <div>{avatar}</div>
+  if (loading) return <Skeleton />;
+  return <div>{avatar}</div>;
 }
 ```
 
@@ -1166,17 +1165,17 @@ function Profile({ user, loading }: Props) {
 
 ```tsx
 const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
-  const id = useMemo(() => computeAvatarId(user), [user])
-  return <Avatar id={id} />
-})
+  const id = useMemo(() => computeAvatarId(user), [user]);
+  return <Avatar id={id} />;
+});
 
 function Profile({ user, loading }: Props) {
-  if (loading) return <Skeleton />
+  if (loading) return <Skeleton />;
   return (
     <div>
       <UserAvatar user={user} />
     </div>
-  )
+  );
 }
 ```
 
@@ -1192,16 +1191,16 @@ Specify primitive dependencies instead of objects to minimize effect re-runs.
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user])
+  console.log(user.id);
+}, [user]);
 ```
 
 **Correct: re-runs only when id changes**
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user.id])
+  console.log(user.id);
+}, [user.id]);
 ```
 
 **For derived state, compute outside effect:**
@@ -1210,17 +1209,17 @@ useEffect(() => {
 // Incorrect: runs on width=767, 766, 765...
 useEffect(() => {
   if (width < 768) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [width])
+}, [width]);
 
 // Correct: runs only on boolean transition
-const isMobile = width < 768
+const isMobile = width < 768;
 useEffect(() => {
   if (isMobile) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [isMobile])
+}, [isMobile]);
 ```
 
 ### 5.4 Subscribe to Derived State
@@ -1233,9 +1232,9 @@ Subscribe to derived boolean state instead of continuous values to reduce re-ren
 
 ```tsx
 function Sidebar() {
-  const width = useWindowWidth()  // updates continuously
-  const isMobile = width < 768
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const width = useWindowWidth(); // updates continuously
+  const isMobile = width < 768;
+  return <nav className={isMobile ? "mobile" : "desktop"} />;
 }
 ```
 
@@ -1243,8 +1242,8 @@ function Sidebar() {
 
 ```tsx
 function Sidebar() {
-  const isMobile = useMediaQuery('(max-width: 767px)')
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  return <nav className={isMobile ? "mobile" : "desktop"} />;
 }
 ```
 
@@ -1258,19 +1257,22 @@ When updating state based on the current state value, use the functional update
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Callback must depend on items, recreated on every items change
-  const addItems = useCallback((newItems: Item[]) => {
-    setItems([...items, ...newItems])
-  }, [items])  // ❌ items dependency causes recreations
-  
+  const addItems = useCallback(
+    (newItems: Item[]) => {
+      setItems([...items, ...newItems]);
+    },
+    [items]
+  ); // ❌ items dependency causes recreations
+
   // Risk of stale closure if dependency is forgotten
   const removeItem = useCallback((id: string) => {
-    setItems(items.filter(item => item.id !== id))
-  }, [])  // ❌ Missing items dependency - will use stale items!
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems(items.filter((item) => item.id !== id));
+  }, []); // ❌ Missing items dependency - will use stale items!
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -1280,19 +1282,19 @@ The first callback is recreated every time `items` changes, which can cause chil
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Stable callback, never recreated
   const addItems = useCallback((newItems: Item[]) => {
-    setItems(curr => [...curr, ...newItems])
-  }, [])  // ✅ No dependencies needed
-  
+    setItems((curr) => [...curr, ...newItems]);
+  }, []); // ✅ No dependencies needed
+
   // Always uses latest state, no stale closure risk
   const removeItem = useCallback((id: string) => {
-    setItems(curr => curr.filter(item => item.id !== id))
-  }, [])  // ✅ Safe and stable
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems((curr) => curr.filter((item) => item.id !== id));
+  }, []); // ✅ Safe and stable
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -1337,20 +1339,18 @@ Pass a function to `useState` for expensive initial values. Without the function
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs on EVERY render, even after initialization
-  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items));
+  const [query, setQuery] = useState("");
+
   // When query changes, buildSearchIndex runs again unnecessarily
-  return <SearchResults index={searchIndex} query={query} />
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs on every render
-  const [settings, setSettings] = useState(
-    JSON.parse(localStorage.getItem('settings') || '{}')
-  )
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+  const [settings, setSettings] = useState(JSON.parse(localStorage.getItem("settings") || "{}"));
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -1359,20 +1359,20 @@ function UserProfile() {
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs ONLY on initial render
-  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
-  return <SearchResults index={searchIndex} query={query} />
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items));
+  const [query, setQuery] = useState("");
+
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs only on initial render
   const [settings, setSettings] = useState(() => {
-    const stored = localStorage.getItem('settings')
-    return stored ? JSON.parse(stored) : {}
-  })
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+    const stored = localStorage.getItem("settings");
+    return stored ? JSON.parse(stored) : {};
+  });
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -1390,29 +1390,29 @@ Mark frequent, non-urgent state updates as transitions to maintain UI responsive
 
 ```tsx
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
-    const handler = () => setScrollY(window.scrollY)
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+    const handler = () => setScrollY(window.scrollY);
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
 }
 ```
 
 **Correct: non-blocking updates**
 
 ```tsx
-import { startTransition } from 'react'
+import { startTransition } from "react";
 
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
     const handler = () => {
-      startTransition(() => setScrollY(window.scrollY))
-    }
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+      startTransition(() => setScrollY(window.scrollY));
+    };
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
 }
 ```
 
@@ -1435,15 +1435,10 @@ Many browsers don't have hardware acceleration for CSS3 animations on SVG elemen
 ```tsx
 function LoadingSpinner() {
   return (
-    <svg 
-      className="animate-spin"
-      width="24" 
-      height="24" 
-      viewBox="0 0 24 24"
-    >
+    <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24">
       <circle cx="12" cy="12" r="10" stroke="currentColor" />
     </svg>
-  )
+  );
 }
 ```
 
@@ -1453,15 +1448,11 @@ function LoadingSpinner() {
 function LoadingSpinner() {
   return (
     <div className="animate-spin">
-      <svg 
-        width="24" 
-        height="24" 
-        viewBox="0 0 24 24"
-      >
+      <svg width="24" height="24" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="10" stroke="currentColor" />
       </svg>
     </div>
-  )
+  );
 }
 ```
 
@@ -1488,14 +1479,14 @@ Apply `content-visibility: auto` to defer off-screen rendering.
 function MessageList({ messages }: { messages: Message[] }) {
   return (
     <div className="overflow-y-auto h-screen">
-      {messages.map(msg => (
+      {messages.map((msg) => (
         <div key={msg.id} className="message-item">
           <Avatar user={msg.author} />
           <div>{msg.content}</div>
         </div>
       ))}
     </div>
-  )
+  );
 }
 ```
 
@@ -1511,31 +1502,21 @@ Extract static JSX outside components to avoid re-creation.
 
 ```tsx
 function LoadingSkeleton() {
-  return <div className="animate-pulse h-20 bg-gray-200" />
+  return <div className="animate-pulse h-20 bg-gray-200" />;
 }
 
 function Container() {
-  return (
-    <div>
-      {loading && <LoadingSkeleton />}
-    </div>
-  )
+  return <div>{loading && <LoadingSkeleton />}</div>;
 }
 ```
 
 **Correct: reuses same element**
 
 ```tsx
-const loadingSkeleton = (
-  <div className="animate-pulse h-20 bg-gray-200" />
-)
+const loadingSkeleton = <div className="animate-pulse h-20 bg-gray-200" />;
 
 function Container() {
-  return (
-    <div>
-      {loading && loadingSkeleton}
-    </div>
-  )
+  return <div>{loading && loadingSkeleton}</div>;
 }
 ```
 
@@ -1578,13 +1559,9 @@ When rendering content that depends on client-side storage (localStorage, cookie
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
   // localStorage is not available on server - throws error
-  const theme = localStorage.getItem('theme') || 'light'
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  const theme = localStorage.getItem("theme") || "light";
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -1594,21 +1571,17 @@ Server-side rendering will fail because `localStorage` is undefined.
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState('light')
-  
+  const [theme, setTheme] = useState("light");
+
   useEffect(() => {
     // Runs after hydration - causes visible flash
-    const stored = localStorage.getItem('theme')
+    const stored = localStorage.getItem("theme");
     if (stored) {
-      setTheme(stored)
+      setTheme(stored);
     }
-  }, [])
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  }, []);
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -1620,9 +1593,7 @@ Component first renders with default value (`light`), then updates after hydrati
 function ThemeWrapper({ children }: { children: ReactNode }) {
   return (
     <>
-      <div id="theme-wrapper">
-        {children}
-      </div>
+      <div id="theme-wrapper">{children}</div>
       <script
         dangerouslySetInnerHTML={{
           __html: `
@@ -1637,7 +1608,7 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
         }}
       />
     </>
-  )
+  );
 }
 ```
 
@@ -1654,14 +1625,14 @@ Use React's `<Activity>` to preserve state/DOM for expensive components that fre
 **Usage:**
 
 ```tsx
-import { Activity } from 'react'
+import { Activity } from "react";
 
 function Dropdown({ isOpen }: Props) {
   return (
-    <Activity mode={isOpen ? 'visible' : 'hidden'}>
+    <Activity mode={isOpen ? "visible" : "hidden"}>
       <ExpensiveMenu />
     </Activity>
-  )
+  );
 }
 ```
 
@@ -1677,11 +1648,7 @@ Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count && <span className="badge">{count}</span>}
-    </div>
-  )
+  return <div>{count && <span className="badge">{count}</span>}</div>;
 }
 
 // When count = 0, renders: <div>0</div>
@@ -1692,11 +1659,7 @@ function Badge({ count }: { count: number }) {
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count > 0 ? <span className="badge">{count}</span> : null}
-    </div>
-  )
+  return <div>{count > 0 ? <span className="badge">{count}</span> : null}</div>;
 }
 
 // When count = 0, renders: <div></div>
@@ -1722,27 +1685,29 @@ Avoid changing styles one property at a time. Group multiple CSS changes togethe
 ```typescript
 function updateElementStyles(element: HTMLElement) {
   // Each line triggers a reflow
-  element.style.width = '100px'
-  element.style.height = '200px'
-  element.style.backgroundColor = 'blue'
-  element.style.border = '1px solid black'
+  element.style.width = "100px";
+  element.style.height = "200px";
+  element.style.backgroundColor = "blue";
+  element.style.border = "1px solid black";
 }
 ```
 
 **Correct: add class - single reflow**
 
-```typescript
-// CSS file
+```css
+/* CSS file */
 .highlighted-box {
   width: 100px;
   height: 200px;
   background-color: blue;
   border: 1px solid black;
 }
+```
 
+```typescript
 // JavaScript
 function updateElementStyles(element: HTMLElement) {
-  element.classList.add('highlighted-box')
+  element.classList.add("highlighted-box");
 }
 ```
 
@@ -1755,7 +1720,7 @@ function updateElementStyles(element: HTMLElement) {
     height: 200px;
     background-color: blue;
     border: 1px solid black;
-  `
+  `;
 }
 ```
 
@@ -1764,26 +1729,22 @@ function updateElementStyles(element: HTMLElement) {
 ```tsx
 // Incorrect: changing styles one by one
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
-  const ref = useRef<HTMLDivElement>(null)
-  
+  const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (ref.current && isHighlighted) {
-      ref.current.style.width = '100px'
-      ref.current.style.height = '200px'
-      ref.current.style.backgroundColor = 'blue'
+      ref.current.style.width = "100px";
+      ref.current.style.height = "200px";
+      ref.current.style.backgroundColor = "blue";
     }
-  }, [isHighlighted])
-  
-  return <div ref={ref}>Content</div>
+  }, [isHighlighted]);
+
+  return <div ref={ref}>Content</div>;
 }
 
 // Correct: toggle class
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
-  return (
-    <div className={isHighlighted ? 'highlighted-box' : ''}>
-      Content
-    </div>
-  )
+  return <div className={isHighlighted ? "highlighted-box" : ""}>Content</div>;
 }
 ```
 
@@ -1799,10 +1760,10 @@ Multiple `.find()` calls by the same key should use a Map.
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: users.find(u => u.id === order.userId)
-  }))
+    user: users.find((u) => u.id === order.userId),
+  }));
 }
 ```
 
@@ -1810,12 +1771,12 @@ function processOrders(orders: Order[], users: User[]) {
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  const userById = new Map(users.map(u => [u.id, u]))
+  const userById = new Map(users.map((u) => [u.id, u]));
 
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: userById.get(order.userId)
-  }))
+    user: userById.get(order.userId),
+  }));
 }
 ```
 
@@ -1833,17 +1794,17 @@ Cache object property lookups in hot paths.
 
 ```typescript
 for (let i = 0; i < arr.length; i++) {
-  process(obj.config.settings.value)
+  process(obj.config.settings.value);
 }
 ```
 
 **Correct: 1 lookup total**
 
 ```typescript
-const value = obj.config.settings.value
-const len = arr.length
+const value = obj.config.settings.value;
+const len = arr.length;
 for (let i = 0; i < len; i++) {
-  process(value)
+  process(value);
 }
 ```
 
@@ -1855,67 +1816,67 @@ Use a module-level Map to cache function results when the same function is calle
 
 **Incorrect: redundant computation**
 
-```typescript
+```tsx
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
-      {projects.map(project => {
+      {projects.map((project) => {
         // slugify() called 100+ times for same project names
-        const slug = slugify(project.name)
-        
-        return <ProjectCard key={project.id} slug={slug} />
+        const slug = slugify(project.name);
+
+        return <ProjectCard key={project.id} slug={slug} />;
       })}
     </div>
-  )
+  );
 }
 ```
 
 **Correct: cached results**
 
-```typescript
+```tsx
 // Module-level cache
-const slugifyCache = new Map<string, string>()
+const slugifyCache = new Map<string, string>();
 
 function cachedSlugify(text: string): string {
   if (slugifyCache.has(text)) {
-    return slugifyCache.get(text)!
+    return slugifyCache.get(text)!;
   }
-  const result = slugify(text)
-  slugifyCache.set(text, result)
-  return result
+  const result = slugify(text);
+  slugifyCache.set(text, result);
+  return result;
 }
 
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
-      {projects.map(project => {
+      {projects.map((project) => {
         // Computed only once per unique project name
-        const slug = cachedSlugify(project.name)
-        
-        return <ProjectCard key={project.id} slug={slug} />
+        const slug = cachedSlugify(project.name);
+
+        return <ProjectCard key={project.id} slug={slug} />;
       })}
     </div>
-  )
+  );
 }
 ```
 
 **Simpler pattern for single-value functions:**
 
 ```typescript
-let isLoggedInCache: boolean | null = null
+let isLoggedInCache: boolean | null = null;
 
 function isLoggedIn(): boolean {
   if (isLoggedInCache !== null) {
-    return isLoggedInCache
+    return isLoggedInCache;
   }
-  
-  isLoggedInCache = document.cookie.includes('auth=')
-  return isLoggedInCache
+
+  isLoggedInCache = document.cookie.includes("auth=");
+  return isLoggedInCache;
 }
 
 // Clear cache when auth changes
 function onAuthChange() {
-  isLoggedInCache = null
+  isLoggedInCache = null;
 }
 ```
 
@@ -1933,7 +1894,7 @@ Reference: [https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fa
 
 ```typescript
 function getTheme() {
-  return localStorage.getItem('theme') ?? 'light'
+  return localStorage.getItem("theme") ?? "light";
 }
 // Called 10 times = 10 storage reads
 ```
@@ -1941,18 +1902,18 @@ function getTheme() {
 **Correct: Map cache**
 
 ```typescript
-const storageCache = new Map<string, string | null>()
+const storageCache = new Map<string, string | null>();
 
 function getLocalStorage(key: string) {
   if (!storageCache.has(key)) {
-    storageCache.set(key, localStorage.getItem(key))
+    storageCache.set(key, localStorage.getItem(key));
   }
-  return storageCache.get(key)
+  return storageCache.get(key);
 }
 
 function setLocalStorage(key: string, value: string) {
-  localStorage.setItem(key, value)
-  storageCache.set(key, value)  // keep cache in sync
+  localStorage.setItem(key, value);
+  storageCache.set(key, value); // keep cache in sync
 }
 ```
 
@@ -1961,30 +1922,28 @@ Use a Map (not a hook) so it works everywhere: utilities, event handlers, not ju
 **Cookie caching:**
 
 ```typescript
-let cookieCache: Record<string, string> | null = null
+let cookieCache: Record<string, string> | null = null;
 
 function getCookie(name: string) {
   if (!cookieCache) {
-    cookieCache = Object.fromEntries(
-      document.cookie.split('; ').map(c => c.split('='))
-    )
+    cookieCache = Object.fromEntries(document.cookie.split("; ").map((c) => c.split("=")));
   }
-  return cookieCache[name]
+  return cookieCache[name];
 }
 ```
 
 **Important: invalidate on external changes**
 
 ```typescript
-window.addEventListener('storage', (e) => {
-  if (e.key) storageCache.delete(e.key)
-})
+window.addEventListener("storage", (e) => {
+  if (e.key) storageCache.delete(e.key);
+});
 
-document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState === 'visible') {
-    storageCache.clear()
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible") {
+    storageCache.clear();
   }
-})
+});
 ```
 
 If storage can change externally (another tab, server-set cookies), invalidate cache:
@@ -1998,22 +1957,22 @@ Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine
 **Incorrect: 3 iterations**
 
 ```typescript
-const admins = users.filter(u => u.isAdmin)
-const testers = users.filter(u => u.isTester)
-const inactive = users.filter(u => !u.isActive)
+const admins = users.filter((u) => u.isAdmin);
+const testers = users.filter((u) => u.isTester);
+const inactive = users.filter((u) => !u.isActive);
 ```
 
 **Correct: 1 iteration**
 
 ```typescript
-const admins: User[] = []
-const testers: User[] = []
-const inactive: User[] = []
+const admins: User[] = [];
+const testers: User[] = [];
+const inactive: User[] = [];
 
 for (const user of users) {
-  if (user.isAdmin) admins.push(user)
-  if (user.isTester) testers.push(user)
-  if (!user.isActive) inactive.push(user)
+  if (user.isAdmin) admins.push(user);
+  if (user.isTester) testers.push(user);
+  if (!user.isActive) inactive.push(user);
 }
 ```
 
@@ -2030,7 +1989,7 @@ In real-world applications, this optimization is especially valuable when the co
 ```typescript
 function hasChanges(current: string[], original: string[]) {
   // Always sorts and joins, even when lengths differ
-  return current.sort().join() !== original.sort().join()
+  return current.sort().join() !== original.sort().join();
 }
 ```
 
@@ -2042,17 +2001,17 @@ Two O(n log n) sorts run even when `current.length` is 5 and `original.length` i
 function hasChanges(current: string[], original: string[]) {
   // Early return if lengths differ
   if (current.length !== original.length) {
-    return true
+    return true;
   }
   // Only sort/join when lengths match
-  const currentSorted = current.toSorted()
-  const originalSorted = original.toSorted()
+  const currentSorted = current.toSorted();
+  const originalSorted = original.toSorted();
   for (let i = 0; i < currentSorted.length; i++) {
     if (currentSorted[i] !== originalSorted[i]) {
-      return true
+      return true;
     }
   }
-  return false
+  return false;
 }
 ```
 
@@ -2076,22 +2035,22 @@ Return early when result is determined to skip unnecessary processing.
 
 ```typescript
 function validateUsers(users: User[]) {
-  let hasError = false
-  let errorMessage = ''
-  
+  let hasError = false;
+  let errorMessage = "";
+
   for (const user of users) {
     if (!user.email) {
-      hasError = true
-      errorMessage = 'Email required'
+      hasError = true;
+      errorMessage = "Email required";
     }
     if (!user.name) {
-      hasError = true
-      errorMessage = 'Name required'
+      hasError = true;
+      errorMessage = "Name required";
     }
     // Continues checking all users even after error found
   }
-  
-  return hasError ? { valid: false, error: errorMessage } : { valid: true }
+
+  return hasError ? { valid: false, error: errorMessage } : { valid: true };
 }
 ```
 
@@ -2101,14 +2060,14 @@ function validateUsers(users: User[]) {
 function validateUsers(users: User[]) {
   for (const user of users) {
     if (!user.email) {
-      return { valid: false, error: 'Email required' }
+      return { valid: false, error: "Email required" };
     }
     if (!user.name) {
-      return { valid: false, error: 'Name required' }
+      return { valid: false, error: "Name required" };
     }
   }
 
-  return { valid: true }
+  return { valid: true };
 }
 ```
 
@@ -2122,33 +2081,30 @@ Don't create RegExp inside render. Hoist to module scope or memoize with `useMem
 
 ```tsx
 function Highlighter({ text, query }: Props) {
-  const regex = new RegExp(`(${query})`, 'gi')
-  const parts = text.split(regex)
-  return <>{parts.map((part, i) => ...)}</>
+  const regex = new RegExp(`(${query})`, "gi");
+  const parts = text.split(regex);
+  return <>{parts.map((part, i) => part)}</>;
 }
 ```
 
 **Correct: memoize or hoist**
 
 ```tsx
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 function Highlighter({ text, query }: Props) {
-  const regex = useMemo(
-    () => new RegExp(`(${escapeRegex(query)})`, 'gi'),
-    [query]
-  )
-  const parts = text.split(regex)
-  return <>{parts.map((part, i) => ...)}</>
+  const regex = useMemo(() => new RegExp(`(${escapeRegex(query)})`, "gi"), [query]);
+  const parts = text.split(regex);
+  return <>{parts.map((part, i) => part)}</>;
 }
 ```
 
 **Warning: global regex has mutable state**
 
 ```typescript
-const regex = /foo/g
-regex.test('foo')  // true, lastIndex = 3
-regex.test('foo')  // false, lastIndex = 0
+const regex = /foo/g;
+regex.test("foo"); // true, lastIndex = 3
+regex.test("foo"); // false, lastIndex = 0
 ```
 
 Global regex (`/g`) has mutable `lastIndex` state:
@@ -2163,14 +2119,14 @@ Finding the smallest or largest element only requires a single pass through the
 
 ```typescript
 interface Project {
-  id: string
-  name: string
-  updatedAt: number
+  id: string;
+  name: string;
+  updatedAt: number;
 }
 
 function getLatestProject(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
-  return sorted[0]
+  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
+  return sorted[0];
 }
 ```
 
@@ -2180,8 +2136,8 @@ Sorts the entire array just to find the maximum value.
 
 ```typescript
 function getOldestAndNewest(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
-  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
+  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt);
+  return { oldest: sorted[0], newest: sorted[sorted.length - 1] };
 }
 ```
 
@@ -2191,31 +2147,31 @@ Still sorts unnecessarily when only min/max are needed.
 
 ```typescript
 function getLatestProject(projects: Project[]) {
-  if (projects.length === 0) return null
-  
-  let latest = projects[0]
-  
+  if (projects.length === 0) return null;
+
+  let latest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt > latest.updatedAt) {
-      latest = projects[i]
+      latest = projects[i];
     }
   }
-  
-  return latest
+
+  return latest;
 }
 
 function getOldestAndNewest(projects: Project[]) {
-  if (projects.length === 0) return { oldest: null, newest: null }
-  
-  let oldest = projects[0]
-  let newest = projects[0]
-  
+  if (projects.length === 0) return { oldest: null, newest: null };
+
+  let oldest = projects[0];
+  let newest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
-    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
-    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
+    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i];
+    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i];
   }
-  
-  return { oldest, newest }
+
+  return { oldest, newest };
 }
 ```
 
@@ -2224,9 +2180,9 @@ Single pass through the array, no copying, no sorting.
 **Alternative: Math.min/Math.max for small arrays**
 
 ```typescript
-const numbers = [5, 2, 8, 1, 9]
-const min = Math.min(...numbers)
-const max = Math.max(...numbers)
+const numbers = [5, 2, 8, 1, 9];
+const min = Math.min(...numbers);
+const max = Math.max(...numbers);
 ```
 
 This works for small arrays but can be slower for very large arrays due to spread operator limitations. Use the loop approach for reliability.
@@ -2240,15 +2196,15 @@ Convert arrays to Set/Map for repeated membership checks.
 **Incorrect (O(n) per check):**
 
 ```typescript
-const allowedIds = ['a', 'b', 'c', ...]
-items.filter(item => allowedIds.includes(item.id))
+const allowedIds = ["a", "b", "c"];
+items.filter((item) => allowedIds.includes(item.id));
 ```
 
 **Correct (O(1) per check):**
 
 ```typescript
-const allowedIds = new Set(['a', 'b', 'c', ...])
-items.filter(item => allowedIds.has(item.id))
+const allowedIds = new Set(["a", "b", "c"]);
+items.filter((item) => allowedIds.has(item.id));
 ```
 
 ### 7.12 Use toSorted() Instead of sort() for Immutability
@@ -2259,27 +2215,21 @@ items.filter(item => allowedIds.has(item.id))
 
 **Incorrect: mutates original array**
 
-```typescript
+```tsx
 function UserList({ users }: { users: User[] }) {
   // Mutates the users prop array!
-  const sorted = useMemo(
-    () => users.sort((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  )
-  return <div>{sorted.map(renderUser)}</div>
+  const sorted = useMemo(() => users.sort((a, b) => a.name.localeCompare(b.name)), [users]);
+  return <div>{sorted.map(renderUser)}</div>;
 }
 ```
 
 **Correct: creates new array**
 
-```typescript
+```tsx
 function UserList({ users }: { users: User[] }) {
   // Creates new sorted array, original unchanged
-  const sorted = useMemo(
-    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  )
-  return <div>{sorted.map(renderUser)}</div>
+  const sorted = useMemo(() => users.toSorted((a, b) => a.name.localeCompare(b.name)), [users]);
+  return <div>{sorted.map(renderUser)}</div>;
 }
 ```
 
@@ -2293,7 +2243,7 @@ function UserList({ users }: { users: User[] }) {
 
 ```typescript
 // Fallback for older browsers
-const sorted = [...items].sort((a, b) => a.value - b.value)
+const sorted = [...items].sort((a, b) => a.value - b.value);
 ```
 
 `.toSorted()` is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:
@@ -2327,24 +2277,24 @@ Store callbacks in refs when used in effects that shouldn't re-subscribe on call
 ```tsx
 function useWindowEvent(event: string, handler: () => void) {
   useEffect(() => {
-    window.addEventListener(event, handler)
-    return () => window.removeEventListener(event, handler)
-  }, [event, handler])
+    window.addEventListener(event, handler);
+    return () => window.removeEventListener(event, handler);
+  }, [event, handler]);
 }
 ```
 
 **Correct: stable subscription**
 
 ```tsx
-import { useEffectEvent } from 'react'
+import { useEffectEvent } from "react";
 
 function useWindowEvent(event: string, handler: () => void) {
-  const onEvent = useEffectEvent(handler)
+  const onEvent = useEffectEvent(handler);
 
   useEffect(() => {
-    window.addEventListener(event, onEvent)
-    return () => window.removeEventListener(event, onEvent)
-  }, [event])
+    window.addEventListener(event, onEvent);
+    return () => window.removeEventListener(event, onEvent);
+  }, [event]);
 }
 ```
 
@@ -2362,11 +2312,11 @@ Access latest values in callbacks without adding them to dependency arrays. Prev
 
 ```typescript
 function useLatest<T>(value: T) {
-  const ref = useRef(value)
+  const ref = useRef(value);
   useEffect(() => {
-    ref.current = value
-  }, [value])
-  return ref
+    ref.current = value;
+  }, [value]);
+  return ref;
 }
 ```
 
@@ -2374,12 +2324,12 @@ function useLatest<T>(value: T) {
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState("");
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearch(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query, onSearch])
+    const timeout = setTimeout(() => onSearch(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query, onSearch]);
 }
 ```
 
@@ -2387,13 +2337,13 @@ function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
-  const onSearchRef = useLatest(onSearch)
+  const [query, setQuery] = useState("");
+  const onSearchRef = useLatest(onSearch);
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearchRef.current(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query])
+    const timeout = setTimeout(() => onSearchRef.current(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query]);
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/SKILL.md b/.github/skills/vercel-react-best-practices/SKILL.md
index b064716..ba1ca10 100644
--- a/.github/skills/vercel-react-best-practices/SKILL.md
+++ b/.github/skills/vercel-react-best-practices/SKILL.md
@@ -14,6 +14,7 @@ Comprehensive performance optimization guide for React and Next.js applications,
 ## When to Apply
 
 Reference these guidelines when:
+
 - Writing new React components or Next.js pages
 - Implementing data fetching (client or server-side)
 - Reviewing code for performance issues
@@ -22,16 +23,16 @@ Reference these guidelines when:
 
 ## Rule Categories by Priority
 
-| Priority | Category | Impact | Prefix |
-|----------|----------|--------|--------|
-| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
-| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
-| 3 | Server-Side Performance | HIGH | `server-` |
-| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
-| 5 | Re-render Optimization | MEDIUM | `rerender-` |
-| 6 | Rendering Performance | MEDIUM | `rendering-` |
-| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
-| 8 | Advanced Patterns | LOW | `advanced-` |
+| Priority | Category                  | Impact      | Prefix       |
+| -------- | ------------------------- | ----------- | ------------ |
+| 1        | Eliminating Waterfalls    | CRITICAL    | `async-`     |
+| 2        | Bundle Size Optimization  | CRITICAL    | `bundle-`    |
+| 3        | Server-Side Performance   | HIGH        | `server-`    |
+| 4        | Client-Side Data Fetching | MEDIUM-HIGH | `client-`    |
+| 5        | Re-render Optimization    | MEDIUM      | `rerender-`  |
+| 6        | Rendering Performance     | MEDIUM      | `rendering-` |
+| 7        | JavaScript Performance    | LOW-MEDIUM  | `js-`        |
+| 8        | Advanced Patterns         | LOW         | `advanced-`  |
 
 ## Quick Reference
 
@@ -115,6 +116,7 @@ rules/_sections.md
 ```
 
 Each rule file contains:
+
 - Brief explanation of why it matters
 - Incorrect code example with explanation
 - Correct code example with explanation
diff --git a/.github/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md b/.github/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
index 97e7ade..435261a 100644
--- a/.github/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
+++ b/.github/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
@@ -14,9 +14,9 @@ Store callbacks in refs when used in effects that shouldn't re-subscribe on call
 ```tsx
 function useWindowEvent(event: string, handler: (e) => void) {
   useEffect(() => {
-    window.addEventListener(event, handler)
-    return () => window.removeEventListener(event, handler)
-  }, [event, handler])
+    window.addEventListener(event, handler);
+    return () => window.removeEventListener(event, handler);
+  }, [event, handler]);
 }
 ```
 
@@ -24,31 +24,31 @@ function useWindowEvent(event: string, handler: (e) => void) {
 
 ```tsx
 function useWindowEvent(event: string, handler: (e) => void) {
-  const handlerRef = useRef(handler)
+  const handlerRef = useRef(handler);
   useEffect(() => {
-    handlerRef.current = handler
-  }, [handler])
+    handlerRef.current = handler;
+  }, [handler]);
 
   useEffect(() => {
-    const listener = (e) => handlerRef.current(e)
-    window.addEventListener(event, listener)
-    return () => window.removeEventListener(event, listener)
-  }, [event])
+    const listener = (e) => handlerRef.current(e);
+    window.addEventListener(event, listener);
+    return () => window.removeEventListener(event, listener);
+  }, [event]);
 }
 ```
 
 **Alternative: use `useEffectEvent` if you're on latest React:**
 
 ```tsx
-import { useEffectEvent } from 'react'
+import { useEffectEvent } from "react";
 
 function useWindowEvent(event: string, handler: (e) => void) {
-  const onEvent = useEffectEvent(handler)
+  const onEvent = useEffectEvent(handler);
 
   useEffect(() => {
-    window.addEventListener(event, onEvent)
-    return () => window.removeEventListener(event, onEvent)
-  }, [event])
+    window.addEventListener(event, onEvent);
+    return () => window.removeEventListener(event, onEvent);
+  }, [event]);
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/advanced-use-latest.md b/.github/skills/vercel-react-best-practices/rules/advanced-use-latest.md
index 483c2ef..8929112 100644
--- a/.github/skills/vercel-react-best-practices/rules/advanced-use-latest.md
+++ b/.github/skills/vercel-react-best-practices/rules/advanced-use-latest.md
@@ -13,11 +13,11 @@ Access latest values in callbacks without adding them to dependency arrays. Prev
 
 ```typescript
 function useLatest<T>(value: T) {
-  const ref = useRef(value)
+  const ref = useRef(value);
   useLayoutEffect(() => {
-    ref.current = value
-  }, [value])
-  return ref
+    ref.current = value;
+  }, [value]);
+  return ref;
 }
 ```
 
@@ -25,12 +25,12 @@ function useLatest<T>(value: T) {
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState("");
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearch(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query, onSearch])
+    const timeout = setTimeout(() => onSearch(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query, onSearch]);
 }
 ```
 
@@ -38,12 +38,12 @@ function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
-  const onSearchRef = useLatest(onSearch)
+  const [query, setQuery] = useState("");
+  const onSearchRef = useLatest(onSearch);
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearchRef.current(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query])
+    const timeout = setTimeout(() => onSearchRef.current(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query]);
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/async-api-routes.md b/.github/skills/vercel-react-best-practices/rules/async-api-routes.md
index 6feda1e..54a04a4 100644
--- a/.github/skills/vercel-react-best-practices/rules/async-api-routes.md
+++ b/.github/skills/vercel-react-best-practices/rules/async-api-routes.md
@@ -13,10 +13,10 @@ In API routes and Server Actions, start independent operations immediately, even
 
 ```typescript
 export async function GET(request: Request) {
-  const session = await auth()
-  const config = await fetchConfig()
-  const data = await fetchData(session.user.id)
-  return Response.json({ data, config })
+  const session = await auth();
+  const config = await fetchConfig();
+  const data = await fetchData(session.user.id);
+  return Response.json({ data, config });
 }
 ```
 
@@ -24,14 +24,11 @@ export async function GET(request: Request) {
 
 ```typescript
 export async function GET(request: Request) {
-  const sessionPromise = auth()
-  const configPromise = fetchConfig()
-  const session = await sessionPromise
-  const [config, data] = await Promise.all([
-    configPromise,
-    fetchData(session.user.id)
-  ])
-  return Response.json({ data, config })
+  const sessionPromise = auth();
+  const configPromise = fetchConfig();
+  const session = await sessionPromise;
+  const [config, data] = await Promise.all([configPromise, fetchData(session.user.id)]);
+  return Response.json({ data, config });
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/async-defer-await.md b/.github/skills/vercel-react-best-practices/rules/async-defer-await.md
index ea7082a..2b4d821 100644
--- a/.github/skills/vercel-react-best-practices/rules/async-defer-await.md
+++ b/.github/skills/vercel-react-best-practices/rules/async-defer-await.md
@@ -13,15 +13,15 @@ Move `await` operations into the branches where they're actually used to avoid b
 
 ```typescript
 async function handleRequest(userId: string, skipProcessing: boolean) {
-  const userData = await fetchUserData(userId)
-  
+  const userData = await fetchUserData(userId);
+
   if (skipProcessing) {
     // Returns immediately but still waited for userData
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Only this branch uses userData
-  return processUserData(userData)
+  return processUserData(userData);
 }
 ```
 
@@ -31,12 +31,12 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 async function handleRequest(userId: string, skipProcessing: boolean) {
   if (skipProcessing) {
     // Returns immediately without waiting
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Fetch only when needed
-  const userData = await fetchUserData(userId)
-  return processUserData(userData)
+  const userData = await fetchUserData(userId);
+  return processUserData(userData);
 }
 ```
 
@@ -45,35 +45,35 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 ```typescript
 // Incorrect: always fetches permissions
 async function updateResource(resourceId: string, userId: string) {
-  const permissions = await fetchPermissions(userId)
-  const resource = await getResource(resourceId)
-  
+  const permissions = await fetchPermissions(userId);
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: "Not found" };
   }
-  
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: "Forbidden" };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 
 // Correct: fetches only when needed
 async function updateResource(resourceId: string, userId: string) {
-  const resource = await getResource(resourceId)
-  
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: "Not found" };
   }
-  
-  const permissions = await fetchPermissions(userId)
-  
+
+  const permissions = await fetchPermissions(userId);
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: "Forbidden" };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/async-dependencies.md b/.github/skills/vercel-react-best-practices/rules/async-dependencies.md
index fb90d86..d3ae564 100644
--- a/.github/skills/vercel-react-best-practices/rules/async-dependencies.md
+++ b/.github/skills/vercel-react-best-practices/rules/async-dependencies.md
@@ -12,25 +12,26 @@ For operations with partial dependencies, use `better-all` to maximize paralleli
 **Incorrect (profile waits for config unnecessarily):**
 
 ```typescript
-const [user, config] = await Promise.all([
-  fetchUser(),
-  fetchConfig()
-])
-const profile = await fetchProfile(user.id)
+const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
+const profile = await fetchProfile(user.id);
 ```
 
 **Correct (config and profile run in parallel):**
 
 ```typescript
-import { all } from 'better-all'
+import { all } from "better-all";
 
 const { user, config, profile } = await all({
-  async user() { return fetchUser() },
-  async config() { return fetchConfig() },
+  async user() {
+    return fetchUser();
+  },
+  async config() {
+    return fetchConfig();
+  },
   async profile() {
-    return fetchProfile((await this.$.user).id)
-  }
-})
+    return fetchProfile((await this.$.user).id);
+  },
+});
 ```
 
 Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)
diff --git a/.github/skills/vercel-react-best-practices/rules/async-parallel.md b/.github/skills/vercel-react-best-practices/rules/async-parallel.md
index 64133f6..f7d13a8 100644
--- a/.github/skills/vercel-react-best-practices/rules/async-parallel.md
+++ b/.github/skills/vercel-react-best-practices/rules/async-parallel.md
@@ -12,17 +12,13 @@ When async operations have no interdependencies, execute them concurrently using
 **Incorrect (sequential execution, 3 round trips):**
 
 ```typescript
-const user = await fetchUser()
-const posts = await fetchPosts()
-const comments = await fetchComments()
+const user = await fetchUser();
+const posts = await fetchPosts();
+const comments = await fetchComments();
 ```
 
 **Correct (parallel execution, 1 round trip):**
 
 ```typescript
-const [user, posts, comments] = await Promise.all([
-  fetchUser(),
-  fetchPosts(),
-  fetchComments()
-])
+const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md b/.github/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
index 1fbc05b..790027e 100644
--- a/.github/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
+++ b/.github/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
@@ -13,8 +13,8 @@ Instead of awaiting data in async components before returning JSX, use Suspense
 
 ```tsx
 async function Page() {
-  const data = await fetchData() // Blocks entire page
-  
+  const data = await fetchData(); // Blocks entire page
+
   return (
     <div>
       <div>Sidebar</div>
@@ -24,7 +24,7 @@ async function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 ```
 
@@ -45,12 +45,12 @@ function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 async function DataDisplay() {
-  const data = await fetchData() // Only blocks this component
-  return <div>{data.content}</div>
+  const data = await fetchData(); // Only blocks this component
+  return <div>{data.content}</div>;
 }
 ```
 
@@ -61,8 +61,8 @@ Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
 ```tsx
 function Page() {
   // Start fetch immediately, but don't await
-  const dataPromise = fetchData()
-  
+  const dataPromise = fetchData();
+
   return (
     <div>
       <div>Sidebar</div>
@@ -73,17 +73,17 @@ function Page() {
       </Suspense>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Unwraps the promise
-  return <div>{data.content}</div>
+  const data = use(dataPromise); // Unwraps the promise
+  return <div>{data.content}</div>;
 }
 
 function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Reuses the same promise
-  return <div>{data.summary}</div>
+  const data = use(dataPromise); // Reuses the same promise
+  return <div>{data.summary}</div>;
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md b/.github/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
index ee48f32..8b038a5 100644
--- a/.github/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
+++ b/.github/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
@@ -16,24 +16,24 @@ Popular icon and component libraries can have **up to 10,000 re-exports** in the
 **Incorrect (imports entire library):**
 
 ```tsx
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from "lucide-react";
 // Loads 1,583 modules, takes ~2.8s extra in dev
 // Runtime cost: 200-800ms on every cold start
 
-import { Button, TextField } from '@mui/material'
+import { Button, TextField } from "@mui/material";
 // Loads 2,225 modules, takes ~4.2s extra in dev
 ```
 
 **Correct (imports only what you need):**
 
 ```tsx
-import Check from 'lucide-react/dist/esm/icons/check'
-import X from 'lucide-react/dist/esm/icons/x'
-import Menu from 'lucide-react/dist/esm/icons/menu'
+import Check from "lucide-react/dist/esm/icons/check";
+import X from "lucide-react/dist/esm/icons/x";
+import Menu from "lucide-react/dist/esm/icons/menu";
 // Loads only 3 modules (~2KB vs ~1MB)
 
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
 // Loads only what you use
 ```
 
@@ -43,12 +43,12 @@ import TextField from '@mui/material/TextField'
 // next.config.js - use optimizePackageImports
 module.exports = {
   experimental: {
-    optimizePackageImports: ['lucide-react', '@mui/material']
-  }
-}
+    optimizePackageImports: ["lucide-react", "@mui/material"],
+  },
+};
 
 // Then you can keep the ergonomic barrel imports:
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from "lucide-react";
 // Automatically transformed to direct imports at build time
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/bundle-conditional.md b/.github/skills/vercel-react-best-practices/rules/bundle-conditional.md
index 99d6fc9..a541a02 100644
--- a/.github/skills/vercel-react-best-practices/rules/bundle-conditional.md
+++ b/.github/skills/vercel-react-best-practices/rules/bundle-conditional.md
@@ -12,19 +12,25 @@ Load large data or modules only when a feature is activated.
 **Example (lazy-load animation frames):**
 
 ```tsx
-function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
-  const [frames, setFrames] = useState<Frame[] | null>(null)
+function AnimationPlayer({
+  enabled,
+  setEnabled,
+}: {
+  enabled: boolean;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [frames, setFrames] = useState<Frame[] | null>(null);
 
   useEffect(() => {
-    if (enabled && !frames && typeof window !== 'undefined') {
-      import('./animation-frames.js')
-        .then(mod => setFrames(mod.frames))
-        .catch(() => setEnabled(false))
+    if (enabled && !frames && typeof window !== "undefined") {
+      import("./animation-frames.js")
+        .then((mod) => setFrames(mod.frames))
+        .catch(() => setEnabled(false));
     }
-  }, [enabled, frames, setEnabled])
+  }, [enabled, frames, setEnabled]);
 
-  if (!frames) return <Skeleton />
-  return <Canvas frames={frames} />
+  if (!frames) return <Skeleton />;
+  return <Canvas frames={frames} />;
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md b/.github/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
index db041d1..b3da8ae 100644
--- a/.github/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
+++ b/.github/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
@@ -12,7 +12,7 @@ Analytics, logging, and error tracking don't block user interaction. Load them a
 **Incorrect (blocks initial bundle):**
 
 ```tsx
-import { Analytics } from '@vercel/analytics/react'
+import { Analytics } from "@vercel/analytics/react";
 
 export default function RootLayout({ children }) {
   return (
@@ -22,19 +22,18 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
 **Correct (loads after hydration):**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const Analytics = dynamic(
-  () => import('@vercel/analytics/react').then(m => m.Analytics),
-  { ssr: false }
-)
+const Analytics = dynamic(() => import("@vercel/analytics/react").then((m) => m.Analytics), {
+  ssr: false,
+});
 
 export default function RootLayout({ children }) {
   return (
@@ -44,6 +43,6 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md b/.github/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
index 60b6269..bb527fd 100644
--- a/.github/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
+++ b/.github/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
@@ -12,24 +12,23 @@ Use `next/dynamic` to lazy-load large components not needed on initial render.
 **Incorrect (Monaco bundles with main chunk ~300KB):**
 
 ```tsx
-import { MonacoEditor } from './monaco-editor'
+import { MonacoEditor } from "./monaco-editor";
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
 **Correct (Monaco loads on demand):**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const MonacoEditor = dynamic(
-  () => import('./monaco-editor').then(m => m.MonacoEditor),
-  { ssr: false }
-)
+const MonacoEditor = dynamic(() => import("./monaco-editor").then((m) => m.MonacoEditor), {
+  ssr: false,
+});
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/bundle-preload.md b/.github/skills/vercel-react-best-practices/rules/bundle-preload.md
index 7000504..b551189 100644
--- a/.github/skills/vercel-react-best-practices/rules/bundle-preload.md
+++ b/.github/skills/vercel-react-best-practices/rules/bundle-preload.md
@@ -14,20 +14,16 @@ Preload heavy bundles before they're needed to reduce perceived latency.
 ```tsx
 function EditorButton({ onClick }: { onClick: () => void }) {
   const preload = () => {
-    if (typeof window !== 'undefined') {
-      void import('./monaco-editor')
+    if (typeof window !== "undefined") {
+      void import("./monaco-editor");
     }
-  }
+  };
 
   return (
-    <button
-      onMouseEnter={preload}
-      onFocus={preload}
-      onClick={onClick}
-    >
+    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
       Open Editor
     </button>
-  )
+  );
 }
 ```
 
@@ -36,14 +32,12 @@ function EditorButton({ onClick }: { onClick: () => void }) {
 ```tsx
 function FlagsProvider({ children, flags }: Props) {
   useEffect(() => {
-    if (flags.editorEnabled && typeof window !== 'undefined') {
-      void import('./monaco-editor').then(mod => mod.init())
+    if (flags.editorEnabled && typeof window !== "undefined") {
+      void import("./monaco-editor").then((mod) => mod.init());
     }
-  }, [flags.editorEnabled])
+  }, [flags.editorEnabled]);
 
-  return <FlagsContext.Provider value={flags}>
-    {children}
-  </FlagsContext.Provider>
+  return <FlagsContext.Provider value={flags}>{children}</FlagsContext.Provider>;
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/client-event-listeners.md b/.github/skills/vercel-react-best-practices/rules/client-event-listeners.md
index aad4ae9..a40d82a 100644
--- a/.github/skills/vercel-react-best-practices/rules/client-event-listeners.md
+++ b/.github/skills/vercel-react-best-practices/rules/client-event-listeners.md
@@ -16,12 +16,12 @@ function useKeyboardShortcut(key: string, callback: () => void) {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === key) {
-        callback()
+        callback();
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [key, callback])
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [key, callback]);
 }
 ```
 
@@ -30,45 +30,49 @@ When using the `useKeyboardShortcut` hook multiple times, each instance will reg
 **Correct (N instances = 1 listener):**
 
 ```tsx
-import useSWRSubscription from 'swr/subscription'
+import useSWRSubscription from "swr/subscription";
 
 // Module-level Map to track callbacks per key
-const keyCallbacks = new Map<string, Set<() => void>>()
+const keyCallbacks = new Map<string, Set<() => void>>();
 
 function useKeyboardShortcut(key: string, callback: () => void) {
   // Register this callback in the Map
   useEffect(() => {
     if (!keyCallbacks.has(key)) {
-      keyCallbacks.set(key, new Set())
+      keyCallbacks.set(key, new Set());
     }
-    keyCallbacks.get(key)!.add(callback)
+    keyCallbacks.get(key)!.add(callback);
 
     return () => {
-      const set = keyCallbacks.get(key)
+      const set = keyCallbacks.get(key);
       if (set) {
-        set.delete(callback)
+        set.delete(callback);
         if (set.size === 0) {
-          keyCallbacks.delete(key)
+          keyCallbacks.delete(key);
         }
       }
-    }
-  }, [key, callback])
+    };
+  }, [key, callback]);
 
-  useSWRSubscription('global-keydown', () => {
+  useSWRSubscription("global-keydown", () => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && keyCallbacks.has(e.key)) {
-        keyCallbacks.get(e.key)!.forEach(cb => cb())
+        keyCallbacks.get(e.key)!.forEach((cb) => cb());
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  })
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  });
 }
 
 function Profile() {
   // Multiple shortcuts will share the same listener
-  useKeyboardShortcut('p', () => { /* ... */ }) 
-  useKeyboardShortcut('k', () => { /* ... */ })
+  useKeyboardShortcut("p", () => {
+    /* ... */
+  });
+  useKeyboardShortcut("k", () => {
+    /* ... */
+  });
   // ...
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/client-localstorage-schema.md b/.github/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
index d30a1a7..4b8ced0 100644
--- a/.github/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
+++ b/.github/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
@@ -13,18 +13,18 @@ Add version prefix to keys and store only needed fields. Prevents schema conflic
 
 ```typescript
 // No version, stores everything, no error handling
-localStorage.setItem('userConfig', JSON.stringify(fullUserObject))
-const data = localStorage.getItem('userConfig')
+localStorage.setItem("userConfig", JSON.stringify(fullUserObject));
+const data = localStorage.getItem("userConfig");
 ```
 
 **Correct:**
 
 ```typescript
-const VERSION = 'v2'
+const VERSION = "v2";
 
 function saveConfig(config: { theme: string; language: string }) {
   try {
-    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config))
+    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config));
   } catch {
     // Throws in incognito/private browsing, quota exceeded, or disabled
   }
@@ -32,21 +32,21 @@ function saveConfig(config: { theme: string; language: string }) {
 
 function loadConfig() {
   try {
-    const data = localStorage.getItem(`userConfig:${VERSION}`)
-    return data ? JSON.parse(data) : null
+    const data = localStorage.getItem(`userConfig:${VERSION}`);
+    return data ? JSON.parse(data) : null;
   } catch {
-    return null
+    return null;
   }
 }
 
 // Migration from v1 to v2
 function migrate() {
   try {
-    const v1 = localStorage.getItem('userConfig:v1')
+    const v1 = localStorage.getItem("userConfig:v1");
     if (v1) {
-      const old = JSON.parse(v1)
-      saveConfig({ theme: old.darkMode ? 'dark' : 'light', language: old.lang })
-      localStorage.removeItem('userConfig:v1')
+      const old = JSON.parse(v1);
+      saveConfig({ theme: old.darkMode ? "dark" : "light", language: old.lang });
+      localStorage.removeItem("userConfig:v1");
     }
   } catch {}
 }
@@ -58,10 +58,13 @@ function migrate() {
 // User object has 20+ fields, only store what UI needs
 function cachePrefs(user: FullUser) {
   try {
-    localStorage.setItem('prefs:v1', JSON.stringify({
-      theme: user.preferences.theme,
-      notifications: user.preferences.notifications
-    }))
+    localStorage.setItem(
+      "prefs:v1",
+      JSON.stringify({
+        theme: user.preferences.theme,
+        notifications: user.preferences.notifications,
+      })
+    );
   } catch {}
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md b/.github/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
index ce39a88..63da926 100644
--- a/.github/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
+++ b/.github/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
@@ -13,34 +13,34 @@ Add `{ passive: true }` to touch and wheel event listeners to enable immediate s
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch)
-  document.addEventListener('wheel', handleWheel)
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener("touchstart", handleTouch);
+  document.addEventListener("wheel", handleWheel);
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener("touchstart", handleTouch);
+    document.removeEventListener("wheel", handleWheel);
+  };
+}, []);
 ```
 
 **Correct:**
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch, { passive: true })
-  document.addEventListener('wheel', handleWheel, { passive: true })
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener("touchstart", handleTouch, { passive: true });
+  document.addEventListener("wheel", handleWheel, { passive: true });
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener("touchstart", handleTouch);
+    document.removeEventListener("wheel", handleWheel);
+  };
+}, []);
 ```
 
 **Use passive when:** tracking/analytics, logging, any listener that doesn't call `preventDefault()`.
diff --git a/.github/skills/vercel-react-best-practices/rules/client-swr-dedup.md b/.github/skills/vercel-react-best-practices/rules/client-swr-dedup.md
index 2a430f2..a056b42 100644
--- a/.github/skills/vercel-react-best-practices/rules/client-swr-dedup.md
+++ b/.github/skills/vercel-react-best-practices/rules/client-swr-dedup.md
@@ -13,43 +13,43 @@ SWR enables request deduplication, caching, and revalidation across component in
 
 ```tsx
 function UserList() {
-  const [users, setUsers] = useState([])
+  const [users, setUsers] = useState([]);
   useEffect(() => {
-    fetch('/api/users')
-      .then(r => r.json())
-      .then(setUsers)
-  }, [])
+    fetch("/api/users")
+      .then((r) => r.json())
+      .then(setUsers);
+  }, []);
 }
 ```
 
 **Correct (multiple instances share one request):**
 
 ```tsx
-import useSWR from 'swr'
+import useSWR from "swr";
 
 function UserList() {
-  const { data: users } = useSWR('/api/users', fetcher)
+  const { data: users } = useSWR("/api/users", fetcher);
 }
 ```
 
 **For immutable data:**
 
 ```tsx
-import { useImmutableSWR } from '@/lib/swr'
+import { useImmutableSWR } from "@/lib/swr";
 
 function StaticContent() {
-  const { data } = useImmutableSWR('/api/config', fetcher)
+  const { data } = useImmutableSWR("/api/config", fetcher);
 }
 ```
 
 **For mutations:**
 
 ```tsx
-import { useSWRMutation } from 'swr/mutation'
+import { useSWRMutation } from "swr/mutation";
 
 function UpdateButton() {
-  const { trigger } = useSWRMutation('/api/user', updateUser)
-  return <button onClick={() => trigger()}>Update</button>
+  const { trigger } = useSWRMutation("/api/user", updateUser);
+  return <button onClick={() => trigger()}>Update</button>;
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/js-batch-dom-css.md b/.github/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
index 84b6552..0768a85 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
@@ -13,10 +13,10 @@ Avoid interleaving style writes with layout reads. When you read a layout proper
 
 ```typescript
 function updateElementStyles(element: HTMLElement) {
-  element.style.width = '100px'
-  const width = element.offsetWidth  // Forces reflow
-  element.style.height = '200px'
-  const height = element.offsetHeight  // Forces another reflow
+  element.style.width = "100px";
+  const width = element.offsetWidth; // Forces reflow
+  element.style.height = "200px";
+  const height = element.offsetHeight; // Forces another reflow
 }
 ```
 
@@ -25,13 +25,13 @@ function updateElementStyles(element: HTMLElement) {
 ```typescript
 function updateElementStyles(element: HTMLElement) {
   // Batch all writes together
-  element.style.width = '100px'
-  element.style.height = '200px'
-  element.style.backgroundColor = 'blue'
-  element.style.border = '1px solid black'
-  
+  element.style.width = "100px";
+  element.style.height = "200px";
+  element.style.backgroundColor = "blue";
+  element.style.border = "1px solid black";
+
   // Read after all writes are done (single reflow)
-  const { width, height } = element.getBoundingClientRect()
+  const { width, height } = element.getBoundingClientRect();
 }
 ```
 
@@ -48,10 +48,10 @@ function updateElementStyles(element: HTMLElement) {
 
 ```typescript
 function updateElementStyles(element: HTMLElement) {
-  element.classList.add('highlighted-box')
+  element.classList.add("highlighted-box");
 
-  const { width, height } = element.getBoundingClientRect()
+  const { width, height } = element.getBoundingClientRect();
 }
 ```
 
-Prefer CSS classes over inline styles when possible. CSS files are cached by the browser, and classes provide better separation of concerns and are easier to maintain.
\ No newline at end of file
+Prefer CSS classes over inline styles when possible. CSS files are cached by the browser, and classes provide better separation of concerns and are easier to maintain.
diff --git a/.github/skills/vercel-react-best-practices/rules/js-cache-function-results.md b/.github/skills/vercel-react-best-practices/rules/js-cache-function-results.md
index 180f8ac..9d81b2a 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-cache-function-results.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-cache-function-results.md
@@ -11,67 +11,67 @@ Use a module-level Map to cache function results when the same function is calle
 
 **Incorrect (redundant computation):**
 
-```typescript
+```tsx
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
-      {projects.map(project => {
+      {projects.map((project) => {
         // slugify() called 100+ times for same project names
-        const slug = slugify(project.name)
-        
-        return <ProjectCard key={project.id} slug={slug} />
+        const slug = slugify(project.name);
+
+        return <ProjectCard key={project.id} slug={slug} />;
       })}
     </div>
-  )
+  );
 }
 ```
 
 **Correct (cached results):**
 
-```typescript
+```tsx
 // Module-level cache
-const slugifyCache = new Map<string, string>()
+const slugifyCache = new Map<string, string>();
 
 function cachedSlugify(text: string): string {
   if (slugifyCache.has(text)) {
-    return slugifyCache.get(text)!
+    return slugifyCache.get(text)!;
   }
-  const result = slugify(text)
-  slugifyCache.set(text, result)
-  return result
+  const result = slugify(text);
+  slugifyCache.set(text, result);
+  return result;
 }
 
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
-      {projects.map(project => {
+      {projects.map((project) => {
         // Computed only once per unique project name
-        const slug = cachedSlugify(project.name)
-        
-        return <ProjectCard key={project.id} slug={slug} />
+        const slug = cachedSlugify(project.name);
+
+        return <ProjectCard key={project.id} slug={slug} />;
       })}
     </div>
-  )
+  );
 }
 ```
 
 **Simpler pattern for single-value functions:**
 
 ```typescript
-let isLoggedInCache: boolean | null = null
+let isLoggedInCache: boolean | null = null;
 
 function isLoggedIn(): boolean {
   if (isLoggedInCache !== null) {
-    return isLoggedInCache
+    return isLoggedInCache;
   }
-  
-  isLoggedInCache = document.cookie.includes('auth=')
-  return isLoggedInCache
+
+  isLoggedInCache = document.cookie.includes("auth=");
+  return isLoggedInCache;
 }
 
 // Clear cache when auth changes
 function onAuthChange() {
-  isLoggedInCache = null
+  isLoggedInCache = null;
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/js-cache-property-access.md b/.github/skills/vercel-react-best-practices/rules/js-cache-property-access.md
index 39eec90..291f109 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-cache-property-access.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-cache-property-access.md
@@ -13,16 +13,16 @@ Cache object property lookups in hot paths.
 
 ```typescript
 for (let i = 0; i < arr.length; i++) {
-  process(obj.config.settings.value)
+  process(obj.config.settings.value);
 }
 ```
 
 **Correct (1 lookup total):**
 
 ```typescript
-const value = obj.config.settings.value
-const len = arr.length
+const value = obj.config.settings.value;
+const len = arr.length;
 for (let i = 0; i < len; i++) {
-  process(value)
+  process(value);
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/js-cache-storage.md b/.github/skills/vercel-react-best-practices/rules/js-cache-storage.md
index aa4a30c..d0e2a12 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-cache-storage.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-cache-storage.md
@@ -13,7 +13,7 @@ tags: javascript, localStorage, storage, caching, performance
 
 ```typescript
 function getTheme() {
-  return localStorage.getItem('theme') ?? 'light'
+  return localStorage.getItem("theme") ?? "light";
 }
 // Called 10 times = 10 storage reads
 ```
@@ -21,18 +21,18 @@ function getTheme() {
 **Correct (Map cache):**
 
 ```typescript
-const storageCache = new Map<string, string | null>()
+const storageCache = new Map<string, string | null>();
 
 function getLocalStorage(key: string) {
   if (!storageCache.has(key)) {
-    storageCache.set(key, localStorage.getItem(key))
+    storageCache.set(key, localStorage.getItem(key));
   }
-  return storageCache.get(key)
+  return storageCache.get(key);
 }
 
 function setLocalStorage(key: string, value: string) {
-  localStorage.setItem(key, value)
-  storageCache.set(key, value)  // keep cache in sync
+  localStorage.setItem(key, value);
+  storageCache.set(key, value); // keep cache in sync
 }
 ```
 
@@ -41,15 +41,13 @@ Use a Map (not a hook) so it works everywhere: utilities, event handlers, not ju
 **Cookie caching:**
 
 ```typescript
-let cookieCache: Record<string, string> | null = null
+let cookieCache: Record<string, string> | null = null;
 
 function getCookie(name: string) {
   if (!cookieCache) {
-    cookieCache = Object.fromEntries(
-      document.cookie.split('; ').map(c => c.split('='))
-    )
+    cookieCache = Object.fromEntries(document.cookie.split("; ").map((c) => c.split("=")));
   }
-  return cookieCache[name]
+  return cookieCache[name];
 }
 ```
 
@@ -58,13 +56,13 @@ function getCookie(name: string) {
 If storage can change externally (another tab, server-set cookies), invalidate cache:
 
 ```typescript
-window.addEventListener('storage', (e) => {
-  if (e.key) storageCache.delete(e.key)
-})
+window.addEventListener("storage", (e) => {
+  if (e.key) storageCache.delete(e.key);
+});
 
-document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState === 'visible') {
-    storageCache.clear()
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible") {
+    storageCache.clear();
   }
-})
+});
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/js-combine-iterations.md b/.github/skills/vercel-react-best-practices/rules/js-combine-iterations.md
index 044d017..f1e2518 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-combine-iterations.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-combine-iterations.md
@@ -12,21 +12,21 @@ Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine
 **Incorrect (3 iterations):**
 
 ```typescript
-const admins = users.filter(u => u.isAdmin)
-const testers = users.filter(u => u.isTester)
-const inactive = users.filter(u => !u.isActive)
+const admins = users.filter((u) => u.isAdmin);
+const testers = users.filter((u) => u.isTester);
+const inactive = users.filter((u) => !u.isActive);
 ```
 
 **Correct (1 iteration):**
 
 ```typescript
-const admins: User[] = []
-const testers: User[] = []
-const inactive: User[] = []
+const admins: User[] = [];
+const testers: User[] = [];
+const inactive: User[] = [];
 
 for (const user of users) {
-  if (user.isAdmin) admins.push(user)
-  if (user.isTester) testers.push(user)
-  if (!user.isActive) inactive.push(user)
+  if (user.isAdmin) admins.push(user);
+  if (user.isTester) testers.push(user);
+  if (!user.isActive) inactive.push(user);
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/js-early-exit.md b/.github/skills/vercel-react-best-practices/rules/js-early-exit.md
index f46cb89..992181a 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-early-exit.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-early-exit.md
@@ -13,22 +13,22 @@ Return early when result is determined to skip unnecessary processing.
 
 ```typescript
 function validateUsers(users: User[]) {
-  let hasError = false
-  let errorMessage = ''
-  
+  let hasError = false;
+  let errorMessage = "";
+
   for (const user of users) {
     if (!user.email) {
-      hasError = true
-      errorMessage = 'Email required'
+      hasError = true;
+      errorMessage = "Email required";
     }
     if (!user.name) {
-      hasError = true
-      errorMessage = 'Name required'
+      hasError = true;
+      errorMessage = "Name required";
     }
     // Continues checking all users even after error found
   }
-  
-  return hasError ? { valid: false, error: errorMessage } : { valid: true }
+
+  return hasError ? { valid: false, error: errorMessage } : { valid: true };
 }
 ```
 
@@ -38,13 +38,13 @@ function validateUsers(users: User[]) {
 function validateUsers(users: User[]) {
   for (const user of users) {
     if (!user.email) {
-      return { valid: false, error: 'Email required' }
+      return { valid: false, error: "Email required" };
     }
     if (!user.name) {
-      return { valid: false, error: 'Name required' }
+      return { valid: false, error: "Name required" };
     }
   }
 
-  return { valid: true }
+  return { valid: true };
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/js-hoist-regexp.md b/.github/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
index dae3fef..81e44f1 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
@@ -13,24 +13,21 @@ Don't create RegExp inside render. Hoist to module scope or memoize with `useMem
 
 ```tsx
 function Highlighter({ text, query }: Props) {
-  const regex = new RegExp(`(${query})`, 'gi')
-  const parts = text.split(regex)
-  return <>{parts.map((part, i) => ...)}</>
+  const regex = new RegExp(`(${query})`, "gi");
+  const parts = text.split(regex);
+  return <>{parts.map((part, i) => part)}</>;
 }
 ```
 
 **Correct (memoize or hoist):**
 
 ```tsx
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 function Highlighter({ text, query }: Props) {
-  const regex = useMemo(
-    () => new RegExp(`(${escapeRegex(query)})`, 'gi'),
-    [query]
-  )
-  const parts = text.split(regex)
-  return <>{parts.map((part, i) => ...)}</>
+  const regex = useMemo(() => new RegExp(`(${escapeRegex(query)})`, "gi"), [query]);
+  const parts = text.split(regex);
+  return <>{parts.map((part, i) => part)}</>;
 }
 ```
 
@@ -39,7 +36,7 @@ function Highlighter({ text, query }: Props) {
 Global regex (`/g`) has mutable `lastIndex` state:
 
 ```typescript
-const regex = /foo/g
-regex.test('foo')  // true, lastIndex = 3
-regex.test('foo')  // false, lastIndex = 0
+const regex = /foo/g;
+regex.test("foo"); // true, lastIndex = 3
+regex.test("foo"); // false, lastIndex = 0
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/js-index-maps.md b/.github/skills/vercel-react-best-practices/rules/js-index-maps.md
index 9d357a0..1fbaeda 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-index-maps.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-index-maps.md
@@ -13,10 +13,10 @@ Multiple `.find()` calls by the same key should use a Map.
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: users.find(u => u.id === order.userId)
-  }))
+    user: users.find((u) => u.id === order.userId),
+  }));
 }
 ```
 
@@ -24,12 +24,12 @@ function processOrders(orders: Order[], users: User[]) {
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  const userById = new Map(users.map(u => [u.id, u]))
+  const userById = new Map(users.map((u) => [u.id, u]));
 
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: userById.get(order.userId)
-  }))
+    user: userById.get(order.userId),
+  }));
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/js-length-check-first.md b/.github/skills/vercel-react-best-practices/rules/js-length-check-first.md
index 8b89573..8bb7973 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-length-check-first.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-length-check-first.md
@@ -16,7 +16,7 @@ In real-world applications, this optimization is especially valuable when the co
 ```typescript
 function hasChanges(current: string[], original: string[]) {
   // Always sorts and joins, even when lengths differ
-  return current.sort().join() !== original.sort().join()
+  return current.sort().join() !== original.sort().join();
 }
 ```
 
@@ -28,21 +28,22 @@ Two O(n log n) sorts run even when `current.length` is 5 and `original.length` i
 function hasChanges(current: string[], original: string[]) {
   // Early return if lengths differ
   if (current.length !== original.length) {
-    return true
+    return true;
   }
   // Only sort when lengths match
-  const currentSorted = current.toSorted()
-  const originalSorted = original.toSorted()
+  const currentSorted = current.toSorted();
+  const originalSorted = original.toSorted();
   for (let i = 0; i < currentSorted.length; i++) {
     if (currentSorted[i] !== originalSorted[i]) {
-      return true
+      return true;
     }
   }
-  return false
+  return false;
 }
 ```
 
 This new approach is more efficient because:
+
 - It avoids the overhead of sorting and joining the arrays when lengths differ
 - It avoids consuming memory for the joined strings (especially important for large arrays)
 - It avoids mutating the original arrays
diff --git a/.github/skills/vercel-react-best-practices/rules/js-min-max-loop.md b/.github/skills/vercel-react-best-practices/rules/js-min-max-loop.md
index 4b6656e..a83a760 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-min-max-loop.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-min-max-loop.md
@@ -13,14 +13,14 @@ Finding the smallest or largest element only requires a single pass through the
 
 ```typescript
 interface Project {
-  id: string
-  name: string
-  updatedAt: number
+  id: string;
+  name: string;
+  updatedAt: number;
 }
 
 function getLatestProject(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
-  return sorted[0]
+  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
+  return sorted[0];
 }
 ```
 
@@ -30,8 +30,8 @@ Sorts the entire array just to find the maximum value.
 
 ```typescript
 function getOldestAndNewest(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
-  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
+  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt);
+  return { oldest: sorted[0], newest: sorted[sorted.length - 1] };
 }
 ```
 
@@ -41,31 +41,31 @@ Still sorts unnecessarily when only min/max are needed.
 
 ```typescript
 function getLatestProject(projects: Project[]) {
-  if (projects.length === 0) return null
-  
-  let latest = projects[0]
-  
+  if (projects.length === 0) return null;
+
+  let latest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt > latest.updatedAt) {
-      latest = projects[i]
+      latest = projects[i];
     }
   }
-  
-  return latest
+
+  return latest;
 }
 
 function getOldestAndNewest(projects: Project[]) {
-  if (projects.length === 0) return { oldest: null, newest: null }
-  
-  let oldest = projects[0]
-  let newest = projects[0]
-  
+  if (projects.length === 0) return { oldest: null, newest: null };
+
+  let oldest = projects[0];
+  let newest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
-    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
-    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
+    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i];
+    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i];
   }
-  
-  return { oldest, newest }
+
+  return { oldest, newest };
 }
 ```
 
@@ -74,9 +74,9 @@ Single pass through the array, no copying, no sorting.
 **Alternative (Math.min/Math.max for small arrays):**
 
 ```typescript
-const numbers = [5, 2, 8, 1, 9]
-const min = Math.min(...numbers)
-const max = Math.max(...numbers)
+const numbers = [5, 2, 8, 1, 9];
+const min = Math.min(...numbers);
+const max = Math.max(...numbers);
 ```
 
 This works for small arrays, but can be slower or just throw an error for very large arrays due to spread operator limitations. Maximal array length is approximately 124000 in Chrome 143 and 638000 in Safari 18; exact numbers may vary - see [the fiddle](https://jsfiddle.net/qw1jabsx/4/). Use the loop approach for reliability.
diff --git a/.github/skills/vercel-react-best-practices/rules/js-set-map-lookups.md b/.github/skills/vercel-react-best-practices/rules/js-set-map-lookups.md
index 680a489..8e4891c 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-set-map-lookups.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-set-map-lookups.md
@@ -12,13 +12,13 @@ Convert arrays to Set/Map for repeated membership checks.
 **Incorrect (O(n) per check):**
 
 ```typescript
-const allowedIds = ['a', 'b', 'c', ...]
-items.filter(item => allowedIds.includes(item.id))
+const allowedIds = ["a", "b", "c"];
+items.filter((item) => allowedIds.includes(item.id));
 ```
 
 **Correct (O(1) per check):**
 
 ```typescript
-const allowedIds = new Set(['a', 'b', 'c', ...])
-items.filter(item => allowedIds.has(item.id))
+const allowedIds = new Set(["a", "b", "c"]);
+items.filter((item) => allowedIds.has(item.id));
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md b/.github/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
index eae8b3f..1b3ce2c 100644
--- a/.github/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
+++ b/.github/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
@@ -11,27 +11,21 @@ tags: javascript, arrays, immutability, react, state, mutation
 
 **Incorrect (mutates original array):**
 
-```typescript
+```tsx
 function UserList({ users }: { users: User[] }) {
   // Mutates the users prop array!
-  const sorted = useMemo(
-    () => users.sort((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  )
-  return <div>{sorted.map(renderUser)}</div>
+  const sorted = useMemo(() => users.sort((a, b) => a.name.localeCompare(b.name)), [users]);
+  return <div>{sorted.map(renderUser)}</div>;
 }
 ```
 
 **Correct (creates new array):**
 
-```typescript
+```tsx
 function UserList({ users }: { users: User[] }) {
   // Creates new sorted array, original unchanged
-  const sorted = useMemo(
-    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  )
-  return <div>{sorted.map(renderUser)}</div>
+  const sorted = useMemo(() => users.toSorted((a, b) => a.name.localeCompare(b.name)), [users]);
+  return <div>{sorted.map(renderUser)}</div>;
 }
 ```
 
@@ -46,7 +40,7 @@ function UserList({ users }: { users: User[] }) {
 
 ```typescript
 // Fallback for older browsers
-const sorted = [...items].sort((a, b) => a.value - b.value)
+const sorted = [...items].sort((a, b) => a.value - b.value);
 ```
 
 **Other immutable array methods:**
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-activity.md b/.github/skills/vercel-react-best-practices/rules/rendering-activity.md
index c957a49..a7d84cd 100644
--- a/.github/skills/vercel-react-best-practices/rules/rendering-activity.md
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-activity.md
@@ -12,14 +12,14 @@ Use React's `<Activity>` to preserve state/DOM for expensive components that fre
 **Usage:**
 
 ```tsx
-import { Activity } from 'react'
+import { Activity } from "react";
 
 function Dropdown({ isOpen }: Props) {
   return (
-    <Activity mode={isOpen ? 'visible' : 'hidden'}>
+    <Activity mode={isOpen ? "visible" : "hidden"}>
       <ExpensiveMenu />
     </Activity>
-  )
+  );
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md b/.github/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
index 646744c..3707302 100644
--- a/.github/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
@@ -14,15 +14,10 @@ Many browsers don't have hardware acceleration for CSS3 animations on SVG elemen
 ```tsx
 function LoadingSpinner() {
   return (
-    <svg 
-      className="animate-spin"
-      width="24" 
-      height="24" 
-      viewBox="0 0 24 24"
-    >
+    <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24">
       <circle cx="12" cy="12" r="10" stroke="currentColor" />
     </svg>
-  )
+  );
 }
 ```
 
@@ -32,15 +27,11 @@ function LoadingSpinner() {
 function LoadingSpinner() {
   return (
     <div className="animate-spin">
-      <svg 
-        width="24" 
-        height="24" 
-        viewBox="0 0 24 24"
-      >
+      <svg width="24" height="24" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="10" stroke="currentColor" />
       </svg>
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-conditional-render.md b/.github/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
index 7e866f5..bbafa14 100644
--- a/.github/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
@@ -13,11 +13,7 @@ Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count && <span className="badge">{count}</span>}
-    </div>
-  )
+  return <div>{count && <span className="badge">{count}</span>}</div>;
 }
 
 // When count = 0, renders: <div>0</div>
@@ -28,11 +24,7 @@ function Badge({ count }: { count: number }) {
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count > 0 ? <span className="badge">{count}</span> : null}
-    </div>
-  )
+  return <div>{count > 0 ? <span className="badge">{count}</span> : null}</div>;
 }
 
 // When count = 0, renders: <div></div>
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-content-visibility.md b/.github/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
index aa66563..e0d284d 100644
--- a/.github/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
@@ -24,14 +24,14 @@ Apply `content-visibility: auto` to defer off-screen rendering.
 function MessageList({ messages }: { messages: Message[] }) {
   return (
     <div className="overflow-y-auto h-screen">
-      {messages.map(msg => (
+      {messages.map((msg) => (
         <div key={msg.id} className="message-item">
           <Avatar user={msg.author} />
           <div>{msg.content}</div>
         </div>
       ))}
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md b/.github/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
index 32d2f3f..55373a5 100644
--- a/.github/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
@@ -13,31 +13,21 @@ Extract static JSX outside components to avoid re-creation.
 
 ```tsx
 function LoadingSkeleton() {
-  return <div className="animate-pulse h-20 bg-gray-200" />
+  return <div className="animate-pulse h-20 bg-gray-200" />;
 }
 
 function Container() {
-  return (
-    <div>
-      {loading && <LoadingSkeleton />}
-    </div>
-  )
+  return <div>{loading && <LoadingSkeleton />}</div>;
 }
 ```
 
 **Correct (reuses same element):**
 
 ```tsx
-const loadingSkeleton = (
-  <div className="animate-pulse h-20 bg-gray-200" />
-)
+const loadingSkeleton = <div className="animate-pulse h-20 bg-gray-200" />;
 
 function Container() {
-  return (
-    <div>
-      {loading && loadingSkeleton}
-    </div>
-  )
+  return <div>{loading && loadingSkeleton}</div>;
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md b/.github/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
index 5cf0e79..971c5cc 100644
--- a/.github/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
+++ b/.github/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
@@ -14,13 +14,9 @@ When rendering content that depends on client-side storage (localStorage, cookie
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
   // localStorage is not available on server - throws error
-  const theme = localStorage.getItem('theme') || 'light'
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  const theme = localStorage.getItem("theme") || "light";
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -30,21 +26,17 @@ Server-side rendering will fail because `localStorage` is undefined.
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState('light')
-  
+  const [theme, setTheme] = useState("light");
+
   useEffect(() => {
     // Runs after hydration - causes visible flash
-    const stored = localStorage.getItem('theme')
+    const stored = localStorage.getItem("theme");
     if (stored) {
-      setTheme(stored)
+      setTheme(stored);
     }
-  }, [])
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  }, []);
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -56,9 +48,7 @@ Component first renders with default value (`light`), then updates after hydrati
 function ThemeWrapper({ children }: { children: ReactNode }) {
   return (
     <>
-      <div id="theme-wrapper">
-        {children}
-      </div>
+      <div id="theme-wrapper">{children}</div>
       <script
         dangerouslySetInnerHTML={{
           __html: `
@@ -73,7 +63,7 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
         }}
       />
     </>
-  )
+  );
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-defer-reads.md b/.github/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
index e867c95..bd49194 100644
--- a/.github/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
@@ -13,14 +13,14 @@ Don't subscribe to dynamic state (searchParams, localStorage) if you only read i
 
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
-  const searchParams = useSearchParams()
+  const searchParams = useSearchParams();
 
   const handleShare = () => {
-    const ref = searchParams.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const ref = searchParams.get("ref");
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -29,11 +29,11 @@ function ShareButton({ chatId }: { chatId: string }) {
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
   const handleShare = () => {
-    const params = new URLSearchParams(window.location.search)
-    const ref = params.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const params = new URLSearchParams(window.location.search);
+    const ref = params.get("ref");
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-dependencies.md b/.github/skills/vercel-react-best-practices/rules/rerender-dependencies.md
index 47a4d92..bd7795e 100644
--- a/.github/skills/vercel-react-best-practices/rules/rerender-dependencies.md
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-dependencies.md
@@ -13,16 +13,16 @@ Specify primitive dependencies instead of objects to minimize effect re-runs.
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user])
+  console.log(user.id);
+}, [user]);
 ```
 
 **Correct (re-runs only when id changes):**
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user.id])
+  console.log(user.id);
+}, [user.id]);
 ```
 
 **For derived state, compute outside effect:**
@@ -31,15 +31,15 @@ useEffect(() => {
 // Incorrect: runs on width=767, 766, 765...
 useEffect(() => {
   if (width < 768) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [width])
+}, [width]);
 
 // Correct: runs only on boolean transition
-const isMobile = width < 768
+const isMobile = width < 768;
 useEffect(() => {
   if (isMobile) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [isMobile])
+}, [isMobile]);
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-derived-state.md b/.github/skills/vercel-react-best-practices/rules/rerender-derived-state.md
index e5c899f..08ab84a 100644
--- a/.github/skills/vercel-react-best-practices/rules/rerender-derived-state.md
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-derived-state.md
@@ -13,9 +13,9 @@ Subscribe to derived boolean state instead of continuous values to reduce re-ren
 
 ```tsx
 function Sidebar() {
-  const width = useWindowWidth()  // updates continuously
-  const isMobile = width < 768
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const width = useWindowWidth(); // updates continuously
+  const isMobile = width < 768;
+  return <nav className={isMobile ? "mobile" : "desktop"} />;
 }
 ```
 
@@ -23,7 +23,7 @@ function Sidebar() {
 
 ```tsx
 function Sidebar() {
-  const isMobile = useMediaQuery('(max-width: 767px)')
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  return <nav className={isMobile ? "mobile" : "desktop"} />;
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md b/.github/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
index b004ef4..07dfb6c 100644
--- a/.github/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
@@ -13,19 +13,22 @@ When updating state based on the current state value, use the functional update
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Callback must depend on items, recreated on every items change
-  const addItems = useCallback((newItems: Item[]) => {
-    setItems([...items, ...newItems])
-  }, [items])  // ❌ items dependency causes recreations
-  
+  const addItems = useCallback(
+    (newItems: Item[]) => {
+      setItems([...items, ...newItems]);
+    },
+    [items]
+  ); // ❌ items dependency causes recreations
+
   // Risk of stale closure if dependency is forgotten
   const removeItem = useCallback((id: string) => {
-    setItems(items.filter(item => item.id !== id))
-  }, [])  // ❌ Missing items dependency - will use stale items!
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems(items.filter((item) => item.id !== id));
+  }, []); // ❌ Missing items dependency - will use stale items!
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -35,19 +38,19 @@ The first callback is recreated every time `items` changes, which can cause chil
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Stable callback, never recreated
   const addItems = useCallback((newItems: Item[]) => {
-    setItems(curr => [...curr, ...newItems])
-  }, [])  // ✅ No dependencies needed
-  
+    setItems((curr) => [...curr, ...newItems]);
+  }, []); // ✅ No dependencies needed
+
   // Always uses latest state, no stale closure risk
   const removeItem = useCallback((id: string) => {
-    setItems(curr => curr.filter(item => item.id !== id))
-  }, [])  // ✅ Safe and stable
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems((curr) => curr.filter((item) => item.id !== id));
+  }, []); // ✅ Safe and stable
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md b/.github/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
index 4ecb350..cd0af90 100644
--- a/.github/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
@@ -14,20 +14,18 @@ Pass a function to `useState` for expensive initial values. Without the function
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs on EVERY render, even after initialization
-  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items));
+  const [query, setQuery] = useState("");
+
   // When query changes, buildSearchIndex runs again unnecessarily
-  return <SearchResults index={searchIndex} query={query} />
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs on every render
-  const [settings, setSettings] = useState(
-    JSON.parse(localStorage.getItem('settings') || '{}')
-  )
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+  const [settings, setSettings] = useState(JSON.parse(localStorage.getItem("settings") || "{}"));
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -36,20 +34,20 @@ function UserProfile() {
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs ONLY on initial render
-  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
-  return <SearchResults index={searchIndex} query={query} />
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items));
+  const [query, setQuery] = useState("");
+
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs only on initial render
   const [settings, setSettings] = useState(() => {
-    const stored = localStorage.getItem('settings')
-    return stored ? JSON.parse(stored) : {}
-  })
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+    const stored = localStorage.getItem("settings");
+    return stored ? JSON.parse(stored) : {};
+  });
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-memo.md b/.github/skills/vercel-react-best-practices/rules/rerender-memo.md
index f8982ab..0de3aa3 100644
--- a/.github/skills/vercel-react-best-practices/rules/rerender-memo.md
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-memo.md
@@ -14,12 +14,12 @@ Extract expensive work into memoized components to enable early returns before c
 ```tsx
 function Profile({ user, loading }: Props) {
   const avatar = useMemo(() => {
-    const id = computeAvatarId(user)
-    return <Avatar id={id} />
-  }, [user])
+    const id = computeAvatarId(user);
+    return <Avatar id={id} />;
+  }, [user]);
 
-  if (loading) return <Skeleton />
-  return <div>{avatar}</div>
+  if (loading) return <Skeleton />;
+  return <div>{avatar}</div>;
 }
 ```
 
@@ -27,17 +27,17 @@ function Profile({ user, loading }: Props) {
 
 ```tsx
 const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
-  const id = useMemo(() => computeAvatarId(user), [user])
-  return <Avatar id={id} />
-})
+  const id = useMemo(() => computeAvatarId(user), [user]);
+  return <Avatar id={id} />;
+});
 
 function Profile({ user, loading }: Props) {
-  if (loading) return <Skeleton />
+  if (loading) return <Skeleton />;
   return (
     <div>
       <UserAvatar user={user} />
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/rerender-transitions.md b/.github/skills/vercel-react-best-practices/rules/rerender-transitions.md
index d99f43f..1d0bb43 100644
--- a/.github/skills/vercel-react-best-practices/rules/rerender-transitions.md
+++ b/.github/skills/vercel-react-best-practices/rules/rerender-transitions.md
@@ -13,28 +13,28 @@ Mark frequent, non-urgent state updates as transitions to maintain UI responsive
 
 ```tsx
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
-    const handler = () => setScrollY(window.scrollY)
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+    const handler = () => setScrollY(window.scrollY);
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
 }
 ```
 
 **Correct (non-blocking updates):**
 
 ```tsx
-import { startTransition } from 'react'
+import { startTransition } from "react";
 
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
     const handler = () => {
-      startTransition(() => setScrollY(window.scrollY))
-    }
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+      startTransition(() => setScrollY(window.scrollY));
+    };
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/server-after-nonblocking.md b/.github/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
index e8f5b26..50d096c 100644
--- a/.github/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
+++ b/.github/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
@@ -12,46 +12,46 @@ Use Next.js's `after()` to schedule work that should execute after a response is
 **Incorrect (blocks response):**
 
 ```tsx
-import { logUserAction } from '@/app/utils'
+import { logUserAction } from "@/app/utils";
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Logging blocks the response
-  const userAgent = request.headers.get('user-agent') || 'unknown'
-  await logUserAction({ userAgent })
-  
-  return new Response(JSON.stringify({ status: 'success' }), {
+  const userAgent = request.headers.get("user-agent") || "unknown";
+  await logUserAction({ userAgent });
+
+  return new Response(JSON.stringify({ status: "success" }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
 **Correct (non-blocking):**
 
 ```tsx
-import { after } from 'next/server'
-import { headers, cookies } from 'next/headers'
-import { logUserAction } from '@/app/utils'
+import { after } from "next/server";
+import { headers, cookies } from "next/headers";
+import { logUserAction } from "@/app/utils";
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Log after response is sent
   after(async () => {
-    const userAgent = (await headers()).get('user-agent') || 'unknown'
-    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
-    
-    logUserAction({ sessionCookie, userAgent })
-  })
-  
-  return new Response(JSON.stringify({ status: 'success' }), {
+    const userAgent = (await headers()).get("user-agent") || "unknown";
+    const sessionCookie = (await cookies()).get("session-id")?.value || "anonymous";
+
+    logUserAction({ sessionCookie, userAgent });
+  });
+
+  return new Response(JSON.stringify({ status: "success" }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
diff --git a/.github/skills/vercel-react-best-practices/rules/server-cache-lru.md b/.github/skills/vercel-react-best-practices/rules/server-cache-lru.md
index ef6938a..8846308 100644
--- a/.github/skills/vercel-react-best-practices/rules/server-cache-lru.md
+++ b/.github/skills/vercel-react-best-practices/rules/server-cache-lru.md
@@ -12,20 +12,20 @@ tags: server, cache, lru, cross-request
 **Implementation:**
 
 ```typescript
-import { LRUCache } from 'lru-cache'
+import { LRUCache } from "lru-cache";
 
 const cache = new LRUCache<string, any>({
   max: 1000,
-  ttl: 5 * 60 * 1000  // 5 minutes
-})
+  ttl: 5 * 60 * 1000, // 5 minutes
+});
 
 export async function getUser(id: string) {
-  const cached = cache.get(id)
-  if (cached) return cached
+  const cached = cache.get(id);
+  if (cached) return cached;
 
-  const user = await db.user.findUnique({ where: { id } })
-  cache.set(id, user)
-  return user
+  const user = await db.user.findUnique({ where: { id } });
+  cache.set(id, user);
+  return user;
 }
 
 // Request 1: DB query, result cached
diff --git a/.github/skills/vercel-react-best-practices/rules/server-cache-react.md b/.github/skills/vercel-react-best-practices/rules/server-cache-react.md
index 87c9ca3..0643ef7 100644
--- a/.github/skills/vercel-react-best-practices/rules/server-cache-react.md
+++ b/.github/skills/vercel-react-best-practices/rules/server-cache-react.md
@@ -12,15 +12,15 @@ Use `React.cache()` for server-side request deduplication. Authentication and da
 **Usage:**
 
 ```typescript
-import { cache } from 'react'
+import { cache } from "react";
 
 export const getCurrentUser = cache(async () => {
-  const session = await auth()
-  if (!session?.user?.id) return null
+  const session = await auth();
+  if (!session?.user?.id) return null;
   return await db.user.findUnique({
-    where: { id: session.user.id }
-  })
-})
+    where: { id: session.user.id },
+  });
+});
 ```
 
 Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
@@ -33,32 +33,32 @@ Within a single request, multiple calls to `getCurrentUser()` execute the query
 
 ```typescript
 const getUser = cache(async (params: { uid: number }) => {
-  return await db.user.findUnique({ where: { id: params.uid } })
-})
+  return await db.user.findUnique({ where: { id: params.uid } });
+});
 
 // Each call creates new object, never hits cache
-getUser({ uid: 1 })
-getUser({ uid: 1 })  // Cache miss, runs query again
+getUser({ uid: 1 });
+getUser({ uid: 1 }); // Cache miss, runs query again
 ```
 
 **Correct (cache hit):**
 
 ```typescript
 const getUser = cache(async (uid: number) => {
-  return await db.user.findUnique({ where: { id: uid } })
-})
+  return await db.user.findUnique({ where: { id: uid } });
+});
 
 // Primitive args use value equality
-getUser(1)
-getUser(1)  // Cache hit, returns cached result
+getUser(1);
+getUser(1); // Cache hit, returns cached result
 ```
 
 If you must pass objects, pass the same reference:
 
 ```typescript
-const params = { uid: 1 }
-getUser(params)  // Query runs
-getUser(params)  // Cache hit (same reference)
+const params = { uid: 1 };
+getUser(params); // Query runs
+getUser(params); // Cache hit (same reference)
 ```
 
 **Next.js-Specific Note:**
diff --git a/.github/skills/vercel-react-best-practices/rules/server-parallel-fetching.md b/.github/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
index 1affc83..8d78b54 100644
--- a/.github/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
+++ b/.github/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
@@ -13,18 +13,18 @@ React Server Components execute sequentially within a tree. Restructure with com
 
 ```tsx
 export default async function Page() {
-  const header = await fetchHeader()
+  const header = await fetchHeader();
   return (
     <div>
       <div>{header}</div>
       <Sidebar />
     </div>
-  )
+  );
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 ```
 
@@ -32,13 +32,13 @@ async function Sidebar() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 export default function Page() {
@@ -47,7 +47,7 @@ export default function Page() {
       <Header />
       <Sidebar />
     </div>
-  )
+  );
 }
 ```
 
@@ -55,13 +55,13 @@ export default function Page() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 function Layout({ children }: { children: ReactNode }) {
@@ -70,7 +70,7 @@ function Layout({ children }: { children: ReactNode }) {
       <Header />
       {children}
     </div>
-  )
+  );
 }
 
 export default function Page() {
@@ -78,6 +78,6 @@ export default function Page() {
     <Layout>
       <Sidebar />
     </Layout>
-  )
+  );
 }
 ```
diff --git a/.github/skills/vercel-react-best-practices/rules/server-serialization.md b/.github/skills/vercel-react-best-practices/rules/server-serialization.md
index 39c5c41..3fe0715 100644
--- a/.github/skills/vercel-react-best-practices/rules/server-serialization.md
+++ b/.github/skills/vercel-react-best-practices/rules/server-serialization.md
@@ -13,13 +13,13 @@ The React Server/Client boundary serializes all object properties into strings a
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()  // 50 fields
-  return <Profile user={user} />
+  const user = await fetchUser(); // 50 fields
+  return <Profile user={user} />;
 }
 
-'use client'
+("use client");
 function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>  // uses 1 field
+  return <div>{user.name}</div>; // uses 1 field
 }
 ```
 
@@ -27,12 +27,12 @@ function Profile({ user }: { user: User }) {
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()
-  return <Profile name={user.name} />
+  const user = await fetchUser();
+  return <Profile name={user.name} />;
 }
 
-'use client'
+("use client");
 function Profile({ name }: { name: string }) {
-  return <div>{name}</div>
+  return <div>{name}</div>;
 }
 ```
diff --git a/.github/skills/web-design-guidelines/SKILL.md b/.github/skills/web-design-guidelines/SKILL.md
index ceae92a..371146a 100644
--- a/.github/skills/web-design-guidelines/SKILL.md
+++ b/.github/skills/web-design-guidelines/SKILL.md
@@ -31,6 +31,7 @@ Use WebFetch to retrieve the latest rules. The fetched content contains all the
 ## Usage
 
 When a user provides a file or pattern argument:
+
 1. Fetch guidelines from the source URL above
 2. Read the specified files
 3. Apply all rules from the fetched guidelines
diff --git a/.opencode/skills/vercel-react-best-practices/AGENTS.md b/.opencode/skills/vercel-react-best-practices/AGENTS.md
index f9b9e99..07b11fe 100644
--- a/.opencode/skills/vercel-react-best-practices/AGENTS.md
+++ b/.opencode/skills/vercel-react-best-practices/AGENTS.md
@@ -94,15 +94,15 @@ Move `await` operations into the branches where they're actually used to avoid b
 
 ```typescript
 async function handleRequest(userId: string, skipProcessing: boolean) {
-  const userData = await fetchUserData(userId)
-  
+  const userData = await fetchUserData(userId);
+
   if (skipProcessing) {
     // Returns immediately but still waited for userData
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Only this branch uses userData
-  return processUserData(userData)
+  return processUserData(userData);
 }
 ```
 
@@ -112,12 +112,12 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 async function handleRequest(userId: string, skipProcessing: boolean) {
   if (skipProcessing) {
     // Returns immediately without waiting
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Fetch only when needed
-  const userData = await fetchUserData(userId)
-  return processUserData(userData)
+  const userData = await fetchUserData(userId);
+  return processUserData(userData);
 }
 ```
 
@@ -126,35 +126,35 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 ```typescript
 // Incorrect: always fetches permissions
 async function updateResource(resourceId: string, userId: string) {
-  const permissions = await fetchPermissions(userId)
-  const resource = await getResource(resourceId)
-  
+  const permissions = await fetchPermissions(userId);
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: "Not found" };
   }
-  
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: "Forbidden" };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 
 // Correct: fetches only when needed
 async function updateResource(resourceId: string, userId: string) {
-  const resource = await getResource(resourceId)
-  
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: "Not found" };
   }
-  
-  const permissions = await fetchPermissions(userId)
-  
+
+  const permissions = await fetchPermissions(userId);
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: "Forbidden" };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 ```
 
@@ -169,25 +169,26 @@ For operations with partial dependencies, use `better-all` to maximize paralleli
 **Incorrect: profile waits for config unnecessarily**
 
 ```typescript
-const [user, config] = await Promise.all([
-  fetchUser(),
-  fetchConfig()
-])
-const profile = await fetchProfile(user.id)
+const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
+const profile = await fetchProfile(user.id);
 ```
 
 **Correct: config and profile run in parallel**
 
 ```typescript
-import { all } from 'better-all'
+import { all } from "better-all";
 
 const { user, config, profile } = await all({
-  async user() { return fetchUser() },
-  async config() { return fetchConfig() },
+  async user() {
+    return fetchUser();
+  },
+  async config() {
+    return fetchConfig();
+  },
   async profile() {
-    return fetchProfile((await this.$.user).id)
-  }
-})
+    return fetchProfile((await this.$.user).id);
+  },
+});
 ```
 
 Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)
@@ -202,10 +203,10 @@ In API routes and Server Actions, start independent operations immediately, even
 
 ```typescript
 export async function GET(request: Request) {
-  const session = await auth()
-  const config = await fetchConfig()
-  const data = await fetchData(session.user.id)
-  return Response.json({ data, config })
+  const session = await auth();
+  const config = await fetchConfig();
+  const data = await fetchData(session.user.id);
+  return Response.json({ data, config });
 }
 ```
 
@@ -213,14 +214,11 @@ export async function GET(request: Request) {
 
 ```typescript
 export async function GET(request: Request) {
-  const sessionPromise = auth()
-  const configPromise = fetchConfig()
-  const session = await sessionPromise
-  const [config, data] = await Promise.all([
-    configPromise,
-    fetchData(session.user.id)
-  ])
-  return Response.json({ data, config })
+  const sessionPromise = auth();
+  const configPromise = fetchConfig();
+  const session = await sessionPromise;
+  const [config, data] = await Promise.all([configPromise, fetchData(session.user.id)]);
+  return Response.json({ data, config });
 }
 ```
 
@@ -235,19 +233,15 @@ When async operations have no interdependencies, execute them concurrently using
 **Incorrect: sequential execution, 3 round trips**
 
 ```typescript
-const user = await fetchUser()
-const posts = await fetchPosts()
-const comments = await fetchComments()
+const user = await fetchUser();
+const posts = await fetchPosts();
+const comments = await fetchComments();
 ```
 
 **Correct: parallel execution, 1 round trip**
 
 ```typescript
-const [user, posts, comments] = await Promise.all([
-  fetchUser(),
-  fetchPosts(),
-  fetchComments()
-])
+const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
 ```
 
 ### 1.5 Strategic Suspense Boundaries
@@ -260,8 +254,8 @@ Instead of awaiting data in async components before returning JSX, use Suspense
 
 ```tsx
 async function Page() {
-  const data = await fetchData() // Blocks entire page
-  
+  const data = await fetchData(); // Blocks entire page
+
   return (
     <div>
       <div>Sidebar</div>
@@ -271,7 +265,7 @@ async function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 ```
 
@@ -292,12 +286,12 @@ function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 async function DataDisplay() {
-  const data = await fetchData() // Only blocks this component
-  return <div>{data.content}</div>
+  const data = await fetchData(); // Only blocks this component
+  return <div>{data.content}</div>;
 }
 ```
 
@@ -308,8 +302,8 @@ Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
 ```tsx
 function Page() {
   // Start fetch immediately, but don't await
-  const dataPromise = fetchData()
-  
+  const dataPromise = fetchData();
+
   return (
     <div>
       <div>Sidebar</div>
@@ -320,17 +314,17 @@ function Page() {
       </Suspense>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Unwraps the promise
-  return <div>{data.content}</div>
+  const data = use(dataPromise); // Unwraps the promise
+  return <div>{data.content}</div>;
 }
 
 function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Reuses the same promise
-  return <div>{data.summary}</div>
+  const data = use(dataPromise); // Reuses the same promise
+  return <div>{data.summary}</div>;
 }
 ```
 
@@ -369,24 +363,24 @@ Popular icon and component libraries can have **up to 10,000 re-exports** in the
 **Incorrect: imports entire library**
 
 ```tsx
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from "lucide-react";
 // Loads 1,583 modules, takes ~2.8s extra in dev
 // Runtime cost: 200-800ms on every cold start
 
-import { Button, TextField } from '@mui/material'
+import { Button, TextField } from "@mui/material";
 // Loads 2,225 modules, takes ~4.2s extra in dev
 ```
 
 **Correct: imports only what you need**
 
 ```tsx
-import Check from 'lucide-react/dist/esm/icons/check'
-import X from 'lucide-react/dist/esm/icons/x'
-import Menu from 'lucide-react/dist/esm/icons/menu'
+import Check from "lucide-react/dist/esm/icons/check";
+import X from "lucide-react/dist/esm/icons/x";
+import Menu from "lucide-react/dist/esm/icons/menu";
 // Loads only 3 modules (~2KB vs ~1MB)
 
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
 // Loads only what you use
 ```
 
@@ -396,12 +390,12 @@ import TextField from '@mui/material/TextField'
 // next.config.js - use optimizePackageImports
 module.exports = {
   experimental: {
-    optimizePackageImports: ['lucide-react', '@mui/material']
-  }
-}
+    optimizePackageImports: ["lucide-react", "@mui/material"],
+  },
+};
 
 // Then you can keep the ergonomic barrel imports:
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from "lucide-react";
 // Automatically transformed to direct imports at build time
 ```
 
@@ -420,19 +414,25 @@ Load large data or modules only when a feature is activated.
 **Example: lazy-load animation frames**
 
 ```tsx
-function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
-  const [frames, setFrames] = useState<Frame[] | null>(null)
+function AnimationPlayer({
+  enabled,
+  setEnabled,
+}: {
+  enabled: boolean;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [frames, setFrames] = useState<Frame[] | null>(null);
 
   useEffect(() => {
-    if (enabled && !frames && typeof window !== 'undefined') {
-      import('./animation-frames.js')
-        .then(mod => setFrames(mod.frames))
-        .catch(() => setEnabled(false))
+    if (enabled && !frames && typeof window !== "undefined") {
+      import("./animation-frames.js")
+        .then((mod) => setFrames(mod.frames))
+        .catch(() => setEnabled(false));
     }
-  }, [enabled, frames, setEnabled])
+  }, [enabled, frames, setEnabled]);
 
-  if (!frames) return <Skeleton />
-  return <Canvas frames={frames} />
+  if (!frames) return <Skeleton />;
+  return <Canvas frames={frames} />;
 }
 ```
 
@@ -447,7 +447,7 @@ Analytics, logging, and error tracking don't block user interaction. Load them a
 **Incorrect: blocks initial bundle**
 
 ```tsx
-import { Analytics } from '@vercel/analytics/react'
+import { Analytics } from "@vercel/analytics/react";
 
 export default function RootLayout({ children }) {
   return (
@@ -457,19 +457,18 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
 **Correct: loads after hydration**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const Analytics = dynamic(
-  () => import('@vercel/analytics/react').then(m => m.Analytics),
-  { ssr: false }
-)
+const Analytics = dynamic(() => import("@vercel/analytics/react").then((m) => m.Analytics), {
+  ssr: false,
+});
 
 export default function RootLayout({ children }) {
   return (
@@ -479,7 +478,7 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
@@ -492,25 +491,24 @@ Use `next/dynamic` to lazy-load large components not needed on initial render.
 **Incorrect: Monaco bundles with main chunk ~300KB**
 
 ```tsx
-import { MonacoEditor } from './monaco-editor'
+import { MonacoEditor } from "./monaco-editor";
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
 **Correct: Monaco loads on demand**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const MonacoEditor = dynamic(
-  () => import('./monaco-editor').then(m => m.MonacoEditor),
-  { ssr: false }
-)
+const MonacoEditor = dynamic(() => import("./monaco-editor").then((m) => m.MonacoEditor), {
+  ssr: false,
+});
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
@@ -525,20 +523,16 @@ Preload heavy bundles before they're needed to reduce perceived latency.
 ```tsx
 function EditorButton({ onClick }: { onClick: () => void }) {
   const preload = () => {
-    if (typeof window !== 'undefined') {
-      void import('./monaco-editor')
+    if (typeof window !== "undefined") {
+      void import("./monaco-editor");
     }
-  }
+  };
 
   return (
-    <button
-      onMouseEnter={preload}
-      onFocus={preload}
-      onClick={onClick}
-    >
+    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
       Open Editor
     </button>
-  )
+  );
 }
 ```
 
@@ -547,14 +541,12 @@ function EditorButton({ onClick }: { onClick: () => void }) {
 ```tsx
 function FlagsProvider({ children, flags }: Props) {
   useEffect(() => {
-    if (flags.editorEnabled && typeof window !== 'undefined') {
-      void import('./monaco-editor').then(mod => mod.init())
+    if (flags.editorEnabled && typeof window !== "undefined") {
+      void import("./monaco-editor").then((mod) => mod.init());
     }
-  }, [flags.editorEnabled])
+  }, [flags.editorEnabled]);
 
-  return <FlagsContext.Provider value={flags}>
-    {children}
-  </FlagsContext.Provider>
+  return <FlagsContext.Provider value={flags}>{children}</FlagsContext.Provider>;
 }
 ```
 
@@ -577,20 +569,20 @@ Optimizing server-side rendering and data fetching eliminates server-side waterf
 **Implementation:**
 
 ```typescript
-import { LRUCache } from 'lru-cache'
+import { LRUCache } from "lru-cache";
 
 const cache = new LRUCache<string, any>({
   max: 1000,
-  ttl: 5 * 60 * 1000  // 5 minutes
-})
+  ttl: 5 * 60 * 1000, // 5 minutes
+});
 
 export async function getUser(id: string) {
-  const cached = cache.get(id)
-  if (cached) return cached
+  const cached = cache.get(id);
+  if (cached) return cached;
 
-  const user = await db.user.findUnique({ where: { id } })
-  cache.set(id, user)
-  return user
+  const user = await db.user.findUnique({ where: { id } });
+  cache.set(id, user);
+  return user;
 }
 
 // Request 1: DB query, result cached
@@ -615,13 +607,13 @@ The React Server/Client boundary serializes all object properties into strings a
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()  // 50 fields
-  return <Profile user={user} />
+  const user = await fetchUser(); // 50 fields
+  return <Profile user={user} />;
 }
 
-'use client'
+("use client");
 function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>  // uses 1 field
+  return <div>{user.name}</div>; // uses 1 field
 }
 ```
 
@@ -629,13 +621,13 @@ function Profile({ user }: { user: User }) {
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()
-  return <Profile name={user.name} />
+  const user = await fetchUser();
+  return <Profile name={user.name} />;
 }
 
-'use client'
+("use client");
 function Profile({ name }: { name: string }) {
-  return <div>{name}</div>
+  return <div>{name}</div>;
 }
 ```
 
@@ -649,18 +641,18 @@ React Server Components execute sequentially within a tree. Restructure with com
 
 ```tsx
 export default async function Page() {
-  const header = await fetchHeader()
+  const header = await fetchHeader();
   return (
     <div>
       <div>{header}</div>
       <Sidebar />
     </div>
-  )
+  );
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 ```
 
@@ -668,13 +660,13 @@ async function Sidebar() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 export default function Page() {
@@ -683,7 +675,7 @@ export default function Page() {
       <Header />
       <Sidebar />
     </div>
-  )
+  );
 }
 ```
 
@@ -691,13 +683,13 @@ export default function Page() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 function Layout({ children }: { children: ReactNode }) {
@@ -706,7 +698,7 @@ function Layout({ children }: { children: ReactNode }) {
       <Header />
       {children}
     </div>
-  )
+  );
 }
 
 export default function Page() {
@@ -714,7 +706,7 @@ export default function Page() {
     <Layout>
       <Sidebar />
     </Layout>
-  )
+  );
 }
 ```
 
@@ -727,15 +719,15 @@ Use `React.cache()` for server-side request deduplication. Authentication and da
 **Usage:**
 
 ```typescript
-import { cache } from 'react'
+import { cache } from "react";
 
 export const getCurrentUser = cache(async () => {
-  const session = await auth()
-  if (!session?.user?.id) return null
+  const session = await auth();
+  if (!session?.user?.id) return null;
   return await db.user.findUnique({
-    where: { id: session.user.id }
-  })
-})
+    where: { id: session.user.id },
+  });
+});
 ```
 
 Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
@@ -748,20 +740,20 @@ Within a single request, multiple calls to `getCurrentUser()` execute the query
 
 ```typescript
 const getUser = cache(async (params: { uid: number }) => {
-  return await db.user.findUnique({ where: { id: params.uid } })
-})
+  return await db.user.findUnique({ where: { id: params.uid } });
+});
 
 // Each call creates new object, never hits cache
-getUser({ uid: 1 })
-getUser({ uid: 1 })  // Cache miss, runs query again
+getUser({ uid: 1 });
+getUser({ uid: 1 }); // Cache miss, runs query again
 ```
 
 **Correct: cache hit**
 
 ```typescript
-const params = { uid: 1 }
-getUser(params)  // Query runs
-getUser(params)  // Cache hit (same reference)
+const params = { uid: 1 };
+getUser(params); // Query runs
+getUser(params); // Cache hit (same reference)
 ```
 
 If you must pass objects, pass the same reference:
@@ -793,46 +785,46 @@ Use Next.js's `after()` to schedule work that should execute after a response is
 **Incorrect: blocks response**
 
 ```tsx
-import { logUserAction } from '@/app/utils'
+import { logUserAction } from "@/app/utils";
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Logging blocks the response
-  const userAgent = request.headers.get('user-agent') || 'unknown'
-  await logUserAction({ userAgent })
-  
-  return new Response(JSON.stringify({ status: 'success' }), {
+  const userAgent = request.headers.get("user-agent") || "unknown";
+  await logUserAction({ userAgent });
+
+  return new Response(JSON.stringify({ status: "success" }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
 **Correct: non-blocking**
 
 ```tsx
-import { after } from 'next/server'
-import { headers, cookies } from 'next/headers'
-import { logUserAction } from '@/app/utils'
+import { after } from "next/server";
+import { headers, cookies } from "next/headers";
+import { logUserAction } from "@/app/utils";
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Log after response is sent
   after(async () => {
-    const userAgent = (await headers()).get('user-agent') || 'unknown'
-    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
-    
-    logUserAction({ sessionCookie, userAgent })
-  })
-  
-  return new Response(JSON.stringify({ status: 'success' }), {
+    const userAgent = (await headers()).get("user-agent") || "unknown";
+    const sessionCookie = (await cookies()).get("session-id")?.value || "anonymous";
+
+    logUserAction({ sessionCookie, userAgent });
+  });
+
+  return new Response(JSON.stringify({ status: "success" }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
@@ -879,12 +871,12 @@ function useKeyboardShortcut(key: string, callback: () => void) {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === key) {
-        callback()
+        callback();
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [key, callback])
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [key, callback]);
 }
 ```
 
@@ -893,45 +885,49 @@ When using the `useKeyboardShortcut` hook multiple times, each instance will reg
 **Correct: N instances = 1 listener**
 
 ```tsx
-import useSWRSubscription from 'swr/subscription'
+import useSWRSubscription from "swr/subscription";
 
 // Module-level Map to track callbacks per key
-const keyCallbacks = new Map<string, Set<() => void>>()
+const keyCallbacks = new Map<string, Set<() => void>>();
 
 function useKeyboardShortcut(key: string, callback: () => void) {
   // Register this callback in the Map
   useEffect(() => {
     if (!keyCallbacks.has(key)) {
-      keyCallbacks.set(key, new Set())
+      keyCallbacks.set(key, new Set());
     }
-    keyCallbacks.get(key)!.add(callback)
+    keyCallbacks.get(key)!.add(callback);
 
     return () => {
-      const set = keyCallbacks.get(key)
+      const set = keyCallbacks.get(key);
       if (set) {
-        set.delete(callback)
+        set.delete(callback);
         if (set.size === 0) {
-          keyCallbacks.delete(key)
+          keyCallbacks.delete(key);
         }
       }
-    }
-  }, [key, callback])
+    };
+  }, [key, callback]);
 
-  useSWRSubscription('global-keydown', () => {
+  useSWRSubscription("global-keydown", () => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && keyCallbacks.has(e.key)) {
-        keyCallbacks.get(e.key)!.forEach(cb => cb())
+        keyCallbacks.get(e.key)!.forEach((cb) => cb());
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  })
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  });
 }
 
 function Profile() {
   // Multiple shortcuts will share the same listener
-  useKeyboardShortcut('p', () => { /* ... */ }) 
-  useKeyboardShortcut('k', () => { /* ... */ })
+  useKeyboardShortcut("p", () => {
+    /* ... */
+  });
+  useKeyboardShortcut("k", () => {
+    /* ... */
+  });
   // ...
 }
 ```
@@ -946,34 +942,34 @@ Add `{ passive: true }` to touch and wheel event listeners to enable immediate s
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch)
-  document.addEventListener('wheel', handleWheel)
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener("touchstart", handleTouch);
+  document.addEventListener("wheel", handleWheel);
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener("touchstart", handleTouch);
+    document.removeEventListener("wheel", handleWheel);
+  };
+}, []);
 ```
 
 **Correct:**
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch, { passive: true })
-  document.addEventListener('wheel', handleWheel, { passive: true })
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener("touchstart", handleTouch, { passive: true });
+  document.addEventListener("wheel", handleWheel, { passive: true });
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener("touchstart", handleTouch);
+    document.removeEventListener("wheel", handleWheel);
+  };
+}, []);
 ```
 
 **Use passive when:** tracking/analytics, logging, any listener that doesn't call `preventDefault()`.
@@ -990,43 +986,43 @@ SWR enables request deduplication, caching, and revalidation across component in
 
 ```tsx
 function UserList() {
-  const [users, setUsers] = useState([])
+  const [users, setUsers] = useState([]);
   useEffect(() => {
-    fetch('/api/users')
-      .then(r => r.json())
-      .then(setUsers)
-  }, [])
+    fetch("/api/users")
+      .then((r) => r.json())
+      .then(setUsers);
+  }, []);
 }
 ```
 
 **Correct: multiple instances share one request**
 
 ```tsx
-import useSWR from 'swr'
+import useSWR from "swr";
 
 function UserList() {
-  const { data: users } = useSWR('/api/users', fetcher)
+  const { data: users } = useSWR("/api/users", fetcher);
 }
 ```
 
 **For immutable data:**
 
 ```tsx
-import { useImmutableSWR } from '@/lib/swr'
+import { useImmutableSWR } from "@/lib/swr";
 
 function StaticContent() {
-  const { data } = useImmutableSWR('/api/config', fetcher)
+  const { data } = useImmutableSWR("/api/config", fetcher);
 }
 ```
 
 **For mutations:**
 
 ```tsx
-import { useSWRMutation } from 'swr/mutation'
+import { useSWRMutation } from "swr/mutation";
 
 function UpdateButton() {
-  const { trigger } = useSWRMutation('/api/user', updateUser)
-  return <button onClick={() => trigger()}>Update</button>
+  const { trigger } = useSWRMutation("/api/user", updateUser);
+  return <button onClick={() => trigger()}>Update</button>;
 }
 ```
 
@@ -1042,18 +1038,18 @@ Add version prefix to keys and store only needed fields. Prevents schema conflic
 
 ```typescript
 // No version, stores everything, no error handling
-localStorage.setItem('userConfig', JSON.stringify(fullUserObject))
-const data = localStorage.getItem('userConfig')
+localStorage.setItem("userConfig", JSON.stringify(fullUserObject));
+const data = localStorage.getItem("userConfig");
 ```
 
 **Correct:**
 
 ```typescript
-const VERSION = 'v2'
+const VERSION = "v2";
 
 function saveConfig(config: { theme: string; language: string }) {
   try {
-    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config))
+    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config));
   } catch {
     // Throws in incognito/private browsing, quota exceeded, or disabled
   }
@@ -1061,21 +1057,21 @@ function saveConfig(config: { theme: string; language: string }) {
 
 function loadConfig() {
   try {
-    const data = localStorage.getItem(`userConfig:${VERSION}`)
-    return data ? JSON.parse(data) : null
+    const data = localStorage.getItem(`userConfig:${VERSION}`);
+    return data ? JSON.parse(data) : null;
   } catch {
-    return null
+    return null;
   }
 }
 
 // Migration from v1 to v2
 function migrate() {
   try {
-    const v1 = localStorage.getItem('userConfig:v1')
+    const v1 = localStorage.getItem("userConfig:v1");
     if (v1) {
-      const old = JSON.parse(v1)
-      saveConfig({ theme: old.darkMode ? 'dark' : 'light', language: old.lang })
-      localStorage.removeItem('userConfig:v1')
+      const old = JSON.parse(v1);
+      saveConfig({ theme: old.darkMode ? "dark" : "light", language: old.lang });
+      localStorage.removeItem("userConfig:v1");
     }
   } catch {}
 }
@@ -1087,10 +1083,13 @@ function migrate() {
 // User object has 20+ fields, only store what UI needs
 function cachePrefs(user: FullUser) {
   try {
-    localStorage.setItem('prefs:v1', JSON.stringify({
-      theme: user.preferences.theme,
-      notifications: user.preferences.notifications
-    }))
+    localStorage.setItem(
+      "prefs:v1",
+      JSON.stringify({
+        theme: user.preferences.theme,
+        notifications: user.preferences.notifications,
+      })
+    );
   } catch {}
 }
 ```
@@ -1117,14 +1116,14 @@ Don't subscribe to dynamic state (searchParams, localStorage) if you only read i
 
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
-  const searchParams = useSearchParams()
+  const searchParams = useSearchParams();
 
   const handleShare = () => {
-    const ref = searchParams.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const ref = searchParams.get("ref");
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -1133,12 +1132,12 @@ function ShareButton({ chatId }: { chatId: string }) {
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
   const handleShare = () => {
-    const params = new URLSearchParams(window.location.search)
-    const ref = params.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const params = new URLSearchParams(window.location.search);
+    const ref = params.get("ref");
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -1153,12 +1152,12 @@ Extract expensive work into memoized components to enable early returns before c
 ```tsx
 function Profile({ user, loading }: Props) {
   const avatar = useMemo(() => {
-    const id = computeAvatarId(user)
-    return <Avatar id={id} />
-  }, [user])
+    const id = computeAvatarId(user);
+    return <Avatar id={id} />;
+  }, [user]);
 
-  if (loading) return <Skeleton />
-  return <div>{avatar}</div>
+  if (loading) return <Skeleton />;
+  return <div>{avatar}</div>;
 }
 ```
 
@@ -1166,17 +1165,17 @@ function Profile({ user, loading }: Props) {
 
 ```tsx
 const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
-  const id = useMemo(() => computeAvatarId(user), [user])
-  return <Avatar id={id} />
-})
+  const id = useMemo(() => computeAvatarId(user), [user]);
+  return <Avatar id={id} />;
+});
 
 function Profile({ user, loading }: Props) {
-  if (loading) return <Skeleton />
+  if (loading) return <Skeleton />;
   return (
     <div>
       <UserAvatar user={user} />
     </div>
-  )
+  );
 }
 ```
 
@@ -1192,16 +1191,16 @@ Specify primitive dependencies instead of objects to minimize effect re-runs.
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user])
+  console.log(user.id);
+}, [user]);
 ```
 
 **Correct: re-runs only when id changes**
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user.id])
+  console.log(user.id);
+}, [user.id]);
 ```
 
 **For derived state, compute outside effect:**
@@ -1210,17 +1209,17 @@ useEffect(() => {
 // Incorrect: runs on width=767, 766, 765...
 useEffect(() => {
   if (width < 768) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [width])
+}, [width]);
 
 // Correct: runs only on boolean transition
-const isMobile = width < 768
+const isMobile = width < 768;
 useEffect(() => {
   if (isMobile) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [isMobile])
+}, [isMobile]);
 ```
 
 ### 5.4 Subscribe to Derived State
@@ -1233,9 +1232,9 @@ Subscribe to derived boolean state instead of continuous values to reduce re-ren
 
 ```tsx
 function Sidebar() {
-  const width = useWindowWidth()  // updates continuously
-  const isMobile = width < 768
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const width = useWindowWidth(); // updates continuously
+  const isMobile = width < 768;
+  return <nav className={isMobile ? "mobile" : "desktop"} />;
 }
 ```
 
@@ -1243,8 +1242,8 @@ function Sidebar() {
 
 ```tsx
 function Sidebar() {
-  const isMobile = useMediaQuery('(max-width: 767px)')
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  return <nav className={isMobile ? "mobile" : "desktop"} />;
 }
 ```
 
@@ -1258,19 +1257,22 @@ When updating state based on the current state value, use the functional update
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Callback must depend on items, recreated on every items change
-  const addItems = useCallback((newItems: Item[]) => {
-    setItems([...items, ...newItems])
-  }, [items])  // ❌ items dependency causes recreations
-  
+  const addItems = useCallback(
+    (newItems: Item[]) => {
+      setItems([...items, ...newItems]);
+    },
+    [items]
+  ); // ❌ items dependency causes recreations
+
   // Risk of stale closure if dependency is forgotten
   const removeItem = useCallback((id: string) => {
-    setItems(items.filter(item => item.id !== id))
-  }, [])  // ❌ Missing items dependency - will use stale items!
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems(items.filter((item) => item.id !== id));
+  }, []); // ❌ Missing items dependency - will use stale items!
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -1280,19 +1282,19 @@ The first callback is recreated every time `items` changes, which can cause chil
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Stable callback, never recreated
   const addItems = useCallback((newItems: Item[]) => {
-    setItems(curr => [...curr, ...newItems])
-  }, [])  // ✅ No dependencies needed
-  
+    setItems((curr) => [...curr, ...newItems]);
+  }, []); // ✅ No dependencies needed
+
   // Always uses latest state, no stale closure risk
   const removeItem = useCallback((id: string) => {
-    setItems(curr => curr.filter(item => item.id !== id))
-  }, [])  // ✅ Safe and stable
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems((curr) => curr.filter((item) => item.id !== id));
+  }, []); // ✅ Safe and stable
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -1337,20 +1339,18 @@ Pass a function to `useState` for expensive initial values. Without the function
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs on EVERY render, even after initialization
-  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items));
+  const [query, setQuery] = useState("");
+
   // When query changes, buildSearchIndex runs again unnecessarily
-  return <SearchResults index={searchIndex} query={query} />
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs on every render
-  const [settings, setSettings] = useState(
-    JSON.parse(localStorage.getItem('settings') || '{}')
-  )
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+  const [settings, setSettings] = useState(JSON.parse(localStorage.getItem("settings") || "{}"));
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -1359,20 +1359,20 @@ function UserProfile() {
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs ONLY on initial render
-  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
-  return <SearchResults index={searchIndex} query={query} />
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items));
+  const [query, setQuery] = useState("");
+
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs only on initial render
   const [settings, setSettings] = useState(() => {
-    const stored = localStorage.getItem('settings')
-    return stored ? JSON.parse(stored) : {}
-  })
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+    const stored = localStorage.getItem("settings");
+    return stored ? JSON.parse(stored) : {};
+  });
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -1390,29 +1390,29 @@ Mark frequent, non-urgent state updates as transitions to maintain UI responsive
 
 ```tsx
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
-    const handler = () => setScrollY(window.scrollY)
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+    const handler = () => setScrollY(window.scrollY);
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
 }
 ```
 
 **Correct: non-blocking updates**
 
 ```tsx
-import { startTransition } from 'react'
+import { startTransition } from "react";
 
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
     const handler = () => {
-      startTransition(() => setScrollY(window.scrollY))
-    }
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+      startTransition(() => setScrollY(window.scrollY));
+    };
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
 }
 ```
 
@@ -1435,15 +1435,10 @@ Many browsers don't have hardware acceleration for CSS3 animations on SVG elemen
 ```tsx
 function LoadingSpinner() {
   return (
-    <svg 
-      className="animate-spin"
-      width="24" 
-      height="24" 
-      viewBox="0 0 24 24"
-    >
+    <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24">
       <circle cx="12" cy="12" r="10" stroke="currentColor" />
     </svg>
-  )
+  );
 }
 ```
 
@@ -1453,15 +1448,11 @@ function LoadingSpinner() {
 function LoadingSpinner() {
   return (
     <div className="animate-spin">
-      <svg 
-        width="24" 
-        height="24" 
-        viewBox="0 0 24 24"
-      >
+      <svg width="24" height="24" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="10" stroke="currentColor" />
       </svg>
     </div>
-  )
+  );
 }
 ```
 
@@ -1488,14 +1479,14 @@ Apply `content-visibility: auto` to defer off-screen rendering.
 function MessageList({ messages }: { messages: Message[] }) {
   return (
     <div className="overflow-y-auto h-screen">
-      {messages.map(msg => (
+      {messages.map((msg) => (
         <div key={msg.id} className="message-item">
           <Avatar user={msg.author} />
           <div>{msg.content}</div>
         </div>
       ))}
     </div>
-  )
+  );
 }
 ```
 
@@ -1511,31 +1502,21 @@ Extract static JSX outside components to avoid re-creation.
 
 ```tsx
 function LoadingSkeleton() {
-  return <div className="animate-pulse h-20 bg-gray-200" />
+  return <div className="animate-pulse h-20 bg-gray-200" />;
 }
 
 function Container() {
-  return (
-    <div>
-      {loading && <LoadingSkeleton />}
-    </div>
-  )
+  return <div>{loading && <LoadingSkeleton />}</div>;
 }
 ```
 
 **Correct: reuses same element**
 
 ```tsx
-const loadingSkeleton = (
-  <div className="animate-pulse h-20 bg-gray-200" />
-)
+const loadingSkeleton = <div className="animate-pulse h-20 bg-gray-200" />;
 
 function Container() {
-  return (
-    <div>
-      {loading && loadingSkeleton}
-    </div>
-  )
+  return <div>{loading && loadingSkeleton}</div>;
 }
 ```
 
@@ -1578,13 +1559,9 @@ When rendering content that depends on client-side storage (localStorage, cookie
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
   // localStorage is not available on server - throws error
-  const theme = localStorage.getItem('theme') || 'light'
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  const theme = localStorage.getItem("theme") || "light";
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -1594,21 +1571,17 @@ Server-side rendering will fail because `localStorage` is undefined.
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState('light')
-  
+  const [theme, setTheme] = useState("light");
+
   useEffect(() => {
     // Runs after hydration - causes visible flash
-    const stored = localStorage.getItem('theme')
+    const stored = localStorage.getItem("theme");
     if (stored) {
-      setTheme(stored)
+      setTheme(stored);
     }
-  }, [])
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  }, []);
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -1620,9 +1593,7 @@ Component first renders with default value (`light`), then updates after hydrati
 function ThemeWrapper({ children }: { children: ReactNode }) {
   return (
     <>
-      <div id="theme-wrapper">
-        {children}
-      </div>
+      <div id="theme-wrapper">{children}</div>
       <script
         dangerouslySetInnerHTML={{
           __html: `
@@ -1637,7 +1608,7 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
         }}
       />
     </>
-  )
+  );
 }
 ```
 
@@ -1654,14 +1625,14 @@ Use React's `<Activity>` to preserve state/DOM for expensive components that fre
 **Usage:**
 
 ```tsx
-import { Activity } from 'react'
+import { Activity } from "react";
 
 function Dropdown({ isOpen }: Props) {
   return (
-    <Activity mode={isOpen ? 'visible' : 'hidden'}>
+    <Activity mode={isOpen ? "visible" : "hidden"}>
       <ExpensiveMenu />
     </Activity>
-  )
+  );
 }
 ```
 
@@ -1677,11 +1648,7 @@ Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count && <span className="badge">{count}</span>}
-    </div>
-  )
+  return <div>{count && <span className="badge">{count}</span>}</div>;
 }
 
 // When count = 0, renders: <div>0</div>
@@ -1692,11 +1659,7 @@ function Badge({ count }: { count: number }) {
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count > 0 ? <span className="badge">{count}</span> : null}
-    </div>
-  )
+  return <div>{count > 0 ? <span className="badge">{count}</span> : null}</div>;
 }
 
 // When count = 0, renders: <div></div>
@@ -1722,27 +1685,29 @@ Avoid changing styles one property at a time. Group multiple CSS changes togethe
 ```typescript
 function updateElementStyles(element: HTMLElement) {
   // Each line triggers a reflow
-  element.style.width = '100px'
-  element.style.height = '200px'
-  element.style.backgroundColor = 'blue'
-  element.style.border = '1px solid black'
+  element.style.width = "100px";
+  element.style.height = "200px";
+  element.style.backgroundColor = "blue";
+  element.style.border = "1px solid black";
 }
 ```
 
 **Correct: add class - single reflow**
 
-```typescript
-// CSS file
+```css
+/* CSS file */
 .highlighted-box {
   width: 100px;
   height: 200px;
   background-color: blue;
   border: 1px solid black;
 }
+```
 
+```typescript
 // JavaScript
 function updateElementStyles(element: HTMLElement) {
-  element.classList.add('highlighted-box')
+  element.classList.add("highlighted-box");
 }
 ```
 
@@ -1755,7 +1720,7 @@ function updateElementStyles(element: HTMLElement) {
     height: 200px;
     background-color: blue;
     border: 1px solid black;
-  `
+  `;
 }
 ```
 
@@ -1764,26 +1729,22 @@ function updateElementStyles(element: HTMLElement) {
 ```tsx
 // Incorrect: changing styles one by one
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
-  const ref = useRef<HTMLDivElement>(null)
-  
+  const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (ref.current && isHighlighted) {
-      ref.current.style.width = '100px'
-      ref.current.style.height = '200px'
-      ref.current.style.backgroundColor = 'blue'
+      ref.current.style.width = "100px";
+      ref.current.style.height = "200px";
+      ref.current.style.backgroundColor = "blue";
     }
-  }, [isHighlighted])
-  
-  return <div ref={ref}>Content</div>
+  }, [isHighlighted]);
+
+  return <div ref={ref}>Content</div>;
 }
 
 // Correct: toggle class
 function Box({ isHighlighted }: { isHighlighted: boolean }) {
-  return (
-    <div className={isHighlighted ? 'highlighted-box' : ''}>
-      Content
-    </div>
-  )
+  return <div className={isHighlighted ? "highlighted-box" : ""}>Content</div>;
 }
 ```
 
@@ -1799,10 +1760,10 @@ Multiple `.find()` calls by the same key should use a Map.
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: users.find(u => u.id === order.userId)
-  }))
+    user: users.find((u) => u.id === order.userId),
+  }));
 }
 ```
 
@@ -1810,12 +1771,12 @@ function processOrders(orders: Order[], users: User[]) {
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  const userById = new Map(users.map(u => [u.id, u]))
+  const userById = new Map(users.map((u) => [u.id, u]));
 
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: userById.get(order.userId)
-  }))
+    user: userById.get(order.userId),
+  }));
 }
 ```
 
@@ -1833,17 +1794,17 @@ Cache object property lookups in hot paths.
 
 ```typescript
 for (let i = 0; i < arr.length; i++) {
-  process(obj.config.settings.value)
+  process(obj.config.settings.value);
 }
 ```
 
 **Correct: 1 lookup total**
 
 ```typescript
-const value = obj.config.settings.value
-const len = arr.length
+const value = obj.config.settings.value;
+const len = arr.length;
 for (let i = 0; i < len; i++) {
-  process(value)
+  process(value);
 }
 ```
 
@@ -1855,67 +1816,67 @@ Use a module-level Map to cache function results when the same function is calle
 
 **Incorrect: redundant computation**
 
-```typescript
+```tsx
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
-      {projects.map(project => {
+      {projects.map((project) => {
         // slugify() called 100+ times for same project names
-        const slug = slugify(project.name)
-        
-        return <ProjectCard key={project.id} slug={slug} />
+        const slug = slugify(project.name);
+
+        return <ProjectCard key={project.id} slug={slug} />;
       })}
     </div>
-  )
+  );
 }
 ```
 
 **Correct: cached results**
 
-```typescript
+```tsx
 // Module-level cache
-const slugifyCache = new Map<string, string>()
+const slugifyCache = new Map<string, string>();
 
 function cachedSlugify(text: string): string {
   if (slugifyCache.has(text)) {
-    return slugifyCache.get(text)!
+    return slugifyCache.get(text)!;
   }
-  const result = slugify(text)
-  slugifyCache.set(text, result)
-  return result
+  const result = slugify(text);
+  slugifyCache.set(text, result);
+  return result;
 }
 
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
-      {projects.map(project => {
+      {projects.map((project) => {
         // Computed only once per unique project name
-        const slug = cachedSlugify(project.name)
-        
-        return <ProjectCard key={project.id} slug={slug} />
+        const slug = cachedSlugify(project.name);
+
+        return <ProjectCard key={project.id} slug={slug} />;
       })}
     </div>
-  )
+  );
 }
 ```
 
 **Simpler pattern for single-value functions:**
 
 ```typescript
-let isLoggedInCache: boolean | null = null
+let isLoggedInCache: boolean | null = null;
 
 function isLoggedIn(): boolean {
   if (isLoggedInCache !== null) {
-    return isLoggedInCache
+    return isLoggedInCache;
   }
-  
-  isLoggedInCache = document.cookie.includes('auth=')
-  return isLoggedInCache
+
+  isLoggedInCache = document.cookie.includes("auth=");
+  return isLoggedInCache;
 }
 
 // Clear cache when auth changes
 function onAuthChange() {
-  isLoggedInCache = null
+  isLoggedInCache = null;
 }
 ```
 
@@ -1933,7 +1894,7 @@ Reference: [https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fa
 
 ```typescript
 function getTheme() {
-  return localStorage.getItem('theme') ?? 'light'
+  return localStorage.getItem("theme") ?? "light";
 }
 // Called 10 times = 10 storage reads
 ```
@@ -1941,18 +1902,18 @@ function getTheme() {
 **Correct: Map cache**
 
 ```typescript
-const storageCache = new Map<string, string | null>()
+const storageCache = new Map<string, string | null>();
 
 function getLocalStorage(key: string) {
   if (!storageCache.has(key)) {
-    storageCache.set(key, localStorage.getItem(key))
+    storageCache.set(key, localStorage.getItem(key));
   }
-  return storageCache.get(key)
+  return storageCache.get(key);
 }
 
 function setLocalStorage(key: string, value: string) {
-  localStorage.setItem(key, value)
-  storageCache.set(key, value)  // keep cache in sync
+  localStorage.setItem(key, value);
+  storageCache.set(key, value); // keep cache in sync
 }
 ```
 
@@ -1961,30 +1922,28 @@ Use a Map (not a hook) so it works everywhere: utilities, event handlers, not ju
 **Cookie caching:**
 
 ```typescript
-let cookieCache: Record<string, string> | null = null
+let cookieCache: Record<string, string> | null = null;
 
 function getCookie(name: string) {
   if (!cookieCache) {
-    cookieCache = Object.fromEntries(
-      document.cookie.split('; ').map(c => c.split('='))
-    )
+    cookieCache = Object.fromEntries(document.cookie.split("; ").map((c) => c.split("=")));
   }
-  return cookieCache[name]
+  return cookieCache[name];
 }
 ```
 
 **Important: invalidate on external changes**
 
 ```typescript
-window.addEventListener('storage', (e) => {
-  if (e.key) storageCache.delete(e.key)
-})
+window.addEventListener("storage", (e) => {
+  if (e.key) storageCache.delete(e.key);
+});
 
-document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState === 'visible') {
-    storageCache.clear()
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible") {
+    storageCache.clear();
   }
-})
+});
 ```
 
 If storage can change externally (another tab, server-set cookies), invalidate cache:
@@ -1998,22 +1957,22 @@ Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine
 **Incorrect: 3 iterations**
 
 ```typescript
-const admins = users.filter(u => u.isAdmin)
-const testers = users.filter(u => u.isTester)
-const inactive = users.filter(u => !u.isActive)
+const admins = users.filter((u) => u.isAdmin);
+const testers = users.filter((u) => u.isTester);
+const inactive = users.filter((u) => !u.isActive);
 ```
 
 **Correct: 1 iteration**
 
 ```typescript
-const admins: User[] = []
-const testers: User[] = []
-const inactive: User[] = []
+const admins: User[] = [];
+const testers: User[] = [];
+const inactive: User[] = [];
 
 for (const user of users) {
-  if (user.isAdmin) admins.push(user)
-  if (user.isTester) testers.push(user)
-  if (!user.isActive) inactive.push(user)
+  if (user.isAdmin) admins.push(user);
+  if (user.isTester) testers.push(user);
+  if (!user.isActive) inactive.push(user);
 }
 ```
 
@@ -2030,7 +1989,7 @@ In real-world applications, this optimization is especially valuable when the co
 ```typescript
 function hasChanges(current: string[], original: string[]) {
   // Always sorts and joins, even when lengths differ
-  return current.sort().join() !== original.sort().join()
+  return current.sort().join() !== original.sort().join();
 }
 ```
 
@@ -2042,17 +2001,17 @@ Two O(n log n) sorts run even when `current.length` is 5 and `original.length` i
 function hasChanges(current: string[], original: string[]) {
   // Early return if lengths differ
   if (current.length !== original.length) {
-    return true
+    return true;
   }
   // Only sort/join when lengths match
-  const currentSorted = current.toSorted()
-  const originalSorted = original.toSorted()
+  const currentSorted = current.toSorted();
+  const originalSorted = original.toSorted();
   for (let i = 0; i < currentSorted.length; i++) {
     if (currentSorted[i] !== originalSorted[i]) {
-      return true
+      return true;
     }
   }
-  return false
+  return false;
 }
 ```
 
@@ -2076,22 +2035,22 @@ Return early when result is determined to skip unnecessary processing.
 
 ```typescript
 function validateUsers(users: User[]) {
-  let hasError = false
-  let errorMessage = ''
-  
+  let hasError = false;
+  let errorMessage = "";
+
   for (const user of users) {
     if (!user.email) {
-      hasError = true
-      errorMessage = 'Email required'
+      hasError = true;
+      errorMessage = "Email required";
     }
     if (!user.name) {
-      hasError = true
-      errorMessage = 'Name required'
+      hasError = true;
+      errorMessage = "Name required";
     }
     // Continues checking all users even after error found
   }
-  
-  return hasError ? { valid: false, error: errorMessage } : { valid: true }
+
+  return hasError ? { valid: false, error: errorMessage } : { valid: true };
 }
 ```
 
@@ -2101,14 +2060,14 @@ function validateUsers(users: User[]) {
 function validateUsers(users: User[]) {
   for (const user of users) {
     if (!user.email) {
-      return { valid: false, error: 'Email required' }
+      return { valid: false, error: "Email required" };
     }
     if (!user.name) {
-      return { valid: false, error: 'Name required' }
+      return { valid: false, error: "Name required" };
     }
   }
 
-  return { valid: true }
+  return { valid: true };
 }
 ```
 
@@ -2122,33 +2081,30 @@ Don't create RegExp inside render. Hoist to module scope or memoize with `useMem
 
 ```tsx
 function Highlighter({ text, query }: Props) {
-  const regex = new RegExp(`(${query})`, 'gi')
-  const parts = text.split(regex)
-  return <>{parts.map((part, i) => ...)}</>
+  const regex = new RegExp(`(${query})`, "gi");
+  const parts = text.split(regex);
+  return <>{parts.map((part, i) => part)}</>;
 }
 ```
 
 **Correct: memoize or hoist**
 
 ```tsx
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 function Highlighter({ text, query }: Props) {
-  const regex = useMemo(
-    () => new RegExp(`(${escapeRegex(query)})`, 'gi'),
-    [query]
-  )
-  const parts = text.split(regex)
-  return <>{parts.map((part, i) => ...)}</>
+  const regex = useMemo(() => new RegExp(`(${escapeRegex(query)})`, "gi"), [query]);
+  const parts = text.split(regex);
+  return <>{parts.map((part, i) => part)}</>;
 }
 ```
 
 **Warning: global regex has mutable state**
 
 ```typescript
-const regex = /foo/g
-regex.test('foo')  // true, lastIndex = 3
-regex.test('foo')  // false, lastIndex = 0
+const regex = /foo/g;
+regex.test("foo"); // true, lastIndex = 3
+regex.test("foo"); // false, lastIndex = 0
 ```
 
 Global regex (`/g`) has mutable `lastIndex` state:
@@ -2163,14 +2119,14 @@ Finding the smallest or largest element only requires a single pass through the
 
 ```typescript
 interface Project {
-  id: string
-  name: string
-  updatedAt: number
+  id: string;
+  name: string;
+  updatedAt: number;
 }
 
 function getLatestProject(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
-  return sorted[0]
+  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
+  return sorted[0];
 }
 ```
 
@@ -2180,8 +2136,8 @@ Sorts the entire array just to find the maximum value.
 
 ```typescript
 function getOldestAndNewest(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
-  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
+  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt);
+  return { oldest: sorted[0], newest: sorted[sorted.length - 1] };
 }
 ```
 
@@ -2191,31 +2147,31 @@ Still sorts unnecessarily when only min/max are needed.
 
 ```typescript
 function getLatestProject(projects: Project[]) {
-  if (projects.length === 0) return null
-  
-  let latest = projects[0]
-  
+  if (projects.length === 0) return null;
+
+  let latest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt > latest.updatedAt) {
-      latest = projects[i]
+      latest = projects[i];
     }
   }
-  
-  return latest
+
+  return latest;
 }
 
 function getOldestAndNewest(projects: Project[]) {
-  if (projects.length === 0) return { oldest: null, newest: null }
-  
-  let oldest = projects[0]
-  let newest = projects[0]
-  
+  if (projects.length === 0) return { oldest: null, newest: null };
+
+  let oldest = projects[0];
+  let newest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
-    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
-    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
+    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i];
+    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i];
   }
-  
-  return { oldest, newest }
+
+  return { oldest, newest };
 }
 ```
 
@@ -2224,9 +2180,9 @@ Single pass through the array, no copying, no sorting.
 **Alternative: Math.min/Math.max for small arrays**
 
 ```typescript
-const numbers = [5, 2, 8, 1, 9]
-const min = Math.min(...numbers)
-const max = Math.max(...numbers)
+const numbers = [5, 2, 8, 1, 9];
+const min = Math.min(...numbers);
+const max = Math.max(...numbers);
 ```
 
 This works for small arrays but can be slower for very large arrays due to spread operator limitations. Use the loop approach for reliability.
@@ -2240,15 +2196,15 @@ Convert arrays to Set/Map for repeated membership checks.
 **Incorrect (O(n) per check):**
 
 ```typescript
-const allowedIds = ['a', 'b', 'c', ...]
-items.filter(item => allowedIds.includes(item.id))
+const allowedIds = ["a", "b", "c"];
+items.filter((item) => allowedIds.includes(item.id));
 ```
 
 **Correct (O(1) per check):**
 
 ```typescript
-const allowedIds = new Set(['a', 'b', 'c', ...])
-items.filter(item => allowedIds.has(item.id))
+const allowedIds = new Set(["a", "b", "c"]);
+items.filter((item) => allowedIds.has(item.id));
 ```
 
 ### 7.12 Use toSorted() Instead of sort() for Immutability
@@ -2259,27 +2215,21 @@ items.filter(item => allowedIds.has(item.id))
 
 **Incorrect: mutates original array**
 
-```typescript
+```tsx
 function UserList({ users }: { users: User[] }) {
   // Mutates the users prop array!
-  const sorted = useMemo(
-    () => users.sort((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  )
-  return <div>{sorted.map(renderUser)}</div>
+  const sorted = useMemo(() => users.sort((a, b) => a.name.localeCompare(b.name)), [users]);
+  return <div>{sorted.map(renderUser)}</div>;
 }
 ```
 
 **Correct: creates new array**
 
-```typescript
+```tsx
 function UserList({ users }: { users: User[] }) {
   // Creates new sorted array, original unchanged
-  const sorted = useMemo(
-    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  )
-  return <div>{sorted.map(renderUser)}</div>
+  const sorted = useMemo(() => users.toSorted((a, b) => a.name.localeCompare(b.name)), [users]);
+  return <div>{sorted.map(renderUser)}</div>;
 }
 ```
 
@@ -2293,7 +2243,7 @@ function UserList({ users }: { users: User[] }) {
 
 ```typescript
 // Fallback for older browsers
-const sorted = [...items].sort((a, b) => a.value - b.value)
+const sorted = [...items].sort((a, b) => a.value - b.value);
 ```
 
 `.toSorted()` is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:
@@ -2327,24 +2277,24 @@ Store callbacks in refs when used in effects that shouldn't re-subscribe on call
 ```tsx
 function useWindowEvent(event: string, handler: () => void) {
   useEffect(() => {
-    window.addEventListener(event, handler)
-    return () => window.removeEventListener(event, handler)
-  }, [event, handler])
+    window.addEventListener(event, handler);
+    return () => window.removeEventListener(event, handler);
+  }, [event, handler]);
 }
 ```
 
 **Correct: stable subscription**
 
 ```tsx
-import { useEffectEvent } from 'react'
+import { useEffectEvent } from "react";
 
 function useWindowEvent(event: string, handler: () => void) {
-  const onEvent = useEffectEvent(handler)
+  const onEvent = useEffectEvent(handler);
 
   useEffect(() => {
-    window.addEventListener(event, onEvent)
-    return () => window.removeEventListener(event, onEvent)
-  }, [event])
+    window.addEventListener(event, onEvent);
+    return () => window.removeEventListener(event, onEvent);
+  }, [event]);
 }
 ```
 
@@ -2362,11 +2312,11 @@ Access latest values in callbacks without adding them to dependency arrays. Prev
 
 ```typescript
 function useLatest<T>(value: T) {
-  const ref = useRef(value)
+  const ref = useRef(value);
   useEffect(() => {
-    ref.current = value
-  }, [value])
-  return ref
+    ref.current = value;
+  }, [value]);
+  return ref;
 }
 ```
 
@@ -2374,12 +2324,12 @@ function useLatest<T>(value: T) {
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState("");
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearch(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query, onSearch])
+    const timeout = setTimeout(() => onSearch(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query, onSearch]);
 }
 ```
 
@@ -2387,13 +2337,13 @@ function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
-  const onSearchRef = useLatest(onSearch)
+  const [query, setQuery] = useState("");
+  const onSearchRef = useLatest(onSearch);
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearchRef.current(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query])
+    const timeout = setTimeout(() => onSearchRef.current(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query]);
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/SKILL.md b/.opencode/skills/vercel-react-best-practices/SKILL.md
index b064716..ba1ca10 100644
--- a/.opencode/skills/vercel-react-best-practices/SKILL.md
+++ b/.opencode/skills/vercel-react-best-practices/SKILL.md
@@ -14,6 +14,7 @@ Comprehensive performance optimization guide for React and Next.js applications,
 ## When to Apply
 
 Reference these guidelines when:
+
 - Writing new React components or Next.js pages
 - Implementing data fetching (client or server-side)
 - Reviewing code for performance issues
@@ -22,16 +23,16 @@ Reference these guidelines when:
 
 ## Rule Categories by Priority
 
-| Priority | Category | Impact | Prefix |
-|----------|----------|--------|--------|
-| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
-| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
-| 3 | Server-Side Performance | HIGH | `server-` |
-| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
-| 5 | Re-render Optimization | MEDIUM | `rerender-` |
-| 6 | Rendering Performance | MEDIUM | `rendering-` |
-| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
-| 8 | Advanced Patterns | LOW | `advanced-` |
+| Priority | Category                  | Impact      | Prefix       |
+| -------- | ------------------------- | ----------- | ------------ |
+| 1        | Eliminating Waterfalls    | CRITICAL    | `async-`     |
+| 2        | Bundle Size Optimization  | CRITICAL    | `bundle-`    |
+| 3        | Server-Side Performance   | HIGH        | `server-`    |
+| 4        | Client-Side Data Fetching | MEDIUM-HIGH | `client-`    |
+| 5        | Re-render Optimization    | MEDIUM      | `rerender-`  |
+| 6        | Rendering Performance     | MEDIUM      | `rendering-` |
+| 7        | JavaScript Performance    | LOW-MEDIUM  | `js-`        |
+| 8        | Advanced Patterns         | LOW         | `advanced-`  |
 
 ## Quick Reference
 
@@ -115,6 +116,7 @@ rules/_sections.md
 ```
 
 Each rule file contains:
+
 - Brief explanation of why it matters
 - Incorrect code example with explanation
 - Correct code example with explanation
diff --git a/.opencode/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md b/.opencode/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
index 97e7ade..435261a 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
@@ -14,9 +14,9 @@ Store callbacks in refs when used in effects that shouldn't re-subscribe on call
 ```tsx
 function useWindowEvent(event: string, handler: (e) => void) {
   useEffect(() => {
-    window.addEventListener(event, handler)
-    return () => window.removeEventListener(event, handler)
-  }, [event, handler])
+    window.addEventListener(event, handler);
+    return () => window.removeEventListener(event, handler);
+  }, [event, handler]);
 }
 ```
 
@@ -24,31 +24,31 @@ function useWindowEvent(event: string, handler: (e) => void) {
 
 ```tsx
 function useWindowEvent(event: string, handler: (e) => void) {
-  const handlerRef = useRef(handler)
+  const handlerRef = useRef(handler);
   useEffect(() => {
-    handlerRef.current = handler
-  }, [handler])
+    handlerRef.current = handler;
+  }, [handler]);
 
   useEffect(() => {
-    const listener = (e) => handlerRef.current(e)
-    window.addEventListener(event, listener)
-    return () => window.removeEventListener(event, listener)
-  }, [event])
+    const listener = (e) => handlerRef.current(e);
+    window.addEventListener(event, listener);
+    return () => window.removeEventListener(event, listener);
+  }, [event]);
 }
 ```
 
 **Alternative: use `useEffectEvent` if you're on latest React:**
 
 ```tsx
-import { useEffectEvent } from 'react'
+import { useEffectEvent } from "react";
 
 function useWindowEvent(event: string, handler: (e) => void) {
-  const onEvent = useEffectEvent(handler)
+  const onEvent = useEffectEvent(handler);
 
   useEffect(() => {
-    window.addEventListener(event, onEvent)
-    return () => window.removeEventListener(event, onEvent)
-  }, [event])
+    window.addEventListener(event, onEvent);
+    return () => window.removeEventListener(event, onEvent);
+  }, [event]);
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/advanced-use-latest.md b/.opencode/skills/vercel-react-best-practices/rules/advanced-use-latest.md
index 483c2ef..8929112 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/advanced-use-latest.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/advanced-use-latest.md
@@ -13,11 +13,11 @@ Access latest values in callbacks without adding them to dependency arrays. Prev
 
 ```typescript
 function useLatest<T>(value: T) {
-  const ref = useRef(value)
+  const ref = useRef(value);
   useLayoutEffect(() => {
-    ref.current = value
-  }, [value])
-  return ref
+    ref.current = value;
+  }, [value]);
+  return ref;
 }
 ```
 
@@ -25,12 +25,12 @@ function useLatest<T>(value: T) {
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState("");
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearch(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query, onSearch])
+    const timeout = setTimeout(() => onSearch(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query, onSearch]);
 }
 ```
 
@@ -38,12 +38,12 @@ function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
 
 ```tsx
 function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
-  const [query, setQuery] = useState('')
-  const onSearchRef = useLatest(onSearch)
+  const [query, setQuery] = useState("");
+  const onSearchRef = useLatest(onSearch);
 
   useEffect(() => {
-    const timeout = setTimeout(() => onSearchRef.current(query), 300)
-    return () => clearTimeout(timeout)
-  }, [query])
+    const timeout = setTimeout(() => onSearchRef.current(query), 300);
+    return () => clearTimeout(timeout);
+  }, [query]);
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/async-api-routes.md b/.opencode/skills/vercel-react-best-practices/rules/async-api-routes.md
index 6feda1e..54a04a4 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/async-api-routes.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/async-api-routes.md
@@ -13,10 +13,10 @@ In API routes and Server Actions, start independent operations immediately, even
 
 ```typescript
 export async function GET(request: Request) {
-  const session = await auth()
-  const config = await fetchConfig()
-  const data = await fetchData(session.user.id)
-  return Response.json({ data, config })
+  const session = await auth();
+  const config = await fetchConfig();
+  const data = await fetchData(session.user.id);
+  return Response.json({ data, config });
 }
 ```
 
@@ -24,14 +24,11 @@ export async function GET(request: Request) {
 
 ```typescript
 export async function GET(request: Request) {
-  const sessionPromise = auth()
-  const configPromise = fetchConfig()
-  const session = await sessionPromise
-  const [config, data] = await Promise.all([
-    configPromise,
-    fetchData(session.user.id)
-  ])
-  return Response.json({ data, config })
+  const sessionPromise = auth();
+  const configPromise = fetchConfig();
+  const session = await sessionPromise;
+  const [config, data] = await Promise.all([configPromise, fetchData(session.user.id)]);
+  return Response.json({ data, config });
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/async-defer-await.md b/.opencode/skills/vercel-react-best-practices/rules/async-defer-await.md
index ea7082a..2b4d821 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/async-defer-await.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/async-defer-await.md
@@ -13,15 +13,15 @@ Move `await` operations into the branches where they're actually used to avoid b
 
 ```typescript
 async function handleRequest(userId: string, skipProcessing: boolean) {
-  const userData = await fetchUserData(userId)
-  
+  const userData = await fetchUserData(userId);
+
   if (skipProcessing) {
     // Returns immediately but still waited for userData
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Only this branch uses userData
-  return processUserData(userData)
+  return processUserData(userData);
 }
 ```
 
@@ -31,12 +31,12 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 async function handleRequest(userId: string, skipProcessing: boolean) {
   if (skipProcessing) {
     // Returns immediately without waiting
-    return { skipped: true }
+    return { skipped: true };
   }
-  
+
   // Fetch only when needed
-  const userData = await fetchUserData(userId)
-  return processUserData(userData)
+  const userData = await fetchUserData(userId);
+  return processUserData(userData);
 }
 ```
 
@@ -45,35 +45,35 @@ async function handleRequest(userId: string, skipProcessing: boolean) {
 ```typescript
 // Incorrect: always fetches permissions
 async function updateResource(resourceId: string, userId: string) {
-  const permissions = await fetchPermissions(userId)
-  const resource = await getResource(resourceId)
-  
+  const permissions = await fetchPermissions(userId);
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: "Not found" };
   }
-  
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: "Forbidden" };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 
 // Correct: fetches only when needed
 async function updateResource(resourceId: string, userId: string) {
-  const resource = await getResource(resourceId)
-  
+  const resource = await getResource(resourceId);
+
   if (!resource) {
-    return { error: 'Not found' }
+    return { error: "Not found" };
   }
-  
-  const permissions = await fetchPermissions(userId)
-  
+
+  const permissions = await fetchPermissions(userId);
+
   if (!permissions.canEdit) {
-    return { error: 'Forbidden' }
+    return { error: "Forbidden" };
   }
-  
-  return await updateResourceData(resource, permissions)
+
+  return await updateResourceData(resource, permissions);
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/async-dependencies.md b/.opencode/skills/vercel-react-best-practices/rules/async-dependencies.md
index fb90d86..d3ae564 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/async-dependencies.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/async-dependencies.md
@@ -12,25 +12,26 @@ For operations with partial dependencies, use `better-all` to maximize paralleli
 **Incorrect (profile waits for config unnecessarily):**
 
 ```typescript
-const [user, config] = await Promise.all([
-  fetchUser(),
-  fetchConfig()
-])
-const profile = await fetchProfile(user.id)
+const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
+const profile = await fetchProfile(user.id);
 ```
 
 **Correct (config and profile run in parallel):**
 
 ```typescript
-import { all } from 'better-all'
+import { all } from "better-all";
 
 const { user, config, profile } = await all({
-  async user() { return fetchUser() },
-  async config() { return fetchConfig() },
+  async user() {
+    return fetchUser();
+  },
+  async config() {
+    return fetchConfig();
+  },
   async profile() {
-    return fetchProfile((await this.$.user).id)
-  }
-})
+    return fetchProfile((await this.$.user).id);
+  },
+});
 ```
 
 Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)
diff --git a/.opencode/skills/vercel-react-best-practices/rules/async-parallel.md b/.opencode/skills/vercel-react-best-practices/rules/async-parallel.md
index 64133f6..f7d13a8 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/async-parallel.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/async-parallel.md
@@ -12,17 +12,13 @@ When async operations have no interdependencies, execute them concurrently using
 **Incorrect (sequential execution, 3 round trips):**
 
 ```typescript
-const user = await fetchUser()
-const posts = await fetchPosts()
-const comments = await fetchComments()
+const user = await fetchUser();
+const posts = await fetchPosts();
+const comments = await fetchComments();
 ```
 
 **Correct (parallel execution, 1 round trip):**
 
 ```typescript
-const [user, posts, comments] = await Promise.all([
-  fetchUser(),
-  fetchPosts(),
-  fetchComments()
-])
+const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md b/.opencode/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
index 1fbc05b..790027e 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
@@ -13,8 +13,8 @@ Instead of awaiting data in async components before returning JSX, use Suspense
 
 ```tsx
 async function Page() {
-  const data = await fetchData() // Blocks entire page
-  
+  const data = await fetchData(); // Blocks entire page
+
   return (
     <div>
       <div>Sidebar</div>
@@ -24,7 +24,7 @@ async function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 ```
 
@@ -45,12 +45,12 @@ function Page() {
       </div>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 async function DataDisplay() {
-  const data = await fetchData() // Only blocks this component
-  return <div>{data.content}</div>
+  const data = await fetchData(); // Only blocks this component
+  return <div>{data.content}</div>;
 }
 ```
 
@@ -61,8 +61,8 @@ Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
 ```tsx
 function Page() {
   // Start fetch immediately, but don't await
-  const dataPromise = fetchData()
-  
+  const dataPromise = fetchData();
+
   return (
     <div>
       <div>Sidebar</div>
@@ -73,17 +73,17 @@ function Page() {
       </Suspense>
       <div>Footer</div>
     </div>
-  )
+  );
 }
 
 function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Unwraps the promise
-  return <div>{data.content}</div>
+  const data = use(dataPromise); // Unwraps the promise
+  return <div>{data.content}</div>;
 }
 
 function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
-  const data = use(dataPromise) // Reuses the same promise
-  return <div>{data.summary}</div>
+  const data = use(dataPromise); // Reuses the same promise
+  return <div>{data.summary}</div>;
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md b/.opencode/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
index ee48f32..8b038a5 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
@@ -16,24 +16,24 @@ Popular icon and component libraries can have **up to 10,000 re-exports** in the
 **Incorrect (imports entire library):**
 
 ```tsx
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from "lucide-react";
 // Loads 1,583 modules, takes ~2.8s extra in dev
 // Runtime cost: 200-800ms on every cold start
 
-import { Button, TextField } from '@mui/material'
+import { Button, TextField } from "@mui/material";
 // Loads 2,225 modules, takes ~4.2s extra in dev
 ```
 
 **Correct (imports only what you need):**
 
 ```tsx
-import Check from 'lucide-react/dist/esm/icons/check'
-import X from 'lucide-react/dist/esm/icons/x'
-import Menu from 'lucide-react/dist/esm/icons/menu'
+import Check from "lucide-react/dist/esm/icons/check";
+import X from "lucide-react/dist/esm/icons/x";
+import Menu from "lucide-react/dist/esm/icons/menu";
 // Loads only 3 modules (~2KB vs ~1MB)
 
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
 // Loads only what you use
 ```
 
@@ -43,12 +43,12 @@ import TextField from '@mui/material/TextField'
 // next.config.js - use optimizePackageImports
 module.exports = {
   experimental: {
-    optimizePackageImports: ['lucide-react', '@mui/material']
-  }
-}
+    optimizePackageImports: ["lucide-react", "@mui/material"],
+  },
+};
 
 // Then you can keep the ergonomic barrel imports:
-import { Check, X, Menu } from 'lucide-react'
+import { Check, X, Menu } from "lucide-react";
 // Automatically transformed to direct imports at build time
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/bundle-conditional.md b/.opencode/skills/vercel-react-best-practices/rules/bundle-conditional.md
index 99d6fc9..a541a02 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/bundle-conditional.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/bundle-conditional.md
@@ -12,19 +12,25 @@ Load large data or modules only when a feature is activated.
 **Example (lazy-load animation frames):**
 
 ```tsx
-function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
-  const [frames, setFrames] = useState<Frame[] | null>(null)
+function AnimationPlayer({
+  enabled,
+  setEnabled,
+}: {
+  enabled: boolean;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [frames, setFrames] = useState<Frame[] | null>(null);
 
   useEffect(() => {
-    if (enabled && !frames && typeof window !== 'undefined') {
-      import('./animation-frames.js')
-        .then(mod => setFrames(mod.frames))
-        .catch(() => setEnabled(false))
+    if (enabled && !frames && typeof window !== "undefined") {
+      import("./animation-frames.js")
+        .then((mod) => setFrames(mod.frames))
+        .catch(() => setEnabled(false));
     }
-  }, [enabled, frames, setEnabled])
+  }, [enabled, frames, setEnabled]);
 
-  if (!frames) return <Skeleton />
-  return <Canvas frames={frames} />
+  if (!frames) return <Skeleton />;
+  return <Canvas frames={frames} />;
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md b/.opencode/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
index db041d1..b3da8ae 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
@@ -12,7 +12,7 @@ Analytics, logging, and error tracking don't block user interaction. Load them a
 **Incorrect (blocks initial bundle):**
 
 ```tsx
-import { Analytics } from '@vercel/analytics/react'
+import { Analytics } from "@vercel/analytics/react";
 
 export default function RootLayout({ children }) {
   return (
@@ -22,19 +22,18 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
 
 **Correct (loads after hydration):**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const Analytics = dynamic(
-  () => import('@vercel/analytics/react').then(m => m.Analytics),
-  { ssr: false }
-)
+const Analytics = dynamic(() => import("@vercel/analytics/react").then((m) => m.Analytics), {
+  ssr: false,
+});
 
 export default function RootLayout({ children }) {
   return (
@@ -44,6 +43,6 @@ export default function RootLayout({ children }) {
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md b/.opencode/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
index 60b6269..bb527fd 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
@@ -12,24 +12,23 @@ Use `next/dynamic` to lazy-load large components not needed on initial render.
 **Incorrect (Monaco bundles with main chunk ~300KB):**
 
 ```tsx
-import { MonacoEditor } from './monaco-editor'
+import { MonacoEditor } from "./monaco-editor";
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
 
 **Correct (Monaco loads on demand):**
 
 ```tsx
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const MonacoEditor = dynamic(
-  () => import('./monaco-editor').then(m => m.MonacoEditor),
-  { ssr: false }
-)
+const MonacoEditor = dynamic(() => import("./monaco-editor").then((m) => m.MonacoEditor), {
+  ssr: false,
+});
 
 function CodePanel({ code }: { code: string }) {
-  return <MonacoEditor value={code} />
+  return <MonacoEditor value={code} />;
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/bundle-preload.md b/.opencode/skills/vercel-react-best-practices/rules/bundle-preload.md
index 7000504..b551189 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/bundle-preload.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/bundle-preload.md
@@ -14,20 +14,16 @@ Preload heavy bundles before they're needed to reduce perceived latency.
 ```tsx
 function EditorButton({ onClick }: { onClick: () => void }) {
   const preload = () => {
-    if (typeof window !== 'undefined') {
-      void import('./monaco-editor')
+    if (typeof window !== "undefined") {
+      void import("./monaco-editor");
     }
-  }
+  };
 
   return (
-    <button
-      onMouseEnter={preload}
-      onFocus={preload}
-      onClick={onClick}
-    >
+    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
       Open Editor
     </button>
-  )
+  );
 }
 ```
 
@@ -36,14 +32,12 @@ function EditorButton({ onClick }: { onClick: () => void }) {
 ```tsx
 function FlagsProvider({ children, flags }: Props) {
   useEffect(() => {
-    if (flags.editorEnabled && typeof window !== 'undefined') {
-      void import('./monaco-editor').then(mod => mod.init())
+    if (flags.editorEnabled && typeof window !== "undefined") {
+      void import("./monaco-editor").then((mod) => mod.init());
     }
-  }, [flags.editorEnabled])
+  }, [flags.editorEnabled]);
 
-  return <FlagsContext.Provider value={flags}>
-    {children}
-  </FlagsContext.Provider>
+  return <FlagsContext.Provider value={flags}>{children}</FlagsContext.Provider>;
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/client-event-listeners.md b/.opencode/skills/vercel-react-best-practices/rules/client-event-listeners.md
index aad4ae9..a40d82a 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/client-event-listeners.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/client-event-listeners.md
@@ -16,12 +16,12 @@ function useKeyboardShortcut(key: string, callback: () => void) {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === key) {
-        callback()
+        callback();
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [key, callback])
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [key, callback]);
 }
 ```
 
@@ -30,45 +30,49 @@ When using the `useKeyboardShortcut` hook multiple times, each instance will reg
 **Correct (N instances = 1 listener):**
 
 ```tsx
-import useSWRSubscription from 'swr/subscription'
+import useSWRSubscription from "swr/subscription";
 
 // Module-level Map to track callbacks per key
-const keyCallbacks = new Map<string, Set<() => void>>()
+const keyCallbacks = new Map<string, Set<() => void>>();
 
 function useKeyboardShortcut(key: string, callback: () => void) {
   // Register this callback in the Map
   useEffect(() => {
     if (!keyCallbacks.has(key)) {
-      keyCallbacks.set(key, new Set())
+      keyCallbacks.set(key, new Set());
     }
-    keyCallbacks.get(key)!.add(callback)
+    keyCallbacks.get(key)!.add(callback);
 
     return () => {
-      const set = keyCallbacks.get(key)
+      const set = keyCallbacks.get(key);
       if (set) {
-        set.delete(callback)
+        set.delete(callback);
         if (set.size === 0) {
-          keyCallbacks.delete(key)
+          keyCallbacks.delete(key);
         }
       }
-    }
-  }, [key, callback])
+    };
+  }, [key, callback]);
 
-  useSWRSubscription('global-keydown', () => {
+  useSWRSubscription("global-keydown", () => {
     const handler = (e: KeyboardEvent) => {
       if (e.metaKey && keyCallbacks.has(e.key)) {
-        keyCallbacks.get(e.key)!.forEach(cb => cb())
+        keyCallbacks.get(e.key)!.forEach((cb) => cb());
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  })
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  });
 }
 
 function Profile() {
   // Multiple shortcuts will share the same listener
-  useKeyboardShortcut('p', () => { /* ... */ }) 
-  useKeyboardShortcut('k', () => { /* ... */ })
+  useKeyboardShortcut("p", () => {
+    /* ... */
+  });
+  useKeyboardShortcut("k", () => {
+    /* ... */
+  });
   // ...
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/client-localstorage-schema.md b/.opencode/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
index d30a1a7..4b8ced0 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/client-localstorage-schema.md
@@ -13,18 +13,18 @@ Add version prefix to keys and store only needed fields. Prevents schema conflic
 
 ```typescript
 // No version, stores everything, no error handling
-localStorage.setItem('userConfig', JSON.stringify(fullUserObject))
-const data = localStorage.getItem('userConfig')
+localStorage.setItem("userConfig", JSON.stringify(fullUserObject));
+const data = localStorage.getItem("userConfig");
 ```
 
 **Correct:**
 
 ```typescript
-const VERSION = 'v2'
+const VERSION = "v2";
 
 function saveConfig(config: { theme: string; language: string }) {
   try {
-    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config))
+    localStorage.setItem(`userConfig:${VERSION}`, JSON.stringify(config));
   } catch {
     // Throws in incognito/private browsing, quota exceeded, or disabled
   }
@@ -32,21 +32,21 @@ function saveConfig(config: { theme: string; language: string }) {
 
 function loadConfig() {
   try {
-    const data = localStorage.getItem(`userConfig:${VERSION}`)
-    return data ? JSON.parse(data) : null
+    const data = localStorage.getItem(`userConfig:${VERSION}`);
+    return data ? JSON.parse(data) : null;
   } catch {
-    return null
+    return null;
   }
 }
 
 // Migration from v1 to v2
 function migrate() {
   try {
-    const v1 = localStorage.getItem('userConfig:v1')
+    const v1 = localStorage.getItem("userConfig:v1");
     if (v1) {
-      const old = JSON.parse(v1)
-      saveConfig({ theme: old.darkMode ? 'dark' : 'light', language: old.lang })
-      localStorage.removeItem('userConfig:v1')
+      const old = JSON.parse(v1);
+      saveConfig({ theme: old.darkMode ? "dark" : "light", language: old.lang });
+      localStorage.removeItem("userConfig:v1");
     }
   } catch {}
 }
@@ -58,10 +58,13 @@ function migrate() {
 // User object has 20+ fields, only store what UI needs
 function cachePrefs(user: FullUser) {
   try {
-    localStorage.setItem('prefs:v1', JSON.stringify({
-      theme: user.preferences.theme,
-      notifications: user.preferences.notifications
-    }))
+    localStorage.setItem(
+      "prefs:v1",
+      JSON.stringify({
+        theme: user.preferences.theme,
+        notifications: user.preferences.notifications,
+      })
+    );
   } catch {}
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md b/.opencode/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
index ce39a88..63da926 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/client-passive-event-listeners.md
@@ -13,34 +13,34 @@ Add `{ passive: true }` to touch and wheel event listeners to enable immediate s
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch)
-  document.addEventListener('wheel', handleWheel)
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener("touchstart", handleTouch);
+  document.addEventListener("wheel", handleWheel);
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener("touchstart", handleTouch);
+    document.removeEventListener("wheel", handleWheel);
+  };
+}, []);
 ```
 
 **Correct:**
 
 ```typescript
 useEffect(() => {
-  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
-  const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
-  
-  document.addEventListener('touchstart', handleTouch, { passive: true })
-  document.addEventListener('wheel', handleWheel, { passive: true })
-  
+  const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX);
+  const handleWheel = (e: WheelEvent) => console.log(e.deltaY);
+
+  document.addEventListener("touchstart", handleTouch, { passive: true });
+  document.addEventListener("wheel", handleWheel, { passive: true });
+
   return () => {
-    document.removeEventListener('touchstart', handleTouch)
-    document.removeEventListener('wheel', handleWheel)
-  }
-}, [])
+    document.removeEventListener("touchstart", handleTouch);
+    document.removeEventListener("wheel", handleWheel);
+  };
+}, []);
 ```
 
 **Use passive when:** tracking/analytics, logging, any listener that doesn't call `preventDefault()`.
diff --git a/.opencode/skills/vercel-react-best-practices/rules/client-swr-dedup.md b/.opencode/skills/vercel-react-best-practices/rules/client-swr-dedup.md
index 2a430f2..a056b42 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/client-swr-dedup.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/client-swr-dedup.md
@@ -13,43 +13,43 @@ SWR enables request deduplication, caching, and revalidation across component in
 
 ```tsx
 function UserList() {
-  const [users, setUsers] = useState([])
+  const [users, setUsers] = useState([]);
   useEffect(() => {
-    fetch('/api/users')
-      .then(r => r.json())
-      .then(setUsers)
-  }, [])
+    fetch("/api/users")
+      .then((r) => r.json())
+      .then(setUsers);
+  }, []);
 }
 ```
 
 **Correct (multiple instances share one request):**
 
 ```tsx
-import useSWR from 'swr'
+import useSWR from "swr";
 
 function UserList() {
-  const { data: users } = useSWR('/api/users', fetcher)
+  const { data: users } = useSWR("/api/users", fetcher);
 }
 ```
 
 **For immutable data:**
 
 ```tsx
-import { useImmutableSWR } from '@/lib/swr'
+import { useImmutableSWR } from "@/lib/swr";
 
 function StaticContent() {
-  const { data } = useImmutableSWR('/api/config', fetcher)
+  const { data } = useImmutableSWR("/api/config", fetcher);
 }
 ```
 
 **For mutations:**
 
 ```tsx
-import { useSWRMutation } from 'swr/mutation'
+import { useSWRMutation } from "swr/mutation";
 
 function UpdateButton() {
-  const { trigger } = useSWRMutation('/api/user', updateUser)
-  return <button onClick={() => trigger()}>Update</button>
+  const { trigger } = useSWRMutation("/api/user", updateUser);
+  return <button onClick={() => trigger()}>Update</button>;
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-batch-dom-css.md b/.opencode/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
index 84b6552..0768a85 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
@@ -13,10 +13,10 @@ Avoid interleaving style writes with layout reads. When you read a layout proper
 
 ```typescript
 function updateElementStyles(element: HTMLElement) {
-  element.style.width = '100px'
-  const width = element.offsetWidth  // Forces reflow
-  element.style.height = '200px'
-  const height = element.offsetHeight  // Forces another reflow
+  element.style.width = "100px";
+  const width = element.offsetWidth; // Forces reflow
+  element.style.height = "200px";
+  const height = element.offsetHeight; // Forces another reflow
 }
 ```
 
@@ -25,13 +25,13 @@ function updateElementStyles(element: HTMLElement) {
 ```typescript
 function updateElementStyles(element: HTMLElement) {
   // Batch all writes together
-  element.style.width = '100px'
-  element.style.height = '200px'
-  element.style.backgroundColor = 'blue'
-  element.style.border = '1px solid black'
-  
+  element.style.width = "100px";
+  element.style.height = "200px";
+  element.style.backgroundColor = "blue";
+  element.style.border = "1px solid black";
+
   // Read after all writes are done (single reflow)
-  const { width, height } = element.getBoundingClientRect()
+  const { width, height } = element.getBoundingClientRect();
 }
 ```
 
@@ -48,10 +48,10 @@ function updateElementStyles(element: HTMLElement) {
 
 ```typescript
 function updateElementStyles(element: HTMLElement) {
-  element.classList.add('highlighted-box')
+  element.classList.add("highlighted-box");
 
-  const { width, height } = element.getBoundingClientRect()
+  const { width, height } = element.getBoundingClientRect();
 }
 ```
 
-Prefer CSS classes over inline styles when possible. CSS files are cached by the browser, and classes provide better separation of concerns and are easier to maintain.
\ No newline at end of file
+Prefer CSS classes over inline styles when possible. CSS files are cached by the browser, and classes provide better separation of concerns and are easier to maintain.
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-cache-function-results.md b/.opencode/skills/vercel-react-best-practices/rules/js-cache-function-results.md
index 180f8ac..9d81b2a 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-cache-function-results.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-cache-function-results.md
@@ -11,67 +11,67 @@ Use a module-level Map to cache function results when the same function is calle
 
 **Incorrect (redundant computation):**
 
-```typescript
+```tsx
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
-      {projects.map(project => {
+      {projects.map((project) => {
         // slugify() called 100+ times for same project names
-        const slug = slugify(project.name)
-        
-        return <ProjectCard key={project.id} slug={slug} />
+        const slug = slugify(project.name);
+
+        return <ProjectCard key={project.id} slug={slug} />;
       })}
     </div>
-  )
+  );
 }
 ```
 
 **Correct (cached results):**
 
-```typescript
+```tsx
 // Module-level cache
-const slugifyCache = new Map<string, string>()
+const slugifyCache = new Map<string, string>();
 
 function cachedSlugify(text: string): string {
   if (slugifyCache.has(text)) {
-    return slugifyCache.get(text)!
+    return slugifyCache.get(text)!;
   }
-  const result = slugify(text)
-  slugifyCache.set(text, result)
-  return result
+  const result = slugify(text);
+  slugifyCache.set(text, result);
+  return result;
 }
 
 function ProjectList({ projects }: { projects: Project[] }) {
   return (
     <div>
-      {projects.map(project => {
+      {projects.map((project) => {
         // Computed only once per unique project name
-        const slug = cachedSlugify(project.name)
-        
-        return <ProjectCard key={project.id} slug={slug} />
+        const slug = cachedSlugify(project.name);
+
+        return <ProjectCard key={project.id} slug={slug} />;
       })}
     </div>
-  )
+  );
 }
 ```
 
 **Simpler pattern for single-value functions:**
 
 ```typescript
-let isLoggedInCache: boolean | null = null
+let isLoggedInCache: boolean | null = null;
 
 function isLoggedIn(): boolean {
   if (isLoggedInCache !== null) {
-    return isLoggedInCache
+    return isLoggedInCache;
   }
-  
-  isLoggedInCache = document.cookie.includes('auth=')
-  return isLoggedInCache
+
+  isLoggedInCache = document.cookie.includes("auth=");
+  return isLoggedInCache;
 }
 
 // Clear cache when auth changes
 function onAuthChange() {
-  isLoggedInCache = null
+  isLoggedInCache = null;
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-cache-property-access.md b/.opencode/skills/vercel-react-best-practices/rules/js-cache-property-access.md
index 39eec90..291f109 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-cache-property-access.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-cache-property-access.md
@@ -13,16 +13,16 @@ Cache object property lookups in hot paths.
 
 ```typescript
 for (let i = 0; i < arr.length; i++) {
-  process(obj.config.settings.value)
+  process(obj.config.settings.value);
 }
 ```
 
 **Correct (1 lookup total):**
 
 ```typescript
-const value = obj.config.settings.value
-const len = arr.length
+const value = obj.config.settings.value;
+const len = arr.length;
 for (let i = 0; i < len; i++) {
-  process(value)
+  process(value);
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-cache-storage.md b/.opencode/skills/vercel-react-best-practices/rules/js-cache-storage.md
index aa4a30c..d0e2a12 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-cache-storage.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-cache-storage.md
@@ -13,7 +13,7 @@ tags: javascript, localStorage, storage, caching, performance
 
 ```typescript
 function getTheme() {
-  return localStorage.getItem('theme') ?? 'light'
+  return localStorage.getItem("theme") ?? "light";
 }
 // Called 10 times = 10 storage reads
 ```
@@ -21,18 +21,18 @@ function getTheme() {
 **Correct (Map cache):**
 
 ```typescript
-const storageCache = new Map<string, string | null>()
+const storageCache = new Map<string, string | null>();
 
 function getLocalStorage(key: string) {
   if (!storageCache.has(key)) {
-    storageCache.set(key, localStorage.getItem(key))
+    storageCache.set(key, localStorage.getItem(key));
   }
-  return storageCache.get(key)
+  return storageCache.get(key);
 }
 
 function setLocalStorage(key: string, value: string) {
-  localStorage.setItem(key, value)
-  storageCache.set(key, value)  // keep cache in sync
+  localStorage.setItem(key, value);
+  storageCache.set(key, value); // keep cache in sync
 }
 ```
 
@@ -41,15 +41,13 @@ Use a Map (not a hook) so it works everywhere: utilities, event handlers, not ju
 **Cookie caching:**
 
 ```typescript
-let cookieCache: Record<string, string> | null = null
+let cookieCache: Record<string, string> | null = null;
 
 function getCookie(name: string) {
   if (!cookieCache) {
-    cookieCache = Object.fromEntries(
-      document.cookie.split('; ').map(c => c.split('='))
-    )
+    cookieCache = Object.fromEntries(document.cookie.split("; ").map((c) => c.split("=")));
   }
-  return cookieCache[name]
+  return cookieCache[name];
 }
 ```
 
@@ -58,13 +56,13 @@ function getCookie(name: string) {
 If storage can change externally (another tab, server-set cookies), invalidate cache:
 
 ```typescript
-window.addEventListener('storage', (e) => {
-  if (e.key) storageCache.delete(e.key)
-})
+window.addEventListener("storage", (e) => {
+  if (e.key) storageCache.delete(e.key);
+});
 
-document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState === 'visible') {
-    storageCache.clear()
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible") {
+    storageCache.clear();
   }
-})
+});
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-combine-iterations.md b/.opencode/skills/vercel-react-best-practices/rules/js-combine-iterations.md
index 044d017..f1e2518 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-combine-iterations.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-combine-iterations.md
@@ -12,21 +12,21 @@ Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine
 **Incorrect (3 iterations):**
 
 ```typescript
-const admins = users.filter(u => u.isAdmin)
-const testers = users.filter(u => u.isTester)
-const inactive = users.filter(u => !u.isActive)
+const admins = users.filter((u) => u.isAdmin);
+const testers = users.filter((u) => u.isTester);
+const inactive = users.filter((u) => !u.isActive);
 ```
 
 **Correct (1 iteration):**
 
 ```typescript
-const admins: User[] = []
-const testers: User[] = []
-const inactive: User[] = []
+const admins: User[] = [];
+const testers: User[] = [];
+const inactive: User[] = [];
 
 for (const user of users) {
-  if (user.isAdmin) admins.push(user)
-  if (user.isTester) testers.push(user)
-  if (!user.isActive) inactive.push(user)
+  if (user.isAdmin) admins.push(user);
+  if (user.isTester) testers.push(user);
+  if (!user.isActive) inactive.push(user);
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-early-exit.md b/.opencode/skills/vercel-react-best-practices/rules/js-early-exit.md
index f46cb89..992181a 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-early-exit.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-early-exit.md
@@ -13,22 +13,22 @@ Return early when result is determined to skip unnecessary processing.
 
 ```typescript
 function validateUsers(users: User[]) {
-  let hasError = false
-  let errorMessage = ''
-  
+  let hasError = false;
+  let errorMessage = "";
+
   for (const user of users) {
     if (!user.email) {
-      hasError = true
-      errorMessage = 'Email required'
+      hasError = true;
+      errorMessage = "Email required";
     }
     if (!user.name) {
-      hasError = true
-      errorMessage = 'Name required'
+      hasError = true;
+      errorMessage = "Name required";
     }
     // Continues checking all users even after error found
   }
-  
-  return hasError ? { valid: false, error: errorMessage } : { valid: true }
+
+  return hasError ? { valid: false, error: errorMessage } : { valid: true };
 }
 ```
 
@@ -38,13 +38,13 @@ function validateUsers(users: User[]) {
 function validateUsers(users: User[]) {
   for (const user of users) {
     if (!user.email) {
-      return { valid: false, error: 'Email required' }
+      return { valid: false, error: "Email required" };
     }
     if (!user.name) {
-      return { valid: false, error: 'Name required' }
+      return { valid: false, error: "Name required" };
     }
   }
 
-  return { valid: true }
+  return { valid: true };
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-hoist-regexp.md b/.opencode/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
index dae3fef..81e44f1 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
@@ -13,24 +13,21 @@ Don't create RegExp inside render. Hoist to module scope or memoize with `useMem
 
 ```tsx
 function Highlighter({ text, query }: Props) {
-  const regex = new RegExp(`(${query})`, 'gi')
-  const parts = text.split(regex)
-  return <>{parts.map((part, i) => ...)}</>
+  const regex = new RegExp(`(${query})`, "gi");
+  const parts = text.split(regex);
+  return <>{parts.map((part, i) => part)}</>;
 }
 ```
 
 **Correct (memoize or hoist):**
 
 ```tsx
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 function Highlighter({ text, query }: Props) {
-  const regex = useMemo(
-    () => new RegExp(`(${escapeRegex(query)})`, 'gi'),
-    [query]
-  )
-  const parts = text.split(regex)
-  return <>{parts.map((part, i) => ...)}</>
+  const regex = useMemo(() => new RegExp(`(${escapeRegex(query)})`, "gi"), [query]);
+  const parts = text.split(regex);
+  return <>{parts.map((part, i) => part)}</>;
 }
 ```
 
@@ -39,7 +36,7 @@ function Highlighter({ text, query }: Props) {
 Global regex (`/g`) has mutable `lastIndex` state:
 
 ```typescript
-const regex = /foo/g
-regex.test('foo')  // true, lastIndex = 3
-regex.test('foo')  // false, lastIndex = 0
+const regex = /foo/g;
+regex.test("foo"); // true, lastIndex = 3
+regex.test("foo"); // false, lastIndex = 0
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-index-maps.md b/.opencode/skills/vercel-react-best-practices/rules/js-index-maps.md
index 9d357a0..1fbaeda 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-index-maps.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-index-maps.md
@@ -13,10 +13,10 @@ Multiple `.find()` calls by the same key should use a Map.
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: users.find(u => u.id === order.userId)
-  }))
+    user: users.find((u) => u.id === order.userId),
+  }));
 }
 ```
 
@@ -24,12 +24,12 @@ function processOrders(orders: Order[], users: User[]) {
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
-  const userById = new Map(users.map(u => [u.id, u]))
+  const userById = new Map(users.map((u) => [u.id, u]));
 
-  return orders.map(order => ({
+  return orders.map((order) => ({
     ...order,
-    user: userById.get(order.userId)
-  }))
+    user: userById.get(order.userId),
+  }));
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-length-check-first.md b/.opencode/skills/vercel-react-best-practices/rules/js-length-check-first.md
index 8b89573..8bb7973 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-length-check-first.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-length-check-first.md
@@ -16,7 +16,7 @@ In real-world applications, this optimization is especially valuable when the co
 ```typescript
 function hasChanges(current: string[], original: string[]) {
   // Always sorts and joins, even when lengths differ
-  return current.sort().join() !== original.sort().join()
+  return current.sort().join() !== original.sort().join();
 }
 ```
 
@@ -28,21 +28,22 @@ Two O(n log n) sorts run even when `current.length` is 5 and `original.length` i
 function hasChanges(current: string[], original: string[]) {
   // Early return if lengths differ
   if (current.length !== original.length) {
-    return true
+    return true;
   }
   // Only sort when lengths match
-  const currentSorted = current.toSorted()
-  const originalSorted = original.toSorted()
+  const currentSorted = current.toSorted();
+  const originalSorted = original.toSorted();
   for (let i = 0; i < currentSorted.length; i++) {
     if (currentSorted[i] !== originalSorted[i]) {
-      return true
+      return true;
     }
   }
-  return false
+  return false;
 }
 ```
 
 This new approach is more efficient because:
+
 - It avoids the overhead of sorting and joining the arrays when lengths differ
 - It avoids consuming memory for the joined strings (especially important for large arrays)
 - It avoids mutating the original arrays
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-min-max-loop.md b/.opencode/skills/vercel-react-best-practices/rules/js-min-max-loop.md
index 4b6656e..a83a760 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-min-max-loop.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-min-max-loop.md
@@ -13,14 +13,14 @@ Finding the smallest or largest element only requires a single pass through the
 
 ```typescript
 interface Project {
-  id: string
-  name: string
-  updatedAt: number
+  id: string;
+  name: string;
+  updatedAt: number;
 }
 
 function getLatestProject(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
-  return sorted[0]
+  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
+  return sorted[0];
 }
 ```
 
@@ -30,8 +30,8 @@ Sorts the entire array just to find the maximum value.
 
 ```typescript
 function getOldestAndNewest(projects: Project[]) {
-  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
-  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
+  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt);
+  return { oldest: sorted[0], newest: sorted[sorted.length - 1] };
 }
 ```
 
@@ -41,31 +41,31 @@ Still sorts unnecessarily when only min/max are needed.
 
 ```typescript
 function getLatestProject(projects: Project[]) {
-  if (projects.length === 0) return null
-  
-  let latest = projects[0]
-  
+  if (projects.length === 0) return null;
+
+  let latest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt > latest.updatedAt) {
-      latest = projects[i]
+      latest = projects[i];
     }
   }
-  
-  return latest
+
+  return latest;
 }
 
 function getOldestAndNewest(projects: Project[]) {
-  if (projects.length === 0) return { oldest: null, newest: null }
-  
-  let oldest = projects[0]
-  let newest = projects[0]
-  
+  if (projects.length === 0) return { oldest: null, newest: null };
+
+  let oldest = projects[0];
+  let newest = projects[0];
+
   for (let i = 1; i < projects.length; i++) {
-    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
-    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
+    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i];
+    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i];
   }
-  
-  return { oldest, newest }
+
+  return { oldest, newest };
 }
 ```
 
@@ -74,9 +74,9 @@ Single pass through the array, no copying, no sorting.
 **Alternative (Math.min/Math.max for small arrays):**
 
 ```typescript
-const numbers = [5, 2, 8, 1, 9]
-const min = Math.min(...numbers)
-const max = Math.max(...numbers)
+const numbers = [5, 2, 8, 1, 9];
+const min = Math.min(...numbers);
+const max = Math.max(...numbers);
 ```
 
 This works for small arrays, but can be slower or just throw an error for very large arrays due to spread operator limitations. Maximal array length is approximately 124000 in Chrome 143 and 638000 in Safari 18; exact numbers may vary - see [the fiddle](https://jsfiddle.net/qw1jabsx/4/). Use the loop approach for reliability.
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-set-map-lookups.md b/.opencode/skills/vercel-react-best-practices/rules/js-set-map-lookups.md
index 680a489..8e4891c 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-set-map-lookups.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-set-map-lookups.md
@@ -12,13 +12,13 @@ Convert arrays to Set/Map for repeated membership checks.
 **Incorrect (O(n) per check):**
 
 ```typescript
-const allowedIds = ['a', 'b', 'c', ...]
-items.filter(item => allowedIds.includes(item.id))
+const allowedIds = ["a", "b", "c"];
+items.filter((item) => allowedIds.includes(item.id));
 ```
 
 **Correct (O(1) per check):**
 
 ```typescript
-const allowedIds = new Set(['a', 'b', 'c', ...])
-items.filter(item => allowedIds.has(item.id))
+const allowedIds = new Set(["a", "b", "c"]);
+items.filter((item) => allowedIds.has(item.id));
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md b/.opencode/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
index eae8b3f..1b3ce2c 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
@@ -11,27 +11,21 @@ tags: javascript, arrays, immutability, react, state, mutation
 
 **Incorrect (mutates original array):**
 
-```typescript
+```tsx
 function UserList({ users }: { users: User[] }) {
   // Mutates the users prop array!
-  const sorted = useMemo(
-    () => users.sort((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  )
-  return <div>{sorted.map(renderUser)}</div>
+  const sorted = useMemo(() => users.sort((a, b) => a.name.localeCompare(b.name)), [users]);
+  return <div>{sorted.map(renderUser)}</div>;
 }
 ```
 
 **Correct (creates new array):**
 
-```typescript
+```tsx
 function UserList({ users }: { users: User[] }) {
   // Creates new sorted array, original unchanged
-  const sorted = useMemo(
-    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  )
-  return <div>{sorted.map(renderUser)}</div>
+  const sorted = useMemo(() => users.toSorted((a, b) => a.name.localeCompare(b.name)), [users]);
+  return <div>{sorted.map(renderUser)}</div>;
 }
 ```
 
@@ -46,7 +40,7 @@ function UserList({ users }: { users: User[] }) {
 
 ```typescript
 // Fallback for older browsers
-const sorted = [...items].sort((a, b) => a.value - b.value)
+const sorted = [...items].sort((a, b) => a.value - b.value);
 ```
 
 **Other immutable array methods:**
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rendering-activity.md b/.opencode/skills/vercel-react-best-practices/rules/rendering-activity.md
index c957a49..a7d84cd 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rendering-activity.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rendering-activity.md
@@ -12,14 +12,14 @@ Use React's `<Activity>` to preserve state/DOM for expensive components that fre
 **Usage:**
 
 ```tsx
-import { Activity } from 'react'
+import { Activity } from "react";
 
 function Dropdown({ isOpen }: Props) {
   return (
-    <Activity mode={isOpen ? 'visible' : 'hidden'}>
+    <Activity mode={isOpen ? "visible" : "hidden"}>
       <ExpensiveMenu />
     </Activity>
-  )
+  );
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md b/.opencode/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
index 646744c..3707302 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
@@ -14,15 +14,10 @@ Many browsers don't have hardware acceleration for CSS3 animations on SVG elemen
 ```tsx
 function LoadingSpinner() {
   return (
-    <svg 
-      className="animate-spin"
-      width="24" 
-      height="24" 
-      viewBox="0 0 24 24"
-    >
+    <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24">
       <circle cx="12" cy="12" r="10" stroke="currentColor" />
     </svg>
-  )
+  );
 }
 ```
 
@@ -32,15 +27,11 @@ function LoadingSpinner() {
 function LoadingSpinner() {
   return (
     <div className="animate-spin">
-      <svg 
-        width="24" 
-        height="24" 
-        viewBox="0 0 24 24"
-      >
+      <svg width="24" height="24" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="10" stroke="currentColor" />
       </svg>
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rendering-conditional-render.md b/.opencode/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
index 7e866f5..bbafa14 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
@@ -13,11 +13,7 @@ Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count && <span className="badge">{count}</span>}
-    </div>
-  )
+  return <div>{count && <span className="badge">{count}</span>}</div>;
 }
 
 // When count = 0, renders: <div>0</div>
@@ -28,11 +24,7 @@ function Badge({ count }: { count: number }) {
 
 ```tsx
 function Badge({ count }: { count: number }) {
-  return (
-    <div>
-      {count > 0 ? <span className="badge">{count}</span> : null}
-    </div>
-  )
+  return <div>{count > 0 ? <span className="badge">{count}</span> : null}</div>;
 }
 
 // When count = 0, renders: <div></div>
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rendering-content-visibility.md b/.opencode/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
index aa66563..e0d284d 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
@@ -24,14 +24,14 @@ Apply `content-visibility: auto` to defer off-screen rendering.
 function MessageList({ messages }: { messages: Message[] }) {
   return (
     <div className="overflow-y-auto h-screen">
-      {messages.map(msg => (
+      {messages.map((msg) => (
         <div key={msg.id} className="message-item">
           <Avatar user={msg.author} />
           <div>{msg.content}</div>
         </div>
       ))}
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md b/.opencode/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
index 32d2f3f..55373a5 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
@@ -13,31 +13,21 @@ Extract static JSX outside components to avoid re-creation.
 
 ```tsx
 function LoadingSkeleton() {
-  return <div className="animate-pulse h-20 bg-gray-200" />
+  return <div className="animate-pulse h-20 bg-gray-200" />;
 }
 
 function Container() {
-  return (
-    <div>
-      {loading && <LoadingSkeleton />}
-    </div>
-  )
+  return <div>{loading && <LoadingSkeleton />}</div>;
 }
 ```
 
 **Correct (reuses same element):**
 
 ```tsx
-const loadingSkeleton = (
-  <div className="animate-pulse h-20 bg-gray-200" />
-)
+const loadingSkeleton = <div className="animate-pulse h-20 bg-gray-200" />;
 
 function Container() {
-  return (
-    <div>
-      {loading && loadingSkeleton}
-    </div>
-  )
+  return <div>{loading && loadingSkeleton}</div>;
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md b/.opencode/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
index 5cf0e79..971c5cc 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
@@ -14,13 +14,9 @@ When rendering content that depends on client-side storage (localStorage, cookie
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
   // localStorage is not available on server - throws error
-  const theme = localStorage.getItem('theme') || 'light'
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  const theme = localStorage.getItem("theme") || "light";
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -30,21 +26,17 @@ Server-side rendering will fail because `localStorage` is undefined.
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState('light')
-  
+  const [theme, setTheme] = useState("light");
+
   useEffect(() => {
     // Runs after hydration - causes visible flash
-    const stored = localStorage.getItem('theme')
+    const stored = localStorage.getItem("theme");
     if (stored) {
-      setTheme(stored)
+      setTheme(stored);
     }
-  }, [])
-  
-  return (
-    <div className={theme}>
-      {children}
-    </div>
-  )
+  }, []);
+
+  return <div className={theme}>{children}</div>;
 }
 ```
 
@@ -56,9 +48,7 @@ Component first renders with default value (`light`), then updates after hydrati
 function ThemeWrapper({ children }: { children: ReactNode }) {
   return (
     <>
-      <div id="theme-wrapper">
-        {children}
-      </div>
+      <div id="theme-wrapper">{children}</div>
       <script
         dangerouslySetInnerHTML={{
           __html: `
@@ -73,7 +63,7 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
         }}
       />
     </>
-  )
+  );
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rerender-defer-reads.md b/.opencode/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
index e867c95..bd49194 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
@@ -13,14 +13,14 @@ Don't subscribe to dynamic state (searchParams, localStorage) if you only read i
 
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
-  const searchParams = useSearchParams()
+  const searchParams = useSearchParams();
 
   const handleShare = () => {
-    const ref = searchParams.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const ref = searchParams.get("ref");
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
 
@@ -29,11 +29,11 @@ function ShareButton({ chatId }: { chatId: string }) {
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
   const handleShare = () => {
-    const params = new URLSearchParams(window.location.search)
-    const ref = params.get('ref')
-    shareChat(chatId, { ref })
-  }
+    const params = new URLSearchParams(window.location.search);
+    const ref = params.get("ref");
+    shareChat(chatId, { ref });
+  };
 
-  return <button onClick={handleShare}>Share</button>
+  return <button onClick={handleShare}>Share</button>;
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rerender-dependencies.md b/.opencode/skills/vercel-react-best-practices/rules/rerender-dependencies.md
index 47a4d92..bd7795e 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rerender-dependencies.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rerender-dependencies.md
@@ -13,16 +13,16 @@ Specify primitive dependencies instead of objects to minimize effect re-runs.
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user])
+  console.log(user.id);
+}, [user]);
 ```
 
 **Correct (re-runs only when id changes):**
 
 ```tsx
 useEffect(() => {
-  console.log(user.id)
-}, [user.id])
+  console.log(user.id);
+}, [user.id]);
 ```
 
 **For derived state, compute outside effect:**
@@ -31,15 +31,15 @@ useEffect(() => {
 // Incorrect: runs on width=767, 766, 765...
 useEffect(() => {
   if (width < 768) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [width])
+}, [width]);
 
 // Correct: runs only on boolean transition
-const isMobile = width < 768
+const isMobile = width < 768;
 useEffect(() => {
   if (isMobile) {
-    enableMobileMode()
+    enableMobileMode();
   }
-}, [isMobile])
+}, [isMobile]);
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rerender-derived-state.md b/.opencode/skills/vercel-react-best-practices/rules/rerender-derived-state.md
index e5c899f..08ab84a 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rerender-derived-state.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rerender-derived-state.md
@@ -13,9 +13,9 @@ Subscribe to derived boolean state instead of continuous values to reduce re-ren
 
 ```tsx
 function Sidebar() {
-  const width = useWindowWidth()  // updates continuously
-  const isMobile = width < 768
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const width = useWindowWidth(); // updates continuously
+  const isMobile = width < 768;
+  return <nav className={isMobile ? "mobile" : "desktop"} />;
 }
 ```
 
@@ -23,7 +23,7 @@ function Sidebar() {
 
 ```tsx
 function Sidebar() {
-  const isMobile = useMediaQuery('(max-width: 767px)')
-  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  return <nav className={isMobile ? "mobile" : "desktop"} />;
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md b/.opencode/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
index b004ef4..07dfb6c 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
@@ -13,19 +13,22 @@ When updating state based on the current state value, use the functional update
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Callback must depend on items, recreated on every items change
-  const addItems = useCallback((newItems: Item[]) => {
-    setItems([...items, ...newItems])
-  }, [items])  // ❌ items dependency causes recreations
-  
+  const addItems = useCallback(
+    (newItems: Item[]) => {
+      setItems([...items, ...newItems]);
+    },
+    [items]
+  ); // ❌ items dependency causes recreations
+
   // Risk of stale closure if dependency is forgotten
   const removeItem = useCallback((id: string) => {
-    setItems(items.filter(item => item.id !== id))
-  }, [])  // ❌ Missing items dependency - will use stale items!
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems(items.filter((item) => item.id !== id));
+  }, []); // ❌ Missing items dependency - will use stale items!
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
@@ -35,19 +38,19 @@ The first callback is recreated every time `items` changes, which can cause chil
 
 ```tsx
 function TodoList() {
-  const [items, setItems] = useState(initialItems)
-  
+  const [items, setItems] = useState(initialItems);
+
   // Stable callback, never recreated
   const addItems = useCallback((newItems: Item[]) => {
-    setItems(curr => [...curr, ...newItems])
-  }, [])  // ✅ No dependencies needed
-  
+    setItems((curr) => [...curr, ...newItems]);
+  }, []); // ✅ No dependencies needed
+
   // Always uses latest state, no stale closure risk
   const removeItem = useCallback((id: string) => {
-    setItems(curr => curr.filter(item => item.id !== id))
-  }, [])  // ✅ Safe and stable
-  
-  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+    setItems((curr) => curr.filter((item) => item.id !== id));
+  }, []); // ✅ Safe and stable
+
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />;
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md b/.opencode/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
index 4ecb350..cd0af90 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
@@ -14,20 +14,18 @@ Pass a function to `useState` for expensive initial values. Without the function
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs on EVERY render, even after initialization
-  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items));
+  const [query, setQuery] = useState("");
+
   // When query changes, buildSearchIndex runs again unnecessarily
-  return <SearchResults index={searchIndex} query={query} />
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs on every render
-  const [settings, setSettings] = useState(
-    JSON.parse(localStorage.getItem('settings') || '{}')
-  )
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+  const [settings, setSettings] = useState(JSON.parse(localStorage.getItem("settings") || "{}"));
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
@@ -36,20 +34,20 @@ function UserProfile() {
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
   // buildSearchIndex() runs ONLY on initial render
-  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
-  const [query, setQuery] = useState('')
-  
-  return <SearchResults index={searchIndex} query={query} />
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items));
+  const [query, setQuery] = useState("");
+
+  return <SearchResults index={searchIndex} query={query} />;
 }
 
 function UserProfile() {
   // JSON.parse runs only on initial render
   const [settings, setSettings] = useState(() => {
-    const stored = localStorage.getItem('settings')
-    return stored ? JSON.parse(stored) : {}
-  })
-  
-  return <SettingsForm settings={settings} onChange={setSettings} />
+    const stored = localStorage.getItem("settings");
+    return stored ? JSON.parse(stored) : {};
+  });
+
+  return <SettingsForm settings={settings} onChange={setSettings} />;
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rerender-memo.md b/.opencode/skills/vercel-react-best-practices/rules/rerender-memo.md
index f8982ab..0de3aa3 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rerender-memo.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rerender-memo.md
@@ -14,12 +14,12 @@ Extract expensive work into memoized components to enable early returns before c
 ```tsx
 function Profile({ user, loading }: Props) {
   const avatar = useMemo(() => {
-    const id = computeAvatarId(user)
-    return <Avatar id={id} />
-  }, [user])
+    const id = computeAvatarId(user);
+    return <Avatar id={id} />;
+  }, [user]);
 
-  if (loading) return <Skeleton />
-  return <div>{avatar}</div>
+  if (loading) return <Skeleton />;
+  return <div>{avatar}</div>;
 }
 ```
 
@@ -27,17 +27,17 @@ function Profile({ user, loading }: Props) {
 
 ```tsx
 const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
-  const id = useMemo(() => computeAvatarId(user), [user])
-  return <Avatar id={id} />
-})
+  const id = useMemo(() => computeAvatarId(user), [user]);
+  return <Avatar id={id} />;
+});
 
 function Profile({ user, loading }: Props) {
-  if (loading) return <Skeleton />
+  if (loading) return <Skeleton />;
   return (
     <div>
       <UserAvatar user={user} />
     </div>
-  )
+  );
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/rerender-transitions.md b/.opencode/skills/vercel-react-best-practices/rules/rerender-transitions.md
index d99f43f..1d0bb43 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/rerender-transitions.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/rerender-transitions.md
@@ -13,28 +13,28 @@ Mark frequent, non-urgent state updates as transitions to maintain UI responsive
 
 ```tsx
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
-    const handler = () => setScrollY(window.scrollY)
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+    const handler = () => setScrollY(window.scrollY);
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
 }
 ```
 
 **Correct (non-blocking updates):**
 
 ```tsx
-import { startTransition } from 'react'
+import { startTransition } from "react";
 
 function ScrollTracker() {
-  const [scrollY, setScrollY] = useState(0)
+  const [scrollY, setScrollY] = useState(0);
   useEffect(() => {
     const handler = () => {
-      startTransition(() => setScrollY(window.scrollY))
-    }
-    window.addEventListener('scroll', handler, { passive: true })
-    return () => window.removeEventListener('scroll', handler)
-  }, [])
+      startTransition(() => setScrollY(window.scrollY));
+    };
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/server-after-nonblocking.md b/.opencode/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
index e8f5b26..50d096c 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
@@ -12,46 +12,46 @@ Use Next.js's `after()` to schedule work that should execute after a response is
 **Incorrect (blocks response):**
 
 ```tsx
-import { logUserAction } from '@/app/utils'
+import { logUserAction } from "@/app/utils";
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Logging blocks the response
-  const userAgent = request.headers.get('user-agent') || 'unknown'
-  await logUserAction({ userAgent })
-  
-  return new Response(JSON.stringify({ status: 'success' }), {
+  const userAgent = request.headers.get("user-agent") || "unknown";
+  await logUserAction({ userAgent });
+
+  return new Response(JSON.stringify({ status: "success" }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
 **Correct (non-blocking):**
 
 ```tsx
-import { after } from 'next/server'
-import { headers, cookies } from 'next/headers'
-import { logUserAction } from '@/app/utils'
+import { after } from "next/server";
+import { headers, cookies } from "next/headers";
+import { logUserAction } from "@/app/utils";
 
 export async function POST(request: Request) {
   // Perform mutation
-  await updateDatabase(request)
-  
+  await updateDatabase(request);
+
   // Log after response is sent
   after(async () => {
-    const userAgent = (await headers()).get('user-agent') || 'unknown'
-    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
-    
-    logUserAction({ sessionCookie, userAgent })
-  })
-  
-  return new Response(JSON.stringify({ status: 'success' }), {
+    const userAgent = (await headers()).get("user-agent") || "unknown";
+    const sessionCookie = (await cookies()).get("session-id")?.value || "anonymous";
+
+    logUserAction({ sessionCookie, userAgent });
+  });
+
+  return new Response(JSON.stringify({ status: "success" }), {
     status: 200,
-    headers: { 'Content-Type': 'application/json' }
-  })
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
diff --git a/.opencode/skills/vercel-react-best-practices/rules/server-cache-lru.md b/.opencode/skills/vercel-react-best-practices/rules/server-cache-lru.md
index ef6938a..8846308 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/server-cache-lru.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/server-cache-lru.md
@@ -12,20 +12,20 @@ tags: server, cache, lru, cross-request
 **Implementation:**
 
 ```typescript
-import { LRUCache } from 'lru-cache'
+import { LRUCache } from "lru-cache";
 
 const cache = new LRUCache<string, any>({
   max: 1000,
-  ttl: 5 * 60 * 1000  // 5 minutes
-})
+  ttl: 5 * 60 * 1000, // 5 minutes
+});
 
 export async function getUser(id: string) {
-  const cached = cache.get(id)
-  if (cached) return cached
+  const cached = cache.get(id);
+  if (cached) return cached;
 
-  const user = await db.user.findUnique({ where: { id } })
-  cache.set(id, user)
-  return user
+  const user = await db.user.findUnique({ where: { id } });
+  cache.set(id, user);
+  return user;
 }
 
 // Request 1: DB query, result cached
diff --git a/.opencode/skills/vercel-react-best-practices/rules/server-cache-react.md b/.opencode/skills/vercel-react-best-practices/rules/server-cache-react.md
index 87c9ca3..0643ef7 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/server-cache-react.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/server-cache-react.md
@@ -12,15 +12,15 @@ Use `React.cache()` for server-side request deduplication. Authentication and da
 **Usage:**
 
 ```typescript
-import { cache } from 'react'
+import { cache } from "react";
 
 export const getCurrentUser = cache(async () => {
-  const session = await auth()
-  if (!session?.user?.id) return null
+  const session = await auth();
+  if (!session?.user?.id) return null;
   return await db.user.findUnique({
-    where: { id: session.user.id }
-  })
-})
+    where: { id: session.user.id },
+  });
+});
 ```
 
 Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
@@ -33,32 +33,32 @@ Within a single request, multiple calls to `getCurrentUser()` execute the query
 
 ```typescript
 const getUser = cache(async (params: { uid: number }) => {
-  return await db.user.findUnique({ where: { id: params.uid } })
-})
+  return await db.user.findUnique({ where: { id: params.uid } });
+});
 
 // Each call creates new object, never hits cache
-getUser({ uid: 1 })
-getUser({ uid: 1 })  // Cache miss, runs query again
+getUser({ uid: 1 });
+getUser({ uid: 1 }); // Cache miss, runs query again
 ```
 
 **Correct (cache hit):**
 
 ```typescript
 const getUser = cache(async (uid: number) => {
-  return await db.user.findUnique({ where: { id: uid } })
-})
+  return await db.user.findUnique({ where: { id: uid } });
+});
 
 // Primitive args use value equality
-getUser(1)
-getUser(1)  // Cache hit, returns cached result
+getUser(1);
+getUser(1); // Cache hit, returns cached result
 ```
 
 If you must pass objects, pass the same reference:
 
 ```typescript
-const params = { uid: 1 }
-getUser(params)  // Query runs
-getUser(params)  // Cache hit (same reference)
+const params = { uid: 1 };
+getUser(params); // Query runs
+getUser(params); // Cache hit (same reference)
 ```
 
 **Next.js-Specific Note:**
diff --git a/.opencode/skills/vercel-react-best-practices/rules/server-parallel-fetching.md b/.opencode/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
index 1affc83..8d78b54 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
@@ -13,18 +13,18 @@ React Server Components execute sequentially within a tree. Restructure with com
 
 ```tsx
 export default async function Page() {
-  const header = await fetchHeader()
+  const header = await fetchHeader();
   return (
     <div>
       <div>{header}</div>
       <Sidebar />
     </div>
-  )
+  );
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 ```
 
@@ -32,13 +32,13 @@ async function Sidebar() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 export default function Page() {
@@ -47,7 +47,7 @@ export default function Page() {
       <Header />
       <Sidebar />
     </div>
-  )
+  );
 }
 ```
 
@@ -55,13 +55,13 @@ export default function Page() {
 
 ```tsx
 async function Header() {
-  const data = await fetchHeader()
-  return <div>{data}</div>
+  const data = await fetchHeader();
+  return <div>{data}</div>;
 }
 
 async function Sidebar() {
-  const items = await fetchSidebarItems()
-  return <nav>{items.map(renderItem)}</nav>
+  const items = await fetchSidebarItems();
+  return <nav>{items.map(renderItem)}</nav>;
 }
 
 function Layout({ children }: { children: ReactNode }) {
@@ -70,7 +70,7 @@ function Layout({ children }: { children: ReactNode }) {
       <Header />
       {children}
     </div>
-  )
+  );
 }
 
 export default function Page() {
@@ -78,6 +78,6 @@ export default function Page() {
     <Layout>
       <Sidebar />
     </Layout>
-  )
+  );
 }
 ```
diff --git a/.opencode/skills/vercel-react-best-practices/rules/server-serialization.md b/.opencode/skills/vercel-react-best-practices/rules/server-serialization.md
index 39c5c41..3fe0715 100644
--- a/.opencode/skills/vercel-react-best-practices/rules/server-serialization.md
+++ b/.opencode/skills/vercel-react-best-practices/rules/server-serialization.md
@@ -13,13 +13,13 @@ The React Server/Client boundary serializes all object properties into strings a
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()  // 50 fields
-  return <Profile user={user} />
+  const user = await fetchUser(); // 50 fields
+  return <Profile user={user} />;
 }
 
-'use client'
+("use client");
 function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>  // uses 1 field
+  return <div>{user.name}</div>; // uses 1 field
 }
 ```
 
@@ -27,12 +27,12 @@ function Profile({ user }: { user: User }) {
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()
-  return <Profile name={user.name} />
+  const user = await fetchUser();
+  return <Profile name={user.name} />;
 }
 
-'use client'
+("use client");
 function Profile({ name }: { name: string }) {
-  return <div>{name}</div>
+  return <div>{name}</div>;
 }
 ```
diff --git a/.opencode/skills/web-design-guidelines/SKILL.md b/.opencode/skills/web-design-guidelines/SKILL.md
index ceae92a..371146a 100644
--- a/.opencode/skills/web-design-guidelines/SKILL.md
+++ b/.opencode/skills/web-design-guidelines/SKILL.md
@@ -31,6 +31,7 @@ Use WebFetch to retrieve the latest rules. The fetched content contains all the
 ## Usage
 
 When a user provides a file or pattern argument:
+
 1. Fetch guidelines from the source URL above
 2. Read the specified files
 3. Apply all rules from the fetched guidelines
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..41155a6
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,220 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+**Core Development:**
+
+- `pnpm dev` - Start development server (runs custom server.ts with schedulers)
+- `pnpm dev:next-only` - Start Next.js only with Turbopack (no schedulers)
+- `pnpm build` - Build production application
+- `pnpm start` - Run production server
+
+**Code Quality:**
+
+- `pnpm lint` - Run ESLint
+- `pnpm lint:fix` - Fix ESLint issues automatically
+- `pnpm format` - Format code with Prettier
+- `pnpm format:check` - Check formatting without fixing
+
+**Database:**
+
+- `pnpm prisma:generate` - Generate Prisma client
+- `pnpm prisma:migrate` - Run database migrations
+- `pnpm prisma:push` - Push schema changes to database
+- `pnpm prisma:push:force` - Force reset database and push schema
+- `pnpm prisma:seed` - Seed database with initial data
+- `pnpm prisma:studio` - Open Prisma Studio database viewer
+
+**Testing:**
+
+- `pnpm test` - Run both Vitest and Playwright tests concurrently
+- `pnpm test:vitest` - Run Vitest tests only
+- `pnpm test:vitest:watch` - Run Vitest in watch mode
+- `pnpm test:vitest:coverage` - Run Vitest with coverage report
+- `pnpm test:coverage` - Run all tests with coverage
+
+**Markdown:**
+
+- `pnpm lint:md` - Lint Markdown files
+- `pnpm lint:md:fix` - Fix Markdown linting issues
+
+## Architecture Overview
+
+**LiveDash-Node** is a real-time analytics dashboard for monitoring user sessions with AI-powered analysis and processing pipeline.
+
+### Tech Stack
+
+- **Frontend:** Next.js 16 + React 19 + TailwindCSS 4
+- **Backend:** Next.js API Routes + Custom Node.js server
+- **Database:** PostgreSQL (Neon) with Prisma ORM
+- **Authentication:** Neon Auth (Better Auth) - unified for all routes
+- **AI Processing:** OpenAI API integration
+- **Visualization:** D3.js, React Leaflet, Recharts
+- **Scheduling:** Node-cron for background processing
+
+### Key Architecture Components
+
+**1. Multi-Stage Processing Pipeline**
+The system processes user sessions through distinct stages tracked in `SessionProcessingStatus`:
+
+- `CSV_IMPORT` - Import raw CSV data into `SessionImport`
+- `TRANSCRIPT_FETCH` - Fetch transcript content from URLs
+- `SESSION_CREATION` - Create normalized `Session` and `Message` records
+- `AI_ANALYSIS` - AI processing for sentiment, categorization, summaries
+- `QUESTION_EXTRACTION` - Extract questions from conversations
+
+**2. Database Architecture**
+
+- **Multi-tenant design** with `Company` as root entity
+- **Dual storage pattern**: Raw CSV data in `SessionImport`, processed data in `Session`
+- **1-to-1 relationship** between `SessionImport` and `Session` via `importId`
+- **Message parsing** into individual `Message` records with order tracking
+- **AI cost tracking** via `AIProcessingRequest` with detailed token usage
+- **Flexible AI model management** through `AIModel`, `AIModelPricing`, and `CompanyAIModel`
+
+**3. Custom Server Architecture**
+
+- `server.ts` - Custom Next.js server with configurable scheduler initialization
+- Three main schedulers: CSV import, import processing, and session processing
+- Environment-based configuration via `lib/env.ts`
+
+**4. Key Processing Libraries**
+
+- `lib/scheduler.ts` - CSV import scheduling
+- `lib/importProcessor.ts` - Raw data to Session conversion
+- `lib/processingScheduler.ts` - AI analysis pipeline
+- `lib/transcriptFetcher.ts` - External transcript fetching
+- `lib/transcriptParser.ts` - Message parsing from transcripts
+
+### Development Environment
+
+**Environment Configuration:**
+Environment variables are managed through `lib/env.ts` with .env.local file support:
+
+- Database: PostgreSQL via `DATABASE_URL` and `DATABASE_URL_DIRECT`
+- Authentication: `NEON_AUTH_BASE_URL`, `AUTH_URL`, `JWKS_URL`
+- AI Processing: `OPENAI_API_KEY`
+- Schedulers: `SCHEDULER_ENABLED`, various interval configurations
+
+**Key Files to Understand:**
+
+- `prisma/schema.prisma` - Complete database schema with enums and relationships
+- `server.ts` - Custom server entry point
+- `lib/env.ts` - Environment variable management and validation
+- `app/` - Next.js App Router structure
+
+**Testing:**
+
+- Uses Vitest for unit testing
+- Playwright for E2E testing
+- Test files in `tests/` directory
+
+### Important Notes
+
+**Scheduler System:**
+
+- Schedulers are optional and controlled by `SCHEDULER_ENABLED` environment variable
+- Use `pnpm dev:next-only` to run without schedulers for pure frontend development
+- Three separate schedulers handle different pipeline stages:
+  - CSV Import Scheduler (`lib/scheduler.ts`)
+  - Import Processing Scheduler (`lib/importProcessor.ts`)
+  - Session Processing Scheduler (`lib/processingScheduler.ts`)
+
+**Database Migrations:**
+
+- Always run `pnpm prisma:generate` after schema changes
+- Use `pnpm prisma:migrate` for production-ready migrations
+- Use `pnpm prisma:push` for development schema changes
+- Database uses PostgreSQL with Prisma's driver adapter for connection pooling
+
+**AI Processing:**
+
+- All AI requests are tracked for cost analysis
+- Support for multiple AI models per company
+- Time-based pricing management for accurate cost calculation
+- Processing stages can be retried on failure with retry count tracking
+
+**Code Quality Standards:**
+
+- Run `pnpm lint` and `pnpm format:check` before committing
+- TypeScript with ES modules (type: "module" in package.json)
+- React 19 with Next.js 16 App Router
+- TailwindCSS 4 for styling
+
+### Authentication Architecture
+
+**Unified Neon Auth (Better Auth):**
+
+All authentication uses Neon Auth with role-based access control via `UserRole` enum:
+
+- **Platform roles** (companyId = null): `PLATFORM_SUPER_ADMIN`, `PLATFORM_ADMIN`, `PLATFORM_SUPPORT`
+- **Company roles** (companyId set): `ADMIN`, `USER`
+
+**Key Files:**
+
+- `lib/auth/client.ts` - Client-side auth with `authClient.useSession()` hook
+- `lib/auth/server.ts` - Server-side helpers:
+  - `neonAuth()` - Get current session/user
+  - `getAuthenticatedUser()` - Get any authenticated user
+  - `getAuthenticatedCompanyUser()` - Get company users only
+  - `getAuthenticatedPlatformUser()` - Get platform users only
+  - `isPlatformRole()`, `hasPlatformAccess()` - Role checking utilities
+- `app/api/auth/[...path]/route.ts` - Neon Auth API handler
+- `app/api/auth/me/route.ts` - Returns current user data from User table
+
+**Auth Routes:**
+
+- `/auth/sign-in`, `/auth/sign-up`, `/auth/sign-out` - Auth pages
+- `/account/settings`, `/account/security` - Account management
+- `/platform/login` - Platform admin login (uses same Neon Auth)
+
+**User Data Flow:**
+
+- Neon Auth manages authentication (sessions, JWT)
+- Prisma `User` table stores `companyId` and `role` for authorization
+- Users with `companyId = null` are platform users
+- Users with `companyId` set are company users
+- `/api/auth/me` endpoint returns full user data including role
+
+**Key Auth Patterns:**
+
+```tsx
+// Client Component
+import { authClient } from "@/lib/auth/client";
+const { data, isPending } = authClient.useSession();
+
+// Server/API Route - General auth
+import { neonAuth } from "@/lib/auth/server";
+const { session, user } = await neonAuth();
+
+// Server/API Route - Company user only
+import { getAuthenticatedCompanyUser } from "@/lib/auth/server";
+const { user, company } = await getAuthenticatedCompanyUser();
+
+// Server/API Route - Platform user only
+import { getAuthenticatedPlatformUser, hasPlatformAccess } from "@/lib/auth/server";
+const { user } = await getAuthenticatedPlatformUser();
+if (!hasPlatformAccess(user.role, "PLATFORM_ADMIN")) {
+  return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+}
+```
+
+**User Creation (Passwordless in DB):**
+
+Users are created without passwords in our database. Neon Auth handles password storage:
+
+```tsx
+await prisma.user.create({
+  data: {
+    email,
+    name,
+    role: "ADMIN",
+    companyId: company.id,
+    invitedBy: currentUser.email,
+    invitedAt: new Date(),
+  },
+});
+// User completes signup via /auth/sign-up with same email
+```
diff --git a/CLAUDE.md b/CLAUDE.md
index 1cbcf3b..43c994c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,144 +1 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Development Commands
-
-**Core Development:**
-
-- `pnpm dev` - Start development server (runs custom server.ts with schedulers)
-- `pnpm dev:next-only` - Start Next.js only with Turbopack (no schedulers)
-- `pnpm build` - Build production application
-- `pnpm start` - Run production server
-
-**Code Quality:**
-
-- `pnpm lint` - Run ESLint
-- `pnpm lint:fix` - Fix ESLint issues automatically
-- `pnpm format` - Format code with Prettier
-- `pnpm format:check` - Check formatting without fixing
-
-**Database:**
-
-- `pnpm prisma:generate` - Generate Prisma client
-- `pnpm prisma:migrate` - Run database migrations
-- `pnpm prisma:push` - Push schema changes to database
-- `pnpm prisma:push:force` - Force reset database and push schema
-- `pnpm prisma:seed` - Seed database with initial data
-- `pnpm prisma:studio` - Open Prisma Studio database viewer
-
-**Testing:**
-
-- `pnpm test` - Run both Vitest and Playwright tests concurrently
-- `pnpm test:vitest` - Run Vitest tests only
-- `pnpm test:vitest:watch` - Run Vitest in watch mode
-- `pnpm test:vitest:coverage` - Run Vitest with coverage report
-- `pnpm test:coverage` - Run all tests with coverage
-
-**Markdown:**
-
-- `pnpm lint:md` - Lint Markdown files
-- `pnpm lint:md:fix` - Fix Markdown linting issues
-
-## Architecture Overview
-
-**LiveDash-Node** is a real-time analytics dashboard for monitoring user sessions with AI-powered analysis and processing pipeline.
-
-### Tech Stack
-
-- **Frontend:** Next.js 15 + React 19 + TailwindCSS 4
-- **Backend:** Next.js API Routes + Custom Node.js server
-- **Database:** PostgreSQL with Prisma ORM
-- **Authentication:** NextAuth.js
-- **AI Processing:** OpenAI API integration
-- **Visualization:** D3.js, React Leaflet, Recharts
-- **Scheduling:** Node-cron for background processing
-
-### Key Architecture Components
-
-**1. Multi-Stage Processing Pipeline**
-The system processes user sessions through distinct stages tracked in `SessionProcessingStatus`:
-
-- `CSV_IMPORT` - Import raw CSV data into `SessionImport`
-- `TRANSCRIPT_FETCH` - Fetch transcript content from URLs
-- `SESSION_CREATION` - Create normalized `Session` and `Message` records
-- `AI_ANALYSIS` - AI processing for sentiment, categorization, summaries
-- `QUESTION_EXTRACTION` - Extract questions from conversations
-
-**2. Database Architecture**
-
-- **Multi-tenant design** with `Company` as root entity
-- **Dual storage pattern**: Raw CSV data in `SessionImport`, processed data in `Session`
-- **1-to-1 relationship** between `SessionImport` and `Session` via `importId`
-- **Message parsing** into individual `Message` records with order tracking
-- **AI cost tracking** via `AIProcessingRequest` with detailed token usage
-- **Flexible AI model management** through `AIModel`, `AIModelPricing`, and `CompanyAIModel`
-
-**3. Custom Server Architecture**
-
-- `server.ts` - Custom Next.js server with configurable scheduler initialization
-- Three main schedulers: CSV import, import processing, and session processing
-- Environment-based configuration via `lib/env.ts`
-
-**4. Key Processing Libraries**
-
-- `lib/scheduler.ts` - CSV import scheduling
-- `lib/importProcessor.ts` - Raw data to Session conversion
-- `lib/processingScheduler.ts` - AI analysis pipeline
-- `lib/transcriptFetcher.ts` - External transcript fetching
-- `lib/transcriptParser.ts` - Message parsing from transcripts
-
-### Development Environment
-
-**Environment Configuration:**
-Environment variables are managed through `lib/env.ts` with .env.local file support:
-
-- Database: PostgreSQL via `DATABASE_URL` and `DATABASE_URL_DIRECT`
-- Authentication: `NEXTAUTH_SECRET`, `NEXTAUTH_URL`
-- AI Processing: `OPENAI_API_KEY`
-- Schedulers: `SCHEDULER_ENABLED`, various interval configurations
-
-**Key Files to Understand:**
-
-- `prisma/schema.prisma` - Complete database schema with enums and relationships
-- `server.ts` - Custom server entry point
-- `lib/env.ts` - Environment variable management and validation
-- `app/` - Next.js App Router structure
-
-**Testing:**
-
-- Uses Vitest for unit testing
-- Playwright for E2E testing
-- Test files in `tests/` directory
-
-### Important Notes
-
-**Scheduler System:**
-
-- Schedulers are optional and controlled by `SCHEDULER_ENABLED` environment variable
-- Use `pnpm dev:next-only` to run without schedulers for pure frontend development
-- Three separate schedulers handle different pipeline stages:
-  - CSV Import Scheduler (`lib/scheduler.ts`)
-  - Import Processing Scheduler (`lib/importProcessor.ts`)
-  - Session Processing Scheduler (`lib/processingScheduler.ts`)
-
-**Database Migrations:**
-
-- Always run `pnpm prisma:generate` after schema changes
-- Use `pnpm prisma:migrate` for production-ready migrations
-- Use `pnpm prisma:push` for development schema changes
-- Database uses PostgreSQL with Prisma's driver adapter for connection pooling
-
-**AI Processing:**
-
-- All AI requests are tracked for cost analysis
-- Support for multiple AI models per company
-- Time-based pricing management for accurate cost calculation
-- Processing stages can be retried on failure with retry count tracking
-
-**Code Quality Standards:**
-
-- Run `pnpm lint` and `pnpm format:check` before committing
-- TypeScript with ES modules (type: "module" in package.json)
-- React 19 with Next.js 15 App Router
-- TailwindCSS 4 for styling
+@AGENTS.md
diff --git a/FIXES-APPLIED.md b/FIXES-APPLIED.md
index 0150244..543d6b2 100644
--- a/FIXES-APPLIED.md
+++ b/FIXES-APPLIED.md
@@ -3,6 +3,7 @@
 ## Issues Identified
 
 From your logs:
+
 ```
 Can't reach database server at `ep-tiny-math-a2zsshve-pooler.eu-central-1.aws.neon.tech:5432`
 [NODE-CRON] [WARN] missed execution! Possible blocking IO or high CPU
@@ -11,29 +12,33 @@ Can't reach database server at `ep-tiny-math-a2zsshve-pooler.eu-central-1.aws.ne
 ## Root Causes
 
 1. **Multiple PrismaClient instances** across schedulers
-2. **No connection retry logic** for temporary failures  
+2. **No connection retry logic** for temporary failures
 3. **No connection pooling optimization** for Neon
 4. **Aggressive scheduler intervals** overwhelming database
 
 ## Fixes Applied ✅
 
 ### 1. Connection Retry Logic (`lib/database-retry.ts`)
+
 - **Automatic retry** for connection errors
 - **Exponential backoff** (1s → 2s → 4s → 10s max)
 - **Smart error detection** (only retry connection issues)
 - **Configurable retry attempts** (default: 3 retries)
 
 ### 2. Enhanced Schedulers
+
 - **Import Processor**: Added retry wrapper around main processing
 - **Session Processor**: Added retry wrapper around AI processing
 - **Graceful degradation** when database is temporarily unavailable
 
 ### 3. Singleton Pattern Enforced
+
 - **All schedulers now use** `import { prisma } from "./prisma.js"`
 - **No more separate** `new PrismaClient()` instances
 - **Shared connection pool** across all operations
 
 ### 4. Neon-Specific Optimizations
+
 - **Connection limit guidance**: 15 connections (below Neon's 20 limit)
 - **Extended timeouts**: 30s for cold start handling
 - **SSL mode requirements**: `sslmode=require` for Neon
@@ -42,6 +47,7 @@ Can't reach database server at `ep-tiny-math-a2zsshve-pooler.eu-central-1.aws.ne
 ## Immediate Actions Needed
 
 ### 1. Update Environment Variables
+
 ```bash
 # Add to .env.local
 USE_ENHANCED_POOLING=true
@@ -53,6 +59,7 @@ DATABASE_URL="postgresql://user:pass@ep-tiny-math-a2zsshve-pooler.eu-central-1.a
 ```
 
 ### 2. Reduce Scheduler Frequency (Optional)
+
 ```bash
 # Less aggressive intervals
 CSV_IMPORT_INTERVAL="*/30 * * * *"        # Every 30 min (was 15)
@@ -61,6 +68,7 @@ SESSION_PROCESSING_INTERVAL="0 */2 * * *"  # Every 2 hours (was 1)
 ```
 
 ### 3. Run Configuration Check
+
 ```bash
 pnpm db:check
 ```
@@ -71,7 +79,7 @@ pnpm db:check
 ✅ **Resource Efficiency**: Single shared connection pool  
 ✅ **Neon Optimization**: Proper connection limits and timeouts  
 ✅ **Monitoring**: Health check endpoint for visibility  
-✅ **Graceful Degradation**: Schedulers won't crash on DB issues  
+✅ **Graceful Degradation**: Schedulers won't crash on DB issues
 
 ## Monitoring
 
@@ -84,8 +92,8 @@ pnpm db:check
 
 - `lib/database-retry.ts` - New retry utilities
 - `lib/importProcessor.ts` - Added retry wrapper
-- `lib/processingScheduler.ts` - Added retry wrapper  
+- `lib/processingScheduler.ts` - Added retry wrapper
 - `docs/neon-database-optimization.md` - Neon-specific guide
 - `scripts/check-database-config.ts` - Configuration checker
 
-The connection issues should be significantly reduced with these fixes! 🎯
\ No newline at end of file
+The connection issues should be significantly reduced with these fixes! 🎯
diff --git a/app/account/[path]/page.tsx b/app/account/[path]/page.tsx
new file mode 100644
index 0000000..84026e8
--- /dev/null
+++ b/app/account/[path]/page.tsx
@@ -0,0 +1,20 @@
+import { AccountView } from "@neondatabase/auth/react";
+import { accountViewPaths } from "@neondatabase/auth/react/ui/server";
+
+export function generateStaticParams() {
+  return Object.values(accountViewPaths).map((path) => ({ path }));
+}
+
+export default async function AccountPage({
+  params,
+}: {
+  params: Promise<{ path: string }>;
+}) {
+  const { path } = await params;
+
+  return (
+    <main className="container p-4 md:p-6">
+      <AccountView path={path} />
+    </main>
+  );
+}
diff --git a/app/api/admin/database-health/route.ts b/app/api/admin/database-health/route.ts
index 8160079..0d4337f 100644
--- a/app/api/admin/database-health/route.ts
+++ b/app/api/admin/database-health/route.ts
@@ -2,16 +2,14 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { checkDatabaseConnection, prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
-
 export async function GET(request: NextRequest) {
-  try {
-    // Check if user has admin access (you may want to add proper auth here)
-    const authHeader = request.headers.get("authorization");
-    if (!authHeader || !authHeader.startsWith("Bearer ")) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-    }
+  // Check if user has admin access (you may want to add proper auth here)
+  const authHeader = request.headers.get("authorization");
+  if (!authHeader || !authHeader.startsWith("Bearer ")) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
 
+  try {
     // Basic database connectivity check
     const isConnected = await checkDatabaseConnection();
 
diff --git a/app/api/admin/refresh-sessions/route.ts b/app/api/admin/refresh-sessions/route.ts
index cac5e4f..0b87d40 100644
--- a/app/api/admin/refresh-sessions/route.ts
+++ b/app/api/admin/refresh-sessions/route.ts
@@ -1,44 +1,43 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { fetchAndParseCsv } from "../../../../lib/csvFetcher";
-import { processQueuedImports } from "../../../../lib/importProcessor";
-import { prisma } from "../../../../lib/prisma";
+import { neonAuth } from "@/lib/auth/server";
+import { fetchAndParseCsv } from "@/lib/csvFetcher";
+import { processQueuedImports } from "@/lib/importProcessor";
+import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 export async function POST(request: NextRequest) {
   try {
-    const body = await request.json();
-    let { companyId } = body;
-
-    if (!companyId) {
-      // Try to get user from prisma based on session cookie
-      try {
-        const session = await prisma.session.findFirst({
-          orderBy: { createdAt: "desc" },
-          where: {
-            /* Add session check criteria here */
-          },
-        });
-
-        if (session) {
-          companyId = session.companyId;
-        }
-      } catch (error) {
-        // Log error for server-side debugging
-        const errorMessage =
-          error instanceof Error ? error.message : String(error);
-        // Use a server-side logging approach instead of console
-        process.stderr.write(`Error fetching session: ${errorMessage}\n`);
-      }
+    // Authenticate user
+    const { session: authSession, user: authUser } = await neonAuth();
+    if (!authSession || !authUser?.email) {
+      return NextResponse.json({ error: "Not logged in" }, { status: 401 });
     }
 
-    if (!companyId) {
+    // Look up user to get companyId and role
+    const user = await prisma.user.findUnique({
+      where: { email: authUser.email },
+      select: { companyId: true, role: true },
+    });
+
+    if (!user || !user.companyId) {
       return NextResponse.json(
-        { error: "Company ID is required" },
-        { status: 400 }
+        { error: "User not found or no company" },
+        { status: 401 }
       );
     }
 
+    // Check if user has ADMIN role
+    if (user.role !== "ADMIN") {
+      return NextResponse.json(
+        { error: "Admin access required" },
+        { status: 403 }
+      );
+    }
+
+    // Use user's companyId from auth (ignore any body params for security)
+    const companyId = user.companyId;
+
     const company = await prisma.company.findUnique({
       where: { id: companyId },
     });
diff --git a/app/api/admin/trigger-processing/route.ts b/app/api/admin/trigger-processing/route.ts
index 56b6965..6dc017e 100644
--- a/app/api/admin/trigger-processing/route.ts
+++ b/app/api/admin/trigger-processing/route.ts
@@ -1,31 +1,20 @@
 import { ProcessingStage } from "@prisma/client";
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../../../lib/auth";
-import { prisma } from "../../../../lib/prisma";
-import { processUnprocessedSessions } from "../../../../lib/processingScheduler";
-import { getSessionsNeedingProcessing } from "../../../../lib/processingStatusManager";
+import { neonAuth } from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
+import { processUnprocessedSessions } from "@/lib/processingScheduler";
+import { getSessionsNeedingProcessing } from "@/lib/processingStatusManager";
 
-export const dynamic = "force-dynamic";
-
-interface SessionUser {
-  email: string;
-  name?: string;
-}
-
-interface SessionData {
-  user: SessionUser;
-}
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 export async function POST(request: NextRequest) {
-  const session = (await getServerSession(authOptions)) as SessionData | null;
-
-  if (!session?.user) {
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
     return NextResponse.json({ error: "Not logged in" }, { status: 401 });
   }
 
   const user = await prisma.user.findUnique({
-    where: { email: session.user.email },
+    where: { email: authUser.email },
     select: {
       id: true,
       email: true,
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
deleted file mode 100644
index 1fc032c..0000000
--- a/app/api/auth/[...nextauth]/route.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import NextAuth from "next-auth";
-import { authOptions } from "../../../../lib/auth";
-
-// Prevent static generation - this route needs runtime env vars
-export const dynamic = "force-dynamic";
-
-const handler = NextAuth(authOptions);
-
-export { handler as GET, handler as POST };
diff --git a/app/api/auth/[...path]/route.ts b/app/api/auth/[...path]/route.ts
new file mode 100644
index 0000000..460d2c0
--- /dev/null
+++ b/app/api/auth/[...path]/route.ts
@@ -0,0 +1,3 @@
+import { authApiHandler } from "@neondatabase/auth/next/server";
+
+export const { GET, POST } = authApiHandler();
diff --git a/app/api/auth/me/route.ts b/app/api/auth/me/route.ts
new file mode 100644
index 0000000..3c9d623
--- /dev/null
+++ b/app/api/auth/me/route.ts
@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { getAuthenticatedUser } from "@/lib/auth/server";
+
+/**
+ * GET /api/auth/me
+ * Returns the current user's data from our User table
+ */
+export async function GET() {
+  const { user } = await getAuthenticatedUser();
+
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  return NextResponse.json({
+    id: user.id,
+    email: user.email,
+    name: user.name,
+    role: user.role,
+    companyId: user.companyId,
+    company: user.company,
+  });
+}
diff --git a/app/api/dashboard/config/route.ts b/app/api/dashboard/config/route.ts
index c0c5491..7cea0eb 100644
--- a/app/api/dashboard/config/route.ts
+++ b/app/api/dashboard/config/route.ts
@@ -1,22 +1,21 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../../../lib/auth";
-import { prisma } from "../../../../lib/prisma";
+import { neonAuth } from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 export async function GET(_request: NextRequest) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
     return NextResponse.json({ error: "Not logged in" }, { status: 401 });
   }
 
   const user = await prisma.user.findUnique({
-    where: { email: session.user.email as string },
+    where: { email: authUser.email },
   });
 
-  if (!user) {
-    return NextResponse.json({ error: "No user" }, { status: 401 });
+  if (!user || !user.companyId) {
+    return NextResponse.json({ error: "No user or company" }, { status: 401 });
   }
 
   // Get company data
@@ -28,17 +27,17 @@ export async function GET(_request: NextRequest) {
 }
 
 export async function POST(request: NextRequest) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
     return NextResponse.json({ error: "Not logged in" }, { status: 401 });
   }
 
   const user = await prisma.user.findUnique({
-    where: { email: session.user.email as string },
+    where: { email: authUser.email },
   });
 
-  if (!user) {
-    return NextResponse.json({ error: "No user" }, { status: 401 });
+  if (!user || !user.companyId) {
+    return NextResponse.json({ error: "No user or company" }, { status: 401 });
   }
 
   const body = await request.json();
diff --git a/app/api/dashboard/metrics/route.ts b/app/api/dashboard/metrics/route.ts
index c2b4ef0..c7c085b 100644
--- a/app/api/dashboard/metrics/route.ts
+++ b/app/api/dashboard/metrics/route.ts
@@ -1,29 +1,19 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../../../lib/auth";
-import { sessionMetrics } from "../../../../lib/metrics";
-import { prisma } from "../../../../lib/prisma";
-import type { ChatSession } from "../../../../lib/types";
+import { neonAuth } from "@/lib/auth/server";
+import { sessionMetrics } from "@/lib/metrics";
+import { prisma } from "@/lib/prisma";
+import type { ChatSession } from "@/lib/types";
 
-export const dynamic = "force-dynamic";
-
-interface SessionUser {
-  email: string;
-  name?: string;
-}
-
-interface SessionData {
-  user: SessionUser;
-}
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 export async function GET(request: NextRequest) {
-  const session = (await getServerSession(authOptions)) as SessionData | null;
-  if (!session?.user) {
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
     return NextResponse.json({ error: "Not logged in" }, { status: 401 });
   }
 
   const user = await prisma.user.findUnique({
-    where: { email: session.user.email },
+    where: { email: authUser.email },
     select: {
       id: true,
       companyId: true,
@@ -38,8 +28,8 @@ export async function GET(request: NextRequest) {
     },
   });
 
-  if (!user) {
-    return NextResponse.json({ error: "No user" }, { status: 401 });
+  if (!user || !user.companyId) {
+    return NextResponse.json({ error: "No user or company" }, { status: 401 });
   }
 
   // Get date range from query parameters
@@ -171,7 +161,7 @@ export async function GET(request: NextRequest) {
 
   return NextResponse.json({
     metrics,
-    csvUrl: user.company.csvUrl,
+    csvUrl: user.company?.csvUrl,
     company: user.company,
     dateRange,
   });
diff --git a/app/api/dashboard/session-filter-options/route.ts b/app/api/dashboard/session-filter-options/route.ts
index 5d9c747..b55bb0a 100644
--- a/app/api/dashboard/session-filter-options/route.ts
+++ b/app/api/dashboard/session-filter-options/route.ts
@@ -1,18 +1,29 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "../../../../lib/auth";
-import { prisma } from "../../../../lib/prisma";
+import { neonAuth } from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 export async function GET(_request: NextRequest) {
-  const authSession = await getServerSession(authOptions);
-
-  if (!authSession || !authSession.user?.companyId) {
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  const companyId = authSession.user.companyId;
+  // Look up user in our database to get companyId
+  const user = await prisma.user.findUnique({
+    where: { email: authUser.email },
+    select: { companyId: true },
+  });
+
+  if (!user || !user.companyId) {
+    return NextResponse.json(
+      { error: "User not found or no company" },
+      { status: 401 }
+    );
+  }
+
+  const companyId = user.companyId;
 
   try {
     // Use groupBy for better performance with distinct values
diff --git a/app/api/dashboard/session/[id]/route.ts b/app/api/dashboard/session/[id]/route.ts
index 26f3ad2..f1ae7ff 100644
--- a/app/api/dashboard/session/[id]/route.ts
+++ b/app/api/dashboard/session/[id]/route.ts
@@ -1,8 +1,9 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { prisma } from "../../../../../lib/prisma";
-import type { ChatSession } from "../../../../../lib/types";
+import { neonAuth } from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
+import type { ChatSession } from "@/lib/types";
 
-export const dynamic = "force-dynamic";
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 export async function GET(
   _request: NextRequest,
@@ -17,6 +18,22 @@ export async function GET(
     );
   }
 
+  // Verify user is authenticated
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  // Look up user in our database to get companyId for authorization
+  const user = await prisma.user.findUnique({
+    where: { email: authUser.email },
+    select: { companyId: true },
+  });
+
+  if (!user) {
+    return NextResponse.json({ error: "User not found" }, { status: 401 });
+  }
+
   try {
     const prismaSession = await prisma.session.findUnique({
       where: { id },
@@ -31,6 +48,11 @@ export async function GET(
       return NextResponse.json({ error: "Session not found" }, { status: 404 });
     }
 
+    // Verify user has access to this session (same company)
+    if (prismaSession.companyId !== user.companyId) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
     // Map Prisma session object to ChatSession type
     const session: ChatSession = {
       // Spread prismaSession to include all its properties
diff --git a/app/api/dashboard/sessions/route.ts b/app/api/dashboard/sessions/route.ts
index a4af251..f5d7ae5 100644
--- a/app/api/dashboard/sessions/route.ts
+++ b/app/api/dashboard/sessions/route.ts
@@ -1,20 +1,31 @@
 import type { Prisma, SessionCategory } from "@prisma/client";
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "../../../../lib/auth";
-import { prisma } from "../../../../lib/prisma";
-import type { ChatSession } from "../../../../lib/types";
+import { neonAuth } from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
+import type { ChatSession } from "@/lib/types";
 
-export const dynamic = "force-dynamic";
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 export async function GET(request: NextRequest) {
-  const authSession = await getServerSession(authOptions);
-
-  if (!authSession || !authSession.user?.companyId) {
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  const companyId = authSession.user.companyId;
+  // Look up user in our database to get companyId
+  const user = await prisma.user.findUnique({
+    where: { email: authUser.email },
+    select: { companyId: true },
+  });
+
+  if (!user || !user.companyId) {
+    return NextResponse.json(
+      { error: "User not found or no company" },
+      { status: 401 }
+    );
+  }
+
+  const companyId = user.companyId;
   const { searchParams } = new URL(request.url);
 
   const searchTerm = searchParams.get("searchTerm");
diff --git a/app/api/dashboard/settings/route.ts b/app/api/dashboard/settings/route.ts
index 6960dbe..d7549eb 100644
--- a/app/api/dashboard/settings/route.ts
+++ b/app/api/dashboard/settings/route.ts
@@ -1,22 +1,31 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../../../lib/auth";
-import { prisma } from "../../../../lib/prisma";
+import { neonAuth } from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 export async function POST(request: NextRequest) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user || session.user.role !== "ADMIN") {
-    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
+  // Look up user in our database to get companyId and role
   const user = await prisma.user.findUnique({
-    where: { email: session.user.email as string },
+    where: { email: authUser.email },
+    select: { companyId: true, role: true },
   });
 
-  if (!user) {
-    return NextResponse.json({ error: "No user" }, { status: 401 });
+  if (!user || !user.companyId) {
+    return NextResponse.json(
+      { error: "User not found or no company" },
+      { status: 401 }
+    );
+  }
+
+  // Check for admin role
+  if (user.role !== "ADMIN") {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   }
 
   const body = await request.json();
diff --git a/app/api/dashboard/users/route.ts b/app/api/dashboard/users/route.ts
index eeb8e94..5951c1e 100644
--- a/app/api/dashboard/users/route.ts
+++ b/app/api/dashboard/users/route.ts
@@ -1,30 +1,38 @@
-import crypto from "node:crypto";
-import bcrypt from "bcryptjs";
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../../../lib/auth";
-import { prisma } from "../../../../lib/prisma";
+import { neonAuth } from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
 
-export const dynamic = "force-dynamic";
+// MIGRATED: Removed "export const dynamic = 'force-dynamic'" - dynamic by default with Cache Components
 
 interface UserBasicInfo {
   id: string;
   email: string;
+  name: string | null;
   role: string;
 }
 
 export async function GET(_request: NextRequest) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user || session.user.role !== "ADMIN") {
-    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
+  // Look up user in our database to get companyId and role
   const user = await prisma.user.findUnique({
-    where: { email: session.user.email as string },
+    where: { email: authUser.email },
+    select: { companyId: true, role: true },
   });
 
-  if (!user) {
-    return NextResponse.json({ error: "No user" }, { status: 401 });
+  if (!user || !user.companyId) {
+    return NextResponse.json(
+      { error: "User not found or no company" },
+      { status: 401 }
+    );
+  }
+
+  // Check for admin role
+  if (user.role !== "ADMIN") {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   }
 
   const users = await prisma.user.findMany({
@@ -34,28 +42,44 @@ export async function GET(_request: NextRequest) {
   const mappedUsers: UserBasicInfo[] = users.map((u) => ({
     id: u.id,
     email: u.email,
+    name: u.name,
     role: u.role,
   }));
 
   return NextResponse.json({ users: mappedUsers });
 }
 
+/**
+ * POST /api/dashboard/users
+ * Invite a new user to the company (creates a placeholder record)
+ * The user will need to sign up via Neon Auth using the same email
+ */
 export async function POST(request: NextRequest) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user || session.user.role !== "ADMIN") {
+  const { session: authSession, user: authUser } = await neonAuth();
+  if (!authSession || !authUser?.email) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  // Look up user in our database to get companyId and role
+  const user = await prisma.user.findUnique({
+    where: { email: authUser.email },
+    select: { companyId: true, role: true, email: true },
+  });
+
+  if (!user || !user.companyId) {
+    return NextResponse.json(
+      { error: "User not found or no company" },
+      { status: 401 }
+    );
+  }
+
+  // Check for admin role
+  if (user.role !== "ADMIN") {
     return NextResponse.json({ error: "Forbidden" }, { status: 403 });
   }
 
-  const user = await prisma.user.findUnique({
-    where: { email: session.user.email as string },
-  });
-
-  if (!user) {
-    return NextResponse.json({ error: "No user" }, { status: 401 });
-  }
-
   const body = await request.json();
-  const { email, role } = body;
+  const { email, name, role } = body;
 
   if (!email || !role) {
     return NextResponse.json({ error: "Missing fields" }, { status: 400 });
@@ -63,20 +87,28 @@ export async function POST(request: NextRequest) {
 
   const exists = await prisma.user.findUnique({ where: { email } });
   if (exists) {
-    return NextResponse.json({ error: "Email exists" }, { status: 409 });
+    return NextResponse.json(
+      { error: "Email already exists" },
+      { status: 409 }
+    );
   }
 
-  const tempPassword = crypto.randomBytes(12).toString("base64").slice(0, 12); // secure random initial password
-
+  // Create user record (they'll complete signup via Neon Auth)
   await prisma.user.create({
     data: {
       email,
-      password: await bcrypt.hash(tempPassword, 10),
+      name: name || null,
       companyId: user.companyId,
       role,
+      invitedBy: user.email,
+      invitedAt: new Date(),
     },
   });
 
-  // TODO: Email user their temp password (stub, for demo) - Implement a robust and secure email sending mechanism. Consider using a transactional email service.
-  return NextResponse.json({ ok: true, tempPassword });
+  // TODO: Send invitation email with sign-up link
+  return NextResponse.json({
+    ok: true,
+    message:
+      "User invited. They should sign up at /auth/sign-up with this email.",
+  });
 }
diff --git a/app/api/forgot-password/route.ts b/app/api/forgot-password/route.ts
deleted file mode 100644
index 9512349..0000000
--- a/app/api/forgot-password/route.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import crypto from "node:crypto";
-import { type NextRequest, NextResponse } from "next/server";
-import { prisma } from "../../../lib/prisma";
-import { sendEmail } from "../../../lib/sendEmail";
-import { forgotPasswordSchema, validateInput } from "../../../lib/validation";
-
-export const dynamic = "force-dynamic";
-
-// In-memory rate limiting for password reset requests
-const resetAttempts = new Map<string, { count: number; resetTime: number }>();
-
-function checkRateLimit(ip: string): boolean {
-  const now = Date.now();
-  const attempts = resetAttempts.get(ip);
-
-  if (!attempts || now > attempts.resetTime) {
-    resetAttempts.set(ip, { count: 1, resetTime: now + 15 * 60 * 1000 }); // 15 minute window
-    return true;
-  }
-
-  if (attempts.count >= 5) {
-    // Max 5 reset requests per 15 minutes per IP
-    return false;
-  }
-
-  attempts.count++;
-  return true;
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    // Rate limiting check
-    const ip =
-      request.headers.get("x-forwarded-for") ||
-      request.headers.get("x-real-ip") ||
-      "unknown";
-    if (!checkRateLimit(ip)) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Too many password reset attempts. Please try again later.",
-        },
-        { status: 429 }
-      );
-    }
-
-    const body = await request.json();
-
-    // Validate input
-    const validation = validateInput(forgotPasswordSchema, body);
-    if (!validation.success) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Invalid email format",
-        },
-        { status: 400 }
-      );
-    }
-
-    const { email } = validation.data;
-
-    const user = await prisma.user.findUnique({ where: { email } });
-
-    // Always return success for privacy (don't reveal if email exists)
-    // But only send email if user exists
-    if (user) {
-      const token = crypto.randomBytes(32).toString("hex");
-      const tokenHash = crypto.createHash("sha256").update(token).digest("hex");
-      const expiry = new Date(Date.now() + 1000 * 60 * 30); // 30 min expiry
-
-      await prisma.user.update({
-        where: { email },
-        data: { resetToken: tokenHash, resetTokenExpiry: expiry },
-      });
-
-      const resetUrl = `${process.env.NEXTAUTH_URL || "http://localhost:3000"}/reset-password?token=${token}`;
-      await sendEmail(
-        email,
-        "Password Reset",
-        `Reset your password: ${resetUrl}`
-      );
-    }
-
-    return NextResponse.json({ success: true }, { status: 200 });
-  } catch (error) {
-    console.error("Forgot password error:", error);
-    return NextResponse.json(
-      {
-        success: false,
-        error: "Internal server error",
-      },
-      { status: 500 }
-    );
-  }
-}
diff --git a/app/api/platform/auth/[...nextauth]/route.ts b/app/api/platform/auth/[...nextauth]/route.ts
deleted file mode 100644
index 37afa67..0000000
--- a/app/api/platform/auth/[...nextauth]/route.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import NextAuth from "next-auth";
-import { platformAuthOptions } from "../../../../../lib/platform-auth";
-
-const handler = NextAuth(platformAuthOptions);
-
-export { handler as GET, handler as POST };
diff --git a/app/api/platform/companies/[id]/route.ts b/app/api/platform/companies/[id]/route.ts
index 7f32da2..10682dd 100644
--- a/app/api/platform/companies/[id]/route.ts
+++ b/app/api/platform/companies/[id]/route.ts
@@ -1,10 +1,10 @@
 import { CompanyStatus } from "@prisma/client";
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth";
-import { platformAuthOptions } from "../../../../../lib/platform-auth";
-import { prisma } from "../../../../../lib/prisma";
-
-export const dynamic = "force-dynamic";
+import {
+  getAuthenticatedPlatformUser,
+  hasPlatformAccess,
+} from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
 
 // GET /api/platform/companies/[id] - Get company details
 export async function GET(
@@ -12,9 +12,9 @@ export async function GET(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
-    const session = await getServerSession(platformAuthOptions);
+    const { user } = await getAuthenticatedPlatformUser();
 
-    if (!session?.user?.isPlatformUser) {
+    if (!user) {
       return NextResponse.json(
         { error: "Platform access required" },
         { status: 401 }
@@ -67,12 +67,9 @@ export async function PATCH(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
-    const session = await getServerSession(platformAuthOptions);
+    const { user } = await getAuthenticatedPlatformUser();
 
-    if (
-      !session?.user?.isPlatformUser ||
-      session.user.platformRole === "SUPPORT"
-    ) {
+    if (!user || !hasPlatformAccess(user.role, "PLATFORM_ADMIN")) {
       return NextResponse.json(
         { error: "Admin access required" },
         { status: 403 }
@@ -81,12 +78,10 @@ export async function PATCH(
 
     const { id } = await params;
     const body = await request.json();
-    const { name, email, maxUsers, csvUrl, csvUsername, csvPassword, status } =
-      body;
+    const { name, maxUsers, csvUrl, csvUsername, csvPassword, status } = body;
 
     const updateData: {
       name?: string;
-      email?: string;
       maxUsers?: number;
       csvUrl?: string;
       csvUsername?: string;
@@ -94,7 +89,6 @@ export async function PATCH(
       status?: CompanyStatus;
     } = {};
     if (name !== undefined) updateData.name = name;
-    if (email !== undefined) updateData.email = email;
     if (maxUsers !== undefined) updateData.maxUsers = maxUsers;
     if (csvUrl !== undefined) updateData.csvUrl = csvUrl;
     if (csvUsername !== undefined) updateData.csvUsername = csvUsername;
@@ -122,12 +116,9 @@ export async function DELETE(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
-    const session = await getServerSession(platformAuthOptions);
+    const { user } = await getAuthenticatedPlatformUser();
 
-    if (
-      !session?.user?.isPlatformUser ||
-      session.user.platformRole !== "SUPER_ADMIN"
-    ) {
+    if (!user || !hasPlatformAccess(user.role, "PLATFORM_SUPER_ADMIN")) {
       return NextResponse.json(
         { error: "Super admin access required" },
         { status: 403 }
diff --git a/app/api/platform/companies/[id]/users/route.ts b/app/api/platform/companies/[id]/users/route.ts
index c9cfaf1..2b00a2c 100644
--- a/app/api/platform/companies/[id]/users/route.ts
+++ b/app/api/platform/companies/[id]/users/route.ts
@@ -1,10 +1,9 @@
-import { hash } from "bcryptjs";
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth";
-import { platformAuthOptions } from "../../../../../../lib/platform-auth";
-import { prisma } from "../../../../../../lib/prisma";
-
-export const dynamic = "force-dynamic";
+import {
+  getAuthenticatedPlatformUser,
+  hasPlatformAccess,
+} from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
 
 // POST /api/platform/companies/[id]/users - Invite user to company
 export async function POST(
@@ -12,11 +11,11 @@ export async function POST(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
-    const session = await getServerSession(platformAuthOptions);
+    const { user: platformUser } = await getAuthenticatedPlatformUser();
 
     if (
-      !session?.user?.isPlatformUser ||
-      session.user.platformRole === "SUPPORT"
+      !platformUser ||
+      !hasPlatformAccess(platformUser.role, "PLATFORM_ADMIN")
     ) {
       return NextResponse.json(
         { error: "Admin access required" },
@@ -53,34 +52,26 @@ export async function POST(
       );
     }
 
-    // Check if user already exists in this company
-    const existingUser = await prisma.user.findFirst({
-      where: {
-        email,
-        companyId,
-      },
+    // Check if user already exists
+    const existingUser = await prisma.user.findUnique({
+      where: { email },
     });
 
     if (existingUser) {
       return NextResponse.json(
-        { error: "User already exists in this company" },
+        { error: "User with this email already exists" },
         { status: 400 }
       );
     }
 
-    // Generate a temporary password (in a real app, you'd send an invitation email)
-    const tempPassword = `temp${Math.random().toString(36).slice(-8)}`;
-    const hashedPassword = await hash(tempPassword, 10);
-
-    // Create the user
+    // Create the user placeholder (they'll complete signup via Neon Auth)
     const user = await prisma.user.create({
       data: {
         name,
         email,
-        password: hashedPassword,
         role,
         companyId,
-        invitedBy: session.user.email,
+        invitedBy: platformUser.email,
         invitedAt: new Date(),
       },
       select: {
@@ -94,13 +85,12 @@ export async function POST(
       },
     });
 
-    // In a real application, you would send an email with login credentials
-    // For now, we'll return the temporary password
+    // TODO: Send invitation email with sign-up link
     return NextResponse.json({
       user,
-      tempPassword, // Remove this in production and send via email
+      signupUrl: "/auth/sign-up",
       message:
-        "User invited successfully. In production, credentials would be sent via email.",
+        "User invited. They should sign up at /auth/sign-up with this email.",
     });
   } catch (error) {
     console.error("Platform user invitation error:", error);
@@ -117,9 +107,9 @@ export async function GET(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
-    const session = await getServerSession(platformAuthOptions);
+    const { user } = await getAuthenticatedPlatformUser();
 
-    if (!session?.user?.isPlatformUser) {
+    if (!user) {
       return NextResponse.json(
         { error: "Platform access required" },
         { status: 401 }
diff --git a/app/api/platform/companies/route.ts b/app/api/platform/companies/route.ts
index 4516757..2be4ae0 100644
--- a/app/api/platform/companies/route.ts
+++ b/app/api/platform/companies/route.ts
@@ -1,17 +1,17 @@
 import type { CompanyStatus } from "@prisma/client";
 import { type NextRequest, NextResponse } from "next/server";
-import { getServerSession } from "next-auth";
-import { platformAuthOptions } from "../../../../lib/platform-auth";
-import { prisma } from "../../../../lib/prisma";
-
-export const dynamic = "force-dynamic";
+import {
+  getAuthenticatedPlatformUser,
+  hasPlatformAccess,
+} from "@/lib/auth/server";
+import { prisma } from "@/lib/prisma";
 
 // GET /api/platform/companies - List all companies
 export async function GET(request: NextRequest) {
   try {
-    const session = await getServerSession(platformAuthOptions);
+    const { user } = await getAuthenticatedPlatformUser();
 
-    if (!session?.user?.isPlatformUser) {
+    if (!user) {
       return NextResponse.json(
         { error: "Platform access required" },
         { status: 401 }
@@ -86,12 +86,9 @@ export async function GET(request: NextRequest) {
 // POST /api/platform/companies - Create new company
 export async function POST(request: NextRequest) {
   try {
-    const session = await getServerSession(platformAuthOptions);
+    const { user } = await getAuthenticatedPlatformUser();
 
-    if (
-      !session?.user?.isPlatformUser ||
-      session.user.platformRole === "SUPPORT"
-    ) {
+    if (!user || !hasPlatformAccess(user.role, "PLATFORM_ADMIN")) {
       return NextResponse.json(
         { error: "Admin access required" },
         { status: 403 }
@@ -106,7 +103,6 @@ export async function POST(request: NextRequest) {
       csvPassword,
       adminEmail,
       adminName,
-      adminPassword,
       maxUsers = 10,
       status = "TRIAL",
     } = body;
@@ -125,15 +121,7 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    // Generate password if not provided
-    const finalAdminPassword =
-      adminPassword || `Temp${Math.random().toString(36).slice(2, 8)}!`;
-
-    // Hash the admin password
-    const bcrypt = await import("bcryptjs");
-    const hashedPassword = await bcrypt.hash(finalAdminPassword, 12);
-
-    // Create company and admin user in a transaction
+    // Create company and admin user placeholder in a transaction
     const result = await prisma.$transaction(async (tx) => {
       // Create the company
       const company = await tx.company.create({
@@ -147,24 +135,19 @@ export async function POST(request: NextRequest) {
         },
       });
 
-      // Create the admin user
+      // Create the admin user placeholder (they'll complete signup via Neon Auth)
       const adminUser = await tx.user.create({
         data: {
           email: adminEmail,
-          password: hashedPassword,
           name: adminName,
           role: "ADMIN",
           companyId: company.id,
-          invitedBy: session.user.email || "platform",
+          invitedBy: user.email,
           invitedAt: new Date(),
         },
       });
 
-      return {
-        company,
-        adminUser,
-        generatedPassword: adminPassword ? null : finalAdminPassword,
-      };
+      return { company, adminUser };
     });
 
     return NextResponse.json(
@@ -175,7 +158,8 @@ export async function POST(request: NextRequest) {
           name: result.adminUser.name,
           role: result.adminUser.role,
         },
-        generatedPassword: result.generatedPassword,
+        // User should sign up via /auth/sign-up with this email
+        signupUrl: "/auth/sign-up",
       },
       { status: 201 }
     );
diff --git a/app/api/register/route.ts b/app/api/register/route.ts
deleted file mode 100644
index dca2a2e..0000000
--- a/app/api/register/route.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import bcrypt from "bcryptjs";
-import { type NextRequest, NextResponse } from "next/server";
-import { prisma } from "../../../lib/prisma";
-import { registerSchema, validateInput } from "../../../lib/validation";
-
-export const dynamic = "force-dynamic";
-
-// In-memory rate limiting (for production, use Redis or similar)
-const registrationAttempts = new Map<
-  string,
-  { count: number; resetTime: number }
->();
-
-function checkRateLimit(ip: string): boolean {
-  const now = Date.now();
-  const attempts = registrationAttempts.get(ip);
-
-  if (!attempts || now > attempts.resetTime) {
-    registrationAttempts.set(ip, { count: 1, resetTime: now + 60 * 60 * 1000 }); // 1 hour window
-    return true;
-  }
-
-  if (attempts.count >= 3) {
-    // Max 3 registrations per hour per IP
-    return false;
-  }
-
-  attempts.count++;
-  return true;
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    // Rate limiting check
-    const ip = request.headers.get("x-forwarded-for") || "unknown";
-    if (!checkRateLimit(ip)) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Too many registration attempts. Please try again later.",
-        },
-        { status: 429 }
-      );
-    }
-
-    const body = await request.json();
-
-    // Validate input with Zod schema
-    const validation = validateInput(registerSchema, body);
-    if (!validation.success) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Validation failed",
-          details: validation.errors,
-        },
-        { status: 400 }
-      );
-    }
-
-    const { email, password, company } = validation.data;
-
-    // Check if email exists
-    const existingUser = await prisma.user.findUnique({
-      where: { email },
-    });
-
-    if (existingUser) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Email already exists",
-        },
-        { status: 409 }
-      );
-    }
-
-    // Check if company name already exists
-    const existingCompany = await prisma.company.findFirst({
-      where: { name: company },
-    });
-
-    if (existingCompany) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Company name already exists",
-        },
-        { status: 409 }
-      );
-    }
-
-    // Create company and user in a transaction
-    const result = await prisma.$transaction(async (tx) => {
-      const newCompany = await tx.company.create({
-        data: {
-          name: company,
-          csvUrl: "", // Empty by default, can be set later in settings
-        },
-      });
-
-      const hashedPassword = await bcrypt.hash(password, 12); // Increased rounds for better security
-
-      const newUser = await tx.user.create({
-        data: {
-          email,
-          password: hashedPassword,
-          companyId: newCompany.id,
-          role: "USER", // Changed from ADMIN - users should be promoted by existing admins
-        },
-      });
-
-      return { company: newCompany, user: newUser };
-    });
-
-    return NextResponse.json(
-      {
-        success: true,
-        data: {
-          message: "Registration successful",
-          userId: result.user.id,
-          companyId: result.company.id,
-        },
-      },
-      { status: 201 }
-    );
-  } catch (error) {
-    console.error("Registration error:", error);
-    return NextResponse.json(
-      {
-        success: false,
-        error: "Internal server error",
-      },
-      { status: 500 }
-    );
-  }
-}
diff --git a/app/api/reset-password/route.ts b/app/api/reset-password/route.ts
deleted file mode 100644
index 9cbbeb3..0000000
--- a/app/api/reset-password/route.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import crypto from "node:crypto";
-import bcrypt from "bcryptjs";
-import { type NextRequest, NextResponse } from "next/server";
-import { prisma } from "../../../lib/prisma";
-import { resetPasswordSchema, validateInput } from "../../../lib/validation";
-
-export const dynamic = "force-dynamic";
-
-export async function POST(request: NextRequest) {
-  try {
-    const body = await request.json();
-
-    // Validate input with strong password requirements
-    const validation = validateInput(resetPasswordSchema, body);
-    if (!validation.success) {
-      return NextResponse.json(
-        {
-          success: false,
-          error: "Validation failed",
-          details: validation.errors,
-        },
-        { status: 400 }
-      );
-    }
-
-    const { token, password } = validation.data;
-
-    // Hash the token to compare with stored hash
-    const tokenHash = crypto.createHash("sha256").update(token).digest("hex");
-
-    const user = await prisma.user.findFirst({
-      where: {
-        resetToken: tokenHash,
-        resetTokenExpiry: { gte: new Date() },
-      },
-    });
-
-    if (!user) {
-      return NextResponse.json(
-        {
-          success: false,
-          error:
-            "Invalid or expired token. Please request a new password reset.",
-        },
-        { status: 400 }
-      );
-    }
-
-    // Hash password with higher rounds for better security
-    const hashedPassword = await bcrypt.hash(password, 12);
-
-    await prisma.user.update({
-      where: { id: user.id },
-      data: {
-        password: hashedPassword,
-        resetToken: null,
-        resetTokenExpiry: null,
-      },
-    });
-
-    return NextResponse.json(
-      {
-        success: true,
-        message: "Password has been reset successfully.",
-      },
-      { status: 200 }
-    );
-  } catch (error) {
-    console.error("Reset password error:", error);
-    return NextResponse.json(
-      {
-        success: false,
-        error: "An internal server error occurred. Please try again later.",
-      },
-      { status: 500 }
-    );
-  }
-}
diff --git a/app/auth/[path]/page.tsx b/app/auth/[path]/page.tsx
new file mode 100644
index 0000000..988134d
--- /dev/null
+++ b/app/auth/[path]/page.tsx
@@ -0,0 +1,19 @@
+import { AuthView } from "@neondatabase/auth/react";
+
+export function generateStaticParams() {
+  return [{ path: "sign-in" }, { path: "sign-up" }, { path: "sign-out" }];
+}
+
+export default async function AuthPage({
+  params,
+}: {
+  params: Promise<{ path: string }>;
+}) {
+  const { path } = await params;
+
+  return (
+    <main className="container mx-auto flex grow flex-col items-center justify-center gap-3 self-center p-4 md:p-6">
+      <AuthView path={path} />
+    </main>
+  );
+}
diff --git a/app/dashboard/company/page.tsx b/app/dashboard/company/page.tsx
index 7d09348..260846c 100644
--- a/app/dashboard/company/page.tsx
+++ b/app/dashboard/company/page.tsx
@@ -1,20 +1,20 @@
 "use client";
 
 import { Database, Save, Settings, ShieldX } from "lucide-react";
-import { useSession } from "next-auth/react";
 import { useEffect, useId, useState } from "react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import type { Company } from "../../../lib/types";
+import { authClient } from "@/lib/auth/client";
+import type { Company } from "@/lib/types";
 
 export default function CompanySettingsPage() {
   const csvUrlId = useId();
   const csvUsernameId = useId();
   const csvPasswordId = useId();
-  const { data: session, status } = useSession();
+  const { data, isPending } = authClient.useSession();
   // We store the full company object for future use and updates after save operations
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   const [_company, setCompany] = useState<Company | null>(null);
@@ -25,7 +25,7 @@ export default function CompanySettingsPage() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (status === "authenticated") {
+    if (!isPending && data?.session) {
       const fetchCompany = async () => {
         setLoading(true);
         try {
@@ -46,7 +46,7 @@ export default function CompanySettingsPage() {
       };
       fetchCompany();
     }
-  }, [status]);
+  }, [isPending, data]);
 
   async function handleSave() {
     setMessage("");
@@ -99,8 +99,8 @@ export default function CompanySettingsPage() {
     );
   }
 
-  // Check for ADMIN access
-  if (session?.user?.role !== "ADMIN") {
+  // Check for admin access
+  if (data?.user?.role !== "admin") {
     return (
       <div className="space-y-6">
         <Card>
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index 56e3515..10442d8 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
 import { type ReactNode, useCallback, useEffect, useId, useState } from "react";
-import Sidebar from "../../components/Sidebar";
+import Sidebar from "@/components/Sidebar";
+import { authClient } from "@/lib/auth/client";
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   const mainContentId = useId();
-  const { status } = useSession();
+  const { data, isPending } = authClient.useSession();
   const router = useRouter();
 
   const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
@@ -40,19 +40,21 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
     }
   }, [isMobile]);
 
-  if (status === "unauthenticated") {
-    router.push("/login");
+  // Redirect handled by middleware, but show loading state
+  if (isPending) {
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="text-center">Redirecting to login...</div>
+        <div className="text-center">Loading session...</div>
       </div>
     );
   }
 
-  if (status === "loading") {
+  // If no session after loading, redirect to sign-in
+  if (!data?.session) {
+    router.push("/auth/sign-in");
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="text-center">Loading session...</div>
+        <div className="text-center">Redirecting to login...</div>
       </div>
     );
   }
@@ -76,7 +78,6 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
           }
           sm:pr-6 md:py-6 md:pr-10`}
       >
-        {/* <div className="w-full mx-auto">{children}</div> */}
         <div className="max-w-7xl mx-auto">{children}</div>
       </main>
     </div>
diff --git a/app/dashboard/overview/page.tsx b/app/dashboard/overview/page.tsx
index e9478e5..b9d90e6 100644
--- a/app/dashboard/overview/page.tsx
+++ b/app/dashboard/overview/page.tsx
@@ -16,8 +16,13 @@ import {
 } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
-import { signOut, useSession } from "next-auth/react";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";
+import ModernBarChart from "@/components/charts/bar-chart";
+import ModernDonutChart from "@/components/charts/donut-chart";
+import ModernLineChart from "@/components/charts/line-chart";
+import GeographicMap from "@/components/GeographicMap";
+import ResponseTimeDistribution from "@/components/ResponseTimeDistribution";
+import TopQuestionsChart from "@/components/TopQuestionsChart";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -27,19 +32,14 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import MetricCard from "@/components/ui/metric-card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { authClient } from "@/lib/auth/client";
 import { formatEnumValue } from "@/lib/format-enums";
-import ModernBarChart from "../../../components/charts/bar-chart";
-import ModernDonutChart from "../../../components/charts/donut-chart";
-import ModernLineChart from "../../../components/charts/line-chart";
-import GeographicMap from "../../../components/GeographicMap";
-import ResponseTimeDistribution from "../../../components/ResponseTimeDistribution";
-import TopQuestionsChart from "../../../components/TopQuestionsChart";
-import MetricCard from "../../../components/ui/metric-card";
-import type { Company, MetricsResult } from "../../../lib/types";
+import type { Company, MetricsResult } from "@/lib/types";
 
 // Dynamic import for heavy D3-based WordCloud component (~50KB)
-const WordCloud = dynamic(() => import("../../../components/WordCloud"), {
+const WordCloud = dynamic(() => import("@/components/WordCloud"), {
   ssr: false,
   loading: () => (
     <div className="h-[300px] flex items-center justify-center">
@@ -50,7 +50,7 @@ const WordCloud = dynamic(() => import("../../../components/WordCloud"), {
 
 // Safely wrapped component with useSession
 function DashboardContent() {
-  const { data: session, status } = useSession();
+  const { data, isPending } = authClient.useSession();
   const router = useRouter();
   const [metrics, setMetrics] = useState<MetricsResult | null>(null);
   const [company, setCompany] = useState<Company | null>(null);
@@ -59,7 +59,7 @@ function DashboardContent() {
   const [isInitialLoad, setIsInitialLoad] = useState<boolean>(true);
 
   const refreshStatusId = useId();
-  const isAuditor = session?.user?.role === "AUDITOR";
+  // Role-based restrictions removed - all authenticated users have same access
 
   // Function to fetch metrics with optional date range
   const fetchMetrics = useCallback(
@@ -92,19 +92,18 @@ function DashboardContent() {
 
   useEffect(() => {
     // Redirect if not authenticated
-    if (status === "unauthenticated") {
-      router.push("/login");
+    if (!isPending && !data?.session) {
+      router.push("/auth/sign-in");
       return;
     }
 
     // Fetch metrics and company on mount if authenticated
-    if (status === "authenticated" && isInitialLoad) {
+    if (!isPending && data?.session && isInitialLoad) {
       fetchMetrics(undefined, undefined, true);
     }
-  }, [status, router, isInitialLoad, fetchMetrics]);
+  }, [isPending, data, router, isInitialLoad, fetchMetrics]);
 
   const handleRefresh = useCallback(async () => {
-    if (isAuditor) return;
     if (!company?.id) {
       alert("Cannot refresh: Company ID is missing");
       return;
@@ -132,7 +131,7 @@ function DashboardContent() {
     } finally {
       setRefreshing(false);
     }
-  }, [isAuditor, company?.id]);
+  }, [company?.id]);
 
   // Memoized data preparation - must be before any early returns (Rules of Hooks)
   const sentimentData = useMemo(() => {
@@ -222,7 +221,7 @@ function DashboardContent() {
   }, [metrics?.avgResponseTime]);
 
   // Show loading state while session status is being determined
-  if (status === "loading") {
+  if (isPending) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center space-y-4">
@@ -233,7 +232,7 @@ function DashboardContent() {
     );
   }
 
-  if (status === "unauthenticated") {
+  if (!isPending && !data?.session) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
         <div className="text-center">
@@ -335,7 +334,7 @@ function DashboardContent() {
             <div className="flex items-center gap-2">
               <Button
                 onClick={handleRefresh}
-                disabled={refreshing || isAuditor}
+                disabled={refreshing}
                 size="sm"
                 className="gap-2"
                 aria-label={
@@ -369,7 +368,15 @@ function DashboardContent() {
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                   <DropdownMenuItem
-                    onClick={() => signOut({ callbackUrl: "/login" })}
+                    onClick={async () => {
+                      await authClient.signOut({
+                        fetchOptions: {
+                          onSuccess: () => {
+                            window.location.href = "/auth/sign-in";
+                          },
+                        },
+                      });
+                    }}
                   >
                     <LogOut className="h-4 w-4 mr-2" aria-hidden="true" />
                     Sign out
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 1899b31..8093c36 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -11,25 +11,25 @@ import {
   Zap,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
 import { type FC, useCallback, useEffect, useMemo, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { authClient } from "@/lib/auth/client";
 
 const DashboardPage: FC = () => {
-  const { data: session, status } = useSession();
+  const { data, isPending } = authClient.useSession();
   const router = useRouter();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     // Once session is loaded, redirect appropriately
-    if (status === "unauthenticated") {
-      router.push("/login");
-    } else if (status === "authenticated") {
+    if (!isPending && !data?.session) {
+      router.push("/auth/sign-in");
+    } else if (!isPending && data?.session) {
       setLoading(false);
     }
-  }, [status, router]);
+  }, [isPending, data, router]);
 
   // Memoize navigation cards - only recalculates when user role changes
   const navigationCards = useMemo(() => {
@@ -56,7 +56,7 @@ const DashboardPage: FC = () => {
       },
     ];
 
-    if (session?.user?.role === "ADMIN") {
+    if (data?.user?.role === "admin") {
       return [
         ...baseCards,
         {
@@ -86,7 +86,7 @@ const DashboardPage: FC = () => {
       ];
     }
     return baseCards;
-  }, [session?.user?.role]);
+  }, [data?.user?.role]);
 
   // Memoize class getter functions
   const getCardClasses = useCallback((variant: string) => {
@@ -150,13 +150,13 @@ const DashboardPage: FC = () => {
             <div className="space-y-3">
               <div className="flex items-center gap-3">
                 <h1 className="text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-linear-to-r from-foreground to-foreground/70">
-                  Welcome back, {session?.user?.name || "User"}!
+                  Welcome back, {data?.user?.name || "User"}!
                 </h1>
                 <Badge
                   variant="secondary"
                   className="text-xs px-3 py-1 bg-primary/10 text-primary border-primary/20"
                 >
-                  {session?.user?.role}
+                  {data?.user?.role}
                 </Badge>
               </div>
               <p className="text-muted-foreground text-lg">
diff --git a/app/dashboard/sessions/[id]/SessionViewClient.tsx b/app/dashboard/sessions/[id]/SessionViewClient.tsx
new file mode 100644
index 0000000..d3b7655
--- /dev/null
+++ b/app/dashboard/sessions/[id]/SessionViewClient.tsx
@@ -0,0 +1,326 @@
+"use client";
+
+import {
+  Activity,
+  AlertCircle,
+  ArrowLeft,
+  Clock,
+  ExternalLink,
+  FileText,
+  Globe,
+  MessageSquare,
+  User,
+} from "lucide-react";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import MessageViewer from "@/components/MessageViewer";
+import SessionDetails from "@/components/SessionDetails";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { authClient } from "@/lib/auth/client";
+import { formatCategory } from "@/lib/format-enums";
+import type { ChatSession } from "@/lib/types";
+
+export default function SessionViewClient() {
+  const params = useParams();
+  const router = useRouter(); // Initialize useRouter
+  const { data: authData, isPending } = authClient.useSession(); // Get session status
+  const id = params?.id as string;
+  const [session, setSession] = useState<ChatSession | null>(null);
+  const [loading, setLoading] = useState(true); // This will now primarily be for data fetching
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isPending && !authData?.session) {
+      router.push("/auth/sign-in");
+      return;
+    }
+
+    if (!isPending && authData?.session && id) {
+      const fetchSession = async () => {
+        setLoading(true); // Always set loading before fetch
+        setError(null);
+        try {
+          const response = await fetch(`/api/dashboard/session/${id}`);
+          if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(
+              errorData.error ||
+                `Failed to fetch session: ${response.statusText}`
+            );
+          }
+          const data = await response.json();
+          setSession(data.session);
+        } catch (err) {
+          setError(
+            err instanceof Error ? err.message : "An unknown error occurred"
+          );
+          setSession(null);
+        } finally {
+          setLoading(false);
+        }
+      };
+      fetchSession();
+    } else if (!isPending && authData?.session && !id) {
+      setError("Session ID is missing.");
+      setLoading(false);
+    }
+  }, [id, isPending, authData, router]);
+
+  if (isPending) {
+    return (
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              Loading session...
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!isPending && !authData?.session) {
+    return (
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              Redirecting to login...
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (loading && !isPending && authData?.session) {
+    return (
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              Loading session details...
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8">
+              <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
+              <p className="text-destructive text-lg mb-4">Error: {error}</p>
+              <Link href="/dashboard/sessions">
+                <Button variant="outline" className="gap-2">
+                  <ArrowLeft className="h-4 w-4" />
+                  Back to Sessions List
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!session) {
+    return (
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8">
+              <MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+              <p className="text-muted-foreground text-lg mb-4">
+                Session not found.
+              </p>
+              <Link href="/dashboard/sessions">
+                <Button variant="outline" className="gap-2">
+                  <ArrowLeft className="h-4 w-4" />
+                  Back to Sessions List
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 max-w-6xl mx-auto">
+      {/* Header */}
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <div className="space-y-2">
+              <Link href="/dashboard/sessions">
+                <Button
+                  variant="ghost"
+                  className="gap-2 p-0 h-auto focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                  aria-label="Return to sessions list"
+                >
+                  <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+                  Back to Sessions List
+                </Button>
+              </Link>
+              <div className="space-y-2">
+                <h1 className="text-3xl font-bold">Session Details</h1>
+                <div className="flex items-center gap-3">
+                  <Badge variant="outline" className="font-mono text-xs">
+                    ID
+                  </Badge>
+                  <code className="text-sm text-muted-foreground font-mono">
+                    {(session.sessionId || session.id).slice(0, 8)}...
+                  </code>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {session.category && (
+                <Badge variant="secondary" className="gap-1">
+                  <Activity className="h-3 w-3" />
+                  {formatCategory(session.category)}
+                </Badge>
+              )}
+              {session.language && (
+                <Badge variant="outline" className="gap-1">
+                  <Globe className="h-3 w-3" />
+                  {session.language.toUpperCase()}
+                </Badge>
+              )}
+              {session.sentiment && (
+                <Badge
+                  variant={
+                    session.sentiment === "positive"
+                      ? "default"
+                      : session.sentiment === "negative"
+                        ? "destructive"
+                        : "secondary"
+                  }
+                  className="gap-1"
+                >
+                  {session.sentiment.charAt(0).toUpperCase() +
+                    session.sentiment.slice(1)}
+                </Badge>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Session Overview */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <Clock className="h-8 w-8 text-blue-500" />
+              <div>
+                <p className="text-sm text-muted-foreground">Start Time</p>
+                <p className="font-semibold">
+                  {new Date(session.startTime).toLocaleString()}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <MessageSquare className="h-8 w-8 text-green-500" />
+              <div>
+                <p className="text-sm text-muted-foreground">Messages</p>
+                <p className="font-semibold">{session.messages?.length || 0}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <User className="h-8 w-8 text-purple-500" />
+              <div>
+                <p className="text-sm text-muted-foreground">User ID</p>
+                <p className="font-semibold truncate">
+                  {session.userId || "N/A"}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <Activity className="h-8 w-8 text-orange-500" />
+              <div>
+                <p className="text-sm text-muted-foreground">Duration</p>
+                <p className="font-semibold">
+                  {session.endTime && session.startTime
+                    ? `${Math.round(
+                        (new Date(session.endTime).getTime() -
+                          new Date(session.startTime).getTime()) /
+                          60000
+                      )} min`
+                    : "N/A"}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Session Details */}
+      <SessionDetails session={session} />
+
+      {/* Messages */}
+      {session.messages && session.messages.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MessageSquare className="h-5 w-5" />
+              Conversation ({session.messages.length} messages)
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <MessageViewer messages={session.messages} />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Transcript URL */}
+      {session.fullTranscriptUrl && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText className="h-5 w-5" />
+              Source Transcript
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <a
+              href={session.fullTranscriptUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-sm"
+              aria-label="Open original transcript in new tab"
+            >
+              <ExternalLink className="h-4 w-4" aria-hidden="true" />
+              View Original Transcript
+            </a>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/app/dashboard/sessions/[id]/page.tsx b/app/dashboard/sessions/[id]/page.tsx
index dfea2f7..91ad0ee 100644
--- a/app/dashboard/sessions/[id]/page.tsx
+++ b/app/dashboard/sessions/[id]/page.tsx
@@ -1,326 +1,36 @@
-"use client";
+import { Suspense } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import SessionViewClient from "./SessionViewClient";
 
-import {
-  Activity,
-  AlertCircle,
-  ArrowLeft,
-  Clock,
-  ExternalLink,
-  FileText,
-  Globe,
-  MessageSquare,
-  User,
-} from "lucide-react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { useEffect, useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { formatCategory } from "@/lib/format-enums";
-import MessageViewer from "../../../../components/MessageViewer";
-import SessionDetails from "../../../../components/SessionDetails";
-import type { ChatSession } from "../../../../lib/types";
+export const metadata = {
+  title: "Session Details | LiveDash",
+  description: "View detailed session information and conversation history",
+};
 
-export default function SessionViewPage() {
-  const params = useParams();
-  const router = useRouter(); // Initialize useRouter
-  const { status } = useSession(); // Get session status, removed unused sessionData
-  const id = params?.id as string;
-  const [session, setSession] = useState<ChatSession | null>(null);
-  const [loading, setLoading] = useState(true); // This will now primarily be for data fetching
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (status === "unauthenticated") {
-      router.push("/login");
-      return;
-    }
-
-    if (status === "authenticated" && id) {
-      const fetchSession = async () => {
-        setLoading(true); // Always set loading before fetch
-        setError(null);
-        try {
-          const response = await fetch(`/api/dashboard/session/${id}`);
-          if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(
-              errorData.error ||
-                `Failed to fetch session: ${response.statusText}`
-            );
-          }
-          const data = await response.json();
-          setSession(data.session);
-        } catch (err) {
-          setError(
-            err instanceof Error ? err.message : "An unknown error occurred"
-          );
-          setSession(null);
-        } finally {
-          setLoading(false);
-        }
-      };
-      fetchSession();
-    } else if (status === "authenticated" && !id) {
-      setError("Session ID is missing.");
-      setLoading(false);
-    }
-  }, [id, status, router]); // session removed from dependencies
-
-  if (status === "loading") {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-center py-8 text-muted-foreground">
-              Loading session...
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  if (status === "unauthenticated") {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-center py-8 text-muted-foreground">
-              Redirecting to login...
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  if (loading && status === "authenticated") {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-center py-8 text-muted-foreground">
-              Loading session details...
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-center py-8">
-              <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
-              <p className="text-destructive text-lg mb-4">Error: {error}</p>
-              <Link href="/dashboard/sessions">
-                <Button variant="outline" className="gap-2">
-                  <ArrowLeft className="h-4 w-4" />
-                  Back to Sessions List
-                </Button>
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  if (!session) {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-center py-8">
-              <MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-              <p className="text-muted-foreground text-lg mb-4">
-                Session not found.
-              </p>
-              <Link href="/dashboard/sessions">
-                <Button variant="outline" className="gap-2">
-                  <ArrowLeft className="h-4 w-4" />
-                  Back to Sessions List
-                </Button>
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
+// Provide at least one sample param for build-time validation
+// Runtime params not in this list will be handled dynamically
+export async function generateStaticParams() {
+  return [{ id: "sample" }];
+}
 
+function SessionLoadingFallback() {
   return (
-    <div className="space-y-6 max-w-6xl mx-auto">
-      {/* Header */}
+    <div className="space-y-6">
       <Card>
         <CardContent className="pt-6">
-          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-            <div className="space-y-2">
-              <Link href="/dashboard/sessions">
-                <Button
-                  variant="ghost"
-                  className="gap-2 p-0 h-auto focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-                  aria-label="Return to sessions list"
-                >
-                  <ArrowLeft className="h-4 w-4" aria-hidden="true" />
-                  Back to Sessions List
-                </Button>
-              </Link>
-              <div className="space-y-2">
-                <h1 className="text-3xl font-bold">Session Details</h1>
-                <div className="flex items-center gap-3">
-                  <Badge variant="outline" className="font-mono text-xs">
-                    ID
-                  </Badge>
-                  <code className="text-sm text-muted-foreground font-mono">
-                    {(session.sessionId || session.id).slice(0, 8)}...
-                  </code>
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              {session.category && (
-                <Badge variant="secondary" className="gap-1">
-                  <Activity className="h-3 w-3" />
-                  {formatCategory(session.category)}
-                </Badge>
-              )}
-              {session.language && (
-                <Badge variant="outline" className="gap-1">
-                  <Globe className="h-3 w-3" />
-                  {session.language.toUpperCase()}
-                </Badge>
-              )}
-              {session.sentiment && (
-                <Badge
-                  variant={
-                    session.sentiment === "positive"
-                      ? "default"
-                      : session.sentiment === "negative"
-                        ? "destructive"
-                        : "secondary"
-                  }
-                  className="gap-1"
-                >
-                  {session.sentiment.charAt(0).toUpperCase() +
-                    session.sentiment.slice(1)}
-                </Badge>
-              )}
-            </div>
+          <div className="text-center py-8 text-muted-foreground">
+            Loading session...
           </div>
         </CardContent>
       </Card>
-
-      {/* Session Overview */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-3">
-              <Clock className="h-8 w-8 text-blue-500" />
-              <div>
-                <p className="text-sm text-muted-foreground">Start Time</p>
-                <p className="font-semibold">
-                  {new Date(session.startTime).toLocaleString()}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-3">
-              <MessageSquare className="h-8 w-8 text-green-500" />
-              <div>
-                <p className="text-sm text-muted-foreground">Messages</p>
-                <p className="font-semibold">{session.messages?.length || 0}</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-3">
-              <User className="h-8 w-8 text-purple-500" />
-              <div>
-                <p className="text-sm text-muted-foreground">User ID</p>
-                <p className="font-semibold truncate">
-                  {session.userId || "N/A"}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-3">
-              <Activity className="h-8 w-8 text-orange-500" />
-              <div>
-                <p className="text-sm text-muted-foreground">Duration</p>
-                <p className="font-semibold">
-                  {session.endTime && session.startTime
-                    ? `${Math.round(
-                        (new Date(session.endTime).getTime() -
-                          new Date(session.startTime).getTime()) /
-                          60000
-                      )} min`
-                    : "N/A"}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Session Details */}
-      <SessionDetails session={session} />
-
-      {/* Messages */}
-      {session.messages && session.messages.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <MessageSquare className="h-5 w-5" />
-              Conversation ({session.messages.length} messages)
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <MessageViewer messages={session.messages} />
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Transcript URL */}
-      {session.fullTranscriptUrl && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <FileText className="h-5 w-5" />
-              Source Transcript
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <a
-              href={session.fullTranscriptUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-sm"
-              aria-label="Open original transcript in new tab"
-            >
-              <ExternalLink className="h-4 w-4" aria-hidden="true" />
-              View Original Transcript
-            </a>
-          </CardContent>
-        </Card>
-      )}
     </div>
   );
 }
+
+export default function SessionViewPage() {
+  return (
+    <Suspense fallback={<SessionLoadingFallback />}>
+      <SessionViewClient />
+    </Suspense>
+  );
+}
diff --git a/app/dashboard/sessions/page.tsx b/app/dashboard/sessions/page.tsx
index d8de081..22c306b 100644
--- a/app/dashboard/sessions/page.tsx
+++ b/app/dashboard/sessions/page.tsx
@@ -20,7 +20,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { formatCategory } from "@/lib/format-enums";
-import type { ChatSession } from "../../../lib/types";
+import type { ChatSession } from "@/lib/types";
 
 // State types
 interface FilterState {
diff --git a/app/dashboard/settings.tsx b/app/dashboard/settings.tsx
index 17c5f10..acabd86 100644
--- a/app/dashboard/settings.tsx
+++ b/app/dashboard/settings.tsx
@@ -1,11 +1,10 @@
 "use client";
-import type { Session } from "next-auth";
 import { useState } from "react";
-import type { Company } from "../../lib/types";
+import type { Company, UserSession } from "@/lib/types";
 
 interface DashboardSettingsProps {
   company: Company;
-  session: Session;
+  session: UserSession;
 }
 
 export default function DashboardSettings({
diff --git a/app/dashboard/users.tsx b/app/dashboard/users.tsx
index 3d145c7..fd68bf2 100644
--- a/app/dashboard/users.tsx
+++ b/app/dashboard/users.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
-import type { UserSession } from "../../lib/types";
+import type { UserSession } from "@/lib/types";
 
 interface UserItem {
   id: string;
diff --git a/app/dashboard/users/page.tsx b/app/dashboard/users/page.tsx
index fe36ac1..52b6d4d 100644
--- a/app/dashboard/users/page.tsx
+++ b/app/dashboard/users/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { AlertCircle, Eye, Shield, UserPlus, Users } from "lucide-react";
-import { useSession } from "next-auth/react";
+import { AlertCircle, Shield, UserPlus, Users } from "lucide-react";
 import { useCallback, useEffect, useId, useState } from "react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
@@ -24,6 +23,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { authClient } from "@/lib/auth/client";
 
 interface UserItem {
   id: string;
@@ -32,10 +32,10 @@ interface UserItem {
 }
 
 export default function UserManagementPage() {
-  const { data: session, status } = useSession();
+  const { data, isPending } = authClient.useSession();
   const [users, setUsers] = useState<UserItem[]>([]);
   const [email, setEmail] = useState<string>("");
-  const [role, setRole] = useState<string>("USER");
+  const [role, setRole] = useState<string>("user");
   const [message, setMessage] = useState<string>("");
   const [loading, setLoading] = useState(true);
   const emailId = useId();
@@ -55,16 +55,16 @@ export default function UserManagementPage() {
   }, []);
 
   useEffect(() => {
-    if (status === "authenticated") {
-      if (session?.user?.role === "ADMIN") {
+    if (!isPending && data?.session) {
+      if (data?.user?.role === "admin") {
         fetchUsers();
       } else {
         setLoading(false); // Stop loading for non-admin users
       }
-    } else if (status === "unauthenticated") {
+    } else if (!isPending && !data?.session) {
       setLoading(false);
     }
-  }, [status, session?.user?.role, fetchUsers]);
+  }, [isPending, data, fetchUsers]);
 
   async function inviteUser() {
     setMessage("");
@@ -108,7 +108,7 @@ export default function UserManagementPage() {
   }
 
   // Check for admin access
-  if (session?.user?.role !== "ADMIN") {
+  if (data?.user?.role !== "admin") {
     return (
       <div className="space-y-6">
         <Card>
@@ -185,9 +185,8 @@ export default function UserManagementPage() {
                   <SelectValue placeholder="Select role" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="USER">User</SelectItem>
-                  <SelectItem value="ADMIN">Admin</SelectItem>
-                  <SelectItem value="AUDITOR">Auditor</SelectItem>
+                  <SelectItem value="user">User</SelectItem>
+                  <SelectItem value="admin">Admin</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -237,21 +236,14 @@ export default function UserManagementPage() {
                       <TableCell>
                         <Badge
                           variant={
-                            user.role === "ADMIN"
-                              ? "default"
-                              : user.role === "AUDITOR"
-                                ? "secondary"
-                                : "outline"
+                            user.role === "admin" ? "default" : "outline"
                           }
                           className="gap-1"
                           data-testid="role-badge"
                         >
-                          {user.role === "ADMIN" && (
+                          {user.role === "admin" && (
                             <Shield className="h-3 w-3" />
                           )}
-                          {user.role === "AUDITOR" && (
-                            <Eye className="h-3 w-3" />
-                          )}
                           {user.role}
                         </Badge>
                       </TableCell>
diff --git a/app/forgot-password/page.tsx b/app/forgot-password/page.tsx
deleted file mode 100644
index 5c21ae9..0000000
--- a/app/forgot-password/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-import { useState } from "react";
-
-export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState<string>("");
-  const [message, setMessage] = useState<string>("");
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    const res = await fetch("/api/forgot-password", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email }),
-    });
-    if (res.ok) setMessage("If that email exists, a reset link has been sent.");
-    else setMessage("Failed. Try again.");
-  }
-
-  return (
-    <div className="max-w-md mx-auto mt-24 bg-white rounded-xl p-8 shadow">
-      <h1 className="text-2xl font-bold mb-6">Forgot Password</h1>
-      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-        <input
-          className="border px-3 py-2 rounded"
-          type="email"
-          placeholder="Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <button className="bg-blue-600 text-white rounded py-2" type="submit">
-          Send Reset Link
-        </button>
-      </form>
-      <div className="mt-4 text-green-700">{message}</div>
-    </div>
-  );
-}
diff --git a/app/globals.css b/app/globals.css
index 5cae55d..173df1f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "@neondatabase/auth/ui/tailwind";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 3392754..1b029a5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,14 @@
 // Main app layout with basic global style
 import "./globals.css";
+import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import { Toaster } from "@/components/ui/sonner";
 import { Providers } from "./providers";
 
-export const metadata = {
+// Use production URL as default for metadataBase (required for static generation)
+const baseUrl = "https://livedash.notso.ai";
+
+export const metadata: Metadata = {
   title: "LiveDash - AI-Powered Customer Conversation Analytics",
   description:
     "Transform customer conversations into actionable insights with advanced AI sentiment analysis, automated categorization, and real-time analytics. Turn every conversation into competitive intelligence.",
@@ -31,9 +35,7 @@ export const metadata = {
     address: false,
     telephone: false,
   },
-  metadataBase: new URL(
-    process.env.NEXTAUTH_URL || "https://livedash.notso.ai"
-  ),
+  metadataBase: new URL(baseUrl),
   alternates: {
     canonical: "/",
   },
@@ -95,7 +97,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
     name: "LiveDash",
     description:
       "Transform customer conversations into actionable insights with advanced AI sentiment analysis, automated categorization, and real-time analytics.",
-    url: process.env.NEXTAUTH_URL || "https://livedash.notso.ai",
+    url: baseUrl,
     author: {
       "@type": "Organization",
       name: "Notso AI",
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 1c97838..97e0c5f 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,271 +1,6 @@
-"use client";
-import { BarChart3, Loader2, Shield, Zap } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { signIn } from "next-auth/react";
-import { useId, useState } from "react";
-import { toast } from "sonner";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { ThemeToggle } from "@/components/ui/theme-toggle";
+import { redirect } from "next/navigation";
 
+// Redirect to Neon Auth sign-in page
 export default function LoginPage() {
-  const emailId = useId();
-  const emailHelpId = useId();
-  const passwordId = useId();
-  const passwordHelpId = useId();
-  const loadingStatusId = useId();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const router = useRouter();
-
-  async function handleLogin(e: React.FormEvent) {
-    e.preventDefault();
-    setIsLoading(true);
-    setError("");
-
-    try {
-      const res = await signIn("credentials", {
-        email,
-        password,
-        redirect: false,
-      });
-
-      if (res?.ok) {
-        toast.success("Login successful! Redirecting...");
-        router.push("/dashboard");
-      } else {
-        setError("Invalid email or password. Please try again.");
-        toast.error("Login failed. Please check your credentials.");
-      }
-    } catch {
-      setError("An error occurred. Please try again.");
-      toast.error("An unexpected error occurred.");
-    } finally {
-      setIsLoading(false);
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex">
-      {/* Left side - Branding and Features */}
-      <div className="hidden lg:flex lg:flex-1 bg-linear-to-br from-primary/10 via-primary/5 to-background relative overflow-hidden">
-        <div className="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent" />
-        <div className="absolute -top-24 -left-24 h-96 w-96 rounded-full bg-primary/10 blur-3xl" />
-        <div className="absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-primary/5 blur-3xl" />
-
-        <div className="relative flex flex-col justify-center px-12 py-24">
-          <div className="max-w-md">
-            <Link href="/" className="flex items-center gap-3 mb-8">
-              <div className="relative w-12 h-12">
-                <Image
-                  src="/favicon.svg"
-                  alt="LiveDash Logo"
-                  fill
-                  className="object-contain"
-                />
-              </div>
-              <span className="text-2xl font-bold text-primary">LiveDash</span>
-            </Link>
-
-            <h1 className="text-4xl font-bold tracking-tight mb-6">
-              Welcome back to your analytics dashboard
-            </h1>
-            <p className="text-xl text-muted-foreground mb-8">
-              Monitor, analyze, and optimize your customer conversations with
-              AI-powered insights.
-            </p>
-
-            <div className="space-y-4">
-              <div className="flex items-center gap-3">
-                <div className="p-2 rounded-lg bg-primary/10 text-primary">
-                  <BarChart3 className="h-5 w-5" />
-                </div>
-                <span className="text-muted-foreground">
-                  Real-time analytics and insights
-                </span>
-              </div>
-              <div className="flex items-center gap-3">
-                <div className="p-2 rounded-lg bg-green-500/10 text-green-600">
-                  <Shield className="h-5 w-5" />
-                </div>
-                <span className="text-muted-foreground">
-                  Enterprise-grade security
-                </span>
-              </div>
-              <div className="flex items-center gap-3">
-                <div className="p-2 rounded-lg bg-blue-500/10 text-blue-600">
-                  <Zap className="h-5 w-5" />
-                </div>
-                <span className="text-muted-foreground">
-                  AI-powered conversation analysis
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Right side - Login Form */}
-      <div className="flex-1 flex flex-col justify-center px-8 py-12 lg:px-12">
-        <div className="absolute top-4 right-4">
-          <ThemeToggle />
-        </div>
-
-        <div className="mx-auto w-full max-w-sm">
-          {/* Mobile logo */}
-          <div className="lg:hidden flex justify-center mb-8">
-            <Link href="/" className="flex items-center gap-3">
-              <div className="relative w-10 h-10">
-                <Image
-                  src="/favicon.svg"
-                  alt="LiveDash Logo"
-                  fill
-                  className="object-contain"
-                />
-              </div>
-              <span className="text-xl font-bold text-primary">LiveDash</span>
-            </Link>
-          </div>
-
-          <Card className="border-border/50 shadow-xl">
-            <CardHeader className="space-y-1">
-              <CardTitle className="text-2xl font-bold">Sign in</CardTitle>
-              <CardDescription>
-                Enter your email and password to access your dashboard
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              {/* Live region for screen reader announcements */}
-              <output aria-live="polite" className="sr-only">
-                {isLoading && "Signing in, please wait..."}
-                {error && `Error: ${error}`}
-              </output>
-
-              {error && (
-                <Alert variant="destructive" className="mb-6" role="alert">
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              )}
-
-              <form onSubmit={handleLogin} className="space-y-4" noValidate>
-                <div className="space-y-2">
-                  <Label htmlFor={emailId}>Email</Label>
-                  <Input
-                    id={emailId}
-                    type="email"
-                    placeholder="name@company.com"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    disabled={isLoading}
-                    required
-                    aria-describedby={emailHelpId}
-                    aria-invalid={!!error}
-                    className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
-                  />
-                  <div id={emailHelpId} className="sr-only">
-                    Enter your company email address
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor={passwordId}>Password</Label>
-                  <Input
-                    id={passwordId}
-                    type="password"
-                    placeholder="Enter your password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    disabled={isLoading}
-                    required
-                    aria-describedby={passwordHelpId}
-                    aria-invalid={!!error}
-                    className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
-                  />
-                  <div id={passwordHelpId} className="sr-only">
-                    Enter your account password
-                  </div>
-                </div>
-
-                <Button
-                  type="submit"
-                  className="w-full mt-6 h-11 bg-linear-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary/80 transition-all duration-200"
-                  disabled={isLoading || !email || !password}
-                  aria-describedby={isLoading ? "loading-status" : undefined}
-                >
-                  {isLoading ? (
-                    <>
-                      <Loader2
-                        className="mr-2 h-4 w-4 animate-spin"
-                        aria-hidden="true"
-                      />
-                      Signing in...
-                    </>
-                  ) : (
-                    "Sign in"
-                  )}
-                </Button>
-                {isLoading && (
-                  <div
-                    id={loadingStatusId}
-                    className="sr-only"
-                    aria-live="polite"
-                  >
-                    Authentication in progress, please wait
-                  </div>
-                )}
-              </form>
-
-              <div className="mt-6 space-y-4">
-                <div className="text-center">
-                  <Link
-                    href="/register"
-                    className="text-sm text-primary hover:underline transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-sm"
-                  >
-                    Don&apos;t have a company account? Register here
-                  </Link>
-                </div>
-                <div className="text-center">
-                  <Link
-                    href="/forgot-password"
-                    className="text-sm text-muted-foreground hover:text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-sm"
-                  >
-                    Forgot your password?
-                  </Link>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <p className="mt-8 text-center text-xs text-muted-foreground">
-            By signing in, you agree to our{" "}
-            <Link
-              href="/terms"
-              className="text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-sm"
-            >
-              Terms of Service
-            </Link>{" "}
-            and{" "}
-            <Link
-              href="/privacy"
-              className="text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-sm"
-            >
-              Privacy Policy
-            </Link>
-          </p>
-        </div>
-      </div>
-    </div>
-  );
+  redirect("/auth/sign-in");
 }
diff --git a/app/page.tsx b/app/page.tsx
index 2fed0db..2157344 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,25 +12,25 @@ import {
   Zap,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth/client";
 
 export default function LandingPage() {
-  const { data: session, status } = useSession();
+  const { data, isPending } = authClient.useSession();
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if (session?.user) {
+    if (data?.user) {
       router.push("/dashboard");
     }
-  }, [session, router]);
+  }, [data, router]);
 
   const handleGetStarted = () => {
     setIsLoading(true);
-    router.push("/login");
+    router.push("/auth/sign-in");
   };
 
   const handleRequestDemo = () => {
@@ -38,7 +38,7 @@ export default function LandingPage() {
     window.open("mailto:demo@notso.ai?subject=LiveDash Demo Request", "_blank");
   };
 
-  if (status === "loading") {
+  if (isPending) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         Loading...
diff --git a/app/platform/companies/[id]/CompanyManagementClient.tsx b/app/platform/companies/[id]/CompanyManagementClient.tsx
new file mode 100644
index 0000000..31b1d0e
--- /dev/null
+++ b/app/platform/companies/[id]/CompanyManagementClient.tsx
@@ -0,0 +1,857 @@
+"use client";
+
+import type { UserRole } from "@prisma/client";
+import {
+  Activity,
+  ArrowLeft,
+  Calendar,
+  Database,
+  Mail,
+  Save,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useId, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useToast } from "@/hooks/use-toast";
+import { authClient } from "@/lib/auth/client";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  createdAt: string;
+  invitedBy: string | null;
+  invitedAt: string | null;
+}
+
+interface Company {
+  id: string;
+  name: string;
+  status: string;
+  maxUsers: number;
+  createdAt: string;
+  updatedAt: string;
+  csvUrl?: string;
+  users: User[];
+  _count: {
+    sessions: number;
+    imports: number;
+  };
+}
+
+interface PlatformUserData {
+  id: string;
+  email: string;
+  name: string | null;
+  role: UserRole;
+}
+
+const PLATFORM_ROLES: UserRole[] = [
+  "PLATFORM_SUPER_ADMIN",
+  "PLATFORM_ADMIN",
+  "PLATFORM_SUPPORT",
+];
+
+function isPlatformRole(role: UserRole): boolean {
+  return PLATFORM_ROLES.includes(role);
+}
+
+function usePlatformUser() {
+  const { data: sessionData, isPending } = authClient.useSession();
+  const [platformUser, setPlatformUser] = useState<PlatformUserData | null>(
+    null
+  );
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (isPending) return;
+
+    if (!sessionData?.session) {
+      setPlatformUser(null);
+      setIsLoading(false);
+      return;
+    }
+
+    const fetchUser = async () => {
+      try {
+        const response = await fetch("/api/auth/me");
+        if (response.ok) {
+          const userData = await response.json();
+          if (isPlatformRole(userData.role)) {
+            setPlatformUser(userData);
+          } else {
+            setPlatformUser(null);
+          }
+        } else {
+          setPlatformUser(null);
+        }
+      } catch {
+        setPlatformUser(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchUser();
+  }, [sessionData, isPending]);
+
+  return {
+    user: platformUser,
+    isLoading: isPending || isLoading,
+    isAuthenticated: !!platformUser,
+  };
+}
+
+export default function CompanyManagementClient() {
+  const {
+    user: platformUser,
+    isLoading: userLoading,
+    isAuthenticated,
+  } = usePlatformUser();
+  const router = useRouter();
+  const params = useParams();
+  const { toast } = useToast();
+
+  const companyNameFieldId = useId();
+  const maxUsersFieldId = useId();
+  const inviteNameFieldId = useId();
+  const inviteEmailFieldId = useId();
+
+  const fetchCompany = useCallback(async () => {
+    try {
+      const response = await fetch(`/api/platform/companies/${params.id}`);
+      if (response.ok) {
+        const data = await response.json();
+        setCompany(data);
+        const companyData = {
+          name: data.name,
+          status: data.status,
+          maxUsers: data.maxUsers,
+        };
+        setEditData(companyData);
+        setOriginalData(companyData);
+      } else {
+        toast({
+          title: "Error",
+          description: "Failed to load company data",
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      console.error("Failed to fetch company:", error);
+      toast({
+        title: "Error",
+        description: "Failed to load company data",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [params.id, toast]);
+
+  const [company, setCompany] = useState<Company | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [editData, setEditData] = useState<Partial<Company>>({});
+  const [originalData, setOriginalData] = useState<Partial<Company>>({});
+  const [showInviteUser, setShowInviteUser] = useState(false);
+  const [inviteData, setInviteData] = useState({
+    name: "",
+    email: "",
+    role: "USER",
+  });
+  const [showUnsavedChangesDialog, setShowUnsavedChangesDialog] =
+    useState(false);
+  const [pendingNavigation, setPendingNavigation] = useState<string | null>(
+    null
+  );
+
+  // Function to check if data has been modified
+  const hasUnsavedChanges = useCallback(() => {
+    // Normalize data for comparison (handle null/undefined/empty string equivalence)
+    const normalizeValue = (value: string | number | null | undefined) => {
+      if (value === null || value === undefined || value === "") {
+        return "";
+      }
+      return value;
+    };
+
+    const normalizedEditData = {
+      name: normalizeValue(editData.name),
+      status: normalizeValue(editData.status),
+      maxUsers: editData.maxUsers || 0,
+    };
+
+    const normalizedOriginalData = {
+      name: normalizeValue(originalData.name),
+      status: normalizeValue(originalData.status),
+      maxUsers: originalData.maxUsers || 0,
+    };
+
+    return (
+      JSON.stringify(normalizedEditData) !==
+      JSON.stringify(normalizedOriginalData)
+    );
+  }, [editData, originalData]);
+
+  // Handle navigation protection - must be at top level
+  const handleNavigation = useCallback(
+    (url: string) => {
+      // Allow navigation within the same company (different tabs, etc.)
+      if (url.includes(`/platform/companies/${params.id}`)) {
+        router.push(url);
+        return;
+      }
+
+      // If there are unsaved changes, show confirmation dialog
+      if (hasUnsavedChanges()) {
+        setPendingNavigation(url);
+        setShowUnsavedChangesDialog(true);
+      } else {
+        router.push(url);
+      }
+    },
+    [router, params.id, hasUnsavedChanges]
+  );
+
+  useEffect(() => {
+    if (userLoading) return;
+
+    if (!isAuthenticated) {
+      router.push("/platform/login");
+      return;
+    }
+
+    fetchCompany();
+  }, [userLoading, isAuthenticated, router, fetchCompany]);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const response = await fetch(`/api/platform/companies/${params.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(editData),
+      });
+
+      if (response.ok) {
+        const updatedCompany = await response.json();
+        setCompany(updatedCompany);
+        const companyData = {
+          name: updatedCompany.name,
+          status: updatedCompany.status,
+          maxUsers: updatedCompany.maxUsers,
+        };
+        setOriginalData(companyData);
+        toast({
+          title: "Success",
+          description: "Company updated successfully",
+        });
+      } else {
+        throw new Error("Failed to update company");
+      }
+    } catch (_error) {
+      toast({
+        title: "Error",
+        description: "Failed to update company",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleStatusChange = async (newStatus: string) => {
+    const statusAction = newStatus === "SUSPENDED" ? "suspend" : "activate";
+
+    try {
+      const response = await fetch(`/api/platform/companies/${params.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: newStatus }),
+      });
+
+      if (response.ok) {
+        setCompany((prev) => (prev ? { ...prev, status: newStatus } : null));
+        setEditData((prev) => ({ ...prev, status: newStatus }));
+        toast({
+          title: "Success",
+          description: `Company ${statusAction}d successfully`,
+        });
+      } else {
+        throw new Error(`Failed to ${statusAction} company`);
+      }
+    } catch (_error) {
+      toast({
+        title: "Error",
+        description: `Failed to ${statusAction} company`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const confirmNavigation = () => {
+    if (pendingNavigation) {
+      router.push(pendingNavigation);
+      setPendingNavigation(null);
+    }
+    setShowUnsavedChangesDialog(false);
+  };
+
+  const cancelNavigation = () => {
+    setPendingNavigation(null);
+    setShowUnsavedChangesDialog(false);
+  };
+
+  // Protect against browser back/forward and other navigation
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges()) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    };
+
+    const handlePopState = (e: PopStateEvent) => {
+      if (hasUnsavedChanges()) {
+        const confirmLeave = window.confirm(
+          "You have unsaved changes. Are you sure you want to leave this page?"
+        );
+        if (!confirmLeave) {
+          // Push the current state back to prevent navigation
+          window.history.pushState(null, "", window.location.href);
+          e.preventDefault();
+        }
+      }
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    window.addEventListener("popstate", handlePopState);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [hasUnsavedChanges]);
+
+  const handleInviteUser = async () => {
+    try {
+      const response = await fetch(
+        `/api/platform/companies/${params.id}/users`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(inviteData),
+        }
+      );
+
+      if (response.ok) {
+        setShowInviteUser(false);
+        setInviteData({ name: "", email: "", role: "USER" });
+        fetchCompany(); // Refresh company data
+        toast({
+          title: "Success",
+          description: "User invited successfully",
+        });
+      } else {
+        throw new Error("Failed to invite user");
+      }
+    } catch (_error) {
+      toast({
+        title: "Error",
+        description: "Failed to invite user",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const getStatusBadgeVariant = (status: string) => {
+    switch (status) {
+      case "ACTIVE":
+        return "default";
+      case "TRIAL":
+        return "secondary";
+      case "SUSPENDED":
+        return "destructive";
+      case "ARCHIVED":
+        return "outline";
+      default:
+        return "default";
+    }
+  };
+
+  if (userLoading || isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">Loading company details...</div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated || !company) {
+    return null;
+  }
+
+  const canEdit =
+    platformUser?.role === "PLATFORM_SUPER_ADMIN" ||
+    platformUser?.role === "PLATFORM_ADMIN";
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="border-b bg-white dark:bg-gray-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center py-6">
+            <div className="flex items-center gap-4">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleNavigation("/platform/dashboard")}
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                Back to Dashboard
+              </Button>
+              <div>
+                <div className="flex items-center gap-3">
+                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                    {company.name}
+                  </h1>
+                  <Badge variant={getStatusBadgeVariant(company.status)}>
+                    {company.status}
+                  </Badge>
+                </div>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Company Management
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              {canEdit && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowInviteUser(true)}
+                >
+                  <UserPlus className="w-4 h-4 mr-2" />
+                  Invite User
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Tabs defaultValue="overview" className="space-y-6">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="users">Users</TabsTrigger>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview" className="space-y-6">
+            {/* Stats Overview */}
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">
+                    Total Users
+                  </CardTitle>
+                  <Users className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">
+                    {company.users.length}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    of {company.maxUsers} maximum
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">
+                    Total Sessions
+                  </CardTitle>
+                  <Database className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">
+                    {company._count.sessions}
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">
+                    Data Imports
+                  </CardTitle>
+                  <Activity className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">
+                    {company._count.imports}
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Created</CardTitle>
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-sm font-bold">
+                    {new Date(company.createdAt).toLocaleDateString()}
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Company Info */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Company Information</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor={companyNameFieldId}>Company Name</Label>
+                    <Input
+                      id={companyNameFieldId}
+                      value={editData.name || ""}
+                      onChange={(e) =>
+                        setEditData((prev) => ({
+                          ...prev,
+                          name: e.target.value,
+                        }))
+                      }
+                      disabled={!canEdit}
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor={maxUsersFieldId}>Max Users</Label>
+                    <Input
+                      id={maxUsersFieldId}
+                      type="number"
+                      value={editData.maxUsers || 0}
+                      onChange={(e) =>
+                        setEditData((prev) => ({
+                          ...prev,
+                          maxUsers: Number.parseInt(e.target.value),
+                        }))
+                      }
+                      disabled={!canEdit}
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="status">Status</Label>
+                    <Select
+                      value={editData.status}
+                      onValueChange={(value) =>
+                        setEditData((prev) => ({ ...prev, status: value }))
+                      }
+                      disabled={!canEdit}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="ACTIVE">Active</SelectItem>
+                        <SelectItem value="TRIAL">Trial</SelectItem>
+                        <SelectItem value="SUSPENDED">Suspended</SelectItem>
+                        <SelectItem value="ARCHIVED">Archived</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                {canEdit && hasUnsavedChanges() && (
+                  <div className="flex gap-2 pt-4 border-t">
+                    <Button
+                      variant="outline"
+                      onClick={() => {
+                        setEditData(originalData);
+                      }}
+                    >
+                      Cancel Changes
+                    </Button>
+                    <Button onClick={handleSave} disabled={isSaving}>
+                      <Save className="w-4 h-4 mr-2" />
+                      {isSaving ? "Saving..." : "Save Changes"}
+                    </Button>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="users" className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center justify-between">
+                  <span className="flex items-center gap-2">
+                    <Users className="w-5 h-5" />
+                    Users ({company.users.length})
+                  </span>
+                  {canEdit && (
+                    <Button size="sm" onClick={() => setShowInviteUser(true)}>
+                      <UserPlus className="w-4 h-4 mr-2" />
+                      Invite User
+                    </Button>
+                  )}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  {company.users.map((user) => (
+                    <div
+                      key={user.id}
+                      className="flex items-center justify-between p-4 border rounded-lg"
+                    >
+                      <div className="flex items-center gap-4">
+                        <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
+                          <span className="text-sm font-medium text-blue-600 dark:text-blue-300">
+                            {user.name?.charAt(0) ||
+                              user.email.charAt(0).toUpperCase()}
+                          </span>
+                        </div>
+                        <div>
+                          <div className="font-medium">
+                            {user.name || "No name"}
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {user.email}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-4">
+                        <Badge variant="outline">{user.role}</Badge>
+                        <div className="text-sm text-muted-foreground">
+                          Joined {new Date(user.createdAt).toLocaleDateString()}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                  {company.users.length === 0 && (
+                    <div className="text-center py-8 text-muted-foreground">
+                      No users found. Invite the first user to get started.
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="settings" className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-red-600 dark:text-red-400">
+                  Danger Zone
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {canEdit && (
+                  <>
+                    <div className="flex items-center justify-between p-4 border border-red-200 dark:border-red-800 rounded-lg">
+                      <div>
+                        <h3 className="font-medium">Suspend Company</h3>
+                        <p className="text-sm text-muted-foreground">
+                          Temporarily disable access to this company
+                        </p>
+                      </div>
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button
+                            variant="destructive"
+                            disabled={company.status === "SUSPENDED"}
+                          >
+                            {company.status === "SUSPENDED"
+                              ? "Already Suspended"
+                              : "Suspend"}
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>Suspend Company</AlertDialogTitle>
+                            <AlertDialogDescription>
+                              Are you sure you want to suspend this company?
+                              This will disable access for all users.
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                            <AlertDialogAction
+                              onClick={() => handleStatusChange("SUSPENDED")}
+                            >
+                              Suspend
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </div>
+
+                    {company.status === "SUSPENDED" && (
+                      <div className="flex items-center justify-between p-4 border border-green-200 dark:border-green-800 rounded-lg">
+                        <div>
+                          <h3 className="font-medium">Reactivate Company</h3>
+                          <p className="text-sm text-muted-foreground">
+                            Restore access to this company
+                          </p>
+                        </div>
+                        <Button
+                          variant="default"
+                          onClick={() => handleStatusChange("ACTIVE")}
+                        >
+                          Reactivate
+                        </Button>
+                      </div>
+                    )}
+                  </>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="analytics" className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Analytics</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-center py-8 text-muted-foreground">
+                  Analytics dashboard coming soon...
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Invite User Dialog */}
+      {showInviteUser && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <Card className="w-full max-w-md mx-4">
+            <CardHeader>
+              <CardTitle>Invite User</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label htmlFor={inviteNameFieldId}>Name</Label>
+                <Input
+                  id={inviteNameFieldId}
+                  value={inviteData.name}
+                  onChange={(e) =>
+                    setInviteData((prev) => ({ ...prev, name: e.target.value }))
+                  }
+                  placeholder="User's full name"
+                />
+              </div>
+              <div>
+                <Label htmlFor={inviteEmailFieldId}>Email</Label>
+                <Input
+                  id={inviteEmailFieldId}
+                  type="email"
+                  value={inviteData.email}
+                  onChange={(e) =>
+                    setInviteData((prev) => ({
+                      ...prev,
+                      email: e.target.value,
+                    }))
+                  }
+                  placeholder="user@example.com"
+                />
+              </div>
+              <div>
+                <Label htmlFor="inviteRole">Role</Label>
+                <Select
+                  value={inviteData.role}
+                  onValueChange={(value) =>
+                    setInviteData((prev) => ({ ...prev, role: value }))
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="USER">User</SelectItem>
+                    <SelectItem value="ADMIN">Admin</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex gap-2 pt-4">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowInviteUser(false)}
+                  className="flex-1"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleInviteUser}
+                  className="flex-1"
+                  disabled={!inviteData.email || !inviteData.name}
+                >
+                  <Mail className="w-4 h-4 mr-2" />
+                  Send Invite
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Unsaved Changes Dialog */}
+      <AlertDialog
+        open={showUnsavedChangesDialog}
+        onOpenChange={setShowUnsavedChangesDialog}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
+            <AlertDialogDescription>
+              You have unsaved changes that will be lost if you leave this page.
+              Are you sure you want to continue?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={cancelNavigation}>
+              Stay on Page
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={confirmNavigation}>
+              Leave Without Saving
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/app/platform/companies/[id]/page.tsx b/app/platform/companies/[id]/page.tsx
index 887969c..2599d0c 100644
--- a/app/platform/companies/[id]/page.tsx
+++ b/app/platform/companies/[id]/page.tsx
@@ -1,806 +1,29 @@
-"use client";
+import { Suspense } from "react";
+import CompanyManagementClient from "./CompanyManagementClient";
 
-import {
-  Activity,
-  ArrowLeft,
-  Calendar,
-  Database,
-  Mail,
-  Save,
-  UserPlus,
-  Users,
-} from "lucide-react";
-import { useParams, useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { useCallback, useEffect, useId, useState } from "react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useToast } from "@/hooks/use-toast";
+export const metadata = {
+  title: "Company Management | LiveDash Platform",
+  description: "Manage company settings, users, and analytics",
+};
 
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  createdAt: string;
-  invitedBy: string | null;
-  invitedAt: string | null;
+// Provide at least one sample param for build-time validation
+// Runtime params not in this list will be handled dynamically
+export async function generateStaticParams() {
+  return [{ id: "sample" }];
 }
 
-interface Company {
-  id: string;
-  name: string;
-  email: string;
-  status: string;
-  maxUsers: number;
-  createdAt: string;
-  updatedAt: string;
-  users: User[];
-  _count: {
-    sessions: number;
-    imports: number;
-  };
-}
-
-export default function CompanyManagement() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  const params = useParams();
-  const { toast } = useToast();
-
-  const companyNameFieldId = useId();
-  const companyEmailFieldId = useId();
-  const maxUsersFieldId = useId();
-  const inviteNameFieldId = useId();
-  const inviteEmailFieldId = useId();
-
-  const fetchCompany = useCallback(async () => {
-    try {
-      const response = await fetch(`/api/platform/companies/${params.id}`);
-      if (response.ok) {
-        const data = await response.json();
-        setCompany(data);
-        const companyData = {
-          name: data.name,
-          email: data.email,
-          status: data.status,
-          maxUsers: data.maxUsers,
-        };
-        setEditData(companyData);
-        setOriginalData(companyData);
-      } else {
-        toast({
-          title: "Error",
-          description: "Failed to load company data",
-          variant: "destructive",
-        });
-      }
-    } catch (error) {
-      console.error("Failed to fetch company:", error);
-      toast({
-        title: "Error",
-        description: "Failed to load company data",
-        variant: "destructive",
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  }, [params.id, toast]);
-
-  const [company, setCompany] = useState<Company | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-  const [editData, setEditData] = useState<Partial<Company>>({});
-  const [originalData, setOriginalData] = useState<Partial<Company>>({});
-  const [showInviteUser, setShowInviteUser] = useState(false);
-  const [inviteData, setInviteData] = useState({
-    name: "",
-    email: "",
-    role: "USER",
-  });
-  const [showUnsavedChangesDialog, setShowUnsavedChangesDialog] =
-    useState(false);
-  const [pendingNavigation, setPendingNavigation] = useState<string | null>(
-    null
-  );
-
-  // Function to check if data has been modified
-  const hasUnsavedChanges = useCallback(() => {
-    // Normalize data for comparison (handle null/undefined/empty string equivalence)
-    const normalizeValue = (value: string | number | null | undefined) => {
-      if (value === null || value === undefined || value === "") {
-        return "";
-      }
-      return value;
-    };
-
-    const normalizedEditData = {
-      name: normalizeValue(editData.name),
-      email: normalizeValue(editData.email),
-      status: normalizeValue(editData.status),
-      maxUsers: editData.maxUsers || 0,
-    };
-
-    const normalizedOriginalData = {
-      name: normalizeValue(originalData.name),
-      email: normalizeValue(originalData.email),
-      status: normalizeValue(originalData.status),
-      maxUsers: originalData.maxUsers || 0,
-    };
-
-    return (
-      JSON.stringify(normalizedEditData) !==
-      JSON.stringify(normalizedOriginalData)
-    );
-  }, [editData, originalData]);
-
-  // Handle navigation protection - must be at top level
-  const handleNavigation = useCallback(
-    (url: string) => {
-      // Allow navigation within the same company (different tabs, etc.)
-      if (url.includes(`/platform/companies/${params.id}`)) {
-        router.push(url);
-        return;
-      }
-
-      // If there are unsaved changes, show confirmation dialog
-      if (hasUnsavedChanges()) {
-        setPendingNavigation(url);
-        setShowUnsavedChangesDialog(true);
-      } else {
-        router.push(url);
-      }
-    },
-    [router, params.id, hasUnsavedChanges]
-  );
-
-  useEffect(() => {
-    if (status === "loading") return;
-
-    if (!session?.user?.isPlatformUser) {
-      router.push("/platform/login");
-      return;
-    }
-
-    fetchCompany();
-  }, [session, status, router, fetchCompany]);
-
-  const handleSave = async () => {
-    setIsSaving(true);
-    try {
-      const response = await fetch(`/api/platform/companies/${params.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(editData),
-      });
-
-      if (response.ok) {
-        const updatedCompany = await response.json();
-        setCompany(updatedCompany);
-        const companyData = {
-          name: updatedCompany.name,
-          email: updatedCompany.email,
-          status: updatedCompany.status,
-          maxUsers: updatedCompany.maxUsers,
-        };
-        setOriginalData(companyData);
-        toast({
-          title: "Success",
-          description: "Company updated successfully",
-        });
-      } else {
-        throw new Error("Failed to update company");
-      }
-    } catch (_error) {
-      toast({
-        title: "Error",
-        description: "Failed to update company",
-        variant: "destructive",
-      });
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleStatusChange = async (newStatus: string) => {
-    const statusAction = newStatus === "SUSPENDED" ? "suspend" : "activate";
-
-    try {
-      const response = await fetch(`/api/platform/companies/${params.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ status: newStatus }),
-      });
-
-      if (response.ok) {
-        setCompany((prev) => (prev ? { ...prev, status: newStatus } : null));
-        setEditData((prev) => ({ ...prev, status: newStatus }));
-        toast({
-          title: "Success",
-          description: `Company ${statusAction}d successfully`,
-        });
-      } else {
-        throw new Error(`Failed to ${statusAction} company`);
-      }
-    } catch (_error) {
-      toast({
-        title: "Error",
-        description: `Failed to ${statusAction} company`,
-        variant: "destructive",
-      });
-    }
-  };
-
-  const confirmNavigation = () => {
-    if (pendingNavigation) {
-      router.push(pendingNavigation);
-      setPendingNavigation(null);
-    }
-    setShowUnsavedChangesDialog(false);
-  };
-
-  const cancelNavigation = () => {
-    setPendingNavigation(null);
-    setShowUnsavedChangesDialog(false);
-  };
-
-  // Protect against browser back/forward and other navigation
-  useEffect(() => {
-    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (hasUnsavedChanges()) {
-        e.preventDefault();
-        e.returnValue = "";
-      }
-    };
-
-    const handlePopState = (e: PopStateEvent) => {
-      if (hasUnsavedChanges()) {
-        const confirmLeave = window.confirm(
-          "You have unsaved changes. Are you sure you want to leave this page?"
-        );
-        if (!confirmLeave) {
-          // Push the current state back to prevent navigation
-          window.history.pushState(null, "", window.location.href);
-          e.preventDefault();
-        }
-      }
-    };
-
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    window.addEventListener("popstate", handlePopState);
-
-    return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-      window.removeEventListener("popstate", handlePopState);
-    };
-  }, [hasUnsavedChanges]);
-
-  const handleInviteUser = async () => {
-    try {
-      const response = await fetch(
-        `/api/platform/companies/${params.id}/users`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(inviteData),
-        }
-      );
-
-      if (response.ok) {
-        setShowInviteUser(false);
-        setInviteData({ name: "", email: "", role: "USER" });
-        fetchCompany(); // Refresh company data
-        toast({
-          title: "Success",
-          description: "User invited successfully",
-        });
-      } else {
-        throw new Error("Failed to invite user");
-      }
-    } catch (_error) {
-      toast({
-        title: "Error",
-        description: "Failed to invite user",
-        variant: "destructive",
-      });
-    }
-  };
-
-  const getStatusBadgeVariant = (status: string) => {
-    switch (status) {
-      case "ACTIVE":
-        return "default";
-      case "TRIAL":
-        return "secondary";
-      case "SUSPENDED":
-        return "destructive";
-      case "ARCHIVED":
-        return "outline";
-      default:
-        return "default";
-    }
-  };
-
-  if (status === "loading" || isLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-center">Loading company details...</div>
-      </div>
-    );
-  }
-
-  if (!session?.user?.isPlatformUser || !company) {
-    return null;
-  }
-
-  const canEdit = session.user.platformRole === "SUPER_ADMIN";
-
+function CompanyLoadingFallback() {
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="border-b bg-white dark:bg-gray-800">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center py-6">
-            <div className="flex items-center gap-4">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => handleNavigation("/platform/dashboard")}
-              >
-                <ArrowLeft className="w-4 h-4 mr-2" />
-                Back to Dashboard
-              </Button>
-              <div>
-                <div className="flex items-center gap-3">
-                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-                    {company.name}
-                  </h1>
-                  <Badge variant={getStatusBadgeVariant(company.status)}>
-                    {company.status}
-                  </Badge>
-                </div>
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  Company Management
-                </p>
-              </div>
-            </div>
-            <div className="flex gap-2">
-              {canEdit && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowInviteUser(true)}
-                >
-                  <UserPlus className="w-4 h-4 mr-2" />
-                  Invite User
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <Tabs defaultValue="overview" className="space-y-6">
-          <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="users">Users</TabsTrigger>
-            <TabsTrigger value="settings">Settings</TabsTrigger>
-            <TabsTrigger value="analytics">Analytics</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="space-y-6">
-            {/* Stats Overview */}
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-              <Card>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium">
-                    Total Users
-                  </CardTitle>
-                  <Users className="h-4 w-4 text-muted-foreground" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold">
-                    {company.users.length}
-                  </div>
-                  <p className="text-xs text-muted-foreground">
-                    of {company.maxUsers} maximum
-                  </p>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium">
-                    Total Sessions
-                  </CardTitle>
-                  <Database className="h-4 w-4 text-muted-foreground" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold">
-                    {company._count.sessions}
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium">
-                    Data Imports
-                  </CardTitle>
-                  <Activity className="h-4 w-4 text-muted-foreground" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold">
-                    {company._count.imports}
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium">Created</CardTitle>
-                  <Calendar className="h-4 w-4 text-muted-foreground" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-sm font-bold">
-                    {new Date(company.createdAt).toLocaleDateString()}
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-
-            {/* Company Info */}
-            <Card>
-              <CardHeader>
-                <CardTitle>Company Information</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div>
-                    <Label htmlFor={companyNameFieldId}>Company Name</Label>
-                    <Input
-                      id={companyNameFieldId}
-                      value={editData.name || ""}
-                      onChange={(e) =>
-                        setEditData((prev) => ({
-                          ...prev,
-                          name: e.target.value,
-                        }))
-                      }
-                      disabled={!canEdit}
-                    />
-                  </div>
-                  <div>
-                    <Label htmlFor={companyEmailFieldId}>Contact Email</Label>
-                    <Input
-                      id={companyEmailFieldId}
-                      type="email"
-                      value={editData.email || ""}
-                      onChange={(e) =>
-                        setEditData((prev) => ({
-                          ...prev,
-                          email: e.target.value,
-                        }))
-                      }
-                      disabled={!canEdit}
-                    />
-                  </div>
-                  <div>
-                    <Label htmlFor={maxUsersFieldId}>Max Users</Label>
-                    <Input
-                      id={maxUsersFieldId}
-                      type="number"
-                      value={editData.maxUsers || 0}
-                      onChange={(e) =>
-                        setEditData((prev) => ({
-                          ...prev,
-                          maxUsers: Number.parseInt(e.target.value),
-                        }))
-                      }
-                      disabled={!canEdit}
-                    />
-                  </div>
-                  <div>
-                    <Label htmlFor="status">Status</Label>
-                    <Select
-                      value={editData.status}
-                      onValueChange={(value) =>
-                        setEditData((prev) => ({ ...prev, status: value }))
-                      }
-                      disabled={!canEdit}
-                    >
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="ACTIVE">Active</SelectItem>
-                        <SelectItem value="TRIAL">Trial</SelectItem>
-                        <SelectItem value="SUSPENDED">Suspended</SelectItem>
-                        <SelectItem value="ARCHIVED">Archived</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-                {canEdit && hasUnsavedChanges() && (
-                  <div className="flex gap-2 pt-4 border-t">
-                    <Button
-                      variant="outline"
-                      onClick={() => {
-                        setEditData(originalData);
-                      }}
-                    >
-                      Cancel Changes
-                    </Button>
-                    <Button onClick={handleSave} disabled={isSaving}>
-                      <Save className="w-4 h-4 mr-2" />
-                      {isSaving ? "Saving..." : "Save Changes"}
-                    </Button>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="users" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center justify-between">
-                  <span className="flex items-center gap-2">
-                    <Users className="w-5 h-5" />
-                    Users ({company.users.length})
-                  </span>
-                  {canEdit && (
-                    <Button size="sm" onClick={() => setShowInviteUser(true)}>
-                      <UserPlus className="w-4 h-4 mr-2" />
-                      Invite User
-                    </Button>
-                  )}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  {company.users.map((user) => (
-                    <div
-                      key={user.id}
-                      className="flex items-center justify-between p-4 border rounded-lg"
-                    >
-                      <div className="flex items-center gap-4">
-                        <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
-                          <span className="text-sm font-medium text-blue-600 dark:text-blue-300">
-                            {user.name?.charAt(0) ||
-                              user.email.charAt(0).toUpperCase()}
-                          </span>
-                        </div>
-                        <div>
-                          <div className="font-medium">
-                            {user.name || "No name"}
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {user.email}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <Badge variant="outline">{user.role}</Badge>
-                        <div className="text-sm text-muted-foreground">
-                          Joined {new Date(user.createdAt).toLocaleDateString()}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                  {company.users.length === 0 && (
-                    <div className="text-center py-8 text-muted-foreground">
-                      No users found. Invite the first user to get started.
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="settings" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-red-600 dark:text-red-400">
-                  Danger Zone
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                {canEdit && (
-                  <>
-                    <div className="flex items-center justify-between p-4 border border-red-200 dark:border-red-800 rounded-lg">
-                      <div>
-                        <h3 className="font-medium">Suspend Company</h3>
-                        <p className="text-sm text-muted-foreground">
-                          Temporarily disable access to this company
-                        </p>
-                      </div>
-                      <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                          <Button
-                            variant="destructive"
-                            disabled={company.status === "SUSPENDED"}
-                          >
-                            {company.status === "SUSPENDED"
-                              ? "Already Suspended"
-                              : "Suspend"}
-                          </Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                          <AlertDialogHeader>
-                            <AlertDialogTitle>Suspend Company</AlertDialogTitle>
-                            <AlertDialogDescription>
-                              Are you sure you want to suspend this company?
-                              This will disable access for all users.
-                            </AlertDialogDescription>
-                          </AlertDialogHeader>
-                          <AlertDialogFooter>
-                            <AlertDialogCancel>Cancel</AlertDialogCancel>
-                            <AlertDialogAction
-                              onClick={() => handleStatusChange("SUSPENDED")}
-                            >
-                              Suspend
-                            </AlertDialogAction>
-                          </AlertDialogFooter>
-                        </AlertDialogContent>
-                      </AlertDialog>
-                    </div>
-
-                    {company.status === "SUSPENDED" && (
-                      <div className="flex items-center justify-between p-4 border border-green-200 dark:border-green-800 rounded-lg">
-                        <div>
-                          <h3 className="font-medium">Reactivate Company</h3>
-                          <p className="text-sm text-muted-foreground">
-                            Restore access to this company
-                          </p>
-                        </div>
-                        <Button
-                          variant="default"
-                          onClick={() => handleStatusChange("ACTIVE")}
-                        >
-                          Reactivate
-                        </Button>
-                      </div>
-                    )}
-                  </>
-                )}
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="analytics" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Analytics</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="text-center py-8 text-muted-foreground">
-                  Analytics dashboard coming soon...
-                </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-        </Tabs>
-      </div>
-
-      {/* Invite User Dialog */}
-      {showInviteUser && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <Card className="w-full max-w-md mx-4">
-            <CardHeader>
-              <CardTitle>Invite User</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <Label htmlFor={inviteNameFieldId}>Name</Label>
-                <Input
-                  id={inviteNameFieldId}
-                  value={inviteData.name}
-                  onChange={(e) =>
-                    setInviteData((prev) => ({ ...prev, name: e.target.value }))
-                  }
-                  placeholder="User's full name"
-                />
-              </div>
-              <div>
-                <Label htmlFor={inviteEmailFieldId}>Email</Label>
-                <Input
-                  id={inviteEmailFieldId}
-                  type="email"
-                  value={inviteData.email}
-                  onChange={(e) =>
-                    setInviteData((prev) => ({
-                      ...prev,
-                      email: e.target.value,
-                    }))
-                  }
-                  placeholder="user@example.com"
-                />
-              </div>
-              <div>
-                <Label htmlFor="inviteRole">Role</Label>
-                <Select
-                  value={inviteData.role}
-                  onValueChange={(value) =>
-                    setInviteData((prev) => ({ ...prev, role: value }))
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="USER">User</SelectItem>
-                    <SelectItem value="ADMIN">Admin</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex gap-2 pt-4">
-                <Button
-                  variant="outline"
-                  onClick={() => setShowInviteUser(false)}
-                  className="flex-1"
-                >
-                  Cancel
-                </Button>
-                <Button
-                  onClick={handleInviteUser}
-                  className="flex-1"
-                  disabled={!inviteData.email || !inviteData.name}
-                >
-                  <Mail className="w-4 h-4 mr-2" />
-                  Send Invite
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      )}
-
-      {/* Unsaved Changes Dialog */}
-      <AlertDialog
-        open={showUnsavedChangesDialog}
-        onOpenChange={setShowUnsavedChangesDialog}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
-            <AlertDialogDescription>
-              You have unsaved changes that will be lost if you leave this page.
-              Are you sure you want to continue?
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel onClick={cancelNavigation}>
-              Stay on Page
-            </AlertDialogCancel>
-            <AlertDialogAction onClick={confirmNavigation}>
-              Leave Without Saving
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-center">Loading company details...</div>
     </div>
   );
 }
+
+export default function CompanyManagementPage() {
+  return (
+    <Suspense fallback={<CompanyLoadingFallback />}>
+      <CompanyManagementClient />
+    </Suspense>
+  );
+}
diff --git a/app/platform/dashboard/page.tsx b/app/platform/dashboard/page.tsx
index 078f714..14c0252 100644
--- a/app/platform/dashboard/page.tsx
+++ b/app/platform/dashboard/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import type { PlatformUserRole } from "@prisma/client";
+import type { UserRole } from "@prisma/client";
 import {
   Activity,
   BarChart3,
@@ -31,6 +31,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ThemeToggle } from "@/components/ui/theme-toggle";
 import { useToast } from "@/hooks/use-toast";
+import { authClient } from "@/lib/auth/client";
 
 interface Company {
   id: string;
@@ -52,51 +53,74 @@ interface DashboardData {
   };
 }
 
-interface PlatformSession {
-  user: {
-    id: string;
-    email: string;
-    name?: string;
-    isPlatformUser: boolean;
-    platformRole: PlatformUserRole;
-  };
+interface PlatformUserData {
+  id: string;
+  email: string;
+  name: string | null;
+  role: UserRole;
 }
 
-// Custom hook for platform session
-function usePlatformSession() {
-  const [session, setSession] = useState<PlatformSession | null>(null);
-  const [status, setStatus] = useState<
-    "loading" | "authenticated" | "unauthenticated"
-  >("loading");
+// Platform roles for checking
+const PLATFORM_ROLES: UserRole[] = [
+  "PLATFORM_SUPER_ADMIN",
+  "PLATFORM_ADMIN",
+  "PLATFORM_SUPPORT",
+];
+
+function isPlatformRole(role: UserRole): boolean {
+  return PLATFORM_ROLES.includes(role);
+}
+
+// Custom hook for platform user data
+function usePlatformUser() {
+  const { data: sessionData, isPending } = authClient.useSession();
+  const [platformUser, setPlatformUser] = useState<PlatformUserData | null>(
+    null
+  );
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    const fetchSession = async () => {
-      try {
-        const response = await fetch("/api/platform/auth/session");
-        const sessionData = await response.json();
+    if (isPending) return;
 
-        if (sessionData?.user?.isPlatformUser) {
-          setSession(sessionData);
-          setStatus("authenticated");
+    if (!sessionData?.session) {
+      setPlatformUser(null);
+      setIsLoading(false);
+      return;
+    }
+
+    // Fetch user data from our API to get role
+    const fetchUser = async () => {
+      try {
+        const response = await fetch("/api/auth/me");
+        if (response.ok) {
+          const userData = await response.json();
+          if (isPlatformRole(userData.role)) {
+            setPlatformUser(userData);
+          } else {
+            setPlatformUser(null);
+          }
         } else {
-          setSession(null);
-          setStatus("unauthenticated");
+          setPlatformUser(null);
         }
-      } catch (error) {
-        console.error("Platform session fetch error:", error);
-        setSession(null);
-        setStatus("unauthenticated");
+      } catch {
+        setPlatformUser(null);
+      } finally {
+        setIsLoading(false);
       }
     };
 
-    fetchSession();
-  }, []);
+    fetchUser();
+  }, [sessionData, isPending]);
 
-  return { data: session, status };
+  return {
+    user: platformUser,
+    isLoading: isPending || isLoading,
+    isAuthenticated: !!platformUser,
+  };
 }
 
 export default function PlatformDashboard() {
-  const { data: session, status } = usePlatformSession();
+  const { user, isLoading: userLoading, isAuthenticated } = usePlatformUser();
   const router = useRouter();
   const { toast } = useToast();
   const [dashboardData, setDashboardData] = useState<DashboardData | null>(
@@ -115,7 +139,6 @@ export default function PlatformDashboard() {
     csvPassword: "",
     adminEmail: "",
     adminName: "",
-    adminPassword: "",
     maxUsers: 10,
   });
 
@@ -125,7 +148,6 @@ export default function PlatformDashboard() {
   const csvPasswordId = useId();
   const adminNameId = useId();
   const adminEmailId = useId();
-  const adminPasswordId = useId();
   const maxUsersId = useId();
 
   const fetchDashboardData = useCallback(async () => {
@@ -143,15 +165,15 @@ export default function PlatformDashboard() {
   }, []);
 
   useEffect(() => {
-    if (status === "loading") return;
+    if (userLoading) return;
 
-    if (status === "unauthenticated" || !session?.user?.isPlatformUser) {
+    if (!isAuthenticated) {
       router.push("/platform/login");
       return;
     }
 
     fetchDashboardData();
-  }, [session, status, router, fetchDashboardData]);
+  }, [userLoading, isAuthenticated, router, fetchDashboardData]);
 
   const copyToClipboard = async (text: string, type: "email" | "password") => {
     try {
@@ -211,14 +233,12 @@ export default function PlatformDashboard() {
           csvPassword: "",
           adminEmail: "",
           adminName: "",
-          adminPassword: "",
           maxUsers: 10,
         });
 
-        fetchDashboardData(); // Refresh the list
+        fetchDashboardData();
 
-        // Show success message with copyable credentials
-        if (result.generatedPassword) {
+        if (result.adminUser) {
           toast({
             title: "Company Created Successfully!",
             description: (
@@ -251,34 +271,36 @@ export default function PlatformDashboard() {
                       )}
                     </Button>
                   </div>
-                  <div className="flex items-center justify-between bg-muted p-2 rounded">
-                    <div className="flex-1">
-                      <p className="text-xs text-muted-foreground">
-                        Admin Password:
-                      </p>
-                      <p className="font-mono text-sm">
-                        {result.generatedPassword}
-                      </p>
+                  {result.inviteLink && (
+                    <div className="flex items-center justify-between bg-muted p-2 rounded">
+                      <div className="flex-1">
+                        <p className="text-xs text-muted-foreground">
+                          Invite Link:
+                        </p>
+                        <p className="font-mono text-sm truncate">
+                          {result.inviteLink}
+                        </p>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() =>
+                          copyToClipboard(result.inviteLink, "password")
+                        }
+                        className="h-8 w-8 p-0"
+                      >
+                        {copiedPassword ? (
+                          <Check className="h-3 w-3" />
+                        ) : (
+                          <Copy className="h-3 w-3" />
+                        )}
+                      </Button>
                     </div>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={() =>
-                        copyToClipboard(result.generatedPassword, "password")
-                      }
-                      className="h-8 w-8 p-0"
-                    >
-                      {copiedPassword ? (
-                        <Check className="h-3 w-3" />
-                      ) : (
-                        <Copy className="h-3 w-3" />
-                      )}
-                    </Button>
-                  </div>
+                  )}
                 </div>
               </div>
             ),
-            duration: 15000, // Longer duration for credentials
+            duration: 15000,
           });
         } else {
           toast({
@@ -317,7 +339,7 @@ export default function PlatformDashboard() {
     }
   };
 
-  if (status === "loading" || isLoading) {
+  if (userLoading || isLoading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">Loading platform dashboard...</div>
@@ -325,7 +347,7 @@ export default function PlatformDashboard() {
     );
   }
 
-  if (status === "unauthenticated" || !session?.user?.isPlatformUser) {
+  if (!isAuthenticated || !user) {
     return null;
   }
 
@@ -352,13 +374,12 @@ export default function PlatformDashboard() {
                 Platform Dashboard
               </h1>
               <p className="text-sm text-gray-500 dark:text-gray-400">
-                Welcome back, {session.user.name || session.user.email}
+                Welcome back, {user.name || user.email}
               </p>
             </div>
             <div className="flex gap-4 items-center">
               <ThemeToggle />
 
-              {/* Search Filter */}
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input
@@ -378,7 +399,6 @@ export default function PlatformDashboard() {
       </div>
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Stats Overview */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -430,7 +450,6 @@ export default function PlatformDashboard() {
           </Card>
         </div>
 
-        {/* Companies List */}
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center justify-between">
@@ -550,21 +569,6 @@ export default function PlatformDashboard() {
                           placeholder="admin@acme.com"
                         />
                       </div>
-                      <div className="space-y-2">
-                        <Label htmlFor={adminPasswordId}>Admin Password</Label>
-                        <Input
-                          id={adminPasswordId}
-                          type="password"
-                          value={newCompanyData.adminPassword}
-                          onChange={(e) =>
-                            setNewCompanyData((prev) => ({
-                              ...prev,
-                              adminPassword: e.target.value,
-                            }))
-                          }
-                          placeholder="Leave empty to auto-generate"
-                        />
-                      </div>
                       <div className="space-y-2">
                         <Label htmlFor={maxUsersId}>Max Users</Label>
                         <Input
diff --git a/app/platform/layout.tsx b/app/platform/layout.tsx
index 8175504..816fbce 100644
--- a/app/platform/layout.tsx
+++ b/app/platform/layout.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { SessionProvider } from "next-auth/react";
+import { NeonAuthUIProvider } from "@neondatabase/auth/react";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
+import { authClient } from "@/lib/auth/client";
 
 export default function PlatformLayout({
   children,
@@ -16,10 +17,15 @@ export default function PlatformLayout({
       enableSystem
       disableTransitionOnChange
     >
-      <SessionProvider basePath="/api/platform/auth">
+      <NeonAuthUIProvider
+        authClient={authClient}
+        redirectTo="/platform/dashboard"
+        emailOTP
+        credentials={{ forgotPassword: true }}
+      >
         {children}
         <Toaster />
-      </SessionProvider>
+      </NeonAuthUIProvider>
     </ThemeProvider>
   );
 }
diff --git a/app/platform/login/page.tsx b/app/platform/login/page.tsx
index 3eee24e..7f6cb3f 100644
--- a/app/platform/login/page.tsx
+++ b/app/platform/login/page.tsx
@@ -1,49 +1,29 @@
 "use client";
 
+import { AuthView } from "@neondatabase/auth/react";
 import { useRouter } from "next/navigation";
-import { signIn } from "next-auth/react";
-import { useId, useState } from "react";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
+import { useEffect } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { ThemeToggle } from "@/components/ui/theme-toggle";
+import { authClient } from "@/lib/auth/client";
 
 export default function PlatformLoginPage() {
-  const emailId = useId();
-  const passwordId = useId();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState("");
   const router = useRouter();
+  const { data, isPending } = authClient.useSession();
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError("");
-
-    try {
-      const result = await signIn("credentials", {
-        email,
-        password,
-        redirect: false,
-        callbackUrl: "/platform/dashboard",
-      });
-
-      if (result?.error) {
-        setError("Invalid credentials");
-      } else if (result?.ok) {
-        // Login successful, redirect to dashboard
-        router.push("/platform/dashboard");
-      }
-    } catch (_error) {
-      setError("An error occurred during login");
-    } finally {
-      setIsLoading(false);
+  useEffect(() => {
+    if (!isPending && data?.session) {
+      router.push("/platform/dashboard");
     }
-  };
+  }, [data, isPending, router]);
+
+  if (isPending) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <div className="text-center">Loading...</div>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 relative">
@@ -58,43 +38,7 @@ export default function PlatformLoginPage() {
           </p>
         </CardHeader>
         <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {error && (
-              <Alert variant="destructive">
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            )}
-
-            <div className="space-y-2">
-              <Label htmlFor={emailId}>Email</Label>
-              <Input
-                id={emailId}
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                disabled={isLoading}
-                autoComplete="email"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor={passwordId}>Password</Label>
-              <Input
-                id={passwordId}
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                disabled={isLoading}
-                autoComplete="current-password"
-              />
-            </div>
-
-            <Button type="submit" className="w-full" disabled={isLoading}>
-              {isLoading ? "Signing in..." : "Sign In"}
-            </Button>
-          </form>
+          <AuthView pathname="sign-in" />
         </CardContent>
       </Card>
     </div>
diff --git a/app/providers.tsx b/app/providers.tsx
index 46f4626..4d63671 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { SessionProvider } from "next-auth/react";
+import { NeonAuthUIProvider, UserButton } from "@neondatabase/auth/react";
 import type { ReactNode } from "react";
 import { ThemeProvider } from "@/components/theme-provider";
+import { authClient } from "@/lib/auth/client";
 
 export function Providers({ children }: { children: ReactNode }) {
-  // Including error handling and refetch interval for better user experience
   return (
     <ThemeProvider
       attribute="class"
@@ -13,13 +13,17 @@ export function Providers({ children }: { children: ReactNode }) {
       enableSystem
       disableTransitionOnChange
     >
-      <SessionProvider
-        // Re-fetch session every 30 minutes (reduced from 10)
-        refetchInterval={30 * 60}
-        refetchOnWindowFocus={false}
+      <NeonAuthUIProvider
+        authClient={authClient}
+        redirectTo="/dashboard"
+        emailOTP
+        credentials={{ forgotPassword: true }}
       >
         {children}
-      </SessionProvider>
+      </NeonAuthUIProvider>
     </ThemeProvider>
   );
 }
+
+// Export UserButton for use in layouts
+export { UserButton };
diff --git a/app/register/page.tsx b/app/register/page.tsx
deleted file mode 100644
index 6e68084..0000000
--- a/app/register/page.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-export default function RegisterPage() {
-  const [email, setEmail] = useState<string>("");
-  const [company, setCompany] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [csvUrl, setCsvUrl] = useState<string>("");
-  const [role, setRole] = useState<string>("ADMIN"); // Default to ADMIN for company registration
-  const [error, setError] = useState<string>("");
-  const router = useRouter();
-
-  async function handleRegister(e: React.FormEvent) {
-    e.preventDefault();
-    const res = await fetch("/api/register", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email, password, company, csvUrl, role }),
-    });
-    if (res.ok) router.push("/login");
-    else setError("Registration failed.");
-  }
-
-  return (
-    <div className="max-w-md mx-auto mt-24 bg-white rounded-xl p-8 shadow">
-      <h1 className="text-2xl font-bold mb-6">Register Company</h1>
-      {error && <div className="text-red-600 mb-3">{error}</div>}
-      <form onSubmit={handleRegister} className="flex flex-col gap-4">
-        <input
-          className="border px-3 py-2 rounded"
-          type="text"
-          placeholder="Company Name"
-          value={company}
-          onChange={(e) => setCompany(e.target.value)}
-          required
-        />
-        <input
-          className="border px-3 py-2 rounded"
-          type="email"
-          placeholder="Admin Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <input
-          className="border px-3 py-2 rounded"
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          required
-        />
-        <input
-          className="border px-3 py-2 rounded"
-          type="text"
-          placeholder="CSV URL"
-          value={csvUrl}
-          onChange={(e) => setCsvUrl(e.target.value)}
-        />
-        <select
-          className="border px-3 py-2 rounded"
-          value={role}
-          onChange={(e) => setRole(e.target.value)}
-          required
-        >
-          <option value="admin">Admin</option>
-          <option value="user">User</option>
-          <option value="AUDITOR">Auditor</option>
-        </select>
-        <button className="bg-blue-600 text-white rounded py-2" type="submit">
-          Register & Continue
-        </button>
-      </form>
-    </div>
-  );
-}
diff --git a/app/reset-password/page.tsx b/app/reset-password/page.tsx
deleted file mode 100644
index 94d6bd0..0000000
--- a/app/reset-password/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense, useState } from "react";
-
-// Component that uses useSearchParams wrapped in Suspense
-function ResetPasswordForm() {
-  const searchParams = useSearchParams();
-  const token = searchParams?.get("token");
-  const [password, setPassword] = useState<string>("");
-  const [message, setMessage] = useState<string>("");
-  const router = useRouter();
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    const res = await fetch("/api/reset-password", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ token, password }),
-    });
-    if (res.ok) {
-      setMessage("Password reset! Redirecting to login...");
-      setTimeout(() => router.push("/login"), 2000);
-    } else setMessage("Invalid or expired link.");
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-      <input
-        className="border px-3 py-2 rounded"
-        type="password"
-        placeholder="New Password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        required
-      />
-      <button className="bg-blue-600 text-white rounded py-2" type="submit">
-        Reset Password
-      </button>
-      <div className="mt-4 text-green-700">{message}</div>
-    </form>
-  );
-}
-
-// Loading fallback component
-function LoadingForm() {
-  return <div className="text-center py-4">Loading...</div>;
-}
-
-export default function ResetPasswordPage() {
-  return (
-    <div className="max-w-md mx-auto mt-24 bg-white rounded-xl p-8 shadow">
-      <h1 className="text-2xl font-bold mb-6">Reset Password</h1>
-      <Suspense fallback={<LoadingForm />}>
-        <ResetPasswordForm />
-      </Suspense>
-    </div>
-  );
-}
diff --git a/bun.lock b/bun.lock
index 41a2d39..a17af93 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,6 +5,7 @@
     "": {
       "name": "livedash-node",
       "dependencies": {
+        "@neondatabase/auth": "^0.1.0-beta.21",
         "@prisma/adapter-pg": "^6.19.2",
         "@prisma/client": "^6.19.2",
         "@radix-ui/react-accordion": "^1.2.12",
@@ -48,7 +49,6 @@
         "lucide-react": "^0.525.0",
         "motion": "^12.27.1",
         "next": "^16.1.4",
-        "next-auth": "^4.24.13",
         "next-themes": "^0.4.6",
         "node-cron": "^4.2.1",
         "node-fetch": "^3.3.2",
@@ -159,6 +159,20 @@
 
     "@bcoe/v8-coverage": ["@bcoe/v8-coverage@1.0.2", "", {}, "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA=="],
 
+    "@better-auth/core": ["@better-auth/core@1.4.6", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "zod": "^4.1.12" }, "peerDependencies": { "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.18", "better-call": "1.1.5", "jose": "^6.1.0", "kysely": "^0.28.5", "nanostores": "^1.0.1" } }, "sha512-cYjscr4wU5ZJPhk86JuUkecJT+LSYCFmUzYaitiLkizl+wCr1qdPFSEoAnRVZVTUEEoKpeS2XW69voBJ1NoB3g=="],
+
+    "@better-auth/passkey": ["@better-auth/passkey@1.4.16", "", { "dependencies": { "@simplewebauthn/browser": "^13.1.2", "@simplewebauthn/server": "^13.1.2", "zod": "^4.1.12" }, "peerDependencies": { "@better-auth/core": "1.4.16", "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.21", "better-auth": "1.4.16", "better-call": "1.1.8", "nanostores": "^1.0.1" } }, "sha512-PFe+VJhkAvWnExxk5AKVNDcBTPls9IPMuzXxSwx3ygSs8V8MrS2OI6B1/CI3YIaOoeLcEbxtaGVTLbJ9xXOyvA=="],
+
+    "@better-auth/telemetry": ["@better-auth/telemetry@1.4.6", "", { "dependencies": { "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.18" }, "peerDependencies": { "@better-auth/core": "1.4.6" } }, "sha512-idc9MGJXxWA7zl2U9zsbdG6+2ZCeqWdPq1KeFSfyqGMFtI1VPQOx9YWLqNPOt31YnOX77ojZSraU2sb7IRdBMA=="],
+
+    "@better-auth/utils": ["@better-auth/utils@0.3.0", "", {}, "sha512-W+Adw6ZA6mgvnSnhOki270rwJ42t4XzSK6YWGF//BbVXL6SwCLWfyzBc1lN2m/4RM28KubdBKQ4X5VMoLRNPQw=="],
+
+    "@better-fetch/fetch": ["@better-fetch/fetch@1.1.18", "", {}, "sha512-rEFOE1MYIsBmoMJtQbl32PGHHXuG2hDxvEd7rUHE0vCBoFQVSDqaVs9hkZEtHCxRoY+CljXKFCOuJ8uxqw1LcA=="],
+
+    "@captchafox/react": ["@captchafox/react@1.10.0", "", { "dependencies": { "@captchafox/types": "^1.4.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-GRGdqZnz2KsJUXj17abe+V1kL1GhE3JsFgD0IkhZ6XVlr7IGJrnGWco1aID2jhFPunAtcdNuY+YuIEidtNNEpQ=="],
+
+    "@captchafox/types": ["@captchafox/types@1.4.0", "", {}, "sha512-4xnPMICLinsXghw6zWEF436lhMsBmLxui2QmU7xAEz/+572BRdvc518Sz5OoofbJ7GZG6QPz/wOtJoN8BfKyCg=="],
+
     "@cspotcode/source-map-support": ["@cspotcode/source-map-support@0.8.1", "", { "dependencies": { "@jridgewell/trace-mapping": "0.3.9" } }, "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw=="],
 
     "@csstools/color-helpers": ["@csstools/color-helpers@5.0.2", "", {}, "sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA=="],
@@ -173,6 +187,10 @@
 
     "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
 
+    "@daveyplate/better-auth-tanstack": ["@daveyplate/better-auth-tanstack@1.3.6", "", { "peerDependencies": { "@tanstack/query-core": ">=5.65.0", "@tanstack/react-query": ">=5.65.0", "better-auth": ">=1.2.8", "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-GvIGdbjRMZCEfAffU7LeWpGpie4vSli8V9jmNFCQOziZZMEFbO4cd53HBFmAushC9oEYIyhSNZBgV2ADzW94Ww=="],
+
+    "@daveyplate/better-auth-ui": ["@daveyplate/better-auth-ui@3.3.9", "", { "dependencies": { "@better-fetch/fetch": "^1.1.21", "@hcaptcha/react-hcaptcha": "^1.17.1", "@noble/hashes": "^2.0.1", "@react-email/components": "^1.0.1", "@wojtekmaj/react-recaptcha-v3": "^0.1.4", "react-google-recaptcha": "^3.1.0", "react-qr-code": "^2.0.18", "ua-parser-js": "^2.0.7", "vaul": "^1.1.2" }, "peerDependencies": { "@better-auth/passkey": ">=1.4.6", "@captchafox/react": "^1.10.0", "@daveyplate/better-auth-tanstack": "^1.3.6", "@hookform/resolvers": ">=5.2.0", "@instantdb/react": ">=0.18.0", "@marsidev/react-turnstile": ">=1.1.0", "@radix-ui/react-avatar": ">=1.1.0", "@radix-ui/react-checkbox": ">=1.1.0", "@radix-ui/react-context": ">=1.1.0", "@radix-ui/react-dialog": ">=1.1.0", "@radix-ui/react-dropdown-menu": ">=2.1.0", "@radix-ui/react-label": ">=2.1.0", "@radix-ui/react-primitive": ">=2.0.0", "@radix-ui/react-select": ">=2.2.0", "@radix-ui/react-separator": ">=1.1.0", "@radix-ui/react-slot": ">=1.1.0", "@radix-ui/react-tabs": ">=1.1.0", "@radix-ui/react-use-callback-ref": ">=1.1.0", "@radix-ui/react-use-layout-effect": ">=1.1.0", "@tanstack/react-query": ">=5.66.0", "@triplit/client": ">=1.0.0", "@triplit/react": ">=1.0.0", "better-auth": "^1.4.6", "class-variance-authority": ">=0.7.0", "clsx": ">=2.1.0", "input-otp": ">=1.4.0", "lucide-react": ">=0.469.0", "react": ">=18.0.0", "react-dom": ">=18.0.0", "react-hook-form": ">=7.55.0", "sonner": ">=1.7.0", "tailwind-merge": ">=2.6.0", "tailwindcss": ">=3.0.0", "zod": ">=3.0.0" } }, "sha512-bKUSytQmIaUwPd6hFcbZGiscCDhrh2BN10DZCR3QjsXpc0Wj2yBUcKQC2FKr8dUPZiUnWNt2ajIsEnaMXuKewA=="],
+
     "@emnapi/core": ["@emnapi/core@1.4.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.2", "tslib": "2.8.1" } }, "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
@@ -257,6 +275,14 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
 
+    "@hcaptcha/loader": ["@hcaptcha/loader@2.3.0", "", {}, "sha512-i4lnNxKBe+COf3R1nFZEWaZoHIoJjvDgWqvcNrdZq8ehoSNMN6KVZ56dcQ02qKie2h3+BkbkwlJA9DOIuLlK/g=="],
+
+    "@hcaptcha/react-hcaptcha": ["@hcaptcha/react-hcaptcha@1.17.4", "", { "dependencies": { "@babel/runtime": "^7.17.9", "@hcaptcha/loader": "^2.3.0" }, "peerDependencies": { "react": ">= 16.3.0", "react-dom": ">= 16.3.0" } }, "sha512-rIvgesG1N7SS9sAYYHFoWm+nXqRrxq7RcA9z2pKkDWV+S1GdfmrTNYA1aPyVWVe3eowphTCwyDJvl97Swwy0mw=="],
+
+    "@hexagon/base64": ["@hexagon/base64@1.1.28", "", {}, "sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw=="],
+
+    "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "0.19.1", "@humanwhocodes/retry": "0.3.1" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
@@ -319,6 +345,14 @@
 
     "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
 
+    "@instantdb/core": ["@instantdb/core@0.22.105", "", { "dependencies": { "@instantdb/version": "0.22.105", "mutative": "^1.0.10", "uuid": "^11.1.0" } }, "sha512-Hq+ShLar0dPA3EcErxyBK3GGSigV8/nHgTFzEKKXcuI76eSC3eEVvYHPUdDDTSGvwzGBzHrWcCHjPeuIkykL7Q=="],
+
+    "@instantdb/react": ["@instantdb/react@0.22.105", "", { "dependencies": { "@instantdb/core": "0.22.105", "@instantdb/react-common": "0.22.105", "@instantdb/version": "0.22.105", "eventsource": "^4.0.0" }, "peerDependencies": { "react": ">=16" } }, "sha512-GE5REp1YLtCMU+IDqLUIQfcIUHM/mfUvRe/waZT/nyVQkZYNCVixzkGFV63rBpD09g49G3eU0FppmIpVs5EwgA=="],
+
+    "@instantdb/react-common": ["@instantdb/react-common@0.22.105", "", { "dependencies": { "@instantdb/core": "0.22.105", "@instantdb/version": "0.22.105" }, "peerDependencies": { "react": ">=16" } }, "sha512-pleEGnd8SopLM7xXWcJjqjaZCAPTjTbaOBIlkLyVNcwgBIr6U2kstp8ZeWnePM0VHGGZ/bZ2OQV3FbzMig+nrQ=="],
+
+    "@instantdb/version": ["@instantdb/version@0.22.105", "", {}, "sha512-j+PpTSesnpJrJnCcKaTzGVO+zJfYCZklN0oWAMpnrY+UjEXF0rKljYiy+kOwfXVQgjZGfqdyQaq1RMqfIplh4g=="],
+
     "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "5.1.2", "string-width-cjs": "npm:string-width@4.2.3", "strip-ansi": "7.1.0", "strip-ansi-cjs": "npm:strip-ansi@6.0.1", "wrap-ansi": "8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
 
     "@istanbuljs/schema": ["@istanbuljs/schema@0.1.3", "", {}, "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA=="],
@@ -339,8 +373,16 @@
 
     "@kurkle/color": ["@kurkle/color@0.3.4", "", {}, "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="],
 
+    "@levischuck/tiny-cbor": ["@levischuck/tiny-cbor@0.2.11", "", {}, "sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow=="],
+
+    "@marsidev/react-turnstile": ["@marsidev/react-turnstile@1.4.1", "", { "peerDependencies": { "react": "^17.0.2 || ^18.0.0 || ^19.0", "react-dom": "^17.0.2 || ^18.0.0 || ^19.0" } }, "sha512-1jE0IjvB8z+q1NFRs3149gXzXwIzXQWqQjn9fmAr13BiE3RYLWck5Me6flHYE90shW5L12Jkm6R1peS1OnA9oQ=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.11", "", { "dependencies": { "@emnapi/core": "1.4.3", "@emnapi/runtime": "1.4.3", "@tybys/wasm-util": "0.9.0" } }, "sha512-9DPkXtvHydrcOsopiYpUgPHpmj0HWZKMUnL2dZqpvC42lsratuBG06V5ipyno0fUek5VlFsNQ+AcFATSrJXgMA=="],
 
+    "@neondatabase/auth": ["@neondatabase/auth@0.1.0-beta.21", "", { "dependencies": { "@neondatabase/auth-ui": "0.1.0-alpha.11", "@supabase/auth-js": "2.79.0", "better-auth": "1.4.6", "jose": "6.1.2", "zod": "4.1.12" }, "peerDependencies": { "next": ">=16.0.6", "react": ">=18.0.0", "react-dom": ">=18.0.0" }, "optionalPeers": ["next", "react", "react-dom"] }, "sha512-j1pMr/j5AawxB0K0FltyHzlfWTJ6hsSvqOKQQ5lL8fKpwvmrzD2i+BOQAfMiQm5C3IQ7fltSDuCDT6v43orkBQ=="],
+
+    "@neondatabase/auth-ui": ["@neondatabase/auth-ui@0.1.0-alpha.11", "", { "dependencies": { "@captchafox/react": "^1.10.0", "@daveyplate/better-auth-ui": "3.3.9", "@hcaptcha/react-hcaptcha": "^1.12.1", "@hookform/resolvers": "^5.2.2", "@marsidev/react-turnstile": ">=1.1.0", "@radix-ui/react-avatar": "^1.1.11", "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-context": "^1.1.3", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-primitive": "^2.1.4", "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-separator": "^1.1.8", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-use-callback-ref": "^1.1.1", "@radix-ui/react-use-layout-effect": "^1.1.1", "@wojtekmaj/react-recaptcha-v3": "^0.1.4", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "input-otp": "^1.4.2", "lucide-react": "^0.555.0", "next-themes": "^0.4.6", "react-google-recaptcha": "^3.1.0", "react-hook-form": "^7.66.1", "react-qr-code": "^2.0.18", "sonner": "^2.0.7", "tailwind-merge": "^3.4.0", "tailwindcss": "^4.1.17", "tw-animate-css": "^1.4.0", "ua-parser-js": "^2.0.5", "vaul": "^1.1.2", "zod": "^4.1.12" }, "peerDependencies": { "@neondatabase/auth": ">=0.1.0-alpha.8", "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-iSo4O+4mo6eeLQrk70p0LdYRjx2zgoVjx4rPjPzcNFb6/2tipxZdF6uwjO5cnRIZxZB56t63I4Bw8xdVnZNSzw=="],
+
     "@next/env": ["@next/env@16.1.4", "", {}, "sha512-gkrXnZyxPUy0Gg6SrPQPccbNVLSP3vmW8LU5dwEttEEC1RwDivk8w4O+sZIjFvPrSICXyhQDCG+y3VmjlJf+9A=="],
 
     "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.1.4", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-38WMjGP8y+1MN4bcZFs+GTcBe0iem5GGTzFE5GWW/dWdRKde7LOXH3lQT2QuoquVWyfl2S0fQRchGmeacGZ4Wg=="],
@@ -361,6 +403,10 @@
 
     "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.1.4", "", { "os": "win32", "cpu": "x64" }, "sha512-JSVlm9MDhmTXw/sO2PE/MRj+G6XOSMZB+BcZ0a7d6KwVFZVpkHcb2okyoYFBaco6LeiL53BBklRlOrDDbOeE5w=="],
 
+    "@noble/ciphers": ["@noble/ciphers@2.1.1", "", {}, "sha512-bysYuiVfhxNJuldNXlFEitTVdNnYUc+XNJZd7Qm2a5j1vZHgY+fazadNFWFaMK/2vye0JVlxV3gHmC0WDfAOQw=="],
+
+    "@noble/hashes": ["@noble/hashes@2.0.1", "", {}, "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw=="],
+
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "1.2.0" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
     "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
@@ -369,7 +415,29 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
-    "@panva/hkdf": ["@panva/hkdf@1.2.1", "", {}, "sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw=="],
+    "@peculiar/asn1-android": ["@peculiar/asn1-android@2.6.0", "", { "dependencies": { "@peculiar/asn1-schema": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-cBRCKtYPF7vJGN76/yG8VbxRcHLPF3HnkoHhKOZeHpoVtbMYfY9ROKtH3DtYUY9m8uI1Mh47PRhHf2hSK3xcSQ=="],
+
+    "@peculiar/asn1-cms": ["@peculiar/asn1-cms@2.6.0", "", { "dependencies": { "@peculiar/asn1-schema": "^2.6.0", "@peculiar/asn1-x509": "^2.6.0", "@peculiar/asn1-x509-attr": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-2uZqP+ggSncESeUF/9Su8rWqGclEfEiz1SyU02WX5fUONFfkjzS2Z/F1Li0ofSmf4JqYXIOdCAZqIXAIBAT1OA=="],
+
+    "@peculiar/asn1-csr": ["@peculiar/asn1-csr@2.6.0", "", { "dependencies": { "@peculiar/asn1-schema": "^2.6.0", "@peculiar/asn1-x509": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-BeWIu5VpTIhfRysfEp73SGbwjjoLL/JWXhJ/9mo4vXnz3tRGm+NGm3KNcRzQ9VMVqwYS2RHlolz21svzRXIHPQ=="],
+
+    "@peculiar/asn1-ecc": ["@peculiar/asn1-ecc@2.6.0", "", { "dependencies": { "@peculiar/asn1-schema": "^2.6.0", "@peculiar/asn1-x509": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-FF3LMGq6SfAOwUG2sKpPXblibn6XnEIKa+SryvUl5Pik+WR9rmRA3OCiwz8R3lVXnYnyRkSZsSLdml8H3UiOcw=="],
+
+    "@peculiar/asn1-pfx": ["@peculiar/asn1-pfx@2.6.0", "", { "dependencies": { "@peculiar/asn1-cms": "^2.6.0", "@peculiar/asn1-pkcs8": "^2.6.0", "@peculiar/asn1-rsa": "^2.6.0", "@peculiar/asn1-schema": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-rtUvtf+tyKGgokHHmZzeUojRZJYPxoD/jaN1+VAB4kKR7tXrnDCA/RAWXAIhMJJC+7W27IIRGe9djvxKgsldCQ=="],
+
+    "@peculiar/asn1-pkcs8": ["@peculiar/asn1-pkcs8@2.6.0", "", { "dependencies": { "@peculiar/asn1-schema": "^2.6.0", "@peculiar/asn1-x509": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-KyQ4D8G/NrS7Fw3XCJrngxmjwO/3htnA0lL9gDICvEQ+GJ+EPFqldcJQTwPIdvx98Tua+WjkdKHSC0/Km7T+lA=="],
+
+    "@peculiar/asn1-pkcs9": ["@peculiar/asn1-pkcs9@2.6.0", "", { "dependencies": { "@peculiar/asn1-cms": "^2.6.0", "@peculiar/asn1-pfx": "^2.6.0", "@peculiar/asn1-pkcs8": "^2.6.0", "@peculiar/asn1-schema": "^2.6.0", "@peculiar/asn1-x509": "^2.6.0", "@peculiar/asn1-x509-attr": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-b78OQ6OciW0aqZxdzliXGYHASeCvvw5caqidbpQRYW2mBtXIX2WhofNXTEe7NyxTb0P6J62kAAWLwn0HuMF1Fw=="],
+
+    "@peculiar/asn1-rsa": ["@peculiar/asn1-rsa@2.6.0", "", { "dependencies": { "@peculiar/asn1-schema": "^2.6.0", "@peculiar/asn1-x509": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-Nu4C19tsrTsCp9fDrH+sdcOKoVfdfoQQ7S3VqjJU6vedR7tY3RLkQ5oguOIB3zFW33USDUuYZnPEQYySlgha4w=="],
+
+    "@peculiar/asn1-schema": ["@peculiar/asn1-schema@2.6.0", "", { "dependencies": { "asn1js": "^3.0.6", "pvtsutils": "^1.3.6", "tslib": "^2.8.1" } }, "sha512-xNLYLBFTBKkCzEZIw842BxytQQATQv+lDTCEMZ8C196iJcJJMBUZxrhSTxLaohMyKK8QlzRNTRkUmanucnDSqg=="],
+
+    "@peculiar/asn1-x509": ["@peculiar/asn1-x509@2.6.0", "", { "dependencies": { "@peculiar/asn1-schema": "^2.6.0", "asn1js": "^3.0.6", "pvtsutils": "^1.3.6", "tslib": "^2.8.1" } }, "sha512-uzYbPEpoQiBoTq0/+jZtpM6Gq6zADBx+JNFP3yqRgziWBxQ/Dt/HcuvRfm9zJTPdRcBqPNdaRHTVwpyiq6iNMA=="],
+
+    "@peculiar/asn1-x509-attr": ["@peculiar/asn1-x509-attr@2.6.0", "", { "dependencies": { "@peculiar/asn1-schema": "^2.6.0", "@peculiar/asn1-x509": "^2.6.0", "asn1js": "^3.0.6", "tslib": "^2.8.1" } }, "sha512-MuIAXFX3/dc8gmoZBkwJWxUWOSvG4MMDntXhrOZpJVMkYX+MYc/rUAU2uJOved9iJEoiUx7//3D8oG83a78UJA=="],
+
+    "@peculiar/x509": ["@peculiar/x509@1.14.3", "", { "dependencies": { "@peculiar/asn1-cms": "^2.6.0", "@peculiar/asn1-csr": "^2.6.0", "@peculiar/asn1-ecc": "^2.6.0", "@peculiar/asn1-pkcs9": "^2.6.0", "@peculiar/asn1-rsa": "^2.6.0", "@peculiar/asn1-schema": "^2.6.0", "@peculiar/asn1-x509": "^2.6.0", "pvtsutils": "^1.3.6", "reflect-metadata": "^0.2.2", "tslib": "^2.8.1", "tsyringe": "^4.10.0" } }, "sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA=="],
 
     "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 
@@ -405,6 +473,10 @@
 
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "optionalDependencies": { "@types/react": "19.1.8", "@types/react-dom": "19.1.6" }, "peerDependencies": { "react": "19.1.0", "react-dom": "19.1.0" } }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
 
+    "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.11", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-is-hydrated": "0.1.0", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q=="],
+
+    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
+
     "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
 
     "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "optionalDependencies": { "@types/react": "19.1.8", "@types/react-dom": "19.1.6" }, "peerDependencies": { "react": "19.1.0", "react-dom": "19.1.0" } }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
@@ -469,6 +541,8 @@
 
     "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "optionalDependencies": { "@types/react": "19.1.8" }, "peerDependencies": { "react": "19.1.0" } }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
 
+    "@radix-ui/react-use-is-hydrated": ["@radix-ui/react-use-is-hydrated@0.1.0", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA=="],
+
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "optionalDependencies": { "@types/react": "19.1.8" }, "peerDependencies": { "react": "19.1.0" } }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
     "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "optionalDependencies": { "@types/react": "19.1.8" }, "peerDependencies": { "react": "19.1.0" } }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
@@ -483,6 +557,48 @@
 
     "@rapideditor/country-coder": ["@rapideditor/country-coder@5.6.0", "", { "dependencies": { "which-polygon": "^2.2.1" } }, "sha512-lqu2uyAHJWJ/E0j2ISF8HcGvior6wRxZRnvuCAQJBGtj+Ye2cqokqK4BGMWOCOE13QcZg6SOEiUevO+18NP3+g=="],
 
+    "@react-email/body": ["@react-email/body@0.2.1", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-ljDiQiJDu/Fq//vSIIP0z5Nuvt4+DX1RqGasstChDGJB/14ogd4VdNS9aacoede/ZjGy3o3Qb+cxyS+XgM6SwQ=="],
+
+    "@react-email/button": ["@react-email/button@0.2.1", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-qXyj7RZLE7POy9BMKSoqQ00tOXThjOZSUnI2Yu9i29IHngPlmrNayIWBoVKtElES7OWwypUcpiajwi1mUWx6/A=="],
+
+    "@react-email/code-block": ["@react-email/code-block@0.2.1", "", { "dependencies": { "prismjs": "^1.30.0" }, "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-M3B7JpVH4ytgn83/ujRR1k1DQHvTeABiDM61OvAbjLRPhC/5KLHU5KkzIbbuGIrjWwxAbL1kSQzU8MhLEtSxyw=="],
+
+    "@react-email/code-inline": ["@react-email/code-inline@0.0.6", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-jfhebvv3dVsp3OdPgKXnk8+e2pBiDVZejDOBFzBa/IblrAJ9cQDkN6rBD5IyEg8hTOxwbw3iaI/yZFmDmIguIA=="],
+
+    "@react-email/column": ["@react-email/column@0.0.14", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-f+W+Bk2AjNO77zynE33rHuQhyqVICx4RYtGX9NKsGUg0wWjdGP0qAuIkhx9Rnmk4/hFMo1fUrtYNqca9fwJdHg=="],
+
+    "@react-email/components": ["@react-email/components@1.0.5", "", { "dependencies": { "@react-email/body": "0.2.1", "@react-email/button": "0.2.1", "@react-email/code-block": "0.2.1", "@react-email/code-inline": "0.0.6", "@react-email/column": "0.0.14", "@react-email/container": "0.0.16", "@react-email/font": "0.0.10", "@react-email/head": "0.0.13", "@react-email/heading": "0.0.16", "@react-email/hr": "0.0.12", "@react-email/html": "0.0.12", "@react-email/img": "0.0.12", "@react-email/link": "0.0.13", "@react-email/markdown": "0.0.18", "@react-email/preview": "0.0.14", "@react-email/render": "2.0.3", "@react-email/row": "0.0.13", "@react-email/section": "0.0.17", "@react-email/tailwind": "2.0.3", "@react-email/text": "0.1.6" }, "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-kHPGsH4hrLd9c2eS4znuYonKMQ28JAzSj2nRgEQhtala+/6HHUo2wFS4znoD1BA87cBjkePQz+PSTIfZVpO6Tw=="],
+
+    "@react-email/container": ["@react-email/container@0.0.16", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-QWBB56RkkU0AJ9h+qy33gfT5iuZknPC7Un/IjZv9B0QmMIK+WWacc0cH6y2SV5Cv/b99hU94fjEMOOO4enpkbQ=="],
+
+    "@react-email/font": ["@react-email/font@0.0.10", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-0urVSgCmQIfx5r7Xc586miBnQUVnGp3OTYUm8m5pwtQRdTRO5XrTtEfNJ3JhYhSOruV0nD8fd+dXtKXobum6tA=="],
+
+    "@react-email/head": ["@react-email/head@0.0.13", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-AJg6le/08Gz4tm+6MtKXqtNNyKHzmooOCdmtqmWxD7FxoAdU1eVcizhtQ0gcnVaY6ethEyE/hnEzQxt1zu5Kog=="],
+
+    "@react-email/heading": ["@react-email/heading@0.0.16", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-jmsKnQm1ykpBzw4hCYHwBkt5pW2jScXffPeEH5ZRF5tZeF5b1pvlFTO9han7C0pCkZYo1kEvWiRtx69yfCIwuw=="],
+
+    "@react-email/hr": ["@react-email/hr@0.0.12", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-TwmOmBDibavUQpXBxpmZYi2Iks/yeZOzFYh+di9EltMSnEabH8dMZXrl+pxNXzCgZ2XE8HY7VmUL65Lenfu5PA=="],
+
+    "@react-email/html": ["@react-email/html@0.0.12", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-KTShZesan+UsreU7PDUV90afrZwU5TLwYlALuCSU0OT+/U8lULNNbAUekg+tGwCnOfIKYtpDPKkAMRdYlqUznw=="],
+
+    "@react-email/img": ["@react-email/img@0.0.12", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-sRCpEARNVTf3FQhZOC+JTvu5r6ubiYWkT0ucYXg8ctkyi4G8QG+jgYPiNUqVeTLA2STOfmPM/nrk1nb84y6CPQ=="],
+
+    "@react-email/link": ["@react-email/link@0.0.13", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-lkWc/NjOcefRZMkQoSDDbuKBEBDES9aXnFEOuPH845wD3TxPwh+QTf0fStuzjoRLUZWpHnio4z7qGGRYusn/sw=="],
+
+    "@react-email/markdown": ["@react-email/markdown@0.0.18", "", { "dependencies": { "marked": "^15.0.12" }, "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-gSuYK5fsMbGk87jDebqQ6fa2fKcWlkf2Dkva8kMONqLgGCq8/0d+ZQYMEJsdidIeBo3kmsnHZPrwdFB4HgjUXg=="],
+
+    "@react-email/preview": ["@react-email/preview@0.0.14", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-aYK8q0IPkBXyMsbpMXgxazwHxYJxTrXrV95GFuu2HbEiIToMwSyUgb8HDFYwPqqfV03/jbwqlsXmFxsOd+VNaw=="],
+
+    "@react-email/render": ["@react-email/render@2.0.3", "", { "dependencies": { "html-to-text": "^9.0.5", "prettier": "^3.5.3" }, "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-KRQCEjb2EhJvjGEWoD37Ivth16aRSmurqKVXgJmkKvP49u6AAXgXitdqrfSvP8tzWee9yi2qymt2e0pqcC9Lew=="],
+
+    "@react-email/row": ["@react-email/row@0.0.13", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-bYnOac40vIKCId7IkwuLAAsa3fKfSfqCvv6epJKmPE0JBuu5qI4FHFCl9o9dVpIIS08s/ub+Y/txoMt0dYziGw=="],
+
+    "@react-email/section": ["@react-email/section@0.0.17", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-qNl65ye3W0Rd5udhdORzTV9ezjb+GFqQQSae03NDzXtmJq6sqVXNWNiVolAjvJNypim+zGXmv6J9TcV5aNtE/w=="],
+
+    "@react-email/tailwind": ["@react-email/tailwind@2.0.3", "", { "dependencies": { "tailwindcss": "^4.1.18" }, "peerDependencies": { "@react-email/body": "0.2.1", "@react-email/button": "0.2.1", "@react-email/code-block": "0.2.1", "@react-email/code-inline": "0.0.6", "@react-email/container": "0.0.16", "@react-email/heading": "0.0.16", "@react-email/hr": "0.0.12", "@react-email/img": "0.0.12", "@react-email/link": "0.0.13", "@react-email/preview": "0.0.14", "@react-email/text": "0.1.6", "react": "^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@react-email/body", "@react-email/button", "@react-email/code-block", "@react-email/code-inline", "@react-email/container", "@react-email/heading", "@react-email/hr", "@react-email/img", "@react-email/link", "@react-email/preview"] }, "sha512-URXb/T2WS4RlNGM5QwekYnivuiVUcU87H0y5sqLl6/Oi3bMmgL0Bmw/W9GeJylC+876Vw+E6NkE0uRiUFIQwGg=="],
+
+    "@react-email/text": ["@react-email/text@0.1.6", "", { "peerDependencies": { "react": "^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-TYqkioRS45wTR5il3dYk/SbUjjEdhSwh9BtRNB99qNH1pXAwA45H7rAuxehiu8iJQJH0IyIr+6n62gBz9ezmsw=="],
+
     "@react-leaflet/core": ["@react-leaflet/core@3.0.0", "", { "peerDependencies": { "leaflet": "1.9.4", "react": "19.1.0", "react-dom": "19.1.0" } }, "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ=="],
 
     "@reduxjs/toolkit": ["@reduxjs/toolkit@2.8.2", "", { "dependencies": { "@standard-schema/spec": "1.0.0", "@standard-schema/utils": "0.3.0", "immer": "10.1.1", "redux": "5.0.1", "redux-thunk": "3.1.0", "reselect": "5.1.1" }, "optionalDependencies": { "react": "19.1.0", "react-redux": "9.2.0" } }, "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A=="],
@@ -531,6 +647,12 @@
 
     "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],
 
+    "@selderee/plugin-htmlparser2": ["@selderee/plugin-htmlparser2@0.11.0", "", { "dependencies": { "domhandler": "^5.0.3", "selderee": "^0.11.0" } }, "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ=="],
+
+    "@simplewebauthn/browser": ["@simplewebauthn/browser@13.2.2", "", {}, "sha512-FNW1oLQpTJyqG5kkDg5ZsotvWgmBaC6jCHR7Ej0qUNep36Wl9tj2eZu7J5rP+uhXgHaLk+QQ3lqcw2vS5MX1IA=="],
+
+    "@simplewebauthn/server": ["@simplewebauthn/server@13.2.2", "", { "dependencies": { "@hexagon/base64": "^1.1.27", "@levischuck/tiny-cbor": "^0.2.2", "@peculiar/asn1-android": "^2.3.10", "@peculiar/asn1-ecc": "^2.3.8", "@peculiar/asn1-rsa": "^2.3.8", "@peculiar/asn1-schema": "^2.3.8", "@peculiar/asn1-x509": "^2.3.8", "@peculiar/x509": "^1.13.0" } }, "sha512-HcWLW28yTMGXpwE9VLx9J+N2KEUaELadLrkPEEI9tpI5la70xNEVEsu/C+m3u7uoq4FulLqZQhgBCzR9IZhFpA=="],
+
     "@sinclair/typebox": ["@sinclair/typebox@0.27.8", "", {}, "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="],
 
     "@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@2.3.0", "", {}, "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg=="],
@@ -539,6 +661,8 @@
 
     "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
 
+    "@supabase/auth-js": ["@supabase/auth-js@2.79.0", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-p2GKvdbF9d/6C+dtS6iNcSicPr6eUfkvovD60HWlWsD+oOjC483DzFWrzGjNpBwnswhfMRP8Qn3rYA0VWaOfjw=="],
+
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
 
     "@tailwindcss/node": ["@tailwindcss/node@4.1.18", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.18" } }, "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ=="],
@@ -571,6 +695,10 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.18", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "postcss": "^8.4.41", "tailwindcss": "4.1.18" } }, "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g=="],
 
+    "@tanstack/query-core": ["@tanstack/query-core@5.90.19", "", {}, "sha512-GLW5sjPVIvH491VV1ufddnfldyVB+teCnpPIvweEfkpRx7CfUmUGhoh9cdcUKBh/KwVxk22aNEDxeTsvmyB/WA=="],
+
+    "@tanstack/react-query": ["@tanstack/react-query@5.90.19", "", { "dependencies": { "@tanstack/query-core": "5.90.19" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-qTZRZ4QyTzQc+M0IzrbKHxSeISUmRB3RPGmao5bT+sI6ayxSRhn0FXEnT5Hg3as8SBFcRosrXXRFB+yAcxVxJQ=="],
+
     "@tanstack/react-table": ["@tanstack/react-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "react": "19.1.0", "react-dom": "19.1.0" } }, "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww=="],
 
     "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
@@ -581,6 +709,14 @@
 
     "@testing-library/react": ["@testing-library/react@16.3.2", "", { "dependencies": { "@babel/runtime": "^7.12.5" }, "peerDependencies": { "@testing-library/dom": "^10.0.0", "@types/react": "^18.0.0 || ^19.0.0", "@types/react-dom": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g=="],
 
+    "@triplit/client": ["@triplit/client@1.0.50", "", { "dependencies": { "@triplit/db": "^1.1.10", "@triplit/logger": "^0.0.3", "comlink": "^4.4.1", "superjson": "^2.2.1" } }, "sha512-3vjXTSdDQ3fzLDrewCK7elkAQc7CiDg0eZEOZInQbVMFRiakdieO5C2voSnNjSepIYHxDxFSBllgg32QsNpL9Q=="],
+
+    "@triplit/db": ["@triplit/db@1.1.10", "", { "dependencies": { "@triplit/logger": "^0.0.3", "core-js": "^3.41.0", "elen": "^1.0.10", "nanoid": "^5.1.0", "sorted-btree": "^1.8.1", "web-worker": "^1.5.0" }, "peerDependencies": { "better-sqlite3": "*", "expo-sqlite": "*", "lmdb": "*", "uuidv7": "*" }, "optionalPeers": ["better-sqlite3", "expo-sqlite", "lmdb", "uuidv7"] }, "sha512-9BHDrlDvJOyA9Wl8AsmbUSLhilaReA8gpFoWYjS9VEcm5d6TtqKazPQrFm0/o2WNJdrs01+qR6CysAo449MAyA=="],
+
+    "@triplit/logger": ["@triplit/logger@0.0.3", "", { "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-hHcoD6/BsNwBtXjEp8Wiy0/YA2SqIYXd1nMukEPBmFkjT7Cd30eqtsBRT0NRq2mIFX2mr5h9JaO27zDToKnwdw=="],
+
+    "@triplit/react": ["@triplit/react@1.0.51", "", { "dependencies": { "@triplit/client": "^1.0.50" }, "peerDependencies": { "react": "*" } }, "sha512-yGmYWACWycrNHMEfnR1k6CQ398ESIBgFeM47fXFhrdhMJ84QgdRk6VF/C21P80D1Rk/AQePfB0TUIaY4U9BRJg=="],
+
     "@tsconfig/node10": ["@tsconfig/node10@1.0.11", "", {}, "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw=="],
 
     "@tsconfig/node12": ["@tsconfig/node12@1.0.11", "", {}, "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="],
@@ -787,6 +923,8 @@
 
     "@vitest/utils": ["@vitest/utils@3.2.4", "", { "dependencies": { "@vitest/pretty-format": "3.2.4", "loupe": "3.1.4", "tinyrainbow": "2.0.0" } }, "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA=="],
 
+    "@wojtekmaj/react-recaptcha-v3": ["@wojtekmaj/react-recaptcha-v3@0.1.4", "", { "dependencies": { "warning": "^4.0.0" }, "peerDependencies": { "@types/react": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-zszMOdgI+y1Dz3496pRFr3t68n9+OmX/puLQNnOBDC7WrjM+nOKGyjIMCTe+3J14KDvzcxETeiglyDMGl0Yh/Q=="],
+
     "accepts": ["accepts@1.3.8", "", { "dependencies": { "mime-types": "2.1.35", "negotiator": "0.6.3" } }, "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw=="],
 
     "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
@@ -827,6 +965,8 @@
 
     "arraybuffer.prototype.slice": ["arraybuffer.prototype.slice@1.0.4", "", { "dependencies": { "array-buffer-byte-length": "1.0.2", "call-bind": "1.0.8", "define-properties": "1.2.1", "es-abstract": "1.24.0", "es-errors": "1.3.0", "get-intrinsic": "1.3.0", "is-array-buffer": "3.0.5" } }, "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ=="],
 
+    "asn1js": ["asn1js@3.0.7", "", { "dependencies": { "pvtsutils": "^1.3.6", "pvutils": "^1.1.3", "tslib": "^2.8.1" } }, "sha512-uLvq6KJu04qoQM6gvBfKFjlh6Gl0vOKQuR5cJMDHQkmwfMOQeN3F3SHCv9SNYSL+CRoHvOGFfllDlVz03GQjvQ=="],
+
     "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
 
     "ast-types-flow": ["ast-types-flow@0.0.8", "", {}, "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ=="],
@@ -851,6 +991,10 @@
 
     "bcryptjs": ["bcryptjs@3.0.3", "", { "bin": { "bcrypt": "bin/bcrypt" } }, "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g=="],
 
+    "better-auth": ["better-auth@1.4.6", "", { "dependencies": { "@better-auth/core": "1.4.6", "@better-auth/telemetry": "1.4.6", "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.18", "@noble/ciphers": "^2.0.0", "@noble/hashes": "^2.0.0", "better-call": "1.1.5", "defu": "^6.1.4", "jose": "^6.1.0", "kysely": "^0.28.5", "ms": "4.0.0-nightly.202508271359", "nanostores": "^1.0.1", "zod": "^4.1.12" }, "peerDependencies": { "@lynx-js/react": "*", "@sveltejs/kit": "^2.0.0", "@tanstack/react-start": "^1.0.0", "next": "^14.0.0 || ^15.0.0 || ^16.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "solid-js": "^1.0.0", "svelte": "^4.0.0 || ^5.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@lynx-js/react", "@sveltejs/kit", "@tanstack/react-start", "next", "react", "react-dom", "solid-js", "svelte", "vue"] }, "sha512-5wEBzjolrQA26b4uT6FVVYICsE3SmE/MzrZtl8cb2a3TJtswpP8v3OVV5yTso+ef9z85swgZk0/qBzcULFWVtA=="],
+
+    "better-call": ["better-call@1.1.5", "", { "dependencies": { "@better-auth/utils": "^0.3.0", "@better-fetch/fetch": "^1.1.4", "rou3": "^0.7.10", "set-cookie-parser": "^2.7.1" }, "peerDependencies": { "zod": "^4.0.0" }, "optionalPeers": ["zod"] }, "sha512-nQJ3S87v6wApbDwbZ++FrQiSiVxWvZdjaO+2v6lZJAG2WWggkB2CziUDjPciz3eAt9TqfRursIQMZIcpkBnvlw=="],
+
     "brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "1.0.2", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
@@ -909,6 +1053,8 @@
 
     "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
 
+    "comlink": ["comlink@4.4.2", "", {}, "sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g=="],
+
     "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
 
     "commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
@@ -925,7 +1071,9 @@
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
-    "cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
+    "copy-anything": ["copy-anything@4.0.5", "", { "dependencies": { "is-what": "^5.2.0" } }, "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA=="],
+
+    "core-js": ["core-js@3.47.0", "", {}, "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg=="],
 
     "create-require": ["create-require@1.1.1", "", {}, "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="],
 
@@ -1031,6 +1179,8 @@
 
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
+    "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
+
     "deepmerge-ts": ["deepmerge-ts@7.1.5", "", {}, "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw=="],
 
     "define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "1.0.1", "es-errors": "1.3.0", "gopd": "1.2.0" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="],
@@ -1049,6 +1199,8 @@
 
     "destr": ["destr@2.0.5", "", {}, "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="],
 
+    "detect-europe-js": ["detect-europe-js@0.1.2", "", {}, "sha512-lgdERlL3u0aUdHocoouzT10d9I89VVhk0qNRmll7mXdGfJT1/wqZ2ZLA4oJAjeACPY5fT1wsbq2AT+GkuInsow=="],
+
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
@@ -1065,6 +1217,14 @@
 
     "dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
 
+    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
+
+    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
+
+    "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="],
+
+    "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],
+
     "dotenv": ["dotenv@16.6.1", "", {}, "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "1.0.2", "es-errors": "1.3.0", "gopd": "1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
@@ -1075,6 +1235,8 @@
 
     "electron-to-chromium": ["electron-to-chromium@1.5.177", "", {}, "sha512-7EH2G59nLsEMj97fpDuvVcYi6lwTcM1xuWw3PssD8xzboAW7zj7iB3COEEEATUfjLHrs5uKBLQT03V/8URx06g=="],
 
+    "elen": ["elen@1.0.10", "", {}, "sha512-ZL799/V/kzxYJ6Wlfktreq6qQWfGc3VkGUQJW5lZQ8/MhsQiKTAwERPfhEwIsV2movRGe2DfV7H2MjRw76Z7Wg=="],
+
     "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
 
     "empathic": ["empathic@2.0.0", "", {}, "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA=="],
@@ -1149,6 +1311,10 @@
 
     "eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
 
+    "eventsource": ["eventsource@4.1.0", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-2GuF51iuHX6A9xdTccMTsNb7VO0lHZihApxhvQzJB5A03DvHDd2FQepodbMaztPBmBcE/ox7o2gqaxGhYB9LhQ=="],
+
+    "eventsource-parser": ["eventsource-parser@3.0.6", "", {}, "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg=="],
+
     "expect-type": ["expect-type@1.2.1", "", {}, "sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw=="],
 
     "exsolve": ["exsolve@1.0.8", "", {}, "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA=="],
@@ -1271,14 +1437,20 @@
 
     "hermes-parser": ["hermes-parser@0.25.1", "", { "dependencies": { "hermes-estree": "0.25.1" } }, "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA=="],
 
+    "hoist-non-react-statics": ["hoist-non-react-statics@3.3.2", "", { "dependencies": { "react-is": "^16.7.0" } }, "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="],
+
     "html-encoding-sniffer": ["html-encoding-sniffer@4.0.0", "", { "dependencies": { "whatwg-encoding": "3.1.1" } }, "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ=="],
 
     "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
 
+    "html-to-text": ["html-to-text@9.0.5", "", { "dependencies": { "@selderee/plugin-htmlparser2": "^0.11.0", "deepmerge": "^4.3.1", "dom-serializer": "^2.0.0", "htmlparser2": "^8.0.2", "selderee": "^0.11.0" } }, "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg=="],
+
     "html-url-attributes": ["html-url-attributes@3.0.1", "", {}, "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ=="],
 
     "html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
 
+    "htmlparser2": ["htmlparser2@8.0.2", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.0.1", "entities": "^4.4.0" } }, "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA=="],
+
     "http-proxy-agent": ["http-proxy-agent@7.0.2", "", { "dependencies": { "agent-base": "7.1.3", "debug": "4.4.1" } }, "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig=="],
 
     "https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "7.1.3", "debug": "4.4.1" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
@@ -1303,6 +1475,8 @@
 
     "inline-style-parser": ["inline-style-parser@0.2.4", "", {}, "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="],
 
+    "input-otp": ["input-otp@1.4.2", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA=="],
+
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "1.3.0", "hasown": "2.0.2", "side-channel": "1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
 
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
@@ -1363,6 +1537,8 @@
 
     "is-shared-array-buffer": ["is-shared-array-buffer@1.0.4", "", { "dependencies": { "call-bound": "1.0.4" } }, "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A=="],
 
+    "is-standalone-pwa": ["is-standalone-pwa@0.1.1", "", {}, "sha512-9Cbovsa52vNQCjdXOzeQq5CnCbAcRk05aU62K20WO372NrTv0NxibLFCK6lQ4/iZEFdEA3p3t2VNOn8AJ53F5g=="],
+
     "is-string": ["is-string@1.1.1", "", { "dependencies": { "call-bound": "1.0.4", "has-tostringtag": "1.0.2" } }, "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA=="],
 
     "is-symbol": ["is-symbol@1.1.1", "", { "dependencies": { "call-bound": "1.0.4", "has-symbols": "1.1.0", "safe-regex-test": "1.1.0" } }, "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w=="],
@@ -1375,6 +1551,8 @@
 
     "is-weakset": ["is-weakset@2.0.4", "", { "dependencies": { "call-bound": "1.0.4", "get-intrinsic": "1.3.0" } }, "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ=="],
 
+    "is-what": ["is-what@5.5.0", "", {}, "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw=="],
+
     "isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
@@ -1403,7 +1581,7 @@
 
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
-    "jose": ["jose@4.15.9", "", {}, "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA=="],
+    "jose": ["jose@6.1.2", "", {}, "sha512-MpcPtHLE5EmztuFIqB0vzHAWJPpmN1E6L4oo+kze56LIs3MyXIj9ZHMDxqOvkP38gBR7K1v3jqd4WU2+nrfONQ=="],
 
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
@@ -1429,10 +1607,14 @@
 
     "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
 
+    "kysely": ["kysely@0.28.10", "", {}, "sha512-ksNxfzIW77OcZ+QWSAPC7yDqUSaIVwkTWnTPNiIy//vifNbwsSgQ57OkkncHxxpcBHM3LRfLAZVEh7kjq5twVA=="],
+
     "language-subtag-registry": ["language-subtag-registry@0.3.23", "", {}, "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ=="],
 
     "language-tags": ["language-tags@1.0.9", "", { "dependencies": { "language-subtag-registry": "0.3.23" } }, "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA=="],
 
+    "leac": ["leac@0.6.0", "", {}, "sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg=="],
+
     "leaflet": ["leaflet@1.9.4", "", {}, "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="],
 
     "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "1.2.1", "type-check": "0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
@@ -1475,7 +1657,7 @@
 
     "loupe": ["loupe@3.1.4", "", {}, "sha512-wJzkKwJrheKtknCOKNEtDK4iqg/MxmZheEMtSTYvnzRdEYaZzmgH976nenp8WdJRdx5Vc1X/9MO0Oszl6ezeXg=="],
 
-    "lru-cache": ["lru-cache@6.0.0", "", { "dependencies": { "yallist": "4.0.0" } }, "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="],
+    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "3.1.1" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
     "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "19.1.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
 
@@ -1497,6 +1679,8 @@
 
     "markdownlint-cli2-formatter-default": ["markdownlint-cli2-formatter-default@0.0.5", "", { "peerDependencies": { "markdownlint-cli2": "0.18.1" } }, "sha512-4XKTwQ5m1+Txo2kuQ3Jgpo/KmnG+X90dWt4acufg6HVGadTUG5hzHF/wssp9b5MBYOMCnZ9RMPaU//uHsszF8Q=="],
 
+    "marked": ["marked@15.0.12", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA=="],
+
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
     "mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.2", "", { "dependencies": { "@types/mdast": "4.0.4", "@types/unist": "3.0.3", "decode-named-character-reference": "1.2.0", "devlop": "1.1.0", "mdast-util-to-string": "4.0.0", "micromark": "4.0.2", "micromark-util-decode-numeric-character-reference": "2.0.2", "micromark-util-decode-string": "2.0.1", "micromark-util-normalize-identifier": "2.0.1", "micromark-util-symbol": "2.0.1", "micromark-util-types": "2.0.2", "unist-util-stringify-position": "4.0.0" } }, "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA=="],
@@ -1601,8 +1785,12 @@
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
+    "mutative": ["mutative@1.3.0", "", {}, "sha512-8MJj6URmOZAV70dpFe1YnSppRTKC4DsMkXQiBDFayLcDI4ljGokHxmpqaBQuDWa4iAxWaJJ1PS8vAmbntjjKmQ=="],
+
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
+    "nanostores": ["nanostores@1.1.0", "", {}, "sha512-yJBmDJr18xy47dbNVlHcgdPrulSn1nhSE6Ns9vTG+Nx9VPT6iV1MD6aQFp/t52zpf82FhLLTXAXr30NuCnxvwA=="],
+
     "napi-postinstall": ["napi-postinstall@0.2.4", "", { "bin": { "napi-postinstall": "lib/cli.js" } }, "sha512-ZEzHJwBhZ8qQSbknHqYcdtQVr8zUgGyM/q6h6qAyhtyVMNrSgDhrC4disf03dYW0e+czXyLnZINnCTEkWy0eJg=="],
 
     "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
@@ -1611,8 +1799,6 @@
 
     "next": ["next@16.1.4", "", { "dependencies": { "@next/env": "16.1.4", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.1.4", "@next/swc-darwin-x64": "16.1.4", "@next/swc-linux-arm64-gnu": "16.1.4", "@next/swc-linux-arm64-musl": "16.1.4", "@next/swc-linux-x64-gnu": "16.1.4", "@next/swc-linux-x64-musl": "16.1.4", "@next/swc-win32-arm64-msvc": "16.1.4", "@next/swc-win32-x64-msvc": "16.1.4", "sharp": "^0.34.4" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-gKSecROqisnV7Buen5BfjmXAm7Xlpx9o2ueVQRo5DxQcjC8d330dOM1xiGWc2k3Dcnz0In3VybyRPOsudwgiqQ=="],
 
-    "next-auth": ["next-auth@4.24.13", "", { "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", "cookie": "^0.7.0", "jose": "^4.15.5", "oauth": "^0.9.15", "openid-client": "^5.4.0", "preact": "^10.6.3", "preact-render-to-string": "^5.1.19", "uuid": "^8.3.2" }, "peerDependencies": { "@auth/core": "0.34.3", "next": "^12.2.5 || ^13 || ^14 || ^15 || ^16", "nodemailer": "^7.0.7", "react": "^17.0.2 || ^18 || ^19", "react-dom": "^17.0.2 || ^18 || ^19" }, "optionalPeers": ["@auth/core", "nodemailer"] }, "sha512-sgObCfcfL7BzIK76SS5TnQtc3yo2Oifp/yIpfv6fMfeBOiBJkDWF3A2y9+yqnmJ4JKc2C+nMjSjmgDeTwgN1rQ=="],
-
     "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "19.1.0", "react-dom": "19.1.0" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
 
     "node-cron": ["node-cron@4.2.1", "", {}, "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg=="],
@@ -1631,12 +1817,8 @@
 
     "nypm": ["nypm@0.6.2", "", { "dependencies": { "citty": "^0.1.6", "consola": "^3.4.2", "pathe": "^2.0.3", "pkg-types": "^2.3.0", "tinyexec": "^1.0.1" }, "bin": { "nypm": "dist/cli.mjs" } }, "sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g=="],
 
-    "oauth": ["oauth@0.9.15", "", {}, "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA=="],
-
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
-    "object-hash": ["object-hash@2.2.0", "", {}, "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw=="],
-
     "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
 
     "object-keys": ["object-keys@1.1.1", "", {}, "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="],
@@ -1653,12 +1835,8 @@
 
     "ohash": ["ohash@2.0.11", "", {}, "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="],
 
-    "oidc-token-hash": ["oidc-token-hash@5.1.0", "", {}, "sha512-y0W+X7Ppo7oZX6eovsRkuzcSM40Bicg2JEJkDJ4irIt1wsYAP5MLSNv+QAogO8xivMffw/9OvV3um1pxXgt1uA=="],
-
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
-    "openid-client": ["openid-client@5.7.1", "", { "dependencies": { "jose": "4.15.9", "lru-cache": "6.0.0", "object-hash": "2.2.0", "oidc-token-hash": "5.1.0" } }, "sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew=="],
-
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "0.1.4", "fast-levenshtein": "2.0.6", "levn": "0.4.1", "prelude-ls": "1.2.1", "type-check": "0.4.0", "word-wrap": "1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
     "own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "1.3.0", "object-keys": "1.1.1", "safe-push-apply": "1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],
@@ -1675,6 +1853,8 @@
 
     "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "6.0.1" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
 
+    "parseley": ["parseley@0.12.1", "", { "dependencies": { "leac": "^0.6.0", "peberminta": "^0.9.0" } }, "sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw=="],
+
     "parseurl": ["parseurl@1.3.3", "", {}, "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="],
 
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
@@ -1693,6 +1873,8 @@
 
     "pathval": ["pathval@2.0.1", "", {}, "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ=="],
 
+    "peberminta": ["peberminta@0.9.0", "", {}, "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ=="],
+
     "perfect-debounce": ["perfect-debounce@1.0.0", "", {}, "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="],
 
     "pg": ["pg@8.17.1", "", { "dependencies": { "pg-connection-string": "^2.10.0", "pg-pool": "^3.11.0", "pg-protocol": "^1.11.0", "pg-types": "2.2.0", "pgpass": "1.0.5" }, "optionalDependencies": { "pg-cloudflare": "^1.3.0" }, "peerDependencies": { "pg-native": ">=3.0.1" }, "optionalPeers": ["pg-native"] }, "sha512-EIR+jXdYNSMOrpRp7g6WgQr7SaZNZfS7IzZIO0oTNEeibq956JxeD15t3Jk3zZH0KH8DmOIx38qJfQenoE8bXQ=="],
@@ -1733,10 +1915,6 @@
 
     "postgres-interval": ["postgres-interval@1.2.0", "", { "dependencies": { "xtend": "4.0.2" } }, "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ=="],
 
-    "preact": ["preact@10.26.9", "", {}, "sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA=="],
-
-    "preact-render-to-string": ["preact-render-to-string@5.2.6", "", { "dependencies": { "pretty-format": "3.8.0" }, "peerDependencies": { "preact": "10.26.9" } }, "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw=="],
-
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
     "prettier": ["prettier@3.8.0", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA=="],
@@ -1749,6 +1927,8 @@
 
     "prisma": ["prisma@6.19.2", "", { "dependencies": { "@prisma/config": "6.19.2", "@prisma/engines": "6.19.2" }, "peerDependencies": { "typescript": ">=5.1.0" }, "optionalPeers": ["typescript"], "bin": { "prisma": "build/index.js" } }, "sha512-XTKeKxtQElcq3U9/jHyxSPgiRgeYDKxWTPOf6NkXA0dNj5j40MfEsZkMbyNpwDWCUv7YBFUl7I2VK/6ALbmhEg=="],
 
+    "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
+
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "1.4.0", "object-assign": "4.1.1", "react-is": "16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
 
     "property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
@@ -1759,6 +1939,12 @@
 
     "pure-rand": ["pure-rand@6.1.0", "", {}, "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA=="],
 
+    "pvtsutils": ["pvtsutils@1.3.6", "", { "dependencies": { "tslib": "^2.8.1" } }, "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg=="],
+
+    "pvutils": ["pvutils@1.1.5", "", {}, "sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA=="],
+
+    "qr.js": ["qr.js@0.0.0", "", {}, "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="],
+
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
     "quickselect": ["quickselect@1.1.1", "", {}, "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="],
@@ -1771,16 +1957,24 @@
 
     "react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
 
+    "react-async-script": ["react-async-script@1.2.0", "", { "dependencies": { "hoist-non-react-statics": "^3.3.0", "prop-types": "^15.5.0" }, "peerDependencies": { "react": ">=16.4.1" } }, "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q=="],
+
     "react-day-picker": ["react-day-picker@9.13.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "date-fns": "^4.1.0", "date-fns-jalali": "^4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-euzj5Hlq+lOHqI53NiuNhCP8HWgsPf/bBAVijR50hNaY1XwjKjShAnIe8jm8RD2W9IJUvihDIZ+KrmqfFzNhFQ=="],
 
     "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
 
+    "react-google-recaptcha": ["react-google-recaptcha@3.1.0", "", { "dependencies": { "prop-types": "^15.5.0", "react-async-script": "^1.2.0" }, "peerDependencies": { "react": ">=16.4.1" } }, "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg=="],
+
+    "react-hook-form": ["react-hook-form@7.71.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w=="],
+
     "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
     "react-leaflet": ["react-leaflet@5.0.0", "", { "dependencies": { "@react-leaflet/core": "3.0.0" }, "peerDependencies": { "leaflet": "1.9.4", "react": "19.1.0", "react-dom": "19.1.0" } }, "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw=="],
 
     "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "3.0.4", "@types/mdast": "4.0.4", "devlop": "1.1.0", "hast-util-to-jsx-runtime": "2.3.6", "html-url-attributes": "3.0.1", "mdast-util-to-hast": "13.2.0", "remark-parse": "11.0.0", "remark-rehype": "11.1.2", "unified": "11.0.5", "unist-util-visit": "5.0.0", "vfile": "6.0.3" }, "peerDependencies": { "@types/react": "19.1.8", "react": "19.1.0" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="],
 
+    "react-qr-code": ["react-qr-code@2.0.18", "", { "dependencies": { "prop-types": "^15.8.1", "qr.js": "0.0.0" }, "peerDependencies": { "react": "*" } }, "sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg=="],
+
     "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "0.0.6", "use-sync-external-store": "1.5.0" }, "optionalDependencies": { "@types/react": "19.1.8", "redux": "5.0.1" }, "peerDependencies": { "react": "19.1.0" } }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
 
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
@@ -1801,6 +1995,8 @@
 
     "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "5.0.1" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
 
+    "reflect-metadata": ["reflect-metadata@0.2.2", "", {}, "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q=="],
+
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "1.0.8", "define-properties": "1.2.1", "es-abstract": "1.24.0", "es-errors": "1.3.0", "es-object-atoms": "1.1.1", "get-intrinsic": "1.3.0", "get-proto": "1.0.1", "which-builtin-type": "1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "1.0.8", "define-properties": "1.2.1", "es-errors": "1.3.0", "get-proto": "1.0.1", "gopd": "1.2.0", "set-function-name": "2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="],
@@ -1829,6 +2025,8 @@
 
     "rollup": ["rollup@4.44.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.44.1", "@rollup/rollup-android-arm64": "4.44.1", "@rollup/rollup-darwin-arm64": "4.44.1", "@rollup/rollup-darwin-x64": "4.44.1", "@rollup/rollup-freebsd-arm64": "4.44.1", "@rollup/rollup-freebsd-x64": "4.44.1", "@rollup/rollup-linux-arm-gnueabihf": "4.44.1", "@rollup/rollup-linux-arm-musleabihf": "4.44.1", "@rollup/rollup-linux-arm64-gnu": "4.44.1", "@rollup/rollup-linux-arm64-musl": "4.44.1", "@rollup/rollup-linux-loongarch64-gnu": "4.44.1", "@rollup/rollup-linux-powerpc64le-gnu": "4.44.1", "@rollup/rollup-linux-riscv64-gnu": "4.44.1", "@rollup/rollup-linux-riscv64-musl": "4.44.1", "@rollup/rollup-linux-s390x-gnu": "4.44.1", "@rollup/rollup-linux-x64-gnu": "4.44.1", "@rollup/rollup-linux-x64-musl": "4.44.1", "@rollup/rollup-win32-arm64-msvc": "4.44.1", "@rollup/rollup-win32-ia32-msvc": "4.44.1", "@rollup/rollup-win32-x64-msvc": "4.44.1", "fsevents": "2.3.3" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-x8H8aPvD+xbl0Do8oez5f5o8eMS3trfCghc4HhLAnCkj7Vl0d1JWGs0UF/D886zLW2rOj2QymV/JcSSsw+XDNg=="],
 
+    "rou3": ["rou3@0.7.12", "", {}, "sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg=="],
+
     "rrweb-cssom": ["rrweb-cssom@0.8.0", "", {}, "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw=="],
 
     "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "1.2.3" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
@@ -1851,8 +2049,12 @@
 
     "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
+    "selderee": ["selderee@0.11.0", "", { "dependencies": { "parseley": "^0.12.0" } }, "sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA=="],
+
     "semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
+    "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
+
     "set-function-length": ["set-function-length@1.2.2", "", { "dependencies": { "define-data-property": "1.1.4", "es-errors": "1.3.0", "function-bind": "1.1.2", "get-intrinsic": "1.3.0", "gopd": "1.2.0", "has-property-descriptors": "1.0.2" } }, "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg=="],
 
     "set-function-name": ["set-function-name@2.0.2", "", { "dependencies": { "define-data-property": "1.1.4", "es-errors": "1.3.0", "functions-have-names": "1.2.3", "has-property-descriptors": "1.0.2" } }, "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ=="],
@@ -1883,6 +2085,8 @@
 
     "sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
 
+    "sorted-btree": ["sorted-btree@1.8.1", "", {}, "sha512-395+XIP+wqNn3USkFSrNz7G3Ss/MXlZEqesxvzCRFwL14h6e8LukDHdLBePn5pwbm5OQ9vGu8mDyz2lLDIqamQ=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
@@ -1933,6 +2137,8 @@
 
     "styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "optionalDependencies": { "@babel/core": "7.27.7" }, "peerDependencies": { "react": "19.1.0" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
 
+    "superjson": ["superjson@2.2.6", "", { "dependencies": { "copy-anything": "^4" } }, "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA=="],
+
     "supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
@@ -1993,6 +2199,8 @@
 
     "tsx": ["tsx@4.21.0", "", { "dependencies": { "esbuild": "~0.27.0", "get-tsconfig": "^4.7.5" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "bin": { "tsx": "dist/cli.mjs" } }, "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw=="],
 
+    "tsyringe": ["tsyringe@4.10.0", "", { "dependencies": { "tslib": "^1.9.3" } }, "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw=="],
+
     "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
 
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
@@ -2013,6 +2221,10 @@
 
     "typescript-eslint": ["typescript-eslint@8.53.1", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.53.1", "@typescript-eslint/parser": "8.53.1", "@typescript-eslint/typescript-estree": "8.53.1", "@typescript-eslint/utils": "8.53.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-gB+EVQfP5RDElh9ittfXlhZJdjSU4jUSTyE2+ia8CYyNvet4ElfaLlAIqDvQV9JPknKx0jQH1racTYe/4LaLSg=="],
 
+    "ua-is-frozen": ["ua-is-frozen@0.1.2", "", {}, "sha512-RwKDW2p3iyWn4UbaxpP2+VxwqXh0jpvdxsYpZ5j/MLLiQOfbsV5shpgQiw93+KMYQPcteeMQ289MaAFzs3G9pw=="],
+
+    "ua-parser-js": ["ua-parser-js@2.0.8", "", { "dependencies": { "detect-europe-js": "^0.1.2", "is-standalone-pwa": "^0.1.1", "ua-is-frozen": "^0.1.2" }, "bin": { "ua-parser-js": "script/cli.js" } }, "sha512-BdnBM5waFormdrOFBU+cA90R689V0tWUWlIG2i30UXxElHjuCu5+dOV2Etw3547jcQ/yaLtPm9wrqIuOY2bSJg=="],
+
     "uc.micro": ["uc.micro@2.1.0", "", {}, "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="],
 
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "1.0.4", "has-bigints": "1.1.0", "has-symbols": "1.1.0", "which-boxed-primitive": "1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
@@ -2045,7 +2257,7 @@
 
     "use-sync-external-store": ["use-sync-external-store@1.5.0", "", { "peerDependencies": { "react": "19.1.0" } }, "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A=="],
 
-    "uuid": ["uuid@8.3.2", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="],
+    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
 
     "v8-compile-cache-lib": ["v8-compile-cache-lib@3.0.1", "", {}, "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="],
 
@@ -2069,10 +2281,14 @@
 
     "w3c-xmlserializer": ["w3c-xmlserializer@5.0.0", "", { "dependencies": { "xml-name-validator": "5.0.0" } }, "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA=="],
 
+    "warning": ["warning@4.0.3", "", { "dependencies": { "loose-envify": "^1.0.0" } }, "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w=="],
+
     "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
 
     "web-streams-polyfill": ["web-streams-polyfill@3.3.3", "", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="],
 
+    "web-worker": ["web-worker@1.5.0", "", {}, "sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw=="],
+
     "webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
 
     "whatwg-encoding": ["whatwg-encoding@3.1.1", "", { "dependencies": { "iconv-lite": "0.6.3" } }, "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ=="],
@@ -2113,7 +2329,7 @@
 
     "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
 
-    "yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="],
+    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
     "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "8.0.1", "escalade": "3.2.0", "get-caller-file": "2.0.5", "require-directory": "2.1.1", "string-width": "4.2.3", "y18n": "5.0.8", "yargs-parser": "21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
 
@@ -2141,8 +2357,6 @@
 
     "@babel/generator/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "3.1.1" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
-
     "@babel/helper-compilation-targets/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
     "@babel/helper-module-transforms/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
@@ -2159,8 +2373,16 @@
 
     "@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
+    "@better-auth/core/zod": ["zod@4.1.12", "", {}, "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ=="],
+
+    "@better-auth/passkey/@better-fetch/fetch": ["@better-fetch/fetch@1.1.21", "", {}, "sha512-/ImESw0sskqlVR94jB+5+Pxjf+xBwDZF/N5+y2/q4EqD7IARUTSpPfIo8uf39SYpCxyOCtbyYpUrZ3F/k0zT4A=="],
+
+    "@better-auth/passkey/zod": ["zod@4.1.12", "", {}, "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ=="],
+
     "@cspotcode/source-map-support/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "", { "dependencies": { "@jridgewell/resolve-uri": "3.1.2", "@jridgewell/sourcemap-codec": "1.5.0" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
 
+    "@daveyplate/better-auth-ui/@better-fetch/fetch": ["@better-fetch/fetch@1.1.21", "", {}, "sha512-/ImESw0sskqlVR94jB+5+Pxjf+xBwDZF/N5+y2/q4EqD7IARUTSpPfIo8uf39SYpCxyOCtbyYpUrZ3F/k0zT4A=="],
+
     "@eslint/config-array/debug": ["debug@4.4.1", "", { "dependencies": { "ms": "2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
 
     "@eslint/eslintrc/ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
@@ -2181,8 +2403,22 @@
 
     "@napi-rs/wasm-runtime/@emnapi/runtime": ["@emnapi/runtime@1.4.3", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ=="],
 
+    "@neondatabase/auth/zod": ["zod@4.1.12", "", {}, "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ=="],
+
+    "@neondatabase/auth-ui/@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
+
+    "@neondatabase/auth-ui/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+
+    "@neondatabase/auth-ui/lucide-react": ["lucide-react@0.555.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA=="],
+
+    "@neondatabase/auth-ui/zod": ["zod@4.1.12", "", {}, "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ=="],
+
     "@radix-ui/react-alert-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "optionalDependencies": { "@types/react": "19.1.8" }, "peerDependencies": { "react": "19.1.0" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-avatar/@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
+
+    "@radix-ui/react-avatar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+
     "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "optionalDependencies": { "@types/react": "19.1.8" }, "peerDependencies": { "react": "19.1.0" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "optionalDependencies": { "@types/react": "19.1.8" }, "peerDependencies": { "react": "19.1.0" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
@@ -2219,6 +2455,8 @@
 
     "@testing-library/jest-dom/dom-accessibility-api": ["dom-accessibility-api@0.6.3", "", {}, "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="],
 
+    "@triplit/db/nanoid": ["nanoid@5.1.6", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg=="],
+
     "@types/babel__core/@babel/parser": ["@babel/parser@7.27.7", "", { "dependencies": { "@babel/types": "7.27.7" }, "bin": "./bin/babel-parser.js" }, "sha512-qnzXzDXdr/po3bOTbTIQZ7+TxNKxpkN5IifVLXS+r7qwynkZfPyjZfE7hCXbo7IoO9TNcSyibgONsf2HauUd3Q=="],
 
     "@types/babel__core/@babel/types": ["@babel/types@7.27.7", "", { "dependencies": { "@babel/helper-string-parser": "7.27.1", "@babel/helper-validator-identifier": "7.27.1" } }, "sha512-8OLQgDScAOHXnAz2cV+RfzzNMipuLVBz2biuAJFMV9bfkNf393je3VM8CLkjQodW5+iWsSJdSgSWT6rsZoXHPw=="],
@@ -2243,12 +2481,18 @@
 
     "ast-v8-to-istanbul/js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="],
 
+    "better-auth/ms": ["ms@4.0.0-nightly.202508271359", "", {}, "sha512-WC/Eo7NzFrOV/RRrTaI0fxKVbNCzEy76j2VqNV8SxDf9D69gSE2Lh0QwYvDlhiYmheBYExAvEAxVf5NoN0cj2A=="],
+
+    "better-auth/zod": ["zod@4.1.12", "", {}, "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ=="],
+
     "chalk/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
     "chalk/supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "d3-cloud/d3-dispatch": ["d3-dispatch@1.0.6", "", {}, "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="],
 
+    "dom-serializer/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
     "eslint/@eslint/js": ["@eslint/js@8.57.1", "", {}, "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q=="],
 
     "eslint/ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
@@ -2293,6 +2537,10 @@
 
     "hast-util-to-parse5/property-information": ["property-information@6.5.0", "", {}, "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig=="],
 
+    "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
+    "htmlparser2/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
     "http-proxy-agent/debug": ["debug@4.4.1", "", { "dependencies": { "ms": "2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
 
     "https-proxy-agent/debug": ["debug@4.4.1", "", { "dependencies": { "ms": "2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
@@ -2339,8 +2587,6 @@
 
     "playwright/fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
 
-    "preact-render-to-string/pretty-format": ["pretty-format@3.8.0", "", {}, "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew=="],
-
     "pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
@@ -2361,6 +2607,8 @@
 
     "tsconfig-paths/json5": ["json5@1.0.2", "", { "dependencies": { "minimist": "1.2.8" }, "bin": { "json5": "lib/cli.js" } }, "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="],
 
+    "tsyringe/tslib": ["tslib@1.14.1", "", {}, "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="],
+
     "vaul/@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.14", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "1.2.6", "react-remove-scroll": "2.7.1" }, "optionalDependencies": { "@types/react": "19.1.8", "@types/react-dom": "19.1.6" }, "peerDependencies": { "react": "19.1.0", "react-dom": "19.1.0" } }, "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw=="],
 
     "vite/@types/node": ["@types/node@24.0.6", "", { "dependencies": { "undici-types": "7.8.0" } }, "sha512-ZOyn+gOs749xU7ovp+Ibj0g1o3dFRqsfPnT22C2t5JzcRvgsEDpGawPbCISGKLudJk9Y0wiu9sYd6kUh0pc9TA=="],
@@ -2387,8 +2635,6 @@
 
     "@babel/core/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
-    "@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
-
     "@babel/plugin-transform-react-jsx-self/@babel/core/@babel/generator": ["@babel/generator@7.27.5", "", { "dependencies": { "@babel/parser": "7.27.7", "@babel/types": "7.27.7", "@jridgewell/gen-mapping": "0.3.8", "@jridgewell/trace-mapping": "0.3.25", "jsesc": "3.1.0" } }, "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw=="],
 
     "@babel/plugin-transform-react-jsx-self/@babel/core/@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.27.2", "", { "dependencies": { "@babel/compat-data": "7.27.7", "@babel/helper-validator-option": "7.27.1", "browserslist": "4.25.1", "lru-cache": "5.1.1", "semver": "6.3.1" } }, "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ=="],
@@ -2603,16 +2849,12 @@
 
     "@babel/plugin-transform-react-jsx-self/@babel/core/@babel/helper-compilation-targets/@babel/compat-data": ["@babel/compat-data@7.27.7", "", {}, "sha512-xgu/ySj2mTiUFmdE9yCMfBxLp4DHd5DwmbbD05YAuICfodYT3VvRxbrh81LGQ/8UpSdtMdfKMn3KouYDX59DGQ=="],
 
-    "@babel/plugin-transform-react-jsx-self/@babel/core/@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "3.1.1" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
-
     "@babel/plugin-transform-react-jsx-self/@babel/core/@babel/helper-module-transforms/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "7.27.7", "@babel/types": "7.27.7" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
 
     "@babel/plugin-transform-react-jsx-self/@babel/core/@babel/traverse/globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],
 
     "@babel/plugin-transform-react-jsx-source/@babel/core/@babel/helper-compilation-targets/@babel/compat-data": ["@babel/compat-data@7.27.7", "", {}, "sha512-xgu/ySj2mTiUFmdE9yCMfBxLp4DHd5DwmbbD05YAuICfodYT3VvRxbrh81LGQ/8UpSdtMdfKMn3KouYDX59DGQ=="],
 
-    "@babel/plugin-transform-react-jsx-source/@babel/core/@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "3.1.1" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
-
     "@babel/plugin-transform-react-jsx-source/@babel/core/@babel/helper-module-transforms/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "7.27.7", "@babel/types": "7.27.7" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
 
     "@babel/plugin-transform-react-jsx-source/@babel/core/@babel/traverse/globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],
@@ -2655,16 +2897,10 @@
 
     "styled-jsx/@babel/core/@babel/helper-compilation-targets/@babel/compat-data": ["@babel/compat-data@7.27.7", "", {}, "sha512-xgu/ySj2mTiUFmdE9yCMfBxLp4DHd5DwmbbD05YAuICfodYT3VvRxbrh81LGQ/8UpSdtMdfKMn3KouYDX59DGQ=="],
 
-    "styled-jsx/@babel/core/@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "3.1.1" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
-
     "styled-jsx/@babel/core/@babel/helper-module-transforms/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "7.27.7", "@babel/types": "7.27.7" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
 
     "styled-jsx/@babel/core/@babel/traverse/globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],
 
-    "@babel/plugin-transform-react-jsx-self/@babel/core/@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
-
-    "@babel/plugin-transform-react-jsx-source/@babel/core/@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
-
     "eslint-module-utils/@typescript-eslint/parser/@typescript-eslint/typescript-estree/fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "4.0.3" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "eslint-module-utils/@typescript-eslint/parser/@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "1.0.2" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
@@ -2672,7 +2908,5 @@
     "eslint-plugin-import/@typescript-eslint/parser/@typescript-eslint/typescript-estree/fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "4.0.3" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "eslint-plugin-import/@typescript-eslint/parser/@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "1.0.2" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
-
-    "styled-jsx/@babel/core/@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
   }
 }
diff --git a/components/MessageViewer.tsx b/components/MessageViewer.tsx
index 3364edf..44a9b30 100644
--- a/components/MessageViewer.tsx
+++ b/components/MessageViewer.tsx
@@ -71,7 +71,8 @@ export default function MessageViewer({ messages }: MessageViewerProps) {
               : "No timestamp"}
           </span>
           <span>
-            Last message: {(() => {
+            Last message:{" "}
+            {(() => {
               const lastMessage = messages[messages.length - 1];
               return lastMessage.timestamp
                 ? new Date(lastMessage.timestamp).toLocaleString()
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 3fe0802..8a8e0c0 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -3,10 +3,10 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { signOut } from "next-auth/react";
 import type React from "react"; // No hooks needed since state is now managed by parent
 import { useId } from "react";
 import { SimpleThemeToggle } from "@/components/ui/theme-toggle";
+import { authClient } from "@/lib/auth/client";
 
 // Icons for the sidebar
 const DashboardIcon = () => (
@@ -202,8 +202,14 @@ export default function Sidebar({
   const sidebarId = useId();
   const pathname = usePathname() || "";
 
-  const handleLogout = () => {
-    signOut({ callbackUrl: "/login" });
+  const handleLogout = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          window.location.href = "/auth/sign-in";
+        },
+      },
+    });
   };
 
   return (
diff --git a/components/WelcomeBanner.tsx b/components/WelcomeBanner.tsx
index 6684be2..98c3194 100644
--- a/components/WelcomeBanner.tsx
+++ b/components/WelcomeBanner.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import { useSession } from "next-auth/react";
+import { authClient } from "@/lib/auth/client";
 
 interface WelcomeBannerProps {
   companyName?: string;
 }
 
 export default function WelcomeBanner({ companyName }: WelcomeBannerProps) {
-  const { data: session } = useSession();
-  const userName = session?.user?.name || "User";
+  const { data } = authClient.useSession();
+  const userName = data?.user?.name || "User";
   const currentTime = new Date();
   const hour = currentTime.getHours();
 
diff --git a/components/magicui/animated-shiny-text.tsx b/components/magicui/animated-shiny-text.tsx
index c8f2841..bb0690e 100644
--- a/components/magicui/animated-shiny-text.tsx
+++ b/components/magicui/animated-shiny-text.tsx
@@ -2,8 +2,7 @@ import type { ComponentPropsWithoutRef, CSSProperties, FC } from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface AnimatedShinyTextProps
-  extends ComponentPropsWithoutRef<"span"> {
+export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
   shimmerWidth?: number;
 }
 
diff --git a/components/magicui/scroll-progress.tsx b/components/magicui/scroll-progress.tsx
index ae5ddab..f12b15c 100644
--- a/components/magicui/scroll-progress.tsx
+++ b/components/magicui/scroll-progress.tsx
@@ -4,8 +4,10 @@ import { type MotionProps, motion, useScroll } from "motion/react";
 import React from "react";
 import { cn } from "@/lib/utils";
 
-interface ScrollProgressProps
-  extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {
+interface ScrollProgressProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  keyof MotionProps
+> {
   className?: string;
 }
 
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index e459e97..84d1f8a 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -58,8 +58,7 @@ const CalendarChevron = ({
   return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
 };
 
-interface CalendarWeekNumberProps
-  extends React.ThHTMLAttributes<HTMLTableCellElement> {
+interface CalendarWeekNumberProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
   week: { weekNumber: number };
 }
 
diff --git a/docs/neon-database-optimization.md b/docs/neon-database-optimization.md
index 13362bc..1ae702b 100644
--- a/docs/neon-database-optimization.md
+++ b/docs/neon-database-optimization.md
@@ -5,6 +5,7 @@ This document provides specific recommendations for optimizing database connecti
 ## Current Issues Observed
 
 From your logs, we can see:
+
 ```
 Can't reach database server at `ep-tiny-math-a2zsshve-pooler.eu-central-1.aws.neon.tech:5432`
 [NODE-CRON] [WARN] missed execution at Sun Jun 29 2025 12:00:00 GMT+0200! Possible blocking IO or high CPU
@@ -13,16 +14,19 @@ Can't reach database server at `ep-tiny-math-a2zsshve-pooler.eu-central-1.aws.ne
 ## Root Causes
 
 ### 1. Neon Connection Limits
+
 - **Free Tier**: 20 concurrent connections
-- **Pro Tier**: 100 concurrent connections  
+- **Pro Tier**: 100 concurrent connections
 - **Multiple schedulers** can quickly exhaust connections
 
 ### 2. Connection Pooling Issues
+
 - Each scheduler was creating separate PrismaClient instances
 - No connection reuse between operations
 - No retry logic for temporary failures
 
 ### 3. Neon-Specific Challenges
+
 - **Auto-pause**: Databases pause after inactivity
 - **Cold starts**: First connection after pause takes longer
 - **Regional latency**: eu-central-1 may have variable latency
@@ -30,6 +34,7 @@ Can't reach database server at `ep-tiny-math-a2zsshve-pooler.eu-central-1.aws.ne
 ## Solutions Implemented
 
 ### 1. Fixed Multiple PrismaClient Instances ✅
+
 ```typescript
 // Before: Each file created its own client
 const prisma = new PrismaClient(); // ❌
@@ -39,30 +44,30 @@ import { prisma } from "./prisma.js"; // ✅
 ```
 
 ### 2. Added Connection Retry Logic ✅
+
 ```typescript
 // Automatic retry for connection errors
-await withRetry(
-  async () => await databaseOperation(),
-  {
-    maxRetries: 3,
-    initialDelay: 2000,
-    maxDelay: 10000,
-    backoffMultiplier: 2,
-  }
-);
+await withRetry(async () => await databaseOperation(), {
+  maxRetries: 3,
+  initialDelay: 2000,
+  maxDelay: 10000,
+  backoffMultiplier: 2,
+});
 ```
 
 ### 3. Enhanced Connection Pooling ✅
+
 ```typescript
 // Production-ready pooling with @prisma/adapter-pg
-USE_ENHANCED_POOLING=true
-DATABASE_CONNECTION_LIMIT=20
-DATABASE_POOL_TIMEOUT=10
+USE_ENHANCED_POOLING = true;
+DATABASE_CONNECTION_LIMIT = 20;
+DATABASE_POOL_TIMEOUT = 10;
 ```
 
 ## Neon-Specific Configuration
 
 ### Environment Variables
+
 ```bash
 # Optimized for Neon
 DATABASE_URL="postgresql://user:pass@ep-tiny-math-a2zsshve-pooler.eu-central-1.aws.neon.tech:5432/db?sslmode=require&connection_limit=15"
@@ -79,6 +84,7 @@ SESSION_PROCESSING_INTERVAL="0 */2 * * *"  # Every 2 hours instead of 1
 ```
 
 ### Connection String Optimization
+
 ```bash
 # Add these parameters to your DATABASE_URL
 ?sslmode=require                    # Required for Neon
@@ -91,6 +97,7 @@ SESSION_PROCESSING_INTERVAL="0 */2 * * *"  # Every 2 hours instead of 1
 ## Monitoring & Troubleshooting
 
 ### 1. Health Check Endpoint
+
 ```bash
 # Check connection health
 curl -H "Authorization: Bearer your-token" \
@@ -98,11 +105,13 @@ curl -H "Authorization: Bearer your-token" \
 ```
 
 ### 2. Neon Dashboard Monitoring
+
 - Monitor "Active connections" in Neon dashboard
 - Check for connection spikes during scheduler runs
 - Review query performance and slow queries
 
 ### 3. Application Logs
+
 ```bash
 # Look for connection patterns
 grep "Database connection" logs/*.log
@@ -113,65 +122,77 @@ grep "retry" logs/*.log
 ## Performance Optimizations
 
 ### 1. Reduce Scheduler Frequency
+
 ```typescript
 // Current intervals may be too aggressive
-CSV_IMPORT_INTERVAL="*/15 * * * *"     // ➜ "*/30 * * * *"
-IMPORT_PROCESSING_INTERVAL="*/5 * * * *"  // ➜ "*/10 * * * *"  
-SESSION_PROCESSING_INTERVAL="0 * * * *"   // ➜ "0 */2 * * *"
+CSV_IMPORT_INTERVAL = "*/15 * * * *"; // ➜ "*/30 * * * *"
+IMPORT_PROCESSING_INTERVAL = "*/5 * * * *"; // ➜ "*/10 * * * *"
+SESSION_PROCESSING_INTERVAL = "0 * * * *"; // ➜ "0 */2 * * *"
 ```
 
 ### 2. Batch Size Optimization
+
 ```typescript
 // Reduce batch sizes to avoid long-running transactions
-CSV_IMPORT_BATCH_SIZE=50         // ➜ 25
-IMPORT_PROCESSING_BATCH_SIZE=50  // ➜ 25
-SESSION_PROCESSING_BATCH_SIZE=20 // ➜ 10
+CSV_IMPORT_BATCH_SIZE = 50; // ➜ 25
+IMPORT_PROCESSING_BATCH_SIZE = 50; // ➜ 25
+SESSION_PROCESSING_BATCH_SIZE = 20; // ➜ 10
 ```
 
 ### 3. Connection Keepalive
+
 ```typescript
 // Keep connections warm to avoid cold starts
 const prisma = new PrismaClient({
   datasources: {
     db: {
-      url: process.env.DATABASE_URL + "&keepalive=true"
-    }
-  }
+      url: process.env.DATABASE_URL + "&keepalive=true",
+    },
+  },
 });
 ```
 
 ## Troubleshooting Common Issues
 
 ### "Can't reach database server"
+
 **Causes:**
+
 - Neon database auto-paused
 - Connection limit exceeded
 - Network issues
 
 **Solutions:**
+
 1. Enable enhanced pooling: `USE_ENHANCED_POOLING=true`
 2. Reduce connection limit: `DATABASE_CONNECTION_LIMIT=15`
 3. Implement retry logic (already done)
 4. Check Neon dashboard for database status
 
 ### "Connection terminated"
+
 **Causes:**
+
 - Idle connection timeout
 - Neon maintenance
 - Long-running transactions
 
 **Solutions:**
+
 1. Increase pool timeout: `DATABASE_POOL_TIMEOUT=30`
 2. Add connection cycling
 3. Break large operations into smaller batches
 
 ### "Missed cron execution"
+
 **Causes:**
+
 - Blocking database operations
 - Scheduler overlap
 - High CPU usage
 
 **Solutions:**
+
 1. Reduce scheduler frequency
 2. Add concurrency limits
 3. Monitor scheduler execution time
@@ -179,6 +200,7 @@ const prisma = new PrismaClient({
 ## Recommended Production Settings
 
 ### For Neon Free Tier (20 connections)
+
 ```bash
 DATABASE_CONNECTION_LIMIT=15
 DATABASE_POOL_TIMEOUT=30
@@ -189,6 +211,7 @@ SESSION_PROCESSING_INTERVAL="0 */3 * * *"
 ```
 
 ### For Neon Pro Tier (100 connections)
+
 ```bash
 DATABASE_CONNECTION_LIMIT=50
 DATABASE_POOL_TIMEOUT=20
@@ -213,4 +236,4 @@ SESSION_PROCESSING_INTERVAL="0 */2 * * *"
 - [ ] Test health endpoint regularly
 - [ ] Set up alerts for connection failures
 
-With these optimizations, your Neon database connections should be much more stable and efficient!
\ No newline at end of file
+With these optimizations, your Neon database connections should be much more stable and efficient!
diff --git a/docs/processing-system-refactor.md b/docs/processing-system-refactor.md
index 224d41c..1747ceb 100644
--- a/docs/processing-system-refactor.md
+++ b/docs/processing-system-refactor.md
@@ -7,6 +7,7 @@ Successfully refactored the session processing pipeline from a simple status-bas
 ## Problems Solved
 
 ### Original Issues
+
 1. **Inconsistent Status Tracking**: The old system used a simple enum on SessionImport that didn't properly track the multi-stage processing pipeline
 2. **Poor Error Visibility**: Error messages were buried in the SessionImport table and not easily accessible
 3. **No Stage-Specific Tracking**: The system couldn't track which specific stage of processing failed
@@ -14,32 +15,40 @@ Successfully refactored the session processing pipeline from a simple status-bas
 5. **Linting Errors**: Multiple TypeScript files referencing removed database fields
 
 ### Schema Changes Made
+
 - **Removed** old `status`, `errorMsg`, and `processedAt` columns from SessionImport
-- **Removed** `processed` field from Session  
+- **Removed** `processed` field from Session
 - **Added** new `SessionProcessingStatus` table with granular stage tracking
 - **Added** `ProcessingStage` and `ProcessingStatus` enums
 
 ## New Processing Pipeline
 
 ### Processing Stages
+
 ```typescript
 enum ProcessingStage {
-  CSV_IMPORT           // SessionImport created
-  TRANSCRIPT_FETCH     // Transcript content fetched
-  SESSION_CREATION     // Session + Messages created  
-  AI_ANALYSIS         // AI processing completed
-  QUESTION_EXTRACTION // Questions extracted
+  CSV_IMPORT, // SessionImport created
+  TRANSCRIPT_FETCH, // Transcript content fetched
+  SESSION_CREATION, // Session + Messages created
+  AI_ANALYSIS, // AI processing completed
+  QUESTION_EXTRACTION, // Questions extracted
 }
 
 enum ProcessingStatus {
-  PENDING, IN_PROGRESS, COMPLETED, FAILED, SKIPPED
+  PENDING,
+  IN_PROGRESS,
+  COMPLETED,
+  FAILED,
+  SKIPPED,
 }
 ```
 
 ### Key Components
 
 #### 1. ProcessingStatusManager
+
 Centralized class for managing processing status with methods:
+
 - `initializeSession()` - Set up processing status for new sessions
 - `startStage()`, `completeStage()`, `failStage()`, `skipStage()` - Stage management
 - `getSessionsNeedingProcessing()` - Query sessions by stage and status
@@ -48,12 +57,14 @@ Centralized class for managing processing status with methods:
 - `resetStageForRetry()` - Reset failed stages
 
 #### 2. Updated Processing Scheduler
+
 - Integrated with new `ProcessingStatusManager`
 - Tracks AI analysis and question extraction stages
 - Records detailed processing metadata
 - Proper error handling and retry capabilities
 
 #### 3. Migration System
+
 - Successfully migrated all 109 existing sessions
 - Determined current state based on existing data
 - Preserved all existing functionality
@@ -61,8 +72,9 @@ Centralized class for managing processing status with methods:
 ## Current Pipeline Status
 
 After migration and refactoring:
+
 - **CSV_IMPORT**: 109 completed
-- **TRANSCRIPT_FETCH**: 109 completed  
+- **TRANSCRIPT_FETCH**: 109 completed
 - **SESSION_CREATION**: 109 completed
 - **AI_ANALYSIS**: 16 completed, 93 pending
 - **QUESTION_EXTRACTION**: 11 completed, 98 pending
@@ -70,18 +82,21 @@ After migration and refactoring:
 ## Files Updated/Created
 
 ### New Files
+
 - `lib/processingStatusManager.ts` - Core processing status management
 - `check-refactored-pipeline-status.ts` - New pipeline status checker
 - `migrate-to-refactored-system.ts` - Migration script
 - `docs/processing-system-refactor.md` - This documentation
 
 ### Updated Files
+
 - `prisma/schema.prisma` - Added new processing status tables
 - `lib/processingScheduler.ts` - Integrated with new status system
 - `debug-import-status.ts` - Updated to use new system
 - `fix-import-status.ts` - Updated to use new system
 
 ### Removed Files
+
 - `check-pipeline-status.ts` - Replaced by refactored version
 
 ## Benefits Achieved
@@ -97,21 +112,25 @@ After migration and refactoring:
 ## Usage Examples
 
 ### Check Pipeline Status
+
 ```bash
 npx tsx check-refactored-pipeline-status.ts
 ```
 
 ### Debug Processing Issues
+
 ```bash
 npx tsx debug-import-status.ts
 ```
 
 ### Fix/Retry Failed Sessions
+
 ```bash
 npx tsx fix-import-status.ts
 ```
 
 ### Process Sessions
+
 ```bash
 npx tsx test-ai-processing.ts
 ```
diff --git a/docs/scheduler-workflow.md b/docs/scheduler-workflow.md
index cc270b6..254eeb0 100644
--- a/docs/scheduler-workflow.md
+++ b/docs/scheduler-workflow.md
@@ -9,22 +9,26 @@ The LiveDash system has two main schedulers that work together to fetch and proc
 
 ## Current Status (as of latest check)
 
--   **Total sessions**: 107
--   **Processed sessions**: 0  
--   **Sessions with transcript**: 0
--   **Ready for processing**: 0
+- **Total sessions**: 107
+- **Processed sessions**: 0
+- **Sessions with transcript**: 0
+- **Ready for processing**: 0
 
 ## How the `processed` Field Works
 
 The ProcessingScheduler picks up sessions where `processed` is **NOT** `true`, which includes:
 
--   `processed = false`
--   `processed = null`
+- `processed = false`
+- `processed = null`
 
 **Query used:**
 
 ```javascript
-{ processed: { not: true } } // Either false or null
+{
+  processed: {
+    not: true;
+  }
+} // Either false or null
 ```
 
 ## Complete Workflow
@@ -33,10 +37,10 @@ The ProcessingScheduler picks up sessions where `processed` is **NOT** `true`, w
 
 **What it does:**
 
--   Fetches session data from company CSV URLs
--   Creates session records in database with basic metadata
--   Sets `transcriptContent = null` initially
--   Sets `processed = null` initially
+- Fetches session data from company CSV URLs
+- Creates session records in database with basic metadata
+- Sets `transcriptContent = null` initially
+- Sets `processed = null` initially
 
 **Runs:** Every 30 minutes (cron: `*/30 * * * *`)
 
@@ -44,9 +48,9 @@ The ProcessingScheduler picks up sessions where `processed` is **NOT** `true`, w
 
 **What it does:**
 
--   Downloads full transcript content for sessions
--   Updates `transcriptContent` field with actual conversation data
--   Sessions remain `processed = null` until AI processing
+- Downloads full transcript content for sessions
+- Updates `transcriptContent` field with actual conversation data
+- Sessions remain `processed = null` until AI processing
 
 **Runs:** As part of session refresh process
 
@@ -54,11 +58,11 @@ The ProcessingScheduler picks up sessions where `processed` is **NOT** `true`, w
 
 **What it does:**
 
--   Finds sessions with transcript content where `processed != true`
--   Sends transcripts to OpenAI for analysis
--   Extracts: sentiment, category, questions, summary, etc.
--   Updates session with processed data
--   Sets `processed = true`
+- Finds sessions with transcript content where `processed != true`
+- Sends transcripts to OpenAI for analysis
+- Extracts: sentiment, category, questions, summary, etc.
+- Updates session with processed data
+- Sets `processed = true`
 
 **Runs:** Every hour (cron: `0 * * * *`)
 
@@ -94,68 +98,68 @@ node scripts/manual-triggers.js both
 
 1.  **Check if sessions have transcripts:**
 
-   ```bash
-   node scripts/manual-triggers.js status
-   ```
+```bash
+node scripts/manual-triggers.js status
+```
 
 2.  **If "Sessions with transcript" is 0:**
-   -   Sessions exist but transcripts haven't been fetched yet
-   -   Run session refresh: `node scripts/manual-triggers.js refresh`
+
+- Sessions exist but transcripts haven't been fetched yet
+- Run session refresh: `node scripts/manual-triggers.js refresh`
 
 3.  **If "Ready for processing" is 0 but "Sessions with transcript" > 0:**
-   -   All sessions with transcripts have already been processed
-   -   Check if `OPENAI_API_KEY` is set in environment
+
+- All sessions with transcripts have already been processed
+- Check if `OPENAI_API_KEY` is set in environment
 
 ### Common Issues
 
 #### "No sessions found requiring processing"
 
--   All sessions with transcripts have been processed (`processed = true`)
--   Or no sessions have transcript content yet
+- All sessions with transcripts have been processed (`processed = true`)
+- Or no sessions have transcript content yet
 
 #### "OPENAI_API_KEY environment variable is not set"
 
--   Add OpenAI API key to `.env.development` file
--   Restart the application
+- Add OpenAI API key to `.env.development` file
+- Restart the application
 
 #### "Error fetching transcript: Unauthorized"
 
--   CSV credentials are incorrect or expired
--   Check company CSV username/password in database
+- CSV credentials are incorrect or expired
+- Check company CSV username/password in database
 
 ## Database Field Mapping
 
 ### Before AI Processing
 
-```javascript
+```json
 {
-  id: "session-uuid",
-  transcriptContent: "full conversation text" | null,
-  processed: null,
-  sentimentCategory: null,
-  questions: null,
-  summary: null,
-  // ... other fields
+  "id": "session-uuid",
+  "transcriptContent": "full conversation text or null",
+  "processed": null,
+  "sentimentCategory": null,
+  "questions": null,
+  "summary": null
 }
 ```
 
 ### After AI Processing
 
-```javascript
+```json
 {
-  id: "session-uuid", 
-  transcriptContent: "full conversation text",
-  processed: true,
-  sentimentCategory: "positive" | "neutral" | "negative",
-  questions: '["question 1", "question 2"]', // JSON string
-  summary: "Brief conversation summary",
-  language: "en", // ISO 639-1 code
-  messagesSent: 5,
-  sentiment: 0.8, // Float value (-1 to 1)
-  escalated: false,
-  forwardedHr: false,
-  category: "Schedule & Hours",
-  // ... other fields
+  "id": "session-uuid",
+  "transcriptContent": "full conversation text",
+  "processed": true,
+  "sentimentCategory": "positive",
+  "questions": "[\"question 1\", \"question 2\"]",
+  "summary": "Brief conversation summary",
+  "language": "en",
+  "messagesSent": 5,
+  "sentiment": 0.8,
+  "escalated": false,
+  "forwardedHr": false,
+  "category": "Schedule & Hours"
 }
 ```
 
@@ -163,16 +167,16 @@ node scripts/manual-triggers.js both
 
 ### Session Refresh Scheduler
 
--   **File**: `lib/scheduler.js`
--   **Frequency**: Every 30 minutes
--   **Cron**: `*/30 * * * *`
+- **File**: `lib/scheduler.js`
+- **Frequency**: Every 30 minutes
+- **Cron**: `*/30 * * * *`
 
-### Processing Scheduler  
+### Processing Scheduler
 
--   **File**: `lib/processingScheduler.js`
--   **Frequency**: Every hour
--   **Cron**: `0 * * * *`
--   **Batch size**: 10 sessions per run
+- **File**: `lib/processingScheduler.js`
+- **Frequency**: Every hour
+- **Cron**: `0 * * * *`
+- **Batch size**: 10 sessions per run
 
 ## Environment Variables Required
 
@@ -192,20 +196,20 @@ NEXTAUTH_URL="http://localhost:3000"
 
 1.  **Trigger session refresh** to fetch transcripts:
 
-   ```bash
-   node scripts/manual-triggers.js refresh
-   ```
+```bash
+node scripts/manual-triggers.js refresh
+```
 
 2.  **Check status** to see if transcripts were fetched:
 
-   ```bash
-   node scripts/manual-triggers.js status
-   ```
+```bash
+node scripts/manual-triggers.js status
+```
 
 3.  **Trigger processing** if transcripts are available:
 
-   ```bash
-   node scripts/manual-triggers.js process
-   ```
+```bash
+node scripts/manual-triggers.js process
+```
 
 4.  **View results** in the dashboard session details pages
diff --git a/docs/transcript-parsing-implementation.md b/docs/transcript-parsing-implementation.md
index 0f0c018..9a0c362 100644
--- a/docs/transcript-parsing-implementation.md
+++ b/docs/transcript-parsing-implementation.md
@@ -25,8 +25,8 @@ CREATE INDEX Message_sessionId_order_idx ON Message(sessionId, order);
 
 ### Updated Session Table
 
--   Added `messages` relation to Session model
--   Sessions can now have both raw transcript content AND parsed messages
+- Added `messages` relation to Session model
+- Sessions can now have both raw transcript content AND parsed messages
 
 ## New Components
 
@@ -46,35 +46,35 @@ export interface Message {
 
 ### 2. Transcript Parser (`lib/transcriptParser.js`)
 
--   **`parseChatLogToJSON(logString)`** - Parses raw transcript text into structured messages
--   **`storeMessagesForSession(sessionId, messages)`** - Stores parsed messages in database
--   **`processTranscriptForSession(sessionId, transcriptContent)`** - Complete processing for one session
--   **`processAllUnparsedTranscripts()`** - Batch process all unparsed transcripts
--   **`getMessagesForSession(sessionId)`** - Retrieve messages for a session
+- **`parseChatLogToJSON(logString)`** - Parses raw transcript text into structured messages
+- **`storeMessagesForSession(sessionId, messages)`** - Stores parsed messages in database
+- **`processTranscriptForSession(sessionId, transcriptContent)`** - Complete processing for one session
+- **`processAllUnparsedTranscripts()`** - Batch process all unparsed transcripts
+- **`getMessagesForSession(sessionId)`** - Retrieve messages for a session
 
 ### 3. MessageViewer Component (`components/MessageViewer.tsx`)
 
--   Chat-like interface for displaying parsed messages
--   Color-coded by role (User: blue, Assistant: gray, System: yellow)
--   Shows timestamps and message order
--   Scrollable with conversation metadata
+- Chat-like interface for displaying parsed messages
+- Color-coded by role (User: blue, Assistant: gray, System: yellow)
+- Shows timestamps and message order
+- Scrollable with conversation metadata
 
 ## Updated Components
 
 ### 1. Session API (`pages/api/dashboard/session/[id].ts`)
 
--   Now includes parsed messages in session response
--   Messages are ordered by `order` field (ascending)
+- Now includes parsed messages in session response
+- Messages are ordered by `order` field (ascending)
 
 ### 2. Session Details Page (`app/dashboard/sessions/[id]/page.tsx`)
 
--   Added MessageViewer component
--   Shows both parsed messages AND raw transcript
--   Prioritizes parsed messages when available
+- Added MessageViewer component
+- Shows both parsed messages AND raw transcript
+- Prioritizes parsed messages when available
 
 ### 3. ChatSession Interface (`lib/types.ts`)
 
--   Added optional `messages?: Message[]` field
+- Added optional `messages?: Message[]` field
 
 ## Parsing Logic
 
@@ -90,11 +90,11 @@ The parser expects transcript format:
 
 ### Features
 
--   **Multi-line support** - Messages can span multiple lines
--   **Timestamp parsing** - Converts DD.MM.YYYY HH:MM:SS to ISO format
--   **Role detection** - Extracts sender role from each message
--   **Ordering** - Maintains conversation order with explicit order field
--   **Sorting** - Messages sorted by timestamp, then by role (User before Assistant)
+- **Multi-line support** - Messages can span multiple lines
+- **Timestamp parsing** - Converts DD.MM.YYYY HH:MM:SS to ISO format
+- **Role detection** - Extracts sender role from each message
+- **Ordering** - Maintains conversation order with explicit order field
+- **Sorting** - Messages sorted by timestamp, then by role (User before Assistant)
 
 ## Manual Commands
 
@@ -113,8 +113,8 @@ node scripts/manual-triggers.js status
 
 ### Updated Commands
 
--   **`status`** - Now shows transcript and parsing statistics
--   **`all`** - New command that runs refresh → parse → process in sequence
+- **`status`** - Now shows transcript and parsing statistics
+- **`all`** - New command that runs refresh → parse → process in sequence
 
 ## Workflow Integration
 
@@ -126,29 +126,35 @@ node scripts/manual-triggers.js status
 
 ### Database States
 
-```javascript
-// After CSV fetch
-{
-  transcriptContent: "raw text...",
-  messages: [], // Empty
-  processed: null
-}
+After CSV fetch:
 
-// After parsing
+```json
 {
-  transcriptContent: "raw text...",
-  messages: [Message, Message, ...], // Parsed
-  processed: null
+  "transcriptContent": "raw text...",
+  "messages": [],
+  "processed": null
 }
+```
 
-// After AI processing
+After parsing:
+
+```json
 {
-  transcriptContent: "raw text...",
-  messages: [Message, Message, ...], // Parsed
-  processed: true,
-  sentimentCategory: "positive",
-  summary: "Brief summary...",
-  // ... other AI fields
+  "transcriptContent": "raw text...",
+  "messages": ["Message1", "Message2"],
+  "processed": null
+}
+```
+
+After AI processing:
+
+```json
+{
+  "transcriptContent": "raw text...",
+  "messages": ["Message1", "Message2"],
+  "processed": true,
+  "sentimentCategory": "positive",
+  "summary": "Brief summary..."
 }
 ```
 
@@ -156,18 +162,18 @@ node scripts/manual-triggers.js status
 
 ### Before
 
--   Only raw transcript text in a text area
--   Difficult to follow conversation flow
--   No clear distinction between speakers
+- Only raw transcript text in a text area
+- Difficult to follow conversation flow
+- No clear distinction between speakers
 
 ### After
 
--   **Chat-like interface** with message bubbles
--   **Color-coded roles** for easy identification
--   **Timestamps** for each message
--   **Conversation metadata** (first/last message times)
--   **Fallback to raw transcript** if parsing fails
--   **Both views available** - structured AND raw
+- **Chat-like interface** with message bubbles
+- **Color-coded roles** for easy identification
+- **Timestamps** for each message
+- **Conversation metadata** (first/last message times)
+- **Fallback to raw transcript** if parsing fails
+- **Both views available** - structured AND raw
 
 ## Testing
 
@@ -195,34 +201,34 @@ node scripts/manual-triggers.js all
 
 ### Performance
 
--   **Indexed queries** - Messages indexed by sessionId and order
--   **Efficient loading** - Only load messages when needed
--   **Cascading deletes** - Messages automatically deleted with sessions
+- **Indexed queries** - Messages indexed by sessionId and order
+- **Efficient loading** - Only load messages when needed
+- **Cascading deletes** - Messages automatically deleted with sessions
 
 ### Maintainability
 
--   **Separation of concerns** - Parsing logic isolated in dedicated module
--   **Type safety** - Full TypeScript support for Message interface
--   **Error handling** - Graceful fallbacks when parsing fails
+- **Separation of concerns** - Parsing logic isolated in dedicated module
+- **Type safety** - Full TypeScript support for Message interface
+- **Error handling** - Graceful fallbacks when parsing fails
 
 ### Extensibility
 
--   **Role flexibility** - Supports any role names (User, Assistant, System, etc.)
--   **Content preservation** - Multi-line messages fully supported
--   **Metadata ready** - Easy to add message-level metadata in future
+- **Role flexibility** - Supports any role names (User, Assistant, System, etc.)
+- **Content preservation** - Multi-line messages fully supported
+- **Metadata ready** - Easy to add message-level metadata in future
 
 ## Migration Notes
 
 ### Existing Data
 
--   **No data loss** - Original transcript content preserved
--   **Backward compatibility** - Pages work with or without parsed messages
--   **Gradual migration** - Can parse transcripts incrementally
+- **No data loss** - Original transcript content preserved
+- **Backward compatibility** - Pages work with or without parsed messages
+- **Gradual migration** - Can parse transcripts incrementally
 
 ### Database Migration
 
--   New Message table created with foreign key constraints
--   Existing Session table unchanged (only added relation)
--   Index created for efficient message queries
+- New Message table created with foreign key constraints
+- Existing Session table unchanged (only added relation)
+- Index created for efficient message queries
 
 This implementation provides a solid foundation for enhanced conversation analysis and user experience while maintaining full backward compatibility.
diff --git a/lib/auth.ts b/lib/auth.ts
deleted file mode 100644
index 4230989..0000000
--- a/lib/auth.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import bcrypt from "bcryptjs";
-import type { NextAuthOptions } from "next-auth";
-import CredentialsProvider from "next-auth/providers/credentials";
-import { prisma } from "./prisma";
-
-// Type augmentation moved to types/next-auth.d.ts
-
-export const authOptions: NextAuthOptions = {
-  providers: [
-    CredentialsProvider({
-      name: "credentials",
-      credentials: {
-        email: { label: "Email", type: "email" },
-        password: { label: "Password", type: "password" },
-      },
-      async authorize(credentials) {
-        if (!credentials?.email || !credentials?.password) {
-          return null;
-        }
-
-        const user = await prisma.user.findUnique({
-          where: { email: credentials.email },
-          include: { company: true },
-        });
-
-        if (!user || !user.password) {
-          return null;
-        }
-
-        const isPasswordValid = await bcrypt.compare(
-          credentials.password,
-          user.password
-        );
-
-        if (!isPasswordValid) {
-          return null;
-        }
-
-        // Check if company is active
-        if (user.company.status !== "ACTIVE") {
-          return null;
-        }
-
-        return {
-          id: user.id,
-          email: user.email,
-          name: user.name,
-          companyId: user.companyId,
-          role: user.role,
-        };
-      },
-    }),
-  ],
-  session: {
-    strategy: "jwt",
-    maxAge: 24 * 60 * 60, // 24 hours for regular users
-  },
-  cookies: {
-    sessionToken: {
-      name: "app-auth.session-token",
-      options: {
-        httpOnly: true,
-        sameSite: "lax",
-        path: "/",
-        secure: process.env.NODE_ENV === "production",
-      },
-    },
-  },
-  callbacks: {
-    async jwt({ token, user }) {
-      if (user) {
-        token.companyId = user.companyId;
-        token.role = user.role;
-      }
-      return token;
-    },
-    async session({ session, token }) {
-      if (token && session.user) {
-        session.user.companyId = token.companyId;
-        session.user.role = token.role;
-      }
-      return session;
-    },
-  },
-  pages: {
-    signIn: "/login",
-  },
-  secret: process.env.NEXTAUTH_SECRET,
-  debug: process.env.NODE_ENV === "development",
-};
diff --git a/lib/auth/client.ts b/lib/auth/client.ts
new file mode 100644
index 0000000..2049f4d
--- /dev/null
+++ b/lib/auth/client.ts
@@ -0,0 +1,8 @@
+"use client";
+
+import { createAuthClient } from "@neondatabase/auth/next";
+
+export const authClient = createAuthClient();
+
+// Export commonly used hooks for convenience
+export const { useSession } = authClient;
diff --git a/lib/auth/server.ts b/lib/auth/server.ts
new file mode 100644
index 0000000..d8001aa
--- /dev/null
+++ b/lib/auth/server.ts
@@ -0,0 +1,101 @@
+import { createAuthServer, neonAuth } from "@neondatabase/auth/next/server";
+import type { UserRole } from "@prisma/client";
+import { prisma } from "@/lib/prisma";
+
+export const authServer = createAuthServer();
+
+// Re-export neonAuth for direct use in server components
+export { neonAuth };
+
+// Platform roles for easy checking
+export const PLATFORM_ROLES: UserRole[] = [
+  "PLATFORM_SUPER_ADMIN",
+  "PLATFORM_ADMIN",
+  "PLATFORM_SUPPORT",
+];
+
+/**
+ * Check if a role is a platform-level role
+ */
+export function isPlatformRole(role: UserRole): boolean {
+  return PLATFORM_ROLES.includes(role);
+}
+
+/**
+ * Get authenticated user with full data (works for both platform and company users)
+ */
+export async function getAuthenticatedUser() {
+  const { session, user: authUser } = await neonAuth();
+
+  if (!session || !authUser?.email) {
+    return { session: null, user: null, authUser: null };
+  }
+
+  const user = await prisma.user.findUnique({
+    where: { email: authUser.email },
+    select: {
+      id: true,
+      email: true,
+      name: true,
+      role: true,
+      companyId: true,
+      company: {
+        select: {
+          id: true,
+          name: true,
+          status: true,
+        },
+      },
+    },
+  });
+
+  return { session, user, authUser };
+}
+
+/**
+ * Get authenticated company user (for dashboard routes)
+ * Returns null if user is a platform user or has no company
+ */
+export async function getAuthenticatedCompanyUser() {
+  const { session, user, authUser } = await getAuthenticatedUser();
+
+  if (!user || !user.companyId || isPlatformRole(user.role)) {
+    return { session: null, user: null, authUser: null };
+  }
+
+  return { session, user, authUser };
+}
+
+/**
+ * Get authenticated platform user (for platform admin routes)
+ * Returns null if user is not a platform user
+ */
+export async function getAuthenticatedPlatformUser() {
+  const { session, user, authUser } = await getAuthenticatedUser();
+
+  if (!user || !isPlatformRole(user.role)) {
+    return { session: null, user: null, authUser: null };
+  }
+
+  return { session, user, authUser };
+}
+
+/**
+ * Check if user has specific platform role or higher
+ */
+export function hasPlatformAccess(
+  role: UserRole,
+  minRole:
+    | "PLATFORM_SUPPORT"
+    | "PLATFORM_ADMIN"
+    | "PLATFORM_SUPER_ADMIN" = "PLATFORM_SUPPORT"
+): boolean {
+  const hierarchy: UserRole[] = [
+    "PLATFORM_SUPPORT",
+    "PLATFORM_ADMIN",
+    "PLATFORM_SUPER_ADMIN",
+  ];
+  const userLevel = hierarchy.indexOf(role);
+  const minLevel = hierarchy.indexOf(minRole);
+  return userLevel >= minLevel;
+}
diff --git a/lib/env.ts b/lib/env.ts
index 84562d1..221d281 100644
--- a/lib/env.ts
+++ b/lib/env.ts
@@ -73,7 +73,15 @@ try {
  * Typed environment variables with defaults
  */
 export const env = {
-  // NextAuth
+  // Neon Auth
+  NEON_AUTH_BASE_URL:
+    parseEnvValue(process.env.NEON_AUTH_BASE_URL) ||
+    parseEnvValue(process.env.VITE_NEON_AUTH_URL) ||
+    parseEnvValue(process.env.AUTH_URL) ||
+    "",
+  JWKS_URL: parseEnvValue(process.env.JWKS_URL) || "",
+
+  // Legacy NextAuth (for platform auth - kept for backward compatibility)
   NEXTAUTH_URL:
     parseEnvValue(process.env.NEXTAUTH_URL) || "http://localhost:3000",
   NEXTAUTH_SECRET: parseEnvValue(process.env.NEXTAUTH_SECRET) || "",
@@ -106,7 +114,11 @@ export const env = {
   // Database Configuration
   DATABASE_URL: parseEnvValue(process.env.DATABASE_URL) || "",
   DATABASE_URL_DIRECT: parseEnvValue(process.env.DATABASE_URL_DIRECT) || "",
-  
+  DATABASE_URL_UNPOOLED:
+    parseEnvValue(process.env.DATABASE_URL_UNPOOLED) ||
+    parseEnvValue(process.env.DATABASE_URLUNPOOLED) ||
+    "",
+
   // Database Connection Pooling
   DATABASE_CONNECTION_LIMIT: parseIntWithDefault(
     process.env.DATABASE_CONNECTION_LIMIT,
@@ -131,8 +143,13 @@ export function validateEnv(): { valid: boolean; errors: string[] } {
     errors.push("DATABASE_URL is required");
   }
 
-  if (!env.NEXTAUTH_SECRET) {
-    errors.push("NEXTAUTH_SECRET is required");
+  if (!env.NEON_AUTH_BASE_URL) {
+    errors.push("NEON_AUTH_BASE_URL (or AUTH_URL) is required for Neon Auth");
+  }
+
+  // NEXTAUTH_SECRET only required if platform auth is used
+  if (!env.NEXTAUTH_SECRET && env.NODE_ENV === "production") {
+    errors.push("NEXTAUTH_SECRET is required for platform auth in production");
   }
 
   if (!env.OPENAI_API_KEY && env.NODE_ENV === "production") {
diff --git a/lib/platform-auth.ts b/lib/platform-auth.ts
deleted file mode 100644
index 278a9d4..0000000
--- a/lib/platform-auth.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import bcrypt from "bcryptjs";
-import type { NextAuthOptions } from "next-auth";
-import CredentialsProvider from "next-auth/providers/credentials";
-import { prisma } from "./prisma";
-
-// Type augmentation moved to types/next-auth.d.ts
-
-export const platformAuthOptions: NextAuthOptions = {
-  providers: [
-    CredentialsProvider({
-      name: "Platform Credentials",
-      credentials: {
-        email: { label: "Email", type: "text" },
-        password: { label: "Password", type: "password" },
-      },
-      async authorize(credentials) {
-        if (!credentials?.email || !credentials?.password) {
-          return null;
-        }
-
-        const platformUser = await prisma.platformUser.findUnique({
-          where: { email: credentials.email },
-        });
-
-        if (!platformUser) return null;
-
-        const valid = await bcrypt.compare(
-          credentials.password,
-          platformUser.password
-        );
-        if (!valid) return null;
-
-        return {
-          id: platformUser.id,
-          email: platformUser.email,
-          name: platformUser.name,
-          isPlatformUser: true,
-          platformRole: platformUser.role,
-        };
-      },
-    }),
-  ],
-  session: {
-    strategy: "jwt",
-    maxAge: 8 * 60 * 60, // 8 hours for platform users (more secure)
-  },
-  cookies: {
-    sessionToken: {
-      name: "platform-auth.session-token",
-      options: {
-        httpOnly: true,
-        sameSite: "lax",
-        path: "/",
-        secure: process.env.NODE_ENV === "production",
-      },
-    },
-  },
-  callbacks: {
-    async jwt({ token, user }) {
-      if (user) {
-        token.isPlatformUser = user.isPlatformUser;
-        token.platformRole = user.platformRole;
-      }
-      return token;
-    },
-    async session({ session, token }) {
-      if (token && session.user) {
-        session.user.isPlatformUser = token.isPlatformUser;
-        session.user.platformRole = token.platformRole;
-      }
-      return session;
-    },
-  },
-  pages: {
-    signIn: "/platform/login",
-  },
-  secret: process.env.NEXTAUTH_SECRET,
-  debug: process.env.NODE_ENV === "development",
-};
diff --git a/lib/prisma.ts b/lib/prisma.ts
index 6585967..644f137 100644
--- a/lib/prisma.ts
+++ b/lib/prisma.ts
@@ -6,21 +6,8 @@ declare const global: {
   prisma: PrismaClient | undefined;
 };
 
-// Lazy-load createEnhancedPrismaClient to avoid build-time URL parsing
-const createPrismaClient = () => {
-  // Use enhanced pooling in production or when explicitly enabled
-  const useEnhancedPooling =
-    process.env.NODE_ENV === "production" ||
-    process.env.USE_ENHANCED_POOLING === "true";
-
-  if (useEnhancedPooling) {
-    console.log("Using enhanced database connection pooling with PG adapter");
-    // Dynamic import to defer URL parsing until runtime
-    const { createEnhancedPrismaClient } = require("./database-pool");
-    return createEnhancedPrismaClient();
-  }
-
-  // Default Prisma client with basic configuration
+// Create standard Prisma client (no enhanced pooling at build time)
+const createPrismaClient = (): PrismaClient => {
   return new PrismaClient({
     log:
       process.env.NODE_ENV === "development"
@@ -29,6 +16,13 @@ const createPrismaClient = () => {
   });
 };
 
+// Async factory for enhanced pooling (only call at runtime, not build time)
+export const createEnhancedClient = async (): Promise<PrismaClient> => {
+  const { createEnhancedPrismaClient } = await import("./database-pool");
+  console.log("Using enhanced database connection pooling with PG adapter");
+  return createEnhancedPrismaClient();
+};
+
 // Lazy initialization - only create when first accessed
 let _prisma: PrismaClient | undefined;
 
diff --git a/lib/types.ts b/lib/types.ts
index e0665fa..55ede0e 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,13 +1,12 @@
 import type { UserRole } from "@prisma/client";
-import type { Session as NextAuthSession } from "next-auth";
 
-export interface UserSession extends Omit<NextAuthSession, "user"> {
+export interface UserSession {
   user: {
-    id?: string;
+    id: string;
     name?: string | null;
-    email?: string;
+    email: string;
     image?: string | null;
-    companyId: string;
+    companyId: string | null;
     role: UserRole;
   };
 }
@@ -26,11 +25,9 @@ export interface Company {
 export interface User {
   id: string;
   email: string;
-  password: string;
-  role: string;
-  companyId: string;
-  resetToken?: string | null;
-  resetTokenExpiry?: Date | null;
+  name?: string | null;
+  role: UserRole;
+  companyId: string | null;
   company?: Company;
   createdAt: Date;
   updatedAt: Date;
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..85466f2
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,14 @@
+import { neonAuthMiddleware } from "@neondatabase/auth/next/server";
+
+export default neonAuthMiddleware({
+  // Redirects unauthenticated users to sign-in page
+  loginUrl: "/auth/sign-in",
+});
+
+export const config = {
+  matcher: [
+    // Protected routes requiring authentication
+    "/dashboard/:path*",
+    "/account/:path*",
+  ],
+};
diff --git a/next.config.js b/next.config.js
index bd29444..9656bc4 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,6 +12,9 @@ const nextConfig = {
   allowedDevOrigins: ["localhost", "127.0.0.1"],
   // Set workspace root to this project directory
   outputFileTracingRoot: __dirname,
+  // Cache Components enabled - dynamic [id] routes use DynamicMarker pattern
+  // See: app/dashboard/sessions/[id]/page.tsx and app/platform/companies/[id]/page.tsx
+  cacheComponents: true,
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
index 7c3f494..003e299 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "lint:md:fix": "markdownlint-cli2  --fix \"**/*.md\" \"!.trunk/**\" \"!.venv/**\" \"!node_modules/**\""
   },
   "dependencies": {
+    "@neondatabase/auth": "^0.1.0-beta.21",
     "@prisma/adapter-pg": "^6.19.2",
     "@prisma/client": "^6.19.2",
     "@radix-ui/react-accordion": "^1.2.12",
@@ -76,7 +77,6 @@
     "lucide-react": "^0.525.0",
     "motion": "^12.27.1",
     "next": "^16.1.4",
-    "next-auth": "^4.24.13",
     "next-themes": "^0.4.6",
     "node-cron": "^4.2.1",
     "node-fetch": "^3.3.2",
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index dc26bbf..a1426a4 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -9,26 +9,6 @@ datasource db {
   directUrl = env("DATABASE_URL_DIRECT")
 }
 
-/// *
-/// * PLATFORM USER (super-admin for Notso AI)
-/// * Platform-level users who can manage companies and platform-wide settings
-/// * Separate from Company users for platform management isolation
-model PlatformUser {
-  id        String           @id @default(uuid())
-  /// Platform user email address
-  email     String           @unique @db.VarChar(255)
-  /// Hashed password for platform authentication
-  password  String           @db.VarChar(255)
-  /// Platform permission level
-  role      PlatformUserRole @default(ADMIN)
-  /// Display name for platform user
-  name      String           @db.VarChar(255)
-  createdAt DateTime         @default(now()) @db.Timestamptz(6)
-  updatedAt DateTime         @updatedAt @db.Timestamptz(6)
-
-  @@index([email])
-}
-
 /// *
 /// * COMPANY (multi-tenant root)
 /// * Root entity for multi-tenant architecture
@@ -61,35 +41,30 @@ model Company {
 }
 
 /// *
-/// * USER (authentication accounts)
-/// * Application users with role-based access control
-/// * Each user belongs to exactly one company for data isolation
+/// * USER (unified authentication accounts)
+/// * All users: platform admins (companyId=null) and company users (companyId set)
+/// * Authentication handled by Neon Auth, this table stores authorization data
 model User {
-  id               String    @id @default(uuid())
-  /// User email address, must be unique across all companies
-  email            String    @unique @db.VarChar(255)
-  /// Hashed password for authentication
-  password         String    @db.VarChar(255)
-  /// User permission level within their company
-  role             UserRole  @default(USER)
-  /// Foreign key to Company - enforces data isolation
-  companyId        String
-  /// Temporary token for password reset functionality
-  resetToken       String?   @db.VarChar(255)
-  /// Expiration time for reset token
-  resetTokenExpiry DateTime? @db.Timestamptz(6)
-  createdAt        DateTime  @default(now()) @db.Timestamptz(6)
-  updatedAt        DateTime  @updatedAt @db.Timestamptz(6)
+  id        String   @id @default(uuid())
+  /// User email address, must be unique (synced from Neon Auth)
+  email     String   @unique @db.VarChar(255)
+  /// User permission level (includes both platform and company roles)
+  role      UserRole @default(USER)
+  /// Foreign key to Company - null for platform users, set for company users
+  companyId String?
+  createdAt DateTime @default(now()) @db.Timestamptz(6)
+  updatedAt DateTime @updatedAt @db.Timestamptz(6)
   /// Display name for the user
-  name             String?   @db.VarChar(255)
+  name      String?  @db.VarChar(255)
   /// When this user was invited
-  invitedAt        DateTime? @db.Timestamptz(6)
+  invitedAt DateTime? @db.Timestamptz(6)
   /// Email of the user who invited this user (for audit trail)
-  invitedBy        String?   @db.VarChar(255)
-  company          Company   @relation("CompanyUsers", fields: [companyId], references: [id], onDelete: Cascade)
+  invitedBy String?   @db.VarChar(255)
+  company   Company?  @relation("CompanyUsers", fields: [companyId], references: [id], onDelete: Cascade)
 
   @@index([companyId])
   @@index([email])
+  @@index([role])
 }
 
 /// *
@@ -328,24 +303,18 @@ model CompanyAIModel {
   @@index([companyId, isDefault])
 }
 
-/// Platform-level user roles for Notso AI team
-enum PlatformUserRole {
-  /// Full platform access, can create/suspend companies
-  SUPER_ADMIN
-  /// Platform administration, company management
-  ADMIN
-  /// Customer support access, read-only company access
-  SUPPORT
-}
-
-/// User permission levels within a company
+/// Unified user roles for both platform and company users
 enum UserRole {
-  /// Full access to company data and settings
+  /// Platform: Full platform access, can create/suspend companies
+  PLATFORM_SUPER_ADMIN
+  /// Platform: Platform administration, company management
+  PLATFORM_ADMIN
+  /// Platform: Customer support access, read-only company access
+  PLATFORM_SUPPORT
+  /// Company: Full access to company data and settings
   ADMIN
-  /// Standard access to view and interact with data
+  /// Company: Standard access to view and interact with data
   USER
-  /// Read-only access for compliance and auditing
-  AUDITOR
 }
 
 /// Company operational status
diff --git a/prisma/seed-platform.ts b/prisma/seed-platform.ts
deleted file mode 100644
index 30032ea..0000000
--- a/prisma/seed-platform.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { PrismaClient, PlatformUserRole } from "@prisma/client";
-import bcrypt from "bcryptjs";
-
-const prisma = new PrismaClient();
-
-async function main() {
-  console.log("🚀 Seeding platform users for Notso AI...");
-
-  // Create initial platform admin user
-  const adminPassword = await bcrypt.hash("NotsoAI2024!Admin", 12);
-
-  const admin = await prisma.platformUser.upsert({
-    where: { email: "admin@notso.ai" },
-    update: {},
-    create: {
-      email: "admin@notso.ai",
-      password: adminPassword,
-      name: "Platform Administrator",
-      role: PlatformUserRole.SUPER_ADMIN,
-    },
-  });
-
-  console.log("✅ Created platform super admin:", admin.email);
-
-  // Create support user
-  const supportPassword = await bcrypt.hash("NotsoAI2024!Support", 12);
-
-  const support = await prisma.platformUser.upsert({
-    where: { email: "support@notso.ai" },
-    update: {},
-    create: {
-      email: "support@notso.ai",
-      password: supportPassword,
-      name: "Support Team",
-      role: PlatformUserRole.SUPPORT,
-    },
-  });
-
-  console.log("✅ Created platform support user:", support.email);
-
-  console.log("\n🔑 Platform Login Credentials:");
-  console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
-  console.log("Super Admin:");
-  console.log("  Email: admin@notso.ai");
-  console.log("  Password: NotsoAI2024!Admin");
-  console.log("");
-  console.log("Support:");
-  console.log("  Email: support@notso.ai");
-  console.log("  Password: NotsoAI2024!Support");
-  console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
-  console.log("\n🌐 Platform Access:");
-  console.log("  Login: http://localhost:3000/platform/login");
-  console.log("  Dashboard: http://localhost:3000/platform/dashboard");
-}
-
-main()
-  .catch((e) => {
-    console.error("❌ Platform seeding failed:", e);
-    process.exit(1);
-  })
-  .finally(async () => {
-    await prisma.$disconnect();
-  });
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 8550b15..3a55992 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,12 +1,12 @@
-// seed.ts - Create initial admin user, company, and AI models
+// seed.ts - Create initial company and AI models
+// Note: Users are created via Neon Auth signup, this just creates the placeholder
 import { PrismaClient } from "@prisma/client";
-import bcrypt from "bcryptjs";
 
 const prisma = new PrismaClient();
 
 async function main() {
   try {
-    console.log("🌱 Starting database seeding...");
+    console.log("Starting database seeding...");
 
     // Create the Jumbo company
     const company = await prisma.company.create({
@@ -17,19 +17,29 @@ async function main() {
         csvPassword: "jumboadmin",
       },
     });
-    console.log(`✅ Created company: ${company.name}`);
+    console.log(`Created company: ${company.name}`);
 
-    // Create admin user
-    const hashedPassword = await bcrypt.hash("8QbL26tB7fWS", 10);
+    // Create admin user placeholder (they'll complete signup via Neon Auth)
     const adminUser = await prisma.user.create({
       data: {
         email: "max.kowalski.contact@gmail.com",
-        password: hashedPassword,
+        name: "Max Kowalski",
         role: "ADMIN",
         companyId: company.id,
       },
     });
-    console.log(`✅ Created admin user: ${adminUser.email}`);
+    console.log(`Created admin user placeholder: ${adminUser.email}`);
+
+    // Create platform super admin placeholder
+    const platformAdmin = await prisma.user.create({
+      data: {
+        email: "admin@notso.ai",
+        name: "Platform Admin",
+        role: "PLATFORM_SUPER_ADMIN",
+        companyId: null, // Platform users have no company
+      },
+    });
+    console.log(`Created platform admin placeholder: ${platformAdmin.email}`);
 
     // Create AI Models
     const aiModels = [
@@ -59,13 +69,13 @@ async function main() {
       },
     ];
 
-    const createdModels: any[] = [];
+    const createdModels: { id: string; name: string }[] = [];
     for (const modelData of aiModels) {
       const model = await prisma.aIModel.create({
         data: modelData,
       });
       createdModels.push(model);
-      console.log(`✅ Created AI model: ${model.name}`);
+      console.log(`Created AI model: ${model.name}`);
     }
 
     // Create current pricing for AI models (as of December 2024)
@@ -102,10 +112,10 @@ async function main() {
             promptTokenCost: pricing.promptTokenCost,
             completionTokenCost: pricing.completionTokenCost,
             effectiveFrom: currentTime,
-            effectiveUntil: null, // Current pricing
+            effectiveUntil: null,
           },
         });
-        console.log(`✅ Created pricing for: ${model.name}`);
+        console.log(`Created pricing for: ${model.name}`);
       }
     }
 
@@ -119,21 +129,25 @@ async function main() {
           isDefault: true,
         },
       });
-      console.log(`✅ Set default AI model for company: ${defaultModel.name}`);
+      console.log(`Set default AI model for company: ${defaultModel.name}`);
     }
 
-    console.log("\n🎉 Database seeding completed successfully!");
-    console.log("\n📋 Summary:");
+    console.log("\nDatabase seeding completed successfully!");
+    console.log("\nSummary:");
     console.log(`Company: ${company.name}`);
-    console.log(`Admin user: ${adminUser.email}`);
-    console.log(`Password: 8QbL26tB7fWS`);
+    console.log(
+      `Admin user: ${adminUser.email} (needs to sign up via /auth/sign-up)`
+    );
+    console.log(
+      `Platform admin: ${platformAdmin.email} (needs to sign up via /auth/sign-up)`
+    );
     console.log(
       `AI Models: ${createdModels.length} models created with current pricing`
     );
     console.log(`Default model: ${defaultModel?.name}`);
-    console.log("\n🚀 Ready to start importing CSV data!");
+    console.log("\nReady to start importing CSV data!");
   } catch (error) {
-    console.error("❌ Error seeding database:", error);
+    console.error("Error seeding database:", error);
     process.exit(1);
   } finally {
     await prisma.$disconnect();
diff --git a/tests/integration/platform-api.test.ts b/tests/integration/platform-api.test.ts
index 0819881..dc25d9e 100644
--- a/tests/integration/platform-api.test.ts
+++ b/tests/integration/platform-api.test.ts
@@ -1,11 +1,16 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
-import { NextRequest } from "next/server";
-import { hash } from "bcryptjs";
 
-// Mock getServerSession
-const mockGetServerSession = vi.fn();
-vi.mock("next-auth", () => ({
-  getServerSession: () => mockGetServerSession(),
+// Mock neonAuth from lib/auth/server
+const mockNeonAuth = vi.fn();
+vi.mock("../../lib/auth/server", () => ({
+  neonAuth: () => mockNeonAuth(),
+  getAuthenticatedPlatformUser: () => mockNeonAuth(),
+  hasPlatformAccess: vi.fn(() => true),
+  isPlatformRole: vi.fn((role: string) =>
+    ["PLATFORM_SUPER_ADMIN", "PLATFORM_ADMIN", "PLATFORM_SUPPORT"].includes(
+      role
+    )
+  ),
 }));
 
 // Mock database
@@ -42,7 +47,7 @@ describe("Platform API Endpoints", () => {
 
   describe("Authentication Requirements", () => {
     it("should require platform authentication", async () => {
-      mockGetServerSession.mockResolvedValue(null);
+      mockNeonAuth.mockResolvedValue({ user: null });
 
       // Test that endpoints check for authentication
       const endpoints = [
@@ -55,26 +60,28 @@ describe("Platform API Endpoints", () => {
       });
     });
 
-    it("should require platform user flag", () => {
-      const regularUserSession = {
-        user: {
-          email: "regular@user.com",
-          isPlatformUser: false,
-        },
-        expires: new Date().toISOString(),
+    it("should require platform user role", () => {
+      const regularUser = {
+        id: "1",
+        email: "regular@user.com",
+        role: "USER",
+        companyId: "company-123",
       };
 
-      const platformUserSession = {
-        user: {
-          email: "admin@notso.ai",
-          isPlatformUser: true,
-          platformRole: "SUPER_ADMIN",
-        },
-        expires: new Date().toISOString(),
+      const platformUser = {
+        id: "2",
+        email: "admin@notso.ai",
+        role: "PLATFORM_SUPER_ADMIN",
+        companyId: null,
       };
 
-      expect(regularUserSession.user.isPlatformUser).toBe(false);
-      expect(platformUserSession.user.isPlatformUser).toBe(true);
+      const isPlatformRole = (role: string) =>
+        ["PLATFORM_SUPER_ADMIN", "PLATFORM_ADMIN", "PLATFORM_SUPPORT"].includes(
+          role
+        );
+
+      expect(isPlatformRole(regularUser.role)).toBe(false);
+      expect(isPlatformRole(platformUser.role)).toBe(true);
     });
   });
 
@@ -117,11 +124,10 @@ describe("Platform API Endpoints", () => {
       expect(result[0]._count).toHaveProperty("users");
     });
 
-    it("should create company with admin user", async () => {
+    it("should create company with admin user placeholder", async () => {
       const newCompany = {
         id: "123",
         name: "New Company",
-        email: "admin@newcompany.com",
         status: "ACTIVE",
         maxUsers: 10,
         createdAt: new Date(),
@@ -132,13 +138,12 @@ describe("Platform API Endpoints", () => {
         id: "456",
         email: "admin@newcompany.com",
         name: "Admin User",
-        hashedPassword: "hashed_password",
         role: "ADMIN",
         companyId: "123",
         createdAt: new Date(),
         updatedAt: new Date(),
-        invitedBy: null,
-        invitedAt: null,
+        invitedBy: "platform@notso.ai",
+        invitedAt: new Date(),
       };
 
       mockDb.company.create.mockResolvedValue({
@@ -149,13 +154,13 @@ describe("Platform API Endpoints", () => {
       const result = await mockDb.company.create({
         data: {
           name: "New Company",
-          email: "admin@newcompany.com",
           users: {
             create: {
               email: "admin@newcompany.com",
               name: "Admin User",
-              hashedPassword: "hashed_password",
               role: "ADMIN",
+              invitedBy: "platform@notso.ai",
+              invitedAt: new Date(),
             },
           },
         },
diff --git a/tests/unit/accessibility.test.tsx b/tests/unit/accessibility.test.tsx
index c387744..0c0a900 100644
--- a/tests/unit/accessibility.test.tsx
+++ b/tests/unit/accessibility.test.tsx
@@ -7,16 +7,21 @@ import { axe, toHaveNoViolations } from "jest-axe";
 import { ThemeProvider } from "@/components/theme-provider";
 import UserManagementPage from "@/app/dashboard/users/page";
 import SessionViewPage from "@/app/dashboard/sessions/[id]/page";
-import { useSession } from "next-auth/react";
 import { useParams } from "next/navigation";
 
 // Extend Jest matchers
 expect.extend(toHaveNoViolations);
 
+// Mock auth client
+const mockUseSession = vi.fn();
+vi.mock("@/lib/auth/client", () => ({
+  authClient: {
+    useSession: () => mockUseSession(),
+  },
+}));
+
 // Mock dependencies
-vi.mock("next-auth/react");
 vi.mock("next/navigation");
-const mockUseSession = vi.mocked(useSession);
 const mockUseParams = vi.mocked(useParams);
 
 // Mock fetch
@@ -39,8 +44,8 @@ describe("Accessibility Tests", () => {
   describe("User Management Page Accessibility", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -183,8 +188,8 @@ describe("Accessibility Tests", () => {
   describe("Basic Accessibility Compliance", () => {
     it("should have basic accessibility features", async () => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -214,8 +219,8 @@ describe("Accessibility Tests", () => {
   describe("Interactive Elements", () => {
     it("should have focusable interactive elements", async () => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -246,8 +251,8 @@ describe("Accessibility Tests", () => {
   describe("Dark Mode Accessibility", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
diff --git a/tests/unit/env.test.ts b/tests/unit/env.test.ts
index cdb6ee6..8aef2d1 100644
--- a/tests/unit/env.test.ts
+++ b/tests/unit/env.test.ts
@@ -189,9 +189,8 @@ describe("Environment Management", () => {
       process.env.SESSION_PROCESSING_CONCURRENCY = "8";
 
       vi.resetModules();
-      const { getSchedulerConfig: freshGetSchedulerConfig } = await import(
-        "../../lib/env"
-      );
+      const { getSchedulerConfig: freshGetSchedulerConfig } =
+        await import("../../lib/env");
 
       const config = freshGetSchedulerConfig();
 
@@ -210,9 +209,8 @@ describe("Environment Management", () => {
       delete process.env.IMPORT_PROCESSING_INTERVAL;
 
       vi.resetModules();
-      const { getSchedulerConfig: freshGetSchedulerConfig } = await import(
-        "../../lib/env"
-      );
+      const { getSchedulerConfig: freshGetSchedulerConfig } =
+        await import("../../lib/env");
 
       const config = freshGetSchedulerConfig();
 
diff --git a/tests/unit/keyboard-navigation.test.tsx b/tests/unit/keyboard-navigation.test.tsx
index 992752b..d7705b2 100644
--- a/tests/unit/keyboard-navigation.test.tsx
+++ b/tests/unit/keyboard-navigation.test.tsx
@@ -3,16 +3,21 @@
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { useSession } from "next-auth/react";
 import { useParams } from "next/navigation";
 import UserManagementPage from "@/app/dashboard/users/page";
 import SessionViewPage from "@/app/dashboard/sessions/[id]/page";
 import ModernDonutChart from "@/components/charts/donut-chart";
 
+// Mock auth client
+const mockUseSession = vi.fn();
+vi.mock("@/lib/auth/client", () => ({
+  authClient: {
+    useSession: () => mockUseSession(),
+  },
+}));
+
 // Mock dependencies
-vi.mock("next-auth/react");
 vi.mock("next/navigation");
-const mockUseSession = vi.mocked(useSession);
 const mockUseParams = vi.mocked(useParams);
 
 // Mock fetch
@@ -22,8 +27,8 @@ describe("Keyboard Navigation Tests", () => {
   describe("User Management Page Keyboard Navigation", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -189,8 +194,8 @@ describe("Keyboard Navigation Tests", () => {
   describe("Session Details Page Keyboard Navigation", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       mockUseParams.mockReturnValue({
@@ -346,8 +351,8 @@ describe("Keyboard Navigation Tests", () => {
   describe("Focus Management", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -427,8 +432,8 @@ describe("Keyboard Navigation Tests", () => {
   describe("Screen Reader Support", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -456,7 +461,7 @@ describe("Keyboard Navigation Tests", () => {
       // Test loading state announcement
       mockUseSession.mockReturnValue({
         data: null,
-        status: "loading",
+        isPending: true,
       });
 
       render(<UserManagementPage />);
@@ -507,8 +512,8 @@ describe("Keyboard Navigation Tests", () => {
       });
 
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
diff --git a/tests/unit/platform-dashboard.test.tsx b/tests/unit/platform-dashboard.test.tsx
index ab7ae1b..5172bca 100644
--- a/tests/unit/platform-dashboard.test.tsx
+++ b/tests/unit/platform-dashboard.test.tsx
@@ -1,9 +1,13 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
-// Mock modules before imports
-vi.mock("next-auth/react", () => ({
-  useSession: vi.fn(),
-  SessionProvider: ({ children }: { children: React.ReactNode }) => children,
+// Mock auth client
+vi.mock("../../lib/auth/client", () => ({
+  authClient: {
+    useSession: vi.fn(() => ({
+      data: { session: null, user: null },
+      isPending: false,
+    })),
+  },
 }));
 
 vi.mock("next/navigation", () => ({
@@ -22,30 +26,37 @@ describe("Platform Dashboard", () => {
 
   describe("Authentication", () => {
     it("should require platform user authentication", () => {
-      // Test that the dashboard checks for platform user authentication
-      const mockSession = {
-        user: {
-          email: "admin@notso.ai",
-          isPlatformUser: true,
-          platformRole: "SUPER_ADMIN",
-        },
-        expires: new Date().toISOString(),
+      // Test that the dashboard checks for platform user role
+      const platformUser = {
+        id: "1",
+        email: "admin@notso.ai",
+        role: "PLATFORM_SUPER_ADMIN",
+        companyId: null,
       };
 
-      expect(mockSession.user.isPlatformUser).toBe(true);
-      expect(mockSession.user.platformRole).toBeTruthy();
+      const isPlatformRole = (role: string) =>
+        ["PLATFORM_SUPER_ADMIN", "PLATFORM_ADMIN", "PLATFORM_SUPPORT"].includes(
+          role
+        );
+
+      expect(isPlatformRole(platformUser.role)).toBe(true);
+      expect(platformUser.companyId).toBeNull();
     });
 
     it("should not allow regular users", () => {
-      const mockSession = {
-        user: {
-          email: "regular@user.com",
-          isPlatformUser: false,
-        },
-        expires: new Date().toISOString(),
+      const regularUser = {
+        id: "2",
+        email: "regular@user.com",
+        role: "USER",
+        companyId: "company-123",
       };
 
-      expect(mockSession.user.isPlatformUser).toBe(false);
+      const isPlatformRole = (role: string) =>
+        ["PLATFORM_SUPER_ADMIN", "PLATFORM_ADMIN", "PLATFORM_SUPPORT"].includes(
+          role
+        );
+
+      expect(isPlatformRole(regularUser.role)).toBe(false);
     });
   });
 
@@ -93,20 +104,21 @@ describe("Platform Dashboard", () => {
   describe("Platform Roles", () => {
     it("should support all platform roles", () => {
       const roles = [
-        { role: "SUPER_ADMIN", canEdit: true },
-        { role: "ADMIN", canEdit: true },
-        { role: "SUPPORT", canEdit: false },
+        { role: "PLATFORM_SUPER_ADMIN", canEdit: true },
+        { role: "PLATFORM_ADMIN", canEdit: true },
+        { role: "PLATFORM_SUPPORT", canEdit: false },
       ];
 
       roles.forEach(({ role, canEdit }) => {
         const user = {
+          id: "1",
           email: `${role.toLowerCase()}@notso.ai`,
-          isPlatformUser: true,
-          platformRole: role,
+          role: role,
+          companyId: null,
         };
 
-        expect(user.platformRole).toBe(role);
-        if (role === "SUPER_ADMIN" || role === "ADMIN") {
+        expect(user.role).toBe(role);
+        if (role === "PLATFORM_SUPER_ADMIN" || role === "PLATFORM_ADMIN") {
           expect(canEdit).toBe(true);
         } else {
           expect(canEdit).toBe(false);
diff --git a/tests/unit/user-management.test.tsx b/tests/unit/user-management.test.tsx
index d3d4d12..0fc6975 100644
--- a/tests/unit/user-management.test.tsx
+++ b/tests/unit/user-management.test.tsx
@@ -3,12 +3,15 @@
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { useSession } from "next-auth/react";
 import UserManagementPage from "@/app/dashboard/users/page";
 
-// Mock next-auth
-vi.mock("next-auth/react");
-const mockUseSession = vi.mocked(useSession);
+// Mock auth client
+const mockUseSession = vi.fn();
+vi.mock("@/lib/auth/client", () => ({
+  authClient: {
+    useSession: () => mockUseSession(),
+  },
+}));
 
 // Mock fetch
 const mockFetch = vi.fn();
@@ -33,8 +36,13 @@ describe("UserManagementPage", () => {
   describe("Access Control", () => {
     it("should deny access for non-admin users", async () => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "USER" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "user@example.com" } },
+        isPending: false,
+      });
+      // Mock API to return user role
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ role: "USER", companyId: "123" }),
       });
 
       render(<UserManagementPage />);
@@ -47,8 +55,8 @@ describe("UserManagementPage", () => {
 
     it("should allow access for admin users", async () => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       render(<UserManagementPage />);
@@ -61,7 +69,7 @@ describe("UserManagementPage", () => {
     it("should show loading state while checking authentication", () => {
       mockUseSession.mockReturnValue({
         data: null,
-        status: "loading",
+        isPending: true,
       });
 
       render(<UserManagementPage />);
@@ -73,8 +81,8 @@ describe("UserManagementPage", () => {
   describe("User List Display", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
     });
 
@@ -128,8 +136,8 @@ describe("UserManagementPage", () => {
   describe("User Invitation Form", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
     });
 
@@ -260,8 +268,8 @@ describe("UserManagementPage", () => {
   describe("Form Validation", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
     });
 
@@ -297,8 +305,8 @@ describe("UserManagementPage", () => {
   describe("Accessibility", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
     });
 
@@ -339,8 +347,8 @@ describe("UserManagementPage", () => {
   describe("Error Handling", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
     });
 
diff --git a/tsconfig.json b/tsconfig.json
index 050c2b6..e5c5960 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,19 +6,13 @@
     "incremental": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "ES2024"
-    ],
+    "lib": ["dom", "dom.iterable", "ES2024"],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "noEmit": true,
     "noImplicitAny": false,
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "plugins": [
       {
@@ -31,10 +25,7 @@
     "strictNullChecks": true,
     "target": "ES2024"
   },
-  "exclude": [
-    "node_modules",
-    "tests"
-  ],
+  "exclude": ["node_modules", "tests"],
   "include": [
     "next-env.d.ts",
     "types/**/*.d.ts",