refactor: extract components from SpireTab.tsx to reduce below 400 lines

src/components/game/tabs/ActivityLog.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { ActivityLogEntry } from '@/lib/game/types';
+
+interface ActivityLogProps {
+  activityLog?: ActivityLogEntry[];
+}
+
+export function ActivityLog({ activityLog }: ActivityLogProps) {
+  const entries = activityLog || [];
+
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-48">
+          <div className="space-y-1">
+            {entries.slice(0, 50).map((entry, i) => {
+              const isLatest = i === 0;
+              const color = getEventStyle(entry.eventType);
+              return (
+                <div
+                  key={entry.id}
+                  className={`text-xs ${isLatest ? 'text-gray-200 font-semibold' : color}`}
+                >
+                  {entry.message}
+                </div>
+              );
+            })}
+            {entries.length === 0 && (
+              <div className="text-xs text-gray-500 italic">No activity yet...</div>
+            )}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
+
+function getEventStyle(eventType: string): 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';
+  }
+}