feat(web): wire the SPA to the live bus via the gateway (drop mock)

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>

web/src/ChatShell.tsx

@@ -1,9 +1,9 @@
-import { useState } from "react";
-import { Flex, Box } from "@mantine/core";
+import { useCallback, useEffect, useState } from "react";
+import { Flex, Box, Center, Loader, Stack, Text, Button } from "@mantine/core";
 import { Sidebar } from "./Sidebar";
 import { ChatPanel } from "./ChatPanel";
-import { MOCK_ROOMS } from "./mock";
-import type { User } from "./types";
+import { api } from "./api";
+import type { Room, User } from "./types";
 
 export function ChatShell({
   user,
@@ -12,10 +12,59 @@ export function ChatShell({
   user: User;
   onLogout: () => void;
 }) {
-  const [rooms] = useState(MOCK_ROOMS);
-  const [activeId, setActiveId] = useState<string>(rooms[0]?.id ?? "");
+  const [rooms, setRooms] = useState<Room[]>([]);
+  const [activeId, setActiveId] = useState<string>("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    api
+      .listRooms()
+      .then((rs) => {
+        setRooms(rs);
+        setActiveId((cur) => cur || rs[0]?.id || "");
+        setError(null);
+      })
+      .catch((e) => setError(e?.message ?? "No se pudieron cargar las rooms"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
   const active = rooms.find((r) => r.id === activeId);
 
+  // El panel derecho muestra el estado de carga/error/empty sin tocar el layout.
+  let panel = <ChatPanel room={active} />;
+  if (loading && rooms.length === 0) {
+    panel = (
+      <Center h="100%">
+        <Loader color="brand" />
+      </Center>
+    );
+  } else if (error) {
+    panel = (
+      <Center h="100%">
+        <Stack align="center" gap="sm">
+          <Text c="red" size="sm">
+            {error}
+          </Text>
+          <Button variant="light" color="brand" onClick={load}>
+            Reintentar
+          </Button>
+        </Stack>
+      </Center>
+    );
+  } else if (rooms.length === 0) {
+    panel = (
+      <Center h="100%">
+        <Text c="dimmed">No perteneces a ninguna room todavía</Text>
+      </Center>
+    );
+  }
+
   return (
     <Flex h="100vh" w="100vw" style={{ overflow: "hidden" }}>
       <Box
@@ -36,7 +85,7 @@ export function ChatShell({
         />
       </Box>
       <Box flex={1} h="100%" bg="dark.7" style={{ minWidth: 0 }}>
-        <ChatPanel room={active} user={user} />
+        {panel}
       </Box>
     </Flex>
   );