/* ============================================================
   FLOWSHIELD — Consola IA (chat multi-modelo: DeepSeek / GLM)
   Mismo estándar visual que la Consola de scripts: chrome de
   terminal, prompt zsh, streaming en vivo. Historial persistente.
   ============================================================ */
function ConsolaIA() {
  const [data, setData] = useStateL(null);          // {providers, budget_eur, used_eur, period}
  const [provider, setProvider] = useStateL('');
  const [convs, setConvs] = useStateL([]);
  const [convId, setConvId] = useStateL(null);
  const [msgs, setMsgs] = useStateL([]);            // [{role, content}]
  const [input, setInput] = useStateL('');
  const [streaming, setStreaming] = useStateL(false);
  const [live, setLive] = useStateL('');            // texto del turno en curso
  const [toolInfo, setToolInfo] = useStateL('');    // herramientas en uso (tool-calling)
  const [err, setErr] = useStateL(null);
  const abortRef = useRefL(null);
  const termRef = useRefL(null);
  const liveRef = useRefL('');
  const runRef = useRefL(null);     // run_id del turno en curso (para parar/reenganchar)
  const esRef = useRefL(null);      // EventSource de reenganche
  const [proposals, setProposals] = useStateL([]);   // escaneos propuestos por la IA (a confirmar)
  const [scanRun, setScanRun] = useStateL(null);     // escaneo en curso/último {label,target,state,findings,error}
  const [chain, setChain] = useStateL(null);         // cadena en curso {steps:[{label,target,state,findings,message}],state}
  const [autoMode, setAutoMode] = useStateL(false);  // modo autónomo: la IA ejecuta recon/scan en alcance sin confirmar
  const [autoSteps, setAutoSteps] = useStateL([]);   // pasos auto-ejecutados por la IA en el turno [{tool,target,tier,state,findings}]
  const scanEsRef = useRefL(null);  // EventSource del escaneo
  const scanRunIdRef = useRefL(null);
  const chainEsRef = useRefL(null);
  const chainRunIdRef = useRefL(null);
  // Panel "Conectar modelo" (configurar la clave desde la UI).
  const [cfgOpen, setCfgOpen] = useStateL(false);
  const [cfgForm, setCfgForm] = useStateL({ api_key: '', connection_type: 'payg', model: '', base_url: '' });
  const [cfgBusy, setCfgBusy] = useStateL(false);
  const [cfgMsg, setCfgMsg] = useStateL(null);
  // Evals de la Consola IA (owner/admin): batería offline + opcional live.
  const [evalBusy, setEvalBusy] = useStateL(false);
  const [evalRes, setEvalRes] = useStateL(null);
  // Contexto de proyecto: al elegir uno, el chat recibe sus datos reales.
  const [projects, setProjects] = useStateL([]);
  const [projId, setProjId] = useStateL('');
  // RAG: índice local de hallazgos (la IA busca en tus datos).
  const [rag, setRag] = useStateL(null);
  const [ragBusy, setRagBusy] = useStateL(false);
  const [intel, setIntel] = useStateL(null);        // {available, items:[{id,title,preview}]}
  const [intelOpen, setIntelOpen] = useStateL(false);
  const [intelText, setIntelText] = useStateL('');
  const [intelBusy, setIntelBusy] = useStateL(false);

  const loadOverview = () => window.fsApi('/api/aiconsole', { method: 'GET' })
    .then(d => { setData(d);
      setProvider(p => p || ((d.providers || []).find(x => x.enabled) || {}).id || '');
    }).catch(() => setData({ providers: [], budget_eur: 0, used_eur: 0 }));
  const loadConvs = () => window.fsApi('/api/aiconsole/conversations', { method: 'GET' })
    .then(d => setConvs(d.conversations || [])).catch(() => {});

  const openCfg = () => {
    const cur = ((data && data.providers) || []).find(p => p.id === provider) || {};
    setCfgForm({ api_key: '', connection_type: cur.connection_type || 'payg', model: cur.model || '', base_url: '' });
    setCfgMsg(null); setCfgOpen(o => !o);
  };
  const saveCfg = async (local) => {
    if (!provider) { setCfgMsg('Elige un proveedor.'); return; }
    setCfgBusy(true); setCfgMsg(null);
    try {
      await window.fsApi('/api/aiconsole/providers/' + provider + '/credentials', { body: {
        api_key: local ? '' : cfgForm.api_key,
        connection_type: local ? 'local' : cfgForm.connection_type,
        model: cfgForm.model, base_url: cfgForm.base_url } });
      setCfgForm(f => ({ ...f, api_key: '' })); setCfgMsg('Conectado ✓'); await loadOverview();
    } catch (e) { setCfgMsg(e.message || 'No se pudo guardar.'); }
    finally { setCfgBusy(false); }
  };
  const delCfg = async () => {
    if (!provider || !confirm('¿Desconectar este modelo? Volverá a usar la clave del .env si existe.')) return;
    setCfgBusy(true); setCfgMsg(null);
    try {
      await window.fsApi('/api/aiconsole/providers/' + provider + '/credentials', { method: 'DELETE' });
      setCfgForm({ api_key: '', connection_type: 'payg', model: '', base_url: '' }); setCfgMsg('Desconectado'); await loadOverview();
    } catch (e) { setCfgMsg(e.message || 'No se pudo desconectar.'); }
    finally { setCfgBusy(false); }
  };
  // Lanza los evals. live=true puntúa además contra el modelo seleccionado.
  const runEvals = async (live) => {
    setEvalBusy(true); setEvalRes(null);
    try {
      const d = await window.fsApi('/api/aiconsole/evals/run', { body: live ? { live: true, provider } : {} });
      setEvalRes(d);
    } catch (e) { setEvalRes({ error: e.message || 'No se pudieron ejecutar los evals.' }); }
    finally { setEvalBusy(false); }
  };

  useEffectL(() => { loadOverview(); loadConvs();
    window.fsApi('/api/projects', { method: 'GET' }).then(d => setProjects(d.projects || [])).catch(() => {});
    window.fsApi('/api/aiconsole/rag/status', { method: 'GET' }).then(setRag).catch(() => {});
    loadIntel();
    // Al entrar (o volver de otra sección) reabrimos la última conversación; si
    // tenía un turno en curso, openConv se reengancha a él en vivo.
    let saved = null; try { saved = sessionStorage.getItem('fs_aic_conv'); } catch (x) {}
    if (saved) openConv(saved);
    return () => { if (abortRef.current) abortRef.current.abort();
      if (esRef.current) { esRef.current.close(); esRef.current = null; }
      if (scanEsRef.current) { scanEsRef.current.close(); scanEsRef.current = null; }
      if (chainEsRef.current) { chainEsRef.current.close(); chainEsRef.current = null; } }; }, []);

  const loadIntel = () => window.fsApi('/api/aiconsole/intel', { method: 'GET' })
    .then(setIntel).catch(() => {});
  const addIntel = async () => {
    const t = intelText.trim(); if (!t) return;
    setIntelBusy(true); setErr(null);
    // Primera línea como título (si parece un CVE/encabezado corto); resto = texto.
    const nl = t.indexOf('\n'); const title = (nl > 0 ? t.slice(0, nl) : t).slice(0, 120);
    const cveM = t.match(/CVE-\d{4}-\d{3,7}/i);
    try { await window.fsApi('/api/aiconsole/intel', { body: {
        title, text: t, cve: cveM ? cveM[0] : '' } });
      setIntelText(''); await loadIntel(); }
    catch (e) { setErr(e.message || 'No se pudo añadir el aviso.'); }
    finally { setIntelBusy(false); }
  };
  const delIntel = async (id) => {
    try { await window.fsApi('/api/aiconsole/intel/' + id, { method: 'DELETE' }); await loadIntel(); }
    catch (e) { setErr(e.message || 'No se pudo borrar.'); }
  };
  const fetchIntel = async () => {
    setIntelBusy(true); setErr(null);
    try { const d = await window.fsApi('/api/aiconsole/intel/fetch', { body: {} });
      if (d.error && !d.added) setErr(d.error); await loadIntel(); }
    catch (e) { setErr(e.message || 'No se pudo traer CVEs.'); }
    finally { setIntelBusy(false); }
  };
  const reindex = async () => {
    setRagBusy(true); setErr(null);
    try { const d = await window.fsApi('/api/aiconsole/rag/reindex', { body: {} });
      setRag({ available: true, indexed: d.indexed }); }
    catch (e) { setErr(e.message || 'No se pudo indexar.'); }
    finally { setRagBusy(false); }
  };
  useEffectL(() => { if (termRef.current) termRef.current.scrollTop = termRef.current.scrollHeight; }, [msgs, live]);

  const openConv = async (id) => {
    try { const d = await window.fsApi('/api/aiconsole/conversations/' + id, { method: 'GET' });
      setConvId(d.id); try { sessionStorage.setItem('fs_aic_conv', d.id); } catch (x) {}
      setMsgs((d.messages || []).map(m => ({ role: m.role, content: m.content })));
      if (d.provider) setProvider(d.provider); setLive(''); liveRef.current = ''; setErr(null);
      // Si hay un turno generándose en segundo plano, nos reenganchamos a él.
      if (d.active_run) attach(d.active_run);
    } catch (e) { setErr(e.message || 'No se pudo abrir la conversación.'); }
  };
  const newConv = () => { stop(); setConvId(null); setMsgs([]); setLive(''); liveRef.current = '';
    setErr(null); try { sessionStorage.removeItem('fs_aic_conv'); } catch (x) {} };

  // --- Eventos del turno (compartido entre envío por fetch y reenganche SSE) ---
  const applyEvent = (ev, d) => {
    if (ev === 'error') { setErr(d.message || 'error del proveedor'); return 'error'; }
    if (ev === 'tool') { const names = { search_findings: 'buscando hallazgos', count_findings: 'contando hallazgos', list_findings: 'listando hallazgos', list_scans: 'listando escaneos', get_project_summary: 'resumen del proyecto' }; setToolInfo('🔧 ' + (d.tools || []).map(t => names[t] || t).join(' · ')); return; }
    if (ev === 'proposal') { setProposals(d.proposals || []); return; }
    if (ev === 'auto_scan') {
      setAutoSteps(st => {
        if (d.state === 'running') return [...st, { tool: d.tool, target: d.target, label: d.label, tier: d.tier, state: 'running' }];
        const copy = st.slice();
        for (let i = copy.length - 1; i >= 0; i--) {
          if (copy[i].tool === d.tool && copy[i].target === d.target && copy[i].state === 'running') {
            copy[i] = { ...copy[i], state: d.state, findings: d.findings, message: d.message }; break;
          }
        }
        return copy;
      });
      return;
    }
    if (d.conversation_id) { setConvId(d.conversation_id); try { sessionStorage.setItem('fs_aic_conv', d.conversation_id); } catch (x) {} }
    if (d.run_id) runRef.current = d.run_id;
    if (ev === 'done') return 'done';
    if (d.delta != null) { liveRef.current += d.delta; setLive(liveRef.current); }
  };

  // --- Escaneos: la IA propone, el usuario confirma, FlowShield ejecuta ---------
  const launchScan = async (p) => {
    setProposals(ps => ps.filter(x => x !== p));
    setScanRun({ label: p.label, target: p.target, state: 'running' });
    try {
      const r = await window.fsApi('/api/aiconsole/scan/launch', { body: {
        tool: p.tool, target: p.target, options: p.params || {},
        project_id: projId || undefined } });
      attachScan(r.run_id, p);
    } catch (e) { setScanRun({ label: p.label, target: p.target, state: 'error', error: e.message || 'No se pudo lanzar.' }); }
  };
  const dismissProposal = (p) => setProposals(ps => ps.filter(x => x !== p));
  const attachScan = (runId, p) => {
    if (scanEsRef.current) { scanEsRef.current.close(); scanEsRef.current = null; }
    scanRunIdRef.current = runId;
    const es = new EventSource('/api/aiconsole/runs/' + runId + '/stream?after=0');
    scanEsRef.current = es;
    es.addEventListener('scan', (e) => { try { const d = JSON.parse(e.data); setScanRun({ ...d, state: 'running' }); } catch (x) {} });
    es.addEventListener('done', (e) => {
      let d = {}; try { d = JSON.parse(e.data); } catch (x) {}
      es.close(); scanEsRef.current = null; scanRunIdRef.current = null;
      setScanRun({ label: d.label || p.label, target: d.target || p.target, state: 'done', findings: d.findings });
      // La IA interpreta los resultados que acaba de generar (end-to-end).
      const n = (d.findings != null) ? d.findings : '?';
      sendMessage('El escaneo ' + (d.label || p.label) + ' sobre ' + (d.target || p.target) +
        ' terminó con ' + n + ' hallazgo(s), ya en el workspace. Interprétalos priorizando por '
        + 'explotabilidad y dime el siguiente movimiento.');
    });
    es.addEventListener('error', (e) => {
      if (e && e.data) { let d = {}; try { d = JSON.parse(e.data); } catch (x) {}
        es.close(); scanEsRef.current = null; scanRunIdRef.current = null;
        setScanRun({ label: p.label, target: p.target, state: 'error', error: d.message }); }
    });
  };
  const cancelScan = () => {
    const rid = scanRunIdRef.current;
    if (rid) window.fsApi('/api/aiconsole/scan/' + rid + '/cancel', { body: {} }).catch(() => {});
    if (scanEsRef.current) { scanEsRef.current.close(); scanEsRef.current = null; }
    scanRunIdRef.current = null;
    setScanRun(s => s ? { ...s, state: 'cancelled' } : null);
  };

  // --- Cadena: lanzar todo el plan propuesto en orden (una sola confirmación) ---
  const launchChain = async (ps) => {
    if (!ps || !ps.length) return;
    setProposals([]);
    const steps = ps.map(p => ({ label: p.label, target: p.target, tool: p.tool, state: 'pending' }));
    setChain({ steps, state: 'running' });
    try {
      const r = await window.fsApi('/api/aiconsole/scan/chain', { body: {
        steps: ps.map(p => ({ tool: p.tool, target: p.target, options: p.params || {} })),
        project_id: projId || undefined } });
      attachChain(r.run_id, r.steps || steps);
    } catch (e) { setChain({ steps, state: 'error', error: e.message || 'No se pudo lanzar la cadena.' }); }
  };
  const attachChain = (runId, steps) => {
    if (chainEsRef.current) { chainEsRef.current.close(); chainEsRef.current = null; }
    chainRunIdRef.current = runId;
    setChain({ steps: steps.map(s => ({ ...s, state: s.state || 'pending' })), state: 'running' });
    const es = new EventSource('/api/aiconsole/runs/' + runId + '/stream?after=0');
    chainEsRef.current = es;
    es.addEventListener('step', (e) => { try { const d = JSON.parse(e.data);
      setChain(c => { if (!c) return c; const st = [...c.steps];
        st[d.i] = { label: d.label, target: d.target, tool: d.tool, state: d.state, findings: d.findings, message: d.message };
        return { ...c, steps: st }; }); } catch (x) {} });
    es.addEventListener('done', (e) => {
      let d = {}; try { d = JSON.parse(e.data); } catch (x) {}
      es.close(); chainEsRef.current = null; chainRunIdRef.current = null;
      setChain(c => c ? { ...c, state: 'done', findings: d.findings } : null);
      sendMessage('La cadena de escaneos terminó: ' + (d.steps || steps.length) + ' paso(s) y ' +
        ((d.findings != null) ? d.findings : '?') + ' hallazgo(s) nuevos en el workspace. ' +
        'Interprétalos priorizando por explotabilidad y propón la siguiente fase del pentest.');
    });
    es.addEventListener('cancelled', (e) => {
      es.close(); chainEsRef.current = null; chainRunIdRef.current = null;
      setChain(c => c ? { ...c, state: 'cancelled' } : null);
    });
    es.addEventListener('error', (e) => {
      if (e && e.data) { let d = {}; try { d = JSON.parse(e.data); } catch (x) {}
        es.close(); chainEsRef.current = null; chainRunIdRef.current = null;
        setChain(c => c ? { ...c, state: 'error', error: d.message } : null); }
    });
  };
  const cancelChain = () => {
    const rid = chainRunIdRef.current;
    if (rid) window.fsApi('/api/aiconsole/scan/' + rid + '/cancel', { body: {} }).catch(() => {});
    if (chainEsRef.current) { chainEsRef.current.close(); chainEsRef.current = null; }
    chainRunIdRef.current = null;
    setChain(c => c ? { ...c, state: 'cancelled' } : null);
  };
  const commitTurn = () => {
    const finalText = liveRef.current;
    if (finalText) setMsgs(m => [...m, { role: 'assistant', content: finalText }]);
    setLive(''); setToolInfo(''); liveRef.current = ''; setStreaming(false);
    runRef.current = null; loadOverview(); loadConvs();
  };
  // Reengancha (o engancha) a un run por su id vía EventSource: la generación
  // vive en el servidor, así que al volver de otra sección se recupera en vivo.
  const attach = (runId) => {
    if (!runId) return;
    if (esRef.current) { esRef.current.close(); esRef.current = null; }
    runRef.current = runId; setStreaming(true); setErr(null);
    const es = new EventSource('/api/aiconsole/runs/' + runId + '/stream?after=0');
    esRef.current = es;
    const feed = (ev) => (e) => {
      let d; try { d = JSON.parse(e.data); } catch (x) { return; }
      const r = applyEvent(ev, d);
      if (r === 'done') { es.close(); esRef.current = null; commitTurn(); }
      else if (r === 'error') { es.close(); esRef.current = null; setStreaming(false); }
    };
    es.onmessage = feed('message');
    es.addEventListener('tool', feed('tool'));
    es.addEventListener('auto_scan', feed('auto_scan'));
    es.addEventListener('done', feed('done'));
    es.addEventListener('error', (e) => { if (e && e.data) feed('error')(e); });
    // Un 'error' SIN data es un corte de red: EventSource reintenta solo
    // (reenviando Last-Event-ID), así que no cerramos.
  };
  const delConv = async (id, e) => {
    e.stopPropagation();
    if (!confirm('¿Borrar esta conversación?')) return;
    try { await window.fsApi('/api/aiconsole/conversations/' + id, { method: 'DELETE' });
      if (convId === id) newConv(); loadConvs();
    } catch (x) { setErr(x.message || 'No se pudo borrar.'); }
  };

  // Parar = cancelar en el SERVIDOR (no basta con abortar la conexión local,
  // porque la generación sigue viva en segundo plano) + cerrar los streams.
  const stop = () => {
    const rid = runRef.current;
    if (rid) window.fsApi('/api/aiconsole/runs/' + rid + '/cancel', { body: {} }).catch(() => {});
    if (esRef.current) { esRef.current.close(); esRef.current = null; }
    if (abortRef.current) { abortRef.current.abort(); abortRef.current = null; }
    // Conserva lo generado hasta el momento como mensaje del asistente.
    if (liveRef.current) commitTurn(); else { runRef.current = null; setStreaming(false); }
  };

  const send = () => { const text = input.trim(); if (!text) return; setInput(''); sendMessage(text); };
  const sendMessage = async (text) => {
    if (!text || streaming) return;
    if (!provider) { setErr('Selecciona un modelo.'); return; }
    setErr(null); setProposals([]); setAutoSteps([]);
    setMsgs(m => [...m, { role: 'user', content: text }]);
    setStreaming(true); setLive(''); setToolInfo(''); liveRef.current = '';
    const ctrl = new AbortController(); abortRef.current = ctrl;
    try {
      const res = await fetch('/api/aiconsole/chat', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ provider, conversation_id: convId, message: text, project_id: projId || undefined, autonomous: autoMode || undefined }),
        signal: ctrl.signal,
      });
      if (!res.ok) {
        let m = 'Error ' + res.status; try { m = (await res.json()).detail || m; } catch (x) {}
        setErr(m); setStreaming(false); abortRef.current = null; return;
      }
      const reader = res.body.getReader(); const dec = new TextDecoder(); let buf = '';
      let doneSeen = false;
      const handle = (chunk) => {
        let ev = 'message', dataStr = '';
        chunk.split('\n').forEach(l => {
          if (l.startsWith('event:')) ev = l.slice(6).trim();
          else if (l.startsWith('data:')) dataStr += l.slice(5).trim();
        });
        if (!dataStr) return;
        let d; try { d = JSON.parse(dataStr); } catch (x) { return; }
        if (applyEvent(ev, d) === 'done') doneSeen = true;
      };
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += dec.decode(value, { stream: true });
        let i; while ((i = buf.indexOf('\n\n')) >= 0) { handle(buf.slice(0, i)); buf = buf.slice(i + 2); }
      }
      // Si la conexión se cerró sin 'done' (el usuario abortó o cayó la red), la
      // generación SIGUE en el servidor: no cerramos el turno aquí.
      if (doneSeen) commitTurn();
    } catch (e) {
      if (e.name !== 'AbortError') setErr(e.message || 'Fallo de conexión.');
      // AbortError = navegó/cerró: el run continúa en segundo plano y se
      // reenganchará al volver; no tocamos el turno.
    } finally {
      abortRef.current = null;
    }
  };

  const onKey = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } };
  const provTone = { deepseek: 'var(--blue)', glm: 'var(--fs)', local: 'var(--amber)' };
  const provLabel = (p) => ({ deepseek: 'DeepSeek', glm: 'GLM', local: 'IA local' }[p] || p);

  if (data === null) return <div className="mono" style={{ color: 'var(--txt-mute)', fontSize: 13 }}>Cargando…</div>;

  const providers = data.providers || [];
  const enabledProviders = providers.filter(p => p.enabled);
  const curProv = providers.find(p => p.id === provider);
  const isLocal = provider === 'local';
  const budget = data.budget_eur || 0;
  const used = data.used_eur || 0;
  const pct = budget ? Math.min(100, Math.round((used / budget) * 100)) : 0;
  const over = budget && used >= budget;
  const dot = (c) => <span style={{ width: 11, height: 11, borderRadius: '50%', background: c, boxShadow: '0 0 6px ' + c, display: 'inline-block' }} />;

  const promptUser = (text) => (
    <div style={{ marginTop: 12 }}>
      <div><span style={{ color: 'var(--fs)' }}>┌──(</span><span style={{ color: 'var(--txt-hi)', fontWeight: 700 }}>tú</span><span style={{ color: 'var(--fs)' }}>)-[</span><span style={{ color: 'var(--blue)' }}>{curProv ? curProv.label : provider}</span><span style={{ color: 'var(--fs)' }}>]</span></div>
      <div><span style={{ color: 'var(--fs)' }}>└─$</span> <span style={{ color: 'var(--txt-hi)', whiteSpace: 'pre-wrap' }}>{text}</span></div>
    </div>
  );

  return (
    <div className="theme-fs">
      <div className="eyebrow theme-fs" style={{ marginBottom: 4 }}>Operaciones · IA</div>
      <h1 style={{ margin: '0 0 6px', fontSize: 26, color: 'var(--txt-hi)', fontFamily: 'var(--font-display)' }}>Consola IA</h1>
      <div style={{ color: 'var(--txt-dim)', fontSize: 13, marginBottom: 18, maxWidth: 760 }}>
        Habla con el modelo que elijas (DeepSeek o GLM) para apoyo de pentesting: reconocimiento,
        fingerprinting, análisis de vulnerabilidades y siguientes pasos. Las respuestas se vuelcan en vivo.
      </div>
      {err && <div className="mono" style={{ fontSize: 12, color: 'var(--red)', marginBottom: 12 }}>{err}</div>}

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(240px, 320px) 1fr', gap: 16, alignItems: 'start' }}>
        {/* ---- Panel izquierdo: modelo + conversaciones ---- */}
        <div className="panel" style={{ padding: 14, borderRadius: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '0 0 8px' }}>
            <div className="eyebrow" style={{ margin: 0 }}>Modelo</div>
            <button onClick={openCfg} title="Conectar modelo" className="mono"
                    style={{ background: 'none', border: '1px solid var(--line-bright)', color: cfgOpen ? 'var(--fs)' : 'var(--txt-mute)', borderRadius: 6, cursor: 'pointer', padding: '2px 8px', fontSize: 10.5, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <Icon name="gear" size={12} /> Conectar
            </button>
          </div>
          <select value={provider} onChange={(e) => setProvider(e.target.value)}
                  className="mono" style={{ ...inpAI, marginBottom: 6 }}>
            {providers.length === 0 && <option value="">(sin proveedores)</option>}
            {providers.map(p => <option key={p.id} value={p.id}>{p.label}{p.enabled ? '' : ' (sin conectar)'}</option>)}
          </select>
          {curProv && (
            <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)', marginBottom: 12 }}>
              {curProv.enabled
                ? (isLocal
                    ? <>local · {curProv.model || '(sin modelo)'} · {curProv.source === 'ui' ? 'UI' : '.env'} · sin salida de datos</>
                    : <>conectado {curProv.key_masked || ''} · {curProv.connection_type === 'coding' ? 'licencia mensual' : 'API'} · {curProv.source === 'ui' ? 'UI' : '.env'} · {curProv.model}</>)
                : <span style={{ color: 'var(--amber)' }}>{isLocal ? 'sin configurar — pulsa «Conectar» e indica el modelo' : 'sin conectar — pulsa «Conectar»'}</span>}
            </div>
          )}

          {cfgOpen && (
            <div style={{ marginBottom: 12, padding: 11, background: 'var(--bg-void)', border: '1px solid var(--line)', borderRadius: 9, display: 'grid', gap: 8 }}>
              {isLocal ? (
                <>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)' }}>Conectar <strong style={{ color: 'var(--txt-hi)' }}>IA local</strong> — modelo auto-alojado (Ollama/vLLM). <strong style={{ color: 'var(--fs)' }}>No requiere clave y no sale ningún dato.</strong></div>
                  <input value={cfgForm.model} onChange={(e) => setCfgForm(f => ({ ...f, model: e.target.value }))}
                         placeholder="modelo descargado (ej. qwen2.5:7b, llama3.1:8b)" className="mono" style={inpAI} />
                  <input value={cfgForm.base_url} onChange={(e) => setCfgForm(f => ({ ...f, base_url: e.target.value }))}
                         placeholder="base_url (opcional, def. http://ollama:11434/v1)" className="mono" style={{ ...inpAI, fontSize: 10.5 }} />
                  <div className="mono" style={{ fontSize: 9.5, color: 'var(--txt-mute)' }}>Descarga el modelo en el servidor: <span style={{ color: 'var(--txt-dim)' }}>ollama pull &lt;modelo&gt;</span></div>
                </>
              ) : (
                <>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)' }}>Conectar <strong style={{ color: 'var(--txt-hi)' }}>{curProv ? curProv.label : provider}</strong> — la clave se guarda cifrada (no se vuelve a mostrar).</div>
                  <input type="password" autoComplete="off" value={cfgForm.api_key}
                         onChange={(e) => setCfgForm(f => ({ ...f, api_key: e.target.value }))}
                         placeholder={curProv && curProv.enabled ? ('clave actual: ' + (curProv.key_masked || '••••') + ' (pegar para cambiar)') : 'pega tu clave de API'}
                         className="mono" style={inpAI} />
                  <select value={cfgForm.connection_type} onChange={(e) => setCfgForm(f => ({ ...f, connection_type: e.target.value }))}
                          className="mono" style={inpAI}>
                    <option value="payg">API (pago por uso)</option>
                    <option value="coding">Licencia mensual (suscripción)</option>
                  </select>
                  <input value={cfgForm.model} onChange={(e) => setCfgForm(f => ({ ...f, model: e.target.value }))}
                         placeholder="modelo (opcional, ej. glm-5.3)" className="mono" style={inpAI} />
                  <input value={cfgForm.base_url} onChange={(e) => setCfgForm(f => ({ ...f, base_url: e.target.value }))}
                         placeholder="base_url (opcional, avanzado)" className="mono" style={{ ...inpAI, fontSize: 10.5 }} />
                </>
              )}
              {cfgMsg && <div className="mono" style={{ fontSize: 10.5, color: cfgMsg.includes('✓') || cfgMsg === 'Desconectado' ? 'var(--fs)' : 'var(--red)' }}>{cfgMsg}</div>}
              <div style={{ display: 'flex', gap: 8 }}>
                <Btn variant="solid" size="sm" className="theme-fs" onClick={() => saveCfg(isLocal)} style={{ opacity: cfgBusy ? 0.6 : 1 }}>{cfgBusy ? 'Guardando…' : 'Guardar'}</Btn>
                {curProv && curProv.source === 'ui' && <Btn variant="ghost" size="sm" onClick={delCfg}>{isLocal ? 'Restablecer' : 'Desconectar'}</Btn>}
                <Btn variant="ghost" size="sm" onClick={() => setCfgOpen(false)}>Cerrar</Btn>
              </div>

              {/* Evals de la Consola IA (calidad / no-regresión) */}
              <div style={{ borderTop: '1px solid var(--line)', marginTop: 4, paddingTop: 8 }}>
                <div className="mono" style={{ fontSize: 9.5, color: 'var(--txt-mute)', marginBottom: 6 }}>Evals: comprueban el comportamiento de la Consola (propuesta vs ejecución, playbooks, persona y guardas). «Offline» no gasta IA; «Live» puntúa el modelo seleccionado.</div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <Btn variant="ghost" size="sm" icon="check" onClick={() => runEvals(false)} style={{ opacity: evalBusy ? 0.6 : 1 }}>{evalBusy ? 'Ejecutando…' : 'Evals offline'}</Btn>
                  <Btn variant="ghost" size="sm" icon="robot" onClick={() => runEvals(true)} style={{ opacity: evalBusy ? 0.6 : 1 }}>Evals live</Btn>
                </div>
                {evalRes && (evalRes.error
                  ? <div className="mono" style={{ fontSize: 10.5, color: 'var(--red)', marginTop: 6 }}>{evalRes.error}</div>
                  : <div className="mono" style={{ fontSize: 10.5, marginTop: 6, display: 'grid', gap: 3 }}>
                      {['offline', 'live'].map(m => {
                        const r = evalRes[m];
                        if (!r) return null;
                        if (r.skipped) return <div key={m} style={{ color: 'var(--txt-mute)' }}>live: {r.skipped}</div>;
                        const ok = r.failed === 0;
                        return <div key={m} style={{ color: ok ? 'var(--fs)' : 'var(--red)' }}>
                          {m}: {r.passed}/{r.total} {ok ? '✓' : '✗ ' + r.cases.filter(c => !c.ok).map(c => c.id).join(', ')}
                        </div>;
                      })}
                    </div>)}
              </div>
            </div>
          )}

          <div className="eyebrow" style={{ margin: '4px 0 8px' }}>Contexto de proyecto</div>
          <select value={projId} onChange={(e) => setProjId(e.target.value)}
                  className="mono" style={inpAI}>
            <option value="">Sin proyecto (chat general)</option>
            {projects.map(p => <option key={p.id} value={p.id}>{p.name}{p.client ? ' · ' + p.client : ''}</option>)}
          </select>
          <div className="mono" style={{ fontSize: 10, color: projId ? 'var(--fs)' : 'var(--txt-mute)', margin: '6px 0 12px' }}>
            {projId
              ? '✓ el chat usa los hallazgos y la postura de este proyecto'
              : 'elige un proyecto para que la IA razone sobre sus datos reales'}
          </div>

          <div className="eyebrow" style={{ margin: '4px 0 8px' }}>Modo autónomo</div>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', marginBottom: 6 }}>
            <input type="checkbox" checked={autoMode} onChange={(e) => setAutoMode(e.target.checked)} />
            <span className="mono" style={{ fontSize: 11.5, color: autoMode ? 'var(--fs)' : 'var(--txt-dim)' }}>
              {autoMode ? '🤖 autónomo ACTIVO' : 'ejecución autónoma'}
            </span>
          </label>
          <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)', margin: '0 0 12px', lineHeight: 1.5 }}>
            {autoMode
              ? 'la IA ejecuta recon y detección (nmap, nuclei, wpscan…) en alcance SIN confirmar paso a paso, hasta 10 escaneos, y pivota sola. Lo intrusivo (sqlmap, zap, xxe…) SIEMPRE te lo propone. Cancelable en cualquier momento.'
              : 'actívalo para que la IA encadene recon→enum sola dentro del alcance del proyecto; lo intrusivo sigue pidiendo tu confirmación.'}
          </div>

          {rag && rag.available && (
            <>
              <div className="eyebrow" style={{ margin: '4px 0 8px' }}>Memoria IA (RAG)</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)', marginBottom: 7 }}>
                {rag.indexed > 0
                  ? '✓ ' + rag.indexed + ' fragmentos indexados · la IA busca en tus hallazgos'
                  : 'sin indexar — pulsa para que la IA pueda leer tus hallazgos'}
              </div>
              <Btn variant="ghost" size="sm" icon="reload" onClick={reindex} style={{ opacity: ragBusy ? 0.6 : 1, marginBottom: 12 }}>
                {ragBusy ? 'Indexando…' : 'Actualizar índice'}
              </Btn>
            </>
          )}

          {intel && intel.available && (
            <>
              <div className="eyebrow" style={{ margin: '4px 0 6px', cursor: 'pointer' }} onClick={() => setIntelOpen(o => !o)}>
                {intelOpen ? '▾' : '▸'} Inteligencia / CVEs{(intel.items && intel.items.length) ? ' (' + intel.items.length + ')' : ''}
              </div>
              {intelOpen && (
                <div style={{ marginBottom: 12 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)', marginBottom: 6 }}>
                    Pega un aviso/CVE (p. ej. PHP2Shell) — la IA lo tendrá en cuenta aunque sea posterior a su entrenamiento.
                  </div>
                  <textarea value={intelText} onChange={(e) => setIntelText(e.target.value)}
                            placeholder="CVE-2026-… + resumen, o cualquier aviso de amenaza…"
                            className="mono" style={{ ...inpAI, minHeight: 54, resize: 'vertical', marginBottom: 6 }} />
                  <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
                    <Btn variant="solid" size="sm" className="theme-fs" icon="plus" onClick={addIntel} style={{ opacity: intelBusy ? 0.6 : 1 }}>Añadir</Btn>
                    <Btn variant="ghost" size="sm" icon="download" onClick={fetchIntel} style={{ opacity: intelBusy ? 0.6 : 1 }} title="Trae CVEs recientes de una fuente pública (requiere internet)">CVEs recientes</Btn>
                  </div>
                  {(intel.items || []).map(it => (
                    <div key={it.id} className="mono" style={{ display: 'flex', justifyContent: 'space-between', gap: 6, fontSize: 10, color: 'var(--txt-mute)', padding: '2px 0', borderTop: '1px solid var(--line)' }}>
                      <span title={it.preview} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.title || '—'}</span>
                      <button onClick={() => delIntel(it.id)} title="Borrar" style={{ background: 'none', border: 'none', color: 'var(--txt-mute)', cursor: 'pointer', flexShrink: 0 }}>✕</button>
                    </div>
                  ))}
                </div>
              )}
            </>
          )}

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '4px 0 8px' }}>
            <div className="eyebrow" style={{ margin: 0 }}>Conversaciones</div>
            <Btn variant="ghost" size="sm" icon="plus" onClick={newConv}>Nueva</Btn>
          </div>
          <div style={{ display: 'grid', gap: 6, maxHeight: 420, overflow: 'auto' }} className="hidden-scroll">
            {convs.length === 0 && <div className="mono" style={{ fontSize: 12, color: 'var(--txt-mute)' }}>Sin conversaciones.</div>}
            {convs.map(c => {
              const active = convId === c.id;
              const tone = provTone[c.provider] || 'var(--txt-mute)';
              return (
                <div key={c.id} onClick={() => openConv(c.id)}
                     style={{ position: 'relative', padding: '10px 10px 10px 14px', background: active ? 'var(--acc-soft)' : 'var(--bg-void)', border: '1px solid ' + (active ? 'color-mix(in srgb,var(--acc) 45%,transparent)' : 'var(--line)'), borderRadius: 9, cursor: 'pointer', display: 'flex', gap: 9, alignItems: 'flex-start' }}>
                  <span style={{ position: 'absolute', left: 0, top: 9, bottom: 9, width: 3, borderRadius: '0 3px 3px 0', background: active ? 'var(--acc)' : tone, opacity: active ? 1 : 0.55 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, color: active ? 'var(--txt-hi)' : 'var(--txt)', lineHeight: 1.4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', wordBreak: 'break-word' }}>{c.title}</div>
                    <div style={{ marginTop: 6 }}>
                      <span className="mono" style={{ fontSize: 9.5, letterSpacing: '.04em', color: tone, border: '1px solid color-mix(in srgb, ' + tone + ' 38%, transparent)', background: 'color-mix(in srgb, ' + tone + ' 12%, transparent)', borderRadius: 5, padding: '1px 7px' }}>{provLabel(c.provider)}</span>
                    </div>
                  </div>
                  <button title="Borrar" onClick={(e) => delConv(c.id, e)} style={{ ...iconBtnAI('var(--txt-mute)'), marginTop: 1 }}
                          onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--red)'; }}
                          onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--txt-mute)'; }}><Icon name="trash" size={13} /></button>
                </div>
              );
            })}
          </div>

          {/* medidor de gasto */}
          <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)', display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
              <span>Gasto de IA</span><span style={{ color: over ? 'var(--red)' : 'var(--txt-dim)' }}>{used.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} € {budget ? '/ ' + budget + ' €' : ''}</span>
            </div>
            {budget ? (
              <div style={{ height: 6, background: 'var(--bg-void)', borderRadius: 4, overflow: 'hidden' }}>
                <div style={{ width: pct + '%', height: '100%', background: over ? 'var(--red)' : 'var(--fs)', transition: 'width .3s' }} />
              </div>
            ) : null}
            {data.cache && data.cache.saved_eur > 0 && (
              <div className="mono" title="Tokens de entrada servidos desde la caché del proveedor (más baratos)" style={{ fontSize: 9.5, color: 'var(--fs)', marginTop: 5 }}>
                ✓ Caché de prompt: −{data.cache.saved_eur.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} € ahorrados este mes ({data.cache.cached_tokens.toLocaleString('es-ES')} tokens cacheados)
              </div>
            )}
          </div>
        </div>

        {/* ---- Terminal de chat ---- */}
        <div style={{ display: 'grid', gap: 12, minWidth: 0 }}>
          <div style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid var(--line-bright)', boxShadow: '0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(0,245,192,.04)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 13px', background: 'linear-gradient(180deg,#0b1018,#080b12)', borderBottom: '1px solid var(--line)' }}>
              {dot('#ff5f57')}{dot('#febc2e')}{dot('#28c840')}
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--txt-mute)', marginLeft: 8 }}>ia — {curProv ? curProv.label.toLowerCase() : 'modelo'}@flowshield: ~</span>
              <span style={{ flex: 1 }} />
              {streaming && <span className="mono" style={{ fontSize: 10, color: 'var(--acc)', display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--acc)', boxShadow: '0 0 7px var(--acc)' }} />generando</span>}
              {(msgs.length > 0 && !streaming) && <button onClick={newConv} className="mono" style={{ background: 'none', border: '1px solid var(--line-bright)', color: 'var(--txt-mute)', borderRadius: 6, padding: '2px 8px', fontSize: 10, cursor: 'pointer' }}>limpiar</button>}
            </div>
            <div ref={termRef} className="mono hidden-scroll" style={{ margin: 0, padding: '14px 16px', minHeight: 420, maxHeight: 600, overflow: 'auto', fontSize: 12, lineHeight: 1.6, whiteSpace: 'pre-wrap', wordBreak: 'break-word', color: '#c7d0e0', background: 'radial-gradient(900px 300px at 15% -10%, rgba(0,245,192,.06), transparent), #03060b' }}>
              {msgs.length === 0 && !live
                ? <div style={{ color: 'var(--txt-mute)' }}><span style={{ color: 'var(--fs)' }}>┌──(</span><span style={{ color: 'var(--txt-dim)' }}>tú</span><span style={{ color: 'var(--fs)' }}>)-[</span><span style={{ color: 'var(--blue)' }}>{curProv ? curProv.label : 'modelo'}</span><span style={{ color: 'var(--fs)' }}>]</span><br /><span style={{ color: 'var(--fs)' }}>└─$</span> <span style={{ color: 'var(--txt-mute)' }}>escribe tu pregunta y pulsa Enviar (Ctrl+Enter)…</span></div>
                : msgs.map((m, i) => m.role === 'user'
                    ? <div key={i}>{promptUser(m.content)}</div>
                    : <div key={i} style={{ color: 'var(--txt)', marginTop: 4 }}>{m.content}</div>)}
              {toolInfo && <div className="mono" style={{ color: 'var(--amber)', marginTop: 6, fontSize: 11.5, opacity: 0.9 }}>{toolInfo}…</div>}
              {live && <div style={{ color: 'var(--txt)', marginTop: 4 }}>{live}<span className="cursor-blink" style={{ background: 'var(--fs)' }} /></div>}
              {streaming && !live && !toolInfo && <div style={{ marginTop: 4 }}><span className="cursor-blink" style={{ background: 'var(--fs)' }} /></div>}

              {/* Modo autónomo: escaneos que la IA ejecuta sola (recon/scan) en vivo */}
              {autoSteps.length > 0 && (
                <div style={{ marginTop: 10, padding: '10px 12px', border: '1px solid color-mix(in srgb,var(--fs) 45%,transparent)', background: 'color-mix(in srgb,var(--fs) 8%,var(--bg-void))', borderRadius: 9 }}>
                  <div className="mono" style={{ fontSize: 11.5, color: 'var(--txt-hi)' }}>🤖 La IA está trabajando sola · {autoSteps.length} escaneo(s)</div>
                  <ul className="mono" style={{ fontSize: 10.5, color: 'var(--txt-mute)', margin: '6px 0 0', paddingLeft: 18, listStyle: 'none' }}>
                    {autoSteps.map((s, i) => (
                      <li key={'as' + i} style={{ marginBottom: 2 }}>
                        <span style={{ color: s.tier === 'recon' ? 'var(--blue)' : 'var(--fs)' }}>[{s.tier}]</span>{' '}
                        <strong style={{ color: 'var(--txt-dim)' }}>{s.label || s.tool}</strong> → {s.target}{' '}
                        {s.state === 'running' ? <span style={{ color: 'var(--amber)' }}>⏳</span>
                          : s.state === 'done' ? <span style={{ color: 'var(--fs)' }}>✓ {s.findings} hallazgos</span>
                          : <span style={{ color: 'var(--red)' }}>✗ {s.message || 'bloqueado (alcance)'}</span>}
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              {/* Plan de varios pasos: una sola confirmación para toda la cadena */}
              {proposals.length >= 2 && (
                <div style={{ marginTop: 10, padding: '10px 12px', border: '1px solid color-mix(in srgb,var(--fs) 45%,transparent)', background: 'color-mix(in srgb,var(--fs) 8%,var(--bg-void))', borderRadius: 9 }}>
                  <div className="mono" style={{ fontSize: 11.5, color: 'var(--txt-hi)' }}>🧭 Plan de la IA · {proposals.length} pasos (recon → enum → vuln)</div>
                  <ol className="mono" style={{ fontSize: 10.5, color: 'var(--txt-mute)', margin: '6px 0 0', paddingLeft: 20 }}>
                    {proposals.map((p, i) => <li key={'pl' + i}><strong style={{ color: 'var(--txt-dim)' }}>{p.label}</strong> → {p.target}</li>)}
                  </ol>
                  <div style={{ display: 'flex', gap: 8, marginTop: 9 }}>
                    <Btn variant="solid" size="sm" className="theme-fs" icon="play" onClick={() => launchChain(proposals)}>Lanzar la cadena ({proposals.length})</Btn>
                    <Btn variant="ghost" size="sm" onClick={() => setProposals([])}>Descartar plan</Btn>
                  </div>
                  <div className="mono" style={{ fontSize: 9.5, color: 'var(--txt-mute)', marginTop: 7 }}>Se ejecutan en orden; o confírmalos de uno en uno abajo. Solo objetivos dentro del alcance.</div>
                </div>
              )}

              {/* Escaneos propuestos por la IA: requieren confirmación */}
              {proposals.map((p, i) => (
                <div key={'prop' + i} style={{ marginTop: 10, padding: '10px 12px', border: '1px solid color-mix(in srgb,var(--amber) 45%,transparent)', background: 'color-mix(in srgb,var(--amber) 8%,var(--bg-void))', borderRadius: 9 }}>
                  <div className="mono" style={{ fontSize: 11.5, color: 'var(--txt-hi)' }}>
                    🛠️ La IA quiere lanzar <strong style={{ color: 'var(--amber)' }}>{p.label}</strong> contra <strong style={{ color: 'var(--txt-hi)' }}>{p.target}</strong>
                  </div>
                  {p.params && Object.keys(p.params).length > 0 &&
                    <div className="mono" style={{ fontSize: 10, color: 'var(--txt-mute)', marginTop: 3 }}>{Object.entries(p.params).map(([k, v]) => k + '=' + v).join(' · ')}</div>}
                  <div style={{ display: 'flex', gap: 8, marginTop: 9 }}>
                    <Btn variant="solid" size="sm" className="theme-fs" icon="play" onClick={() => launchScan(p)}>Lanzar escaneo</Btn>
                    <Btn variant="ghost" size="sm" onClick={() => dismissProposal(p)}>Descartar</Btn>
                  </div>
                  <div className="mono" style={{ fontSize: 9.5, color: 'var(--txt-mute)', marginTop: 7 }}>Solo se ejecuta si el objetivo está dentro del alcance autorizado.</div>
                </div>
              ))}

              {/* Estado del escaneo en curso / último */}
              {scanRun && (
                <div className="mono" style={{ marginTop: 10, padding: '9px 12px', border: '1px solid var(--line-bright)', borderRadius: 9, background: 'var(--bg-void)', fontSize: 11.5,
                  color: scanRun.state === 'error' ? 'var(--red)' : scanRun.state === 'done' ? 'var(--ok)' : 'var(--acc)' }}>
                  {scanRun.state === 'running' && <span><span style={{ display: 'inline-block', width: 7, height: 7, borderRadius: '50%', background: 'var(--acc)', boxShadow: '0 0 7px var(--acc)', marginRight: 7 }} />Escaneando <strong>{scanRun.label}</strong> → {scanRun.target}… <button onClick={cancelScan} style={{ marginLeft: 8, background: 'none', border: '1px solid var(--line-bright)', color: 'var(--txt-mute)', borderRadius: 6, padding: '1px 7px', fontSize: 9.5, cursor: 'pointer' }}>parar</button></span>}
                  {scanRun.state === 'done' && <span>✓ <strong>{scanRun.label}</strong> → {scanRun.target}: {scanRun.findings != null ? scanRun.findings : '?'} hallazgo(s) en el workspace.</span>}
                  {scanRun.state === 'cancelled' && <span>✕ Escaneo detenido ({scanRun.label} → {scanRun.target}).</span>}
                  {scanRun.state === 'error' && <span>⚠️ {scanRun.label} → {scanRun.target}: {scanRun.error || 'fallo'}</span>}
                </div>
              )}

              {/* Progreso de la cadena de escaneos */}
              {chain && (
                <div className="mono" style={{ marginTop: 10, padding: '10px 12px', border: '1px solid var(--line-bright)', borderRadius: 9, background: 'var(--bg-void)', fontSize: 11 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <span style={{ color: 'var(--txt-hi)' }}>🧭 Cadena de escaneos {chain.state === 'done' ? '· completada' : chain.state === 'cancelled' ? '· detenida' : chain.state === 'error' ? '· error' : '· en curso'}</span>
                    {chain.state === 'running' && <button onClick={cancelChain} style={{ background: 'none', border: '1px solid var(--line-bright)', color: 'var(--txt-mute)', borderRadius: 6, padding: '1px 7px', fontSize: 9.5, cursor: 'pointer' }}>parar</button>}
                  </div>
                  {(chain.steps || []).map((s, i) => {
                    const ic = s.state === 'done' ? '✓' : s.state === 'running' ? '⏳' : s.state === 'error' ? '⚠️' : '•';
                    const col = s.state === 'done' ? 'var(--ok)' : s.state === 'running' ? 'var(--acc)' : s.state === 'error' ? 'var(--red)' : 'var(--txt-mute)';
                    return <div key={'cs' + i} style={{ color: col, padding: '1px 0' }}>{ic} <strong>{s.label}</strong> → {s.target}{s.state === 'done' && s.findings != null ? ' · ' + s.findings + ' hallazgo(s)' : ''}{s.state === 'error' && s.message ? ' · ' + s.message : ''}</div>;
                  })}
                  {chain.error && <div style={{ color: 'var(--red)', marginTop: 4 }}>⚠️ {chain.error}</div>}
                </div>
              )}
            </div>
          </div>

          {/* barra de entrada */}
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
            <textarea value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={onKey}
                      placeholder={over ? 'Has alcanzado tu tope de gasto de este mes.' : 'Escribe aquí… (Enter envía · Shift+Enter = salto de línea)'}
                      disabled={over}
                      className="mono" style={{ ...inpAI, flex: 1, minHeight: 60, maxHeight: 160, resize: 'vertical' }} />
            {streaming
              ? <Btn variant="ghost" size="sm" icon="stop" onClick={stop}>Detener</Btn>
              : <Btn variant="solid" size="sm" className="theme-fs" icon="play" onClick={send} style={{ opacity: (provider && !over) ? 1 : 0.5 }}>Enviar</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

const inpAI = { background: 'var(--bg-panel-2)', border: '1px solid var(--line-bright)', borderRadius: 7, padding: '7px 9px', color: 'var(--txt-hi)', fontSize: 12, outline: 'none', width: '100%' };
const iconBtnAI = (color) => ({ background: 'none', border: 'none', color, cursor: 'pointer', padding: 3, display: 'inline-flex', flexShrink: 0 });

Object.assign(window, { ConsolaIA });