fix: key messages by networkId:room to prevent collision across networks

Two networks sharing a room name (e.g. "general") were clobbering each
other's message lists. Now keyed by `${networkId}:${room}` throughout
the web store, MessagePane, and Sidebar DM detection.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/components/MessagePane.tsx

@@ -16,8 +16,9 @@ export function MessagePane() {
   const { messages, historyCutoff, activeRoom, activeNetworkId, localPeer, connectedPeers, knownPeers, send } = useWaste()
   const [draft, setDraft] = useState('')
   const bottomRef = useRef<HTMLDivElement>(null)
-  const roomMessages = messages[activeRoom] ?? []
-  const cutoff = historyCutoff[activeRoom] ?? 0
+  const msgKey = activeNetworkId ? `${activeNetworkId}:${activeRoom}` : activeRoom
+  const roomMessages = messages[msgKey] ?? []
+  const cutoff = historyCutoff[msgKey] ?? 0
 
   // Find the index of the first live message (ts > cutoff).
   // The divider appears just before this index, or at the top if all are history.

web/src/components/Sidebar.tsx

@@ -42,9 +42,15 @@ export function Sidebar() {
 
   const netCustomRooms = activeNetworkId ? (customRooms[activeNetworkId] ?? []) : []
   const rooms = ['general', ...netCustomRooms]
-  Object.keys(messages).forEach(r => {
-    if (r.startsWith('dm:') && !rooms.includes(r)) rooms.push(r)
-  })
+  if (activeNetworkId) {
+    const prefix = `${activeNetworkId}:dm:`
+    Object.keys(messages).forEach(k => {
+      if (k.startsWith(prefix)) {
+        const r = k.slice(activeNetworkId.length + 1)
+        if (!rooms.includes(r)) rooms.push(r)
+      }
+    })
+  }
 
   function submitNewRoom(e: React.FormEvent) {
     e.preventDefault()