# 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