syndes 0.3.0 → 0.4.0

package/dashboard/web/ui.js

@@ -45,6 +45,8 @@ const ICONS = {
     'M15 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0', 'M8 16a2 2 0 1 0 4 0 2 2 0 0 0-4 0',
   ],
   chevron: ['M6.5 9.5 12 15l5.5-5.5'],
+  left: ['M14.5 5.5 8 12l6.5 6.5'],
+  right: ['M9.5 5.5 16 12l-6.5 6.5'],
   tick: ['M5 12.5 9.5 17 19 7.5'],
 };
 
@@ -188,6 +190,77 @@ export function dropdown({ value, options, onChange, label = null, onCard = fals
   return trigger;
 }
 
+/**
+ * The day picker: step back a day, pick one from a list, step forward.
+ *
+ * Two ways in, because they answer different questions. The arrows are for
+ * "what about the day before this one", which is the move somebody makes five
+ * times in a row and must not cost five menu openings. The list is for "take me
+ * to last Tuesday", and it carries each day's volume so a quiet day is visible
+ * before it is opened rather than after.
+ *
+ * Forward is disabled on today rather than hidden. A control that disappears
+ * makes the row reflow under the pointer, and the disabled state is what says
+ * "this is the edge" instead of leaving someone to wonder where the button went.
+ *
+ * @param {string}   day      the selected day, YYYY-MM-DD
+ * @param {object[]} days     [{ day, records, activeMs, tokens }], newest first
+ * @param {Function} onChange called with the newly selected day
+ */
+export function daypicker({ day, days = [], onChange }) {
+  const today = todayISO();
+  const known = new Map(days.map((entry) => [entry.day, entry]));
+
+  // The listed days, plus the selected one if it is outside what the server
+  // returned — a day you are looking at must always appear in the list that
+  // claims to be showing which day you are looking at.
+  const listed = known.has(day) ? [...days] : [{ day, records: null }, ...days];
+
+  const step = (delta) => {
+    const next = shiftISO(day, delta);
+    if (next > today) return;
+    onChange(next);
+  };
+
+  const arrow = (name, label, delta, disabled) => h('button.stepper__btn', {
+    type: 'button',
+    title: label,
+    'aria-label': label,
+    disabled,
+    onclick: () => step(delta),
+  }, [icon(name, { size: 16 })]);
+
+  return h('div.stepper', {}, [
+    arrow('left', 'The day before', -1, false),
+    dropdown({
+      label: 'Day',
+      value: day,
+      onChange,
+      options: listed.slice(0, 120).map((entry) => ({
+        id: entry.day,
+        label: dayLabel(entry.day),
+        hint: dayHint(entry),
+      })),
+    }),
+    arrow('right', 'The day after', 1, day >= today),
+  ]);
+}
+
+/**
+ * What a day looks like before you open it.
+ *
+ * `records: null` means the rollup cache has not folded that day yet, which is
+ * not the same as a day with nothing in it — so it says so rather than claiming
+ * a zero it has not measured.
+ */
+function dayHint(entry) {
+  if (entry.records === null || entry.records === undefined) return 'not counted yet';
+  if (!entry.records) return 'nothing recorded';
+  const parts = [`${compact(entry.records)} records`];
+  if (entry.activeMs) parts.push(duration(entry.activeMs));
+  return parts.join(' \u00b7 ');
+}
+
 export function replace(node, ...children) {
   node.replaceChildren(...children.flat().filter(Boolean));
   return node;
@@ -212,11 +285,6 @@ export function compact(value) {
   return String(Math.round(value));
 }
 
-export function usd(value) {
-  if (value === null || value === undefined) return DASH;
-  return value >= 1000 ? `$${Math.round(value).toLocaleString()}` : `$${value.toFixed(2)}`;
-}
-
 export function duration(ms) {
   if (!ms || ms < 0) return '0m';
   const minutes = Math.round(ms / 60_000);
@@ -226,6 +294,24 @@ export function duration(ms) {
   return rest ? `${hours}h ${rest}m` : `${hours}h`;
 }
 
+/**
+ * A per-hour rate. `compact` does the magnitude; this only adds the unit, so a
+ * burn rate and a token count never disagree about what "1.2M" means.
+ *
+ * Null is an em dash, not 0 — a rate we could not measure must not read as a
+ * rate of nothing. See analytics/metrics/window.mjs.
+ */
+export function perHour(value) {
+  if (value === null || value === undefined || Number.isNaN(value)) return DASH;
+  return `${compact(value)}/h`;
+}
+
+/** A ratio printed as a multiplier: 63.6 → "64×". */
+export function times(value, digits = 0) {
+  if (value === null || value === undefined || Number.isNaN(value)) return DASH;
+  return `${value.toFixed(digits)}×`;
+}
+
 export function percent(fraction, digits = 0) {
   if (fraction === null || fraction === undefined || Number.isNaN(fraction)) return DASH;
   return `${(fraction * 100).toFixed(digits)}%`;
@@ -243,6 +329,36 @@ export const when = (ts) => (ts ? new Date(ts).toLocaleString(undefined, { month
 export const clock = (ts) => new Date(ts).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
 export const dayName = (iso) => new Date(`${iso}T12:00`).toLocaleDateString(undefined, { weekday: 'short' });
 
+/** Today's local date as YYYY-MM-DD — the same shape analytics/ranges.mjs speaks. */
+export function todayISO(now = new Date()) {
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  return `${now.getFullYear()}-${month}-${day}`;
+}
+
+export function shiftISO(iso, delta) {
+  const [year, month, date] = iso.split('-').map(Number);
+  // Noon, so a DST boundary cannot push the result onto the wrong calendar day.
+  return todayISO(new Date(year, month - 1, date + delta, 12));
+}
+
+/**
+ * A day, named the way a person would say it.
+ *
+ * "Today" and "Yesterday" beat a date for the two days somebody is nearly always
+ * looking at, and a date beats a weekday for everything older — "Tuesday" is
+ * ambiguous the moment more than one Tuesday is on offer.
+ */
+export function dayLabel(iso, { long = false } = {}) {
+  const today = todayISO();
+  if (iso === today) return 'Today';
+  if (iso === shiftISO(today, -1)) return 'Yesterday';
+  const date = new Date(`${iso}T12:00`);
+  return date.toLocaleDateString(undefined, long
+    ? { weekday: 'long', day: 'numeric', month: 'long' }
+    : { weekday: 'short', day: 'numeric', month: 'short' });
+}
+
 // ── Components ─────────────────────────────────────────────────────────────
 
 export function card(title, body, { note = null, actions = null, className = '' } = {}) {

package/dashboard/web/views/overview.js

@@ -3,16 +3,25 @@
  *
  * Four questions, in the order people actually ask them:
  *   1. Am I working well?     the score, and what dragged it
- *   2. What did it cost me?   throughput and spend, with the shape of the trend
- *   3. When did I work?       a day-by-day timeline
+ *   2. What did it take?      throughput and burn rate, with the shape of it
+ *   3. When did I work?       hour by hour on one day, day by day over a range
  *   4. What should I change?  the top findings, with their evidence
  *
  * Anything that does not answer one of those four is not on this page.
+ *
+ * The page has two shapes, because one day and thirty days are different
+ * questions rather than the same question at different widths. Over a range the
+ * x axis is days; on a single day it is hours. A week's chart drawn with one
+ * point on it is not a simpler chart, it is a broken one — and the single day is
+ * now the default, so it is the shape that has to be right first.
  */
 
 import { api } from '../api.js';
-import { h, card, figure, trend, chip, dot, meter, legend, empty, compact, usd, duration, percent } from '../ui.js';
-import { dial, capsules, timeline, dualLine } from '../charts.js';
+import {
+  h, card, figure, trend, chip, dot, meter, legend, empty,
+  compact, duration, percent, perHour, times, dayLabel,
+} from '../ui.js';
+import { dial, capsules, timeline, dualLine, dayStrip } from '../charts.js';
 
 /** Tone by what a tool costs you, which is what the colour is claiming. */
 const FAMILY_TONE = {
@@ -20,17 +29,25 @@ const FAMILY_TONE = {
   edit: 'white', execute: 'white', web: 'white', mcp: 'white', other: 'white',
 };
 
-export async function render({ range, go }) {
+const NAMES = { 'claude-code': 'Claude Code', codex: 'Codex' };
+
+export async function render({ range, days, go, setDay, setScope }) {
   const [data, practices] = await Promise.all([api.overview(range), api.practices()]);
 
   if ((data.ledger?.seq ?? -1) < 0) return firstRun();
 
+  // The server's answer, not the client's guess: it resolved the spec, so it is
+  // the one that knows whether this turned out to be a single day.
+  const oneDay = data.range.days.length === 1;
+  if (oneDay && !data.metrics.records) return quietDay(data.range.days[0], days, { setDay, setScope });
+
+
   // Fixed top row, and the bottom row takes whatever is left — so the view is
   // exactly one screen and the findings list scrolls inside its own card.
   return h('div.content--fit', {
     style: 'display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--s4);min-height:0',
   }, [
-    h('div.grid.g-3', {}, [scoreCard(data), throughputCard(data), timelineCard(data)]),
+    h('div.grid.g-3', {}, [scoreCard(data), throughputCard(data, oneDay), shapeCard(data, oneDay)]),
     h('div.grid.fill', { style: 'grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)' }, [
       distributionCard(data),
       fixCard(practices.findings, go),
@@ -59,6 +76,54 @@ function firstRun() {
   ]);
 }
 
+/**
+ * A day with nothing on it.
+ *
+ * This became the common case the moment one day became the default: open the
+ * dashboard before you have started and every chart is empty. Five empty charts
+ * read as a broken tool, so the day says it is quiet in words and then offers the
+ * two ways out — the last day that does have something on it, and the week.
+ *
+ * The suggested day comes from the picker's own index, so it is never a guess
+ * about which day had work: it is the same list the dropdown is showing. The
+ * shell fetches that list in the background, which on a first load can land
+ * after this panel — so the panel asks for it when it arrives empty rather than
+ * dropping the one button that gets somebody out of an empty day.
+ */
+async function quietDay(theDay, days = [], { setDay, setScope }) {
+  let index = days;
+  if (!index.length) {
+    index = await api.days().then((body) => body.days ?? []).catch(() => []);
+  }
+  const previous = index.find((entry) => entry.day < theDay && entry.records > 0);
+
+  return h('div', { style: 'display:grid;place-items:center;height:100%' }, [
+    h('div', { style: 'max-width:540px;display:grid;gap:18px;justify-items:center;text-align:center' }, [
+      h('div', {
+        style: 'font-size:24px;font-weight:750;letter-spacing:-0.02em;text-transform:uppercase',
+        text: `Nothing recorded ${preposition(theDay)}`,
+      }),
+      h('p', { style: 'color:var(--ink-2);line-height:1.7;margin:0',
+        text: 'The chain is intact and recording — this day simply has no sessions on it yet. Step back a day with the arrows, or widen the window.' }),
+      h('div', { style: 'display:flex;gap:10px;flex-wrap:wrap;justify-content:center' }, [
+        previous
+          ? h('button.btn.btn--lime', {
+              text: `Go to ${dayLabel(previous.day)}`,
+              onclick: () => setDay(previous.day),
+            })
+          : null,
+        h('button.btn.btn--ghost', { text: 'Last 7 days', onclick: () => setScope('7d') }),
+      ]),
+    ]),
+  ]);
+}
+
+/** "today" reads better than "on today"; a date needs the preposition. */
+function preposition(theDay) {
+  const label = dayLabel(theDay, { long: true });
+  return label === 'Today' || label === 'Yesterday' ? label.toLowerCase() : `on ${label}`;
+}
+
 // ── 1. Score ───────────────────────────────────────────────────────────────
 
 function scoreCard({ score, scoreDelta }) {
@@ -89,7 +154,7 @@ function scoreCard({ score, scoreDelta }) {
   ], { note: 'weighted' });
 }
 
-// ── 2. Throughput and spend ────────────────────────────────────────────────
+// ── 2. Throughput and what it took ─────────────────────────────────────────
 
 /**
  * Which agent the work came from.
@@ -105,55 +170,118 @@ function sourceChips(metrics) {
   return sources.map(([id, bucket]) => chip(`${NAMES[id] ?? id} · ${compact(bucket.toolCalls)}`));
 }
 
-const NAMES = { 'claude-code': 'Claude Code', codex: 'Codex' };
-
-function throughputCard({ headline, previousHeadline: before, series, cost, metrics }) {
+/**
+ * Throughput, and the rate the usage window went at.
+ *
+ * The second figure used to be a dollar amount. It is a burn rate now, because
+ * a Claude plan bills a month and not a token: the invented price was the one
+ * number on this page nobody is charged. New tokens per active hour IS the
+ * scarcity on a subscription, and unlike a price it moves when you change how
+ * you work. analytics/metrics/window.mjs has the full argument, including why
+ * the rate divides new tokens rather than the cache-read total.
+ */
+function throughputCard({ headline, previousHeadline: before, series, metrics }, oneDay) {
   return card('Throughput', [
     h('div.pair', {}, [
       figure('Active time', duration(headline.activeMs), { small: true }),
-      figure('Spend', usd(headline.usd), { small: true }),
+      figure('New tokens / active hour', perHour(headline.freshPerHour), { small: true }),
     ]),
+
+    // A single day gets counts where a range gets a chart. The hourly SHAPE of a
+    // day is the next card's entire job, and two charts of the same series is
+    // worse than one — so this side spends the space on the numbers instead.
+    oneDay
+      ? h('div.pair', {}, [
+          figure('Tool calls', compact(headline.toolCalls), { small: true }),
+          figure('Prompts', String(headline.prompts), { small: true }),
+          figure('Sessions', String(headline.sessions), { small: true }),
+        ])
+      : null,
+
     // One trend line, not one per figure: repeating "no prior period" twice
     // spends two rows saying nothing.
     trend(headline.toolCalls, before.toolCalls, { format: (value) => `${compact(value)} calls` }),
-    h('div', { style: 'flex:1;min-height:0;display:grid;align-items:center' }, [
+
+    oneDay ? null : h('div', { style: 'flex:1;min-height:0;display:grid;align-items:center' }, [
       dualLine(
-        series.map((day) => day.toolCalls),
-        series.map((day) => day.tokens / 1000),
+        series.map((entry) => entry.toolCalls),
+        series.map((entry) => entry.tokens / 1000),
         { height: 110 },
       ),
     ]),
-    legend([
+    oneDay ? null : legend([
       { tone: 'lime', label: 'tool calls' },
       { tone: 'orange', label: 'tokens' },
     ]),
-    h('div', { style: 'display:flex;gap:10px;flex-wrap:wrap' }, [
+
+    h('div', {
+      style: `display:flex;gap:10px;flex-wrap:wrap;align-content:end${oneDay ? ';flex:1;min-height:0' : ''}`,
+    }, [
       chip(`${percent(headline.cacheHitRate)} from cache`, 'lime'),
-      chip(`${compact(headline.tokens)} tokens`),
-      cost.estimated ? chip('estimated pricing') : null,
+      chip(`${compact(headline.tokens)} tokens read`),
+      chip(`${compact(headline.fresh)} new`),
+      // Restating the total under another name is not a second number, so this
+      // only appears once there is more than one ask to average over.
+      headline.prompts > 1 && headline.freshPerPrompt !== null
+        ? chip(`${compact(headline.freshPerPrompt)} per prompt`)
+        : null,
+      headline.cacheLeverage === null ? null : chip(`${times(headline.cacheLeverage)} context reuse`),
       ...sourceChips(metrics),
     ]),
-  ]);
+  ], { note: oneDay ? 'this day' : null });
 }
 
 // ── 3. When the work happened ──────────────────────────────────────────────
 
-function timelineCard({ series }) {
+function shapeCard(data, oneDay) {
+  return oneDay ? hourCard(data) : dayCard(data);
+}
+
+/**
+ * One day, by the hour, in minutes worked.
+ *
+ * Minutes and not event counts: twelve tool calls in an hour is not the same
+ * thing as twelve minutes of work, and a day drawn from record counts reports a
+ * busy minute as a busy hour. analytics/metrics/time.mjs folds both series for
+ * exactly this reason.
+ */
+function hourCard({ hourActiveMs, hours }) {
+  const minutes = (hourActiveMs ?? []).map((ms) => Math.round(ms / 60_000));
+  const worked = minutes.reduce((sum, value) => sum + value, 0);
+
+  const slots = minutes.map((value, hour) => ({
+    label: String(hour).padStart(2, '0'),
+    value,
+    tone: 'lime',
+    title: value
+      ? `${String(hour).padStart(2, '0')}:00 · ${value}m active · ${hours?.[hour] ?? 0} events`
+      : `${String(hour).padStart(2, '0')}:00 · nothing recorded`,
+  }));
+
+  return card('Active minutes by hour', [
+    worked
+      ? dayStrip(slots, { height: 150, labelEvery: 3, label: 'active minutes by hour of the day' })
+      : empty('No active time recorded on this day'),
+    legend([{ tone: 'lime', label: 'minutes worked' }], `${worked}m`),
+  ], { note: '24 hours, local' });
+}
+
+function dayCard({ series }) {
   const days = series.slice(-9);
-  const maxMinutes = Math.max(...days.map((day) => day.activeMs / 60_000), 10);
+  const maxMinutes = Math.max(...days.map((entry) => entry.activeMs / 60_000), 10);
   const step = Math.max(10, Math.ceil(maxMinutes / 4 / 10) * 10);
   const ticks = [];
   for (let value = 0; value <= maxMinutes + step; value += step) ticks.push({ at: value, label: String(value) });
 
-  const bars = days.map((day) => ({
-    row: day.day.slice(5).replace('-', '.'),
+  const bars = days.map((entry) => ({
+    row: entry.day.slice(5).replace('-', '.'),
     start: 0,
-    end: day.activeMs / 60_000,
-    value: `${Math.round(day.activeMs / 60_000)}m`,
+    end: entry.activeMs / 60_000,
+    value: `${Math.round(entry.activeMs / 60_000)}m`,
     empty: 'no activity',
     // Orange marks a day the context window ran out — the thing worth spotting
     // in a week at a glance.
-    tone: day.compacts > 0 ? 'orange' : 'lime',
+    tone: entry.compacts > 0 ? 'orange' : 'lime',
   }));
 
   return card('Active minutes by day', [
@@ -163,7 +291,7 @@ function timelineCard({ series }) {
     legend([
       { tone: 'lime', label: 'clean day' },
       { tone: 'orange', label: 'context ran out' },
-    ], days.reduce((sum, day) => sum + Math.round(day.activeMs / 60_000), 0)),
+    ], days.reduce((sum, entry) => sum + Math.round(entry.activeMs / 60_000), 0)),
   ]);
 }
 
@@ -195,6 +323,14 @@ function distributionCard({ metrics }) {
 
 // ── 5. What to change ──────────────────────────────────────────────────────
 
+/**
+ * The findings are NOT scoped to the selected window.
+ *
+ * The practice engine reads its own recent history, because a rule about retry
+ * storms needs the run of events that produced one and cannot answer from a day
+ * you happen to be looking at. The note says so rather than letting the card
+ * imply it is about the day above it.
+ */
 function fixCard(findings, go) {
   const live = findings.filter((finding) => !finding.muted).slice(0, 3);
 
@@ -209,6 +345,7 @@ function fixCard(findings, go) {
         h('div.finding__fix', {}, [h('span', { text: finding.fix })]),
       ]))
     : [empty('No rule found a pattern worth changing.')]), {
+    note: 'recent habits, not this window',
     actions: h('button.btn.btn--ghost.btn--sm', { text: 'All habits', style: 'margin-left:auto', onclick: () => go('habits') }),
   });
 }

package/dashboard/web/views/settings.js

@@ -88,7 +88,7 @@ async function paint(page) {
       toggle('Tool calls', config.track.tools, (v) => save('track.tools', v), 'Most of the score is built from these.'),
       toggle('Prompts', config.track.prompts, (v) => save('track.prompts', v)),
       toggle('Permission requests', config.track.permissions, (v) => save('track.permissions', v)),
-      toggle('Tokens and cost', config.track.transcript, (v) => save('track.transcript', v), 'Read incrementally from the session transcript.'),
+      toggle('Tokens and cache', config.track.transcript, (v) => save('track.transcript', v), 'Read incrementally from the session transcript.'),
       toggle('Git commits', config.track.git, (v) => save('track.git', v)),
     ]),