# Task 17: Fix Skill Requirement Display Bug (undefined Lv.[object Object])

## Summary

This bug causes skills to display "Requires: [Skill Name] Lv.[object Object]" instead of the proper level requirement. The root cause is that `cost` objects are incorrectly placed INSIDE the `req` (requirements) object in `skills.ts`, causing the rendering code to iterate over the cost object as if it were a skill requirement.

## Root Cause

In `/home/user/repos/Mana-Loop/src/lib/game/constants/skills.ts`, several skill entries have the `cost` property incorrectly nested inside the `req` object.

### Correct Format (cost OUTSIDE req):
```typescript
researchFireSpells: { 
  name: "Fire Spell Research", 
  desc: "...", 
  cat: "effectResearch", 
  max: 1, 
  base: 300, 
  studyTime: 6, 
  req: { enchanting: 2 }, 
  cost: { type: 'element', element: 'fire', amount: 100 }, 
  attunementReq: { enchanter: 1 } 
}
```

### Malformed Format (cost INSIDE req - BUG):
```typescript
researchLifeDeathSpells: { 
  name: "Death Research", 
  desc: "...", 
  cat: "effectResearch", 
  max: 1, 
  base: 400, 
  studyTime: 8, 
  req: { enchanting: 3 , cost: { type: 'element', element: 'death', amount: 100 }},  // BUG: cost inside req
  attunementReq: { enchanter: 2 } 
}
```

## Malformed Skill Entries

The following skills have `cost` incorrectly placed inside `req` (lines in skills.ts):

1. **researchLifeDeathSpells** (line 51)
2. **researchAdvancedFire** (line 54)
3. **researchAdvancedWater** (line 55)
4. **researchAdvancedAir** (line 56)
5. **researchAdvancedEarth** (line 57)
6. **researchAdvancedLight** (line 58)
7. **researchAdvancedDark** (line 59)
8. **researchMasterFire** (line 62)
9. **researchMasterWater** (line 63)
10. **researchMasterEarth** (line 64)
11. **researchMetalSpells** (line 86)
12. **researchSandSpells** (line 87)
13. **researchLightningSpells** (line 88)
14. **researchAdvancedMetal** (line 91)
15. **researchAdvancedSand** (line 92)
16. **researchAdvancedLightning** (line 93)
17. **researchMasterMetal** (line 96)
18. **researchMasterSand** (line 97)
19. **researchMasterLightning** (line 98)

Total: **19 malformed skill entries**

## How Skill Requirements are Rendered

In `/home/user/repos/Mana-Loop/src/components/game/tabs/SkillsTab.tsx` (lines 233-235):

```tsx
{!prereqMet && def.req && (
  <div className="text-xs text-red-400 mt-1">
    Requires: {Object.entries(def.req).map(([r, rl]) => `${SKILLS_DEF[r]?.name} Lv.${rl}`).join(', ')}
  </div>
)}
```

The code expects `def.req` to be `Record<string, number>` (skill ID -> required level). When `cost` is inside `req`, the iteration produces entries like:
- `[ "enchanting", 3 ]` → "Enchanting Lv.3" ✓
- `[ "cost", { type: 'element', ... } ]` → "undefined Lv.[object Object]" ✗

## The Fix

For each malformed entry in `skills.ts`, move the `cost` property OUT of the `req` object:

**Before:**
```typescript
req: { enchanting: 3 , cost: { type: 'element', element: 'death', amount: 100 }}
```

**After:**
```typescript
req: { enchanting: 3 }, cost: { type: 'element', element: 'death', amount: 100 }
```

## Files to Modify

1. `/home/user/repos/Mana-Loop/src/lib/game/constants/skills.ts` - Fix 19 malformed skill entries

## No Changes Needed In

- `/home/user/repos/Mana-Loop/src/components/game/tabs/SkillsTab.tsx` - Rendering code is correct
- `/home/user/repos/Mana-Loop/src/lib/game/formatting.ts` - Not related to this bug
- `/home/user/repos/Mana-Loop/src/lib/game/types/skills.ts` - Type definitions are correct

## Steps to Fix

1. Edit `/home/user/repos/Mana-Loop/src/lib/game/constants/skills.ts`
2. For each of the 19 malformed entries, move `cost` from inside `req` to be a separate property
3. Verify the fix by checking that `Object.entries(def.req)` only returns skill ID/level pairs
4. Run typecheck and lint to confirm no errors