agentic-kdd 2.0.7 → 2.1.1

package/src/dashboard-template.js

@@ -0,0 +1,1345 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const http = require('http');
+const { execSync } = require('child_process');
+
+const PORT = 3847;
+const projectPath = process.cwd();
+const dbPath = path.join(projectPath, '.agentic', 'memoria.db');
+const grafoPath = path.join(projectPath, '.agentic', 'grafo', 'grafo.js');
+const configPath = path.join(projectPath, '.agentic', 'config.md');
+const memoriaPath = path.join(projectPath, '.agentic', 'memoria');
+
+if (!fs.existsSync(configPath)) { console.log('\n  Agentic KDD not installed.\n'); process.exit(1); }
+if (fs.existsSync(grafoPath)) { try { process.stdout.write('  Syncing... '); execSync(`node "${grafoPath}" sync`, { stdio: 'pipe', cwd: projectPath }); console.log('✓'); } catch {} }
+
+function readConfig() {
+  try {
+    const c = fs.readFileSync(configPath, 'utf8');
+    const lines = c.split('\n');
+
+    const get = (key) => (c.match(new RegExp(key + ': (.+)')) || [])[1]?.trim() || '—';
+
+    // Busca una sección que EMPIECE con el prefijo dado y recoge hasta la siguiente sección del mismo nivel
+    const getBlock = (prefix, stopLevel) => {
+      const startIdx = lines.findIndex(l => l.trimStart().startsWith(prefix));
+      if (startIdx === -1) return '';
+      const stopRe = stopLevel === '##' ? /^## / : /^### /;
+      let result = [];
+      for (let i = startIdx + 1; i < lines.length; i++) {
+        if (lines[i].match(stopRe)) break;
+        result.push(lines[i]);
+      }
+      return result.join('\n').trim();
+    };
+
+    // Leer yaml block para stack
+    const getYaml = (key) => {
+      const m = c.match(new RegExp('  ' + key + ': (.+)'));
+      return m ? m[1].trim() : '—';
+    };
+
+    return {
+      nombre: get('Nombre'),
+      descripcion: (() => {
+        // Descripción puede ser multilinea con |
+        const m = c.match(/Descripción: \|\n([\s\S]*?)(?=\nTipo:|$)/);
+        if (m) return m[1].split('\n').map(l => l.trim()).filter(Boolean).join(' ');
+        return get('Descripción');
+      })(),
+      tipo: get('Tipo'),
+      framework: getYaml('framework'),
+      language: getYaml('language'),
+      runtime: getYaml('runtime'),
+      base_datos: getYaml('base_datos'),
+      package_manager: getYaml('package_manager'),
+      cmd_dev: getYaml('dev'),
+      cmd_test: getYaml('test'),
+      cmd_build: getYaml('build'),
+      implementados: getBlock('### Implementados', '###'),
+      pendientes: getBlock('### Pendientes', '##'),
+      reglas: getBlock('### Desarrollo', '###') || getBlock('## Reglas del proyecto', '##'),
+      raw: c
+    };
+  } catch { return {}; }
+}
+
+function readMemoria(file) { try { const p = path.join(memoriaPath, file); return fs.existsSync(p) ? fs.readFileSync(p, 'utf8') : ''; } catch { return ''; } }
+
+function parseEntries(content) {
+  return content.split(/^## /m)
+    .filter(s => s.trim() && !s.startsWith('<!--') && !s.startsWith('Cómo') && !s.startsWith('Formato') && !s.startsWith('Registro') && !s.startsWith('Patrones') && s.length > 10)
+    .map(s => {
+      const lines = s.split('\n');
+      const titulo = lines[0].trim().replace(/^\[.*?\]\s*/, '').trim();
+      if (!titulo || titulo.length < 5) return null;
+      const get = (k) => { for (const l of lines) { if (l.startsWith(k + ':')) return l.split(':').slice(1).join(':').trim(); } return ''; };
+      return { titulo, area: get('Área') || get('Area') || 'global', confianza: get('Confianza') || 'BAJA', aplicado: parseInt(get('Aplicado')) || 0, util: parseInt(get('Útil') || get('Util')) || 0, estado: get('Estado') || 'ACTIVO', contenido: s };
+    }).filter(Boolean);
+}
+
+const config = readConfig();
+const patrones = parseEntries(readMemoria('patrones.md')).filter(p => p.estado === 'ACTIVO');
+const decisiones = parseEntries(readMemoria('decisiones.md'));
+const errores = parseEntries(readMemoria('errores.md'));
+
+function getGraphData() {
+  try {
+    if (!fs.existsSync(dbPath)) return { nodes: [], edges: [] };
+    const Database = require('better-sqlite3');
+    const db = new Database(dbPath, { readonly: true });
+    const nodes = db.prepare('SELECT * FROM nodos ORDER BY fecha_creacion DESC').all();
+    const edges = db.prepare('SELECT * FROM relaciones').all();
+    db.close();
+    return { nodes, edges };
+  } catch { return { nodes: [], edges: [] }; }
+}
+
+const { nodes, edges } = getGraphData();
+
+// Calcular grado de conexiones por nodo (como Graphify — nodos divinos)
+const degreeMap = {};
+nodes.forEach(n => { degreeMap[n.id] = 0; });
+edges.forEach(e => { degreeMap[e.desde_id] = (degreeMap[e.desde_id] || 0) + 1; degreeMap[e.hacia_id] = (degreeMap[e.hacia_id] || 0) + 1; });
+const maxDegree = Math.max(...Object.values(degreeMap), 1);
+
+// Nodos divinos = top 20% por conexiones
+const godThreshold = maxDegree * 0.6;
+const godNodes = nodes.filter(n => (degreeMap[n.id] || 0) >= godThreshold && godThreshold > 0);
+
+// Conexiones sorprendentes = edges entre nodos de diferente área
+const surprisingEdges = edges.filter(e => {
+  const src = nodes.find(n => n.id === e.desde_id);
+  const tgt = nodes.find(n => n.id === e.hacia_id);
+  return src && tgt && src.area !== tgt.area && src.area !== 'global' && tgt.area !== 'global';
+});
+
+const stats = {
+  total: nodes.length, errors: nodes.filter(n => n.tipo === 'error').length,
+  patterns: nodes.filter(n => n.tipo === 'patron').length, decisions: nodes.filter(n => n.tipo === 'decision').length,
+  high: nodes.filter(n => n.confianza === 'ALTA').length, medium: nodes.filter(n => n.confianza === 'MEDIA').length,
+  low: nodes.filter(n => n.confianza === 'BAJA').length, relations: edges.length,
+  active: nodes.filter(n => n.estado === 'ACTIVO').length, obsolete: nodes.filter(n => n.estado === 'OBSOLETO').length,
+  godNodes: godNodes.length, surprising: surprisingEdges.length,
+};
+
+function parseModulos(text) {
+  if (!text || text === '—') return [];
+  const lines = text.split('\n').map(l => l.trim()).filter(l => l);
+  const results = [];
+  for (const line of lines) {
+    // Tabla markdown: | 1 | Auth, middleware | /login |
+    if (line.startsWith('|') && !line.match(/^[|\s-]+$/) && !line.toLowerCase().includes('fase') && !line.toLowerCase().includes('módulo') && !line.toLowerCase().includes('module') && !line.toLowerCase().includes('tabla')) {
+      const cols = line.split('|').map(c => c.trim()).filter(Boolean);
+      if (cols.length >= 2) {
+        const modName = cols[1].replace(/\*\*/g, '').replace(/✅/g, '').trim();
+        if (modName && modName.length > 2) results.push(modName);
+      }
+    }
+    // Lista simple: - módulo o [ ] módulo
+    else if (line.match(/^[-*\[]/)) {
+      const clean = line.replace(/^[-*]\s*/, '').replace(/^\[.\]\s*/, '').trim();
+      if (clean && clean.length > 3 && !clean.startsWith('_')) results.push(clean);
+    }
+  }
+  return results;
+}
+
+const modulosImpl = parseModulos(config.implementados);
+const modulosPend = parseModulos(config.pendientes);
+const reglas = (config.reglas || '').split('\n').map(l => l.trim()).filter(l => l && l !== '—' && l.length > 5);
+
+// Construir módulos con relaciones para el grafo neuronal de proyecto
+function buildModuleGraph() {
+  const mNodes = [];
+  const mEdges = [];
+  const areaCount = {};
+
+  // Contar errores y patrones por área
+  nodes.forEach(n => {
+    if (!areaCount[n.area]) areaCount[n.area] = { errors: 0, patterns: 0, decisions: 0, high: 0 };
+    if (n.tipo === 'error') areaCount[n.area].errors++;
+    if (n.tipo === 'patron') areaCount[n.area].patterns++;
+    if (n.tipo === 'decision') areaCount[n.area].decisions++;
+    if (n.confianza === 'ALTA') areaCount[n.area].high++;
+  });
+
+  // Crear nodos de módulos implementados
+  modulosImpl.forEach((m, i) => {
+    const area = m.toLowerCase().replace(/\s+/g, '-').split(/[\s\/\-]/)[0];
+    const stats = areaCount[area] || areaCount['global'] || { errors: 0, patterns: 0, decisions: 0, high: 0 };
+    mNodes.push({ id: 'impl-' + i, label: m, tipo: 'impl', area, errors: stats.errors, patterns: stats.patterns, high: stats.high, degree: stats.errors + stats.patterns + stats.decisions });
+  });
+
+  // Crear nodos de módulos pendientes
+  modulosPend.forEach((m, i) => {
+    mNodes.push({ id: 'pend-' + i, label: m, tipo: 'pend', area: m.toLowerCase().split(/\s/)[0], errors: 0, patterns: 0, high: 0, degree: 0 });
+  });
+
+  // Crear edges entre módulos que comparten área en la memoria
+  const implByArea = {};
+  mNodes.filter(n => n.tipo === 'impl').forEach(n => {
+    if (!implByArea[n.area]) implByArea[n.area] = [];
+    implByArea[n.area].push(n.id);
+  });
+
+  // Conectar módulos con errores compartidos (misma área en memoria)
+  const areaRelations = {};
+  edges.forEach(e => {
+    const src = nodes.find(n => n.id === e.desde_id);
+    const tgt = nodes.find(n => n.id === e.hacia_id);
+    if (src && tgt) {
+      const key = [src.area, tgt.area].sort().join('::');
+      areaRelations[key] = (areaRelations[key] || 0) + 1;
+    }
+  });
+
+  // Conectar módulos impl con al menos 2 conexiones entre sus áreas
+  mNodes.filter(n => n.tipo === 'impl').forEach((src, si) => {
+    mNodes.filter((n, ti) => n.tipo === 'impl' && ti > si).forEach(tgt => {
+      const key = [src.area, tgt.area].sort().join('::');
+      if (areaRelations[key] >= 1) {
+        mEdges.push({ source: src.id, target: tgt.id, weight: areaRelations[key], tipo: 'shared_knowledge' });
+      }
+    });
+  });
+
+  // Siempre conectar módulos consecutivos como relación de flujo
+  mNodes.filter(n => n.tipo === 'impl').forEach((n, i, arr) => {
+    if (i < arr.length - 1) {
+      const exists = mEdges.find(e => (e.source === n.id && e.target === arr[i+1].id) || (e.source === arr[i+1].id && e.target === n.id));
+      if (!exists) mEdges.push({ source: n.id, target: arr[i+1].id, weight: 1, tipo: 'flow' });
+    }
+  });
+
+  // Conectar pendientes con el módulo impl más relacionado
+  mNodes.filter(n => n.tipo === 'pend').forEach(pend => {
+    if (mNodes.filter(n => n.tipo === 'impl').length > 0) {
+      const target = mNodes.filter(n => n.tipo === 'impl')[0];
+      mEdges.push({ source: pend.id, target: target.id, weight: 1, tipo: 'depends' });
+    }
+  });
+
+  return { mNodes, mEdges };
+}
+
+const { mNodes, mEdges } = buildModuleGraph();
+
+// Preguntas sugeridas para el nuevo integrante (como GRAPH_REPORT de Graphify)
+function buildSuggestedQuestions() {
+  const qs = [];
+  if (godNodes.length > 0) qs.push(`What flows through ${godNodes[0].titulo.slice(0,40)}?`);
+  if (surprisingEdges.length > 0) {
+    const e = surprisingEdges[0];
+    const src = nodes.find(n => n.id === e.desde_id);
+    const tgt = nodes.find(n => n.id === e.hacia_id);
+    if (src && tgt) qs.push(`How does ${src.area} connect to ${tgt.area}?`);
+  }
+  if (modulosImpl.length > 0) qs.push(`How do I add a feature to ${modulosImpl[0]}?`);
+  if (errores.length > 0) qs.push(`What errors should I avoid in ${errores[0].area}?`);
+  if (patrones.filter(p => p.confianza === 'ALTA').length > 0) qs.push(`What are the permanent rules for this project?`);
+  if (decisiones.length > 0) qs.push(`Why was ${decisiones[0].titulo.slice(0,40)} decided?`);
+  return qs.slice(0, 5);
+}
+
+const suggestedQuestions = buildSuggestedQuestions();
+
+const HTML = `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Agentic KDD — ${config.nombre}</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+<style>
+:root{--bg:#0a0d14;--bg2:#111520;--bg3:#1a1f2e;--bg4:#232840;--border:#2a3050;--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--purple:#8b5cf6;--pl:#a78bfa;--green:#10b981;--red:#ef4444;--blue:#3b82f6;--amber:#f59e0b;--cyan:#06b6d4;--pink:#ec4899;--r:12px}
+.light{--bg:#f0f4f8;--bg2:#ffffff;--bg3:#f8fafc;--bg4:#eef2f7;--border:#dde3ee;--text:#0f172a;--text2:#475569;--text3:#94a3b8}
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;height:100vh;overflow:hidden;display:flex;flex-direction:column}
+
+/* Header */
+.hdr{background:var(--bg2);border-bottom:1px solid var(--border);padding:11px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px}
+.logo{font-size:15px;font-weight:700;color:var(--pl);white-space:nowrap}
+.proj{font-size:12px;color:var(--text2);background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:3px 8px;margin-left:10px;white-space:nowrap}
+.dot{width:7px;height:7px;border-radius:50%;background:var(--green);margin-left:8px;display:inline-block;flex-shrink:0}
+.hdr-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
+.badge{font-size:10px;padding:3px 7px;border-radius:4px;font-weight:600;white-space:nowrap}
+.b-god{background:rgba(245,158,11,.2);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
+.b-sur{background:rgba(236,72,153,.15);color:#f472b6;border:1px solid rgba(236,72,153,.25)}
+.b-high{background:rgba(139,92,246,.2);color:#a78bfa;border:1px solid rgba(139,92,246,.3)}
+.btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:6px;padding:5px 10px;font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}
+.btn:hover{border-color:var(--purple);color:var(--pl)}
+.sel{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 8px;font-size:11px}
+
+/* Mode tabs */
+.mode-tabs{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 20px;display:flex;flex-shrink:0}
+.mode-tab{padding:11px 18px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;transition:all .15s;display:flex;align-items:center;gap:6px;white-space:nowrap}
+.mode-tab:hover{color:var(--text2)}
+.mode-tab.active{color:var(--pl);border-bottom-color:var(--purple)}
+
+.content{flex:1;overflow:hidden;display:flex}
+
+/* ════════ KNOWLEDGE GRAPH MODE ════════ */
+#mode-graph{flex:1;display:flex;overflow:hidden}
+.sidebar{width:272px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
+.sb-tabs{display:flex;border-bottom:1px solid var(--border)}
+.sb-tab{flex:1;padding:9px 6px;text-align:center;font-size:11px;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;transition:all .15s}
+.sb-tab.active{color:var(--pl);border-bottom-color:var(--purple)}
+.sb-body{flex:1;overflow-y:auto;padding:10px}
+.sb-body::-webkit-scrollbar{width:3px}
+.sb-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
+.search-box{padding:8px 10px;border-bottom:1px solid var(--border)}
+.search-input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 8px;font-size:11px;outline:none}
+.search-input:focus{border-color:var(--purple)}
+.filter-row{padding:6px 10px;border-bottom:1px solid var(--border);display:flex;gap:4px;flex-wrap:wrap}
+.fpill{font-size:10px;padding:2px 7px;border-radius:10px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .15s}
+.fpill.active{background:rgba(139,92,246,.15);border-color:var(--purple);color:var(--pl)}
+
+/* God nodes section */
+.god-section{padding:8px 10px;border-bottom:1px solid var(--border);background:rgba(245,158,11,.04)}
+.god-title{font-size:9px;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:4px}
+.god-item{font-size:10px;color:var(--text2);padding:3px 0;display:flex;align-items:center;gap:5px;cursor:pointer}
+.god-item:hover{color:var(--amber)}
+.god-ring{width:10px;height:10px;border-radius:50%;border:2px solid var(--amber);flex-shrink:0}
+
+.nitem{padding:7px 8px;border-radius:6px;cursor:pointer;margin-bottom:3px;border:1px solid transparent;transition:all .15s}
+.nitem:hover{background:var(--bg3);border-color:var(--border)}
+.nitem.selected{background:rgba(139,92,246,.1);border-color:var(--purple)}
+.nitem.god-node{border-left:2px solid var(--amber)}
+.ntb{font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px;flex-shrink:0}
+.t-error{background:rgba(239,68,68,.15);color:#f87171}
+.t-patron{background:rgba(16,185,129,.15);color:#34d399}
+.t-decision{background:rgba(59,130,246,.15);color:#60a5fa}
+.mb{font-size:9px;padding:1px 4px;border-radius:3px;font-weight:500}
+.cALTA{background:rgba(16,185,129,.2);color:#34d399}
+.cMEDIA{background:rgba(245,158,11,.2);color:#fbbf24}
+.cBAJA{background:rgba(100,116,139,.2);color:#94a3b8}
+.ab{font-size:9px;color:var(--text3);background:var(--bg3);border-radius:3px;padding:1px 4px}
+.tag-ext{font-size:9px;padding:1px 4px;border-radius:3px;background:rgba(16,185,129,.1);color:#6ee7b7;border:1px solid rgba(16,185,129,.2)}
+.tag-inf{font-size:9px;padding:1px 4px;border-radius:3px;background:rgba(59,130,246,.1);color:#93c5fd;border:1px solid rgba(59,130,246,.2)}
+.tag-amb{font-size:9px;padding:1px 4px;border-radius:3px;background:rgba(245,158,11,.1);color:#fcd34d;border:1px solid rgba(245,158,11,.2)}
+
+/* Stats panel */
+.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px}
+.ms{background:var(--bg3);border-radius:7px;padding:8px;text-align:center}
+.ms-v{font-size:22px;font-weight:700;line-height:1}
+.ms-l{font-size:9px;color:var(--text3);margin-top:2px}
+.conf-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}
+.conf-label{font-size:10px;width:56px;flex-shrink:0}
+.conf-bw{flex:1;background:var(--bg3);border-radius:3px;height:4px;overflow:hidden}
+.conf-bar{height:100%;border-radius:3px;transition:width .6s}
+.conf-n{font-size:10px;color:var(--text3);width:16px;text-align:right}
+
+/* Surprising connections */
+.sur-section{padding:8px 10px;border-bottom:1px solid var(--border);background:rgba(236,72,153,.03)}
+.sur-title{font-size:9px;color:var(--pink);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:5px}
+.sur-item{font-size:10px;color:var(--text2);padding:3px 0;cursor:pointer;display:flex;gap:4px;align-items:flex-start;line-height:1.4}
+.sur-item:hover{color:var(--pink)}
+.sur-dot{color:var(--pink);flex-shrink:0}
+
+/* Graph area */
+.graph-area{flex:1;position:relative;overflow:hidden;background:var(--bg)}
+#gc{width:100%;height:100%}
+.gtt{position:absolute;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:11px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:15;max-width:240px;box-shadow:0 4px 20px rgba(0,0,0,.5)}
+.graph-legend{position:absolute;top:10px;left:10px;background:rgba(17,21,32,.9);border:1px solid var(--border);border-radius:8px;padding:8px 12px;display:flex;gap:10px;backdrop-filter:blur(4px)}
+.lg-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text2)}
+.lg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.graph-controls{position:absolute;bottom:12px;left:12px;display:flex;gap:6px}
+.gc-btn{background:rgba(17,21,32,.9);border:1px solid var(--border);color:var(--text2);border-radius:6px;padding:5px 9px;font-size:10px;cursor:pointer;backdrop-filter:blur(4px)}
+.gc-btn:hover{border-color:var(--purple);color:var(--pl)}
+
+/* Detail panel */
+.detail-panel{position:absolute;right:12px;top:12px;width:272px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.6);z-index:20;display:none;max-height:calc(100% - 24px);overflow-y:auto;backdrop-filter:blur(8px)}
+.detail-panel.visible{display:block}
+.dp-header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
+.dp-title{font-size:12px;font-weight:600;color:var(--text);line-height:1.4;flex:1}
+.dp-close{cursor:pointer;color:var(--text3);font-size:16px;flex-shrink:0;line-height:1}
+.dp-close:hover{color:var(--text)}
+.dp-body{padding:12px 14px}
+.dp-section{margin-bottom:12px}
+.dp-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;font-weight:600}
+.dp-val{font-size:11px;color:var(--text2);line-height:1.6}
+.dp-badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
+.rel-item{display:flex;align-items:center;gap:6px;padding:5px 7px;background:var(--bg3);border-radius:5px;margin-bottom:3px;cursor:pointer;transition:all .15s}
+.rel-item:hover{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3)}
+.rel-name{font-size:11px;color:var(--text);flex:1}
+.rel-type-label{font-size:9px;color:var(--text3);background:var(--bg4);border-radius:3px;padding:1px 4px}
+.conf-progress{height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-top:5px}
+.conf-progress-fill{height:100%;border-radius:2px;transition:width .5s}
+
+/* ════════ PROJECT DOCS MODE ════════ */
+#mode-docs{flex:1;display:none;overflow:hidden}
+.docs-layout{display:flex;height:100%;overflow:hidden}
+.docs-nav{width:210px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;padding:12px}
+.docs-nav::-webkit-scrollbar{width:3px}
+.docs-nav::-webkit-scrollbar-thumb{background:var(--border)}
+.nav-section{margin-bottom:14px}
+.nav-title{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:5px;padding:0 4px}
+.nav-item{font-size:12px;color:var(--text2);padding:6px 8px;border-radius:6px;cursor:pointer;margin-bottom:2px;transition:all .15s;display:flex;align-items:center;gap:6px}
+.nav-item:hover{background:var(--bg3);color:var(--text)}
+.nav-item.active{background:rgba(139,92,246,.12);color:var(--pl);border-left:2px solid var(--purple);padding-left:6px}
+.nav-count{font-size:10px;color:var(--text3);margin-left:auto;background:var(--bg3);border-radius:10px;padding:1px 5px}
+.docs-main{flex:1;overflow-y:auto;padding:24px 28px}
+.docs-main::-webkit-scrollbar{width:4px}
+.docs-main::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
+.docs-section{display:none}.docs-section.active{display:block}#doc-modules.active{display:flex}
+.docs-section.active{display:block}
+.docs-h1{font-size:20px;font-weight:700;color:var(--text);margin-bottom:6px}
+.docs-h2{font-size:14px;font-weight:600;color:var(--text);margin:20px 0 10px;display:flex;align-items:center;gap:8px}
+.docs-sub{font-size:13px;color:var(--text2);margin-bottom:20px;line-height:1.7}
+
+/* Module graph container */
+#mod-graph{width:100%;height:500px;display:block;background:var(--bg)}
+
+/* Info cards */
+.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
+.info-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px}
+.ic-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
+.ic-val{font-size:14px;font-weight:700;color:var(--text)}
+.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
+.stack-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px}
+.si-label{font-size:10px;color:var(--text3);margin-bottom:4px}
+.si-val{font-size:13px;color:var(--text);font-weight:500}
+
+/* Module cards */
+.module-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:6px;display:flex;align-items:center;gap:10px;transition:all .15s;cursor:default}
+.module-card.impl{border-left:3px solid var(--green)}
+.module-card.impl:hover{border-color:var(--green);background:rgba(16,185,129,.04)}
+.module-card.pend{border-left:3px solid var(--amber);opacity:.7}
+.mod-name{font-size:13px;color:var(--text);font-weight:500;flex:1}
+.mod-status{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600}
+.ms-impl{background:rgba(16,185,129,.15);color:#34d399}
+.ms-pend{background:rgba(245,158,11,.15);color:#fbbf24}
+.mod-stats{display:flex;gap:5px}
+.mod-stat{font-size:10px;padding:1px 5px;border-radius:3px;background:var(--bg3);color:var(--text3)}
+
+/* Patterns */
+.pattern-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:8px;transition:all .15s}
+.pattern-card:hover{border-color:var(--border);}
+.pattern-card.high{border-left:3px solid var(--green)}
+.pc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+.pc-title{font-size:13px;font-weight:500;color:var(--text);flex:1}
+.usage-bar{height:2px;background:var(--bg3);border-radius:1px;overflow:hidden;margin-top:6px}
+.usage-fill{height:100%;border-radius:1px;background:var(--purple);transition:width .5s}
+
+/* Decisions */
+.decision-card{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:8px;padding:12px 14px;margin-bottom:8px}
+.dc-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:4px}
+.dc-body{font-size:11px;color:var(--text2);line-height:1.6}
+
+/* Rules */
+.rule-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:6px;display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text2);line-height:1.5}
+.rule-dot{width:5px;height:5px;border-radius:50%;background:var(--purple);flex-shrink:0;margin-top:5px}
+
+/* Suggested questions */
+.question-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:6px;font-size:12px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .15s}
+.question-card:hover{border-color:var(--purple);color:var(--pl);background:rgba(139,92,246,.04)}
+.question-arrow{color:var(--text3);font-size:14px;margin-left:auto}
+
+/* GRAPH REPORT section */
+.report-section{background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(6,182,212,.05));border:1px solid rgba(139,92,246,.2);border-radius:12px;padding:16px;margin-bottom:20px}
+.report-title{font-size:12px;font-weight:700;color:var(--pl);margin-bottom:10px;display:flex;align-items:center;gap:6px}
+.report-item{font-size:11px;color:var(--text2);padding:4px 0;display:flex;gap:6px;border-bottom:1px solid rgba(255,255,255,.04);line-height:1.5}
+.report-item:last-child{border-bottom:none}
+.report-key{color:var(--text3);flex-shrink:0;min-width:80px}
+
+/* Commands */
+.cmd-row{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--bg3);border-radius:6px;margin-bottom:4px;font-family:monospace}
+.cmd-label{font-size:10px;color:var(--text3);width:58px;flex-shrink:0}
+.cmd-val{font-size:11px;color:var(--cyan)}
+
+/* Actions */
+.docs-actions{display:flex;gap:8px;margin-bottom:16px}
+.action-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);border-radius:8px;padding:8px 14px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s}
+.action-btn:hover{border-color:var(--purple);color:var(--pl)}
+
+.empty-state{text-align:center;padding:30px;color:var(--text3);font-size:12px}
+.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
+
+@media print{.hdr,.mode-tabs,.docs-nav,.docs-actions{display:none!important}.docs-main{padding:0}}
+</style>
+</head>
+<body id="app">
+
+<header class="hdr">
+  <div style="display:flex;align-items:center;min-width:0">
+    <div class="logo">🤖 Agentic KDD</div>
+    <div class="proj">${config.nombre}</div>
+    <div class="dot"></div>
+  </div>
+  <div class="hdr-r">
+    ${godNodes.length > 0 ? `<span class="badge b-god">⚡ ${stats.godNodes} divine</span>` : ''}
+    ${surprisingEdges.length > 0 ? `<span class="badge b-sur">✨ ${stats.surprising} surprising</span>` : ''}
+    <span class="badge b-high">★ ${stats.high} HIGH</span>
+    <select class="sel" onchange="setLang(this.value)">
+      <option value="en">🇺🇸 EN</option>
+      <option value="es">🇪🇸 ES</option>
+    </select>
+    <button class="btn" onclick="toggleTheme()" id="tbtn">🌙 Dark</button>
+  </div>
+</header>
+
+<div class="mode-tabs">
+  <div class="mode-tab active" onclick="setMode('graph',this)">🧠 <span data-i="tab_graph">Knowledge Graph</span></div>
+  <div class="mode-tab" onclick="setMode('docs',this)">📚 <span data-i="tab_docs">Project Docs</span></div>
+</div>
+
+<div class="content">
+
+<!-- ════════ KNOWLEDGE GRAPH ════════ -->
+<div id="mode-graph">
+  <div class="sidebar">
+    <div class="sb-tabs">
+      <div class="sb-tab active" onclick="showSbTab('nodes',this)" data-i="sb_nodes">Nodes</div>
+      <div class="sb-tab" onclick="showSbTab('report',this)" data-i="sb_report">Report</div>
+      <div class="sb-tab" onclick="showSbTab('stats',this)" data-i="sb_stats">Stats</div>
+    </div>
+
+    <!-- NODES TAB -->
+    <div id="sbt-nodes" style="display:flex;flex-direction:column;flex:1;overflow:hidden">
+      ${godNodes.length > 0 ? `
+      <div class="god-section">
+        <div class="god-title">⚡ <span data-i="divine_nodes">Divine nodes</span></div>
+        ${godNodes.slice(0,3).map(n => `<div class="god-item" onclick="selectNode(${n.id})"><div class="god-ring"></div><span>${n.titulo.slice(0,36)}${n.titulo.length>36?'…':''}</span></div>`).join('')}
+      </div>` : ''}
+      ${surprisingEdges.length > 0 ? `
+      <div class="sur-section">
+        <div class="sur-title">✨ <span data-i="surprising">Surprising connections</span></div>
+        ${surprisingEdges.slice(0,2).map(e => {
+          const src = nodes.find(n => n.id === e.desde_id);
+          const tgt = nodes.find(n => n.id === e.hacia_id);
+          return src && tgt ? `<div class="sur-item" onclick="highlightEdge(${e.desde_id},${e.hacia_id})"><span class="sur-dot">⟶</span><span>${src.area} connects to ${tgt.area}</span></div>` : '';
+        }).join('')}
+      </div>` : ''}
+      <div class="search-box"><input class="search-input" placeholder="Search nodes..." id="srch" oninput="filterSearch(this.value)"></div>
+      <div class="filter-row">
+        <div class="fpill active" onclick="setFilter('all',this)" data-i="f_all">All</div>
+        <div class="fpill" onclick="setFilter('error',this)" data-i="f_err">Errors</div>
+        <div class="fpill" onclick="setFilter('patron',this)" data-i="f_pat">Patterns</div>
+        <div class="fpill" onclick="setFilter('decision',this)" data-i="f_dec">Decisions</div>
+        <div class="fpill" onclick="setFilter('ALTA',this)" data-i="f_high">★ HIGH</div>
+        <div class="fpill" onclick="setFilter('god',this)" data-i="f_god">⚡ Divine</div>
+      </div>
+      <div class="sb-body" id="nodes-list"></div>
+    </div>
+
+    <!-- REPORT TAB (like Graphify GRAPH_REPORT) -->
+    <div id="sbt-report" style="display:none" class="sb-body">
+      <div style="font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:10px" data-i="graph_report">Graph Report</div>
+      ${godNodes.length > 0 ? `
+      <div style="margin-bottom:14px">
+        <div style="font-size:10px;color:var(--amber);font-weight:600;margin-bottom:6px">⚡ Divine Nodes</div>
+        <div style="font-size:11px;color:var(--text3);margin-bottom:6px;line-height:1.5">Most connected — everything flows through them</div>
+        ${godNodes.map(n => `<div style="padding:5px 7px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.15);border-radius:5px;margin-bottom:3px;cursor:pointer" onclick="selectNode(${n.id})"><div style="font-size:11px;color:var(--amber)">${n.titulo.slice(0,44)}${n.titulo.length>44?'…':''}</div><div style="font-size:10px;color:var(--text3)">${degreeMap[n.id]||0} connections · ${n.area}</div></div>`).join('')}
+      </div>` : ''}
+      ${surprisingEdges.length > 0 ? `
+      <div style="margin-bottom:14px">
+        <div style="font-size:10px;color:var(--pink);font-weight:600;margin-bottom:6px">✨ Surprising Connections</div>
+        <div style="font-size:11px;color:var(--text3);margin-bottom:6px;line-height:1.5">Links between nodes from different areas</div>
+        ${surprisingEdges.slice(0,4).map(e => { const src = nodes.find(n=>n.id===e.desde_id); const tgt = nodes.find(n=>n.id===e.hacia_id); return src&&tgt?`<div style="padding:5px 7px;background:rgba(236,72,153,.05);border:1px solid rgba(236,72,153,.15);border-radius:5px;margin-bottom:3px;cursor:pointer;font-size:10px;color:var(--text2);line-height:1.5" onclick="highlightEdge(${e.desde_id},${e.hacia_id})">${src.area} <span style="color:var(--pink)">→</span> ${tgt.area}</div>`:''; }).join('')}
+      </div>` : ''}
+      <div>
+        <div style="font-size:10px;color:var(--pl);font-weight:600;margin-bottom:6px">💡 Suggested Questions</div>
+        ${suggestedQuestions.map(q => `<div style="padding:5px 7px;background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.15);border-radius:5px;margin-bottom:3px;font-size:10px;color:var(--text2);line-height:1.4">${q}</div>`).join('')}
+      </div>
+    </div>
+
+    <!-- STATS TAB -->
+    <div id="sbt-stats" style="display:none" class="sb-body">
+      <div class="mini-stats">
+        <div class="ms"><div class="ms-v" style="color:var(--pl)">${stats.total}</div><div class="ms-l" data-i="s_total">nodes</div></div>
+        <div class="ms"><div class="ms-v" style="color:var(--cyan)">${stats.relations}</div><div class="ms-l" data-i="s_rel">relations</div></div>
+        <div class="ms"><div class="ms-v" style="color:var(--amber)">${stats.godNodes}</div><div class="ms-l" data-i="s_god">divine</div></div>
+        <div class="ms"><div class="ms-v" style="color:var(--green)">${stats.high}</div><div class="ms-l" data-i="s_high">HIGH</div></div>
+      </div>
+      <div style="font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Confidence</div>
+      <div class="conf-row"><div class="conf-label" style="color:#34d399">HIGH</div><div class="conf-bw"><div class="conf-bar" style="width:${stats.total?Math.round(stats.high/stats.total*100):0}%;background:#10b981"></div></div><div class="conf-n">${stats.high}</div></div>
+      <div class="conf-row"><div class="conf-label" style="color:#fbbf24">MED</div><div class="conf-bw"><div class="conf-bar" style="width:${stats.total?Math.round(stats.medium/stats.total*100):0}%;background:#f59e0b"></div></div><div class="conf-n">${stats.medium}</div></div>
+      <div class="conf-row"><div class="conf-label" style="color:#94a3b8">LOW</div><div class="conf-bw"><div class="conf-bar" style="width:${stats.total?Math.round(stats.low/stats.total*100):0}%;background:#475569"></div></div><div class="conf-n">${stats.low}</div></div>
+      <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;color:var(--text2);line-height:2.2">
+        <span style="color:#34d399">→ HIGH</span>: 7+ uses · 80%+ useful<br>
+        <span style="color:#fbbf24">→ MED</span>: 3+ uses · 70%+ useful<br>
+        <span style="color:var(--pink)">★ Divine</span>: ${Math.round(godThreshold)}+ connections
+      </div>
+      <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--border)">
+        <div style="font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">By type</div>
+        <div style="font-size:12px;color:var(--text2);line-height:2.2">
+          <span style="color:#f87171">errors:</span> ${stats.errors} &nbsp; <span style="color:#34d399">patterns:</span> ${stats.patterns} &nbsp; <span style="color:#60a5fa">decisions:</span> ${stats.decisions}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- GRAPH -->
+  <div class="graph-area">
+    <svg id="gc"></svg>
+    <div class="gtt" id="gtt"></div>
+    <div class="graph-legend">
+      <div class="lg-item"><div class="lg-dot" style="background:#ef4444"></div><span data-i="l_err">error</span></div>
+      <div class="lg-item"><div class="lg-dot" style="background:#10b981"></div><span data-i="l_pat">pattern</span></div>
+      <div class="lg-item"><div class="lg-dot" style="background:#3b82f6"></div><span data-i="l_dec">decision</span></div>
+      <div class="lg-item"><div class="lg-dot" style="background:transparent;border:2px solid #f59e0b;box-sizing:border-box"></div><span style="color:var(--amber)" data-i="l_divine">divine</span></div>
+    </div>
+    <div class="graph-controls">
+      <button class="gc-btn" onclick="resetGraph()" data-i="btn_reset">⟳ Reset</button>
+      <button class="gc-btn" onclick="centerGraph()" data-i="btn_center">⊙ Center</button>
+      <button class="gc-btn" onclick="toggleLabels()" id="label-btn" data-i="btn_labels">Labels OFF</button>
+    </div>
+    <div class="detail-panel" id="detail-panel">
+      <div class="dp-header">
+        <div class="dp-title" id="dp-title"></div>
+        <div class="dp-close" onclick="closeDetail()">×</div>
+      </div>
+      <div class="dp-body" id="dp-body"></div>
+    </div>
+    ${stats.total === 0 ? '<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text3)"><div style="font-size:40px;margin-bottom:10px">🧠</div><div>No nodes yet — use aa: to start</div></div>' : ''}
+  </div>
+</div>
+
+<!-- ════════ PROJECT DOCS ════════ -->
+<div id="mode-docs">
+  <div class="docs-layout">
+    <nav class="docs-nav">
+      <div class="nav-section">
+        <div class="nav-title" data-i="nav_overview">Overview</div>
+        <div class="nav-item active" onclick="showDoc('overview',this)">🏠 <span data-i="nav_project">Project</span></div>
+        <div class="nav-item" onclick="showDoc('stack',this)">⚙️ <span data-i="nav_stack">Stack</span></div>
+        <div class="nav-item" onclick="showDoc('commands',this)">💻 <span data-i="nav_commands">Commands</span></div>
+      </div>
+      <div class="nav-section">
+        <div class="nav-title" data-i="nav_arch">Architecture</div>
+        <div class="nav-item" onclick="showDoc('modules',this)">📦 <span data-i="nav_modules">Modules</span> <span class="nav-count">${modulosImpl.length + modulosPend.length}</span></div>
+        <div class="nav-item" onclick="showDoc('rules',this)">📋 <span data-i="nav_rules">Rules</span> <span class="nav-count">${reglas.length}</span></div>
+      </div>
+      <div class="nav-section">
+        <div class="nav-title" data-i="nav_knowledge">Knowledge</div>
+        <div class="nav-item" onclick="showDoc('patterns',this)">🟢 <span data-i="nav_patterns">Patterns</span> <span class="nav-count">${patrones.length}</span></div>
+        <div class="nav-item" onclick="showDoc('decisions',this)">🔵 <span data-i="nav_decisions">Decisions</span> <span class="nav-count">${decisiones.length}</span></div>
+        <div class="nav-item" onclick="showDoc('errors',this)">🔴 <span data-i="nav_errors">Errors</span> <span class="nav-count">${errores.length}</span></div>
+        <div class="nav-item" onclick="showDoc('questions',this)">💡 <span data-i="nav_questions">For New Devs</span></div>
+      </div>
+    </nav>
+
+    <div class="docs-main">
+
+      <!-- OVERVIEW -->
+      <div class="docs-section active" id="doc-overview">
+        <div class="docs-h1">${config.nombre}</div>
+        <div class="docs-sub">${config.descripcion !== '—' ? config.descripcion : 'No description yet — run aa: configurar'}</div>
+        <div class="docs-actions">
+          <button class="action-btn" onclick="window.print()">🖨️ <span data-i="btn_print">Print / Export PDF</span></button>
+          <button class="action-btn" onclick="copyMarkdown()">📋 <span data-i="btn_copy">Copy as Markdown</span></button>
+        </div>
+        <div class="info-grid">
+          <div class="info-card"><div class="ic-label">Type</div><div class="ic-val">${config.tipo || '—'}</div></div>
+          <div class="info-card"><div class="ic-label">Modules</div><div class="ic-val">${modulosImpl.length} <span style="color:var(--text3);font-size:12px">impl</span> · ${modulosPend.length} <span style="color:var(--text3);font-size:12px">pending</span></div></div>
+          <div class="info-card"><div class="ic-label">Knowledge</div><div class="ic-val">${stats.total} <span style="color:var(--text3);font-size:12px">nodes</span> · ${stats.high} <span style="color:var(--text3);font-size:12px">HIGH</span></div></div>
+        </div>
+        <div class="report-section">
+          <div class="report-title">📊 Graph Report <span style="font-size:10px;color:var(--text3);font-weight:400">— like Graphify's GRAPH_REPORT.md</span></div>
+          ${godNodes.length > 0 ? `<div class="report-item"><span class="report-key">Divine nodes</span><span>${godNodes.map(n=>n.titulo.slice(0,30)).join(', ')}</span></div>` : ''}
+          ${surprisingEdges.length > 0 ? `<div class="report-item"><span class="report-key">Surprising</span><span>${surprisingEdges.length} cross-area connections found</span></div>` : ''}
+          <div class="report-item"><span class="report-key">HIGH rules</span><span>${patrones.filter(p=>p.confianza==='ALTA').map(p=>p.titulo.slice(0,25)).join(' · ') || 'None yet'}</span></div>
+          <div class="report-item"><span class="report-key">Most errors</span><span>${errores.length > 0 ? errores.sort((a,b)=>b.aplicado-a.aplicado)[0].titulo.slice(0,40) : 'None yet'}</span></div>
+        </div>
+        <div class="docs-h2">🚀 Getting started</div>
+        <div style="background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;font-size:12px;color:var(--text2);line-height:2.2">
+          <strong style="color:var(--text)">1.</strong> Open in Cursor or Claude Code<br>
+          <strong style="color:var(--text)">2.</strong> Type <code style="color:var(--pl);background:var(--bg3);padding:1px 6px;border-radius:3px">aa: help</code> to see all commands<br>
+          <strong style="color:var(--text)">3.</strong> Type <code style="color:var(--cyan);background:var(--bg3);padding:1px 6px;border-radius:3px">aa: [your task]</code> to start developing<br>
+          <strong style="color:var(--text)">4.</strong> Type <code style="color:var(--amber);background:var(--bg3);padding:1px 6px;border-radius:3px">audit: auditar</code> before going to production
+        </div>
+      </div>
+
+      <!-- STACK -->
+      <div class="docs-section" id="doc-stack">
+        <div class="docs-h1" data-i="h_stack">Tech Stack</div>
+        <div class="docs-sub" data-i="sub_stack">Technologies and frameworks used in this project.</div>
+        <div class="stack-grid">
+          <div class="stack-item"><div class="si-label">Framework</div><div class="si-val">${config.framework || '—'}</div></div>
+          <div class="stack-item"><div class="si-label">Language</div><div class="si-val">${config.language || '—'}</div></div>
+          <div class="stack-item"><div class="si-label">Runtime</div><div class="si-val">${config.runtime || '—'}</div></div>
+          <div class="stack-item"><div class="si-label">Database</div><div class="si-val">${config.base_datos || '—'}</div></div>
+          <div class="stack-item"><div class="si-label">Package Manager</div><div class="si-val">${config.package_manager || '—'}</div></div>
+        </div>
+        <div class="docs-h2">Commands</div>
+        <div class="cmd-row"><div class="cmd-label">dev</div><div class="cmd-val">${config.cmd_dev || '—'}</div></div>
+        <div class="cmd-row"><div class="cmd-label">test</div><div class="cmd-val">${config.cmd_test || '—'}</div></div>
+        <div class="cmd-row"><div class="cmd-label">build</div><div class="cmd-val">${config.cmd_build || '—'}</div></div>
+      </div>
+
+      <!-- COMMANDS -->
+      <div class="docs-section" id="doc-commands">
+        <div class="docs-h1">Commands Reference</div>
+        <div class="docs-sub">All commands available in this project.</div>
+        <div class="docs-h2">Development — aa:</div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">setup</div><div class="cmd-val">aa: configurar</div></div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">task</div><div class="cmd-val">aa: [your task here]</div></div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">resume</div><div class="cmd-val">aa: continúa — [answer]</div></div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">help</div><div class="cmd-val">aa: help</div></div>
+        <div class="docs-h2">QA Department — audit:</div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">full</div><div class="cmd-val">audit: auditar</div></div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">security</div><div class="cmd-val">audit: seguridad</div></div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">help</div><div class="cmd-val">audit: help</div></div>
+        <div class="docs-h2">Knowledge Graph</div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">sync</div><div class="cmd-val">node .agentic/grafo/grafo.js sync</div></div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">stats</div><div class="cmd-val">node .agentic/grafo/grafo.js stats</div></div>
+        <div class="cmd-row"><div class="cmd-label" style="color:var(--text2)">dashboard</div><div class="cmd-val">node dashboard-v4.js</div></div>
+      </div>
+
+      <!-- MODULES -->
+      <div class="docs-section" id="doc-modules" style="display:none;padding:0">
+        <div style="display:flex;height:calc(100vh - 142px);overflow:hidden">
+          <!-- Graph — exact same pattern as Knowledge Graph -->
+          <div class="graph-area" id="mod-area" style="position:relative;flex:1;overflow:hidden;background:var(--bg)">
+            <svg id="mod-svg" style="width:100%;height:100%"></svg>
+            <div class="gtt" id="mod-tt"></div>
+            <div style="position:absolute;top:10px;left:10px;background:rgba(17,21,32,.9);border:1px solid var(--border);border-radius:8px;padding:8px 12px;display:flex;gap:12px">
+              <div style="font-size:10px;color:#34d399;display:flex;align-items:center;gap:4px"><div style="width:12px;height:12px;border-radius:3px;background:rgba(16,185,129,0.2);border:1px solid rgba(16,185,129,0.5)"></div>implemented</div>
+              <div style="font-size:10px;color:#fbbf24;display:flex;align-items:center;gap:4px"><div style="width:12px;height:12px;border-radius:3px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.4)"></div>pending</div>
+            </div>
+            <div style="position:absolute;bottom:12px;left:12px;display:flex;gap:6px">
+              <button onclick="resetModGraph()" style="background:rgba(17,21,32,.9);border:1px solid var(--border);color:var(--text2);border-radius:6px;padding:5px 9px;font-size:10px;cursor:pointer">⟳ Reset</button>
+            </div>
+            <!-- Detail panel -->
+            <div id="mod-detail" style="position:absolute;right:12px;top:12px;width:240px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.5);display:none;padding:14px">
+              <div style="display:flex;justify-content:space-between;margin-bottom:8px">
+                <div style="font-size:13px;font-weight:600;color:var(--text)" id="mod-det-title"></div>
+                <div onclick="document.getElementById('mod-detail').style.display='none'" style="cursor:pointer;color:var(--text3)">×</div>
+              </div>
+              <div id="mod-det-body"></div>
+            </div>
+          </div>
+          <!-- List panel -->
+          <div style="width:220px;flex-shrink:0;background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;padding:10px">
+            <div style="font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:8px">✅ Implemented (${modulosImpl.length})</div>
+            ${modulosImpl.length ? modulosImpl.map(m => {
+              const clean = m.replace(/\*\*/g,'').replace(/✅/g,'').trim();
+              const area = clean.toLowerCase().split(/[\s\-\/]/)[0];
+              const nc = nodes.filter(n => n.area === area);
+              const errs = nc.filter(n => n.tipo === 'error').length;
+              const pats = nc.filter(n => n.tipo === 'patron').length;
+              return `<div onclick="selectModule('${clean.replace(/'/g,"\'")}','${area}',null)" style="padding:7px 10px;border-radius:6px;margin-bottom:4px;cursor:pointer;border:1px solid transparent;background:var(--bg3);transition:all .15s" onmouseover="this.style.borderColor='#10b981'" onmouseout="this.style.borderColor='transparent'"><div style="font-size:11px;font-weight:500;color:var(--text);margin-bottom:2px">${clean.length>24?clean.slice(0,24)+'…':clean}</div><div style="display:flex;gap:4px">${errs>0?`<span style="font-size:9px;color:#f87171">${errs} err</span>`:''}${pats>0?`<span style="font-size:9px;color:#34d399">${pats} pat</span>`:''}</div></div>`;
+            }).join('') : '<div style="font-size:11px;color:var(--text3);padding:8px">No modules</div>'}
+            <div style="font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin:12px 0 8px">⏳ Pending (${modulosPend.length})</div>
+            ${modulosPend.length ? modulosPend.map(m => {
+              const clean = m.replace(/\*\*/g,'').replace(/\[.\]\s*/g,'').trim();
+              return `<div style="padding:7px 10px;border-radius:6px;margin-bottom:4px;border:1px solid rgba(245,158,11,.2);background:rgba(245,158,11,.04)"><div style="font-size:11px;color:#fbbf24">${clean.length>24?clean.slice(0,24)+'…':clean}</div></div>`;
+            }).join('') : ''}
+          </div>
+        </div>
+      </div>
+      <!-- RULES -->
+      <div class="docs-section" id="doc-rules">
+        <div class="docs-h1">Project Rules</div>
+        <div class="docs-sub">Rules that apply to all development. The system enforces these automatically.</div>
+        ${reglas.length ? reglas.map(r => `<div class="rule-item"><div class="rule-dot"></div><div>${r}</div></div>`).join('') : '<div class="empty-state">No rules defined yet — run aa: configurar</div>'}
+      </div>
+
+      <!-- PATTERNS -->
+      <div class="docs-section" id="doc-patterns">
+        <div class="docs-h1">Patterns</div>
+        <div class="docs-sub">Rules the system learned from this project. HIGH = permanent rule applied automatically.</div>
+        ${patrones.length ? patrones.sort((a,b) => {const w={ALTA:3,MEDIA:2,BAJA:1}; return (w[b.confianza]||0)-(w[a.confianza]||0);}).map(p => {
+          const maxUse = Math.max(...patrones.map(x => x.aplicado), 1);
+          return `<div class="pattern-card ${p.confianza==='ALTA'?'high':''}">
+            <div class="pc-top">
+              <div class="pc-title">${p.titulo}</div>
+              <span class="mb c${p.confianza}">${p.confianza}</span>
+              <span class="ab">${p.area}</span>
+            </div>
+            ${p.aplicado > 0 ? `<div style="font-size:10px;color:var(--text3);margin-bottom:4px">Applied ${p.aplicado} times · ${p.util} useful</div><div class="usage-bar"><div class="usage-fill" style="width:${Math.round(p.aplicado/maxUse*100)}%"></div></div>` : ''}
+          </div>`;
+        }).join('') : '<div class="empty-state">No patterns yet — they build up as you work</div>'}
+      </div>
+
+      <!-- DECISIONS -->
+      <div class="docs-section" id="doc-decisions">
+        <div class="docs-h1">Architectural Decisions</div>
+        <div class="docs-sub">Why things are the way they are. The most important layer of project knowledge.</div>
+        ${decisiones.length ? decisiones.map(d => `<div class="decision-card"><div class="dc-title">${d.titulo}</div><div class="dc-body" style="color:var(--text3);font-size:10px;margin-bottom:4px">${d.area} · ${d.confianza}</div></div>`).join('') : '<div class="empty-state">No decisions recorded yet</div>'}
+      </div>
+
+      <!-- ERRORS -->
+      <div class="docs-section" id="doc-errors">
+        <div class="docs-h1">Known Error Patterns</div>
+        <div class="docs-sub">Errors the system has already learned to avoid automatically.</div>
+        ${errores.length ? errores.sort((a,b)=>b.aplicado-a.aplicado).map(e => `<div class="pattern-card" style="border-left:3px solid var(--red)">
+          <div class="pc-top"><div class="pc-title">${e.titulo}</div><span class="mb c${e.confianza}">${e.confianza}</span><span class="ab">${e.area}</span></div>
+          ${e.aplicado > 0 ? `<div style="font-size:10px;color:var(--text3)">Resolved ${e.aplicado} times</div>` : ''}
+        </div>`).join('') : '<div class="empty-state">No errors recorded yet</div>'}
+      </div>
+
+      <!-- FOR NEW DEVS -->
+      <div class="docs-section" id="doc-questions">
+        <div class="docs-h1">For New Developers</div>
+        <div class="docs-sub">Everything a new team member needs to get up to speed.</div>
+        <div class="report-section">
+          <div class="report-title">💡 Suggested Questions to explore</div>
+          ${suggestedQuestions.map(q => `<div class="question-card">${q}<span class="question-arrow">↗</span></div>`).join('')}
+        </div>
+        <div class="docs-h2">🔑 Key things to know</div>
+        ${patrones.filter(p=>p.confianza==='ALTA').length>0 ? `
+        <div style="background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.2);border-radius:10px;padding:14px;margin-bottom:12px">
+          <div style="font-size:11px;font-weight:600;color:#34d399;margin-bottom:8px">★ Permanent rules (HIGH confidence)</div>
+          ${patrones.filter(p=>p.confianza==='ALTA').map(p=>`<div style="font-size:12px;color:var(--text2);padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)">${p.titulo}</div>`).join('')}
+        </div>` : ''}
+        ${errores.length>0 ? `
+        <div style="background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.15);border-radius:10px;padding:14px;margin-bottom:12px">
+          <div style="font-size:11px;font-weight:600;color:#f87171;margin-bottom:8px">⚠️ Errors to avoid</div>
+          ${errores.slice(0,3).map(e=>`<div style="font-size:12px;color:var(--text2);padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)">${e.titulo}</div>`).join('')}
+        </div>` : ''}
+      </div>
+
+    </div>
+  </div>
+</div>
+
+</div>
+
+<script>
+const NODES = ${JSON.stringify(nodes)};
+const EDGES = ${JSON.stringify(edges)};
+const M_NODES = ${JSON.stringify(mNodes)};
+const M_EDGES = ${JSON.stringify(mEdges)};
+const DEGREE_MAP = ${JSON.stringify(degreeMap)};
+const MAX_DEGREE = ${maxDegree};
+const GOD_THRESHOLD = ${godThreshold};
+const COLORS = {error:'#ef4444',patron:'#10b981',decision:'#3b82f6'};
+let lang='en', isDark=true, currentFilter='all', searchVal='', selectedNodeId=null;
+let simulation, svgEl, linkSel, nodeSel, labelSel, labelsVisible=false;
+let modGraphRendered=false;
+const nodeMap={};
+NODES.forEach(n=>nodeMap[n.id]=n);
+const relMap={};
+EDGES.forEach(e=>{
+  if(!relMap[e.desde_id])relMap[e.desde_id]=[];
+  if(!relMap[e.hacia_id])relMap[e.hacia_id]=[];
+  relMap[e.desde_id].push({...e,dir:'out'});
+  relMap[e.hacia_id].push({...e,dir:'in'});
+});
+
+const T={
+  en:{tab_graph:'Knowledge Graph',tab_docs:'Project Docs',sb_nodes:'Nodes',sb_report:'Report',sb_stats:'Stats',f_all:'All',f_err:'Errors',f_pat:'Patterns',f_dec:'Decisions',f_high:'★ HIGH',f_god:'⚡ Divine',s_total:'nodes',s_rel:'relations',s_god:'divine',s_high:'HIGH',l_err:'error',l_pat:'pattern',l_dec:'decision',l_divine:'divine',btn_reset:'⟳ Reset',btn_center:'⊙ Center',btn_labels:'Labels',nav_overview:'Overview',nav_project:'Project',nav_stack:'Stack',nav_commands:'Commands',nav_arch:'Architecture',nav_modules:'Modules',nav_rules:'Rules',nav_knowledge:'Knowledge',nav_patterns:'Patterns',nav_decisions:'Decisions',nav_errors:'Errors',nav_questions:'For New Devs',h_stack:'Tech Stack',sub_stack:'Technologies used.',graph_report:'Graph Report',divine_nodes:'Divine nodes',surprising:'Surprising connections',btn_print:'Print / Export PDF',btn_copy:'Copy as Markdown',dark:'Dark',light:'Light'},
+  es:{tab_graph:'Grafo de conocimiento',tab_docs:'Docs del proyecto',sb_nodes:'Nodos',sb_report:'Reporte',sb_stats:'Stats',f_all:'Todos',f_err:'Errores',f_pat:'Patrones',f_dec:'Decisiones',f_high:'★ ALTA',f_god:'⚡ Divinos',s_total:'nodos',s_rel:'relaciones',s_god:'divinos',s_high:'ALTA',l_err:'error',l_pat:'patrón',l_dec:'decisión',l_divine:'divino',btn_reset:'⟳ Resetear',btn_center:'⊙ Centrar',btn_labels:'Labels',nav_overview:'Vista general',nav_project:'Proyecto',nav_stack:'Stack',nav_commands:'Comandos',nav_arch:'Arquitectura',nav_modules:'Módulos',nav_rules:'Reglas',nav_knowledge:'Conocimiento',nav_patterns:'Patrones',nav_decisions:'Decisiones',nav_errors:'Errores',nav_questions:'Para nuevos devs',h_stack:'Stack Tecnológico',sub_stack:'Tecnologías del proyecto.',graph_report:'Reporte del grafo',divine_nodes:'Nodos divinos',surprising:'Conexiones sorprendentes',btn_print:'Imprimir / Exportar PDF',btn_copy:'Copiar como Markdown',dark:'Oscuro',light:'Claro'}
+};
+
+function setMode(mode,el){
+  document.querySelectorAll('.mode-tab').forEach(t=>t.classList.remove('active'));
+  el.classList.add('active');
+  document.getElementById('mode-graph').style.display=mode==='graph'?'flex':'none';
+  document.getElementById('mode-docs').style.display=mode==='docs'?'flex':'none';
+  if(mode==='docs')setTimeout(renderModuleGraph,100);
+}
+
+function showDoc(section,el){
+  document.querySelectorAll('.nav-item').forEach(n=>n.classList.remove('active'));
+  el.classList.add('active');
+  // Hide all sections
+  document.querySelectorAll('.docs-section').forEach(function(s){
+    s.style.display='none';
+    s.classList.remove('active');
+  });
+  const sec=document.getElementById('doc-'+section);
+  sec.style.display='block';
+  sec.classList.add('active');
+  const main=document.querySelector('.docs-main');
+  if(section==='modules'){
+    main.style.padding='0';
+    main.style.overflow='hidden';
+    sec.style.display='block';
+    renderModuleGraph();
+  } else {
+    main.style.padding='24px 28px';
+    main.style.overflow='auto';
+  }
+}
+
+function showSbTab(tab,el){
+  document.querySelectorAll('.sb-tab').forEach(t=>t.classList.remove('active'));
+  el.classList.add('active');
+  document.getElementById('sbt-nodes').style.display=tab==='nodes'?'flex':'none';
+  document.getElementById('sbt-report').style.display=tab==='report'?'block':'none';
+  document.getElementById('sbt-stats').style.display=tab==='stats'?'block':'none';
+}
+
+function setLang(l){
+  lang=l;
+  document.querySelectorAll('[data-i]').forEach(el=>{const k=el.getAttribute('data-i');if(T[l][k])el.textContent=T[l][k];});
+  document.getElementById('tbtn').textContent=(isDark?'🌙 ':'☀️ ')+T[l][isDark?'dark':'light'];
+  renderNodeList();
+}
+
+function toggleTheme(){
+  isDark=!isDark;
+  document.getElementById('app').className=isDark?'':'light';
+  document.getElementById('tbtn').textContent=(isDark?'🌙 ':'☀️ ')+T[lang][isDark?'dark':'light'];
+}
+
+function toggleLabels(){
+  labelsVisible=!labelsVisible;
+  document.getElementById('label-btn').textContent='Labels '+(labelsVisible?'ON':'OFF');
+  if(labelSel)labelSel.attr('opacity',labelsVisible?1:0);
+}
+
+function setFilter(f,el){
+  currentFilter=f;
+  document.querySelectorAll('.fpill').forEach(p=>p.classList.remove('active'));
+  el.classList.add('active');
+  renderNodeList();
+  highlightByFilter();
+}
+
+function filterSearch(val){searchVal=val.toLowerCase();renderNodeList();}
+
+function getFiltered(){
+  let r=NODES;
+  if(currentFilter==='ALTA')r=NODES.filter(n=>n.confianza==='ALTA');
+  else if(currentFilter==='god')r=NODES.filter(n=>(DEGREE_MAP[n.id]||0)>=GOD_THRESHOLD&&GOD_THRESHOLD>0);
+  else if(currentFilter!=='all')r=NODES.filter(n=>n.tipo===currentFilter);
+  if(searchVal)r=r.filter(n=>n.titulo.toLowerCase().includes(searchVal)||n.area.toLowerCase().includes(searchVal));
+  return r;
+}
+
+function getConfTag(n){
+  const deg=DEGREE_MAP[n.id]||0;
+  if(deg>=GOD_THRESHOLD&&GOD_THRESHOLD>0)return '<span class="tag-ext">EXTRACTED</span>';
+  if(n.confianza==='ALTA')return '<span class="tag-inf">INFERRED</span>';
+  return '<span class="tag-amb">AMBIGUOUS</span>';
+}
+
+function renderNodeList(){
+  const list=document.getElementById('nodes-list');
+  const filtered=getFiltered();
+  const tl={error:T[lang].l_err,patron:T[lang].l_pat,decision:T[lang].l_dec};
+  if(!filtered.length){list.innerHTML='<div class="empty-state">📭 No nodes found</div>';return;}
+  list.innerHTML=filtered.map(n=>{
+    const title=n.titulo.length>48?n.titulo.slice(0,48)+'…':n.titulo;
+    const isGod=(DEGREE_MAP[n.id]||0)>=GOD_THRESHOLD&&GOD_THRESHOLD>0;
+    const deg=DEGREE_MAP[n.id]||0;
+    return \`<div class="nitem\${n.id===selectedNodeId?' selected':''}\${isGod?' god-node':''}" onclick="selectNode(\${n.id})" id="nitem-\${n.id}">
+      <div style="display:flex;align-items:center;gap:5px;margin-bottom:4px">
+        \${isGod?'<span style="color:var(--amber);font-size:10px">⚡</span>':''}
+        <span class="ntb t-\${n.tipo}">\${tl[n.tipo]||n.tipo}</span>
+        <span style="font-size:11px;color:var(--text);flex:1;line-height:1.3">\${title}</span>
+      </div>
+      <div style="display:flex;gap:4px;flex-wrap:wrap;align-items:center">
+        <span class="mb c\${n.confianza}">\${n.confianza}</span>
+        <span class="ab">\${n.area}</span>
+        \${deg>0?'<span class="ab">'+deg+' conn</span>':''}
+        \${n.aplicado>0?'<span class="ab">✓ '+n.aplicado+'x</span>':''}
+        \${getConfTag(n)}
+      </div>
+    </div>\`;
+  }).join('');
+}
+
+function selectNode(id){
+  selectedNodeId=id;
+  renderNodeList();
+  showDetail(nodeMap[id]);
+  focusNode(id);
+  const el=document.getElementById('nitem-'+id);
+  if(el)el.scrollIntoView({block:'nearest'});
+}
+
+function showDetail(node){
+  if(!node)return;
+  document.getElementById('dp-title').textContent=node.titulo;
+  const deg=DEGREE_MAP[node.id]||0;
+  const isGod=deg>=GOD_THRESHOLD&&GOD_THRESHOLD>0;
+  const rels=relMap[node.id]||[];
+  const relHTML=rels.map(r=>{
+    const other=r.dir==='out'?nodeMap[r.hacia_id]:nodeMap[r.desde_id];
+    if(!other)return'';
+    const t=other.titulo.length>30?other.titulo.slice(0,30)+'…':other.titulo;
+    const relLabel=r.dir==='out'?r.tipo:'← '+r.tipo;
+    return \`<div class="rel-item" onclick="selectNode(\${other.id})"><div style="width:7px;height:7px;border-radius:50%;background:\${COLORS[other.tipo]||'#8b5cf6'};flex-shrink:0"></div><div class="rel-name">\${t}</div><span class="rel-type-label">\${relLabel}</span></div>\`;
+  }).filter(Boolean).join('');
+  const cl=node.contenido?node.contenido.split('\\n').filter(l=>l.trim()&&!l.startsWith('##')&&!l.startsWith('Área')&&!l.startsWith('Confianza')&&!l.startsWith('Aplicado')&&!l.startsWith('Útil')&&!l.startsWith('Estado')).slice(0,5).join('\\n'):'';
+  const confPct=node.aplicado>0?Math.min(Math.round(node.util/node.aplicado*100),100):0;
+  document.getElementById('dp-body').innerHTML=\`
+    <div class="dp-badges">
+      \${isGod?'<span class="mb" style="background:rgba(245,158,11,.2);color:#fbbf24;border:1px solid rgba(245,158,11,.3)">⚡ divine</span>':''}
+      <span class="mb t-\${node.tipo}" style="font-size:11px;padding:3px 8px">\${node.tipo}</span>
+      <span class="mb c\${node.confianza}" style="font-size:11px;padding:3px 8px">\${node.confianza}</span>
+      <span class="ab" style="font-size:11px;padding:3px 8px">\${node.area}</span>
+    </div>
+    <div class="dp-section">
+      <div class="dp-label">Connections · Confidence tag</div>
+      <div class="dp-val">\${deg} connections · \${getConfTag(node)}</div>
+    </div>
+    <div class="dp-section">
+      <div class="dp-label">Applied / Useful</div>
+      <div class="dp-val">\${node.aplicado}x applied · \${node.util}x useful</div>
+      \${node.aplicado>0?'<div class="conf-progress"><div class="conf-progress-fill" style="width:'+confPct+'%;background:'+( confPct>=80?'#10b981':confPct>=50?'#f59e0b':'#ef4444')+'"></div></div>':''}
+    </div>
+    \${cl?'<div class="dp-section"><div class="dp-label">Details</div><div class="dp-val" style="font-size:10px;background:var(--bg3);border-radius:6px;padding:8px;white-space:pre-wrap;max-height:120px;overflow-y:auto">'+cl+'</div></div>':''}
+    \${rels.length>0?'<div class="dp-section"><div class="dp-label">Connected nodes ('+rels.length+')</div>'+relHTML+'</div>':''}
+  \`;
+  document.getElementById('detail-panel').classList.add('visible');
+}
+
+function closeDetail(){
+  document.getElementById('detail-panel').classList.remove('visible');
+  selectedNodeId=null;
+  renderNodeList();
+  if(nodeSel)nodeSel.attr('stroke',d=>getNodeStroke(d)).attr('stroke-width',d=>getNodeStrokeW(d)).attr('fill-opacity',d=>d.confianza==='ALTA'?1:0.75);
+  if(linkSel)linkSel.attr('stroke-opacity',0.35).attr('stroke','#2a3050').attr('stroke-width',1);
+}
+
+function focusNode(id){
+  if(!nodeSel)return;
+  nodeSel.attr('stroke',d=>d.id===id?'#fff':getNodeStroke(d))
+         .attr('stroke-width',d=>d.id===id?3:getNodeStrokeW(d))
+         .attr('fill-opacity',d=>d.id===id?1:selectedNodeId?0.2:d.confianza==='ALTA'?1:0.75);
+  if(linkSel){
+    linkSel.attr('stroke-opacity',e=>e.source.id===id||e.target.id===id?0.9:0.06)
+           .attr('stroke',e=>e.source.id===id||e.target.id===id?'#a78bfa':'#2a3050')
+           .attr('stroke-width',e=>e.source.id===id||e.target.id===id?2:1);
+  }
+}
+
+function highlightEdge(srcId,tgtId){
+  if(!linkSel)return;
+  linkSel.attr('stroke-opacity',e=>(e.source.id===srcId&&e.target.id===tgtId)||(e.source.id===tgtId&&e.target.id===srcId)?1:0.06)
+         .attr('stroke',e=>(e.source.id===srcId&&e.target.id===tgtId)||(e.source.id===tgtId&&e.target.id===srcId)?'#ec4899':'#2a3050')
+         .attr('stroke-width',e=>(e.source.id===srcId&&e.target.id===tgtId)||(e.source.id===tgtId&&e.target.id===srcId)?3:1);
+  if(nodeSel)nodeSel.attr('fill-opacity',d=>d.id===srcId||d.id===tgtId?1:0.15);
+}
+
+function highlightByFilter(){
+  if(!nodeSel)return;
+  const ids=getFiltered().map(n=>n.id);
+  nodeSel.attr('fill-opacity',d=>ids.includes(d.id)?(d.confianza==='ALTA'?1:0.85):0.1);
+  if(linkSel)linkSel.attr('stroke-opacity',e=>ids.includes(e.source.id)&&ids.includes(e.target.id)?0.5:0.03);
+}
+
+function getNodeStroke(d){
+  const deg=DEGREE_MAP[d.id]||0;
+  if(deg>=GOD_THRESHOLD&&GOD_THRESHOLD>0)return '#f59e0b';
+  if(d.confianza==='ALTA')return 'rgba(255,255,255,0.5)';
+  return 'none';
+}
+function getNodeStrokeW(d){
+  const deg=DEGREE_MAP[d.id]||0;
+  if(deg>=GOD_THRESHOLD&&GOD_THRESHOLD>0)return 2.5;
+  if(d.confianza==='ALTA')return 1.5;
+  return 0;
+}
+function getNodeRadius(d){
+  const deg=DEGREE_MAP[d.id]||0;
+  const base=d.confianza==='ALTA'?13:d.confianza==='MEDIA'?10:7;
+  const bonus=MAX_DEGREE>0?Math.round((deg/MAX_DEGREE)*8):0;
+  return base+bonus;
+}
+
+function resetGraph(){
+  closeDetail();
+  currentFilter='all';
+  searchVal='';
+  document.getElementById('srch').value='';
+  document.querySelectorAll('.fpill').forEach((p,i)=>p.classList.toggle('active',i===0));
+  renderNodeList();
+  if(nodeSel)nodeSel.attr('fill-opacity',d=>d.confianza==='ALTA'?1:0.75).attr('stroke',d=>getNodeStroke(d)).attr('stroke-width',d=>getNodeStrokeW(d));
+  if(linkSel)linkSel.attr('stroke-opacity',0.35).attr('stroke','#2a3050').attr('stroke-width',1);
+}
+
+function centerGraph(){
+  if(!svgEl||!simulation)return;
+  const c=document.getElementById('gc');
+  simulation.force('center',d3.forceCenter(c.clientWidth/2,c.clientHeight/2)).alpha(0.3).restart();
+}
+
+// ─── D3 Knowledge Graph ───────────────────────────────────────
+function renderGraph(){
+  if(!NODES.length)return;
+  const container=document.getElementById('gc');
+  const W=container.clientWidth||800,H=container.clientHeight||600;
+
+  svgEl=d3.select('#gc').attr('width',W).attr('height',H)
+    .call(d3.zoom().scaleExtent([0.15,4]).on('zoom',ev=>g.attr('transform',ev.transform)));
+
+  const g=svgEl.append('g');
+
+  // Gradient glow for god nodes
+  const defs=svgEl.append('defs');
+  defs.append('radialGradient').attr('id','god-glow').attr('cx','50%').attr('cy','50%').attr('r','50%')
+    .selectAll('stop').data([{o:'0%',c:'rgba(245,158,11,0.4)'},{o:'100%',c:'rgba(245,158,11,0)'}])
+    .enter().append('stop').attr('offset',d=>d.o).attr('stop-color',d=>d.c);
+
+  defs.append('marker').attr('id','arrow').attr('viewBox','0 -4 8 8').attr('refX',20).attr('refY',0)
+    .attr('markerWidth',5).attr('markerHeight',5).attr('orient','auto')
+    .append('path').attr('d','M0,-4L8,0L0,4').attr('fill','#3a4060');
+
+  const links=EDGES.map(e=>({...e,source:e.desde_id,target:e.hacia_id})).filter(e=>nodeMap[e.source]&&nodeMap[e.target]);
+
+  simulation=d3.forceSimulation(NODES)
+    .force('link',d3.forceLink(links).id(d=>d.id).distance(d=>{
+      const sd=DEGREE_MAP[d.source.id]||0, td=DEGREE_MAP[d.target.id]||0;
+      return sd>=GOD_THRESHOLD||td>=GOD_THRESHOLD?120:90;
+    }))
+    .force('charge',d3.forceManyBody().strength(d=>(DEGREE_MAP[d.id]||0)>=GOD_THRESHOLD?-300:-150))
+    .force('center',d3.forceCenter(W/2,H/2))
+    .force('collision',d3.forceCollide(d=>getNodeRadius(d)+4));
+
+  linkSel=g.append('g').selectAll('line').data(links).enter().append('line')
+    .attr('stroke','#2a3050').attr('stroke-width',1).attr('stroke-opacity',0.35)
+    .attr('marker-end','url(#arrow)');
+
+  // God node glow circles
+  g.append('g').selectAll('circle.glow').data(NODES.filter(n=>(DEGREE_MAP[n.id]||0)>=GOD_THRESHOLD&&GOD_THRESHOLD>0)).enter().append('circle')
+    .attr('class','glow').attr('r',d=>getNodeRadius(d)+8).attr('fill','url(#god-glow)').style('pointer-events','none');
+
+  nodeSel=g.append('g').selectAll('circle.node').data(NODES).enter().append('circle')
+    .attr('class','node')
+    .attr('r',d=>getNodeRadius(d))
+    .attr('fill',d=>COLORS[d.tipo]||'#8b5cf6')
+    .attr('fill-opacity',d=>d.confianza==='ALTA'?1:0.75)
+    .attr('stroke',d=>getNodeStroke(d))
+    .attr('stroke-width',d=>getNodeStrokeW(d))
+    .style('cursor','pointer')
+    .call(d3.drag()
+      .on('start',(ev,d)=>{if(!ev.active)simulation.alphaTarget(0.3).restart();d.fx=d.x;d.fy=d.y;})
+      .on('drag',(ev,d)=>{d.fx=ev.x;d.fy=ev.y;})
+      .on('end',(ev,d)=>{if(!ev.active)simulation.alphaTarget(0);d.fx=null;d.fy=null;}))
+    .on('click',(ev,d)=>{ev.stopPropagation();selectNode(d.id);})
+    .on('mouseover',(ev,d)=>{
+      const tt=document.getElementById('gtt');
+      const deg=DEGREE_MAP[d.id]||0;
+      const isGod=deg>=GOD_THRESHOLD&&GOD_THRESHOLD>0;
+      tt.innerHTML=\`<strong style="color:var(--text)">\${isGod?'⚡ ':''}\${d.titulo.slice(0,40)}\${d.titulo.length>40?'…':''}</strong><br><span style="color:var(--text3);font-size:10px">\${d.tipo} · \${d.area} · \${d.confianza} · \${deg} connections</span>\`;
+      tt.style.opacity=1;
+      const r=container.getBoundingClientRect();
+      tt.style.left=(ev.clientX-r.left+12)+'px';tt.style.top=(ev.clientY-r.top-10)+'px';
+    })
+    .on('mouseout',()=>{document.getElementById('gtt').style.opacity=0;});
+
+  // Labels (hidden by default, toggle with button)
+  labelSel=g.append('g').selectAll('text').data(NODES.filter(n=>n.confianza==='ALTA'||(DEGREE_MAP[n.id]||0)>=GOD_THRESHOLD)).enter().append('text')
+    .text(d=>d.titulo.slice(0,16)+(d.titulo.length>16?'…':''))
+    .attr('font-size',9).attr('fill',d=>(DEGREE_MAP[d.id]||0)>=GOD_THRESHOLD?'rgba(245,158,11,0.8)':'rgba(255,255,255,0.4)')
+    .attr('text-anchor','middle').attr('dy',d=>-(getNodeRadius(d)+5)).style('pointer-events','none')
+    .attr('opacity',0);
+
+  // Update glow positions
+  const glowSel=g.selectAll('circle.glow');
+
+  simulation.on('tick',()=>{
+    linkSel.attr('x1',d=>d.source.x).attr('y1',d=>d.source.y).attr('x2',d=>d.target.x).attr('y2',d=>d.target.y);
+    nodeSel.attr('cx',d=>Math.max(15,Math.min(W-15,d.x))).attr('cy',d=>Math.max(15,Math.min(H-15,d.y)));
+    glowSel.attr('cx',d=>Math.max(15,Math.min(W-15,d.x))).attr('cy',d=>Math.max(15,Math.min(H-15,d.y)));
+    if(labelSel)labelSel.attr('x',d=>d.x).attr('y',d=>d.y);
+  });
+
+  svgEl.on('click',()=>closeDetail());
+}
+
+// ─── D3 Module Neural Graph (fullscreen) ─────────────────────
+let modSim, modNodeG, modLink2;
+
+function renderModuleGraph(){
+  if(modGraphRendered||(!M_NODES.length))return;
+  modGraphRendered=true;
+
+  const container=document.getElementById('mod-area');
+  if(!container)return;
+  // Use docs-main width minus the list panel (220px)
+  const docsMain=document.querySelector('.docs-main');
+  const W=Math.max((docsMain?docsMain.clientWidth:0)-220, 400);
+  const H=Math.max(window.innerHeight-160, 500);
+  container.style.width=W+'px';
+  container.style.height=H+'px';
+
+  const svg=d3.select('#mod-svg')
+    .attr('width',W).attr('height',H)
+    .call(d3.zoom().scaleExtent([0.2,4]).on('zoom',function(ev){g2.attr('transform',ev.transform);}));
+
+  const g2=svg.append('g');
+  const defs2=svg.append('defs');
+  defs2.append('marker').attr('id','arr2').attr('viewBox','0 -4 8 8').attr('refX',20).attr('refY',0)
+    .attr('markerWidth',5).attr('markerHeight',5).attr('orient','auto')
+    .append('path').attr('d','M0,-4L8,0L0,4').attr('fill','#4b5570');
+
+  const cleanLabel=function(s){var r=s;while(r.indexOf('**')>=0)r=r.split('**').join('');while(r.indexOf('*')>=0)r=r.split('*').join('');r=r.replace(/^\[.\]\s*/,'');return r.trim();};
+  const implNodes=M_NODES.filter(function(n){return n.tipo==='impl';}).map(function(n){return Object.assign({},n,{label:cleanLabel(n.label)});});
+  const pendNodes=M_NODES.filter(function(n){return n.tipo==='pend';}).map(function(n){return Object.assign({},n,{label:cleanLabel(n.label)});});
+
+  // Grid positions — impl top, pending bottom
+  var NW=160,NH=52,HGAP=24,VGAP=32;
+  var cols=Math.min(3,implNodes.length);
+  if(cols===0)cols=1;
+  var rows=Math.ceil(implNodes.length/cols);
+  var gridW=cols*(NW+HGAP)-HGAP;
+  var sx=(W-gridW)/2;
+  var sy=50;
+  implNodes.forEach(function(n,i){
+    n.x=sx+(i%cols)*(NW+HGAP)+NW/2;
+    n.y=sy+Math.floor(i/cols)*(NH+VGAP)+NH/2;
+  });
+  var implBottom=sy+rows*(NH+VGAP)+16;
+  var PW=130,PH=40,PGAP=16;
+  var pendTW=pendNodes.length*(PW+PGAP)-PGAP;
+  var px=(W-pendTW)/2;
+  var py=Math.max(implBottom+50, H-PH-30);
+  pendNodes.forEach(function(n,i){
+    n.x=px+i*(PW+PGAP)+PW/2;
+    n.y=py;
+  });
+
+  // Links: impl sequential flow
+  var links=[];
+  for(var i=0;i<implNodes.length-1;i++) links.push({s:implNodes[i],t:implNodes[i+1]});
+
+  g2.append('g').selectAll('line').data(links).enter().append('line')
+    .attr('x1',function(d){return d.s.x;}).attr('y1',function(d){return d.s.y;})
+    .attr('x2',function(d){return d.t.x;}).attr('y2',function(d){return d.t.y;})
+    .attr('stroke','#2a3050').attr('stroke-width',1.5).attr('stroke-opacity',0.4)
+    .attr('marker-end','url(#arr2)');
+
+  // Section labels
+  g2.append('text').text('✅ Implemented').attr('x',W/2).attr('y',sy-16)
+    .attr('text-anchor','middle').attr('font-size',11).attr('fill','rgba(16,185,129,0.6)');
+  if(pendNodes.length>0){
+    g2.append('line').attr('x1',40).attr('y1',implBottom+20).attr('x2',W-40).attr('y2',implBottom+20)
+      .attr('stroke','rgba(245,158,11,0.2)').attr('stroke-width',1).attr('stroke-dasharray','4,4');
+    g2.append('text').text('⏳ Pending').attr('x',W/2).attr('y',implBottom+36)
+      .attr('text-anchor','middle').attr('font-size',11).attr('fill','rgba(245,158,11,0.6)');
+  }
+
+  // Impl node groups
+  var iG=g2.append('g').selectAll('g').data(implNodes).enter().append('g')
+    .attr('transform',function(d){return 'translate('+d.x+','+d.y+')';})
+    .style('cursor','pointer')
+    .on('click',function(ev,d){ev.stopPropagation();selectModule(d.label,d.area,d);})
+    .on('mouseover',function(ev,d){
+      var tt=document.getElementById('mod-tt');
+      tt.innerHTML='<strong style="color:var(--text)">'+d.label+'</strong><br><span style="color:var(--text3);font-size:10px">'+d.errors+' errors · '+d.patterns+' patterns</span>';
+      tt.style.opacity=1;
+      var r=container.getBoundingClientRect();
+      tt.style.left=(ev.clientX-r.left+12)+'px';tt.style.top=(ev.clientY-r.top-8)+'px';
+    }).on('mouseout',function(){document.getElementById('mod-tt').style.opacity=0;});
+
+  iG.append('rect').attr('width',NW).attr('height',NH).attr('x',-NW/2).attr('y',-NH/2).attr('rx',10)
+    .attr('fill','rgba(16,185,129,0.1)')
+    .attr('stroke',function(d){return d.degree>2?'rgba(139,92,246,0.7)':'rgba(16,185,129,0.45)';})
+    .attr('stroke-width',function(d){return d.degree>2?2:1.5;});
+
+  iG.append('text').text(function(d){return d.label.length>17?d.label.slice(0,17)+'…':d.label;})
+    .attr('text-anchor','middle').attr('dy',-4)
+    .attr('font-size',12).attr('font-weight','600')
+    .attr('fill',function(d){return d.degree>2?'#a78bfa':'#34d399';});
+
+  iG.append('text').text(function(d){
+    var p=[];if(d.errors>0)p.push(d.errors+' err');if(d.patterns>0)p.push(d.patterns+' pat');return p.join(' · ')||'✓';
+  }).attr('text-anchor','middle').attr('dy',14).attr('font-size',9)
+    .attr('fill',function(d){return d.errors>0?'#f87171':'#6ee7b7';});
+
+  // Pending node groups
+  if(pendNodes.length>0){
+    var pG=g2.append('g').selectAll('g').data(pendNodes).enter().append('g')
+      .attr('transform',function(d){return 'translate('+d.x+','+d.y+')';})
+      .style('cursor','pointer')
+      .on('click',function(ev,d){ev.stopPropagation();selectModule(d.label,d.area,d);})
+      .on('mouseover',function(ev,d){
+        var tt=document.getElementById('mod-tt');
+        tt.innerHTML='<strong style="color:var(--text)">⏳ '+d.label+'</strong>';
+        tt.style.opacity=1;
+        var r=container.getBoundingClientRect();
+        tt.style.left=(ev.clientX-r.left+12)+'px';tt.style.top=(ev.clientY-r.top-8)+'px';
+      }).on('mouseout',function(){document.getElementById('mod-tt').style.opacity=0;});
+
+    pG.append('rect').attr('width',PW).attr('height',PH).attr('x',-PW/2).attr('y',-PH/2).attr('rx',8)
+      .attr('fill','rgba(245,158,11,0.07)').attr('stroke','rgba(245,158,11,0.4)').attr('stroke-width',1.5);
+
+    pG.append('text').text(function(d){return d.label.length>15?d.label.slice(0,15)+'…':d.label;})
+      .attr('text-anchor','middle').attr('dy',4)
+      .attr('font-size',11).attr('font-weight','500').attr('fill','#fbbf24');
+  }
+
+  svg.on('click',function(){document.getElementById('mod-detail').style.display='none';});
+}
+
+
+function showModTT(ev,d,container){
+  var tt=document.getElementById('gtt');
+  var icon=d.tipo==='impl'?'✅':'⏳';
+  tt.innerHTML='<strong style="color:var(--text)">'+icon+' '+d.label+'</strong><br><span style="color:var(--text3);font-size:10px">'+d.errors+' errors · '+d.patterns+' patterns</span>';
+  tt.style.opacity=1;
+  var r=container.getBoundingClientRect();
+  tt.style.left=(ev.clientX-r.left+14)+'px';
+  tt.style.top=(ev.clientY-r.top-10)+'px';
+}
+
+function getModW(d){ return Math.max(100,Math.min(d.label.length,18)*8+24); }
+
+function selectModule(label,area,d){
+  var panel=document.getElementById('mod-detail');
+  document.getElementById('mod-det-title').textContent=label;
+  var knNodes=NODES.filter(function(n){return n.area===area||n.area==='global';});
+  var errs=knNodes.filter(function(n){return n.tipo==='error';});
+  var pats=knNodes.filter(function(n){return n.tipo==='patron'&&n.confianza==='ALTA';});
+  var decs=knNodes.filter(function(n){return n.tipo==='decision';});
+  var html='';
+  html+='<div style="font-size:10px;color:var(--text3);margin-bottom:8px">'+(d?d.tipo==='impl'?'Done':'Pending':'')+'</div>';
+  if(errs.length>0){
+    html+='<div style="margin-bottom:8px"><div style="font-size:10px;color:#f87171;font-weight:600;margin-bottom:4px">Errors ('+errs.length+')</div>';
+    errs.slice(0,3).forEach(function(e){html+='<div style="font-size:11px;color:#94a3b8;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)">'+e.titulo.slice(0,42)+'</div>';});
+    html+='</div>';
+  }
+  if(pats.length>0){
+    html+='<div style="margin-bottom:8px"><div style="font-size:10px;color:#34d399;font-weight:600;margin-bottom:4px">HIGH patterns ('+pats.length+')</div>';
+    pats.slice(0,3).forEach(function(p){html+='<div style="font-size:11px;color:#94a3b8;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)">'+p.titulo.slice(0,42)+'</div>';});
+    html+='</div>';
+  }
+  if(decs.length>0){
+    html+='<div><div style="font-size:10px;color:#60a5fa;font-weight:600;margin-bottom:4px">Decisions ('+decs.length+')</div>';
+    decs.slice(0,2).forEach(function(dec){html+='<div style="font-size:11px;color:#94a3b8;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)">'+dec.titulo.slice(0,42)+'</div>';});
+    html+='</div>';
+  }
+  if(!errs.length&&!pats.length&&!decs.length) html+='<div style="font-size:11px;color:#64748b">No knowledge recorded yet.</div>';
+  document.getElementById('mod-det-body').innerHTML=html;
+  panel.style.display='block';
+}
+
+function resetModGraph(){
+  document.getElementById('mod-detail').style.display='none';
+}
+
+function centerModGraph(){
+  // noop — static graph
+}
+
+function copyMarkdown(){
+  const t='# '+('${config.nombre}')+'\\n\\nGenerated by Agentic KDD Dashboard\\n';
+  navigator.clipboard?.writeText(t).then(()=>alert('Copied!')).catch(()=>alert('Copy manually'));
+}
+
+// Init
+renderNodeList();
+renderGraph();
+</script>
+</body>
+</html>`;
+
+const server = http.createServer((req, res) => {
+  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+  res.end(HTML);
+});
+
+server.listen(PORT, () => {
+  const url = `http://localhost:${PORT}`;
+  console.log('\n  \x1b[34mAgentic KDD Dashboard v4\x1b[0m');
+  console.log(`  Project: ${config.nombre}`);
+  console.log(`  Nodes: ${stats.total} | Divine: ${stats.godNodes} | Surprising: ${stats.surprising} | HIGH: ${stats.high}`);
+  console.log(`\n  \x1b[36m→ ${url}\x1b[0m\n`);
+  console.log('  Ctrl+C to stop\n');
+  try {
+    const cmd = process.platform === 'win32' ? `start ${url}` : process.platform === 'darwin' ? `open ${url}` : `xdg-open ${url}`;
+    require('child_process').execSync(cmd, { stdio: 'ignore' });
+  } catch {}
+});
+
+process.on('SIGINT', () => { server.close(); console.log('\n  Stopped.\n'); process.exit(0); });