From fab1c4bb5888869bbb0c7fcdc4a0570a9dde20ec Mon Sep 17 00:00:00 2001
From: Alex Kern <alex@kern.io>
Date: Tue, 15 Jul 2025 22:55:19 -0700
Subject: [PATCH] Add e2e test for file transfers

---
 .claude/settings.local.json         |  10 +
 package.json                        |   2 +-
 playwright.config.ts                |   6 +-
 src/components/CopyableInput.tsx    |   1 +
 src/components/DownloadButton.tsx   |   1 +
 src/components/DropZone.tsx         |   1 +
 src/components/ProgressBar.tsx      |   5 +-
 src/components/StartButton.tsx      |   1 +
 src/hooks/useDownloader.ts          |  27 ++-
 src/hooks/useUploaderConnections.ts |  47 +++-
 src/messages.ts                     |   9 +
 src/types.ts                        |   1 +
 test-results/.last-run.json         |   6 +
 tests/e2e/file-transfer.test.ts     |  92 +++++++
 tests/e2e/helpers.ts                | 361 ++++++++++++++++++++++++++++
 15 files changed, 562 insertions(+), 8 deletions(-)
 create mode 100644 .claude/settings.local.json
 create mode 100644 test-results/.last-run.json
 create mode 100644 tests/e2e/file-transfer.test.ts
 create mode 100644 tests/e2e/helpers.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..6b71b59
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm build:*)",
+      "Bash(pnpm test:*)",
+      "Bash(npm test:*)"
+    ],
+    "deny": []
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 0cfe084..7643a18 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   "scripts": {
     "dev": "next",
     "dev:full": "docker compose up redis coturn -d && COTURN_ENABLED=true REDIS_URL=redis://localhost:6379 next",
-    "build": "next build",
+    "build": "next build && cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/",
     "start": "next start",
     "start:peerjs": "./bin/peerjs.js",
     "lint:check": "eslint 'src/**/*.ts[x]'",
diff --git a/playwright.config.ts b/playwright.config.ts
index 4338e61..cc72eb1 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,10 +2,14 @@ import { defineConfig } from '@playwright/test'
 
 export default defineConfig({
   testDir: './tests/e2e',
+  workers: 1, // Run tests serially to avoid WebRTC port conflicts
   webServer: {
     command: 'node .next/standalone/server.js',
-    port: 3000,
+    url: 'http://localhost:3000',
     timeout: 120 * 1000,
     reuseExistingServer: true,
   },
+  use: {
+    baseURL: 'http://localhost:3000',
+  },
 })
diff --git a/src/components/CopyableInput.tsx b/src/components/CopyableInput.tsx
index 9df1884..3e61682 100644
--- a/src/components/CopyableInput.tsx
+++ b/src/components/CopyableInput.tsx
@@ -16,6 +16,7 @@ export function CopyableInput({
       <InputLabel>{label}</InputLabel>
       <div className="flex w-full">
         <input
+          id={`copyable-input-${label.toLowerCase().replace(/\s+/g, '-')}`}
           className="grow px-3 py-2 text-xs border border-r-0 rounded-l text-stone-900 dark:text-stone-100 bg-white dark:bg-stone-800 border-stone-300 dark:border-stone-600"
           value={value}
           readOnly
diff --git a/src/components/DownloadButton.tsx b/src/components/DownloadButton.tsx
index e05cefe..35ada2d 100644
--- a/src/components/DownloadButton.tsx
+++ b/src/components/DownloadButton.tsx
@@ -7,6 +7,7 @@ export default function DownloadButton({
 }): JSX.Element {
   return (
     <button
+      id="download-button"
       onClick={onClick}
       className="h-12 px-4 bg-linear-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
     >
diff --git a/src/components/DropZone.tsx b/src/components/DropZone.tsx
index 7f84b2d..0bf4042 100644
--- a/src/components/DropZone.tsx
+++ b/src/components/DropZone.tsx
@@ -97,6 +97,7 @@ export default function DropZone({
         multiple
       />
       <button
+        id="drop-zone-button"
         className="block cursor-pointer relative py-3 px-6 text-base font-bold text-stone-700 dark:text-stone-200 bg-white dark:bg-stone-800 border-2 border-stone-700 dark:border-stone-700 rounded-lg transition-all duration-300 ease-in-out outline-none hover:shadow-md active:shadow-inner focus:shadow-outline"
         onClick={handleClick}
       >
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 76982b2..99d48b8 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -11,11 +11,12 @@ export default function ProgressBar({
   const isComplete = value === max
 
   return (
-    <div className="w-full h-12 bg-stone-200 dark:bg-stone-700 rounded-md overflow-hidden relative shadow-sm">
+    <div id="progress-bar" className="w-full h-12 bg-stone-200 dark:bg-stone-700 rounded-md overflow-hidden relative shadow-sm">
       <div className="absolute inset-0 flex items-center justify-center">
         <span className="text-black font-bold">{Math.round(percentage)}%</span>
       </div>
       <div
+        id="progress-bar-fill"
         className={`h-full ${
           isComplete
             ? 'bg-linear-to-b from-green-500 to-green-600'
@@ -24,7 +25,7 @@ export default function ProgressBar({
         style={{ width: `${percentage}%` }}
       />
       <div className="absolute inset-0 flex items-center justify-center">
-        <span className="text-white font-bold text-shadow">
+        <span id="progress-percentage" className="text-white font-bold text-shadow">
           {Math.round(percentage)}%
         </span>
       </div>
diff --git a/src/components/StartButton.tsx b/src/components/StartButton.tsx
index af2c6c8..725700d 100644
--- a/src/components/StartButton.tsx
+++ b/src/components/StartButton.tsx
@@ -7,6 +7,7 @@ export default function StartButton({
 }): React.ReactElement {
   return (
     <button
+      id="start-button"
       onClick={onClick}
       className="px-4 py-2 bg-linear-to-b from-green-500 to-green-600 text-white rounded-md hover:from-green-500 hover:to-green-700 transition-all duration-200 border border-green-600 shadow-sm hover:shadow-md text-shadow"
     >
diff --git a/src/hooks/useDownloader.ts b/src/hooks/useDownloader.ts
index 811da03..b1f04cc 100644
--- a/src/hooks/useDownloader.ts
+++ b/src/hooks/useDownloader.ts
@@ -201,16 +201,39 @@ export function useDownloader(uploaderPeerID: string): {
       nextFileIndex++
     }
 
+    let chunkCountByFile: Record<string, number> = {}
     processChunk.current = (message: z.infer<typeof ChunkMessage>) => {
       const fileStream = fileStreamByPath[message.fileName]
       if (!fileStream) {
         console.error('[Downloader] no stream found for', message.fileName)
         return
       }
-      setBytesDownloaded((bd) => bd + (message.bytes as ArrayBuffer).byteLength)
+      
+      // Track chunks for e2e testing
+      if (!chunkCountByFile[message.fileName]) {
+        chunkCountByFile[message.fileName] = 0
+      }
+      chunkCountByFile[message.fileName]++
+      console.log(
+        `[Downloader] received chunk ${chunkCountByFile[message.fileName]} for ${message.fileName} (${message.offset}-${message.offset + (message.bytes as ArrayBuffer).byteLength}) final=${message.final}`,
+      )
+      
+      const chunkSize = (message.bytes as ArrayBuffer).byteLength
+      setBytesDownloaded((bd) => bd + chunkSize)
       fileStream.enqueue(new Uint8Array(message.bytes as ArrayBuffer))
+      
+      // Send acknowledgment to uploader
+      const ackMessage: Message = {
+        type: MessageType.ChunkAck,
+        fileName: message.fileName,
+        offset: message.offset,
+        bytesReceived: chunkSize,
+      }
+      dataConnection.send(ackMessage)
+      console.log(`[Downloader] sent ack for chunk ${chunkCountByFile[message.fileName]} (${message.offset}, ${chunkSize} bytes)`)
+      
       if (message.final) {
-        console.log('[Downloader] finished receiving', message.fileName)
+        console.log(`[Downloader] finished receiving ${message.fileName} after ${chunkCountByFile[message.fileName]} chunks`)
         fileStream.close()
         startNextFileOrFinish()
       }
diff --git a/src/hooks/useUploaderConnections.ts b/src/hooks/useUploaderConnections.ts
index 25f6cab..f9c8840 100644
--- a/src/hooks/useUploaderConnections.ts
+++ b/src/hooks/useUploaderConnections.ts
@@ -5,7 +5,8 @@ import {
   UploaderConnection,
   UploaderConnectionStatus,
 } from '../types'
-import { decodeMessage, Message, MessageType } from '../messages'
+import { decodeMessage, Message, MessageType, ChunkAckMessage } from '../messages'
+import { z } from 'zod'
 import { getFileName } from '../fs'
 import { setRotating } from './useRotatingSpinner'
 
@@ -72,6 +73,7 @@ export function useUploaderConnections(
         completedFiles: 0,
         totalFiles: files.length,
         currentFileProgress: 0,
+        acknowledgedBytes: 0,
       }
 
       setConnections((conns) => {
@@ -228,10 +230,16 @@ export function useUploaderConnections(
               )
               const file = validateOffset(files, fileName, offset)
 
+              let chunkCount = 0
               const sendNextChunkAsync = () => {
                 sendChunkTimeout = setTimeout(() => {
                   const end = Math.min(file.size, offset + MAX_CHUNK_SIZE)
                   const final = isFinalChunk(offset, file.size)
+                  chunkCount++
+                  // Log for e2e testing
+                  console.log(
+                    `[UploaderConnections] sending chunk ${chunkCount} for ${fileName} (${offset}-${end}/${file.size}) final=${final}`,
+                  )
                   const request: Message = {
                     type: MessageType.Chunk,
                     fileName,
@@ -285,7 +293,8 @@ export function useUploaderConnections(
                   status: UploaderConnectionStatus.Uploading,
                   uploadingFileName: fileName,
                   uploadingOffset: offset,
-                  currentFileProgress: offset / file.size,
+                  acknowledgedBytes: 0, // Reset acknowledged bytes for new file
+                  currentFileProgress: 0, // Progress based on acks, not sends
                 }
               })
 
@@ -312,6 +321,40 @@ export function useUploaderConnections(
               break
             }
 
+            case MessageType.ChunkAck: {
+              const ackMessage = message as z.infer<typeof ChunkAckMessage>
+              console.log(
+                '[UploaderConnections] received chunk ack:',
+                ackMessage.fileName,
+                'offset',
+                ackMessage.offset,
+                'bytes',
+                ackMessage.bytesReceived,
+              )
+              
+              updateConnection((draft) => {
+                const currentAcked = draft.acknowledgedBytes || 0
+                const newAcked = currentAcked + ackMessage.bytesReceived
+                
+                // Find the file to calculate progress
+                const file = files.find(f => getFileName(f) === ackMessage.fileName)
+                if (file) {
+                  const acknowledgedProgress = newAcked / file.size
+                  return {
+                    ...draft,
+                    acknowledgedBytes: newAcked,
+                    currentFileProgress: acknowledgedProgress,
+                  }
+                }
+                
+                return {
+                  ...draft,
+                  acknowledgedBytes: newAcked,
+                }
+              })
+              break
+            }
+
             case MessageType.Done: {
               console.log(
                 '[UploaderConnections] transfer completed successfully',
diff --git a/src/messages.ts b/src/messages.ts
index a9acf2b..6723593 100644
--- a/src/messages.ts
+++ b/src/messages.ts
@@ -5,6 +5,7 @@ export enum MessageType {
   Info = 'Info',
   Start = 'Start',
   Chunk = 'Chunk',
+  ChunkAck = 'ChunkAck',
   Pause = 'Pause',
   Done = 'Done',
   Error = 'Error',
@@ -48,6 +49,13 @@ export const ChunkMessage = z.object({
   final: z.boolean(),
 })
 
+export const ChunkAckMessage = z.object({
+  type: z.literal(MessageType.ChunkAck),
+  fileName: z.string(),
+  offset: z.number(),
+  bytesReceived: z.number(),
+})
+
 export const DoneMessage = z.object({
   type: z.literal(MessageType.Done),
 })
@@ -80,6 +88,7 @@ export const Message = z.discriminatedUnion('type', [
   InfoMessage,
   StartMessage,
   ChunkMessage,
+  ChunkAckMessage,
   DoneMessage,
   ErrorMessage,
   PasswordRequiredMessage,
diff --git a/src/types.ts b/src/types.ts
index 3261432..2b55030 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -24,6 +24,7 @@ export type UploaderConnection = {
   mobileModel?: string
   uploadingFileName?: string
   uploadingOffset?: number
+  acknowledgedBytes?: number
   completedFiles: number
   totalFiles: number
   currentFileProgress: number
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
new file mode 100644
index 0000000..8f71d32
--- /dev/null
+++ b/test-results/.last-run.json
@@ -0,0 +1,6 @@
+{
+  "status": "failed",
+  "failedTests": [
+    "79024892fc2de608051f-528b0ecfc96903d743c3"
+  ]
+}
\ No newline at end of file
diff --git a/tests/e2e/file-transfer.test.ts b/tests/e2e/file-transfer.test.ts
new file mode 100644
index 0000000..3846f8b
--- /dev/null
+++ b/tests/e2e/file-transfer.test.ts
@@ -0,0 +1,92 @@
+/// <reference types="@playwright/test" />
+import { test, expect } from '@playwright/test'
+import {
+  createTestFile,
+  uploadFile,
+  startUpload,
+  downloadFile,
+  verifyFileIntegrity,
+  verifyTransferCompletion,
+  createBrowserContexts,
+  monitorChunkProgress,
+  verifyPreciseProgress,
+} from './helpers'
+
+interface TestCase {
+  name: string
+  fileSizeMultiplier: number
+  expectedChunks: number
+  fillChar: string
+}
+
+const CHUNK_SIZE = 256 * 1024 // 256 KB
+
+const testCases: TestCase[] = [
+  {
+    name: 'tiny file (basic transfer)',
+    fileSizeMultiplier: 0.1, // ~26KB
+    expectedChunks: 1,
+    fillChar: 'T',
+  },
+  {
+    name: 'small file (single chunk)',
+    fileSizeMultiplier: 0.5, // 128KB
+    expectedChunks: 1,
+    fillChar: 'S',
+  },
+  {
+    name: 'medium file (3 chunks)',
+    fileSizeMultiplier: 2.5, // 640KB
+    expectedChunks: 3,
+    fillChar: 'M',
+  },
+  {
+    name: 'large file (4 chunks)',
+    fileSizeMultiplier: 4, // 1024KB
+    expectedChunks: 4,
+    fillChar: 'L',
+  },
+  {
+    name: 'extra large file (7 chunks)',
+    fileSizeMultiplier: 6.5, // ~1664KB
+    expectedChunks: 7,
+    fillChar: 'X',
+  },
+]
+
+for (const testCase of testCases) {
+  test(`file transfer: ${testCase.name}`, async ({ browser }) => {
+    const fileSize = Math.floor(CHUNK_SIZE * testCase.fileSizeMultiplier)
+    const testFile = createTestFile(
+      `test-${testCase.fillChar.toLowerCase()}-${testCase.expectedChunks}chunks.txt`,
+      testCase.fillChar.repeat(fileSize)
+    )
+
+    const { uploaderPage, downloaderPage, cleanup } = await createBrowserContexts(browser)
+
+    try {
+      // Set up precise chunk and progress monitoring
+      const monitor = await monitorChunkProgress(uploaderPage, downloaderPage, fileSize)
+
+      await uploadFile(uploaderPage, testFile)
+      const shareUrl = await startUpload(uploaderPage)
+      const downloadPath = await downloadFile(downloaderPage, shareUrl, testFile)
+      
+      await verifyFileIntegrity(downloadPath, testFile)
+      await verifyTransferCompletion(downloaderPage)
+
+      // Wait for all async progress captures to complete
+      await downloaderPage.waitForTimeout(1000)
+
+      // Verify precise progress tracking for both upload and download
+      verifyPreciseProgress(monitor.uploadChunks, testCase.expectedChunks, 'upload')
+      verifyPreciseProgress(monitor.downloadChunks, testCase.expectedChunks, 'download')
+
+      // Verify final completion shows exactly 100%
+      await expect(downloaderPage.locator('#progress-percentage')).toHaveText('100%')
+
+    } finally {
+      await cleanup()
+    }
+  })
+}
diff --git a/tests/e2e/helpers.ts b/tests/e2e/helpers.ts
new file mode 100644
index 0000000..ce5d424
--- /dev/null
+++ b/tests/e2e/helpers.ts
@@ -0,0 +1,361 @@
+import { Page, Browser, expect } from '@playwright/test'
+import { createHash } from 'crypto'
+import { writeFileSync, readFileSync } from 'fs'
+import { join } from 'path'
+import { tmpdir } from 'os'
+
+export interface TestFile {
+  name: string
+  content: string
+  path: string
+  checksum: string
+}
+
+export function createTestFile(fileName: string, content: string): TestFile {
+  const testFilePath = join(tmpdir(), fileName)
+  writeFileSync(testFilePath, content)
+  
+  const checksum = createHash('sha256').update(content).digest('hex')
+  
+  return {
+    name: fileName,
+    content,
+    path: testFilePath,
+    checksum,
+  }
+}
+
+export async function uploadFile(page: Page, testFile: TestFile): Promise<void> {
+  // Navigate to home page
+  await page.goto('http://localhost:3000/')
+  await expect(
+    page.getByText('Peer-to-peer file transfers in your browser.'),
+  ).toBeVisible()
+
+  // Wait for drop zone button to be ready
+  await expect(page.locator('#drop-zone-button')).toBeVisible()
+
+  // Upload file using the file input and trigger change event
+  await page.evaluate(
+    ({ testContent, testFileName }) => {
+      const input = document.querySelector(
+        'input[type="file"]',
+      ) as HTMLInputElement
+      if (input) {
+        const file = new File([testContent], testFileName, {
+          type: 'text/plain',
+        })
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+        input.files = dataTransfer.files
+
+        // Manually trigger the change event
+        const event = new Event('change', { bubbles: true })
+        input.dispatchEvent(event)
+      }
+    },
+    { testContent: testFile.content, testFileName: testFile.name },
+  )
+
+  // Wait for file to be processed and confirm upload page to appear
+  await expect(
+    page.getByText(/You are about to start uploading/i),
+  ).toBeVisible({ timeout: 10000 })
+}
+
+export async function startUpload(page: Page): Promise<string> {
+  // Start sharing
+  await page.locator('#start-button').click()
+
+  // Wait for uploading state and get the share URL
+  await expect(page.getByText(/You are uploading/i)).toBeVisible({
+    timeout: 10000,
+  })
+
+  // Get the share URL from the copyable input (Long URL)
+  const shareUrlInput = page.locator('#copyable-input-long-url')
+  await expect(shareUrlInput).toBeVisible({ timeout: 5000 })
+  const shareUrl = await shareUrlInput.inputValue()
+
+  expect(shareUrl).toMatch(/http:\/\/localhost:3000\//)
+  return shareUrl
+}
+
+export async function downloadFile(page: Page, shareUrl: string, testFile: TestFile): Promise<string> {
+  // Navigate to share URL
+  await page.goto(shareUrl)
+
+  // Wait for download page to load
+  await expect(page.getByText(testFile.name)).toBeVisible({
+    timeout: 10000,
+  })
+
+  // Start download
+  const downloadPromise = page.waitForEvent('download')
+  await page.locator('#download-button').click()
+  const download = await downloadPromise
+
+  // Verify download
+  expect(download.suggestedFilename()).toBe(testFile.name)
+
+  // Save downloaded file
+  const downloadPath = join(tmpdir(), `downloaded-${testFile.name}`)
+  await download.saveAs(downloadPath)
+
+  return downloadPath
+}
+
+export async function verifyFileIntegrity(downloadPath: string, testFile: TestFile): Promise<void> {
+  // Verify downloaded content and checksum
+  const downloadedContent = readFileSync(downloadPath, 'utf8')
+  expect(downloadedContent).toBe(testFile.content)
+
+  const downloadedChecksum = createHash('sha256')
+    .update(downloadedContent)
+    .digest('hex')
+  expect(downloadedChecksum).toBe(testFile.checksum)
+}
+
+export async function verifyTransferCompletion(downloaderPage: Page): Promise<void> {
+  // Verify download completion on downloader side
+  await expect(downloaderPage.getByText(/You downloaded/i)).toBeVisible({
+    timeout: 10000,
+  })
+}
+
+export async function createBrowserContexts(browser: Browser): Promise<{
+  uploaderPage: Page
+  downloaderPage: Page
+  cleanup: () => Promise<void>
+}> {
+  const uploaderContext = await browser.newContext()
+  const downloaderContext = await browser.newContext()
+
+  const uploaderPage = await uploaderContext.newPage()
+  const downloaderPage = await downloaderContext.newPage()
+
+  const cleanup = async () => {
+    await uploaderContext.close()
+    await downloaderContext.close()
+  }
+
+  return { uploaderPage, downloaderPage, cleanup }
+}
+
+export interface ProgressMonitor {
+  uploaderProgress: number
+  downloaderProgress: number
+  maxProgress: number
+}
+
+export interface ChunkProgressLog {
+  chunkNumber: number
+  fileName: string
+  offset: number
+  end: number
+  fileSize: number
+  final: boolean
+  progressPercentage: number
+  side: 'upload' | 'download'
+}
+
+export interface PreciseChunkMonitor {
+  uploadChunks: ChunkProgressLog[]
+  downloadChunks: ChunkProgressLog[]
+}
+
+export async function monitorChunkProgress(
+  uploaderPage: Page,
+  downloaderPage: Page,
+  expectedFileSize: number,
+): Promise<PreciseChunkMonitor> {
+  const uploadChunks: ChunkProgressLog[] = []
+  const downloadChunks: ChunkProgressLog[] = []
+  
+  uploaderPage.on('console', async (msg) => {
+    const text = msg.text()
+    if (text.includes('[UploaderConnections] received chunk ack')) {
+      // Parse ack log: "[UploaderConnections] received chunk ack: file.txt offset 0 bytes 262144"
+      const ackMatch = text.match(/received chunk ack: (\S+) offset (\d+) bytes (\d+)/)
+      if (ackMatch) {
+        const [, fileName, offset, bytes] = ackMatch
+        
+        // Wait for React state to update, then capture progress percentage
+        setTimeout(async () => {
+          try {
+            // Debug: check all progress elements
+            const allProgressElements = await uploaderPage.locator('#progress-percentage').all()
+            console.log(`Found ${allProgressElements.length} progress elements on uploader page`)
+            
+            const progressElement = uploaderPage.locator('#progress-percentage').first()
+            const progressText = await progressElement.textContent({ timeout: 200 })
+            const progressPercentage = progressText ? parseInt(progressText.replace('%', '')) : 0
+            
+            console.log(`Uploader progress text: "${progressText}" -> ${progressPercentage}%`)
+            
+            // Calculate which chunk this corresponds to
+            const chunkNumber = Math.floor(parseInt(offset) / (256 * 1024)) + 1
+            const chunkEnd = parseInt(offset) + parseInt(bytes)
+            const final = chunkEnd >= expectedFileSize
+            
+            uploadChunks.push({
+              chunkNumber,
+              fileName,
+              offset: parseInt(offset),
+              end: chunkEnd,
+              fileSize: expectedFileSize,
+              final,
+              progressPercentage,
+              side: 'upload',
+            })
+          } catch (error) {
+            // Progress element might not be available yet
+            const chunkNumber = Math.floor(parseInt(offset) / (256 * 1024)) + 1
+            const chunkEnd = parseInt(offset) + parseInt(bytes)
+            const final = chunkEnd >= expectedFileSize
+            
+            uploadChunks.push({
+              chunkNumber,
+              fileName,
+              offset: parseInt(offset),
+              end: chunkEnd,
+              fileSize: expectedFileSize,
+              final,
+              progressPercentage: 0,
+              side: 'upload',
+            })
+          }
+        }, 100) // Slightly longer delay for ack processing
+      }
+    }
+  })
+  
+  downloaderPage.on('console', async (msg) => {
+    const text = msg.text()
+    if (text.includes('[Downloader] received chunk') && !text.includes('finished receiving')) {
+      // Parse log: "[Downloader] received chunk 1 for file.txt (0-262144) final=false"
+      const chunkMatch = text.match(/received chunk (\d+) for (\S+) \((\d+)-(\d+)\) final=(\w+)/)
+      if (chunkMatch) {
+        const [, chunkNum, fileName, offset, end, final] = chunkMatch
+        
+        // Wait a moment for React state to update, then capture progress percentage
+        setTimeout(async () => {
+          try {
+            const progressElement = downloaderPage.locator('#progress-percentage').first()
+            const progressText = await progressElement.textContent({ timeout: 200 })
+            const progressPercentage = progressText ? parseInt(progressText.replace('%', '')) : 0
+            
+            downloadChunks.push({
+              chunkNumber: parseInt(chunkNum),
+              fileName,
+              offset: parseInt(offset),
+              end: parseInt(end),
+              fileSize: expectedFileSize,
+              final: final === 'true',
+              progressPercentage,
+              side: 'download',
+            })
+          } catch (error) {
+            // Progress element might not be available yet
+            downloadChunks.push({
+              chunkNumber: parseInt(chunkNum),
+              fileName,
+              offset: parseInt(offset),
+              end: parseInt(end),
+              fileSize: expectedFileSize,
+              final: final === 'true',
+              progressPercentage: 0,
+              side: 'download',
+            })
+          }
+        }, 50) // Small delay to allow React state update
+      }
+    }
+  })
+
+  return {
+    uploadChunks,
+    downloadChunks,
+  }
+}
+
+export function verifyPreciseProgress(
+  chunks: ChunkProgressLog[], 
+  expectedChunks: number,
+  side: 'upload' | 'download'
+): void {
+  expect(chunks.length).toBe(expectedChunks)
+  
+  for (const chunk of chunks) {
+    // Calculate expected progress percentage for this chunk
+    const expectedProgress = Math.round((chunk.end / chunk.fileSize) * 100)
+    
+    console.log(
+      `${side} chunk ${chunk.chunkNumber}: ${chunk.offset}-${chunk.end}/${chunk.fileSize} ` +
+      `expected=${expectedProgress}% actual=${chunk.progressPercentage}% final=${chunk.final}`
+    )
+    
+    // For the final chunk, ensure we reach exactly 100%
+    if (chunk.final) {
+      expect(chunk.progressPercentage).toBe(100)
+    } else {
+      // For non-final chunks, allow small tolerance due to rounding and UI update timing
+      expect(chunk.progressPercentage).toBeGreaterThanOrEqual(expectedProgress - 2)
+      expect(chunk.progressPercentage).toBeLessThanOrEqual(expectedProgress + 2)
+    }
+  }
+}
+
+export async function monitorTransferProgress(
+  uploaderPage: Page,
+  downloaderPage: Page,
+  maxChecks: number = 10,
+): Promise<ProgressMonitor> {
+  let uploaderProgress = -1
+  let downloaderProgress = -1
+  let maxProgress = 0
+  let progressChecks = 0
+
+  // Wait a moment for transfer to start
+  await downloaderPage.waitForTimeout(500)
+
+  // Check that progress bars appear on both sides
+  await expect(downloaderPage.locator('#progress-bar')).toBeVisible({ timeout: 5000 })
+  await expect(uploaderPage.locator('#progress-bar')).toBeVisible({ timeout: 5000 })
+
+  while (progressChecks < maxChecks) {
+    // Check downloader progress
+    const downloaderProgressText = await downloaderPage.locator('#progress-percentage').textContent()
+    if (downloaderProgressText) {
+      const newDownloaderProgress = parseInt(downloaderProgressText.replace('%', ''))
+      if (newDownloaderProgress > downloaderProgress) {
+        downloaderProgress = newDownloaderProgress
+        maxProgress = Math.max(maxProgress, newDownloaderProgress)
+      }
+    }
+
+    // Check uploader progress
+    const uploaderProgressText = await uploaderPage.locator('#progress-percentage').textContent()
+    if (uploaderProgressText) {
+      const newUploaderProgress = parseInt(uploaderProgressText.replace('%', ''))
+      if (newUploaderProgress > uploaderProgress) {
+        uploaderProgress = newUploaderProgress
+        maxProgress = Math.max(maxProgress, newUploaderProgress)
+      }
+    }
+
+    // Break if both have made significant progress or completed
+    if (downloaderProgress >= 50 && uploaderProgress >= 50) {
+      break
+    }
+
+    await downloaderPage.waitForTimeout(200)
+    progressChecks++
+  }
+
+  return {
+    uploaderProgress,
+    downloaderProgress,
+    maxProgress,
+  }
+}
\ No newline at end of file