perf(renderer): memoize chat and sidebar list item components

Wrap SessionItem, SubagentItem, ExecutionTrace, TextItem, ThinkingItem,
and DisplayItemList in React.memo. These components render repeatedly in
virtualized lists and AI chat groups — memoizing them eliminates redundant
renders when their props have not changed, reducing CPU work in active
sessions with many messages or long session sidebars.

src/renderer/components/chat/DisplayItemList.tsx

@@ -87,7 +87,8 @@ function truncateText(text: string, maxLength: number): string {
  *
  * The list is completely flat with no nested toggles or hierarchies.
  */
-export const DisplayItemList = ({
+export const DisplayItemList = React.memo(
+  ({
     items,
     onItemClick,
     expandedItemIds,
@@ -113,7 +114,10 @@ export const DisplayItemList = ({
     const isItemInReplyLink = (item: AIGroupDisplayItem): boolean => {
       if (!replyLinkToolId) return false;
       if (item.type === 'tool' && item.tool.id === replyLinkToolId) return true;
-    if (item.type === 'teammate_message' && item.teammateMessage.replyToToolId === replyLinkToolId)
+      if (
+        item.type === 'teammate_message' &&
+        item.teammateMessage.replyToToolId === replyLinkToolId
+      )
         return true;
       return false;
     };
@@ -354,7 +358,10 @@ export const DisplayItemList = ({
                       />
                       <Layers size={14} />
                     </div>
-                  <span className="shrink-0 text-xs font-medium" style={{ color: TOOL_CALL_TEXT }}>
+                    <span
+                      className="shrink-0 text-xs font-medium"
+                      style={{ color: TOOL_CALL_TEXT }}
+                    >
                       Compacted
                     </span>
                     {item.tokenDelta && (
@@ -428,4 +435,5 @@ export const DisplayItemList = ({
         })}
       </div>
     );
-};
+  }
+);

src/renderer/components/chat/items/ExecutionTrace.tsx

@@ -46,7 +46,8 @@ interface ExecutionTraceProps {
 // Execution Trace Component
 // =============================================================================
 
-export const ExecutionTrace: React.FC<ExecutionTraceProps> = ({
+export const ExecutionTrace: React.FC<ExecutionTraceProps> = React.memo(
+  ({
     items,
     aiGroupId: _aiGroupId,
     highlightToolUseId,
@@ -217,7 +218,10 @@ export const ExecutionTrace: React.FC<ExecutionTraceProps> = ({
                       />
                       <Layers size={14} />
                     </div>
-                  <span className="shrink-0 text-xs font-medium" style={{ color: TOOL_CALL_TEXT }}>
+                    <span
+                      className="shrink-0 text-xs font-medium"
+                      style={{ color: TOOL_CALL_TEXT }}
+                    >
                       Compacted
                     </span>
                     {item.tokenDelta && (
@@ -276,4 +280,5 @@ export const ExecutionTrace: React.FC<ExecutionTraceProps> = ({
         })}
       </div>
     );
-};
+  }
+);

src/renderer/components/chat/items/SubagentItem.tsx

@@ -67,7 +67,8 @@ interface SubagentItemProps {
 // Main Component - Linear-style DevTools Card
 // =============================================================================
 
-export const SubagentItem: React.FC<SubagentItemProps> = ({
+export const SubagentItem: React.FC<SubagentItemProps> = React.memo(
+  ({
     step,
     subagent,
     onClick,
@@ -483,7 +484,10 @@ export const SubagentItem: React.FC<SubagentItemProps> = ({
                   {hasIsolated && (
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2">
-                      <CircleDot className="size-3" style={{ color: 'rgba(56, 189, 248, 0.7)' }} />
+                        <CircleDot
+                          className="size-3"
+                          style={{ color: 'rgba(56, 189, 248, 0.7)' }}
+                        />
                         <span className="text-xs" style={{ color: COLOR_TEXT_SECONDARY }}>
                           {subagent.team ? 'Context Window' : 'Subagent Context'}
                         </span>
@@ -500,7 +504,10 @@ export const SubagentItem: React.FC<SubagentItemProps> = ({
                   {/* Per-phase breakdown when multi-phase */}
                   {isMultiPhase &&
                     phaseData.phases.map((phase) => (
-                    <div key={phase.phaseNumber} className="flex items-center justify-between pl-5">
+                      <div
+                        key={phase.phaseNumber}
+                        className="flex items-center justify-between pl-5"
+                      >
                         <span className="text-[11px]" style={{ color: CARD_ICON_MUTED }}>
                           Phase {phase.phaseNumber}
                         </span>
@@ -589,4 +596,5 @@ export const SubagentItem: React.FC<SubagentItemProps> = ({
         )}
       </div>
     );
-};
+  }
+);

src/renderer/components/chat/items/TextItem.tsx

@@ -31,7 +31,8 @@ interface TextItemProps {
   titleText?: string;
 }
 
-export const TextItem: React.FC<TextItemProps> = ({
+export const TextItem: React.FC<TextItemProps> = React.memo(
+  ({
     step,
     preview,
     onClick,
@@ -79,4 +80,5 @@ export const TextItem: React.FC<TextItemProps> = ({
         />
       </BaseItem>
     );
-};
+  }
+);

src/renderer/components/chat/items/ThinkingItem.tsx

@@ -31,7 +31,8 @@ interface ThinkingItemProps {
   titleText?: string;
 }
 
-export const ThinkingItem: React.FC<ThinkingItemProps> = ({
+export const ThinkingItem: React.FC<ThinkingItemProps> = React.memo(
+  ({
     step,
     preview,
     onClick,
@@ -79,4 +80,5 @@ export const ThinkingItem: React.FC<ThinkingItemProps> = ({
         />
       </BaseItem>
     );
-};
+  }
+);

src/renderer/components/sidebar/SessionItem.tsx

@@ -4,7 +4,7 @@
  * Supports right-click context menu for pane management.
  */
 
-import { useCallback, useRef, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo';
@@ -156,7 +156,8 @@ const SessionRuntimeBadge = ({
   );
 };
 
-export const SessionItem = ({
+export const SessionItem = memo(
+  ({
     session,
     isActive,
     isPinned,
@@ -345,7 +346,9 @@ export const SessionItem = ({
                     {session.messageCount}
                   </span>
                   <span style={{ opacity: 0.5 }}>·</span>
-                <span className="tabular-nums">{formatShortTime(new Date(session.createdAt))}</span>
+                  <span className="tabular-nums">
+                    {formatShortTime(new Date(session.createdAt))}
+                  </span>
                   {session.model && (
                     <>
                       <span style={{ opacity: 0.5 }}>·</span>
@@ -390,4 +393,5 @@ export const SessionItem = ({
           )}
       </>
     );
-};
+  }
+);