syndes 0.3.0 → 0.4.0

package/dashboard/auth.mjs

@@ -32,6 +32,21 @@ export const MODES = ['open', 'system', 'pin'];
 /** Lives only in this process: a launch token dies with the server that made it. */
 let launchToken = null;
 
+/**
+ * This run of the server.
+ *
+ * A lock means "ask me", and the answer has to be asked again each time the
+ * dashboard starts. Without this the session cookie was checked only against
+ * auth.json, which survives a restart — so turning on Touch ID or a PIN asked
+ * once, and for the next twelve hours anybody who opened the dashboard walked
+ * straight in. The lock looked set and was not enforced, which is worse than no
+ * lock, because the user believes it.
+ *
+ * Bound only in `system` and `pin` modes. `open` has no lock to enforce and a
+ * session that outlives the process there is a convenience, not a bypass.
+ */
+let instance = randomBytes(9).toString('base64url');
+
 // ── Stored state ───────────────────────────────────────────────────────────
 
 export function loadAuth() {
@@ -174,6 +189,8 @@ export function systemAvailable() {
 export function issueToken(now = Date.now()) {
   const auth = ensureAuth();
   const payload = { exp: now + SESSION_MS, epoch: auth.sessionEpoch ?? 0, nonce: randomBytes(9).toString('base64url') };
+  // Stamp the run that issued it, so a restart asks again.
+  if ((auth.mode ?? 'open') !== 'open') payload.inst = instance;
   const body = Buffer.from(JSON.stringify(payload)).toString('base64url');
   return `${body}.${sign(body, auth.secret)}`;
 }
@@ -195,6 +212,12 @@ export function verifyToken(token) {
 
   if (Date.now() > (payload.exp ?? 0)) return { ok: false, reason: 'expired' };
   if ((payload.epoch ?? -1) !== (auth.sessionEpoch ?? 0)) return { ok: false, reason: 'revoked' };
+
+  // Under a lock, a session belongs to the run that issued it. A cookie from a
+  // previous run — or one minted while the door was open — does not get in.
+  if ((auth.mode ?? 'open') !== 'open' && payload.inst !== instance) {
+    return { ok: false, reason: 'the dashboard was restarted' };
+  }
   return { ok: true, reason: null };
 }
 
@@ -232,4 +255,16 @@ function safeEqual(a, b) {
   return timingSafeEqual(Buffer.from(a), Buffer.from(b));
 }
 
+/**
+ * Forget every session this run issued, as a restart would.
+ *
+ * Exists for the tests: a restart is otherwise only reproducible by spawning a
+ * process, and the property being checked — that a lock is re-asked — deserves
+ * a direct test as well as an end-to-end one.
+ */
+export function resetInstance() {
+  instance = randomBytes(9).toString('base64url');
+  return instance;
+}
+
 export { SESSION_MS, ensureAuth };

package/dashboard/router.mjs

@@ -29,6 +29,7 @@ export const ROUTES = {
   'GET /api/session': api.sessionDetail,
   'GET /api/tools': api.tools,
   'GET /api/projects': api.projects,
+  'GET /api/days': api.days,
   'GET /api/timeline': api.timeline,
   'GET /api/practices': api.practices,
   'POST /api/practices': api.practiceAction,

package/dashboard/server.mjs

@@ -42,6 +42,19 @@ export async function startServer({ port, idleTimeoutMinutes } = {}) {
     send(res, 500, { error: 'internal error' });
   }); });
 
+  // Every open socket, so shutdown can hang them up.
+  //
+  // server.close() stops accepting new connections and then waits for the
+  // existing ones to finish — which for a browser keep-alive is "eventually"
+  // and for an event stream is "never". Without this, ctrl-c printed ^C and
+  // hung, and every further press queued another close callback until Node
+  // warned about a listener leak at eleven.
+  const sockets = new Set();
+  server.on('connection', (socket) => {
+    sockets.add(socket);
+    socket.on('close', () => sockets.delete(socket));
+  });
+
   let idleTimer = null;
   const touch = () => {
     if (!idleMs) return;
@@ -68,13 +81,36 @@ export async function startServer({ port, idleTimeoutMinutes } = {}) {
   const token = mintLaunchToken();
   const base = `http://${HOST}:${server.address().port}`;
   const url = authMode() === 'open' ? `${base}/?t=${token}` : base;
-  return {
-    url,
-    base,
-    port: server.address().port,
-    server,
-    close: () => new Promise((resolve) => { clearTimeout(idleTimer); server.close(resolve); }),
+
+  /**
+   * Stop listening and hang up.
+   *
+   * Idempotent: calling it twice must not register a second close callback,
+   * because the thing that calls it twice is somebody pressing ctrl-c again
+   * when the first press appeared to do nothing.
+   */
+  let closing = null;
+  const close = () => {
+    if (closing) return closing;
+    closing = new Promise((resolve) => {
+      clearTimeout(idleTimer);
+      let done = false;
+      const finish = () => { if (!done) { done = true; resolve(); } };
+
+      server.close(finish);
+      // Then end what is already open, oldest first — an event stream and a
+      // keep-alive both sit here forever otherwise.
+      for (const socket of sockets) socket.destroy();
+      sockets.clear();
+
+      // A socket wedged in a kernel buffer must not hold the process open.
+      const failsafe = setTimeout(finish, 2000);
+      failsafe.unref?.();
+    });
+    return closing;
   };
+
+  return { url, base, port: server.address().port, server, close, sockets };
 }
 
 async function handle(req, res, port) {

package/dashboard/web/api.js

@@ -65,6 +65,7 @@ export const api = {
   session: (id) => get(`/api/session?id=${encodeURIComponent(id)}`),
   tools: (range) => get(`/api/tools?range=${encodeURIComponent(range)}`),
   projects: (range) => get(`/api/projects?range=${encodeURIComponent(range)}`),
+  days: () => get('/api/days'),
   timeline: (range) => get(`/api/timeline?range=${encodeURIComponent(range)}`),
 
   practices: () => get('/api/practices'),

package/dashboard/web/app.css

@@ -191,6 +191,37 @@ a { color: inherit; text-decoration: none; }
 .dropdown[aria-expanded="true"] svg { transform: rotate(180deg); }
 .dropdown[aria-expanded="true"] { background: var(--surface-3); }
 
+/* ── Day stepper ──────────────────────────────────────────────────────── */
+
+/* One control, not three. The arrows and the dropdown share a single capsule so
+   the group reads as the day picker it is, rather than as two buttons that
+   happen to sit either side of a menu. The inner dropdown drops its own pill
+   background for the same reason. */
+.stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+  height: 44px;
+  border-radius: var(--r-pill);
+  background: var(--surface);
+}
+.stepper .dropdown { background: transparent; padding: 0 var(--s2); }
+.stepper .dropdown:hover { background: var(--surface-3); }
+
+.stepper__btn {
+  width: 32px; height: 32px;
+  border: 0; border-radius: var(--r-pill);
+  background: transparent; color: var(--ink-2);
+  display: grid; place-items: center;
+  cursor: pointer; flex: none;
+}
+.stepper__btn:hover { background: var(--surface-3); color: var(--ink); }
+.stepper__btn svg { display: block; }
+/* Disabled rather than removed: a control that vanishes reflows the row under
+   the pointer, and the dimmed arrow is what says "this is today". */
+.stepper__btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
+
 .dropdown__menu {
   position: fixed;
   z-index: 60;
@@ -540,6 +571,54 @@ a { color: inherit; text-decoration: none; }
 .field::placeholder { color: var(--ink-3); }
 .field:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
 
+/* A grid that reflows on available width rather than on a breakpoint. Cards
+   claim a column while one fits and wrap when it does not, so the same markup
+   suits a laptop and a wide monitor without a media query choosing for it. */
+.autogrid {
+  display: grid;
+  gap: var(--s5);
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  align-items: stretch;
+}
+.autogrid--wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
+.team { align-content: start; }
+
+/* ── People ───────────────────────────────────────────────────────────── */
+
+/* Rows, not a table. Stacking within a person rather than across them is what
+   lets a narrow card drop a line instead of truncating a name. */
+.people { display: grid; }
+.person {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--s3);
+  align-items: start;
+  padding: var(--s4) 0;
+  border-top: 1px solid var(--line);
+}
+.person:first-child { padding-top: var(--s2); border-top: 0; }
+.person > .avatar { margin-top: 2px; }
+
+.person__head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
+.person__name {
+  font-weight: 650;
+  min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.person__tag { font-size: 11px; color: var(--ink-3); }
+/* Pushed right, and never wrapped away from the name it belongs to. */
+.person__share { margin-left: auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
+
+.person__stats { display: flex; flex-wrap: wrap; gap: 2px var(--s4); font-size: 12px; color: var(--ink-3); }
+.person__stat b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
+
+@media (max-width: 520px) {
+  /* Below this the remove control cannot sit beside the row without squeezing
+     the name, so it moves under it rather than off the edge. */
+  .person { grid-template-columns: auto minmax(0, 1fr); }
+  .person > .btn { grid-column: 2; justify-self: start; }
+}
+
 /* The invite line. Monospace and selectable — somebody will always copy it by
    hand rather than trust the button, and a wrapped command must still be one
    correct command when it is pasted. */

package/dashboard/web/app.js

@@ -1,15 +1,25 @@
 /**
  * The shell: unlock, top bar, page head, rail, and the router.
  *
- * The range lives here rather than in a view, because it is shared — moving
- * from Overview to Habits must not silently reset the window you are reading.
+ * The window lives here rather than in a view, because it is shared — moving
+ * from Overview to Habits must not silently reset what you are reading.
+ *
+ * It is two pieces of state, not one. `scope` is how wide a window you want and
+ * is remembered between sessions; `day` is which day you are on and is NOT, so
+ * opening the dashboard tomorrow shows tomorrow rather than silently serving a
+ * stale Tuesday that a stored range would have pinned you to.
+ *
+ * The default is a single day, because that is the question people actually
+ * arrive with: what happened today. A seven-day average hides the day you came
+ * to look at, and a shared pool averaged over a week says nothing about whether
+ * the two of you are in each other's way right now.
  *
  * Views are imported lazily, so the first paint does not wait on the Ledger
  * view's table code and a view that fails to load takes only itself down.
  */
 
 import { api, ApiError, onBusy } from './api.js';
-import { h, replace, mount, icon, dropdown } from './ui.js';
+import { h, replace, mount, icon, dropdown, daypicker, todayISO, dayLabel } from './ui.js';
 
 const ROUTES = [
   { id: 'overview', label: 'Overview', title: 'Overview', load: () => import('./views/overview.js') },
@@ -22,20 +32,38 @@ const ROUTES = [
   { id: 'settings', label: 'Settings', title: 'Settings', rail: true, noRange: true, load: () => import('./views/settings.js') },
 ];
 
-const RANGES = [
-  { id: 'today', label: 'Today' },
+/**
+ * How wide a window. `day` is not a span — it defers to `state.day`, which is
+ * what the stepper beside this control moves.
+ */
+const SCOPES = [
+  { id: 'day', label: 'One day', hint: 'the day picker chooses which' },
   { id: '7d', label: '7 days' },
   { id: '30d', label: '30 days' },
   { id: '90d', label: '90 days' },
   { id: 'all', label: 'All time' },
 ];
 
+const SCOPE_KEY = 'syndes.scope';
+
 const state = {
-  range: localStorage.getItem('syndes.range') ?? '7d',
+  scope: SCOPES.some((scope) => scope.id === storedScope()) ? storedScope() : 'day',
+  day: todayISO(),
   route: 'overview',
   status: null,
+  /** The day index behind the picker, fetched once and refreshed on reload. */
+  days: [],
 };
 
+function storedScope() {
+  return localStorage.getItem(SCOPE_KEY);
+}
+
+/** The one spec every endpoint is asked with. A single day is its literal date. */
+function rangeSpec() {
+  return state.scope === 'day' ? state.day : state.scope;
+}
+
 const root = document.getElementById('root');
 let outlet;
 let titleNode;
@@ -145,16 +173,16 @@ function renderApp() {
 
     h('div.pagehead', {}, [
       h('div', {}, [titleNode, subNode]),
-      // The range filter is hidden where it would be a lie: nothing on Settings
-      // is scoped to a time window.
-      h('div.filters', { id: 'filters' }, [rangeFilter()]),
+      // Hidden where it would be a lie: nothing on Settings is scoped to a
+      // time window.
+      h('div.filters', { id: 'filters' }, filters()),
     ]),
 
     h('div.body', {}, [
       h('aside.rail', {}, [
-        railButton('refresh', 'Reload this view', () => render()),
+        railButton('refresh', 'Reload this view', () => { loadDays(); render(); }),
         railButton('verify', 'Check the chain', () => go('ledger')),
-        railButton('download', 'Export everything as CSV', () => { window.location.href = api.exportUrl('csv', state.range); }),
+        railButton('download', 'Export everything as CSV', () => { window.location.href = api.exportUrl('csv', rangeSpec()); }),
         railButton('settings', 'Settings', () => go('settings'), 'settings'),
       ]),
       outlet,
@@ -165,6 +193,23 @@ function renderApp() {
   window.addEventListener('hashchange', () => go(routeFromHash(), { push: false }));
   go(routeFromHash(), { push: false });
   refreshStatus();
+  loadDays();
+}
+
+/**
+ * What the page head says the numbers cover.
+ *
+ * A single day gets its full name. "2026-09-10" is a string a machine chose;
+ * "Thursday, 10 September" is the thing a person came to look at, and the
+ * distinction matters most on the view that is now the default.
+ */
+function windowLabel() {
+  if (state.scope !== 'day') return SCOPES.find((scope) => scope.id === state.scope)?.label ?? state.scope;
+  const named = dayLabel(state.day, { long: true });
+  const full = new Date(`${state.day}T12:00`).toLocaleDateString(undefined, {
+    weekday: 'long', day: 'numeric', month: 'long',
+  });
+  return named === full ? full : `${named} \u00b7 ${full}`;
 }
 
 function railButton(name, label, onClick, routeId = null) {
@@ -174,21 +219,67 @@ function railButton(name, label, onClick, routeId = null) {
   }, [icon(name)]);
 }
 
-function rangeFilter() {
-  return dropdown({
-    label: 'Range',
-    value: state.range,
-    options: RANGES.map((range) => ({ id: range.id, label: range.label })),
-    onChange: setRange,
-  });
+/**
+ * Scope, and — when the scope is one day — which day.
+ *
+ * The stepper only exists in day scope. Leaving a day control visible beside
+ * "30 days" would invite somebody to set a day that the view then ignores, which
+ * is worse than not offering it.
+ */
+function filters() {
+  return [
+    dropdown({
+      label: 'Window',
+      value: state.scope,
+      options: SCOPES.map((scope) => ({ id: scope.id, label: scope.label, hint: scope.hint })),
+      onChange: setScope,
+    }),
+    state.scope === 'day'
+      ? daypicker({ day: state.day, days: state.days, onChange: setDay })
+      : null,
+  ].filter(Boolean);
+}
+
+function repaintFilters() {
+  const node = document.getElementById('filters');
+  if (node) replace(node, filters());
 }
 
-function setRange(id) {
-  state.range = id;
-  localStorage.setItem('syndes.range', id);
+function setScope(id) {
+  state.scope = id;
+  localStorage.setItem(SCOPE_KEY, id);
+  // Landing on day scope lands on today, never on whichever day was last open
+  // before you went to look at a month.
+  if (id === 'day') state.day = todayISO();
+  repaintFilters();
   render();
 }
 
+function setDay(day) {
+  state.scope = 'day';
+  state.day = day;
+  localStorage.setItem(SCOPE_KEY, 'day');
+  repaintFilters();
+  render();
+}
+
+/**
+ * The day index behind the picker.
+ *
+ * Failure is silent and leaves the list empty: the picker still steps with its
+ * arrows, so a dashboard whose rollup cache is mid-rebuild loses the hints and
+ * nothing else.
+ */
+async function loadDays() {
+  try {
+    const { days } = await api.days();
+    state.days = days ?? [];
+    repaintFilters();
+  } catch {
+    state.days = [];
+  }
+}
+
 function routeFromHash() {
   const id = location.hash.replace(/^#\/?/, '').split('/')[0];
   return ROUTES.some((route) => route.id === id) ? id : 'overview';
@@ -209,16 +300,26 @@ function go(id, { push = true } = {}) {
 async function render() {
   const route = ROUTES.find((candidate) => candidate.id === state.route);
   titleNode.textContent = route.title;
-  subNode.textContent = route.noRange ? 'Stored on this machine only' : (RANGES.find((range) => range.id === state.range)?.label ?? state.range);
-  const filters = document.getElementById('filters');
-  if (filters) filters.hidden = Boolean(route.noRange);
+  subNode.textContent = route.noRange ? 'Stored on this machine only' : windowLabel();
+  const filterBar = document.getElementById('filters');
+  if (filterBar) filterBar.hidden = Boolean(route.noRange);
 
+  const spec = rangeSpec();
   mount(outlet, skeleton());
   try {
     const module = await route.load();
-    const node = await module.render({ range: state.range, status: state.status, go });
-    // A range switch mid-load must not paint the answer to the previous question.
-    if (state.route === route.id) mount(outlet, node);
+    const node = await module.render({
+      range: spec,
+      scope: state.scope,
+      day: state.day,
+      days: state.days,
+      status: state.status,
+      go,
+      setDay,
+      setScope,
+    });
+    // A window switch mid-load must not paint the answer to the previous question.
+    if (state.route === route.id && spec === rangeSpec()) mount(outlet, node);
   } catch (error) {
     if (error instanceof ApiError && error.status === 401) return renderUnlock();
     mount(outlet, notice(`Could not load ${route.label}`, error.message));

package/dashboard/web/charts.js

@@ -169,27 +169,40 @@ export function dualLine(seriesA, seriesB, { height = 96, label = 'trend' } = {}
 }
 
 /**
- * A row of day capsules. Compact activity: one capsule per day, height by
- * volume, so a gap in the week is visible as an empty slot rather than absent.
+ * A row of capsules over an ordered axis: one per day across a week, or one per
+ * hour across a single day. Height is volume, so a gap is visible as an empty
+ * slot rather than as an absence.
+ *
+ * `labelEvery` exists because twenty-four hour labels do not fit where seven day
+ * labels do. Labelling every third hour keeps the axis readable instead of
+ * letting the text overlap into a smear, and the full value is always on the
+ * hover title so nothing is only available by squinting.
  */
-export function dayStrip(days, { height = 74, label = 'activity by day' } = {}) {
+export function dayStrip(slots, { height = 74, label = 'activity', labelEvery = null, format = String } = {}) {
   const width = 640;
-  const max = Math.max(...days.map((day) => day.value), 1);
-  const slot = width / Math.max(days.length, 1);
-  const capWidth = Math.min(30, slot * 0.55);
+  const max = Math.max(...slots.map((slot) => slot.value), 1);
+  const slotWidth = width / Math.max(slots.length, 1);
+  const capWidth = Math.min(30, slotWidth * 0.55);
   const floor = height - 20;
+  const every = labelEvery ?? (slots.length <= 8 ? 1 : null);
 
   const nodes = [];
-  days.forEach((day, index) => {
-    const cx = index * slot + slot / 2;
-    const h = day.value === 0 ? capWidth * 0.5 : Math.max(capWidth, (day.value / max) * (floor - 8));
-    nodes.push(el('rect', {
-      class: day.value === 0 ? '' : TONE[day.tone] ?? TONE.lime,
-      fill: day.value === 0 ? 'var(--track)' : null,
-      x: cx - capWidth / 2, y: floor - h, width: capWidth, height: h, rx: capWidth / 2,
-    }));
-    if (index === 0 || index === days.length - 1 || days.length <= 8) {
-      nodes.push(el('text', { x: cx, y: height - 4, 'text-anchor': 'middle' }, [txt(day.label)]));
+  slots.forEach((slot, index) => {
+    const cx = index * slotWidth + slotWidth / 2;
+    const barHeight = slot.value === 0 ? capWidth * 0.5 : Math.max(capWidth, (slot.value / max) * (floor - 8));
+    const bar = el('rect', {
+      class: slot.value === 0 ? '' : TONE[slot.tone] ?? TONE.lime,
+      fill: slot.value === 0 ? 'var(--track)' : null,
+      x: cx - capWidth / 2, y: floor - barHeight, width: capWidth, height: barHeight, rx: capWidth / 2,
+    });
+    bar.appendChild(el('title', {}, [txt(slot.title ?? `${slot.label}: ${format(slot.value)}`)]));
+    nodes.push(bar);
+
+    const labelled = every
+      ? index % every === 0
+      : index === 0 || index === slots.length - 1;
+    if (labelled) {
+      nodes.push(el('text', { x: cx, y: height - 4, 'text-anchor': 'middle' }, [txt(slot.label)]));
     }
   });
   return frame(width, height, label, nodes);
@@ -352,6 +365,90 @@ export function dotMatrix(grid, { label = 'when each of you worked', dayLabel =
   return frame(width, height, label, nodes);
 }
 
+/**
+ * The one-day contention chart: a lane per person across the twenty-four hours.
+ *
+ * The days × bands matrix is the right picture for a week and the wrong one for a
+ * day — one day at three-hour bands is eight dots in a single column, which
+ * throws away the only axis a day has. So a single selected day is drawn
+ * transposed: hours run across, people run down, and the dot on each person's
+ * lane is how much they did in that hour.
+ *
+ * Colour keeps the meaning it has everywhere else. A dot is orange when somebody
+ * ELSE was also working that hour, which is the question this chart exists to
+ * answer: not "was the pool busy" but "was I sharing the window, and with whom".
+ * A top summary lane carries the pool, so the overlap reads at a glance before
+ * any single name does.
+ *
+ * @param {object} grid  from analytics/team.mjs — needs `cells`, `people`, `peak`
+ */
+export function hourMatrix(grid, { label = 'who worked when today' } = {}) {
+  const hours = 24;
+  const cell = 24;
+  const left = 92;
+  const top = 8;
+  const rowGap = 6;
+  const rows = [{ deviceId: null, name: 'Everyone', initials: null, isMe: false }, ...grid.people];
+  const width = left + hours * cell + 10;
+  const height = top + rows.length * (cell + rowGap) + 18;
+  const maxRadius = cell * 0.44;
+  const peak = Math.max(grid.peak, 1);
+
+  const byBand = new Map(grid.cells.map((item) => [item.band, item]));
+  const nodes = [];
+
+  rows.forEach((person, index) => {
+    const cy = top + index * (cell + rowGap) + cell / 2;
+
+    nodes.push(el('text', {
+      x: left - 12, y: cy, 'text-anchor': 'end', 'dominant-baseline': 'middle',
+      style: person.isMe ? 'fill:var(--ink)' : null,
+    }, [txt(clipName(person.isMe ? `${person.name} (you)` : person.name))]));
+
+    for (let hour = 0; hour < hours; hour += 1) {
+      const item = byBand.get(hour);
+      const cx = left + hour * cell + cell / 2;
+
+      // The pool lane is the hour's total; a person's lane is only their own.
+      const value = person.deviceId === null
+        ? item?.total ?? 0
+        : item?.byDevice?.[person.deviceId] ?? 0;
+
+      if (!value) {
+        nodes.push(el('circle', { cx, cy, r: 2, fill: 'var(--track)' }));
+        continue;
+      }
+
+      // Shared means: somebody other than this lane's person also worked here.
+      const shared = person.deviceId === null
+        ? (item?.people ?? 0) > 1
+        : Object.keys(item?.byDevice ?? {}).some((id) => id !== person.deviceId);
+
+      // Square root, because the eye compares a dot's AREA. Scaling the radius
+      // linearly makes a busy hour look four times worse than it is.
+      const radius = Math.max(3, Math.sqrt(value / peak) * maxRadius);
+      const dot = el('circle', { class: shared ? TONE.orange : TONE.lime, cx, cy, r: radius });
+      dot.appendChild(el('title', {}, [txt(
+        `${person.deviceId === null ? 'Everyone' : person.name} \u00b7 ${String(hour).padStart(2, '0')}:00 \u00b7 ` +
+        `${value} events${shared ? ' \u00b7 shared with someone else' : ' \u00b7 had the window alone'}`,
+      )]));
+      nodes.push(dot);
+    }
+  });
+
+  for (let hour = 0; hour < hours; hour += 3) {
+    nodes.push(el('text', {
+      x: left + hour * cell + cell / 2, y: height - 5, 'text-anchor': 'middle',
+    }, [txt(String(hour).padStart(2, '0'))]));
+  }
+
+  return frame(width, height, label, nodes);
+}
+
+function clipName(name) {
+  return name.length > 14 ? `${name.slice(0, 13)}\u2026` : name;
+}
+
 /**
  * One row per day, split into a capsule per person — the reference's timeline,
  * answering "who took the day".