@adrrr/tarmac 0.8.1 → 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,
@@ -620,9 +716,10 @@ export const HISTORY_CSS = `
      two account-wide charts side by side under it; the phone block stacks them, one chart to
      a screen. */
   .view-history { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
-  #ctx, .hist-off, .view-history > .note { grid-column:1 / -1; }
+  #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,13 +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 code, .view-history .note code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95em; }
+  .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 { 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
@@ -739,12 +850,13 @@ const chart = (id, name, sub) => `<section class="chart" id="${id}" role="group"
  * script after a round trip. A reader with no journal never sees a range flicker from live to
  * refused, and a browser with no JavaScript still gets told why the page is empty.
  */
-export function renderHistoryView({ historyEnabled }) {
+export function renderHistoryView({ historyEnabled, demo = false }) {
     const off = !historyEnabled;
     return `<div class="view view-history">
 ${off
         ? `  <div class="hist-off" id="hist-off" role="status"><strong>History is off.</strong> The last 24h live in memory while <code>tarmac serve</code> runs and go when it stops; nothing is written to disk. To keep 7 and 30 days, add <code>{"history": {"days": 30}}</code> to <code>~/.claude/tarmac/config.json</code> and start <code>serve</code> again.</div>\n`
-        : ''}${chart('ctx', 'Context', 'per session &middot; 24h')}
+        : ''}  <div class="hist-empty" id="hist-empty" role="status" hidden><strong>Nothing to draw yet.</strong> <code>tarmac serve</code> reads the fleet once a minute, so the context lines start within a minute or two, the cost bars fill an hour at a time, and the quota curve needs a few readings before it has a shape. A session has to be open for any of them to have a subject. Leave the serve running and come back. To see all three full right now, without waiting: <code>tarmac serve --demo</code>.</div>
+${chart('ctx', 'Context', 'per session &middot; 24h')}
 ${chart('cost', 'Cost', 'per project &middot; hourly &middot; 24h')}
 ${chart('quota', 'Quota', 'account &middot; 24h')}
   <p class="note">Recorded once a minute, only while <code>tarmac serve</code> runs. A minute it was not running is a minute with no reading, drawn as a gap and never as a zero. A session recycled overnight comes back as a new line from its first frame.${off ? '' : ' The journal keeps the same fields as the ring, no names and no paths.'}</p>
@@ -753,9 +865,11 @@ ${chart('quota', 'Quota', 'account &middot; 24h')}
     <button type="button" id="range-24h" data-range="24h" aria-pressed="true">24h</button>
     <button type="button" id="range-7d" data-range="7d" aria-pressed="false"${off ? ' disabled' : ''}>7d</button>
     <button type="button" id="range-30d" data-range="30d" aria-pressed="false"${off ? ' disabled' : ''}>30d</button>
-    <div class="covers" id="hist-covers">${off
+    <div class="covers" id="hist-covers"${demo ? ' data-days="days invented"' : ''}>${off
         ? '24h from memory &middot; 7d and 30d need the journal, which is off'
-        : '24h from memory &middot; 7d and 30d from the journal on disk'}</div>
+        : demo
+            ? '24h from memory &middot; 7d and 30d from a journal invented in memory'
+            : '24h from memory &middot; 7d and 30d from the journal on disk'}</div>
   </div>
 </div>`;
 }
@@ -774,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'];
@@ -790,6 +904,24 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
   // and not this page's — and a copy of both, kept in step by hand, is how the two come to
   // disagree.
   var covers24 = covers.textContent;
+  // Whether this serve has a journal at all. It decides which of the two blocks a page with
+  // nothing in it raises: with no journal the server has already shipped the one that names that
+  // cause and its fix, and a second block under it offering a minute of patience is one screen
+  // saying two things (#157).
+  //
+  // Read off the page rather than asked for down the wire, for the reason the sentence above is:
+  // it is the config's answer, the server has it, and a round trip to be told it would leave the
+  // question open for as long as the request took. Off the PILL and not off the block it is
+  // really about, which would read better — the eighty-line DOM the suite executes this script
+  // on hands back an element for every id asked of it, so an assertion about a block the server
+  // did not ship cannot be written there, while a disabled attribute it did ship can. The two
+  // are the same fact: one flag in the view above writes both.
+  var journalOff = el('range-7d').disabled;
+  // What this serve calls the days behind its two long ranges. The sentence above is the
+  // server's and is kept rather than written again; this is the half of it the script rebuilds
+  // per range, and where a day came from is no more this page's answer there than it is here.
+  // Absent is what every serve that reads its journal off a disk says, which is most of them.
+  var daysWord = covers.getAttribute('data-days') || 'days on disk';
   var state = { range: '24h', data: null, err: null, iso: {}, cursor: {}, loading: false, gen: 0 };
   // Which series a chart is isolated on, or null. Read through a function and compared against
   // null rather than tested for truth: path.basename('/') is the empty string, so a project
@@ -802,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 };
@@ -831,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) {
@@ -855,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);
@@ -894,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) {
@@ -933,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) {
@@ -946,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);
@@ -994,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);
@@ -1003,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);
@@ -1015,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; });
@@ -1037,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
@@ -1058,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
@@ -1104,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
@@ -1128,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);
@@ -1161,9 +1367,57 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
     el(id + '-legend').hidden = true;
   }
 
+  /*
+   * Is there a single number in the ring? The three charts plot exactly three things, and this
+   * asks whether the record holds any of them: a context percentage, a cost, or a window
+   * reading. Nothing else counts as something to draw.
+   *
+   * A first cut asked whether the ring held any SAMPLE, and those two part company sixty
+   * seconds in, which is the worst possible moment. A serve started before the statusline is
+   * chained, or with no session open, records a sample a minute carrying nothing at all: the
+   * sample count says "we are away" while the charts are still empty, and the block came down
+   * over a page no more explanatory than it was at the start. Counting blank canvases does not
+   * fix it either, because two of the three draw an empty grid rather than blanking whenever
+   * the span is non-zero, however little is in it.
+   */
+  function drawable() {
+    var s = state.data && state.data.samples, i, j, ses, lim, k;
+    if (!s) return false;
+    for (i = 0; i < s.length; i++) {
+      lim = s[i].rateLimits;
+      for (k in lim) if (lim[k] && typeof lim[k].used_percentage === 'number') return true;
+      ses = s[i].sessions || [];
+      for (j = 0; j < ses.length; j++) {
+        if (typeof ses[j].ctxPct === 'number' || typeof ses[j].costUsd === 'number') return true;
+      }
+    }
+    return false;
+  }
+
+  /*
+   * Whether this is a serve with nothing to draw, which is what a first run looks like (#151).
+   *
+   * The ring only. An empty 7d is a journal that was not running for a week, and this block's
+   * answer, wait a minute and the lines will come, is not true of that. The canvas goes on
+   * saying "no readings in this range" there, which is the honest verdict.
+   *
+   * Neither loading nor an error counts: both are states in which nothing has been read yet,
+   * and a block raised over a request still in flight would be answering a question the
+   * record is about to answer itself. Same rule the blank canvas applies one function up.
+   *
+   * Nor does a serve with no journal, which is the FIRST default run and where both blocks
+   * used to come up together (#157): the server has already raised the other one there.
+   */
+  function firstRun() {
+    if (journalOff) return false;
+    if (state.range !== '24h' || state.loading || state.err !== null) return false;
+    return !drawable();
+  }
+
   var draw = { ctx: drawCtx, cost: drawCost, quota: drawQuota };
   function redraw() {
     covers.textContent = coversText();
+    el('hist-empty').hidden = !firstRun();
     if (!state.data) { ids.forEach(function (id) { blank(id, state.range); }); return; }
     ids.forEach(function (id) { draw[id](); });
   }
@@ -1202,7 +1456,7 @@ ${PURE.map((fn) => String(fn)).join('\n\n')}
     if (state.loading) return 'reading ' + state.range + '…';
     if (state.range === '24h') return covers24;
     if (!d || !d.coverage) return state.range + ' from the journal';
-    var c = d.coverage, said = state.range + ' from the journal · ' + d.days.length + ' of ' + c.daysRequested + ' days on disk';
+    var c = d.coverage, said = state.range + ' from the journal · ' + d.days.length + ' of ' + c.daysRequested + ' ' + daysWord;
     // Said once and quietly: a journal that stopped at its cap, and readings the reader could
     // not use. Neither is a fault to shout about, and both change what the charts above mean.
     if (c.capped) said += ' · journal capped';