Dev mode: panneau connexion rapide avec 4 profils pre-configures

Ajout d'un panneau dev sous le login (Alice=membre, Bob=forgeron,
Charlie=comite tech, Dave=observateur) pour tester les differents
roles sans keypair Ed25519. Endpoint GET /auth/dev/profiles renvoie
les profils uniquement en ENVIRONMENT=development.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/app/pages/login.vue

@@ -1,11 +1,65 @@
 <script setup lang="ts">
 const auth = useAuthStore()
 const router = useRouter()
+const { $api } = useApi()
 
 const address = ref('')
 const step = ref<'input' | 'challenge' | 'signing' | 'success'>('input')
 const errorMessage = ref('')
 
+// Dev profiles
+interface DevProfile {
+  address: string
+  display_name: string
+  wot_status: string
+  is_smith: boolean
+  is_techcomm: boolean
+}
+const devProfiles = ref<DevProfile[]>([])
+const devLoading = ref(false)
+
+async function loadDevProfiles() {
+  try {
+    devProfiles.value = await $api<DevProfile[]>('/auth/dev/profiles')
+  } catch {
+    // Not in dev mode or endpoint unavailable
+  }
+}
+
+function statusLabel(p: DevProfile): string {
+  const parts: string[] = []
+  parts.push(p.wot_status === 'member' ? 'Membre WoT' : 'Observateur')
+  if (p.is_smith) parts.push('Forgeron')
+  if (p.is_techcomm) parts.push('ComTech')
+  return parts.join(' · ')
+}
+
+function statusColor(p: DevProfile): string {
+  if (p.is_techcomm) return 'var(--mood-info, #3b82f6)'
+  if (p.is_smith) return 'var(--mood-warning, #f59e0b)'
+  if (p.wot_status === 'member') return 'var(--mood-success, #22c55e)'
+  return 'var(--mood-text-muted, #888)'
+}
+
+async function loginAsProfile(p: DevProfile) {
+  devLoading.value = true
+  address.value = p.address
+  errorMessage.value = ''
+  step.value = 'challenge'
+
+  try {
+    step.value = 'signing'
+    await auth.login(p.address)
+    step.value = 'success'
+    setTimeout(() => router.push('/'), 800)
+  } catch (err: any) {
+    errorMessage.value = err?.data?.detail || err?.message || 'Erreur connexion dev'
+    step.value = 'input'
+  } finally {
+    devLoading.value = false
+  }
+}
+
 async function handleLogin() {
   if (!address.value.trim()) {
     errorMessage.value = 'Veuillez entrer votre adresse Duniter'
@@ -49,6 +103,7 @@ onMounted(() => {
   if (auth.isAuthenticated) {
     router.push('/')
   }
+  loadDevProfiles()
 })
 </script>
 
@@ -121,6 +176,30 @@ onMounted(() => {
         <span>{{ auth.loading ? 'Verification...' : 'Se connecter' }}</span>
       </button>
 
+      <!-- Dev Mode Panel -->
+      <div v-if="devProfiles.length" class="dev-panel">
+        <div class="dev-panel__header">
+          <UIcon name="i-lucide-bug" />
+          <span>Mode Dev — Connexion rapide</span>
+        </div>
+        <div class="dev-panel__profiles">
+          <button
+            v-for="p in devProfiles"
+            :key="p.address"
+            class="dev-profile"
+            :disabled="devLoading || step === 'success'"
+            @click="loginAsProfile(p)"
+          >
+            <div class="dev-profile__dot" :style="{ background: statusColor(p) }" />
+            <div class="dev-profile__info">
+              <span class="dev-profile__name">{{ p.display_name }}</span>
+              <span class="dev-profile__status">{{ statusLabel(p) }}</span>
+            </div>
+            <span class="dev-profile__addr">{{ p.address.slice(0, 8) }}...</span>
+          </button>
+        </div>
+      </div>
+
       <!-- Note -->
       <p class="login-card__note">
         Aucun mot de passe. Authentification par signature cryptographique.
@@ -373,6 +452,93 @@ onMounted(() => {
   cursor: not-allowed;
 }
 
+/* Dev panel */
+.dev-panel {
+  border: 2px dashed var(--mood-warning, #f59e0b);
+  border-radius: 16px;
+  padding: 1rem;
+  background: rgba(245, 158, 11, 0.04);
+}
+
+.dev-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--mood-warning, #f59e0b);
+  margin-bottom: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.dev-panel__profiles {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.dev-profile {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  background: var(--mood-accent-soft);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+  text-align: left;
+}
+
+.dev-profile:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 3px 12px var(--mood-shadow, rgba(0,0,0,0.08));
+}
+
+.dev-profile:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.dev-profile:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.dev-profile__dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dev-profile__info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.dev-profile__name {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--mood-text);
+}
+
+.dev-profile__status {
+  font-size: 0.6875rem;
+  color: var(--mood-text-muted);
+  font-weight: 600;
+}
+
+.dev-profile__addr {
+  font-size: 0.6875rem;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  color: var(--mood-text-muted);
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
 /* Note */
 .login-card__note {
   text-align: center;