Add comprehensive debug logging and visibility for reactive data flow

Co-authored-by: ankurrera <186232326+ankurrera@users.noreply.github.com>

Author: Copilot

src/components/system/RadarChart.tsx

@@ -171,6 +171,15 @@ const RadarChart = () => {
 
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
+    
+    // Debug logging: Log radar re-renders
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Radar Chart] Re-rendering with data:', {
+        dataPoints: data.length,
+        timestamp: new Date().toISOString(),
+        sampleMetrics: data.slice(0, 3).map(d => ({ label: d.label, value: d.value })),
+      });
+    }
 
     const centerX = canvas.width / 2;
     const centerY = canvas.height / 2;
@@ -295,6 +304,22 @@ const RadarChart = () => {
         <div className="text-xs uppercase tracking-[0.2em]" style={titleStyle}>PHYSICAL BALANCE</div>
       </div>
 
+      {/* Debug Panel - Only in Development */}
+      {process.env.NODE_ENV === 'development' && (
+        <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded text-xs">
+          <div className="font-semibold text-blue-900 mb-2">🔍 Debug Info</div>
+          <div className="space-y-1 text-blue-700">
+            <div>Radar Points: {data.length}</div>
+            <div>Core Metrics: {coreMetrics.length}</div>
+            <div>Total Contributing Skills: {coreMetrics.reduce((sum, m) => sum + m.contributions.length, 0)}</div>
+            <div>Non-Zero Metrics: {coreMetrics.filter(m => m.xp > 0).length}</div>
+            <div className="text-blue-500 text-[10px] mt-2">
+              Click metrics to see contributors
+            </div>
+          </div>
+        </div>
+      )}
+      
       {isLoading ? (
         <div className="flex items-center justify-center h-[400px]">
           <div className="w-8 h-8 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />

src/hooks/useCoreMetrics.ts

@@ -150,12 +150,46 @@ export function useCoreMetrics(): UseCoreMetricsResult {
 
   // Compute all Core Metrics (this is the main calculation)
   const coreMetrics = useMemo(() => {
-    return computeAllCoreMetrics(skillContributions, characteristicContributions);
+    const metrics = computeAllCoreMetrics(skillContributions, characteristicContributions);
+    
+    // Debug logging: Log recomputation of metrics
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Core Metrics] Recomputed from skills:', {
+        skillCount: skillContributions.length,
+        charCount: characteristicContributions.length,
+        metricsCount: metrics.length,
+        totalXP: metrics.reduce((sum, m) => sum + m.xp, 0),
+        timestamp: new Date().toISOString(),
+      });
+    }
+    
+    return metrics;
   }, [skillContributions, characteristicContributions]);
 
   // Get radar chart data (clamped to MAX_METRIC_XP)
   const radarData = useMemo(() => {
-    return getRadarChartData(coreMetrics);
+    const data = getRadarChartData(coreMetrics);
+    
+    // Debug logging: Verify radar data matches core metrics
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Radar Data] Updated:', {
+        radarPoints: data.length,
+        coreMetricsCount: coreMetrics.length,
+        match: data.length === coreMetrics.length,
+        sampleMetric: data[0]?.label,
+        sampleValue: data[0]?.value,
+      });
+      
+      // Assert that radar data length matches core metrics length
+      if (data.length !== coreMetrics.length) {
+        console.error('[CRITICAL] Radar data length mismatch!', {
+          expected: coreMetrics.length,
+          actual: data.length,
+        });
+      }
+    }
+    
+    return data;
   }, [coreMetrics]);
 
   // Calculate aggregate stats

src/hooks/useSkills.ts

@@ -108,6 +108,9 @@ export const useSkills = () => {
       return data as Skill;
     },
     onSuccess: () => {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[Skills CRUD] Skill created - invalidating queries');
+      }
       queryClient.invalidateQueries({ queryKey: ['skills'] });
       toast.success('Skill created successfully!');
     },
@@ -134,6 +137,9 @@ export const useSkills = () => {
       return data as Skill;
     },
     onSuccess: () => {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[Skills CRUD] Skill updated - invalidating queries');
+      }
       queryClient.invalidateQueries({ queryKey: ['skills'] });
       toast.success('Skill updated successfully!');
     },
@@ -157,6 +163,9 @@ export const useSkills = () => {
       if (error) throw error;
     },
     onSuccess: () => {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[Skills CRUD] Skill deleted - invalidating queries');
+      }
       queryClient.invalidateQueries({ queryKey: ['skills'] });
       toast.success('Skill deleted successfully');
     },