From 8c556dd8f9da02c0f794b94d45d20737f7f34e49 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 5 Jun 2026 16:45:33 -0700
Subject: [PATCH] [eric] dashboard: memoize the browser-agent session lookup,
 drags stop rescanning sessions

---
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index cb0c6e77..b3b7e1c3 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -34,6 +34,7 @@ import {
   reorderBrowserTab,
   type BrowserTab,
 } from '@/shared/state/dashboardLayoutSlice';
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { handleApproval } from '@/shared/state/agentsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
@@ -153,14 +154,22 @@ const BrowserCard: React.FC<Props> = ({
   const elementSelectionCtx = useElementSelection();
   const isElementSelectMode = elementSelectionCtx?.selectMode ?? false;
 
-  const browserAgentSession = useAppSelector((state) => {
-    const sessions = state.agents.sessions;
-    const matches = Object.values(sessions).filter(
-      (s) => s.browser_id === browserId && s.mode === 'browser-agent'
-        && (s.status === 'running' || s.status === 'waiting_approval' || s.status === 'completed' || s.status === 'error' || s.status === 'stopped'),
-    );
-    return matches.find((s) => s.status === 'running' || s.status === 'waiting_approval') ?? matches[matches.length - 1] ?? null;
-  });
+  // Memoized so the all-sessions scan reruns only when sessions actually change,
+  // not on every layout/drag dispatch at 60Hz.
+  const selectBrowserAgentSession = React.useMemo(
+    () => createSelector(
+      [(state: { agents: { sessions: Record<string, any> } }) => state.agents.sessions],
+      (sessions) => {
+        const matches = Object.values(sessions).filter(
+          (s: any) => s.browser_id === browserId && s.mode === 'browser-agent'
+            && (s.status === 'running' || s.status === 'waiting_approval' || s.status === 'completed' || s.status === 'error' || s.status === 'stopped'),
+        );
+        return matches.find((s: any) => s.status === 'running' || s.status === 'waiting_approval') ?? matches[matches.length - 1] ?? null;
+      },
+    ),
+    [browserId],
+  );
+  const browserAgentSession = useAppSelector(selectBrowserAgentSession);
 
   const activity = useBrowserActivity(browserId);
   const agentRunning = browserAgentSession?.status === 'running';