feat: Phase 9 — Web client SPA with WebRTC P2P transport

Complete browser-based client: Preact SPA with login, group file browser,
encrypted download, video playback, group chat, i18n, and dark/light theme.
Browser connects P2P to nodes behind residential NAT via WebRTC DataChannel
(aiortc). Hub handles signaling only — all data flows E2E.

Performance: pipelined downloads (8-chunk sliding window), binary msgpack
wire format (no base64), redundant I/O elimination. Large file downloads
stream to disk via File System Access API (showSaveFilePicker).

Validated on SFR + Orange residential NATs, Chrome + Firefox, IPv4/IPv6.
132 tests passing. Deployed to meshbay.org + Orange node.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

1 files changed, 15 insertions, 58 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
index 6005927..62917f4 100644
--- a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
+++ b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
@@ -1,47 +1,26 @@
 """
-Hub web application — serves the MeshBay web client at /.
+Hub web application — serves the MeshBay SPA and static assets.
 
-The web client (HTML/JS) is a single-page app that:
-  - Logs in via the hub API
-  - Discovers public groups
-  - Connects to a node URL entered by the user
-  - Browses the node's file index
-  - Downloads or streams files via the node HTTP API
+The SPA (Preact + htm) handles:
+  - Authentication (login, register, token refresh)
+  - Group discovery and browsing
+  - WebRTC connection to nodes for P2P file transfer
+  - Dark/light theme with system preference detection
 
-Static files are served from meshbay_hub/static/.
-API routes remain at /v1/*.
+Static files are served from meshbay_hub/static/ via Starlette StaticFiles.
+The root route (/) returns the SPA HTML shell.
 """
 
 from pathlib import Path
 
 from fastapi import APIRouter
-from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.responses import HTMLResponse
 
 STATIC_DIR = Path(__file__).parent.parent / "static"
 
 router = APIRouter(tags=["webapp"])
 
 
-@router.get("/app.js")
-async def app_js():
-    return FileResponse(STATIC_DIR / "app.js", media_type="application/javascript")
-
-
-@router.get("/transport.js")
-async def transport_js():
-    return FileResponse(STATIC_DIR / "transport.js", media_type="application/javascript")
-
-
-@router.get("/crypto.js")
-async def crypto_js():
-    return FileResponse(STATIC_DIR / "crypto.js", media_type="application/javascript")
-
-
-@router.get("/webrtc-test.html")
-async def webrtc_test():
-    return FileResponse(STATIC_DIR / "webrtc-test.html", media_type="text/html")
-
-
 @router.get("/", response_class=HTMLResponse)
 async def index():
     return HTMLResponse(_HTML)
@@ -54,36 +33,14 @@ _HTML = """\
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>MeshBay</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; }
-    body { font-family: system-ui, sans-serif; margin: 0; background: #f8fafc; color: #1e293b; }
-    #nav { background: #0f172a; color: #e2e8f0; padding: 12px 24px; }
-    #nav b { color: #38bdf8; font-size: 1.2em; }
-    #main { max-width: 960px; margin: 32px auto; padding: 0 16px; }
-    h2 { color: #0f172a; margin-top: 1.5em; }
-    input { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px;
-            font-size: 1em; margin: 4px; }
-    button { padding: 8px 16px; background: #0ea5e9; color: #fff; border: none;
-             border-radius: 6px; cursor: pointer; font-size: 0.9em; margin: 4px; }
-    button:hover { background: #0284c7; }
-    .card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
-            padding: 16px; margin: 8px 0; cursor: pointer; }
-    .card:hover { border-color: #0ea5e9; }
-    .badge { background: #e0f2fe; color: #0284c7; padding: 2px 8px;
-             border-radius: 12px; font-size: 0.8em; margin-left: 8px; }
-    table { width: 100%; border-collapse: collapse; background: #fff;
-            border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
-    th { background: #f1f5f9; padding: 10px; text-align: left; }
-    td { padding: 10px; border-top: 1px solid #f1f5f9; }
-    video { border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
-    a { color: #0ea5e9; text-decoration: none; }
-    a:hover { text-decoration: underline; }
-  </style>
+  <link rel="stylesheet" href="/style.css">
 </head>
 <body>
-  <div id="nav"></div>
-  <div id="main"><p>Loading…</p></div>
-  <script src="/app.js"></script>
+  <div id="app"></div>
+  <script src="/keyderive.js"></script>
+  <script src="/crypto.js"></script>
+  <script src="/transport.js"></script>
+  <script type="module" src="/app.js"></script>
 </body>
 </html>
 """