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

docs/circular-deps.txt

@@ -1,4 +1,4 @@
 # Circular Dependencies
-Generated: 2026-05-28T11:15:20.183Z
+Generated: 2026-05-28T11:45:27.810Z
 
 No circular dependencies found. ✅

docs/dependency-graph.json

@@ -1,6 +1,6 @@
 {
   "_meta": {
-    "generated": "2026-05-28T11:15:18.333Z",
+    "generated": "2026-05-28T11:45:26.075Z",
     "description": "Import dependency graph for src/lib/game. Keys are files, values are arrays of files they import.",
     "usage": "To find what a file affects, search for its path in the VALUES. To find what a file depends on, look at its KEY entry."
   },

src/app/page.tsx

@@ -21,6 +21,7 @@ import { useGameLoop } from '@/lib/game/stores/gameHooks';
 import { getUnifiedEffects } from '@/lib/game/effects';
 import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
 import { TimeDisplay } from '@/components/game';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { TooltipProvider } from '@/components/ui/tooltip';
@@ -197,6 +198,7 @@ export default function ManaLoopGame() {
   }
 
   return (
+    <DebugName name="HomePage">
     <ErrorBoundary>
       <TooltipProvider>
         <div className="game-root min-h-screen flex flex-col">
@@ -235,5 +237,6 @@ export default function ManaLoopGame() {
         </div>
       </TooltipProvider>
     </ErrorBoundary>
+    </DebugName>
   );
 }

src/components/game/ActionButtons.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Sparkles, Swords, BookOpen, Target, FlaskConical, Cog, Hammer, Dumbbell } from 'lucide-react';
+import { DebugName } from '@/components/game/debug/debug-context';
 import type { GameAction } from '@/lib/game/types';
 
 interface ActionButtonsProps {
@@ -119,6 +120,7 @@ export function ActionButtons({
   };
 
   return (
+    <DebugName name="ActionButtons">
       <div className="space-y-2">
         <div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700">
           <div className="flex items-center gap-2">
@@ -146,6 +148,7 @@ export function ActionButtons({
           )}
         </div>
       </div>
+    </DebugName>
   );
 }
 

src/components/game/ActivityLogPanel.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCombatStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { ActivityLog } from './tabs/ActivityLog';
 
 /**
@@ -12,7 +13,9 @@ export function ActivityLogPanel() {
   const activityLog = useCombatStore((s) => s.activityLog);
 
   return (
+    <DebugName name="ActivityLogPanel">
       <ActivityLog activityLog={activityLog} maxEntries={20} />
+    </DebugName>
   );
 }
 

src/components/game/AttunementStatus.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { useAttunementStore } from '@/lib/game/stores';
 import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { Separator } from '@/components/ui/separator';
@@ -38,6 +39,7 @@ export function AttunementStatus() {
   };
 
   return (
+    <DebugName name="AttunementStatus">
       <div className="space-y-1">
         <div className="flex items-center justify-between">
           <span className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-bold">Attunements</span>
@@ -102,6 +104,7 @@ export function AttunementStatus() {
           )}
         </div>
       </div>
+    </DebugName>
   );
 }
 

src/components/game/GameToast.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useToast } from '@/hooks/use-toast';
+import { DebugName } from '@/components/game/debug/debug-context';
 import {
   Toast,
   ToastClose,
@@ -61,6 +62,7 @@ export function GameToaster() {
   const { toasts } = useToast();
 
   return (
+    <DebugName name="GameToast">
       <ToastProvider>
         {toasts.map((toast) => {
         // Determine toast type from className or default to info
@@ -113,6 +115,7 @@ export function GameToaster() {
           )}
         />
       </ToastProvider>
+    </DebugName>
   );
 }
 

src/components/game/LootInventory/BlueprintsSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Scroll } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
@@ -13,6 +14,7 @@ export function BlueprintsSection({ blueprints }: BlueprintsSectionProps) {
   if (blueprints.length === 0) return null;
   
   return (
+    <DebugName name="BlueprintsSection">
     <div>
       <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
         <Scroll className="w-3 h-3" />
@@ -42,5 +44,6 @@ export function BlueprintsSection({ blueprints }: BlueprintsSectionProps) {
         Blueprints are permanent unlocks - use them to craft equipment
       </div>
     </div>
+    </DebugName>
   );
 }

src/components/game/LootInventory/EquipmentItem.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Package, Trash2 } from 'lucide-react';
 import type { EquipmentInstance } from '@/lib/game/types';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
@@ -20,6 +21,7 @@ export function EquipmentItem({ instanceId, instance, onDelete }: EquipmentItemP
   const rarityGlow = RARITY_GLOW_CSS_VAR[instance.rarity] || 'var(--rarity-common-glow)';
   
   return (
+    <DebugName name="EquipmentItem">
     <div
       className="p-2 rounded border bg-[var(--bg-sunken)] group"
       style={{
@@ -55,6 +57,7 @@ export function EquipmentItem({ instanceId, instance, onDelete }: EquipmentItemP
         )}
       </div>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/LootInventory/EssenceItem.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Droplet } from 'lucide-react';
 import { ElementBadge } from '@/components/ui/element-badge';
 import type { ElementState } from '@/lib/game/types';
@@ -15,6 +16,7 @@ export function EssenceItem({ elementId, state }: EssenceItemProps) {
   if (!elem) return null;
   
   return (
+    <DebugName name="EssenceItem">
     <div
       className="p-2 rounded border bg-[var(--bg-sunken)]"
       style={{
@@ -29,6 +31,7 @@ export function EssenceItem({ elementId, state }: EssenceItemProps) {
         {state.current} / {state.max}
       </div>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/LootInventory/MaterialItem.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import type { LootInventory } from '@/lib/game/types';
 // For backward compatibility
 type LootInventoryType = LootInventory;
@@ -22,6 +23,7 @@ export function MaterialItem({ materialId, count, onDelete }: MaterialItemProps)
   const rarityGlow = RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)';
   
   return (
+    <DebugName name="MaterialItem">
     <div
       className="p-2 rounded border bg-[var(--bg-sunken)] group relative"
       style={{
@@ -54,6 +56,7 @@ export function MaterialItem({ materialId, count, onDelete }: MaterialItemProps)
         )}
       </div>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/ManaDisplay.tsx

@@ -7,6 +7,7 @@ import { Zap, ChevronDown, ChevronUp } from 'lucide-react';
 import { fmt, fmtDec } from '@/lib/game/stores';
 import { ELEMENTS } from '@/lib/game/constants';
 import { useState } from 'react';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface ManaDisplayProps {
   rawMana: number;
@@ -39,6 +40,7 @@ export function ManaDisplay({
     .sort((a, b) => b[1].current - a[1].current);
 
   return (
+    <DebugName name="ManaDisplay">
       <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
         <CardContent className="pt-4 space-y-3">
         {/* Raw Mana - Main Display */}
@@ -135,6 +137,7 @@ export function ManaDisplay({
         )}
         </CardContent>
       </Card>
+    </DebugName>
   );
 }
 

src/components/game/TimeDisplay.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { fmt } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { formatHour } from '@/lib/game/utils/formatting';
 
 interface TimeDisplayProps {
@@ -15,6 +16,7 @@ export function TimeDisplay({
   insight,
 }: TimeDisplayProps) {
   return (
+    <DebugName name="TimeDisplay">
       <div className="flex items-center gap-4">
         <div className="text-center">
           <div className="text-lg font-bold game-mono text-amber-400">
@@ -32,6 +34,7 @@ export function TimeDisplay({
           <div className="text-xs text-gray-400">Insight</div>
         </div>
       </div>
+    </DebugName>
   );
 }
 

src/components/game/UpgradeDialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { SkillUpgradeChoice } from '@/lib/game/types';
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
@@ -35,6 +36,7 @@ export function UpgradeDialog({
   const currentSelections = pendingSelections.length > 0 ? pendingSelections : alreadySelected;
 
   return (
+    <DebugName name="UpgradeDialog">
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
         <DialogHeader>
@@ -109,6 +111,7 @@ export function UpgradeDialog({
         </div>
         </DialogContent>
       </Dialog>
+    </DebugName>
   );
 }
 

src/components/game/crafting/EnchantmentApplier.tsx

@@ -11,6 +11,7 @@ import type { EquipmentSlot } from '@/lib/game/data/equipment';
 import { fmt } from '@/lib/game/stores';
 import { CheckCircle, Sparkles } from 'lucide-react';
 import { useCraftingStore, useManaStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export interface EnchantmentApplierProps {
   selectedEquipmentInstance: string | null;
@@ -68,6 +69,7 @@ export function EnchantmentApplier({
   };
 
   return (
+    <DebugName name="EnchantmentApplier">
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
       {/* Equipment & Design Selection */}
       <GameCard variant="default">
@@ -217,7 +219,7 @@ export function EnchantmentApplier({
             return (
               <div className="space-y-4">
                 <div className="text-lg font-semibold text-[var(--text-primary)]">{design.name}</div>
-                <div className="text-sm text-[var(--text-secondary)]">→ {instance.name}</div>
+                <div className="text-sm text-[var(--text-secondary)]">{instance.name}</div>
                 <div className="text-xs text-[var(--color-success)]">
                   <CheckCircle size={12} className="inline mr-1" />
                   Ready for Enchantment
@@ -271,6 +273,7 @@ export function EnchantmentApplier({
         )}
       </GameCard>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/crafting/EnchantmentDesigner.tsx

@@ -20,6 +20,7 @@ import {
   removeEffectFromDesign,
 } from './EnchantmentDesigner/utils';
 import { useCraftingStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function EnchantmentDesigner({
   selectedEquipmentType,
@@ -88,6 +89,7 @@ export function EnchantmentDesigner({
 
   // Render stage
   return (
+    <DebugName name="EnchantmentDesigner">
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
       {/* Equipment Type Selection */}
       <EquipmentTypeSelector
@@ -141,6 +143,7 @@ export function EnchantmentDesigner({
         deleteDesign={deleteDesign}
       />
     </div>
+    </DebugName>
   );
 }
 

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

src/components/game/crafting/EnchantmentPreparer.tsx

@@ -14,6 +14,7 @@ import type { EquipmentSlot } from '@/lib/game/types';
 import { fmt } from '@/lib/game/stores';
 import { useCraftingStore, useManaStore } from '@/lib/game/stores';
 import { useGameToast } from '@/components/game/GameToast';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export interface EnchantmentPreparerProps {
   selectedEquipmentInstance: string | null;
@@ -72,6 +73,7 @@ export function EnchantmentPreparer({
   };
 
   return (
+    <DebugName name="EnchantmentPreparer">
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
       {/* Equipment Selection */}
       <GameCard variant="default">
@@ -296,6 +298,7 @@ export function EnchantmentPreparer({
         )}
       </GameCard>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/crafting/EquipmentCrafter.tsx

@@ -12,6 +12,7 @@ import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
 import type { LootInventory } from '@/lib/game/types';
 import { fmt } from '@/lib/game/stores';
 import { useCraftingStore, useCombatStore, useManaStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 // ─── Crafting Progress ───────────────────────────────────────────────────────
 
@@ -222,6 +223,7 @@ export function EquipmentCrafter() {
   const currentAction = useCombatStore((s) => s.currentAction);
 
   return (
+    <DebugName name="EquipmentCrafter">
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
       <Card className="bg-gray-900/80 border-gray-700">
         <CardHeader className="pb-2">
@@ -241,6 +243,7 @@ export function EquipmentCrafter() {
 
       <MaterialsInventory materials={lootInventory.materials} deleteMaterial={deleteMaterial} />
     </div>
+    </DebugName>
   );
 }
 

src/components/game/debug/AttunementDebug.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Sparkles, Unlock } from 'lucide-react';
@@ -30,6 +31,7 @@ export function AttunementDebug() {
   };
 
   return (
+    <DebugName name="AttunementDebug">
     <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">
@@ -75,6 +77,7 @@ export function AttunementDebug() {
         })}
       </CardContent>
     </Card>
+    </DebugName>
   );
 }
 

src/components/game/debug/ElementDebug.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Star, Lock } from 'lucide-react';
@@ -21,6 +22,7 @@ export function ElementDebug() {
   };
 
   return (
+    <DebugName name="ElementDebug">
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
       <CardHeader className="pb-2">
         <CardTitle className="text-green-400 text-sm flex items-center gap-2">
@@ -73,6 +75,7 @@ export function ElementDebug() {
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }
 

src/components/game/debug/GameStateDebug.tsx

@@ -9,7 +9,7 @@ import { Label } from '@/components/ui/label';
 import {
   RotateCcw, AlertTriangle, Zap, Clock, Settings, 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';
 
@@ -282,6 +282,7 @@ export function GameStateDebug() {
   };
 
   return (
+    <DebugName name="GameStateDebug">
     <div className="space-y-4">
       <WarningBanner />
       <DisplayOptions />
@@ -298,6 +299,7 @@ export function GameStateDebug() {
         />
       </div>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/debug/GolemDebug.tsx

@@ -1,10 +1,12 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Bug } from 'lucide-react';
 
 export function GolemDebug() {
   return (
+    <DebugName name="GolemDebug">
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
       <CardHeader className="pb-2">
         <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
@@ -18,6 +20,7 @@ export function GolemDebug() {
         </p>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }
 

src/components/game/debug/PactDebug.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DebugName } from '@/components/game/debug/debug-context';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Bug } from 'lucide-react';
@@ -140,6 +141,7 @@ export function PactDebug() {
   };
 
   return (
+    <DebugName name="PactDebug">
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
       <CardHeader className="pb-2">
         <CardTitle className="text-orange-400 text-sm flex items-center gap-2">
@@ -174,6 +176,7 @@ export function PactDebug() {
         </div>
       </CardContent>
     </Card>
+    </DebugName>
   );
 }
 

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,13 +11,16 @@ export function ActivityLog({ activityLog, maxEntries = 20 }: ActivityLogProps)
 
   if (entries.length === 0) {
     return (
+      <DebugName name="ActivityLog">
         <div className="text-sm text-gray-500 italic p-2">
           No activity yet.
         </div>
+      </DebugName>
     );
   }
 
   return (
+    <DebugName name="ActivityLog">
       <div className="space-y-1 max-h-64 overflow-y-auto">
       {entries.map((entry) => (
         <div
@@ -30,5 +34,6 @@ export function ActivityLog({ activityLog, maxEntries = 20 }: ActivityLogProps)
         </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,7 +263,6 @@ 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
@@ -197,7 +272,6 @@ export function AttunementsTab() {
             />
           ))}
         </div>
-        </ScrollArea>
       </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,6 +34,7 @@ export function AchievementDebugSection() {
   };
 
   return (
+    <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">
@@ -77,6 +79,7 @@ export function AchievementDebugSection() {
           </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,6 +35,7 @@ export function AttunementDebugSection() {
   };
 
   return (
+    <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">
@@ -82,6 +84,7 @@ export function AttunementDebugSection() {
           })}
         </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,6 +56,7 @@ export function DisciplineDebugSection() {
   };
 
   return (
+    <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">
@@ -130,6 +132,7 @@ export function DisciplineDebugSection() {
           </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,6 +30,7 @@ export function ElementDebugSection() {
   };
 
   return (
+    <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">
@@ -86,6 +88,7 @@ export function ElementDebugSection() {
           </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,6 +252,7 @@ export function GameStateDebugSection() {
   };
 
   return (
+    <DebugName name="GameStateDebugSection">
       <div className="space-y-4">
         <DisplayOptions />
 
@@ -266,6 +267,7 @@ export function GameStateDebugSection() {
           />
         </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,6 +30,7 @@ export function GolemDebugSection() {
   };
 
   return (
+    <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">
@@ -75,6 +77,7 @@ export function GolemDebugSection() {
           </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,6 +125,7 @@ export function PactDebugSection() {
   };
 
   return (
+    <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">
@@ -161,6 +163,7 @@ export function PactDebugSection() {
           </div>
         </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,6 +40,7 @@ export function SpireDebugSection() {
   };
 
   return (
+    <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">
@@ -100,6 +102,7 @@ export function SpireDebugSection() {
           </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,6 +35,7 @@ export function SpellsTab() {
   const spellTiers = [0, 1, 2, 3, 4];
 
   return (
+    <DebugName name="SpellsTab">
       <div className="space-y-6">
       {spellTiers.map(tier => {
         const spellsInTier = Object.entries(SPELLS_DEF).filter(([, def]) => def.tier === tier);
@@ -122,6 +124,7 @@ export function SpellsTab() {
         );
       })}
       </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,6 +24,7 @@ export function StatsTab() {
   const elemMax = 10 + (prestigeUpgrades.elementalAttune || 0) * 25;
 
   return (
+    <DebugName name="StatsTab">
       <div className="space-y-4">
       <ManaStatsSection
         stats={{
@@ -52,6 +54,7 @@ export function StatsTab() {
       />
       <LoopStatsSection />
       </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,6 +82,7 @@ export const GuardianCard: React.FC<GuardianCardProps> = React.memo(({
     : elemDisplays[0]?.name ?? guardian.element;
 
   return (
+    <DebugName name="GuardianPactsComponents">
       <Card
         className={clsx(
           'border transition-colors',
@@ -142,6 +144,7 @@ export const GuardianCard: React.FC<GuardianCardProps> = React.memo(({
         )}
       </CardContent>
       </Card>
+    </DebugName>
   );
 });