debug: add visible debug panel and direct API test button

- Add debug panel that shows on GitHub Pages
- Add Test API button for direct fetch call
- Add comprehensive logging throughout initialization
- This will help identify where the issue is occurring

Author: nikhilwoodruff

app/page.tsx

@@ -5,6 +5,7 @@ import TabNav from '@/components/TabNav';
 import StandupTab from '@/components/StandupTab';
 import SurveyTab from '@/components/SurveyTab';
 import ResultsTab from '@/components/ResultsTab';
+import DebugPanel from '@/components/DebugPanel';
 import { dataService } from '@/lib/dataService';
 import { setupNetworkDebugging, checkEnvironment } from '@/lib/debug';
 
@@ -57,6 +58,7 @@ export default function Home() {
           </div>
         </div>
       </div>
+      <DebugPanel />
     </div>
   );
 }

components/DebugPanel.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function DebugPanel() {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Only show in production
+    if (typeof window !== 'undefined' && window.location.hostname.includes('github.io')) {
+      setIsVisible(true);
+      
+      // Override console methods to capture logs
+      const originalLog = console.log;
+      const originalError = console.error;
+      const originalWarn = console.warn;
+
+      const addLog = (type: string, ...args: any[]) => {
+        const message = `[${type}] ${args.map(arg => 
+          typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
+        ).join(' ')}`;
+        setLogs(prev => [...prev.slice(-19), message]);
+        
+        // Call original console method
+        if (type === 'LOG') originalLog(...args);
+        if (type === 'ERROR') originalError(...args);
+        if (type === 'WARN') originalWarn(...args);
+      };
+
+      console.log = (...args) => addLog('LOG', ...args);
+      console.error = (...args) => addLog('ERROR', ...args);
+      console.warn = (...args) => addLog('WARN', ...args);
+
+      // Initial debug info
+      console.log('Debug panel active');
+      console.log('URL:', window.location.href);
+      console.log('Supabase loaded:', typeof window !== 'undefined' && 'supabase' in window);
+      
+      return () => {
+        // Restore original console methods
+        console.log = originalLog;
+        console.error = originalError;
+        console.warn = originalWarn;
+      };
+    }
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 w-96 max-h-64 bg-black text-green-400 p-4 rounded-lg shadow-lg overflow-y-auto font-mono text-xs z-50">
+      <div className="mb-2 text-yellow-400">🔍 Debug Console</div>
+      {logs.length === 0 ? (
+        <div className="text-gray-400">No logs yet...</div>
+      ) : (
+        logs.map((log, i) => (
+          <div key={i} className="mb-1 whitespace-pre-wrap break-all">
+            {log}
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

components/ResultsTab.tsx

@@ -308,16 +308,42 @@ export default function ResultsTab() {
         <h2 className="text-2xl font-semibold text-gray-800" style={{ fontFamily: 'var(--font-roboto-serif)' }}>
           Team health metrics over time
         </h2>
-        <button
-          onClick={() => {
-            setLoading(true);
-            fetchResponses();
-          }}
-          className="px-4 py-2 bg-[#2C6496] text-white rounded-lg hover:bg-[#1e4268] transition-colors"
-          style={{ fontFamily: 'var(--font-roboto)' }}
-        >
-          Refresh
-        </button>
+        <div className="flex gap-2">
+          <button
+            onClick={async () => {
+              console.log('Test button clicked');
+              try {
+                console.log('Making direct Supabase call...');
+                const response = await fetch('https://mbhrkgzrswaysrmpdehz.supabase.co/rest/v1/survey_responses', {
+                  headers: {
+                    'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1iaHJrZ3pyc3dheXNybXBkZWh6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ1MTU2NjAsImV4cCI6MjA3MDA5MTY2MH0._JP4S6jVxYt0w7mSL2Rci59pSii0kDK1g9qfgFFtXKI',
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1iaHJrZ3pyc3dheXNybXBkZWh6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ1MTU2NjAsImV4cCI6MjA3MDA5MTY2MH0._JP4S6jVxYt0w7mSL2Rci59pSii0kDK1g9qfgFFtXKI'
+                  }
+                });
+                const data = await response.json();
+                console.log('Direct fetch result:', data);
+                alert('Check console - got ' + (Array.isArray(data) ? data.length : 0) + ' records');
+              } catch (err) {
+                console.error('Direct fetch error:', err);
+                alert('Error: ' + err);
+              }
+            }}
+            className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+            style={{ fontFamily: 'var(--font-roboto)' }}
+          >
+            Test API
+          </button>
+          <button
+            onClick={() => {
+              setLoading(true);
+              fetchResponses();
+            }}
+            className="px-4 py-2 bg-[#2C6496] text-white rounded-lg hover:bg-[#1e4268] transition-colors"
+            style={{ fontFamily: 'var(--font-roboto)' }}
+          >
+            Refresh
+          </button>
+        </div>
       </div>
 
       <div ref={chartContainerRef}></div>

lib/supabase.ts

@@ -4,15 +4,11 @@ import { createClient } from '@supabase/supabase-js';
 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://mbhrkgzrswaysrmpdehz.supabase.co';
 const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1iaHJrZ3pyc3dheXNybXBkZWh6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ1MTU2NjAsImV4cCI6MjA3MDA5MTY2MH0._JP4S6jVxYt0w7mSL2Rci59pSii0kDK1g9qfgFFtXKI';
 
-// Only log in browser environment
-if (typeof window !== 'undefined') {
-  console.log('Supabase initialization:', {
-    url: supabaseUrl,
-    keyLength: supabaseAnonKey?.length,
-    keyPrefix: supabaseAnonKey?.substring(0, 20) + '...',
-    env: 'browser'
-  });
-}
+// Always log, even during SSR
+console.log('=== SUPABASE INIT START ===');
+console.log('URL:', supabaseUrl);
+console.log('Key exists:', !!supabaseAnonKey);
+console.log('Environment:', typeof window !== 'undefined' ? 'browser' : 'server');
 
 export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
   auth: {
@@ -26,6 +22,9 @@ export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
   }
 });
 
+console.log('Supabase client created:', !!supabase);
+console.log('=== SUPABASE INIT END ===');
+
 // Add request interceptor for debugging only in browser
 if (typeof window !== 'undefined') {
   const originalFrom = supabase.from.bind(supabase);