Mana-Loop/STATS_TAB_INVESTIGATION_REPORT.md

StatsTab Loading Bug Investigation Report

Critical Issue Found

Main Problem: The StatsTab.tsx component has incorrect import paths that prevent it from loading. All section imports use the pattern ./StatsTab/... instead of ./ which causes TypeScript compilation failures.

Root Cause Analysis

1. Incorrect Import Paths: In StatsTab.tsx, sections are imported with incorrect relative paths:

   // BROKEN: All these imports are wrong
   import { ManaStatsSection } from './StatsTab/ManaStatsSection';
   import { CombatStatsSection } from './StatsTab/CombatStatsSection';
   import { PactStatusSection } from './StatsTab/PactStatusSection';
   import { StudyStatsSection } from './StatsTab/StudyStatsSection';
   import { ElementStatsSection } from './StatsTab/ElementStatsSection';
   import { LoopStatsSection } from './StatsTab/LoopStatsSection';
   
   // CORRECT (pattern used by other tabs):
   // import { ComponentName } from './ComponentName';
   

2. Missing Test Files: No test files exist for StatsTab, unlike other tabs which have comprehensive test coverage.

3. TypeScript Compilation Status: The codebase has significant other TypeScript errors, but StatsTab itself would fail to compile due to the import resolution errors.

File Structure Analysis

src/components/game/tabs/
├── StatsTab/                           ← Directory contains section files
│   ├── CombatStatsSection.tsx
│   ├── ElementStatsSection.tsx
│   ├── LoopStatsSection.tsx
│   ├── ManaStatsSection.tsx
│   ├── PactStatusSection.tsx
│   └── StudyStatsSection.tsx
└── StatsTab.tsx                        ← Main component file expecting nested 'StatsTab/' paths

Impact

• StatsTab does not load due to import resolution errors
• Application fails to compile for StatsTab modules
• No way to access character stats information

Comparison with Other Tabs

All other tabs follow the correct pattern:

EquipmentTab.tsx (lines 7-9):

import { EquipmentSlotGrid } from './EquipmentTab/EquipmentSlotGrid';
import { InventoryList } from './EquipmentTab/InventoryList';
import { EquipmentEffectsSummary } from './EquipmentTab/EquipmentEffectsSummary';

Note: EquipmentTab uses ./EquipmentTab/... pattern while StatsTab incorrectly uses ./StatsTab/... pattern relative to StatsTab.tsx.

Recommended Fix

Change all import paths in StatsTab.tsx from:

import { SectionName } from './StatsTab/SectionName';

To:

import { SectionName } from './SectionName';

This will make all section files resolve correctly since they're located directly in the StatsTab/ directory.

Files Read

• ✅ StatsTab.tsx (main component)
• ✅ ManaStatsSection.tsx
• ✅ CombatStatsSection.tsx
• ✅ ElementStatsSection.tsx
• ✅ LoopStatsSection.tsx
• ✅ PactStatusSection.tsx
• ✅ StudyStatsSection.tsx
• ✅ index.ts (showing StatsTab export)

Assessment

Clear Root Cause: The incorrect import paths prevent the component from loading. Fixing these import paths will resolve the issue.

Likely Guiding Factors:

1. File was moved or renamed after being created, causing import paths to become stale
2. Developer accidentally referenced the directory name in import paths
3. Copy-paste error when creating StatsTab from another tab template

The fix is straightforward: correct all six import statements to use the proper relative path.