perf(store): decouple coarse subscriptions with fine-grained selectors

src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx

@@ -86,7 +86,7 @@ export const ContentCanvas: React.FC<ContentCanvasProps> = ({
   const canvasScopeKey = useCanvasStore(state => state.scopeKey);
   const { workspace: currentWorkspace } = useCurrentWorkspace();
   const activeSessionId = useSyncExternalStore(
-    flowChatStore.subscribe.bind(flowChatStore),
+    notify => flowChatStore.subscribeSelector(s => s.activeSessionId, () => notify()),
     () => flowChatStore.getState().activeSessionId,
     () => flowChatStore.getState().activeSessionId,
   );

src/web-ui/src/app/hooks/useSessionTabLabels.ts

@@ -44,7 +44,12 @@ function readSessionTabLabels(
 }
 
 function subscribeToLabels(notify: () => void): () => void {
-  const unsubscribe = flowChatStore.subscribe(notify);
+  // Use subscribeSelector to only trigger when the sessions Map identity changes or surface changes,
+  // preventing unrelated store state changes from broadcasting to tab labels.
+  const unsubscribe = flowChatStore.subscribeSelector(
+    state => state.sessions,
+    () => notify(),
+  );
   const unsubscribeSurfaces = flowChatStore.subscribeSurfaceSessions(notify);
   return () => { unsubscribe(); unsubscribeSurfaces(); };
 }

src/web-ui/src/app/hooks/useSessionTerminalDirectory.ts

@@ -38,12 +38,17 @@ export function activeSessionTerminalDirectory(workspaceId: string | undefined):
   );
 }
 
-const subscribeFlowChatStore = (listener: () => void) => flowChatStore.subscribe(listener);
+function subscribeActiveTerminalDirectory(workspaceId: string | undefined, notify: () => void): () => void {
+  return flowChatStore.subscribeSelector(
+    () => activeSessionTerminalDirectory(workspaceId),
+    () => notify(),
+  );
+}
 
 /** Terminal default cwd for `workspaceId`, tracking the active session. */
 export function useSessionTerminalDirectory(workspaceId: string | undefined): string | undefined {
   return useSyncExternalStore(
-    subscribeFlowChatStore,
+    listener => subscribeActiveTerminalDirectory(workspaceId, listener),
     () => activeSessionTerminalDirectory(workspaceId),
     () => undefined,
   );

src/web-ui/src/app/scenes/session/AuxPane.tsx

@@ -48,7 +48,7 @@ const AuxPane = forwardRef<AuxPaneRef, AuxPaneProps>(
   ({ workspacePath, externalToolbar = false, isSceneActive = true, terminalResizeSuspended = false, resizeSuspended = false, isFullscreen = false, onToggleFullscreen }, ref) => {
     const { t } = useI18n('components');
     const activeSessionId = useSyncExternalStore(
-      flowChatStore.subscribe.bind(flowChatStore),
+      notify => flowChatStore.subscribeSelector(s => s.activeSessionId, () => notify()),
       () => flowChatStore.getState().activeSessionId,
       () => flowChatStore.getState().activeSessionId,
     );

src/web-ui/src/flow_chat/hooks/useActiveSessionState.ts

@@ -38,10 +38,23 @@ export const useActiveSessionState = (): ActiveSessionState => {
     };
   }, [surfaceId, sessionId]);
   const subscribe = useCallback((notify: () => void) => {
-    const stopStore = flowChatStore.subscribe(notify);
-    const stopMachine = stateMachineManager.subscribeGlobal(notify);
+    // Only wake when target session entity or activeSessionId reference changes,
+    // avoiding re-evaluation on unrelated background sessions' stream flushes.
+    const stopStore = flowChatStore.subscribeSelector(
+      state => {
+        const targetId = sessionId !== undefined && surfaceId !== undefined
+          ? (surfaceId === getActiveSurfaceId() ? sessionId : undefined)
+          : state.activeSessionId ?? '';
+        return targetId ? state.sessions.get(targetId) : undefined;
+      },
+      () => notify(),
+    );
+    const stopMachine = stateMachineManager.subscribeGlobal((changedSessionId) => {
+      const activeId = sessionId ?? flowChatStore.getState().activeSessionId;
+      if (!activeId || changedSessionId === activeId) notify();
+    });
     const stopSurface = onSurfaceActivated(notify);
     return () => { stopStore(); stopMachine(); stopSurface(); };
-  }, []);
+  }, [surfaceId, sessionId]);
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };