refactor: simplifier AudioBridge, filtrer bridge dans PWA, option aucune sortie

- AudioBridge: retire GroupAudioRouter, LiveKitClient, routing per-group
- AudioBridgeManager: génère tokens uniquement pour server_audio_users
- ServerAudioUser: outputChannel null = pas d'émission outputReady
- PWA useLiveKit: filtre les participants role=bridge de la liste
- Electron UI: page Routing sans matrices, noms canaux + server audio users
- config.yaml: nettoyé (pas de section routing)

electron/main.js

@@ -454,7 +454,7 @@ app.whenReady().then(async () => {
       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) };
+      const user = { name, group, input_channel: parseInt(input_channel), output_channel: output_channel !== null && output_channel !== '' ? parseInt(output_channel) : null };
       config.server_audio_users = [...users, user];
       writeConfig(config);
       return { success: true, user };
@@ -469,7 +469,7 @@ app.whenReady().then(async () => {
       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) };
+      config.server_audio_users[idx] = { name, group, input_channel: parseInt(input_channel), output_channel: output_channel !== null && output_channel !== '' ? parseInt(output_channel) : null };
       writeConfig(config);
       return { success: true };
     } catch (error) {
@@ -497,20 +497,60 @@ app.whenReady().then(async () => {
     try {
       const config = readConfig();
       return {
-        routing: config.audio?.routing || { inputToGroup: {}, groupToOutput: {}, gains: {} },
         channelNames: config.audio?.channelNames || { inputs: {}, outputs: {} },
-        groups: config.groups || []
+        groups: config.groups || [],
+        serverAudioUsers: config.server_audio_users || []
       };
     } catch (error) {
       return { error: error.message };
     }
   });
 
-  ipcMain.handle('routing:save', (event, { routing, channelNames }) => {
+  // ========== Devices : découverte canaux physiques ==========
+
+  ipcMain.handle('devices:getChannels', () => {
+    try {
+      const config = readConfig();
+      const inputDeviceName = config.audio?.device?.inputDeviceId;
+      const outputDeviceName = config.audio?.device?.outputDeviceId;
+
+      let inputDevice = { name: inputDeviceName || 'Non configuré', channels: 0 };
+      let outputDevice = { name: outputDeviceName || 'Non configuré', channels: 0 };
+
+      if (process.platform === 'darwin') {
+        try {
+          const { execSync } = require('child_process');
+          const raw = execSync('system_profiler SPAudioDataType -json', { encoding: 'utf8', timeout: 5000 });
+          const data = JSON.parse(raw);
+
+          if (data.SPAudioDataType) {
+            data.SPAudioDataType.forEach(item => {
+              (item._items || []).forEach(dev => {
+                const name = dev._name || '';
+                const inCh = parseInt(dev.coreaudio_device_input) || 0;
+                const outCh = parseInt(dev.coreaudio_device_output) || 0;
+                if (inputDeviceName && name === inputDeviceName && inCh > 0) {
+                  inputDevice = { name, channels: inCh };
+                }
+                if (outputDeviceName && name === outputDeviceName && outCh > 0) {
+                  outputDevice = { name, channels: outCh };
+                }
+              });
+            });
+          }
+        } catch (_) { /* detection failed, keep defaults */ }
+      }
+
+      return { inputDevice, outputDevice };
+    } catch (error) {
+      return { error: error.message, inputDevice: { name: 'Inconnu', channels: 0 }, outputDevice: { name: 'Inconnu', channels: 0 } };
+    }
+  });
+
+  ipcMain.handle('routing:save', (event, { channelNames }) => {
     try {
       const config = readConfig();
       if (!config.audio) config.audio = {};
-      config.audio.routing = routing;
       config.audio.channelNames = channelNames;
       writeConfig(config);
       return { success: true };

electron/preload.js

@@ -65,6 +65,11 @@ contextBridge.exposeInMainWorld('electronAPI', {
     save: (data) => ipcRenderer.invoke('routing:save', data)
   },
 
+  // Découverte canaux physiques de la carte son sélectionnée
+  devices: {
+    getChannels: () => ipcRenderer.invoke('devices:getChannels')
+  },
+
   // Helpers
   platform: process.platform,
   version: process.env.npm_package_version || '0.3.0'

electron/ui/app.js

@@ -10,6 +10,7 @@ let statsInterval = null;
 let logsBuffer = [];
 let audioLevelsWS = null;
 let routingData = null;
+let deviceChannels = null;
 let audioLevelsData = {
   inputs: {},
   groups: {},
@@ -585,7 +586,6 @@ async function loadViewData(view) {
   }
 
   if (view === 'config') {
-    await fetchServerAudioUsers();
     if (serverRunning) {
       await fetchDevices();
       await fetchConfig();
@@ -790,94 +790,119 @@ 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'));
+  document.getElementById('btn-refresh-channels')?.addEventListener('click', fetchRouting);
+  document.getElementById('btn-add-server-audio-user')?.addEventListener('click', addServerAudioUser);
 
-  // Délégation suppression lignes canal (boutons ✕)
-  document.addEventListener('click', (e) => {
-    const btn = e.target.closest('.channel-name-delete');
+  // Délégation modifier/supprimer participant serveur
+  document.getElementById('server-audio-users-list')?.addEventListener('click', async (e) => {
+    const btn = e.target.closest('[data-sau-action]');
     if (!btn) return;
-    deleteChannelRow(btn.dataset.dir, btn.dataset.channel);
+    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);
+    }
   });
 });
 
-// ========== Server Audio Users ==========
+// ========== Server Audio Users (dans la vue Routing) ==========
 
-async function fetchServerAudioUsers() {
+function renderServerAudioUsers() {
   const container = document.getElementById('server-audio-users-list');
   if (!container) return;
 
-  const data = await window.electronAPI.serverAudioUsers.list();
+  const users = routingData?.serverAudioUsers || [];
+  const inputs = routingData?.channelNames?.inputs || {};
+  const outputs = routingData?.channelNames?.outputs || {};
 
-  const serverNote = serverRunning ? '' :
-    '<p class="config-note" style="margin-bottom:1rem">Serveur arrêté — les modifications seront appliquées au prochain démarrage.</p>';
+  const chLabel = (ch, dir) => {
+    if (ch === null || ch === undefined) return 'Aucune';
+    const name = dir === 'input' ? inputs[ch] : outputs[ch];
+    return name ? `Ch ${ch} · ${name}` : `Ch ${ch}`;
+  };
 
-  if (!data.users || data.users.length === 0) {
-    container.innerHTML = serverNote + '<p class="empty-state">Aucun utilisateur audio serveur configuré</p>';
+  if (users.length === 0) {
+    container.innerHTML = '<p class="empty-state" style="margin-top:1rem">Aucun participant 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('');
+  container.innerHTML = `
+    <table class="sau-table">
+      <thead>
+        <tr><th>Nom</th><th>Groupe</th><th>Entrée</th><th>Sortie</th><th></th></tr>
+      </thead>
+      <tbody>
+        ${users.map(u => `
+          <tr>
+            <td class="sau-name">${escapeHtml(u.name)}</td>
+            <td><span class="ch-badge ch-badge-group">${escapeHtml(u.group)}</span></td>
+            <td><span class="ch-badge">${chLabel(u.input_channel, 'input')}</span></td>
+            <td><span class="ch-badge">${chLabel(u.output_channel, 'output')}</span></td>
+            <td class="sau-actions">
+              <button class="btn btn-small btn-secondary"
+                data-sau-action="edit"
+                data-sau-name="${escapeHtml(u.name)}"
+                data-sau-group="${escapeHtml(u.group)}"
+                data-sau-input="${u.input_channel}"
+                data-sau-output="${u.output_channel}">Éditer</button>
+              <button class="btn btn-small btn-danger"
+                data-sau-action="delete"
+                data-sau-name="${escapeHtml(u.name)}">✕</button>
+            </td>
+          </tr>`).join('')}
+      </tbody>
+    </table>`;
+}
+
+function buildChannelOptions(dir) {
+  const channels = dir === 'input'
+    ? routingData?.deviceChannels?.inputDevice?.channels || 0
+    : routingData?.deviceChannels?.outputDevice?.channels || 0;
+  const names = dir === 'input'
+    ? routingData?.channelNames?.inputs || {}
+    : routingData?.channelNames?.outputs || {};
+
+  if (channels === 0) return null; // fallback to number input
+
+  const opts = Array.from({ length: channels }, (_, i) => ({
+    value: String(i),
+    label: names[i] ? `Ch ${i}: ${names[i]}` : `Ch ${i}`
+  }));
+
+  if (dir === 'output') {
+    opts.unshift({ value: '', label: 'Aucune sortie' });
+  }
+
+  return opts;
 }
 
 async function addServerAudioUser() {
   const groupsData = await window.electronAPI.groups.list();
-  const groupOptions = (groupsData.groups || []).map(g => ({
-    value: slugify(g.name),
-    label: g.name
-  }));
+  const groupOptions = (groupsData.groups || []).map(g => ({ value: slugify(g.name), label: g.name }));
   const defaultGroup = groupOptions[0]?.value || 'default';
 
+  const inOpts = buildChannelOptions('input');
+  const outOpts = buildChannelOptions('output');
+
+  const inputField = inOpts
+    ? { name: 'input_channel', label: 'Canal d\'entrée', type: 'select', options: inOpts, default: '0' }
+    : { name: 'input_channel', label: 'Canal entrée (index)', type: 'number', default: 0, min: 0, max: 63 };
+  const outputField = outOpts
+    ? { name: 'output_channel', label: 'Canal de sortie', type: 'select', options: outOpts, default: '' }
+    : { name: 'output_channel', label: 'Canal sortie (index, vide = aucune)', type: 'number', default: '', min: 0, max: 63 };
+
   const result = await showModal({
-    title: 'Nouvel utilisateur audio serveur',
+    title: 'Nouveau participant 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 }
+      inputField,
+      outputField
     ],
     confirmLabel: 'Ajouter'
   });
@@ -888,12 +913,12 @@ async function addServerAudioUser() {
     name: result.name.trim(),
     group: result.group,
     input_channel: parseInt(result.input_channel),
-    output_channel: parseInt(result.output_channel)
+    output_channel: result.output_channel !== '' ? parseInt(result.output_channel) : null
   });
 
   if (res.success) {
-    showNotification('Utilisateur audio serveur ajouté', 'success');
-    await fetchServerAudioUsers();
+    showNotification('Participant serveur ajouté', 'success');
+    await fetchRouting();
   } else {
     showNotification('Erreur: ' + (res.error || 'Création échouée'), 'error');
   }
@@ -901,17 +926,25 @@ async function addServerAudioUser() {
 
 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 groupOptions = (groupsData.groups || []).map(g => ({ value: slugify(g.name), label: g.name }));
+
+  const inOpts = buildChannelOptions('input');
+  const outOpts = buildChannelOptions('output');
+
+  const inputField = inOpts
+    ? { name: 'input_channel', label: 'Canal d\'entrée', type: 'select', options: inOpts, default: String(input_channel) }
+    : { name: 'input_channel', label: 'Canal entrée (index)', type: 'number', default: input_channel, min: 0, max: 63 };
+  const outputDefault = output_channel !== null && output_channel !== undefined ? String(output_channel) : '';
+  const outputField = outOpts
+    ? { name: 'output_channel', label: 'Canal de sortie', type: 'select', options: outOpts, default: outputDefault }
+    : { name: 'output_channel', label: 'Canal sortie (index, vide = aucune)', type: 'number', default: outputDefault, min: 0, max: 63 };
 
   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 }
+      inputField,
+      outputField
     ],
     confirmLabel: 'Modifier'
   });
@@ -922,12 +955,12 @@ async function editServerAudioUser(name, group, input_channel, output_channel) {
     name,
     group: result.group,
     input_channel: parseInt(result.input_channel),
-    output_channel: parseInt(result.output_channel)
+    output_channel: result.output_channel !== '' ? parseInt(result.output_channel) : null
   });
 
   if (res.success) {
-    showNotification('Utilisateur audio serveur modifié', 'success');
-    await fetchServerAudioUsers();
+    showNotification('Participant serveur modifié', 'success');
+    await fetchRouting();
   } else {
     showNotification('Erreur: ' + (res.error || 'Modification échouée'), 'error');
   }
@@ -935,7 +968,7 @@ async function editServerAudioUser(name, group, input_channel, output_channel) {
 
 async function deleteServerAudioUser(name) {
   const confirmed = await showModal({
-    title: 'Supprimer l\'utilisateur audio serveur',
+    title: 'Supprimer le participant serveur',
     message: `Supprimer "${name}" ? Cette action est irréversible.`,
     confirmLabel: 'Supprimer',
     confirmClass: 'btn-danger'
@@ -946,8 +979,8 @@ async function deleteServerAudioUser(name) {
   const res = await window.electronAPI.serverAudioUsers.delete({ name });
 
   if (res.success) {
-    showNotification('Utilisateur audio serveur supprimé', 'success');
-    await fetchServerAudioUsers();
+    showNotification('Participant serveur supprimé', 'success');
+    await fetchRouting();
   } else {
     showNotification('Erreur: ' + (res.error || 'Suppression échouée'), 'error');
   }
@@ -956,161 +989,83 @@ async function deleteServerAudioUser(name) {
 // ========== Routing ==========
 
 async function fetchRouting() {
-  const data = await window.electronAPI.routing.get();
-  if (data.error) {
-    showNotification('Erreur chargement routing: ' + data.error, 'error');
+  const [routingResult, devResult] = await Promise.all([
+    window.electronAPI.routing.get(),
+    window.electronAPI.devices.getChannels()
+  ]);
+
+  if (routingResult.error) {
+    showNotification('Erreur chargement routing: ' + routingResult.error, 'error');
     return;
   }
-  routingData = data;
+
+  deviceChannels = devResult;
+  routingData = { ...routingResult, deviceChannels: devResult };
   renderRoutingView();
 }
 
 function renderRoutingView() {
   if (!routingData) return;
-  renderChannelNamesEditor();
-  renderRoutingMatrices();
+  renderDeviceBanner();
+  renderChannelLabels();
+  renderServerAudioUsers();
 }
 
-function renderChannelNamesEditor() {
-  const { channelNames } = routingData;
+function renderDeviceBanner() {
+  const el = document.getElementById('routing-device-info');
+  if (!el) return;
+
+  const dc = routingData.deviceChannels;
+  if (!dc || dc.error || (dc.inputDevice?.channels === 0 && dc.outputDevice?.channels === 0)) {
+    el.innerHTML = `<span class="device-unset">Aucun device configuré — sélectionnez une carte son dans <strong>Configuration</strong></span>`;
+    return;
+  }
+
+  const { inputDevice, outputDevice } = dc;
+  el.innerHTML = `
+    <span class="device-entry"><strong>Entrée :</strong> ${escapeHtml(inputDevice.name)}
+      <span class="device-ch-badge">${inputDevice.channels} ch</span></span>
+    <span class="device-sep">·</span>
+    <span class="device-entry"><strong>Sortie :</strong> ${escapeHtml(outputDevice.name)}
+      <span class="device-ch-badge">${outputDevice.channels} ch</span></span>`;
+}
+
+function renderChannelLabels() {
+  const { channelNames, deviceChannels: dc } = routingData;
   const inputs = channelNames?.inputs || {};
   const outputs = channelNames?.outputs || {};
+  const inputCount = dc?.inputDevice?.channels || 0;
+  const outputCount = dc?.outputDevice?.channels || 0;
 
-  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 inputsEl = document.getElementById('channel-names-inputs');
+  const outputsEl = document.getElementById('channel-names-outputs');
 
-  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 (inputsEl) {
+    inputsEl.innerHTML = inputCount > 0
+      ? Array.from({ length: inputCount }, (_, i) => channelLabelRow('input', i, inputs[i] || '')).join('')
+      : '<p class="config-note">Aucun device d\'entrée détecté.</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>';
+  if (outputsEl) {
+    outputsEl.innerHTML = outputCount > 0
+      ? Array.from({ length: outputCount }, (_, i) => channelLabelRow('output', i, outputs[i] || '')).join('')
+      : '<p class="config-note">Aucun device de sortie détecté.</p>';
   }
 }
 
-function channelNameRow(dir, ch, name) {
+function channelLabelRow(dir, ch, name) {
   return `
     <div class="channel-name-row" data-channel="${ch}" data-dir="${dir}">
-      <span class="channel-index">Canal ${ch}</span>
+      <span class="channel-index">Ch ${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>
+             value="${escapeHtml(name)}" placeholder="Label canal ${ch}">
     </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;
@@ -1119,37 +1074,12 @@ async function saveRouting() {
     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 });
+  const result = await window.electronAPI.routing.save({ 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');
+    showNotification('Noms de canaux sauvegardés', 'success');
   } else {
     showNotification('Erreur: ' + (result.error || 'Sauvegarde échouée'), 'error');
   }

electron/ui/index.html

@@ -126,15 +126,6 @@
             <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">
@@ -179,25 +170,27 @@
         <div id="view-routing" class="view">
           <h2>Routing Audio</h2>
 
-          <!-- Noms des canaux -->
+          <!-- Device info -->
           <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="routing-device-banner">
+              <div class="routing-device-info" id="routing-device-info">Chargement...</div>
+              <button class="btn btn-small btn-secondary" id="btn-refresh-channels">🔄 Actualiser</button>
+            </div>
+          </div>
+
+          <!-- Labels canaux physiques -->
+          <div class="section">
+            <h3>🏷️ Canaux Physiques</h3>
+            <p class="config-note">Labels des canaux de votre carte son. La liste est déterminée par le device sélectionné en <strong>Configuration</strong>.</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>
+                <h4>Entrées</h4>
                 <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>
+                <h4>Sorties</h4>
                 <div id="channel-names-outputs" class="channel-names-list">
                   <p class="empty-state">Chargement...</p>
                 </div>
@@ -205,29 +198,18 @@
             </div>
           </div>
 
-          <!-- Matrice Entrées → Groupes -->
+          <!-- Participants Serveur -->
           <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>
+            <h3>🎙️ Participants Serveur</h3>
+            <p class="config-note">Participants LiveKit côté serveur — chaque ligne branche des canaux physiques d'E/S sur un groupe.</p>
+            <button class="btn btn-primary btn-small" id="btn-add-server-audio-user">➕ Ajouter</button>
+            <div id="server-audio-users-list" class="sau-list"></div>
           </div>
 
           <!-- Actions -->
           <div class="routing-actions">
-            <button class="btn btn-primary" id="btn-save-routing">Sauvegarder</button>
+            <button class="btn btn-primary" id="btn-save-routing">Sauvegarder noms de canaux</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>
 

electron/ui/styles.css

@@ -893,7 +893,54 @@ body {
   background: rgba(74, 158, 255, 0.05);
 }
 
-/* Channel Names Editor */
+/* Device banner */
+
+.routing-device-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+}
+
+.routing-device-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+}
+
+.device-entry {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.device-sep {
+  color: var(--text-secondary);
+}
+
+.device-ch-badge {
+  display: inline-block;
+  background: var(--accent-primary);
+  color: #fff;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.1rem 0.4rem;
+  border-radius: 10px;
+  letter-spacing: 0.02em;
+}
+
+.device-unset {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Channel labels */
 
 .channel-names-grid {
   display: grid;
@@ -901,21 +948,14 @@ body {
   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;
+.channel-names-col h4 {
+  font-size: 0.8125rem;
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  margin: 0;
+  margin: 0 0 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .channel-names-list {
@@ -931,13 +971,79 @@ body {
 }
 
 .channel-index {
-  min-width: 58px;
-  font-size: 0.8125rem;
-  color: var(--text-secondary);
+  min-width: 40px;
+  font-size: 0.8rem;
+  color: var(--accent-primary);
   font-family: 'Courier New', monospace;
+  font-weight: 600;
   flex-shrink: 0;
 }
 
+/* Server Audio Users table */
+
+.sau-list {
+  margin-top: 1rem;
+}
+
+.sau-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  margin-top: 0.75rem;
+}
+
+.sau-table th {
+  background: var(--bg-tertiary);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sau-table td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+  vertical-align: middle;
+}
+
+.sau-table tbody tr:hover td {
+  background: rgba(74, 158, 255, 0.04);
+}
+
+.sau-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.sau-actions {
+  text-align: right;
+  white-space: nowrap;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: flex-end;
+}
+
+.ch-badge {
+  display: inline-block;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+}
+
+.ch-badge-group {
+  background: rgba(74, 158, 255, 0.12);
+  border-color: rgba(74, 158, 255, 0.3);
+  color: var(--accent-primary);
+  font-family: inherit;
+}
+
 /* Routing actions bar */
 
 .routing-actions {