Task10: Add activity log to SpireModeUI with event type styling

- Updated SpireModeUI Activity Log in page.tsx to use activityLog state instead of log
- Added ActivityLogEntry import from @/lib/game/types
- Applied event type styling for: damage_dealt, enemy_defeated, floor_cleared, floor_transition, special_effect
- Increased ScrollArea height from h-32 to h-48 for better visibility
- Changed from store.log.slice(0, 20) to store.activityLog.slice(0, 50)
- Added empty state message 'No activity yet...'
- Added proper key usage with entry.id instead of array index

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, lazy, Suspense } from 'react';
 import { useGameStore, useGameLoop, fmt, getFloorElement, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost } from '@/lib/game/store';
+import { ActivityLogEntry } from '@/lib/game/types';
 import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
 
 import { ELEMENTS, GUARDIANS, SPELLS_DEF, PRESTIGE_DEF, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
@@ -271,7 +272,9 @@ export default function ManaLoopGame() {
                       disabled={store.isDescending}
                     >
                       <ChevronDown className="w-4 h-4 mr-2" />
-                      {store.isDescending ? 'Descending...' : 'Begin Descent'}
+                      {store.isDescending ? 'Descending' : 
+                       store.climbDirection === 'up' ? 'Climbing' : 
+                       'Begin Descent'}
                     </Button>
                     {store.currentFloor === 1 ? (
                       <Button
@@ -299,16 +302,48 @@ export default function ManaLoopGame() {
                     <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) => (
+                        {(store.activityLog || []).slice(0, 50).map((entry: ActivityLogEntry, i) => {
-                          <div
+                          // Style based on event type
-                            key={i}
+                          const getEventStyle = (eventType: string) => {
-                            className={`text-sm ${i === 0 ? 'text-gray-200' : 'text-gray-500'} italic`}
+                            switch (eventType) {
-                          >
+                              case 'enemy_defeated':
-                            {entry}
+                              case 'floor_cleared':
-                          </div>
+                                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>