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>
feat: multi-network join, persistence, and switching in web UI
2026-06-29 16:55:16 +02:00 · 2026-06-29 16:38:46 +02:00 · 2026-06-29 15:47:14 +02:00
7 changed files with 112 additions and 176 deletions
--- a/FUTURE.md
+++ b/FUTURE.md
@@ -91,10 +91,10 @@ DM rooms (`dm:<peerId>`) appear automatically in both interfaces when messages a
 - Live progress bar per active transfer
 - Push (📎) sends directly to a peer without them needing to share a folder

-**Not yet done:** daemon-side resume UX (IPC event to surface resumable transfers to the UI on reconnect).
+On daemon start, the download directory is scanned for `.tmp.meta` sidecars and a `resumable_transfers` IPC event is emitted so the UI can show pending transfers with a progress bar.

 ### Native UI
-Web frontend (React, already built) + [Wails v2](https://wails.io) shell for native packaging. Wails is Go-native — no Rust toolchain required. The daemon runs embedded in the same process; the webview connects to the existing WebSocket IPC at `ws://127.0.0.1:17338`. Scaffolded in `cmd/app/`; build with `./build-app.sh`. Remaining work: system tray, OS notifications.
+Web frontend (React, already built) + [Wails v2](https://wails.io) shell for native packaging. Wails is Go-native — no Rust toolchain required. The daemon runs embedded in the same process; the webview connects to the existing WebSocket IPC at `ws://127.0.0.1:17338`. Built in `cmd/app/` via `./build-app.sh`. System tray (Linux/Windows) and OS notifications are implemented. macOS menu-bar tray requires Cocoa main-thread integration — currently a stub.

 ---

@@ -133,6 +133,10 @@ Web frontend (React, already built) + [Wails v2](https://wails.io) shell for nat
 | ✅ shipped | PWA manifest — installable via "Add to Home Screen" on iOS and Android |
 | ✅ shipped | Native desktop app (Wails 2) — system tray (Linux/Windows), OS notifications, single binary |
 | ✅ shipped | Gitea Actions CI — server binaries (all platforms via cross-compile) + desktop app (Linux amd64) |
+| ✅ shipped | File transfer resume UX — resumable transfers surfaced in Transfers panel on reconnect |
+| ✅ shipped | P2P message history gossip (EXT-007) — new peers receive recent history from first connected peer |
+| ✅ shipped | Date-aware timestamps in TUI and web UI |
+| ✅ shipped | Historical peer alias resolution in web UI |

 ---

--- a/PROPOSAL-history-gossip.md
+++ b/PROPOSAL-history-gossip.md
@@ -1,154 +0,0 @@
-# Proposal: P2P Message History Gossip
-
-## Goals
-
- New peers joining a network can retrieve recent message history from existing peers
- No central storage — history lives only in peer daemons (SQLite)
- No new trust requirements — history is shared only over already-established encrypted DataChannels
- No duplicates in the local store or UI
- No conflicts — history gossip is append-only and idempotent
-
---
-
-## Privacy Model
-
-History is shared **peer-to-peer over the encrypted mesh**, never via the anchor. The anchor remains dumb — it sees only signaling blobs. A peer only receives history from peers they have successfully completed a YAW/2 handshake with, so the same trust boundary as live messages applies.
-
-A peer can choose not to share history by ignoring `history_request` messages — the protocol is advisory, not mandatory.
-
---
-
-## Wire Protocol
-
-Two new YAW/2 extension messages (added to EXTENSIONS.md):
-
-### `history_request`
-
-Sent by a newly-connected peer to one or more existing peers shortly after the handshake completes.
-
-```json
-{
-  "type": "history_request",
-  "room":  "general",
-  "since": "2026-01-01T00:00:00Z",
-  "limit": 200
-}
-```
-
-| Field   | Type            | Description                                              |
-|---------|-----------------|----------------------------------------------------------|
-| `room`  | string          | Room name to request history for. One request per room.  |
-| `since` | ISO 8601 or ""  | Only return messages newer than this timestamp. Empty = return up to `limit` most recent. |
-| `limit` | int (max 500)   | Maximum number of messages to return. Responder may return fewer. |
-
-### `history_chunk`
-
-Response from an existing peer. May be sent in multiple chunks if `limit` is large.
-
-```json
-{
-  "type": "history_chunk",
-  "room":  "general",
-  "messages": [
-    {
-      "id":        "sha256:<hex>",
-      "from":      "<peer-alias>",
-      "from_id":   "<hex-pubkey>",
-      "body":      "hello",
-      "ts":        "2026-06-01T12:00:00Z",
-      "room":      "general"
-    }
-  ],
-  "done": true
-}
-```
-
-| Field      | Type    | Description                                              |
-|------------|---------|----------------------------------------------------------|
-| `messages` | array   | Ordered oldest-first.                                    |
-| `done`     | bool    | `true` on the final chunk. Receiver may display after this. |
-
---
-
-## Message Identity and Deduplication
-
-Each message has a **content-addressed ID**:
-
-```
-id = "sha256:" + hex(SHA-256(from_id || room || ts || body))
-```
-
- Computed by the original sender and included in every live message going forward
- The SQLite `messages` table gains an `id TEXT UNIQUE` column
- On insert, use `INSERT OR IGNORE` — receiving the same message twice (live or via gossip) is a no-op
- The UI sorts by `ts`, so late-arriving history slots in correctly without reordering visible messages
-
-Legacy messages (before this feature) have no `id`. They are assigned a local-only ID on migration and are never gossipped (they have no canonical ID the receiver could deduplicate against).
-
---
-
-## Daemon-Side Implementation
-
-### SQLite schema change
-
-```sql
-ALTER TABLE messages ADD COLUMN msg_id TEXT;
-CREATE UNIQUE INDEX IF NOT EXISTS idx_messages_msg_id ON messages(msg_id) WHERE msg_id IS NOT NULL;
-```
-
-### Handling `history_request`
-
-```
-peer sends history_request{room, since, limit}
-→ query SQLite: SELECT * FROM messages WHERE room=? AND ts>? ORDER BY ts ASC LIMIT ?
-→ send history_chunk{room, messages, done:true}
-```
-
-Responder enforces:
- `limit` capped at 500
- Only messages the responder itself received or sent (no re-gossipping of gossipped history to avoid amplification)
- Rate limit: one `history_request` per peer per room per 60 seconds
-
-### Handling `history_chunk`
-
-```
-for each message in chunk:
-    INSERT OR IGNORE INTO messages (msg_id, room, from_alias, from_id, body, ts) VALUES (...)
-emit IPC event: history_loaded{room, count}
-```
-
-### When to request
-
- After handshake completes with the **first** peer in a network (only ask one peer — avoids fan-out)
- Request rooms the local peer knows about (from its own SQLite `rooms` table)
- If no rooms known yet: request `"general"` only; discover others from incoming live messages
-
---
-
-## IPC / UI Integration
-
-New IPC event emitted after history is loaded:
-
-```json
-{ "type": "history_loaded", "network_id": "...", "room": "general", "count": 47 }
-```
-
-The web UI and TUI insert a visual separator above the first gossipped message:
-
-```
-── 47 earlier messages ─────────────────────────────
-[12:03] alice: hey
-[12:04] bob: yo
-── live ─────────────────────────────────────────────
-[14:22] you joined
-```
-
---
-
-## What This Does Not Do
-
- **No conflict resolution** — messages are immutable append-only records; there is nothing to conflict
- **No ordering guarantee beyond timestamp** — if two peers sent messages at the same millisecond, both are stored; the UI sorts by `ts` then `msg_id` for a stable tiebreak
- **No full sync** — gossip is bounded by `limit` and `since`; it is not a replication protocol
- **No anchor involvement** — the anchor never sees history
- **No history from peers who were offline** — if no peer with history is online when you join, you get nothing (acceptable given the trust model)
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -33,6 +33,10 @@ input:focus { border-color: var(--accent); }
 .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-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
+.saved-networks { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.saved-network-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.network-chip { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 4px 14px; font-size: 13px; }
+.network-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
 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); }
--- a/web/src/components/MessagePane.tsx
+++ b/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.
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -32,16 +32,25 @@ export function Sidebar() {
    networks, activeNetworkId, activeRoom,
    connectedPeers, peerStatus,
    setActiveRoom, setActiveNetwork, messages, browseFiles, sendFileTo, adapterMode,
-    customRooms, createRoom, logout,
+    customRooms, createRoom, logout, send,
  } = useWaste()
  const [addingRoom, setAddingRoom] = useState(false)
  const [newRoomName, setNewRoomName] = useState('')
+  const [addingNetwork, setAddingNetwork] = useState(false)
+  const [newNetName, setNewNetName] = useState('')
+  const [newNetAnchor, setNewNetAnchor] = useState('')

  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()
@@ -50,6 +59,25 @@ export function Sidebar() {
    setAddingRoom(false)
  }

+  function submitNewNetwork(e: React.FormEvent) {
+    e.preventDefault()
+    const name = newNetName.trim()
+    if (!name) return
+    if (adapterMode === 'browser') {
+      // Persist to saved networks list in localStorage.
+      const anchor = newNetAnchor.trim() || localStorage.getItem('waste_anchor_url') || ''
+      const saved: Array<{name: string; anchor: string}> = JSON.parse(localStorage.getItem('waste_saved_networks') ?? '[]')
+      if (!saved.some(n => n.name === name && n.anchor === anchor)) {
+        saved.push({ name, anchor })
+        localStorage.setItem('waste_saved_networks', JSON.stringify(saved))
+      }
+    }
+    send({ type: 'join_network', network_name: name })
+    setNewNetName('')
+    setNewNetAnchor('')
+    setAddingNetwork(false)
+  }
+
  const displayAlias = localPeer?.alias ?? masterAlias ?? ''
  const displayId = localPeer?.id ?? masterId ?? ''
  const card = displayId ? makeYawCard(displayId, displayAlias) : null
@@ -95,9 +123,12 @@ export function Sidebar() {
      <div className="sidebar-section">
        <div className="sidebar-label-row">
          <span className="sidebar-label">Networks</span>
-          {activeNetworkId && (
-            <button className="sidebar-add" onClick={copyHangLink} title="Copy hang link (pre-fills join form, no invite required)">🔗</button>
-          )}
+          <span style={{ display: 'flex', gap: 2 }}>
+            {activeNetworkId && (
+              <button className="sidebar-add" onClick={copyHangLink} title="Copy hang link">🔗</button>
+            )}
+            <button className="sidebar-add" onClick={() => setAddingNetwork(v => !v)} title="Join network">+</button>
+          </span>
        </div>
        {networks.map(n => (
          <button
@@ -108,6 +139,26 @@ export function Sidebar() {
            {n.network_name}
          </button>
        ))}
+        {addingNetwork && (
+          <form className="sidebar-new-room" onSubmit={submitNewNetwork}>
+            <input
+              autoFocus
+              value={newNetName}
+              onChange={e => setNewNetName(e.target.value)}
+              placeholder="network name"
+              onKeyDown={e => e.key === 'Escape' && (setAddingNetwork(false), setNewNetName(''))}
+            />
+            {adapterMode === 'browser' && (
+              <input
+                value={newNetAnchor}
+                onChange={e => setNewNetAnchor(e.target.value)}
+                placeholder="anchor URL (blank = current)"
+                className="mono"
+                style={{ fontSize: '0.75rem', marginTop: 4 }}
+              />
+            )}
+          </form>
+        )}
      </div>

      <div className="sidebar-section">
--- a/web/src/pages/Onboarding.tsx
+++ b/web/src/pages/Onboarding.tsx
@@ -72,8 +72,15 @@ export function Onboarding({ status }: Props) {
    if (adapterMode !== 'browser' || status !== 'connected') return
    const { network: n, netHash: nh } = parseInviteParams()
    if (n || nh) return // explicit invite — don't auto-join, show form
-    const savedNetwork = localStorage.getItem('waste_last_network')
-    if (savedNetwork) doJoin(savedNetwork, '')
+    // Rejoin all saved networks.
+    const saved: Array<{name: string; anchor: string}> = JSON.parse(localStorage.getItem('waste_saved_networks') ?? '[]')
+    if (saved.length > 0) {
+      saved.forEach(s => doJoin(s.name, ''))
+    } else {
+      // Legacy single-network fallback.
+      const savedNetwork = localStorage.getItem('waste_last_network')
+      if (savedNetwork) doJoin(savedNetwork, '')
+    }
  }, [adapterMode, status]) // eslint-disable-line react-hooks/exhaustive-deps

  function joinNetwork(e: React.FormEvent) {
@@ -87,8 +94,16 @@ export function Onboarding({ status }: Props) {
    if (adapterMode === 'browser') {
      localStorage.setItem('waste_anchor_url', anchorUrl)
      if (nick.trim()) localStorage.setItem('waste_nick', nick.trim())
-      if (name) localStorage.setItem('waste_last_network', name)
-      else localStorage.removeItem('waste_last_network')
+      if (name) {
+        // Persist to saved networks list.
+        const saved: Array<{name: string; anchor: string}> = JSON.parse(localStorage.getItem('waste_saved_networks') ?? '[]')
+        if (!saved.some(n => n.name === name)) {
+          saved.push({ name, anchor: anchorUrl })
+          localStorage.setItem('waste_saved_networks', JSON.stringify(saved))
+        }
+        // Keep legacy key for backward compat.
+        localStorage.setItem('waste_last_network', name)
+      }
    }

    if (hash.length === 64 && !name) {
@@ -121,6 +136,7 @@ export function Onboarding({ status }: Props) {
  }

  const shortId = masterId ? masterId.slice(0, 16).replace(/(.{4})/g, '$1 ').trim() : null
+  const savedNetworks: Array<{name: string; anchor: string}> = JSON.parse(localStorage.getItem('waste_saved_networks') ?? '[]')

  // ── disconnected / connecting ────────────────────────────────────────────────
  if (status !== 'connected') {
@@ -159,8 +175,21 @@ export function Onboarding({ status }: Props) {
        </div>
      )}

+      {adapterMode === 'browser' && savedNetworks.length > 0 && (
+        <div className="saved-networks">
+          <span className="join-label">Saved networks</span>
+          <div className="saved-network-chips">
+            {savedNetworks.map(n => (
+              <button key={n.name} className="network-chip" type="button" onClick={() => doJoin(n.name, '')}>
+                {n.name}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
      <form onSubmit={joinNetwork} className="join-form">
-        <label className="join-label">Join a network</label>
+        <label className="join-label">{savedNetworks.length > 0 ? 'Join another network' : 'Join a network'}</label>

        {adapterMode === 'browser' && (
          <input
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -283,14 +283,14 @@ export const useWaste = create<WasteState>((set, get) => ({
      case 'message_received': {
        if (msg.message) {
          const m = msg.message
-          const room = m.room
+          const key = `${msg.network_id}:${m.room}`
          const fromId = String(m.from)
          set(s => {
-            const existing = s.messages[room] ?? []
+            const existing = s.messages[key] ?? []
            if (m.mid && existing.some(e => e.mid === m.mid)) return s
            const prev = s.peerStatus[fromId] ?? {}
            return {
-              messages: { ...s.messages, [room]: [...existing, m] },
+              messages: { ...s.messages, [key]: [...existing, m] },
              peerStatus: { ...s.peerStatus, [fromId]: { ...prev, lastSeen: m.ts } },
            }
          })
@@ -378,16 +378,17 @@ export const useWaste = create<WasteState>((set, get) => ({
        const room = msg.room
        const incoming = (msg.messages ?? []) as ChatMessage[]
        if (!room || incoming.length === 0) break
+        const key = `${msg.network_id}:${room}`
        set(s => {
-          const existing = s.messages[room] ?? []
+          const existing = s.messages[key] ?? []
          const existingMids = new Set(existing.map(m => m.mid).filter(Boolean))
          const fresh = incoming.filter(m => !m.mid || !existingMids.has(m.mid))
          if (fresh.length === 0) return s
          const merged = [...fresh, ...existing].sort((a, b) => a.ts - b.ts)
          const cutoff = fresh[fresh.length - 1]?.ts ?? 0
          return {
-            messages: { ...s.messages, [room]: merged },
-            historyCutoff: { ...s.historyCutoff, [room]: cutoff },
+            messages: { ...s.messages, [key]: merged },
+            historyCutoff: { ...s.historyCutoff, [key]: cutoff },
          }
        })
        break