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

src/app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState, lazy, Suspense } from 'react';
+import type { JSX } 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';
@@ -19,8 +20,6 @@ import { TooltipProvider } from '@/components/ui/tooltip';
 import { DebugName } from '@/lib/game/debug-context';
 // Non-tab component imports
 import { ActionButtons, CalendarDisplay, ManaDisplay, TimeDisplay } from '@/components/game';
-// Loot and Achievements moved to separate tabs
-
 // Lazy load tab components
 const SpireTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SpireTab })));
 const SkillsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SkillsTab })));
@@ -38,23 +37,391 @@ const CraftingTab = lazy(() => import('@/components/game/tabs').then(module => (
 // Loading fallback component
 const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;
 
-export default function ManaLoopGame() {
-  const [activeTab, setActiveTab] = useState('spire');
+// ============================================================================
+// Extracted Components
+// ============================================================================
+
+interface GameOverScreenProps {
+  store: any;
+}
+
+function GameOverScreen({ store }: GameOverScreenProps) {
+  return (
+    <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
+      <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
+        <CardHeader>
+          <CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
+            {store.victory ? 'VICTORY!' : 'LOOP ENDS'}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-center text-gray-400">
+            {store.victory
+              ? 'The Awakened One falls! Your power echoes through eternity.'
+              : 'The time loop resets... but you remember.'}
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-amber-400 game-mono">{fmt(store.loopInsight)}</div>
+              <div className="text-xs text-gray-400">Insight Gained</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-blue-400 game-mono">{store.maxFloorReached}</div>
+              <div className="text-xs text-gray-400">Best Floor</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
+              <div className="text-xs text-gray-400">Pacts Signed</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-green-400 game-mono">{store.loopCount + 1}</div>
+              <div className="text-xs text-gray-400">Total Loops</div>
+            </div>
+          </div>
+
+          <Button
+            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
+            size="lg"
+            onClick={() => store.startNewLoop()}
+          >
+            Begin New Loop
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+interface LeftPanelProps {
+  store: any;
+  effectiveRegen: number;
+  incursionStrength: number;
+}
+
+function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPanelProps) {
   const [isGathering, setIsGathering] = useState(false);
+
+  const handleGatherStart = () => {
+    setIsGathering(true);
+    store.gatherMana();
+  };
+
+  const handleGatherEnd = () => {
+    setIsGathering(false);
+  };
+
+  useEffect(() => {
+    if (!isGathering) return;
+
+    let lastGatherTime = 0;
+    const minGatherInterval = 100;
+    let animationFrameId: number;
+
+    const gatherLoop = (timestamp: number) => {
+      if (timestamp - lastGatherTime >= minGatherInterval) {
+        store.gatherMana();
+        lastGatherTime = timestamp;
+      }
+      animationFrameId = requestAnimationFrame(gatherLoop);
+    };
+
+    animationFrameId = requestAnimationFrame(gatherLoop);
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [isGathering, store]);
+
+  const maxMana = computeMaxMana(store, getUnifiedEffects(store));
+  const clickMana = computeClickMana(store);
+  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, getUnifiedEffects(store).meditationEfficiency);
+
+  return (
+    <div className="md:w-80 space-y-4 flex-shrink-0">
+      <DebugName name="ManaDisplay">
+        <ManaDisplay
+          rawMana={store.rawMana}
+          maxMana={maxMana}
+          effectiveRegen={effectiveRegen}
+          meditationMultiplier={meditationMultiplier}
+          clickMana={clickMana}
+          isGathering={isGathering}
+          onGatherStart={handleGatherStart}
+          onGatherEnd={handleGatherEnd}
+          elements={store.elements}
+        />
+      </DebugName>
+
+      {!store.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()}
+          >
+            <Mountain className="w-5 h-5 mr-2" />
+            Climb the Spire
+          </Button>
+        </DebugName>
+      )}
+
+      {!store.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}
+          />
+        </DebugName>
+      )}
+
+      <DebugName name="CalendarDisplay">
+        <CalendarDisplay
+          day={store.day}
+          hour={store.hour}
+          incursionStrength={incursionStrength}
+        />
+      </DebugName>
+    </div>
+  );
+}
+
+interface MainTabsProps {
+  store: any;
+  upgradeEffects: any;
+  maxMana: number;
+  baseRegen: number;
+  clickMana: number;
+  meditationMultiplier: number;
+  effectiveRegen: number;
+  incursionStrength: number;
+  manaCascadeBonus: number;
+  studySpeedMult: number;
+  studyCostMult: number;
+  manaWaterfallBonus: number;
+  hasManaWaterfall: boolean;
+  hasFlowSurge: boolean;
+  hasManaOverflow: boolean;
+  hasEternalFlow: boolean;
+}
+
+function MainTabs({
+  store,
+  upgradeEffects,
+  maxMana,
+  baseRegen,
+  clickMana,
+  meditationMultiplier,
+  effectiveRegen,
+  incursionStrength,
+  manaCascadeBonus,
+  studySpeedMult,
+  studyCostMult,
+  manaWaterfallBonus,
+  hasManaWaterfall,
+  hasFlowSurge,
+  hasManaOverflow,
+  hasEternalFlow,
+}: MainTabsProps) {
+  const [activeTab, setActiveTab] = useState('spire');
+
+  const renderGrimoireTab = (): JSX.Element => {
+    const grimoireSpells = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
+    const availablePages = Math.ceil(grimoireSpells.length / 12);
+
+    return (
+      <div className="space-y-4">
+        <div className="text-sm text-gray-400">
+          <p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
+          <p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
+        </div>
+
+        <ScrollArea className="h-[600px] rounded border border-gray-700 p-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {grimoireSpells.map((spell: any) => (
+              <div
+                key={spell.id}
+                className="p-4 bg-gray-800/50 rounded border border-gray-600 hover:border-gray-500 transition-colors"
+              >
+                <div className="flex items-start justify-between mb-2">
+                  <span className="font-bold text-gray-100">{spell.name}</span>
+                  <Badge variant="outline" className="border-gray-600">
+                    {spell.element}
+                  </Badge>
+                </div>
+                <p className="text-sm text-gray-400 mb-3">{spell.desc}</p>
+                <div className="text-xs text-gray-500 space-y-1">
+                  <div>Cost: {(spell.cost as any[]).map((c: any) => `${c.amount} ${c.type}`).join(', ')}</div>
+                  <div>Power: {spell.power}</div>
+                  {spell.effect && <div>Effect: {spell.effect}</div>}
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    );
+  };
+
+  return (
+    <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">
+          <DebugName name="SpireTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <SpireTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="attunements">
+          <DebugName name="AttunementsTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <AttunementsTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="golemancy">
+          <DebugName name="GolemancyTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <GolemancyTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="skills">
+          <DebugName name="SkillsTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <SkillsTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="spells">
+          <DebugName name="SpellsTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <SpellsTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="equipment">
+          <DebugName name="EquipmentTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <EquipmentTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="crafting">
+          <DebugName name="CraftingTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <CraftingTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="loot">
+          <DebugName name="LootTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <LootTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="achievements">
+          <DebugName name="AchievementsTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <AchievementsTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="lab">
+          <DebugName name="LabTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <LabTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="stats">
+          <DebugName name="StatsTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <StatsTab
+                store={store}
+                upgradeEffects={upgradeEffects}
+                maxMana={maxMana}
+                baseRegen={baseRegen}
+                clickMana={clickMana}
+                meditationMultiplier={meditationMultiplier}
+                effectiveRegen={effectiveRegen}
+                incursionStrength={incursionStrength}
+                manaCascadeBonus={manaCascadeBonus}
+                manaWaterfallBonus={manaWaterfallBonus}
+                hasManaWaterfall={hasManaWaterfall}
+                hasFlowSurge={hasFlowSurge}
+                hasManaOverflow={hasManaOverflow}
+                hasEternalFlow={hasEternalFlow}
+                studySpeedMult={studySpeedMult}
+                studyCostMult={studyCostMult}
+              />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="grimoire">
+          <DebugName name="GrimoireTab">
+            {renderGrimoireTab()}
+          </DebugName>
+        </TabsContent>
+
+        <TabsContent value="debug">
+          <DebugName name="DebugTab">
+            <Suspense fallback={<TabLoadingFallback />}>
+              <DebugTab store={store} />
+            </Suspense>
+          </DebugName>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+export default function ManaLoopGame() {
   const [selectedManaType, setSelectedManaType] = useState<string>('');
-  
+
   // Game store
-  const store = useGameStore();
+  const store: any = useGameStore();
   const gameLoop = useGameLoop();
-  
+
   // Computed effects from upgrades and equipment
   const upgradeEffects = getUnifiedEffects(store);
-  
+
   // Get unlocked elements for mana type selector
-  const unlockedElements = Object.entries(ELEMENTS)
+  Object.entries(ELEMENTS)
     .filter(([id]) => store.elements[id]?.unlocked)
     .map(([id, elem]) => ({ id, name: elem.name, sym: elem.sym, color: elem.color }));
-  
+
   // Derived stats
   const maxMana = computeMaxMana(store, upgradeEffects);
   const baseRegen = computeRegen(store, upgradeEffects);
@@ -67,59 +434,34 @@ export default function ManaLoopGame() {
   const incursionStrength = getIncursionStrength(store.day, store.hour);
   const studySpeedMult = getStudySpeedMultiplier(store.skills);
   const studyCostMult = getStudyCostMultiplier(store.skills);
-  
+
   // Effective regen with incursion penalty
   const effectiveRegenWithSpecials = baseRegen * (1 - incursionStrength);
-  
+
   // Mana Cascade bonus
-  const manaCascadeBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_CASCADE) 
-    ? Math.floor(maxMana / 100) * 0.1 
+  const manaCascadeBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_CASCADE)
+    ? Math.floor(maxMana / 100) * 0.1
     : 0;
-  
+
+  // Mana Waterfall bonus
+  const manaWaterfallBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL)
+    ? Math.floor(maxMana / 100) * 0.25
+    : 0;
+
+  // Special effects flags for mana features
+  const hasManaWaterfall = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL);
+  const hasFlowSurge = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.FLOW_SURGE);
+  const hasManaOverflow = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_OVERFLOW);
+  const hasEternalFlow = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.ETERNAL_FLOW);
+
   // Effective regen
-  const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus) * meditationMultiplier;
-  
+  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, floorElem);
-  
-  // Auto-gather while holding
-  useEffect(() => {
-    if (!isGathering) return;
-    
-    let lastGatherTime = 0;
-    const minGatherInterval = 100;
-    let animationFrameId: number;
-    
-    const gatherLoop = (timestamp: number) => {
-      if (timestamp - lastGatherTime >= minGatherInterval) {
-        store.gatherMana();
-        lastGatherTime = timestamp;
-      }
-      animationFrameId = requestAnimationFrame(gatherLoop);
-    };
-    
-    animationFrameId = requestAnimationFrame(gatherLoop);
-    return () => cancelAnimationFrame(animationFrameId);
-  }, [isGathering, store]);
-  
-  // Handle gather button events
-  const handleGatherStart = () => {
-    setIsGathering(true);
-    store.gatherMana();
-  };
-  
-  const handleGatherEnd = () => {
-    setIsGathering(false);
-  };
-  
-  // Start game loop
-  useEffect(() => {
-    const cleanup = gameLoop.start();
-    return cleanup;
-  }, [gameLoop]);
+  const totalDPS = getTotalDPS(store, upgradeEffects as any, floorElem);
 
   // Check if spell can be cast
   const canCastSpell = (spellId: string): boolean => {
@@ -130,53 +472,15 @@ export default function ManaLoopGame() {
 
   // Game Over Screen
   if (store.gameOver) {
-    return (
-      <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
-        <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
-          <CardHeader>
-            <CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
-              {store.victory ? 'VICTORY!' : 'LOOP ENDS'}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <p className="text-center text-gray-400">
-              {store.victory
-                ? 'The Awakened One falls! Your power echoes through eternity.'
-                : 'The time loop resets... but you remember.'}
-            </p>
-            
-            <div className="grid grid-cols-2 gap-3">
-              <div className="p-3 bg-gray-800 rounded">
-                <div className="text-xl font-bold text-amber-400 game-mono">{fmt(store.loopInsight)}</div>
-                <div className="text-xs text-gray-400">Insight Gained</div>
-              </div>
-              <div className="p-3 bg-gray-800 rounded">
-                <div className="text-xl font-bold text-blue-400 game-mono">{store.maxFloorReached}</div>
-                <div className="text-xs text-gray-400">Best Floor</div>
-              </div>
-              <div className="p-3 bg-gray-800 rounded">
-                <div className="text-xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
-                <div className="text-xs text-gray-400">Pacts Signed</div>
-              </div>
-              <div className="p-3 bg-gray-800 rounded">
-                <div className="text-xl font-bold text-green-400 game-mono">{store.loopCount + 1}</div>
-                <div className="text-xs text-gray-400">Total Loops</div>
-              </div>
-            </div>
-            
-            <Button
-              className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
-              size="lg"
-              onClick={() => store.startNewLoop()}
-            >
-              Begin New Loop
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    );
+    return <GameOverScreen store={store} />;
   }
 
+  // Start game loop
+  useEffect(() => {
+    const cleanup = gameLoop.start();
+    return cleanup;
+  }, [gameLoop]);
+
   return (
     <TooltipProvider>
       <div className="game-root min-h-screen flex flex-col">
@@ -184,79 +488,36 @@ export default function ManaLoopGame() {
         <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}
-              />
+              <TimeDisplay day={store.day} hour={store.hour} insight={store.insight} />
             </div>
           </div>
         </header>
 
         {/* Main Content */}
         <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
-          {/* Left Panel - Mana & Actions */}
-          <div className="md:w-80 space-y-4 flex-shrink-0">
-            {/* Mana Display */}
-            <DebugName name="ManaDisplay">
-              <ManaDisplay
-                rawMana={store.rawMana}
-                maxMana={maxMana}
-                effectiveRegen={effectiveRegen}
-                meditationMultiplier={meditationMultiplier}
-                clickMana={clickMana}
-                isGathering={isGathering}
-                onGatherStart={handleGatherStart}
-                onGatherEnd={handleGatherEnd}
-                elements={store.elements}
-              />
-            </DebugName>
+          <LeftPanel store={store} effectiveRegen={effectiveRegen} incursionStrength={incursionStrength} />
 
-            {/* Climb the Spire Button - only show when not in Spire Mode */}
-            {!store.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()}
-                >
-                  <Mountain className="w-5 h-5 mr-2" />
-                  Climb the Spire
-                </Button>
-              </DebugName>
-            )}
-
-            {/* Action Buttons - only show when not in Spire Mode */}
-            {!store.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}
-                />
-              </DebugName>
-            )}
-
-            {/* Calendar */}
-            <DebugName name="CalendarDisplay">
-              <CalendarDisplay
-                day={store.day}
-                hour={store.hour}
-                incursionStrength={incursionStrength}
-              />
-            </DebugName>
-
-            {/* Loot and Achievements moved to tabs */}
-          </div>
-
-          {/* Right Panel - Conditional rendering based on Spire Mode */}
-          {store.spireMode ? (
+          {!store.spireMode ? (
+            <MainTabs
+              store={store}
+              upgradeEffects={upgradeEffects}
+              maxMana={maxMana}
+              baseRegen={baseRegen}
+              clickMana={clickMana}
+              meditationMultiplier={meditationMultiplier}
+              effectiveRegen={effectiveRegen}
+              incursionStrength={incursionStrength}
+              manaCascadeBonus={manaCascadeBonus}
+              manaWaterfallBonus={manaWaterfallBonus}
+              hasManaWaterfall={hasManaWaterfall}
+              hasFlowSurge={hasFlowSurge}
+              hasManaOverflow={hasManaOverflow}
+              hasEternalFlow={hasEternalFlow}
+              studySpeedMult={studySpeedMult}
+              studyCostMult={studyCostMult}
+            />
+          ) : (
             /* Spire Mode - Simplified UI */
             <div className="flex-1 min-w-0 space-y-4">
               <DebugName name="SpireModeUI">
@@ -265,11 +526,8 @@ export default function ManaLoopGame() {
                     🏔️ Spire Mode - Floor {store.currentFloor}
                   </h2>
                   <div className="flex gap-2 items-center">
-                    {/* Show Climbing indicator when actively climbing */}
                     {store.currentAction === 'climb' && !store.isDescending && (
-                      <Badge className="bg-green-900/50 text-green-300 border-green-600">
-                        Climbing
-                      </Badge>
+                      <Badge className="bg-green-900/50 text-green-300 border-green-600">Climbing</Badge>
                     )}
                     <Button
                       variant="outline"
@@ -289,12 +547,11 @@ export default function ManaLoopGame() {
                     </Button>
                   </div>
                 </div>
-                
+
                 <Suspense fallback={<TabLoadingFallback />}>
                   <SpireTab store={store} simpleMode={true} />
                 </Suspense>
-                
-                {/* Activity Log for Spire Mode */}
+
                 <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>
@@ -303,7 +560,6 @@ export default function ManaLoopGame() {
                     <ScrollArea className="h-48">
                       <div className="space-y-1">
                         {(store.activityLog || []).slice(0, 50).map((entry: ActivityLogEntry, i) => {
-                          // Style based on event type
                           const getEventStyle = (eventType: string) => {
                             switch (eventType) {
                               case 'enemy_defeated':
@@ -329,7 +585,7 @@ export default function ManaLoopGame() {
                                 return 'text-gray-300';
                             }
                           };
-                          
+
                           return (
                             <div
                               key={entry.id}
@@ -348,145 +604,9 @@ export default function ManaLoopGame() {
                 </Card>
               </DebugName>
             </div>
-          ) : (
-            /* Normal Mode - Tabs */
-            <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">
-                  <DebugName name="SpireTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <SpireTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="attunements">
-                  <DebugName name="AttunementsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <AttunementsTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="golemancy">
-                  <DebugName name="GolemancyTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <GolemancyTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="skills">
-                  <DebugName name="SkillsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <SkillsTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="spells">
-                  <DebugName name="SpellsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <SpellsTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="equipment">
-                  <DebugName name="EquipmentTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <EquipmentTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="crafting">
-                  <DebugName name="CraftingTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <CraftingTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-                
-                <TabsContent value="loot">
-                  <DebugName name="LootTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <LootTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="achievements">
-                  <DebugName name="AchievementsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <AchievementsTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="lab">
-                  <DebugName name="LabTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <LabTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="stats">
-                  <DebugName name="StatsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <StatsTab
-                        store={store}
-                        upgradeEffects={upgradeEffects}
-                        maxMana={maxMana}
-                        baseRegen={baseRegen}
-                        clickMana={clickMana}
-                        meditationMultiplier={meditationMultiplier}
-                        effectiveRegen={effectiveRegen}
-                        incursionStrength={incursionStrength}
-                        manaCascadeBonus={manaCascadeBonus}
-                        studySpeedMult={studySpeedMult}
-                        studyCostMult={studyCostMult}
-                      />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="grimoire">
-                  <DebugName name="GrimoireTab">
-                    {renderGrimoireTab()}
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="debug">
-                  <DebugName name="DebugTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <DebugTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-              </Tabs>
-            </div>
           )}
         </main>
       </div>
     </TooltipProvider>
   );
-  
 }