perf(renderer): defer member telemetry sparklines

src/renderer/components/team/members/MemberCard.tsx

@@ -97,6 +97,7 @@ interface MemberCardProps {
   spawnRuntimeAlive?: boolean;
   isLaunchSettling?: boolean;
   runtimeTelemetryScale?: RuntimeTelemetryScale;
+  renderRuntimeTelemetryStrip?: boolean;
   onOpenTask?: () => void;
   onOpenReviewTask?: () => void;
   onClick?: () => void;
@@ -575,6 +576,7 @@ export const MemberCard = memo(function MemberCard({
   runtimeSummary,
   runtimeEntry,
   runtimeRunId,
+  renderRuntimeTelemetryStrip = true,
   taskCounts,
   isTeamAlive,
   isTeamProvisioning,
@@ -1016,7 +1018,7 @@ export const MemberCard = memo(function MemberCard({
           }
         }}
       >
-        {!isRemoved ? (
+        {!isRemoved && renderRuntimeTelemetryStrip ? (
           <MemberRuntimeTelemetryStrip runtimeEntry={runtimeEntry} scale={runtimeTelemetryScale} />
         ) : null}
         <div className="pointer-events-none absolute inset-0 z-10 rounded transition-colors group-hover:bg-white/5" />

src/renderer/components/team/members/MemberList.tsx

@@ -512,6 +512,7 @@ interface MemberCardRowProps {
   leadActivity?: LeadActivityState;
   isLaunchSettling?: boolean;
   runtimeTelemetryScale?: RuntimeTelemetryScale;
+  renderRuntimeTelemetryStrip?: boolean;
   onOpenTask?: (taskId: string) => void;
   onMemberClick?: (member: ResolvedTeamMember) => void;
   onSendMessage?: (member: ResolvedTeamMember) => void;
@@ -550,6 +551,7 @@ const MemberCardRow = memo(function MemberCardRow({
   leadActivity,
   isLaunchSettling,
   runtimeTelemetryScale,
+  renderRuntimeTelemetryStrip,
   onOpenTask,
   onMemberClick,
   onSendMessage,
@@ -603,6 +605,7 @@ const MemberCardRow = memo(function MemberCardRow({
       spawnRuntimeAlive={spawnRuntimeAlive}
       isLaunchSettling={isLaunchSettling}
       runtimeTelemetryScale={runtimeTelemetryScale}
+      renderRuntimeTelemetryStrip={renderRuntimeTelemetryStrip}
       onOpenTask={currentTask ? handleOpenTask : undefined}
       onOpenReviewTask={reviewTask ? handleOpenReviewTask : undefined}
       onClick={handleClick}
@@ -736,6 +739,7 @@ export const MemberList = memo(function MemberList({
   const { t } = useAppTranslation('team');
   const containerRef = useRef<HTMLDivElement>(null);
   const [isWide, setIsWide] = useState(false);
+  const [runtimeTelemetryPreviewActive, setRuntimeTelemetryPreviewActive] = useState(false);
 
   const handleResize = useCallback((entries: ResizeObserverEntry[]) => {
     const entry = entries[0];
@@ -753,6 +757,25 @@ export const MemberList = memo(function MemberList({
     return () => observer.disconnect();
   }, [handleResize]);
 
+  const activateRuntimeTelemetryPreview = useCallback(() => {
+    setRuntimeTelemetryPreviewActive(true);
+  }, []);
+
+  const deactivateRuntimeTelemetryPreview = useCallback(() => {
+    setRuntimeTelemetryPreviewActive(false);
+  }, []);
+
+  const handleRuntimeTelemetryPreviewBlur = useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      const nextTarget = event.relatedTarget;
+      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+        return;
+      }
+      deactivateRuntimeTelemetryPreview();
+    },
+    [deactivateRuntimeTelemetryPreview]
+  );
+
   const gridClass = isWide ? 'grid grid-cols-2 gap-1' : 'grid grid-cols-1 gap-1';
   const activeMembers = useMemo(
     () =>
@@ -936,7 +959,14 @@ export const MemberList = memo(function MemberList({
   }
 
   return (
-    <div ref={containerRef} className="runtime-telemetry-list flex flex-col gap-1">
+    <div
+      ref={containerRef}
+      className="runtime-telemetry-list flex flex-col gap-1"
+      onPointerEnter={activateRuntimeTelemetryPreview}
+      onPointerLeave={deactivateRuntimeTelemetryPreview}
+      onFocusCapture={activateRuntimeTelemetryPreview}
+      onBlurCapture={handleRuntimeTelemetryPreviewBlur}
+    >
       <div className={gridClass}>
         {activeMembers.map((member) => {
           const spawnEntry = memberSpawnStatuses?.get(member.name);
@@ -1057,6 +1087,7 @@ export const MemberList = memo(function MemberList({
               leadActivity={leadActivity}
               isLaunchSettling={isLaunchSettling}
               runtimeTelemetryScale={runtimeTelemetryScale}
+              renderRuntimeTelemetryStrip={runtimeTelemetryPreviewActive}
               onOpenTask={onOpenTask}
               onMemberClick={onMemberClick}
               onSendMessage={onSendMessage}
@@ -1105,6 +1136,7 @@ export const MemberList = memo(function MemberList({
                 leadActivity={leadActivity}
                 isLaunchSettling={false}
                 runtimeTelemetryScale={runtimeTelemetryScale}
+                renderRuntimeTelemetryStrip={runtimeTelemetryPreviewActive}
                 onOpenTask={onOpenTask}
                 onMemberClick={onMemberClick}
                 onSendMessage={onSendMessage}