From 740005e4b8b5a1bcaf5f5012c1e976a8bcf452b5 Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 22:54:02 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Developer=20Tools=20component?=
 =?UTF-8?q?=20for=20enhanced=20debugging=20features?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DeveloperTools.vue         | 439 ++++++++++++++++++
 1 file changed, 439 insertions(+)
 create mode 100644 code/websites/pokedex.online/src/components/DeveloperTools.vue

diff --git a/code/websites/pokedex.online/src/components/DeveloperTools.vue b/code/websites/pokedex.online/src/components/DeveloperTools.vue
new file mode 100644
index 0000000..04eb4f9
--- /dev/null
+++ b/code/websites/pokedex.online/src/components/DeveloperTools.vue
@@ -0,0 +1,439 @@
+<template>
+  <!-- Developer Tools Panel -->
+  <Teleport to="body">
+    <transition name="slide-up">
+      <div v-if="isOpen" class="developer-tools">
+        <div class="dev-header">
+          <h3>🛠️ Developer Tools</h3>
+          <button class="close-btn" @click="close">×</button>
+        </div>
+
+        <div class="dev-content">
+          <!-- Feature Flags Section -->
+          <div class="section">
+            <h4>Feature Flags</h4>
+            <div class="flags-list">
+              <div v-for="flag in flags" :key="flag.name" class="flag-item">
+                <div class="flag-header">
+                  <label class="flag-label">
+                    <input
+                      type="checkbox"
+                      :checked="flag.isEnabled"
+                      :disabled="!flag.hasPermission"
+                      @change="toggleFlag(flag.name)"
+                    />
+                    <code>{{ flag.name }}</code>
+                    <span v-if="flag.hasOverride" class="override-badge">override</span>
+                    <span v-if="flag.requiresPermission && !flag.hasPermission" class="locked-badge">
+                      🔒
+                    </span>
+                  </label>
+                </div>
+                <p class="flag-description">{{ flag.description }}</p>
+              </div>
+            </div>
+            <div class="button-group">
+              <button @click="resetAll" class="btn btn-secondary">Reset All Overrides</button>
+            </div>
+          </div>
+
+          <!-- Auth Info Section -->
+          <div class="section">
+            <h4>Authentication</h4>
+            <div class="info-grid">
+              <div v-if="user" class="info-item">
+                <span class="label">Status:</span>
+                <span class="value">✅ Authenticated</span>
+              </div>
+              <div v-else class="info-item">
+                <span class="label">Status:</span>
+                <span class="value">❌ Not Authenticated</span>
+              </div>
+
+              <div v-if="user" class="info-item">
+                <span class="label">Role:</span>
+                <span class="value">{{ user.isAdmin ? '👑 Admin' : '👤 User' }}</span>
+              </div>
+
+              <div v-if="user?.permissions" class="info-item full-width">
+                <span class="label">Permissions:</span>
+                <div class="tags">
+                  <span v-for="perm in user.permissions" :key="perm" class="tag">
+                    {{ perm }}
+                  </span>
+                </div>
+              </div>
+
+              <div v-if="token" class="info-item full-width">
+                <span class="label">Token (truncated):</span>
+                <code class="token">{{ token.substring(0, 20) }}...{{ token.substring(token.length - 10) }}</code>
+              </div>
+            </div>
+          </div>
+
+          <!-- Environment Info Section -->
+          <div class="section">
+            <h4>Environment</h4>
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="label">Mode:</span>
+                <span class="value">{{ nodeEnv }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">App Version:</span>
+                <span class="value">{{ appVersion }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <!-- Trigger Button -->
+    <button
+      v-if="isAvailable"
+      class="dev-trigger"
+      title="Toggle Developer Tools (Ctrl+Shift+D)"
+      @click="toggle"
+    >
+      🛠️
+    </button>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useAuth } from '../composables/useAuth.js';
+import { useFeatureFlags } from '../composables/useFeatureFlags.js';
+
+const { user, token } = useAuth();
+const { getFlags, toggle: toggleFlagOverride, resetAll: resetAllOverrides } = useFeatureFlags();
+
+const isOpen = ref(false);
+
+// Only show in development mode
+const isAvailable = computed(() => process.env.NODE_ENV === 'development');
+const nodeEnv = computed(() => process.env.NODE_ENV || 'unknown');
+const appVersion = computed(() => import.meta.env.VITE_APP_VERSION || '1.0.0-dev');
+
+const flags = computed(() => getFlags());
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const close = () => {
+  isOpen.value = false;
+};
+
+const toggleFlag = (flagName) => {
+  toggleFlagOverride(flagName);
+};
+
+const resetAll = () => {
+  if (confirm('Reset all feature flag overrides?')) {
+    resetAllOverrides();
+  }
+};
+
+// Keyboard shortcut: Ctrl+Shift+D
+const handleKeyDown = (e) => {
+  if (e.ctrlKey && e.shiftKey && e.code === 'KeyD') {
+    e.preventDefault();
+    if (isAvailable.value) {
+      toggle();
+    }
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
+</script>
+
+<style scoped>
+.developer-tools {
+  position: fixed;
+  bottom: 60px;
+  right: 20px;
+  width: 500px;
+  max-height: 70vh;
+  background: #1a1a1a;
+  border: 2px solid #00ff00;
+  border-radius: 8px;
+  overflow-y: auto;
+  z-index: 9998;
+  font-family: 'Courier New', monospace;
+  color: #00ff00;
+  box-shadow: 0 8px 32px rgba(0, 255, 0, 0.2);
+}
+
+.dev-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: #0a0a0a;
+  border-bottom: 2px solid #00ff00;
+}
+
+.dev-header h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #00ff00;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.close-btn:hover {
+  background: rgba(0, 255, 0, 0.1);
+}
+
+.dev-content {
+  padding: 16px;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+.section h4 {
+  margin: 0 0 12px 0;
+  color: #00ff00;
+  font-size: 14px;
+  text-transform: uppercase;
+  border-bottom: 1px solid #00ff00;
+  padding-bottom: 8px;
+}
+
+/* Feature Flags */
+.flags-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.flag-item {
+  border: 1px solid #333;
+  border-radius: 4px;
+  padding: 12px;
+  background: rgba(0, 255, 0, 0.05);
+}
+
+.flag-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.flag-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.flag-label input[type='checkbox'] {
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+}
+
+.flag-label input[type='checkbox']:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.flag-label code {
+  background: rgba(0, 255, 0, 0.1);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: inherit;
+}
+
+.override-badge,
+.locked-badge {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: rgba(255, 165, 0, 0.3);
+  color: #ffaa00;
+  border: 1px solid #ffaa00;
+}
+
+.locked-badge {
+  background: rgba(255, 0, 0, 0.2);
+  color: #ff4444;
+  border-color: #ff4444;
+}
+
+.flag-description {
+  margin: 0;
+  font-size: 12px;
+  color: #888;
+}
+
+/* Info Grid */
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.info-item {
+  border: 1px solid #333;
+  padding: 8px;
+  border-radius: 4px;
+  background: rgba(0, 255, 0, 0.02);
+}
+
+.info-item.full-width {
+  grid-column: 1 / -1;
+}
+
+.info-item .label {
+  display: block;
+  color: #888;
+  font-size: 11px;
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+
+.info-item .value {
+  display: block;
+  color: #00ff00;
+  word-break: break-word;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag {
+  background: rgba(0, 255, 0, 0.2);
+  border: 1px solid #00ff00;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  color: #00ff00;
+}
+
+.token {
+  background: rgba(0, 255, 0, 0.1);
+  padding: 4px 6px;
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: 11px;
+  word-break: break-all;
+}
+
+/* Buttons */
+.button-group {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  padding: 8px 12px;
+  border: 1px solid #00ff00;
+  border-radius: 4px;
+  background: none;
+  color: #00ff00;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  background: rgba(0, 255, 0, 0.2);
+}
+
+.btn-secondary {
+  border-color: #888;
+  color: #888;
+}
+
+.btn-secondary:hover {
+  background: rgba(136, 136, 136, 0.2);
+}
+
+/* Trigger Button */
+.dev-trigger {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #00ff00;
+  border: 2px solid #00aa00;
+  font-size: 24px;
+  cursor: pointer;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+  box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);
+}
+
+.dev-trigger:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(0, 255, 0, 0.5);
+}
+
+.dev-trigger:active {
+  transform: scale(0.95);
+}
+
+/* Animations */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide-up-enter-from {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .developer-tools {
+    width: calc(100vw - 40px);
+    max-height: 60vh;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>