huskies: merge 1058

frontend/src/hooks/useChatWebSocket.ts

@@ -11,6 +11,9 @@ import { formatToolActivity } from "../utils/chatUtils";
 
 const { useEffect, useRef, useState } = React;
 
+/** Connectivity state of the WebSocket connection. */
+export type WsConnectivity = "connecting" | "connected" | "reconnecting" | "failed";
+
 type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
 
 interface UseChatWebSocketParams {
@@ -32,6 +35,8 @@ interface ReconciliationEvent {
 export interface UseChatWebSocketResult {
 	wsRef: React.MutableRefObject<ChatWebSocket | null>;
 	wsConnected: boolean;
+	wsConnectivity: WsConnectivity;
+	wsDisconnectedAt: Date | null;
 	streamingContent: string;
 	setStreamingContent: SetState<string>;
 	streamingThinking: string;
@@ -87,6 +92,9 @@ export function useChatWebSocket({
 }: UseChatWebSocketParams): UseChatWebSocketResult {
 	const wsRef = useRef<ChatWebSocket | null>(null);
 	const [wsConnected, setWsConnected] = useState(false);
+	const [wsConnectivity, setWsConnectivity] = useState<WsConnectivity>("connecting");
+	const [wsDisconnectedAt, setWsDisconnectedAt] = useState<Date | null>(null);
+	const failedTimerRef = useRef<number | undefined>(undefined);
 	const [streamingContent, setStreamingContent] = useState("");
 	const [streamingThinking, setStreamingThinking] = useState("");
 	const [activityStatus, setActivityStatus] = useState<string | null>(null);
@@ -162,14 +170,6 @@ export function useChatWebSocket({
 				console.error("WebSocket error:", message);
 				setLoading(false);
 				setActivityStatus(null);
-				const markdownMessage = message.replace(
-					/(https?:\/\/[^\s]+)/g,
-					"[$1]($1)",
-				);
-				setMessages((prev) => [
-					...prev,
-					{ role: "assistant", content: markdownMessage },
-				]);
 				if (queuedMessagesRef.current.length > 0) {
 					const batch = queuedMessagesRef.current.map((item) => item.text);
 					queuedMessagesRef.current = [];
@@ -261,18 +261,34 @@ export function useChatWebSocket({
 			},
 			onConnected: () => {
 				setWsConnected(true);
+				setWsConnectivity("connected");
+				setWsDisconnectedAt(null);
+				window.clearTimeout(failedTimerRef.current);
+				failedTimerRef.current = undefined;
+			},
+			onDisconnected: () => {
+				setWsConnectivity("reconnecting");
+				setWsDisconnectedAt(new Date());
+				window.clearTimeout(failedTimerRef.current);
+				failedTimerRef.current = window.setTimeout(() => {
+					setWsConnectivity("failed");
+				}, 30_000);
 			},
 		});
 
 		return () => {
 			ws.close();
 			wsRef.current = null;
+			window.clearTimeout(failedTimerRef.current);
+			failedTimerRef.current = undefined;
 		};
 	}, []);
 
 	return {
 		wsRef,
 		wsConnected,
+		wsConnectivity,
+		wsDisconnectedAt,
 		streamingContent,
 		setStreamingContent,
 		streamingThinking,