fix: apply DebugName wrappers to tab components (BUG 7 partial) and other updates

src/components/game/SkillsTab.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { SkillUpgradeDialog } from './SkillsTab/SkillUpgradeDialog';
 import { SkillStudyProgress } from './SkillsTab/SkillStudyProgress';
 import { SkillCategory } from './SkillsTab/SkillCategory';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function SkillsTab() {
   const currentStudyTarget = useSkillStore((s) => s.currentStudyTarget);
@@ -23,6 +24,7 @@ export function SkillsTab() {
   };
   
   return (
+    <DebugName name="SkillsTab">
     <div className="space-y-4">
       {/* Upgrade Selection Dialog */}
       <SkillUpgradeDialog 
@@ -48,6 +50,7 @@ export function SkillsTab() {
         />
       ))}
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/AchievementsTab.tsx

@@ -2,6 +2,7 @@
 
 import { AchievementsDisplay } from '@/components/game/AchievementsDisplay';
 import { useCombatStore, useManaStore, usePrestigeStore } from '@/lib/game/stores';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function AchievementsTab() {
   const achievements = useCombatStore((s) => s.achievements);
@@ -13,6 +14,7 @@ export function AchievementsTab() {
   const totalCraftsCompleted = useCombatStore((s) => s.totalCraftsCompleted);
 
   return (
+    <DebugName name="AchievementsTab">
     <div className="space-y-4">
       <AchievementsDisplay
         achievements={achievements}
@@ -26,6 +28,7 @@ export function AchievementsTab() {
         }}
       />
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/AttunementsTab.tsx

@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
 import { Lock, TrendingUp } from 'lucide-react';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function AttunementsTab() {
   const attunements = usePrestigeStore((s) => s.attunements) || {};
@@ -26,6 +27,7 @@ export function AttunementsTab() {
   const availableCategories = getAvailableSkillCategories(attunements);
 
   return (
+    <DebugName name="AttunementsTab">
     <div className="space-y-4">
       {/* Overview Card */}
       <Card className="bg-gray-900/80 border-gray-700">
@@ -261,6 +263,7 @@ export function AttunementsTab() {
         </CardContent>
       </Card>
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/CraftingTab.tsx

@@ -14,6 +14,7 @@ import {
   EquipmentCrafter,
 } from '@/components/game/crafting';
 import { useCombatStore, useCraftingStore } from '@/lib/game/stores';
+import { DebugName } from '@/lib/game/debug-context';
 import { useGameToast } from '@/components/game/GameToast';
 
 export function CraftingTab() {
@@ -52,6 +53,7 @@ export function CraftingTab() {
   };
 
   return (
+    <DebugName name="CraftingTab">
     <div className="space-y-4 max-w-full overflow-x-hidden">
       {/* Top Sub-Tabs: Fabricate / Enchant */}
       <GameCard variant="default" className="p-4">
@@ -252,6 +254,7 @@ export function CraftingTab() {
         </GameCard>
       )}
     </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { GameStateDebug } from '@/components/game/debug/GameStateDebug';
+import { DebugName } from '@/lib/game/debug-context';
 import { 
   SkillDebug, 
   AttunementDebug, 
@@ -11,6 +12,7 @@ import {
 
 export function DebugTab() {
   return (
+    <DebugName name="DebugTab">
     <div className="space-y-4">
       <GameStateDebug />
       
@@ -23,6 +25,7 @@ export function DebugTab() {
       <GolemDebug />
       <PactDebug />
     </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/EquipmentTab.tsx

@@ -23,6 +23,7 @@ import { EquipmentInventory } from './EquipmentInventory';
 import { EnchantmentsPanel } from './EnchantmentsPanel';
 import { useGameToast } from '@/components/game/GameToast';
 import { ConfirmDialog } from '@/components/game/ConfirmDialog';
+import { DebugName } from '@/lib/game/debug-context';
 import { equipItem, unequipItem, deleteEquipmentInstance } from '@/lib/game/crafting-actions';
 import { useCombatStore, useCraftingStore } from '@/lib/game/stores';
 
@@ -139,10 +140,12 @@ export function EquipmentTab() {
   // Guard against undefined during initialization - AFTER all hooks
   if (!equippedInstances || !equipmentInstances) {
     return (
+      <DebugName name="EquipmentTab">
       <div className="p-4 text-center text-[var(--text-muted)]">
         Loading equipment data...
       </div>
-    );
+    
+    </DebugName>);
   }
 
   // Equip an item to a slot
@@ -231,6 +234,7 @@ export function EquipmentTab() {
   const unifiedEffects = getUnifiedEffects({ equipmentInstances, equippedInstances });
 
   return (
+    <DebugName name="EquipmentTab">
     <div className="space-y-4 max-w-full overflow-x-hidden">
       {/* Equipment Slots */}
       <GameCard variant="default">
@@ -374,7 +378,8 @@ export function EquipmentTab() {
         onConfirm={confirmDelete}
       />
     </div>
-  );
+  
+</DebugName>);
 }
 
 EquipmentTab.displayName = 'EquipmentTab';

src/components/game/tabs/GolemancyTab.tsx

@@ -67,6 +67,8 @@ export function GolemancyTab() {
     if (!isUnlocked) {
       // Locked golem card
       return (
+
+        <DebugName name="GolemancyTab">
         <GameCard key={golemId} variant="sunken" className="opacity-60">
           <div className="pb-2">
             <h3 className="text-sm font-semibold flex items-center gap-2">
@@ -86,7 +88,8 @@ export function GolemancyTab() {
             )}
           </div>
         </GameCard>
-      );
+      
+      </DebugName>);
     }
 
     return (
@@ -315,3 +318,4 @@ export function GolemancyTab() {
 }
 
 GolemancyTab.displayName = "GolemancyTab";
+import { DebugName } from '@/lib/game/debug-context';

src/components/game/tabs/LootTab.tsx

@@ -2,6 +2,7 @@
 
 import { useCraftingStore, useManaStore } from '@/lib/game/stores';
 import { LootInventoryDisplay } from '@/components/game/LootInventory';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function LootTab() {
   const lootInventory = useCraftingStore((s) => s.lootInventory);
@@ -11,6 +12,7 @@ export function LootTab() {
   const deleteEquipmentInstance = useCraftingStore((s) => s.deleteEquipmentInstance);
 
   return (
+    <DebugName name="LootTab">
     <div className="space-y-4">
       <LootInventoryDisplay
         inventory={lootInventory}
@@ -20,6 +22,7 @@ export function LootTab() {
         onDeleteEquipment={deleteEquipmentInstance}
       />
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/SpellsTab.tsx

@@ -30,10 +30,13 @@ export function SpellsTab() {
   // Guard against undefined stores during initialization
   if (!equippedInstances || !equipmentInstances) {
     return (
+
+      <DebugName name="SpellsTab">
       <div className="p-4 text-center text-[var(--text-muted)]">
         Loading spell data...
       </div>
-    );
+    
+    </DebugName>);
   }
   
   for (const instanceId of Object.values(equippedInstances || {})) {
@@ -238,3 +241,4 @@ export function SpellsTab() {
 }
 
 SpellsTab.displayName = "SpellsTab";
+import { DebugName } from '@/lib/game/debug-context';

src/components/game/tabs/SpireTab.tsx

@@ -22,6 +22,7 @@ import { RoomDisplay } from './RoomDisplay';
 import { FloorControls } from './FloorControls';
 import { CombatStatsPanel } from './CombatStatsPanel';
 import { ActivityLog } from './ActivityLog';
+import { DebugName } from '@/lib/game/debug-context';
 
 // Room type configurations
 const ROOM_TYPE_CONFIG: Record<string, { label: string; icon: string; color: string }> = {
@@ -130,6 +131,7 @@ export function SpireTab({ simpleMode = false }: SpireTabProps) {
   };
 
   return (
+    <DebugName name="SpireTab">
     <div className="grid gap-4">
       {/* Enter Spire Mode - Normal mode only */}
       {!simpleMode && (
@@ -384,6 +386,7 @@ export function SpireTab({ simpleMode = false }: SpireTabProps) {
         </Card>
       )}
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/StatsTab.tsx

@@ -18,6 +18,7 @@ import { UpgradeEffectsSection } from '../stats/UpgradeEffectsSection';
 // Modular stores
 import { useCombatStore, useManaStore, useSkillStore, usePrestigeStore, useGameStore } from '@/lib/game/stores';
 import { useCraftingStore } from '@/lib/game/stores/craftingStore';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function StatsTab() {
   // Get state from modular stores
@@ -116,6 +117,7 @@ export function StatsTab() {
   })();
 
   return (
+    <DebugName name="StatsTab">
     <div className="space-y-4">
       {/* Mana Stats */}
       <ManaStatsSection
@@ -322,6 +324,7 @@ export function StatsTab() {
         </CardContent>
       </Card>
     </div>
+  </DebugName>
   );
 }