redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot

- Peers moved from right panel into sidebar below Rooms
- Messages left-aligned IRC style: time · alias · text
- Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed
- Hover title on peer row shows full ID, connection type, remote address, last seen
- Removed right PeerList panel

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

web/src/components/MessagePane.tsx

@@ -17,7 +17,6 @@ export function MessagePane() {
     if (!text || !activeNetworkId) return
 
     if (activeRoom.startsWith('dm:')) {
-      // Find peer ID from room name — stored as full ID in room key after "dm:"
       const toPeerID = activeRoom.slice(3)
       const peer = connectedPeers.find(p => p.id.startsWith(toPeerID) || p.id === toPeerID)
       if (peer) {
@@ -34,20 +33,24 @@ export function MessagePane() {
     return connectedPeers.find(p => p.id === fromId)?.alias ?? fromId.slice(0, 8)
   }
 
+  const roomLabel = activeRoom.startsWith('dm:')
+    ? `@ ${activeRoom.slice(3, 11)}…`
+    : `# ${activeRoom}`
+
   return (
     <main className="message-pane">
-      <div className="message-pane-header">
-        {activeRoom.startsWith('dm:') ? `@ ${activeRoom.slice(3, 11)}…` : `# ${activeRoom}`}
-      </div>
+      <div className="message-pane-header">{roomLabel}</div>
 
       <div className="messages">
         {roomMessages.map((msg, i) => {
           const mine = msg.from === localPeer?.id
+          const alias = aliasFor(msg.from)
+          const time = new Date(msg.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
           return (
             <div key={msg.mid ?? i} className={`message ${mine ? 'mine' : ''}`}>
-              <span className="message-alias">{aliasFor(msg.from)}</span>
+              <span className="message-ts">{time}</span>
+              <span className="message-alias">{alias}</span>
               <span className="message-text">{msg.text}</span>
-              <span className="message-ts">{new Date(msg.ts).toLocaleTimeString()}</span>
             </div>
           )
         })}
@@ -58,7 +61,7 @@ export function MessagePane() {
         <input
           value={draft}
           onChange={e => setDraft(e.target.value)}
-          placeholder={`Message ${activeRoom}`}
+          placeholder={`Message ${roomLabel}`}
           autoComplete="off"
         />
         <button type="submit" disabled={!draft.trim()}>Send</button>