Fix message ID comparison for alphanumeric IDs

Author: chriswritescode-dev

frontend/src/components/message/MessageThread.tsx

@@ -39,6 +39,13 @@ function isSessionInRetry(sessionStatus: { type?: string }): boolean {
   return sessionStatus?.type === 'retry'
 }
 
+const compareMessageIds = (id1: string, id2: string): number => {
+  const num1 = parseInt(id1, 10)
+  const num2 = parseInt(id2, 10)
+  if (!isNaN(num1) && !isNaN(num2)) return num1 - num2
+  return id1.localeCompare(id2)
+}
+
 const findLastMessageByRole = (
   messages: MessageWithParts[],
   role: 'user' | 'assistant',
@@ -147,7 +154,7 @@ const state = latestTodoPart.state
     <div className="flex flex-col space-y-2 p-2 overflow-x-hidden">
       {messages.map((msg, index) => {
         const streaming = isMessageStreaming(msg)
-        const isQueued = msg.info.role === 'user' && pendingAssistantId && msg.info.id > pendingAssistantId
+        const isQueued = msg.info.role === 'user' && pendingAssistantId && compareMessageIds(msg.info.id, pendingAssistantId) > 0
         const isLastUserMessage = msg.info.role === 'user' && msg.info.id === lastUserMessageId
         const messageTextContent = getMessageTextContent(msg)
 

frontend/src/hooks/useOpenCode.ts

@@ -85,7 +85,7 @@ export const useMessages = (opcodeUrl: string | null | undefined, sessionID: str
     refetchOnReconnect: true,
     staleTime: 30000,
     gcTime: 10 * 60 * 1000,
-    placeholderData: (previousData) => previousData,
+    
   });
 };
 

frontend/src/pages/SessionDetail.tsx

@@ -37,6 +37,13 @@ import { useQuestions } from "@/contexts/EventContext";
 import { QuestionPrompt } from "@/components/session/QuestionPrompt";
 import { PendingActionsGroup } from "@/components/notifications/PendingActionsGroup";
 
+const compareMessageIds = (id1: string, id2: string): number => {
+  const num1 = parseInt(id1, 10)
+  const num2 = parseInt(id2, 10)
+  if (!isNaN(num1) && !isNaN(num2)) return num1 - num2
+  return id1.localeCompare(id2)
+}
+
 export function SessionDetail() {
   const { id, sessionId } = useParams<{ id: string; sessionId: string }>();
   const navigate = useNavigate();
@@ -95,7 +102,7 @@ export function SessionDetail() {
     if (!rawMessages) return undefined
     const revertMessageID = session?.revert?.messageID
     if (!revertMessageID) return rawMessages
-    return rawMessages.filter(msg => msg.info.id < revertMessageID)
+    return rawMessages.filter(msg => compareMessageIds(msg.info.id, revertMessageID) < 0)
   }, [rawMessages, session?.revert?.messageID]);
 
   const { scrollToBottom } = useAutoScroll({