🔒 Enhance developer tools access control with JWT and Discord OAuth permissions

code/websites/pokedex.online/src/components/DeveloperTools.vue

@@ -120,21 +120,40 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useAuth } from '../composables/useAuth.js';
+import { useDiscordOAuth } from '../composables/useDiscordOAuth.js';
 import { useFeatureFlags } from '../composables/useFeatureFlags.js';
 
+const { user } = useAuth();
+const discord = useDiscordOAuth();
 const {
   getFlags,
   toggle: toggleFlagOverride,
-  resetAll: resetAllOverrides,
-  isEnabled
+  resetAll: resetAllOverrides
 } = useFeatureFlags();
 
 const isOpen = ref(false);
 
-// Always show in development mode, otherwise only if enabled via feature flag
+// Show only for:
+// 1. Development mode
+// 2. JWT authenticated users with developer_tools.view permission
+// 3. Discord authenticated users with developer_tools.view permission
 const isAvailable = computed(() => {
-  return process.env.NODE_ENV === 'development' || isEnabled('developer-tools');
+  const isDev = process.env.NODE_ENV === 'development';
+  
+  // Check JWT auth permissions
+  const hasJwtPermission = user.value?.permissions?.includes(
+    'developer_tools.view'
+  );
+  
+  // Check Discord OAuth permissions
+  const hasDiscordPermission = discord.hasDevAccess();
+  
+  const hasPermission = hasJwtPermission || hasDiscordPermission;
+  
+  return isDev || hasPermission;
 });
+
 const nodeEnv = computed(() => process.env.NODE_ENV || 'unknown');
 const appVersion = computed(
   () => import.meta.env.VITE_APP_VERSION || '1.0.0-dev'
@@ -160,7 +179,7 @@ const resetAll = () => {
   }
 };
 
-// Keyboard shortcut: Ctrl+Shift+D
+// Keyboard shortcut: Ctrl+Shift+D (only works if user has access)
 const handleKeyDown = e => {
   if (e.ctrlKey && e.shiftKey && e.code === 'KeyD') {
     e.preventDefault();