Identify and eliminate code duplication by extracting shared logic into reusable functions, components, or type definitions. When you notice similar code patterns appearing in multiple places, refactor them into a single, well-named abstraction. This applies to: - **Repeated JSX elements**: Extract into variables or components - **Duplicate type definitions**: Create shared types or interfaces - **Similar function logic**: Extract into named utility functions For example, instead of duplicating JSX: ```tsx {extensionTooltip ? ( {getToolDescription() || snakeToTitleCase(toolCall.name)} ) : ( {getToolDescription() || snakeToTitleCase(toolCall.name)} )} ``` Extract the shared element: ```tsx const toolLabel = ( {getToolDescription() || snakeToTitleCase(toolCall.name)} ); return extensionTooltip ? ( {toolLabel} ) : ( toolLabel ); ``` Similarly, extract repeated function calls: ```tsx // Instead of repeating setMentionPopover(prev => ({ ...prev, isOpen: false })) const closeMentionPopover = () => { setMentionPopover(prev => ({ ...prev, isOpen: false })); }; ``` This improves maintainability, reduces the chance of inconsistencies, and makes the code more readable by giving meaningful names to repeated patterns.