diff --git a/viewer/index.html b/viewer/index.html
index f8de954..88b303a 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -169,6 +169,39 @@
     border-radius: 2px; flex-shrink: 0;
   }
   #btn-pipeline:hover { background: #a855f7; color: #1a1a2e; }
+
+  #sortie-select {
+    background: #0f3460; border: 1px solid #e94560; color: #e0e0e0;
+    font-family: monospace; font-size: 11px; padding: 2px 6px; border-radius: 2px;
+    cursor: pointer; max-width: 160px;
+  }
+  #btn-sync {
+    background: #0f3460; border: 1px solid #e94560; color: #e94560;
+    padding: 2px 9px; cursor: pointer; font-family: monospace; font-size: 11px;
+    border-radius: 2px;
+  }
+  #btn-sync:hover { background: #e94560; color: #1a1a2e; }
+  #btn-sync:disabled { opacity: 0.4; cursor: not-allowed; }
+  #sync-progress {
+    font-size: 10px; color: #06d6a0; flex: 1;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .panel-header {
+    background: #0d0d20; border-top: 1px solid #0f3460; border-bottom: 1px solid #0f3460;
+    padding: 4px 14px; font-size: 11px; font-weight: bold; color: #e94560;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .auv-tab {
+    font-family: monospace; font-size: 10px; padding: 2px 8px; cursor: pointer;
+    border: 1px solid #0f3460; background: transparent; color: #a0c4ff; border-radius: 2px;
+  }
+  .auv-tab.active { background: #0f3460; color: #e0e0e0; }
+  .graphs-grid {
+    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
+    padding: 4px 8px; background: #12122a;
+  }
+  .graph-cell { height: 130px; background: #1a1a2e; }
+  .graph-cell.wide { grid-column: span 2; height: 130px; }
 </style>
 </head>
 <body>
@@ -238,6 +271,9 @@ flowchart LR
     <button class="layer-btn active" id="btn-vec"  onclick="toggleLayer('vec')">USBL vec</button>
     <button class="layer-btn active" id="btn-usbl-panel" onclick="toggleLayer('panel')">Stats</button>
   </div>
+  <select id="sortie-select"><option value="">— Sortie —</option></select>
+  <button id="btn-sync" disabled>Sync &amp; Process</button>
+  <span id="sync-progress"></span>
 </div>
 
 <!-- Row 2: Map -->
@@ -296,6 +332,34 @@ flowchart LR
   </div>
 </div>
 
+<div class="panel-header">USV</div>
+<div class="graphs-grid" id="usv-graphs">
+  <div class="graph-cell" id="usv-yaw"></div>
+  <div class="graph-cell" id="usv-heading"></div>
+  <div class="graph-cell" id="usv-batt"></div>
+  <div class="graph-cell" id="usv-gps"></div>
+  <div class="graph-cell" id="usv-usbl-dist"></div>
+  <div class="graph-cell" id="usv-usbl-angle"></div>
+  <div class="graph-cell" id="usv-m1"></div>
+  <div class="graph-cell" id="usv-m2"></div>
+  <div class="graph-cell wide" id="usv-status"></div>
+</div>
+<div class="panel-header" id="auv-panel-header">
+  AUV
+  <span id="auv-tabs"></span>
+</div>
+<div class="graphs-grid" id="auv-graphs">
+  <div class="graph-cell" id="auv-pry"></div>
+  <div class="graph-cell" id="auv-depth"></div>
+  <div class="graph-cell" id="auv-alt"></div>
+  <div class="graph-cell" id="auv-obs"></div>
+  <div class="graph-cell" id="auv-usbl-dist"></div>
+  <div class="graph-cell" id="auv-usbl-angle"></div>
+  <div class="graph-cell" id="auv-batt"></div>
+  <div class="graph-cell" id="auv-status"></div>
+  <div class="graph-cell wide" id="auv-motors"></div>
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/nouislider@15.8.1/dist/nouislider.min.js"></script>
@@ -303,6 +367,7 @@ flowchart LR
 <script>
 // == Constants ==
 const API = 'http://192.168.0.83:8766';
+const API2 = 'http://192.168.0.83:8767';
 const COLORS = ['#00b4d8','#06d6a0','#ffd166','#e94560','#a855f7','#ff8800','#7dc8e0','#b8f0d4'];
 const AUV_COLOR = '#ff8800';
 const PLOTLY_LAYOUT = {
@@ -533,6 +598,7 @@ function applyTrailAndCursor() {
     `t: ${fmtMs(tNow)} | USV ${trailPtsUsv.length} pts | AUV ${trailPtsUsbl.length} pts | total ${fmtDur(tMax-tMin)}`;
 
   updateChartsCursor();
+  if (tNow) updateCursor(tNow / 1000);
 }
 
 // == Cursor slider ==
@@ -872,6 +938,226 @@ function hidePipelineOnBackdrop(e) {
 }
 document.addEventListener('keydown', e => { if (e.key === 'Escape') { const ov = document.getElementById('pipeline-overlay'); if (ov.classList.contains('visible')) togglePipeline(); } });
 
+// == Task 8: USV rendering helpers ==
+function _pts(sig) {
+  if (!sig || !sig.length) return [[], []];
+  return [sig.map(p => new Date(p.t * 1000)), sig.map(p => p.v)];
+}
+
+const PLOTLY_LAYOUT_BASE = {
+  margin: {l:40, r:8, t:20, b:30},
+  paper_bgcolor: '#1a1a2e', plot_bgcolor: '#1a1a2e',
+  font: {color: '#e0e0e0', size: 9, family: 'monospace'},
+  xaxis: {color: '#555', gridcolor: '#1e1e3a', type: 'date'},
+  yaxis: {color: '#555', gridcolor: '#1e1e3a'},
+  showlegend: false,
+};
+
+function _layout(title, yLabel) {
+  const l = JSON.parse(JSON.stringify(PLOTLY_LAYOUT_BASE));
+  l.title = {text: title, font: {size: 9, color: '#888'}};
+  if (yLabel) l.yaxis.title = {text: yLabel, font: {size: 8}};
+  return l;
+}
+
+function renderUSV(signals) {
+  const cfg = {responsive: true, displayModeBar: false};
+
+  const [yt, yv] = _pts(signals.Yaw);
+  Plotly.react('usv-yaw', [{x:yt, y:yv, type:'scatter', mode:'lines', line:{color:'#00b4d8',width:1}, name:'Yaw'}], _layout('Yaw','°'), cfg);
+
+  const [ht, hv] = _pts(signals.Heading);
+  Plotly.react('usv-heading', [{x:ht, y:hv, type:'scatter', mode:'lines', line:{color:'#06d6a0',width:1}}], _layout('Heading','°'), cfg);
+
+  const [bt, bv] = _pts(signals.BattVoltage);
+  Plotly.react('usv-batt', [{x:bt, y:bv, type:'scatter', mode:'lines', line:{color:'#ffd166',width:1}}], _layout('Battery','V'), cfg);
+
+  const [gt, gv] = _pts(signals.gps_fix);
+  Plotly.react('usv-gps', [{x:gt, y:gv, type:'scatter', mode:'lines', line:{color:'#06d6a0',width:1,shape:'hv'}}], _layout('GPS fix'), cfg);
+
+  const [dt, dv] = _pts(signals.usbl_dist);
+  Plotly.react('usv-usbl-dist', [{x:dt, y:dv, type:'scatter', mode:'lines', line:{color:'#a0c4ff',width:1}}], _layout('USBL dist','m'), cfg);
+
+  const [at, av] = _pts(signals.usbl_angle);
+  Plotly.react('usv-usbl-angle', [{x:at, y:av, type:'scatter', mode:'lines', line:{color:'#c77dff',width:1}}], _layout('USBL angle','°'), cfg);
+
+  const [m1t, m1v] = _pts(signals.M1);
+  Plotly.react('usv-m1', [{x:m1t, y:m1v, type:'scatter', mode:'lines', line:{color:'#ef476f',width:1}}], _layout('Motor 1','cmd'), cfg);
+
+  const [m2t, m2v] = _pts(signals.M2);
+  Plotly.react('usv-m2', [{x:m2t, y:m2v, type:'scatter', mode:'lines', line:{color:'#ff6b6b',width:1}}], _layout('Motor 2','cmd'), cfg);
+
+  const armPts = _pts(signals.Armed);
+  const modePts = _pts(signals.Mode);
+  const statusTraces = [];
+  if (armPts[0].length) statusTraces.push({x:armPts[0], y:armPts[1], name:'Armed', type:'scatter', mode:'lines', line:{color:'#ffd166',width:1,shape:'hv'}});
+  if (modePts[0].length) statusTraces.push({x:modePts[0], y:modePts[1], name:'Mode', type:'scatter', mode:'lines', line:{color:'#06d6a0',width:1,shape:'hv'}});
+  Plotly.react('usv-status', statusTraces.length ? statusTraces : [{x:[],y:[]}],
+    Object.assign(_layout('USV status'), {showlegend: statusTraces.length > 1}), cfg);
+}
+
+// == Task 9: AUV rendering + tabs ==
+let _currentSortieId = null;
+
+async function loadAuvTabs(sortieId) {
+  const resp = await fetch(`${API2}/sorties/${encodeURIComponent(sortieId)}/auvs`);
+  const auvs = await resp.json();
+  const tabsEl = document.getElementById('auv-tabs');
+  tabsEl.innerHTML = '';
+  auvs.forEach((auv, i) => {
+    const btn = document.createElement('button');
+    btn.className = 'auv-tab' + (i === 0 ? ' active' : '');
+    btn.textContent = auv;
+    btn.onclick = async () => {
+      document.querySelectorAll('.auv-tab').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      const r = await fetch(`${API2}/sorties/${encodeURIComponent(sortieId)}/auv/${auv}`);
+      const data = await r.json();
+      renderAUV(data.signals);
+    };
+    tabsEl.appendChild(btn);
+  });
+  if (auvs.length > 0) {
+    const r = await fetch(`${API2}/sorties/${encodeURIComponent(sortieId)}/auv/${auvs[0]}`);
+    const data = await r.json();
+    renderAUV(data.signals);
+  }
+}
+
+function renderAUV(signals) {
+  const cfg = {responsive: true, displayModeBar: false};
+
+  const pryTraces = [
+    ['pitch', '#ef476f'], ['roll', '#06d6a0'], ['yaw', '#00b4d8']
+  ].map(([k, c]) => { const [t,v]=_pts(signals[k]); return {x:t,y:v,name:k,type:'scatter',mode:'lines',line:{color:c,width:1}}; });
+  Plotly.react('auv-pry', pryTraces, Object.assign(_layout('Pitch/Roll/Yaw','°'), {showlegend:true, legend:{font:{size:8},bgcolor:'transparent',x:0,y:1}}), cfg);
+
+  const [dpt, dpv] = _pts(signals.depth);
+  Plotly.react('auv-depth', [{x:dpt,y:dpv,type:'scatter',mode:'lines',line:{color:'#a0c4ff',width:1}}], _layout('Depth','m'), cfg);
+
+  const [alt, alv] = _pts(signals.altitude);
+  Plotly.react('auv-alt', [{x:alt,y:alv,type:'scatter',mode:'lines',line:{color:'#ffd166',width:1}}], _layout('Altitude','m'), cfg);
+
+  const [obt, obv] = _pts(signals.obstacle_dist);
+  Plotly.react('auv-obs', [{x:obt,y:obv,type:'scatter',mode:'lines',line:{color:'#c77dff',width:1}}], _layout('Obstacle','m'), cfg);
+
+  const [udt, udv] = _pts(signals.usbl_dist);
+  Plotly.react('auv-usbl-dist', [{x:udt,y:udv,type:'scatter',mode:'lines',line:{color:'#a0c4ff',width:1}}], _layout('USBL dist','m'), cfg);
+
+  const [uat, uav] = _pts(signals.usbl_angle);
+  Plotly.react('auv-usbl-angle', [{x:uat,y:uav,type:'scatter',mode:'lines',line:{color:'#c77dff',width:1}}], _layout('USBL angle','°'), cfg);
+
+  const [bbt, bbv] = _pts(signals.battery_v);
+  Plotly.react('auv-batt', [{x:bbt,y:bbv,type:'scatter',mode:'lines',line:{color:'#ffd166',width:1}}], _layout('Battery','V'), cfg);
+
+  const [stt, stv] = _pts(signals.arm_status);
+  Plotly.react('auv-status', [{x:stt,y:stv,type:'scatter',mode:'lines',line:{color:'#06d6a0',width:1,shape:'hv'}}], _layout('Arm/Mode'), cfg);
+
+  const motorColors = ['#ef476f','#ffd166','#06d6a0','#00b4d8','#a0c4ff','#c77dff'];
+  const motorTraces = ['m1','m2','m3','m4','m5','m6'].map((mk,i) => {
+    const [t,v] = _pts(signals[mk]);
+    return {x:t,y:v,type:'scatter',mode:'lines',name:`M${i+1}`,line:{color:motorColors[i],width:1}};
+  });
+  Plotly.react('auv-motors', motorTraces,
+    Object.assign(_layout('Motors x6 PWM','µs'), {showlegend:true, legend:{font:{size:8},bgcolor:'transparent',orientation:'h',x:0,y:1}}), cfg);
+}
+
+// == Task 10: Slider cursor sync ==
+const ALL_GRAPH_IDS = [
+  'chart-depth', 'chart-pwm-auv', 'chart-pwm-usv', 'chart-usbl',
+  'usv-yaw', 'usv-heading', 'usv-batt', 'usv-gps',
+  'usv-usbl-dist', 'usv-usbl-angle', 'usv-m1', 'usv-m2', 'usv-status',
+  'auv-pry', 'auv-depth', 'auv-alt', 'auv-obs',
+  'auv-usbl-dist', 'auv-usbl-angle', 'auv-batt', 'auv-status', 'auv-motors',
+];
+
+function updateCursor(epochSec) {
+  const ts = new Date(epochSec * 1000).toISOString();
+  const shape = {
+    type: 'line', x0: ts, x1: ts, y0: 0, y1: 1,
+    yref: 'paper', line: {color: '#e94560', width: 1, dash: 'dot'},
+  };
+  ALL_GRAPH_IDS.forEach(id => {
+    const el = document.getElementById(id);
+    if (el && el._fullLayout) {
+      Plotly.relayout(id, {'shapes': [shape]});
+    }
+  });
+}
+
+// == Task 11: loadSortieData + sorties loading + wiring ==
+async function loadSortieData(sortieId) {
+  const prog = document.getElementById('sync-progress');
+  try {
+    prog.textContent = 'Chargement USV…';
+    const usvResp = await fetch(`${API2}/sorties/${encodeURIComponent(sortieId)}/usv`);
+    if (usvResp.ok) {
+      const usvData = await usvResp.json();
+      renderUSV(usvData.signals);
+    }
+    prog.textContent = 'Chargement AUV…';
+    await loadAuvTabs(sortieId);
+    prog.textContent = `${sortieId} chargé`;
+  } catch(e) {
+    prog.textContent = `Erreur: ${e.message}`;
+  }
+}
+
+async function loadSorties() {
+  try {
+    const resp = await fetch(`${API2}/sorties`);
+    if (!resp.ok) return;
+    const sorties = await resp.json();
+    const sel = document.getElementById('sortie-select');
+    sorties.forEach(s => {
+      const opt = document.createElement('option');
+      opt.value = s.id;
+      opt.textContent = s.id + (s.processed ? ' ✓' : '');
+      sel.appendChild(opt);
+    });
+    sel.addEventListener('change', () => {
+      const btn = document.getElementById('btn-sync');
+      btn.disabled = !sel.value;
+      if (sel.value) {
+        const opt = sel.options[sel.selectedIndex];
+        if (opt.textContent.includes('✓')) {
+          loadSortieData(sel.value);
+        }
+      }
+    });
+  } catch(e) { console.warn('pipeline-runner unavailable', e); }
+}
+
+document.getElementById('btn-sync').addEventListener('click', async () => {
+  const sortieId = document.getElementById('sortie-select').value;
+  if (!sortieId) return;
+  const btn = document.getElementById('btn-sync');
+  const prog = document.getElementById('sync-progress');
+  btn.disabled = true;
+  prog.textContent = 'Démarrage…';
+  const encoded = encodeURIComponent(sortieId);
+  await fetch(`${API2}/run/${encoded}`, {method: 'POST'});
+  const es = new EventSource(`${API2}/events/${encoded}`);
+  es.onmessage = async (e) => {
+    const evt = JSON.parse(e.data);
+    if (evt.step === 'ping') return;
+    prog.textContent = `[${evt.step}] ${evt.pct}% ${evt.msg}`;
+    if (evt.step === 'write' && evt.pct === 100) {
+      es.close();
+      btn.disabled = false;
+      prog.textContent = 'Terminé — chargement…';
+      await loadSortieData(sortieId);
+    }
+    if (evt.step === 'error') {
+      es.close();
+      btn.disabled = false;
+      prog.textContent = `Erreur: ${evt.msg}`;
+    }
+  };
+});
+
+loadSorties();
+
 // == Init ==
 mermaid.initialize({ startOnLoad: false, theme: 'dark' });
 initCharts();
