Mana-Loop/docs/context-grimoire-tab-fix.md

Context: Grimoire/Spells Tab "cost.map" Error Fix

Problem Statement

The Grimoire/Spells tab fails to load with error: TypeError: e.cost.map is not a function

Error Analysis

This error indicates that e.cost is not an array (or is undefined) when .map() is called. Likely causes:

1. Spell cost is defined as a single value instead of an array
2. Missing or malformed spell definitions
3. Incorrect data structure in spells constants
4. Legacy store returning incorrect spell state

Key Files to Investigate/Modify

• src/components/game/tabs/SpellsTab.tsx - Spells tab component (likely "Grimoire" tab)
• src/lib/game/constants/spells.ts - Spell definitions
• src/lib/game/constants/spells-modules/ - Modular spell definitions
• src/lib/game/stores/skillStore.ts - Skill state (affects spell unlocking)
• src/lib/game/stores/combatStore.ts - Spell state

Architecture Rules (from AGENTS.md)

• Use modular stores: import from src/lib/game/stores/
• Spell definitions belong in src/lib/game/constants/spells.ts or spells-modules/
• All files must stay under 400 lines
• No legacy store references

Debugging Steps

1. Find where .map() is called on spell cost in SpellsTab.tsx
2. Check spell definition structure for cost field
3. Verify spell cost is always an array (even for single cost)
4. Check if cost is properly initialized for all spells
5. Ensure spells are correctly loaded from constants

Expected Outcome

• Spells tab loads without errors
• All spell costs are properly formatted as arrays
• Spell definitions are consistent and valid
• Regression test added to src/lib/game/stores/__tests__/index-tests/spell-cost.test.ts