feat: implement websocket-stream for journal server

Integrate `websocket-stream` to handle MQTT broker upgrades in the
CLI and add granular connection status tracking to the UI.

- Add `websocket-stream` dependency
- Update CLI to use `websocket-stream` for socket upgrades
- Enhance `journalStream` store with `connectionStatus` and
  `connectionError` states
- Add visual connection status indicators to `App` and `JournalPanel`
This commit is contained in:
2026-07-06 15:38:28 +08:00
parent 862ba9c01b
commit 34d647d611
6 changed files with 116 additions and 12 deletions
+15 -7
View File
@@ -38,12 +38,17 @@ export const JournalPanel: Component<JournalPanelProps> = (props) => {
<div class="flex items-center justify-between px-3 py-2 border-b border-gray-200">
<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>
<span
class="w-2 h-2 rounded-full"
classList={{
"bg-gray-400": stream.connectionStatus === "disconnected",
"bg-yellow-400 animate-pulse":
stream.connectionStatus === "connecting",
"bg-green-500": stream.connectionStatus === "connected",
"bg-red-500": stream.connectionStatus === "error",
}}
title={stream.connectionStatus}
/>
</div>
<button
onClick={props.onClose}
@@ -104,7 +109,10 @@ const ConnectDialog: Component = () => {
await hydrateFromServer(sessionId);
await connectStream(sessionId, brokerUrl);
} catch (e) {
setError(e instanceof Error ? e.message : "Connection failed");
const msg = e instanceof Error ? e.message : "Connection failed";
setError(msg);
// If connectStream threw, the error handler also sets connectionStatus to error.
// Make sure the error message is captured.
} finally {
setConnecting(false);
}