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/journal/JournalPanel.tsx

@@ -25,17 +25,24 @@ export const JournalPanel: Component<JournalPanelProps> = (props) => {
   const stream = useJournalStream();
 
   return (
-    <Show when={props.open}>
+    <>
+      {/* Backdrop — hidden on desktop since panel doesn't overlay content */}
       <div
-        class="fixed inset-0 bg-black/30 z-40 md:bg-transparent"
+        class="fixed inset-0 bg-black/30 z-40 md:hidden"
+        classList={{ hidden: !props.open }}
         onClick={props.onClose}
       />
+      {/* Panel — always mounted for exit animation, visibility toggled */}
       <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] shadow-lg"
+        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
+               transition-transform duration-300 ease-in-out ${
+                 props.open ? "translate-x-0" : "translate-x-full"
+               }`}
+        aria-hidden={!props.open}
       >
         {/* Header */}
-        <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200">
+        <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 shrink-0">
           <div class="flex items-center gap-2">
             <h2 class="text-sm font-semibold text-gray-700">Journal</h2>
             <span
@@ -52,16 +59,17 @@ export const JournalPanel: Component<JournalPanelProps> = (props) => {
           </div>
           <button
             onClick={props.onClose}
-            class="text-gray-400 hover:text-gray-600 text-sm"
+            class="text-gray-400 hover:text-gray-600 text-sm px-1"
+            title="Hide panel"
           >
-            ✕
+            ▸
           </button>
         </div>
 
         <Show
           when={stream.connected}
           fallback={
-            <div class="flex-1 flex items-center justify-center p-4">
+            <div class="flex-1 flex items-center justify-center p-4 overflow-y-auto">
               <ConnectDialog />
             </div>
           }
@@ -73,7 +81,7 @@ export const JournalPanel: Component<JournalPanelProps> = (props) => {
           <ComposePanel />
         </Show>
       </aside>
-    </Show>
+    </>
   );
 };