fix(web): persistent WS connection, auto-refetch on ready, and direct selector binding with scroll fix

web/src/components/ChatArea.tsx

@@ -288,9 +288,7 @@ export function ChatArea() {
   const activeChannelId = rawActiveChannelId ? rawActiveChannelId.toLowerCase() : null;
   const channelsByServer = useChannelStore((s) => s.channelsByServer);
   const activeServerId = useServerStore((s) => s.activeServerId);
-  const messages = useMessageStore(
+  const messages = useMessageStore((s) => (activeChannelId ? s.messagesByChannel[activeChannelId] || [] : []));
-    useCallback((s) => (activeChannelId ? s.messagesByChannel[activeChannelId] || [] : []), [activeChannelId])
-  );
   const isLoading = useMessageStore((s) => s.isLoading);
   const isLoadingOlder = useMessageStore((s) => s.isLoadingOlder);
   const hasMore = useMessageStore((s) => activeChannelId ? s.hasMoreByChannel[activeChannelId] !== false : true);
@@ -461,6 +459,9 @@ export function ChatArea() {
   }, [activeChannelId, isLoadingOlder, hasMore, fetchOlderMessages]);
 
   useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+    }
     bottomRef.current?.scrollIntoView({ behavior: "auto" });
   }, [messages]);
 

web/src/components/DMChat.tsx

@@ -176,9 +176,14 @@ export function DMChat() {
   const id = rawId ? rawId.toLowerCase() : undefined;
   const conversation = conversations.find((c) => c.id.toLowerCase() === id);
   const hasMore = useConversationStore((s) => id ? s.hasMoreByConversation[id] !== false : true);
-  const messages = useConversationStore(
+  const messages = useConversationStore((s) => (id ? s.messagesByConversation[id] || [] : []));
-    useCallback((s) => (id ? s.messagesByConversation[id] || [] : []), [id])
+
-  );
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+    }
+    bottomRef.current?.scrollIntoView({ behavior: "auto" });
+  }, [messages]);
 
   const handleAddReaction = useCallback(async (messageId: string, emoji: string) => {
     if (!id) return;
@@ -216,9 +221,7 @@ export function DMChat() {
     }
   }, [id, setActive, fetchMessages]);
 
-  useEffect(() => {
+
-    bottomRef.current?.scrollIntoView({ behavior: "auto" });
-  }, [messages]);
 
   useEffect(() => {
     if (!id || messages.length === 0 || isLoading) return;

web/src/components/Layout.tsx

@@ -35,8 +35,6 @@ export function Layout() {
   const user = useAuthStore((state) => state.user);
   const logout = useAuthStore((state) => state.logout);
   const updateProfile = useAuthStore((state) => state.updateProfile);
-  const wsConnect = useWebSocketStore((s) => s.connect);
-  const wsDisconnect = useWebSocketStore((s) => s.disconnect);
   const navigate = useNavigate();
   const location = useLocation();
   const [showStatusMenu, setShowStatusMenu] = useState(false);
@@ -63,9 +61,8 @@ export function Layout() {
   }, [currentVoiceRoom]);
 
   useEffect(() => {
-    wsConnect();
+    useWebSocketStore.getState().connect();
-    return () => { wsDisconnect(); };
+  }, []);
-  }, [wsConnect, wsDisconnect]);
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated && location.pathname !== '/login') {

web/src/stores/ws.ts

@@ -110,6 +110,10 @@ export const useWebSocketStore = create<WebSocketState>((set, get) => ({
       if (data.type === 'ready') {
         set({ connected: true });
         reconnectDelay = 1000;
+        const activeChan = useChannelStore.getState().activeChannelId;
+        if (activeChan) useMessageStore.getState().fetchMessages(activeChan);
+        const activeConv = useConversationStore.getState().activeConversationId;
+        if (activeConv) useConversationStore.getState().fetchMessages(activeConv);
         return;
       }