perf: memo chat items, tool viewers, CollapsibleTeamSection, TaskTooltip

Wraps BaseItem, StatusDot, MetricsPill, LinkedToolItem, TeammateMessageItem,
SlashItem, all linkedTool viewers (Default/Edit/Read/Skill/Write/ToolError,
CollapsibleOutputSection), CollapsibleTeamSection, and TaskTooltip in
React.memo to prevent unnecessary re-renders when chat history updates.

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { TOOL_ITEM_MUTED } from '@renderer/constants/cssVariables';
 import { getTriggerColorDef, type TriggerColor } from '@shared/constants/triggerColors';
@@ -57,14 +57,14 @@ interface BaseItemProps {
 /**
  * Small status dot indicator.
  */
-export const StatusDot: React.FC<{ status: ItemStatus }> = ({ status }) => {
+export const StatusDot = memo(function StatusDot({ status }: { status: ItemStatus }) {
   return (
     <span
       className="base-item-status-dot inline-block size-1.5 shrink-0 rounded-full"
       style={{ backgroundColor: getStatusDotColor(status) }}
     />
   );
-};
+});
 
 // =============================================================================
 // Main Component
@@ -79,7 +79,8 @@ export const StatusDot: React.FC<{ status: ItemStatus }> = ({ status }) => {
  *
  * Used by: ThinkingItem, TextItem, LinkedToolItem, SlashItem, SubagentItem
  */
-export const BaseItem: React.FC<BaseItemProps> = ({
+export const BaseItem = memo(
+  ({
     icon,
     label,
     summary,
@@ -97,7 +98,7 @@ export const BaseItem: React.FC<BaseItemProps> = ({
     highlightStyle,
     notificationDotColor,
     children,
-}) => {
+  }: BaseItemProps): React.JSX.Element => {
     return (
       <div
         className={`rounded transition-[background-color,box-shadow] duration-300 ${highlightClasses}`}
@@ -140,7 +141,10 @@ export const BaseItem: React.FC<BaseItemProps> = ({
               <span className="text-sm" style={{ color: TOOL_ITEM_MUTED }}>
                 -
               </span>
-            <span className="flex-1 truncate text-sm" style={{ color: 'var(--tool-item-summary)' }}>
+              <span
+                className="flex-1 truncate text-sm"
+                style={{ color: 'var(--tool-item-summary)' }}
+              >
                 {summary}
               </span>
             </>
@@ -210,4 +214,5 @@ export const BaseItem: React.FC<BaseItemProps> = ({
         )}
       </div>
     );
-};
+  }
+);

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

@@ -6,7 +6,7 @@
  * for summary generation and token calculation.
  */
 
-import React, { useRef } from 'react';
+import React, { memo, useRef } from 'react';
 
 import { CARD_ICON_MUTED } from '@renderer/constants/cssVariables';
 import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors';
@@ -64,7 +64,8 @@ interface LinkedToolItemProps {
   titleText?: string;
 }
 
-export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({
+export const LinkedToolItem = memo(
+  ({
     linkedTool,
     onClick,
     isExpanded,
@@ -76,7 +77,7 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({
     notificationDotColor,
     registerRef,
     titleText,
-}) => {
+  }: LinkedToolItemProps): React.JSX.Element => {
     const status = getToolStatus(linkedTool);
     const { isLight } = useTheme();
     const summary = getToolSummary(linkedTool.name, linkedTool.input);
@@ -233,4 +234,5 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({
         </BaseItem>
       </div>
     );
-};
+  }
+);

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import {
@@ -41,13 +41,14 @@ interface MetricsPillProps {
 // Unified Metrics Pill - Compact monospace pill with tooltip
 // =============================================================================
 
-export const MetricsPill = ({
+export const MetricsPill = memo(
+  ({
     mainSessionImpact,
     lastUsage,
     isolatedLabel,
     isolatedOverride,
     phaseBreakdown,
-}: Readonly<MetricsPillProps>): React.ReactElement | null => {
+  }: Readonly<MetricsPillProps>): React.ReactElement | null => {
     const [showTooltip, setShowTooltip] = useState(false);
     const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties>({});
     const containerRef = useRef<HTMLDivElement>(null);
@@ -212,4 +213,5 @@ export const MetricsPill = ({
           )}
       </>
     );
-};
+  }
+);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Slash } from 'lucide-react';
 
@@ -34,7 +34,8 @@ interface SlashItemProps {
  * - MCP commands
  * - User-defined commands
  */
-export const SlashItem: React.FC<SlashItemProps> = ({
+export const SlashItem = memo(
+  ({
     slash,
     onClick,
     isExpanded,
@@ -44,7 +45,7 @@ export const SlashItem: React.FC<SlashItemProps> = ({
     highlightStyle,
     notificationDotColor,
     titleText,
-}) => {
+  }: SlashItemProps): React.JSX.Element => {
     const hasInstructions = !!slash.instructions;
 
     // Display args or message as the description
@@ -78,4 +79,5 @@ export const SlashItem: React.FC<SlashItemProps> = ({
         )}
       </BaseItem>
     );
-};
+  }
+);

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import {
   CARD_BG,
@@ -75,14 +75,15 @@ function isResendMessage(message: TeammateMessage): boolean {
  *
  * Operational noise (idle/shutdown/terminated) renders as minimal inline text.
  */
-export const TeammateMessageItem: React.FC<TeammateMessageItemProps> = ({
+export const TeammateMessageItem = memo(
+  ({
     teammateMessage,
     onClick,
     isExpanded,
     onReplyHover,
     highlightClasses = '',
     highlightStyle,
-}) => {
+  }: TeammateMessageItemProps): React.JSX.Element => {
     const colors = getTeamColorSet(teammateMessage.color);
     const { isLight } = useTheme();
 
@@ -132,7 +133,10 @@ export const TeammateMessageItem: React.FC<TeammateMessageItemProps> = ({
     if (noiseLabel) {
       return (
         <div className="flex items-center gap-2 px-3 py-1" style={{ opacity: 0.45 }}>
-        <span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: colors.border }} />
+          <span
+            className="size-2 shrink-0 rounded-full"
+            style={{ backgroundColor: colors.border }}
+          />
           <span className="text-[11px]" style={{ color: CARD_ICON_MUTED }}>
             {teammateMessage.teammateId}
           </span>
@@ -258,4 +262,5 @@ export const TeammateMessageItem: React.FC<TeammateMessageItemProps> = ({
         )}
       </div>
     );
-};
+  }
+);

src/renderer/components/chat/items/linkedTool/CollapsibleOutputSection.tsx

@@ -5,7 +5,7 @@
  * Shows a clickable header with label, StatusDot, and chevron toggle.
  */
 
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 
 import { ChevronDown, ChevronRight } from 'lucide-react';
 
@@ -18,11 +18,8 @@ interface CollapsibleOutputSectionProps {
   label?: string;
 }
 
-export const CollapsibleOutputSection: React.FC<CollapsibleOutputSectionProps> = ({
-  status,
-  children,
-  label = 'Output',
-}) => {
+export const CollapsibleOutputSection = memo(
+  ({ status, children, label = 'Output' }: CollapsibleOutputSectionProps): React.JSX.Element => {
     const [isExpanded, setIsExpanded] = useState(false);
 
     return (
@@ -30,7 +27,13 @@ export const CollapsibleOutputSection: React.FC<CollapsibleOutputSectionProps> =
         <button
           type="button"
           className="mb-1 flex items-center gap-2 text-xs"
-        style={{ color: 'var(--tool-item-muted)', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
+          style={{
+            color: 'var(--tool-item-muted)',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            cursor: 'pointer',
+          }}
           onClick={() => setIsExpanded((prev) => !prev)}
         >
           {isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
@@ -54,4 +57,5 @@ export const CollapsibleOutputSection: React.FC<CollapsibleOutputSectionProps> =
         )}
       </div>
     );
-};
+  }
+);

src/renderer/components/chat/items/linkedTool/DefaultToolViewer.tsx

@@ -4,7 +4,7 @@
  * Default rendering for tools that don't have specialized viewers.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { type ItemStatus } from '../BaseItem';
 
@@ -23,7 +23,10 @@ interface DefaultToolViewerProps {
   status: ItemStatus;
 }
 
-export const DefaultToolViewer: React.FC<DefaultToolViewerProps> = ({ linkedTool, status }) => {
+export const DefaultToolViewer = memo(function DefaultToolViewer({
+  linkedTool,
+  status,
+}: DefaultToolViewerProps) {
   const displayOutputContent = linkedTool.result
     ? formatToolOutputForDisplay(linkedTool.name, linkedTool.result.content)
     : null;
@@ -64,4 +67,4 @@ export const DefaultToolViewer: React.FC<DefaultToolViewerProps> = ({ linkedTool
         )}
     </>
   );
-};
+});

src/renderer/components/chat/items/linkedTool/EditToolViewer.tsx

@@ -4,7 +4,7 @@
  * Renders the Edit tool with DiffViewer.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { DiffViewer } from '@renderer/components/chat/viewers';
 
@@ -20,7 +20,10 @@ interface EditToolViewerProps {
   status: ItemStatus;
 }
 
-export const EditToolViewer: React.FC<EditToolViewerProps> = ({ linkedTool, status }) => {
+export const EditToolViewer = memo(function EditToolViewer({
+  linkedTool,
+  status,
+}: EditToolViewerProps) {
   const toolUseResult = linkedTool.result?.toolUseResult as Record<string, unknown> | undefined;
 
   const filePath = (toolUseResult?.filePath as string) || (linkedTool.input.file_path as string);
@@ -71,4 +74,4 @@ export const EditToolViewer: React.FC<EditToolViewerProps> = ({ linkedTool, stat
       )}
     </div>
   );
-};
+});

src/renderer/components/chat/items/linkedTool/ReadToolViewer.tsx

@@ -4,7 +4,7 @@
  * Renders the Read tool result using CodeBlockViewer.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers';
 
@@ -14,7 +14,7 @@ interface ReadToolViewerProps {
   linkedTool: LinkedToolItem;
 }
 
-export const ReadToolViewer: React.FC<ReadToolViewerProps> = ({ linkedTool }) => {
+export const ReadToolViewer = memo(function ReadToolViewer({ linkedTool }: ReadToolViewerProps) {
   const filePath = linkedTool.input.file_path as string;
 
   // Prefer enriched toolUseResult data
@@ -55,7 +55,9 @@ export const ReadToolViewer: React.FC<ReadToolViewerProps> = ({ linkedTool }) =>
       : undefined;
 
   const isMarkdownFile = /\.mdx?$/i.test(filePath);
-  const [viewMode, setViewMode] = React.useState<'code' | 'preview'>(isMarkdownFile ? 'preview' : 'code');
+  const [viewMode, setViewMode] = React.useState<'code' | 'preview'>(
+    isMarkdownFile ? 'preview' : 'code'
+  );
 
   return (
     <div className="space-y-2">
@@ -99,4 +101,4 @@ export const ReadToolViewer: React.FC<ReadToolViewerProps> = ({ linkedTool }) =>
       )}
     </div>
   );
-};
+});

src/renderer/components/chat/items/linkedTool/SkillToolViewer.tsx

@@ -4,7 +4,7 @@
  * Renders the Skill tool with its instructions in a code block viewer style.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { CodeBlockViewer } from '@renderer/components/chat/viewers';
 
@@ -14,7 +14,7 @@ interface SkillToolViewerProps {
   linkedTool: LinkedToolItem;
 }
 
-export const SkillToolViewer: React.FC<SkillToolViewerProps> = ({ linkedTool }) => {
+export const SkillToolViewer = memo(function SkillToolViewer({ linkedTool }: SkillToolViewerProps) {
   const skillInstructions = linkedTool.skillInstructions;
   const skillName = (linkedTool.input.skill as string) || 'Unknown Skill';
 
@@ -64,4 +64,4 @@ export const SkillToolViewer: React.FC<SkillToolViewerProps> = ({ linkedTool })
       )}
     </div>
   );
-};
+});

src/renderer/components/chat/items/linkedTool/ToolErrorDisplay.tsx

@@ -4,7 +4,7 @@
  * Displays error output for tool results.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { StatusDot } from '../BaseItem';
 
@@ -16,7 +16,9 @@ interface ToolErrorDisplayProps {
   linkedTool: LinkedToolItem;
 }
 
-export const ToolErrorDisplay: React.FC<ToolErrorDisplayProps> = ({ linkedTool }) => {
+export const ToolErrorDisplay = memo(function ToolErrorDisplay({
+  linkedTool,
+}: ToolErrorDisplayProps) {
   if (!linkedTool.result?.isError) return null;
 
   return (
@@ -40,4 +42,4 @@ export const ToolErrorDisplay: React.FC<ToolErrorDisplayProps> = ({ linkedTool }
       </div>
     </div>
   );
-};
+});

src/renderer/components/chat/items/linkedTool/WriteToolViewer.tsx

@@ -4,7 +4,7 @@
  * Renders the Write tool result.
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers';
 
@@ -14,7 +14,7 @@ interface WriteToolViewerProps {
   linkedTool: LinkedToolItem;
 }
 
-export const WriteToolViewer: React.FC<WriteToolViewerProps> = ({ linkedTool }) => {
+export const WriteToolViewer = memo(function WriteToolViewer({ linkedTool }: WriteToolViewerProps) {
   const toolUseResult = linkedTool.result?.toolUseResult as Record<string, unknown> | undefined;
 
   const filePath =
@@ -74,4 +74,4 @@ export const WriteToolViewer: React.FC<WriteToolViewerProps> = ({ linkedTool })
       )}
     </div>
   );
-};
+});

src/renderer/components/team/CollapsibleTeamSection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Badge } from '@renderer/components/ui/badge';
 import { cn } from '@renderer/lib/utils';
@@ -44,7 +44,7 @@ interface CollapsibleTeamSectionProps {
   children: React.ReactNode;
 }
 
-export const CollapsibleTeamSection = ({
+export const CollapsibleTeamSection = memo(function CollapsibleTeamSection({
   title,
   icon,
   badge,
@@ -63,7 +63,7 @@ export const CollapsibleTeamSection = ({
   headerSurfaceClassName,
   keepMounted,
   children,
-}: CollapsibleTeamSectionProps): React.JSX.Element => {
+}: CollapsibleTeamSectionProps): React.JSX.Element {
   const [open, setOpen] = useState(defaultOpen);
   const isOpen = forceOpen ? true : open;
   const sectionRef = useRef<HTMLElement>(null);
@@ -174,4 +174,4 @@ export const CollapsibleTeamSection = ({
       )}
     </section>
   );
-};
+});

src/renderer/components/team/TaskTooltip.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 
 import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
 import { MemberBadge } from '@renderer/components/team/MemberBadge';
@@ -65,12 +65,12 @@ interface TaskTooltipProps {
  * Tooltip that shows task summary on hover over any #taskId link.
  * Reads task data from the current team in the store.
  */
-export const TaskTooltip = ({
+export const TaskTooltip = memo(function TaskTooltip({
   taskId,
   teamName,
   children,
   side = 'top',
-}: TaskTooltipProps): React.JSX.Element => {
+}: TaskTooltipProps): React.JSX.Element {
   const { selectedTeamName, selectedTeamData, selectedTeamMembers, globalTasks, teamByName } =
     useStore(
       useShallow((s) => ({
@@ -194,4 +194,4 @@ export const TaskTooltip = ({
       </TooltipContent>
     </Tooltip>
   );
-};
+});