huskies: merge 643_story_web_ui_consumer_for_the_unified_status_broadcaster

frontend/src/hooks/useChatWebSocket.ts

@@ -1,5 +1,9 @@
 import * as React from "react";
-import type { PipelineState, WizardStateData } from "../api/client";
+import type {
+	PipelineState,
+	StatusEvent,
+	WizardStateData,
+} from "../api/client";
 import { api, ChatWebSocket } from "../api/client";
 import type { LogEntry } from "../components/ServerLogsPanel";
 import type { Message } from "../types";
@@ -68,6 +72,9 @@ export interface UseChatWebSocketResult {
 	} | null>;
 	serverLogs: LogEntry[];
 	storyTokenCosts: Map<string, number>;
+	/** Structured pipeline status events. Each entry preserves the full
+	 * StatusEvent so future UI stories can render per-type icons or filters. */
+	statusEvents: Array<{ receivedAt: string; event: StatusEvent }>;
 }
 
 export function useChatWebSocket({
@@ -116,6 +123,9 @@ export function useChatWebSocket({
 	const [storyTokenCosts, setStoryTokenCosts] = useState<Map<string, number>>(
 		new Map(),
 	);
+	const [statusEvents, setStatusEvents] = useState<
+		Array<{ receivedAt: string; event: StatusEvent }>
+	>([]);
 
 	useEffect(() => {
 		const ws = new ChatWebSocket();
@@ -240,6 +250,14 @@ export function useChatWebSocket({
 			onLogEntry: (timestamp, level, message) => {
 				setServerLogs((prev) => [...prev, { timestamp, level, message }]);
 			},
+			onStatusUpdate: (event) => {
+				// Preserve the structured event and receive timestamp so future stories
+				// can render per-type icons, banners, or filters without format changes.
+				setStatusEvents((prev) => [
+					...prev,
+					{ receivedAt: new Date().toISOString(), event },
+				]);
+			},
 			onConnected: () => {
 				setWsConnected(true);
 			},
@@ -276,5 +294,6 @@ export function useChatWebSocket({
 		setSideQuestion,
 		serverLogs,
 		storyTokenCosts,
+		statusEvents,
 	};
 }