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>

web/src/components/Sidebar.tsx

@@ -1,14 +1,36 @@
 import { useWaste } from '../store'
+import type { PeerStatus } from '../store'
 
 function makeYawCard(id: string, alias: string): string {
   const nick = encodeURIComponent(alias.trim().slice(0, 40))
   return nick ? `yaw:${id}?n=${nick}` : `yaw:${id}`
 }
 
-export function Sidebar() {
-  const { localPeer, masterId, masterAlias, networks, activeNetworkId, activeRoom, setActiveRoom, setActiveNetwork, messages } = useWaste()
+function connDot(status: PeerStatus | undefined): { color: string; label: string } {
+  const ct = status?.candidateType
+  const cs = status?.connState
+  if (cs === 'failed' || cs === 'closed') return { color: '#e06060', label: 'failed' }
+  if (cs === 'connecting' || cs === 'new') return { color: '#c8a020', label: 'connecting…' }
+  if (ct === 'relay') return { color: '#c8a020', label: 'relayed (TURN)' }
+  if (ct === 'srflx') return { color: '#60c060', label: 'NAT punched' }
+  if (ct === 'host') return { color: '#60c060', label: 'direct (LAN)' }
+  if (cs === 'connected') return { color: '#60c060', label: 'connected' }
+  return { color: 'var(--muted)', label: 'unknown' }
+}
+
+function formatTs(ts: number | undefined): string {
+  if (!ts) return '—'
+  return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+export function Sidebar() {
+  const {
+    localPeer, masterId, masterAlias,
+    networks, activeNetworkId, activeRoom,
+    connectedPeers, peerStatus,
+    setActiveRoom, setActiveNetwork, messages, send,
+  } = useWaste()
 
-  // Rooms = general + any DM threads that have messages
   const rooms = ['general']
   Object.keys(messages).forEach(r => {
     if (r.startsWith('dm:') && !rooms.includes(r)) rooms.push(r)
@@ -18,6 +40,14 @@ export function Sidebar() {
   const displayId = localPeer?.id ?? masterId ?? ''
   const card = displayId ? makeYawCard(displayId, displayAlias) : null
 
+  function openDM(peerId: string) {
+    setActiveRoom(`dm:${peerId}`)
+  }
+
+  function requestFiles(peerId: string) {
+    send({ type: 'get_file_list', network_id: activeNetworkId ?? undefined, peer_id: peerId })
+  }
+
   return (
     <nav className="sidebar">
       <div
@@ -28,7 +58,6 @@ export function Sidebar() {
       >
         <span className="alias">{displayAlias || '…'}</span>
         <span className="peer-id">{displayId.slice(0, 16).replace(/(.{4})/g, '$1 ').trim()}</span>
-        {card && <span className="peer-id" style={{ fontSize: '9px', opacity: 0.5 }}>click to copy card</span>}
       </div>
 
       <div className="sidebar-section">
@@ -56,6 +85,35 @@ export function Sidebar() {
           </button>
         ))}
       </div>
+
+      <div className="sidebar-section sidebar-peers">
+        <span className="sidebar-label">Peers {connectedPeers.length > 0 && `· ${connectedPeers.length}`}</span>
+        {connectedPeers.length === 0 && (
+          <span className="sidebar-empty">no peers yet</span>
+        )}
+        {connectedPeers.map(p => {
+          const st = peerStatus[p.id]
+          const dot = connDot(st)
+          const tooltip = [
+            p.alias,
+            p.id,
+            `connection: ${dot.label}`,
+            st?.remoteAddress ? `remote: ${st.remoteAddress}` : null,
+            st?.lastSeen ? `last seen: ${formatTs(st.lastSeen)}` : null,
+          ].filter(Boolean).join('\n')
+          return (
+            <div key={p.id} className="peer-row" title={tooltip}>
+              <span className="peer-dot" style={{ background: dot.color }} />
+              <span className="peer-row-alias">{p.alias}</span>
+              <span className="peer-row-id">{p.id.slice(0, 8)}</span>
+              <span className="peer-row-actions">
+                <button className="peer-action" onClick={() => openDM(p.id)} title="DM">↩</button>
+                <button className="peer-action" onClick={() => requestFiles(p.id)} title="Files">⊞</button>
+              </span>
+            </div>
+          )
+        })}
+      </div>
     </nav>
   )
 }