estela 0.1.0

package/dist/export/panel.js

@@ -0,0 +1,693 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.newPanelToken = newPanelToken;
+exports.buildPanel = buildPanel;
+const node_crypto_1 = require("node:crypto");
+const shared_1 = require("@estela/shared");
+const index_js_1 = require("../metrics/index.js");
+/**
+ * Token de acceso.
+ *
+ * 128 bits en la ruta: una URL publicada es pública para quien la tenga, así
+ * que lo único que la protege es que nadie pueda adivinarla. Revocar el acceso
+ * es borrar el fichero del servidor — no hay caducidad falsa en el cliente,
+ * porque una caducidad que comprueba el navegador no protege de nada.
+ */
+function newPanelToken() {
+    return (0, node_crypto_1.randomBytes)(16).toString("hex");
+}
+/** Las dos últimas partes de la ruta: el fichero se reconoce, el árbol estorba. */
+function shortPath(file) {
+    return file.split("/").slice(-2).join("/");
+}
+function buildPanel(options) {
+    const { project, client, entries } = options;
+    const showAmounts = options.withAmounts === true && options.rateAt !== undefined;
+    const included = entries
+        .filter((e) => e.billable)
+        .sort((a, b) => a.startedAt.getTime() - b.startedAt.getTime());
+    const byDay = new Map();
+    let totalSeconds = 0;
+    let totalMinor = 0;
+    for (const entry of included) {
+        const date = (0, shared_1.localDate)(entry.startedAt);
+        let day = byDay.get(date);
+        if (!day) {
+            day = { date, seconds: 0, items: [] };
+            byDay.set(date, day);
+        }
+        let amount = null;
+        if (showAmounts) {
+            const rate = options.rateAt(entry.startedAt);
+            if (rate) {
+                const minor = Math.round((rate.amount * entry.seconds) / 3600);
+                totalMinor += minor;
+                amount = (0, shared_1.formatMoney)({ amount: minor, currency: rate.currency });
+            }
+        }
+        day.seconds += entry.seconds;
+        totalSeconds += entry.seconds;
+        day.items.push({
+            what: entry.description,
+            seconds: entry.seconds,
+            kind: entry.kind === "development" ? "" : (shared_1.WORK_KIND_LABELS[entry.kind] ?? ""),
+            amount,
+            commits: [...(options.commitsOf?.(entry.commitHashes) ?? [])]
+                .map((c) => ({ hash: c.hash.slice(0, 7), subject: c.subject })),
+        });
+    }
+    const days = [...byDay.values()].sort((a, b) => a.date.localeCompare(b.date));
+    // Todo el estado viaja embebido. La página no hace una sola petición.
+    // Las métricas se calculan sobre lo mismo que se enseña, para que un número
+    // de arriba y el detalle de abajo no puedan contradecirse.
+    const commits = options.commits ?? [];
+    const merged = options.merged ?? null;
+    const features = (0, index_js_1.effortByFeature)(included, commits, merged).map((f) => ({
+        name: f.name,
+        seconds: f.seconds,
+        days: f.days,
+        merged: f.merged,
+        delivered: f.delivered.slice(0, 8),
+        moreDelivered: Math.max(0, f.delivered.length - 8),
+    }));
+    const rhythm = (0, index_js_1.cadence)(included);
+    const rework = (0, index_js_1.churn)(commits, { minTouches: 3, withinDays: 14 }).slice(0, 6)
+        .map((f) => ({ file: shortPath(f.file), touches: f.touches, spanDays: f.spanDays }));
+    const open = merged
+        ? (0, index_js_1.openWork)(commits, merged, options.generatedAt ?? new Date()).slice(0, 6)
+        : [];
+    const data = {
+        project: project.name,
+        client: client.name,
+        author: options.authorName ?? null,
+        generatedAt: (options.generatedAt ?? new Date()).toISOString(),
+        totalSeconds,
+        totalAmount: showAmounts && totalMinor > 0
+            ? (0, shared_1.formatMoney)({ amount: totalMinor, currency: client.currency }) : null,
+        days,
+        features,
+        rhythm: {
+            activeDays: rhythm.activeDays,
+            spanDays: rhythm.spanDays,
+            medianSeconds: rhythm.medianSecondsPerActiveDay,
+            longestGapDays: rhythm.longestGapDays,
+        },
+        rework,
+        open,
+        team: options.team ?? [],
+        site: (options.siteUrl ?? "https://getestela.dev").replace(/\/$/, ""),
+    };
+    return render(data);
+}
+function render(data) {
+    // JSON dentro de <script>: hay que romper cualquier "</script>" literal que
+    // pudiera venir en un mensaje de commit, o cerraría la etiqueta.
+    const payload = JSON.stringify(data)
+        .replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
+    return `<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<!-- Publicado con enlace no listado: que ningún buscador lo indexe. -->
+<meta name="robots" content="noindex, nofollow, noarchive">
+<meta name="referrer" content="no-referrer">
+<title>Avance del proyecto</title>
+<style>
+/* Panel de avance.
+   Rejilla, no columna: quien lo abre quiere saber cómo va en treinta segundos,
+   no leer un documento. El detalle diario vive plegado porque es lo único que
+   se recorre entero, y solo cuando alguien busca un día concreto. */
+
+:root{
+  --paper:#F1F3F1; --card:#fff; --card2:#EAEDEA; --line:#DEE2DD; --line2:#C5CAC4;
+  --ink:#161A18; --ink2:#4E5652; --ink3:#7E8781;
+  --jade:#0E7C6B; --jade2:#0A5F52; --jadebg:#E1EEEA; --jadedim:#8FC4B8;
+  --amber:#8F5C0D; --amberbg:#F6E9D0;
+  --on-jade:#fff;
+  --r:14px;
+  --shadow:0 1px 2px rgba(20,26,24,.04), 0 12px 32px -20px rgba(20,26,24,.28);
+}
+@media(prefers-color-scheme:dark){:root{
+  --paper:#0C100F; --card:#151A18; --card2:#1D2422; --line:#28302D; --line2:#3A4541;
+  --ink:#E8EEEB; --ink2:#A4AFA9; --ink3:#76817B;
+  --jade:#45C0A7; --jade2:#6FD8C2; --jadebg:#0F2F29; --jadedim:#1E5A4F;
+  --amber:#DDA85A; --amberbg:#31270F;
+  --on-jade:#07201C;
+  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.8);
+}}
+
+*{box-sizing:border-box}
+[hidden]{display:none!important}
+body{margin:0;background:var(--paper);color:var(--ink);
+  font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
+  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
+
+/* ── Cabecera ─────────────────────────────────────────────────── */
+.top{background:var(--card);border-bottom:1px solid var(--line);
+  padding:16px 28px;position:sticky;top:0;z-index:5}
+.top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
+.mark{width:19px;height:19px;border-radius:6px;background:var(--jade);flex:none;
+  -webkit-mask:linear-gradient(#000 0 0) 3px 4px/3px 11px no-repeat,
+    linear-gradient(#000 0 0) 8px 6px/3px 7px no-repeat,
+    linear-gradient(#000 0 0) 13px 8px/3px 3px no-repeat;
+  mask:linear-gradient(#000 0 0) 3px 4px/3px 11px no-repeat,
+    linear-gradient(#000 0 0) 8px 6px/3px 7px no-repeat,
+    linear-gradient(#000 0 0) 13px 8px/3px 3px no-repeat}
+.brand{font-weight:660;letter-spacing:-.015em;font-size:.95rem}
+.top-sep{width:1px;height:18px;background:var(--line2)}
+.top-project{font-weight:560;letter-spacing:-.01em}
+.top-client{color:var(--ink3);font-size:.88rem}
+.ro{margin-left:auto;font-size:.75rem;color:var(--ink3);
+  border:1px solid var(--line2);border-radius:999px;padding:3px 11px;white-space:nowrap}
+
+main{max-width:1180px;margin:0 auto;padding:30px 28px 70px}
+
+/* ── Titular ──────────────────────────────────────────────────── */
+.lead{font-size:1.35rem;line-height:1.4;font-weight:480;letter-spacing:-.018em;
+  margin:0 0 24px;max-width:40ch;color:var(--ink2)}
+.lead b{color:var(--ink);font-weight:660}
+
+/* ── Fila de cifras ───────────────────────────────────────────── */
+.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
+  gap:12px;margin-bottom:26px}
+.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
+  padding:18px 20px}
+.kpi.accent{background:var(--jadebg);border-color:transparent}
+.kpi b{display:block;font-size:1.9rem;font-weight:640;letter-spacing:-.038em;line-height:1.05}
+.kpi.accent b{color:var(--jade2)}
+.kpi span{display:block;font-size:.8rem;color:var(--ink3);margin-top:5px;line-height:1.35}
+.kpi.accent span{color:var(--jade2);opacity:.8}
+
+/* ── Rejilla principal ────────────────────────────────────────── */
+.grid{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
+/* min-width:auto es el valor por defecto de un hijo de rejilla: no encoge por
+   debajo de su contenido, y basta un nombre largo con nowrap para desbordar
+   la pantalla en móvil. */
+.grid>*{min-width:0}
+@media(max-width:940px){.grid{grid-template-columns:1fr}}
+
+.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
+  overflow:hidden;margin-bottom:14px}
+.card-h{padding:15px 20px 0}
+.card-t{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
+  color:var(--ink3)}
+.card-s{font-size:.85rem;color:var(--ink3);margin:7px 0 0;line-height:1.5}
+
+/* ── Barras de esfuerzo ───────────────────────────────────────── */
+.feats{padding:14px 20px 18px;display:flex;flex-direction:column;gap:3px}
+.feat{border:0;background:none;font:inherit;color:inherit;text-align:left;
+  padding:10px 10px;margin:0 -10px;border-radius:10px;cursor:pointer;display:block;width:calc(100% + 20px)}
+.feat:hover{background:var(--card2)}
+.feat-top{display:flex;align-items:baseline;gap:12px;margin-bottom:7px}
+.feat-body{display:none}
+.feat-name{flex:1;min-width:0;font-weight:560;overflow:hidden;text-overflow:ellipsis;
+  white-space:nowrap;letter-spacing:-.01em}
+.feat-h{font-weight:620;white-space:nowrap;font-size:.95rem}
+.feat-pct{color:var(--ink3);font-size:.8rem;white-space:nowrap;min-width:34px;text-align:right}
+.bar{display:block;height:7px;border-radius:4px;background:var(--card2);overflow:hidden}
+.bar i{display:block;height:100%;border-radius:4px;background:var(--jade);
+  width:0;transition:width .7s cubic-bezier(.2,.8,.25,1)}
+.feat.kindwork .bar i{background:var(--jadedim)}
+.pill{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
+  padding:2px 8px;border-radius:999px;white-space:nowrap}
+.pill.open{background:var(--amberbg);color:var(--amber)}
+.pill.done{background:var(--jadebg);color:var(--jade2)}
+
+/* ── Equipo ──────────────────────────────────────────────────── */
+.mems{padding:6px 20px 16px;display:flex;flex-direction:column;gap:2px}
+.mem{padding:11px 0;border-bottom:1px solid var(--line)}
+.mem:last-child{border-bottom:none}
+.mem-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
+.mem-name{font-weight:580;letter-spacing:-.01em;flex:1;min-width:0;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.mem-h{font-weight:620;white-space:nowrap;font-size:.95rem}
+/* Un guion se leería como "no hay dato". Aquí SÍ hay dato, y es justo lo que
+   se vende: la etiqueta tiene que decir que está cerrado, no que falta. */
+.mem-lock{font-size:.66rem;font-weight:700;letter-spacing:.04em;
+  text-transform:uppercase;padding:3px 9px 3px 7px;border-radius:999px;
+  color:var(--ink3);border:1px dashed var(--line2);white-space:nowrap;cursor:help}
+.mem-lock::before{content:"🔒";font-size:.9em;margin-right:4px;
+  text-transform:none;letter-spacing:0}
+.mem-meta{display:block;margin-top:7px;font-size:.79rem;color:var(--ink3)}
+/* La fila propia es la única con horas, así que se distingue sin gritar. */
+.mem.is-me .bar>i{background:var(--jade)}
+.mem .bar>i{background:var(--jadedim)}
+
+.lock{margin:0 20px 18px;padding:15px 17px;border-radius:12px;
+  background:var(--jadebg);border:1px solid transparent}
+.lock-t{font-weight:640;font-size:.93rem;color:var(--jade2);margin-bottom:4px}
+.lock-t::before{content:"🔒 ";font-size:.85em}
+.lock-d{font-size:.83rem;line-height:1.5;color:var(--jade2);opacity:.88;max-width:62ch}
+.lock-cta{display:inline-block;margin-top:11px;font-size:.84rem;font-weight:600;
+  color:var(--on-jade);background:var(--jade);text-decoration:none;
+  padding:8px 15px;border-radius:9px}
+.lock-cta:hover{background:var(--jade2)}
+
+.feat-body{padding:2px 0 6px}
+.feat.is-open .feat-body{display:block}
+.commits{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
+.commits li{font-size:.86rem;color:var(--ink2);display:flex;gap:9px;align-items:baseline}
+.commits code{font-family:ui-monospace,Menlo,monospace;font-size:.76rem;color:var(--jade2);
+  background:var(--jadebg);padding:1px 6px;border-radius:5px;flex:none}
+.commits span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* ── Filas de la columna lateral ──────────────────────────────── */
+.rows{padding:6px 20px 16px;display:flex;flex-direction:column}
+.row{display:flex;align-items:baseline;gap:12px;padding:10px 0;
+  border-bottom:1px solid var(--line);font-size:.88rem}
+.row:last-child{border-bottom:0}
+.row-a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.row-a.mono{font-family:ui-monospace,Menlo,monospace;font-size:.78rem}
+.row-b{font-weight:640;color:var(--amber);white-space:nowrap}
+.row-c{color:var(--ink3);font-size:.8rem;white-space:nowrap}
+
+/* ── Ritmo ────────────────────────────────────────────────────── */
+.rhythm{padding:16px 20px 18px}
+.rhythm-n{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
+.rhythm-n div b{display:block;font-size:1.2rem;font-weight:640;letter-spacing:-.03em}
+.rhythm-n div span{display:block;font-size:.76rem;color:var(--ink3);margin-top:2px}
+.bars{display:flex;align-items:flex-end;gap:2px;height:52px}
+.bars i{flex:1;background:var(--jade);border-radius:2px 2px 0 0;min-height:2px;
+  opacity:.8;height:0;transition:height .6s cubic-bezier(.2,.8,.25,1)}
+.bars i:hover{opacity:1}
+.axis{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink3);margin-top:8px}
+
+/* ── Detalle plegado ──────────────────────────────────────────── */
+.detail{margin-top:14px}
+.detail-h{width:100%;border:0;background:var(--card);border:1px solid var(--line);
+  border-radius:var(--r);padding:15px 20px;font:inherit;color:inherit;cursor:pointer;
+  display:flex;align-items:center;gap:12px;text-align:left}
+.detail-h:hover{border-color:var(--line2)}
+.detail-h .card-t{flex:1}
+.chev{color:var(--ink3);font-size:.8rem;transition:transform .2s}
+.detail.is-open .chev{transform:rotate(90deg)}
+.detail-body{display:none;margin-top:10px}
+.detail.is-open .detail-body{display:block}
+.filters{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
+.filters button{border:1px solid var(--line);background:var(--card);color:var(--ink2);
+  border-radius:8px;padding:5px 12px;font:inherit;font-size:.83rem;cursor:pointer}
+.filters button:hover{border-color:var(--line2);color:var(--ink)}
+.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
+.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
+.day{background:var(--card);border:1px solid var(--line);border-radius:11px;overflow:hidden}
+.day-h{display:flex;align-items:center;gap:10px;width:100%;padding:12px 15px;
+  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
+.day-h:hover{background:var(--card2)}
+.day-d{flex:1;font-size:.88rem;font-weight:540}
+.day-t{font-weight:620;white-space:nowrap;font-size:.88rem}
+.day-body{padding:0 15px 13px;border-top:1px solid var(--line)}
+.item{padding:10px 0;border-bottom:1px solid var(--line);font-size:.85rem}
+.item:last-child{border-bottom:0}
+.item-top{display:flex;gap:10px;align-items:baseline}
+.item-w{flex:1;min-width:0}
+.item-t{color:var(--ink2);white-space:nowrap}
+.item-a{color:var(--jade2);font-weight:620;white-space:nowrap}
+.kindtag{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.04em;
+  text-transform:uppercase;padding:2px 6px;border-radius:5px;margin-right:7px;
+  background:var(--amberbg);color:var(--amber);vertical-align:1px}
+
+.empty{color:var(--ink3);text-align:center;padding:38px 0;font-size:.9rem}
+
+/* ── Pie ──────────────────────────────────────────────────────── */
+.cta{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
+  padding:18px 22px;margin-top:24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
+.cta div{flex:1;min-width:230px}
+.cta b{display:block;font-size:.98rem;margin-bottom:4px;letter-spacing:-.01em}
+.cta p{margin:0;font-size:.87rem;color:var(--ink2);line-height:1.5}
+.cta a{color:var(--on-jade);background:var(--jade);text-decoration:none;
+  padding:9px 18px;border-radius:9px;font-size:.88rem;font-weight:620;white-space:nowrap}
+footer{margin-top:26px;font-size:.8rem;color:var(--ink3);line-height:1.6}
+footer a{color:var(--jade2)}
+
+/* Una sola entrada orquestada: las tarjetas suben al cargar y las barras
+   crecen. Más movimiento que esto distrae de lo que hay que leer. */
+.rise{opacity:0;transform:translateY(10px);
+  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.25,1)}
+.rise.in{opacity:1;transform:none}
+
+@media(prefers-reduced-motion:reduce){
+  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
+  .rise{opacity:1;transform:none}
+}
+@media(max-width:560px){
+  main{padding:22px 16px 56px}
+  .top{padding:14px 16px}
+  .lead{font-size:1.12rem}
+  .kpi b{font-size:1.6rem}
+  .days{grid-template-columns:1fr}
+  .top-client{display:none}
+}
+@media print{
+  .top{position:static}.filters,.cta,.detail-h{display:none}
+  .detail-body{display:block!important}.rise{opacity:1;transform:none}
+  .bar i,.bars i{transition:none}
+}
+</style>
+</head>
+<body>
+<header class="top">
+  <div class="top-in">
+    <span class="mark"></span><span class="brand">Estela</span>
+    <span class="top-sep"></span>
+    <span class="top-project" id="h-project"></span>
+    <span class="top-client" id="h-client"></span>
+    <span class="ro">Solo lectura</span>
+  </div>
+</header>
+
+<main>
+  <p class="lead" id="lead"></p>
+  <div class="kpis" id="kpis"></div>
+
+  <div class="grid">
+    <div>
+      <section class="card rise">
+        <div class="card-h"><div class="card-t">En qué se fue el esfuerzo</div></div>
+        <div class="feats" id="feats"></div>
+      </section>
+      <div id="team"></div>
+      <div id="main-extra"></div>
+    </div>
+
+    <div id="side"></div>
+  </div>
+
+  <div class="detail" id="detail">
+    <button class="detail-h" id="detail-toggle" aria-expanded="false">
+      <span class="card-t">Detalle por día</span>
+      <span class="card-s" id="detail-count" style="margin:0"></span>
+      <span class="chev">›</span>
+    </button>
+    <div class="detail-body">
+      <div class="filters" id="filters"></div>
+      <div class="days" id="days"></div>
+    </div>
+  </div>
+
+  <div class="cta">
+    <div>
+      <b>Esto es una foto del proyecto</b>
+      <p>Se genera de la actividad real de Git y del editor, y se actualiza cuando
+         quien lo publica lo vuelve a publicar.</p>
+    </div>
+    <a id="cta-more" rel="noopener noreferrer">Verlo para un equipo</a>
+  </div>
+
+  <footer>
+    Cada bloque está respaldado por sus commits.
+    <a id="footer-site" rel="noopener noreferrer"></a>
+  </footer>
+</main>
+
+<script id="data" type="application/json">__DATA__</script>
+<script>
+"use strict";
+var D = JSON.parse(document.getElementById("data").textContent);
+var MONTHS = ["enero","febrero","marzo","abril","mayo","junio","julio","agosto",
+              "septiembre","octubre","noviembre","diciembre"];
+var DAYS = ["domingo","lunes","martes","miércoles","jueves","viernes","sábado"];
+var openDay = {}, openFeat = {}, filter = "all";
+
+function dur(s){var t=Math.round(s/60),h=Math.floor(t/60),m=t%60;
+  return h===0?m+"m":(m===0?h+"h":h+"h "+String(m).padStart(2,"0")+"m");}
+function esc(t){return String(t).replace(/[&<>"']/g,function(c){
+  return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c];});}
+function longDate(iso){var d=new Date(iso+"T12:00:00Z");
+  return DAYS[d.getUTCDay()]+" "+d.getUTCDate()+" de "+MONTHS[d.getUTCMonth()];}
+function el(id){return document.getElementById(id);}
+
+function shown(){
+  return filter==="all" ? D.days : D.days.filter(function(d){return d.date.indexOf(filter)===0;});
+}
+
+/* ── Cabecera y titular ─────────────────────────────────────── */
+function renderHead(){
+  el("h-project").textContent = D.project;
+  el("h-client").textContent = "· " + D.client;
+
+  var top = D.features[0];
+  var entregas = D.features.reduce(function(s,f){return s+f.delivered.length;},0);
+  var frase = [];
+  if (top) frase.push("El grueso del trabajo fue <b>"+esc(top.name)+"</b>");
+  if (entregas) frase.push("con <b>"+entregas+(entregas===1?" entrega":" entregas")+"</b>");
+  if (D.open.length) frase.push("y <b>"+D.open.length+
+    (D.open.length===1?" frente abierto":" frentes abiertos")+"</b>");
+  el("lead").innerHTML = frase.length ? frase.join(" ")+"." : "";
+
+  var k = [["", dur(D.totalSeconds), "horas trabajadas"],
+           ["", D.rhythm.activeDays+" de "+D.rhythm.spanDays, "días con actividad"],
+           ["", String(D.features.length), D.features.length===1?"frente de trabajo":"frentes de trabajo"]];
+  if (D.totalAmount) k.push(["accent", D.totalAmount, "valor del trabajo"]);
+  el("kpis").innerHTML = k.map(function(x){
+    return '<div class="kpi '+x[0]+'"><b>'+esc(x[1])+'</b><span>'+esc(x[2])+'</span></div>';
+  }).join("");
+
+  // Mismo sitio configurable que el candado de "Equipo del proyecto": el
+  // dominio final aún no está comprado, y un enlace roto es peor que no tener
+  // enlace. Quien busca de dónde sale esto y encuentra un dominio muerto duda
+  // más que si no hubiera buscado nada.
+  var site = D.site || "https://getestela.dev";
+  el("cta-more").setAttribute("href", site + "/teams?d=" + encodeURIComponent(D.client||""));
+  var siteLink = el("footer-site");
+  siteLink.setAttribute("href", site);
+  // Sin regex a propósito: dentro de este template literal, "\/" no es un
+  // escape válido y se colapsa a "/" al compilar. Un "/^https?:\/\//" acababa
+  // como "/^https?:///" en el navegador — sintaxis inválida que rompía la
+  // etiqueta <script> entera, no solo este enlace. String.replace con texto
+  // plano no tiene esa trampa.
+  siteLink.textContent = site.replace("https://", "").replace("http://", "");
+}
+
+/* ── Esfuerzo, con proporción visible ───────────────────────── */
+function renderFeats(){
+  var max = D.features.reduce(function(m,f){return Math.max(m,f.seconds);},0) || 1;
+  var total = D.features.reduce(function(s,f){return s+f.seconds;},0) || 1;
+
+  el("feats").innerHTML = D.features.map(function(f,i){
+    var isOpen = !!openFeat[i];
+    var pill = f.merged===null ? "" :
+      '<span class="pill '+(f.merged?"done":"open")+'">'+(f.merged?"integrado":"en curso")+'</span>';
+    return '<button class="feat'+(isOpen?" is-open":"")+(f.merged===null&&!f.delivered.length?" kindwork":"")+
+      '" data-f="'+i+'" aria-expanded="'+isOpen+'">'+
+      '<span class="feat-top">'+
+        '<span class="feat-name">'+esc(f.name)+'</span>'+pill+
+        '<span class="feat-h">'+dur(f.seconds)+'</span>'+
+        '<span class="feat-pct">'+Math.round(f.seconds/total*100)+'%</span></span>'+
+      '<span class="bar"><i data-w="'+(f.seconds/max*100)+'"></i></span>'+
+      '<span class="feat-body">'+
+        (f.delivered.length
+          ? '<ul class="commits">'+f.delivered.map(function(c){
+              return '<li><code>'+esc(c.hash)+'</code><span>'+esc(c.subject)+'</span></li>';
+            }).join("")+
+            (f.moreDelivered?'<li><span>y '+f.moreDelivered+' más</span></li>':"")+'</ul>'
+          : '<p class="card-s">'+f.days+(f.days===1?" día":" días")+
+            ' de trabajo, sin commits asociados.</p>')+
+      '</span></button>';
+  }).join("");
+
+  Array.prototype.forEach.call(document.querySelectorAll(".feat"), function(b){
+    b.onclick = function(){ openFeat[b.dataset.f] = !openFeat[b.dataset.f]; renderFeats(); grow(); };
+  });
+}
+
+/* ── Equipo del proyecto ────────────────────────────────────── */
+/* Los nombres, ramas y commits de su gente ya están en su repositorio: se los
+   enseñamos porque demuestra que esto funciona sobre sus datos, no sobre una
+   demo. Las horas de cada uno son lo que Estela produce y él no puede sacar
+   solo, y por eso no viajan en este fichero. */
+function renderTeam(){
+  var t = D.team || [];
+  if (!t.length) { el("team").innerHTML = ""; return; }
+
+  var max = t.reduce(function(m,p){return Math.max(m,p.commits);},0) || 1;
+  var others = t.filter(function(p){return !p.isMe;}).length;
+
+  var rows = t.map(function(p){
+    var bar = '<span class="bar"><i data-w="'+(p.commits/max*100)+'"></i></span>';
+    var meta = p.commits+(p.commits===1?" commit":" commits")+
+      " · "+p.branches+(p.branches===1?" rama":" ramas")+
+      (p.lastDay?" · hasta "+p.lastDay:"");
+
+    // dur() solo se llama cuando seconds viene, y solo viene para quien publica.
+    var right = p.isMe && p.seconds!=null
+      ? '<span class="mem-h">'+dur(p.seconds)+'</span><span class="pill done">medido</span>'
+      : '<span class="mem-lock" title="Se mide con Teams">Teams</span>';
+
+    return '<div class="mem'+(p.isMe?" is-me":"")+'">'+
+      '<span class="mem-top">'+
+        '<span class="mem-name">'+esc(p.name)+(p.isMe?' <span class="pill">tú</span>':"")+'</span>'+
+        right+'</span>'+
+      bar+
+      '<span class="mem-meta">'+esc(meta)+'</span></div>';
+  }).join("");
+
+  var lock = others>0
+    ? '<div class="lock">'+
+        '<div class="lock-t">Horas medidas de tu equipo</div>'+
+        '<div class="lock-d">Las de tu gente pueden estimarse desde sus commits, '+
+        'pero medirlas exige que instalen Estela. Con <b>Teams</b> se miden, y '+
+        'dejan de ser una suposición que alguien pueda discutir.'+
+        '<br><br>El coste de IA se informa <b>por proyecto</b>, nunca por '+
+        'persona, y solo la que paga la empresa. Lo que cada cual gasta de su '+
+        'bolsillo es suyo.</div>'+
+        '<a class="lock-cta" href="'+D.site+'/teams?d='+
+        encodeURIComponent(D.client||"")+'" target="_blank" rel="noopener">'+
+        'Ver qué incluye Teams →</a>'+
+      '</div>'
+    : "";
+
+  el("team").innerHTML = '<section class="card rise">'+
+    '<div class="card-h"><div class="card-t">Equipo del proyecto</div>'+
+    '<div class="card-s">'+t.length+(t.length===1?" persona":" personas")+
+    ' con actividad. Salen de los commits del repositorio, con sus identidades '+
+    'de git ya unificadas.</div></div>'+
+    '<div class="mems">'+rows+'</div>'+lock+'</section>';
+}
+
+/* ── Columna lateral ────────────────────────────────────────── */
+function renderSide(){
+  var out = [];
+
+  var r = D.rhythm;
+  var list = D.days;
+  var max = list.reduce(function(m,d){return Math.max(m,d.seconds);},0) || 1;
+  out.push('<section class="card rise"><div class="card-h"><div class="card-t">Ritmo</div></div>'+
+    '<div class="rhythm"><div class="rhythm-n">'+
+      '<div><b>'+dur(r.medianSeconds)+'</b><span>jornada típica</span></div>'+
+      (r.longestGapDays>0?'<div><b>'+r.longestGapDays+'</b><span>días la pausa más larga</span></div>':"")+
+    '</div>'+
+    (list.length>1
+      ? '<div class="bars">'+list.map(function(d){
+          return '<i data-h="'+Math.max(4,Math.round(d.seconds/max*100))+
+            '" title="'+esc(d.date+": "+dur(d.seconds))+'"></i>';
+        }).join("")+'</div>'+
+        '<div class="axis"><span>'+esc(list[0].date.slice(5))+'</span><span>'+
+        esc(list[list.length-1].date.slice(5))+'</span></div>'
+      : "")+
+    '</div></section>');
+
+  if (D.open.length) {
+    out.push('<section class="card rise"><div class="card-h">'+
+      '<div class="card-t">Pendiente de integrar</div>'+
+      '<p class="card-s">Trabajo terminado que aún no está en la rama principal.</p></div>'+
+      '<div class="rows">'+D.open.map(function(o){
+        return '<div class="row"><span class="row-a">'+esc(o.name)+'</span>'+
+          '<span class="row-b">'+o.commits+(o.commits===1?" commit":" commits")+'</span>'+
+          '<span class="row-c">'+(o.ageDays===0?"hoy":o.ageDays===1?"ayer":"hace "+o.ageDays+" d")+
+          '</span></div>';
+      }).join("")+'</div></section>');
+  }
+
+  el("side").innerHTML = out.join("");
+
+  var extra = [];
+  if (D.rework.length) {
+    extra.push('<section class="card rise"><div class="card-h">'+
+      '<div class="card-t">Dónde costó más</div>'+
+      '<p class="card-s">Ficheros retocados varias veces en pocos días. Suele señalar '+
+      'requisitos que se afinaron sobre la marcha.</p></div>'+
+      '<div class="rows">'+D.rework.map(function(f){
+        return '<div class="row"><span class="row-a mono">'+esc(f.file)+'</span>'+
+          '<span class="row-b">'+f.touches+'×</span>'+
+          '<span class="row-c">en '+f.spanDays+" d"+'</span></div>';
+      }).join("")+'</div></section>');
+  }
+  el("main-extra").innerHTML = extra.join("");
+}
+
+/* ── Detalle por día ────────────────────────────────────────── */
+function renderDays(){
+  var list = shown();
+  el("detail-count").textContent = list.length + (list.length===1?" día":" días");
+
+  var ms = {};
+  D.days.forEach(function(d){ ms[d.date.slice(0,7)] = true; });
+  var months = Object.keys(ms).sort();
+
+  el("filters").innerHTML = months.length<2 ? "" :
+    ['<button data-f="all" aria-pressed="'+(filter==="all")+'">Todo</button>']
+      .concat(months.map(function(m){
+        return '<button data-f="'+m+'" aria-pressed="'+(filter===m)+'">'+
+          MONTHS[Number(m.slice(5,7))-1]+" "+m.slice(0,4)+'</button>';
+      })).join("");
+
+  el("days").innerHTML = list.length===0
+    ? '<p class="empty">Sin actividad en este periodo.</p>'
+    : list.map(function(d){
+        var isOpen = !!openDay[d.date];
+        return '<div class="day'+(isOpen?" is-open":"")+'">'+
+          '<button class="day-h" data-d="'+esc(d.date)+'" aria-expanded="'+isOpen+'">'+
+            '<span class="day-d">'+esc(longDate(d.date))+'</span>'+
+            '<span class="day-t">'+dur(d.seconds)+'</span>'+
+            '<span class="chev">›</span></button>'+
+          (isOpen?'<div class="day-body">'+d.items.map(item).join("")+'</div>':"")+
+        '</div>';
+      }).join("");
+
+  Array.prototype.forEach.call(document.querySelectorAll(".day-h"), function(b){
+    b.onclick = function(){ openDay[b.dataset.d] = !openDay[b.dataset.d]; renderDays(); };
+  });
+  Array.prototype.forEach.call(document.querySelectorAll("#filters button"), function(b){
+    b.onclick = function(){ filter = b.dataset.f; renderDays(); };
+  });
+}
+
+function item(it){
+  return '<div class="item"><div class="item-top">'+
+    '<span class="item-w">'+(it.kind?'<span class="kindtag">'+esc(it.kind)+'</span>':"")+
+      esc(it.what)+'</span>'+
+    '<span class="item-t">'+dur(it.seconds)+'</span>'+
+    (it.amount?'<span class="item-a">'+esc(it.amount)+'</span>':"")+'</div>'+
+    (it.commits.length
+      ? '<ul class="commits">'+it.commits.map(function(c){
+          return '<li><code>'+esc(c.hash)+'</code><span>'+esc(c.subject)+'</span></li>';
+        }).join("")+'</ul>'
+      : "")+'</div>';
+}
+
+/* ── Entrada ────────────────────────────────────────────────── */
+function grow(){
+  requestAnimationFrame(function(){
+    Array.prototype.forEach.call(document.querySelectorAll(".bar i"), function(b){
+      b.style.width = b.dataset.w + "%";
+    });
+    Array.prototype.forEach.call(document.querySelectorAll(".bars i"), function(b){
+      b.style.height = b.dataset.h + "%";
+    });
+  });
+}
+
+renderHead();
+renderFeats();
+renderTeam();
+renderSide();
+renderDays();
+
+el("detail-toggle").onclick = function(){
+  var d = el("detail"), on = d.classList.toggle("is-open");
+  this.setAttribute("aria-expanded", String(on));
+};
+
+requestAnimationFrame(function(){
+  Array.prototype.forEach.call(document.querySelectorAll(".rise"), function(c,i){
+    setTimeout(function(){ c.classList.add("in"); }, i*70);
+  });
+  grow();
+});
+</script>
+</body>
+</html>`.replace("__DATA__", payload);
+}
+/** Las dos últimas partes de la ruta: el fichero se reconoce, el árbol estorba. */
+const MONTHS_ES = ["enero", "febrero", "marzo", "abril", "mayo", "junio",
+    "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
+const DAYS_ES = ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"];
+function longDate(iso) {
+    const d = new Date(`${iso}T12:00:00Z`);
+    return `${DAYS_ES[d.getUTCDay()]} ${d.getUTCDate()} de ${MONTHS_ES[d.getUTCMonth()]}`;
+}
+function esc(text) {
+    return text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+}
+//# sourceMappingURL=panel.js.map