Fix bugs of message disappearing sometimes and being duplicate sometimes

CONTRIBUTING.md

@@ -0,0 +1,86 @@
+# Contributing to ml-agent
+
+## Creating a Pull Request
+
+### 1. Create and work on your branch
+
+```bash
+# Create a new branch
+git checkout -b your-feature-branch
+
+# Make your changes, then commit
+git add .
+git commit -m "Your commit message"
+```
+
+### 2. Push your branch to keep changes backed up
+
+```bash
+# First time pushing this branch
+git push --set-upstream origin your-feature-branch
+
+# Subsequent pushes
+git push
+```
+
+### 3. When ready, create a Pull Request
+
+```bash
+# Easy way: Use the helper script
+./create-pr.sh "Your PR title" "Optional description"
+
+# This automatically:
+# - Gets your current branch
+# - Creates the PR
+# - Pushes your changes to it
+```
+
+### Example workflow
+
+```bash
+# 1. Create branch
+git checkout -b fix-bug-123
+
+# 2. Make changes and commit
+git add backend/main.py
+git commit -m "Fix authentication bug"
+
+# 3. Push to keep changes safe
+git push --set-upstream origin fix-bug-123
+
+# 4. Continue working...
+git add frontend/src/App.tsx
+git commit -m "Update UI"
+git push
+
+# 5. When ready, create PR
+./create-pr.sh "Fix authentication bug" "Fixes issue where users could not authenticate in dev mode"
+```
+
+## Development Setup
+
+### Running locally with hot-reload
+
+**Backend:**
+```bash
+cd backend
+uv run uvicorn main:app --host 0.0.0.0 --port 7860 --reload
+```
+
+**Frontend** (in a separate terminal):
+```bash
+cd frontend
+npm run dev
+```
+
+Access the app at http://localhost:5173
+
+### Environment Variables
+
+Make sure your `.env` file in the project root contains:
+```
+ANTHROPIC_API_KEY=your_key_here
+HF_TOKEN=your_hf_token_here
+GITHUB_TOKEN=your_github_token_here
+HF_NAMESPACE=your_namespace_here
+```

create-pr.sh

@@ -0,0 +1,80 @@
+#!/bin/bash
+set -e
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Check arguments
+if [ $# -lt 1 ]; then
+    echo -e "${RED}Usage: ./create-pr.sh \"PR Title\" [\"Optional description\"]${NC}"
+    echo ""
+    echo "Example:"
+    echo "  ./create-pr.sh \"Fix authentication bug\" \"This fixes the dev mode auth issue\""
+    exit 1
+fi
+
+TITLE="$1"
+DESCRIPTION="${2:-}"
+
+# Get current branch
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+
+if [ "$BRANCH" = "main" ]; then
+    echo -e "${RED}Error: You're on the main branch. Please create a feature branch first.${NC}"
+    exit 1
+fi
+
+echo -e "${BLUE}Creating PR for branch: ${GREEN}$BRANCH${NC}"
+echo -e "${BLUE}Title: ${GREEN}$TITLE${NC}"
+
+# Get HF_TOKEN from .env
+if [ ! -f .env ]; then
+    echo -e "${RED}Error: .env file not found${NC}"
+    exit 1
+fi
+
+HF_TOKEN=$(grep HF_TOKEN .env | cut -d '=' -f2)
+
+if [ -z "$HF_TOKEN" ]; then
+    echo -e "${RED}Error: HF_TOKEN not found in .env${NC}"
+    exit 1
+fi
+
+# Create PR using HuggingFace API
+echo -e "${BLUE}Creating pull request...${NC}"
+
+PR_INFO=$(HF_TOKEN="$HF_TOKEN" uv run python - <<EOF
+from huggingface_hub import HfApi
+import os
+
+api = HfApi(token=os.environ.get('HF_TOKEN'))
+
+description = """$DESCRIPTION"""
+
+discussion = api.create_discussion(
+    repo_id='smolagents/ml-agent',
+    repo_type='space',
+    title="""$TITLE""",
+    description=description if description.strip() else "Changes from branch $BRANCH",
+    pull_request=True,
+)
+
+print(f"{discussion.num}|{discussion.url}")
+EOF
+)
+
+PR_NUM=$(echo "$PR_INFO" | cut -d '|' -f1)
+PR_URL=$(echo "$PR_INFO" | cut -d '|' -f2)
+
+echo -e "${GREEN}✓ PR created: #$PR_NUM${NC}"
+echo -e "${BLUE}URL: $PR_URL${NC}"
+
+# Push branch to PR ref
+echo -e "${BLUE}Pushing changes to PR...${NC}"
+git push -f origin "$BRANCH:refs/pr/$PR_NUM"
+
+echo -e "${GREEN}✓ Done! Your PR is ready:${NC}"
+echo -e "${GREEN}  $PR_URL${NC}"

frontend/src/hooks/useAgentChat.ts

@@ -331,6 +331,16 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
   chatActionsRef.current.setMessages = chat.setMessages;
   chatActionsRef.current.messages = chat.messages;
 
+  // -- Debug: track SDK message changes ------------------------------------
+  useEffect(() => {
+    console.log('[useAgentChat] 📨 SDK messages changed:', {
+      sessionId,
+      count: chat.messages.length,
+      messages: chat.messages,
+      lastMessage: chat.messages[chat.messages.length - 1],
+    });
+  }, [sessionId, chat.messages]);
+
   // -- Hydrate from backend on mount (page refresh recovery) --------------
   useEffect(() => {
     let cancelled = false;
@@ -360,7 +370,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
         if (msgsRes.ok) {
           const data = await msgsRes.json();
           if (cancelled || !Array.isArray(data) || data.length === 0) return;
-          const uiMsgs = llmMessagesToUIMessages(data, pendingIds);
+          const uiMsgs = llmMessagesToUIMessages(data, pendingIds, chatActionsRef.current.messages);
           if (uiMsgs.length > 0) {
             chat.setMessages(uiMsgs);
             saveMessages(sessionId, uiMsgs);
@@ -476,12 +486,18 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
                 const toolName = event.data?.tool as string;
                 if (state === 'running' && toolName) sideChannel.onToolRunning(toolName);
               } else if (et === 'turn_complete' || et === 'error' || et === 'interrupted') {
+                console.log('[useAgentChat] 🏁 Turn complete event:', { sessionId, eventType: et });
                 sideChannel.onProcessingDone();
                 stopReconnect();
                 // Final hydration to get the complete message state
                 const result = await hydrateMessages();
                 if (result) {
-                  const uiMsgs = llmMessagesToUIMessages(result.data, result.pendingIds);
+                  const uiMsgs = llmMessagesToUIMessages(result.data, result.pendingIds, chatActionsRef.current.messages);
+                  console.log('[useAgentChat] 🔄 Final hydration after turn_complete:', {
+                    sessionId,
+                    messageCount: uiMsgs.length,
+                    messages: uiMsgs,
+                  });
                   if (uiMsgs.length > 0) {
                     chat.setMessages(uiMsgs);
                     saveMessages(sessionId, uiMsgs);
@@ -489,13 +505,18 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
                 }
                 return;
               } else if (et === 'approval_required') {
+                console.log('[useAgentChat] 🔔 Approval required event:', { sessionId });
                 sideChannel.onApprovalRequired(
                   (event.data?.tools || []) as Array<{ tool: string; arguments: Record<string, unknown>; tool_call_id: string }>,
                 );
                 stopReconnect();
                 const result = await hydrateMessages();
                 if (result) {
-                  const uiMsgs = llmMessagesToUIMessages(result.data, result.pendingIds);
+                  const uiMsgs = llmMessagesToUIMessages(result.data, result.pendingIds, chatActionsRef.current.messages);
+                  console.log('[useAgentChat] 🔄 Hydration after approval_required:', {
+                    sessionId,
+                    messageCount: uiMsgs.length,
+                  });
                   if (uiMsgs.length > 0) {
                     chat.setMessages(uiMsgs);
                     saveMessages(sessionId, uiMsgs);
@@ -514,12 +535,18 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
     const onVisible = async () => {
       if (document.visibilityState !== 'visible') return;
 
+      console.log('[useAgentChat] 👀 Tab became visible, re-hydrating:', { sessionId });
       // Always re-hydrate messages on wake
       const result = await hydrateMessages();
       if (!result) return;
 
       const { data, pendingIds, info } = result;
-      const uiMsgs = llmMessagesToUIMessages(data, pendingIds);
+      const uiMsgs = llmMessagesToUIMessages(data, pendingIds, chatActionsRef.current.messages);
+      console.log('[useAgentChat] 🔄 Wake hydration result:', {
+        sessionId,
+        messageCount: uiMsgs.length,
+        isProcessing: info?.is_processing,
+      });
       if (uiMsgs.length > 0) {
         chat.setMessages(uiMsgs);
         saveMessages(sessionId, uiMsgs);
@@ -527,6 +554,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
 
       // If the backend is still processing, reconnect to the live event stream
       if (info?.is_processing) {
+        console.log('[useAgentChat] 🔌 Backend still processing, starting polling:', { sessionId });
         updateSession(sessionId, { isProcessing: true, activityStatus: { type: 'thinking' } });
 
         // Stop any previous reconnection
@@ -540,15 +568,31 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
         // Poll messages every 3 s so the chat message list stays up-to-date
         // (the event stream gives us real-time status but not full message diffs)
         pollTimerRef.current = setInterval(async () => {
+          console.log('[useAgentChat] ⏱️ Polling tick:', { sessionId });
           const fresh = await hydrateMessages();
           if (!fresh) return;
-          const msgs = llmMessagesToUIMessages(fresh.data, fresh.pendingIds);
-          if (msgs.length > 0) {
+          const msgs = llmMessagesToUIMessages(fresh.data, fresh.pendingIds, chatActionsRef.current.messages);
+          console.log('[useAgentChat] 🔄 Poll hydration result:', {
+            sessionId,
+            messageCount: msgs.length,
+            currentCount: chatActionsRef.current.messages.length,
+          });
+
+          const currentCount = chatActionsRef.current.messages.length;
+          if (msgs.length > currentCount || currentCount === 0) {
+            console.log('[useAgentChat] ✅ Applying poll update (backend has more messages)');
             chat.setMessages(msgs);
             saveMessages(sessionId, msgs);
+          } else {
+            console.log('[useAgentChat] ⏭️ Skipping poll update (backend state is stale or equal):', {
+              backendCount: msgs.length,
+              sdkCount: currentCount,
+            });
           }
+
           // If backend stopped processing, clean up
           if (fresh.info && !fresh.info.is_processing) {
+            console.log('[useAgentChat] ⏹️ Backend finished, stopping poll:', { sessionId });
             updateSession(sessionId, { isProcessing: false });
             stopReconnect();
           }
@@ -568,8 +612,20 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
   useEffect(() => {
     if (chat.messages.length === 0) return;
     if (chat.messages.length !== prevLenRef.current) {
+      console.log('[useAgentChat] 💾 Saving messages (count changed):', {
+        sessionId,
+        prevCount: prevLenRef.current,
+        newCount: chat.messages.length,
+        messages: chat.messages,
+      });
       prevLenRef.current = chat.messages.length;
       saveMessages(sessionId, chat.messages);
+    } else {
+      console.log('[useAgentChat] ⏭️ Skipping save (count unchanged):', {
+        sessionId,
+        count: chat.messages.length,
+        lastMessage: chat.messages[chat.messages.length - 1],
+      });
     }
   }, [sessionId, chat.messages]);
 

frontend/src/lib/chat-message-store.ts

@@ -38,10 +38,21 @@ function writeAll(map: MessagesMap): void {
 
 export function loadMessages(sessionId: string): UIMessage[] {
   const map = readAll();
-  return map[sessionId] ?? [];
+  const messages = map[sessionId] ?? [];
+  console.log('[chat-message-store] 📖 Loading messages from localStorage:', {
+    sessionId,
+    count: messages.length,
+    messages,
+  });
+  return messages;
 }
 
 export function saveMessages(sessionId: string, messages: UIMessage[]): void {
+  console.log('[chat-message-store] 💾 Writing messages to localStorage:', {
+    sessionId,
+    count: messages.length,
+    lastMessage: messages[messages.length - 1],
+  });
   const map = readAll();
   map[sessionId] = messages;
 

frontend/src/lib/convert-llm-messages.ts

@@ -16,19 +16,24 @@ interface LLMMessage {
   name?: string | null;
 }
 
-let idCounter = 0;
+// Generate stable IDs based on message position to prevent duplicate renders
+// when the same message is re-converted multiple times (e.g., during polling)
+let uiMessageCounter = 0;
 function nextId(): string {
-  return `msg-${Date.now()}-${++idCounter}`;
+  return `msg-${++uiMessageCounter}`;
 }
 
 /**
  * @param pendingApprovalIds - Set of tool_call_ids that are waiting for approval.
  *   When provided, matching tool calls without results will get state
  *   'approval-requested' instead of 'input-available'.
+ * @param existingUIMessages - Current UI messages to preserve IDs when content matches.
+ *   This prevents React from re-rendering messages with new IDs during polling.
  */
 export function llmMessagesToUIMessages(
   messages: LLMMessage[],
   pendingApprovalIds?: Set<string>,
+  existingUIMessages?: UIMessage[],
 ): UIMessage[] {
   // Build a map of tool_call_id -> tool result for pairing
   const toolResults = new Map<string, { output: string; isError: boolean }>();
@@ -43,13 +48,22 @@ export function llmMessagesToUIMessages(
 
   const uiMessages: UIMessage[] = [];
 
+  // Helper to get existing message ID at a given position if roles match
+  const getExistingId = (index: number, role: 'user' | 'assistant'): string | null => {
+    if (!existingUIMessages || index >= existingUIMessages.length) return null;
+    const existing = existingUIMessages[index];
+    return existing.role === role ? existing.id : null;
+  };
+
   for (const msg of messages) {
     if (msg.role === 'system') continue;
     if (msg.role === 'tool') continue; // handled via tool_calls pairing
 
     if (msg.role === 'user') {
+      // Try to reuse existing ID if the message at this position matches
+      const existingId = getExistingId(uiMessages.length, 'user');
       uiMessages.push({
-        id: nextId(),
+        id: existingId || nextId(),
         role: 'user',
         parts: [{ type: 'text', text: msg.content || '' }],
       });
@@ -107,10 +121,23 @@ export function llmMessagesToUIMessages(
       // per LLM API call), so merge consecutive assistant messages to match.
       const prev = uiMessages[uiMessages.length - 1];
       if (prev && prev.role === 'assistant') {
+        console.log('[convert-llm] 🔗 Merging consecutive assistant messages:', {
+          prevId: prev.id,
+          prevPartCount: prev.parts.length,
+          newPartCount: parts.length,
+        });
         prev.parts.push(...parts);
       } else {
+        // Try to reuse existing ID if the message at this position matches
+        const existingId = getExistingId(uiMessages.length, 'assistant');
+        const newId = existingId || nextId();
+        console.log('[convert-llm] ➕ Creating new assistant message:', {
+          id: newId,
+          partCount: parts.length,
+          reusedId: !!existingId,
+        });
         uiMessages.push({
-          id: nextId(),
+          id: newId,
           role: 'assistant',
           parts,
         });