Mana-Loop/docs/task2_show_component_names_context.md

Task 6: System Integrity - Show Component Names Fix - Context

Task Description

From task2.md: Fix the "Show Component Names" debug option. Following the recent refactor, ensure this works for all components. Check for missing displayName properties or wrappers that might be masking component identities in the DOM/DevTools.

Current Implementation:

• "Show Component Names" is in src/components/game/debug/GameStateDebug.tsx (line 28)
• Uses useDebug() hook from src/lib/game/debug-context.tsx
• DebugName wrapper component shows component names visually (yellow label) when enabled
• DebugName is currently used in src/app/page.tsx to wrap major components

How It Works:

1. GameStateDebug.tsx has a Switch for "Show Component Names"
2. When enabled, showComponentNames becomes true
3. DebugName wrapper shows a yellow label with the component name
4. Components need to be wrapped with <DebugName name="ComponentName">...</DebugName>

What Needs To Be Done:

1. Ensure DebugName wrapper is used for ALL components (not just top-level ones in page.tsx)
2. Check for missing displayName properties on components:
   • displayName helps with React DevTools identification
   • Components wrapped with React.memo(), React.forwardRef(), etc. might lose their name
   • Fix by setting ComponentName.displayName = "ComponentName"
3. Check for wrappers masking component identities:
   • Search for React.memo, React.forwardRef, higher-order components
   • Ensure displayName is set on these
4. Test that "Show Component Names" works correctly for all components
5. Commit with message: "Task 2: System Integrity - Fix Show Component Names for all components"

Key Files:

• src/lib/game/debug-context.tsx - DebugName component and hook
• src/components/game/debug/GameStateDebug.tsx - Switch for showing names
• src/app/page.tsx - Currently uses DebugName for top-level components
• Search for React.memo and forwardRef in src/components/

Implementation Notes:

• The DebugName wrapper adds a visual label - this is for the in-game debug view
• The displayName property is for React DevTools - this is a separate concern
• Both should be fixed for full debugging support