Fix Spire Mode floor rendering and swarm floors (Tasks 5 & 6)

- Added enemy naming system with getEnemyName() function
- Updated EnemyState type to include name field
- Updated generateSwarmEnemies() and generateFloorState() to assign enemy names
- Fixed SpireTab.tsx (both versions) to display:
  - Floor type (Combat/Swarm/Speed/Guardian/Puzzle) with icons
  - Named enemies based on element and floor tier
  - Special floor properties (armor %, dodge chance)
  - Multiple enemies for swarm floors with individual HP bars
- Added ROOM_TYPE_LABELS to constants for display
- Verified floor type generation logic works correctly
- Build succeeds with npm run build

src/components/game/SpireTab.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useGameStore, canAffordSpellCost, fmt, fmtDec, calcDamage, getEnemyName } from '@/lib/game/store';
+import type { ActivityLogEntry } from '@/lib/game/types';
 import { ELEMENTS, GUARDIANS, SPELLS_DEF, ROOM_TYPE_LABELS } from '@/lib/game/constants';
 import { useManaStats, useCombatStats, useStudyStats } from '@/lib/game/hooks/useGameDerived';
 import { formatSpellCost, getSpellCostColor, formatStudyTime } from '@/lib/game/formatting';
@@ -384,35 +385,7 @@ export function SpireTab() {
         )}
 
         {/* Pact Signing Progress */}
-        {store.pactSigningProgress && (
-          <Card className="bg-gray-900/80 border-amber-600/50 lg:col-span-2">
-            <CardContent className="pt-4 space-y-3">
-              <div className="p-3 rounded border border-amber-500/30 bg-amber-900/20">
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <span className="text-2xl">📜</span>
-                    <div>
-                      <div className="text-sm font-semibold text-amber-300">
-                        Signing Pact: {GUARDIANS[store.pactSigningProgress.floor]?.name}
-                      </div>
-                      <div className="text-xs text-amber-400">
-                        Floor {store.pactSigningProgress.floor}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <Progress 
-                  value={Math.min(100, (store.pactSigningProgress.progress / store.pactSigningProgress.required) * 100)} 
-                  className="h-2 bg-gray-800" 
-                />
-                <div className="flex justify-between text-xs text-amber-400 mt-1">
-                  <span>{formatStudyTime(store.pactSigningProgress.progress)} / {formatStudyTime(store.pactSigningProgress.required)}</span>
-                  <span>Cost: {fmt(store.pactSigningProgress.manaCost)} mana</span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
+
 
         {/* Spells Available */}
         <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
@@ -459,16 +432,48 @@ export function SpireTab() {
             <CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
           </CardHeader>
           <CardContent>
-            <ScrollArea className="h-32">
+            <ScrollArea className="h-48">
               <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>
-                ))}
+                {(store.activityLog || []).slice(0, 50).map((entry: ActivityLogEntry, i) => {
+                  // Style based on event type
+                  const getEventStyle = (eventType: string) => {
+                    switch (eventType) {
+                      case 'enemy_defeated':
+                      case 'floor_cleared':
+                        return 'text-green-400';
+                      case 'damage_dealt':
+                        return 'text-red-400';
+                      case 'dodge':
+                        return 'text-yellow-400';
+                      case 'armor_proc':
+                        return 'text-blue-400';
+                      case 'special_effect':
+                        return 'text-purple-400';
+                      case 'floor_transition':
+                        return 'text-cyan-400';
+                      case 'spell_cast':
+                        return 'text-amber-400';
+                      case 'golem_attack':
+                        return 'text-orange-400';
+                      case 'puzzle_solved':
+                        return 'text-pink-400';
+                      default:
+                        return 'text-gray-300';
+                    }
+                  };
+                  
+                  return (
+                    <div
+                      key={entry.id}
+                      className={`text-xs ${i === 0 ? 'text-gray-200 font-semibold' : getEventStyle(entry.eventType)}`}
+                    >
+                      {entry.message}
+                    </div>
+                  );
+                })}
+                {(store.activityLog || []).length === 0 && (
+                  <div className="text-xs text-gray-500 italic">No activity yet...</div>
+                )}
               </div>
             </ScrollArea>
           </CardContent>

src/components/game/tabs/LabTab.tsx

@@ -17,7 +17,7 @@ export function LabTab({ store }: LabTabProps) {
   // Render elemental mana grid - only show elements with current > 0
   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)
+      {Object.entries(store.elements || {})
         .filter(([, state]) => state.unlocked && state.current > 0)
         .map(([id, state]) => {
           const def = ELEMENTS[id];
@@ -41,7 +41,7 @@ export function LabTab({ store }: LabTabProps) {
   const renderCompositeCrafting = () => {
     const compositeElements = Object.entries(ELEMENTS)
       .filter(([, def]) => def.recipe)
-      .filter(([id]) => store.elements[id]?.unlocked);
+      .filter(([id]) => (store.elements || {})[id]?.unlocked);
     
     if (compositeElements.length === 0) return null;
     
@@ -53,7 +53,7 @@ export function LabTab({ store }: LabTabProps) {
         <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 canCraft = recipe.every(r => ((store.elements || {})[r]?.current || 0) >= 1);
             const craftBonus = 1 + (store.skills.elemCrafting || 0) * 0.25;
             const output = Math.floor(craftBonus);
             
@@ -87,7 +87,7 @@ export function LabTab({ store }: LabTabProps) {
   };
   
   // Check if there are any unlocked elements with current > 0
-  const hasUnlockedElements = Object.values(store.elements).some(e => e.unlocked && e.current > 0);
+  const hasUnlockedElements = Object.values(store.elements || {}).some(e => e.unlocked && e.current > 0);
   
   if (!hasUnlockedElements) {
     return (

src/components/game/tabs/SpellsTab.tsx

@@ -32,7 +32,7 @@ export function SpellsTab({ store }: SpellsTabProps) {
     if (!instance) continue;
     
     for (const ench of instance.enchantments) {
-      const effectDef = ENCHANTMENT_EFFECTS[ench.effectId];
+      const effectDef = ENCHANTMENT_EFFECTS?.[ench.effectId];
       if (effectDef?.effect.type === 'spell' && effectDef.effect.spellId) {
         const spellId = effectDef.effect.spellId;
         if (!equipmentSpellIds.includes(spellId)) {
@@ -48,7 +48,7 @@ export function SpellsTab({ store }: SpellsTabProps) {
   
   const canCastSpell = (spellId: string): boolean => {
     const spell = SPELLS_DEF[spellId];
-    if (!spell) return false;
+    if (!spell || !spell.cost) return false;
     return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
   };