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/Sidebar.tsx

@@ -8,6 +8,7 @@ export interface SidebarProps {
   onClose: () => void;
   fileTree?: FileNode[];
   pathHeadings?: Record<string, TocNode[]>;
+  onDataSourceOpen?: () => void;
 }
 
 interface SidebarContentProps {
@@ -16,6 +17,7 @@ interface SidebarContentProps {
   currentPath: string;
   onClose: () => void;
   isDesktop?: boolean;
+  onDataSourceOpen?: () => void;
 }
 
 /**
@@ -37,15 +39,24 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
       <div class="p-4 border-b border-b-gray-200">
         <div class="flex items-center justify-between">
           <h2 class="text-lg font-bold text-gray-900">目录</h2>
-          <Show when={!props.isDesktop}>
+          <div class="flex items-center gap-1">
             <button
-              onClick={props.onClose}
-              class="text-gray-500 hover:text-gray-700"
-              title="关闭"
+              onClick={props.onDataSourceOpen}
+              class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100"
+              title="Content Source"
             >
-              ✕
+              📂
             </button>
-          </Show>
+            <Show when={!props.isDesktop}>
+              <button
+                onClick={props.onClose}
+                class="text-gray-500 hover:text-gray-700"
+                title="关闭"
+              >
+                ✕
+              </button>
+            </Show>
+          </div>
         </div>
       </div>
 
@@ -121,6 +132,7 @@ export const MobileSidebar: Component<SidebarProps> = (props) => {
           pathHeadings={pathHeadings()}
           currentPath={location.pathname}
           onClose={props.onClose}
+          onDataSourceOpen={props.onDataSourceOpen}
         />
       </aside>
     </>
@@ -133,6 +145,7 @@ export const MobileSidebar: Component<SidebarProps> = (props) => {
 export const DesktopSidebar: Component<{
   fileTree?: FileNode[];
   pathHeadings?: Record<string, TocNode[]>;
+  onDataSourceOpen?: () => void;
 }> = (props) => {
   const location = useLocation();
   const [selfFileTree, setSelfFileTree] = createSignal<FileNode[]>([]);
@@ -158,6 +171,7 @@ export const DesktopSidebar: Component<{
         currentPath={location.pathname}
         onClose={() => {}}
         isDesktop
+        onDataSourceOpen={props.onDataSourceOpen}
       />
     </aside>
   );

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>
   );

src/components/journal/JournalPanel.tsx

@@ -1,11 +1,17 @@
 /**
  * JournalPanel — right panel container for the journal stream
  *
- * Collapsible, overlays on mobile, pushes content on desktop.
+ * Fixed overlay. Shows stream when connected, connect dialog when not.
+ * Auto-connects to ws://{current host}:{current port} — no URL input needed.
  */
 
-import { Component, Show, createSignal } from "solid-js";
-import { useJournalStream } from "../stores/journalStream";
+import { Component, Show, createSignal, onMount } from "solid-js";
+import {
+  connectStream,
+  hydrateFromServer,
+  useJournalStream,
+  setMyName,
+} from "../stores/journalStream";
 import { ConnectionBar } from "./ConnectionBar";
 import { StreamView } from "./StreamView";
 import { ComposePanel } from "./ComposePanel";
@@ -20,22 +26,25 @@ export const JournalPanel: Component<JournalPanelProps> = (props) => {
 
   return (
     <Show when={props.open}>
-      {/* Mobile overlay */}
       <div
-        class="fixed inset-0 bg-black/30 z-40 md:hidden"
+        class="fixed inset-0 bg-black/30 z-40 md:bg-transparent"
         onClick={props.onClose}
       />
       <aside
-        class={`
-          fixed top-16 right-0 bottom-0 z-50 bg-white border-l border-gray-200
-          flex flex-col
-          w-full max-w-md md:w-[420px]
-          md:relative md:top-0 md:z-0
-        `}
+        class="fixed top-16 right-0 bottom-0 z-50 bg-white border-l border-gray-200
+               flex flex-col w-full max-w-md md:w-[420px] shadow-lg"
       >
         {/* Header */}
         <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200">
-          <h2 class="text-sm font-semibold text-gray-700">Journal</h2>
+          <div class="flex items-center gap-2">
+            <h2 class="text-sm font-semibold text-gray-700">Journal</h2>
+            <Show when={stream.connected}>
+              <span
+                class="w-2 h-2 rounded-full bg-green-500"
+                title="Connected"
+              />
+            </Show>
+          </div>
           <button
             onClick={props.onClose}
             class="text-gray-400 hover:text-gray-600 text-sm"
@@ -44,18 +53,92 @@ export const JournalPanel: Component<JournalPanelProps> = (props) => {
           </button>
         </div>
 
-        <ConnectionBar />
-
-        {/* Stream */}
-        <div class="flex-1 min-h-0">
-          <StreamView />
-        </div>
-
-        {/* Compose */}
-        <Show when={stream.connected}>
+        <Show
+          when={stream.connected}
+          fallback={
+            <div class="flex-1 flex items-center justify-center p-4">
+              <ConnectDialog />
+            </div>
+          }
+        >
+          <ConnectionBar />
+          <div class="flex-1 min-h-0">
+            <StreamView />
+          </div>
           <ComposePanel />
         </Show>
       </aside>
     </Show>
   );
 };
+
+// ---------------------------------------------------------------------------
+// Connect dialog — one input: player name. Broker URL is always current host.
+// ---------------------------------------------------------------------------
+
+const ConnectDialog: Component = () => {
+  const stream = useJournalStream();
+  const [playerName, setPlayerName] = createSignal(stream.myName);
+  const [connecting, setConnecting] = createSignal(false);
+  const [error, setError] = createSignal<string | null>(null);
+
+  // Auto-connect if we have a name from localStorage
+  onMount(() => {
+    if (stream.myName && stream.myName !== "gm") {
+      handleConnect();
+    }
+  });
+
+  const handleConnect = async () => {
+    const name = playerName().trim() || stream.myName;
+    if (!name) return;
+
+    const brokerUrl = `ws://${window.location.host}`;
+
+    setConnecting(true);
+    setError(null);
+
+    try {
+      setMyName(name);
+      const sessionId = stream.sessionId || "default";
+      await hydrateFromServer(sessionId);
+      await connectStream(sessionId, brokerUrl);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Connection failed");
+    } finally {
+      setConnecting(false);
+    }
+  };
+
+  return (
+    <div class="w-full max-w-sm space-y-3">
+      <p class="text-sm text-gray-600 text-center">
+        Enter your name to join the session.
+        <br />
+        <span class="text-xs text-gray-400">
+          Connecting to {window.location.host}
+        </span>
+      </p>
+      <input
+        type="text"
+        value={playerName()}
+        onInput={(e) => setPlayerName(e.currentTarget.value)}
+        onKeyDown={(e) => e.key === "Enter" && handleConnect()}
+        placeholder="Your name (GM or player)"
+        class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm"
+        autofocus
+      />
+      <button
+        onClick={handleConnect}
+        disabled={connecting() || !playerName().trim()}
+        class="w-full bg-blue-600 text-white rounded px-3 py-2 text-sm font-medium
+               hover:bg-blue-700 disabled:opacity-50"
+      >
+        {connecting() ? "Connecting..." : "Join"}
+      </button>
+      <Show when={error()}>
+        <p class="text-red-500 text-sm text-center">{error()}</p>
+      </Show>
+    </div>
+  );
+};