# SkillsTab.tsx — Context File

**File:** `src/components/game/tabs/SkillsTab.tsx`  
**Total lines:** 400

---

## Top-level Exports

| Export | Line Range | Type | Description |
|--------|------------|------|-------------|
| `SkillsTabProps` | ~44–47 | `interface` | Props interface for the SkillsTab component, containing the `store` (GameStore). |
| `hasMilestoneUpgrade` | ~50–81 | `function` | Determines whether a skill has milestone upgrades (level 5/10) available given current level, tiers, and upgrades; returns milestone info or null. |
| `SkillsTab` | ~83–398 | `function` (component) | Main SkillsTab component that renders skill categories/cards, study progress, upgrade dialogs, and handles study/upgrade flows using the store. |

---

## Imports from other files in the repo (relative paths only)

- `@/lib/game/constants` — `SKILLS_DEF`, `SKILL_CATEGORIES`, `getStudySpeedMultiplier`, `getStudyCostMultiplier`
- `@/lib/game/skill-evolution` — `SKILL_EVOLUTION_PATHS`, `getUpgradesForSkillAtMilestone`, `getNextTierSkill`, `getTierMultiplier`
- `@/lib/game/effects` — `getUnifiedEffects`
- `@/lib/game/data/attunements` — `getAvailableSkillCategories`
- `@/lib/game/store` — `fmt`, `fmtDec`
- `@/lib/game/types` — `SkillUpgradeChoice`, `GameStore`
- `@/components/ui/button` — `Button`
- `@/components/ui/card` — `Card`, `CardContent`, `CardHeader`, `CardTitle`
- `@/components/ui/badge` — `Badge`
- `@/components/ui/tooltip` — `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`
- `./StudyProgress` — `StudyProgress`
- `./UpgradeDialog` — `UpgradeDialog`
- `@/components/game/ConfirmDialog` — `ConfirmDialog`
- `@/components/game/GameToast` — `useGameToast`
- `@/lib/game/constants` (re-export) — `ELEMENTS`
- `lucide-react` — `ChevronDown`, `ChevronRight`
- `./SkillRow` — `SkillRow`
- `@/lib/game/hooks/useSkillUpgradeSelection` — `useSkillUpgradeSelection`

Note: The file also references a `SPECIAL_EFFECTS` constant in JSX (used in `canParallelStudy` logic) but it is not imported in this file — it may be missing or available from a global/ambient source.

---

## Assessment — Safest exports to extract to a new file

**Best candidates for extraction** (low coupling, high reusability, minimal dependencies on store/ui):

1. **`hasMilestoneUpgrade`** (lines ~50–81)  
   - Pure-ish function that computes milestone eligibility from skill/tier/upgrade state.  
   - Depends only on `SKILL_EVOLUTION_PATHS`, `getUpgradesForSkillAtMilestone` and primitive arguments.  
   - No React or store coupling — safest to extract.

2. **`SkillsTabProps`** (interface)  
   - Type-only export; could be colocated with types or moved to a shared types file if desired.  
   - Zero runtime cost — safe but typically not worth extracting by itself unless consolidating interfaces.

**Less safe / more complex**:

- **`SkillsTab`** — deeply coupled to store, UI components, hooks, local dialog state, and many domain helpers. Extracting this would require pulling many dependencies and UI coordination; not recommended unless performing a major feature split.  
- If extraction goal is to reduce file size, consider extracting smaller helpers used *inside* the component into modules (e.g., category filtering, tier/cost calculation helpers) but those are currently inline.

**Recommendation:**  
Extract `hasMilestoneUpgrade` into a helper file (e.g., `src/lib/game/skill-milestones.ts` or similar) and move `SkillsTabProps` into a shared types file if consolidating. Leave `SkillsTab` in place.