@ra3orblade/swarm 0.4.0

package/web/table.js

@@ -0,0 +1,262 @@
+// Reusable data-grid for the dashboard tables: sortable, resizable, reorderable, filterable
+// columns with a column-visibility menu — all state persisted per-table in localStorage.
+//
+// Usage (app.js):
+//   dataTable({ id, columns, rows, leading?, trailing?, rerender })  -> HTML string
+// Columns: { key, label, width, min?, num?, sortable?(=true), filterable?(=true),
+//            get(row)->sortable/filterable value, cell(row)->html }
+// leading/trailing: fixed (non-configurable) edge columns { width, cell(row)->html }.
+// `rerender` is called after any state change so the caller can re-render its view.
+
+(() => {
+  const LS = (id) => `swarm.table.${id}`;
+  // Persisted state per grid: localStorage is read once per id, then written through on every mutation.
+  const cache = new Map();
+  const load = (id) => {
+    let st = cache.get(id);
+    if (!st) {
+      try {
+        st = JSON.parse(localStorage.getItem(LS(id)) || "{}");
+      } catch {
+        st = {};
+      }
+      cache.set(id, st);
+    }
+    return st;
+  };
+  const save = (id, st) => {
+    cache.set(id, st);
+    localStorage.setItem(LS(id), JSON.stringify(st));
+  };
+  const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+  const registry = new Map(); // id -> { columns, leading, trailing, rerender }
+
+  // Merge persisted state with the column defaults, dropping keys that no longer exist.
+  function resolve(id, columns) {
+    const st = load(id);
+    const keys = columns.map((c) => c.key);
+    const order = (st.order || keys).filter((k) => keys.includes(k));
+    for (const k of keys) if (!order.includes(k)) order.push(k);
+    return {
+      sort: st.sort && keys.includes(st.sort.key) ? st.sort : null,
+      widths: st.widths || {},
+      hidden: (st.hidden || []).filter((k) => keys.includes(k)),
+      order,
+      filters: st.filters || {},
+      showFilters: !!st.showFilters,
+    };
+  }
+
+  function dataTable({ id, columns, rows, leading, trailing, rerender, rowAttrs }) {
+    registry.set(id, { columns, leading, trailing, rerender });
+    const st = resolve(id, columns);
+    const byKey = Object.fromEntries(columns.map((c) => [c.key, c]));
+    const visible = st.order.map((k) => byKey[k]).filter((c) => c && !st.hidden.includes(c.key));
+
+    // ---- sort + filter the rows
+    let view = rows;
+    const needles = Object.entries(st.filters)
+      .map(([k, raw]) => [byKey[k], String(raw || "").trim().toLowerCase()])
+      .filter(([col, q]) => col && q);
+    if (needles.length) view = view.filter((r) => needles.every(([col, q]) => String(col.get?.(r) ?? "").toLowerCase().includes(q)));
+    const col = st.sort ? byKey[st.sort.key] : null;
+    if (col) {
+      // keys computed once per row (get() may format), then sort indices
+      const dir = st.sort.dir === "desc" ? -1 : 1;
+      const keys = view.map((r) => col.get?.(r));
+      const idx = keys.map((_, i) => i);
+      idx.sort((i, j) => {
+        const x = keys[i],
+          y = keys[j];
+        if (x == null && y == null) return 0;
+        if (x == null) return 1;
+        if (y == null) return -1;
+        const c = typeof x === "number" && typeof y === "number" ? x - y : collator.compare(String(x), String(y));
+        return c * dir;
+      });
+      view = idx.map((i) => view[i]);
+    }
+
+    // ---- header
+    // A column marked flex gets no width (table-layout:fixed lets it absorb the remainder)
+    // unless the user has explicitly resized it.
+    const w = (c) => {
+      const px = st.widths[c.key] ?? (c.flex ? null : (c.width ?? 100));
+      return px ? `style="width:${px}px"` : "";
+    };
+    const arrow = (c) =>
+      st.sort?.key === c.key ? `<i class="sort ${st.sort.dir}"></i>` : "";
+    const th = (c) =>
+      `<th ${c.num ? 'class="num" ' : ""}${w(c)} draggable="true" data-col="${c.key}" data-tid="${id}"` +
+      `${c.sortable === false ? "" : ' data-sort="1"'} title="${esc(c.label)} — click to sort, drag to reorder, drag the edge to resize">` +
+      `<span class="th-l">${esc(c.label)}${arrow(c)}</span>` +
+      `<span class="th-grip" data-resize="${c.key}"></span></th>`;
+    const lead = leading ? `<th style="width:${leading.width}px"></th>` : "";
+    const trail = trailing
+      ? `<th style="width:${trailing.width}px" class="th-tools"><span class="th-cols" data-cols="${id}" title="Columns">${window.icon ? window.icon("sliders", 14) : ""}</span></th>`
+      : "";
+    const head = `<tr>${lead}${visible.map(th).join("")}${trail}</tr>`;
+
+    // ---- optional filter row
+    const frow = st.showFilters
+      ? `<tr class="filters">${leading ? "<th></th>" : ""}${visible
+          .map((c) =>
+            c.filterable === false
+              ? "<th></th>"
+              : `<th><input data-filter="${c.key}" data-tid="${id}" value="${esc(st.filters[c.key] || "")}" placeholder="${esc(c.label)}"></th>`,
+          )
+          .join("")}${trailing ? "<th></th>" : ""}</tr>`
+      : "";
+
+    // ---- body
+    const body = view
+      .map((r) => {
+        const attrs = rowAttrs ? rowAttrs(r) : "";
+        const lc = leading ? `<td>${leading.cell(r)}</td>` : "";
+        const tc = trailing ? `<td class="td-tools">${trailing.cell(r)}</td>` : "";
+        return `<tr ${attrs}>${lc}${visible.map((c) => `<td ${c.num ? 'class="num"' : ""}>${c.cell(r)}</td>`).join("")}${tc}</tr>`;
+      })
+      .join("");
+
+    const ncols = visible.length + (leading ? 1 : 0) + (trailing ? 1 : 0);
+    const empty = view.length ? "" : `<tr class="tbl-empty"><td colspan="${ncols}">No rows${Object.keys(st.filters).some((k) => st.filters[k]) ? " match the filters" : ""}.</td></tr>`;
+    return `<div class="card grid" data-tid="${id}"><table class="dt"><thead>${head}${frow}</thead><tbody>${body}${empty}</tbody></table></div>`;
+  }
+
+  const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  const mutate = (id, fn) => {
+    const st = load(id);
+    fn(st);
+    save(id, st);
+    registry.get(id)?.rerender?.();
+  };
+
+  // ---------- delegated interactions (attached once) ----------
+  // sort
+  document.addEventListener("click", (e) => {
+    const cols = e.target.closest?.("[data-cols]");
+    if (cols) return openColumnsMenu(cols);
+    const th = e.target.closest?.("th[data-sort]");
+    if (!th || e.target.closest(".th-grip")) return;
+    const id = th.dataset.tid,
+      key = th.dataset.col;
+    mutate(id, (st) => {
+      const cur = st.sort;
+      if (!cur || cur.key !== key) st.sort = { key, dir: "asc" };
+      else if (cur.dir === "asc") st.sort = { key, dir: "desc" };
+      else st.sort = null; // third click clears
+    });
+  });
+
+  // filter input (debounced-ish via input event)
+  document.addEventListener("input", (e) => {
+    const inp = e.target.closest?.("input[data-filter]");
+    if (!inp) return;
+    const id = inp.dataset.tid,
+      key = inp.dataset.filter,
+      val = inp.value;
+    const st = load(id);
+    st.filters = st.filters || {};
+    if (val) st.filters[key] = val;
+    else delete st.filters[key];
+    save(id, st);
+    // re-render but keep focus + caret on the same filter input
+    registry.get(id)?.rerender?.();
+    const again = document.querySelector(`input[data-filter="${key}"][data-tid="${id}"]`);
+    if (again) {
+      again.focus();
+      again.setSelectionRange(again.value.length, again.value.length);
+    }
+  });
+
+  // resize + reorder (mousedown starts a drag; both tracked on document)
+  let drag = null;
+  document.addEventListener("mousedown", (e) => {
+    const grip = e.target.closest?.(".th-grip");
+    if (!grip) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const th = grip.closest("th");
+    drag = { type: "resize", id: th.dataset.tid, key: grip.dataset.resize, startX: e.clientX, startW: th.offsetWidth, th };
+    document.body.classList.add("col-resizing");
+  });
+  document.addEventListener("mousemove", (e) => {
+    if (drag?.type !== "resize") return;
+    const min = 40;
+    const wpx = Math.max(min, drag.startW + (e.clientX - drag.startX));
+    drag.w = wpx;
+    if (drag.th) drag.th.style.width = `${wpx}px`; // live feedback without a full re-render
+  });
+  document.addEventListener("mouseup", () => {
+    if (drag?.type === "resize" && drag.w) {
+      const { id, key, w } = drag;
+      mutate(id, (st) => {
+        st.widths = st.widths || {};
+        st.widths[key] = w;
+      });
+    }
+    drag = null;
+    document.body.classList.remove("col-resizing");
+  });
+
+  // reorder via native HTML5 drag on the <th>
+  let dragCol = null;
+  document.addEventListener("dragstart", (e) => {
+    const th = e.target.closest?.("th[data-col]");
+    if (!th || e.target.closest(".th-grip")) return;
+    dragCol = { id: th.dataset.tid, key: th.dataset.col };
+    e.dataTransfer.effectAllowed = "move";
+    th.classList.add("dragging");
+  });
+  document.addEventListener("dragover", (e) => {
+    const th = e.target.closest?.("th[data-col]");
+    if (dragCol && th && th.dataset.tid === dragCol.id) e.preventDefault();
+  });
+  document.addEventListener("drop", (e) => {
+    const th = e.target.closest?.("th[data-col]");
+    if (!dragCol || !th || th.dataset.tid !== dragCol.id) return;
+    e.preventDefault();
+    const target = th.dataset.col;
+    if (target === dragCol.key) return;
+    mutate(dragCol.id, (st) => {
+      const reg = registry.get(dragCol.id);
+      const keys = reg.columns.map((c) => c.key);
+      const order = (st.order || keys).filter((k) => keys.includes(k));
+      for (const k of keys) if (!order.includes(k)) order.push(k);
+      order.splice(order.indexOf(dragCol.key), 1);
+      order.splice(order.indexOf(target), 0, dragCol.key);
+      st.order = order;
+    });
+  });
+  document.addEventListener("dragend", () => {
+    for (const el of document.querySelectorAll("th.dragging")) el.classList.remove("dragging");
+    dragCol = null;
+  });
+
+  // columns visibility + filter toggle menu
+  function openColumnsMenu(anchor) {
+    const id = anchor.dataset.cols;
+    const reg = registry.get(id);
+    if (!reg || !window.menus) return;
+    const st = resolve(id, reg.columns);
+    const items = [
+      { label: st.showFilters ? "Hide filters" : "Show filters", icon: "magnifying-glass", run: () => mutate(id, (s) => (s.showFilters = !s.showFilters)) },
+      { label: "Reset layout", icon: "arrows-clockwise", run: () => mutate(id, (s) => { s.order = undefined; s.widths = {}; s.hidden = []; s.sort = null; s.filters = {}; s.showFilters = false; }) },
+      { section: "Columns" },
+      ...reg.columns.map((c) => ({
+        label: c.label.charAt(0).toUpperCase() + c.label.slice(1),
+        icon: st.hidden.includes(c.key) ? undefined : "check",
+        run: () =>
+          mutate(id, (s) => {
+            s.hidden = s.hidden || [];
+            const i = s.hidden.indexOf(c.key);
+            if (i >= 0) s.hidden.splice(i, 1);
+            else s.hidden.push(c.key);
+          }),
+      })),
+    ];
+    window.menus.open(anchor, { items });
+  }
+
+  window.dataTable = dataTable;
+})();

package/web/viz.js

@@ -0,0 +1,272 @@
+// Inline-SVG chart helpers. No dependencies, no build step.
+// Colour rules: agents get a fixed categorical slot (never cycled); part-to-whole of one thing
+// (token composition) uses one hue stepped light→dark; heatmap is one hue by opacity.
+
+const AGENT_SLOT = { "claude-code": 1, codex: 2, gemini: 3, grok: 4, aider: 5, cline: 6, opencode: 7 };
+const agentColor = (a) => `var(--c${AGENT_SLOT[a] ?? 0})`;
+const agentName = (a) => ({ "claude-code": "Claude", codex: "Codex", gemini: "Gemini", grok: "Grok", aider: "Aider", cline: "Cline", opencode: "opencode" }[a] ?? a);
+const AGENT_ORDER = Object.keys(AGENT_SLOT);
+const agentSort = (a, b) => (AGENT_SLOT[a] ?? 99) - (AGENT_SLOT[b] ?? 99);
+
+const fmtUsd = (n) => (n == null ? "—" : `$${n < 10 ? n.toFixed(2) : n.toFixed(0)}`);
+const fmtTok = (n) => (n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(0)}k` : String(n | 0));
+const p2 = (n) => (n < 10 ? `0${n}` : String(n));
+const hm = (ts) => { const d = new Date(ts); return `${p2(d.getHours())}:${p2(d.getMinutes())}`; }; // cheap "HH:MM" (toTimeString is slow)
+const attr = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+
+/** Legend: swatch + label per series, in fixed order. */
+function legend(keys, name = agentName, color = agentColor) {
+  return `<div class="legend">${keys.map((k) => `<span><i style="background:${color(k)}"></i>${attr(name(k))}</span>`).join("")}</div>`;
+}
+
+/**
+ * Stacked column chart. days: ["2026-08-07", …]; series: { key: number[] } aligned to days.
+ * Thin columns, 2px surface gaps between segments, baseline, hover tooltip per column.
+ */
+function stackedColumns(days, series, { height = 150, fmt = fmtUsd, color = agentColor, name = agentName, sort = agentSort, label = (d) => d.slice(5) } = {}) {
+  const keys = Object.keys(series).sort(sort);
+  const totals = days.map((_, i) => keys.reduce((a, k) => a + (series[k][i] ?? 0), 0));
+  const max = Math.max(1e-9, ...totals);
+  const W = 1000, H = height, padB = 18, padT = 6, plotH = H - padB - padT;
+  const n = days.length, slot = W / n, bw = Math.min(26, slot * 0.6);
+  const y = (v) => padT + plotH - (v / max) * plotH;
+  const ticks = niceTicks(max, 3);
+  const grid = ticks.map((t) => `<line x1="0" x2="${W}" y1="${y(t)}" y2="${y(t)}" class="grid"/><text x="0" y="${y(t) - 3}" class="ax">${fmt(t)}</text>`).join("");
+  const cols = days.map((d, i) => {
+    let acc = 0;
+    const x = i * slot + (slot - bw) / 2;
+    const segs = keys
+      .map((k) => {
+        const v = series[k][i] ?? 0;
+        if (!v) return "";
+        const y1 = y(acc + v), y0 = y(acc);
+        acc += v;
+        const h = Math.max(0, y0 - y1 - (acc - v > 0 ? 2 : 0));
+        const top = acc === totals[i] ? 3 : 0; // round only the topmost data-end
+        return `<path d="${roundTop(x, y1, bw, h, top)}" fill="${color(k)}"/>`;
+      })
+      .join("");
+    const tip = `<b>${d}</b><br>${keys.filter((k) => series[k][i]).map((k) => `<i style="background:${color(k)}"></i>${name(k)} ${fmt(series[k][i])}`).join("<br>")}${keys.length > 1 ? `<br><span>total ${fmt(totals[i])}</span>` : ""}`;
+    const lbl = n <= 16 || i % Math.ceil(n / 16) === 0 ? `<text x="${x + bw / 2}" y="${H - 4}" class="ax mid">${label(d)}</text>` : "";
+    return `<g class="col" data-tip="${attr(tip)}"><rect x="${i * slot}" y="0" width="${slot}" height="${H}" fill="transparent"/>${segs}${lbl}</g>`;
+  });
+  return `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" class="chart" style="height:${H}px">${grid}<line x1="0" x2="${W}" y1="${y(0)}" y2="${y(0)}" class="base"/>${cols.join("")}</svg>`;
+}
+
+/** Weekday × hour heat grid, one hue by opacity. cells: [{dow, hour, v}] */
+function heatmap(cells, { fmt = fmtUsd, label = "cost" } = {}) {
+  const grid = Array.from({ length: 7 }, () => Array(24).fill(0));
+  for (const c of cells) grid[c.dow][c.hour] += c.v ?? 0;
+  const max = Math.max(1e-9, ...grid.flat());
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const order = [1, 2, 3, 4, 5, 6, 0];
+  const cw = 100 / 24;
+  const rows = order.map(
+    (d, r) =>
+      `<div class="hm-lbl">${days[d]}</div><div class="hm-row">${grid[d]
+        .map((v, h) => `<i data-tip="<b>${days[d]} ${String(h).padStart(2, "0")}:00</b><br>${label} ${fmt(v)}" style="opacity:${v ? 0.15 + 0.85 * Math.sqrt(v / max) : 0}"></i>`)
+        .join("")}</div>`,
+  );
+  const hours = Array.from({ length: 24 }, (_, h) => (h % 3 === 0 ? `<span style="left:${h * cw}%">${String(h).padStart(2, "0")}</span>` : "")).join("");
+  return `<div class="hm">${rows.join("")}<div></div><div class="hm-hours">${hours}</div></div>`;
+}
+
+/** Tiny line for a table cell. pts: number[]; 88×20. */
+function sparkline(pts, color = "var(--acc)") {
+  if (!pts || pts.length < 2) return `<svg viewBox="0 0 88 20" class="spark"></svg>`;
+  const max = Math.max(1e-9, ...pts);
+  const step = 88 / (pts.length - 1);
+  const d = pts.map((v, i) => `${i ? "L" : "M"}${(i * step).toFixed(1)},${(18 - (v / max) * 16).toFixed(1)}`).join("");
+  const last = pts[pts.length - 1];
+  return `<svg viewBox="0 0 88 20" class="spark" preserveAspectRatio="none"><path d="${d}" stroke="${color}"/><circle cx="88" cy="${(18 - (last / max) * 16).toFixed(1)}" r="2" fill="${color}"/></svg>`;
+}
+
+/** Horizontal part-to-whole bar, one hue stepped. parts: [{label, v}] in light→dark order. */
+function compositionBar(parts, { fmt = fmtTok } = {}) {
+  const total = parts.reduce((a, p) => a + p.v, 0) || 1;
+  const steps = ["var(--acc-1)", "var(--acc-2)", "var(--acc-3)", "var(--acc-4)", "var(--acc-5)"];
+  const segs = parts
+    .map((p, i) => (p.v ? `<i data-tip="<b>${attr(p.label)}</b><br>${fmt(p.v)} · ${((100 * p.v) / total).toFixed(1)}%" style="flex:${p.v};background:${steps[i] ?? steps.at(-1)}"></i>` : ""))
+    .join("");
+  const lg = parts.filter((p) => p.v).map((p, i) => `<span><i style="background:${steps[parts.indexOf(p)] ?? steps.at(-1)}"></i>${attr(p.label)} <em>${(100 * p.v) / total < 1 ? "<1" : ((100 * p.v) / total).toFixed(0)}%</em></span>`).join("");
+  return `<div class="comp">${segs}</div><div class="legend small">${lg}</div>`;
+}
+
+/** Horizontal bars for a ranked list (tool mix). rows: [[label, n]] */
+function hbars(rows, color = "var(--acc)") {
+  const max = Math.max(1, ...rows.map((r) => r[1]));
+  return `<div class="hbars">${rows
+    .map(([k, v]) => `<div class="hb"><span class="k">${attr(k)}</span><span class="t"><i style="width:${(100 * v) / max}%;background:${color}"></i></span><span class="n">${v}</span></div>`)
+    .join("")}</div>`;
+}
+
+/** Per-turn column strip for a session: cost per turn over time. turns: [{ts, costUsd, output, model}] */
+// Memoised on (count, last turn id, height): the session view re-renders on every event, the turns rarely change.
+let stripMemo = { key: "", svg: "" };
+function turnStrip(turns, { height = 64 } = {}) {
+  const key = `${turns.length}|${turns[turns.length - 1]?.id ?? ""}|${turns[turns.length - 1]?.costUsd ?? ""}|${height}`;
+  if (stripMemo.key === key) return stripMemo.svg;
+  const svg = turnStripRender(turns, height);
+  stripMemo = { key, svg };
+  return svg;
+}
+function turnStripRender(turns, height) {
+  const pts = turns.filter((t) => !t.sidechain && !t.agentId);
+  if (!pts.length) return "";
+  const vals = pts.map((t) => t.costUsd ?? 0);
+  const max = Math.max(1e-9, ...vals);
+  const W = 1000, H = height, n = pts.length, slot = W / n, bw = Math.max(1.5, Math.min(10, slot * 0.7));
+  const bars = pts
+    .map((t, i) => {
+      const h = ((t.costUsd ?? 0) / max) * (H - 8);
+      const x = i * slot + (slot - bw) / 2;
+      const tip = `<b>turn ${i + 1}</b> · ${hm(t.ts)}<br>${fmtUsd(t.costUsd)} · ${fmtTok(t.output)} out${t.thinking ? ` · ${fmtTok(t.thinking)} thinking` : ""}<br><span>${attr(t.model ?? "")}</span>`;
+      return `<g data-tip="${attr(tip)}"><rect x="${i * slot}" y="0" width="${slot}" height="${H}" fill="transparent"/><path d="${roundTop(x, H - 2 - h, bw, h, 2)}" fill="var(--acc)"/></g>`;
+    })
+    .join("");
+  return `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" class="chart" style="height:${H}px"><line x1="0" x2="${W}" y1="${H - 2}" y2="${H - 2}" class="base"/>${bars}</svg>`;
+}
+
+/**
+ * Session lanes over a time window. sessions: [{id,title,agent,projectId,startedAt,lastSeenAt,state,costUsd}]
+ * One row per session, grouped by project; bar from start to last-seen, coloured by agent.
+ */
+function timeline(sessions, { from, to, projName, now = Date.now() } = {}) {
+  const span = Math.max(1, to - from);
+  const x = (t) => Math.min(100, Math.max(0, (100 * (t - from)) / span));
+  const byProj = new Map();
+  for (const s of sessions) (byProj.get(s.projectId) ?? byProj.set(s.projectId, []).get(s.projectId)).push(s);
+  const hours = [];
+  for (let t = Math.ceil(from / 3.6e6) * 3.6e6; t <= to; t += 3.6e6) hours.push(t);
+  const stepEvery = Math.max(1, Math.round(hours.length / 12));
+  const axis = `<div class="tl-axis">${hours.map((t, i) => (i % stepEvery ? "" : `<span style="left:${x(t)}%">${new Date(t).getHours().toString().padStart(2, "0")}:00</span>`)).join("")}</div>`;
+  const gridLines = hours.map((t) => `<i style="left:${x(t)}%"></i>`).join("");
+  const nowLine = now >= from && now <= to ? `<b class="tl-now" style="left:${x(now)}%"></b>` : "";
+  const groups = [...byProj.entries()].map(([pid, list]) => {
+    const rows = list
+      .sort((a, b) => (a.startedAt < b.startedAt ? -1 : 1))
+      .map((s) => {
+        const a = Math.max(from, new Date(s.startedAt).getTime());
+        const b = Math.min(to, new Date(s.lastSeenAt).getTime());
+        const live = s.state === "active" || s.state === "waiting";
+        const tip = `<b>${attr(s.title ?? s.id.slice(0, 8))}</b><br><i style="background:${agentColor(s.agent)}"></i>${agentName(s.agent)} · ${s.state}<br>${hm(s.startedAt)} → ${hm(s.lastSeenAt)} · ${fmtUsd(s.costUsd)} · ${s.turns} turns`;
+        return `<div class="tl-row" data-s="${s.id}"><span class="tl-name">${attr(s.title ?? s.id.slice(0, 8))}</span><span class="tl-track">${gridLines}<i data-tip="${attr(tip)}" class="${live ? "live" : ""}" style="left:${x(a)}%;width:${Math.max(0.4, x(b) - x(a))}%;background:${agentColor(s.agent)};color:${agentColor(s.agent)}"></i></span></div>`;
+      })
+      .join("");
+    return `<div class="tl-group"><div class="tl-proj">${attr(projName(pid))}<small>${list.length}</small></div>${rows}</div>`;
+  });
+  return `<div class="tl"><div class="tl-row head"><span class="tl-name"></span><span class="tl-track">${axis}${nowLine}</span></div>${groups.join("")}</div>`;
+}
+
+// ---- helpers
+/**
+ * Single-series line with area fill (cumulative spend). days: string[]; values: number[] aligned.
+ * Hover column per point, tooltip shows the value and its delta from the previous point.
+ */
+function line(days, values, { height = 150, fmt = fmtUsd, color = "var(--acc)", label = (d) => d.slice(5) } = {}) {
+  const n = days.length;
+  if (!n) return "";
+  const max = Math.max(1e-9, ...values);
+  const W = 1000, H = height, padB = 18, padT = 6, plotH = H - padB - padT;
+  const slot = W / n;
+  const x = (i) => i * slot + slot / 2, y = (v) => padT + plotH - (v / max) * plotH;
+  const ticks = niceTicks(max, 3);
+  const grid = ticks.map((t) => `<line x1="0" x2="${W}" y1="${y(t)}" y2="${y(t)}" class="grid"/><text x="0" y="${y(t) - 3}" class="ax">${fmt(t)}</text>`).join("");
+  const d = values.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join("");
+  const area = `${d}L${x(n - 1).toFixed(1)},${y(0)}L${x(0).toFixed(1)},${y(0)}Z`;
+  const hover = days
+    .map((day, i) => {
+      const delta = i ? values[i] - values[i - 1] : values[0];
+      const tip = `<b>${day}</b><br>${fmt(values[i])}<br><span>${delta >= 0 ? "+" : ""}${fmt(delta)} that day</span>`;
+      const lbl = n <= 16 || i % Math.ceil(n / 16) === 0 ? `<text x="${x(i)}" y="${H - 4}" class="ax mid">${label(day)}</text>` : "";
+      return `<g class="pt" data-tip="${attr(tip)}"><rect x="${i * slot}" y="0" width="${slot}" height="${H}" fill="transparent"/><circle cx="${x(i)}" cy="${y(values[i])}" r="3" fill="${color}"/>${lbl}</g>`;
+    })
+    .join("");
+  return `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" class="chart line" style="height:${H}px">${grid}<line x1="0" x2="${W}" y1="${y(0)}" y2="${y(0)}" class="base"/><path d="${area}" fill="${color}" opacity=".12"/><path d="${d}" fill="none" stroke="${color}" stroke-width="2" vector-effect="non-scaling-stroke"/>${hover}</svg>`;
+}
+
+/**
+ * GitHub-style activity calendar: the last `weeks` weeks, one cell per day, one hue by opacity.
+ * byDay: { "2026-08-20": number }. Returns markup plus the streak numbers it computed.
+ */
+function calendar(byDay, { weeks = 52, fmt = fmtUsd, label = "cost", today = new Date() } = {}) {
+  const end = new Date(today); end.setHours(0, 0, 0, 0);
+  const start = new Date(end); start.setDate(end.getDate() - (weeks * 7 - 1) - end.getDay());
+  const iso = localDay;
+  const vals = Object.values(byDay).filter((v) => v > 0);
+  const max = Math.max(1e-9, ...vals);
+  const cols = [], months = [];
+  let lastMonth = -1;
+  for (let c = 0, d = new Date(start); d <= end; c++) {
+    const cells = [];
+    for (let r = 0; r < 7 && d <= end; r++, d.setDate(d.getDate() + 1)) {
+      if (r === 0 && d.getMonth() !== lastMonth) { lastMonth = d.getMonth(); months.push([c, d.toLocaleString(undefined, { month: "short" })]); }
+      const k = iso(d), v = byDay[k] ?? 0;
+      cells.push(`<i data-tip="<b>${k}</b><br>${v ? `${label} ${fmt(v)}` : "no activity"}" style="opacity:${v ? 0.18 + 0.82 * Math.sqrt(v / max) : 0}"></i>`);
+    }
+    cols.push(`<div class="cal-col">${cells.join("")}</div>`);
+  }
+  const mk = months.filter(([c], i) => i === 0 ? c < cols.length - 2 : true).map(([c, m]) => `<span style="left:${(100 * c) / cols.length}%">${m}</span>`).join("");
+  return `<div class="cal"><div class="cal-months">${mk}</div><div class="cal-grid" style="grid-template-columns:repeat(${cols.length},1fr)">${cols.join("")}</div></div>`;
+}
+
+/** "YYYY-MM-DD" of a Date in the viewer's local zone (the daemon buckets days in localtime too). */
+const localDay = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+
+/** Current + longest run of consecutive active days. days: sorted "YYYY-MM-DD" strings with activity. */
+function streaks(days, today = new Date()) {
+  const set = new Set(days);
+  const iso = localDay;
+  let longest = 0, run = 0, prev = null;
+  for (const d of [...set].sort()) {
+    const t = Date.parse(`${d}T00:00:00Z`); // UTC: exact 24h steps, immune to DST
+    run = prev != null && t - prev === 86400e3 ? run + 1 : 1;
+    prev = t;
+    longest = Math.max(longest, run);
+  }
+  let current = 0;
+  const d = new Date(today); d.setHours(0, 0, 0, 0);
+  if (!set.has(iso(d))) d.setDate(d.getDate() - 1); // today may not have started yet
+  while (set.has(iso(d))) { current++; d.setDate(d.getDate() - 1); }
+  return { current, longest };
+}
+
+function roundTop(x, y, w, h, r) {
+  if (h <= 0) return "";
+  r = Math.min(r, w / 2, h);
+  return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
+}
+function niceTicks(max, n) {
+  const raw = max / n, mag = 10 ** Math.floor(Math.log10(raw));
+  const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? mag * 10;
+  const out = [];
+  for (let v = step; v <= max; v += step) out.push(v);
+  return out;
+}
+
+// ---- shared tooltip
+(() => {
+  const tip = document.createElement("div");
+  tip.id = "tip";
+  document.body.appendChild(tip);
+  let cur = null, rect = null, raf = 0, last = null;
+  const place = () => {
+    raf = 0;
+    if (!cur || !last) return;
+    rect ??= tip.getBoundingClientRect(); // measured once per tooltip content, not per mouse move
+    const left = Math.min(window.innerWidth - rect.width - 8, last.x + 14);
+    const top = last.y + 16 + rect.height > window.innerHeight ? last.y - rect.height - 8 : last.y + 16;
+    tip.style.transform = `translate(${left}px,${top}px)`;
+  };
+  document.addEventListener("mousemove", (e) => {
+    const el = e.target.closest?.("[data-tip]");
+    if (el !== cur) {
+      cur = el;
+      rect = null;
+      if (el) { tip.innerHTML = el.dataset.tip; tip.style.display = "block"; } else tip.style.display = "none";
+    }
+    if (el) { last = { x: e.clientX, y: e.clientY }; if (!raf) raf = requestAnimationFrame(place); }
+  });
+})();
+
+window.viz = { stackedColumns, line, calendar, streaks, localDay, heatmap, sparkline, compositionBar, hbars, turnStrip, timeline, legend, agentColor, agentName, AGENT_ORDER, agentSort };