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/App.css

@@ -7,8 +7,7 @@
   --accent: #7c6af7;
   --text: #e0e0e8;
   --muted: #6b6b80;
-  --sidebar-w: 200px;
-  --peerlist-w: 180px;
+  --sidebar-w: 220px;
 }
 
 html, body, #root { height: 100%; }
@@ -16,7 +15,7 @@ body { background: var(--bg); color: var(--text); font-family: system-ui, sans-s
 
 button { cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 13px; }
 button:disabled { opacity: 0.4; cursor: default; }
-input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; }
+input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; width: 100%; }
 input:focus { border-color: var(--accent); }
 
 /* ── onboarding ── */
@@ -33,52 +32,56 @@ input:focus { border-color: var(--accent); }
 .onboarding-code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; font-size: 12px; font-family: monospace; color: var(--text); width: 100%; text-align: left; }
 .onboarding-section { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
 .join-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
-.join-form input { width: 100%; }
 .join-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
 button.primary { background: var(--accent); width: 100%; padding: 8px; font-size: 14px; }
 .toggle-link { background: none; color: var(--muted); font-size: 12px; padding: 4px 0; text-align: left; }
 .toggle-link:hover { color: var(--text); }
 .backup-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
 .backup-form { display: flex; flex-direction: column; gap: 6px; }
-.backup-form textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 11px; resize: vertical; }
+.backup-form textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 11px; resize: vertical; width: 100%; }
 .export-result { display: flex; flex-direction: column; gap: 6px; }
 .export-result textarea { font-size: 10px; }
 .mono { font-family: monospace; }
 details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
 
 /* ── chat layout ── */
-.chat-layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr var(--peerlist-w); height: 100%; }
+.chat-layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100%; }
 
 /* ── sidebar ── */
-.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; overflow-y: auto; }
-.sidebar-identity { padding: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
-.sidebar-identity .alias { display: block; font-weight: 600; }
-.sidebar-identity .peer-id { display: block; color: var(--muted); font-size: 11px; font-family: monospace; }
-.sidebar-section { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
-.sidebar-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 4px 8px; }
-.sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 8px; border-radius: 4px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sidebar-item:hover { background: var(--border); }
+.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
+.sidebar-identity { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); }
+.sidebar-identity .alias { display: block; font-weight: 600; font-size: 14px; }
+.sidebar-identity .peer-id { display: block; color: var(--muted); font-size: 10px; font-family: monospace; margin-top: 2px; }
+.sidebar-section { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--border); }
+.sidebar-section:last-child { border-bottom: none; flex: 1; }
+.sidebar-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 4px 12px 2px; }
+.sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 12px; border-radius: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.sidebar-item:hover { background: rgba(255,255,255,0.04); }
 .sidebar-item.active { background: var(--accent); color: #fff; }
+.sidebar-empty { font-size: 11px; color: var(--muted); padding: 4px 12px; }
+
+/* peer rows in sidebar */
+.sidebar-peers { gap: 0; }
+.peer-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.peer-row { display: flex; align-items: center; gap: 6px; padding: 4px 12px; }
+.peer-row:hover { background: rgba(255,255,255,0.04); }
+.peer-row:hover .peer-row-actions { opacity: 1; }
+.peer-row-alias { font-size: 13px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.peer-row-id { font-size: 10px; color: var(--muted); font-family: monospace; }
+.peer-row-actions { opacity: 0; display: flex; gap: 2px; transition: opacity 0.1s; }
+.peer-action { background: none; color: var(--muted); font-size: 14px; padding: 1px 3px; line-height: 1; }
+.peer-action:hover { color: var(--accent); background: none; }
 
 /* ── message pane ── */
-.message-pane { display: flex; flex-direction: column; height: 100%; }
-.message-pane-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--muted); }
-.messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
-.message { display: flex; gap: 8px; align-items: baseline; }
+.message-pane { display: flex; flex-direction: column; height: 100%; min-width: 0; }
+.message-pane-header { padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--text); }
+.messages { flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; }
+.message { display: flex; align-items: baseline; gap: 0; padding: 2px 16px; line-height: 1.5; }
+.message:hover { background: rgba(255,255,255,0.02); }
+.message-ts { color: var(--muted); font-size: 11px; min-width: 42px; flex-shrink: 0; }
+.message-alias { font-weight: 600; font-size: 13px; min-width: 100px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px 0 8px; flex-shrink: 0; }
 .message.mine .message-alias { color: var(--accent); }
-.message-alias { font-weight: 600; min-width: 80px; color: var(--muted); font-size: 12px; }
-.message-text { flex: 1; word-break: break-word; }
-.message-ts { color: var(--muted); font-size: 11px; white-space: nowrap; }
-.compose { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
-.compose input { flex: 1; }
-
-/* ── peer list ── */
-.peer-list { background: var(--surface); border-left: 1px solid var(--border); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
-.peer-entry { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 4px; }
-.peer-entry:hover { background: var(--border); }
-.peer-entry-info .alias { display: block; font-weight: 600; font-size: 13px; }
-.peer-entry-info .peer-id { display: block; color: var(--muted); font-size: 11px; font-family: monospace; }
-.peer-entry-actions { display: flex; gap: 4px; }
-.peer-entry-actions button { font-size: 11px; padding: 2px 6px; background: var(--border); color: var(--text); }
-.peer-entry-actions button:hover { background: var(--accent); color: #fff; }
-.empty { color: var(--muted); font-size: 12px; padding: 8px; }
+.message-text { flex: 1; word-break: break-word; font-size: 14px; color: var(--text); }
+.compose { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
+.compose input { flex: 1; width: auto; }
+.compose button { flex-shrink: 0; }

web/src/adapter/browser.ts

@@ -257,8 +257,10 @@ class PeerConn {
     this._esk = kp.privateKey
     this._epk = kp.publicKey
     this.pc.ondatachannel = (ev) => this._wire(ev.channel)
-    this.pc.onconnectionstatechange = () =>
+    this.pc.onconnectionstatechange = () => {
       this.on('status', { peer: this.peerId, state: this.pc.connectionState })
+      if (this.pc.connectionState === 'connected') this.reportStats()
+    }
   }
 
   private _seal(obj: object, preferEph: boolean): [string, boolean] {
@@ -386,6 +388,28 @@ class PeerConn {
     }
   }
 
+  async reportStats() {
+    try {
+      const stats = await this.pc.getStats()
+      let candidateType: string = 'unknown'
+      let remoteAddress = ''
+      stats.forEach((s) => {
+        if (s.type === 'candidate-pair' && (s as RTCIceCandidatePairStats).state === 'succeeded') {
+          const pair = s as RTCIceCandidatePairStats & { nominated?: boolean }
+          if (pair.nominated) {
+            stats.forEach((c) => {
+              if (c.type === 'remote-candidate' && c.id === (pair as unknown as Record<string,string>)['remoteCandidateId']) {
+                candidateType = (c as unknown as Record<string,string>)['candidateType'] || 'unknown'
+                remoteAddress = (c as unknown as Record<string,string>)['address'] || ''
+              }
+            })
+          }
+        }
+      })
+      this.on('ice_stats', { peer: this.peerId, candidateType, remoteAddress })
+    } catch { /* ignore */ }
+  }
+
   sendChat(room: string, text: string) {
     this._dc({ type: 'chat', room, text, ts: Date.now() })
   }
@@ -608,6 +632,19 @@ export class BrowserAdapter {
           ts,
         },
       })
+    } else if (event === 'status') {
+      this.emit({
+        type: 'peer_status',
+        peer_id: data['peer'] as unknown as import('../types').PeerID,
+        conn_state: data['state'] as import('../types').PeerConnState,
+      })
+    } else if (event === 'ice_stats') {
+      this.emit({
+        type: 'peer_status',
+        peer_id: data['peer'] as unknown as import('../types').PeerID,
+        candidate_type: data['candidateType'] as import('../types').CandidateType,
+        remote_address: data['remoteAddress'] as string,
+      })
     }
   }
 

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>
   )
 }

web/src/pages/Chat.tsx

@@ -1,13 +1,11 @@
 import { Sidebar } from '../components/Sidebar'
 import { MessagePane } from '../components/MessagePane'
-import { PeerList } from '../components/PeerList'
 
 export function Chat() {
   return (
     <div className="chat-layout">
       <Sidebar />
       <MessagePane />
-      <PeerList />
     </div>
   )
 }

web/src/store/index.ts

@@ -1,5 +1,12 @@
 import { create } from 'zustand'
-import type { PeerInfo, NetworkInfo, ChatMessage, FileEntry, IpcMessage } from '../types'
+import type { PeerInfo, NetworkInfo, ChatMessage, FileEntry, IpcMessage, PeerConnState, CandidateType } from '../types'
+
+export interface PeerStatus {
+  connState?: PeerConnState
+  candidateType?: CandidateType
+  remoteAddress?: string
+  lastSeen?: number
+}
 import { DaemonAdapter } from '../adapter/daemon'
 import { BrowserAdapter } from '../adapter/browser'
 
@@ -30,6 +37,9 @@ interface WasteState {
   // file listings — keyed by peer id
   fileLists: Record<string, FileEntry[]>
 
+  // per-peer connection status (browser mode) and last-seen timestamps
+  peerStatus: Record<string, PeerStatus>
+
   // identity backup export result (cleared when consumed)
   exportedBackup: string | null
 
@@ -57,6 +67,7 @@ export const useWaste = create<WasteState>((set, get) => ({
   activeRoom: 'general',
   fileLists: {},
   exportedBackup: null,
+  peerStatus: {},
 
   connect(url: string) {
     const adapter = new DaemonAdapter(url)
@@ -161,14 +172,37 @@ export const useWaste = create<WasteState>((set, get) => ({
         if (msg.message) {
           const m = msg.message
           const room = m.room
+          const fromId = String(m.from)
           set(s => {
             const existing = s.messages[room] ?? []
             if (m.mid && existing.some(e => e.mid === m.mid)) return s
-            return { messages: { ...s.messages, [room]: [...existing, m] } }
+            const prev = s.peerStatus[fromId] ?? {}
+            return {
+              messages: { ...s.messages, [room]: [...existing, m] },
+              peerStatus: { ...s.peerStatus, [fromId]: { ...prev, lastSeen: m.ts } },
+            }
           })
         }
         break
       }
+      case 'peer_status': {
+        const pid = String(msg.peer_id)
+        set(s => {
+          const prev = s.peerStatus[pid] ?? {}
+          return {
+            peerStatus: {
+              ...s.peerStatus,
+              [pid]: {
+                ...prev,
+                ...(msg.conn_state ? { connState: msg.conn_state } : {}),
+                ...(msg.candidate_type ? { candidateType: msg.candidate_type } : {}),
+                ...(msg.remote_address !== undefined ? { remoteAddress: msg.remote_address } : {}),
+              },
+            },
+          }
+        })
+        break
+      }
       case 'identity_exported': {
         if (msg.backup) set({ exportedBackup: msg.backup })
         break

web/src/types.ts

@@ -40,6 +40,9 @@ export interface FileOffer {
 
 // ── IPC message types ─────────────────────────────────────────────────────────
 
+export type CandidateType = 'host' | 'srflx' | 'relay' | 'unknown'
+export type PeerConnState = 'new' | 'connecting' | 'connected' | 'disconnected' | 'failed' | 'closed'
+
 export type IpcMsgType =
   // commands
   | 'send_message'
@@ -67,6 +70,7 @@ export type IpcMsgType =
   | 'invite_generated'
   | 'identity_exported'
   | 'identity_imported'
+  | 'peer_status'
   | 'error'
 
 export interface IpcMessage {
@@ -104,4 +108,8 @@ export interface IpcMessage {
   error_message?: string
   invite?: string
   files?: FileEntry[]
+  // peer_status
+  conn_state?: PeerConnState
+  candidate_type?: CandidateType
+  remote_address?: string
 }