fix: resolve runtime issues with game loop, tabs, and error handling

- Fix game loop store mismatch (page.tsx was using old store, gameHooks using new store)
- Fix StatsTab.tsx calling getStudySpeedMultiplier with wrong arguments
- Add ErrorBoundary to page.tsx for better error handling
- Fix import syntax issues in page.tsx
- Ensure build succeeds with fixes

src/app/page.tsx

@@ -2,10 +2,31 @@
 
 import { useEffect, useState, lazy, Suspense } from 'react';
 import type { JSX } from 'react';
-import { useGameStore, fmt, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost } from '@/lib/game/store';
-import { getUnifiedEffects } from '@/lib/game/effects';
+
+// Import from new modular stores
+import {
+  useGameStore,
+  useUIStore,
+  useManaStore,
+  useSkillStore,
+  useCombatStore,
+  usePrestigeStore,
+  fmt,
+  computeMaxMana,
+  computeRegen,
+  computeClickMana,
+  getMeditationBonus,
+  getIncursionStrength,
+} from '@/lib/game/stores';
 import { useGameLoop } from '@/lib/game/stores/gameHooks';
-import { ELEMENTS, GUARDIANS, SPELLS_DEF, PRESTIGE_DEF, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
+import { getUnifiedEffects } from '@/lib/game/effects';
+import {
+  getStudySpeedMultiplier,
+  getStudyCostMultiplier,
+  SPELLS_DEF,
+  ELEMENTS,
+  GUARDIANS,
+} from '@/lib/game/constants';
 import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
 import { TimeDisplay } from '@/components/game';
 import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
@@ -17,7 +38,7 @@ import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { RotateCcw, Mountain } from 'lucide-react';
 import { TooltipProvider } from '@/components/ui/tooltip';
-import { DebugName } from '@/lib/game/debug-context';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
 
 // Import extracted components
 import { GameOverScreen } from './components/GameOverScreen';
@@ -86,22 +107,72 @@ function GrimoireTab() {
 // ============================================================================
 
 export default function ManaLoopGame() {
+  // Disable prerendering - this is a client-only game
+  if (typeof window === 'undefined') {
+    return <div>Loading...</div>;
+  }
+  
   const [selectedManaType, setSelectedManaType] = useState<string>('');
   const [activeTab, setActiveTab] = useState('spire');
 
-  // Game store
-  const store: any = useGameStore();
+  // Game stores - using new modular stores
+  const day = useGameStore((s) => s.day);
+  const hour = useGameStore((s) => s.hour);
+  const initGame = useGameStore((s) => s.initGame);
+  
   const gameLoop = useGameLoop();
 
+  // Get state from modular stores for computed values
+  const skills = useSkillStore((s) => s.skills);
+  const skillTiers = useSkillStore((s) => s.skillTiers);
+  const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
+  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
+  const meditateTicks = useManaStore((s) => s.meditateTicks);
+  const rawMana = useManaStore((s) => s.rawMana);
+  const totalManaGathered = useManaStore((s) => s.totalManaGathered);
+  const elements = useManaStore((s) => s.elements);
+
+  const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
+  const signedPacts = useCombatStore((s) => s.signedPacts);
+  const spells = useCombatStore((s) => s.spells);
+
+  const loopCount = usePrestigeStore((s) => s.loopCount);
+  const insight = usePrestigeStore((s) => s.insight);
+  const totalInsight = usePrestigeStore((s) => s.totalInsight);
+  const memorySlots = usePrestigeStore((s) => s.memorySlots);
+
   // Computed effects from upgrades and equipment
-  const upgradeEffects = getUnifiedEffects(store);
+  const upgradeEffects = getUnifiedEffects({ 
+    skillUpgrades, 
+    skillTiers, 
+    equippedInstances: {}, 
+    equipmentInstances: {} 
+  });
 
   // Derived stats
-  const maxMana = computeMaxMana(store, upgradeEffects);
-  const baseRegen = computeRegen(store, upgradeEffects);
-  const clickMana = computeClickMana(store);
-  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, upgradeEffects.meditationEfficiency);
-  const incursionStrength = getIncursionStrength(store.day, store.hour);
+  const maxMana = computeMaxMana({ 
+    skills, 
+    prestigeUpgrades, 
+    skillUpgrades, 
+    skillTiers 
+  }, upgradeEffects);
+  
+  const baseRegen = computeRegen({ 
+    skills, 
+    prestigeUpgrades, 
+    skillUpgrades, 
+    skillTiers 
+  }, upgradeEffects);
+  
+  const clickMana = computeClickMana({ 
+    skills, 
+    prestigeUpgrades, 
+    skillUpgrades, 
+    skillTiers 
+  });
+    
+  const meditationMultiplier = getMeditationBonus(meditateTicks, skills, upgradeEffects.meditationEfficiency);
+  const incursionStrength = getIncursionStrength(day, hour);
 
   // Effective regen with incursion penalty
   const effectiveRegenWithSpecials = baseRegen * (1 - incursionStrength);
@@ -119,15 +190,17 @@ export default function ManaLoopGame() {
   // Effective regen
   const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;
 
-  // Get all active spells from equipment
-  const activeEquipmentSpells = getActiveEquipmentSpells(store.equippedInstances, store.equipmentInstances);
-
-  // Compute total DPS
-  const totalDPS = getTotalDPS(store, upgradeEffects as any);
+  // Game Over check from UI store
+  const gameOver = useUIStore((s) => s.gameOver);
+  
+  // Initialize game on mount
+  useEffect(() => {
+    initGame();
+  }, [initGame]);
 
   // Game Over Screen
-  if (store.gameOver) {
-    return <GameOverScreen store={store} />;
+  if (gameOver) {
+    return <GameOverScreen store={{ day, hour, insight }} />;
   }
 
   // Start game loop
@@ -137,119 +210,125 @@ export default function ManaLoopGame() {
   }, [gameLoop]);
 
   return (
-    <TooltipProvider>
-      <div className="game-root min-h-screen flex flex-col">
-        {/* Header */}
-        <header className="sticky top-0 z-50 bg-gradient-to-b from-gray-900 to-gray-900/80 border-b border-gray-700 px-4 py-2">
-          <div className="flex items-center justify-between">
-            <h1 className="text-xl font-bold game-title tracking-wider">MANA LOOP</h1>
-            <div className="flex items-center gap-4">
-              <TimeDisplay day={store.day} hour={store.hour} insight={store.insight} />
+    <ErrorBoundary>
+      <TooltipProvider>
+        <div className="game-root min-h-screen flex flex-col">
+          {/* Header */}
+          <header className="sticky top-0 z-50 bg-gradient-to-b from-gray-900 to-gray-900/80 border-b border-gray-700 px-4 py-2">
+            <div className="flex items-center justify-between">
+              <h1 className="text-xl font-bold game-title tracking-wider">MANA LOOP</h1>
+              <div className="flex items-center gap-4">
+                <TimeDisplay day={day} hour={hour} insight={insight} />
+              </div>
             </div>
-          </div>
-        </header>
+          </header>
 
-        {/* Main Content */}
-        <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
-          <LeftPanel store={store} effectiveRegen={effectiveRegen} incursionStrength={incursionStrength} />
+          {/* Main Content */}
+          <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
+            <LeftPanel 
+              store={{ rawMana, maxMana, day, hour }} 
+              effectiveRegen={effectiveRegen} 
+              incursionStrength={incursionStrength} 
+            />
 
-          <div className="flex-1 min-w-0">
-            <Tabs value={activeTab} onValueChange={setActiveTab}>
-              <TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
-                <TabsTrigger value="spire" className="text-xs px-2 py-1">⚔️ Spire</TabsTrigger>
-                <TabsTrigger value="attunements" className="text-xs px-2 py-1">✨ Attune</TabsTrigger>
-                <TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golems</TabsTrigger>
-                <TabsTrigger value="skills" className="text-xs px-2 py-1">📚 Skills</TabsTrigger>
-                <TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
-                <TabsTrigger value="equipment" className="text-xs px-2 py-1">🛡️ Gear</TabsTrigger>
-                <TabsTrigger value="crafting" className="text-xs px-2 py-1">🔧 Craft</TabsTrigger>
-                <TabsTrigger value="loot" className="text-xs px-2 py-1">💎 Loot</TabsTrigger>
-                <TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achieve</TabsTrigger>
-                <TabsTrigger value="lab" className="text-xs px-2 py-1">🔬 Lab</TabsTrigger>
-                <TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
-                <TabsTrigger value="debug" className="text-xs px-2 py-1">🐛 Debug</TabsTrigger>
-                <TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
-              </TabsList>
+            <div className="flex-1 min-w-0">
+              <Tabs value={activeTab} onValueChange={setActiveTab}>
+                <TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
+                  <TabsTrigger value="spire" className="text-xs px-2 py-1">⚔️ Spire</TabsTrigger>
+                  <TabsTrigger value="attunements" className="text-xs px-2 py-1">✨ Attune</TabsTrigger>
+                  <TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golems</TabsTrigger>
+                  <TabsTrigger value="skills" className="text-xs px-2 py-1">📚 Skills</TabsTrigger>
+                  <TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
+                  <TabsTrigger value="equipment" className="text-xs px-2 py-1">🛡️ Gear</TabsTrigger>
+                  <TabsTrigger value="crafting" className="text-xs px-2 py-1">🔧 Craft</TabsTrigger>
+                  <TabsTrigger value="loot" className="text-xs px-2 py-1">💎 Loot</TabsTrigger>
+                  <TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achieve</TabsTrigger>
+                  <TabsTrigger value="lab" className="text-xs px-2 py-1">🔬 Lab</TabsTrigger>
+                  <TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
+                  <TabsTrigger value="debug" className="text-xs px-2 py-1">🐛 Debug</TabsTrigger>
+                  <TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
+                </TabsList>
 
-              <TabsContent value="spire">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <SpireTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="spire">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <SpireTab store={{ day, hour, skills }} />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="attunements">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <AttunementsTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="attunements">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <AttunementsTab store={{}} />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="golemancy">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <GolemancyTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="golemancy">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <GolemancyTab store={{}} />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="skills">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <SkillsTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="skills">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <SkillsTab store={{ skills, skillUpgrades, skillTiers }} />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="spells">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <SpellsTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="spells">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <SpellsTab />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="equipment">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <EquipmentTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="equipment">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <EquipmentTab />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="crafting">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <CraftingTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="crafting">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <CraftingTab store={{}} />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="loot">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <LootTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="loot">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <LootTab store={{}} />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="achievements">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <AchievementsTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="achievements">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <AchievementsTab store={{}} />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="lab">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <LabTab store={store} />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="lab">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <LabTab store={{}} />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="stats">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <StatsTab />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="stats">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <StatsTab />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="debug">
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <DebugTab />
-                </Suspense>
-              </TabsContent>
+                <TabsContent value="debug">
+                  <Suspense fallback={<TabLoadingFallback />}>
+                    <DebugTab />
+                  </Suspense>
+                </TabsContent>
 
-              <TabsContent value="grimoire">
-                <GrimoireTab />
-              </TabsContent>
-            </Tabs>
-          </div>
-        </main>
-      </div>
-    </TooltipProvider>
+                <TabsContent value="grimoire">
+                  <GrimoireTab />
+                </TabsContent>
+              </Tabs>
+            </div>
+          </main>
+        </div>
+      </TooltipProvider>
+    </ErrorBoundary>
   );
 }

src/components/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Component, ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || (
+        <div className="p-4 bg-red-900/20 border border-red-600/50 rounded">
+          <h3 className="text-red-400 font-bold mb-2">Something went wrong:</h3>
+          <pre className="text-xs text-red-300">{this.state.error?.message}</pre>
+          <pre className="text-xs text-gray-500 mt-2">{this.state.error?.stack}</pre>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/game/tabs/StatsTab.tsx

@@ -95,8 +95,8 @@ export function StatsTab() {
   const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;
   
   // Get study speed/cost multipliers
-  const studySpeedMult = getStudySpeedMultiplier(skills, skillUpgrades, skillTiers);
-  const studyCostMult = getStudyCostMultiplier(skills, skillUpgrades, skillTiers);
+  const studySpeedMult = getStudySpeedMultiplier(skills);
+  const studyCostMult = getStudyCostMultiplier(skills);
   
   // Check special effects
   const hasManaWaterfall = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL);