fix: restore chat history loading in playground (#999)

## Summary
Fixes chat history loading in the Playground after the AI SDK 5 upgrade
broke the functionality.

## Problem
The AI SDK 5 upgrade (commit c213781) introduced a regression where
chat history was being fetched from the API but never passed to the
`useChat()` hook, causing previously saved messages to be lost when
users loaded existing chats from the dropdown.

## Root Cause
- `useChatHistory()` was fetching chat history correctly via React Query
- The result was stored in `_chatHistory` (underscore indicating
intentionally unused)
- AI SDK 5's `useChat()` hook was called without `initialMessages`
parameter
- Chat always started empty, ignoring saved history

## Solution
Created a bridge between React Query (server state) and AI SDK (local
state):

1. **Extract chat history** from `useChatHistory()` (remove underscore
prefix)
2. **Get `setMessages`** from `useChat()` hook for message
initialization
3. **Add `useEffect`** to load history once per chat ID after React
Query finishes
4. **Use `isLoading` state** from React Query instead of arbitrary
timeouts

## Technical Details
The `useEffect` is necessary because:
- React Query manages server-side chat history fetching
- AI SDK 5 manages local chat interaction state
- These are separate state systems that need synchronization
- The effect only runs once per unique chat ID (tracked via ref)

## Changes
**File**: `client/dashboard/src/pages/playground/ChatWindow.tsx`

- Line 157-158: Destructure `chatHistory` and `isLoading` from
`useChatHistory()`
- Line 166: Add `loadedChatIdRef` to track loaded chat IDs
- Line 415: Extract `setMessages` from `useChat()` return value
- Lines 466-485: Add `useEffect` to bridge React Query → AI SDK state

## Testing
✅ Chat history loads correctly when selecting from dropdown
✅ No infinite loops or excessive re-renders
✅ Server requests are not canceled repeatedly
✅ React Query loading state properly synchronized

## Follows Best Practices
✅ All data fetching uses React Query (not manual `useEffect`)
✅ The `useEffect` is for state synchronization, not data fetching
✅ Uses React Query's `isLoading` state declaratively
✅ Minimal, focused bridge between two state management systems

Fixes AGE-969

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>

Author: simplesagar

.changeset/lovely-oranges-give.md

@@ -0,0 +1,5 @@
+---
+"dashboard": patch
+---
+
+Restore chat history loading in playground after v5 AI SDK upgrade

client/dashboard/src/pages/playground/ChatWindow.tsx

@@ -154,14 +154,19 @@ function ChatInner({
 
   const chat = useChatContext();
   const { setMessages } = chat;
-  const { chatHistory: _chatHistory } = useChatHistory(chat.id);
+  const { chatHistory, isLoading: isChatHistoryLoading } = useChatHistory(
+    chat.id,
+  );
 
   const [displayOnlyMessages, setDisplayOnlyMessages] = useState<UIMessage[]>(
     [],
   );
   const [_mentionedToolIds, setMentionedToolIds] = useState<string[]>([]);
   const [_inputText, setInputText] = useState("");
 
+  // Track which chat ID we've loaded messages for to prevent re-loading
+  const loadedChatIdRef = useRef<string | null>(null);
+
   // Feature flag for experimental tool tagging syntax
   const isToolTaggingEnabled = telemetry.isFeatureEnabled(
     "gram-experimental-chat",
@@ -412,6 +417,7 @@ function ChatInner({
     status,
     sendMessage,
     addToolResult,
+    setMessages: setUseChatMessages,
   } = useChat({
     // Include model in the chat ID to force a fresh session when switching models
     id: `${chat.id}-${model}`,
@@ -458,6 +464,23 @@ function ChatInner({
     },
   });
 
+  // Load chat history when available (AI SDK 5 workaround)
+  // Bridge between React Query (server state) and AI SDK (local state)
+  const currentChatId = `${chat.id}-${model}`;
+  useEffect(() => {
+    // Only load once per chat ID after React Query finishes loading
+    if (loadedChatIdRef.current !== currentChatId && !isChatHistoryLoading) {
+      loadedChatIdRef.current = currentChatId;
+
+      // Priority: loaded chat history > programmatically provided initial messages
+      const initialMessagesInner =
+        chatHistory.length > 0 ? chatHistory : _initialMessages;
+      if (initialMessagesInner && initialMessagesInner.length > 0) {
+        setUseChatMessages(initialMessagesInner);
+      }
+    }
+  }, [currentChatId, isChatHistoryLoading]);
+
   const handleSend = useCallback(
     async (msg: string) => {
       const userMessages = chatMessages.filter((m) => m.role === "user");