Sprint 3 : protocoles de vote et boite a outils

Backend:
- Sessions de vote : list, close, tally, threshold details, auto-expiration
- Protocoles : update, simulate, meta-gouvernance, formulas CRUD
- Service vote enrichi : close_session, get_threshold_details, nuanced breakdown
- Schemas : ThresholdDetailOut, VoteResultOut, FormulaSimulationRequest/Result
- WebSocket broadcast sur chaque vote + fermeture session
- 25 nouveaux tests (threshold details, close, nuanced, simulation)

Frontend:
- 5 composants vote : VoteBinary, VoteNuanced, ThresholdGauge, FormulaDisplay, VoteHistory
- 3 composants protocoles : ProtocolPicker, FormulaEditor, ModeParamsDisplay
- Simulateur de formules interactif (page /protocols/formulas)
- Page detail protocole (/protocols/[id])
- Composable useWebSocket (live updates)
- Composable useVoteFormula (calcul client-side reactif)
- Integration KaTeX pour rendu LaTeX des formules

Documentation:
- API reference : 8 nouveaux endpoints documentes
- Formules : tables d'inertie, parametres detailles, simulation API
- Guide vote : vote binaire/nuance, jauge, historique, simulateur, meta-gouvernance

55 tests passes (+ 1 skipped), 126 fichiers total.

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

frontend/app/pages/protocols/[id].vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+/**
+ * Protocol detail page.
+ *
+ * Displays full protocol information including name, type, description,
+ * mode params, formula config, and links to the formula simulator.
+ */
+const route = useRoute()
+const protocols = useProtocolsStore()
+const votes = useVotesStore()
+
+const protocolId = computed(() => route.params.id as string)
+
+onMounted(async () => {
+  await protocols.fetchProtocolById(protocolId.value)
+})
+
+const protocol = computed(() => protocols.currentProtocol)
+
+const voteTypeLabel = (voteType: string) => {
+  switch (voteType) {
+    case 'binary': return 'Binaire'
+    case 'nuanced': return 'Nuance'
+    default: return voteType
+  }
+}
+
+const voteTypeColor = (voteType: string) => {
+  switch (voteType) {
+    case 'binary': return 'primary'
+    case 'nuanced': return 'info'
+    default: return 'neutral'
+  }
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+}
+
+/** Build simulator URL with prefilled params. */
+const simulatorLink = computed(() => {
+  if (!protocol.value?.mode_params) return '/protocols/formulas'
+  return `/protocols/formulas`
+})
+</script>
+
+<template>
+  <div class="space-y-8">
+    <!-- Header with back link -->
+    <div class="flex items-center gap-3">
+      <NuxtLink to="/protocols" class="text-gray-400 hover:text-gray-600">
+        <UIcon name="i-lucide-arrow-left" />
+      </NuxtLink>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+        Detail du protocole
+      </h1>
+    </div>
+
+    <!-- Loading -->
+    <template v-if="protocols.loading">
+      <div class="space-y-3">
+        <USkeleton class="h-12 w-3/4" />
+        <USkeleton class="h-6 w-1/2" />
+        <USkeleton class="h-48 w-full" />
+      </div>
+    </template>
+
+    <!-- Error -->
+    <template v-else-if="protocols.error">
+      <UCard>
+        <div class="flex items-center gap-3 text-red-500">
+          <UIcon name="i-lucide-alert-circle" class="text-xl" />
+          <p>{{ protocols.error }}</p>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Protocol detail -->
+    <template v-else-if="protocol">
+      <!-- Protocol header card -->
+      <UCard>
+        <div class="space-y-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <h2 class="text-xl font-bold text-gray-900 dark:text-white">
+                {{ protocol.name }}
+              </h2>
+              <p v-if="protocol.description" class="text-gray-600 dark:text-gray-400 mt-1">
+                {{ protocol.description }}
+              </p>
+              <p class="text-xs text-gray-500 mt-2">
+                Cree le {{ formatDate(protocol.created_at) }}
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <UBadge :color="(voteTypeColor(protocol.vote_type) as any)" variant="subtle">
+                {{ voteTypeLabel(protocol.vote_type) }}
+              </UBadge>
+              <UBadge v-if="protocol.is_meta_governed" color="warning" variant="subtle">
+                Meta-gouverne
+              </UBadge>
+            </div>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Mode params -->
+      <UCard v-if="protocol.mode_params">
+        <template #header>
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Parametres du mode
+          </h3>
+        </template>
+        <ModeParamsDisplay :mode-params="protocol.mode_params" />
+      </UCard>
+
+      <!-- Formula config -->
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+              Configuration de la formule : {{ protocol.formula_config.name }}
+            </h3>
+            <NuxtLink :to="simulatorLink">
+              <UButton variant="outline" size="sm" icon="i-lucide-calculator">
+                Simuler
+              </UButton>
+            </NuxtLink>
+          </div>
+        </template>
+        <FormulaDisplay :formula-config="protocol.formula_config" />
+      </UCard>
+
+      <!-- Meta-governance info -->
+      <UCard v-if="protocol.is_meta_governed">
+        <div class="flex items-center gap-3">
+          <UIcon name="i-lucide-shield" class="text-2xl text-amber-500" />
+          <div>
+            <h3 class="font-semibold text-gray-900 dark:text-white">
+              Protocole meta-gouverne
+            </h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+              Les modifications de ce protocole sont soumises au vote selon ses propres regles.
+            </p>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Related vote sessions -->
+      <UCard v-if="votes.sessions && votes.sessions.length > 0">
+        <template #header>
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Sessions de vote utilisant ce protocole
+          </h3>
+        </template>
+        <div class="space-y-2">
+          <div
+            v-for="session in votes.sessions"
+            :key="session.id"
+            class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
+          >
+            <div>
+              <span class="font-mono text-xs text-gray-600 dark:text-gray-400">
+                {{ session.id.slice(0, 8) }}...
+              </span>
+              <StatusBadge :status="session.status" type="vote" class="ml-2" />
+            </div>
+            <div class="text-sm text-gray-500">
+              {{ session.votes_total }} votes
+            </div>
+          </div>
+        </div>
+      </UCard>
+    </template>
+  </div>
+</template>

frontend/app/pages/protocols/formulas.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+/**
+ * Formula simulator page.
+ *
+ * Allows interactive adjustment of formula parameters with live threshold
+ * computation, a visual gauge, and a table of thresholds at various
+ * participation levels.
+ */
+import type { FormulaConfig } from '~/stores/protocols'
+import { encodeModeParams } from '~/utils/mode-params'
+
+const { computeThreshold, computeRequiredRatio, computeInertiaFactor } = useVoteFormula()
+
+/** Default formula config for the simulator. */
+const formulaConfig = ref<FormulaConfig>({
+  id: 'simulator',
+  name: 'Simulateur',
+  description: null,
+  duration_days: 30,
+  majority_pct: 50,
+  base_exponent: 0.1,
+  gradient_exponent: 0.2,
+  constant_base: 0,
+  smith_exponent: null,
+  techcomm_exponent: null,
+  nuanced_min_participants: null,
+  nuanced_threshold_pct: null,
+  created_at: new Date().toISOString(),
+})
+
+/** Simulation inputs. */
+const wotSize = ref(7224)
+const simulatedVotes = ref(120)
+const simulatedFor = ref(97)
+
+/** Computed threshold for current params. */
+const threshold = computed(() => {
+  try {
+    return computeThreshold(wotSize.value, simulatedVotes.value, {
+      majority_pct: formulaConfig.value.majority_pct,
+      base_exponent: formulaConfig.value.base_exponent,
+      gradient_exponent: formulaConfig.value.gradient_exponent,
+      constant_base: formulaConfig.value.constant_base,
+    })
+  } catch {
+    return 0
+  }
+})
+
+/** Computed required ratio. */
+const requiredRatio = computed(() => {
+  return computeRequiredRatio(
+    simulatedVotes.value,
+    wotSize.value,
+    formulaConfig.value.majority_pct,
+    formulaConfig.value.gradient_exponent,
+  )
+})
+
+/** Computed inertia factor. */
+const inertiaFactor = computed(() => {
+  return computeInertiaFactor(
+    simulatedVotes.value,
+    wotSize.value,
+    formulaConfig.value.gradient_exponent,
+  )
+})
+
+/** Simulated votes against. */
+const simulatedAgainst = computed(() => {
+  return Math.max(0, simulatedVotes.value - simulatedFor.value)
+})
+
+/** Mode params string for current config. */
+const modeParamsString = computed(() => {
+  try {
+    return encodeModeParams({
+      duration_days: formulaConfig.value.duration_days,
+      majority_pct: formulaConfig.value.majority_pct,
+      base_exponent: formulaConfig.value.base_exponent,
+      gradient_exponent: formulaConfig.value.gradient_exponent,
+      constant_base: formulaConfig.value.constant_base,
+      smith_exponent: formulaConfig.value.smith_exponent,
+      techcomm_exponent: formulaConfig.value.techcomm_exponent,
+    })
+  } catch {
+    return ''
+  }
+})
+
+/** Table of thresholds at various participation levels. */
+const participationLevels = [10, 50, 100, 200, 500, 1000, 3000, 5000, 7000]
+
+const thresholdTable = computed(() => {
+  return participationLevels
+    .filter(n => n <= wotSize.value)
+    .map(totalVotes => {
+      let t: number
+      let ratio: number
+      try {
+        t = computeThreshold(wotSize.value, totalVotes, {
+          majority_pct: formulaConfig.value.majority_pct,
+          base_exponent: formulaConfig.value.base_exponent,
+          gradient_exponent: formulaConfig.value.gradient_exponent,
+          constant_base: formulaConfig.value.constant_base,
+        })
+        ratio = computeRequiredRatio(
+          totalVotes,
+          wotSize.value,
+          formulaConfig.value.majority_pct,
+          formulaConfig.value.gradient_exponent,
+        )
+      } catch {
+        t = 0
+        ratio = 0
+      }
+      const participation = ((totalVotes / wotSize.value) * 100).toFixed(2)
+      return {
+        totalVotes,
+        threshold: t,
+        ratio: (ratio * 100).toFixed(1),
+        participation,
+      }
+    })
+})
+
+/** Keep simulatedFor within bounds when simulatedVotes changes. */
+watch(simulatedVotes, (newTotal) => {
+  if (simulatedFor.value > newTotal) {
+    simulatedFor.value = newTotal
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-8">
+    <!-- Header -->
+    <div>
+      <div class="flex items-center gap-3 mb-2">
+        <NuxtLink to="/protocols" class="text-gray-400 hover:text-gray-600">
+          <UIcon name="i-lucide-arrow-left" />
+        </NuxtLink>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+          Simulateur de formule de seuil
+        </h1>
+      </div>
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        Ajustez les parametres de la formule et observez le seuil calcule en temps reel.
+      </p>
+    </div>
+
+    <!-- Current mode params -->
+    <UCard v-if="modeParamsString">
+      <div class="flex items-center gap-3">
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Mode params :</span>
+        <ModeParamsDisplay :mode-params="modeParamsString" />
+      </div>
+    </UCard>
+
+    <!-- Formula editor -->
+    <UCard>
+      <template #header>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+          Parametres de la formule
+        </h2>
+      </template>
+      <FormulaEditor v-model="formulaConfig" />
+    </UCard>
+
+    <!-- Simulation inputs -->
+    <UCard>
+      <template #header>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+          Simulation
+        </h2>
+      </template>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- WoT size -->
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Taille du corpus WoT (W)
+            </label>
+            <span class="text-sm font-mono font-bold text-primary">{{ wotSize }}</span>
+          </div>
+          <UInput v-model.number="wotSize" type="number" :min="1" :max="100000" />
+        </div>
+
+        <!-- Total votes -->
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Votes totaux (T)
+            </label>
+            <span class="text-sm font-mono font-bold text-primary">{{ simulatedVotes }}</span>
+          </div>
+          <URange v-model="simulatedVotes" :min="0" :max="wotSize" :step="1" />
+        </div>
+
+        <!-- Votes for -->
+        <div class="space-y-2">
+          <div class="flex items-center justify-between">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Votes pour
+            </label>
+            <span class="text-sm font-mono font-bold text-green-600">{{ simulatedFor }}</span>
+          </div>
+          <URange v-model="simulatedFor" :min="0" :max="simulatedVotes" :step="1" />
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Results -->
+    <UCard>
+      <template #header>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+          Resultat
+        </h2>
+      </template>
+
+      <div class="space-y-6">
+        <!-- Threshold gauge -->
+        <ThresholdGauge
+          :votes-for="simulatedFor"
+          :votes-against="simulatedAgainst"
+          :threshold="threshold"
+          :wot-size="wotSize"
+        />
+
+        <!-- Key metrics -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
+            <p class="text-xs text-gray-500 mb-1">Seuil requis</p>
+            <p class="text-2xl font-bold text-primary">{{ threshold }}</p>
+          </div>
+          <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
+            <p class="text-xs text-gray-500 mb-1">Ratio requis</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">
+              {{ (requiredRatio * 100).toFixed(1) }}%
+            </p>
+          </div>
+          <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
+            <p class="text-xs text-gray-500 mb-1">Facteur d'inertie</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">
+              {{ inertiaFactor.toFixed(4) }}
+            </p>
+          </div>
+          <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
+            <p class="text-xs text-gray-500 mb-1">Participation</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">
+              {{ ((simulatedVotes / wotSize) * 100).toFixed(2) }}%
+            </p>
+          </div>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Formula display -->
+    <UCard>
+      <template #header>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+          Formule
+        </h2>
+      </template>
+      <FormulaDisplay :formula-config="formulaConfig" show-explanation />
+    </UCard>
+
+    <!-- Threshold table -->
+    <UCard>
+      <template #header>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+          Seuils par niveau de participation
+        </h2>
+      </template>
+
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-gray-200 dark:border-gray-700">
+              <th class="text-left px-4 py-3 font-medium text-gray-500">Votes totaux (T)</th>
+              <th class="text-left px-4 py-3 font-medium text-gray-500">Participation</th>
+              <th class="text-left px-4 py-3 font-medium text-gray-500">Ratio requis</th>
+              <th class="text-left px-4 py-3 font-medium text-gray-500">Seuil (votes pour)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in thresholdTable"
+              :key="row.totalVotes"
+              class="border-b border-gray-100 dark:border-gray-800"
+              :class="row.totalVotes === simulatedVotes ? 'bg-primary-50 dark:bg-primary-900/20' : ''"
+            >
+              <td class="px-4 py-3 font-mono text-gray-900 dark:text-white">{{ row.totalVotes }}</td>
+              <td class="px-4 py-3 text-gray-600">{{ row.participation }}%</td>
+              <td class="px-4 py-3 text-gray-600">{{ row.ratio }}%</td>
+              <td class="px-4 py-3 font-mono font-bold text-primary">{{ row.threshold }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </UCard>
+  </div>
+</template>

frontend/app/pages/protocols/index.vue

@@ -1,5 +1,24 @@
 <script setup lang="ts">
+/**
+ * Protocols index page.
+ *
+ * Lists all voting protocols with ModeParamsDisplay component,
+ * links to protocol detail pages, and provides creation modal
+ * and simulator link.
+ */
 const protocols = useProtocolsStore()
+const auth = useAuthStore()
+
+const showCreateModal = ref(false)
+const creating = ref(false)
+
+/** Creation form state. */
+const newProtocol = reactive({
+  name: '',
+  description: '',
+  vote_type: 'binary',
+  formula_config_id: '',
+})
 
 onMounted(async () => {
   await Promise.all([
@@ -24,14 +43,17 @@ const voteTypeColor = (voteType: string) => {
   }
 }
 
-function formatModeParamsDisplay(modeParams: string | null): string {
-  if (!modeParams) return '-'
-  try {
-    return formatModeParams(modeParams)
-  } catch {
-    return modeParams
-  }
-}
+const voteTypeOptions = [
+  { label: 'Binaire (Pour/Contre)', value: 'binary' },
+  { label: 'Nuance (6 niveaux)', value: 'nuanced' },
+]
+
+const formulaOptions = computed(() => {
+  return protocols.formulas.map(f => ({
+    label: f.name,
+    value: f.id,
+  }))
+})
 
 function formatDate(dateStr: string): string {
   return new Date(dateStr).toLocaleDateString('fr-FR', {
@@ -40,18 +62,61 @@ function formatDate(dateStr: string): string {
     year: 'numeric',
   })
 }
+
+function openCreateModal() {
+  newProtocol.name = ''
+  newProtocol.description = ''
+  newProtocol.vote_type = 'binary'
+  newProtocol.formula_config_id = ''
+  showCreateModal.value = true
+}
+
+async function createProtocol() {
+  if (!newProtocol.name.trim() || !newProtocol.formula_config_id) return
+
+  creating.value = true
+  try {
+    await protocols.createProtocol({
+      name: newProtocol.name.trim(),
+      description: newProtocol.description.trim() || null,
+      vote_type: newProtocol.vote_type,
+      formula_config_id: newProtocol.formula_config_id,
+    })
+    showCreateModal.value = false
+    await protocols.fetchProtocols()
+  } finally {
+    creating.value = false
+  }
+}
 </script>
 
 <template>
   <div class="space-y-8">
     <!-- Header -->
-    <div>
-      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
-        Protocoles de vote
-      </h1>
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        Configuration des protocoles de vote et formules de seuil WoT
-      </p>
+    <div class="flex items-start justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+          Protocoles de vote
+        </h1>
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          Configuration des protocoles de vote et formules de seuil WoT
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <NuxtLink to="/protocols/formulas">
+          <UButton variant="outline" icon="i-lucide-calculator" size="sm">
+            Simulateur de formules
+          </UButton>
+        </NuxtLink>
+        <UButton
+          v-if="auth.isAuthenticated"
+          icon="i-lucide-plus"
+          size="sm"
+          @click="openCreateModal"
+        >
+          Nouveau protocole
+        </UButton>
+      </div>
     </div>
 
     <!-- Loading state -->
@@ -88,85 +153,86 @@ function formatDate(dateStr: string): string {
         </div>
 
         <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <UCard
+          <NuxtLink
             v-for="protocol in protocols.protocols"
             :key="protocol.id"
+            :to="`/protocols/${protocol.id}`"
+            class="block"
           >
-            <div class="space-y-4">
-              <!-- Protocol header -->
-              <div class="flex items-start justify-between">
-                <div>
-                  <h3 class="font-semibold text-gray-900 dark:text-white">
-                    {{ protocol.name }}
-                  </h3>
-                  <p v-if="protocol.description" class="text-sm text-gray-500 mt-0.5">
-                    {{ protocol.description }}
-                  </p>
+            <UCard class="hover:ring-2 hover:ring-primary-300 dark:hover:ring-primary-700 transition-all cursor-pointer">
+              <div class="space-y-4">
+                <!-- Protocol header -->
+                <div class="flex items-start justify-between">
+                  <div>
+                    <h3 class="font-semibold text-gray-900 dark:text-white">
+                      {{ protocol.name }}
+                    </h3>
+                    <p v-if="protocol.description" class="text-sm text-gray-500 mt-0.5">
+                      {{ protocol.description }}
+                    </p>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <UBadge :color="(voteTypeColor(protocol.vote_type) as any)" variant="subtle" size="xs">
+                      {{ voteTypeLabel(protocol.vote_type) }}
+                    </UBadge>
+                    <UBadge v-if="protocol.is_meta_governed" color="warning" variant="subtle" size="xs">
+                      Meta-gouverne
+                    </UBadge>
+                  </div>
                 </div>
-                <div class="flex items-center gap-2">
-                  <UBadge :color="voteTypeColor(protocol.vote_type)" variant="subtle" size="xs">
-                    {{ voteTypeLabel(protocol.vote_type) }}
-                  </UBadge>
-                  <UBadge v-if="protocol.is_meta_governed" color="warning" variant="subtle" size="xs">
-                    Meta-gouverne
-                  </UBadge>
-                </div>
-              </div>
 
-              <!-- Mode params -->
-              <div v-if="protocol.mode_params" class="p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs">
-                <div class="flex items-center gap-2 mb-1">
-                  <span class="font-mono font-bold text-primary">{{ protocol.mode_params }}</span>
+                <!-- Mode params with component -->
+                <div v-if="protocol.mode_params">
+                  <ModeParamsDisplay :mode-params="protocol.mode_params" />
                 </div>
-                <p class="text-gray-500">{{ formatModeParamsDisplay(protocol.mode_params) }}</p>
-              </div>
 
-              <!-- Formula config summary -->
-              <div class="border-t border-gray-100 dark:border-gray-800 pt-3">
-                <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
-                  Formule : {{ protocol.formula_config.name }}
-                </h4>
-                <div class="grid grid-cols-3 gap-2 text-xs">
-                  <div>
-                    <span class="text-gray-400 block">Duree</span>
-                    <span class="font-medium text-gray-900 dark:text-white">
-                      {{ protocol.formula_config.duration_days }}j
-                    </span>
-                  </div>
-                  <div>
-                    <span class="text-gray-400 block">Majorite</span>
-                    <span class="font-medium text-gray-900 dark:text-white">
-                      {{ protocol.formula_config.majority_pct }}%
-                    </span>
-                  </div>
-                  <div>
-                    <span class="text-gray-400 block">Base</span>
-                    <span class="font-medium text-gray-900 dark:text-white">
-                      {{ protocol.formula_config.base_exponent }}
-                    </span>
-                  </div>
-                  <div>
-                    <span class="text-gray-400 block">Gradient</span>
-                    <span class="font-medium text-gray-900 dark:text-white">
-                      {{ protocol.formula_config.gradient_exponent }}
-                    </span>
-                  </div>
-                  <div v-if="protocol.formula_config.smith_exponent !== null">
-                    <span class="text-gray-400 block">Smith</span>
-                    <span class="font-medium text-gray-900 dark:text-white">
-                      {{ protocol.formula_config.smith_exponent }}
-                    </span>
-                  </div>
-                  <div v-if="protocol.formula_config.techcomm_exponent !== null">
-                    <span class="text-gray-400 block">TechComm</span>
-                    <span class="font-medium text-gray-900 dark:text-white">
-                      {{ protocol.formula_config.techcomm_exponent }}
-                    </span>
+                <!-- Formula config summary -->
+                <div class="border-t border-gray-100 dark:border-gray-800 pt-3">
+                  <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
+                    Formule : {{ protocol.formula_config.name }}
+                  </h4>
+                  <div class="grid grid-cols-3 gap-2 text-xs">
+                    <div>
+                      <span class="text-gray-400 block">Duree</span>
+                      <span class="font-medium text-gray-900 dark:text-white">
+                        {{ protocol.formula_config.duration_days }}j
+                      </span>
+                    </div>
+                    <div>
+                      <span class="text-gray-400 block">Majorite</span>
+                      <span class="font-medium text-gray-900 dark:text-white">
+                        {{ protocol.formula_config.majority_pct }}%
+                      </span>
+                    </div>
+                    <div>
+                      <span class="text-gray-400 block">Base</span>
+                      <span class="font-medium text-gray-900 dark:text-white">
+                        {{ protocol.formula_config.base_exponent }}
+                      </span>
+                    </div>
+                    <div>
+                      <span class="text-gray-400 block">Gradient</span>
+                      <span class="font-medium text-gray-900 dark:text-white">
+                        {{ protocol.formula_config.gradient_exponent }}
+                      </span>
+                    </div>
+                    <div v-if="protocol.formula_config.smith_exponent !== null">
+                      <span class="text-gray-400 block">Smith</span>
+                      <span class="font-medium text-gray-900 dark:text-white">
+                        {{ protocol.formula_config.smith_exponent }}
+                      </span>
+                    </div>
+                    <div v-if="protocol.formula_config.techcomm_exponent !== null">
+                      <span class="text-gray-400 block">TechComm</span>
+                      <span class="font-medium text-gray-900 dark:text-white">
+                        {{ protocol.formula_config.techcomm_exponent }}
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </UCard>
+            </UCard>
+          </NuxtLink>
         </div>
       </div>
 
@@ -253,5 +319,68 @@ function formatDate(dateStr: string): string {
         </div>
       </UCard>
     </template>
+
+    <!-- Create protocol modal -->
+    <UModal v-model:open="showCreateModal">
+      <template #content>
+        <div class="p-6 space-y-6">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Nouveau protocole de vote
+          </h3>
+
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Nom du protocole
+              </label>
+              <UInput v-model="newProtocol.name" placeholder="Ex: Vote standard G1" />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Description (optionnel)
+              </label>
+              <UTextarea v-model="newProtocol.description" placeholder="Description du protocole..." :rows="2" />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Type de vote
+              </label>
+              <USelect
+                v-model="newProtocol.vote_type"
+                :items="voteTypeOptions"
+                value-key="value"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Configuration de formule
+              </label>
+              <USelect
+                v-model="newProtocol.formula_config_id"
+                :items="formulaOptions"
+                placeholder="Selectionnez une formule..."
+                value-key="value"
+              />
+            </div>
+          </div>
+
+          <div class="flex justify-end gap-3">
+            <UButton variant="ghost" color="neutral" @click="showCreateModal = false">
+              Annuler
+            </UButton>
+            <UButton
+              :loading="creating"
+              :disabled="!newProtocol.name.trim() || !newProtocol.formula_config_id"
+              @click="createProtocol"
+            >
+              Creer le protocole
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>