/* Admin-Ka v2 — client : chat Claude Code + sessions détachées + écosystème */
(() => {
  const $ = (id) => document.getElementById(id);
  const messagesEl = $('messages');
  const inputEl = $('input');
  const sendBtn = $('sendBtn');
  const stopBtn = $('stopBtn');
  const projectSel = $('projectSel');

  marked.setOptions({ breaks: true, mangle: false, headerIds: false });

  // ---------- état ----------
  const store = JSON.parse(localStorage.getItem('adminka') || '{}');
  const settings = {
    model: store.model || 'fable',
    permMode: store.permMode || 'default',
    projectId: store.projectId || null,
  };
  function saveStore() { localStorage.setItem('adminka', JSON.stringify(settings)); }

  let ws = null, wsRetry = 1000, wsWanted = true;
  let currentChat = null;      // publicChat du serveur
  let isRunning = false;
  let live = null, liveThink = null;
  let curView = 'chat';
  let ecoData = null;
  const toolCards = new Map();
  const permCards = new Map();

  const MODEL_LABEL = { fable: 'Fable 5', opus: 'Opus 5', sonnet: 'Sonnet 5', haiku: 'Haiku' };
  const PERM_LABEL = { default: 'normal', acceptEdits: 'acceptEdits', plan: 'plan', bypass: '⚠ bypass' };

  // ---------- utilitaires ----------
  function esc(s) { return String(s).replace(/[&<>"]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
  function el(tag, cls, html) {
    const e = document.createElement(tag);
    if (cls) e.className = cls;
    if (html !== undefined) e.innerHTML = html;
    return e;
  }
  function fmt$(v) { return (v || 0) < 0.005 ? '<0,01 $' : (v).toFixed(2).replace('.', ',') + ' $'; }
  function fmtTok(v) { return v > 1000 ? Math.round(v / 1000) + 'k' : String(v || 0); }
  function timeAgo(ts) {
    if (!ts) return '—';
    const s = (Date.now() - ts) / 1000;
    if (s < 90) return 'à l’instant';
    if (s < 3600) return Math.round(s / 60) + ' min';
    if (s < 86400) return Math.round(s / 3600) + ' h';
    return Math.round(s / 86400) + ' j';
  }
  function fmtMB(b) { return b ? Math.round(b / 1048576) + ' Mo' : '—'; }

  // ---------- navigation ----------
  const views = ['chat', 'sessions', 'eco', 'settings'];
  function switchView(name) {
    curView = name;
    for (const v of views) $('view-' + v).classList.toggle('hidden', v !== name);
    document.querySelectorAll('.nav-btn').forEach((b) => {
      b.classList.toggle('active', b.dataset.view === name);
      if (b.dataset.view === name) b.querySelector('.badge').classList.add('hidden');
    });
    if (name === 'sessions') loadSessions();
    if (name === 'eco') { loadEco(); send({ type: 'eco_sub' }); } else { send({ type: 'eco_unsub' }); }
    if (name === 'settings') refreshSettingsView();
  }
  document.querySelectorAll('.nav-btn').forEach((b) => { b.onclick = () => switchView(b.dataset.view); });
  function navBadge(view) {
    if (curView === view) return;
    const b = document.querySelector(`.nav-btn[data-view="${view}"] .badge`);
    if (b) b.classList.remove('hidden');
  }

  // ---------- bannières ----------
  function banner(kind, html, onclick, ttl = 6000) {
    const b = el('div', 'banner ' + kind, html);
    if (onclick) b.onclick = () => { onclick(); b.remove(); };
    $('banners').appendChild(b);
    if (navigator.vibrate) navigator.vibrate(60);
    setTimeout(() => b.remove(), ttl);
  }

  // ---------- scroll / messages ----------
  function nearBottom() { return messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight < 130; }
  function scrollBottom(force) { if (force || nearBottom()) messagesEl.scrollTop = messagesEl.scrollHeight; }
  function addMsg(node) {
    $('welcome').classList.add('hidden');
    const wasNear = nearBottom();
    const w = workingEl(); if (w) messagesEl.insertBefore(node, w); else messagesEl.appendChild(node);
    scrollBottom(wasNear);
  }
  function renderMd(container, text) {
    container.innerHTML = marked.parse(text || '');
    container.querySelectorAll('pre code').forEach((b) => { try { hljs.highlightElement(b); } catch {} });
  }
  // bouton copier sur tous les blocs de code (délégué, marche pour tout <pre>)
  messagesEl.addEventListener('click', (e) => {
    const pre = e.target.closest('pre');
    if (!pre || e.target.closest('button') || pre.dataset.copying) return;
    if (window.getSelection().toString()) return;
    navigator.clipboard.writeText(pre.textContent).then(() => {
      pre.dataset.copying = '1';
      const tag = el('span', 'copied-tag', 'copié ✓');
      pre.appendChild(tag);
      setTimeout(() => { tag.remove(); delete pre.dataset.copying; }, 1200);
    }).catch(() => {});
  });
  function truncPre(text, limit = 3000) {
    const pre = el('pre');
    const full = String(text ?? '');
    if (full.length <= limit) { pre.textContent = full; return pre; }
    pre.textContent = full.slice(0, limit);
    const wrap = el('div');
    const btn = el('button', 'see-more', 'voir plus (' + Math.round((full.length - limit) / 1000) + ' k de plus)');
    btn.onclick = () => { pre.textContent = full; btn.remove(); };
    wrap.append(pre, btn);
    return wrap;
  }

  function workingEl() { return messagesEl.querySelector('.working'); }
  let workTimer = null, workStart = 0;
  function setRunning(r) {
    isRunning = r;
    sendBtn.classList.toggle('hidden', r);
    stopBtn.classList.toggle('hidden', !r);
    let w = workingEl();
    if (r && !w) {
      $('welcome').classList.add('hidden');
      w = el('div', 'working', '<div class="dots"><i></i><i></i><i></i></div><span>Claude Code travaille…</span><b class="work-time"></b>');
      messagesEl.appendChild(w);
      scrollBottom(true);
      workStart = Date.now();
      clearInterval(workTimer);
      workTimer = setInterval(() => {
        const t = w.querySelector('.work-time');
        if (!t) { clearInterval(workTimer); return; }
        const s = Math.floor((Date.now() - workStart) / 1000);
        t.textContent = s >= 60 ? Math.floor(s / 60) + ' min ' + (s % 60) + ' s' : s + ' s';
      }, 1000);
    } else if (!r && w) { w.remove(); clearInterval(workTimer); }
    if (!r) {
      finalizeLive(); finalizeThink();
      flushQueued();
    }
  }
  const WORK_VERB = { Bash: 'exécute', Read: 'lit', Edit: 'modifie', MultiEdit: 'modifie', Write: 'écrit', Glob: 'cherche', Grep: 'cherche dans', LS: 'liste', Task: 'délègue', WebFetch: 'récupère', WebSearch: 'recherche', TodoWrite: 'planifie', ExitPlanMode: 'propose un plan' };
  function setWorkingLabel(name, sub) {
    const w = workingEl(); if (!w) return;
    const span = w.querySelector('span'); if (!span) return;
    const verb = WORK_VERB[name] || 'utilise ' + name;
    const detail = sub ? ' ' + sub.slice(0, 46) : '';
    span.textContent = `Claude ${verb}${detail}…`;
  }
  // file d'attente : un message tapé pendant l'exécution part dès que Claude a fini
  let queuedPrompt = null;
  function flushQueued() {
    if (!queuedPrompt) return;
    const q = queuedPrompt; queuedPrompt = null;
    const n = messagesEl.querySelector('.queued-notice'); if (n) n.remove();
    doSend(q);
  }

  // ---------- streaming live ----------
  function ensureLive() {
    if (live) return live;
    const w = workingEl(); if (w) { const s = w.querySelector('span'); if (s) s.textContent = 'Claude rédige…'; }
    const wrap = el('div', 'msg-claude');
    const md = el('div', 'md');
    wrap.appendChild(md);
    addMsg(wrap);
    live = { el: wrap, textEl: md, text: '' };
    return live;
  }
  function finalizeLive() { if (live) { live.el.remove(); live = null; } }
  function ensureThink() {
    if (liveThink) return liveThink;
    const box = el('div', 'thinking');
    addMsg(box);
    liveThink = { el: box, text: '' };
    return liveThink;
  }
  function finalizeThink() {
    if (!liveThink) return;
    const d = el('details', 'thinking-box', '<summary>réflexion</summary>');
    const inner = el('div', 'thinking'); inner.textContent = liveThink.text;
    d.appendChild(inner);
    liveThink.el.replaceWith(d);
    liveThink = null;
  }

  // ---------- cartes outils ----------
  const TOOL_ICONS = { Bash: '❯', Read: '📄', Edit: '✏️', MultiEdit: '✏️', Write: '📝', Glob: '🔍', Grep: '🔍', LS: '📁', Task: '🤖', WebFetch: '🌐', WebSearch: '🌐', TodoWrite: '☑️', NotebookRead: '📓', NotebookEdit: '📓', ExitPlanMode: '📋' };
  const TOOL_TINT = { Bash: 'bash', Edit: 'edit', MultiEdit: 'edit', Write: 'edit', NotebookEdit: 'edit', Read: 'read', Glob: 'read', Grep: 'read', LS: 'read', NotebookRead: 'read', WebFetch: 'web', WebSearch: 'web' };
  function toolSubtitle(name, input) {
    input = input || {};
    if (name === 'Bash') return input.command || '';
    if (input.file_path) return input.file_path.replace(/^\/Users\/[^/]+\//, '~/');
    if (input.pattern) return input.pattern;
    if (input.url) return input.url;
    if (name === 'Task') return input.description || '';
    if (name === 'TodoWrite') return 'liste de tâches';
    return '';
  }
  function diffBlock(oldStr, newStr) {
    const d = el('div', 'diff');
    for (const l of String(oldStr || '').split('\n')) d.appendChild(el('div', 'dl del', esc('- ' + l)));
    for (const l of String(newStr || '').split('\n')) d.appendChild(el('div', 'dl add', esc('+ ' + l)));
    return d;
  }
  function toolBody(name, input) {
    const body = el('div', 'tool-body');
    input = input || {};
    if (name === 'Bash') {
      body.appendChild(el('div', 'label', 'commande'));
      body.appendChild(truncPre(input.command));
      if (input.description) body.appendChild(el('div', 'meta-line', esc(input.description)));
    } else if (name === 'Edit') {
      body.appendChild(diffBlock(input.old_string, input.new_string));
    } else if (name === 'MultiEdit') {
      for (const e of input.edits || []) body.appendChild(diffBlock(e.old_string, e.new_string));
    } else if (name === 'Write') {
      body.appendChild(el('div', 'label', 'contenu'));
      const d = el('div', 'diff');
      const lines = String(input.content || '').split('\n');
      for (const l of lines.slice(0, 40)) d.appendChild(el('div', 'dl add', esc('+ ' + l)));
      if (lines.length > 40) d.appendChild(el('div', 'dl', '… ' + (lines.length - 40) + ' lignes de plus'));
      body.appendChild(d);
    } else if (name === 'TodoWrite') {
      const ul = el('ul', 'todos');
      for (const t of input.todos || []) {
        const icon = t.status === 'completed' ? '☑' : t.status === 'in_progress' ? '◐' : '☐';
        ul.appendChild(el('li', t.status === 'completed' ? 'done' : t.status === 'in_progress' ? 'doing' : '', esc(icon + ' ' + t.content)));
      }
      body.appendChild(ul);
    } else if (name === 'Task') {
      body.appendChild(truncPre(input.prompt || JSON.stringify(input, null, 2)));
    } else if (name === 'ExitPlanMode') {
      const md = el('div', 'md'); renderMd(md, input.plan || ''); body.appendChild(md);
    } else {
      body.appendChild(truncPre(JSON.stringify(input, null, 2), 1500));
    }
    return body;
  }
  // outils dont on ouvre la carte par défaut (on veut VOIR ce qui est fait)
  const OPEN_BY_DEFAULT = new Set(['Bash', 'Edit', 'MultiEdit', 'Write', 'NotebookEdit', 'ExitPlanMode']);
  function addToolCard(block) {
    finalizeLive(); finalizeThink();
    const name = block.name || '?';
    const shortName = name.startsWith('mcp__') ? name.split('__').slice(1).join(':') : name;
    const card = el('details', 'tool');
    if (OPEN_BY_DEFAULT.has(name)) card.open = true;
    const sum = el('summary');
    sum.innerHTML = `<span class="t-icon ${TOOL_TINT[name] || ''}">${TOOL_ICONS[name] || '⚙️'}</span><span class="t-name">${esc(shortName)}</span><span class="t-sub">${esc(toolSubtitle(name, block.input))}</span><span class="t-state pending">●&nbsp;en cours</span>`;
    card.appendChild(sum);
    card.appendChild(toolBody(name, block.input));
    addMsg(card);
    toolCards.set(block.id, { card, name, stateEl: sum.querySelector('.t-state'), subEl: sum.querySelector('.t-sub'), bodyEl: card.querySelector('.tool-body') });
    // met à jour l'indicateur « en cours » avec l'action réelle
    setWorkingLabel(name, toolSubtitle(name, block.input));
  }
  function attachToolResult(block) {
    const t = toolCards.get(block.tool_use_id);
    if (!t) return;
    t.stateEl.className = 't-state ' + (block.is_error ? 'err' : 'ok');
    t.stateEl.textContent = block.is_error ? '✗ erreur' : '✓';
    let text = '';
    if (typeof block.content === 'string') text = block.content;
    else if (Array.isArray(block.content)) text = block.content.map((c) => c.type === 'text' ? c.text : '[' + c.type + ']').join('\n');
    text = text.trim();
    if (text) {
      // les cartes repliées (Read/Grep/…) montrent un aperçu du résultat dans l'en-tête
      if (!t.card.open && t.subEl) {
        const firstLine = text.split('\n').find(l => l.trim()) || '';
        t.subEl.textContent = firstLine.slice(0, 80);
      }
      t.bodyEl.appendChild(el('div', 'label', block.is_error ? 'erreur' : 'résultat'));
      t.bodyEl.appendChild(truncPre(text));
    } else {
      t.bodyEl.appendChild(el('div', 'meta-line', block.is_error ? 'erreur (vide)' : 'terminé sans sortie'));
    }
  }

  // ---------- permissions ----------
  function addPermCard(ev) {
    finalizeLive(); finalizeThink();
    const card = el('div', 'perm');
    const isPlan = ev.tool === 'ExitPlanMode';
    card.innerHTML = `<div class="perm-title">${isPlan ? '📋 Plan proposé' : '🔐 Permission — ' + esc(ev.tool)}</div>`;
    if (isPlan && ev.input?.plan) {
      const md = el('div', 'md'); renderMd(md, ev.input.plan); card.appendChild(md);
    } else {
      const pre = el('pre'); pre.textContent = JSON.stringify(ev.input, null, 2); card.appendChild(pre);
    }
    const actions = el('div', 'perm-actions');
    const deny = el('button', 'perm-deny', 'Refuser');
    const allow = el('button', 'perm-allow', isPlan ? 'Approuver' : 'Autoriser');
    actions.append(deny, allow);
    if (!isPlan) {
      const always = el('button', 'perm-always', 'Toujours<br><small>cet outil</small>');
      always.onclick = () => send({ type: 'perm', requestId: ev.requestId, allow: true, always: true });
      actions.insertBefore(always, allow);
      // « Tout autoriser » : le serveur approuve TOUTES les permissions de la
      // session — la tâche va au bout même téléphone rangé
      const all = el('button', 'perm-allall', '🔓 Tout autoriser — finir la tâche sans redemander');
      all.onclick = () => send({ type: 'perm', requestId: ev.requestId, allow: true, allowAll: true });
      card.appendChild(actions);
      card.appendChild(all);
    } else {
      card.appendChild(actions);
    }
    deny.onclick = () => send({ type: 'perm', requestId: ev.requestId, allow: false });
    allow.onclick = () => send({ type: 'perm', requestId: ev.requestId, allow: true });
    addMsg(card);
    permCards.set(ev.requestId, card);
    scrollBottom(true);
    if (navigator.vibrate) navigator.vibrate([60, 60, 60]);
  }
  function resolvePermCard(ev) {
    const card = permCards.get(ev.requestId);
    if (!card) return;
    const actions = card.querySelector('.perm-actions');
    if (actions) actions.remove();
    const allBtn = card.querySelector('.perm-allall');
    if (allBtn) allBtn.remove();
    card.appendChild(el('div', 'perm-resolved',
      ev.allow ? ('✓ Autorisé' + (ev.always ? ' (toujours)' : '')) : ('✗ Refusé' + (ev.reason === 'timeout' ? ' (délai dépassé)' : ''))));
  }

  // ---------- rendu des événements ----------
  function renderEvent(ev) {
    if (ev.type === 'user_prompt') {
      finalizeLive(); finalizeThink();
      const b = el('div', 'msg-user'); b.textContent = ev.text; addMsg(b);
      return;
    }
    if (ev.type === 'status') { setRunning(ev.state === 'running'); return; }
    if (ev.type === 'error') { addMsg(el('div', 'error-box', esc(ev.message))); return; }
    if (ev.type === 'notice') { addMsg(el('div', 'notice-line', esc(ev.text))); return; }
    if (ev.type === 'permission_request') { addPermCard(ev); return; }
    if (ev.type === 'permission_resolved') { resolvePermCard(ev); return; }
    if (ev.type === 'permission_auto') { addMsg(el('div', 'meta-line', esc('🔓 auto-autorisé : ' + ev.key))); return; }
    if (ev.type === 'claude') { renderClaude(ev.event); return; }
  }

  function renderClaude(ev) {
    if (ev.type === 'system') {
      if (ev.subtype === 'init') {
        addMsg(el('div', 'meta-line', esc(`⌁ ${ev.model || ''} · session ${String(ev.session_id || '').slice(0, 8)} · ${(ev.cwd || '').replace(/^\/Users\/[^/]+\//, '~/')}`)));
      } else if (ev.subtype === 'compact_boundary') {
        addMsg(el('div', 'meta-line', '⇣ contexte compacté'));
      } else if (ev.subtype && ev.subtype !== 'hook') {
        addMsg(el('div', 'meta-line', esc('⌁ ' + ev.subtype)));
      }
      return;
    }
    if (ev.type === 'stream_event' && ev.event) {
      const se = ev.event;
      if (se.type === 'content_block_delta' && se.delta) {
        if (se.delta.type === 'text_delta') {
          const l = ensureLive();
          l.text += se.delta.text;
          renderMd(l.textEl, l.text);
          scrollBottom();
        } else if (se.delta.type === 'thinking_delta') {
          const t = ensureThink();
          t.text += se.delta.thinking;
          t.el.textContent = t.text.slice(-600);
          scrollBottom();
        }
      }
      return;
    }
    if (ev.type === 'assistant' && ev.message && Array.isArray(ev.message.content)) {
      for (const block of ev.message.content) {
        if (block.type === 'text' && block.text && block.text.trim()) {
          finalizeLive(); finalizeThink();
          const wrap = el('div', 'msg-claude');
          const md = el('div', 'md');
          renderMd(md, block.text);
          wrap.appendChild(md);
          addMsg(wrap);
        } else if (block.type === 'tool_use') {
          addToolCard(block);
        } else if (block.type === 'thinking' && block.thinking) {
          if (liveThink) { liveThink.el.remove(); liveThink = null; }
          const d = el('details', 'thinking-box', '<summary>réflexion</summary>');
          const inner = el('div', 'thinking'); inner.textContent = block.thinking;
          d.appendChild(inner);
          addMsg(d);
        }
      }
      return;
    }
    if (ev.type === 'user' && ev.message && Array.isArray(ev.message.content)) {
      for (const block of ev.message.content) if (block.type === 'tool_result') attachToolResult(block);
      return;
    }
    if (ev.type === 'result') {
      finalizeLive(); finalizeThink();
      const dur = ev.duration_ms ? (ev.duration_ms / 1000).toFixed(1) + ' s' : '';
      const cost = ev.total_cost_usd ? ' · ' + ev.total_cost_usd.toFixed(3) + ' $' : '';
      const turns = ev.num_turns ? ' · ' + ev.num_turns + ' tours' : '';
      addMsg(el('div', 'meta-line', esc('— fin ' + dur + cost + turns)));
      if (ev.is_error && ev.result) addMsg(el('div', 'error-box', esc(String(ev.result))));
      return;
    }
  }

  // ---------- méta de session (chips + bandeau) ----------
  function refreshChips() {
    const model = currentChat ? currentChat.model : settings.model;
    const perm = currentChat ? currentChat.permMode : settings.permMode;
    $('chipModel').textContent = MODEL_LABEL[model] || model;
    $('chipPerm').textContent = PERM_LABEL[perm] || perm;
    $('chipPerm').classList.toggle('warn', perm === 'bypass');
    $('chipModel').classList.add('orange');
    const meta = $('sessMeta');
    if (currentChat && (currentChat.claudeSessionId || currentChat.totalCost)) {
      meta.classList.remove('hidden');
      $('metaModel').textContent = (currentChat.autoAllowAll ? '🔓 ' : '') + (currentChat.lastModel || MODEL_LABEL[model]);
      $('metaSid').textContent = currentChat.claudeSessionId ? 'sess ' + currentChat.claudeSessionId.slice(0, 8) : '';
      $('metaCost').textContent = fmt$(currentChat.totalCost);
      $('metaCtx').textContent = currentChat.contextTokens ? 'ctx ' + fmtTok(currentChat.contextTokens) + ' tok (' + Math.min(99, Math.round(currentChat.contextTokens / 2000)) + '%)' : '';
    } else meta.classList.add('hidden');
  }

  // ---------- WebSocket ----------
  function send(obj) { if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj)); }
  function setConn(state) {
    const pill = $('connPill');
    pill.className = 'conn-pill ' + state;
    $('connText').textContent = state === 'on' ? 'connecté' : state === 'mid' ? 'reconnexion…' : 'hors ligne';
  }
  function connect() {
    if (!wsWanted) return;
    setConn('mid');
    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
    ws = new WebSocket(`${proto}://${location.host}/ws`);
    ws.onopen = () => {
      setConn('on');
      wsRetry = 1000;
      if (currentChat) send({ type: 'open', chatId: currentChat.id });
      if (curView === 'eco') send({ type: 'eco_sub' });
    };
    ws.onclose = () => {
      setConn('off');
      setTimeout(connect, wsRetry);
      wsRetry = Math.min(wsRetry * 1.6, 20000);
    };
    ws.onmessage = (e) => {
      let msg;
      try { msg = JSON.parse(e.data); } catch { return; }
      handleServer(msg);
    };
  }
  function rememberChat(id) { settings.lastChatId = id; saveStore(); }
  function handleServer(msg) {
    if (msg.type === 'chat_created') { currentChat = msg.chat; rememberChat(msg.chat.id); refreshChips(); return; }
    if (msg.type === 'chat_meta') {
      if (currentChat && msg.chat.id === currentChat.id) { currentChat = msg.chat; refreshChips(); }
      return;
    }
    if (msg.type === 'history') {
      currentChat = msg.chat;
      rememberChat(msg.chat.id);
      clearConversation(true);
      for (const ev of msg.events) { try { renderEvent(ev); } catch {} }
      setRunning(msg.running);
      for (const o of projectSel.options) if (o.value === msg.chat.projectId) projectSel.value = o.value;
      refreshChips();
      scrollBottom(true);
      return;
    }
    if (msg.type === 'notify') {
      if (msg.kind === 'done') {
        if (!(curView === 'chat' && currentChat && currentChat.id === msg.chatId && !document.hidden)) {
          banner('good', `✓ Tâche terminée — ${esc(msg.title || '')}`, () => openChat(msg.chatId));
          navBadge('chat'); navBadge('sessions');
        }
      } else if (msg.kind === 'perm') {
        if (!(curView === 'chat' && currentChat && currentChat.id === msg.chatId && !document.hidden)) {
          banner('warn', `🔐 Permission attendue (${esc(msg.tool || '')}) — ${esc(msg.title || '')}`, () => openChat(msg.chatId), 12000);
          navBadge('chat');
        }
      }
      return;
    }
    if (msg.type === 'eco_alert') {
      if (msg.kind === 'down') banner('bad', `🔴 ${esc(msg.site)} est HORS LIGNE — ${esc(msg.reason || '')}`, () => switchView('eco'), 12000);
      else banner('good', `🟢 ${esc(msg.site)} est de retour en ligne`, () => switchView('eco'));
      navBadge('eco');
      if (curView === 'eco') loadEco();
      return;
    }
    if (msg.type === 'eco') {
      if (msg.kind === 'checks' && ecoData && curView === 'eco') applyChecks(msg.items);
      return;
    }
    renderEvent(msg);
  }

  function clearConversation(keepChat) {
    messagesEl.innerHTML = '';
    toolCards.clear(); permCards.clear();
    live = null; liveThink = null;
    if (!keepChat && !currentChat) $('welcome').classList.remove('hidden');
  }
  function openChat(chatId) {
    switchView('chat');
    currentChat = { id: chatId };
    clearConversation(true);
    send({ type: 'open', chatId });
  }

  // ---------- composer ----------
  function doSend(text) {
    send({
      type: 'start',
      chatId: currentChat ? currentChat.id : null,
      project: projectSel.value,
      model: currentChat ? currentChat.model : settings.model,
      permMode: currentChat ? currentChat.permMode : settings.permMode,
      prompt: text,
    });
  }
  function sendPrompt() {
    const text = inputEl.value.trim();
    if (!text) return;
    // commandes slash locales
    if (text === '/clear') { if (currentChat) send({ type: 'clear', chatId: currentChat.id }); inputEl.value = ''; autoGrow(); return; }
    if (text === '/cost') {
      if (currentChat) addMsg(el('div', 'meta-line', esc(`coût cumulé ${fmt$(currentChat.totalCost)} · ${currentChat.turns || 0} tours · ctx ${fmtTok(currentChat.contextTokens)} tok`)));
      inputEl.value = ''; autoGrow(); return;
    }
    if (text === '/resume') { switchView('sessions'); inputEl.value = ''; autoGrow(); return; }
    inputEl.value = '';
    autoGrow();
    hideSlash();
    if (isRunning) {
      // Claude travaille : le message part automatiquement dès la fin du tour
      queuedPrompt = queuedPrompt ? queuedPrompt + '\n' + text : text;
      let n = messagesEl.querySelector('.queued-notice');
      if (!n) { n = el('div', 'notice-line queued-notice'); messagesEl.appendChild(n); }
      n.textContent = '⏳ en attente de la fin du tour : « ' + queuedPrompt.slice(0, 80) + ' »';
      scrollBottom(true);
      return;
    }
    doSend(text);
  }
  sendBtn.onclick = sendPrompt;
  stopBtn.onclick = () => { if (currentChat) send({ type: 'interrupt', chatId: currentChat.id }); };
  inputEl.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); sendPrompt(); }
  });
  function autoGrow() {
    inputEl.style.height = 'auto';
    inputEl.style.height = Math.min(inputEl.scrollHeight, 140) + 'px';
  }
  inputEl.addEventListener('input', () => {
    autoGrow();
    if (inputEl.value.startsWith('/')) showSlash(); else hideSlash();
  });
  inputEl.addEventListener('focus', () => setTimeout(() => scrollBottom(true), 300));

  function showSlash() {
    const h = $('slashHint');
    h.classList.remove('hidden');
    if (!h.childElementCount) {
      for (const [cmd, tip] of [['/clear', 'effacer le contexte'], ['/compact', 'compacter la session'], ['/cost', 'coût de la session'], ['/resume', 'liste des sessions']]) {
        const b = el('button', '', `${cmd} <span style="color:var(--muted);font-weight:600">${tip}</span>`);
        b.onclick = () => { inputEl.value = cmd; hideSlash(); sendPrompt(); };
        h.appendChild(b);
      }
    }
  }
  function hideSlash() { $('slashHint').classList.add('hidden'); }

  document.querySelectorAll('.hint').forEach((h) => {
    h.onclick = () => { inputEl.value = h.textContent; autoGrow(); inputEl.focus(); };
  });

  // ---------- chips ----------
  $('chipModel').onclick = () => {
    const order = ['fable', 'opus', 'sonnet', 'haiku'];
    const cur = currentChat ? currentChat.model : settings.model;
    const next = order[(order.indexOf(cur) + 1) % order.length];
    applyOpts({ model: next });
  };
  $('chipPerm').onclick = () => {
    const order = ['default', 'acceptEdits', 'plan', 'bypass'];
    const cur = currentChat ? currentChat.permMode : settings.permMode;
    const next = order[(order.indexOf(cur) + 1) % 4];
    if (next === 'bypass' && !confirm('Mode BYPASS : Claude Code exécutera TOUTES les actions sans demander. Continuer ?')) return;
    applyOpts({ permMode: next });
  };
  function applyOpts(opts) {
    if (currentChat) {
      Object.assign(currentChat, opts);
      send({ type: 'set_opts', chatId: currentChat.id, model: currentChat.model, permMode: currentChat.permMode });
    }
    if (opts.model) settings.model = opts.model;
    if (opts.permMode) settings.permMode = opts.permMode;
    saveStore();
    refreshChips();
    refreshSettingsView();
  }
  $('chipMore').onclick = () => {
    const c = currentChat;
    openSheet(`
      <div class="sheet-h"><h3>Session</h3></div>
      <div class="sheet-sec">
        <div class="kv"><span>Projet</span><b>${esc(c ? c.projectName : projectSel.selectedOptions[0]?.textContent || '—')}</b></div>
        <div class="kv"><span>Session Claude Code</span><b>${c?.claudeSessionId ? c.claudeSessionId.slice(0, 12) + '…' : '—'}</b></div>
        <div class="kv"><span>Modèle du dernier tour</span><b>${esc(c?.lastModel || '—')}</b></div>
        <div class="kv"><span>Coût cumulé</span><b>${fmt$(c?.totalCost)}</b></div>
        <div class="kv"><span>Contexte</span><b>${c?.contextTokens ? fmtTok(c.contextTokens) + ' tokens' : '—'}</b></div>
      </div>
      <div class="sheet-sec">
        <div class="set-actions">
          <button class="btn-ghost" id="shClear">/clear — nouveau contexte</button>
          <button class="btn-ghost" id="shCompact">/compact</button>
          <button class="btn-ghost" id="shNew">＋ Nouvelle conversation</button>
        </div>
      </div>`);
    $('shClear').onclick = () => { if (c) send({ type: 'clear', chatId: c.id }); closeSheet(); };
    $('shCompact').onclick = () => { closeSheet(); inputEl.value = '/compact'; sendPrompt(); };
    $('shNew').onclick = () => { closeSheet(); newChat(); };
  };
  function newChat() {
    currentChat = null;
    queuedPrompt = null;
    settings.lastChatId = null; saveStore();
    clearConversation();
    setRunning(false);
    refreshChips();
    switchView('chat');
  }

  // ---------- sessions ----------
  async function loadSessions() {
    const r = await fetch('/api/chats');
    if (!r.ok) return;
    const { chats } = await r.json();
    const list = $('sessList');
    list.innerHTML = '';
    if (!chats.length) { list.appendChild(el('div', 'sess-empty', 'Aucune session. Lance une conversation dans l’onglet Chat.')); return; }
    const stLabel = { running: '● en cours', waiting_perm: '🔐 permission', idle: '✓ terminée' };
    for (const c of chats) {
      const card = el('div', 'sess-card');
      card.innerHTML = `
        <div class="sess-top">
          <span class="sess-title">${esc(c.title)}</span>
          <span class="sess-badge ${c.state}">${stLabel[c.state] || c.state}</span>
        </div>
        <div class="sess-info">
          <span>${esc(c.projectName || '')}</span>
          <span>${MODEL_LABEL[c.model] || c.model}</span>
          <span>${fmt$(c.totalCost)}</span>
          <span>${timeAgo(c.updated)}</span>
        </div>`;
      const actions = el('div', 'sess-actions');
      const open = el('button', '', c.state === 'idle' ? 'Reprendre' : 'Ouvrir');
      open.onclick = (e) => { e.stopPropagation(); openChat(c.id); };
      actions.appendChild(open);
      if (c.state === 'idle') {
        const del = el('button', 'del', 'Supprimer');
        del.onclick = async (e) => {
          e.stopPropagation();
          if (!confirm('Supprimer cette session ?')) return;
          await fetch('/api/chats/' + c.id, { method: 'DELETE' });
          card.remove();
          if (currentChat && currentChat.id === c.id) { currentChat = null; clearConversation(); }
        };
        actions.appendChild(del);
      }
      card.appendChild(actions);
      card.onclick = () => openChat(c.id);
      list.appendChild(card);
    }
  }
  $('newSessBtn').onclick = newChat;

  // incidents globaux (bouton en tête de l'onglet Écosystème)
  $('incBtn').onclick = async () => {
    const r = await fetch('/api/eco/incidents');
    if (!r.ok) return;
    const { incidents } = await r.json();
    const label = (app) => (ecoData?.sites.find(s => s.app === app)?.label) || app;
    openSheet(`
      <div class="sheet-h"><h3>Incidents</h3></div>
      <div class="sheet-sec">
        <h4>Historique — 50 derniers</h4>
        ${incidents.length ? incidents.map(i => `
          <div class="inc-item"><span class="${i.ended ? 'inc-ok' : 'inc-dot'}">${i.ended ? '✓' : '■'}</span>
          <span><b>${esc(label(i.site))}</b> · ${new Date(i.started).toLocaleString('fr-CA', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
          ${i.ended ? ' → rétabli en ' + Math.round((i.ended - i.started) / 60000) + ' min' : ' — <b style="color:var(--bad)">EN COURS</b>'} · ${esc(i.reason || '')}</span></div>`).join('')
          : '<div style="color:var(--muted)">Aucun incident enregistré 🎉</div>'}
      </div>`);
  };

  // ---------- écosystème ----------
  function siteStatus(s) {
    if (s.incident || (s.last && !s.last.ok)) return 'down';
    if (s.last && s.last.ms > 4000) return 'slow';
    return s.last ? 'up' : 'unknown';
  }
  const ST = {
    up: { cls: 'up', ico: '●', lbl: 'EN LIGNE' },
    slow: { cls: 'slow', ico: '▲', lbl: 'LENT' },
    down: { cls: 'down', ico: '■', lbl: 'HORS LIGNE' },
    unknown: { cls: 'slow', ico: '▲', lbl: '…' },
  };
  function sparkline(spark, w = 120, h = 30) {
    if (!spark || spark.length < 2) return '<svg class="spark"></svg>';
    const ms = spark.map(p => p.ok ? p.ms : null);
    const max = Math.max(...ms.filter(v => v !== null), 100) * 1.15;
    const step = w / (spark.length - 1);
    let d = '', pen = false;
    spark.forEach((p, i) => {
      if (!p.ok) { pen = false; return; }
      const x = i * step, y = h - 3 - (p.ms / max) * (h - 8);
      d += (pen ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1);
      pen = true;
    });
    const fails = spark.map((p, i) => !p.ok ? `<rect x="${(i * step - 1.5).toFixed(1)}" y="${h - 7}" width="3" height="5" fill="var(--bad)"/>` : '').join('');
    return `<svg class="spark" viewBox="0 0 ${w} ${h}" preserveAspectRatio="none"><path d="${d}" fill="none" stroke="var(--orange-deep)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>${fails}</svg>`;
  }
  async function loadEco() {
    const [r, rn] = await Promise.all([fetch('/api/eco/summary'), fetch('/api/eco/nodes')]);
    if (!r.ok) return;
    ecoData = await r.json();
    renderEco();
    if (rn.ok) renderNodes(await rn.json());
  }
  function nbar(label, val, pct) {
    const c = pct > 88 ? 'var(--bad)' : pct > 70 ? 'var(--warn)' : 'var(--good)';
    return `<div class="nbar"><div class="nbar-l"><span>${label}</span><b>${val}</b></div>
      <div class="nbar-track"><div class="nbar-fill" style="width:${Math.max(2, Math.min(100, pct))}%;background:${c}"></div></div></div>`;
  }
  function renderNodes(data) {
    const grid = $('ecoNodes');
    if (!grid) return;
    grid.innerHTML = '';
    for (const n of data.nodes) {
      const L = n.last;
      const memPct = L && L.mem_total ? Math.round(L.mem_used / L.mem_total * 100) : null;
      const upApps = n.apps.filter(a => a.status === 'online').length;
      const badApp = n.apps.some(a => a.status && a.status !== 'online');
      const card = el('div', 'node-card' + (badApp ? ' warn' : ''));
      card.innerHTML = `
        <div class="node-top"><span class="node-name">${esc(n.node)}</span>
          <span class="node-apps${badApp ? ' bad' : ''}">${upApps}/${n.apps.length} apps</span></div>
        ${nbar('charge', L ? L.load1.toFixed(1) : '—', L ? Math.min(100, L.load1 / 32 * 100) : 0)}
        ${nbar('RAM', memPct !== null ? memPct + '%' : '—', memPct || 0)}
        ${nbar('disque', L ? L.disk_pct + '%' : '—', L ? L.disk_pct : 0)}`;
      grid.appendChild(card);
    }
  }
  function applyChecks(items) {
    if (!ecoData) return;
    for (const it of items) {
      const s = ecoData.sites.find(x => x.app === it.site);
      if (!s) continue;
      s.last = { ts: it.ts, ms: it.ms, code: it.code, ok: it.ok, err: it.err };
      s.spark.push({ ts: it.ts, ms: it.ms, ok: it.ok });
      if (s.spark.length > 40) s.spark.shift();
    }
    renderEco();
  }
  function renderEco() {
    const sites = ecoData.sites;
    const up = sites.filter(s => siteStatus(s) === 'up').length;
    const down = sites.filter(s => siteStatus(s) === 'down').length;
    const lat = sites.filter(s => s.last?.ok).map(s => s.last.ms);
    const avg = lat.length ? Math.round(lat.reduce((a, b) => a + b, 0) / lat.length) : 0;
    $('ecoStamp').textContent = 'maj ' + new Date().toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
    $('ecoOverview').innerHTML = `
      <div class="eco-stat ok"><div class="v">${up}/${sites.length}</div><div class="l">en ligne</div></div>
      <div class="eco-stat ${down ? 'bad' : ''}"><div class="v">${down}</div><div class="l">hors ligne</div></div>
      <div class="eco-stat"><div class="v">${avg}<small style="font-size:12px"> ms</small></div><div class="l">latence moy.</div></div>`;
    const grid = $('ecoGrid');
    grid.innerHTML = '';
    const order = { down: 0, slow: 1, unknown: 2, up: 3 };
    for (const s of [...sites].sort((a, b) => order[siteStatus(a)] - order[siteStatus(b)])) {
      const st = ST[siteStatus(s)];
      const card = el('div', 'site-card' + (siteStatus(s) === 'down' ? ' down' : ''));
      card.innerHTML = `
        <div class="site-top">
          <span class="site-name">${esc(s.label)}</span>
          <span class="st-pill ${st.cls}">${st.ico} ${st.lbl}</span>
        </div>
        <div class="site-mid">
          <div class="site-ms">${s.last?.ok ? s.last.ms : '—'}<small> ms</small></div>
          ${sparkline(s.spark)}
        </div>
        <div class="site-foot">
          <span>up 24h <b>${s.uptime24 ?? '—'}%</b></span>
          <span>p95 <b>${s.p95_24 ?? '—'} ms</b></span>
          <span>${esc(s.node)}</span>
          ${s.proc?.status ? `<span class="${s.proc.status === 'online' ? '' : 'foot-bad'}">pm2 <b>${esc(s.proc.status)}</b></span>` : ''}
          ${s.certExpires ? `<span>SSL <b>${Math.max(0, Math.round((s.certExpires - Date.now()) / 86400000))} j</b></span>` : ''}
        </div>`;
      card.onclick = () => openSiteSheet(s.app);
      grid.appendChild(card);
    }
  }

  async function openSiteSheet(app) {
    const r = await fetch('/api/eco/site/' + app);
    if (!r.ok) return;
    const d = await r.json();
    const s = ecoData.sites.find(x => x.app === app) || {};
    const st = ST[siteStatus(s)];
    const certDays = s.certExpires ? Math.max(0, Math.round((s.certExpires - Date.now()) / 86400000)) : null;
    openSheet(`
      <div class="sheet-h">
        <h3>${esc(d.label)}</h3>
        <span class="st-pill ${st.cls}">${st.ico} ${st.lbl}</span>
      </div>
      <div class="sheet-sec">
        <h4>Disponibilité</h4>
        <div class="tile-row">
          <div class="tile"><div class="v">${s.uptime24 ?? '—'}%</div><div class="l">24 h</div></div>
          <div class="tile"><div class="v">${s.uptime7 ?? '—'}%</div><div class="l">7 j</div></div>
          <div class="tile"><div class="v">${s.uptime30 ?? '—'}%</div><div class="l">30 j</div></div>
        </div>
        <div style="margin-top:10px">${uptimeDays(d.days)}</div>
      </div>
      <div class="sheet-sec">
        <h4>Latence — 24 h</h4>
        ${latencyChart(d.series)}
        <div class="tile-row" style="margin-top:10px">
          <div class="tile"><div class="v">${s.avg24 ?? '—'}</div><div class="l">moy ms</div></div>
          <div class="tile"><div class="v">${s.p95_24 ?? '—'}</div><div class="l">p95 ms</div></div>
          <div class="tile"><div class="v">${s.last?.code || '—'}</div><div class="l">HTTP</div></div>
        </div>
      </div>
      <div class="sheet-sec">
        <h4>Service</h4>
        <div class="kv"><span>Domaine</span><b>${esc(d.domain)}</b></div>
        <div class="kv"><span>Nœud</span><b>${esc(d.node)}</b></div>
        <div class="kv"><span>PM2</span><b>${esc(s.proc?.status || '—')}${s.proc?.restarts ? ' · ' + s.proc.restarts + ' restarts' : ''}</b></div>
        <div class="kv"><span>CPU / RAM process</span><b>${s.proc ? s.proc.cpu + '% / ' + fmtMB(s.proc.mem) : '—'}</b></div>
        <div class="kv"><span>Charge nœud</span><b>${s.nodeStat ? s.nodeStat.load1 + ' · RAM ' + Math.round(s.nodeStat.mem_used / s.nodeStat.mem_total * 100) + '% · disque ' + s.nodeStat.disk_pct + '%' : '—'}</b></div>
        <div class="kv"><span>Dernier commit</span><b>${s.proc?.last_commit ? timeAgo(s.proc.last_commit) : '—'}</b></div>
        <div class="kv"><span>Certificat SSL</span><b>${certDays !== null ? 'expire dans ' + certDays + ' j' : '—'}</b></div>
      </div>
      ${d.incidents.length ? `<div class="sheet-sec"><h4>Incidents — 30 j</h4>${d.incidents.map(i => `
        <div class="inc-item"><span class="${i.ended ? 'inc-ok' : 'inc-dot'}">${i.ended ? '✓' : '■'}</span>
        <span>${new Date(i.started).toLocaleString('fr-CA', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
        ${i.ended ? ' → ' + Math.round((i.ended - i.started) / 60000) + ' min' : ' — EN COURS'} · ${esc(i.reason || '')}</span></div>`).join('')}</div>` : ''}
      ${d.errors.length ? `<div class="sheet-sec"><h4>Erreurs récentes</h4>${d.errors.slice(0, 8).map(e => `
        <div class="inc-item"><span class="inc-dot">✗</span><span>${new Date(e.ts).toLocaleString('fr-CA', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })} · ${e.code ? 'HTTP ' + e.code : esc(e.err || '')}</span></div>`).join('')}</div>` : ''}
      <div class="sheet-sec">
        <h4>Actions d'administration</h4>
        <div class="admin-actions">
          <button class="btn-ghost" id="aRestart">↻ Redémarrer PM2</button>
          <button class="btn-ghost" id="aLogs">📜 Logs récents</button>
          <button class="btn-ghost" id="aCommits">⌥ Git & commits</button>
          <a class="btn-ghost" href="https://${esc(d.domain)}" target="_blank" rel="noopener">↗ Ouvrir le site</a>
        </div>
        <div id="aOut" class="admin-out hidden"></div>
      </div>
      <button class="btn-cta" style="width:100%" id="shChat">💬 Demander à Claude Code →</button>
    `);
    $('shChat').onclick = () => {
      closeSheet();
      newChat();
      for (const o of projectSel.options) if (o.value.startsWith(d.app + '@')) projectSel.value = o.value;
    };
    const out = () => $('aOut');
    const showOut = (html) => { out().classList.remove('hidden'); out().innerHTML = html; };
    $('aRestart').onclick = async () => {
      if (!confirm(`Redémarrer ${d.label} (pm2 restart) sur ${d.node} ?`)) return;
      showOut('<div class="admin-load">redémarrage…</div>');
      const r = await fetch('/api/admin/action', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ app: d.app, action: 'restart' }) });
      const j = await r.json();
      showOut(`<div class="${j.ok ? 'admin-ok' : 'admin-err'}">${j.ok ? '✓ redémarré' : '✗ échec'} — statut : ${esc(j.output || '')}</div>`);
      if (navigator.vibrate) navigator.vibrate(60);
    };
    $('aLogs').onclick = async () => {
      showOut('<div class="admin-load">chargement des logs…</div>');
      const r = await fetch('/api/admin/logs/' + d.app);
      const j = await r.json();
      showOut(`<pre>${esc((j.logs || '').slice(-4000))}</pre>`);
    };
    $('aCommits').onclick = async () => {
      showOut('<div class="admin-load">…</div>');
      const r = await fetch('/api/admin/commits/' + d.app);
      const j = await r.json();
      showOut(`<pre>${esc(j.text || '')}</pre>`);
    };
    attachChartTips();
  }

  function uptimeDays(days) {
    if (!days) return '';
    const cells = days.map(dd => {
      const u = dd.uptime;
      const c = u === null ? 'var(--line)' : u >= 99.5 ? 'var(--good)' : u >= 95 ? 'var(--warn)' : 'var(--bad)';
      return `<div title="${new Date(dd.day).toLocaleDateString('fr-CA')} — ${u === null ? 'aucune donnée' : u + '%'}" style="flex:1;height:22px;border-radius:5px;background:${c};border:1.5px solid var(--line)"></div>`;
    }).join('');
    return `<div style="display:flex;gap:4px">${cells}</div><div style="display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:3px"><span>il y a 14 j</span><span>aujourd'hui</span></div>`;
  }

  function latencyChart(series) {
    const W = 340, H = 130, PL = 38, PB = 18, PT = 8;
    if (!series || series.length < 2) return '<div style="color:var(--muted);font-size:13px">Pas encore assez de données.</div>';
    const ok = series.filter(p => p.ok);
    const max = Math.max(...ok.map(p => p.ms), 100) * 1.15;
    const x = (t) => PL + ((t - series[0].t) / (series[series.length - 1].t - series[0].t)) * (W - PL - 6);
    const y = (ms) => PT + (1 - ms / max) * (H - PT - PB);
    let d = '', pen = false;
    const pts = [];
    for (const p of series) {
      if (!p.ok) { pen = false; continue; }
      const px = x(p.t), py = y(p.ms);
      d += (pen ? 'L' : 'M') + px.toFixed(1) + ' ' + py.toFixed(1);
      pts.push({ x: px, y: py, ms: Math.round(p.ms), t: p.t });
      pen = true;
    }
    const failMarks = series.filter(p => !p.ok).map(p =>
      `<rect x="${(x(p.t) - 2).toFixed(1)}" y="${H - PB - 6}" width="4" height="6" fill="var(--bad)"/>`).join('');
    const gridLines = [0.25, 0.5, 0.75, 1].map(f => {
      const gy = y(max * f / 1.15);
      return `<line x1="${PL}" y1="${gy}" x2="${W - 6}" y2="${gy}" stroke="var(--grid)" stroke-width="1"/>
        <text x="${PL - 5}" y="${gy + 3.5}" text-anchor="end" font-size="9" fill="var(--muted)" font-family="var(--mono)">${Math.round(max * f / 1.15)}</text>`;
    }).join('');
    const lastPt = pts[pts.length - 1];
    const lastLbl = lastPt ? `<circle cx="${lastPt.x}" cy="${lastPt.y}" r="3.5" fill="var(--orange-deep)" stroke="var(--card)" stroke-width="2"/>
      <text x="${Math.min(lastPt.x, W - 40)}" y="${Math.max(lastPt.y - 8, 10)}" font-size="10" font-weight="800" fill="var(--ink)" font-family="var(--mono)">${lastPt.ms} ms</text>` : '';
    const t0 = new Date(series[0].t), t1 = new Date(series[series.length - 1].t);
    const fmtH = (dt) => dt.getHours().toString().padStart(2, '0') + 'h';
    return `<div style="position:relative">
      <svg class="chart lat-chart" viewBox="0 0 ${W} ${H}" data-pts='${JSON.stringify(pts.map(p => ({ x: +p.x.toFixed(1), y: +p.y.toFixed(1), ms: p.ms, t: p.t })))}'>
        ${gridLines}
        <path d="${d}" fill="none" stroke="var(--orange-deep)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
        ${failMarks}${lastLbl}
        <text x="${PL}" y="${H - 4}" font-size="9" fill="var(--muted)" font-family="var(--mono)">${fmtH(t0)}</text>
        <text x="${W - 6}" y="${H - 4}" text-anchor="end" font-size="9" fill="var(--muted)" font-family="var(--mono)">${fmtH(t1)}</text>
      </svg></div>`;
  }
  function attachChartTips() {
    document.querySelectorAll('.lat-chart').forEach((svg) => {
      const pts = JSON.parse(svg.dataset.pts || '[]');
      if (!pts.length) return;
      const wrap = svg.parentElement;
      let tip = null;
      const show = (clientX) => {
        const rect = svg.getBoundingClientRect();
        const vx = (clientX - rect.left) / rect.width * 340;
        let best = pts[0];
        for (const p of pts) if (Math.abs(p.x - vx) < Math.abs(best.x - vx)) best = p;
        if (!tip) { tip = el('div', 'chart-tip'); wrap.appendChild(tip); }
        tip.textContent = `${new Date(best.t).toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit' })} · ${best.ms} ms`;
        tip.style.left = (best.x / 340 * rect.width) + 'px';
        tip.style.top = (best.y / 130 * rect.height) + 'px';
      };
      svg.addEventListener('pointerdown', (e) => show(e.clientX));
      svg.addEventListener('pointermove', (e) => { if (e.buttons || e.pointerType === 'mouse') show(e.clientX); });
      svg.addEventListener('pointerleave', () => { if (tip) { tip.remove(); tip = null; } });
    });
  }

  // rafraîchissement périodique de l'onglet éco (en plus du push)
  setInterval(() => { if (curView === 'eco' && !document.hidden) loadEco(); }, 60000);
  // retour au premier plan (iOS coupe le WS quand l'écran se verrouille) :
  // reconnexion IMMÉDIATE + resynchronisation de la conversation en cours
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) return;
    if (!ws || ws.readyState !== 1) {
      wsRetry = 500;
      try { ws && ws.close(); } catch {}
      connect();
    } else if (currentChat) {
      send({ type: 'open', chatId: currentChat.id });
    }
    if (curView === 'eco') loadEco();
  });
  window.addEventListener('online', () => { wsRetry = 500; if (!ws || ws.readyState !== 1) connect(); });

  // ---------- feuille ----------
  function openSheet(html) {
    $('sheetBody').innerHTML = html;
    $('sheet').classList.remove('hidden');
  }
  function closeSheet() { $('sheet').classList.add('hidden'); }
  $('sheetBack').onclick = closeSheet;

  // ---------- réglages ----------
  function refreshSettingsView() {
    document.querySelectorAll('#segModel button').forEach(b => b.classList.toggle('on', b.dataset.v === settings.model));
    document.querySelectorAll('#segPerm button').forEach(b => b.classList.toggle('on', b.dataset.v === settings.permMode));
    $('setSid').textContent = currentChat?.claudeSessionId ? currentChat.claudeSessionId.slice(0, 12) + '…' : '—';
    $('setCost').textContent = currentChat ? fmt$(currentChat.totalCost) : '—';
    $('setCtx').textContent = currentChat?.contextTokens ? fmtTok(currentChat.contextTokens) + ' tokens' : '—';
  }
  document.querySelectorAll('#segModel button').forEach(b => { b.onclick = () => applyOpts({ model: b.dataset.v }); });
  document.querySelectorAll('#segPerm button').forEach(b => {
    b.onclick = () => {
      if (b.dataset.v === 'bypass' && !confirm('Mode BYPASS : Claude Code exécutera TOUTES les actions sans demander. Continuer ?')) return;
      applyOpts({ permMode: b.dataset.v });
    };
  });
  $('btnClear').onclick = () => { if (currentChat) { send({ type: 'clear', chatId: currentChat.id }); switchView('chat'); } };
  $('btnCompact').onclick = () => { switchView('chat'); inputEl.value = '/compact'; sendPrompt(); };
  $('logoutBtn').onclick = async () => {
    wsWanted = false;
    await fetch('/api/logout', { method: 'POST' });
    location.reload();
  };

  // ---------- login / init ----------
  async function init() {
    const me = await fetch('/api/me');
    if (!me.ok) {
      $('login').classList.remove('hidden');
      $('app').classList.add('hidden');
      return;
    }
    const info = await me.json();
    $('setHost').textContent = (info.node || 'M3U96a') + ':3300';
    $('login').classList.add('hidden');
    $('app').classList.remove('hidden');
    const pr = await fetch('/api/projects');
    const { projects } = await pr.json();
    projectSel.innerHTML = '';
    for (const p of projects) {
      const o = document.createElement('option');
      o.value = p.id; o.textContent = p.name + ' · ' + p.node;
      projectSel.appendChild(o);
    }
    if (settings.projectId) projectSel.value = settings.projectId;
    projectSel.onchange = () => { settings.projectId = projectSel.value; saveStore(); };
    refreshChips();
    refreshSettingsView();
    // reprise automatique : on rouvre la dernière conversation (historique +
    // live si une tâche tourne encore) même après fermeture complète de l'app
    if (settings.lastChatId) currentChat = { id: settings.lastChatId };
    connect();
  }
  $('loginBtn').onclick = doLogin;
  $('password').addEventListener('keydown', (e) => { if (e.key === 'Enter') doLogin(); });
  async function doLogin() {
    const r = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ password: $('password').value }),
    });
    if (r.ok) { $('password').value = ''; init(); }
    else {
      const d = await r.json().catch(() => ({}));
      $('loginError').textContent = d.error || 'Erreur';
    }
  }

  init();
})();