From 94e5de22f735d0df8d4083f5850c9fbc06bdbf2d Mon Sep 17 00:00:00 2001
From: Mathias Fredriksson <mafredri@gmail.com>
Date: Thu, 26 Mar 2026 20:30:06 +0200
Subject: [PATCH] perf(site): fix compiler memoization gap in AgentDetailInput
 (#23683)

The React Compiler failed to memoize the messages derivation
chain because a useDashboard() hook call sat between the
messages computation and its consumer (getLatestContextUsage).
An IIFE around the context usage logic also fragmented the
dependency chain.

Replacing the IIFE with a ternary and reordering the non-hook
computation before the hook call lets the compiler group
messages + getLatestContextUsage into a single cache guard
keyed on messagesByID and orderedMessageIDs.
---
 .../AgentsPage/components/AgentDetailContent.tsx      | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/AgentDetailContent.tsx b/site/src/pages/AgentsPage/components/AgentDetailContent.tsx
index 8d9bf9d8e2..a72a73d698 100644
--- a/site/src/pages/AgentsPage/components/AgentDetailContent.tsx
+++ b/site/src/pages/AgentsPage/components/AgentDetailContent.tsx
@@ -174,15 +174,12 @@ export const AgentDetailInput: FC<AgentDetailInputProps> = ({
 	const messages = orderedMessageIDs
 		.map((messageID) => messagesByID.get(messageID))
 		.filter(isChatMessage);
+	const rawUsage = getLatestContextUsage(messages);
+	const latestContextUsage = rawUsage
+		? { ...rawUsage, compressionThreshold }
+		: rawUsage;
 	const { organizations } = useDashboard();
 	const organizationId = organizations[0]?.id;
-	const latestContextUsage = (() => {
-		const usage = getLatestContextUsage(messages);
-		if (!usage) {
-			return usage;
-		}
-		return { ...usage, compressionThreshold };
-	})();
 	const {
 		attachments,
 		textContents,