# Refactor Plan: page.tsx

## Current State
- **File:** `src/app/page.tsx`
- **Lines:** 650
- **Target:** ≤400 lines (reduce by ~250 lines)

## Proposed File Structure

### 1. `src/components/game/tabs/PrestigeTab.tsx` (NEW, ≈60 lines)
**Contains:**
- `PrestigeTab` component (extracted from `renderGrimoireTab`)
- Grimoire/Prestige tab UI

**Rationale:** Self-contained tab component; only depends on store, PRESTIGE_DEF, GUARDIANS.

### 2. `src/app/page.tsx` (≈300 lines)
**Keeps:**
- Main `ManaLoopGame` component shell
- Tabs definition and lazy loading
- Core game loop integration
- Most tab content (other tabs remain via lazy loading)

**Rationale:** Reduces main page by extracting only the Grimoire tab which is standalone.

## Circular Import Risks

**LOW RISK:**
- `PrestigeTab` depends on store, PRESTIGE_DEF, GUARDIANS - all stable dependencies.
- No circular dependency with `page.tsx`.

**MITIGATION:**
- Import store and constants normally in new component.

## Extraction Order

**1 → 2**

1. Create `PrestigeTab.tsx`, move `renderGrimoireTab` content, adapt to be standalone (receive store via hook internally), export component.
2. Update `page.tsx`: replace `renderGrimoireTab` call with `<PrestigeTab />`, remove extracted code.
3. Verify typecheck, verify ≤400 lines.

## Notes

This addresses the main line bloat by only ~60 lines (renderGrimoireTab). To get page.tsx under 400 lines fully would require more extensive splitting (extracting each tab into separate route files, extracting sidebar, etc.). The plan here is conservative - if page.tsx is still >400 after extracting PrestigeTab, we can consider:
- Extracting StatsTab/LabTab content further
- Extracting activity log rendering
- Extracting action buttons
But per phase instructions we must get ALL THREE target files under 400 lines, so we must be more aggressive if needed.