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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user