bitchat-node 0.1.1 → 0.1.2

package/src/transport/ble.ts

@@ -15,6 +15,7 @@ import {
   SERVICE_UUID_TESTNET,
 } from '../protocol/constants.js';
 import type { PeerID } from '../protocol/types.js';
+import { debugLog } from '../debug.js';
 
 // Types for noble
 type NobleModule = typeof import('@abandonware/noble');
@@ -91,22 +92,17 @@ export class BLELink implements Link {
       throw new Error('Message too large for MTU, fragmentation not yet implemented');
     }
 
-    console.log('[BLE] Sending', data.length, 'bytes to', this.id);
-    console.log('[BLE] First 50 bytes:', Buffer.from(data.slice(0, 50)).toString('hex'));
-    console.log('[BLE] Last 20 bytes:', Buffer.from(data.slice(-20)).toString('hex'));
+    debugLog.bleTx(data, `→ ${this.id.slice(0, 8)} (${data.length}b)`);
 
     const buf = Buffer.from(data);
-    console.log('[BLE] Buffer check - is Buffer:', Buffer.isBuffer(buf), 'length:', buf.length);
 
-    // Try write WITHOUT response (withoutResponse = true)
-    // This uses a different BLE write type that might work better
+    // Use regular write WITH response (withoutResponse = false) to match iOS behavior
     return new Promise((resolve, reject) => {
-      this.characteristic.write(buf, true, (error) => {
+      this.characteristic.write(buf, false, (error) => {
         if (error) {
-          console.error('[BLE] Send error:', error);
+          debugLog.error('BLE TX', error);
           reject(error);
         } else {
-          console.log('[BLE] Send success (without response)');
           resolve();
         }
       });
@@ -118,6 +114,39 @@ export class BLELink implements Link {
   }
 }
 
+/**
+ * Peripheral Link - represents a central (e.g., iOS) connected to us
+ */
+export class PeripheralLink implements Link {
+  readonly id: string;
+  private _peerID?: PeerID;
+  private notifyCallback: (data: Buffer) => void;
+
+  constructor(centralId: string, notifyCallback: (data: Buffer) => void) {
+    this.id = centralId;
+    this.notifyCallback = notifyCallback;
+  }
+
+  get peerID(): PeerID | undefined {
+    return this._peerID;
+  }
+
+  setPeerID(peerID: PeerID): void {
+    this._peerID = peerID;
+    console.log(`[BLE] PeripheralLink ${this.id.slice(0,8)} now associated with peer ${peerID.toHex().slice(0,8)}`);
+  }
+
+  async send(data: Uint8Array): Promise<void> {
+    debugLog.bleTx(data, `→ notify (${data.length}b)`);
+    const buf = Buffer.from(data);
+    this.notifyCallback(buf);
+  }
+
+  get isConnected(): boolean {
+    return true; // Peripheral link is always "connected" while active
+  }
+}
+
 /**
  * BLE Transport - handles Bluetooth mesh networking
  */
@@ -134,6 +163,8 @@ export class BLETransport extends EventEmitter {
   // Subscribed centrals (peripheral mode)
   private subscribedCentrals = new Set<string>();
   private notifyCallback?: (data: Buffer) => void;
+  private peripheralLink?: PeripheralLink;
+  private lastCentralAddress = 'unknown-central';
 
   constructor(config: Partial<BLETransportConfig> = {}) {
     super();
@@ -354,9 +385,7 @@ export class BLETransport extends EventEmitter {
       await peripheral.connectAsync();
       console.log('[BLE] Connected to', peripheral.uuid);
 
-      // Clear tracking state on success
-      this.connectingPeripherals.delete(peripheral.uuid);
-      this.failedConnections.delete(peripheral.uuid);
+      // NOTE: Keep in connectingPeripherals until fully set up to prevent race conditions
 
       // Discover services and characteristics
       console.log('[BLE] Discovering services for', peripheral.uuid);
@@ -393,6 +422,7 @@ export class BLETransport extends EventEmitter {
       // Subscribe to notifications
       await characteristic.subscribeAsync();
       characteristic.on('data', (data: Buffer) => {
+        debugLog.bleRx(new Uint8Array(data), `← ${peripheral.uuid.slice(0, 8)} (${data.length}b)`);
         this.emit('data', new Uint8Array(data), link);
       });
 
@@ -401,7 +431,12 @@ export class BLETransport extends EventEmitter {
         this.onDisconnect(peripheral.uuid);
       });
 
+      // Now safe to clear connecting state - link is fully established
+      this.connectingPeripherals.delete(peripheral.uuid);
+      this.failedConnections.delete(peripheral.uuid);
+
       this.emit('link:connected', link);
+      console.log('[BLE] Link established to', peripheral.uuid);
     } catch (error) {
       // Clear connecting state
       this.connectingPeripherals.delete(peripheral.uuid);
@@ -468,17 +503,28 @@ export class BLETransport extends EventEmitter {
           callback: (result: number) => void
         ) => {
           // Handle incoming data from central
-          this.emit('data', new Uint8Array(data), null as any);
+          debugLog.bleRx(new Uint8Array(data), `← central (${data.length}b)`);
+          // Pass the peripheral link if available
+          this.emit('data', new Uint8Array(data), this.peripheralLink ?? (null as any));
           callback(CharacteristicClass.RESULT_SUCCESS);
         },
         onSubscribe: (_maxValueSize: number, updateValueCallback: (data: Buffer) => void) => {
-          // Central subscribed to notifications - store callback
+          // Central subscribed to notifications - store callback and create link
           this.notifyCallback = updateValueCallback;
+          // Create a peripheral link for the connected central
+          this.peripheralLink = new PeripheralLink(this.lastCentralAddress, updateValueCallback);
           console.log('Central subscribed to notifications');
+          console.log('[BLE] Created peripheral link for central:', this.lastCentralAddress);
+          // Emit link:connected so router can use this link
+          this.emit('link:connected', this.peripheralLink);
         },
         onUnsubscribe: () => {
           // Central unsubscribed
+          if (this.peripheralLink) {
+            this.emit('link:disconnected', this.peripheralLink.id);
+          }
           this.notifyCallback = undefined;
+          this.peripheralLink = undefined;
           console.log('Central unsubscribed');
         },
       });
@@ -496,10 +542,18 @@ export class BLETransport extends EventEmitter {
       // Listen for central connection events
       const bleno = this.bleno as any;
       bleno.on('accept', (clientAddress: string) => {
-        console.log('[BLE] Central accepted connection from:', clientAddress);
+        console.log('[BLE] ⬅ Central connected:', clientAddress);
+        this.lastCentralAddress = clientAddress;
+        this.subscribedCentrals.add(clientAddress);
       });
       bleno.on('disconnect', (clientAddress: string) => {
-        console.log('[BLE] Central disconnected:', clientAddress);
+        console.log('[BLE] ⬅ Central disconnected:', clientAddress);
+        this.subscribedCentrals.delete(clientAddress);
+        // Clean up peripheral link if this central disconnected
+        if (this.peripheralLink && this.peripheralLink.id === clientAddress) {
+          this.emit('link:disconnected', this.peripheralLink.id);
+          this.peripheralLink = undefined;
+        }
       });
       bleno.on('servicesSet', (error?: Error) => {
         console.log('[BLE] Services set, error:', error);

package/src/ui/html.ts

@@ -0,0 +1,506 @@
+/**
+ * Enhanced Bitchat Web UI with Debug Panel
+ */
+
+export const HTML = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bitchat Node</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { 
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0f0f1a; color: #eee; height: 100vh; display: flex; flex-direction: column;
+    }
+    
+    /* Header */
+    header { 
+      background: #1a1a2e; padding: 12px 20px; border-bottom: 1px solid #2a2a4a;
+      display: flex; justify-content: space-between; align-items: center;
+    }
+    header h1 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+    header h1 .logo { font-size: 20px; }
+    .header-info { display: flex; align-items: center; gap: 16px; }
+    .status { 
+      font-size: 11px; padding: 4px 10px; border-radius: 12px;
+      background: #2a2a4a; color: #888;
+    }
+    .status.connected { background: #064e3b; color: #34d399; }
+    .peer-count { font-size: 11px; color: #60a5fa; }
+    .my-info { font-size: 11px; color: #888; font-family: monospace; }
+    
+    /* Tab Navigation */
+    .tabs {
+      background: #1a1a2e; display: flex; border-bottom: 1px solid #2a2a4a;
+    }
+    .tab {
+      padding: 10px 20px; cursor: pointer; font-size: 13px; color: #888;
+      border-bottom: 2px solid transparent; transition: all 0.2s;
+    }
+    .tab:hover { color: #ccc; }
+    .tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }
+    .tab .badge {
+      background: #dc2626; color: white; font-size: 10px; padding: 2px 6px;
+      border-radius: 10px; margin-left: 6px;
+    }
+    
+    /* Main Layout */
+    main { flex: 1; display: flex; overflow: hidden; }
+    .panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
+    .panel.active { display: flex; }
+    
+    /* Chat Panel */
+    .chat-container { display: flex; flex: 1; overflow: hidden; }
+    .messages-area { flex: 1; display: flex; flex-direction: column; }
+    .messages { 
+      flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px;
+    }
+    .message { 
+      background: #1a1a2e; padding: 10px 14px; border-radius: 12px; max-width: 75%;
+      animation: fadeIn 0.15s ease;
+    }
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }
+    .message.mine { background: #1e3a5f; align-self: flex-end; }
+    .message.private { border-left: 3px solid #ec4899; }
+    .message .meta { font-size: 10px; color: #666; margin-bottom: 4px; }
+    .message .meta .nickname { color: #60a5fa; font-weight: 500; }
+    .message .meta .private-tag { color: #ec4899; margin-left: 6px; }
+    .message .content { line-height: 1.4; word-wrap: break-word; font-size: 14px; }
+    .system { text-align: center; font-size: 11px; color: #555; padding: 6px; }
+    
+    /* Input Area */
+    .input-area { background: #1a1a2e; padding: 12px 16px; border-top: 1px solid #2a2a4a; }
+    .dm-indicator { 
+      font-size: 11px; color: #ec4899; margin-bottom: 8px; 
+      display: flex; align-items: center; gap: 8px;
+    }
+    .dm-indicator .clear { cursor: pointer; color: #888; }
+    .dm-indicator .clear:hover { color: #fff; }
+    .input-row { display: flex; gap: 8px; }
+    input[type="text"] { 
+      flex: 1; background: #0f0f1a; border: 1px solid #2a2a4a; border-radius: 8px;
+      padding: 10px 14px; color: #eee; font-size: 14px; outline: none;
+    }
+    input[type="text"]:focus { border-color: #3b82f6; }
+    input[type="text"]::placeholder { color: #444; }
+    button { 
+      background: #3b82f6; color: white; border: none; border-radius: 8px;
+      padding: 10px 20px; font-size: 13px; font-weight: 500; cursor: pointer;
+    }
+    button:hover { background: #2563eb; }
+    button:disabled { background: #374151; cursor: not-allowed; }
+    button.secondary { background: #2a2a4a; }
+    button.secondary:hover { background: #3a3a5a; }
+    
+    /* Peers Sidebar */
+    .peers-panel {
+      width: 180px; background: #1a1a2e; border-left: 1px solid #2a2a4a;
+      padding: 12px; overflow-y: auto;
+    }
+    .peers-panel h3 { 
+      font-size: 10px; color: #666; margin-bottom: 10px; 
+      text-transform: uppercase; letter-spacing: 1px;
+    }
+    .peer { 
+      padding: 8px 10px; background: #0f0f1a; border-radius: 6px; margin-bottom: 6px;
+      font-size: 12px; cursor: pointer; transition: all 0.15s;
+    }
+    .peer:hover { background: #1e3a5f; }
+    .peer.selected { background: #3b82f6; }
+    .peer .peer-nick { font-weight: 500; }
+    .peer .peer-id { font-size: 9px; color: #555; margin-top: 2px; font-family: monospace; }
+    
+    /* Debug Panel */
+    .debug-panel { padding: 0; display: flex; flex-direction: column; }
+    .debug-toolbar {
+      background: #1a1a2e; padding: 10px 16px; border-bottom: 1px solid #2a2a4a;
+      display: flex; gap: 8px; align-items: center;
+    }
+    .debug-toolbar label { font-size: 11px; color: #888; display: flex; align-items: center; gap: 4px; }
+    .debug-toolbar input[type="checkbox"] { accent-color: #3b82f6; }
+    .debug-toolbar select {
+      background: #0f0f1a; border: 1px solid #2a2a4a; border-radius: 4px;
+      padding: 4px 8px; color: #eee; font-size: 11px;
+    }
+    .debug-log {
+      flex: 1; overflow-y: auto; padding: 8px; font-family: 'SF Mono', Monaco, monospace;
+      font-size: 11px; line-height: 1.6; background: #0a0a12;
+    }
+    .debug-entry { padding: 4px 8px; border-radius: 4px; margin-bottom: 2px; }
+    .debug-entry.ble-rx { background: #1e293b; border-left: 3px solid #3b82f6; }
+    .debug-entry.ble-tx { background: #1e2d1e; border-left: 3px solid #22c55e; }
+    .debug-entry.session { background: #2d1e2d; border-left: 3px solid #a855f7; }
+    .debug-entry.error { background: #2d1e1e; border-left: 3px solid #ef4444; }
+    .debug-entry .time { color: #555; }
+    .debug-entry .tag { 
+      font-weight: 600; padding: 1px 4px; border-radius: 3px; margin: 0 4px;
+    }
+    .debug-entry.ble-rx .tag { color: #60a5fa; }
+    .debug-entry.ble-tx .tag { color: #4ade80; }
+    .debug-entry.session .tag { color: #c084fc; }
+    .debug-entry.error .tag { color: #f87171; }
+    .debug-entry .hex { color: #fbbf24; word-break: break-all; }
+    .debug-entry .decoded { color: #94a3b8; margin-top: 2px; font-size: 10px; }
+    
+    /* Sessions Panel */
+    .sessions-panel { padding: 16px; }
+    .session-card {
+      background: #1a1a2e; border-radius: 8px; padding: 12px 16px; margin-bottom: 12px;
+    }
+    .session-card h4 { font-size: 13px; color: #60a5fa; margin-bottom: 8px; font-family: monospace; }
+    .session-card .status-row { 
+      display: flex; justify-content: space-between; font-size: 11px; 
+      color: #888; margin-bottom: 4px;
+    }
+    .session-card .status-value { color: #eee; }
+    .session-card .status-value.success { color: #4ade80; }
+    .session-card .status-value.pending { color: #fbbf24; }
+    .session-card .status-value.error { color: #f87171; }
+  </style>
+</head>
+<body>
+  <header>
+    <div>
+      <h1><span class="logo">⚡</span> Bitchat Node</h1>
+    </div>
+    <div class="header-info">
+      <span class="peer-count" id="peer-count">0 peers</span>
+      <span class="status" id="status">Connecting...</span>
+      <span class="my-info" id="my-info"></span>
+    </div>
+  </header>
+  
+  <div class="tabs">
+    <div class="tab active" data-panel="chat">💬 Chat</div>
+    <div class="tab" data-panel="debug">🔍 Debug <span class="badge" id="debug-count" style="display:none">0</span></div>
+    <div class="tab" data-panel="sessions">🔐 Sessions</div>
+  </div>
+  
+  <main>
+    <!-- Chat Panel -->
+    <div class="panel active" id="panel-chat">
+      <div class="chat-container">
+        <div class="messages-area">
+          <div class="messages" id="messages"></div>
+          <div class="input-area">
+            <div class="dm-indicator" id="dm-indicator" style="display:none">
+              Sending to: <strong id="dm-target"></strong>
+              <span class="clear" onclick="clearDM()">✕ clear</span>
+            </div>
+            <div class="input-row">
+              <input type="text" id="input" placeholder="Type a message..." autocomplete="off">
+              <button id="send">Send</button>
+            </div>
+          </div>
+        </div>
+        <div class="peers-panel">
+          <h3>Peers</h3>
+          <div id="peers-list"></div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Debug Panel -->
+    <div class="panel" id="panel-debug">
+      <div class="debug-panel">
+        <div class="debug-toolbar">
+          <label><input type="checkbox" id="filter-ble" checked> BLE</label>
+          <label><input type="checkbox" id="filter-session" checked> Session</label>
+          <label><input type="checkbox" id="filter-error" checked> Errors</label>
+          <select id="filter-direction">
+            <option value="all">All directions</option>
+            <option value="rx">RX only</option>
+            <option value="tx">TX only</option>
+          </select>
+          <button class="secondary" onclick="clearDebug()">Clear</button>
+          <label style="margin-left:auto"><input type="checkbox" id="auto-scroll" checked> Auto-scroll</label>
+        </div>
+        <div class="debug-log" id="debug-log"></div>
+      </div>
+    </div>
+    
+    <!-- Sessions Panel -->
+    <div class="panel" id="panel-sessions">
+      <div class="sessions-panel" id="sessions-list">
+        <p style="color:#666;font-size:12px">No active sessions</p>
+      </div>
+    </div>
+  </main>
+  
+  <script>
+    const messagesEl = document.getElementById('messages');
+    const inputEl = document.getElementById('input');
+    const sendBtn = document.getElementById('send');
+    const statusEl = document.getElementById('status');
+    const peerCountEl = document.getElementById('peer-count');
+    const peersListEl = document.getElementById('peers-list');
+    const myInfoEl = document.getElementById('my-info');
+    const debugLogEl = document.getElementById('debug-log');
+    const debugCountEl = document.getElementById('debug-count');
+    const dmIndicatorEl = document.getElementById('dm-indicator');
+    const dmTargetEl = document.getElementById('dm-target');
+    const sessionsListEl = document.getElementById('sessions-list');
+    
+    let ws;
+    let myPeerID = '';
+    let selectedPeer = null;
+    let debugCount = 0;
+    const peers = new Map();
+    const sessions = new Map();
+    
+    // Tab switching
+    document.querySelectorAll('.tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+        document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
+        tab.classList.add('active');
+        document.getElementById('panel-' + tab.dataset.panel).classList.add('active');
+        if (tab.dataset.panel === 'debug') {
+          debugCount = 0;
+          debugCountEl.style.display = 'none';
+        }
+      });
+    });
+    
+    function connect() {
+      ws = new WebSocket('ws://' + location.host + '/ws');
+      
+      ws.onopen = () => {
+        statusEl.textContent = 'Connected';
+        statusEl.className = 'status connected';
+      };
+      
+      ws.onclose = () => {
+        statusEl.textContent = 'Disconnected';
+        statusEl.className = 'status';
+        setTimeout(connect, 2000);
+      };
+      
+      ws.onmessage = (e) => {
+        const msg = JSON.parse(e.data);
+        handleMessage(msg);
+      };
+    }
+    
+    function handleMessage(msg) {
+      switch (msg.type) {
+        case 'init':
+          myPeerID = msg.peerID;
+          myInfoEl.textContent = msg.nickname + ' · ' + msg.peerID.slice(0, 8) + '...';
+          break;
+          
+        case 'message':
+          addMessage(msg.message);
+          break;
+          
+        case 'peer:connected':
+          peers.set(msg.peer.peerID, msg.peer);
+          updatePeersList();
+          addSystem(msg.peer.nickname + ' joined');
+          break;
+          
+        case 'peer:disconnected':
+          const peer = peers.get(msg.peerID);
+          peers.delete(msg.peerID);
+          updatePeersList();
+          if (peer) addSystem(peer.nickname + ' left');
+          break;
+          
+        case 'peers':
+          peers.clear();
+          msg.peers.forEach(p => peers.set(p.peerID, p));
+          updatePeersList();
+          break;
+          
+        case 'debug':
+          addDebugEntry(msg);
+          break;
+          
+        case 'session':
+          updateSession(msg);
+          break;
+          
+        case 'error':
+          addSystem('Error: ' + msg.error);
+          addDebugEntry({ category: 'error', text: msg.error, time: Date.now() });
+          break;
+      }
+    }
+    
+    function addMessage(msg) {
+      const div = document.createElement('div');
+      div.className = 'message' + (msg.sender === myPeerID ? ' mine' : '') + (msg.isPrivate ? ' private' : '');
+      div.innerHTML = 
+        '<div class="meta">' +
+          '<span class="nickname">' + escapeHtml(msg.senderNickname || 'unknown') + '</span> · ' +
+          new Date(msg.timestamp).toLocaleTimeString() +
+          (msg.isPrivate ? '<span class="private-tag">🔒 private</span>' : '') +
+        '</div>' +
+        '<div class="content">' + escapeHtml(msg.content || msg.text) + '</div>';
+      messagesEl.appendChild(div);
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+    
+    function addSystem(text) {
+      const div = document.createElement('div');
+      div.className = 'system';
+      div.textContent = '— ' + text + ' —';
+      messagesEl.appendChild(div);
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+    
+    function addDebugEntry(entry) {
+      const categoryClass = entry.category || 'ble-rx';
+      const filterCheckbox = document.getElementById('filter-' + (categoryClass.split('-')[0] || 'ble'));
+      const directionFilter = document.getElementById('filter-direction').value;
+      
+      // Apply filters
+      if (filterCheckbox && !filterCheckbox.checked) return;
+      if (directionFilter === 'rx' && categoryClass === 'ble-tx') return;
+      if (directionFilter === 'tx' && categoryClass === 'ble-rx') return;
+      
+      const div = document.createElement('div');
+      div.className = 'debug-entry ' + categoryClass;
+      
+      const time = new Date(entry.time || Date.now()).toLocaleTimeString();
+      const tag = entry.tag || categoryClass.toUpperCase();
+      
+      let content = '<span class="time">' + time + '</span>' +
+        '<span class="tag">[' + tag + ']</span> ';
+      
+      if (entry.hex) {
+        content += '<span class="hex">' + entry.hex + '</span>';
+      }
+      if (entry.text) {
+        content += escapeHtml(entry.text);
+      }
+      if (entry.decoded) {
+        content += '<div class="decoded">↳ ' + escapeHtml(entry.decoded) + '</div>';
+      }
+      
+      div.innerHTML = content;
+      debugLogEl.appendChild(div);
+      
+      // Update badge if not viewing debug
+      if (!document.getElementById('panel-debug').classList.contains('active')) {
+        debugCount++;
+        debugCountEl.textContent = debugCount > 99 ? '99+' : debugCount;
+        debugCountEl.style.display = 'inline';
+      }
+      
+      if (document.getElementById('auto-scroll').checked) {
+        debugLogEl.scrollTop = debugLogEl.scrollHeight;
+      }
+    }
+    
+    function clearDebug() {
+      debugLogEl.innerHTML = '';
+    }
+    
+    function updateSession(msg) {
+      sessions.set(msg.peerID, msg);
+      renderSessions();
+    }
+    
+    function renderSessions() {
+      if (sessions.size === 0) {
+        sessionsListEl.innerHTML = '<p style="color:#666;font-size:12px">No active sessions</p>';
+        return;
+      }
+      
+      sessionsListEl.innerHTML = '';
+      sessions.forEach((session, peerID) => {
+        const card = document.createElement('div');
+        card.className = 'session-card';
+        
+        const statusClass = session.established ? 'success' : (session.error ? 'error' : 'pending');
+        const statusText = session.established ? 'Established' : (session.error || 'Handshaking...');
+        
+        card.innerHTML = 
+          '<h4>' + peerID.slice(0, 16) + '...</h4>' +
+          '<div class="status-row"><span>Status:</span><span class="status-value ' + statusClass + '">' + statusText + '</span></div>' +
+          '<div class="status-row"><span>Direction:</span><span class="status-value">' + (session.initiator ? 'Initiator' : 'Responder') + '</span></div>' +
+          '<div class="status-row"><span>TX Nonce:</span><span class="status-value">' + (session.txNonce ?? '—') + '</span></div>' +
+          '<div class="status-row"><span>RX Nonce:</span><span class="status-value">' + (session.rxNonce ?? '—') + '</span></div>';
+        
+        sessionsListEl.appendChild(card);
+      });
+    }
+    
+    function updatePeersList() {
+      peerCountEl.textContent = peers.size + ' peer' + (peers.size !== 1 ? 's' : '');
+      peersListEl.innerHTML = '';
+      
+      if (peers.size === 0) {
+        peersListEl.innerHTML = '<p style="color:#555;font-size:11px;padding:8px">No peers nearby</p>';
+        return;
+      }
+      
+      peers.forEach((peer, id) => {
+        const div = document.createElement('div');
+        div.className = 'peer' + (selectedPeer === id ? ' selected' : '');
+        div.innerHTML = 
+          '<div class="peer-nick">' + escapeHtml(peer.nickname) + '</div>' +
+          '<div class="peer-id">' + id.slice(0, 12) + '...</div>';
+        div.onclick = () => selectPeer(id, peer.nickname);
+        peersListEl.appendChild(div);
+      });
+    }
+    
+    function selectPeer(id, nickname) {
+      if (selectedPeer === id) {
+        clearDM();
+      } else {
+        selectedPeer = id;
+        dmTargetEl.textContent = nickname;
+        dmIndicatorEl.style.display = 'flex';
+        inputEl.placeholder = 'Private message to ' + nickname + '...';
+        updatePeersList();
+      }
+    }
+    
+    function clearDM() {
+      selectedPeer = null;
+      dmIndicatorEl.style.display = 'none';
+      inputEl.placeholder = 'Type a message...';
+      updatePeersList();
+    }
+    window.clearDM = clearDM;
+    
+    function send() {
+      const text = inputEl.value.trim();
+      if (!text || !ws || ws.readyState !== WebSocket.OPEN) return;
+      
+      addMessage({
+        id: Date.now().toString(),
+        sender: myPeerID,
+        senderNickname: 'me',
+        content: text,
+        timestamp: new Date().toISOString(),
+        isPrivate: !!selectedPeer
+      });
+      
+      ws.send(JSON.stringify({
+        type: 'send',
+        text: text,
+        to: selectedPeer || null
+      }));
+      
+      inputEl.value = '';
+    }
+    
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    
+    sendBtn.onclick = send;
+    inputEl.onkeydown = (e) => { if (e.key === 'Enter') send(); };
+    
+    connect();
+  </script>
+</body>
+</html>`;