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

src/components/game/tabs/ActivityLog.tsx

@@ -1,4 +1,5 @@
 import type { ActivityLogEntry } from '@/lib/game/types';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface ActivityLogProps {
   activityLog: ActivityLogEntry[];
@@ -10,14 +11,17 @@ export function ActivityLog({ activityLog, maxEntries = 20 }: ActivityLogProps)
 
   if (entries.length === 0) {
     return (
-      <div className="text-sm text-gray-500 italic p-2">
-        No activity yet.
-      </div>
+      <DebugName name="ActivityLog">
+        <div className="text-sm text-gray-500 italic p-2">
+          No activity yet.
+        </div>
+      </DebugName>
     );
   }
 
   return (
-    <div className="space-y-1 max-h-64 overflow-y-auto">
+    <DebugName name="ActivityLog">
+      <div className="space-y-1 max-h-64 overflow-y-auto">
       {entries.map((entry) => (
         <div
           key={entry.id}
@@ -29,6 +33,7 @@ export function ActivityLog({ activityLog, maxEntries = 20 }: ActivityLogProps)
           {entry.message}
         </div>
       ))}
-    </div>
+      </div>
+    </DebugName>
   );
 }

src/components/game/tabs/AttunementsTab.tsx

@@ -6,7 +6,6 @@ import type { AttunementDef, AttunementState } from '@/lib/game/types';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { DebugName } from '@/components/game/debug/debug-context';
 import { fmt } from '@/lib/game/stores';
 
@@ -36,36 +35,83 @@ interface AttunementCardProps {
 
 function AttunementCard({ def, state }: AttunementCardProps) {
   const unlocked = !!state;
+  const isStarting = def.unlocked === true;
   const xpProgress = state ? getXpProgress(state) : 0;
   const nextXp = state ? getXpForNextLevel(state.level) : 0;
 
+  // Style tokens derived from def.color
+  const color = def.color;
+
   return (
-    <Card className={`bg-gray-900/60 ${unlocked ? 'border-gray-700' : 'border-gray-800 opacity-60'}`}>
-      <CardContent className="p-4 space-y-3">
+    <Card
+      className={`relative overflow-hidden ${
+        unlocked
+          ? 'bg-gray-900/60'
+          : 'bg-gray-950/80'
+      }`}
+      style={{
+        borderLeft: `3px solid ${unlocked ? color : `${color}33`}`,
+        borderColor: unlocked ? `${color}88` : `${color}22`,
+        opacity: unlocked ? 1 : 0.55,
+      }}
+    >
+      {/* Starting badge (top-right ribbon) */}
+      {isStarting && unlocked && (
+        <div
+          className="absolute top-3 right-3 text-[10px] font-semibold px-2 py-0.5 rounded-full"
+          style={{ backgroundColor: `${color}22`, color }}
+        >
+          Starting
+        </div>
+      )}
+
+      {/* Locked overlay pattern */}
+      {!unlocked && (
+        <div className="absolute inset-0 pointer-events-none" style={{ background: `repeating-linear-gradient(45deg, transparent, transparent 12px, ${color}08 12px, ${color}08 24px)` }} />
+      )}
+
+      <CardContent className="p-4 space-y-3 relative">
         {/* Header */}
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span className="text-xl">{def.icon}</span>
+          <div className="flex items-center gap-2.5">
+            <span
+              className="text-xl p-1 rounded"
+              style={{ backgroundColor: `${color}18` }}
+            >
+              {def.icon}
+            </span>
             <div>
-              <h3 className="font-medium text-gray-100">{def.name}</h3>
+              <h3
+                className="font-semibold"
+                style={{ color: unlocked ? color : `${color}99` }}
+              >
+                {def.name}
+              </h3>
               <p className="text-xs text-gray-500">
                 {ATTUNEMENT_SLOT_NAMES[def.slot] ?? def.slot}
               </p>
             </div>
           </div>
           {unlocked ? (
-            <Badge className="bg-teal-900/50 text-teal-300 text-xs">
+            <Badge
+              className="text-xs font-bold"
+              style={{ backgroundColor: `${color}25`, color, border: `1px solid ${color}44` }}
+            >
               Lv.{state.level}
             </Badge>
           ) : (
-            <Badge variant="outline" className="border-gray-700 text-gray-500 text-xs">
-              Locked
+            <Badge
+              variant="outline"
+              className="text-xs"
+              style={{ borderColor: `${color}44`, color: `${color}88` }}
+            >
+              🔒 Locked
             </Badge>
           )}
         </div>
 
         {/* Description */}
-        <p className="text-xs text-gray-400 leading-relaxed">{def.desc}</p>
+        <p className={`text-xs leading-relaxed ${unlocked ? 'text-gray-400' : 'text-gray-600'}`}>{def.desc}</p>
 
         {/* XP Progress (unlocked only) */}
         {unlocked && state && (
@@ -76,7 +122,12 @@ function AttunementCard({ def, state }: AttunementCardProps) {
                 {fmt(state.experience)} / {fmt(nextXp)}
               </span>
             </div>
-            <Progress value={xpProgress} className="h-2" />
+            <div className="h-2 rounded-full overflow-hidden bg-gray-800">
+              <div
+                className="h-full rounded-full transition-all"
+                style={{ width: `${xpProgress}%`, backgroundColor: color }}
+              />
+            </div>
             {state.level >= MAX_ATTUNEMENT_LEVEL && (
               <p className="text-xs text-amber-400 italic">Maximum level reached</p>
             )}
@@ -85,13 +136,19 @@ function AttunementCard({ def, state }: AttunementCardProps) {
 
         {/* Unlock condition (locked only) */}
         {!unlocked && def.unlockCondition && (
-          <div className="text-xs text-gray-500 italic border-t border-gray-800 pt-2">
+          <div
+            className="text-xs italic pt-2"
+            style={{ color: `${color}77`, borderTop: `1px solid ${color}15` }}
+          >
             🔒 {def.unlockCondition}
           </div>
         )}
 
         {/* Details grid */}
-        <div className="grid grid-cols-2 gap-2 text-xs border-t border-gray-800 pt-3">
+        <div
+          className="grid grid-cols-2 gap-2 text-xs pt-3"
+          style={{ borderTop: `1px solid ${unlocked ? `${color}22` : `${color}10`}` }}
+        >
           <div>
             <span className="text-gray-500">Mana Type</span>
             <p className="text-gray-300 capitalize">
@@ -110,21 +167,35 @@ function AttunementCard({ def, state }: AttunementCardProps) {
           )}
           <div>
             <span className="text-gray-500">Status</span>
-            <p className={state?.active ? 'text-green-400' : 'text-gray-500'}>
-              {state?.active ? 'Active' : unlocked ? 'Inactive' : 'Locked'}
+            <p style={{ color: state?.active ? '#4ade80' : unlocked ? `${color}aa` : '#6b7280' }}>
+              {state?.active ? '● Active' : unlocked ? '○ Inactive' : 'Locked'}
             </p>
           </div>
+          {/* Invoker special: pact-based note */}
+          {def.primaryManaType === undefined && (
+            <div className="col-span-2">
+              <span className="text-gray-500">Special</span>
+              <p style={{ color: `${color}cc` }}>
+                Gains elemental mana from each guardian pact signed
+              </p>
+            </div>
+          )}
         </div>
 
         {/* Capabilities */}
-        <div className="border-t border-gray-800 pt-3">
+        <div style={{ borderTop: `1px solid ${unlocked ? `${color}22` : `${color}10`}` }} className="pt-3">
           <span className="text-xs text-gray-500 block mb-1.5">Capabilities</span>
           <div className="flex flex-wrap gap-1">
             {def.capabilities.map((cap) => (
               <Badge
                 key={cap}
                 variant="outline"
-                className="border-gray-700 text-gray-400 text-[10px]"
+                className="text-[10px]"
+                style={{
+                  borderColor: `${color}44`,
+                  color: unlocked ? `${color}cc` : `${color}66`,
+                  backgroundColor: `${color}0a`,
+                }}
               >
                 {cap}
               </Badge>
@@ -140,7 +211,12 @@ function AttunementCard({ def, state }: AttunementCardProps) {
               <Badge
                 key={cat}
                 variant="outline"
-                className="border-gray-700 text-gray-400 text-[10px]"
+                className="text-[10px]"
+                style={{
+                  borderColor: `${color}33`,
+                  color: unlocked ? `${color}aa` : `${color}55`,
+                  backgroundColor: `${color}08`,
+                }}
               >
                 {cat}
               </Badge>
@@ -174,7 +250,7 @@ export function AttunementsTab() {
                 </p>
               </div>
               <div className="text-right">
-                <div className="text-2xl font-bold text-teal-400">
+                <div className="text-2xl font-bold" style={{ color: '#1ABC9C' }}>
                   {unlockedCount}
                   <span className="text-sm text-gray-500 font-normal">
                     /{allDefs.length}
@@ -187,17 +263,15 @@ export function AttunementsTab() {
         </Card>
 
         {/* Attunement cards */}
-        <ScrollArea className="h-[600px] pr-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {allDefs.map((def) => (
-              <AttunementCard
-                key={def.id}
-                def={def}
-                state={attunements[def.id]}
-              />
-            ))}
-          </div>
-        </ScrollArea>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {allDefs.map((def) => (
+            <AttunementCard
+              key={def.id}
+              def={def}
+              state={attunements[def.id]}
+            />
+          ))}
+        </div>
       </div>
     </DebugName>
   );

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>
   );
 }

src/components/game/tabs/DebugTab/AchievementDebugSection.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Trophy, CheckCircle, RotateCcw } from 'lucide-react';
 import { useCombatStore } from '@/lib/game/stores';
 import { ACHIEVEMENTS } from '@/lib/game/data/achievements';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function AchievementDebugSection() {
   const achievements = useCombatStore((s) => s.achievements);
@@ -33,50 +34,52 @@ export function AchievementDebugSection() {
   };
 
   return (
-    <Card className="bg-gray-900/80 border-gray-700">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-yellow-400 text-sm flex items-center gap-2">
-          <Trophy className="w-4 h-4" />
-          Achievement Debug
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        <div className="text-xs text-gray-400">
-          Unlocked: {unlockedCount} / {totalCount}
-        </div>
+    <DebugName name="AchievementDebugSection">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-yellow-400 text-sm flex items-center gap-2">
+            <Trophy className="w-4 h-4" />
+            Achievement Debug
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="text-xs text-gray-400">
+            Unlocked: {unlockedCount} / {totalCount}
+          </div>
 
-        <div className="flex gap-2 flex-wrap">
-          <Button size="sm" variant="outline" onClick={handleUnlockAll}>
-            <CheckCircle className="w-3 h-3 mr-1" /> Unlock All
-          </Button>
-          <Button size="sm" variant="destructive" onClick={handleResetAll}>
-            <RotateCcw className="w-3 h-3 mr-1" /> Reset All
-          </Button>
-        </div>
+          <div className="flex gap-2 flex-wrap">
+            <Button size="sm" variant="outline" onClick={handleUnlockAll}>
+              <CheckCircle className="w-3 h-3 mr-1" /> Unlock All
+            </Button>
+            <Button size="sm" variant="destructive" onClick={handleResetAll}>
+              <RotateCcw className="w-3 h-3 mr-1" /> Reset All
+            </Button>
+          </div>
 
-        <div className="space-y-1 max-h-48 overflow-y-auto">
-          {Object.entries(ACHIEVEMENTS).map(([id, def]) => {
-            const isUnlocked = achievements?.unlocked?.includes(id);
-            return (
-              <div
-                key={id}
-                className={`flex items-center justify-between p-2 rounded text-xs ${
-                  isUnlocked ? 'bg-green-900/20 border border-green-600/50' : 'bg-gray-800/50'
-                }`}
-              >
-                <div>
-                  <span className="font-medium">{def.name}</span>
-                  <span className="text-gray-500 ml-2">({def.category})</span>
+          <div className="space-y-1 max-h-48 overflow-y-auto">
+            {Object.entries(ACHIEVEMENTS).map(([id, def]) => {
+              const isUnlocked = achievements?.unlocked?.includes(id);
+              return (
+                <div
+                  key={id}
+                  className={`flex items-center justify-between p-2 rounded text-xs ${
+                    isUnlocked ? 'bg-green-900/20 border border-green-600/50' : 'bg-gray-800/50'
+                  }`}
+                >
+                  <div>
+                    <span className="font-medium">{def.name}</span>
+                    <span className="text-gray-500 ml-2">({def.category})</span>
+                  </div>
+                  {isUnlocked && (
+                    <CheckCircle className="w-3 h-3 text-green-400" />
+                  )}
                 </div>
-                {isUnlocked && (
-                  <CheckCircle className="w-3 h-3 text-green-400" />
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab/AttunementDebugSection.tsx

@@ -6,6 +6,7 @@ import { Sparkles, Unlock } from 'lucide-react';
 import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { useAttunementStore } from '@/lib/game/stores';
 import { useManaStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function AttunementDebugSection() {
   const attunements = useAttunementStore((s) => s.attunements);
@@ -34,54 +35,56 @@ export function AttunementDebugSection() {
   };
 
   return (
-    <Card className="bg-gray-900/80 border-gray-700">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-purple-400 text-sm flex items-center gap-2">
-          <Sparkles className="w-4 h-4" />
-          Attunements
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        <Button size="sm" variant="outline" onClick={handleUnlockAll}>
-          <Unlock className="w-3 h-3 mr-1" /> Unlock All
-        </Button>
-        {Object.entries(ATTUNEMENTS_DEF).map(([id, def]) => {
-          const isActive = attunements?.[id]?.active;
-          const level = attunements?.[id]?.level || 1;
-          const xp = attunements?.[id]?.experience || 0;
+    <DebugName name="AttunementDebugSection">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-purple-400 text-sm flex items-center gap-2">
+            <Sparkles className="w-4 h-4" />
+            Attunements
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Button size="sm" variant="outline" onClick={handleUnlockAll}>
+            <Unlock className="w-3 h-3 mr-1" /> Unlock All
+          </Button>
+          {Object.entries(ATTUNEMENTS_DEF).map(([id, def]) => {
+            const isActive = attunements?.[id]?.active;
+            const level = attunements?.[id]?.level || 1;
+            const xp = attunements?.[id]?.experience || 0;
 
-          return (
-            <div key={id} className="flex items-center justify-between p-2 bg-gray-800/50 rounded">
-              <div className="flex items-center gap-2">
-                <span>{def.icon}</span>
-                <div>
-                  <div className="text-sm font-medium">{def.name}</div>
-                  {isActive && (
-                    <div className="text-xs text-gray-400">Lv.{level} • {xp} XP</div>
-                  )}
+            return (
+              <div key={id} className="flex items-center justify-between p-2 bg-gray-800/50 rounded">
+                <div className="flex items-center gap-2">
+                  <span>{def.icon}</span>
+                  <div>
+                    <div className="text-sm font-medium">{def.name}</div>
+                    {isActive && (
+                      <div className="text-xs text-gray-400">Lv.{level} • {xp} XP</div>
+                    )}
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => handleUnlockAttunement(id)}
+                  >
+                    <Unlock className="w-3 h-3 mr-1" /> Unlock
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => handleAddAttunementXP(id, 100)}
+                  >
+                    +100 XP
+                  </Button>
                 </div>
               </div>
-              <div className="flex gap-2">
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => handleUnlockAttunement(id)}
-                >
-                  <Unlock className="w-3 h-3 mr-1" /> Unlock
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => handleAddAttunementXP(id, 100)}
-                >
-                  +100 XP
-                </Button>
-              </div>
-            </div>
-          );
-        })}
-      </CardContent>
-    </Card>
+            );
+          })}
+        </CardContent>
+      </Card>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab/DisciplineDebugSection.tsx

@@ -6,6 +6,7 @@ import { BookOpen, Plus, Pause, Play } from 'lucide-react';
 import { useDisciplineStore } from '@/lib/game/stores/discipline-slice';
 import { ALL_DISCIPLINES } from '@/lib/game/data/disciplines';
 import { useManaStore } from '@/lib/game/stores/manaStore';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function DisciplineDebugSection() {
   const disciplines = useDisciplineStore((s) => s.disciplines);
@@ -55,81 +56,83 @@ export function DisciplineDebugSection() {
   };
 
   return (
-    <Card className="bg-gray-900/80 border-gray-700">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-indigo-400 text-sm flex items-center gap-2">
-          <BookOpen className="w-4 h-4" />
-          Disciplines
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        <div className="flex gap-2 flex-wrap mb-2">
-          <Button size="sm" variant="outline" onClick={handleActivateAll}>
-            <Play className="w-3 h-3 mr-1" /> Activate All
-          </Button>
-          <Button size="sm" variant="outline" onClick={handleDeactivateAll}>
-            <Pause className="w-3 h-3 mr-1" /> Deactivate All
-          </Button>
-        </div>
-        <div className="text-xs text-gray-400">
-          Active: {activeIds.length} / {concurrentLimit}
-        </div>
-        <div className="space-y-2 max-h-64 overflow-y-auto">
-          {ALL_DISCIPLINES.map((def) => {
-            const disc = disciplines[def.id];
-            const isActive = activeIds.includes(def.id);
-            const xp = disc?.xp || 0;
+    <DebugName name="DisciplineDebugSection">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-indigo-400 text-sm flex items-center gap-2">
+            <BookOpen className="w-4 h-4" />
+            Disciplines
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex gap-2 flex-wrap mb-2">
+            <Button size="sm" variant="outline" onClick={handleActivateAll}>
+              <Play className="w-3 h-3 mr-1" /> Activate All
+            </Button>
+            <Button size="sm" variant="outline" onClick={handleDeactivateAll}>
+              <Pause className="w-3 h-3 mr-1" /> Deactivate All
+            </Button>
+          </div>
+          <div className="text-xs text-gray-400">
+            Active: {activeIds.length} / {concurrentLimit}
+          </div>
+          <div className="space-y-2 max-h-64 overflow-y-auto">
+            {ALL_DISCIPLINES.map((def) => {
+              const disc = disciplines[def.id];
+              const isActive = activeIds.includes(def.id);
+              const xp = disc?.xp || 0;
 
-            return (
-              <div
-                key={def.id}
-                className="flex items-center justify-between p-2 bg-gray-800/50 rounded"
-              >
-                <div>
-                  <div className="text-sm font-medium">{def.name}</div>
-                  <div className="text-xs text-gray-400">
-                    {isActive ? `XP: ${xp}` : 'Inactive'}
+              return (
+                <div
+                  key={def.id}
+                  className="flex items-center justify-between p-2 bg-gray-800/50 rounded"
+                >
+                  <div>
+                    <div className="text-sm font-medium">{def.name}</div>
+                    <div className="text-xs text-gray-400">
+                      {isActive ? `XP: ${xp}` : 'Inactive'}
+                    </div>
+                  </div>
+                  <div className="flex gap-1">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleAddXP(def.id, 100)}
+                    >
+                      <Plus className="w-3 h-3 mr-1" /> +100
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleAddXP(def.id, 1000)}
+                    >
+                      +1K
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant={isActive ? 'default' : 'outline'}
+                      onClick={() => {
+                        if (isActive) {
+                          deactivate(def.id);
+                        } else {
+                          activate(def.id, { elements });
+                        }
+                      }}
+                    >
+                      {isActive ? (
+                        <Pause className="w-3 h-3" />
+                      ) : (
+                        <Play className="w-3 h-3" />
+                      )}
+                    </Button>
                   </div>
                 </div>
-                <div className="flex gap-1">
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => handleAddXP(def.id, 100)}
-                  >
-                    <Plus className="w-3 h-3 mr-1" /> +100
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => handleAddXP(def.id, 1000)}
-                  >
-                    +1K
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant={isActive ? 'default' : 'outline'}
-                    onClick={() => {
-                      if (isActive) {
-                        deactivate(def.id);
-                      } else {
-                        activate(def.id, { elements });
-                      }
-                    }}
-                  >
-                    {isActive ? (
-                      <Pause className="w-3 h-3" />
-                    ) : (
-                      <Play className="w-3 h-3" />
-                    )}
-                  </Button>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab/ElementDebugSection.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Star, Lock } from 'lucide-react';
 import { useManaStore } from '@/lib/game/stores';
 import { ELEMENTS } from '@/lib/game/constants';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function ElementDebugSection() {
   const elements = useManaStore((s) => s.elements);
@@ -29,63 +30,65 @@ export function ElementDebugSection() {
   };
 
   return (
-    <Card className="bg-gray-900/80 border-gray-700">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-green-400 text-sm flex items-center gap-2">
-          <Star className="w-4 h-4" />
-          Elemental Mana
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="mb-3">
-          <Button size="sm" variant="outline" onClick={handleUnlockAll}>
-            <Lock className="w-3 h-3 mr-1" /> Unlock All Elements
-          </Button>
-        </div>
-        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
-          {Object.entries(elements || {}).map(([id, elem]) => {
-            const def = ELEMENTS[id];
-            return (
-              <div
-                key={id}
-                className={`p-2 rounded border text-center ${
-                  elem.unlocked ? 'border-gray-600 bg-gray-800/50' : 'border-gray-800 opacity-60'
-                }`}
-                style={{
-                  borderColor: elem.unlocked ? def?.color : undefined
-                }}
-              >
-                <div className="text-lg">{def?.sym}</div>
-                <div className="text-xs text-gray-400">{def?.name}</div>
-                <div className="text-xs text-gray-300 mt-1">
-                  {elem.current}/{elem.max}
+    <DebugName name="ElementDebugSection">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-green-400 text-sm flex items-center gap-2">
+            <Star className="w-4 h-4" />
+            Elemental Mana
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="mb-3">
+            <Button size="sm" variant="outline" onClick={handleUnlockAll}>
+              <Lock className="w-3 h-3 mr-1" /> Unlock All Elements
+            </Button>
+          </div>
+          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
+            {Object.entries(elements || {}).map(([id, elem]) => {
+              const def = ELEMENTS[id];
+              return (
+                <div
+                  key={id}
+                  className={`p-2 rounded border text-center ${
+                    elem.unlocked ? 'border-gray-600 bg-gray-800/50' : 'border-gray-800 opacity-60'
+                  }`}
+                  style={{
+                    borderColor: elem.unlocked ? def?.color : undefined
+                  }}
+                >
+                  <div className="text-lg">{def?.sym}</div>
+                  <div className="text-xs text-gray-400">{def?.name}</div>
+                  <div className="text-xs text-gray-300 mt-1">
+                    {elem.current}/{elem.max}
+                  </div>
+                  {!elem.unlocked && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="mt-2"
+                      onClick={() => handleUnlockElement(id)}
+                    >
+                      <Lock className="w-3 h-3 mr-1" /> Unlock
+                    </Button>
+                  )}
+                  {elem.unlocked && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="mt-2"
+                      onClick={() => handleAddElementalMana(id, 10)}
+                    >
+                      +10
+                    </Button>
+                  )}
                 </div>
-                {!elem.unlocked && (
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="mt-2"
-                    onClick={() => handleUnlockElement(id)}
-                  >
-                    <Lock className="w-3 h-3 mr-1" /> Unlock
-                  </Button>
-                )}
-                {elem.unlocked && (
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="mt-2"
-                    onClick={() => handleAddElementalMana(id, 10)}
-                  >
-                    +10
-                  </Button>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab/GameStateDebugSection.tsx

@@ -9,7 +9,7 @@ import { Label } from '@/components/ui/label';
 import {
   RotateCcw, AlertTriangle, Zap, Clock, Eye,
 } from 'lucide-react';
-import { useDebug } from '@/components/game/debug/debug-context';
+import { DebugName, useDebug } from '@/components/game/debug/debug-context';
 import { useGameStore, useManaStore, useUIStore, useCombatStore } from '@/lib/game/stores';
 import { computeMaxMana } from '@/lib/game/stores';
 
@@ -252,20 +252,22 @@ export function GameStateDebugSection() {
   };
 
   return (
-    <div className="space-y-4">
-      <DisplayOptions />
+    <DebugName name="GameStateDebugSection">
+      <div className="space-y-4">
+        <DisplayOptions />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <GameResetSection confirmReset={confirmReset} onReset={handleReset} />
-        <ManaDebugSection rawMana={rawMana} onAddMana={handleAddMana} onFillMana={handleFillMana} />
-        <TimeControlSection day={day} hour={hour} paused={paused} onSetDay={handleSetDay} onTogglePause={togglePause} />
-        <QuickActionsSection
-          onUnlockBase={handleUnlockBase}
-          onSkipToFloor={() => debugSetFloor?.(100)}
-          onResetFloorHP={() => resetFloorHP?.()}
-        />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <GameResetSection confirmReset={confirmReset} onReset={handleReset} />
+          <ManaDebugSection rawMana={rawMana} onAddMana={handleAddMana} onFillMana={handleFillMana} />
+          <TimeControlSection day={day} hour={hour} paused={paused} onSetDay={handleSetDay} onTogglePause={togglePause} />
+          <QuickActionsSection
+            onUnlockBase={handleUnlockBase}
+            onSkipToFloor={() => debugSetFloor?.(100)}
+            onResetFloorHP={() => resetFloorHP?.()}
+          />
+        </div>
       </div>
-    </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab/GolemDebugSection.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Bug, Wand2 } from 'lucide-react';
 import { useCombatStore } from '@/lib/game/stores';
 import { GOLEMS_DEF } from '@/lib/game/data/golems';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function GolemDebugSection() {
   const golemancy = useCombatStore((s) => s.golemancy);
@@ -29,52 +30,54 @@ export function GolemDebugSection() {
   };
 
   return (
-    <Card className="bg-gray-900/80 border-gray-700">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
-          <Bug className="w-4 h-4" />
-          Golem Debug
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        <div className="flex gap-2 flex-wrap">
-          <Button size="sm" variant="outline" onClick={handleEnableAll}>
-            <Wand2 className="w-3 h-3 mr-1" /> Enable All Golems
-          </Button>
-          <Button size="sm" variant="outline" onClick={handleDisableAll}>
-            Disable All Golems
-          </Button>
-        </div>
-        <div className="text-xs text-gray-400">
-          Enabled: {enabledGolems.length} / {Object.keys(GOLEMS_DEF).length}
-        </div>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-48 overflow-y-auto">
-          {Object.entries(GOLEMS_DEF).map(([id, def]) => {
-            const isEnabled = enabledGolems.includes(id);
-            return (
-              <div
-                key={id}
-                className={`p-2 rounded border flex items-center justify-between ${
-                  isEnabled ? 'border-orange-600/50 bg-orange-900/20' : 'border-gray-700'
-                }`}
-              >
-                <div>
-                  <div className="text-sm font-medium">{def.name}</div>
-                  <div className="text-xs text-gray-400">{def.baseManaType}</div>
-                </div>
-                <Button
-                  size="sm"
-                  variant={isEnabled ? 'default' : 'outline'}
-                  onClick={() => handleToggleGolem(id)}
+    <DebugName name="GolemDebugSection">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
+            <Bug className="w-4 h-4" />
+            Golem Debug
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex gap-2 flex-wrap">
+            <Button size="sm" variant="outline" onClick={handleEnableAll}>
+              <Wand2 className="w-3 h-3 mr-1" /> Enable All Golems
+            </Button>
+            <Button size="sm" variant="outline" onClick={handleDisableAll}>
+              Disable All Golems
+            </Button>
+          </div>
+          <div className="text-xs text-gray-400">
+            Enabled: {enabledGolems.length} / {Object.keys(GOLEMS_DEF).length}
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-48 overflow-y-auto">
+            {Object.entries(GOLEMS_DEF).map(([id, def]) => {
+              const isEnabled = enabledGolems.includes(id);
+              return (
+                <div
+                  key={id}
+                  className={`p-2 rounded border flex items-center justify-between ${
+                    isEnabled ? 'border-orange-600/50 bg-orange-900/20' : 'border-gray-700'
+                  }`}
                 >
-                  {isEnabled ? 'On' : 'Off'}
-                </Button>
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
+                  <div>
+                    <div className="text-sm font-medium">{def.name}</div>
+                    <div className="text-xs text-gray-400">{def.baseManaType}</div>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant={isEnabled ? 'default' : 'outline'}
+                    onClick={() => handleToggleGolem(id)}
+                  >
+                    {isEnabled ? 'On' : 'Off'}
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab/PactDebugSection.tsx

@@ -6,6 +6,7 @@ import { Bug } from 'lucide-react';
 import { usePrestigeStore, useUIStore, useGameStore } from '@/lib/game/stores';
 import { ELEMENTS } from '@/lib/game/constants';
 import { getGuardianForFloor, getAllGuardianFloors } from '@/lib/game/data/guardian-encounters';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 // ─── Guardian Pact Row ───────────────────────────────────────────────────────
 
@@ -124,43 +125,45 @@ export function PactDebugSection() {
   };
 
   return (
-    <Card className="bg-gray-900/80 border-gray-700">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
-          <Bug className="w-4 h-4" />
-          Pact Debug
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-3">
-          <div className="flex gap-2 flex-wrap">
-            <Button size="sm" variant="outline" onClick={signAllPacts}>
-              Sign All Pacts
-            </Button>
-            <Button size="sm" variant="destructive" onClick={clearAllPacts}>
-              Clear All Pacts ({signedPacts.length})
-            </Button>
-          </div>
+    <DebugName name="PactDebugSection">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
+            <Bug className="w-4 h-4" />
+            Pact Debug
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <div className="flex gap-2 flex-wrap">
+              <Button size="sm" variant="outline" onClick={signAllPacts}>
+                Sign All Pacts
+              </Button>
+              <Button size="sm" variant="destructive" onClick={clearAllPacts}>
+                Clear All Pacts ({signedPacts.length})
+              </Button>
+            </div>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
-            {guardianFloors.map((floor) => (
-              <GuardianPactRow
-                key={floor}
-                floor={floor}
-                isSigned={signedPacts.includes(floor)}
-                onForceSign={() => forcePact(floor)}
-                onRemove={() => removePactHandler(floor)}
-              />
-            ))}
-          </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+              {guardianFloors.map((floor) => (
+                <GuardianPactRow
+                  key={floor}
+                  floor={floor}
+                  isSigned={signedPacts.includes(floor)}
+                  onForceSign={() => forcePact(floor)}
+                  onRemove={() => removePactHandler(floor)}
+                />
+              ))}
+            </div>
 
-          <div className="text-xs text-gray-400 pt-2 border-t border-gray-700">
-            Signed Pacts: {signedPacts.length} |
-            Max Pacts: {1 + (prestigeUpgrades?.pactCapacity || 0)}
+            <div className="text-xs text-gray-400 pt-2 border-t border-gray-700">
+              Signed Pacts: {signedPacts.length} |
+              Max Pacts: {1 + (prestigeUpgrades?.pactCapacity || 0)}
+            </div>
           </div>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab/SpireDebugSection.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Castle, ArrowUp, Eye } from 'lucide-react';
 import { useCombatStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function SpireDebugSection() {
   const [floorInput, setFloorInput] = useState('50');
@@ -39,67 +40,69 @@ export function SpireDebugSection() {
   };
 
   return (
-    <Card className="bg-gray-900/80 border-gray-700">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-teal-400 text-sm flex items-center gap-2">
-          <Castle className="w-4 h-4" />
-          Spire Debug
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        <div className="text-xs text-gray-400">
-          Current Floor: {currentFloor} | Max Reached: {maxFloorReached} | Spire Mode: {spireMode ? 'ON' : 'OFF'}
-        </div>
-
-        <div className="flex gap-2 items-end">
-          <div className="flex-1">
-            <label className="text-xs text-gray-400 mb-1 block">Floor (1-100)</label>
-            <Input
-              type="number"
-              min={1}
-              max={100}
-              value={floorInput}
-              onChange={(e) => setFloorInput(e.target.value)}
-              className="h-8"
-            />
+    <DebugName name="SpireDebugSection">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-teal-400 text-sm flex items-center gap-2">
+            <Castle className="w-4 h-4" />
+            Spire Debug
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="text-xs text-gray-400">
+            Current Floor: {currentFloor} | Max Reached: {maxFloorReached} | Spire Mode: {spireMode ? 'ON' : 'OFF'}
           </div>
-          <Button size="sm" variant="outline" onClick={handleJumpToFloor}>
-            <ArrowUp className="w-3 h-3 mr-1" /> Jump
-          </Button>
-        </div>
 
-        <div className="flex gap-2 flex-wrap">
-          <Button size="sm" variant="outline" onClick={handleClearFloor}>
-            Reset Floor HP
-          </Button>
-          <Button
-            size="sm"
-            variant={spireMode ? 'default' : 'outline'}
-            onClick={handleToggleSpireMode}
-          >
-            <Eye className="w-3 h-3 mr-1" />
-            {spireMode ? 'Exit Spire Mode' : 'Enter Spire Mode'}
-          </Button>
-        </div>
-
-        <div className="flex gap-2 flex-wrap">
-          {[10, 25, 50, 75, 100].map((f) => (
-            <Button
-              key={f}
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                setFloorInput(String(f));
-                debugSetFloor(f);
-                setMaxFloorReached(f);
-              }}
-            >
-              Floor {f}
+          <div className="flex gap-2 items-end">
+            <div className="flex-1">
+              <label className="text-xs text-gray-400 mb-1 block">Floor (1-100)</label>
+              <Input
+                type="number"
+                min={1}
+                max={100}
+                value={floorInput}
+                onChange={(e) => setFloorInput(e.target.value)}
+                className="h-8"
+              />
+            </div>
+            <Button size="sm" variant="outline" onClick={handleJumpToFloor}>
+              <ArrowUp className="w-3 h-3 mr-1" /> Jump
             </Button>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
+          </div>
+
+          <div className="flex gap-2 flex-wrap">
+            <Button size="sm" variant="outline" onClick={handleClearFloor}>
+              Reset Floor HP
+            </Button>
+            <Button
+              size="sm"
+              variant={spireMode ? 'default' : 'outline'}
+              onClick={handleToggleSpireMode}
+            >
+              <Eye className="w-3 h-3 mr-1" />
+              {spireMode ? 'Exit Spire Mode' : 'Enter Spire Mode'}
+            </Button>
+          </div>
+
+          <div className="flex gap-2 flex-wrap">
+            {[10, 25, 50, 75, 100].map((f) => (
+              <Button
+                key={f}
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setFloorInput(String(f));
+                  debugSetFloor(f);
+                  setMaxFloorReached(f);
+                }}
+              >
+                Floor {f}
+              </Button>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </DebugName>
   );
 }
 

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>
   );
 }

src/components/game/tabs/SpellsTab.tsx

@@ -6,6 +6,7 @@ import { ELEMENTS, SPELLS_DEF } from '@/lib/game/constants';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 // Format spell cost for display
 function formatSpellCost(cost: { type: 'raw' | 'element'; element?: string; amount: number }): string {
@@ -34,7 +35,8 @@ export function SpellsTab() {
   const spellTiers = [0, 1, 2, 3, 4];
 
   return (
-    <div className="space-y-6">
+    <DebugName name="SpellsTab">
+      <div className="space-y-6">
       {spellTiers.map(tier => {
         const spellsInTier = Object.entries(SPELLS_DEF).filter(([, def]) => def.tier === tier);
         if (spellsInTier.length === 0) return null;
@@ -121,7 +123,8 @@ export function SpellsTab() {
           </div>
         );
       })}
-    </div>
+      </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/SpireCombatPage/RoomDisplay.tsx

@@ -7,6 +7,7 @@ import { Progress } from '@/components/ui/progress';
 import { getSpireRoomTypeDisplay } from '@/lib/game/utils/spire-utils';
 import { ELEMENTS } from '@/lib/game/constants';
 import { fmt } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface RoomDisplayProps {
   floorState: FloorState;
@@ -179,6 +180,7 @@ export function RoomDisplay({ floorState }: RoomDisplayProps) {
   const isGuardian = floorState.roomType === 'guardian';
 
   return (
+    <DebugName name="RoomDisplay">
     <Card className={`bg-gray-900/80 ${isGuardian ? 'border-red-800/40' : 'border-gray-700'}`}>
       <CardHeader className="pb-2">
         <CardTitle className="text-sm flex items-center gap-2" style={{ color: roomDisplay.color }}>
@@ -196,5 +198,6 @@ export function RoomDisplay({ floorState }: RoomDisplayProps) {
         )}
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/SpireCombatPage/SpireActivityLog.tsx

@@ -3,6 +3,7 @@
 import type { ActivityLogEntry } from '@/lib/game/types';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface SpireActivityLogProps {
   activityLog: ActivityLogEntry[];
@@ -13,6 +14,7 @@ export function SpireActivityLog({ activityLog, maxEntries = 30 }: SpireActivity
   const entries = activityLog.slice(0, maxEntries);
 
   return (
+    <DebugName name="SpireActivityLog">
     <Card className="bg-gray-900/80 border-gray-700">
       <CardHeader className="pb-2">
         <CardTitle className="text-sm text-gray-400">📜 Activity Log</CardTitle>
@@ -39,5 +41,6 @@ export function SpireActivityLog({ activityLog, maxEntries = 30 }: SpireActivity
         </ScrollArea>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/SpireCombatPage/SpireCombatControls.tsx

@@ -5,6 +5,7 @@ import { SPELLS_DEF, ELEMENTS } from '@/lib/game/constants';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { GOLEMS_DEF } from '@/lib/game/data/golems';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface SpireCombatControlsProps {
   castProgress: number;
@@ -31,6 +32,7 @@ export function SpireCombatControls({ castProgress }: SpireCombatControlsProps)
   const summonedGolems = golemancy.summonedGolems || [];
 
   return (
+    <DebugName name="SpireCombatControls">
     <div className="space-y-4">
       {/* Active Spell Panel */}
       <Card className="bg-gray-900/80 border-gray-700">
@@ -127,5 +129,6 @@ export function SpireCombatControls({ castProgress }: SpireCombatControlsProps)
         </CardContent>
       </Card>
     </div>
+    </DebugName>
   );
 }

src/components/game/tabs/SpireCombatPage/SpireCombatPage.tsx

@@ -13,6 +13,7 @@ import { RoomDisplay } from './RoomDisplay';
 import { SpireCombatControls } from './SpireCombatControls';
 import { SpireActivityLog } from './SpireActivityLog';
 import { SpireManaDisplay } from './SpireManaDisplay';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 // ─── Derived Stats Hook ──────────────────────────────────────────────────────
 
@@ -164,6 +165,7 @@ export function SpireCombatPage() {
   };
 
   return (
+    <DebugName name="SpireCombatPage">
     <div className="min-h-screen bg-gray-950 flex flex-col">
       <header className="sticky top-0 z-50 bg-gray-900/95 border-b border-gray-800 px-4 py-2">
         <div className="flex items-center justify-between">
@@ -206,5 +208,6 @@ export function SpireCombatPage() {
         <SpireActivityLog activityLog={activityLog} maxEntries={20} />
       </main>
     </div>
+    </DebugName>
   );
 }

src/components/game/tabs/SpireCombatPage/SpireHeader.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { Mountain, ArrowUp, ArrowDown, LogOut } from 'lucide-react';
 import { getGuardianForFloor, isGuardianFloor } from '@/lib/game/data/guardian-encounters';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface SpireHeaderProps {
   currentFloor: number;
@@ -39,6 +40,7 @@ export function SpireHeader({
   const roomProgress = totalRooms > 0 ? ((roomsCleared) / totalRooms) * 100 : 0;
 
   return (
+    <DebugName name="SpireHeader">
     <Card className="bg-gray-900/80 border-gray-700">
       <CardContent className="py-3 space-y-3">
         {/* Top row: Floor info + controls */}
@@ -123,5 +125,6 @@ export function SpireHeader({
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/SpireCombatPage/SpireManaDisplay.tsx

@@ -4,6 +4,7 @@ import { useManaStore, fmt, fmtDec } from '@/lib/game/stores';
 import { Card, CardContent } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { ELEMENTS } from '@/lib/game/constants';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface SpireManaDisplayProps {
   maxMana: number;
@@ -22,6 +23,7 @@ export function SpireManaDisplay({ maxMana, effectiveRegen }: SpireManaDisplayPr
   const manaPercent = maxMana > 0 ? (rawMana / maxMana) * 100 : 0;
 
   return (
+    <DebugName name="SpireManaDisplay">
     <Card className="bg-gray-900/80 border-gray-700">
       <CardContent className="py-3 space-y-2">
         {/* Raw Mana */}
@@ -68,5 +70,6 @@ export function SpireManaDisplay({ maxMana, effectiveRegen }: SpireManaDisplayPr
         )}
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/StatsTab.tsx

@@ -10,6 +10,7 @@ import { StudyStatsSection } from './StatsTab/StudyStatsSection';
 import { ElementStatsSection } from './StatsTab/ElementStatsSection';
 import { LoopStatsSection } from './StatsTab/LoopStatsSection';
 import { DisciplineStatsSection } from './StatsTab/DisciplineStatsSection';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function StatsTab() {
   const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
@@ -23,7 +24,8 @@ export function StatsTab() {
   const elemMax = 10 + (prestigeUpgrades.elementalAttune || 0) * 25;
 
   return (
-    <div className="space-y-4">
+    <DebugName name="StatsTab">
+      <div className="space-y-4">
       <ManaStatsSection
         stats={{
           ...manaStats,
@@ -51,7 +53,8 @@ export function StatsTab() {
         elemMax={elemMax}
       />
       <LoopStatsSection />
-    </div>
+      </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/StatsTab/CombatStatsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Swords } from 'lucide-react';
 import { fmt, fmtDec } from '@/lib/game/stores';
 import type { SpellDef } from '@/lib/game/types';
@@ -12,6 +13,7 @@ interface CombatStatsSectionProps {
 
 export function CombatStatsSection({ activeSpellDef, pactMultiplier }: CombatStatsSectionProps) {
   return (
+    <DebugName name="CombatStatsSection">
     <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
       <CardHeader className="pb-2">
         <CardTitle className="text-[var(--mana-fire)] game-panel-title text-xs flex items-center gap-2">
@@ -44,5 +46,6 @@ export function CombatStatsSection({ activeSpellDef, pactMultiplier }: CombatSta
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/StatsTab/DisciplineStatsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Brain } from 'lucide-react';
 import { useDisciplineStore } from '@/lib/game/stores/discipline-slice';
@@ -27,6 +28,7 @@ export function DisciplineStatsSection({ disciplineEffects }: DisciplineStatsSec
   if (disciplineEntries.length === 0) return null;
 
   return (
+    <DebugName name="DisciplineStatsSection">
     <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
       <CardHeader className="pb-2">
         <CardTitle className="text-[var(--mana-crystal)] game-panel-title text-xs flex items-center gap-2">
@@ -68,5 +70,6 @@ export function DisciplineStatsSection({ disciplineEffects }: DisciplineStatsSec
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/StatsTab/ElementStatsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Separator } from '@/components/ui/separator';
 import { FlaskConical } from 'lucide-react';
 import { ELEMENTS } from '@/lib/game/constants';
@@ -16,6 +17,7 @@ export function ElementStatsSection({ elemMax }: ElementStatsSectionProps) {
   const elements = useManaStore((s) => s.elements);
 
   return (
+    <DebugName name="ElementStatsSection">
     <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
       <CardHeader className="pb-2">
         <CardTitle className="text-[var(--color-success)] game-panel-title text-xs flex items-center gap-2">
@@ -59,5 +61,6 @@ export function ElementStatsSection({ elemMax }: ElementStatsSectionProps) {
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/StatsTab/LoopStatsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Separator } from '@/components/ui/separator';
 import { RotateCcw } from 'lucide-react';
 import { fmt } from '@/lib/game/stores';
@@ -18,6 +19,7 @@ export function LoopStatsSection() {
   const spellsLearned = Object.values(spells || {}).filter((s: SpellState) => s.learned).length;
 
   return (
+    <DebugName name="LoopStatsSection">
     <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
       <CardHeader className="pb-2">
         <CardTitle className="text-[var(--mana-light)] game-panel-title text-xs flex items-center gap-2">
@@ -57,5 +59,6 @@ export function LoopStatsSection() {
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/StatsTab/ManaStatsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { fmt, fmtDec } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Droplet } from 'lucide-react';
 import type { ComputedEffects } from '@/lib/game/effects/upgrade-effects.types';
@@ -51,6 +52,7 @@ export function ManaStatsSection({ stats, elemMax }: ManaStatsSectionProps) {
   } = stats;
 
   return (
+    <DebugName name="ManaStatsSection">
     <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
       <CardHeader className="pb-2">
         <CardTitle className="text-[var(--mana-water)] game-panel-title text-xs flex items-center gap-2">
@@ -206,5 +208,6 @@ export function ManaStatsSection({ stats, elemMax }: ManaStatsSectionProps) {
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/StatsTab/PactStatusSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Trophy } from 'lucide-react';
 import { fmtDec } from '@/lib/game/stores';
 import { ELEMENTS } from '@/lib/game/constants';
@@ -19,6 +20,7 @@ export function PactStatusSection({ pactMultiplier, pactInsightMultiplier }: Pac
   const pactInterferenceMitigation = prestigeUpgrades?.pactInterferenceMitigation || 0;
   
   return (
+    <DebugName name="PactStatusSection">
     <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
       <CardHeader className="pb-2">
         <CardTitle className="text-[var(--mana-light)] game-panel-title text-xs flex items-center gap-2">
@@ -74,5 +76,6 @@ export function PactStatusSection({ pactMultiplier, pactInsightMultiplier }: Pac
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/StatsTab/StudyStatsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { BookOpen } from 'lucide-react';
 import { fmtDec } from '@/lib/game/stores';
 
@@ -11,6 +12,7 @@ interface StudyStatsSectionProps {
 
 export function StudyStatsSection({ studySpeedMult, studyCostMult }: StudyStatsSectionProps) {
   return (
+    <DebugName name="StudyStatsSection">
     <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
       <CardHeader className="pb-2">
         <CardTitle className="text-[var(--mana-crystal)] game-panel-title text-xs flex items-center gap-2">
@@ -41,5 +43,6 @@ export function StudyStatsSection({ studySpeedMult, studyCostMult }: StudyStatsS
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }

src/components/game/tabs/guardian-pacts-components.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Shield, Swords, Clock, Sparkles, Check, Lock, ChevronRight } from 'lucide-react';
 import clsx from 'clsx';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -81,14 +82,15 @@ export const GuardianCard: React.FC<GuardianCardProps> = React.memo(({
     : elemDisplays[0]?.name ?? guardian.element;
 
   return (
-    <Card
-      className={clsx(
-        'border transition-colors',
-        status === 'signed' && 'border-green-600/40',
-        status === 'defeated' && 'border-amber-600/40',
-        status === 'undefeated' && 'border-gray-700/60',
-      )}
-    >
+    <DebugName name="GuardianPactsComponents">
+      <Card
+        className={clsx(
+          'border transition-colors',
+          status === 'signed' && 'border-green-600/40',
+          status === 'defeated' && 'border-amber-600/40',
+          status === 'undefeated' && 'border-gray-700/60',
+        )}
+      >
       <CardHeader className="pb-2">
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-0">
@@ -141,7 +143,8 @@ export const GuardianCard: React.FC<GuardianCardProps> = React.memo(({
           />
         )}
       </CardContent>
-    </Card>
+      </Card>
+    </DebugName>
   );
 });