Fix Supabase real-time subscription for chat messages

- Make Supabase browser client a singleton to maintain WebSocket connection
- Fix useEffect dependency array to prevent subscription re-creation
- Add subscription status logging for debugging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/chat/project-chat.tsx

@@ -43,12 +43,15 @@ export function ProjectChat({ projectId, initialMessages }: ProjectChatProps) {
           })
         }
       )
-      .subscribe()
+      .subscribe((status) => {
+        console.log('Realtime subscription status:', status)
+      })
 
     return () => {
       supabase.removeChannel(channel)
     }
-  }, [projectId, supabase])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId])
 
   // Scroll to bottom when messages change
   useEffect(() => {

src/lib/supabase/client.ts

@@ -1,9 +1,17 @@
 import { createBrowserClient } from '@supabase/ssr'
 import type { Database } from '@/types/database'
 
+let browserClient: ReturnType<typeof createBrowserClient<Database>> | null = null
+
 export function createClient() {
-  return createBrowserClient<Database>(
+  if (browserClient) {
+    return browserClient
+  }
+
+  browserClient = createBrowserClient<Database>(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
     process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
   )
+
+  return browserClient
 }