Fix replayed run state selector stability

frontend/app/components/assistant-ui/thread.tsx

@@ -32,7 +32,7 @@ import {
 } from "lucide-react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import type { ComponentProps, FC, KeyboardEvent, ReactNode } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useActivityPanel } from "@/components/assistant-ui/activity-panel";
 import {
@@ -192,26 +192,39 @@ function useRefreshReplayedRun() {
 }
 
 function useReplayedRunState() {
-	return useAuiState((s) => {
+	const active = useAuiState((s) =>
+		s.thread.messages.some((message) => isReplayRunMessageId(message.id)),
+	);
+	const replaySessionId = useAuiState((s) => {
 		const replayRunMessage = s.thread.messages.find((message) =>
 			isReplayRunMessageId(message.id),
 		);
-		const sessionId = normalizeSessionId(
+		return normalizeSessionId(
-			readMetadataValue(replayRunMessage?.metadata, "sessionId") ??
+			readMetadataValue(replayRunMessage?.metadata, "sessionId"),
-				findLatestMessageMetadataValue(s.thread.messages, "sessionId") ??
-				(typeof window !== "undefined"
-					? window.localStorage.getItem("claw.activeSessionId")
-					: null),
 		);
-		const runId = normalizeSessionId(
+	});
+	const latestSessionId = useAuiState((s) =>
+		normalizeSessionId(
+			findLatestMessageMetadataValue(s.thread.messages, "sessionId"),
+		),
+	);
+	const runId = useAuiState((s) => {
+		const replayRunMessage = s.thread.messages.find((message) =>
+			isReplayRunMessageId(message.id),
+		);
+		return normalizeSessionId(
 			readMetadataValue(replayRunMessage?.metadata, "runId"),
 		);
-		return {
-			active: Boolean(replayRunMessage),
-			sessionId,
-			runId,
-		};
 	});
+	const localSessionId =
+		typeof window !== "undefined"
+			? normalizeSessionId(window.localStorage.getItem("claw.activeSessionId"))
+			: null;
+	const sessionId = replaySessionId ?? latestSessionId ?? localSessionId;
+	return useMemo(
+		() => ({ active, sessionId, runId }),
+		[active, sessionId, runId],
+	);
 }
 
 async function cancelLatestRun(sessionId: string, runId?: string | null) {