Initial commit

src/components/game/index.ts

@@ -0,0 +1,7 @@
+// ─── Game Components Index ──────────────────────────────────────────────────────
+// Re-exports all game tab components for cleaner imports
+
+export { CraftingTab } from './tabs/CraftingTab';
+export { SpireTab } from './tabs/SpireTab';
+export { SpellsTab } from './tabs/SpellsTab';
+export { LabTab } from './tabs/LabTab';

src/components/game/tabs/CraftingTab.tsx

@@ -0,0 +1,802 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+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
+} 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 type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment } from '@/lib/game/types';
+import { fmt } from '@/lib/game/store';
+
+// Slot display names
+const SLOT_NAMES: Record<EquipmentSlot, string> = {
+  mainHand: 'Main Hand',
+  offHand: 'Off Hand',
+  head: 'Head',
+  body: 'Body',
+  hands: 'Hands',
+  feet: 'Feet',
+  accessory1: 'Accessory 1',
+  accessory2: 'Accessory 2',
+};
+
+interface CraftingTabProps {
+  // Equipment state
+  equippedInstances: Record<string, string | null>;
+  equipmentInstances: Record<string, EquipmentInstance>;
+  enchantmentDesigns: EnchantmentDesign[];
+  
+  // Progress states
+  designProgress: { designId: string; progress: number; required: number } | null;
+  preparationProgress: { equipmentInstanceId: string; progress: number; required: number; manaCostPaid: number } | null;
+  applicationProgress: { equipmentInstanceId: string; designId: string; progress: number; required: number; manaPerHour: number; paused: boolean; manaSpent: number } | null;
+  
+  // Player state
+  rawMana: number;
+  skills: Record<string, number>;
+  currentAction: string;
+  unlockedEffects: string[];  // Effect IDs that have been researched
+  
+  // Actions
+  startDesigningEnchantment: (name: string, equipmentTypeId: string, effects: DesignEffect[]) => boolean;
+  cancelDesign: () => void;
+  saveDesign: (design: EnchantmentDesign) => void;
+  deleteDesign: (designId: string) => void;
+  startPreparing: (equipmentInstanceId: string) => boolean;
+  cancelPreparation: () => void;
+  startApplying: (equipmentInstanceId: string, designId: string) => boolean;
+  pauseApplication: () => void;
+  resumeApplication: () => void;
+  cancelApplication: () => void;
+  disenchantEquipment: (instanceId: string) => void;
+  getAvailableCapacity: (instanceId: string) => number;
+}
+
+export function CraftingTab({
+  equippedInstances,
+  equipmentInstances,
+  enchantmentDesigns,
+  designProgress,
+  preparationProgress,
+  applicationProgress,
+  rawMana,
+  skills,
+  currentAction,
+  unlockedEffects,
+  startDesigningEnchantment,
+  cancelDesign,
+  saveDesign,
+  deleteDesign,
+  startPreparing,
+  cancelPreparation,
+  startApplying,
+  pauseApplication,
+  resumeApplication,
+  cancelApplication,
+  disenchantEquipment,
+  getAvailableCapacity,
+}: CraftingTabProps) {
+  const [craftingStage, setCraftingStage] = useState<'design' | 'prepare' | 'apply'>('design');
+  const [selectedEquipmentType, setSelectedEquipmentType] = useState<string | null>(null);
+  const [selectedEquipmentInstance, setSelectedEquipmentInstance] = useState<string | null>(null);
+  const [selectedDesign, setSelectedDesign] = useState<string | null>(null);
+  
+  // Design creation state
+  const [designName, setDesignName] = useState('');
+  const [selectedEffects, setSelectedEffects] = useState<DesignEffect[]>([]);
+  
+  const enchantingLevel = skills.enchanting || 0;
+  const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
+  
+  // Get equipped items as array
+  const equippedItems = Object.entries(equippedInstances)
+    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
+    .map(([slot, instanceId]) => ({
+      slot: slot as EquipmentSlot,
+      instance: equipmentInstances[instanceId!],
+    }));
+  
+  // Calculate total capacity cost for current design
+  const designCapacityCost = selectedEffects.reduce(
+    (total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
+    0
+  );
+  
+  // Calculate design time
+  const designTime = selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
+  
+  // Add effect to design
+  const addEffect = (effectId: string) => {
+    const existing = selectedEffects.find(e => e.effectId === effectId);
+    const effectDef = ENCHANTMENT_EFFECTS[effectId];
+    if (!effectDef) return;
+    
+    if (existing) {
+      if (existing.stacks < effectDef.maxStacks) {
+        setSelectedEffects(selectedEffects.map(e => 
+          e.effectId === effectId 
+            ? { ...e, stacks: e.stacks + 1 }
+            : e
+        ));
+      }
+    } else {
+      setSelectedEffects([...selectedEffects, {
+        effectId,
+        stacks: 1,
+        capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
+      }]);
+    }
+  };
+  
+  // Remove effect from design
+  const removeEffect = (effectId: string) => {
+    const existing = selectedEffects.find(e => e.effectId === effectId);
+    if (!existing) return;
+    
+    if (existing.stacks > 1) {
+      setSelectedEffects(selectedEffects.map(e => 
+        e.effectId === effectId 
+          ? { ...e, stacks: e.stacks - 1 }
+          : e
+      ));
+    } else {
+      setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
+    }
+  };
+  
+  // Create design
+  const handleCreateDesign = () => {
+    if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;
+    
+    const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
+    if (success) {
+      // Reset form
+      setDesignName('');
+      setSelectedEquipmentType(null);
+      setSelectedEffects([]);
+    }
+  };
+  
+  // Complete design after progress
+  const handleCompleteDesign = () => {
+    if (!designProgress || !selectedEquipmentType) return;
+    
+    const design: EnchantmentDesign = {
+      id: designProgress.designId,
+      name: designName || 'Untitled Design',
+      equipmentType: selectedEquipmentType,
+      effects: selectedEffects,
+      totalCapacityUsed: designCapacityCost,
+      designTime,
+      created: Date.now(),
+    };
+    
+    saveDesign(design);
+    setDesignName('');
+    setSelectedEquipmentType(null);
+    setSelectedEffects([]);
+  };
+  
+  // Get available effects for selected equipment type (only unlocked ones)
+  const getAvailableEffects = () => {
+    if (!selectedEquipmentType) return [];
+    const type = EQUIPMENT_TYPES[selectedEquipmentType];
+    if (!type) return [];
+    
+    return Object.values(ENCHANTMENT_EFFECTS).filter(
+      effect => 
+        effect.allowedEquipmentCategories.includes(type.category) &&
+        unlockedEffects.includes(effect.id)
+    );
+  };
+  
+  // Render design stage
+  const renderDesignStage = () => (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Equipment Type Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">1. Select Equipment Type</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {designProgress ? (
+            <div className="space-y-3">
+              <div className="text-sm text-gray-400">Designing for: {EQUIPMENT_TYPES[selectedEquipmentType || '']?.name}</div>
+              <Progress value={(designProgress.progress / designProgress.required) * 100} className="h-3" />
+              <div className="flex justify-between text-xs text-gray-400">
+                <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
+                <Button size="sm" variant="outline" onClick={cancelDesign}>Cancel</Button>
+              </div>
+              {designProgress.progress >= designProgress.required && (
+                <Button onClick={handleCompleteDesign} className="w-full">Complete Design</Button>
+              )}
+            </div>
+          ) : (
+            <ScrollArea className="h-64">
+              <div className="grid grid-cols-2 gap-2">
+                {Object.values(EQUIPMENT_TYPES).map(type => (
+                  <div
+                    key={type.id}
+                    className={`p-2 rounded border cursor-pointer transition-all ${
+                      selectedEquipmentType === type.id
+                        ? 'border-amber-500 bg-amber-900/20'
+                        : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
+                    }`}
+                    onClick={() => setSelectedEquipmentType(type.id)}
+                  >
+                    <div className="text-sm font-semibold">{type.name}</div>
+                    <div className="text-xs text-gray-400">Cap: {type.baseCapacity}</div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          )}
+        </CardContent>
+      </Card>
+      
+      {/* Effect Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">2. Select Effects</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {enchantingLevel < 1 ? (
+            <div className="text-center text-gray-400 py-8">
+              <Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50" />
+              <p>Learn Enchanting skill to design enchantments</p>
+            </div>
+          ) : designProgress ? (
+            <div className="space-y-2">
+              <div className="text-sm text-gray-400">Design in progress...</div>
+              {selectedEffects.map(eff => {
+                const def = ENCHANTMENT_EFFECTS[eff.effectId];
+                return (
+                  <div key={eff.effectId} className="flex justify-between text-sm">
+                    <span>{def?.name} x{eff.stacks}</span>
+                    <span className="text-gray-400">{eff.capacityCost} cap</span>
+                  </div>
+                );
+              })}
+            </div>
+          ) : !selectedEquipmentType ? (
+            <div className="text-center text-gray-400 py-8">
+              Select an equipment type first
+            </div>
+          ) : (
+            <>
+              <ScrollArea className="h-48 mb-4">
+                <div className="space-y-2">
+                  {getAvailableEffects().map(effect => {
+                    const selected = selectedEffects.find(e => e.effectId === effect.id);
+                    const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
+                    
+                    return (
+                      <div
+                        key={effect.id}
+                        className={`p-2 rounded border transition-all ${
+                          selected
+                            ? 'border-purple-500 bg-purple-900/20'
+                            : 'border-gray-700 bg-gray-800/50'
+                        }`}
+                      >
+                        <div className="flex justify-between items-start">
+                          <div className="flex-1">
+                            <div className="text-sm font-semibold">{effect.name}</div>
+                            <div className="text-xs text-gray-400">{effect.description}</div>
+                            <div className="text-xs text-gray-500 mt-1">
+                              Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
+                            </div>
+                          </div>
+                          <div className="flex gap-1">
+                            {selected && (
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                className="h-6 w-6 p-0"
+                                onClick={() => removeEffect(effect.id)}
+                              >
+                                <Minus className="w-3 h-3" />
+                              </Button>
+                            )}
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="h-6 w-6 p-0"
+                              onClick={() => addEffect(effect.id)}
+                              disabled={!selected && selectedEffects.length >= 5}
+                            >
+                              <Plus className="w-3 h-3" />
+                            </Button>
+                          </div>
+                        </div>
+                        {selected && (
+                          <Badge variant="outline" className="mt-1 text-xs">
+                            {selected.stacks}/{effect.maxStacks}
+                          </Badge>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
+              
+              {/* Selected effects summary */}
+              <Separator className="bg-gray-700 my-2" />
+              <div className="space-y-2">
+                <input
+                  type="text"
+                  placeholder="Design name..."
+                  value={designName}
+                  onChange={(e) => setDesignName(e.target.value)}
+                  className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
+                />
+                <div className="flex justify-between text-sm">
+                  <span>Total Capacity:</span>
+                  <span className={designCapacityCost > 100 ? 'text-red-400' : 'text-green-400'}>
+                    {designCapacityCost.toFixed(0)}
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm text-gray-400">
+                  <span>Design Time:</span>
+                  <span>{designTime.toFixed(1)}h</span>
+                </div>
+                <Button
+                  className="w-full"
+                  disabled={!designName || selectedEffects.length === 0}
+                  onClick={handleCreateDesign}
+                >
+                  Start Design ({designTime.toFixed(1)}h)
+                </Button>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+      
+      {/* Saved Designs */}
+      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Saved Designs ({enchantmentDesigns.length})</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {enchantmentDesigns.length === 0 ? (
+            <div className="text-center text-gray-400 py-4">
+              No saved designs yet
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              {enchantmentDesigns.map(design => (
+                <div
+                  key={design.id}
+                  className={`p-3 rounded border ${
+                    selectedDesign === design.id
+                      ? 'border-amber-500 bg-amber-900/20'
+                      : 'border-gray-700 bg-gray-800/50'
+                  }`}
+                  onClick={() => setSelectedDesign(design.id)}
+                >
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <div className="font-semibold">{design.name}</div>
+                      <div className="text-xs text-gray-400">
+                        {EQUIPMENT_TYPES[design.equipmentType]?.name}
+                      </div>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-gray-400 hover:text-red-400"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        deleteDesign(design.id);
+                      }}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div className="mt-2 text-xs text-gray-400">
+                    {design.effects.length} effects | {design.totalCapacityUsed} cap
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+  
+  // Render prepare stage
+  const renderPrepareStage = () => (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Equipment Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Select Equipment to Prepare</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {preparationProgress ? (
+            <div className="space-y-3">
+              <div className="text-sm text-gray-400">
+                Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
+              </div>
+              <Progress value={(preparationProgress.progress / preparationProgress.required) * 100} className="h-3" />
+              <div className="flex justify-between text-xs text-gray-400">
+                <span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
+                <span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
+              </div>
+              <Button size="sm" variant="outline" onClick={cancelPreparation}>Cancel</Button>
+            </div>
+          ) : (
+            <ScrollArea className="h-64">
+              <div className="space-y-2">
+                {equippedItems.map(({ slot, instance }) => (
+                  <div
+                    key={instance.instanceId}
+                    className={`p-3 rounded border cursor-pointer transition-all ${
+                      selectedEquipmentInstance === instance.instanceId
+                        ? 'border-amber-500 bg-amber-900/20'
+                        : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
+                    }`}
+                    onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
+                  >
+                    <div className="flex justify-between">
+                      <div>
+                        <div className="font-semibold">{instance.name}</div>
+                        <div className="text-xs text-gray-400">{SLOT_NAMES[slot]}</div>
+                      </div>
+                      <div className="text-right text-sm">
+                        <div className="text-green-400">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
+                        <div className="text-xs text-gray-400">{instance.enchantments.length} enchants</div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+                {equippedItems.length === 0 && (
+                  <div className="text-center text-gray-400 py-4">No equipped items</div>
+                )}
+              </div>
+            </ScrollArea>
+          )}
+        </CardContent>
+      </Card>
+      
+      {/* Preparation Details */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Preparation Details</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!selectedEquipmentInstance ? (
+            <div className="text-center text-gray-400 py-8">
+              Select equipment to prepare
+            </div>
+          ) : preparationProgress ? (
+            <div className="text-gray-400">Preparation in progress...</div>
+          ) : (
+            (() => {
+              const instance = equipmentInstances[selectedEquipmentInstance];
+              const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
+              const manaCost = instance.totalCapacity * 10;
+              
+              return (
+                <div className="space-y-4">
+                  <div className="text-lg font-semibold">{instance.name}</div>
+                  <Separator className="bg-gray-700" />
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Capacity:</span>
+                      <span>{instance.usedCapacity}/{instance.totalCapacity}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Prep Time:</span>
+                      <span>{prepTime}h</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Mana Cost:</span>
+                      <span className={rawMana < manaCost ? 'text-red-400' : 'text-green-400'}>
+                        {fmt(manaCost)}
+                      </span>
+                    </div>
+                  </div>
+                  <Button
+                    className="w-full"
+                    disabled={rawMana < manaCost}
+                    onClick={() => startPreparing(selectedEquipmentInstance)}
+                  >
+                    Start Preparation ({prepTime}h, {fmt(manaCost)} mana)
+                  </Button>
+                </div>
+              );
+            })()
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+  
+  // Render apply stage
+  const renderApplyStage = () => (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Equipment & Design Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Select Equipment & Design</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {applicationProgress ? (
+            <div className="space-y-3">
+              <div className="text-sm text-gray-400">
+                Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
+              </div>
+              <Progress value={(applicationProgress.progress / applicationProgress.required) * 100} className="h-3" />
+              <div className="flex justify-between text-xs text-gray-400">
+                <span>{applicationProgress.progress.toFixed(1)}h / {applicationProgress.required.toFixed(1)}h</span>
+                <span>Mana spent: {fmt(applicationProgress.manaSpent)}</span>
+              </div>
+              <div className="flex gap-2">
+                {applicationProgress.paused ? (
+                  <Button size="sm" onClick={resumeApplication}>Resume</Button>
+                ) : (
+                  <Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
+                )}
+                <Button size="sm" variant="outline" onClick={cancelApplication}>Cancel</Button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <div>
+                <div className="text-sm text-gray-400 mb-2">Equipment:</div>
+                <ScrollArea className="h-32">
+                  <div className="space-y-1">
+                    {equippedItems.map(({ slot, instance }) => (
+                      <div
+                        key={instance.instanceId}
+                        className={`p-2 rounded border cursor-pointer text-sm ${
+                          selectedEquipmentInstance === instance.instanceId
+                            ? 'border-amber-500 bg-amber-900/20'
+                            : 'border-gray-700 bg-gray-800/50'
+                        }`}
+                        onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
+                      >
+                        {instance.name} ({instance.usedCapacity}/{instance.totalCapacity} cap)
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </div>
+              
+              <div>
+                <div className="text-sm text-gray-400 mb-2">Design:</div>
+                <ScrollArea className="h-32">
+                  <div className="space-y-1">
+                    {enchantmentDesigns.map(design => (
+                      <div
+                        key={design.id}
+                        className={`p-2 rounded border cursor-pointer text-sm ${
+                          selectedDesign === design.id
+                            ? 'border-purple-500 bg-purple-900/20'
+                            : 'border-gray-700 bg-gray-800/50'
+                        }`}
+                        onClick={() => setSelectedDesign(design.id)}
+                      >
+                        {design.name} ({design.totalCapacityUsed} cap)
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+      
+      {/* Application Details */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Apply Enchantment</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!selectedEquipmentInstance || !selectedDesign ? (
+            <div className="text-center text-gray-400 py-8">
+              Select equipment and a design
+            </div>
+          ) : applicationProgress ? (
+            <div className="text-gray-400">Application in progress...</div>
+          ) : (
+            (() => {
+              const instance = equipmentInstances[selectedEquipmentInstance];
+              const design = enchantmentDesigns.find(d => d.id === selectedDesign);
+              if (!design) return null;
+              
+              const availableCap = instance.totalCapacity - instance.usedCapacity;
+              const canFit = availableCap >= design.totalCapacityUsed;
+              const applicationTime = 2 + design.effects.reduce((t, e) => t + e.stacks, 0);
+              const manaPerHour = 20 + design.effects.reduce((t, e) => t + e.stacks * 5, 0);
+              
+              return (
+                <div className="space-y-4">
+                  <div className="text-lg font-semibold">{design.name}</div>
+                  <div className="text-sm text-gray-400">→ {instance.name}</div>
+                  <Separator className="bg-gray-700" />
+                  
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Required Capacity:</span>
+                      <span className={canFit ? 'text-green-400' : 'text-red-400'}>
+                        {design.totalCapacityUsed} / {availableCap} available
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Application Time:</span>
+                      <span>{applicationTime}h</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Mana per Hour:</span>
+                      <span>{manaPerHour}</span>
+                    </div>
+                  </div>
+                  
+                  <div className="text-sm text-gray-400">
+                    Effects:
+                    <ul className="list-disc list-inside">
+                      {design.effects.map(eff => (
+                        <li key={eff.effectId}>
+                          {ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  
+                  <Button
+                    className="w-full"
+                    disabled={!canFit}
+                    onClick={() => startApplying(selectedEquipmentInstance, selectedDesign)}
+                  >
+                    Apply Enchantment
+                  </Button>
+                </div>
+              );
+            })()
+          )}
+        </CardContent>
+      </Card>
+      
+      {/* Disenchant Section */}
+      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Disenchant Equipment</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+            {equippedItems
+              .filter(({ instance }) => instance.enchantments.length > 0)
+              .map(({ slot, instance }) => {
+                const disenchantLevel = skills.disenchanting || 0;
+                const recoveryRate = 0.1 + disenchantLevel * 0.2;
+                const totalRecoverable = instance.enchantments.reduce(
+                  (sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
+                  0
+                );
+                
+                return (
+                  <div key={instance.instanceId} className="p-3 rounded border border-gray-700 bg-gray-800/50">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <div className="font-semibold">{instance.name}</div>
+                        <div className="text-xs text-gray-400">{instance.enchantments.length} enchantments</div>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => disenchantEquipment(instance.instanceId)}
+                      >
+                        <Trash2 className="w-4 h-4 mr-1" />
+                        Recover {fmt(totalRecoverable)}
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            {equippedItems.filter(({ instance }) => instance.enchantments.length > 0).length === 0 && (
+              <div className="col-span-full text-center text-gray-400 py-4">
+                No enchanted equipment to disenchant
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+  
+  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="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-4">
+          {renderDesignStage()}
+        </TabsContent>
+        <TabsContent value="prepare" className="mt-4">
+          {renderPrepareStage()}
+        </TabsContent>
+        <TabsContent value="apply" className="mt-4">
+          {renderApplyStage()}
+        </TabsContent>
+      </Tabs>
+      
+      {/* Current Activity Indicator */}
+      {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>
+            </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>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

src/components/game/tabs/LabTab.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ELEMENTS, MANA_PER_ELEMENT } from '@/lib/game/constants';
+
+interface LabTabProps {
+  store: {
+    rawMana: number;
+    elements: Record<string, { current: number; max: number; unlocked: boolean }>;
+    skills: Record<string, number>;
+    convertMana: (element: string, amount: number) => void;
+    unlockElement: (element: string) => void;
+    craftComposite: (target: string) => void;
+  };
+}
+
+export function LabTab({ store }: LabTabProps) {
+  const [convertTarget, setConvertTarget] = useState('fire');
+  
+  // Unlock cost
+  const UNLOCK_COST = 500;
+  
+  // Render elemental mana grid
+  const renderElementsGrid = () => (
+    <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
+      {Object.entries(store.elements)
+        .filter(([, state]) => state.unlocked)
+        .map(([id, state]) => {
+          const def = ELEMENTS[id];
+          const isSelected = convertTarget === id;
+          return (
+            <div
+              key={id}
+              className={`p-2 rounded border cursor-pointer transition-all ${isSelected ? 'border-blue-500 bg-blue-900/20' : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'}`}
+              style={{ borderColor: isSelected ? def?.color : undefined }}
+              onClick={() => setConvertTarget(id)}
+            >
+              <div className="text-lg text-center">{def?.sym}</div>
+              <div className="text-xs font-semibold text-center" style={{ color: def?.color }}>{def?.name}</div>
+              <div className="text-xs text-gray-400 game-mono text-center">{state.current}/{state.max}</div>
+            </div>
+          );
+        })}
+    </div>
+  );
+  
+  // Render locked elements (can be unlocked)
+  const renderLockedElements = () => {
+    const lockedElements = Object.entries(store.elements)
+      .filter(([, state]) => !state.unlocked)
+      .filter(([id]) => !ELEMENTS[id]?.recipe); // Only show base elements (no recipe = base)
+    
+    if (lockedElements.length === 0) return null;
+    
+    return (
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Unlock Elements</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            {lockedElements.map(([id, state]) => {
+              const def = ELEMENTS[id];
+              const canUnlock = store.rawMana >= UNLOCK_COST;
+              return (
+                <div key={id} className="p-2 rounded border border-gray-700 bg-gray-800/50 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">{def?.sym}</span>
+                    <span className="text-sm" style={{ color: def?.color }}>{def?.name}</span>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    disabled={!canUnlock}
+                    onClick={() => store.unlockElement(id)}
+                  >
+                    {UNLOCK_COST}
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
+  
+  // Render composite crafting
+  const renderCompositeCrafting = () => {
+    const compositeElements = Object.entries(ELEMENTS)
+      .filter(([, def]) => def.recipe)
+      .filter(([id]) => store.elements[id]?.unlocked);
+    
+    if (compositeElements.length === 0) return null;
+    
+    return (
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Composite Crafting</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            {compositeElements.map(([id, def]) => {
+              const recipe = def.recipe || [];
+              const canCraft = recipe.every(r => (store.elements[r]?.current || 0) >= 1);
+              const craftBonus = 1 + (store.skills.elemCrafting || 0) * 0.25;
+              const output = Math.floor(craftBonus);
+              
+              return (
+                <div key={id} className="p-2 rounded border border-gray-700 bg-gray-800/50 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">{def.sym}</span>
+                    <span className="text-sm" style={{ color: def.color }}>{def.name}</span>
+                    <span className="text-xs text-gray-500">
+                      ({recipe.map(r => ELEMENTS[r]?.sym).join(' + ')})
+                    </span>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    disabled={!canCraft}
+                    onClick={() => store.craftComposite(id)}
+                  >
+                    Craft ({output})
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
+  
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Elemental Mana Display */}
+      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Elemental Mana</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {renderElementsGrid()}
+        </CardContent>
+      </Card>
+      
+      {/* Element Conversion */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Element Conversion</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-gray-400 mb-3">
+            Convert raw mana to elemental mana (100:1 ratio)
+          </p>
+          
+          <div className="flex gap-2 flex-wrap">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => store.convertMana(convertTarget, 1)}
+              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT}
+            >
+              +1 ({MANA_PER_ELEMENT})
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => store.convertMana(convertTarget, 10)}
+              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT * 10}
+            >
+              +10 ({MANA_PER_ELEMENT * 10})
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => store.convertMana(convertTarget, 100)}
+              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT * 100}
+            >
+              +100 ({MANA_PER_ELEMENT * 100})
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+      
+      {/* Unlock Elements */}
+      {renderLockedElements()}
+      
+      {/* Composite Crafting */}
+      {renderCompositeCrafting()}
+    </div>
+  );
+}

src/components/game/tabs/SpellsTab.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ELEMENTS, SPELLS_DEF } from '@/lib/game/constants';
+import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
+import { calcDamage, canAffordSpellCost, fmt } from '@/lib/game/store';
+import { formatSpellCost, getSpellCostColor } from '@/lib/game/formatting';
+
+interface SpellsTabProps {
+  store: {
+    spells: Record<string, { learned: boolean; level: number; studyProgress: number }>;
+    equippedInstances: Record<string, string | null>;
+    equipmentInstances: Record<string, { instanceId: string; name: string; enchantments: { effectId: string; stacks: number }[] }>;
+    activeSpell: string;
+    rawMana: number;
+    elements: Record<string, { current: number; max: number; unlocked: boolean }>;
+    signedPacts: number[];
+    unlockedEffects: string[];
+    setSpell: (spellId: string) => void;
+  };
+}
+
+export function SpellsTab({ store }: SpellsTabProps) {
+  // Get spells from equipment
+  const equipmentSpellIds: string[] = [];
+  const spellSources: Record<string, string[]> = {};
+  
+  for (const instanceId of Object.values(store.equippedInstances)) {
+    if (!instanceId) continue;
+    const instance = store.equipmentInstances[instanceId];
+    if (!instance) continue;
+    
+    for (const ench of instance.enchantments) {
+      const effectDef = ENCHANTMENT_EFFECTS[ench.effectId];
+      if (effectDef?.effect.type === 'spell' && effectDef.effect.spellId) {
+        const spellId = effectDef.effect.spellId;
+        if (!equipmentSpellIds.includes(spellId)) {
+          equipmentSpellIds.push(spellId);
+        }
+        if (!spellSources[spellId]) {
+          spellSources[spellId] = [];
+        }
+        spellSources[spellId].push(instance.name);
+      }
+    }
+  }
+  
+  const canCastSpell = (spellId: string): boolean => {
+    const spell = SPELLS_DEF[spellId];
+    if (!spell) return false;
+    return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
+  };
+  
+  return (
+    <div className="space-y-6">
+      {/* Equipment-Granted Spells */}
+      <div className="mb-6">
+        <h3 className="text-lg font-semibold mb-3 text-cyan-400">✨ Known Spells</h3>
+        <p className="text-sm text-gray-400 mb-4">
+          Spells are obtained by enchanting equipment with spell effects. 
+          Visit the Crafting tab to design and apply enchantments.
+        </p>
+        
+        {equipmentSpellIds.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {equipmentSpellIds.map(id => {
+              const def = SPELLS_DEF[id];
+              if (!def) return null;
+              
+              const isActive = store.activeSpell === id;
+              const canCast = canCastSpell(id);
+              const elemDef = def.elem === 'raw' ? null : ELEMENTS[def.elem];
+              const sources = spellSources[id] || [];
+              
+              return (
+                <Card
+                  key={id}
+                  className={`bg-gray-900/80 border-cyan-600/50 ${canCast ? 'ring-1 ring-green-500/30' : ''}`}
+                >
+                  <CardHeader className="pb-2">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-sm" style={{ color: def.elem === 'raw' ? '#60A5FA' : elemDef?.color }}>
+                        {def.name}
+                      </CardTitle>
+                      <Badge className="bg-cyan-900/50 text-cyan-300 text-xs">Equipment</Badge>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-2">
+                    <div className="text-xs text-gray-400">
+                      {def.elem !== 'raw' && <span className="mr-2">{elemDef?.sym} {elemDef?.name}</span>}
+                      <span>⚔️ {def.dmg} dmg</span>
+                    </div>
+                    <div className="text-xs game-mono" style={{ color: getSpellCostColor(def.cost) }}>
+                      Cost: {formatSpellCost(def.cost)}
+                    </div>
+                    <div className="text-xs text-cyan-400/70">From: {sources.join(', ')}</div>
+                    <div className="flex gap-2">
+                      {isActive ? (
+                        <Badge className="bg-amber-900/50 text-amber-300">Active</Badge>
+                      ) : (
+                        <Button size="sm" variant="outline" onClick={() => store.setSpell(id)}>
+                          Set Active
+                        </Button>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center p-8 bg-gray-800/30 rounded border border-gray-700">
+            <div className="text-gray-500 mb-2">No spells known yet</div>
+            <div className="text-sm text-gray-600">Enchant a staff with a spell effect to gain spells</div>
+          </div>
+        )}
+      </div>
+      
+      {/* Pact Spells (from guardian defeats) */}
+      {store.signedPacts.length > 0 && (
+        <div className="mb-6">
+          <h3 className="text-lg font-semibold mb-3 text-amber-400">🏆 Pact Spells</h3>
+          <p className="text-sm text-gray-400 mb-3">Spells earned through guardian pacts appear here.</p>
+        </div>
+      )}
+      
+      {/* Spell Reference - show all available spells for enchanting */}
+      <div className="mb-6">
+        <h3 className="text-lg font-semibold mb-3 text-purple-400">📚 Spell Reference</h3>
+        <p className="text-sm text-gray-400 mb-4">
+          These spells can be applied to equipment through the enchanting system. 
+          Research enchantment effects in the Skills tab to unlock them for designing.
+        </p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {Object.entries(SPELLS_DEF).map(([id, def]) => {
+            const elemDef = def.elem === 'raw' ? null : ELEMENTS[def.elem];
+            const isUnlocked = store.unlockedEffects?.includes(`spell_${id}`);
+            
+            return (
+              <Card
+                key={id}
+                className={`bg-gray-900/80 border-gray-700 ${isUnlocked ? 'border-purple-500/50' : 'opacity-60'}`}
+              >
+                <CardHeader className="pb-2">
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-sm" style={{ color: def.elem === 'raw' ? '#60A5FA' : elemDef?.color }}>
+                      {def.name}
+                    </CardTitle>
+                    <div className="flex gap-1">
+                      {def.tier > 0 && <Badge variant="outline" className="text-xs">T{def.tier}</Badge>}
+                      {isUnlocked && <Badge className="bg-purple-900/50 text-purple-300 text-xs">Unlocked</Badge>}
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  <div className="text-xs text-gray-400">
+                    {def.elem !== 'raw' && <span className="mr-2">{elemDef?.sym} {elemDef?.name}</span>}
+                    <span>⚔️ {def.dmg} dmg</span>
+                  </div>
+                  <div className="text-xs game-mono" style={{ color: getSpellCostColor(def.cost) }}>
+                    Cost: {formatSpellCost(def.cost)}
+                  </div>
+                  {def.desc && (
+                    <div className="text-xs text-gray-500 italic">{def.desc}</div>
+                  )}
+                  {!isUnlocked && (
+                    <div className="text-xs text-amber-400/70">Research to unlock for enchanting</div>
+                  )}
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/game/tabs/SpireTab.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Swords, Sparkles, BookOpen } from 'lucide-react';
+import type { GameState, GameAction } from '@/lib/game/types';
+import { ELEMENTS, GUARDIANS, SPELLS_DEF, MAX_DAY, INCURSION_START_DAY } from '@/lib/game/constants';
+import { fmt, fmtDec, getFloorElement, calcDamage, canAffordSpellCost } from '@/lib/game/store';
+import { formatSpellCost, getSpellCostColor, formatStudyTime } from '@/lib/game/formatting';
+import type { ComputedEffects } from '@/lib/game/effects';
+
+interface SpireTabProps {
+  store: GameState & {
+    setAction: (action: GameAction) => void;
+    setSpell: (spellId: string) => void;
+    cancelStudy: () => void;
+    cancelParallelStudy: () => void;
+  };
+  upgradeEffects: ComputedEffects;
+  maxMana: number;
+  effectiveRegen: number;
+  incursionStrength: number;
+  dps: number;
+  studySpeedMult: number;
+  formatTime: (hour: number) => string;
+}
+
+export function SpireTab({
+  store,
+  upgradeEffects,
+  maxMana,
+  effectiveRegen,
+  incursionStrength,
+  dps,
+  studySpeedMult,
+  formatTime,
+}: SpireTabProps) {
+  const floorElem = getFloorElement(store.currentFloor);
+  const floorElemDef = ELEMENTS[floorElem];
+  const isGuardianFloor = !!GUARDIANS[store.currentFloor];
+  const currentGuardian = GUARDIANS[store.currentFloor];
+  const activeSpellDef = SPELLS_DEF[store.activeSpell];
+
+  const canCastSpell = (spellId: string): boolean => {
+    const spell = SPELLS_DEF[spellId];
+    if (!spell) return false;
+    return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
+  };
+
+  // Render study progress
+  const renderStudyProgress = () => {
+    if (!store.currentStudyTarget) return null;
+    
+    const target = store.currentStudyTarget;
+    const progressPct = Math.min(100, (target.progress / target.required) * 100);
+    const isSkill = target.type === 'skill';
+    const def = isSkill ? SPELLS_DEF[target.id] : SPELLS_DEF[target.id];
+    
+    return (
+      <div className="p-3 rounded border border-purple-600/50 bg-purple-900/20">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <BookOpen className="w-4 h-4 text-purple-400" />
+            <span className="text-sm font-semibold text-purple-300">
+              {def?.name}
+              {isSkill && ` Lv.${(store.skills[target.id] || 0) + 1}`}
+            </span>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 w-6 p-0 text-gray-400 hover:text-white"
+            onClick={() => store.cancelStudy()}
+          >
+            ✕
+          </Button>
+        </div>
+        <Progress value={progressPct} className="h-2 bg-gray-800" />
+        <div className="flex justify-between text-xs text-gray-400 mt-1">
+          <span>{formatStudyTime(target.progress)} / {formatStudyTime(target.required)}</span>
+          <span>{studySpeedMult.toFixed(1)}x speed</span>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <TooltipProvider>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* Current Floor Card */}
+        <Card className="bg-gray-900/80 border-gray-700">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-amber-400 game-panel-title text-xs">Current Floor</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-baseline gap-2">
+              <span className="text-4xl font-bold game-title" style={{ color: floorElemDef?.color }}>
+                {store.currentFloor}
+              </span>
+              <span className="text-gray-400 text-sm">/ 100</span>
+              <span className="ml-auto text-sm" style={{ color: floorElemDef?.color }}>
+                {floorElemDef?.sym} {floorElemDef?.name}
+              </span>
+              {isGuardianFloor && (
+                <Badge className="bg-red-900/50 text-red-300 border-red-600">GUARDIAN</Badge>
+              )}
+            </div>
+            
+            {isGuardianFloor && currentGuardian && (
+              <div className="text-sm font-semibold game-panel-title" style={{ color: floorElemDef?.color }}>
+                ⚔️ {currentGuardian.name}
+              </div>
+            )}
+            
+            {/* HP Bar */}
+            <div className="space-y-1">
+              <div className="h-3 bg-gray-800 rounded-full overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all duration-300"
+                  style={{
+                    width: `${Math.max(0, (store.floorHP / store.floorMaxHP) * 100)}%`,
+                    background: `linear-gradient(90deg, ${floorElemDef?.color}99, ${floorElemDef?.color})`,
+                    boxShadow: `0 0 10px ${floorElemDef?.glow}`,
+                  }}
+                />
+              </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' && canCastSpell(store.activeSpell) ? fmtDec(dps) : '—'}</span>
+              </div>
+            </div>
+            
+            <Separator className="bg-gray-700" />
+            
+            <div className="text-sm text-gray-400">
+              Best: Floor <strong className="text-gray-200">{store.maxFloorReached}</strong> • 
+              Pacts: <strong className="text-amber-400">{store.signedPacts.length}</strong>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Active Spell Card */}
+        <Card className="bg-gray-900/80 border-gray-700">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-amber-400 game-panel-title text-xs">Active Spell</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {activeSpellDef ? (
+              <>
+                <div className="text-lg font-semibold game-panel-title" style={{ color: activeSpellDef.elem === 'raw' ? '#60A5FA' : ELEMENTS[activeSpellDef.elem]?.color }}>
+                  {activeSpellDef.name}
+                  {activeSpellDef.tier === 0 && <Badge className="ml-2 bg-gray-600 text-gray-200">Basic</Badge>}
+                  {activeSpellDef.tier >= 4 && <Badge className="ml-2 bg-amber-600 text-amber-100">Legendary</Badge>}
+                </div>
+                <div className="text-sm text-gray-400 game-mono">
+                  ⚔️ {fmt(calcDamage(store, store.activeSpell))} dmg • 
+                  <span style={{ color: getSpellCostColor(activeSpellDef.cost) }}>
+                    {' '}{formatSpellCost(activeSpellDef.cost)}
+                  </span>
+                  {' '}• ⚡ {(activeSpellDef.castSpeed || 1).toFixed(1)} casts/hr
+                </div>
+                
+                {/* Cast progress bar when climbing */}
+                {store.currentAction === 'climb' && (
+                  <div className="space-y-1">
+                    <div className="flex justify-between text-xs text-gray-400">
+                      <span>Cast Progress</span>
+                      <span>{((store.castProgress || 0) * 100).toFixed(0)}%</span>
+                    </div>
+                    <Progress value={Math.min(100, (store.castProgress || 0) * 100)} className="h-2 bg-gray-800" />
+                  </div>
+                )}
+                
+                {activeSpellDef.desc && (
+                  <div className="text-xs text-gray-500 italic">{activeSpellDef.desc}</div>
+                )}
+              </>
+            ) : (
+              <div className="text-gray-500">No spell selected</div>
+            )}
+            
+            {/* Can cast indicator */}
+            {activeSpellDef && (
+              <div className={`text-xs ${canCastSpell(store.activeSpell) ? 'text-green-400' : 'text-red-400'}`}>
+                {canCastSpell(store.activeSpell) ? '✓ Can cast' : '✗ Insufficient mana'}
+              </div>
+            )}
+            
+            {incursionStrength > 0 && (
+              <div className="p-2 bg-red-900/20 border border-red-800/50 rounded">
+                <div className="text-xs text-red-400 game-panel-title mb-1">LABYRINTH INCURSION</div>
+                <div className="text-sm text-gray-300">
+                  -{Math.round(incursionStrength * 100)}% mana regen
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Current Study (if any) */}
+        {store.currentStudyTarget && (
+          <Card className="bg-gray-900/80 border-purple-600/50 lg:col-span-2">
+            <CardContent className="pt-4 space-y-3">
+              {renderStudyProgress()}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Spells Available */}
+        <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-amber-400 game-panel-title text-xs">Known Spells</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
+              {Object.entries(store.spells)
+                .filter(([, state]) => state.learned)
+                .map(([id, state]) => {
+                  const def = SPELLS_DEF[id];
+                  if (!def) return null;
+                  const elemDef = def.elem === 'raw' ? null : ELEMENTS[def.elem];
+                  const isActive = store.activeSpell === id;
+                  const canCast = canCastSpell(id);
+                  
+                  return (
+                    <Button
+                      key={id}
+                      variant="outline"
+                      className={`h-auto py-2 px-3 flex flex-col items-start ${isActive ? 'border-amber-500 bg-amber-900/20' : canCast ? 'border-gray-600 bg-gray-800/50 hover:bg-gray-700/50' : 'border-gray-700 bg-gray-800/30 opacity-60'}`}
+                      onClick={() => store.setSpell(id)}
+                    >
+                      <div className="text-sm font-semibold" style={{ color: def.elem === 'raw' ? '#60A5FA' : elemDef?.color }}>
+                        {def.name}
+                      </div>
+                      <div className="text-xs text-gray-400 game-mono">
+                        {fmt(calcDamage(store, id))} dmg
+                      </div>
+                      <div className="text-xs game-mono" style={{ color: getSpellCostColor(def.cost) }}>
+                        {formatSpellCost(def.cost)}
+                      </div>
+                    </Button>
+                  );
+                })}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Activity Log */}
+        <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ScrollArea className="h-32">
+              <div className="space-y-1">
+                {store.log.slice(0, 20).map((entry, i) => (
+                  <div
+                    key={i}
+                    className={`text-sm ${i === 0 ? 'text-gray-200' : 'text-gray-500'} italic`}
+                  >
+                    {entry}
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </CardContent>
+        </Card>
+      </div>
+    </TooltipProvider>
+  );
+}