feat: page Routing complète + gestion server_audio_users dans Config

- Page Routing : matrices Entrées→Groupes et Groupes→Sorties avec checkboxes,
  éditeur de noms de canaux (ajout/suppression dynamique), sauvegarde YAML directe
- Page Config : section Utilisateurs Audio Serveur (CRUD complet, modal avec
  sélecteur de groupe, canaux entrée/sortie)
- IPC main.js : handlers server-audio-users:list/create/update/delete,
  routing:get, routing:save
- preload.js : namespaces electronAPI.serverAudioUsers et electronAPI.routing
- showModal : support du type 'select' avec options
- loadViewData : routing et config lisibles sans serveur (YAML direct)

electron/main.js

@@ -436,6 +436,89 @@ app.whenReady().then(async () => {
     }
   });
 
+  // ========== Server Audio Users (lecture/écriture YAML directe) ==========
+
+  ipcMain.handle('server-audio-users:list', () => {
+    try {
+      const config = readConfig();
+      return { users: config.server_audio_users || [] };
+    } catch (error) {
+      return { users: [], error: error.message };
+    }
+  });
+
+  ipcMain.handle('server-audio-users:create', (event, { name, group, input_channel, output_channel }) => {
+    try {
+      const config = readConfig();
+      const users = config.server_audio_users || [];
+      if (users.find(u => u.name === name)) {
+        return { success: false, error: `Un utilisateur "${name}" existe déjà` };
+      }
+      const user = { name, group, input_channel: parseInt(input_channel), output_channel: parseInt(output_channel) };
+      config.server_audio_users = [...users, user];
+      writeConfig(config);
+      return { success: true, user };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
+  ipcMain.handle('server-audio-users:update', (event, { name, group, input_channel, output_channel }) => {
+    try {
+      const config = readConfig();
+      const users = config.server_audio_users || [];
+      const idx = users.findIndex(u => u.name === name);
+      if (idx === -1) return { success: false, error: `Utilisateur "${name}" introuvable` };
+      config.server_audio_users[idx] = { name, group, input_channel: parseInt(input_channel), output_channel: parseInt(output_channel) };
+      writeConfig(config);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
+  ipcMain.handle('server-audio-users:delete', (event, { name }) => {
+    try {
+      const config = readConfig();
+      const users = config.server_audio_users || [];
+      const idx = users.findIndex(u => u.name === name);
+      if (idx === -1) return { success: false, error: `Utilisateur "${name}" introuvable` };
+      config.server_audio_users.splice(idx, 1);
+      writeConfig(config);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
+  // ========== Routing (lecture/écriture YAML directe) ==========
+
+  ipcMain.handle('routing:get', () => {
+    try {
+      const config = readConfig();
+      return {
+        routing: config.audio?.routing || { inputToGroup: {}, groupToOutput: {}, gains: {} },
+        channelNames: config.audio?.channelNames || { inputs: {}, outputs: {} },
+        groups: config.groups || []
+      };
+    } catch (error) {
+      return { error: error.message };
+    }
+  });
+
+  ipcMain.handle('routing:save', (event, { routing, channelNames }) => {
+    try {
+      const config = readConfig();
+      if (!config.audio) config.audio = {};
+      config.audio.routing = routing;
+      config.audio.channelNames = channelNames;
+      writeConfig(config);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
   ipcMain.handle('config:export', async () => {
     const configPath = path.join(__dirname, '..', 'server', 'config', 'config.yaml');
 

electron/preload.js

@@ -51,6 +51,20 @@ contextBridge.exposeInMainWorld('electronAPI', {
     delete: (data) => ipcRenderer.invoke('groups:delete', data)
   },
 
+  // Utilisateurs audio serveur : lecture/écriture YAML directe (fonctionne sans serveur)
+  serverAudioUsers: {
+    list: () => ipcRenderer.invoke('server-audio-users:list'),
+    create: (data) => ipcRenderer.invoke('server-audio-users:create', data),
+    update: (data) => ipcRenderer.invoke('server-audio-users:update', data),
+    delete: (data) => ipcRenderer.invoke('server-audio-users:delete', data)
+  },
+
+  // Routing audio : lecture/écriture YAML directe (fonctionne sans serveur)
+  routing: {
+    get: () => ipcRenderer.invoke('routing:get'),
+    save: (data) => ipcRenderer.invoke('routing:save', data)
+  },
+
   // Helpers
   platform: process.platform,
   version: process.env.npm_package_version || '0.3.0'

electron/ui/app.js

@@ -9,6 +9,7 @@ let serverRunning = false;
 let statsInterval = null;
 let logsBuffer = [];
 let audioLevelsWS = null;
+let routingData = null;
 let audioLevelsData = {
   inputs: {},
   groups: {},
@@ -572,12 +573,26 @@ async function loadInitialData() {
 }
 
 async function loadViewData(view) {
-  // Les groupes sont lisibles même sans serveur (config.yaml direct)
+  // Ces vues lisent config.yaml directement (fonctionne sans serveur)
   if (view === 'groups') {
     await fetchGroups();
     return;
   }
 
+  if (view === 'routing') {
+    await fetchRouting();
+    return;
+  }
+
+  if (view === 'config') {
+    await fetchServerAudioUsers();
+    if (serverRunning) {
+      await fetchDevices();
+      await fetchConfig();
+    }
+    return;
+  }
+
   if (!serverRunning) return;
 
   switch (view) {
@@ -586,10 +601,6 @@ async function loadViewData(view) {
       await fetchUsers();
       await generateQRCode();
       break;
-    case 'config':
-      await fetchDevices();
-      await fetchConfig();
-      break;
     case 'monitoring':
       renderVUMeters();
       break;
@@ -778,8 +789,372 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
   }
+
+  // Bouton ajouter utilisateur audio serveur
+  const btnAddSAU = document.getElementById('btn-add-server-audio-user');
+  if (btnAddSAU) {
+    btnAddSAU.addEventListener('click', addServerAudioUser);
+  }
+
+  // Délégation modifier/supprimer utilisateur audio serveur
+  const sauList = document.getElementById('server-audio-users-list');
+  if (sauList) {
+    sauList.addEventListener('click', async (e) => {
+      const btn = e.target.closest('[data-sau-action]');
+      if (!btn) return;
+      const action = btn.dataset.sauAction;
+      const name = btn.dataset.sauName;
+      if (action === 'edit') {
+        await editServerAudioUser(name, btn.dataset.sauGroup, parseInt(btn.dataset.sauInput), parseInt(btn.dataset.sauOutput));
+      } else if (action === 'delete') {
+        await deleteServerAudioUser(name);
+      }
+    });
+  }
+
+  // Boutons routing
+  document.getElementById('btn-save-routing')?.addEventListener('click', saveRouting);
+  document.getElementById('btn-reload-routing')?.addEventListener('click', fetchRouting);
+  document.getElementById('btn-add-input-channel')?.addEventListener('click', () => addChannelRow('input'));
+  document.getElementById('btn-add-output-channel')?.addEventListener('click', () => addChannelRow('output'));
+
+  // Délégation suppression lignes canal (boutons ✕)
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('.channel-name-delete');
+    if (!btn) return;
+    deleteChannelRow(btn.dataset.dir, btn.dataset.channel);
+  });
 });
 
+// ========== Server Audio Users ==========
+
+async function fetchServerAudioUsers() {
+  const container = document.getElementById('server-audio-users-list');
+  if (!container) return;
+
+  const data = await window.electronAPI.serverAudioUsers.list();
+
+  const serverNote = serverRunning ? '' :
+    '<p class="config-note" style="margin-bottom:1rem">Serveur arrêté — les modifications seront appliquées au prochain démarrage.</p>';
+
+  if (!data.users || data.users.length === 0) {
+    container.innerHTML = serverNote + '<p class="empty-state">Aucun utilisateur audio serveur configuré</p>';
+    return;
+  }
+
+  container.innerHTML = serverNote + data.users.map(user => `
+    <div class="group-item">
+      <div class="group-info">
+        <h4>${escapeHtml(user.name)}</h4>
+        <p>Groupe: <strong>${escapeHtml(user.group)}</strong> · Entrée: canal ${user.input_channel} · Sortie: canal ${user.output_channel}</p>
+      </div>
+      <div class="group-actions">
+        <button class="btn btn-small btn-secondary"
+          data-sau-action="edit"
+          data-sau-name="${escapeHtml(user.name)}"
+          data-sau-group="${escapeHtml(user.group)}"
+          data-sau-input="${user.input_channel}"
+          data-sau-output="${user.output_channel}">Modifier</button>
+        <button class="btn btn-small btn-danger"
+          data-sau-action="delete"
+          data-sau-name="${escapeHtml(user.name)}">Supprimer</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+async function addServerAudioUser() {
+  const groupsData = await window.electronAPI.groups.list();
+  const groupOptions = (groupsData.groups || []).map(g => ({
+    value: slugify(g.name),
+    label: g.name
+  }));
+  const defaultGroup = groupOptions[0]?.value || 'default';
+
+  const result = await showModal({
+    title: 'Nouvel utilisateur audio serveur',
+    fields: [
+      { name: 'name', label: 'Nom (identifiant unique, ex: foh)' },
+      { name: 'group', label: 'Groupe', type: 'select', options: groupOptions, default: defaultGroup },
+      { name: 'input_channel', label: 'Canal entrée (index physique)', type: 'number', default: 0, min: 0, max: 63, step: 1 },
+      { name: 'output_channel', label: 'Canal sortie (index physique)', type: 'number', default: 0, min: 0, max: 63, step: 1 }
+    ],
+    confirmLabel: 'Ajouter'
+  });
+
+  if (!result || !result.name.trim()) return;
+
+  const res = await window.electronAPI.serverAudioUsers.create({
+    name: result.name.trim(),
+    group: result.group,
+    input_channel: parseInt(result.input_channel),
+    output_channel: parseInt(result.output_channel)
+  });
+
+  if (res.success) {
+    showNotification('Utilisateur audio serveur ajouté', 'success');
+    await fetchServerAudioUsers();
+  } else {
+    showNotification('Erreur: ' + (res.error || 'Création échouée'), 'error');
+  }
+}
+
+async function editServerAudioUser(name, group, input_channel, output_channel) {
+  const groupsData = await window.electronAPI.groups.list();
+  const groupOptions = (groupsData.groups || []).map(g => ({
+    value: slugify(g.name),
+    label: g.name
+  }));
+
+  const result = await showModal({
+    title: `Modifier "${name}"`,
+    fields: [
+      { name: 'group', label: 'Groupe', type: 'select', options: groupOptions, default: group },
+      { name: 'input_channel', label: 'Canal entrée (index physique)', type: 'number', default: input_channel, min: 0, max: 63, step: 1 },
+      { name: 'output_channel', label: 'Canal sortie (index physique)', type: 'number', default: output_channel, min: 0, max: 63, step: 1 }
+    ],
+    confirmLabel: 'Modifier'
+  });
+
+  if (!result) return;
+
+  const res = await window.electronAPI.serverAudioUsers.update({
+    name,
+    group: result.group,
+    input_channel: parseInt(result.input_channel),
+    output_channel: parseInt(result.output_channel)
+  });
+
+  if (res.success) {
+    showNotification('Utilisateur audio serveur modifié', 'success');
+    await fetchServerAudioUsers();
+  } else {
+    showNotification('Erreur: ' + (res.error || 'Modification échouée'), 'error');
+  }
+}
+
+async function deleteServerAudioUser(name) {
+  const confirmed = await showModal({
+    title: 'Supprimer l\'utilisateur audio serveur',
+    message: `Supprimer "${name}" ? Cette action est irréversible.`,
+    confirmLabel: 'Supprimer',
+    confirmClass: 'btn-danger'
+  });
+
+  if (!confirmed) return;
+
+  const res = await window.electronAPI.serverAudioUsers.delete({ name });
+
+  if (res.success) {
+    showNotification('Utilisateur audio serveur supprimé', 'success');
+    await fetchServerAudioUsers();
+  } else {
+    showNotification('Erreur: ' + (res.error || 'Suppression échouée'), 'error');
+  }
+}
+
+// ========== Routing ==========
+
+async function fetchRouting() {
+  const data = await window.electronAPI.routing.get();
+  if (data.error) {
+    showNotification('Erreur chargement routing: ' + data.error, 'error');
+    return;
+  }
+  routingData = data;
+  renderRoutingView();
+}
+
+function renderRoutingView() {
+  if (!routingData) return;
+  renderChannelNamesEditor();
+  renderRoutingMatrices();
+}
+
+function renderChannelNamesEditor() {
+  const { channelNames } = routingData;
+  const inputs = channelNames?.inputs || {};
+  const outputs = channelNames?.outputs || {};
+
+  const inputChannels = Object.keys(inputs).sort((a, b) => parseInt(a) - parseInt(b));
+  const outputChannels = Object.keys(outputs).sort((a, b) => parseInt(a) - parseInt(b));
+
+  const inputsContainer = document.getElementById('channel-names-inputs');
+  const outputsContainer = document.getElementById('channel-names-outputs');
+
+  if (inputsContainer) {
+    inputsContainer.innerHTML = inputChannels.length > 0
+      ? inputChannels.map(ch => channelNameRow('input', ch, inputs[ch] || '')).join('')
+      : '<p class="config-note">Aucun canal d\'entrée défini.</p>';
+  }
+
+  if (outputsContainer) {
+    outputsContainer.innerHTML = outputChannels.length > 0
+      ? outputChannels.map(ch => channelNameRow('output', ch, outputs[ch] || '')).join('')
+      : '<p class="config-note">Aucun canal de sortie défini.</p>';
+  }
+}
+
+function channelNameRow(dir, ch, name) {
+  return `
+    <div class="channel-name-row" data-channel="${ch}" data-dir="${dir}">
+      <span class="channel-index">Canal ${ch}</span>
+      <input type="text" class="form-control form-control-small channel-name-input"
+             data-dir="${dir}" data-channel="${ch}"
+             value="${escapeHtml(name)}" placeholder="Nom du canal">
+      <button class="btn btn-small btn-danger channel-name-delete" data-dir="${dir}" data-channel="${ch}">✕</button>
+    </div>`;
+}
+
+function addChannelRow(dir) {
+  const containerId = dir === 'input' ? 'channel-names-inputs' : 'channel-names-outputs';
+  const container = document.getElementById(containerId);
+  if (!container) return;
+
+  // Retirer le message "Aucun canal" si présent
+  const emptyMsg = container.querySelector('.config-note');
+  if (emptyMsg) emptyMsg.remove();
+
+  const existing = Array.from(container.querySelectorAll('.channel-name-row'))
+    .map(r => parseInt(r.dataset.channel))
+    .filter(n => !isNaN(n));
+  const nextCh = existing.length > 0 ? Math.max(...existing) + 1 : 0;
+
+  const row = document.createElement('div');
+  row.innerHTML = channelNameRow(dir, nextCh, '');
+  const newRow = row.firstElementChild;
+  container.appendChild(newRow);
+  newRow.querySelector('input')?.focus();
+}
+
+function deleteChannelRow(dir, channel) {
+  const containerId = dir === 'input' ? 'channel-names-inputs' : 'channel-names-outputs';
+  const container = document.getElementById(containerId);
+  const row = container?.querySelector(`.channel-name-row[data-channel="${channel}"][data-dir="${dir}"]`);
+  if (!row) return;
+  row.remove();
+  if (!container.querySelector('.channel-name-row')) {
+    container.innerHTML = `<p class="config-note">Aucun canal de ${dir === 'input' ? 'entrée' : 'sortie'} défini.</p>`;
+  }
+}
+
+function renderRoutingMatrices() {
+  const { routing, channelNames, groups } = routingData;
+  const inputs = channelNames?.inputs || {};
+  const outputs = channelNames?.outputs || {};
+  const inputToGroup = routing?.inputToGroup || {};
+  const groupToOutput = routing?.groupToOutput || {};
+
+  const inputChannels = Object.keys(inputs).sort((a, b) => parseInt(a) - parseInt(b));
+  const outputChannels = Object.keys(outputs).sort((a, b) => parseInt(a) - parseInt(b));
+
+  // Matrice Entrées → Groupes
+  const inputMatrixEl = document.getElementById('routing-input-matrix');
+  if (inputMatrixEl) {
+    if (inputChannels.length === 0 || groups.length === 0) {
+      inputMatrixEl.innerHTML = '<p class="empty-state">Définissez des canaux d\'entrée et des groupes pour configurer le routing.</p>';
+    } else {
+      let html = '<div class="routing-matrix-scroll"><table class="routing-matrix"><thead><tr>';
+      html += '<th class="matrix-label-cell">Canal Entrée</th>';
+      groups.forEach(g => { html += `<th class="matrix-group-header">${escapeHtml(g.name)}</th>`; });
+      html += '</tr></thead><tbody>';
+
+      inputChannels.forEach(ch => {
+        const chGroups = inputToGroup[ch] || [];
+        html += '<tr>';
+        html += `<td class="matrix-channel-label"><span class="ch-index">${ch}</span><span class="ch-name">${escapeHtml(inputs[ch] || `Canal ${ch}`)}</span></td>`;
+        groups.forEach(g => {
+          const gId = slugify(g.name);
+          const checked = chGroups.includes(gId) ? 'checked' : '';
+          html += `<td class="matrix-cell"><input type="checkbox" class="routing-check" data-direction="input" data-channel="${ch}" data-group="${gId}" ${checked}></td>`;
+        });
+        html += '</tr>';
+      });
+
+      html += '</tbody></table></div>';
+      inputMatrixEl.innerHTML = html;
+    }
+  }
+
+  // Matrice Groupes → Sorties
+  const outputMatrixEl = document.getElementById('routing-output-matrix');
+  if (outputMatrixEl) {
+    if (groups.length === 0 || outputChannels.length === 0) {
+      outputMatrixEl.innerHTML = '<p class="empty-state">Définissez des canaux de sortie et des groupes pour configurer le routing.</p>';
+    } else {
+      let html = '<div class="routing-matrix-scroll"><table class="routing-matrix"><thead><tr>';
+      html += '<th class="matrix-label-cell">Groupe</th>';
+      outputChannels.forEach(ch => {
+        html += `<th class="matrix-group-header"><span class="ch-index">${ch}</span><br><span class="ch-name">${escapeHtml(outputs[ch] || `Canal ${ch}`)}</span></th>`;
+      });
+      html += '</tr></thead><tbody>';
+
+      groups.forEach(g => {
+        const gId = slugify(g.name);
+        const gOutputs = groupToOutput[gId] || [];
+        html += '<tr>';
+        html += `<td class="matrix-channel-label">${escapeHtml(g.name)}</td>`;
+        outputChannels.forEach(ch => {
+          const checked = gOutputs.includes(ch) ? 'checked' : '';
+          html += `<td class="matrix-cell"><input type="checkbox" class="routing-check" data-direction="output" data-channel="${ch}" data-group="${gId}" ${checked}></td>`;
+        });
+        html += '</tr>';
+      });
+
+      html += '</tbody></table></div>';
+      outputMatrixEl.innerHTML = html;
+    }
+  }
+}
+
+async function saveRouting() {
+  if (!routingData) return;
+
+  // Collecter les noms de canaux depuis le DOM
+  const newChannelNames = { inputs: {}, outputs: {} };
+  document.querySelectorAll('.channel-name-input[data-dir="input"]').forEach(el => {
+    newChannelNames.inputs[el.dataset.channel] = el.value;
+  });
+  document.querySelectorAll('.channel-name-input[data-dir="output"]').forEach(el => {
+    newChannelNames.outputs[el.dataset.channel] = el.value;
+  });
+
+  // Collecter le routing depuis les checkboxes
+  const newInputToGroup = {};
+  const newGroupToOutput = {};
+
+  document.querySelectorAll('.routing-check[data-direction="input"]:checked').forEach(cb => {
+    const ch = cb.dataset.channel;
+    if (!newInputToGroup[ch]) newInputToGroup[ch] = [];
+    if (!newInputToGroup[ch].includes(cb.dataset.group)) newInputToGroup[ch].push(cb.dataset.group);
+  });
+
+  document.querySelectorAll('.routing-check[data-direction="output"]:checked').forEach(cb => {
+    const g = cb.dataset.group;
+    if (!newGroupToOutput[g]) newGroupToOutput[g] = [];
+    if (!newGroupToOutput[g].includes(cb.dataset.channel)) newGroupToOutput[g].push(cb.dataset.channel);
+  });
+
+  const newRouting = {
+    ...(routingData.routing || {}),
+    inputToGroup: newInputToGroup,
+    groupToOutput: newGroupToOutput
+  };
+
+  const result = await window.electronAPI.routing.save({ routing: newRouting, channelNames: newChannelNames });
+
+  if (result.success) {
+    routingData.routing = newRouting;
+    routingData.channelNames = newChannelNames;
+    renderRoutingView();
+    showNotification('Routing sauvegardé', 'success');
+    const note = document.getElementById('routing-server-note');
+    if (note) note.classList.remove('hidden');
+  } else {
+    showNotification('Erreur: ' + (result.error || 'Sauvegarde échouée'), 'error');
+  }
+}
+
 // ========== Helpers ==========
 
 /**
@@ -802,19 +1177,30 @@ function showModal({ title, fields = [], confirmLabel = 'Confirmer', confirmClas
     if (message) {
       bodyEl.innerHTML = `<p class="modal-message">${escapeHtml(message)}</p>`;
     } else {
-      bodyEl.innerHTML = fields.map(field => `
+      bodyEl.innerHTML = fields.map(field => {
-        <div class="form-group">
+        if (field.type === 'select') {
-          <label>${escapeHtml(field.label)}</label>
+          const optionsHtml = (field.options || []).map(opt =>
-          <input
+            `<option value="${escapeHtml(opt.value)}" ${opt.value === field.default ? 'selected' : ''}>${escapeHtml(opt.label)}</option>`
-            type="${field.type || 'text'}"
+          ).join('');
-            id="modal-field-${field.name}"
+          return `
-            class="form-control"
+            <div class="form-group">
-            value="${escapeHtml(String(field.default ?? ''))}"
+              <label>${escapeHtml(field.label)}</label>
-            ${field.min !== undefined ? `min="${field.min}"` : ''}
+              <select id="modal-field-${field.name}" class="form-control">${optionsHtml}</select>
-            ${field.max !== undefined ? `max="${field.max}"` : ''}
+            </div>`;
-            ${field.step !== undefined ? `step="${field.step}"` : ''}>
+        }
-        </div>
+        return `
-      `).join('');
+          <div class="form-group">
+            <label>${escapeHtml(field.label)}</label>
+            <input
+              type="${field.type || 'text'}"
+              id="modal-field-${field.name}"
+              class="form-control"
+              value="${escapeHtml(String(field.default ?? ''))}"
+              ${field.min !== undefined ? `min="${field.min}"` : ''}
+              ${field.max !== undefined ? `max="${field.max}"` : ''}
+              ${field.step !== undefined ? `step="${field.step}"` : ''}>
+          </div>`;
+      }).join('');
     }
 
     overlay.classList.remove('hidden');

electron/ui/index.html

@@ -40,6 +40,9 @@
         <button class="nav-item" data-view="groups">
           👥 Groupes
         </button>
+        <button class="nav-item" data-view="routing">
+          🔀 Routing
+        </button>
         <button class="nav-item" data-view="monitoring">
           📈 Monitoring
         </button>
@@ -123,6 +126,15 @@
             <button class="btn btn-primary" id="btn-save-device">Appliquer</button>
           </div>
 
+          <div class="section">
+            <h3>🔗 Utilisateurs Audio Serveur</h3>
+            <p class="config-note" style="margin-bottom: 1rem">Participants LiveKit côté serveur avec canaux physiques d'entrée et de sortie dédiés (mix-minus natif). Voir aussi la page <strong>Routing</strong> pour le câblage entre canaux et groupes.</p>
+            <button class="btn btn-primary btn-small" id="btn-add-server-audio-user">➕ Ajouter</button>
+            <div id="server-audio-users-list" class="groups-list" style="margin-top: 1rem">
+              <p class="empty-state">Chargement...</p>
+            </div>
+          </div>
+
           <div class="section">
             <h3>💾 Sauvegarde de configuration</h3>
             <div class="config-actions">
@@ -163,6 +175,62 @@
           </div>
         </div>
 
+        <!-- Routing View -->
+        <div id="view-routing" class="view">
+          <h2>Routing Audio</h2>
+
+          <!-- Noms des canaux -->
+          <div class="section">
+            <h3>🏷️ Noms des Canaux</h3>
+            <p class="config-note" style="margin-bottom: 1rem">Définissez les canaux physiques disponibles. Les matrices de routing se mettent à jour après la sauvegarde.</p>
+            <div class="channel-names-grid">
+              <div class="channel-names-col">
+                <div class="channel-names-col-header">
+                  <h4>Canaux Entrée</h4>
+                  <button class="btn btn-small btn-secondary" id="btn-add-input-channel">➕ Ajouter</button>
+                </div>
+                <div id="channel-names-inputs" class="channel-names-list">
+                  <p class="empty-state">Chargement...</p>
+                </div>
+              </div>
+              <div class="channel-names-col">
+                <div class="channel-names-col-header">
+                  <h4>Canaux Sortie</h4>
+                  <button class="btn btn-small btn-secondary" id="btn-add-output-channel">➕ Ajouter</button>
+                </div>
+                <div id="channel-names-outputs" class="channel-names-list">
+                  <p class="empty-state">Chargement...</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Matrice Entrées → Groupes -->
+          <div class="section">
+            <h3>🎙️ Entrées → Groupes</h3>
+            <p class="config-note" style="margin-bottom: 1rem">Quels canaux physiques d'entrée alimentent quels groupes LiveKit.</p>
+            <div class="routing-matrix-wrapper" id="routing-input-matrix">
+              <p class="empty-state">Chargement...</p>
+            </div>
+          </div>
+
+          <!-- Matrice Groupes → Sorties -->
+          <div class="section">
+            <h3>🔊 Groupes → Sorties</h3>
+            <p class="config-note" style="margin-bottom: 1rem">Vers quels canaux physiques de sortie chaque groupe est routé.</p>
+            <div class="routing-matrix-wrapper" id="routing-output-matrix">
+              <p class="empty-state">Chargement...</p>
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div class="routing-actions">
+            <button class="btn btn-primary" id="btn-save-routing">Sauvegarder</button>
+            <button class="btn btn-secondary" id="btn-reload-routing">Recharger</button>
+            <span class="config-note routing-restart-note hidden" id="routing-server-note">⚠️ Redémarrez le serveur pour appliquer les changements.</span>
+          </div>
+        </div>
+
         <!-- Monitoring View -->
         <div id="view-monitoring" class="view">
           <h2>Monitoring Audio</h2>

electron/ui/styles.css

@@ -800,3 +800,157 @@ body {
     opacity: 0.3;
   }
 }
+
+/* ========== Routing View ========== */
+
+.routing-matrix-wrapper {
+  overflow-x: auto;
+}
+
+.routing-matrix-scroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.routing-matrix {
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  min-width: 100%;
+}
+
+.routing-matrix th,
+.routing-matrix td {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.routing-matrix thead th {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.matrix-label-cell {
+  text-align: left;
+  font-weight: 600;
+  background: var(--bg-tertiary);
+  min-width: 200px;
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+
+.matrix-group-header {
+  min-width: 110px;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.matrix-channel-label {
+  text-align: left;
+  white-space: nowrap;
+  background: var(--bg-secondary);
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+
+.ch-index {
+  display: inline-block;
+  background: var(--bg-primary);
+  color: var(--accent-primary);
+  font-family: 'Courier New', monospace;
+  font-size: 0.75rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 3px;
+  margin-right: 0.5rem;
+  min-width: 24px;
+  text-align: center;
+}
+
+.ch-name {
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+}
+
+.matrix-cell {
+  text-align: center;
+}
+
+.matrix-cell input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--accent-primary);
+}
+
+.routing-matrix tbody tr:hover .matrix-channel-label,
+.routing-matrix tbody tr:hover td {
+  background: rgba(74, 158, 255, 0.05);
+}
+
+/* Channel Names Editor */
+
+.channel-names-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+
+.channel-names-col-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.channel-names-col-header h4 {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin: 0;
+}
+
+.channel-names-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.channel-name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.channel-index {
+  min-width: 58px;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  font-family: 'Courier New', monospace;
+  flex-shrink: 0;
+}
+
+/* Routing actions bar */
+
+.routing-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 0 1.5rem;
+}
+
+.routing-restart-note {
+  color: var(--accent-warning);
+}
+
+.routing-restart-note.hidden {
+  display: none;
+}