agentic-kdd 2.0.8 → 2.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "agentic-kdd",
-  "version": "2.0.8",
-  "description": "Autonomous development pipeline with KDD \u2014 aa: \u00b7 ag: \u00b7 audit: \u00b7 Visual Dashboard. Works with Cursor and Claude Code.",
+  "version": "2.1.2",
+  "description": "Autonomous development pipeline with KDD — aa: · ag: · audit: · Visual Dashboard. Works with Cursor and Claude Code.",
   "main": "src/index.js",
   "bin": {
     "akdd": "bin/akdd.js"
@@ -39,6 +39,9 @@
     "chalk": "^4.1.2",
     "ora": "^5.4.1",
     "inquirer": "^8.2.6",
+    "sql.js": "^1.10.3"
+  },
+  "optionalDependencies": {
     "better-sqlite3": "^9.4.3"
   }
-}
+}

package/src/dashboard-template.cjs

@@ -69,6 +69,148 @@ function readConfig() {
 
 function readMemoria(file) { try { const p = path.join(memoriaPath, file); return fs.existsSync(p) ? fs.readFileSync(p, 'utf8') : ''; } catch { return ''; } }
 
+function readSpecs() {
+  const specsPath = path.join(projectPath, '.agentic', 'specs');
+  if (!fs.existsSync(specsPath)) return [];
+  try {
+    return fs.readdirSync(specsPath).filter(f => f.endsWith('.md')).map(f => {
+      const c = fs.readFileSync(path.join(specsPath, f), 'utf8');
+      const estado = (c.match(/Estado: (.+)/) || [])[1]?.trim() || 'DESCONOCIDO';
+      const fecha = (c.match(/ltima actualización: (.+)/) || [])[1]?.trim() || '—';
+      const tests = (c.match(/PASS/g) || []).length;
+      return { name: f.replace('.md',''), estado, fecha, tests };
+    });
+  } catch { return []; }
+}
+
+function readLogs() {
+  const outputPath = path.join(projectPath, '_output');
+  if (!fs.existsSync(outputPath)) return [];
+  const logs = [];
+  try {
+    fs.readdirSync(outputPath).filter(f => f.startsWith('log-') && f.endsWith('.md')).forEach(f => {
+      const c = fs.readFileSync(path.join(outputPath, f), 'utf8');
+      c.split(/^## /m).filter(s => s.trim() && s.includes('Resultado:')).slice(0,20).forEach(entry => {
+        const lines = entry.split('\n');
+        const get = (k) => { for (const l of lines) { if (l.startsWith(k+':')) return l.split(':').slice(1).join(':').trim(); } return ''; };
+        logs.push({ header: lines[0].trim().slice(0,55), modulo: get('Módulo'), resultado: get('Resultado'), tests: get('Tests'), patrones: get('Patrones KDD aplicados'), errores: get('Errores evitados'), sync: get('Sync grafo') });
+      });
+    });
+  } catch {}
+  return logs.slice(0,15);
+}
+
+function calcMetrics(logs) {
+  if (ciclosDB && ciclosDB.length > 0) {
+    const total       = ciclosDB.length;
+    const completados = ciclosDB.filter(c => c.estado === 'COMPLETADO').length;
+    const stops       = ciclosDB.filter(c => c.estado === 'STOP').length;
+    const goal_attainment = Math.round(completados/total*100);
+    const autonomy_ratio  = Math.round((total-stops)/total*100);
+    const totalFases = ciclosDB.reduce((s,c) => s+(c.fases_total||0), 0);
+    const fasesOK    = ciclosDB.reduce((s,c) => s+(c.fases_completadas||0), 0);
+    const handoff    = totalFases>0 ? Math.round(fasesOK/totalFases*100) : 0;
+    let patronesTotal=0, erroresTotal=0;
+    ciclosDB.forEach(c => {
+      try { patronesTotal += JSON.parse(c.patrones_aplicados||'[]').length; } catch(e) {}
+      try { erroresTotal  += JSON.parse(c.errores_evitados||'[]').length; } catch(e) {}
+    });
+    const testsGen  = ciclosDB.reduce((s,c) => s+(c.tests_generados||0), 0);
+    const testsOK   = ciclosDB.reduce((s,c) => s+(c.tests_pasando||0), 0);
+    const test_rate = testsGen>0 ? Math.round(testsOK/testsGen*100) : 0;
+    const totalBlockers = ciclosDB.reduce((s,c) => s+(c.review_blockers||0), 0);
+    const drift_index   = (totalBlockers/total).toFixed(1);
+    const guardrails    = ciclosDB.filter(c => c.context_guard === 'STOP').length;
+
+    // Métrica 4: Tiempo promedio por ciclo (de los que tienen duracion)
+    const conDur = ciclosDB.filter(c => c.duracion_ms > 0);
+    const avg_duracion_ms = conDur.length>0
+      ? Math.round(conDur.reduce((s,c)=>s+c.duracion_ms,0)/conDur.length) : 0;
+
+    // Métrica 5: Éxito por tipo de tarea
+    const tipoMap = {};
+    ciclosDB.forEach(c => {
+      const t = c.tipo_tarea || 'feature';
+      if (!tipoMap[t]) tipoMap[t] = { total:0, ok:0 };
+      tipoMap[t].total++;
+      if (c.estado==='COMPLETADO') tipoMap[t].ok++;
+    });
+    const exito_por_tipo = Object.entries(tipoMap).map(([tipo,v]) => ({
+      tipo, total:v.total, ok:v.ok, rate: Math.round(v.ok/v.total*100)
+    }));
+
+    // Métrica 6: Evolución de memoria (snapshots antes/después)
+    let evolucion_memoria = null;
+    const conSnap = ciclosDB.filter(c => c.snapshot_fin);
+    if (conSnap.length >= 2) {
+      try {
+        const primero = JSON.parse(conSnap[conSnap.length-1].snapshot_fin);
+        const ultimo  = JSON.parse(conSnap[0].snapshot_fin);
+        evolucion_memoria = {
+          nodos_inicio: primero.totales?.total || 0,
+          nodos_ahora:  ultimo.totales?.total  || 0,
+          alta_inicio:  primero.totales?.alta  || 0,
+          alta_ahora:   ultimo.totales?.alta   || 0,
+          crecimiento:  (ultimo.totales?.total||0) - (primero.totales?.total||0),
+        };
+      } catch(e) {}
+    }
+
+    // Reintentos desde fases
+    let reintento_rate = 0, avg_fase_ms = 0;
+    if (fasesDB && fasesDB.length > 0) {
+      const conReintentos = fasesDB.filter(f => f.intentos > 1);
+      reintento_rate = Math.round(conReintentos.length/fasesDB.length*100);
+      const conFaseDur = fasesDB.filter(f => f.duracion_ms > 0);
+      avg_fase_ms = conFaseDur.length>0
+        ? Math.round(conFaseDur.reduce((s,f)=>s+f.duracion_ms,0)/conFaseDur.length) : 0;
+    }
+
+    return {
+      total, completados, stops,
+      goal_attainment, autonomy_ratio,
+      handoff_integrity: handoff,
+      drift_index, guardrail_violations: guardrails,
+      patronesTotal, erroresTotal,
+      test_rate, testsGen, testsOK,
+      avg_duracion_ms, avg_fase_ms,
+      reintento_rate, exito_por_tipo,
+      evolucion_memoria,
+      source: 'sqlite'
+    };
+  }
+  // Fallback a logs de archivos
+  const completados = logs.filter(l => l.resultado&&l.resultado.includes('COMPLETADO')).length;
+  const stops = logs.filter(l => l.resultado&&l.resultado.includes('STOP')).length;
+  let patronesTotal=0, erroresTotal=0;
+  logs.forEach(l => {
+    const pm=(l.patrones||'').match(/^(\d+)/); if(pm) patronesTotal+=parseInt(pm[1]);
+    const em=(l.errores||'').match(/^(\d+)/);  if(em) erroresTotal+=parseInt(em[1]);
+  });
+  return {
+    total:logs.length, completados, stops, patronesTotal, erroresTotal,
+    goal_attainment: logs.length>0?Math.round(completados/logs.length*100):0,
+    autonomy_ratio:0, handoff_integrity:0, drift_index:'0',
+    guardrail_violations:0, test_rate:0, testsGen:0, testsOK:0,
+    avg_duracion_ms:0, avg_fase_ms:0, reintento_rate:0,
+    exito_por_tipo:[], evolucion_memoria:null, source:'logs'
+  };
+}
+
+function calcOnboarding(config, mImpl, dec, pat, specsArr) {
+  const checks = [
+    { label: 'config.md configurado', ok: config.nombre !== '—' && config.tipo !== '—' },
+    { label: 'Primer sync del grafo', ok: fs.existsSync(dbPath) },
+    { label: 'Módulos documentados', ok: mImpl.length > 0 },
+    { label: 'Primera decisión registrada', ok: dec.length > 0 },
+    { label: 'Primer patrón registrado', ok: pat.length > 0 },
+    { label: 'Primer ciclo aa: completado', ok: readMemoria('trabajo.md').includes('COMPLETADO') },
+    { label: 'Specs generadas', ok: specsArr.length > 0 },
+  ];
+  const done = checks.filter(c => c.ok).length;
+  return { checks, done, total: checks.length, pct: Math.round(done/checks.length*100) };
+}
+
 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)
@@ -88,17 +230,51 @@ 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: [] }; }
+    if (!fs.existsSync(dbPath)) return { nodes: [], edges: [], ciclos: [], fases: [] };
+    let db = null, usingSqlJs = false;
+    // Intentar better-sqlite3 primero, fallback a sql.js
+    try {
+      const BS3 = require('better-sqlite3');
+      db = { 
+        all: (sql, ...p) => BS3(dbPath, {readonly:true}).prepare(sql).all(...p),
+        close: () => {}
+      };
+      const _db = new BS3(dbPath, { readonly: true });
+      const nodes = _db.prepare('SELECT * FROM nodos ORDER BY fecha_creacion DESC').all();
+      const edges = _db.prepare('SELECT * FROM relaciones').all();
+      let ciclos = [], fases = [];
+      try { ciclos = _db.prepare('SELECT * FROM ciclos ORDER BY fecha_inicio DESC LIMIT 30').all(); } catch(e) {}
+      try { fases  = _db.prepare('SELECT * FROM fases ORDER BY fecha_inicio DESC LIMIT 100').all(); } catch(e) {}
+      _db.close();
+      return { nodes, edges, ciclos, fases };
+    } catch(e) {
+      // Fallback sql.js
+      try {
+        const SQL = require('sql.js/dist/sql-wasm.js');
+        const buffer = fs.readFileSync(dbPath);
+        const _db = new SQL.Database(buffer);
+        const allSQL = (sql) => {
+          try {
+            const stmt = _db.prepare(sql);
+            const rows = [];
+            while(stmt.step()) rows.push(stmt.getAsObject());
+            stmt.free();
+            return rows;
+          } catch(e) { return []; }
+        };
+        const nodes  = allSQL('SELECT * FROM nodos ORDER BY fecha_creacion DESC');
+        const edges  = allSQL('SELECT * FROM relaciones');
+        const ciclos = allSQL('SELECT * FROM ciclos ORDER BY fecha_inicio DESC LIMIT 30');
+        const fases  = allSQL('SELECT * FROM fases ORDER BY fecha_inicio DESC LIMIT 100');
+        return { nodes, edges, ciclos, fases };
+      } catch(e2) {
+        return { nodes: [], edges: [], ciclos: [], fases: [] };
+      }
+    }
+  } catch { return { nodes: [], edges: [], ciclos: [], fases: [] }; }
 }
 
-const { nodes, edges } = getGraphData();
+const { nodes, edges, ciclos: ciclosDB, fases: fasesDB } = getGraphData();
 
 // Calcular grado de conexiones por nodo (como Graphify — nodos divinos)
 const degreeMap = {};
@@ -149,6 +325,10 @@ function parseModulos(text) {
 }
 
 const modulosImpl = parseModulos(config.implementados);
+const specsData = readSpecs();
+const logsData = readLogs();
+const metricsData = calcMetrics(logsData);
+const onboardingData = calcOnboarding(config, modulosImpl, decisiones, patrones, specsData);
 const modulosPend = parseModulos(config.pendientes);
 const reglas = (config.reglas || '').split('\n').map(l => l.trim()).filter(l => l && l !== '—' && l.length > 5);
 
@@ -619,6 +799,9 @@ body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSy
         <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 class="nav-item" onclick="showDoc('metrics',this)">📊 <span>Metrics</span></div>
+        <div class="nav-item" onclick="showDoc('timeline',this)">🕐 <span>Timeline</span></div>
+        <div class="nav-item" onclick="showDoc('onboarding',this)">🚀 <span>Onboarding</span> <span class="nav-count">${onboardingData.pct}%</span></div>
       </div>
     </nav>
 
@@ -793,6 +976,195 @@ body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSy
         </div>` : ''}
       </div>
 
+      <!-- METRICS -->
+      <div class="docs-section" id="doc-metrics">
+        <div class="docs-h1">📊 Metrics</div>
+        <div class="docs-sub">Real observability — every aa: cycle tracked. Data from SQLite, not estimates.</div>
+        ${metricsData.total === 0 ? `<div class="empty-state" style="padding:48px;text-align:center">
+          <div style="font-size:36px;margin-bottom:12px">📊</div>
+          <div style="font-size:14px;color:var(--text2);margin-bottom:6px">No cycles recorded yet</div>
+          <div style="font-size:12px;color:var(--text3)">Run <code style="background:var(--bg3);padding:2px 6px;border-radius:3px">aa: [task]</code> to start — metrics appear automatically after each cycle</div>
+        </div>` : `
+        <!-- Fila 1: 4 KPIs principales -->
+        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px">
+          <div style="background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(16,185,129,.04));border:1px solid rgba(139,92,246,.2);border-radius:10px;padding:14px;text-align:center">
+            <div style="font-size:28px;font-weight:700;color:${metricsData.goal_attainment>=80?'#34d399':metricsData.goal_attainment>=60?'#fbbf24':'#f87171'}">${metricsData.goal_attainment}%</div>
+            <div style="font-size:10px;font-weight:600;color:var(--text2);margin-top:3px">Goal Attainment</div>
+            <div style="font-size:9px;color:${metricsData.goal_attainment>=80?'#34d399':'var(--text3)'}">target >80%</div>
+          </div>
+          <div style="background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.2);border-radius:10px;padding:14px;text-align:center">
+            <div style="font-size:28px;font-weight:700;color:var(--cyan)">${metricsData.autonomy_ratio||0}%</div>
+            <div style="font-size:10px;font-weight:600;color:var(--text2);margin-top:3px">Autonomy Ratio</div>
+            <div style="font-size:9px;color:var(--text3)">cycles without STOP</div>
+          </div>
+          <div style="background:rgba(16,185,129,.04);border:1px solid rgba(16,185,129,.2);border-radius:10px;padding:14px;text-align:center">
+            <div style="font-size:28px;font-weight:700;color:${(metricsData.handoff_integrity||0)>=90?'#34d399':'#fbbf24'}">${metricsData.handoff_integrity||0}%</div>
+            <div style="font-size:10px;font-weight:600;color:var(--text2);margin-top:3px">Handoff Integrity</div>
+            <div style="font-size:9px;color:${(metricsData.handoff_integrity||0)>=90?'#34d399':'var(--text3)'}">target >90%</div>
+          </div>
+          <div style="background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.15);border-radius:10px;padding:14px;text-align:center">
+            <div style="font-size:28px;font-weight:700;color:${parseFloat(metricsData.drift_index||0)<=0.5?'#34d399':'#f87171'}">${metricsData.drift_index||'0'}</div>
+            <div style="font-size:10px;font-weight:600;color:var(--text2);margin-top:3px">Drift Index</div>
+            <div style="font-size:9px;color:${parseFloat(metricsData.drift_index||0)<=0.5?'#34d399':'var(--text3)'}">blockers/cycle (0=ideal)</div>
+          </div>
+        </div>
+
+        <!-- Fila 2: 6 stats secundarios -->
+        <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px">
+          <div class="info-card"><div class="ic-label">Cycles</div><div class="ic-val" style="color:var(--pl)">${metricsData.total}</div></div>
+          <div class="info-card"><div class="ic-label">Completed</div><div class="ic-val" style="color:var(--green)">${metricsData.completados}</div></div>
+          <div class="info-card"><div class="ic-label">STOPs</div><div class="ic-val" style="color:var(--red)">${metricsData.stops}</div></div>
+          <div class="info-card"><div class="ic-label">Patterns used</div><div class="ic-val" style="color:var(--amber)">${metricsData.patronesTotal}</div></div>
+          <div class="info-card"><div class="ic-label">Errors avoided</div><div class="ic-val" style="color:var(--cyan)">${metricsData.erroresTotal}</div></div>
+          <div class="info-card"><div class="ic-label">Test pass rate</div><div class="ic-val" style="color:var(--green)">${metricsData.test_rate||0}%</div></div>
+        </div>
+
+        <!-- Métrica extra: tiempo por ciclo y reintentos -->
+        ${metricsData.avg_duracion_ms > 0 || metricsData.reintento_rate > 0 ? `
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px">
+          ${metricsData.avg_duracion_ms>0?`<div class="info-card"><div class="ic-label">Avg cycle time</div><div class="ic-val" style="color:var(--text2);font-size:13px">${metricsData.avg_duracion_ms>60000?Math.round(metricsData.avg_duracion_ms/60000)+'m':metricsData.avg_duracion_ms+'ms'}</div></div>`:''}
+          ${metricsData.avg_fase_ms>0?`<div class="info-card"><div class="ic-label">Avg phase time</div><div class="ic-val" style="color:var(--text2);font-size:13px">${metricsData.avg_fase_ms>60000?Math.round(metricsData.avg_fase_ms/60000)+'m':metricsData.avg_fase_ms+'ms'}</div></div>`:''}
+          ${metricsData.reintento_rate>0?`<div class="info-card"><div class="ic-label">Retry rate</div><div class="ic-val" style="color:${metricsData.reintento_rate>30?'#f87171':'#fbbf24'};font-size:16px">${metricsData.reintento_rate}%</div></div>`:''}
+        </div>` : ''}
+
+        <!-- Guardrail violations -->
+        ${metricsData.guardrail_violations > 0
+          ? `<div style="background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:11px;color:#f87171">⚠️ Guardrail violations: ${metricsData.guardrail_violations} — instructions outside project scope</div>`
+          : `<div style="background:rgba(16,185,129,.04);border:1px solid rgba(16,185,129,.15);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:11px;color:#34d399">✓ Guardrail violations: 0 — all instructions within project scope</div>`}
+
+        <!-- Éxito por tipo de tarea -->
+        ${metricsData.exito_por_tipo && metricsData.exito_por_tipo.length > 1 ? `
+        <div class="docs-h2">Success rate by task type</div>
+        <div style="display:grid;grid-template-columns:repeat(${Math.min(metricsData.exito_por_tipo.length,4)},1fr);gap:8px;margin-bottom:16px">
+          ${metricsData.exito_por_tipo.map(t => `
+          <div style="background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px;text-align:center">
+            <div style="font-size:18px;font-weight:700;color:${t.rate>=80?'#34d399':t.rate>=60?'#fbbf24':'#f87171'}">${t.rate}%</div>
+            <div style="font-size:10px;color:var(--text2);margin-top:2px">${t.tipo}</div>
+            <div style="font-size:9px;color:var(--text3)">${t.ok}/${t.total}</div>
+          </div>`).join('')}
+        </div>` : ''}
+
+        <!-- Evolución de memoria -->
+        ${metricsData.evolucion_memoria ? `
+        <div class="docs-h2">Memory evolution</div>
+        <div style="background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:16px">
+          <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center">
+            <div><div style="font-size:18px;font-weight:600;color:var(--pl)">${metricsData.evolucion_memoria.nodos_inicio}</div><div style="font-size:10px;color:var(--text3)">nodes at start</div></div>
+            <div><div style="font-size:18px;font-weight:600;color:var(--pl)">${metricsData.evolucion_memoria.nodos_ahora}</div><div style="font-size:10px;color:var(--text3)">nodes now</div></div>
+            <div><div style="font-size:18px;font-weight:600;color:${metricsData.evolucion_memoria.crecimiento>0?'#34d399':'#94a3b8'}">+${metricsData.evolucion_memoria.crecimiento}</div><div style="font-size:10px;color:var(--text3)">growth</div></div>
+            <div><div style="font-size:18px;font-weight:600;color:var(--amber)">${metricsData.evolucion_memoria.alta_ahora}</div><div style="font-size:10px;color:var(--text3)">HIGH rules now</div></div>
+          </div>
+        </div>` : ''}
+
+        <!-- Ciclos recientes -->
+        <div class="docs-h2">Recent cycles</div>
+        ${(ciclosDB&&ciclosDB.length>0?ciclosDB:logsData).map(l => {
+          const esDB = !!l.ciclo_id;
+          const tarea = (esDB ? l.tarea : l.header)||'';
+          const modulo = l.modulo;
+          const ok = esDB ? l.estado==='COMPLETADO' : (l.resultado&&l.resultado.includes('COMPLETADO'));
+          const fases = esDB && l.fases_total>0 ? l.fases_completadas+'/'+l.fases_total+' phases' : '';
+          const tests = esDB ? (l.tests_pasando||0)+'/'+(l.tests_generados||0)+' tests' : (l.tests||'');
+          const tipo  = esDB && l.tipo_tarea ? l.tipo_tarea : '';
+          let pats=0; if(esDB){try{pats=JSON.parse(l.patrones_aplicados||'[]').length;}catch(e){}}
+          return `<div style="background:var(--bg2);border:1px solid var(--border);border-left:3px solid ${ok?'var(--green)':'var(--red)'};border-radius:8px;padding:10px 14px;margin-bottom:6px">
+            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:5px">
+              <div style="font-size:12px;font-weight:500;color:var(--text);flex:1;margin-right:8px">${tarea.slice(0,65)}</div>
+              <div style="display:flex;gap:6px;align-items:center;flex-shrink:0">
+                ${tipo?`<span style="font-size:9px;background:rgba(139,92,246,.15);color:#a78bfa;border-radius:3px;padding:1px 5px">${tipo}</span>`:''}
+                <span style="font-size:10px;padding:2px 7px;border-radius:4px;background:${ok?'rgba(16,185,129,.15)':'rgba(239,68,68,.15)'};color:${ok?'#34d399':'#f87171'}">${ok?'done':'stop'}</span>
+              </div>
+            </div>
+            <div style="display:flex;gap:10px;font-size:10px;color:var(--text3);flex-wrap:wrap">
+              ${modulo&&modulo!=='global'?`<span>📦 ${modulo}</span>`:''}
+              ${fases?`<span>${fases}</span>`:''}
+              ${tests&&tests!=='0/0'?`<span style="color:#34d399">🧪 ${tests}</span>`:''}
+              ${pats>0?`<span style="color:var(--amber)">★ ${pats} patterns</span>`:''}
+              <span style="margin-left:auto">${(l.fecha_inicio||'').slice(0,16)}</span>
+            </div>
+          </div>`;
+        }).join('')}
+        `}
+      </div>
+
+      <!-- TIMELINE -->
+      <div class="docs-section" id="doc-timeline">
+        <div class="docs-h1">🕐 Decision Timeline</div>
+        <div class="docs-sub">Every architectural decision, when it was made, why, and which modules it affects. The project's living memory.</div>
+        ${decisiones.length === 0 ? '<div class="empty-state" style="padding:40px">No decisions recorded yet — the system logs them automatically as you build</div>' : `
+        <div style="position:relative;padding-left:24px">
+          <div style="position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border)"></div>
+          ${decisiones.map((d,i) => `<div style="position:relative;margin-bottom:16px">
+            <div style="position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid var(--bg)"></div>
+            <div style="background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:8px;padding:12px 14px">
+              <div style="font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px">${d.titulo}</div>
+              <div style="display:flex;gap:8px;margin-bottom:6px">
+                <span style="font-size:10px;background:rgba(59,130,246,.15);color:#60a5fa;border-radius:3px;padding:1px 6px">${d.area}</span>
+                <span style="font-size:10px;color:var(--text3)">${d.confianza}</span>
+              </div>
+              ${d.contenido && d.contenido.split('\n').find(l=>l.startsWith('Razón:')) ? `<div style="font-size:11px;color:var(--text2);line-height:1.5">${d.contenido.split('\n').find(l=>l.startsWith('Razón:')).replace('Razón:','').trim()}</div>` : ''}
+            </div>
+          </div>`).join('')}
+        </div>`}
+        ${specsData.length > 0 ? `
+        <div class="docs-h2" style="margin-top:24px">📋 Module Specs</div>
+        <div style="font-size:12px;color:var(--text3);margin-bottom:12px">Auto-generated specs — updated after every aa: cycle</div>
+        ${specsData.map(s => `<div style="background:var(--bg2);border:1px solid var(--border);border-left:3px solid ${s.estado.includes('IMPLEMENTADO')?'var(--green)':'var(--amber)'};border-radius:8px;padding:10px 14px;margin-bottom:6px;display:flex;align-items:center;gap:10px">
+          <div style="font-size:13px;font-weight:500;color:var(--text);flex:1">${s.name}</div>
+          <span style="font-size:10px;background:${s.estado.includes('IMPLEMENTADO')?'rgba(16,185,129,.15)':'rgba(245,158,11,.15)'};color:${s.estado.includes('IMPLEMENTADO')?'#34d399':'#fbbf24'};border-radius:4px;padding:2px 7px">${s.estado}</span>
+          ${s.tests>0?`<span style="font-size:10px;color:var(--text3)">${s.tests} tests</span>`:''}
+          <span style="font-size:10px;color:var(--text3)">${s.fecha}</span>
+        </div>`).join('')}` : ''}
+      </div>
+
+      <!-- ONBOARDING -->
+      <div class="docs-section" id="doc-onboarding">
+        <div class="docs-h1">🚀 Project Setup</div>
+        <div class="docs-sub">How configured is this project with Agentic KDD. Complete all steps for the full system to work.</div>
+        
+        <!-- Progress bar -->
+        <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
+            <div style="font-size:14px;font-weight:600;color:var(--text)">Setup progress</div>
+            <div style="font-size:24px;font-weight:700;color:${onboardingData.pct===100?'var(--green)':onboardingData.pct>50?'var(--amber)':'var(--red)'}">${onboardingData.pct}%</div>
+          </div>
+          <div style="height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-bottom:16px">
+            <div style="height:100%;width:${onboardingData.pct}%;background:${onboardingData.pct===100?'var(--green)':onboardingData.pct>50?'var(--amber)':'var(--purple)'};border-radius:4px;transition:width .5s"></div>
+          </div>
+          ${onboardingData.checks.map(c => `<div style="display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)">
+            <span style="font-size:16px">${c.ok?'✅':'⬜'}</span>
+            <span style="font-size:12px;color:${c.ok?'var(--text)':'var(--text3)'}">${c.label}</span>
+            ${!c.ok?'<span style="font-size:10px;color:var(--amber);margin-left:auto">pending</span>':'<span style="font-size:10px;color:var(--green);margin-left:auto">done</span>'}
+          </div>`).join('')}
+        </div>
+
+        ${onboardingData.pct < 100 ? `
+        <div class="docs-h2">Next steps</div>
+        ${onboardingData.checks.filter(c=>!c.ok).map(c => {
+          const steps = {
+            'config.md configurado': 'Open in Cursor/Claude Code and run: aa: configurar',
+            'Primer sync del grafo': 'Run: node .agentic/grafo/grafo.cjs sync',
+            'Módulos documentados': 'Run: aa: configurar — describe your modules',
+            'Primera decisión registrada': 'Run any aa: task — decisions are logged automatically',
+            'Primer patrón registrado': 'Run any aa: task — patterns are detected automatically',
+            'Primer ciclo aa: completado': 'Run: aa: [any task]',
+            'Specs generadas': 'Complete a full module with aa: — specs auto-generate',
+          };
+          return `<div style="background:var(--bg2);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:12px 14px;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start">
+            <span style="font-size:18px;flex-shrink:0">⏳</span>
+            <div>
+              <div style="font-size:12px;font-weight:600;color:var(--amber);margin-bottom:4px">${c.label}</div>
+              <div style="font-size:11px;color:var(--text2)">${steps[c.label]||'Follow the setup instructions'}</div>
+            </div>
+          </div>`;
+        }).join('')}` : `
+        <div style="background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);border-radius:12px;padding:20px;text-align:center">
+          <div style="font-size:32px;margin-bottom:8px">🎉</div>
+          <div style="font-size:16px;font-weight:700;color:#34d399;margin-bottom:6px">Fully configured</div>
+          <div style="font-size:12px;color:var(--text2)">This project has Agentic KDD fully set up. The system will keep improving automatically.</div>
+        </div>`}
+      </div>
+
     </div>
   </div>
 </div>
@@ -800,6 +1172,19 @@ body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSy
 </div>
 
 <script>
+console.log('=== Agentic KDD Dashboard Debug ===');
+console.log('M_NODES:', ${JSON.stringify(mNodes)}.length, 'nodes');
+console.log('metricsData:', ${JSON.stringify(metricsData)});
+console.log('onboardingData pct:', ${JSON.stringify(onboardingData.pct)});
+console.log('specsData:', ${JSON.stringify(specsData)}.length, 'specs');
+console.log('logsData:', ${JSON.stringify(logsData)}.length, 'logs');
+document.addEventListener('DOMContentLoaded', function(){
+  console.log('Nav items:', document.querySelectorAll('.nav-item').length);
+  console.log('Doc sections:', document.querySelectorAll('.docs-section').length);
+  console.log('doc-metrics exists:', !!document.getElementById('doc-metrics'));
+  console.log('doc-timeline exists:', !!document.getElementById('doc-timeline'));
+  console.log('doc-onboarding exists:', !!document.getElementById('doc-onboarding'));
+});
 const NODES = ${JSON.stringify(nodes)};
 const EDGES = ${JSON.stringify(edges)};
 const M_NODES = ${JSON.stringify(mNodes)};

package/src/graph.js

@@ -7,64 +7,55 @@ const { execSync } = require('child_process');
 
 async function graph() {
   const projectPath = process.cwd();
-  const grafoPath = path.join(projectPath, '.agentic', 'grafo', 'grafo.js');
-  const dbPath = path.join(projectPath, '.agentic', 'memoria.db');
-  const memoriaPath = path.join(projectPath, '.agentic', 'memoria');
+  const grafoPath = path.join(projectPath, '.agentic', 'grafo', 'grafo.cjs');
+  const grafoOld  = path.join(projectPath, '.agentic', 'grafo', 'grafo.js');
+  const dbPath    = path.join(projectPath, '.agentic', 'memoria.db');
 
-  // Verificar que Agentic está instalado
   if (!fs.existsSync(path.join(projectPath, '.agentic', 'config.md'))) {
     console.log(chalk.yellow('\n  Agentic KDD no está instalado en este proyecto.'));
     console.log(chalk.gray('  Corre akdd init para instalarlo.\n'));
     return;
   }
 
-  // Verificar que el grafo existe
-  if (!fs.existsSync(grafoPath)) {
-    console.log(chalk.yellow('\n  El grafo no está disponible en este proyecto.'));
+  const grafo = fs.existsSync(grafoPath) ? grafoPath : fs.existsSync(grafoOld) ? grafoOld : null;
+  if (!grafo) {
+    console.log(chalk.yellow('\n  El grafo no está disponible.'));
     console.log(chalk.gray('  Actualiza con: akdd update\n'));
     return;
   }
 
-  console.log('\n' + chalk.bold.blue('  Agentic KDD') + chalk.gray(' — grafo de conocimiento\n'));
+  console.log('\n' + chalk.bold.hex('#8b5cf6')('  Agentic KDD') + chalk.gray(' — grafo de conocimiento\n'));
 
-  // Sincronizar primero si hay archivos de memoria
-  if (fs.existsSync(memoriaPath)) {
-    try {
-      process.stdout.write(chalk.gray('  Sincronizando memoria... '));
-      execSync(`node "${grafoPath}" sync`, { stdio: 'pipe', cwd: projectPath });
-      console.log(chalk.green('✓'));
-    } catch (e) {
-      console.log(chalk.yellow('⚠ No se pudo sincronizar'));
-    }
+  // Sincronizar primero
+  try {
+    process.stdout.write(chalk.gray('  Sincronizando memoria... '));
+    execSync(`node "${grafo}" sync`, { stdio: 'pipe', cwd: projectPath });
+    console.log(chalk.green('✓'));
+  } catch (e) {
+    console.log(chalk.yellow('⚠ No se pudo sincronizar'));
   }
 
-  // Mostrar stats
+  // Stats
   if (fs.existsSync(dbPath)) {
     try {
-      const output = execSync(`node "${grafoPath}" stats`, {
-        stdio: 'pipe',
-        cwd: projectPath
-      }).toString();
+      const output = execSync(`node "${grafo}" stats`, { stdio: 'pipe', cwd: projectPath }).toString();
       console.log(output);
     } catch (e) {
-      console.log(chalk.red('  Error al leer el grafo: ' + e.message));
+      console.log(chalk.red('  Error: ' + e.message));
     }
   } else {
-    console.log(chalk.gray('  Sin datos aún — el grafo se llena a medida que usas aa:\n'));
-    console.log(chalk.gray('  Tip: después de cada tarea con aa:, el sistema actualiza el grafo solo.\n'));
+    console.log(chalk.gray('  Sin datos aún — usa aa: para empezar\n'));
   }
 
-  // Mostrar config del proyecto
-  const configPath = path.join(projectPath, '.agentic', 'config.md');
-  if (fs.existsSync(configPath)) {
-    const config = fs.readFileSync(configPath, 'utf8');
-    const nombre = (config.match(/Nombre: (.+)/) || [])[1] || '—';
-    const configurado = config.includes('CONFIGURADO: SI') ? chalk.green('✓ Configurado') : chalk.yellow('⚠ Sin configurar');
-
-    console.log(chalk.bold('  Proyecto: ') + nombre);
-    console.log(chalk.bold('  Estado:   ') + configurado);
-    console.log('');
-  }
+  // Métricas si hay ciclos
+  try {
+    const m = JSON.parse(execSync(`node "${grafo}" metricas`, { stdio: 'pipe', cwd: projectPath }).toString());
+    if (m.total > 0) {
+      console.log(chalk.bold('  Métricas del agente:'));
+      console.log(`  Goal Attainment: ${chalk.green(m.goal_attainment+'%')} | Autonomy: ${chalk.cyan(m.autonomy_ratio+'%')} | Handoff: ${chalk.green(m.handoff_integrity+'%')}`);
+      console.log(`  Patrones aplicados: ${m.patrones_aplicados} | Errores evitados: ${m.errores_evitados}\n`);
+    }
+  } catch(e) {}
 }
 
 module.exports = { graph };