@shhhum/xftp-web 0.3.0 → 0.5.0

package/web/crypto.worker.ts

@@ -0,0 +1,313 @@
+import sodium from 'libsodium-wrappers-sumo'
+import {encryptFile, encodeFileHeader, decryptChunks} from '../src/crypto/file.js'
+import {sha512Streaming} from '../src/crypto/digest.js'
+import {prepareChunkSizes, fileSizeLen, authTagSize} from '../src/protocol/chunks.js'
+import {decryptReceivedChunk} from '../src/download.js'
+
+// ── OPFS session management ─────────────────────────────────────
+
+const SESSION_DIR = `session-${Date.now()}-${crypto.randomUUID()}`
+let uploadReadHandle: FileSystemSyncAccessHandle | null = null
+let downloadWriteHandle: FileSystemSyncAccessHandle | null = null
+const chunkMeta = new Map<number, {offset: number, size: number}>()
+let currentDownloadOffset = 0
+let sessionDir: FileSystemDirectoryHandle | null = null
+let useMemory = false
+const memoryChunks = new Map<number, Uint8Array>()
+
+async function getSessionDir(): Promise<FileSystemDirectoryHandle> {
+  if (!sessionDir) {
+    const root = await navigator.storage.getDirectory()
+    sessionDir = await root.getDirectoryHandle(SESSION_DIR, {create: true})
+  }
+  return sessionDir
+}
+
+async function sweepStale() {
+  const root = await navigator.storage.getDirectory()
+  const oneHourAgo = Date.now() - 3600_000
+  for await (const [name] of (root as any).entries()) {
+    if (!name.startsWith('session-')) continue
+    const parts = name.split('-')
+    const ts = parseInt(parts[1], 10)
+    if (!isNaN(ts) && ts < oneHourAgo) {
+      try { await root.removeEntry(name, {recursive: true}) } catch (_) {}
+    }
+  }
+}
+
+// ── Message handlers ────────────────────────────────────────────
+
+async function handleEncrypt(id: number, data: ArrayBuffer, fileName: string) {
+  const source = new Uint8Array(data)
+  const key = new Uint8Array(32)
+  const nonce = new Uint8Array(24)
+  crypto.getRandomValues(key)
+  crypto.getRandomValues(nonce)
+  const fileHdr = encodeFileHeader({fileName, fileExtra: null})
+  const fileSize = BigInt(fileHdr.length + source.length)
+  const payloadSize = Number(fileSize) + fileSizeLen + authTagSize
+  const chunkSizes = prepareChunkSizes(payloadSize)
+  const encSize = BigInt(chunkSizes.reduce((a: number, b: number) => a + b, 0))
+  const encData = encryptFile(source, fileHdr, key, nonce, fileSize, encSize)
+
+  self.postMessage({id, type: 'progress', done: 50, total: 100})
+
+  const digest = sha512Streaming([encData])
+  console.log(`[WORKER-DBG] encrypt: encData.len=${encData.length} digest=${_whex(digest, 64)} chunkSizes=[${chunkSizes.join(',')}]`)
+
+  self.postMessage({id, type: 'progress', done: 80, total: 100})
+
+  // Write to OPFS
+  const dir = await getSessionDir()
+  const fileHandle = await dir.getFileHandle('upload.bin', {create: true})
+  const writeHandle = await fileHandle.createSyncAccessHandle()
+  const written = writeHandle.write(encData)
+  if (written !== encData.length) throw new Error(`OPFS upload write: ${written}/${encData.length}`)
+  writeHandle.flush()
+  writeHandle.close()
+
+  // Reopen as persistent read handle
+  uploadReadHandle = await fileHandle.createSyncAccessHandle()
+
+  self.postMessage({id, type: 'progress', done: 100, total: 100})
+  self.postMessage({id, type: 'encrypted', digest, key, nonce, chunkSizes})
+}
+
+function handleReadChunk(id: number, offset: number, size: number) {
+  if (!uploadReadHandle) {
+    self.postMessage({id, type: 'error', message: 'No upload file open'})
+    return
+  }
+  const buf = new Uint8Array(size)
+  uploadReadHandle.read(buf, {at: offset})
+  const ab = buf.buffer as ArrayBuffer
+  self.postMessage({id, type: 'chunk', data: ab}, [ab])
+}
+
+async function handleDecryptAndStore(
+  id: number, dhSecret: Uint8Array, nonce: Uint8Array,
+  body: ArrayBuffer, chunkDigest: Uint8Array, chunkNo: number
+) {
+  const bodyArr = new Uint8Array(body)
+  console.log(`[WORKER-DBG] store chunk=${chunkNo} body.len=${bodyArr.length} nonce=${_whex(nonce, 24)} dhSecret=${_whex(dhSecret)} digest=${_whex(chunkDigest, 32)} body[0..8]=${_whex(bodyArr)} body[-8..]=${_whex(bodyArr.slice(-8))}`)
+  const decrypted = decryptReceivedChunk(dhSecret, nonce, bodyArr, chunkDigest)
+  console.log(`[WORKER-DBG] decrypted chunk=${chunkNo} len=${decrypted.length} [0..8]=${_whex(decrypted)} [-8..]=${_whex(decrypted.slice(-8))}`)
+
+  if (useMemory) {
+    memoryChunks.set(chunkNo, decrypted)
+    self.postMessage({id, type: 'stored'})
+    return
+  }
+
+  if (!downloadWriteHandle) {
+    const dir = await getSessionDir()
+    const fileHandle = await dir.getFileHandle('download.bin', {create: true})
+    downloadWriteHandle = await fileHandle.createSyncAccessHandle()
+  }
+
+  const offset = currentDownloadOffset
+  currentDownloadOffset += decrypted.length
+  chunkMeta.set(chunkNo, {offset, size: decrypted.length})
+  const written = downloadWriteHandle.write(decrypted, {at: offset})
+  console.log(`[WORKER-DBG] OPFS write chunk=${chunkNo} offset=${offset} size=${decrypted.length} written=${written}`)
+
+  if (written !== decrypted.length) {
+    console.warn(`[WORKER] OPFS write failed chunk=${chunkNo}: ${written}/${decrypted.length}, falling back to in-memory storage`)
+    // Migrate previously written chunks from OPFS to memory
+    for (const [cn, meta] of chunkMeta.entries()) {
+      if (cn === chunkNo) continue
+      const buf = new Uint8Array(meta.size)
+      downloadWriteHandle.read(buf, {at: meta.offset})
+      memoryChunks.set(cn, buf)
+    }
+    downloadWriteHandle.close()
+    downloadWriteHandle = null
+    try {
+      const dir = await getSessionDir()
+      await dir.removeEntry('download.bin')
+    } catch (_) {}
+    chunkMeta.clear()
+    currentDownloadOffset = 0
+    memoryChunks.set(chunkNo, decrypted)
+    useMemory = true
+    self.postMessage({id, type: 'stored'})
+    return
+  }
+
+  downloadWriteHandle.flush()
+
+  // Verify: read back and compare first/last 8 bytes
+  const verifyBuf = new Uint8Array(Math.min(8, decrypted.length))
+  downloadWriteHandle.read(verifyBuf, {at: offset})
+  const verifyEnd = new Uint8Array(Math.min(8, decrypted.length))
+  downloadWriteHandle.read(verifyEnd, {at: offset + decrypted.length - verifyEnd.length})
+  console.log(`[WORKER-DBG] OPFS verify chunk=${chunkNo} readBack[0..8]=${_whex(verifyBuf)} readBack[-8..]=${_whex(verifyEnd)} expected[0..8]=${_whex(decrypted)} expected[-8..]=${_whex(decrypted.slice(-8))}`)
+
+  self.postMessage({id, type: 'stored'})
+}
+
+async function handleVerifyAndDecrypt(
+  id: number, size: number, digest: Uint8Array, key: Uint8Array, nonce: Uint8Array
+) {
+  console.log(`[WORKER-DBG] verify: expectedSize=${size} expectedDigest=${_whex(digest, 64)} useMemory=${useMemory} chunkMeta.size=${chunkMeta.size} memoryChunks.size=${memoryChunks.size}`)
+
+  // Read chunks — from memory (fallback) or OPFS
+  const chunks: Uint8Array[] = []
+  let totalSize = 0
+  if (useMemory) {
+    const sorted = [...memoryChunks.entries()].sort((a, b) => a[0] - b[0])
+    for (const [chunkNo, data] of sorted) {
+      console.log(`[WORKER-DBG] verify memory chunk=${chunkNo} size=${data.length}`)
+      chunks.push(data)
+      totalSize += data.length
+    }
+  } else {
+    // Close write handle, reopen as read
+    if (downloadWriteHandle) {
+      downloadWriteHandle.flush()
+      downloadWriteHandle.close()
+      downloadWriteHandle = null
+    }
+    const dir = await getSessionDir()
+    const fileHandle = await dir.getFileHandle('download.bin')
+    const readHandle = await fileHandle.createSyncAccessHandle()
+    console.log(`[WORKER-DBG] verify: OPFS file size=${readHandle.getSize()}`)
+    const sortedEntries = [...chunkMeta.entries()].sort((a, b) => a[0] - b[0])
+    for (const [chunkNo, meta] of sortedEntries) {
+      const buf = new Uint8Array(meta.size)
+      const bytesRead = readHandle.read(buf, {at: meta.offset})
+      console.log(`[WORKER-DBG] verify read chunk=${chunkNo} offset=${meta.offset} size=${meta.size} bytesRead=${bytesRead} [0..8]=${_whex(buf)} [-8..]=${_whex(buf.slice(-8))}`)
+      chunks.push(buf)
+      totalSize += meta.size
+    }
+    readHandle.close()
+  }
+
+  if (totalSize !== size) {
+    self.postMessage({id, type: 'error', message: `File size mismatch: ${totalSize} !== ${size}`})
+    return
+  }
+
+  // Compute per-chunk SHA-512 incrementally to find divergence point
+  const state = sodium.crypto_hash_sha512_init()
+  for (let i = 0; i < chunks.length; i++) {
+    const chunk = chunks[i]
+    const SEG = 4 * 1024 * 1024
+    for (let off = 0; off < chunk.length; off += SEG) {
+      sodium.crypto_hash_sha512_update(state, chunk.subarray(off, Math.min(off + SEG, chunk.length)))
+    }
+  }
+  const actualDigest = sodium.crypto_hash_sha512_final(state)
+  if (!digestEqual(actualDigest, digest)) {
+    console.error(`[WORKER-DBG] DIGEST MISMATCH: expected=${_whex(digest, 64)} actual=${_whex(actualDigest, 64)} chunks=${chunks.length} totalSize=${totalSize}`)
+    // Log per-chunk incremental hash to find divergence
+    const state2 = sodium.crypto_hash_sha512_init()
+    for (let i = 0; i < chunks.length; i++) {
+      const chunk = chunks[i]
+      const SEG = 4 * 1024 * 1024
+      for (let off = 0; off < chunk.length; off += SEG) {
+        sodium.crypto_hash_sha512_update(state2, chunk.subarray(off, Math.min(off + SEG, chunk.length)))
+      }
+      // snapshot incremental hash (create temp copy of state)
+      const chunkDigest = sha512Streaming([chunk])
+      console.error(`[WORKER-DBG] chunk[${i}] size=${chunk.length} sha512=${_whex(chunkDigest, 32)}… [0..8]=${_whex(chunk)} [-8..]=${_whex(chunk.slice(-8))}`)
+    }
+    self.postMessage({id, type: 'error', message: 'File digest mismatch'})
+    return
+  }
+  console.log(`[WORKER-DBG] verify: digest OK`)
+
+  // File-level decrypt
+  const result = decryptChunks(BigInt(size), chunks, key, nonce)
+
+  // Clean up download state
+  if (!useMemory) {
+    const dir = await getSessionDir()
+    try { await dir.removeEntry('download.bin') } catch (_) {}
+  }
+  chunkMeta.clear()
+  memoryChunks.clear()
+  currentDownloadOffset = 0
+  useMemory = false
+
+  const contentBuf = result.content.buffer.slice(
+    result.content.byteOffset,
+    result.content.byteOffset + result.content.byteLength
+  )
+  self.postMessage(
+    {id, type: 'decrypted', header: result.header, content: contentBuf},
+    [contentBuf]
+  )
+}
+
+async function handleCleanup(id: number) {
+  if (uploadReadHandle) {
+    uploadReadHandle.close()
+    uploadReadHandle = null
+  }
+  if (downloadWriteHandle) {
+    downloadWriteHandle.close()
+    downloadWriteHandle = null
+  }
+  chunkMeta.clear()
+  memoryChunks.clear()
+  currentDownloadOffset = 0
+  useMemory = false
+  try {
+    const root = await navigator.storage.getDirectory()
+    await root.removeEntry(SESSION_DIR, {recursive: true})
+  } catch (_) {}
+  sessionDir = null
+  self.postMessage({id, type: 'cleaned'})
+}
+
+// ── Message dispatch ────────────────────────────────────────────
+
+self.onmessage = async (e: MessageEvent) => {
+  await initPromise
+  const msg = e.data
+  try {
+    switch (msg.type) {
+      case 'encrypt':
+        await handleEncrypt(msg.id, msg.data, msg.fileName)
+        break
+      case 'readChunk':
+        handleReadChunk(msg.id, msg.offset, msg.size)
+        break
+      case 'decryptAndStoreChunk':
+        await handleDecryptAndStore(msg.id, msg.dhSecret, msg.nonce, msg.body, msg.chunkDigest, msg.chunkNo)
+        break
+      case 'verifyAndDecrypt':
+        await handleVerifyAndDecrypt(msg.id, msg.size, msg.digest, msg.key, msg.nonce)
+        break
+      case 'cleanup':
+        await handleCleanup(msg.id)
+        break
+      default:
+        self.postMessage({id: msg.id, type: 'error', message: `Unknown message type: ${msg.type}`})
+    }
+  } catch (err: any) {
+    self.postMessage({id: msg.id, type: 'error', message: err?.message ?? String(err)})
+  }
+}
+
+// ── Helpers ─────────────────────────────────────────────────────
+
+function _whex(b: Uint8Array, n = 8): string {
+  return Array.from(b.slice(0, n)).map(x => x.toString(16).padStart(2, '0')).join('')
+}
+
+function digestEqual(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.length !== b.length) return false
+  let diff = 0
+  for (let i = 0; i < a.length; i++) diff |= a[i] ^ b[i]
+  return diff === 0
+}
+
+// ── Init ────────────────────────────────────────────────────────
+
+const initPromise = (async () => {
+  await sodium.ready
+  await sweepStale()
+})()

package/web/download.ts

@@ -0,0 +1,140 @@
+import {createCryptoBackend} from './crypto-backend.js'
+import {createProgressRing} from './progress.js'
+import {
+  newXFTPAgent, closeXFTPAgent,
+  decodeDescriptionURI, downloadFileRaw
+} from '../src/agent.js'
+import {XFTPPermanentError} from '../src/client.js'
+
+export function initDownload(app: HTMLElement, hash: string) {
+  let fd: ReturnType<typeof decodeDescriptionURI>
+  try {
+    fd = decodeDescriptionURI(hash)
+  } catch (err: any) {
+    app.innerHTML = `<div class="card"><p class="error">Invalid or corrupted link.</p></div>`
+    return
+  }
+
+  const size = fd.redirect ? fd.redirect.size : fd.size
+  app.innerHTML = `
+    <div class="card">
+      <h1>SimpleX File Transfer</h1>
+      <div id="dl-ready" class="stage">
+        <p>File available (~${formatSize(size)})</p>
+        <button id="dl-btn" class="btn">Download</button>
+        <div class="security-note">
+          <p>This file is encrypted — the server never sees file contents.</p>
+          <p>The decryption key is in the link's hash fragment, which your browser never sends to any server.</p>
+          <p>For maximum security, use the <a href="https://simplex.chat" target="_blank" rel="noopener">SimpleX app</a>.</p>
+        </div>
+      </div>
+      <div id="dl-progress" class="stage" hidden>
+        <div id="dl-progress-container"></div>
+        <p id="dl-status">Downloading…</p>
+      </div>
+      <div id="dl-error" class="stage" hidden>
+        <p class="error" id="dl-error-msg"></p>
+        <button id="dl-retry-btn" class="btn">Retry</button>
+      </div>
+    </div>`
+
+  const readyStage = document.getElementById('dl-ready')!
+  const progressStage = document.getElementById('dl-progress')!
+  const errorStage = document.getElementById('dl-error')!
+  const progressContainer = document.getElementById('dl-progress-container')!
+  const statusText = document.getElementById('dl-status')!
+  const dlBtn = document.getElementById('dl-btn')!
+  const errorMsg = document.getElementById('dl-error-msg')!
+  const retryBtn = document.getElementById('dl-retry-btn')!
+
+  function showStage(stage: HTMLElement) {
+    for (const s of [readyStage, progressStage, errorStage]) s.hidden = true
+    stage.hidden = false
+  }
+
+  function showError(msg: string) {
+    errorMsg.textContent = msg
+    showStage(errorStage)
+  }
+
+  dlBtn.addEventListener('click', startDownload)
+  retryBtn.addEventListener('click', startDownload)
+
+  async function startDownload() {
+    showStage(progressStage)
+    const ring = createProgressRing()
+    progressContainer.innerHTML = ''
+    progressContainer.appendChild(ring.canvas)
+    statusText.textContent = 'Downloading…'
+
+    const backend = createCryptoBackend()
+    const agent = newXFTPAgent()
+
+    try {
+      const resolvedFd = await downloadFileRaw(agent, fd, async (raw) => {
+        await backend.decryptAndStoreChunk(
+          raw.dhSecret, raw.nonce, raw.body, raw.digest, raw.chunkNo
+        )
+      }, {
+        onProgress: (downloaded, total) => {
+          ring.update(downloaded / total * 0.8)
+        }
+      })
+
+      statusText.textContent = 'Decrypting…'
+      ring.update(0.85)
+
+      const {header, content} = await backend.verifyAndDecrypt({
+        size: resolvedFd.size,
+        digest: resolvedFd.digest,
+        key: resolvedFd.key,
+        nonce: resolvedFd.nonce
+      })
+
+      ring.update(0.95)
+
+      // Sanitize filename and trigger browser save
+      const fileName = sanitizeFileName(header.fileName)
+      const blob = new Blob([content.buffer as ArrayBuffer])
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = encodeURIComponent(fileName)
+      a.style.display = 'none'
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      setTimeout(() => URL.revokeObjectURL(url), 1000)
+
+      ring.update(1)
+      statusText.textContent = 'Download complete'
+    } catch (err: any) {
+      const msg = err?.message ?? String(err)
+      showError(msg)
+      if (err instanceof XFTPPermanentError) retryBtn.hidden = true
+      else retryBtn.hidden = false
+    } finally {
+      await backend.cleanup().catch(() => {})
+      closeXFTPAgent(agent)
+    }
+  }
+}
+
+function sanitizeFileName(name: string): string {
+  let s = name
+  // Strip path separators
+  s = s.replace(/[/\\]/g, '')
+  // Replace null/control characters
+  s = s.replace(/[\x00-\x1f\x7f]/g, '_')
+  // Strip Unicode bidi override characters
+  s = s.replace(/[\u202a-\u202e\u2066-\u2069]/g, '')
+  // Limit length
+  if (s.length > 255) s = s.slice(0, 255)
+  return s || 'download'
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+}

package/web/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline'; connect-src 'self' __CSP_CONNECT_SRC__;">
+  <title>SimpleX File Transfer</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

package/web/main.ts

@@ -0,0 +1,30 @@
+import sodium from 'libsodium-wrappers-sumo'
+import {initUpload} from './upload.js'
+import {initDownload} from './download.js'
+
+async function main() {
+  await sodium.ready
+  initApp()
+
+  // Handle hash changes (SPA navigation)
+  window.addEventListener('hashchange', initApp)
+}
+
+function initApp() {
+  const app = document.getElementById('app')!
+  const hash = window.location.hash.slice(1)
+
+  if (hash) {
+    initDownload(app, hash)
+  } else {
+    initUpload(app)
+  }
+}
+
+main().catch(err => {
+  const app = document.getElementById('app')
+  if (app) {
+    app.innerHTML = `<div class="error"><p>Failed to initialize: ${err.message}</p></div>`
+  }
+  console.error(err)
+})

package/web/progress.ts

@@ -0,0 +1,52 @@
+const SIZE = 120
+const LINE_WIDTH = 8
+const RADIUS = (SIZE - LINE_WIDTH) / 2
+const CENTER = SIZE / 2
+const BG_COLOR = '#e0e0e0'
+const FG_COLOR = '#3b82f6'
+
+export interface ProgressRing {
+  canvas: HTMLCanvasElement
+  update(fraction: number): void
+}
+
+export function createProgressRing(): ProgressRing {
+  const canvas = document.createElement('canvas')
+  canvas.width = SIZE * devicePixelRatio
+  canvas.height = SIZE * devicePixelRatio
+  canvas.style.width = SIZE + 'px'
+  canvas.style.height = SIZE + 'px'
+  canvas.className = 'progress-ring'
+  const ctx = canvas.getContext('2d')!
+  ctx.scale(devicePixelRatio, devicePixelRatio)
+
+  function draw(fraction: number) {
+    ctx.clearRect(0, 0, SIZE, SIZE)
+    // Background arc
+    ctx.beginPath()
+    ctx.arc(CENTER, CENTER, RADIUS, 0, 2 * Math.PI)
+    ctx.strokeStyle = BG_COLOR
+    ctx.lineWidth = LINE_WIDTH
+    ctx.lineCap = 'round'
+    ctx.stroke()
+    // Foreground arc
+    if (fraction > 0) {
+      ctx.beginPath()
+      ctx.arc(CENTER, CENTER, RADIUS, -Math.PI / 2, -Math.PI / 2 + 2 * Math.PI * fraction)
+      ctx.strokeStyle = FG_COLOR
+      ctx.lineWidth = LINE_WIDTH
+      ctx.lineCap = 'round'
+      ctx.stroke()
+    }
+    // Percentage text
+    const pct = Math.round(fraction * 100)
+    ctx.fillStyle = '#333'
+    ctx.font = '600 20px system-ui, sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(pct + '%', CENTER, CENTER)
+  }
+
+  draw(0)
+  return {canvas, update: draw}
+}

package/web/servers.json

@@ -0,0 +1,18 @@
+{
+  "simplex": [
+    "xftp://da1aH3nOT-9G8lV7bWamhxpDYdJ1xmW7j3JpGaDR5Ug=@xftp1.simplex.im",
+    "xftp://5vog2Imy1ExJB_7zDZrkV1KDWi96jYFyy9CL6fndBVw=@xftp2.simplex.im",
+    "xftp://PYa32DdYNFWi0uZZOprWQoQpIk5qyjRJ3EF7bVpbsn8=@xftp3.simplex.im",
+    "xftp://k_GgQl40UZVV0Y4BX9ZTyMVqX5ZewcLW0waQIl7AYDE=@xftp4.simplex.im",
+    "xftp://-bIo6o8wuVc4wpZkZD3tH-rCeYaeER_0lz1ffQcSJDs=@xftp5.simplex.im",
+    "xftp://6nSvtY9pJn6PXWTAIMNl95E1Kk1vD7FM2TeOA64CFLg=@xftp6.simplex.im"
+  ],
+  "flux": [
+    "xftp://92Sctlc09vHl_nAqF2min88zKyjdYJ9mgxRCJns5K2U=@xftp1.simplexonflux.com",
+    "xftp://YBXy4f5zU1CEhnbbCzVWTNVNsaETcAGmYqGNxHntiE8=@xftp2.simplexonflux.com",
+    "xftp://ARQO74ZSvv2OrulRF3CdgwPz_AMy27r0phtLSq5b664=@xftp3.simplexonflux.com",
+    "xftp://ub2jmAa9U0uQCy90O-fSUNaYCj6sdhl49Jh3VpNXP58=@xftp4.simplexonflux.com",
+    "xftp://Rh19D5e4Eez37DEE9hAlXDB3gZa1BdFYJTPgJWPO9OI=@xftp5.simplexonflux.com",
+    "xftp://0AznwoyfX8Od9T_acp1QeeKtxUi676IBIiQjXVwbdyU=@xftp6.simplexonflux.com"
+  ]
+}

package/web/servers.ts

@@ -0,0 +1,16 @@
+import {parseXFTPServer, type XFTPServer} from '../src/protocol/address.js'
+
+// __XFTP_SERVERS__ is injected at build time by vite.config.ts
+// In development mode: test server from globalSetup
+// In production mode: preset servers from servers.json
+declare const __XFTP_SERVERS__: string[]
+
+const serverAddresses: string[] = __XFTP_SERVERS__
+
+export function getServers(): XFTPServer[] {
+  return serverAddresses.map(parseXFTPServer)
+}
+
+export function pickRandomServer(servers: XFTPServer[]): XFTPServer {
+  return servers[Math.floor(Math.random() * servers.length)]
+}

package/web/style.css

@@ -0,0 +1,103 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  background: #f5f5f5;
+  color: #333;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#app {
+  width: 100%;
+  max-width: 480px;
+  padding: 16px;
+}
+
+.card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 32px 24px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.1);
+  text-align: center;
+}
+
+h1 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+
+.stage { margin-top: 16px; }
+
+/* Drop zone */
+.drop-zone {
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  padding: 32px 16px;
+  transition: border-color .15s, background .15s;
+}
+.drop-zone.drag-over {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+/* Buttons */
+.btn {
+  display: inline-block;
+  padding: 10px 24px;
+  border: none;
+  border-radius: 6px;
+  background: #3b82f6;
+  color: #fff;
+  font-size: .9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background .15s;
+}
+.btn:hover { background: #2563eb; }
+.btn-secondary { background: #6b7280; }
+.btn-secondary:hover { background: #4b5563; }
+
+/* Hints */
+.hint { color: #999; font-size: .85rem; margin-top: 8px; }
+.expiry { margin-top: 12px; }
+
+/* Progress */
+.progress-ring { display: block; margin: 0 auto 12px; }
+#upload-status, #dl-status { font-size: .9rem; color: #666; margin-bottom: 12px; }
+
+/* Share link row */
+.link-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+.link-row input {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: .85rem;
+  background: #f9fafb;
+}
+
+/* Messages */
+.success { color: #16a34a; font-weight: 600; }
+.error { color: #dc2626; font-weight: 500; margin-bottom: 12px; }
+
+/* Security note */
+.security-note {
+  margin-top: 20px;
+  padding: 12px;
+  background: #f0fdf4;
+  border-radius: 6px;
+  font-size: .8rem;
+  color: #555;
+  text-align: left;
+}
+.security-note p + p { margin-top: 6px; }
+.security-note a { color: #3b82f6; text-decoration: none; }
+.security-note a:hover { text-decoration: underline; }