@adrrr/tarmac 0.9.0 → 0.10.0

package/dist/history-view.js

@@ -17,7 +17,7 @@
 // `test/history-view`, and shipped to the browser as its own source through `String`. The
 // page runs the function the suite ran. Everything below `historyScript` is pixels: geometry,
 // labels and hit-testing, which no assertion can read and none pretends to.
-import { INTERACTIVE } from './map.js';
+import { INTERACTIVE } from './sessions.js';
 /** How many hues the palette has before it starts again. Eight is what a legend can be read at. */
 const SLOTS = 8;
 /**
@@ -31,6 +31,16 @@ const SLOTS = 8;
 const RESET_WATCHED_MS = 600000;
 const MIN = 60000;
 const HOUR = 3600000;
+/**
+ * The longest window this view will draw over, in days.
+ *
+ * Both ends of a range's window come off the wire, and the page's rule is that nothing off the
+ * wire may take it down. A `to` a century out is 1800 columns and 876,000 hour slots in every
+ * band, reallocated on every resize, every tap and every change of scheme — not a throw, and
+ * worse than one: a tab that stops answering with no error to read. Sixty times the longest
+ * range, which no answer this page understands can reach.
+ */
+const MAX_DAYS = 1800;
 // ── the transforms, which are also the source the browser runs ───────────────────────────
 //
 // Written in the page script's own dialect — `var`, plain functions, no destructuring — for
@@ -220,15 +230,16 @@ export function ctxLines(samples, cadence, roster) {
  * reduced to the highest any of them reached — the same reduction the reader already made,
  * one level up.
  *
- * An hour nobody wrote a line in is absent from the reader's answer, so the grid is rebuilt
- * from the clocks rather than from the array's length: a serve that was off for a day leaves a
- * day-wide hole, not a day the chart quietly closes up.
+ * An hour nobody wrote a line in is absent from the reader's answer, so the grid is the RANGE's
+ * rather than the array's length: a serve that was off for a day leaves a day-wide hole, and a
+ * journal younger than the range it is asked for starts where it starts instead of being
+ * stretched across a week it was not running for.
  */
-export function ctxRows(hours, roster) {
+export function ctxRows(hours, roster, from, to) {
     if (hours.length === 0)
         return [];
-    var t0 = hours[0].t;
-    var n = gridLen(t0, hours[hours.length - 1].t, HOUR);
+    var t0 = hourOf(from);
+    var n = hourSlots(from, to);
     if (n === 0)
         return [];
     var anchored = false;
@@ -280,6 +291,66 @@ export function hourOf(t) {
     d.setMinutes(0, 0, 0);
     return d.getTime();
 }
+/**
+ * A moment the page may compute with.
+ *
+ * `typeof` and not `isFinite` alone, because `isFinite(null)` is true and `JSON.stringify(NaN)`
+ * is the string `null`: on a JSON wire, `null` is the one non-number that can arrive where a
+ * clock belongs, and it is exactly the one a bare `isFinite` waves through — as the zero it
+ * coerces to, which is the first of January 1970.
+ */
+export function moment(v) {
+    return typeof v === 'number' && isFinite(v);
+}
+/** The local midnight that opens the day a moment falls in. */
+export function startOfDay(t) {
+    var d = new Date(t);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+}
+/**
+ * The next local midnight, which is 23, 24 or 25 hours along.
+ *
+ * Calendar arithmetic, never 24-hour blocks: `history-range` walks the day files by this rule and
+ * everything drawn under them has to walk by the same one. Stepped by 86400000 instead, the
+ * morning a clock falls back lands back inside the day it just left — an eighth slot in a week of
+ * seven, the same name twice, and every column after it labelled with the day before.
+ */
+export function nextDay(t) {
+    var d = new Date(t);
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 0, 0, 0, 0).getTime();
+}
+/**
+ * Every local day a range covers, oldest first: the days that were ASKED for.
+ *
+ * This is the whole of the fix in #168. A long range used to be drawn over the days that happened
+ * to be in the journal, so a serve one day old drew a single column alone in an empty plot — and
+ * the identical picture at 7d and at 30d, since one day is one column either way. The window the
+ * reader charged its records against is the domain, and a day nobody wrote in is a slot with
+ * nothing in it rather than a day the axis closes up.
+ *
+ * Bounded by `MAX_DAYS`, which every grid in this file is: the two ends come off the wire, and a
+ * `to` a century out would walk this loop for as long as the tab was open.
+ */
+export function daySlots(from, to) {
+    var out = [];
+    if (!moment(from) || !moment(to))
+        return out;
+    for (var d = startOfDay(from); d < to && out.length < MAX_DAYS; d = nextDay(d))
+        out.push(d);
+    return out;
+}
+/**
+ * How many hour slots a range's window holds, to the same ceiling the day grid keeps.
+ *
+ * One place rather than two identical expressions: the bands and the quota curve are drawn over
+ * one window and a grid either of them read differently would be two charts about two ranges.
+ */
+export function hourSlots(from, to) {
+    if (!moment(from) || !moment(to))
+        return 0;
+    return Math.min(gridLen(hourOf(from), to - HOUR, HOUR), MAX_DAYS * 24);
+}
 /**
  * 24h cost: what each project spent in each HOUR, out of a wire that carries running totals.
  *
@@ -366,33 +437,51 @@ export function costHourly(samples, roster) {
  * keeps its colour and its place in the column from Monday to Sunday and can be followed
  * across the week. A stack sorted by rank would have every project moving up and down the
  * column as its day went, which is a chart nobody can read sideways.
+ *
+ * A column a day of the RANGE, not a column a day of the journal. A day nobody wrote in is a
+ * column with nothing in it: the bars already draw an unread hour that way at 24h, and the two
+ * long ranges used to be the exception — one day on disk was one bar, centred in an empty plot,
+ * at 7d and at 30d alike.
  */
-export function costDaily(days, roster) {
+export function costDaily(days, roster, from, to) {
     var buckets = [];
     var measured = [];
-    var z;
+    var i, z;
     for (z = 0; z < roster.length; z++)
         measured.push(false);
-    for (var i = 0; i < days.length; i++) {
+    // A range nothing was written in keeps the verdict it has always had. Thirty empty columns
+    // over "no readings in this range" is a chart claiming to have read a month.
+    if (days.length === 0)
+        return { projects: roster, buckets: buckets, measured: measured };
+    var slots = daySlots(from, to);
+    for (i = 0; i < slots.length; i++) {
         var by = [];
-        var n = 0;
         for (z = 0; z < roster.length; z++)
             by.push(0);
+        buckets.push({ t: slots[i], span: nextDay(slots[i]) - slots[i], n: 0, by: by });
+    }
+    for (i = 0; i < days.length; i++) {
+        var t = dayStart(days[i].date);
+        var b = -1;
+        // A day nothing can date has no place on an axis, and neither has one the range never asked
+        // for. Dropped rather than drawn at NaN or at an edge, where it would take the whole plot's
+        // geometry or its arithmetic with it: the reader names its files after local days, and a
+        // directory can hold something the reader did not put there.
+        if (!isFinite(t))
+            continue;
+        for (z = 0; z < buckets.length; z++)
+            if (buckets[z].t === t)
+                b = z;
+        if (b === -1)
+            continue;
         var list = days[i].byProject || [];
         for (var j = 0; j < list.length; j++)
             for (var k = 0; k < roster.length; k++)
                 if (roster[k].name === list[j].project && typeof list[j].costUsd === 'number' && isFinite(list[j].costUsd)) {
-                    by[k] += list[j].costUsd;
+                    buckets[b].by[k] += list[j].costUsd;
                     measured[k] = true;
-                    n += 1;
+                    buckets[b].n += 1;
                 }
-        var t = dayStart(days[i].date);
-        // A day nothing can date has no place on an axis. It is dropped rather than drawn at NaN,
-        // where it would take the whole plot's geometry with it: the reader names its files after
-        // local days, and a directory can hold something the reader did not put there.
-        if (!isFinite(t))
-            continue;
-        buckets.push({ t: t, span: 86400000, n: n, by: by });
     }
     return { projects: roster, buckets: buckets, measured: measured };
 }
@@ -482,12 +571,14 @@ export function quotaOfSamples(samples, cadence) {
  * the chart draws such a marker faint and says "about": a firm line through a moment nobody
  * measured is the one thing this view must not draw.
  */
-export function quotaOfHours(hours, resets) {
+export function quotaOfHours(hours, resets, from, to) {
     var out = { t0: 0, step: HOUR, five: [], seven: [], resets: [] };
     if (hours.length === 0)
         return out;
-    out.t0 = hours[0].t;
-    var n = gridLen(out.t0, hours[hours.length - 1].t, HOUR);
+    // The range's own grid, like the bands next door: a week the serve was up for one day of is a
+    // curve at the end of a week, not a curve stretched over one.
+    out.t0 = hourOf(from);
+    var n = hourSlots(from, to);
     if (n === 0)
         return out;
     for (var z = 0; z < n; z++) {
@@ -592,6 +683,11 @@ const PURE = [
     ctxLines,
     ctxRows,
     hourOf,
+    moment,
+    startOfDay,
+    nextDay,
+    daySlots,
+    hourSlots,
     costHourly,
     costDaily,
     dayStart,
@@ -622,7 +718,8 @@ export const HISTORY_CSS = `
   .view-history { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
   #ctx, .hist-off, .hist-empty, .view-history > .note { grid-column:1 / -1; }
   .view-history > .note { margin-top:0; }
-  .chart { border:1px solid var(--line); border-radius:12px; padding:.65rem .8rem .7rem; min-width:0; }
+  .chart { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
+           box-shadow:var(--shadow-1), var(--edge); padding:.65rem .8rem .7rem; min-width:0; }
   /* The margin is what the way-back-to-now's tap target is drawn into. That overlay reaches
      .85rem below the button, and anything of it past this margin lands on the canvas and
      swallows taps meant for the top of the plot. The two numbers are the same on purpose. */
@@ -634,7 +731,7 @@ export const HISTORY_CSS = `
   .chart-sub.at { color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums; }
   /* The one number a chart leads with, in the gauge's weight. Never a hero: the fleet is
      the subject, this is its total. */
-  .chart-stat { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:650; font-size:.9rem; white-space:nowrap; }
+  .chart-stat { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; font-size:.9rem; white-space:nowrap; }
   .to-now { font:inherit; font-size:.72rem; font-weight:600; color:var(--fg); background:transparent;
             border:1px solid var(--line); border-radius:99px; padding:.02rem .6rem; cursor:pointer; }
   /* pan-y rather than none: a drag along the chart moves the cursor, and a drag up the page
@@ -673,17 +770,27 @@ export const HISTORY_CSS = `
   .hist-range .range-name { font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); margin-right:.2rem; }
   .hist-range button { font:inherit; font-size:.8rem; color:var(--fg); background:transparent; border:1px solid var(--line);
             border-radius:99px; padding:.15rem .8rem; cursor:pointer; font-variant-numeric:tabular-nums; }
-  .hist-range button[aria-pressed="true"] { font-weight:600; background:color-mix(in srgb, var(--line) 55%, transparent); border-color:var(--dim); }
+  /* The chosen range as a raised chip on the page's floor, the same figure the tabs cut — with
+     one difference from the tabs that matters. There the ink carries the state (inactive --dim
+     at 5.6:1, active --fg at 18.8), so the chip is free to be decoration. Here all three
+     buttons are --fg already, so ink says nothing and weight alone would be the whole signal.
+     The border keeps --dim (4.8:1 on the floor) rather than --line-strong (1.8): a control this
+     page identifies by its edge needs an edge somebody can see. */
+  .hist-range button[aria-pressed="true"] { font-weight:600; background:var(--surface);
+            border-color:var(--dim); box-shadow:var(--shadow-1); }
   .hist-range button:disabled { opacity:.4; cursor:default; }
   .hist-range .covers { color:var(--dim); font-size:.75rem; margin-left:.4rem; }
   /* Off is not a fault, so it is not a .warn: a framed sentence in the page's own ink, with
      the one key that turns it on. */
-  .hist-off { border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; font-size:.8rem; line-height:1.5; }
+  .hist-off { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
+            box-shadow:var(--shadow-1), var(--edge); padding:.5rem .7rem; font-size:.8rem; line-height:1.5; }
   /* Same frame as "off" above, and for the same reason: a serve that has been running a minute
      is not a fault either. It sits directly over the charts it is about, because "where are my
      curves" is a question asked while looking at the place they will be. */
-  .hist-empty { border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; font-size:.8rem; line-height:1.5; }
-  .hist-off code, .hist-empty code, .view-history .note code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95em; }
+  .hist-empty { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
+            box-shadow:var(--shadow-1), var(--edge); padding:.5rem .7rem; font-size:.8rem; line-height:1.5; }
+  .hist-off code, .hist-empty code, .view-history .note code { font-family:var(--mono); font-size:.95em;
+            background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:.05rem .3rem; }
   /* The other two views are in the shell on every address — the tabs between them are meant to
      cost nothing — so the one being read hides the pair it stands in front of. History is the
      exception and ships only on its own address: it carries a script and three canvases, and a
@@ -781,7 +888,7 @@ export function historyScript() {
     return `
 (function () {
   var INTERACTIVE = ${JSON.stringify(INTERACTIVE)};
-  var SLOTS = ${SLOTS}, RESET_WATCHED_MS = ${RESET_WATCHED_MS}, MIN = ${MIN}, HOUR = ${HOUR};
+  var SLOTS = ${SLOTS}, RESET_WATCHED_MS = ${RESET_WATCHED_MS}, MIN = ${MIN}, HOUR = ${HOUR}, MAX_DAYS = ${MAX_DAYS};
   var H = ${JSON.stringify(HEIGHTS)};
   var DOW = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
   var MON = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
@@ -827,18 +934,20 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
   function dayWord(t) { var d = new Date(t); return DOW[d.getDay()] + ' ' + d.getDate(); }
   function monWord(t) { var d = new Date(t); return MON[d.getMonth()] + ' ' + d.getDate(); }
   function money(v) { return '$' + v.toFixed(2); }
-  function startOfDay(t) { var d = new Date(t); d.setHours(0, 0, 0, 0); return d.getTime(); }
-  // The next local midnight, which is 23, 24 or 25 hours along. Calendar arithmetic, never
-  // 24-hour blocks: history-range walks the day files by this rule and the axis under them has
-  // to walk by the same one. Stepped by 86400000 instead, the morning a clock falls back lands
-  // back inside the day it just left — an eighth tick in a week of seven, the same name twice,
-  // and every column after it labelled with the day before.
-  function nextDay(t) { var d = new Date(t); return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 0, 0, 0, 0).getTime(); }
   function cssVar(name) {
     if (typeof getComputedStyle !== 'function' || !document.documentElement) return '#888';
     return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || '#888';
   }
   function slotColor(slot) { return cssVar('--s' + slot); }
+  /* How faint a series goes when it is not the one being read — deeper when another has been
+     isolated by tapping its key, because then there is a subject and everything else is
+     context. Both numbers come from the sheet: a dark surface needs less fading than a white
+     one, and the sheet is the only thing here that knows which one it is on. The literals are
+     the light values, for a browser that cannot compute a style at all. */
+  function fadeAlpha(iso) {
+    var v = parseFloat(cssVar(iso !== null ? '--fade-iso' : '--fade'));
+    return v > 0 && v <= 1 ? v : (iso !== null ? .3 : .72);
+  }
   var ENT = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
   function esc(v) { return String(v === null || v === undefined ? '\\u2014' : v).replace(/[&<>"']/g, function (c) { return ENT[c]; }); }
   var PHONE = typeof matchMedia === 'function' ? matchMedia('(max-width: 46rem)') : { matches: false };
@@ -856,7 +965,7 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
     canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr);
     var c = canvas.getContext('2d');
     c.setTransform(dpr, 0, 0, dpr, 0, 0);
-    return { c: c, w: w, h: h, fg: cssVar('--fg'), dim: cssVar('--dim'), line: cssVar('--line'), bg: cssVar('--bg') };
+    return { c: c, w: w, h: h, fg: cssVar('--fg'), dim: cssVar('--dim'), line: cssVar('--line'), bg: cssVar('--surface') };
   }
   function plotBox(g) { return { l: 8, r: g.w - 8, t: 12, b: g.h - 18 }; }
   function hair(g, x1, y1, x2, y2, color, alpha) {
@@ -880,16 +989,21 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
   function timeTicks(g, b, t0, t1, range) {
     var ticks = [], x, d;
     if (t1 <= t0) t1 = t0 + 1;
+    // The walk's own ceiling, whatever ends it is handed. The grids above are capped in days and
+    // in hours; this is the one loop whose length is the SPAN rather than a grid, and an axis
+    // carrying more names than a reader can count is not an axis — it is three hundred thousand
+    // canvas calls a frame, drawn again on every resize, every tap and every change of scheme.
+    var MAX_TICKS = 400;
     if (range === '24h') {
       var t = new Date(t0); t.setMinutes(0, 0, 0);
-      for (x = t.getTime(); x <= t1; x += HOUR) if (new Date(x).getHours() % 6 === 0 && x >= t0) ticks.push({ t: x, text: hhmm(x) });
+      for (x = t.getTime(); x <= t1 && ticks.length < MAX_TICKS; x += HOUR) if (new Date(x).getHours() % 6 === 0 && x >= t0) ticks.push({ t: x, text: hhmm(x) });
     } else if (range === '7d') {
       // The name is centred over the day, so it is given the day's own width rather than a flat
       // twenty-four hours: the column a clock changed in is an hour wider or narrower than the
       // six beside it, and a centre measured off the wrong width sits in its neighbour.
-      for (d = startOfDay(t0); d < t1; d = nextDay(d)) if (d >= t0) ticks.push({ t: d, text: dayWord(d), center: nextDay(d) - d });
+      for (d = startOfDay(t0); d < t1 && ticks.length < MAX_TICKS; d = nextDay(d)) if (d >= t0) ticks.push({ t: d, text: dayWord(d), center: nextDay(d) - d });
     } else {
-      for (d = startOfDay(t0); d < t1; d = nextDay(d)) if (d >= t0 && new Date(d).getDate() % 5 === 0) ticks.push({ t: d, text: monWord(d) });
+      for (d = startOfDay(t0); d < t1 && ticks.length < MAX_TICKS; d = nextDay(d)) if (d >= t0 && new Date(d).getDate() % 5 === 0) ticks.push({ t: d, text: monWord(d) });
     }
     ticks.forEach(function (tk) {
       var xx = b.l + ((tk.t - t0) / (t1 - t0)) * (b.r - b.l);
@@ -919,6 +1033,48 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
     g.c.stroke(); return end;
   }
   function xOf(b, cur) { return b.l + cur * (b.r - b.l); }
+  /**
+   * Which slot the reader's finger is over.
+   *
+   * A 24h chart plots POINTS a minute apart and the nearest one wins. A long range plots slots an
+   * hour or a day wide — the one the finger is inside wins, and the last of them ends at the edge
+   * of the range rather than at its own left corner.
+   */
+  function slotAt(cur, n, live) {
+    if (cur == null || !(n > 0)) return null;
+    return live ? Math.round(cur * (n - 1)) : Math.max(0, Math.min(n - 1, Math.floor(cur * n)));
+  }
+  /**
+   * The first moment the record covers, which on a range younger than itself is later than the
+   * range opens. Hours and days are written by one reader over one window, so the earlier of the
+   * two is where the journal begins.
+   */
+  function recordFrom() {
+    var d = state.data, t = null, i, x;
+    var hrs = (d && d.hours) || [], list = (d && d.days) || [];
+    for (i = 0; i < hrs.length; i++) { x = hrs[i].t; if (typeof x === 'number' && isFinite(x) && (t === null || x < t)) t = x; }
+    for (i = 0; i < list.length; i++) { x = dayStart(list[i].date); if (isFinite(x) && (t === null || x < t)) t = x; }
+    return t === null ? null : startOfDay(t);
+  }
+  /**
+   * The one line that explains an empty left half.
+   *
+   * "No readings before", and never "the journal starts here": what this can see is the oldest
+   * trace INSIDE the window, and a journal older than the range with a hole at the front — a
+   * serve that was off all week — hands back the same answer. The sentence says the thing that
+   * is true of both.
+   *
+   * Once a chart and in the page's grey. A serve younger than the range it is being asked for is
+   * not a fault — it is a serve that was started on Tuesday — and a warning would say otherwise
+   * three times over. Dropped where the empty zone is too narrow to hold it: a label wider than
+   * the space it explains is a label over the data.
+   */
+  function startNote(g, b, t0, t1, first) {
+    if (typeof first !== 'number' || !isFinite(first) || !(first > t0)) return;
+    var x = Math.min(b.r, b.l + ((first - t0) / (t1 - t0 || 1)) * (b.r - b.l));
+    if (x - b.l < 96) return;
+    label(g, 'no readings before ' + monWord(first), (b.l + x) / 2, (b.t + b.b) / 2, { align: 'center', size: 10 });
+  }
 
   // ── the head and the legend ─────────────────────────────────────────────────────────
   function head(id, sub, stat, tapped) {
@@ -958,11 +1114,17 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
 
   function drawCtx() {
     var d = state.data, r = roster(), live = state.range === '24h';
-    var series = live ? ctxLines(d.samples, d.cadence || MIN, r) : ctxRows(d.hours, r);
+    var series = live ? ctxLines(d.samples, d.cadence || MIN, r) : ctxRows(d.hours, r, d.from, d.to);
     if (series.length === 0) return blank('ctx', live ? 'per session · 24h' : 'per session · hour max · ' + state.range);
     var g = setup(el('ctx-canvas'), height(live ? 'ctx24' : 'ctxRows')), b = plotBox(g);
-    var t0 = series[0].t0, t1 = t0 + (series[0].v.length - 1) * series[0].step;
-    var cur = state.cursor.ctx, idx = cur == null ? null : Math.round(cur * (series[0].v.length - 1));
+    // The long ranges close at the end of the WINDOW, not at the last hour that has a slot: the
+    // grid is the range's, so the last slot is an hour wide like the ones before it.
+    // The grid is capped and the window's far end is not, so the axis is drawn over what the
+    // grid actually covers. Handed the raw end, the tick walk turned a window off the wire
+    // into tens of thousands of labels a frame — a tab that stops answering, with no error.
+    var t0 = series[0].t0, t1 = live ? t0 + (series[0].v.length - 1) * series[0].step
+                                     : Math.min(d.to, t0 + series[0].v.length * series[0].step);
+    var cur = state.cursor.ctx, idx = slotAt(cur, series[0].v.length, live);
     var iso = isoOf('ctx'), climbing = 0, i;
     for (i = 0; i < series.length; i++) if (rising(series[i])) climbing++;
     if (live) {
@@ -971,12 +1133,12 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
       // Climbing last, so the lines the reader came for are drawn over the rest of the fleet.
       series.slice().sort(function (a, c) { return (rising(a) ? 1 : 0) - (rising(c) ? 1 : 0); }).forEach(function (s) {
         var up = rising(s), on = iso !== null ? iso === String(s.name) : up, color = slotColor(s.slot);
-        g.c.save(); g.c.strokeStyle = color; g.c.lineWidth = on ? 2 : 1.5; g.c.globalAlpha = on ? 1 : (iso !== null ? .2 : .45);
+        g.c.save(); g.c.strokeStyle = color; g.c.lineWidth = on ? 2 : 1.5; g.c.globalAlpha = on ? 1 : fadeAlpha(iso);
         g.c.lineJoin = 'round'; g.c.lineCap = 'round';
         var end = polyline(g, s, b, t0, t1, yOf); g.c.restore();
         if (end) ends.push({ s: s, x: end.x, y: end.y, v: lastOf(s.v), on: on });
       });
-      ends.forEach(function (e) { g.c.save(); g.c.globalAlpha = e.on ? 1 : .45; dot(g, e.x, e.y, slotColor(e.s.slot), e.on ? 4 : 3); g.c.restore(); });
+      ends.forEach(function (e) { g.c.save(); g.c.globalAlpha = e.on ? 1 : fadeAlpha(iso); dot(g, e.x, e.y, slotColor(e.s.slot), e.on ? 4 : 3); g.c.restore(); });
       var prevY = -99;
       ends.filter(function (e) { return e.on; }).sort(function (a, c) { return a.y - c.y; }).forEach(function (e) {
         var y = Math.max(e.y - 7, prevY + 12, b.t + 8);
@@ -1019,6 +1181,9 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
         label(g, (v === null ? '—' : Math.round(v) + '%') + (idx === null && up ? ' ↑' : ''), b.r - 2, top + 9, { align: 'right', size: 10, weight: 600, color: g.fg });
         if (idx !== null && s.v[idx] !== null) dot(g, xOf(b, cur), rowY(s.v[idx]), color, 3);
       });
+      // After the bands, never before: each row rules its own baseline straight through the
+      // sentence, and the sentence is what explains the space those baselines cross.
+      startNote(g, b, t0, t1, recordFrom());
       if (idx !== null) { var x2 = xOf(b, cur); hair(g, x2, b.t, x2, b.b, g.fg, .5); }
       head('ctx', idx === null ? 'per session · hour max · ' + state.range : dayWord(t0 + idx * HOUR) + ' ' + hhmm(t0 + idx * HOUR),
            climbing ? climbing + ' climbing' : 'nothing climbing', idx !== null);
@@ -1028,7 +1193,7 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
 
   function drawCost() {
     var d = state.data, r = roster(), live = state.range === '24h';
-    var cost = live ? costHourly(d.samples, r) : costDaily(d.days, r);
+    var cost = live ? costHourly(d.samples, r) : costDaily(d.days, r, d.from, d.to);
     var buckets = cost.buckets, n = buckets.length;
     if (n === 0) return blank('cost', 'per project · ' + (live ? 'hourly · 24h' : 'daily · ' + state.range));
     var g = setup(el('cost-canvas'), height('cost')), b = plotBox(g);
@@ -1040,9 +1205,12 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
       var y = b.b - (v / ymax) * (b.b - b.t); hair(g, b.l, y, b.r, y, g.line);
       if (v > 0) label(g, '$' + (v < 1 ? v.toFixed(1) : v), b.l + 2, y - 3);
     }
-    var slotW = (b.r - b.l) / n, barW = Math.min(24, slotW * .72);
+    // Capped, because the columns are the RANGE's now: a week in which the serve ran for one day
+    // is one bar with six empty slots beside it, and a bar given the whole plot to fill is a
+    // single day drawn as a wall. Wide enough to stay a bar, never wide enough to be a panel.
+    var slotW = (b.r - b.l) / n, barW = Math.min(48, slotW * .72);
     var cur = state.cursor.cost, iso = isoOf('cost');
-    var sel = cur == null ? null : Math.min(n - 1, Math.floor(cur * n));
+    var sel = slotAt(cur, n, false);
     buckets.forEach(function (bk, i) {
       var x = b.l + i * slotW + (slotW - barW) / 2, acc = 0, yTop = b.b, top = -1;
       bk.by.forEach(function (val, k) { if (val > 0) top = k; });
@@ -1062,7 +1230,9 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
       // The column's own total on its cap, only where a week of them has the room.
       if (n <= 7 && totals[i] > 0) label(g, '$' + totals[i].toFixed(totals[i] >= 100 ? 0 : 1), x + barW / 2, yTop - 5, { align: 'center', color: g.fg, weight: 600 });
     });
-    timeTicks(g, b, buckets[0].t, buckets[n - 1].t + buckets[n - 1].span, state.range);
+    var xEnd = buckets[n - 1].t + buckets[n - 1].span;
+    timeTicks(g, b, buckets[0].t, xEnd, state.range);
+    if (!live) startNote(g, b, buckets[0].t, xEnd, recordFrom());
     var total = totals.reduce(function (a, v) { return a + v; }, 0);
     var keys = legendByCost(cost), bk2 = sel === null ? null : buckets[sel];
     // A bucket nobody read is not a bucket that cost nothing. The bars already draw it as the
@@ -1083,15 +1253,17 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
 
   function drawQuota() {
     var d = state.data, live = state.range === '24h';
-    var q = live ? quotaOfSamples(d.samples, d.cadence || MIN) : quotaOfHours(d.hours, d.resets);
+    var q = live ? quotaOfSamples(d.samples, d.cadence || MIN) : quotaOfHours(d.hours, d.resets, d.from, d.to);
     var n = q.five.length;
     if (n === 0) return blank('quota', 'account · ' + state.range);
     var g = setup(el('quota-canvas'), height('quota')), b = plotBox(g);
-    var t0 = q.t0, t1 = t0 + (n - 1) * q.step;
+    var t0 = q.t0, t1 = live ? t0 + (n - 1) * q.step : Math.min(d.to, t0 + n * q.step);
     var yOf = function (v) { return b.b - (v / 100) * (b.b - b.t); };
     var xAt = function (t) { return b.l + ((t - t0) / (t1 - t0 || 1)) * (b.r - b.l); };
     var iso = isoOf('quota'), a5 = iso !== null && iso !== '5h' ? .25 : 1, a7 = iso !== null && iso !== '7d' ? .25 : 1;
+    var end5 = null, end7 = null;
     pctGrid(g, b); timeTicks(g, b, t0, t1, state.range);
+    if (!live) startNote(g, b, t0, t1, recordFrom());
     // The seven-day turnover is the event of the week and gets a full line with its name. The
     // five-hour one does not: there are five a day, so a week is thirty lines and a month a
     // hundred and fifty — a picket fence over the chart, each one labelled the same thing. It
@@ -1129,13 +1301,19 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
       }
       g.c.restore();
       g.c.save(); g.c.globalAlpha = a5; g.c.strokeStyle = g.dim; g.c.lineWidth = 2; g.c.lineJoin = 'round';
-      polyline(g, { v: q.five, step: q.step }, b, t0, t1, yOf); g.c.restore();
+      end5 = polyline(g, { v: q.five, step: q.step }, b, t0, t1, yOf); g.c.restore();
     } else {
       // A hundred and fifty sawtooth windows in a month is a wall: each window is drawn as
       // its own high instead, a bar as wide as the window, its right edge the reset.
       var bounds = [t0], w;
       for (w = 0; w < q.resets.length; w++) if (q.resets[w].limit === 'five_hour') bounds.push(q.resets[w].t);
-      bounds.push(t1);
+      // The record's end closes the last window, not the range's. Run to the far end instead,
+      // the bar paints every hour between the last reading and the close of the range at the
+      // height of a peak reached before any of them — the firm line through a moment nobody
+      // measured that this chart exists not to draw.
+      var lastFive = -1;
+      for (w = n - 1; w >= 0 && lastFive < 0; w--) if (q.five[w] !== null) lastFive = w;
+      bounds.push(lastFive < 0 ? t1 : Math.min(t1, t0 + (lastFive + 1) * q.step));
       for (w = 0; w < bounds.length - 1; w++) {
         var i0 = Math.round((bounds[w] - t0) / q.step), i1 = Math.round((bounds[w + 1] - t0) / q.step), peak = null;
         // The hour a window turns over in belongs to BOTH windows, ten minutes to the one that
@@ -1153,11 +1331,14 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
       }
     }
     g.c.save(); g.c.globalAlpha = a7; g.c.strokeStyle = g.fg; g.c.lineWidth = 2; g.c.lineJoin = 'round';
-    polyline(g, { v: q.seven, step: q.step }, b, t0, t1, yOf); g.c.restore();
+    end7 = polyline(g, { v: q.seven, step: q.step }, b, t0, t1, yOf); g.c.restore();
     var e5 = lastOf(q.five), e7 = lastOf(q.seven);
-    if (e5 !== null && live) dot(g, b.r, yOf(e5), g.dim);
-    if (e7 !== null) dot(g, b.r, yOf(e7), g.fg);
-    var cur = state.cursor.quota, idx = cur == null ? null : Math.round(cur * (n - 1));
+    // On the curve's own last point, which is the right edge only where the range ends at a
+    // reading. A dot at the edge, over a week the serve was up for one day of, is a reading
+    // nobody took, dated thirteen hours after the last one anybody did.
+    if (live && end5 !== null) dot(g, end5.x, end5.y, g.dim);
+    if (end7 !== null) dot(g, end7.x, end7.y, g.fg);
+    var cur = state.cursor.quota, idx = slotAt(cur, n, live);
     if (idx !== null) {
       var x3 = xOf(b, cur); hair(g, x3, b.t, x3, b.b, g.fg, .5);
       if (live && q.five[idx] !== null) dot(g, x3, yOf(q.five[idx]), g.dim, 3.5);

package/dist/map.js

@@ -2,7 +2,7 @@
 //
 // A view over the fleet `buildFleet` already produced. It opens no second source: every
 // field below is derived from a row that is already on the page as a table line.
-import { isWaiting } from './sessions.js';
+import { anchoredOnKind, isBackgroundAgent, isWaiting } from './sessions.js';
 /**
  * What a berth is labelled when the source published no working directory for it. In the
  * vocabulary the dials already use for a reading they do not have (`not chained`, `no turn
@@ -35,13 +35,11 @@ export const PULSE_WITHIN_MS = 10_000;
  * grid's arrangement of it, never the data's.
  */
 export function buildMap({ rows }, { pulseWithinMs = PULSE_WITHIN_MS } = {}) {
-    // Whether this fleet still speaks the kind we know. If NOTHING calls itself `interactive`,
-    // the word moved rather than every terminal on the machine going background at once — and
-    // the map says so by drawing them all as what they almost certainly still are. It is the
-    // tolerance `buildFleet` already applies to telemetry: a signal true of every row is a
-    // change in the source.
-    const anchored = rows.some((r) => r.kind === INTERACTIVE);
-    const roleOf = (r) => !anchored || r.kind === null || r.kind === INTERACTIVE ? 'session' : 'agent';
+    // Which entries are agents, by the rule `sessions.ts` states and `buildFleet` reads too: the
+    // map draws them differently, and the coverage line counts them out of a population no
+    // install can ever cover.
+    const anchored = anchoredOnKind(rows);
+    const roleOf = (r) => (isBackgroundAgent(r, anchored) ? 'agent' : 'session');
     const node = (row) => {
         const reading = readingOf(row);
         return {
@@ -86,20 +84,6 @@ export function buildMap({ rows }, { pulseWithinMs = PULSE_WITHIN_MS } = {}) {
     }
     return { berths };
 }
-/**
- * The kind a terminal calls itself, and the anchor this module reasons from. A background
- * entry has since been seen beside them — `kind: 'background'`, no `pid`, its word under
- * `state` rather than `status` — so the two are no longer a reading of that CLI's help. It is
- * still the anchor and never the list: one observed alternative is not the vocabulary, and the
- * heuristic above asks only whether anything on this machine still calls itself `interactive`.
- *
- * An ABSENT kind is not evidence of an agent either: the same rule the session status follows
- * one module down, where unrecognised means unknown, never "the quiet one". The two mistakes
- * are not the same size — an agent drawn as a session is a node in the wrong shape, while a
- * session drawn as an agent is a terminal someone is working in, reduced to a footnote of a
- * directory it merely shares.
- */
-export const INTERACTIVE = 'interactive';
 /**
  * `stale` is not recomputed here — it is the collector's verdict, reached against the
  * threshold this run resolved (`--stale-after`, the environment, the config file). A second