@polycode-projects/seonix 0.2.1 → 0.4.0

package/src/timeline.mjs

@@ -0,0 +1,160 @@
+// timeline.mjs — render the repo's commit timeline to a single, portable HTML
+// page from a seonix graph artifact. Third sibling of the viz viewer and the
+// Chronograph code browser: generated by `seonix viz` (--timeline-out, on by
+// default next to --out) and served live at /timeline.html by `viz --serve`.
+//
+// Data comes straight from the graph artifact: Commit individuals carry the full
+// sha (id), author, date, and message; each Module's `derived_from` lists the
+// commits that touched it (`git:<short sha>`), which gives per-commit churn.
+// Session individuals (chat sessions recorded by sessions.mjs) join the same
+// timeline as `type:"session"` entries at their started timestamp — a graph with
+// zero sessions renders exactly as before.
+
+import { repoOfId, assignRepo, isMultiRepo } from "./temporal.mjs";
+
+const esc = (s) =>
+  String(s == null ? "" : s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+
+export function extractTimeline(graph) {
+  const commits = [];
+  const sessions = [];
+  const churnByShort = new Map(); // short sha -> modules touched
+  const prefixByShort = new Map(); // short sha -> Map<repoPrefix, modules touched> (multi-repo)
+  for (const ind of graph.individuals || []) {
+    const attr = (key) => ind.attributes?.find((a) => a.key === key)?.value || "";
+    if (ind.class === "Module") {
+      const prefix = repoOfId(ind.id);
+      for (const ref of ind.derived_from || []) {
+        const short = ref.replace(/^git:/, "");
+        churnByShort.set(short, (churnByShort.get(short) || 0) + 1);
+        if (prefix) {
+          let m = prefixByShort.get(short);
+          if (!m) { m = new Map(); prefixByShort.set(short, m); }
+          m.set(prefix, (m.get(prefix) || 0) + 1);
+        }
+      }
+    } else if (ind.class === "Commit") {
+      commits.push({
+        sha: ind.id.replace(/^commit:/, ""),
+        short: ind.label,
+        date: attr("date"),
+        author: attr("author"),
+        message: attr("message"),
+      });
+    } else if (ind.class === "Session") {
+      // chat sessions (sessions.mjs) enter the timeline at their started timestamp
+      sessions.push({
+        type: "session",
+        id: ind.id.replace(/^session:/, ""),
+        short: ind.label,
+        date: attr("started"),
+        turns: Number(attr("turns")) || 0,
+        touched: 0,
+      });
+    }
+  }
+  for (const c of commits) c.touched = churnByShort.get(c.short) || 0;
+  // P4 cross-repo: on a MERGED multi-repo graph, tag every commit with the repo it
+  // belongs to (inferred from its touched modules' id prefixes) so the render can group
+  // by repo on a single global time axis. Single-repo graphs never trip isMultiRepo, so
+  // no `repo` key is added and the output stays byte-identical to before.
+  if (isMultiRepo(commits.map((c) => prefixByShort.get(c.short) || new Map()))) {
+    for (const c of commits) {
+      const r = assignRepo(prefixByShort.get(c.short) || new Map());
+      if (r) c.repo = r;
+    }
+  }
+  const entries = [...commits, ...sessions];
+  entries.sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+  return entries;
+}
+
+// Per-repo badge palette (multi-repo timelines only) — hues distinct from the default
+// commit-bar blue (#3d59a1) and the session amber (#e0af68); assigned by sorted repo
+// order so a repo's colour is stable across renders.
+const REPO_PALETTE = ["#7aa2f7", "#9ece6a", "#bb9af7", "#f7768e", "#2ac3de", "#ff9e64", "#73daca", "#e0af68"];
+const repoColorMap = (repos) => new Map(repos.map((r, i) => [r, REPO_PALETTE[i % REPO_PALETTE.length]]));
+
+/** `nav` is the shared {name: href} nav object the viz CLI computes from the
+ *  actual sibling output paths — header links render ONLY from its entries, so
+ *  a page generated without siblings never carries dead links. */
+export function renderTimelineHtml({ commits, repoUrl = "", repoRef = "main", generatedAt = "", nav = null } = {}) {
+  const base = repoUrl.replace(/\/+$/, "");
+  const sessionCount = commits.filter((c) => c.type === "session").length;
+  const commitCount = commits.length - sessionCount;
+  const maxTouched = Math.max(1, ...commits.map((c) => c.touched));
+  // P4 cross-repo: extractTimeline tags each commit of a MERGED graph with its `repo`.
+  // When present, entries are labelled and colour-badged by repo on one global time
+  // axis; when absent (single-repo or zero commits) every branch below is byte-for-byte
+  // the pre-P4 render.
+  const repos = [...new Set(commits.filter((c) => c.repo).map((c) => c.repo))].sort();
+  const multi = repos.length > 0;
+  const rc = multi ? repoColorMap(repos) : null;
+  const badgeStyle = (color) => `display:inline-block;padding:0 6px;border-radius:8px;font-size:11px;font-weight:600;color:#16161e;background:${color}`;
+  // Bars run oldest→newest left to right; the list reads newest first. Chat
+  // sessions are the visually distinct entries (amber, fixed-height bars). On a
+  // multi-repo timeline each commit bar is tinted with its repo colour.
+  const bars = commits
+    .map((c, i) => {
+      if (c.type === "session") {
+        return `<a class="bar sess" href="#c${i}" title="chat session ${esc(c.short)} · ${esc(c.date.slice(0, 10))} — ${c.turns} turn(s)"><i style="height:10px"></i></a>`;
+      }
+      const barRepoTitle = multi && c.repo ? `[${esc(c.repo)}] ` : "";
+      const barRepoBg = multi && c.repo ? `;background:${rc.get(c.repo)}` : "";
+      return `<a class="bar" href="#c${i}" title="${barRepoTitle}${esc(c.short)} · ${esc(c.date.slice(0, 10))} — ${esc(c.message)}"><i style="height:${Math.max(6, Math.round((c.touched / maxTouched) * 64))}px${barRepoBg}"></i></a>`;
+    })
+    .join("");
+  const rows = commits
+    .map((c, i) => {
+      if (c.type === "session") {
+        return `<li id="c${i}" class="sess"><span class="d">${esc(c.date.slice(0, 10))}</span> <code>${esc(c.short)}</code> <span class="m">chat session — ${c.turns} turn(s)</span></li>`;
+      }
+      const sha = base
+        ? `<a href="${base}/-/commit/${esc(c.sha)}" target="_blank" rel="noopener"><code>${esc(c.short)}</code></a>`
+        : `<code>${esc(c.short)}</code>`;
+      const rowBadge = multi && c.repo ? `<span style="${badgeStyle(rc.get(c.repo))}">${esc(c.repo)}</span> ` : "";
+      return `<li id="c${i}">${rowBadge}<span class="d">${esc(c.date.slice(0, 10))}</span> ${sha} <span class="a">${esc(c.author)}</span> <span class="m">${esc(c.message)}</span> <span class="t" title="modules touched">${c.touched}⛁</span></li>`;
+    })
+    .reverse()
+    .join("\n");
+  const repoLegend = multi
+    ? repos
+        .map((r) => `<span class="rl"><span style="display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:3px;vertical-align:middle;background:${rc.get(r)}"></span>${esc(r)}</span>`)
+        .join(" ")
+    : "";
+  const navLinks = nav
+    ? Object.entries(nav)
+        .map(([name, href]) => `<a href="${esc(href)}">${name === "home" ? "← home" : esc(name)}</a>`)
+        .join("\n  ")
+    : "";
+  return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>seonix — commit timeline</title>
+<style>
+  html,body{margin:0;font:14px/1.5 system-ui,sans-serif;background:#1a1b26;color:#c0caf5}
+  header{padding:14px 20px;background:#16161e;border-bottom:1px solid #2a2e42;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
+  header b{color:#7aa2f7} header a{color:#7aa2f7;text-decoration:none} header a:hover{text-decoration:underline}
+  header .meta{color:#565f89;font-size:12px;margin-left:auto}
+  #bars{display:flex;align-items:flex-end;gap:3px;padding:18px 20px 6px;overflow-x:auto}
+  .bar i{display:block;width:9px;background:#3d59a1;border-radius:2px 2px 0 0}
+  .bar:hover i{background:#7aa2f7}
+  ol{list-style:none;margin:6px 0 40px;padding:0 20px}
+  li{padding:6px 8px;border-bottom:1px solid #20222f;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
+  li:target{background:#20253a;border-radius:4px}
+  .d{color:#565f89;font-variant-numeric:tabular-nums;white-space:nowrap}
+  code{color:#9ece6a} li a{text-decoration:none} li a:hover code{text-decoration:underline}
+  .a{color:#a9b1d6;white-space:nowrap} .m{flex:1 1 24ch} .t{color:#bb9af7;white-space:nowrap}
+  .bar.sess i{background:#8a6a2f;border-radius:5px} .bar.sess:hover i{background:#e0af68}
+  li.sess{border-left:3px solid #e0af68;padding-left:5px} li.sess code,li.sess .m{color:#e0af68}
+</style></head><body>
+<header>
+  <span><b>seonix</b> commit timeline — ${commitCount} commits${sessionCount ? ` · ${sessionCount} chat session(s)` : ""}${multi ? ` · ${repos.length} repos` : ""}</span>${multi ? `\n  <span class="repolegend">${repoLegend}</span>` : ""}
+  ${navLinks}
+  ${base ? `<a href="${base}" target="_blank" rel="noopener">repository ↗</a>` : ""}
+  <span class="meta">bars = modules touched per commit · generated from the seonix graph artifact${generatedAt ? ` (${esc(generatedAt.slice(0, 10))})` : ""}</span>
+</header>
+<div id="bars">${bars}</div>
+<ol>
+${rows}
+</ol>
+</body></html>`;
+}