Show game chat reload recovery state

src/features/modes/game/components/GameConversationView.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { RefreshCw } from "lucide-react";
 import type { Chat as EngineChat } from "../../../../engine/contracts/types/chat";
 import { useUIStore } from "../../../../shared/stores/ui.store";
 import {
@@ -15,6 +16,46 @@ interface GameConversationViewProps {
   activeChatId: string;
 }
 
+function GameChatHydrationState({
+  status,
+  onRetry,
+}: {
+  status: "loading" | "error";
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="flex flex-1 items-center justify-center overflow-hidden bg-[var(--background)] px-4 dark:bg-black/90">
+      <div className="flex max-w-sm flex-col items-center gap-3 text-center">
+        {status === "loading" ? (
+          <div className="h-6 w-6 animate-spin rounded-full border-2 border-[var(--muted)]/40 border-t-[var(--foreground)]/70 dark:border-white/20 dark:border-t-white/70" />
+        ) : (
+          <RefreshCw size="1.25rem" className="text-[var(--muted-foreground)]" />
+        )}
+        <div>
+          <p className="text-sm font-semibold text-[var(--foreground)]">
+            {status === "loading" ? "Loading game chat..." : "Game chat could not load"}
+          </p>
+          <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+            {status === "loading"
+              ? "Restoring the saved game surface."
+              : "Retry loading the chat before leaving the game surface."}
+          </p>
+        </div>
+        {status === "error" && onRetry && (
+          <button
+            type="button"
+            onClick={onRetry}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border)] bg-[var(--muted)]/20 px-3 py-1.5 text-xs font-semibold text-[var(--foreground)] transition-colors hover:bg-[var(--muted)]/35"
+          >
+            <RefreshCw size="0.75rem" />
+            Retry
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export function GameConversationView({ activeChatId }: GameConversationViewProps) {
   const messagesPerPage = useUIStore((state) => state.messagesPerPage);
   const data = useChatSurfaceData({
@@ -46,7 +87,12 @@ export function GameConversationView({ activeChatId }: GameConversationViewProps
     void fetchNextPage();
   }, [fetchNextPage, hasNextPage, isFetchingNextPage, loadedMessageCount, totalMessageCount]);
 
-  if (!data.chat) return <div className="flex flex-1 overflow-hidden" />;
+  if (!data.chat) {
+    if (data.chatError) {
+      return <GameChatHydrationState status="error" onRetry={() => void data.refetchChat()} />;
+    }
+    return <GameChatHydrationState status="loading" />;
+  }
 
   return (
     <>

src/features/modes/shared/chat-ui/hooks/use-chat-surface-data.ts

@@ -162,7 +162,13 @@ export function useChatSurfaceData({
   const resolvedMessagePageSize =
     Number.isFinite(messagePageSize) && messagePageSize > 0 ? Math.floor(messagePageSize) : DEFAULT_MESSAGE_PAGE_SIZE;
   const setActiveChatId = useChatStore((state) => state.setActiveChatId);
-  const { data: chat, error: chatError } = useChat(activeChatId);
+  const {
+    data: chat,
+    error: chatError,
+    isLoading: isChatLoading,
+    isFetching: isChatFetching,
+    refetch: refetchChat,
+  } = useChat(activeChatId);
   const {
     data: msgData,
     isLoading,
@@ -323,6 +329,10 @@ export function useChatSurfaceData({
 
   return {
     chat,
+    chatError,
+    isChatLoading,
+    isChatFetching,
+    refetchChat,
     chatMode,
     chatMeta,
     messages,