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,
@@ -101,7 +102,7 @@ export const DisplayItemList = ({
     previewMaxLength,
     timestampFormat,
     showItemMetaTooltip = false,
-}: Readonly<DisplayItemListProps>): React.JSX.Element => {
+  }: Readonly<DisplayItemListProps>): React.JSX.Element => {
     // Reply-link highlight: when hovering a reply badge, dim everything except the linked pair
     const [replyLinkToolId, setReplyLinkToolId] = useState<string | null>(null);
 
@@ -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,
@@ -54,7 +55,7 @@ export const ExecutionTrace: React.FC<ExecutionTraceProps> = ({
     notificationColorMap,
     searchExpandedItemId,
     registerToolRef,
-}): React.JSX.Element => {
+  }): React.JSX.Element => {
     const [manualExpandedItemId, setManualExpandedItemId] = useState<string | null>(null);
 
     // Use searchExpandedItemId if set, otherwise use manually expanded item
@@ -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,
@@ -77,7 +78,7 @@ export const SubagentItem: React.FC<SubagentItemProps> = ({
     highlightColor,
     notificationColorMap,
     registerToolRef,
-}) => {
+  }) => {
     const description = subagent.description ?? step.content.subagentDescription ?? 'Subagent';
     const subagentType = subagent.subagentType ?? 'Task';
     const truncatedDesc = description.length > 60 ? description.slice(0, 60) + '...' : description;
@@ -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,
@@ -44,7 +45,7 @@ export const TextItem: React.FC<TextItemProps> = ({
     highlightStyle,
     notificationDotColor,
     titleText,
-}) => {
+  }) => {
     const fullContent = step.content.outputText ?? preview;
     const summary = searchQueryOverride
       ? highlightQueryInText(preview, searchQueryOverride, `${markdownItemId ?? step.id}:summary`, {
@@ -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,
@@ -44,7 +45,7 @@ export const ThinkingItem: React.FC<ThinkingItemProps> = ({
     highlightStyle,
     notificationDotColor,
     titleText,
-}) => {
+  }) => {
     const fullContent = step.content.thinkingText ?? preview;
     const summary = searchQueryOverride
       ? highlightQueryInText(preview, searchQueryOverride, `${markdownItemId ?? step.id}:summary`, {
@@ -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,
@@ -164,7 +165,7 @@ export const SessionItem = ({
     multiSelectActive,
     isSelected,
     onToggleSelect,
-}: Readonly<SessionItemProps>): React.JSX.Element => {
+  }: Readonly<SessionItemProps>): React.JSX.Element => {
     const {
       openTab,
       activeProjectId,
@@ -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 = ({
           )}
       </>
     );
-};
+  }
+);