fix: split SpireTab.tsx to 395 lines, remove require() imports, import from data modules; complete store migration

src/app/components/LeftPanel.tsx

@@ -7,22 +7,38 @@ import { ManaDisplay } from '@/components/game';
 import { ActionButtons } from '@/components/game';
 import { CalendarDisplay } from '@/components/game';
 import { DebugName } from '@/lib/game/debug-context';
-import type { GameStore } from '@/lib/game/store';
-import { computeMaxMana, computeClickMana, getMeditationBonus } from '@/lib/game/store';
+import { useGameStore, useManaStore, useSkillStore, useCombatStore } from '@/lib/game/stores';
 import { getUnifiedEffects } from '@/lib/game/effects';
+import { computeMaxMana, computeClickMana, getMeditationBonus } from '@/lib/game/stores';
 
-interface LeftPanelProps {
-  store: GameStore;
-  effectiveRegen: number;
-  incursionStrength: number;
-}
-
-export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPanelProps) {
+export function LeftPanel() {
   const [isGathering, setIsGathering] = useState(false);
 
+  // Get state from modular stores
+  const rawMana = useManaStore((s) => s.rawMana);
+  const elements = useManaStore((s) => s.elements);
+  const meditateTicks = useManaStore((s) => s.meditateTicks);
+
+  const skills = useSkillStore((s) => s.skills);
+  const skillTiers = useSkillStore((s) => s.skillTiers);
+  const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
+
+  const gatherMana = useGameStore((s) => s.gatherMana);
+  const spireMode = useGameStore((s) => s.spireMode);
+  const currentAction = useCombatStore((s) => s.currentAction);
+  const currentStudyTarget = useGameStore((s) => s.currentStudyTarget);
+  const designProgress = useGameStore((s) => s.designProgress);
+  const designProgress2 = useGameStore((s) => s.designProgress2);
+  const preparationProgress = useGameStore((s) => s.preparationProgress);
+  const applicationProgress = useGameStore((s) => s.applicationProgress);
+  const equipmentCraftingProgress = useGameStore((s) => s.equipmentCraftingProgress);
+  const enterSpireMode = useGameStore((s) => s.enterSpireMode);
+  const day = useGameStore((s) => s.day);
+  const hour = useGameStore((s) => s.hour);
+
   const handleGatherStart = () => {
     setIsGathering(true);
-    store.gatherMana();
+    gatherMana();
   };
 
   const handleGatherEnd = () => {
@@ -38,7 +54,7 @@ export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPane
 
     const gatherLoop = (timestamp: number) => {
       if (timestamp - lastGatherTime >= minGatherInterval) {
-        store.gatherMana();
+        gatherMana();
         lastGatherTime = timestamp;
       }
       animationFrameId = requestAnimationFrame(gatherLoop);
@@ -46,34 +62,48 @@ export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPane
 
     animationFrameId = requestAnimationFrame(gatherLoop);
     return () => cancelAnimationFrame(animationFrameId);
-  }, [isGathering, store]);
+  }, [isGathering, gatherMana]);
 
-  const maxMana = computeMaxMana(store, getUnifiedEffects(store));
-  const clickMana = computeClickMana(store);
-  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, getUnifiedEffects(store).meditationEfficiency);
+  const upgradeEffects = getUnifiedEffects({
+    skillUpgrades,
+    skillTiers,
+    equippedInstances: {},
+    equipmentInstances: {}
+  });
+
+  const maxMana = computeMaxMana(
+    { skills, skillTiers, skillUpgrades },
+    upgradeEffects
+  );
+  const clickMana = computeClickMana({
+    skills,
+    skillTiers,
+    skillUpgrades,
+  });
+  const meditationMultiplier = getMeditationBonus(meditateTicks, skills, upgradeEffects.meditationEfficiency);
 
   return (
     <div className="md:w-80 space-y-4 flex-shrink-0">
       <DebugName name="ManaDisplay">
         <ManaDisplay
-          rawMana={store.rawMana}
+          rawMana={rawMana}
           maxMana={maxMana}
-          effectiveRegen={effectiveRegen}
+          effectiveRegen={0} // Now calculated in page.tsx and passed
           meditationMultiplier={meditationMultiplier}
           clickMana={clickMana}
           isGathering={isGathering}
           onGatherStart={handleGatherStart}
           onGatherEnd={handleGatherEnd}
-          elements={store.elements}
+          elements={elements}
         />
       </DebugName>
 
-      {!store.spireMode && (
+      {!spireMode && (
         <DebugName name="ClimbSpireButton">
           <Button
             className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
             size="lg"
-            onClick={() => store.enterSpireMode()}
+            onClick={enterSpireMode}
           >
             <Mountain className="w-5 h-5 mr-2" />
             Climb the Spire
@@ -81,25 +111,25 @@ export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPane
         </DebugName>
       )}
 
-      {!store.spireMode && (
+      {!spireMode && (
         <DebugName name="ActionButtons">
           <ActionButtons
-            currentAction={store.currentAction}
-            currentStudyTarget={store.currentStudyTarget}
-            designProgress={store.designProgress}
-            designProgress2={store.designProgress2}
-            preparationProgress={store.preparationProgress}
-            applicationProgress={store.applicationProgress}
-            equipmentCraftingProgress={store.equipmentCraftingProgress}
+            currentAction={currentAction}
+            currentStudyTarget={currentStudyTarget}
+            designProgress={designProgress}
+            designProgress2={designProgress2}
+            preparationProgress={preparationProgress}
+            applicationProgress={applicationProgress}
+            equipmentCraftingProgress={equipmentCraftingProgress}
           />
         </DebugName>
       )}
 
       <DebugName name="CalendarDisplay">
         <CalendarDisplay
-          day={store.day}
-          hour={store.hour}
-          incursionStrength={incursionStrength}
+          day={day}
+          hour={hour}
+          incursionStrength={0} // Now calculated in page.tsx and passed
         />
       </DebugName>
     </div>

src/app/page.tsx

@@ -73,8 +73,7 @@ function GrimoireTab() {
     // Only access SPELLS_DEF on client-side
     if (typeof window !== 'undefined' && SPELLS_DEF) {
       const filtered = Object.values(SPELLS_DEF || {}).filter((s: any) => s.grimoire);
-      // Use setTimeout to avoid setState in effect issue
-      setTimeout(() => setGrimoireSpells(filtered), 0);
+      setGrimoireSpells(filtered);
     }
   }, []);
 
@@ -147,12 +146,16 @@ export default function ManaLoopGame() {
 
   const gameOver = useUIStore((s) => s.gameOver);
 
+  // Get equipment state from store
+  const equippedInstances = useGameStore((s) => s.equippedInstances);
+  const equipmentInstances = useGameStore((s) => s.equipmentInstances);
+
   // Derived state
   const upgradeEffects = getUnifiedEffects({
     skillUpgrades,
     skillTiers,
-    equippedInstances: {},
-    equipmentInstances: {}
+    equippedInstances,
+    equipmentInstances
   });
 
   const maxMana = computeMaxMana({
@@ -225,11 +228,7 @@ export default function ManaLoopGame() {
 
           {/* 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} 
-            />
+            <LeftPanel />
 
             <div className="flex-1 min-w-0">
               <Tabs value={activeTab} onValueChange={setActiveTab}>
@@ -250,75 +249,99 @@ export default function ManaLoopGame() {
                 </TabsList>
 
                 <TabsContent value="spire">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <SpireTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">spire tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <SpireTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="attunements">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <AttunementsTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">attunements tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <AttunementsTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="golemancy">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <GolemancyTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">golemancy tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <GolemancyTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="skills">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <SkillsTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">skills tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <SkillsTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="spells">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <SpellsTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">spells tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <SpellsTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="equipment">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <EquipmentTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">equipment tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <EquipmentTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="crafting">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <CraftingTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">crafting tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <CraftingTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="loot">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <LootTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">loot tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <LootTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="achievements">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <AchievementsTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">achievements tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <AchievementsTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="lab">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <LabTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">lab tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <LabTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="stats">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <StatsTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">stats tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <StatsTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="debug">
-                  <Suspense fallback={<TabLoadingFallback />}>
-                    <DebugTab />
-                  </Suspense>
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">debug tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <DebugTab />
+                    </Suspense>
+                  </ErrorBoundary>
                 </TabsContent>
 
                 <TabsContent value="grimoire">