refactor: align client state and ui with backend contract

app/(order)/chat/[id]/page.tsx

@@ -27,15 +27,28 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
     messages,
     error,
     createDM,
+    joinSession,
     leaveSession,
     sendTextMessage,
     sendImageMessage,
   } = useChatSocket()
 
+  const cacheKey = user?.id ? `chat:dm:${user.id}:${targetUserId}` : null
+
   useEffect(() => {
-    if (!connected) return
-    createDM(targetUserId)
-  }, [connected, createDM, targetUserId])
+    if (!connected || !cacheKey) return
+    const cached = window.localStorage.getItem(cacheKey)
+    if (cached) {
+      joinSession(cached)
+    } else {
+      createDM(targetUserId)
+    }
+  }, [connected, cacheKey, createDM, joinSession, targetUserId])
+
+  useEffect(() => {
+    if (!sessionId || !cacheKey) return
+    window.localStorage.setItem(cacheKey, sessionId)
+  }, [sessionId, cacheKey])
 
   useEffect(
     () => () => {