feat: Add debug mode to inspect LLM prompts and responses

- Add DebugContext to track all LLM interactions - Create DebugPanel component with floating UI - Track prompts/responses in Tutor component (move analysis, hints, questions) - Track prompts/responses in Analysis page (move commentary) - Add NEXT_PUBLIC_DEBUG environment variable to enable/disable - Include metadata (FEN, personality, language, etc.) in debug entries - Add copy-to-clipboard and clear functionality - Add DEBUG_MODE.md documentation
2025-11-27 18:20:12 +01:00
parent 54d92eaae5
commit c319904f00
6 changed files with 352 additions and 3 deletions
@@ -17,6 +17,7 @@ import { lookupPossibleOpenings, buildMoveSequenceFromSteps, OpeningMetadata } f
 import { getGenAIModel } from "@/lib/gemini";
 import { ChatSession } from "@google/generative-ai";
 import ReactMarkdown from "react-markdown";
+import { useDebug } from "@/contexts/DebugContext";

 interface MoveStep {
    san: string;
@@ -42,6 +43,7 @@ export default function AnalysisPage() {
    const [language, setLanguage] = useState<SupportedLanguage>("en");
    const [apiKey, setApiKey] = useState<string | null>(null);
    const t = useTranslation(language);
+    const { addEntry } = useDebug();

    const [input, setInput] = useState("");
    const [detectedFormat, setDetectedFormat] = useState<ChessFormat | null>(null);
@@ -286,8 +288,28 @@ INSTRUCTIONS:
 - Keep it educational and stay true to your personality tone.`;

                const result = await chatSession.sendMessage(prompt);
+                const responseText = result.response.text();
+
                if (!cancelled) {
-                    setComments(prev => ({ ...prev, [currentIndex]: result.response.text() }));
+                    setComments(prev => ({ ...prev, [currentIndex]: responseText }));
+
+                    // Track debug entry
+                    addEntry({
+                        type: 'analysis',
+                        action: `Move ${step.moveNumber} Analysis (${step.color})`,
+                        prompt,
+                        response: responseText,
+                        metadata: {
+                            moveNumber: step.moveNumber,
+                            san: step.san,
+                            color: step.color,
+                            fenBefore: step.fenBefore,
+                            fenAfter: step.fenAfter,
+                            cpLoss: delta,
+                            personality: selectedPersonality.name,
+                            language,
+                        }
+                    });
                }
            } catch (err) {
                console.error("Commentary failed", err);
@@ -3,6 +3,8 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";

 import Footer from "@/components/Footer";
+import { DebugProvider } from "@/contexts/DebugContext";
+import DebugPanel from "@/components/DebugPanel";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -29,8 +31,11 @@ export default function RootLayout({
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen`}
      >
-        {children}
-        <Footer />
+        <DebugProvider>
+          {children}
+          <Footer />
+          <DebugPanel />
+        </DebugProvider>
      </body>
    </html>
  );