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

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>
   );
 }