Replace the mock data source with a real data layer that talks to the webgw
gateway over REST + SSE. The UI components keep their look and props; only
where the data comes from changed.
- src/api.ts: the single repository layer. fetch wrappers (same-origin cookie)
for login/logout/me and rooms list/create/join/send, plus streamRoom() which
opens an EventSource and yields each decrypted message. Wire->UI mappers
(roomFromWire, messageFromWire).
- src/types.ts: add the gateway wire shapes (MeInfo, RoomWire, MsgWire) next to
the existing UI types.
- App.tsx: probe /api/me on mount to resume an existing session; otherwise show
Login. Logout calls the gateway.
- Login.tsx: the password field now unlocks the gateway session (operator
passphrase); shows a basic error and a loading state. Wallet-per-browser is
phase 2.
- ChatShell.tsx: load rooms from /api/rooms with loading / empty / error states;
same Flex layout.
- ChatPanel.tsx: stream messages over SSE for the active room (dedup by id),
composer sends through the gateway; no optimistic insert (the peer's own echo
returns over SSE with the real frame id).
- vite.config.ts: dev proxy /api (REST + SSE) -> the gateway on :8481.
mock.ts is left untouched (no longer imported) to avoid churn with the parallel
styling work on master.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
SPA React 19 + Vite + Mantine v9 en modo oscuro (acento índigo), datos mock para
iterar el diseño antes de cablear el gateway. Login con identidad + contraseña
(la contraseña desbloqueará la identidad Ed25519 cifrada en el dispositivo).
Sidebar: avatar de usuario, buscador (rooms/usuarios/mensajes) y lista de rooms
con candado E2E / hash cleartext / badges de no leídos. Panel de chat estilo
Element (avatar+nombre+hora+texto) con composer interactivo.
Limpieza de los frontends de prueba (SPA React, app Kotlin, gateway playground,
binding gomobile) tras la fase de exploración. El bus (cmd/membershipd + pkg/*)
queda intacto y verde. Empezamos un frontend web nuevo desde cero, construido
de forma incremental. Todo lo borrado permanece en el historial git por si hay
que recuperar algo.
Cliente web sobre el gateway (REST + SSE). El navegador no habla NATS ni
cripto: el peer Go del gateway lo hace.
- Pantalla de conexión: gateway URL + identidad (persistidas en localStorage).
- Navbar: crear room (con toggle de cifrado E2E), unirse por id, lista de rooms.
- Centro: mensajes en vivo por SSE, burbujas con autor y hora, composer.
- Lateral: miembros (rol owner), invitar por peer conectado, expulsar (owner).
- Mantine v9 (createTheme + MantineProvider), @tabler/icons-react, layout con
AppShell/Stack/Group; sin Tailwind ni CSS manual. React 19 (peer dep de v9).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
agent
egutierrez