Multi-tenancy : espaces de travail + fix auth reload (rate limiter OPTIONS)

- Modèles Organization + OrgMember, migration Alembic (SQLite compatible) - organization_id nullable sur Document, Decision, Mandate, VotingProtocol - Service, schéma, router /organizations + dependency get_active_org_id - Seed : Duniter G1 + Axiom Team ; tout le contenu seed attaché à Duniter G1 - Backend : list/create filtrés par header X-Organization - Frontend : store organizations, WorkspaceSelector réel, useApi injecte l'org - Fix critique : rate_limiter exclut les requêtes OPTIONS (CORS preflight) → résout le bug "Failed to fetch /auth/me" au reload (429 sur preflight) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 15:17:14 +02:00
parent 224e5b0f5e
commit 79e468b40f
31 changed files with 1296 additions and 159 deletions
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
 const auth = useAuthStore()
+const orgsStore = useOrganizationsStore()
 const route = useRoute()
 const { initMood } = useMood()

 const navigationItems = [
  {
-    label: 'Boîte à outils',
-    icon: 'i-lucide-wrench',
-    to: '/tools',
+    label: 'Décisions',
+    icon: 'i-lucide-scale',
+    to: '/decisions',
  },
  {
    label: 'Documents',
    icon: 'i-lucide-book-open',
    to: '/documents',
  },
-  {
-    label: 'Decisions',
-    icon: 'i-lucide-scale',
-    to: '/decisions',
-  },
  {
    label: 'Mandats',
    icon: 'i-lucide-user-check',
@@ -29,6 +25,11 @@ const navigationItems = [
    icon: 'i-lucide-settings',
    to: '/protocols',
  },
+  {
+    label: 'Outils',
+    icon: 'i-lucide-wrench',
+    to: '/tools',
+  },
  {
    label: 'Sanctuaire',
    icon: 'i-lucide-archive',
@@ -63,12 +64,18 @@ onMounted(async () => {
  if (auth.token) {
    try {
      await auth.fetchMe()
-    } catch {
-      auth.logout()
+    } catch (err: any) {
+      // Déconnexion seulement sur session réellement invalide (401/403)
+      // Erreur réseau ou backend temporairement indisponible → conserver la session
+      if (err?.status === 401 || err?.status === 403) {
+        auth.logout()
+      }
    }
  }
  ws.connect()
  setupWsNotifications(ws)
+  // Load organizations in parallel — non-blocking, no auth required
+  orgsStore.fetchOrganizations()
 })

 onUnmounted(() => {
--- a/frontend/app/components/WorkspaceSelector.vue
+++ b/frontend/app/components/WorkspaceSelector.vue
@@ -1,52 +1,18 @@
 <script setup lang="ts">
-/**
- * WorkspaceSelector — Sélecteur de collectif / espace de travail.
- * Compartimentage multi-collectifs, multi-sites.
- * UI-only pour l'instant, prêt pour le backend (collective_id sur toutes les entités).
- */
+const orgsStore = useOrganizationsStore()

-interface Workspace {
-  id: string
-  name: string
-  slug: string
-  icon: string
-  role?: string
-  color?: string
-}
-
-// Mock data — sera remplacé par le store collectifs
-const workspaces: Workspace[] = [
-  {
-    id: 'g1-main',
-    name: 'Duniter G1',
-    slug: 'duniter-g1',
-    icon: 'i-lucide-coins',
-    role: 'Membre',
-    color: 'accent',
-  },
-  {
-    id: 'axiom',
-    name: 'Axiom Team',
-    slug: 'axiom-team',
-    icon: 'i-lucide-layers',
-    role: 'Admin',
-    color: 'secondary',
-  },
-]
-
-const activeId = ref('g1-main')
 const isOpen = ref(false)
+const containerRef = ref<HTMLElement | null>(null)

-const active = computed(() => workspaces.find(w => w.id === activeId.value) ?? workspaces[0])
+const active = computed(() => orgsStore.active)
+const organizations = computed(() => orgsStore.organizations)

-function selectWorkspace(id: string) {
-  activeId.value = id
+function selectOrg(slug: string) {
+  orgsStore.setActive(slug)
  isOpen.value = false
-  // TODO: store.setActiveCollective(id) + refetch all data
 }

 // Close on outside click
-const containerRef = ref<HTMLElement | null>(null)
 onMounted(() => {
  document.addEventListener('click', (e) => {
    if (containerRef.value && !containerRef.value.contains(e.target as Node)) {
@@ -58,35 +24,46 @@ onMounted(() => {

 <template>
  <div ref="containerRef" class="ws">
-    <button class="ws__trigger" :class="{ 'ws__trigger--open': isOpen }" @click="isOpen = !isOpen">
-      <div class="ws__icon" :class="`ws__icon--${active.color}`">
-        <UIcon :name="active.icon" />
+    <button
+      class="ws__trigger"
+      :class="{ 'ws__trigger--open': isOpen }"
+      :disabled="orgsStore.loading || !active"
+      @click="isOpen = !isOpen"
+    >
+      <div v-if="orgsStore.loading" class="ws__icon ws__icon--muted">
+        <UIcon name="i-lucide-loader-2" class="animate-spin" />
      </div>
-      <span class="ws__name">{{ active.name }}</span>
+      <div v-else-if="active" class="ws__icon" :style="{ background: active.color ? active.color + '22' : undefined, color: active.color || undefined }">
+        <UIcon :name="active.icon || 'i-lucide-building'" />
+      </div>
+      <span class="ws__name">{{ active?.name ?? '…' }}</span>
      <UIcon name="i-lucide-chevrons-up-down" class="ws__caret" />
    </button>

    <Transition name="dropdown">
-      <div v-if="isOpen" class="ws__dropdown">
+      <div v-if="isOpen && organizations.length" class="ws__dropdown">
        <div class="ws__dropdown-header">
          Espace de travail
        </div>
        <div class="ws__items">
          <button
-            v-for="ws in workspaces"
-            :key="ws.id"
+            v-for="org in organizations"
+            :key="org.id"
            class="ws__item"
-            :class="{ 'ws__item--active': ws.id === activeId }"
-            @click="selectWorkspace(ws.id)"
+            :class="{ 'ws__item--active': org.slug === orgsStore.activeSlug }"
+            @click="selectOrg(org.slug)"
          >
-            <div class="ws__item-icon" :class="`ws__icon--${ws.color}`">
-              <UIcon :name="ws.icon" />
+            <div
+              class="ws__item-icon"
+              :style="{ background: org.color ? org.color + '22' : undefined, color: org.color || undefined }"
+            >
+              <UIcon :name="org.icon || 'i-lucide-building'" />
            </div>
            <div class="ws__item-info">
-              <span class="ws__item-name">{{ ws.name }}</span>
-              <span v-if="ws.role" class="ws__item-role">{{ ws.role }}</span>
+              <span class="ws__item-name">{{ org.name }}</span>
+              <span class="ws__item-role">{{ org.is_transparent ? 'Public' : 'Membres' }}</span>
            </div>
-            <UIcon v-if="ws.id === activeId" name="i-lucide-check" class="ws__item-check" />
+            <UIcon v-if="org.slug === orgsStore.activeSlug" name="i-lucide-check" class="ws__item-check" />
          </button>
        </div>
        <div class="ws__dropdown-footer">
@@ -118,7 +95,7 @@ onMounted(() => {
  max-width: 11rem;
 }

-.ws__trigger:hover {
+.ws__trigger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mood-accent-soft) 80%, var(--mood-accent) 20%);
 }

@@ -126,6 +103,11 @@ onMounted(() => {
  background: color-mix(in srgb, var(--mood-accent-soft) 60%, var(--mood-accent) 40%);
 }

+.ws__trigger:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .ws__icon {
  width: 1.375rem;
  height: 1.375rem;
@@ -137,10 +119,9 @@ onMounted(() => {
  font-size: 0.75rem;
 }

-.ws__icon--accent { background: var(--mood-accent); color: var(--mood-accent-text); }
-.ws__icon--secondary {
-  background: color-mix(in srgb, var(--mood-secondary, var(--mood-accent)) 20%, transparent);
-  color: var(--mood-secondary, var(--mood-accent));
+.ws__icon--muted {
+  background: var(--mood-accent-soft);
+  color: var(--mood-text-muted);
 }

 .ws__name {
@@ -202,7 +183,6 @@ onMounted(() => {
 }

 .ws__item:hover { background: var(--mood-accent-soft); }
-
 .ws__item--active { background: var(--mood-accent-soft); }

 .ws__item-icon {
--- a/frontend/app/composables/useApi.ts
+++ b/frontend/app/composables/useApi.ts
@@ -73,6 +73,7 @@ function isRetryable(status: number): boolean {
 export function useApi() {
  const config = useRuntimeConfig()
  const auth = useAuthStore()
+  const orgsStore = useOrganizationsStore()

  /**
   * Perform a typed fetch against the backend API.
@@ -94,6 +95,9 @@ export function useApi() {
    if (auth.token) {
      headers.Authorization = `Bearer ${auth.token}`
    }
+    if (orgsStore.activeSlug) {
+      headers['X-Organization'] = orgsStore.activeSlug
+    }

    const maxAttempts = noRetry ? 1 : MAX_RETRIES
    let lastError: any = null
--- a/frontend/app/pages/decisions/new.vue
+++ b/frontend/app/pages/decisions/new.vue
@@ -2,6 +2,14 @@
 import type { DecisionCreate } from '~/stores/decisions'

 const decisions = useDecisionsStore()
+const protocols = useProtocolsStore()
+
+type Nature = 'individual' | 'collective' | 'onchain'
+
+const step = ref<1 | 2>(1)
+const nature = ref<Nature | null>(null)
+const submitting = ref(false)
+const openMandate = ref(false)

 const formData = ref<DecisionCreate>({
  title: '',
@@ -11,62 +19,528 @@ const formData = ref<DecisionCreate>({
  voting_protocol_id: null,
 })

-const submitting = ref(false)
+interface NatureOption {
+  key: Nature
+  icon: string
+  title: string
+  desc: string
+  color: string
+}
+
+const choiceOptions: NatureOption[] = [
+  {
+    key: 'individual',
+    icon: 'i-lucide-user',
+    title: 'Décision individuelle',
+    desc: 'Je dois décider seul·e, après avoir consulté et consigné des avis',
+    color: 'var(--mood-secondary, var(--mood-accent))',
+  },
+  {
+    key: 'collective',
+    icon: 'i-lucide-users',
+    title: 'Décision collective',
+    desc: 'Le collectif tranche ensemble — vote WoT, nuancé ou par protocole',
+    color: 'var(--mood-accent)',
+  },
+  {
+    key: 'onchain',
+    icon: 'i-lucide-cpu',
+    title: 'Exception on-chain',
+    desc: 'Décision inscrite sur la blockchain Duniter (Runtime Upgrade, etc.)',
+    color: 'var(--mood-success)',
+  },
+]
+
+const selectedOption = computed(() => choiceOptions.find(o => o.key === nature.value))
+
+onMounted(() => protocols.fetchProtocols())
+
+function selectNature(n: Nature) {
+  nature.value = n
+  formData.value.decision_type = n === 'onchain' ? 'runtime_upgrade' : 'other'
+  step.value = 2
+}
+
+function goBack() {
+  step.value = 1
+  nature.value = null
+  formData.value = { title: '', description: '', context: '', decision_type: 'other', voting_protocol_id: null }
+  openMandate.value = false
+}

 async function onSubmit() {
+  if (!formData.value.title.trim()) return
  submitting.value = true
  try {
-    const decision = await decisions.create(formData.value)
+    const contextPrefix = nature.value === 'individual' ? '[Consultation individuelle]\n' : ''
+    const decision = await decisions.create({
+      ...formData.value,
+      context: contextPrefix + (formData.value.context ?? ''),
+    })
    if (decision) {
-      navigateTo(`/decisions/${decision.id}`)
+      if (openMandate.value && nature.value === 'individual') {
+        navigateTo('/mandates')
+      }
+      else {
+        navigateTo(`/decisions/${decision.id}`)
+      }
    }
-  } catch {
-    // Error is handled by the store
-  } finally {
+  }
+  catch {
+    // handled by store
+  }
+  finally {
    submitting.value = false
  }
 }
 </script>

 <template>
-  <div class="space-y-6">
-    <!-- Back link -->
-    <div>
-      <UButton
-        to="/decisions"
-        variant="ghost"
-        color="neutral"
-        icon="i-lucide-arrow-left"
-        label="Retour aux decisions"
-        size="sm"
-      />
+  <div class="decide">
+    <!-- Nav -->
+    <div class="decide__nav">
+      <button v-if="step === 2" class="decide__back-btn" @click="goBack">
+        <UIcon name="i-lucide-arrow-left" class="text-sm" />
+        <span>Retour</span>
+      </button>
+      <NuxtLink v-else to="/decisions" class="decide__back-btn">
+        <UIcon name="i-lucide-arrow-left" class="text-sm" />
+        <span>Décisions</span>
+      </NuxtLink>
    </div>

-    <!-- Header -->
-    <div>
-      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
-        Nouvelle decision
-      </h1>
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        Cadrage d'un nouveau processus de decision collectif
-      </p>
-    </div>
+    <Transition name="slide-fade" mode="out-in">
+      <!-- Step 1 : Qualifier -->
+      <div v-if="step === 1" key="step1" class="decide__step">
+        <div class="decide__header">
+          <h1 class="decide__title">Quelle décision prendre ?</h1>
+          <p class="decide__subtitle">Qualifiez d'abord la nature de votre décision — le parcours s'adapte</p>
+        </div>

-    <!-- Error -->
-    <UCard v-if="decisions.error">
-      <div class="flex items-center gap-3 text-red-500">
-        <UIcon name="i-lucide-alert-circle" class="text-xl" />
-        <p>{{ decisions.error }}</p>
+        <div class="decide__choices">
+          <button
+            v-for="option in choiceOptions"
+            :key="option.key"
+            class="decide__choice"
+            :style="{ '--choice-color': option.color }"
+            @click="selectNature(option.key)"
+          >
+            <div class="decide__choice-icon">
+              <UIcon :name="option.icon" class="text-xl" />
+            </div>
+            <div class="decide__choice-body">
+              <span class="decide__choice-title">{{ option.title }}</span>
+              <span class="decide__choice-desc">{{ option.desc }}</span>
+            </div>
+            <UIcon name="i-lucide-chevron-right" class="decide__choice-arrow" />
+          </button>
+        </div>
+
+        <p class="decide__footer-note">
+          <UIcon name="i-lucide-info" class="text-xs" />
+          Les décisions on-chain sont des exceptions — elles concernent uniquement les opérations blockchain Duniter.
+        </p>
      </div>
-    </UCard>

-    <!-- Form -->
-    <UCard>
-      <DecisionCadrage
-        v-model="formData"
-        :submitting="submitting"
-        @submit="onSubmit"
-      />
-    </UCard>
+      <!-- Step 2 : Form -->
+      <div v-else-if="step === 2 && selectedOption" key="step2" class="decide__step">
+        <div class="decide__nature-badge" :style="{ '--badge-color': selectedOption.color }">
+          <UIcon :name="selectedOption.icon" class="text-sm" />
+          <span>{{ selectedOption.title }}</span>
+        </div>
+
+        <div class="decide__header">
+          <h1 class="decide__title">
+            {{ nature === 'individual' ? 'Consultation d\'avis' : nature === 'onchain' ? 'Décision on-chain' : 'Décision collective' }}
+          </h1>
+          <p class="decide__subtitle">
+            <template v-if="nature === 'individual'">
+              Les avis seront consignés. Vous décidez, informé·e des consultations.
+            </template>
+            <template v-else-if="nature === 'onchain'">
+              Exception réservée aux opérations blockchain. Voir le protocole
+              <NuxtLink to="/protocols" class="decide__link">Runtime Upgrade</NuxtLink>.
+            </template>
+            <template v-else>
+              Le collectif vote selon le protocole choisi. Seuil adaptatif par la WoT.
+            </template>
+          </p>
+        </div>
+
+        <div v-if="decisions.error" class="decide__error">
+          <UIcon name="i-lucide-alert-circle" />
+          <span>{{ decisions.error }}</span>
+        </div>
+
+        <div class="decide__fields">
+          <div class="decide__field">
+            <label class="decide__label">
+              {{ nature === 'individual' ? 'Question à consulter' : 'Titre de la décision' }}
+              <span class="decide__required">*</span>
+            </label>
+            <input
+              v-model="formData.title"
+              type="text"
+              class="decide__input"
+              :placeholder="nature === 'individual' ? 'Ex : Faut-il migrer vers PostgreSQL ?' : 'Ex : Adoption de la v2.0 du protocole…'"
+              autofocus
+            />
+          </div>
+
+          <div class="decide__field">
+            <label class="decide__label">Description</label>
+            <textarea
+              v-model="formData.description"
+              class="decide__textarea"
+              rows="3"
+              :placeholder="nature === 'individual' ? 'Décrivez la question, les options envisagées…' : 'Décrivez l\'objet, les enjeux, les alternatives…'"
+            />
+          </div>
+
+          <div class="decide__field">
+            <label class="decide__label">Contexte et références</label>
+            <textarea
+              v-model="formData.context"
+              class="decide__textarea"
+              rows="2"
+              placeholder="Liens forum, documents de référence, historique…"
+            />
+          </div>
+
+          <!-- Collective: protocol -->
+          <div v-if="nature === 'collective'" class="decide__field">
+            <label class="decide__label">Protocole de vote</label>
+            <ProtocolPicker
+              :model-value="formData.voting_protocol_id ?? null"
+              @update:model-value="formData.voting_protocol_id = $event"
+            />
+            <p class="decide__hint">Optionnel — peut être défini à chaque étape</p>
+          </div>
+
+          <!-- Individual: mandate option -->
+          <label v-if="nature === 'individual'" class="decide__mandate-toggle">
+            <input v-model="openMandate" type="checkbox" class="decide__mandate-check" />
+            <div class="decide__mandate-body">
+              <span class="decide__mandate-label">Ouvrir un mandat en parallèle</span>
+              <span class="decide__mandate-hint">Si la consultation mène à déléguer une mission</span>
+            </div>
+          </label>
+        </div>
+
+        <div class="decide__actions">
+          <button class="decide__cancel" @click="goBack">
+            Annuler
+          </button>
+          <button
+            class="decide__submit"
+            :disabled="!formData.title.trim() || submitting"
+            :style="{ '--submit-color': selectedOption.color }"
+            @click="onSubmit"
+          >
+            <UIcon v-if="submitting" name="i-lucide-loader-2" class="animate-spin" />
+            <UIcon v-else name="i-lucide-plus" />
+            <span>{{ nature === 'individual' ? 'Lancer la consultation' : 'Créer la décision' }}</span>
+          </button>
+        </div>
+      </div>
+    </Transition>
  </div>
 </template>
+
+<style scoped>
+.decide {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 42rem;
+  margin: 0 auto;
+}
+
+/* Nav */
+.decide__nav { margin-bottom: -0.5rem; }
+
+.decide__back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mood-text-muted);
+  background: none;
+  border-radius: 10px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.12s, background 0.12s;
+}
+.decide__back-btn:hover {
+  color: var(--mood-text);
+  background: var(--mood-accent-soft);
+}
+
+/* Step container */
+.decide__step { display: flex; flex-direction: column; gap: 1.5rem; }
+
+/* Header */
+.decide__header { display: flex; flex-direction: column; gap: 0.25rem; }
+
+.decide__title {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--mood-text);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+@media (min-width: 640px) {
+  .decide__title { font-size: 1.875rem; }
+}
+
+.decide__subtitle {
+  font-size: 0.9375rem;
+  color: var(--mood-text-muted);
+  font-weight: 500;
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* Nature badge */
+.decide__nature-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--badge-color, var(--mood-accent));
+  background: color-mix(in srgb, var(--badge-color, var(--mood-accent)) 12%, transparent);
+  border-radius: 20px;
+  width: fit-content;
+}
+
+/* Choices (Step 1) */
+.decide__choices { display: flex; flex-direction: column; gap: 0.75rem; }
+
+.decide__choice {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.25rem;
+  background: var(--mood-surface);
+  border-radius: 16px;
+  cursor: pointer;
+  text-align: left;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+.decide__choice:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px var(--mood-shadow);
+}
+.decide__choice:active { transform: translateY(0); }
+
+.decide__choice-icon {
+  width: 3rem;
+  height: 3rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--choice-color) 12%, transparent);
+  color: var(--choice-color);
+}
+
+.decide__choice-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.decide__choice-title {
+  font-size: 1.0625rem;
+  font-weight: 800;
+  color: var(--mood-text);
+}
+
+.decide__choice-desc {
+  font-size: 0.8125rem;
+  color: var(--mood-text-muted);
+  line-height: 1.4;
+}
+
+.decide__choice-arrow {
+  flex-shrink: 0;
+  color: var(--mood-text-muted);
+  opacity: 0.3;
+  transition: all 0.12s;
+}
+.decide__choice:hover .decide__choice-arrow {
+  opacity: 1;
+  color: var(--choice-color);
+  transform: translateX(3px);
+}
+
+.decide__footer-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--mood-text-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* Form (Step 2) */
+.decide__error {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mood-error, #c42b2b);
+  background: color-mix(in srgb, #c42b2b 8%, transparent);
+  border-radius: 12px;
+}
+
+.decide__fields { display: flex; flex-direction: column; gap: 1rem; }
+
+.decide__field { display: flex; flex-direction: column; gap: 0.375rem; }
+
+.decide__label {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--mood-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.decide__required { color: var(--mood-error, #c42b2b); }
+
+.decide__input,
+.decide__textarea {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 0.9375rem;
+  color: var(--mood-text);
+  background: var(--mood-surface);
+  border-radius: 12px;
+  outline: none;
+  font-family: inherit;
+  resize: vertical;
+  transition: box-shadow 0.15s ease;
+}
+.decide__input:focus,
+.decide__textarea:focus {
+  box-shadow: 0 0 0 3px var(--mood-accent-soft);
+}
+
+.decide__hint {
+  font-size: 0.75rem;
+  color: var(--mood-text-muted);
+  margin: 0;
+}
+
+.decide__link {
+  color: var(--mood-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Mandate toggle */
+.decide__mandate-toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  padding: 1rem;
+  background: var(--mood-surface);
+  border-radius: 14px;
+  cursor: pointer;
+}
+
+.decide__mandate-check {
+  margin-top: 0.125rem;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  accent-color: var(--mood-accent);
+  cursor: pointer;
+}
+
+.decide__mandate-body { display: flex; flex-direction: column; gap: 0.125rem; }
+
+.decide__mandate-label {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--mood-text);
+}
+
+.decide__mandate-hint {
+  font-size: 0.8125rem;
+  color: var(--mood-text-muted);
+}
+
+/* Actions */
+.decide__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding-top: 0.25rem;
+}
+
+.decide__cancel {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mood-text-muted);
+  background: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: color 0.12s, background 0.12s;
+}
+.decide__cancel:hover {
+  color: var(--mood-text);
+  background: var(--mood-accent-soft);
+}
+
+.decide__submit {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.75rem;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--mood-accent-text);
+  background: var(--submit-color, var(--mood-accent));
+  border-radius: 20px;
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  min-height: 2.75rem;
+}
+.decide__submit:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px var(--mood-shadow);
+}
+.decide__submit:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Transition */
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.2s ease;
+}
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateX(12px);
+}
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+</style>
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -116,6 +116,22 @@ function formatDate(dateStr: string): string {
      </p>
    </div>

+    <!-- Décider CTA -->
+    <NuxtLink to="/decisions/new" class="dash__decide">
+      <div class="dash__decide-left">
+        <div class="dash__decide-icon">
+          <UIcon name="i-lucide-scale" class="text-xl" />
+        </div>
+        <div class="dash__decide-text">
+          <span class="dash__decide-label">Prendre une décision</span>
+          <span class="dash__decide-sub">Individuelle · collective · déléguée — le parcours s'adapte</span>
+        </div>
+      </div>
+      <div class="dash__decide-arrow">
+        <UIcon name="i-lucide-arrow-right" class="text-base" />
+      </div>
+    </NuxtLink>
+
    <!-- Entry cards -->
    <div class="dash__entries">
      <template v-if="loading">
@@ -177,7 +193,7 @@ function formatDate(dateStr: string): string {
            <span class="dash__toolbox-card-tag">Vote WoT</span>
            <span class="dash__toolbox-card-tag">Inertie</span>
            <span class="dash__toolbox-card-tag">Smith</span>
-            <span class="dash__toolbox-card-tag">Nuancé</span>
+            <span class="dash__toolbox-card-tag">Élection</span>
          </div>
        </div>
        <UIcon name="i-lucide-arrow-right" class="dash__toolbox-card-arrow" />
@@ -292,6 +308,87 @@ function formatDate(dateStr: string): string {
  }
 }

+/* --- Décider CTA --- */
+.dash__decide {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem;
+  background: var(--mood-accent);
+  border-radius: 16px;
+  text-decoration: none;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+.dash__decide:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px var(--mood-shadow);
+}
+.dash__decide:active { transform: translateY(0); }
+
+.dash__decide-left {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  min-width: 0;
+}
+
+.dash__decide-icon {
+  width: 2.75rem;
+  height: 2.75rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: rgba(255,255,255,0.18);
+  color: var(--mood-accent-text);
+}
+
+.dash__decide-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.dash__decide-label {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--mood-accent-text);
+  letter-spacing: -0.01em;
+}
+
+@media (min-width: 640px) {
+  .dash__decide-label { font-size: 1.125rem; }
+}
+
+.dash__decide-sub {
+  font-size: 0.75rem;
+  color: rgba(255,255,255,0.75);
+  font-weight: 500;
+}
+
+@media (min-width: 640px) {
+  .dash__decide-sub { font-size: 0.8125rem; }
+}
+
+.dash__decide-arrow {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.18);
+  color: var(--mood-accent-text);
+  transition: transform 0.12s;
+}
+.dash__decide:hover .dash__decide-arrow {
+  transform: translateX(3px);
+}
+
 /* --- Entry cards --- */
 .dash__entries {
  display: grid;
--- a/frontend/app/pages/login.vue
+++ b/frontend/app/pages/login.vue
@@ -49,7 +49,8 @@ async function loginAsProfile(p: DevProfile) {

  try {
    step.value = 'signing'
-    await auth.login(p.address)
+    // Dev mode: bypass extension — backend accepte toute signature pour les profils dev
+    await auth.login(p.address, () => Promise.resolve('0x' + 'a'.repeat(128)))
    step.value = 'success'
    setTimeout(() => router.push('/'), 800)
  } catch (err: any) {
--- a/frontend/app/pages/protocols/index.vue
+++ b/frontend/app/pages/protocols/index.vue
@@ -136,24 +136,6 @@ interface OperationalProtocol {
 }

 const operationalProtocols: OperationalProtocol[] = [
-  {
-    slug: 'election-sociocratique',
-    name: 'Élection sociocratique',
-    description: 'Processus d\'élection d\'un rôle par consentement : clarification du rôle, nominations silencieuses, argumentaire, levée d\'objections. Garantit légitimité et clarté.',
-    category: 'gouvernance',
-    icon: 'i-lucide-users',
-    instancesLabel: 'Tout renouvellement de rôle',
-    linkedRefs: [
-      { label: 'Mandats', icon: 'i-lucide-user-check', to: '/mandates', kind: 'decision' },
-    ],
-    steps: [
-      { label: 'Clarifier le rôle', actor: 'Cercle', icon: 'i-lucide-clipboard-list', type: 'checklist' },
-      { label: 'Nominations silencieuses', actor: 'Tous les membres', icon: 'i-lucide-pencil', type: 'checklist' },
-      { label: 'Recueil & argumentaire', actor: 'Facilitateur', icon: 'i-lucide-list-checks', type: 'checklist' },
-      { label: 'Objections & consentement', actor: 'Cercle', icon: 'i-lucide-shield-check', type: 'certification' },
-      { label: 'Proclamation', actor: 'Facilitateur', icon: 'i-lucide-star', type: 'on_chain' },
-    ],
-  },
  {
    slug: 'embarquement-forgeron',
    name: 'Embarquement Forgeron',
--- a/frontend/app/pages/tools.vue
+++ b/frontend/app/pages/tools.vue
@@ -20,6 +20,8 @@ interface ToolSection {
  tools: Tool[]
 }

+const expandSocio = ref(false)
+
 const sections: ToolSection[] = [
  {
    key: 'documents',
@@ -149,6 +151,29 @@ const sections: ToolSection[] = [
            </div>
          </div>
        </div>
+
+        <!-- Election sociocratique — modalité d'élection, accessible depuis mandats -->
+        <div v-if="section.key === 'mandats'" class="socio-expand">
+          <button class="socio-expand__trigger" @click="expandSocio = !expandSocio">
+            <div class="socio-expand__icon">
+              <UIcon name="i-lucide-users" class="text-sm" />
+            </div>
+            <div class="socio-expand__info">
+              <span class="socio-expand__title">Élection sociocratique</span>
+              <span class="socio-expand__meta">6 étapes · clarification · consentement collectif</span>
+            </div>
+            <span class="socio-expand__tag">Modalité d'élection</span>
+            <UIcon
+              :name="expandSocio ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+              class="socio-expand__toggle"
+            />
+          </button>
+          <Transition name="socio-expand">
+            <div v-if="expandSocio" class="socio-expand__content">
+              <SocioElection />
+            </div>
+          </Transition>
+        </div>
      </div>
    </div>
  </div>
@@ -329,4 +354,99 @@ const sections: ToolSection[] = [
  opacity: 1;
  color: var(--section-color);
 }
+
+/* --- Élection sociocratique expandable --- */
+.socio-expand {
+  margin-top: 0.5rem;
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--mood-surface);
+}
+
+.socio-expand__trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 1rem 1.125rem;
+  cursor: pointer;
+  background: none;
+  text-align: left;
+  transition: background 0.12s;
+}
+.socio-expand__trigger:hover { background: var(--mood-accent-soft); }
+
+.socio-expand__icon {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--mood-success) 12%, transparent);
+  color: var(--mood-success);
+}
+
+.socio-expand__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+}
+
+.socio-expand__title {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--mood-text);
+}
+
+.socio-expand__meta {
+  font-size: 0.75rem;
+  color: var(--mood-text-muted);
+}
+
+.socio-expand__tag {
+  font-size: 0.625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 3px 8px;
+  border-radius: 20px;
+  background: color-mix(in srgb, var(--mood-success) 12%, transparent);
+  color: var(--mood-success);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+@media (max-width: 480px) {
+  .socio-expand__tag { display: none; }
+}
+
+.socio-expand__toggle {
+  flex-shrink: 0;
+  color: var(--mood-text-muted);
+  font-size: 0.875rem;
+}
+
+.socio-expand__content {
+  padding: 0 1rem 1rem;
+}
+
+.socio-expand-enter-active,
+.socio-expand-leave-active {
+  transition: all 0.25s ease;
+  overflow: hidden;
+}
+.socio-expand-enter-from,
+.socio-expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.socio-expand-enter-to,
+.socio-expand-leave-from {
+  max-height: 2000px;
+  opacity: 1;
+}
 </style>
--- a/frontend/app/stores/auth.ts
+++ b/frontend/app/stores/auth.ts
@@ -149,10 +149,15 @@ export const useAuthStore = defineStore('auth', {
        const identity = await $api<DuniterIdentity>('/auth/me')
        this.identity = identity
      } catch (err: any) {
-        this.error = err?.data?.detail || err?.message || 'Session invalide'
-        this.token = null
-        this.identity = null
-        this._clearToken()
+        const status = (err as any)?.status ?? 0
+        this.error = err?.message || 'Session invalide'
+        // N'effacer le token que sur 401/403 (session réellement invalide)
+        // Les erreurs réseau ou 5xx sont transitoires — conserver la session
+        if (status === 401 || status === 403) {
+          this.token = null
+          this.identity = null
+          this._clearToken()
+        }
        throw err
      } finally {
        this.loading = false
--- a/frontend/app/stores/organizations.ts
+++ b/frontend/app/stores/organizations.ts
@@ -0,0 +1,71 @@
+export interface Organization {
+  id: string
+  name: string
+  slug: string
+  org_type: string
+  is_transparent: boolean
+  color: string | null
+  icon: string | null
+  description: string | null
+  created_at: string
+}
+
+interface OrgState {
+  organizations: Organization[]
+  activeSlug: string | null
+  loading: boolean
+  error: string | null
+}
+
+export const useOrganizationsStore = defineStore('organizations', {
+  state: (): OrgState => ({
+    organizations: [],
+    activeSlug: null,
+    loading: false,
+    error: null,
+  }),
+
+  getters: {
+    active: (state): Organization | null =>
+      state.organizations.find(o => o.slug === state.activeSlug) ?? state.organizations[0] ?? null,
+
+    hasOrganizations: (state): boolean => state.organizations.length > 0,
+  },
+
+  actions: {
+    async fetchOrganizations() {
+      this.loading = true
+      this.error = null
+      try {
+        const { $api } = useApi()
+        const orgs = await $api<Organization[]>('/organizations/')
+        // Duniter G1 first, then alphabetical
+        this.organizations = orgs.sort((a, b) => {
+          if (a.slug === 'duniter-g1') return -1
+          if (b.slug === 'duniter-g1') return 1
+          return a.name.localeCompare(b.name)
+        })
+        // Restore persisted active slug, or default to first org
+        const stored = import.meta.client ? localStorage.getItem('libredecision_org') : null
+        if (stored && this.organizations.some(o => o.slug === stored)) {
+          this.activeSlug = stored
+        } else if (this.organizations.length > 0) {
+          this.activeSlug = this.organizations[0].slug
+        }
+      } catch (err: any) {
+        this.error = err?.message || 'Erreur lors du chargement des organisations'
+      } finally {
+        this.loading = false
+      }
+    },
+
+    setActive(slug: string) {
+      if (this.organizations.some(o => o.slug === slug)) {
+        this.activeSlug = slug
+        if (import.meta.client) {
+          localStorage.setItem('libredecision_org', slug)
+        }
+      }
+    },
+  },
+})