refactor: replace websocket-stream with native ws utility

Remove the `websocket-stream` dependency in favor of
`createWebSocketStream`
from the `ws` package. This simplifies the MQTT broker setup in the
journal server and removes unnecessary transitive dependencies.

Also improve the JournalPanel UI with smoother transitions and better
visibility handling.

src/components/stores/journalStream.ts

@@ -198,77 +198,82 @@ export async function connectStream(
   setState("connectionStatus", "connecting");
   setState("connectionError", null);
 
-  const client = mqtt.connect(brokerUrl, {
-    clientId: `${state.myName}-${Date.now()}`,
-    protocol: brokerUrl.startsWith("wss") ? "wss" : "ws",
-    reconnectPeriod: 2000,
-  });
-
-  _mqttClient = client;
-
-  client.on("connect", () => {
-    _mqttConnected = true;
-    setState("connected", true);
-    setState("connectionStatus", "connected");
-    setState("connectionError", null);
-    setState("brokerUrl", brokerUrl);
-
-    // Persist connection info for next time
-    if (typeof localStorage !== "undefined") {
-      localStorage.setItem(LS_BROKER_URL, brokerUrl);
-      localStorage.setItem(LS_LAST_SESSION, sessionId);
-    }
-
-    client.subscribe(`ttrpg/${sessionId}/stream`, { qos: 1 }, (err) => {
-      if (err) console.error("[stream] stream sub err:", err);
+  return new Promise<void>((resolve, reject) => {
+    const client = mqtt.connect(brokerUrl, {
+      clientId: `${state.myName}-${Date.now()}`,
+      protocol: brokerUrl.startsWith("wss") ? "wss" : "ws",
+      reconnectPeriod: 2000,
     });
-    client.subscribe($SESSIONS, { qos: 1 }, (err) => {
-      if (err) console.error("[stream] sessions sub err:", err);
+
+    _mqttClient = client;
+
+    client.on("connect", () => {
+      _mqttConnected = true;
+      setState("connected", true);
+      setState("connectionStatus", "connected");
+      setState("connectionError", null);
+      setState("brokerUrl", brokerUrl);
+
+      // Persist connection info for next time
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(LS_BROKER_URL, brokerUrl);
+        localStorage.setItem(LS_LAST_SESSION, sessionId);
+      }
+
+      client.subscribe(`ttrpg/${sessionId}/stream`, { qos: 1 }, (err) => {
+        if (err) console.error("[stream] stream sub err:", err);
+      });
+      client.subscribe($SESSIONS, { qos: 1 }, (err) => {
+        if (err) console.error("[stream] sessions sub err:", err);
+      });
+      client.subscribe(`ttrpg/${sessionId}/meta`, { qos: 1 });
+
+      resolve();
     });
-    client.subscribe(`ttrpg/${sessionId}/meta`, { qos: 1 });
-  });
 
-  client.on("message", (topic, payload) => {
-    const raw = payload.toString();
-    const parts = topic.split("/");
+    client.on("error", (err) => {
+      console.error("[stream] mqtt error:", err);
+      setState("connectionStatus", "error");
+      setState("connectionError", err.message);
+      reject(err);
+    });
 
-    if (topic === $SESSIONS) {
-      // Session manifest update
-      try {
-        const manifest: SessionManifest = JSON.parse(raw);
-        setSessionList(manifest);
-      } catch (e) {
-        console.error("[stream] manifest parse err:", e);
+    client.on("close", () => {
+      _mqttConnected = false;
+      setState("connected", false);
+      setState("connectionStatus", "disconnected");
+    });
+
+    client.on("message", (topic, payload) => {
+      const raw = payload.toString();
+      const parts = topic.split("/");
+
+      if (topic === $SESSIONS) {
+        // Session manifest update
+        try {
+          const manifest: SessionManifest = JSON.parse(raw);
+          setSessionList(manifest);
+        } catch (e) {
+          console.error("[stream] manifest parse err:", e);
+        }
+        return;
       }
-      return;
-    }
 
-    if (parts.length >= 3 && parts[0] === "ttrpg" && parts[2] === "meta") {
-      // Session meta update — manifest will be republished by server,
-      // handled via $SESSIONS subscription above.
-      return;
-    }
-
-    if (parts.length >= 3 && parts[0] === "ttrpg" && parts[2] === "stream") {
-      try {
-        const msg: StreamMessage = JSON.parse(raw);
-        receiveMessage(msg);
-      } catch (e) {
-        console.error("[stream] malformed message:", e);
+      if (parts.length >= 3 && parts[0] === "ttrpg" && parts[2] === "meta") {
+        // Session meta update — manifest will be republished by server,
+        // handled via $SESSIONS subscription above.
+        return;
       }
-    }
-  });
 
-  client.on("close", () => {
-    _mqttConnected = false;
-    setState("connected", false);
-    setState("connectionStatus", "disconnected");
-  });
-
-  client.on("error", (err) => {
-    console.error("[stream] mqtt error:", err);
-    setState("connectionStatus", "error");
-    setState("connectionError", err.message);
+      if (parts.length >= 3 && parts[0] === "ttrpg" && parts[2] === "stream") {
+        try {
+          const msg: StreamMessage = JSON.parse(raw);
+          receiveMessage(msg);
+        } catch (e) {
+          console.error("[stream] malformed message:", e);
+        }
+      }
+    });
   });
 }