Add golemancy system, combination skills, and UI redesigns

- Remove scroll crafting skill (no consumables in idle game)
- Add golem types (Earth, Metal, Crystal) with variants (Lava, Mud, Forge, Storm)
- Implement golemancy state in store with summoning/drain mechanics
- Add combination skills requiring level 5+ in two attunements:
  - Enchanter+Fabricator: Enchanted Golems, Capacity Overflow
  - Invoker+Fabricator: Pact-Bonded Golems, Guardian Infusion
  - Invoker+Enchanter: Pact Enchantments, Elemental Resonance
- Redesign CraftingTab with sub-tabs for Enchanter/Fabricator
- Redesign SpireTab to show summoned golems and DPS contribution
- Redesign StatsTab with attunement-specific stats sections
- Update documentation (README.md, AGENTS.md)

src/components/game/tabs/CraftingTab.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -10,13 +10,15 @@ import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { 
   Wand2, Scroll, Hammer, Sparkles, Trash2, Plus, Minus, 
-  Package, Zap, Clock, ChevronRight, Circle, Anvil
+  Package, Zap, Clock, ChevronRight, Circle, Anvil, Heart, 
+  Sword, Skull
 } from 'lucide-react';
 import { EQUIPMENT_TYPES, type EquipmentType, type EquipmentSlot } from '@/lib/game/data/equipment';
 import { ENCHANTMENT_EFFECTS, type EnchantmentEffectDef, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
 import { CRAFTING_RECIPES, canCraftRecipe } from '@/lib/game/data/crafting-recipes';
 import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
-import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
+import { GOLEM_DEFS, GOLEM_VARIANTS, ELEMENTS } from '@/lib/game/constants';
+import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, ActiveGolem } from '@/lib/game/types';
 import { fmt, type GameStore } from '@/lib/game/store';
 
 // Slot display names
@@ -48,6 +50,8 @@ export function CraftingTab({ store }: CraftingTabProps) {
   const currentAction = store.currentAction;
   const unlockedEffects = store.unlockedEffects;
   const lootInventory = store.lootInventory;
+  const elements = store.elements;
+  const activeGolems = store.activeGolems;
   const startDesigningEnchantment = store.startDesigningEnchantment;
   const cancelDesign = store.cancelDesign;
   const saveDesign = store.saveDesign;
@@ -63,7 +67,19 @@ export function CraftingTab({ store }: CraftingTabProps) {
   const startCraftingEquipment = store.startCraftingEquipment;
   const cancelEquipmentCrafting = store.cancelEquipmentCrafting;
   const deleteMaterial = store.deleteMaterial;
-  const [craftingStage, setCraftingStage] = useState<'design' | 'prepare' | 'apply' | 'craft'>('craft');
+  const canSummonGolem = store.canSummonGolem;
+  const summonGolem = store.summonGolem;
+  const dismissGolem = store.dismissGolem;
+  const getGolemDuration = store.getGolemDuration;
+  
+  // Top-level attunement tab state
+  const [topLevelTab, setTopLevelTab] = useState<'enchanter' | 'fabricator'>('enchanter');
+  
+  // Sub-tab states
+  const [enchanterSubTab, setEnchanterSubTab] = useState<'design' | 'prepare' | 'apply'>('design');
+  const [fabricatorSubTab, setFabricatorSubTab] = useState<'craft' | 'golemancy'>('craft');
+  
+  // Selection states
   const [selectedEquipmentType, setSelectedEquipmentType] = useState<string | null>(null);
   const [selectedEquipmentInstance, setSelectedEquipmentInstance] = useState<string | null>(null);
   const [selectedDesign, setSelectedDesign] = useState<string | null>(null);
@@ -75,6 +91,11 @@ export function CraftingTab({ store }: CraftingTabProps) {
   const enchantingLevel = skills.enchanting || 0;
   const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
   
+  // Determine active attunements
+  const enchanterActive = store.attunements?.enchanter?.active ?? false;
+  const fabricatorActive = store.attunements?.fabricator?.active ?? false;
+  const activeAttunementCount = (enchanterActive ? 1 : 0) + (fabricatorActive ? 1 : 0);
+  
   // Get equipped items as array
   const equippedItems = Object.entries(equippedInstances)
     .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
@@ -877,42 +898,383 @@ export function CraftingTab({ store }: CraftingTabProps) {
     </div>
   );
   
+  // Render golemancy stage
+  const renderGolemancyStage = () => {
+    const golemancySkill = skills.golemancy || 0;
+    const golemDuration = getGolemDuration();
+    
+    return (
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* Available Golems */}
+        <Card className="bg-gray-900/80 border-gray-700">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
+              <span className="text-lg">🗿</span>
+              Available Golems
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {golemancySkill < 1 ? (
+              <div className="text-center text-gray-400 py-8">
+                <span className="text-4xl mb-2 block">🗿</span>
+                <p>Learn Golemancy skill to summon golems</p>
+                <p className="text-xs mt-1">Available through Fabricator attunement</p>
+              </div>
+            ) : (
+              <ScrollArea className="h-72">
+                <div className="space-y-3">
+                  {Object.values(GOLEM_DEFS).map(golemDef => {
+                    const canSummon = canSummonGolem(golemDef.id);
+                    const requiredElement = elements[golemDef.requiredManaType];
+                    const hasEnoughMana = requiredElement?.current >= golemDef.summonCost;
+                    const isActive = activeGolems.some(g => g.golemId === golemDef.id);
+                    const elementDef = ELEMENTS[golemDef.element];
+                    
+                    // Check if golem type is locked
+                    const isLocked = !requiredElement?.unlocked;
+                    
+                    return (
+                      <div
+                        key={golemDef.id}
+                        className={`p-3 rounded border transition-all ${
+                          isLocked 
+                            ? 'border-gray-800 bg-gray-900/50 opacity-60' 
+                            : isActive
+                              ? 'border-green-600 bg-green-900/20'
+                              : 'border-gray-700 bg-gray-800/50'
+                        }`}
+                      >
+                        <div className="flex justify-between items-start mb-2">
+                          <div>
+                            <div 
+                              className="font-semibold flex items-center gap-2"
+                              style={{ color: elementDef?.color }}
+                            >
+                              {isLocked && <span className="text-gray-500">🔒</span>}
+                              {golemDef.name}
+                              {isActive && <Badge variant="outline" className="text-xs text-green-400 border-green-600">Active</Badge>}
+                            </div>
+                            <div className="text-xs text-gray-400">{golemDef.desc}</div>
+                          </div>
+                        </div>
+                        
+                        {isLocked ? (
+                          <div className="text-xs text-gray-500 mt-2 p-2 bg-gray-900/50 rounded">
+                            <span className="text-amber-500">Locked:</span> {golemDef.unlockCondition}
+                          </div>
+                        ) : (
+                          <>
+                            <Separator className="bg-gray-700 my-2" />
+                            
+                            <div className="grid grid-cols-3 gap-2 text-xs mb-2">
+                              <div className="text-center">
+                                <Sword className="w-4 h-4 mx-auto text-red-400 mb-1" />
+                                <div className="text-gray-400">Damage</div>
+                                <div className="font-semibold">{golemDef.baseDamage}</div>
+                              </div>
+                              <div className="text-center">
+                                <Heart className="w-4 h-4 mx-auto text-green-400 mb-1" />
+                                <div className="text-gray-400">HP</div>
+                                <div className="font-semibold">{golemDef.baseHP}</div>
+                              </div>
+                              <div className="text-center">
+                                <Zap className="w-4 h-4 mx-auto text-yellow-400 mb-1" />
+                                <div className="text-gray-400">Speed</div>
+                                <div className="font-semibold">{golemDef.attackSpeed}/hr</div>
+                              </div>
+                            </div>
+                            
+                            <Button
+                              className="w-full"
+                              size="sm"
+                              disabled={!canSummon}
+                              onClick={() => summonGolem(golemDef.id)}
+                            >
+                              {isActive 
+                                ? 'Already Active' 
+                                : !hasEnoughMana 
+                                  ? `Need ${golemDef.summonCost} ${elementDef?.name || golemDef.requiredManaType} Mana`
+                                  : `Summon - ${golemDef.summonCost} ${elementDef?.name || golemDef.requiredManaType} Mana`
+                              }
+                            </Button>
+                          </>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
+            )}
+          </CardContent>
+        </Card>
+        
+        {/* Active Golems */}
+        <Card className="bg-gray-900/80 border-gray-700">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-amber-400 text-sm flex items-center justify-between">
+              <span className="flex items-center gap-2">
+                <span className="text-lg">⚡</span>
+                Active Golems ({activeGolems.length})
+              </span>
+              {golemancySkill >= 1 && (
+                <span className="text-xs text-gray-400">Duration: {golemDuration} floors</span>
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {activeGolems.length === 0 ? (
+              <div className="text-center text-gray-400 py-8">
+                <span className="text-4xl mb-2 block">🤖</span>
+                <p>No active golems</p>
+                <p className="text-xs mt-1">Summon a golem to help clear floors!</p>
+              </div>
+            ) : (
+              <ScrollArea className="h-72">
+                <div className="space-y-3">
+                  {activeGolems.map((golem, index) => {
+                    const golemDef = GOLEM_DEFS[golem.golemId];
+                    const elementDef = ELEMENTS[golemDef?.element || 'earth'];
+                    const variantDef = golem.variant ? GOLEM_VARIANTS[golem.variant] : null;
+                    const displayName = variantDef?.name || golemDef?.name || 'Unknown Golem';
+                    const instanceId = `${golem.golemId}-${golem.currentFloor}`;
+                    
+                    return (
+                      <div
+                        key={instanceId}
+                        className="p-3 rounded border border-gray-700 bg-gray-800/50"
+                      >
+                        <div className="flex justify-between items-start mb-2">
+                          <div 
+                            className="font-semibold flex items-center gap-2"
+                            style={{ color: elementDef?.color }}
+                          >
+                            {displayName}
+                            {golem.variant && (
+                              <Badge variant="outline" className="text-xs" style={{ borderColor: elementDef?.color }}>
+                                {golem.variant}
+                              </Badge>
+                            )}
+                          </div>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-6 text-red-400 hover:text-red-300 hover:bg-red-900/20"
+                            onClick={() => dismissGolem(instanceId)}
+                          >
+                            <Skull className="w-4 h-4 mr-1" />
+                            Dismiss
+                          </Button>
+                        </div>
+                        
+                        <div className="grid grid-cols-2 gap-2 text-xs mb-2">
+                          <div>
+                            <span className="text-gray-400">Floor:</span>{' '}
+                            <span className="font-semibold">{golem.currentFloor}</span>
+                          </div>
+                          <div>
+                            <span className="text-gray-400">Remaining:</span>{' '}
+                            <span className="font-semibold">{golem.remainingFloors} floors</span>
+                          </div>
+                        </div>
+                        
+                        {/* HP Bar */}
+                        <div className="mb-2">
+                          <div className="flex justify-between text-xs mb-1">
+                            <span className="text-gray-400">HP</span>
+                            <span>{golem.currentHP} / {golem.maxHP}</span>
+                          </div>
+                          <Progress 
+                            value={(golem.currentHP / golem.maxHP) * 100} 
+                            className="h-2"
+                          />
+                        </div>
+                        
+                        <div className="text-xs text-gray-400">
+                          <span className="text-green-400">Total Damage:</span> {fmt(golem.damageDealt)}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
+            )}
+          </CardContent>
+        </Card>
+        
+        {/* Golem Variants Info */}
+        <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
+              <span className="text-lg">✨</span>
+              Golem Variants
+              {skills.crystalEmbedding ? (
+                <Badge variant="outline" className="text-xs text-green-400 border-green-600">Unlocked</Badge>
+              ) : (
+                <Badge variant="outline" className="text-xs text-gray-500">Requires Crystal Embedding</Badge>
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {skills.crystalEmbedding ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+                {Object.entries(GOLEM_VARIANTS).map(([variantId, variant]) => {
+                  const baseGolem = GOLEM_DEFS[variant.baseGolem];
+                  const baseElement = ELEMENTS[baseGolem?.element || 'earth'];
+                  const requiredElement = ELEMENTS[variant.requiredElement];
+                  
+                  return (
+                    <div
+                      key={variantId}
+                      className="p-3 rounded border border-gray-700 bg-gray-800/50"
+                    >
+                      <div 
+                        className="font-semibold mb-1"
+                        style={{ color: baseElement?.color }}
+                      >
+                        {variant.name}
+                      </div>
+                      <div className="text-xs text-gray-400 mb-2">{variant.desc}</div>
+                      <div className="flex justify-between text-xs">
+                        <span className="text-gray-500">Base: {baseGolem?.name}</span>
+                        <span className="text-green-400">+{Math.round((variant.damageMultiplier - 1) * 100)}% dmg</span>
+                      </div>
+                      <div className="text-xs text-gray-500 mt-1">
+                        Requires: <span style={{ color: requiredElement?.color }}>{requiredElement?.name}</span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="text-center text-gray-400 py-4">
+                <span className="text-2xl mb-2 block">🔒</span>
+                <p>Learn Crystal Embedding skill to unlock golem variants</p>
+                <p className="text-xs mt-1">Enchanter attunement level 3+ required</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    );
+  };
+  
+  // Render Enchanter content (Design, Prepare, Apply)
+  const renderEnchanterContent = () => (
+    <Tabs value={enchanterSubTab} onValueChange={(v) => setEnchanterSubTab(v as typeof enchanterSubTab)}>
+      <TabsList className="bg-gray-800/50 mb-4">
+        <TabsTrigger value="design" className="data-[state=active]:bg-amber-600">
+          <Scroll className="w-4 h-4 mr-1" />
+          Design
+        </TabsTrigger>
+        <TabsTrigger value="prepare" className="data-[state=active]:bg-amber-600">
+          <Hammer className="w-4 h-4 mr-1" />
+          Prepare
+        </TabsTrigger>
+        <TabsTrigger value="apply" className="data-[state=active]:bg-amber-600">
+          <Sparkles className="w-4 h-4 mr-1" />
+          Apply
+        </TabsTrigger>
+      </TabsList>
+      
+      <TabsContent value="design" className="mt-0">
+        {renderDesignStage()}
+      </TabsContent>
+      <TabsContent value="prepare" className="mt-0">
+        {renderPrepareStage()}
+      </TabsContent>
+      <TabsContent value="apply" className="mt-0">
+        {renderApplyStage()}
+      </TabsContent>
+    </Tabs>
+  );
+  
+  // Render Fabricator content (Craft, Golemancy)
+  const renderFabricatorContent = () => (
+    <Tabs value={fabricatorSubTab} onValueChange={(v) => setFabricatorSubTab(v as typeof fabricatorSubTab)}>
+      <TabsList className="bg-gray-800/50 mb-4">
+        <TabsTrigger value="craft" className="data-[state=active]:bg-cyan-600">
+          <Anvil className="w-4 h-4 mr-1" />
+          Craft
+        </TabsTrigger>
+        <TabsTrigger value="golemancy" className="data-[state=active]:bg-cyan-600">
+          <span className="mr-1">🗿</span>
+          Golemancy
+        </TabsTrigger>
+      </TabsList>
+      
+      <TabsContent value="craft" className="mt-0">
+        {renderCraftStage()}
+      </TabsContent>
+      <TabsContent value="golemancy" className="mt-0">
+        {renderGolemancyStage()}
+      </TabsContent>
+    </Tabs>
+  );
+  
+  // Determine what to render based on active attunements
+  const renderContent = () => {
+    // If only one attunement is active, skip top-level tabs
+    if (activeAttunementCount === 1) {
+      if (enchanterActive) {
+        return renderEnchanterContent();
+      }
+      if (fabricatorActive) {
+        return renderFabricatorContent();
+      }
+    }
+    
+    // If both attunements are active, show top-level tabs
+    if (activeAttunementCount >= 2) {
+      return (
+        <Tabs value={topLevelTab} onValueChange={(v) => setTopLevelTab(v as typeof topLevelTab)}>
+          <TabsList className="bg-gray-800/50 mb-4">
+            {enchanterActive && (
+              <TabsTrigger value="enchanter" className="data-[state=active]:bg-amber-600">
+                <span className="mr-1">✨</span>
+                Enchanter
+              </TabsTrigger>
+            )}
+            {fabricatorActive && (
+              <TabsTrigger value="fabricator" className="data-[state=active]:bg-cyan-600">
+                <span className="mr-1">⚒️</span>
+                Fabricator
+              </TabsTrigger>
+            )}
+          </TabsList>
+          
+          {enchanterActive && (
+            <TabsContent value="enchanter" className="mt-0">
+              {renderEnchanterContent()}
+            </TabsContent>
+          )}
+          {fabricatorActive && (
+            <TabsContent value="fabricator" className="mt-0">
+              {renderFabricatorContent()}
+            </TabsContent>
+          )}
+        </Tabs>
+      );
+    }
+    
+    // No attunements active
+    return (
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardContent className="py-8 text-center text-gray-400">
+          <span className="text-4xl mb-4 block">🔒</span>
+          <p className="text-lg font-semibold mb-2">No Crafting Attunements Active</p>
+          <p className="text-sm">Activate an attunement to access crafting features.</p>
+          <p className="text-xs mt-2 text-gray-500">
+            Enchanter: Enchantment design and application<br/>
+            Fabricator: Equipment crafting and golemancy
+          </p>
+        </CardContent>
+      </Card>
+    );
+  };
+  
   return (
     <div className="space-y-4">
-      {/* Stage Tabs */}
-      <Tabs value={craftingStage} onValueChange={(v) => setCraftingStage(v as typeof craftingStage)}>
-        <TabsList className="bg-gray-800/50">
-          <TabsTrigger value="craft" className="data-[state=active]:bg-cyan-600">
-            <Anvil className="w-4 h-4 mr-1" />
-            Craft
-          </TabsTrigger>
-          <TabsTrigger value="design" className="data-[state=active]:bg-amber-600">
-            <Scroll className="w-4 h-4 mr-1" />
-            Design
-          </TabsTrigger>
-          <TabsTrigger value="prepare" className="data-[state=active]:bg-amber-600">
-            <Hammer className="w-4 h-4 mr-1" />
-            Prepare
-          </TabsTrigger>
-          <TabsTrigger value="apply" className="data-[state=active]:bg-amber-600">
-            <Sparkles className="w-4 h-4 mr-1" />
-            Apply
-          </TabsTrigger>
-        </TabsList>
-        
-        <TabsContent value="craft" className="mt-4">
-          {renderCraftStage()}
-        </TabsContent>
-        <TabsContent value="design" className="mt-4">
-          {renderDesignStage()}
-        </TabsContent>
-        <TabsContent value="prepare" className="mt-4">
-          {renderPrepareStage()}
-        </TabsContent>
-        <TabsContent value="apply" className="mt-4">
-          {renderApplyStage()}
-        </TabsContent>
-      </Tabs>
+      {renderContent()}
       
       {/* Current Activity Indicator */}
       {currentAction === 'craft' && equipmentCraftingProgress && (
@@ -920,59 +1282,18 @@ export function CraftingTab({ store }: CraftingTabProps) {
           <CardContent className="py-3 flex items-center justify-between">
             <div className="flex items-center gap-2">
               <Anvil className="w-5 h-5 text-cyan-400" />
-              <span>Crafting equipment...</span>
-            </div>
-            <div className="text-sm text-gray-400">
-              {((equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100).toFixed(0)}%
-            </div>
-          </CardContent>
-        </Card>
-      )}
-      
-      {currentAction === 'design' && designProgress && (
-        <Card className="bg-purple-900/30 border-purple-600">
-          <CardContent className="py-3 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Scroll className="w-5 h-5 text-purple-400" />
-              <span>Designing enchantment...</span>
-            </div>
-            <div className="text-sm text-gray-400">
-              {((designProgress.progress / designProgress.required) * 100).toFixed(0)}%
-            </div>
-          </CardContent>
-        </Card>
-      )}
-      
-      {currentAction === 'prepare' && preparationProgress && (
-        <Card className="bg-blue-900/30 border-blue-600">
-          <CardContent className="py-3 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Hammer className="w-5 h-5 text-blue-400" />
-              <span>Preparing equipment...</span>
-            </div>
-            <div className="text-sm text-gray-400">
-              {((preparationProgress.progress / preparationProgress.required) * 100).toFixed(0)}%
-            </div>
-          </CardContent>
-        </Card>
-      )}
-      
-      {currentAction === 'enchant' && applicationProgress && (
-        <Card className="bg-amber-900/30 border-amber-600">
-          <CardContent className="py-3 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Sparkles className="w-5 h-5 text-amber-400" />
-              <span>{applicationProgress.paused ? 'Enchantment paused' : 'Applying enchantment...'}</span>
+              <span className="text-sm">
+                Crafting: {CRAFTING_RECIPES[equipmentCraftingProgress.blueprintId]?.name}
+              </span>
             </div>
             <div className="flex items-center gap-2">
-              <div className="text-sm text-gray-400">
-                {((applicationProgress.progress / applicationProgress.required) * 100).toFixed(0)}%
-              </div>
-              {applicationProgress.paused ? (
-                <Button size="sm" onClick={resumeApplication}>Resume</Button>
-              ) : (
-                <Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
-              )}
+              <Progress 
+                value={(equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100} 
+                className="w-24 h-2" 
+              />
+              <span className="text-xs text-gray-400">
+                {equipmentCraftingProgress.progress.toFixed(1)}h / {equipmentCraftingProgress.required.toFixed(1)}h
+              </span>
             </div>
           </CardContent>
         </Card>

src/components/game/tabs/SpireTab.tsx

@@ -9,7 +9,7 @@ import { Separator } from '@/components/ui/separator';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { Swords, BookOpen, ChevronUp, ChevronDown, RotateCcw, X } from 'lucide-react';
 import type { GameStore } from '@/lib/game/types';
-import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF } from '@/lib/game/constants';
+import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF, GOLEM_DEFS, GOLEM_VARIANTS } from '@/lib/game/constants';
 import { fmt, fmtDec, getFloorElement, canAffordSpellCost } from '@/lib/game/store';
 import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
 import { formatSpellCost, getSpellCostColor, formatStudyTime } from '@/lib/game/formatting';
@@ -36,7 +36,9 @@ export function SpireTab({ store }: SpireTabProps) {
   
   // Get upgrade effects and DPS
   const upgradeEffects = getUnifiedEffects(store);
-  const totalDPS = getTotalDPS(store, upgradeEffects, floorElem);
+  const spellDPS = getTotalDPS(store, upgradeEffects, floorElem);
+  const golemDPS = store.getActiveGolemDPS();
+  const totalDPS = spellDPS + golemDPS;
   const studySpeedMult = 1; // Base study speed
 
   const canCastSpell = (spellId: string): boolean => {
@@ -45,6 +47,19 @@ export function SpireTab({ store }: SpireTabProps) {
     return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
   };
 
+  // Helper to get golem element color
+  const getGolemElementColor = (element: string): string => {
+    return ELEMENTS[element]?.color || '#F4A261'; // Default to earth color
+  };
+
+  // Helper to get golem element symbol
+  const getGolemElementSymbol = (element: string): string => {
+    return ELEMENTS[element]?.sym || '⛰️';
+  };
+
+  // Get active golems on current floor
+  const activeGolemsOnFloor = store.activeGolems.filter(g => g.currentFloor === store.currentFloor);
+
   return (
     <TooltipProvider>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
@@ -87,7 +102,18 @@ export function SpireTab({ store }: SpireTabProps) {
               </div>
               <div className="flex justify-between text-xs text-gray-400 game-mono">
                 <span>{fmt(store.floorHP)} / {fmt(store.floorMaxHP)} HP</span>
-                <span>DPS: {store.currentAction === 'climb' && activeEquipmentSpells.length > 0 ? fmtDec(totalDPS) : '—'}</span>
+                <span>
+                  {store.currentAction === 'climb' && (activeEquipmentSpells.length > 0 || activeGolemsOnFloor.length > 0) ? (
+                    <span>
+                      DPS: {fmtDec(totalDPS)}
+                      {activeGolemsOnFloor.length > 0 && (
+                        <span className="text-gray-500 ml-1">
+                          (Spell: {fmtDec(spellDPS)} | Golem: {fmtDec(golemDPS)})
+                        </span>
+                      )}
+                    </span>
+                  ) : '—'}
+                </span>
               </div>
             </div>
             
@@ -128,6 +154,116 @@ export function SpireTab({ store }: SpireTabProps) {
           </CardContent>
         </Card>
 
+        {/* Active Golems Card */}
+        <Card className="bg-gray-900/80 border-gray-700" style={{ borderColor: activeGolemsOnFloor.length > 0 ? '#F4A26150' : undefined }}>
+          <CardHeader className="pb-2">
+            <CardTitle className="game-panel-title text-xs flex items-center gap-2" style={{ color: '#F4A261' }}>
+              <span>🗿 Active Golems</span>
+              {activeGolemsOnFloor.length > 0 && (
+                <Badge className="bg-amber-900/50 text-amber-300 border-amber-600">
+                  {activeGolemsOnFloor.length}
+                </Badge>
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {activeGolemsOnFloor.length > 0 ? (
+              <>
+                <ScrollArea className="max-h-48">
+                  <div className="space-y-2 pr-2">
+                    {activeGolemsOnFloor.map((golem, index) => {
+                      const golemDef = GOLEM_DEFS[golem.golemId];
+                      const variantDef = golem.variant ? GOLEM_VARIANTS[golem.variant] : null;
+                      const elementColor = getGolemElementColor(golemDef?.element || 'earth');
+                      const elementSymbol = getGolemElementSymbol(golemDef?.element || 'earth');
+                      
+                      // Calculate golem DPS
+                      let golemSingleDPS = golemDef?.baseDamage || 0;
+                      if (variantDef) {
+                        golemSingleDPS *= variantDef.damageMultiplier;
+                      }
+                      if (store.skills.golemancyMaster === 1) {
+                        golemSingleDPS *= 1.5;
+                      }
+                      if (store.skills.pactBondedGolems === 1) {
+                        golemSingleDPS *= 1 + (store.signedPacts.length * 0.1);
+                      }
+                      if (store.skills.guardianInfusion === 1 && GUARDIANS[store.currentFloor]) {
+                        golemSingleDPS *= 1.25;
+                      }
+                      golemSingleDPS *= golemDef?.attackSpeed || 1;
+                      
+                      return (
+                        <div 
+                          key={`${golem.golemId}-${index}`}
+                          className="p-2 rounded border bg-gray-800/30"
+                          style={{ borderColor: `${elementColor}50` }}
+                        >
+                          <div className="flex items-center justify-between mb-1">
+                            <div className="flex items-center gap-2">
+                              <span style={{ color: elementColor }}>{elementSymbol}</span>
+                              <span className="text-sm font-semibold game-panel-title" style={{ color: elementColor }}>
+                                {variantDef?.name || golemDef?.name || 'Unknown Golem'}
+                              </span>
+                              {golem.variant && !variantDef && (
+                                <span className="text-xs text-gray-500">({golem.variant})</span>
+                              )}
+                            </div>
+                            <span className="text-xs text-gray-400">
+                              {fmtDec(golemSingleDPS)} DPS
+                            </span>
+                          </div>
+                          
+                          {/* HP Bar */}
+                          <div className="space-y-0.5 mb-1">
+                            <div className="h-2 bg-gray-700 rounded-full overflow-hidden">
+                              <div
+                                className="h-full rounded-full transition-all duration-300"
+                                style={{
+                                  width: `${Math.max(0, (golem.currentHP / golem.maxHP) * 100)}%`,
+                                  background: `linear-gradient(90deg, ${elementColor}99, ${elementColor})`,
+                                }}
+                              />
+                            </div>
+                            <div className="flex justify-between text-xs text-gray-500 game-mono">
+                              <span>{fmt(golem.currentHP)} / {fmt(golem.maxHP)} HP</span>
+                            </div>
+                          </div>
+                          
+                          {/* Remaining Floors */}
+                          <div className="flex items-center justify-between text-xs text-gray-400">
+                            <span className="flex items-center gap-1">
+                              <RotateCcw className="w-3 h-3" />
+                              {golem.remainingFloors} floor{golem.remainingFloors !== 1 ? 's' : ''} remaining
+                            </span>
+                            <span className="text-gray-500">
+                              {fmt(golem.damageDealt)} total dmg
+                            </span>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </ScrollArea>
+                
+                {/* Total Golem DPS Summary */}
+                <Separator className="bg-gray-700" />
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-gray-400">Total Golem DPS</span>
+                  <span className="font-semibold game-mono" style={{ color: '#F4A261' }}>
+                    {fmtDec(golemDPS)}
+                  </span>
+                </div>
+              </>
+            ) : (
+              <div className="text-gray-500 text-sm py-4 text-center">
+                <p className="mb-2">No golems summoned.</p>
+                <p className="text-xs text-gray-600">Visit the Crafting tab to summon golems.</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
         {/* Active Spells Card - Shows all spells from equipped weapons */}
         <Card className="bg-gray-900/80 border-gray-700">
           <CardHeader className="pb-2">
@@ -161,7 +297,7 @@ export function SpireTab({ store }: SpireTabProps) {
                         </span>
                       </div>
                       <div className="text-xs text-gray-400 game-mono mb-1">
-                        ⚔️ {fmt(totalDPS)} DPS • 
+                        ⚔️ {fmt(spellDPS)} DPS • 
                         <span style={{ color: getSpellCostColor(spellDef.cost) }}>
                           {' '}{formatSpellCost(spellDef.cost)}
                         </span>

src/components/game/tabs/StatsTab.tsx

@@ -1,14 +1,22 @@
 'use client';
 
+import { useState } from 'react';
 import { ELEMENTS, GUARDIANS, SKILLS_DEF } from '@/lib/game/constants';
 import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
 import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
 import { fmt, fmtDec, calcDamage } from '@/lib/game/store';
 import type { SkillUpgradeChoice, GameStore, UnifiedEffects } from '@/lib/game/types';
+import { ATTUNEMENTS_DEF, getAttunementXPForLevel, MAX_ATTUNEMENT_LEVEL } from '@/lib/game/data/attunements';
+import { SKILL_CATEGORIES } from '@/lib/game/constants';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
-import { Droplet, Swords, BookOpen, FlaskConical, Trophy, RotateCcw, Star } from 'lucide-react';
+import { Progress } from '@/components/ui/progress';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { 
+  Droplet, Swords, BookOpen, FlaskConical, Trophy, RotateCcw, Star, 
+  ChevronDown, ChevronRight, Wand2, Heart, Hammer, Golem, Sparkles
+} from 'lucide-react';
 
 export interface StatsTabProps {
   store: GameStore;
@@ -37,6 +45,72 @@ export function StatsTab({
   studySpeedMult,
   studyCostMult,
 }: StatsTabProps) {
+  const [expandedAttunements, setExpandedAttunements] = useState<Set<string>>(new Set());
+  
+  // Toggle attunement expansion
+  const toggleAttunement = (attunementId: string) => {
+    setExpandedAttunements(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(attunementId)) {
+        newSet.delete(attunementId);
+      } else {
+        newSet.add(attunementId);
+      }
+      return newSet;
+    });
+  };
+
+  // Get active attunements
+  const activeAttunements = Object.entries(store.attunements)
+    .filter(([, state]) => state.active)
+    .map(([id, state]) => ({ id, ...state, def: ATTUNEMENTS_DEF[id] }))
+    .filter(att => att.def);
+
+  // Get skills for an attunement
+  const getSkillsForAttunement = (attunementId: string) => {
+    return Object.entries(SKILLS_DEF)
+      .filter(([, def]) => def.attunement === attunementId && def.cat !== 'combination')
+      .map(([id, def]) => ({
+        id,
+        ...def,
+        currentLevel: store.skills[id] || 0,
+      }));
+  };
+
+  // Get combination skills
+  const getCombinationSkills = () => {
+    return Object.entries(SKILLS_DEF)
+      .filter(([, def]) => def.cat === 'combination')
+      .map(([id, def]) => {
+        const requirements = def.reqAttunements || {};
+        const attunementLevels = Object.entries(requirements).map(([attId, reqLevel]) => ({
+          attunementId: attId,
+          requiredLevel: reqLevel,
+          currentLevel: store.attunements[attId]?.level || 0,
+          isMet: (store.attunements[attId]?.level || 0) >= reqLevel,
+        }));
+        
+        const allRequirementsMet = attunementLevels.every(r => r.isMet);
+        const isUnlocked = allRequirementsMet && 
+          (!def.req || Object.entries(def.req).every(([skillId, level]) => (store.skills[skillId] || 0) >= level));
+        const isStudied = (store.skills[id] || 0) > 0;
+        
+        return {
+          id,
+          ...def,
+          attunementRequirements: attunementLevels,
+          allRequirementsMet,
+          isUnlocked,
+          isStudied,
+          currentLevel: store.skills[id] || 0,
+        };
+      });
+  };
+
+  const combinationSkills = getCombinationSkills();
+  const unlockedCombinationSkills = combinationSkills.filter(s => s.isUnlocked);
+  const lockedCombinationSkills = combinationSkills.filter(s => !s.isUnlocked);
+
   // Compute element max
   const elemMax = (() => {
     const ea = store.skillTiers?.elemAttune || 1;
@@ -69,8 +143,432 @@ export function StatsTab({
 
   const selectedUpgrades = getAllSelectedUpgrades();
 
+  // Calculate golem stats for Fabricator
+  const golemDuration = store.getGolemDuration();
+  const golemDPS = store.getActiveGolemDPS();
+  const activeGolems = store.activeGolems || [];
+
+  // Capability display names
+  const capabilityNames: Record<string, string> = {
+    enchanting: 'Enchanting',
+    disenchanting: 'Disenchanting',
+    pacts: 'Pact Signing',
+    guardianPowers: 'Guardian Powers',
+    elementalMastery: 'Elemental Mastery',
+    golemCrafting: 'Golemancy',
+    gearCrafting: 'Gear Crafting',
+    earthShaping: 'Earth Shaping',
+  };
+
   return (
     <div className="space-y-4">
+      {/* Active Attunements Card */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
+            <Sparkles className="w-4 h-4" />
+            Active Attunements ({activeAttunements.length})
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {activeAttunements.length === 0 ? (
+            <div className="text-gray-500 text-sm">No attunements active. Visit the Attune tab to unlock your potential.</div>
+          ) : (
+            <div className="space-y-3">
+              {activeAttunements.map(({ id, level, experience, def }) => {
+                const xpForNext = getAttunementXPForLevel(level + 1);
+                const xpProgress = xpForNext > 0 ? (experience / xpForNext) * 100 : 0;
+                const isExpanded = expandedAttunements.has(id);
+                const skills = getSkillsForAttunement(id);
+                const studyingSkills = skills.filter(s => 
+                  store.currentStudyTarget?.type === 'skill' && store.currentStudyTarget.id === s.id
+                );
+
+                return (
+                  <Collapsible key={id} open={isExpanded} onOpenChange={() => toggleAttunement(id)}>
+                    <CollapsibleTrigger asChild>
+                      <div 
+                        className="p-3 rounded-lg border cursor-pointer hover:bg-gray-800/50 transition-colors"
+                        style={{ 
+                          borderColor: def.color,
+                          backgroundColor: `${def.color}10`,
+                        }}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            <span className="text-2xl">{def.icon}</span>
+                            <div>
+                              <div className="font-semibold" style={{ color: def.color }}>{def.name}</div>
+                              <div className="text-xs text-gray-400">
+                                Level {level}/{MAX_ATTUNEMENT_LEVEL}
+                              </div>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            {def.primaryManaType && (
+                              <Badge variant="outline" className="text-xs" style={{ color: ELEMENTS[def.primaryManaType]?.color }}>
+                                {ELEMENTS[def.primaryManaType]?.sym} {ELEMENTS[def.primaryManaType]?.name}
+                              </Badge>
+                            )}
+                            <Badge variant="outline" className="text-xs text-gray-300">
+                              {capabilityNames[def.capabilities[0]] || def.capabilities[0]}
+                            </Badge>
+                            {isExpanded ? <ChevronDown className="w-4 h-4 text-gray-400" /> : <ChevronRight className="w-4 h-4 text-gray-400" />}
+                          </div>
+                        </div>
+                        
+                        {/* XP Progress Bar */}
+                        {level < MAX_ATTUNEMENT_LEVEL && (
+                          <div className="mt-2">
+                            <div className="flex justify-between text-xs text-gray-400 mb-1">
+                              <span>XP Progress</span>
+                              <span>{fmt(experience)} / {fmt(xpForNext)}</span>
+                            </div>
+                            <Progress 
+                              value={xpProgress} 
+                              className="h-2 bg-gray-700"
+                            />
+                          </div>
+                        )}
+                        {level >= MAX_ATTUNEMENT_LEVEL && (
+                          <div className="mt-2 text-xs text-amber-400 font-semibold">MAX LEVEL REACHED</div>
+                        )}
+                      </div>
+                    </CollapsibleTrigger>
+                    
+                    <CollapsibleContent>
+                      <div className="mt-2 ml-4 p-3 bg-gray-800/30 rounded-lg border border-gray-700">
+                        <div className="text-xs text-gray-400 mb-2">Available Skills ({skills.length})</div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                          {skills.map(skill => {
+                            const isStudying = store.currentStudyTarget?.type === 'skill' && store.currentStudyTarget.id === skill.id;
+                            return (
+                              <div 
+                                key={skill.id}
+                                className={`p-2 rounded border text-xs ${
+                                  isStudying 
+                                    ? 'border-purple-500 bg-purple-900/20' 
+                                    : skill.currentLevel > 0 
+                                      ? 'border-gray-600 bg-gray-800/50' 
+                                      : 'border-gray-700 bg-gray-800/30'
+                                }`}
+                              >
+                                <div className="flex justify-between items-center">
+                                  <span className={skill.currentLevel > 0 ? 'text-gray-200' : 'text-gray-500'}>
+                                    {skill.name}
+                                  </span>
+                                  <div className="flex items-center gap-1">
+                                    {skill.currentLevel > 0 && (
+                                      <Badge variant="outline" className="text-xs">
+                                        Lv.{skill.currentLevel}/{skill.max}
+                                      </Badge>
+                                    )}
+                                    {isStudying && (
+                                      <Badge className="bg-purple-600 text-xs">Studying</Badge>
+                                    )}
+                                  </div>
+                                </div>
+                                <div className="text-gray-500 mt-1">{skill.desc}</div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </Collapsible>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Combination Skills Card */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-purple-400 game-panel-title text-xs flex items-center gap-2">
+            <Wand2 className="w-4 h-4" />
+            Combination Skills
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {/* Unlocked Skills */}
+          {unlockedCombinationSkills.length > 0 && (
+            <div className="mb-4">
+              <div className="text-xs text-green-400 mb-2">Available to Study ({unlockedCombinationSkills.length})</div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {unlockedCombinationSkills.map(skill => (
+                  <div 
+                    key={skill.id}
+                    className="p-2 rounded border border-green-600/30 bg-green-900/10"
+                  >
+                    <div className="flex justify-between items-center">
+                      <span className="text-green-300 text-sm font-semibold">{skill.name}</span>
+                      {skill.currentLevel > 0 && (
+                        <Badge variant="outline" className="text-xs text-green-400">
+                          Lv.{skill.currentLevel}/{skill.max}
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="text-xs text-gray-400 mt-1">{skill.desc}</div>
+                    <div className="flex gap-1 mt-2 flex-wrap">
+                      {skill.attunementRequirements.map((req) => (
+                        <Badge key={req.attunementId} variant="outline" className="text-xs text-green-400">
+                          {ATTUNEMENTS_DEF[req.attunementId]?.icon} {ATTUNEMENTS_DEF[req.attunementId]?.name} Lv.{req.currentLevel}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          
+          {/* Locked Skills */}
+          {lockedCombinationSkills.length > 0 && (
+            <div>
+              <div className="text-xs text-gray-400 mb-2">Requires Level 5+ in Multiple Attunements</div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {lockedCombinationSkills.map(skill => (
+                  <div 
+                    key={skill.id}
+                    className="p-2 rounded border border-gray-700 bg-gray-800/30 opacity-75"
+                  >
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-400 text-sm">{skill.name}</span>
+                      <Badge variant="outline" className="text-xs text-gray-500">Locked</Badge>
+                    </div>
+                    <div className="text-xs text-gray-500 mt-1">{skill.desc}</div>
+                    <div className="flex gap-1 mt-2 flex-wrap">
+                      {skill.attunementRequirements.map((req) => (
+                        <Badge 
+                          key={req.attunementId} 
+                          variant="outline" 
+                          className={`text-xs ${req.isMet ? 'text-green-400' : 'text-red-400'}`}
+                        >
+                          {ATTUNEMENTS_DEF[req.attunementId]?.icon} Lv.{req.requiredLevel} ({req.currentLevel}/{req.requiredLevel})
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          
+          {combinationSkills.length === 0 && (
+            <div className="text-gray-500 text-sm">No combination skills available yet.</div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Enchanter Stats */}
+      {store.attunements.enchanter?.active && (
+        <Card className="bg-gray-900/80 border-gray-700" style={{ borderTop: `2px solid ${ATTUNEMENTS_DEF.enchanter.color}` }}>
+          <CardHeader className="pb-2">
+            <CardTitle className="game-panel-title text-xs flex items-center gap-2" style={{ color: ATTUNEMENTS_DEF.enchanter.color }}>
+              <Wand2 className="w-4 h-4" />
+              Enchanter Stats {ATTUNEMENTS_DEF.enchanter.icon}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Enchantment Capacity:</span>
+                  <span className="text-gray-200">
+                    {(() => {
+                      const base = 100 + (store.skills.enchanting || 0) * 10;
+                      const bonus = (store.skills.ancientEcho || 0) * Math.floor((store.attunements.enchanter?.level || 0) / 2);
+                      return `${base + bonus} (+${bonus} from Ancient Echo)`;
+                    })()}
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Efficiency Bonus:</span>
+                  <span className="text-teal-300">-{(store.skills.efficientEnchant || 0) * 5}% cost</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Designs Created:</span>
+                  <span className="text-teal-300">{store.enchantmentDesigns?.length || 0}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Effects Unlocked:</span>
+                  <span className="text-teal-300">{store.unlockedEffects?.length || 0}</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Disenchant Recovery:</span>
+                  <span className="text-teal-300">{20 + (store.skills.disenchanting || 0) * 20}%</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Enchant Speed:</span>
+                  <span className="text-teal-300">+{(store.skills.enchantSpeed || 0) * 10}%</span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Invoker Stats */}
+      {store.attunements.invoker?.active && (
+        <Card className="bg-gray-900/80 border-gray-700" style={{ borderTop: `2px solid ${ATTUNEMENTS_DEF.invoker.color}` }}>
+          <CardHeader className="pb-2">
+            <CardTitle className="game-panel-title text-xs flex items-center gap-2" style={{ color: ATTUNEMENTS_DEF.invoker.color }}>
+              <Heart className="w-4 h-4" />
+              Invoker Stats {ATTUNEMENTS_DEF.invoker.icon}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Pacts Signed:</span>
+                  <span className="text-purple-300">{store.signedPacts.length}/10</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Pact Multiplier:</span>
+                  <span className="text-purple-300">
+                    ×{fmtDec(store.signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}
+                  </span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Pact Mastery Bonus:</span>
+                  <span className="text-purple-300">+{(store.skills.pactMastery || 0) * 10}%</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Guardian Affinity:</span>
+                  <span className="text-purple-300">-{(store.skills.guardianAffinity || 0) * 15}% time</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Elemental Bond:</span>
+                  <span className="text-purple-300">+{(store.skills.elementalBond || 0) * 20} cap/pact</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Pact Synergy:</span>
+                  <span className="text-purple-300">+{(store.skills.pactSynergy || 0) * 5}%/pact</span>
+                </div>
+              </div>
+            </div>
+            
+            {/* Signed Pacts List */}
+            {store.signedPacts.length > 0 && (
+              <div className="mt-3">
+                <Separator className="bg-gray-700 my-2" />
+                <div className="text-xs text-gray-400 mb-2">Signed Pacts:</div>
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
+                  {store.signedPacts.map((floor) => {
+                    const guardian = GUARDIANS[floor];
+                    if (!guardian) return null;
+                    return (
+                      <div
+                        key={floor}
+                        className="p-2 rounded border text-center"
+                        style={{ borderColor: guardian.color, backgroundColor: `${guardian.color}15` }}
+                      >
+                        <div className="text-xs font-semibold" style={{ color: guardian.color }}>
+                          {guardian.name}
+                        </div>
+                        <div className="text-xs text-gray-400">×{guardian.pact}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Fabricator Stats */}
+      {store.attunements.fabricator?.active && (
+        <Card className="bg-gray-900/80 border-gray-700" style={{ borderTop: `2px solid ${ATTUNEMENTS_DEF.fabricator.color}` }}>
+          <CardHeader className="pb-2">
+            <CardTitle className="game-panel-title text-xs flex items-center gap-2" style={{ color: ATTUNEMENTS_DEF.fabricator.color }}>
+              <Hammer className="w-4 h-4" />
+              Fabricator Stats {ATTUNEMENTS_DEF.fabricator.icon}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Golems Active:</span>
+                  <span className="text-amber-300">{activeGolems.length}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Golem DPS:</span>
+                  <span className="text-amber-300">{fmtDec(golemDPS, 1)}/hr</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Golem Duration:</span>
+                  <span className="text-amber-300">{golemDuration} floors</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Golem Vitality:</span>
+                  <span className="text-amber-300">+{(store.skills.golemVitality || 0) * 20}% HP</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Crafting Speed:</span>
+                  <span className="text-amber-300">+{(store.skills.efficientCrafting || 0) * 10}%</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-400">Earth Conversion:</span>
+                  <span className="text-amber-300">+{(store.skills.earthShaping || 0) * 25}%</span>
+                </div>
+              </div>
+            </div>
+            
+            {/* Active Golems List */}
+            {activeGolems.length > 0 && (
+              <div className="mt-3">
+                <Separator className="bg-gray-700 my-2" />
+                <div className="text-xs text-gray-400 mb-2">Active Golems:</div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                  {activeGolems.map((golem, idx) => {
+                    const elemColor = ELEMENTS[golem.variant || 'earth']?.color || '#F4A261';
+                    return (
+                      <div
+                        key={idx}
+                        className="p-2 rounded border"
+                        style={{ borderColor: elemColor, backgroundColor: `${elemColor}10` }}
+                      >
+                        <div className="flex justify-between items-center">
+                          <span className="text-sm font-semibold" style={{ color: elemColor }}>
+                            {golem.variant ? `${golem.variant} Golem` : 'Earth Golem'}
+                          </span>
+                          <Badge variant="outline" className="text-xs">{golem.remainingFloors} floors left</Badge>
+                        </div>
+                        <div className="flex justify-between text-xs text-gray-400 mt-1">
+                          <span>HP: {fmt(golem.currentHP)}/{fmt(golem.maxHP)}</span>
+                          <span>DMG: {fmt(golem.damageDealt)}</span>
+                        </div>
+                        <Progress 
+                          value={(golem.currentHP / golem.maxHP) * 100} 
+                          className="h-1 mt-1 bg-gray-700"
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
       {/* Mana Stats */}
       <Card className="bg-gray-900/80 border-gray-700">
         <CardHeader className="pb-2">
@@ -449,49 +947,6 @@ export function StatsTab({
         </CardContent>
       </Card>
 
-      {/* Pact Bonuses */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
-            <Trophy className="w-4 h-4" />
-            Signed Pacts ({store.signedPacts.length}/10)
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {store.signedPacts.length === 0 ? (
-            <div className="text-gray-500 text-sm">No pacts signed yet. Defeat guardians to earn pacts.</div>
-          ) : (
-            <div className="space-y-2">
-              {store.signedPacts.map((floor) => {
-                const guardian = GUARDIANS[floor];
-                if (!guardian) return null;
-                return (
-                  <div
-                    key={floor}
-                    className="flex items-center justify-between p-2 rounded border"
-                    style={{ borderColor: guardian.color, backgroundColor: `${guardian.color}15` }}
-                  >
-                    <div>
-                      <div className="font-semibold text-sm" style={{ color: guardian.color }}>
-                        {guardian.name}
-                      </div>
-                      <div className="text-xs text-gray-400">Floor {floor}</div>
-                    </div>
-                    <Badge className="bg-amber-900/50 text-amber-300">
-                      {guardian.pact}x multiplier
-                    </Badge>
-                  </div>
-                );
-              })}
-              <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2 mt-2">
-                <span className="text-gray-300">Combined Pact Multiplier:</span>
-                <span className="text-amber-400">×{fmtDec(store.signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}</span>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
       {/* Loop Stats */}
       <Card className="bg-gray-900/80 border-gray-700">
         <CardHeader className="pb-2">