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

src/components/game/crafting/EnchantmentDesigner/DesignForm.tsx

@@ -3,6 +3,7 @@
 import { ActionButton } from '@/components/ui/action-button';
 import { StatRow } from '@/components/ui/stat-row';
 import type { DesignFormProps } from './types';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function DesignForm({
   designName,
@@ -15,6 +16,7 @@ export function DesignForm({
   handleCreateDesign,
 }: DesignFormProps) {
   return (
+    <DebugName name="DesignForm">
     <div className="space-y-2">
       <input
         type="text"
@@ -45,6 +47,7 @@ export function DesignForm({
         {isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
       </ActionButton>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/crafting/EnchantmentDesigner/EffectSelector.tsx

@@ -8,6 +8,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { AlertCircle, Wand2, Plus, Minus } from 'lucide-react';
 import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
 import type { EffectSelectorProps } from './types';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function EffectSelector({
   selectedEquipmentType,
@@ -22,6 +23,7 @@ export function EffectSelector({
   getIncompatibilityReason,
 }: EffectSelectorProps) {
   return (
+    <DebugName name="EffectSelector">
     <>
       {enchantingLevel < 1 ? (
         <div className="text-center text-[var(--text-muted)] py-8">
@@ -84,7 +86,7 @@ export function EffectSelector({
                         )}
                         <ActionButton
                           size="sm"
-                            variant="ghost"
+                          variant="ghost"
                           className="h-6 w-6 p-0"
                           onClick={() => addEffect(effect.id)}
                           disabled={!selected && selectedEffects.length >= 5}
@@ -143,6 +145,7 @@ export function EffectSelector({
         </>
       )}
     </>
+    </DebugName>
   );
 }
 

src/components/game/crafting/EnchantmentDesigner/EquipmentTypeSelector.tsx

@@ -6,6 +6,7 @@ import { ActionButton } from '@/components/ui/action-button';
 import { Progress } from '@/components/ui/progress';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import type { EquipmentTypeSelectorProps } from './types';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function EquipmentTypeSelector({
   ownedEquipmentTypes,
@@ -15,6 +16,7 @@ export function EquipmentTypeSelector({
   cancelDesign,
 }: EquipmentTypeSelectorProps) {
   return (
+    <DebugName name="EquipmentTypeSelector">
     <GameCard variant="default">
       <SectionHeader title="1. Select Equipment Type" />
       {designProgress ? (
@@ -61,6 +63,7 @@ export function EquipmentTypeSelector({
         </ScrollArea>
       )}
     </GameCard>
+    </DebugName>
   );
 }
 

src/components/game/crafting/EnchantmentDesigner/SavedDesigns.tsx

@@ -6,6 +6,7 @@ import { ActionButton } from '@/components/ui/action-button';
 import { Trash2 } from 'lucide-react';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import type { SavedDesignsProps } from './types';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function SavedDesigns({
   enchantmentDesigns,
@@ -14,6 +15,7 @@ export function SavedDesigns({
   deleteDesign,
 }: SavedDesignsProps) {
   return (
+    <DebugName name="SavedDesigns">
     <GameCard variant="default" className="lg:col-span-2">
       <SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
       {enchantmentDesigns.length === 0 ? (
@@ -63,6 +65,7 @@ export function SavedDesigns({
         </div>
       )}
     </GameCard>
+    </DebugName>
   );
 }