diff --git a/site/src/pages/AgentsPage/AgentDetail/ChatContext.ts b/site/src/pages/AgentsPage/AgentDetail/ChatContext.ts
index 1b6b765e34..b5ed72e45b 100644
--- a/site/src/pages/AgentsPage/AgentDetail/ChatContext.ts
+++ b/site/src/pages/AgentsPage/AgentDetail/ChatContext.ts
@@ -236,9 +236,23 @@ const createChatStore = (): ChatStore => {
 
 		const nextMessagesByID = new Map(state.messagesByID);
 		nextMessagesByID.set(message.id, message);
-		const nextOrderedMessageIDs = isDuplicate
-			? state.orderedMessageIDs
-			: buildOrderedMessageIDs(Array.from(nextMessagesByID.values()));
+
+		// When a real server message (positive ID) arrives, remove any
+		// optimistic placeholder (negative ID) for the same role so the
+		// user doesn't momentarily see the message twice.
+		if (message.id > 0) {
+			for (const [id, existing] of nextMessagesByID) {
+				if (id < 0 && existing.role === message.role) {
+					nextMessagesByID.delete(id);
+				}
+			}
+		}
+
+		const needsReorder =
+			!isDuplicate || nextMessagesByID.size !== state.messagesByID.size;
+		const nextOrderedMessageIDs = needsReorder
+			? buildOrderedMessageIDs(Array.from(nextMessagesByID.values()))
+			: state.orderedMessageIDs;
 
 		setState((current) => ({
 			...current,