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

src/components/game/tabs/CraftingTab/EnchanterSubTab.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/game/crafting';
 import { useCraftingStore } from '@/lib/game/stores';
 import type { DesignEffect } from '@/lib/game/types';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 type EnchanterPhase = 'design' | 'prepare' | 'apply';
 
@@ -45,6 +46,7 @@ export function EnchanterSubTab() {
   };
 
   return (
+    <DebugName name="EnchanterSubTab">
     <div className="space-y-4">
       {/* Phase selector */}
       <div className="flex gap-2">
@@ -94,6 +96,7 @@ export function EnchanterSubTab() {
         />
       )}
     </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/CraftingTab/FabricatorSubTab.tsx

@@ -19,6 +19,7 @@ import { MANA_TYPE_LABELS } from '@/lib/game/data/fabricator-recipe-types';
 import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
 import { useCraftingStore, useManaStore } from '@/lib/game/stores';
 import type { FabricatorRecipe } from '@/lib/game/data/fabricator-recipes';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 const BRANCH_RECIPE_IDS = new Set([
   'oakStaff', 'arcanistStaff', 'battlestaff', 'arcanistCirclet', 'arcanistRobe',
@@ -171,6 +172,7 @@ export function FabricatorSubTab() {
   };
 
   return (
+    <DebugName name="FabricatorSubTab">
     <div className="space-y-4">
       {/* Section toggle: Equipment vs Materials */}
       <div className="flex gap-2">
@@ -375,6 +377,7 @@ export function FabricatorSubTab() {
         </Card>
       </div>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/CraftingTab/MaterialRecipeCard.tsx

@@ -7,6 +7,7 @@ import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
 import { canCraftRecipe } from '@/lib/game/data/fabricator-recipes';
 import { MANA_TYPE_LABELS } from '@/lib/game/data/fabricator-recipe-types';
 import type { FabricatorRecipe } from '@/lib/game/data/fabricator-recipes';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface MaterialRecipeCardProps {
   recipe: FabricatorRecipe;
@@ -31,6 +32,7 @@ export function MaterialRecipeCard({
   const resultRarity = resultDrop ? LOOT_RARITY_COLORS[resultDrop.rarity] : null;
 
   return (
+    <DebugName name="MaterialRecipeCard">
     <div
       className="p-3 rounded border bg-gray-800/50"
       style={{ borderColor: resultRarity?.color ?? '#6B7280' }}
@@ -98,5 +100,6 @@ export function MaterialRecipeCard({
         {canCraft ? 'Craft' : 'Missing Resources'}
       </Button>
     </div>
+    </DebugName>
   );
 }