fix: apply DebugName wrappers to tab components (BUG 7 partial) and other updates

add_debugname.py

@@ -0,0 +1,139 @@
+#!/usr/bin/env python3
+import re
+import sys
+
+# List of tab files to modify (file path, component name)
+tabs = [
+    ('src/components/game/tabs/SpireTab.tsx', 'SpireTab'),
+    ('src/components/game/tabs/AttunementsTab.tsx', 'AttunementsTab'),
+    ('src/components/game/tabs/GolemancyTab.tsx', 'GolemancyTab'),
+    ('src/components/game/tabs/SpellsTab.tsx', 'SpellsTab'),
+    ('src/components/game/tabs/EquipmentTab.tsx', 'EquipmentTab'),
+    ('src/components/game/tabs/CraftingTab.tsx', 'CraftingTab'),
+    ('src/components/game/tabs/LootTab.tsx', 'LootTab'),
+    ('src/components/game/tabs/AchievementsTab.tsx', 'AchievementsTab'),
+    ('src/components/game/tabs/StatsTab.tsx', 'StatsTab'),
+    ('src/components/game/tabs/DebugTab.tsx', 'DebugTab'),
+    ('src/components/game/SkillsTab.tsx', 'SkillsTab'),
+]
+
+for file_path, component_name in tabs:
+    print(f"Processing {file_path}...")
+    
+    try:
+        with open(file_path, 'r') as f:
+            content = f.read()
+    except FileNotFoundError:
+        print(f"  - ERROR: File not found: {file_path}")
+        continue
+    
+    original_content = content
+    
+    # Check if DebugName is already imported
+    if 'from \'@/lib/game/debug-context\'' in content or 'from "@/lib/game/debug-context"' in content:
+        print(f"  - DebugName already imported in {file_path}")
+    else:
+        # Find the last import line and add the DebugName import after it
+        lines = content.split('\n')
+        last_import_idx = -1
+        for i, line in enumerate(lines):
+            if line.startswith('import ') or 'import {' in line:
+                last_import_idx = i
+        
+        if last_import_idx >= 0:
+            # Insert the import after the last import
+            lines.insert(last_import_idx + 1, "import { DebugName } from '@/lib/game/debug-context';")
+            content = '\n'.join(lines)
+            print(f"  - Added DebugName import to {file_path}")
+        else:
+            print(f"  - WARNING: No import found in {file_path}")
+            continue
+    
+    # Now find the main return statement and wrap its JSX with DebugName
+    # Pattern: return ( <jsx...> ) where the jsx starts with <
+    # We need to find: return ( followed by newline and then <
+    
+    # Find the pattern: return ( \n <tag
+    # Replace with: return ( \n <DebugName name="..."> \n <tag
+    
+    # First, let's find where the main return starts
+    # Look for "return (" that is followed by a newline and then some whitespace and then <
+    
+    # Simple approach: find the first occurrence of "return (" and then find the next "(" 
+    # Actually, let's find the pattern more carefully
+    
+    # We'll use a regex to find: return ( \s* \n \s* <
+    # And replace with: return ( \n <DebugName name="..."> \n <
+    
+    pattern1 = r'(return\s*\(\s*\n)(\s*)(<)'
+    
+    def replace_start(m):
+        indent = m.group(2)  # The indentation before the opening tag
+        return f'{m.group(1)}{indent}<DebugName name="{component_name}">\n{indent}{m.group(3)}'
+    
+    modified = re.sub(pattern1, replace_start, content, count=1)
+    
+    if modified == content:
+        print(f"  - WARNING: Could not find return pattern in {file_path}")
+        continue
+    
+    # Now find the closing of that return statement and add </DebugName>
+    # The return ends with: ); followed by } (end of function)
+    # We need to find the matching closing parenthesis and then add </DebugName> before it
+    
+    # Let's find the last </div> or similar closing tag before the displayName line
+    # Actually, a simpler approach: find the line with ");" that is followed by "}" 
+    # and then the displayName line
+    
+    # Let's find the displayName line and work backwards
+    display_name_pattern = re.escape(component_name) + r'\.displayName\s*=\s*"[^"]+"'
+    
+    # Find where the function ends - look for the displayName or end of file
+    lines = modified.split('\n')
+    
+    # Find the line with displayName
+    display_name_line = -1
+    for i, line in enumerate(lines):
+        if re.search(display_name_pattern, line):
+            display_name_line = i
+            break
+    
+    if display_name_line == -1:
+        print(f"  - WARNING: Could not find displayName for {component_name}")
+        continue
+    
+    # Now find the closing of the return statement - look backwards from displayName
+    # Find the line with "  );" which closes the return
+    close_paren_line = -1
+    for i in range(display_name_line - 1, -1, -1):
+        if ');' in lines[i] and i > 0:
+            close_paren_line = i
+            break
+    
+    if close_paren_line == -1:
+        print(f"  - WARNING: Could not find closing ); for return in {file_path}")
+        continue
+    
+    # Insert </DebugName> before the closing );
+    # We need to find the right place - it should be after the last </div> or similar
+    # Let's just insert it right before the );
+    
+    # Find the indentation of the );
+    close_indent = ''
+    for char in lines[close_paren_line]:
+        if char == ' ':
+            close_indent += ' '
+        else:
+            break
+    
+    # Insert the closing tag before the ); line
+    lines.insert(close_paren_line, f"{close_indent}</DebugName>")
+    modified = '\n'.join(lines)
+    
+    # Write back
+    with open(file_path, 'w') as f:
+        f.write(modified)
+    
+    print(f"  - Successfully wrapped {component_name} with DebugName")
+
+print("\nDone!")

fix_remaining.py

@@ -0,0 +1,134 @@
+#!/usr/bin/env python3
+import re
+
+def add_debugname_wrapper(file_path, component_name):
+    """Add DebugName import and wrap the main return with DebugName"""
+    print(f"Processing {file_path} for {component_name}...")
+    
+    with open(file_path, 'r') as f:
+        content = f.read()
+    
+    # Check if DebugName is already imported
+    if 'from \'@/lib/game/debug-context\'' in content or 'from "@/lib/game/debug-context"' in content:
+        print(f"  - DebugName already imported")
+    else:
+        # Find the last import line and add the DebugName import after it
+        lines = content.split('\n')
+        last_import_idx = -1
+        for i, line in enumerate(lines):
+            if line.startswith('import ') or 'import {' in line:
+                last_import_idx = i
+        
+        if last_import_idx >= 0:
+            lines.insert(last_import_idx + 1, "import { DebugName } from '@/lib/game/debug-context';")
+            content = '\n'.join(lines)
+            print(f"  - Added DebugName import")
+        else:
+            print(f"  - WARNING: No import found")
+            return False
+    
+    # Now find the main return statement and wrap it
+    # The return statement should be: return ( \n <something>
+    # We need to wrap the entire JSX returned
+    
+    # Find where the return statement starts
+    # Look for "return (" followed by newline
+    return_pattern = r'(return\s*\(\s*\n)'
+    match = re.search(return_pattern, content)
+    
+    if not match:
+        print(f"  - WARNING: Could not find return pattern")
+        return False
+    
+    # Find the matching closing parenthesis for the return
+    # We need to count parentheses to find the correct closing one
+    start_pos = match.end()
+    
+    # Insert <DebugName name="..."> after the return (
+    before_return = content[:match.end()]
+    after_return = content[match.end():]
+    
+    # Add opening DebugName tag with proper indentation
+    # Find the indentation of the first line after return
+    lines_after = after_return.split('\n')
+    first_line_indent = ''
+    for char in lines_after[0]:
+        if char == ' ':
+            first_line_indent += ' '
+        else:
+            break
+    
+    # Add the opening tag
+    opening_tag = f"{first_line_indent}<DebugName name=\"{component_name}\">\n"
+    modified = before_return + opening_tag + after_return
+    
+    # Now find the closing ); for the return statement and add </DebugName> before it
+    # We need to find the matching closing paren for return (
+    
+    # Let's find the position of the return (
+    return_start = modified.find('return (')
+    if return_start == -1:
+        print(f"  - WARNING: Could not find 'return ('")
+        return False
+    
+    # Find matching closing paren
+    paren_count = 0
+    in_string = False
+    string_char = None
+    i = return_start + len('return (')
+    
+    while i < len(modified):
+        char = modified[i]
+        
+        if in_string:
+            if char == string_char and modified[i-1] != '\\':
+                in_string = False
+            i += 1
+            continue
+        
+        if char == '"' or char == "'":
+            in_string = True
+            string_char = char
+        elif char == '(':
+            paren_count += 1
+        elif char == ')':
+            if paren_count == 0:
+                # This is the matching closing paren
+                # Check if followed by ;
+                if i + 1 < len(modified) and modified[i+1] == ';':
+                    # Insert </DebugName> before this )
+                    before_close = modified[:i]
+                    after_close = modified[i:]
+                    
+                    # Get indentation
+                    lines_before = before_close.split('\n')
+                    last_line = lines_before[-1]
+                    indent = ''
+                    for char in last_line:
+                        if char == ' ':
+                            indent += ' '
+                        else:
+                            break
+                    
+                    closing_tag = f"\n{indent}</DebugName>"
+                    modified = before_close + closing_tag + after_close
+                    print(f"  - Successfully wrapped {component_name} with DebugName")
+                    break
+                else:
+                    # Just a normal paren
+                    pass
+            else:
+                paren_count -= 1
+        i += 1
+    
+    # Write back
+    with open(file_path, 'w') as f:
+        f.write(modified)
+    
+    return True
+
+# Fix CraftingTab and EquipmentTab
+add_debugname_wrapper('src/components/game/tabs/CraftingTab.tsx', 'CraftingTab')
+add_debugname_wrapper('src/components/game/tabs/EquipmentTab.tsx', 'EquipmentTab')
+
+print("\nDone with tabs!")

fix_tabs.py

@@ -0,0 +1,104 @@
+#!/usr/bin/env python3
+import re
+
+def fix_tab_file(file_path, component_name):
+    """Add DebugName import and wrap the main return with DebugName"""
+    print(f"Processing {file_path} for {component_name}...")
+    
+    with open(file_path, 'r') as f:
+        content = f.read()
+    
+    # Check if DebugName is already imported
+    if "from '@/lib/game/debug-context'" in content:
+        print(f"  - DebugName already imported")
+    else:
+        # Find the last import line and add the DebugName import after it
+        lines = content.split('\n')
+        last_import_idx = -1
+        for i, line in enumerate(lines):
+            if line.startswith('import ') or line.strip().startswith('import {'):
+                last_import_idx = i
+        
+        if last_import_idx >= 0:
+            # Check if next line is also part of import
+            if i + 1 < len(lines) and (lines[i+1].strip().startswith('} from') or lines[i+1].strip() == '}'):
+                # Multi-line import, find the closing
+                for j in range(i+1, len(lines)):
+                    if '} from' in lines[j]:
+                        last_import_idx = j
+                        break
+        
+        if last_import_idx >= 0:
+            lines.insert(last_import_idx + 1, "import { DebugName } from '@/lib/game/debug-context';")
+            content = '\n'.join(lines)
+            print(f"  - Added DebugName import")
+        else:
+            print(f"  - WARNING: No import found")
+            return False
+    
+    # Now find the main return statement (not early returns)
+    # Look for "return (" followed by newline and then some JSX
+    pattern = r'(export function \w+\(\)\s*\{.*?return\s*\(\s*\n)(\s*)(<)'
+    
+    match = re.search(pattern, content, re.DOTALL)
+    if not match:
+        print(f"  - WARNING: Could not find main return pattern")
+        return False
+    
+    # Get the indentation
+    indent = match.group(2)
+    
+    # Add opening DebugName tag after the return (
+    before_return = content[:match.end(1)]
+    after_return = content[match.end(1):]
+    
+    # Add <DebugName name="..."> after the return (
+    modified = before_return + f'{indent}<DebugName name="{component_name}">\n{indent}{after_return[0]}'
+    
+    # Now find the closing ); for the main return
+    # Find "displayName" to locate the end of the component
+    display_pattern = re.escape(component_name) + r'\.displayName\s*=\s*[\'"].*?[\'"];\s*\n'
+    display_match = re.search(display_pattern, modified)
+    
+    if not display_match:
+        print(f"  - WARNING: Could not find displayName")
+        return False
+    
+    # Find the ); before displayName
+    before_display = modified[:display_match.start()]
+    after_display = modified[display_match.start():]
+    
+    # Find the last ); in before_display that's at the start of a line
+    lines_before = before_display.split('\n')
+    close_paren_line = -1
+    close_paren_indent = ''
+    
+    for i in range(len(lines_before) - 1, -1, -1):
+        line = lines_before[i]
+        if line.strip() == ');':
+            close_paren_line = i
+            close_paren_indent = line[:len(line) - len(line.lstrip())]
+            break
+    
+    if close_paren_line == -1:
+        print(f"  - WARNING: Could not find closing );\")  
+        return False
+    
+    # Insert </DebugName> before );
+    lines_before.insert(close_paren_line, f"{close_paren_indent}</DebugName>")
+    before_display_fixed = '\n'.join(lines_before)
+    
+    modified = before_display_fixed + after_display
+    
+    # Write back
+    with open(file_path, 'w') as f:
+        f.write(modified)
+    
+    print(f"  - Successfully wrapped {component_name} with DebugName")
+    return True
+
+# Fix the remaining files
+fix_tab_file('src/components/game/tabs/GolemancyTab.tsx', 'GolemancyTab')
+fix_tab_file('src/components/game/tabs/SpellsTab.tsx', 'SpellsTab')
+
+print("\nDone!")

fix_tabs2.py

@@ -0,0 +1,174 @@
+#!/usr/bin/env python3
+import re
+
+def fix_tab_file(file_path, component_name):
+    """Add DebugName import and wrap the main return with DebugName"""
+    print(f"Processing {file_path} for {component_name}...")
+    
+    with open(file_path, 'r') as f:
+        content = f.read()
+    
+    # Check if DebugName is already imported
+    if "from '@/lib/game/debug-context'" in content:
+        print(f"  - DebugName already imported")
+    else:
+        # Find the last import line and add the DebugName import after it
+        lines = content.split('\n')
+        last_import_idx = -1
+        for i, line in enumerate(lines):
+            stripped = line.strip()
+            if stripped.startswith('import ') or (stripped.startswith('{') and 'from' in stripped):
+                last_import_idx = i
+            elif stripped.startswith('} from') or stripped.endswith(';'):
+                # End of multi-line import
+                last_import_idx = i
+        
+        if last_import_idx >= 0:
+            lines.insert(last_import_idx + 1, "import { DebugName } from '@/lib/game/debug-context';")
+            content = '\n'.join(lines)
+            print(f"  - Added DebugName import")
+        else:
+            print(f"  - WARNING: No import found")
+            return False
+    
+    # Find the component function and its return statement
+    # Look for "export function ComponentName()" or "function ComponentName()"
+    func_pattern = r'(export\s+)?function\s+' + re.escape(component_name) + r'\([^)]*\)\s*\{'
+    func_match = re.search(func_pattern, content)
+    
+    if not func_match:
+        print(f"  - WARNING: Could not find function {component_name}")
+        return False
+    
+    # Find the return statement after the function start
+    func_start = func_match.end()
+    content_after_func = content[func_start:]
+    
+    # Find the main return (not inside an if/else)
+    # Look for "return (" at the start of a line (with possible whitespace)
+    return_pattern = r'(\n\s*)return\s*\(\s*\n'
+    return_match = re.search(return_pattern, content_after_func)
+    
+    if not return_match:
+        print(f"  - WARNING: Could not find return pattern")
+        return False
+    
+    # Get the indentation before return
+    indent = return_match.group(1)
+    
+    # Insert <DebugName name="..."> after the return (
+    # The return_match gives us the position relative to content_after_func
+    # We need to insert in the full content
+    insert_pos = func_start + return_match.end()
+    
+    # Back up to the newline before the JSX starts
+    # The return_match ends with \n, so the next line is the start of JSX
+    # We need to add <DebugName> before that JSX
+    
+    # Find the first non-empty line after return (
+    remaining = content[insert_pos:]
+    lines_after = remaining.split('\n')
+    first_line = None
+    for i, line in enumerate(lines_after):
+        if line.strip():
+            first_line = line
+            first_line_idx = i
+            break
+    
+    if first_line is None:
+        print(f"  - WARNING: Could not find JSX after return")
+        return False
+    
+    # Get the indentation of the first JSX line
+    jsx_indent = ''
+    for char in first_line:
+        if char == ' ':
+            jsx_indent += ' '
+        else:
+            break
+    
+    # Insert <DebugName> before the first JSX line
+    # We need to insert at: func_start + return_match.end() + position of first JSX line
+    
+    # Actually, let's just insert the DebugName tag right after return (
+    # and before the first <tag
+    debug_name_open = f"\n{jsx_indent}<DebugName name=\"{component_name}\">"
+    
+    # Find where to insert (after the newline following return ()
+    # The return_match ends with \n, so we insert at insert_pos
+    before_insert = content[:insert_pos]
+    after_insert = content[insert_pos:]
+    
+    # Add the opening DebugName tag
+    modified = before_insert + debug_name_open + '\n' + after_insert
+    
+    # Now find the closing ); for the return statement
+    # We need to find the matching ) for the return (
+    
+    # Find the position of the return ( in modified
+    return_pos = modified.find('return (', func_start)
+    if return_pos == -1:
+        print(f"  - WARNING: Could not find 'return ('")
+        return False
+    
+    # Find matching closing paren
+    paren_count = 0
+    in_string = False
+    string_char = None
+    i = return_pos + len('return (')
+    
+    while i < len(modified):
+        char = modified[i]
+        
+        if in_string:
+            if char == string_char and (i == 0 or modified[i-1] != '\\'):
+                in_string = False
+            i += 1
+            continue
+        
+        if char == '"' or char == "'":
+            in_string = True
+            string_char = char
+        elif char == '(':
+            paren_count += 1
+        elif char == ')':
+            if paren_count == 0:
+                # This is the matching closing paren
+                # Check if followed by ;
+                if i + 1 < len(modified) and modified[i+1] == ';':
+                    # Insert </DebugName> before this )
+                    before_close = modified[:i]
+                    after_close = modified[i:]
+                    
+                    # Get indentation
+                    lines_before = before_close.split('\n')
+                    last_line = lines_before[-1]
+                    close_indent = ''
+                    for char in last_line:
+                        if char == ' ':
+                            close_indent += ' '
+                        else:
+                            break
+                    
+                    closing_tag = f"\n{close_indent}</DebugName>"
+                    modified = before_close + closing_tag + after_close
+                    print(f"  - Successfully wrapped {component_name} with DebugName")
+                    break
+                else:
+                    # Just a normal paren
+                    pass
+            else:
+                paren_count -= 1
+        i += 1
+    
+    # Write back
+    with open(file_path, 'w') as f:
+        f.write(modified)
+    
+    return True
+
+# Fix the remaining files
+fix_tab_file('src/components/game/tabs/GolemancyTab.tsx', 'GolemancyTab')
+fix_tab_file('src/components/game/tabs/SpellsTab.tsx', 'SpellsTab')
+
+print("\nDone!")

src/app/page.tsx

@@ -40,6 +40,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { RotateCcw, Mountain } from 'lucide-react';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { DebugName } from '@/lib/game/debug-context';
 
 // Import extracted components
 import { GameOverScreen } from './components/GameOverScreen';
@@ -89,11 +90,12 @@ function GrimoireTab() {
   const availablePages = Math.ceil(grimoireSpells.length / 12);
 
   return (
-    <div className="space-y-4">
-      <div className="text-sm text-gray-400">
-        <p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
-        <p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
-      </div>
+    <DebugName name="GrimoireTab">
+      <div className="space-y-4">
+        <div className="text-sm text-gray-400">
+          <p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
+          <p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
+        </div>
 
       <ScrollArea className="h-[600px] rounded border border-gray-700 p-4">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -119,6 +121,7 @@ function GrimoireTab() {
         </div>
       </ScrollArea>
     </div>
+    </DebugName>
   );
 }
 

src/components/game/SkillsTab.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { SkillUpgradeDialog } from './SkillsTab/SkillUpgradeDialog';
 import { SkillStudyProgress } from './SkillsTab/SkillStudyProgress';
 import { SkillCategory } from './SkillsTab/SkillCategory';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function SkillsTab() {
   const currentStudyTarget = useSkillStore((s) => s.currentStudyTarget);
@@ -23,6 +24,7 @@ export function SkillsTab() {
   };
   
   return (
+    <DebugName name="SkillsTab">
     <div className="space-y-4">
       {/* Upgrade Selection Dialog */}
       <SkillUpgradeDialog 
@@ -48,6 +50,7 @@ export function SkillsTab() {
         />
       ))}
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/AchievementsTab.tsx

@@ -2,6 +2,7 @@
 
 import { AchievementsDisplay } from '@/components/game/AchievementsDisplay';
 import { useCombatStore, useManaStore, usePrestigeStore } from '@/lib/game/stores';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function AchievementsTab() {
   const achievements = useCombatStore((s) => s.achievements);
@@ -13,6 +14,7 @@ export function AchievementsTab() {
   const totalCraftsCompleted = useCombatStore((s) => s.totalCraftsCompleted);
 
   return (
+    <DebugName name="AchievementsTab">
     <div className="space-y-4">
       <AchievementsDisplay
         achievements={achievements}
@@ -26,6 +28,7 @@ export function AchievementsTab() {
         }}
       />
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/AttunementsTab.tsx

@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
 import { Lock, TrendingUp } from 'lucide-react';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function AttunementsTab() {
   const attunements = usePrestigeStore((s) => s.attunements) || {};
@@ -26,6 +27,7 @@ export function AttunementsTab() {
   const availableCategories = getAvailableSkillCategories(attunements);
 
   return (
+    <DebugName name="AttunementsTab">
     <div className="space-y-4">
       {/* Overview Card */}
       <Card className="bg-gray-900/80 border-gray-700">
@@ -261,6 +263,7 @@ export function AttunementsTab() {
         </CardContent>
       </Card>
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/CraftingTab.tsx

@@ -14,6 +14,7 @@ import {
   EquipmentCrafter,
 } from '@/components/game/crafting';
 import { useCombatStore, useCraftingStore } from '@/lib/game/stores';
+import { DebugName } from '@/lib/game/debug-context';
 import { useGameToast } from '@/components/game/GameToast';
 
 export function CraftingTab() {
@@ -52,6 +53,7 @@ export function CraftingTab() {
   };
 
   return (
+    <DebugName name="CraftingTab">
     <div className="space-y-4 max-w-full overflow-x-hidden">
       {/* Top Sub-Tabs: Fabricate / Enchant */}
       <GameCard variant="default" className="p-4">
@@ -252,6 +254,7 @@ export function CraftingTab() {
         </GameCard>
       )}
     </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/DebugTab.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { GameStateDebug } from '@/components/game/debug/GameStateDebug';
+import { DebugName } from '@/lib/game/debug-context';
 import { 
   SkillDebug, 
   AttunementDebug, 
@@ -11,6 +12,7 @@ import {
 
 export function DebugTab() {
   return (
+    <DebugName name="DebugTab">
     <div className="space-y-4">
       <GameStateDebug />
       
@@ -23,6 +25,7 @@ export function DebugTab() {
       <GolemDebug />
       <PactDebug />
     </div>
+    </DebugName>
   );
 }
 

src/components/game/tabs/EquipmentTab.tsx

@@ -23,6 +23,7 @@ import { EquipmentInventory } from './EquipmentInventory';
 import { EnchantmentsPanel } from './EnchantmentsPanel';
 import { useGameToast } from '@/components/game/GameToast';
 import { ConfirmDialog } from '@/components/game/ConfirmDialog';
+import { DebugName } from '@/lib/game/debug-context';
 import { equipItem, unequipItem, deleteEquipmentInstance } from '@/lib/game/crafting-actions';
 import { useCombatStore, useCraftingStore } from '@/lib/game/stores';
 
@@ -139,10 +140,12 @@ export function EquipmentTab() {
   // Guard against undefined during initialization - AFTER all hooks
   if (!equippedInstances || !equipmentInstances) {
     return (
+      <DebugName name="EquipmentTab">
       <div className="p-4 text-center text-[var(--text-muted)]">
         Loading equipment data...
       </div>
-    );
+    
+    </DebugName>);
   }
 
   // Equip an item to a slot
@@ -231,6 +234,7 @@ export function EquipmentTab() {
   const unifiedEffects = getUnifiedEffects({ equipmentInstances, equippedInstances });
 
   return (
+    <DebugName name="EquipmentTab">
     <div className="space-y-4 max-w-full overflow-x-hidden">
       {/* Equipment Slots */}
       <GameCard variant="default">
@@ -374,7 +378,8 @@ export function EquipmentTab() {
         onConfirm={confirmDelete}
       />
     </div>
-  );
+  
+</DebugName>);
 }
 
 EquipmentTab.displayName = 'EquipmentTab';

src/components/game/tabs/GolemancyTab.tsx

@@ -67,6 +67,8 @@ export function GolemancyTab() {
     if (!isUnlocked) {
       // Locked golem card
       return (
+
+        <DebugName name="GolemancyTab">
         <GameCard key={golemId} variant="sunken" className="opacity-60">
           <div className="pb-2">
             <h3 className="text-sm font-semibold flex items-center gap-2">
@@ -86,7 +88,8 @@ export function GolemancyTab() {
             )}
           </div>
         </GameCard>
-      );
+      
+      </DebugName>);
     }
 
     return (
@@ -315,3 +318,4 @@ export function GolemancyTab() {
 }
 
 GolemancyTab.displayName = "GolemancyTab";
+import { DebugName } from '@/lib/game/debug-context';

src/components/game/tabs/LootTab.tsx

@@ -2,6 +2,7 @@
 
 import { useCraftingStore, useManaStore } from '@/lib/game/stores';
 import { LootInventoryDisplay } from '@/components/game/LootInventory';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function LootTab() {
   const lootInventory = useCraftingStore((s) => s.lootInventory);
@@ -11,6 +12,7 @@ export function LootTab() {
   const deleteEquipmentInstance = useCraftingStore((s) => s.deleteEquipmentInstance);
 
   return (
+    <DebugName name="LootTab">
     <div className="space-y-4">
       <LootInventoryDisplay
         inventory={lootInventory}
@@ -20,6 +22,7 @@ export function LootTab() {
         onDeleteEquipment={deleteEquipmentInstance}
       />
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/SpellsTab.tsx

@@ -30,10 +30,13 @@ export function SpellsTab() {
   // Guard against undefined stores during initialization
   if (!equippedInstances || !equipmentInstances) {
     return (
+
+      <DebugName name="SpellsTab">
       <div className="p-4 text-center text-[var(--text-muted)]">
         Loading spell data...
       </div>
-    );
+    
+    </DebugName>);
   }
   
   for (const instanceId of Object.values(equippedInstances || {})) {
@@ -238,3 +241,4 @@ export function SpellsTab() {
 }
 
 SpellsTab.displayName = "SpellsTab";
+import { DebugName } from '@/lib/game/debug-context';

src/components/game/tabs/SpireTab.tsx

@@ -22,6 +22,7 @@ import { RoomDisplay } from './RoomDisplay';
 import { FloorControls } from './FloorControls';
 import { CombatStatsPanel } from './CombatStatsPanel';
 import { ActivityLog } from './ActivityLog';
+import { DebugName } from '@/lib/game/debug-context';
 
 // Room type configurations
 const ROOM_TYPE_CONFIG: Record<string, { label: string; icon: string; color: string }> = {
@@ -130,6 +131,7 @@ export function SpireTab({ simpleMode = false }: SpireTabProps) {
   };
 
   return (
+    <DebugName name="SpireTab">
     <div className="grid gap-4">
       {/* Enter Spire Mode - Normal mode only */}
       {!simpleMode && (
@@ -384,6 +386,7 @@ export function SpireTab({ simpleMode = false }: SpireTabProps) {
         </Card>
       )}
     </div>
+  </DebugName>
   );
 }
 

src/components/game/tabs/StatsTab.tsx

@@ -18,6 +18,7 @@ import { UpgradeEffectsSection } from '../stats/UpgradeEffectsSection';
 // Modular stores
 import { useCombatStore, useManaStore, useSkillStore, usePrestigeStore, useGameStore } from '@/lib/game/stores';
 import { useCraftingStore } from '@/lib/game/stores/craftingStore';
+import { DebugName } from '@/lib/game/debug-context';
 
 export function StatsTab() {
   // Get state from modular stores
@@ -116,6 +117,7 @@ export function StatsTab() {
   })();
 
   return (
+    <DebugName name="StatsTab">
     <div className="space-y-4">
       {/* Mana Stats */}
       <ManaStatsSection
@@ -322,6 +324,7 @@ export function StatsTab() {
         </CardContent>
       </Card>
     </div>
+  </DebugName>
   );
 }
 

src/lib/game/stores/craftingStore.ts

@@ -92,7 +92,7 @@ export type CraftingStore = CraftingState & CraftingActions;
 
 export const useCraftingStore = create<CraftingStore>()(
   persist(
-    (set, get) => ({
+    (set, get) => { const startingEquipment = createStartingEquipment(); return {
       // Initial state
       designProgress: null,
       designProgress2: null,
@@ -101,8 +101,8 @@ export const useCraftingStore = create<CraftingStore>()(
       equipmentCraftingProgress: null,
       enchantmentDesigns: [],
       unlockedEffects: [],
-      equipmentInstances: {},
-      equippedInstances: {},
+      ...startingEquipment,
+      ...startingEquipment,
       lootInventory: {
         materials: {},
         blueprints: [],