feat: simplify journal connection via WebSocket upgrade

Refactor the journal server to run over WebSockets on the existing
HTTP server instead of a separate MQTT TCP port. This removes the need
for a separate port configuration and simplifies the connection flow
by auto-connecting to the current host.

- Remove `--mqtt-port` CLI option
- Attach Aedes broker to the HTTP server via WebSocket upgrade
- Update UI to remove manual broker URL and player name inputs
- Add "Content Source" access from the sidebar
- Update JournalPanel to auto-connect to the local server

src/components/journal/ConnectionBar.tsx

@@ -1,65 +1,26 @@
 /**
- * ConnectionBar — connect form, session picker, player name
- *
- * Three states: disconnected → connecting → connected
+ * ConnectionBar — session picker, player info (connected state only)
  */
 
-import { Component, createSignal, Show, For, onMount } from "solid-js";
+import { Component, createSignal, Show, For } from "solid-js";
 import {
-  connectStream,
   hydrateFromServer,
   useJournalStream,
   sessions,
-  setMyName,
   createSession,
   deleteSession,
+  disconnectStream,
 } from "../stores/journalStream";
-import type { SessionMeta } from "../stores/journalStream";
-import { createMemo } from "solid-js";
-
-// Direct access to the store's setter for session switching
 import { journalSetState } from "../stores/journalStream";
 
 export const ConnectionBar: Component = () => {
   const stream = useJournalStream();
-  const [brokerUrl, setBrokerUrl] = createSignal("");
   const [newSessionName, setNewSessionName] = createSignal("");
-  const [playerName, setPlayerName] = createSignal("");
-  const [connecting, setConnecting] = createSignal(false);
-  const [error, setError] = createSignal<string | null>(null);
   const [showNewSession, setShowNewSession] = createSignal(false);
-
-  onMount(() => {
-    setBrokerUrl(stream.brokerUrl ?? "");
-    setPlayerName(stream.myName);
-  });
+  const [error, setError] = createSignal<string | null>(null);
 
   const manifest = sessions;
 
-  const handleConnect = async () => {
-    const url = brokerUrl().trim();
-    if (!url) return;
-
-    setConnecting(true);
-    setError(null);
-
-    try {
-      // Save name first
-      if (playerName().trim()) {
-        setMyName(playerName().trim());
-      }
-
-      // Connect
-      const sessionId = stream.sessionId || "default";
-      await hydrateFromServer(sessionId);
-      await connectStream(sessionId, url);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Connection failed");
-    } finally {
-      setConnecting(false);
-    }
-  };
-
   const handleCreateSession = () => {
     const name = newSessionName().trim();
     if (!name) return;
@@ -75,7 +36,6 @@ export const ConnectionBar: Component = () => {
   };
 
   const handleSessionSelect = async (id: string) => {
-    if (!stream.connected) return;
     try {
       await hydrateFromServer(id);
       journalSetState("sessionId", id);
@@ -84,74 +44,36 @@ export const ConnectionBar: Component = () => {
     }
   };
 
-  const statusColor = () =>
-    stream.connected
-      ? "bg-green-500"
-      : connecting()
-        ? "bg-yellow-400"
-        : "bg-gray-400";
+  const handleDisconnect = () => {
+    disconnectStream();
+  };
 
   return (
-    <div class="border-b border-gray-200 p-3 space-y-2 text-sm">
-      {/* Status + session name */}
+    <div class="border-b border-gray-200 px-3 py-2 space-y-2 text-sm">
+      {/* Status row */}
       <div class="flex items-center gap-2">
-        <span class={`w-2 h-2 rounded-full ${statusColor()}`} />
-        <span class="text-xs text-gray-500">
-          {stream.connected
-            ? "connected"
-            : connecting()
-              ? "connecting..."
-              : "disconnected"}
-        </span>
+        <span class="w-2 h-2 rounded-full bg-green-500" />
+        <span class="text-xs text-gray-500">connected</span>
         <Show when={stream.sessionId}>
           <span class="text-xs font-mono bg-gray-100 px-1.5 py-0.5 rounded">
             {stream.sessionId}
           </span>
         </Show>
         <div class="flex-1" />
-        <Show when={stream.connected}>
-          <button
-            onClick={() => {} /* disconnect */}
-            class="text-xs text-gray-400 hover:text-red-500"
-            title="Disconnect"
-          >
-            ⏻
-          </button>
+        <Show when={stream.myName !== "gm"}>
+          <span class="text-xs text-gray-400">Playing as {stream.myName}</span>
         </Show>
+        <button
+          onClick={handleDisconnect}
+          class="text-xs text-gray-400 hover:text-red-500"
+          title="Disconnect"
+        >
+          ⏻
+        </button>
       </div>
 
-      {/* Disconnected: connect form */}
-      <Show when={!stream.connected}>
-        <div class="space-y-2">
-          <input
-            type="text"
-            value={brokerUrl()}
-            onInput={(e) => setBrokerUrl(e.currentTarget.value)}
-            placeholder="MQTT broker (e.g. tcp://192.168.1.5:1883)"
-            class="w-full border border-gray-300 rounded px-2 py-1 text-xs"
-          />
-          <input
-            type="text"
-            value={playerName()}
-            onInput={(e) => setPlayerName(e.currentTarget.value)}
-            placeholder="Your name (GM or player)"
-            class="w-full border border-gray-300 rounded px-2 py-1 text-xs"
-          />
-          <button
-            onClick={handleConnect}
-            disabled={connecting() || !brokerUrl().trim()}
-            class="w-full bg-blue-600 text-white rounded px-3 py-1 text-xs hover:bg-blue-700 disabled:opacity-50"
-          >
-            {connecting() ? "Connecting..." : "Connect"}
-          </button>
-          <Show when={error()}>
-            <p class="text-red-500 text-xs">{error()}</p>
-          </Show>
-        </div>
-      </Show>
-
-      {/* Connected: session management (GM only) */}
-      <Show when={stream.connected && stream.myName === "gm"}>
+      {/* GM session management */}
+      <Show when={stream.myName === "gm"}>
         <div class="space-y-1">
           <div class="flex items-center gap-1">
             <span class="text-xs text-gray-500">Sessions:</span>
@@ -213,12 +135,8 @@ export const ConnectionBar: Component = () => {
         </div>
       </Show>
 
-      {/* Connected: player info (player only) */}
-      <Show when={stream.connected && stream.myName !== "gm"}>
-        <div class="flex items-center gap-1 text-xs text-gray-500">
-          <span>Playing as:</span>
-          <span class="font-medium text-gray-700">{stream.myName}</span>
-        </div>
+      <Show when={error()}>
+        <p class="text-red-500 text-xs">{error()}</p>
       </Show>
     </div>
   );