@saulwade/swl-ses 1.0.0

package/scripts/vendor/claude-usage/dashboard.py

@@ -0,0 +1,795 @@
+"""
+dashboard.py - Local web dashboard served on localhost:8080.
+"""
+
+import json
+import sqlite3
+from http.server import HTTPServer, BaseHTTPRequestHandler
+from pathlib import Path
+from datetime import datetime
+
+DB_PATH = Path.home() / ".claude" / "usage.db"
+
+
+def _migrate_db(conn):
+    """Asegura que las columnas nuevas existan (idempotente)."""
+    turns_cols = {row[1] for row in conn.execute("PRAGMA table_info(turns)").fetchall()}
+    sessions_cols = {row[1] for row in conn.execute("PRAGMA table_info(sessions)").fetchall()}
+    changed = False
+    for col in ("agent_name", "skill_name"):
+        if col not in turns_cols:
+            conn.execute(f"ALTER TABLE turns ADD COLUMN {col} TEXT")
+            changed = True
+    if "session_name" not in sessions_cols:
+        conn.execute("ALTER TABLE sessions ADD COLUMN session_name TEXT")
+        changed = True
+    if changed:
+        conn.commit()
+
+
+def get_dashboard_data(db_path=DB_PATH):
+    if not db_path.exists():
+        return {"error": "Base de datos no encontrada. Ejecuta: python cli.py scan"}
+
+    conn = sqlite3.connect(db_path)
+    conn.row_factory = sqlite3.Row
+    _migrate_db(conn)
+
+    # ── All models (for filter UI) ────────────────────────────────────────────
+    model_rows = conn.execute("""
+        SELECT COALESCE(model, 'unknown') as model
+        FROM turns
+        GROUP BY model
+        ORDER BY SUM(input_tokens + output_tokens) DESC
+    """).fetchall()
+    all_models = [r["model"] for r in model_rows]
+
+    # ── Daily per-model, ALL history (client filters by range) ────────────────
+    daily_rows = conn.execute("""
+        SELECT
+            substr(timestamp, 1, 10)   as day,
+            COALESCE(model, 'unknown') as model,
+            SUM(input_tokens)          as input,
+            SUM(output_tokens)         as output,
+            SUM(cache_read_tokens)     as cache_read,
+            SUM(cache_creation_tokens) as cache_creation,
+            COUNT(*)                   as turns
+        FROM turns
+        GROUP BY day, model
+        ORDER BY day, model
+    """).fetchall()
+
+    daily_by_model = [{
+        "day":            r["day"],
+        "model":          r["model"],
+        "input":          r["input"] or 0,
+        "output":         r["output"] or 0,
+        "cache_read":     r["cache_read"] or 0,
+        "cache_creation": r["cache_creation"] or 0,
+        "turns":          r["turns"] or 0,
+    } for r in daily_rows]
+
+    # ── All sessions (client filters by range and model) ──────────────────────
+    session_rows = conn.execute("""
+        SELECT
+            session_id, project_name, first_timestamp, last_timestamp,
+            total_input_tokens, total_output_tokens,
+            total_cache_read, total_cache_creation, model, turn_count,
+            session_name
+        FROM sessions
+        ORDER BY last_timestamp DESC
+    """).fetchall()
+
+    sessions_all = []
+    for r in session_rows:
+        try:
+            t1 = datetime.fromisoformat(r["first_timestamp"].replace("Z", "+00:00"))
+            t2 = datetime.fromisoformat(r["last_timestamp"].replace("Z", "+00:00"))
+            duration_min = round((t2 - t1).total_seconds() / 60, 1)
+        except Exception:
+            duration_min = 0
+        sessions_all.append({
+            "session_id":    r["session_id"][:8],
+            "session_name":  r["session_name"] or "",
+            "project":       r["project_name"] or "unknown",
+            "last":          (r["last_timestamp"] or "")[:16].replace("T", " "),
+            "last_date":     (r["last_timestamp"] or "")[:10],
+            "duration_min":  duration_min,
+            "model":         r["model"] or "unknown",
+            "turns":         r["turn_count"] or 0,
+            "input":         r["total_input_tokens"] or 0,
+            "output":        r["total_output_tokens"] or 0,
+            "cache_read":    r["total_cache_read"] or 0,
+            "cache_creation": r["total_cache_creation"] or 0,
+        })
+
+    # ── Top agentes SWL (columna agent_name, añadida en v5.3.3) ─────────────────
+    try:
+        agent_rows = conn.execute("""
+            SELECT agent_name, COUNT(*) as calls,
+                   SUM(input_tokens) as input, SUM(output_tokens) as output
+            FROM turns
+            WHERE agent_name IS NOT NULL
+            GROUP BY agent_name
+            ORDER BY input + output DESC
+            LIMIT 15
+        """).fetchall()
+        top_agents = [{"name": r["agent_name"], "calls": r["calls"],
+                       "input": r["input"] or 0, "output": r["output"] or 0}
+                      for r in agent_rows]
+    except Exception:
+        top_agents = []
+
+    # ── Top skills SWL (columna skill_name, añadida en v5.3.3) ──────────────────
+    try:
+        skill_rows = conn.execute("""
+            SELECT skill_name, COUNT(*) as calls,
+                   SUM(input_tokens) as input, SUM(output_tokens) as output
+            FROM turns
+            WHERE skill_name IS NOT NULL
+            GROUP BY skill_name
+            ORDER BY input + output DESC
+            LIMIT 15
+        """).fetchall()
+        top_skills = [{"name": r["skill_name"], "calls": r["calls"],
+                       "input": r["input"] or 0, "output": r["output"] or 0}
+                      for r in skill_rows]
+    except Exception:
+        top_skills = []
+
+    conn.close()
+
+    return {
+        "all_models":     all_models,
+        "daily_by_model": daily_by_model,
+        "sessions_all":   sessions_all,
+        "top_agents":     top_agents,
+        "top_skills":     top_skills,
+        "generated_at":   datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+    }
+
+
+HTML_TEMPLATE = r"""<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Panel de uso — Claude Code</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<style>
+  :root {
+    --bg: #0f1117;
+    --card: #1a1d27;
+    --border: #2a2d3a;
+    --text: #e2e8f0;
+    --muted: #8892a4;
+    --accent: #d97757;
+    --blue: #4f8ef7;
+    --green: #4ade80;
+  }
+  * { 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; }
+
+  header { background: var(--card); border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
+  header h1 { font-size: 18px; font-weight: 600; color: var(--accent); }
+  header .meta { color: var(--muted); font-size: 12px; }
+
+  #filter-bar { background: var(--card); border-bottom: 1px solid var(--border); padding: 10px 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+  .filter-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
+  .filter-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
+  #model-checkboxes { display: flex; flex-wrap: wrap; gap: 6px; }
+  .model-cb-label { display: flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); cursor: pointer; font-size: 12px; color: var(--muted); transition: border-color 0.15s, color 0.15s, background 0.15s; user-select: none; }
+  .model-cb-label:hover { border-color: var(--accent); color: var(--text); }
+  .model-cb-label.checked { background: rgba(217,119,87,0.12); border-color: var(--accent); color: var(--text); }
+  .model-cb-label input { display: none; }
+  .filter-btn { padding: 3px 10px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
+  .filter-btn:hover { border-color: var(--accent); color: var(--text); }
+  .range-group { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex-shrink: 0; }
+  .range-btn { padding: 4px 13px; background: transparent; border: none; border-right: 1px solid var(--border); color: var(--muted); font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s; }
+  .range-btn:last-child { border-right: none; }
+  .range-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
+  .range-btn.active { background: rgba(217,119,87,0.15); color: var(--accent); font-weight: 600; }
+
+  .container { max-width: 1400px; margin: 0 auto; padding: 24px; }
+  .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
+  .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
+  .stat-card .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
+  .stat-card .value { font-size: 22px; font-weight: 700; }
+  .stat-card .sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
+
+  .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
+  .chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; }
+  .chart-card.wide { grid-column: 1 / -1; }
+  .chart-card h2 { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
+  .chart-wrap { position: relative; height: 240px; }
+  .chart-wrap.tall { height: 300px; }
+
+  table { width: 100%; border-collapse: collapse; }
+  th { text-align: left; padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); }
+  td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
+  tr:last-child td { border-bottom: none; }
+  tr:hover td { background: rgba(255,255,255,0.02); }
+  .model-tag { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; background: rgba(79,142,247,0.15); color: var(--blue); }
+  .cost { color: var(--green); font-family: monospace; }
+  .cost-na { color: var(--muted); font-family: monospace; font-size: 11px; }
+  .num { font-family: monospace; }
+  .muted { color: var(--muted); }
+  .section-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
+  .table-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 24px; overflow-x: auto; }
+
+  footer { border-top: 1px solid var(--border); padding: 20px 24px; margin-top: 8px; }
+  .footer-content { max-width: 1400px; margin: 0 auto; }
+  .footer-content p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 4px; }
+  .footer-content p:last-child { margin-bottom: 0; }
+  .footer-content a { color: var(--blue); text-decoration: none; }
+  .footer-content a:hover { text-decoration: underline; }
+
+  @media (max-width: 768px) { .charts-grid { grid-template-columns: 1fr; } .chart-card.wide { grid-column: 1; } }
+</style>
+</head>
+<body>
+<header>
+  <h1>Panel de uso — Claude Code</h1>
+  <div class="meta" id="meta">Cargando...</div>
+</header>
+
+<div id="filter-bar">
+  <div class="filter-label">Modelos</div>
+  <div id="model-checkboxes"></div>
+  <button class="filter-btn" onclick="selectAllModels()">Todos</button>
+  <button class="filter-btn" onclick="clearAllModels()">Ninguno</button>
+  <div class="filter-sep"></div>
+  <div class="filter-label">Período</div>
+  <div class="range-group">
+    <button class="range-btn" data-range="7d"  onclick="setRange('7d')">7d</button>
+    <button class="range-btn" data-range="30d" onclick="setRange('30d')">30d</button>
+    <button class="range-btn" data-range="90d" onclick="setRange('90d')">90d</button>
+    <button class="range-btn" data-range="all" onclick="setRange('all')">Todo</button>
+  </div>
+</div>
+
+<div class="container">
+  <div class="stats-row" id="stats-row"></div>
+  <div class="charts-grid">
+    <div class="chart-card wide">
+      <h2 id="daily-chart-title">Uso diario de tokens</h2>
+      <div class="chart-wrap tall"><canvas id="chart-daily"></canvas></div>
+    </div>
+    <div class="chart-card">
+      <h2>Por modelo</h2>
+      <div class="chart-wrap"><canvas id="chart-model"></canvas></div>
+    </div>
+    <div class="chart-card">
+      <h2>Top proyectos por tokens</h2>
+      <div class="chart-wrap"><canvas id="chart-project"></canvas></div>
+    </div>
+  </div>
+  <div class="table-card">
+    <div class="section-title">Sesiones recientes</div>
+    <table>
+      <thead><tr>
+        <th>Sesión</th><th>Nombre</th><th>Proyecto</th><th>Última actividad</th><th>Duración</th>
+        <th>Modelo</th><th>Turnos</th><th>Entrada</th><th>Salida</th><th>Costo est.</th>
+      </tr></thead>
+      <tbody id="sessions-body"></tbody>
+    </table>
+  </div>
+  <div class="table-card">
+    <div class="section-title">Costo por modelo</div>
+    <table>
+      <thead><tr>
+        <th>Modelo</th><th>Turnos</th><th>Entrada</th><th>Salida</th>
+        <th>Caché lectura</th><th>Caché creación</th><th>Costo est.</th>
+      </tr></thead>
+      <tbody id="model-cost-body"></tbody>
+    </table>
+  </div>
+  <div id="swl-section">
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px">
+      <div class="table-card" style="margin-bottom:0">
+        <div class="section-title">Top agentes SWL (histórico)</div>
+        <table>
+          <thead><tr><th>Agente</th><th>Llamadas</th><th>Tokens entrada</th><th>Tokens salida</th></tr></thead>
+          <tbody id="swl-agents-body"><tr><td colspan="4" class="muted" style="text-align:center;padding:16px">Cargando...</td></tr></tbody>
+        </table>
+      </div>
+      <div class="table-card" style="margin-bottom:0">
+        <div class="section-title">Top skills SWL (histórico)</div>
+        <table>
+          <thead><tr><th>Skill</th><th>Llamadas</th><th>Tokens entrada</th><th>Tokens salida</th></tr></thead>
+          <tbody id="swl-skills-body"><tr><td colspan="4" class="muted" style="text-align:center;padding:16px">Cargando...</td></tr></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<footer>
+  <div class="footer-content">
+    <p>Estimaciones de costo basadas en los precios de la API de Anthropic (<a href="https://claude.com/pricing#api" target="_blank">claude.com/pricing#api</a>) a abril de 2026. Solo los modelos con <em>opus</em>, <em>sonnet</em> o <em>haiku</em> en el nombre se incluyen en los cálculos de costo. Los costos reales para suscriptores Max/Pro difieren de los precios de la API.</p>
+    <p>
+      GitHub: <a href="https://github.com/phuryn/claude-usage" target="_blank">https://github.com/phuryn/claude-usage</a>
+      &nbsp;&middot;&nbsp;
+      Creado por: <a href="https://www.productcompass.pm" target="_blank">The Product Compass Newsletter</a>
+      &nbsp;&middot;&nbsp;
+      Licencia: MIT
+    </p>
+  </div>
+</footer>
+
+<script>
+// ── State ──────────────────────────────────────────────────────────────────
+let rawData = null;
+let selectedModels = new Set();
+let selectedRange = '30d';
+let charts = {};
+
+// ── Pricing (Anthropic API, April 2026) ────────────────────────────────────
+const PRICING = {
+  'claude-opus-4-6':   { input: 6.15,  output: 30.75, cache_write: 7.69, cache_read: 0.61 },
+  'claude-opus-4-5':   { input: 6.15,  output: 30.75, cache_write: 7.69, cache_read: 0.61 },
+  'claude-sonnet-4-6': { input: 3.69,  output: 18.45, cache_write: 4.61, cache_read: 0.37 },
+  'claude-sonnet-4-5': { input: 3.69,  output: 18.45, cache_write: 4.61, cache_read: 0.37 },
+  'claude-haiku-4-5':  { input: 1.23,  output:  6.15, cache_write: 1.54, cache_read: 0.12 },
+  'claude-haiku-4-6':  { input: 1.23,  output:  6.15, cache_write: 1.54, cache_read: 0.12 },
+};
+
+function isBillable(model) {
+  if (!model) return false;
+  const m = model.toLowerCase();
+  return m.includes('opus') || m.includes('sonnet') || m.includes('haiku');
+}
+
+function getPricing(model) {
+  if (!model) return null;
+  if (PRICING[model]) return PRICING[model];
+  for (const key of Object.keys(PRICING)) {
+    if (model.startsWith(key)) return PRICING[key];
+  }
+  const m = model.toLowerCase();
+  if (m.includes('opus'))   return PRICING['claude-opus-4-6'];
+  if (m.includes('sonnet')) return PRICING['claude-sonnet-4-6'];
+  if (m.includes('haiku'))  return PRICING['claude-haiku-4-5'];
+  return null;
+}
+
+function calcCost(model, inp, out, cacheRead, cacheCreation) {
+  if (!isBillable(model)) return 0;
+  const p = getPricing(model);
+  if (!p) return 0;
+  return (
+    inp           * p.input       / 1e6 +
+    out           * p.output      / 1e6 +
+    cacheRead     * p.cache_read  / 1e6 +
+    cacheCreation * p.cache_write / 1e6
+  );
+}
+
+// ── Formatting ─────────────────────────────────────────────────────────────
+function fmt(n) {
+  if (n >= 1e9) return (n/1e9).toFixed(2)+'B';
+  if (n >= 1e6) return (n/1e6).toFixed(2)+'M';
+  if (n >= 1e3) return (n/1e3).toFixed(1)+'K';
+  return n.toLocaleString();
+}
+function fmtCost(c)    { return '$' + c.toFixed(4); }
+function fmtCostBig(c) { return '$' + c.toFixed(2); }
+
+// ── Chart colors ───────────────────────────────────────────────────────────
+const TOKEN_COLORS = {
+  input:          'rgba(79,142,247,0.8)',
+  output:         'rgba(167,139,250,0.8)',
+  cache_read:     'rgba(74,222,128,0.6)',
+  cache_creation: 'rgba(251,191,36,0.6)',
+};
+const MODEL_COLORS = ['#d97757','#4f8ef7','#4ade80','#a78bfa','#fbbf24','#f472b6','#34d399','#60a5fa'];
+
+// ── Time range ─────────────────────────────────────────────────────────────
+const RANGE_LABELS = { '7d': 'Últimos 7 días', '30d': 'Últimos 30 días', '90d': 'Últimos 90 días', 'all': 'Todo el tiempo' };
+const RANGE_TICKS  = { '7d': 7, '30d': 15, '90d': 13, 'all': 12 };
+
+function getRangeCutoff(range) {
+  if (range === 'all') return null;
+  const days = range === '7d' ? 7 : range === '30d' ? 30 : 90;
+  const d = new Date();
+  d.setDate(d.getDate() - days);
+  return d.toISOString().slice(0, 10);
+}
+
+function readURLRange() {
+  const p = new URLSearchParams(window.location.search).get('range');
+  return ['7d', '30d', '90d', 'all'].includes(p) ? p : '30d';
+}
+
+function setRange(range) {
+  selectedRange = range;
+  document.querySelectorAll('.range-btn').forEach(btn =>
+    btn.classList.toggle('active', btn.dataset.range === range)
+  );
+  updateURL();
+  applyFilter();
+}
+
+// ── Model filter ───────────────────────────────────────────────────────────
+function modelPriority(m) {
+  const ml = m.toLowerCase();
+  if (ml.includes('opus'))   return 0;
+  if (ml.includes('sonnet')) return 1;
+  if (ml.includes('haiku'))  return 2;
+  return 3;
+}
+
+function readURLModels(allModels) {
+  const param = new URLSearchParams(window.location.search).get('models');
+  if (!param) return new Set(allModels.filter(m => isBillable(m)));
+  const fromURL = new Set(param.split(',').map(s => s.trim()).filter(Boolean));
+  return new Set(allModels.filter(m => fromURL.has(m)));
+}
+
+function isDefaultModelSelection(allModels) {
+  const billable = allModels.filter(m => isBillable(m));
+  if (selectedModels.size !== billable.length) return false;
+  return billable.every(m => selectedModels.has(m));
+}
+
+function buildFilterUI(allModels) {
+  const sorted = [...allModels].sort((a, b) => {
+    const pa = modelPriority(a), pb = modelPriority(b);
+    return pa !== pb ? pa - pb : a.localeCompare(b);
+  });
+  selectedModels = readURLModels(allModels);
+  const container = document.getElementById('model-checkboxes');
+  container.innerHTML = sorted.map(m => {
+    const checked = selectedModels.has(m);
+    return `<label class="model-cb-label ${checked ? 'checked' : ''}" data-model="${m}">
+      <input type="checkbox" value="${m}" ${checked ? 'checked' : ''} onchange="onModelToggle(this)">
+      ${m}
+    </label>`;
+  }).join('');
+}
+
+function onModelToggle(cb) {
+  const label = cb.closest('label');
+  if (cb.checked) { selectedModels.add(cb.value);    label.classList.add('checked'); }
+  else            { selectedModels.delete(cb.value); label.classList.remove('checked'); }
+  updateURL();
+  applyFilter();
+}
+
+function selectAllModels() {
+  document.querySelectorAll('#model-checkboxes input').forEach(cb => {
+    cb.checked = true; selectedModels.add(cb.value); cb.closest('label').classList.add('checked');
+  });
+  updateURL(); applyFilter();
+}
+
+function clearAllModels() {
+  document.querySelectorAll('#model-checkboxes input').forEach(cb => {
+    cb.checked = false; selectedModels.delete(cb.value); cb.closest('label').classList.remove('checked');
+  });
+  updateURL(); applyFilter();
+}
+
+// ── URL persistence ────────────────────────────────────────────────────────
+function updateURL() {
+  const allModels = Array.from(document.querySelectorAll('#model-checkboxes input')).map(cb => cb.value);
+  const params = new URLSearchParams();
+  if (selectedRange !== '30d') params.set('range', selectedRange);
+  if (!isDefaultModelSelection(allModels)) params.set('models', Array.from(selectedModels).join(','));
+  const search = params.toString() ? '?' + params.toString() : '';
+  history.replaceState(null, '', window.location.pathname + search);
+}
+
+// ── Aggregation & filtering ────────────────────────────────────────────────
+function applyFilter() {
+  if (!rawData) return;
+
+  const cutoff = getRangeCutoff(selectedRange);
+
+  // Filter daily rows by model + date range
+  const filteredDaily = rawData.daily_by_model.filter(r =>
+    selectedModels.has(r.model) && (!cutoff || r.day >= cutoff)
+  );
+
+  // Daily chart: aggregate by day
+  const dailyMap = {};
+  for (const r of filteredDaily) {
+    if (!dailyMap[r.day]) dailyMap[r.day] = { day: r.day, input: 0, output: 0, cache_read: 0, cache_creation: 0 };
+    const d = dailyMap[r.day];
+    d.input          += r.input;
+    d.output         += r.output;
+    d.cache_read     += r.cache_read;
+    d.cache_creation += r.cache_creation;
+  }
+  const daily = Object.values(dailyMap).sort((a, b) => a.day.localeCompare(b.day));
+
+  // By model: aggregate tokens + turns from daily data
+  const modelMap = {};
+  for (const r of filteredDaily) {
+    if (!modelMap[r.model]) modelMap[r.model] = { model: r.model, input: 0, output: 0, cache_read: 0, cache_creation: 0, turns: 0, sessions: 0 };
+    const m = modelMap[r.model];
+    m.input          += r.input;
+    m.output         += r.output;
+    m.cache_read     += r.cache_read;
+    m.cache_creation += r.cache_creation;
+    m.turns          += r.turns;
+  }
+
+  // Filter sessions by model + date range
+  const filteredSessions = rawData.sessions_all.filter(s =>
+    selectedModels.has(s.model) && (!cutoff || s.last_date >= cutoff)
+  );
+
+  // Add session counts into modelMap
+  for (const s of filteredSessions) {
+    if (modelMap[s.model]) modelMap[s.model].sessions++;
+  }
+
+  const byModel = Object.values(modelMap).sort((a, b) => (b.input + b.output) - (a.input + a.output));
+
+  // By project: aggregate from filtered sessions
+  const projMap = {};
+  for (const s of filteredSessions) {
+    if (!projMap[s.project]) projMap[s.project] = { project: s.project, input: 0, output: 0, turns: 0 };
+    projMap[s.project].input  += s.input;
+    projMap[s.project].output += s.output;
+    projMap[s.project].turns  += s.turns;
+  }
+  const byProject = Object.values(projMap).sort((a, b) => (b.input + b.output) - (a.input + a.output));
+
+  // Totals
+  const totals = {
+    sessions:       filteredSessions.length,
+    turns:          byModel.reduce((s, m) => s + m.turns, 0),
+    input:          byModel.reduce((s, m) => s + m.input, 0),
+    output:         byModel.reduce((s, m) => s + m.output, 0),
+    cache_read:     byModel.reduce((s, m) => s + m.cache_read, 0),
+    cache_creation: byModel.reduce((s, m) => s + m.cache_creation, 0),
+    cost:           byModel.reduce((s, m) => s + calcCost(m.model, m.input, m.output, m.cache_read, m.cache_creation), 0),
+  };
+
+  // Update daily chart title
+  document.getElementById('daily-chart-title').textContent = 'Uso diario de tokens \u2014 ' + RANGE_LABELS[selectedRange];
+
+  renderStats(totals);
+  renderDailyChart(daily);
+  renderModelChart(byModel);
+  renderProjectChart(byProject);
+  renderSessionsTable(filteredSessions.slice(0, 20));
+  renderModelCostTable(byModel);
+}
+
+// ── Renderers ──────────────────────────────────────────────────────────────
+function renderStats(t) {
+  const rangeLabel = RANGE_LABELS[selectedRange].toLowerCase();
+  const stats = [
+    { label: 'Sesiones',         value: t.sessions.toLocaleString(), sub: rangeLabel },
+    { label: 'Turnos',           value: fmt(t.turns),                sub: rangeLabel },
+    { label: 'Tokens entrada',   value: fmt(t.input),                sub: rangeLabel },
+    { label: 'Tokens salida',    value: fmt(t.output),               sub: rangeLabel },
+    { label: 'Caché lectura',    value: fmt(t.cache_read),           sub: 'leído del caché de prompts' },
+    { label: 'Caché creación',   value: fmt(t.cache_creation),       sub: 'escrito al caché de prompts' },
+    { label: 'Costo est.',       value: fmtCostBig(t.cost),          sub: 'precios API, abr 2026', color: '#4ade80' },
+  ];
+  document.getElementById('stats-row').innerHTML = stats.map(s => `
+    <div class="stat-card">
+      <div class="label">${s.label}</div>
+      <div class="value" style="${s.color ? 'color:' + s.color : ''}">${s.value}</div>
+      ${s.sub ? `<div class="sub">${s.sub}</div>` : ''}
+    </div>
+  `).join('');
+}
+
+function renderDailyChart(daily) {
+  const ctx = document.getElementById('chart-daily').getContext('2d');
+  if (charts.daily) charts.daily.destroy();
+  charts.daily = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: daily.map(d => d.day),
+      datasets: [
+        { label: 'Entrada',          data: daily.map(d => d.input),          backgroundColor: TOKEN_COLORS.input,          stack: 'tokens' },
+        { label: 'Salida',           data: daily.map(d => d.output),         backgroundColor: TOKEN_COLORS.output,         stack: 'tokens' },
+        { label: 'Caché lectura',    data: daily.map(d => d.cache_read),     backgroundColor: TOKEN_COLORS.cache_read,     stack: 'tokens' },
+        { label: 'Caché creación',   data: daily.map(d => d.cache_creation), backgroundColor: TOKEN_COLORS.cache_creation, stack: 'tokens' },
+      ]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { labels: { color: '#8892a4', boxWidth: 12 } } },
+      scales: {
+        x: { ticks: { color: '#8892a4', maxTicksLimit: RANGE_TICKS[selectedRange] }, grid: { color: '#2a2d3a' } },
+        y: { ticks: { color: '#8892a4', callback: v => fmt(v) }, grid: { color: '#2a2d3a' } },
+      }
+    }
+  });
+}
+
+function renderModelChart(byModel) {
+  const ctx = document.getElementById('chart-model').getContext('2d');
+  if (charts.model) charts.model.destroy();
+  if (!byModel.length) { charts.model = null; return; }
+  charts.model = new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      labels: byModel.map(m => m.model),
+      datasets: [{ data: byModel.map(m => m.input + m.output), backgroundColor: MODEL_COLORS, borderWidth: 2, borderColor: '#1a1d27' }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: {
+        legend: { position: 'bottom', labels: { color: '#8892a4', boxWidth: 12, font: { size: 11 } } },
+        tooltip: { callbacks: { label: ctx => ` ${ctx.label}: ${fmt(ctx.raw)} tok` } }
+      }
+    }
+  });
+}
+
+function renderProjectChart(byProject) {
+  const top = byProject.slice(0, 10);
+  const ctx = document.getElementById('chart-project').getContext('2d');
+  if (charts.project) charts.project.destroy();
+  if (!top.length) { charts.project = null; return; }
+  charts.project = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: top.map(p => p.project.length > 22 ? '\u2026' + p.project.slice(-20) : p.project),
+      datasets: [
+        { label: 'Entrada', data: top.map(p => p.input),  backgroundColor: TOKEN_COLORS.input },
+        { label: 'Salida',  data: top.map(p => p.output), backgroundColor: TOKEN_COLORS.output },
+      ]
+    },
+    options: {
+      indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { labels: { color: '#8892a4', boxWidth: 12 } } },
+      scales: {
+        x: { ticks: { color: '#8892a4', callback: v => fmt(v) }, grid: { color: '#2a2d3a' } },
+        y: { ticks: { color: '#8892a4', font: { size: 11 } }, grid: { color: '#2a2d3a' } },
+      }
+    }
+  });
+}
+
+function renderSessionsTable(sessions) {
+  document.getElementById('sessions-body').innerHTML = sessions.map(s => {
+    const cost = calcCost(s.model, s.input, s.output, s.cache_read, s.cache_creation);
+    const costCell = isBillable(s.model)
+      ? `<td class="cost">${fmtCost(cost)}</td>`
+      : `<td class="cost-na">n/a</td>`;
+    const nameCell = s.session_name
+      ? `<td style="font-size:12px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${s.session_name}">${s.session_name}</td>`
+      : `<td class="muted" style="font-size:11px">(sin nombre)</td>`;
+    return `<tr>
+      <td class="muted" style="font-family:monospace;font-size:12px">${s.session_id}&hellip;</td>
+      ${nameCell}
+      <td>${s.project}</td>
+      <td class="muted">${s.last}</td>
+      <td class="muted">${s.duration_min}m</td>
+      <td><span class="model-tag">${s.model}</span></td>
+      <td class="num">${s.turns}</td>
+      <td class="num">${fmt(s.input)}</td>
+      <td class="num">${fmt(s.output)}</td>
+      ${costCell}
+    </tr>`;
+  }).join('');
+}
+
+function renderModelCostTable(byModel) {
+  document.getElementById('model-cost-body').innerHTML = byModel.map(m => {
+    const cost = calcCost(m.model, m.input, m.output, m.cache_read, m.cache_creation);
+    const costCell = isBillable(m.model)
+      ? `<td class="cost">${fmtCost(cost)}</td>`
+      : `<td class="cost-na">n/a</td>`;
+    return `<tr>
+      <td><span class="model-tag">${m.model}</span></td>
+      <td class="num">${fmt(m.turns)}</td>
+      <td class="num">${fmt(m.input)}</td>
+      <td class="num">${fmt(m.output)}</td>
+      <td class="num">${fmt(m.cache_read)}</td>
+      <td class="num">${fmt(m.cache_creation)}</td>
+      ${costCell}
+    </tr>`;
+  }).join('');
+}
+
+// ── SWL metrics ────────────────────────────────────────────────────────────
+function renderSWLTables(data) {
+  const agents = data.top_agents || [];
+  const skills = data.top_skills || [];
+  const SIN_DATOS = '<tr><td colspan="4" class="muted" style="text-align:center;padding:14px">Sin datos — ejecuta <code>/swl:dashboard scan</code> para poblar</td></tr>';
+
+  document.getElementById('swl-agents-body').innerHTML = agents.length
+    ? agents.map(a => `<tr>
+        <td style="font-family:monospace;font-size:12px">${a.name}</td>
+        <td class="num">${a.calls}</td>
+        <td class="num">${fmt(a.input)}</td>
+        <td class="num">${fmt(a.output)}</td>
+      </tr>`).join('')
+    : SIN_DATOS;
+
+  document.getElementById('swl-skills-body').innerHTML = skills.length
+    ? skills.map(s => `<tr>
+        <td style="font-family:monospace;font-size:12px">${s.name}</td>
+        <td class="num">${s.calls}</td>
+        <td class="num">${fmt(s.input)}</td>
+        <td class="num">${fmt(s.output)}</td>
+      </tr>`).join('')
+    : SIN_DATOS;
+}
+
+// ── Data loading ───────────────────────────────────────────────────────────
+async function loadData() {
+  try {
+    const resp = await fetch('/api/data');
+    const d = await resp.json();
+    if (d.error) {
+      document.body.innerHTML = '<div style="padding:40px;color:#f87171">' + d.error + '</div>';
+      return;
+    }
+    document.getElementById('meta').textContent = 'Actualizado: ' + d.generated_at + ' \u00b7 Refresco en 30s';
+
+    const isFirstLoad = rawData === null;
+    rawData = d;
+
+    if (isFirstLoad) {
+      // Restore range from URL, mark active button
+      selectedRange = readURLRange();
+      document.querySelectorAll('.range-btn').forEach(btn =>
+        btn.classList.toggle('active', btn.dataset.range === selectedRange)
+      );
+      // Build model filter (reads URL for model selection too)
+      buildFilterUI(d.all_models);
+    }
+
+    applyFilter();
+    renderSWLTables(d);
+  } catch(e) {
+    console.error(e);
+  }
+}
+
+loadData();
+setInterval(loadData, 30000);
+</script>
+</body>
+</html>
+"""
+
+
+class DashboardHandler(BaseHTTPRequestHandler):
+    def log_message(self, format, *args):
+        pass
+
+    def do_GET(self):
+        if self.path in ("/", "/index.html"):
+            self.send_response(200)
+            self.send_header("Content-Type", "text/html; charset=utf-8")
+            self.end_headers()
+            self.wfile.write(HTML_TEMPLATE.encode("utf-8"))
+
+        elif self.path == "/api/data":
+            data = get_dashboard_data()
+            body = json.dumps(data).encode("utf-8")
+            self.send_response(200)
+            self.send_header("Content-Type", "application/json")
+            self.send_header("Content-Length", str(len(body)))
+            self.end_headers()
+            self.wfile.write(body)
+
+        else:
+            self.send_response(404)
+            self.end_headers()
+
+
+def serve(port=8080):
+    server = HTTPServer(("localhost", port), DashboardHandler)
+    print(f"Dashboard running at http://localhost:{port}")
+    print("Press Ctrl+C to stop.")
+    try:
+        server.serve_forever()
+    except KeyboardInterrupt:
+        print("\nStopped.")
+
+
+if __name__ == "__main__":
+    serve()