agy-insights 0.3.0 → 0.7.0

package/lib/report.js

@@ -1,9 +1,15 @@
 // Renders the analysis as a self-contained HTML page (opened in the browser) or as plain text.
-// The page is static: its only interaction is copying text, so it cannot change anything on disk.
+// The page is static: its only interactions are switching the period, the chart tooltip and copying text,
+// so it cannot change anything on disk.
+
+const { t, lang, num, date, kindLabel, effortLabel } = require('./i18n');
+const { dayKey } = require('./history');
 
 const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
-const fmt = (n) => Math.round(n).toLocaleString('es-ES');
+const fmt = num;
 const pct = (a, b) => (b ? `${Math.round((100 * a) / b)}%` : '–');
+// "Period: from 3 Oct 2026 to 29 Oct 2026 (filter: active since 1 Oct 2026)", or '' with no conversations.
+const periodLine = (r) => (r.period ? t.report.periodLine(t.report.period(date(r.period.from), date(r.period.to)), r.since && t.report.since(date(r.since))) : '');
 const label = (x) => (x.project ? `${x.project} › ${x.rel}` : x.abs || x.key);
 
 // Real usage, from agy's transcripts: what counts against the quota, unlike the size estimate.
@@ -14,19 +20,19 @@ const withCache = (u) => u.input + u.cache + u.output;
 
 function fixBlock(f) {
   return `<div class="fix${f.applied ? ' done' : ''}">
-    <div class="fix-head"><b>${esc(f.title)}</b>${f.applied ? '<span class="pill">ya aplicado</span>' : ''}</div>
-    <p class="where">En <code>${esc(f.file)}</code>, ${esc(f.where)}:</p>
-    <div class="code"><button class="copy" type="button">Copiar</button><pre>${esc(f.text)}</pre></div>
+    <div class="fix-head"><b>${esc(f.title)}</b>${f.applied ? `<span class="pill">${t.report.applied}</span>` : ''}</div>
+    <p class="where">${t.report.in} <code>${esc(f.file)}</code>, ${esc(f.where)}:</p>
+    <div class="code"><button class="copy" type="button">${t.report.copy}</button><pre>${esc(f.text)}</pre></div>
     <p class="hint">${esc(f.note)}</p>
   </div>`;
 }
 
 function item(it) {
   const extra = it.fixes.length
-    ? `<details><summary>Cómo excluirlo</summary>${it.fixes.map(fixBlock).join('')}</details>`
+    ? `<details><summary>${t.report.howToExclude}</summary>${it.fixes.map(fixBlock).join('')}</details>`
     : it.example
-      ? `<details><summary>Regla de ejemplo para AGENTS.md</summary><div class="fix"><div class="code"><button class="copy" type="button">Copiar</button><pre>${esc(it.example)}</pre></div>
-         <p class="hint">Ponla en el AGENTS.md del proyecto solo si te pasa a menudo: las reglas se envían en cada petición.</p></div></details>`
+      ? `<details><summary>${t.report.exampleRule}</summary><div class="fix"><div class="code"><button class="copy" type="button">${t.report.copy}</button><pre>${esc(it.example)}</pre></div>
+         <p class="hint">${t.report.exampleHint}</p></div></details>`
       : '';
   return `<li><div class="row"><div class="what"><span class="label">${esc(it.label)}</span><span class="detail">${esc(it.detail)}</span></div>
     <span class="num">${it.tokens ? `~${fmt(it.tokens)}` : ''}</span></div>${extra}</li>`;
@@ -43,7 +49,7 @@ function finding(f, total) {
 function table(title, rows, total, name = label) {
   if (!rows.length) return '';
   const max = Math.max(...rows.map((r) => r.tokens), 1);
-  return `<h3>${esc(title)}</h3><div class="scroll"><table><thead><tr><th>Qué</th><th class="num">~tokens</th><th class="num">%</th><th class="num">Veces</th><th class="num">Sesiones</th></tr></thead><tbody>
+  return `<h3>${esc(title)}</h3><div class="scroll"><table><thead><tr>${t.report.cols.map((c, i) => `<th${i ? ' class="num"' : ''}>${c}</th>`).join('')}</tr></thead><tbody>
   ${rows.slice(0, 15).map((r) => `<tr><td><div class="bar" style="--w:${((100 * r.tokens) / max).toFixed(1)}%"></div><span>${esc(name(r))}</span></td>
     <td class="num">${fmt(r.tokens)}</td><td class="num">${pct(r.tokens, total)}</td><td class="num">${r.calls}</td><td class="num">${r.convs || ''}</td></tr>`).join('')}
   </tbody></table></div>`;
@@ -53,55 +59,176 @@ function sessionsTable(r) {
   const rows = r.sessions.filter((s) => s.usage).slice(0, 15);
   if (!rows.length) return '';
   const max = Math.max(...rows.map((s) => billed(s.usage)), 1);
-  return `<h3>Sesiones (consumo real)</h3><div class="scroll"><table><thead><tr><th>Conversación</th><th class="num">Tokens</th><th class="num">%</th><th class="num">Con caché</th><th class="num">Llamadas</th><th class="num">Errores</th></tr></thead><tbody>
-  ${rows.map((s) => `<tr><td><div class="bar" style="--w:${((100 * billed(s.usage)) / max).toFixed(1)}%"></div><span>${esc(s.id.slice(0, 8))}</span></td>
+  return `<h3>${t.report.sessionsTitle}</h3><div class="scroll"><table><thead><tr>${t.report.sessionCols.map((c, i) => `<th${i > 1 ? ' class="num"' : ''}>${c}</th>`).join('')}</tr></thead><tbody>
+  ${rows.map((s) => `<tr><td><div class="bar" style="--w:${((100 * billed(s.usage)) / max).toFixed(1)}%"></div><span>${esc(s.id.slice(0, 8))}</span></td><td>${esc(sessionModel(s))}</td>
     <td class="num">${fmt(billed(s.usage))}</td><td class="num">${pct(billed(s.usage), billed(r.usage))}</td><td class="num">${fmt(withCache(s.usage))}</td>
     <td class="num">${s.usage.calls}</td><td class="num">${s.usage.errors || ''}</td></tr>`).join('')}
   </tbody></table></div>`;
 }
 
-function html(r, found, { scope }) {
+// "Gemini 3.8 Flash · High", or "Gemini 3.8 Flash · High +1 more" when the session used several.
+const modelName = (m) => (m.model || t.report.unknownModel);
+const sessionModel = (s) => (s.model ? `${modelName(s.model)} · ${effortLabel(s.model.effort)}${s.models > 1 ? t.report.otherModels(s.models - 1) : ''}` : '');
+
+// Calls and real tokens per model and effort level.
+function modelsTable(r) {
+  const rows = r.models.filter((m) => m.model || m.calls);
+  if (!rows.length || (rows.length === 1 && !rows[0].model)) return '';
+  const total = rows.reduce((s, m) => s + m.input + m.output, 0);
+  const max = Math.max(...rows.map((m) => m.input + m.output), 1);
+  return `<section class="models"><h2>${t.report.modelsTitle}</h2><p class="hint">${t.report.modelsHint}</p>
+    <div class="scroll"><table><thead><tr>${t.report.modelCols.map((c, i) => `<th${i > 1 ? ' class="num"' : ''}>${c}</th>`).join('')}</tr></thead><tbody>
+    ${rows.map((m) => { const tok = m.input + m.output; return `<tr><td><div class="bar" style="--w:${((100 * tok) / max).toFixed(1)}%"></div><span>${esc(modelName(m))}</span></td>
+      <td>${esc(effortLabel(m.effort))}</td><td class="num">${fmt(m.calls)}</td><td class="num">${m.known ? fmt(tok) : '–'}</td><td class="num">${m.known ? pct(tok, total) : '–'}</td>
+      <td class="num">${m.known ? fmt(tok / m.known) : '–'}</td><td class="num">${m.known ? fmt(tok + m.cache) : '–'}</td><td class="num">${m.convs}</td></tr>`; }).join('')}
+    </tbody></table></div></section>`;
+}
+
+// --- Usage chart ---
+
+const DAY = 24 * 60 * 60 * 1000;
+const parseDay = (k) => { const [y, m, d] = k.split('-').map(Number); return new Date(y, m - 1, d); };
+const shortDate = (d, year) => d.toLocaleDateString(t.locale, { day: 'numeric', month: 'short', ...(year ? { year: 'numeric' } : {}) });
+const compact = (n) => new Intl.NumberFormat(t.locale, { notation: 'compact', maximumFractionDigits: 1 }).format(n);
+// 1, 2, 2.5, 5 × 10^k: a round top for the y axis.
+const niceMax = (v) => { const p = 10 ** Math.floor(Math.log10(v || 1)); return [1, 2, 2.5, 5, 10].map((m) => m * p).find((x) => x >= v); };
+
+// Real usage per day (per week past ~4 months), continuous: days without calls are zero-height columns.
+function buckets(r) {
+  if (!r.daily.length) return null;
+  const first = r.since ? parseDay(dayKey(r.since)) : parseDay(r.daily[0].day);
+  const last = r.since ? parseDay(dayKey(Date.now())) : parseDay(r.daily[r.daily.length - 1].day);
+  const weekly = (last - first) / DAY > 120;
+  const startOf = (d) => (weekly ? new Date(d.getFullYear(), d.getMonth(), d.getDate() - ((d.getDay() + 6) % 7)) : d);
+  const byKey = new Map();
+  for (let d = startOf(first); d <= last; d = new Date(d.getFullYear(), d.getMonth(), d.getDate() + (weekly ? 7 : 1))) {
+    byKey.set(dayKey(d.getTime()), { date: d, billed: 0, cache: 0, calls: 0 });
+  }
+  for (const x of r.daily) {
+    const b = byKey.get(dayKey(startOf(parseDay(x.day)).getTime()));
+    if (!b) continue;
+    b.billed += x.input + x.output;
+    b.cache += x.cache;
+    b.calls += x.calls;
+  }
+  return { weekly, rows: [...byKey.values()] };
+}
+
+function chart(r) {
+  const b = buckets(r);
+  if (!b) return '';
+  const W = 900, H = 240, m = { l: 56, r: 8, t: 12, b: 28 };
+  const pw = W - m.l - m.r, ph = H - m.t - m.b;
+  const top = niceMax(Math.max(...b.rows.map((x) => x.billed)));
+  const band = pw / b.rows.length;
+  const bw = Math.max(1, Math.min(24, band - 2));
+  const y = (v) => m.t + ph - (v / top) * ph;
+  const when = (x) => (b.weekly ? t.report.weekOf(shortDate(x.date, true)) : shortDate(x.date, true));
+
+  const grid = [0, top / 2, top].map((v) => `<line x1="${m.l}" x2="${W - m.r}" y1="${y(v)}" y2="${y(v)}" class="grid"/>
+    <text x="${m.l - 8}" y="${y(v) + 4}" text-anchor="end" class="axis">${esc(compact(v))}</text>`).join('');
+  // Rounded data end (4px), square at the baseline.
+  const bars = b.rows.map((x, i) => {
+    const h = (x.billed / top) * ph;
+    if (h <= 0) return '';
+    const x0 = m.l + i * band + (band - bw) / 2, y0 = m.t + ph - h, rr = Math.min(4, h, bw / 2);
+    return `<path class="col" d="M${x0},${m.t + ph}V${y0 + rr}Q${x0},${y0} ${x0 + rr},${y0}H${x0 + bw - rr}Q${x0 + bw},${y0} ${x0 + bw},${y0 + rr}V${m.t + ph}Z"/>`;
+  }).join('');
+  // Hit targets: the whole band, so a 2px column is as easy to hover as a 24px one.
+  const hits = b.rows.map((x, i) => `<rect class="hit" x="${m.l + i * band}" y="${m.t}" width="${band}" height="${ph}"
+    data-when="${esc(when(x))}" data-v="${esc(fmt(x.billed))}" data-c="${esc(fmt(x.billed + x.cache))}" data-n="${esc(t.report.chartCalls(x.calls))}"/>`).join('');
+  const every = Math.max(1, Math.ceil(b.rows.length / 6));
+  // A date every few columns, plus the last one when it isn't crowded by the previous label.
+  const last = b.rows.length - 1;
+  const ticks = b.rows.map((x, i) => (i % every === 0 || (i === last && last % every >= every / 2)) && `<text x="${i === 0 && band < 40 ? m.l : i === last && band < 40 ? W - m.r : m.l + i * band + band / 2}" y="${H - 8}" text-anchor="${i === 0 && band < 40 ? 'start' : i === last && band < 40 ? 'end' : 'middle'}" class="axis">${esc(shortDate(x.date))}</text>`).filter(Boolean).join('');
+
+  const rows = b.rows.filter((x) => x.calls);
+  return `<section class="chart">
+    <h2>${b.weekly ? t.report.chartTitleWeek : t.report.chartTitleDay}</h2>
+    <p class="hint">${t.report.chartHint}</p>
+    <div class="plot"><svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${esc(b.weekly ? t.report.chartTitleWeek : t.report.chartTitleDay)}">${grid}${bars}${ticks}${hits}</svg></div>
+    <details><summary>${t.report.chartTable}</summary><div class="scroll"><table><thead><tr>${(b.weekly ? t.report.chartColsWeek : t.report.chartCols).map((c, i) => `<th${i ? ' class="num"' : ''}>${c}</th>`).join('')}</tr></thead><tbody>
+      ${rows.map((x) => `<tr><td>${esc(shortDate(x.date, true))}</td><td class="num">${fmt(x.billed)}</td><td class="num">${fmt(x.billed + x.cache)}</td><td class="num">${x.calls}</td></tr>`).join('')}
+    </tbody></table></div></details>
+  </section>`;
+}
+
+// --- Page ---
+
+function body(r, found, scope) {
   const top5 = r.sessions.slice(0, 5).reduce((s, x) => s + x.tokens, 0);
   const u = r.usage;
-  const body = !r.conversations
-    ? `<p>No hay conversaciones${scope ? ` de <code>${esc(scope)}</code>` : ''} en <code>${esc(r.dir)}</code>.</p>`
-    : `<div class="tiles">
-        ${u.conversations ? `<div><b>${fmt(billed(u))}</b><span>tokens reales (entrada + salida)</span></div>
-        <div><b>${fmt(withCache(u))}</b><span>contando la caché · ${u.calls} llamadas</span></div>` : ''}
-        <div><b>${fmt(r.tokens)}</b><span>~tokens en contexto</span></div>
-        <div><b>${pct(top5, r.tokens)}</b><span>en las 5 sesiones más grandes</span></div>
-        <div><b>${r.reads}</b><span>lecturas de ficheros</span></div>
-        <div><b>${pct(r.rereads, r.reads)}</b><span>relecturas del mismo trozo</span></div>
-      </div>
-      <h2>Qué está pasando</h2>
-      <p class="hint">Esta página no cambia nada. Cada propuesta te dice en qué fichero va y qué pegar; decides tú.</p>
-      ${found.length ? found.map((f) => finding(f, r.tokens)).join('') : '<p>No se ha detectado contexto repetido ni innecesario.</p>'}
-      <details class="detail-all"><summary><h2>Detalle</h2></summary>
-        ${sessionsTable(r)}
-        ${table('Por proyecto', r.projects, r.tokens, (x) => x.project || 'fuera de un repositorio git')}
-        ${table('Por tipo de fichero', r.kinds, r.tokens, (x) => x.key)}
-        ${table('Por carpeta', r.folders, r.tokens)}
-        ${table('Ficheros', r.files, r.tokens)}
-        ${table('Herramientas', r.tools, r.tokens, (x) => x.key)}
-        ${table('Comandos', r.commands, r.tokens, (x) => x.key)}
-      </details>`;
-
-  return `<!doctype html><html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+  const meta = `<p class="meta">${t.report.convs(r.conversations)}${r.period ? ` · ${esc(periodLine(r))}` : ''}</p>`;
+  if (!r.conversations) {
+    return `${meta}<p>${t.report.noConversations(scope && esc(scope), esc(r.dir))}${r.olderSkipped ? ` ${esc(t.report.olderSkipped(r.olderSkipped))}.` : ''}</p>`;
+  }
+  return `${meta}<div class="tiles">
+      ${u.conversations ? `<div><b>${fmt(billed(u))}</b><span>${t.report.tileReal}</span></div>
+      <div><b>${fmt(withCache(u))}</b><span>${t.report.tileCache(u.calls)}</span></div>` : ''}
+      <div><b>${fmt(r.tokens)}</b><span>${t.report.tileContext}</span></div>
+      <div><b>${pct(top5, r.tokens)}</b><span>${t.report.tileTop5}</span></div>
+      <div><b>${r.reads}</b><span>${t.report.tileReads}</span></div>
+      <div><b>${pct(r.rereads, r.reads)}</b><span>${t.report.tileRereads}</span></div>
+    </div>
+    ${chart(r)}
+    ${modelsTable(r)}
+    <h2>${t.report.happening}</h2>
+    <p class="hint">${t.report.happeningHint}</p>
+    ${found.length ? found.map((f) => finding(f, r.tokens)).join('') : `<p>${t.report.nothing}</p>`}
+    <details class="detail-all"><summary><h2>${t.report.details}</h2></summary>
+      ${sessionsTable(r)}
+      ${table(t.report.byProject, r.projects, r.tokens, (x) => x.project || t.report.outsideGit)}
+      ${table(t.report.byKind, r.kinds, r.tokens, (x) => kindLabel(x.key))}
+      ${table(t.report.byFolder, r.folders, r.tokens)}
+      ${table(t.report.files, r.files, r.tokens)}
+      ${table(t.report.tools, r.tools, r.tokens, (x) => x.key)}
+      ${table(t.report.commands, r.commands, r.tokens, (x) => x.key)}
+    </details>`;
+}
+
+/**
+ * One report per period, switched in the browser by a row of presets. Each period is analyzed on its own,
+ * so every number, finding and table below the filter agrees with it.
+ * @param {{ key: string, label: string, r: object, found: object[] }[]} views the first one shows by default
+ */
+function htmlViews(views, { scope }) {
+  const u = views[0].r.usage;
+  const filter = views.length > 1
+    ? `<div class="filter" role="group" aria-label="${esc(t.report.filterLabel)}"><span>${t.report.filterLabel}</span>
+      ${views.map((v, i) => `<button type="button" data-view="${v.key}" aria-pressed="${i === 0}">${esc(v.label)}</button>`).join('')}</div>`
+    : '';
+  const sections = views.map((v, i) => `<div class="view" data-view="${v.key}"${i ? ' hidden' : ''}>${body(v.r, v.found, scope)}</div>`).join('');
+
+  return `<!doctype html><html lang="${lang()}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
 <title>agy-insights</title>
 <style>
   :root { --bg: #f7f8f7; --surface: #fff; --fg: #1d2421; --muted: #5d6963; --line: #dde3df; --accent: #1f7a5a; --accent-soft: #e3f1ea;
-    --warn: #b06a00; --code: #eef1ef; --bar: #1f7a5a; color-scheme: light; }
+    --warn: #b06a00; --code: #eef1ef; --bar: #1f7a5a; --series: #13805a; color-scheme: light; }
   @media (prefers-color-scheme: dark) { :root { --bg: #141917; --surface: #1b211e; --fg: #e3e9e5; --muted: #9aa8a0; --line: #2c3530;
-    --accent: #5cc79c; --accent-soft: #1d3329; --warn: #e2a64a; --code: #222a26; --bar: #5cc79c; color-scheme: dark; } }
+    --accent: #5cc79c; --accent-soft: #1d3329; --warn: #e2a64a; --code: #222a26; --bar: #5cc79c; --series: #33a376; color-scheme: dark; } }
   body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
   main { max-width: 980px; margin: 0 auto; padding: 32px 16px 48px; }
   h1 { font-size: 26px; margin: 0 0 4px; } h2 { font-size: 20px; margin: 32px 0 6px; display: inline-block; } h3 { font-size: 16px; margin: 0 0 6px; }
   .meta, .hint, .detail, .tok, .where { color: var(--muted); } .tok { font-weight: normal; font-size: 14px; }
   code, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
   code { background: var(--code); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
-  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 20px 0; }
+  .filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 20px 0 4px; }
+  .filter span { color: var(--muted); font-size: 14px; margin-right: 4px; }
+  .filter button { font: 14px system-ui, sans-serif; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
+  .filter button:hover { background: var(--accent-soft); }
+  .filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
+  .filter button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 20px; }
   .tiles div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
   .tiles b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; } .tiles span { color: var(--muted); font-size: 14px; }
+  .chart h2 { margin-top: 8px; } .models .hint { margin-top: 0; } .chart .hint { margin-top: 0; }
+  .plot { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 8px 0; }
+  .plot svg { display: block; width: 100%; height: auto; }
+  .grid { stroke: var(--line); stroke-width: 1; } .axis { fill: var(--muted); font: 12px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
+  .col { fill: var(--series); } .hit { fill: transparent; cursor: default; } .hit:hover { fill: var(--fg); fill-opacity: .05; }
+  .tip { position: fixed; pointer-events: none; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 6px;
+    padding: 6px 10px; font-size: 13px; box-shadow: 0 2px 8px rgb(0 0 0 / .12); z-index: 10; }
+  .tip b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; } .tip span { display: block; color: var(--muted); }
   .finding { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
   .finding.warn { border-left-color: var(--warn); } .finding p { margin: 4px 0; }
   .items { list-style: none; margin: 10px 0 0; padding: 0; }
@@ -125,59 +252,97 @@ function html(r, found, { scope }) {
   .detail-all > summary { color: var(--fg); }
   footer { margin-top: 32px; font-size: 13px; color: var(--muted); }
 </style></head><body><main>
-  <h1>Uso de contexto en Antigravity</h1>
-  <p class="meta">${scope ? `Proyecto <code>${esc(scope)}</code>` : 'Todo el historial'} · ${r.conversations} conversaciones · generado ${esc(new Date().toLocaleString('es-ES'))}</p>
-  ${body}
-  <footer>Tokens reales: los que Antigravity anota en el registro de cada conversación (incluidos subagentes)${u.conversations < r.conversations ? `; ${r.conversations - u.conversations} conversaciones no tienen registro y no cuentan` : ''}.
-  No se sabe si la cuota cuenta la caché igual que la entrada nueva: por eso se muestran las dos cifras.
-  ~tokens = tamaño guardado de cada paso / 4: sirve para comparar ficheros y carpetas entre sí.
-  El historial se ha leído desde una copia y no se ha modificado. Esta página contiene rutas de tus proyectos: no la compartas sin revisarla.</footer>
+  <h1>${t.report.title}</h1>
+  <p class="meta">${scope ? `${t.report.project} <code>${esc(scope)}</code> · ` : views[0].r.since ? '' : `${t.report.wholeHistory} · `}${esc(t.report.generated(new Date().toLocaleString(t.locale)))}</p>
+  ${filter}
+  ${sections}
+  <footer>${esc(t.report.footerReal(views[0].r.conversations - u.conversations))}
+  ${esc(t.report.footerCache)}
+  ${esc(t.report.footerEstimate)}
+  ${esc(t.report.footerPrivacy)}</footer>
 </main>
+<div class="tip" hidden><b></b><span></span><span></span></div>
 <script>
   document.addEventListener('click', (e) => {
+    const v = e.target.closest('.filter button');
+    if (v) {
+      for (const b of document.querySelectorAll('.filter button')) b.setAttribute('aria-pressed', String(b === v));
+      for (const s of document.querySelectorAll('.view')) s.hidden = s.dataset.view !== v.dataset.view;
+      return;
+    }
     const b = e.target.closest('.copy'); if (!b) return;
     const pre = b.parentElement.querySelector('pre');
-    const ok = () => { b.textContent = 'Copiado'; setTimeout(() => (b.textContent = 'Copiar'), 1500); };
+    const ok = () => { b.textContent = ${JSON.stringify(t.report.copied)}; setTimeout(() => (b.textContent = ${JSON.stringify(t.report.copy)}), 1500); };
     (navigator.clipboard ? navigator.clipboard.writeText(pre.textContent) : Promise.reject()).then(ok).catch(() => {
       const range = document.createRange(); range.selectNodeContents(pre);
       const sel = getSelection(); sel.removeAllRanges(); sel.addRange(range);
     });
   });
+  // Chart tooltip: values are filled with textContent, never as HTML.
+  const tip = document.querySelector('.tip');
+  document.addEventListener('pointermove', (e) => {
+    const h = e.target.closest && e.target.closest('.hit');
+    if (!h) { tip.hidden = true; return; }
+    const [v, when, rest] = tip.children;
+    v.textContent = h.dataset.v + ' tokens';
+    when.textContent = h.dataset.when;
+    rest.textContent = h.dataset.n + ' · ' + h.dataset.c + ' ' + ${JSON.stringify(t.report.withCacheShort)};
+    tip.hidden = false;
+    const x = Math.min(e.clientX + 14, innerWidth - tip.offsetWidth - 8);
+    tip.style.left = x + 'px';
+    tip.style.top = (e.clientY - tip.offsetHeight - 10) + 'px';
+  });
 </script></body></html>`;
 }
 
+function html(r, found, opts) {
+  return htmlViews([{ key: 'all', label: '', r, found }], opts);
+}
+
+
 // --- Text ---
 
 function text(r, found, { scope, paths }) {
   const top5 = r.sessions.slice(0, 5).reduce((s, x) => s + x.tokens, 0);
-  const out = [`\nHistorial: ${r.dir} (${r.backend})${scope ? ` · proyecto ${scope}` : ''}`,
-    `${r.conversations} conversaciones, ${r.steps} pasos, ~${fmt(r.tokens)} tokens en contexto (estimado)`];
+  const out = [`\n${t.report.history}: ${r.dir} (${r.backend})${scope ? ` · ${t.report.projectLower} ${scope}` : ''}`,
+    t.report.summary(r.conversations, r.steps, fmt(r.tokens))];
+  if (r.period) out.push(periodLine(r));
+  if (r.olderSkipped) out.push(`(${t.report.olderSkipped(r.olderSkipped)})`);
   if (!r.conversations) return out.join('\n') + '\n';
   const u = r.usage;
   if (u.conversations) {
-    out.push(`Consumo real: ${fmt(billed(u))} tokens (entrada ${fmt(u.input)} + salida ${fmt(u.output)}), ${fmt(withCache(u))} contando la caché, en ${u.calls} llamadas al modelo`
-      + (u.conversations < r.conversations ? ` (${r.conversations - u.conversations} conversaciones sin registro)` : ''));
+    out.push(t.report.realUsage(fmt(billed(u)), fmt(u.input), fmt(u.output), fmt(withCache(u)), u.calls)
+      + (u.conversations < r.conversations ? t.report.noLog(r.conversations - u.conversations) : ''));
     const top = r.sessions.filter((s) => s.usage).slice(0, 5);
-    out.push(`  Las ${top.length} sesiones que más gastan:`);
+    out.push(t.report.topSessions(top.length));
     for (const s of top) {
-      out.push(`    ${fmt(billed(s.usage)).padStart(10)}  ${pct(billed(s.usage), billed(u)).padStart(4)}  conversación ${s.id.slice(0, 8)}  ${s.usage.calls} llamadas${s.usage.errors ? `, ${s.usage.errors} errores` : ''}, ${fmt(withCache(s.usage))} con caché`);
+      out.push(`    ${fmt(billed(s.usage)).padStart(10)}  ${pct(billed(s.usage), billed(u)).padStart(4)}  ${t.report.sessionLine(s.id.slice(0, 8), s.usage.calls, s.usage.errors, fmt(withCache(s.usage)), sessionModel(s))}`);
+    }
+  }
+  out.push(t.report.top5(pct(top5, r.tokens), r.reads, r.rereads, pct(r.rereads, r.reads)));
+  const models = r.models.filter((m) => m.model);
+  if (models.length) {
+    const total = r.models.reduce((s, m) => s + m.input + m.output, 0);
+    out.push('', t.report.modelsText);
+    for (const m of models) {
+      const tok = m.input + m.output;
+      out.push(`  ${t.report.modelLine(m.model, effortLabel(m.effort), m.calls, fmt(tok), pct(tok, total), m.known ? fmt(tok / m.known) : '–')}`);
     }
   }
-  out.push(`Las 5 sesiones más grandes suman el ${pct(top5, r.tokens)}. Lecturas: ${r.reads}, relecturas ${r.rereads} (${pct(r.rereads, r.reads)})`);
   for (const f of found) {
     out.push('', `${f.level === 'warn' ? '⚠' : '•'} ${f.title}${f.tokens ? `  (~${fmt(f.tokens)} tokens, ${pct(f.tokens, r.tokens)})` : ''}`,
       `  ${f.why}`, `  → ${f.suggestion}`);
     // Only file and folder labels are paths; commands and session ids are always shown.
     const hasPaths = ['rereads', 'non-source', 'cross-session'].includes(f.id);
     for (const it of f.items) {
-      out.push(`    ${(it.tokens ? `~${fmt(it.tokens)}` : '').padStart(10)}  ${paths || !hasPaths ? it.label : '(ruta oculta, usa --paths)'}  ${it.detail || ''}`);
+      out.push(`    ${(it.tokens ? `~${fmt(it.tokens)}` : '').padStart(10)}  ${paths || !hasPaths ? it.label : t.report.pathHidden}  ${it.detail || ''}`);
       if (paths) for (const x of it.fixes.filter((x) => !x.applied)) out.push(`${' '.repeat(16)}${x.title}: ${x.text.split('\n').join(' ')}  →  ${x.file}`);
     }
   }
-  out.push('', 'Por tipo de fichero:');
-  for (const k of r.kinds.slice(0, 10)) out.push(`  ${`~${fmt(k.tokens)}`.padStart(10)}  ${String(k.calls).padStart(5)}×  ${k.key}`);
-  out.push('', 'No se ha modificado nada. Consumo real = registro de agy; ~tokens = tamaño del paso / 4 (estimado).', '');
+  out.push('', t.report.byKindText);
+  for (const k of r.kinds.slice(0, 10)) out.push(`  ${`~${fmt(k.tokens)}`.padStart(10)}  ${String(k.calls).padStart(5)}×  ${kindLabel(k.key)}`);
+  out.push('', t.report.textFooter, '');
   return out.join('\n');
 }
 
-module.exports = { html, text };
+module.exports = { html, htmlViews, text };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "agy-insights",
-  "version": "0.3.0",
-  "description": "Muestra qué contexto se envía a Antigravity de forma repetida o innecesaria, a partir del historial local de Antigravity CLI.",
+  "version": "0.7.0",
+  "description": "Measures Antigravity CLI token usage and shows which context is sent repeatedly or needlessly, in English or Spanish. Run: npx agy-insights@latest",
   "license": "MIT",
   "keywords": [
     "antigravity",
@@ -9,7 +9,10 @@
     "gemini",
     "tokens",
     "context",
-    "cli"
+    "cli",
+    "token-usage",
+    "optimization",
+    "i18n"
   ],
   "bin": {
     "agy-insights": "agy-insights.js"
@@ -19,7 +22,8 @@
     "lib/",
     "vendor/",
     "agy-insights.example.json",
-    "docs/"
+    "docs/",
+    "README.es.md"
   ],
   "engines": {
     "node": ">=20"

package/docs/como-funciona.md

@@ -1,88 +0,0 @@
-# Cómo funciona
-
-Documento para quien mantenga o amplíe agy-insights.
-
-## Principios
-
-Cualquier cambio tiene que respetarlos:
-
-1. **Solo lectura.** No se escribe en `~/.gemini` ni en los proyectos del dev. El historial se copia a una carpeta temporal antes de abrirlo, porque `agy` mantiene esas bases de datos abiertas. Lo único que se escribe es el informe.
-2. **El dev decide.** La herramienta propone texto para pegar; nunca lo aplica.
-3. **Solo mecanismos oficiales de Antigravity** para excluir: permisos (`read_file` en `permissions.deny`), `.antigravityignore` y reglas en `AGENTS.md`. Nada de hooks, plugins, `.gitignore` ni `.ignore`.
-4. **Fallar de forma visible.** Si el formato del historial cambia, el informe debe avisar en vez de mostrar datos falsos.
-5. **Sin dependencias que instalar.** Solo Node 20 o superior; SQLite va en `vendor/`.
-
-## Estructura
-
-```
-agy-insights.js       comando: opciones, configuración, escribe el informe y abre el navegador
-lib/history.js        lee el historial y agrega lecturas, comandos, proyectos y sesiones
-lib/findings.js       convierte el análisis en hallazgos (los 5 detectores)
-lib/fixes.js          construye el texto de cada exclusión; no escribe nada
-lib/report.js         informe HTML (estático, solo botones de copiar) y resumen de texto
-vendor/sql.js/        SQLite en WebAssembly (versión en VERSION, licencia MIT en LICENSE)
-test/fake-history.js  genera historiales falsos con el mismo formato que los reales
-test/*.test.js        tests (node --test)
-```
-
-## El historial de Antigravity CLI
-
-No está documentado; esto es lo que se ha observado en `agy` 1.4.x.
-
-- Una base de datos SQLite por conversación: `~/.gemini/antigravity-cli/conversations/<uuid>.db`, en modo WAL.
-- Tabla `steps`: una fila por paso. `step_payload` es un mensaje protobuf. Las llamadas a herramientas guardan el nombre (`view_file`, `run_command`, `grep_search`…) seguido de sus argumentos en JSON, por ejemplo `{"AbsolutePath":"C:\\dev\\...\\X.cs","StartLine":301,"EndLine":380}`, precedido por un id `call_NNN`.
-- Cada llamada ocupa dos pasos con el mismo id: el de la respuesta del modelo que la pide (`step_type` 15) y el del resultado (`step_type` 132), que repite nombre y argumentos y añade el contenido del fichero o la salida del comando. `lib/history.js` cuenta la llamada una vez por id y suma el tamaño de ambos pasos, que aproxima lo que entró en el contexto.
-- Tabla `gen_metadata`: configuración de cada llamada al modelo, incluido el nombre del modelo.
-- Junto al historial, `../brain/<id>/.system_generated/logs/transcript.jsonl`: una línea JSON por paso. Las de tipo `PLANNER_RESPONSE` son llamadas al modelo y traen `input_tokens`, `cache_read_tokens` y `output_tokens`; los pasos fallidos tienen `status: "ERROR"`. Los subagentes tienen su propia conversación y su propio transcript. `realUsage()` en `lib/history.js` suma esas cifras (solo lee el fichero). El total que imprime `agy -p --output-format json` no incluye los subagentes; este sí.
-
-`lib/history.js` no depende de un esquema protobuf. Recorre el mensaje, recoge todas las cadenas, y considera llamada a herramienta cualquier JSON precedido (a menos de 3 cadenas) por un nombre en `snake_case`. Así aguanta cambios menores de formato. Si hay más de 50 pasos y ninguna llamada reconocida, marca `formatUnrecognized` y el informe lo avisa.
-
-### SQLite
-
-- Con Node 22.13 o superior se usa `node:sqlite`, que lee también el fichero `-wal`.
-- Con versiones anteriores se usa `sql.js` desde `vendor/`. No lee el `-wal`, así que pueden faltar los últimos pasos de una conversación abierta.
-
-Para actualizar `sql.js`: copia `dist/sql-wasm.js`, `dist/sql-wasm.wasm` y `LICENSE` de la nueva versión del paquete npm y actualiza `VERSION`.
-
-### Proyectos
-
-El proyecto de cada fichero se detecta subiendo por su ruta hasta encontrar una carpeta con `.git`, si la ruta existe en la máquina. Con `--project` se usa esa carpeta directamente. Las rutas de Windows (`C:\...`) se normalizan a `/` internamente y se devuelven con `\` en las exclusiones, porque `agy` compara las rutas de los permisos literalmente.
-
-## Añadir un tipo de fichero
-
-En `lib/history.js`, función `kind()`. Si es un tipo que casi nunca hace falta leer, añádelo también a `NON_SOURCE`, y sus patrones de `.antigravityignore` a `KIND_PATTERNS` en `lib/findings.js`. Cada dev puede añadir tipos propios sin tocar el código con `customKinds` en su configuración.
-
-## Añadir un detector
-
-En `lib/findings.js`. Un hallazgo es `{ id, level: 'info' | 'warn', title, why, suggestion, tokens, items }`, y cada `item` es `{ label, tokens, detail, fixes }`. Las `fixes` se crean con `lib/fixes.js`. No propongas excluir código fuente: el agente lo necesita.
-
-Añade un caso en `test/fake-history.js` y un test.
-
-## Tests
-
-```sh
-npm test
-```
-
-Prueban el análisis con un historial falso, los cinco detectores, el formato de las reglas, que nunca se propone excluir código fuente, que el historial no cambia, la detección de proyectos por `.git`, el aviso de formato desconocido, el escapado del HTML y el comando completo. Se ejecutan en CI con Node 20 (sql.js) y Node 22 (node:sqlite).
-
-Para generar un historial de ejemplo y probar el informe a mano:
-
-```sh
-node test/fake-history.js test/tmp/history
-node agy-insights.js --dir test/tmp/history
-```
-
-## Paquete npm
-
-`package.json` define el comando (`bin`) y qué ficheros entran en el paquete (`files`: el comando, `lib/`, `vendor/`, `docs/` y el ejemplo de configuración; los tests no). Se publica en el registro público de npm como `agy-insights`. El paquete solo contiene la herramienta; los historiales que analiza se quedan en la máquina de cada usuario.
-
-- **Probar el paquete en local**: `npm pack` y después `npx --yes --package=./agy-insights-<versión>.tgz agy-insights --help`.
-- **Desde el repositorio**, sin publicar: `npx --yes github:migohe14/agy-insights`. Al no tener dependencias ni paso de build, npm lo instala directamente desde git.
-- **Publicar una versión**: `npm version <patch|minor|major>` (actualiza `package.json` y crea la etiqueta `v…`) y `git push --follow-tags`. El workflow `.github/workflows/publish.yml` pasa los tests y ejecuta `npm publish --provenance`. Necesita el secreto `NPM_TOKEN` en el repositorio de GitHub (un token de npm de tipo *Automation* o *Granular* con permiso de publicación).
-
-## Pendiente
-
-- Confirmar con `agy` que una regla `deny` de `read_file` impide la lectura.
-- Probar con historiales reales de varios devs (Windows y macOS).
-- Leer también el historial de la app y del IDE de Antigravity, si guardan el mismo formato.