feat: add DebugName wrappers to 56 components + redesign attunement cards + remove ScrollArea from AttunementsTab

src/components/game/tabs/EquipmentTab/EquipmentEffectsSummary.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import { computeEquipmentEffects } from '@/lib/game/effects';
 import type { EquipmentInstance } from '@/lib/game/types';
 
@@ -43,6 +44,7 @@ export function EquipmentEffectsSummary({ equipmentInstances, equippedInstances
   }
 
   return (
+    <DebugName name="EquipmentEffectsSummary">
     <div className="p-3 rounded border border-[var(--border-default)] bg-[var(--bg-sunken)] space-y-2">
       <h3 className="text-sm font-semibold text-[var(--text-primary)]">Equipment Effects</h3>
 
@@ -89,5 +91,6 @@ export function EquipmentEffectsSummary({ equipmentInstances, equippedInstances
         </div>
       )}
     </div>
+    </DebugName>
   );
 }

src/components/game/tabs/EquipmentTab/EquipmentSlotGrid.tsx

@@ -5,6 +5,7 @@ import type { EquipmentInstance, EquipmentSlot } from '@/lib/game/types';
 import { EQUIPMENT_TYPES, SLOT_NAMES } from '@/lib/game/data/equipment';
 import { RARITY_CSS_VAR } from '@/components/game/LootInventory/types';
 import { CATEGORY_ICONS } from '@/components/game/LootInventory/icons';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { ActionButton } from '@/components/ui/action-button';
 
 interface EquipmentSlotGridProps {
@@ -17,6 +18,7 @@ const SLOTS: EquipmentSlot[] = ['mainHand', 'offHand', 'head', 'body', 'hands',
 
 export function EquipmentSlotGrid({ equippedInstances, equipmentInstances, onUnequip }: EquipmentSlotGridProps) {
   return (
+    <DebugName name="EquipmentSlotGrid">
     <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
       {SLOTS.map((slot) => {
         const instanceId = equippedInstances[slot];
@@ -75,5 +77,6 @@ export function EquipmentSlotGrid({ equippedInstances, equipmentInstances, onUne
         );
       })}
     </div>
+    </DebugName>
   );
 }

src/components/game/tabs/EquipmentTab/InventoryList.tsx

@@ -7,6 +7,7 @@ import { EQUIPMENT_TYPES, getValidSlotsForEquipmentType } from '@/lib/game/data/
 import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from '@/components/game/LootInventory/types';
 import { CATEGORY_ICONS } from '@/components/game/LootInventory/icons';
 import { ActionButton } from '@/components/ui/action-button';
+import { DebugName } from '@/components/game/debug/debug-context';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -38,6 +39,7 @@ export function InventoryList({ inventoryItems, equippedInstances, onEquip, onDe
   }
 
   return (
+    <DebugName name="InventoryList">
     <div className="space-y-2">
       {inventoryItems.map(([instanceId, instance]) => {
         const type = EQUIPMENT_TYPES[instance.typeId];
@@ -131,5 +133,6 @@ export function InventoryList({ inventoryItems, equippedInstances, onEquip, onDe
         );
       })}
     </div>
+    </DebugName>
   );
 }