Define Protocol in Config

// app/src/shared/p2p-config.ts
PROTOCOLS: {
    HANDSHAKE: '/whatnext/handshake/1.0.0',
}

Create Protocol Handler Module

// app/src/utility/protocols/handshake.ts
export async function handshakeProtocolHandler(stream) {
    // Read incoming handshake
    // Send our handshake
    // Return peer metadata
}

Register Handler in P2P Service

// app/src/utility/p2p-service.ts (in startNode)
await this.libp2pNode.handle(
    P2P_CONFIG.PROTOCOLS.HANDSHAKE,
    handshakeProtocolHandler
);

Initiate Handshake on Connection

// In peer:connect event handler
const stream = await this.libp2pNode.dialProtocol(
    peerId,
    P2P_CONFIG.PROTOCOLS.HANDSHAKE
);
// Send our handshake, receive theirs

Update UI to Show Metadata

• Display peer's app version
• Display peer's display name (from handshake, not auto-generated)
• Display peer's capabilities

Add Data Test UI Controls

// In P2PStatus.tsx "Data Transfer Testing" section
<button onClick={() => sendTestMessage(peer, size)}>
    Send {size} Test
</button>

Create Protocol Handler

// app/src/utility/protocols/data-test.ts
export async function dataTestHandler(stream) {
    // Read test data
    // Optionally echo back if requested
    // Track bytes received
}

Implement Send Logic

async function sendTestData(peerId, dataSize, echo = false) {
    const stream = await libp2p.dialProtocol(
        peerId,
        '/whatnext/data-test/1.0.0'
    );

    // Generate test data
    // Send in chunks
    // If echo, wait for response
    // Measure time/throughput
}

Add Statistics Tracking

• Bytes sent/received per peer
• Transfer time
• Throughput (bytes/sec)
• Display in UI

Add File Transfer UI

<button onClick={selectFileToSend}>
    Select File to Send
</button>

File Metadata Exchange

// First message: metadata
{
    "fileName": "album-art.jpg",
    "fileSize": 1048576,
    "mimeType": "image/jpeg",
    "checksum": "sha256:abc123..."
}

// Then: chunks
{
    "chunkIndex": 0,
    "totalChunks": 100,
    "data": "base64encodeddata..."
}

Implement Chunking Logic

const CHUNK_SIZE = 64 * 1024; // 64KB chunks

async function sendFile(peerId, filePath) {
    // Read file metadata
    // Send metadata first
    // Read file in chunks
    // Send each chunk with index
    // Wait for ack/completion
}

Progress Tracking

• Show file name, size
• Progress bar (percent complete)
• Transfer rate (MB/s)
• ETA
• Cancel button

Integrate RxDB Replication

// Use RxDB's built-in P2P replication
import { replicateRxCollection } from 'rxdb/plugins/replication';

Create Sync Protocol Handler

// This might be simpler - RxDB handles most of it
// You provide:
// - Connection/stream management
// - Peer discovery
// RxDB handles:
// - Diff/patch generation
// - Conflict resolution
// - Eventual consistency

Test Scenarios

• Create playlist on peer A, appears on peer B
• Add track on peer A, appears on peer B
• Concurrent adds (both peers add at same time)
• Concurrent deletes (conflict resolution)
• Rename playlist while other peer adds track

Observe CRDT Behavior

• Add debug logging for sync events
• Show "last synced" timestamp per peer
• Display conflict resolution decisions