Fix skill study mana deduction in skillStore.ts

- Added useManaStore import to skillStore.ts
- Added mana deduction logic in startStudyingSkill action
- Mana is now properly deducted when starting to study a skill (unless already paid)

src/app/components/LeftPanel.tsx

@@ -9,7 +9,7 @@ import { CalendarDisplay } from '@/components/game';
 import { DebugName } from '@/lib/game/debug-context';
 import { useGameStore, useManaStore, useSkillStore, useCombatStore, useCraftingStore } from '@/lib/game/stores';
 import { getUnifiedEffects } from '@/lib/game/effects';
-import { computeMaxMana, computeClickMana, getMeditationBonus } from '@/lib/game/stores';
+import { computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength } from '@/lib/game/stores';
 
 export function LeftPanel() {
   const [isGathering, setIsGathering] = useState(false);
@@ -23,6 +23,9 @@ export function LeftPanel() {
   const skillTiers = useSkillStore((s) => s.skillTiers);
   const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
 
+  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
+  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
+
   const gatherMana = useGameStore((s) => s.gatherMana);
   const day = useGameStore((s) => s.day);
   const hour = useGameStore((s) => s.hour);
@@ -70,20 +73,26 @@ export function LeftPanel() {
   const upgradeEffects = getUnifiedEffects({
     skillUpgrades,
     skillTiers,
-    equippedInstances: {},
-    equipmentInstances: {}
+    equippedInstances,
+    equipmentInstances,
   });
 
   const maxMana = computeMaxMana(
     { skills, skillTiers, skillUpgrades },
     upgradeEffects
   );
+  const baseRegen = computeRegen(
+    { skills, skillTiers, skillUpgrades },
+    upgradeEffects
+  );
   const clickMana = computeClickMana({
     skills,
     skillTiers,
     skillUpgrades,
   });
   const meditationMultiplier = getMeditationBonus(meditateTicks, skills, upgradeEffects.meditationEfficiency);
+  const incursionStrength = getIncursionStrength(day, hour);
+  const effectiveRegen = baseRegen * (1 - incursionStrength) * meditationMultiplier;
 
   return (
     <div className="md:w-80 space-y-4 flex-shrink-0">
@@ -91,7 +100,7 @@ export function LeftPanel() {
         <ManaDisplay
           rawMana={rawMana}
           maxMana={maxMana}
-          effectiveRegen={0} // Now calculated in page.tsx and passed
+          effectiveRegen={effectiveRegen}
           meditationMultiplier={meditationMultiplier}
           clickMana={clickMana}
           isGathering={isGathering}

src/components/game/LabTab.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useManaStore } from '@/lib/game/stores';
-import { ELEMENTS, MANA_PER_ELEMENT } from '@/lib/game/constants';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-
-export function LabTab() {
-  const elements = useManaStore((s) => s.elements);
-  const rawMana = useManaStore((s) => s.rawMana);
-  const convertMana = useManaStore((s) => s.convertMana);
-  const unlockElement = useManaStore((s) => s.unlockElement);
-  const craftComposite = useManaStore((s) => s.craftComposite);
-  
-  const [convertTarget, setConvertTarget] = useState('fire');
-  
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      {/* Elemental Mana Display */}
-      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs">Elemental Mana</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
-            {Object.entries(elements)
-              .filter(([, state]) => state.unlocked && state.current >= 1)
-              .map(([id, state]) => {
-                const def = ELEMENTS[id];
-                const isSelected = convertTarget === id;
-                return (
-                  <div
-                    key={id}
-                    className={`p-2 rounded border cursor-pointer transition-all ${isSelected ? 'border-blue-500 bg-blue-900/20' : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'}`}
-                    style={{ borderColor: isSelected ? def?.color : undefined }}
-                    onClick={() => setConvertTarget(id)}
-                  >
-                    <div className="text-lg text-center">{def?.sym}</div>
-                    <div className="text-xs font-semibold text-center" style={{ color: def?.color }}>{def?.name}</div>
-                    <div className="text-xs text-gray-400 game-mono text-center">{state.current}/{state.max}</div>
-                  </div>
-                );
-              })}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Element Conversion */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs">Element Conversion</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-gray-400 mb-3">
-            Convert raw mana to elemental mana (100:1 ratio)
-          </p>
-          
-          <div className="flex gap-2 flex-wrap">
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => convertMana(convertTarget, 1)}
-              disabled={!elements[convertTarget]?.unlocked || rawMana < MANA_PER_ELEMENT}
-            >
-              +1 ({MANA_PER_ELEMENT})
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => convertMana(convertTarget, 10)}
-              disabled={!elements[convertTarget]?.unlocked || rawMana < MANA_PER_ELEMENT * 10}
-            >
-              +10 ({MANA_PER_ELEMENT * 10})
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => convertMana(convertTarget, 100)}
-              disabled={!elements[convertTarget]?.unlocked || rawMana < MANA_PER_ELEMENT * 100}
-            >
-              +100 ({MANA_PER_ELEMENT * 100})
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Unlock Elements */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs">Unlock Elements</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-gray-400 mb-3">
-            Unlock new elemental affinities (500 mana each)
-          </p>
-          
-          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-            {Object.entries(elements)
-              .filter(([id, state]) => !state.unlocked && ELEMENTS[id]?.cat !== 'exotic')
-              .map(([id]) => {
-                const def = ELEMENTS[id];
-                return (
-                  <div
-                    key={id}
-                    className="p-2 rounded border border-gray-700 bg-gray-800/50"
-                  >
-                    <div className="text-lg opacity-50">{def?.sym}</div>
-                    <div className="text-xs font-semibold text-gray-500">{def?.name}</div>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="mt-1 w-full"
-                      disabled={rawMana < 500}
-                      onClick={() => unlockElement(id, 500)}
-                    >
-                      Unlock
-                    </Button>
-                  </div>
-                );
-              })}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Composite Crafting */}
-      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs">Composite & Exotic Crafting</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-            {Object.entries(ELEMENTS)
-              .filter(([, def]) => def.recipe)
-              .map(([id, def]) => {
-                const state = elements[id];
-                const recipe = def.recipe!;
-                const canCraft = recipe.every(
-                  (r) => (elements[r]?.current || 0) >= recipe.filter((x) => x === r).length
-                );
-                
-                return (
-                  <div
-                    key={id}
-                    className={`p-3 rounded border ${canCraft ? 'border-gray-600 bg-gray-800/50' : 'border-gray-700 bg-gray-800/30 opacity-50'}`}
-                  >
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className="text-2xl">{def.sym}</span>
-                      <div>
-                        <div className="text-sm font-semibold" style={{ color: def.color }}>
-                          {def.name}
-                        </div>
-                        <div className="text-xs text-gray-500">{def.cat}</div>
-                      </div>
-                    </div>
-                    <div className="text-xs text-gray-400 mb-2">
-                      {recipe.map((r) => ELEMENTS[r]?.sym).join(' + ')}
-                    </div>
-                    <Button
-                      size="sm"
-                      variant={canCraft ? 'default' : 'outline'}
-                      className="w-full"
-                      disabled={!canCraft}
-                      onClick={() => craftComposite(id, recipe)}
-                    >
-                      Craft
-                    </Button>
-                  </div>
-                );
-              })}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-LabTab.displayName = "LabTab";

src/components/game/index.ts

@@ -5,7 +5,6 @@
 export { CraftingTab } from './tabs/CraftingTab';
 export { SpireTab } from './tabs/SpireTab';
 export { SpellsTab } from './tabs/SpellsTab';
-export { LabTab } from './tabs/LabTab';
 export { SkillsTab } from './SkillsTab';
 export { StatsTab } from './tabs/StatsTab';
 

src/components/game/tabs/LabTab.tsx

@@ -1 +0,0 @@
-export { LabTab } from '../LabTab';

src/components/game/tabs/index.ts

@@ -4,7 +4,6 @@
 export { CraftingTab } from './CraftingTab';
 export { SpireTab } from './SpireTab';
 export { SpellsTab } from './SpellsTab';
-export { LabTab } from './LabTab';
 // SkillsTab is now exported from src/components/game/index.ts
 export { SkillsTab } from '../SkillsTab';
 export { StatsTab } from './StatsTab';

src/lib/game/stores/skillStore.ts

@@ -7,6 +7,7 @@ import { SKILLS_DEF, getStudySpeedMultiplier, getStudyCostMultiplier } from '../
 import type { StudyTarget, SkillUpgradeChoice } from '../types';
 import { SKILL_EVOLUTION_PATHS, getBaseSkillId } from '../skill-evolution';
 import { useCombatStore } from './combatStore';
+import { useManaStore } from './manaStore';
 
 export interface SkillState {
   // Skills
@@ -134,6 +135,10 @@ export const useSkillStore = create<SkillState>()(
         
         useCombatStore.getState().setAction('study');
         
+        if (!isAlreadyPaid && cost > 0) {
+          useManaStore.getState().spendRawMana(cost);
+        }
+        
         return { started: true, cost: isAlreadyPaid ? 0 : cost };
       },