syndes 0.3.0 → 0.4.0

package/dashboard/web/views/team.js

@@ -4,9 +4,13 @@
  * Four questions, in the order two people sharing a plan actually ask them:
  *   1. Whose share is it?        the split, and which way it moved
  *   2. What is the pool doing?   totals, and whether the numbers are live
- *   3. Were we in each other's way?  the contention grid — the one thing
+ *   3. Were we in each other's way?  the contention chart — the one thing
  *      neither person can see from their own machine
- *   4. How did each day break down?  the daily split, and the people table
+ *   4. How did it break down?        the split, and who is in the pool
+ *
+ * The page defaults to one day, like the rest of the dashboard, because that is
+ * the question a shared plan actually raises: not "who used more this month" but
+ * "are we throttling each other right now". A week's average cannot answer it.
  *
  * The page is live while it is open: it holds one event stream, and the server
  * polls the pool only while that stream exists. When the view is replaced the
@@ -16,21 +20,22 @@
 
 import { api } from '../api.js';
 import {
-  h, card, figure, trend, chip, dot, meter, legend, empty, table, modal,
-  compact, usd, duration, percent, when, DASH,
+  h, card, figure, trend, chip, dot, meter, legend, empty, modal,
+  compact, duration, percent, perHour, when, dayLabel, DASH,
 } from '../ui.js';
-import { dotMatrix, laneSplit, splitBar } from '../charts.js';
+import { dotMatrix, hourMatrix, laneSplit, splitBar } from '../charts.js';
 
 export async function render({ range }) {
   const data = await api.team(range);
 
-  const outlet = h('div.content--fit', {
-    style: 'display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--s4);min-height:0',
-  });
+  // Not `content--fit`. That pins the page to the viewport and divides what is
+  // left between two rows, which is right for a dense screen and wrong here:
+  // with one person in the pool the cards have little in them, and forcing them
+  // to fill a tall window leaves most of it empty. Letting the page size to its
+  // content and scroll adapts to any window instead of assuming one.
+  const outlet = h('div.content.team', {});
 
   if (!data.enabled) {
-    outlet.style.display = 'grid';
-    outlet.style.gridTemplateRows = 'minmax(0,1fr)';
     outlet.appendChild(setup(range, outlet));
     return outlet;
   }
@@ -79,12 +84,12 @@ function connect(outlet, range) {
 function paint(outlet, data, range, { live = false } = {}) {
   const me = data.peers.find((peer) => peer.isMe) ?? null;
 
+  // One auto-fitting grid rather than two fixed rows. Cards claim a column when
+  // there is room for one and wrap when there is not, so the same markup works
+  // on a laptop and on a wide monitor without a breakpoint deciding for it.
   outlet.replaceChildren(
-    h('div.grid.g-3', {}, [shareCard(data, me), poolCard(data, live), contentionCard(data)]),
-    h('div.grid.fill', { style: 'grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)' }, [
-      splitCard(data),
-      peopleCard(data, outlet, range),
-    ]),
+    h('div.autogrid', {}, [shareCard(data, me), poolCard(data, live), contentionCard(data)]),
+    h('div.autogrid.autogrid--wide', {}, [splitCard(data), peopleCard(data, outlet, range)]),
   );
 }
 
@@ -106,9 +111,13 @@ function shareCard(data, me) {
         }) : null,
       }),
       h('div', { style: 'display:grid;gap:4px' }, [
-        h('span.card__note', { text: `Even split would be ${percent(fair)}` }),
+        // Meaningless while you are the only one here — "an even split would be
+        // 100%" is true and says nothing.
+        data.peers.length > 1 ? h('span.card__note', { text: `Even split would be ${percent(fair)}` }) : null,
         h('span.card__note', {
-          text: `${compact(me?.totals.tokens ?? 0)} of ${compact(data.totals.tokens)} tokens`,
+          text: data.peers.length > 1
+            ? `${compact(me?.totals.tokens ?? 0)} of ${compact(data.totals.tokens)} tokens`
+            : `${compact(data.totals.tokens)} tokens · nobody else has joined yet`,
         }),
       ]),
     ]),
@@ -124,7 +133,18 @@ function shareCard(data, me) {
   ]);
 }
 
-// 2. What is the pool doing
+/**
+ * 2. What is the pool doing
+ *
+ * The fourth figure used to be a notional dollar amount with a paragraph under
+ * it apologising for being notional. Both are gone. On a shared plan nobody is
+ * billed per token, so the number was an invention — and a figure that needs a
+ * disclaimer to be read correctly has already failed.
+ *
+ * What replaces it is the rate the SHARED window is being spent at, which is the
+ * actual scarcity two people on one account are splitting. See
+ * analytics/metrics/window.mjs.
+ */
 function poolCard(data, live) {
   const sync = data.sync ?? {};
   const failed = sync.ok === false && sync.error;
@@ -132,12 +152,12 @@ function poolCard(data, live) {
   return card('The pool', [
     h('div.grid', { style: 'grid-template-columns:1fr 1fr;gap:var(--s4)' }, [
       figure('people', String(data.totals.people), { small: true }),
-      figure('tokens', compact(data.totals.tokens), {
+      figure('tokens read', compact(data.totals.tokens), {
         small: true,
         trend: trend(data.totals.tokens, data.totals.tokens - (data.totals.deltaTokens ?? 0), { format: compact }),
       }),
       figure('active time', duration(data.totals.activeMs), { small: true }),
-      figure('notional cost', usd(data.totals.usd), { small: true }),
+      figure('new tokens / active hour', perHour(data.rates?.freshPerHour), { small: true }),
     ]),
 
     h('div', { style: 'display:grid;gap:6px;margin-top:auto' }, [
@@ -152,44 +172,69 @@ function poolCard(data, live) {
       h('span.card__note', { text: `Last exchange ${sync.at ? when(sync.at) : DASH}` }),
       failed ? h('span.card__note', { style: 'color:var(--orange)', text: String(sync.error).slice(0, 120) }) : null,
       h('span.card__note', {
-        // Said plainly on the page rather than buried in a doc: on a shared plan
-        // the dollars are what these tokens WOULD have cost at API rates, and
-        // presenting an estimate as a bill would be the wrong kind of confident.
-        text: 'Cost is notional — a shared plan bills a subscription, not tokens.',
+        // Said plainly on the page rather than left to be inferred: the scarce
+        // thing here is the window, so that is what the rate measures. Cache
+        // reads are excluded because they are context nobody had to re-send.
+        text: 'No prices: a shared plan bills a subscription. The rate counts new tokens only.',
       }),
     ]),
   ]);
 }
 
-// 3. Were we in each other's way
+/**
+ * 3. Were we in each other's way
+ *
+ * Two pictures of one question, because a day and a fortnight are not the same
+ * shape. Over a range: days across, three-hour bands down, one dot per band —
+ * good for spotting a pattern. On a single day: hours across, a lane per person
+ * down — good for seeing that the two of you were both on it at four, and which
+ * two. The server decides which (analytics/team.mjs sets `grid.hourly`), because
+ * it is the side that resolved the range.
+ */
 function contentionCard(data) {
   const grid = data.grid;
   const overlapping = grid.overlapBands > 0;
+  const unit = grid.hourly ? 'hour' : 'band';
 
-  return card('When each of you worked', [
+  return card(grid.hourly ? 'Who worked when' : 'When each of you worked', [
     h('div', { style: 'display:flex;align-items:baseline;gap:var(--s3)' }, [
-      figure('of working hours overlapped', percent(grid.overlapRate), { small: true }),
-      overlapping ? chip(`${grid.overlapBands} bands`, 'orange') : chip('no overlap', 'lime'),
+      figure(`of working ${unit}s overlapped`, percent(grid.overlapRate), { small: true }),
+      overlapping
+        ? chip(`${grid.overlapBands} ${unit}${grid.overlapBands === 1 ? '' : 's'}`, 'orange')
+        : chip('no overlap', 'lime'),
     ]),
-    dotMatrix(grid),
+    h('div.scroll-x', {}, [grid.hourly ? hourMatrix(grid) : dotMatrix(grid)]),
     legend([
-      { tone: 'lime', label: 'one person had the window' },
-      { tone: 'orange', label: 'two or more at once' },
+      { tone: 'lime', label: 'had the window alone' },
+      { tone: 'orange', label: 'shared it with someone' },
     ]),
     h('span.card__note', {
       text: overlapping
-        ? 'Orange bands are where you were both spending the same rate limit.'
+        ? `Orange ${unit}s are where you were both spending the same rate limit.`
         : 'Nobody has collided in this period.',
     }),
-  ], { note: `${grid.bandHours}-hour bands` });
+  ], { note: grid.hourly ? 'one day, by the hour' : `${grid.bandHours}-hour bands` });
 }
 
-// 4a. How did each day break down
+/**
+ * 4a. How each day broke down.
+ *
+ * One row per day with a capsule per person. A single selected day is one row,
+ * which is small but not degraded — it still answers who took the day, and the
+ * contention chart beside it is the one that spreads a single day out.
+ */
 function splitCard(data) {
+  const oneDay = data.range.days.length === 1;
+  const title = oneDay ? 'The split' : 'Daily split';
   const rows = data.lanes.filter((row) => row.total > 0);
-  if (!rows.length) return card('Daily split', [empty('No shared activity in this range yet.')]);
 
-  return card('Daily split', [
+  if (!rows.length) {
+    return card(title, [empty(oneDay
+      ? `Nobody in the pool recorded anything on ${dayLabel(data.range.days[0])}.`
+      : 'No shared activity in this range yet.')]);
+  }
+
+  return card(title, [
     h('div.card__scroll', {}, [
       laneSplit(rows, { format: compact }),
     ]),
@@ -197,60 +242,78 @@ function splitCard(data) {
       { tone: 'lime', label: 'you' },
       { tone: 'white', label: 'everyone else' },
     ], compact(data.totals.tokens)),
-  ], { note: 'newest first' });
+  ], { note: oneDay ? dayLabel(data.range.days[0]) : 'newest first' });
 }
 
 // 4b. The people
+/**
+ * One block per person, not a table.
+ *
+ * This was a seven-column table, and it did not survive contact with a real
+ * card: the name truncated to "Gurupra…", "3h 21m" wrapped and clipped, and the
+ * remove control was pushed off the right edge behind a scrollbar. A table needs
+ * a width it can rely on, and a card in a reflowing grid cannot promise one.
+ *
+ * Rows fix that by stacking within each person rather than across them — the
+ * name gets the width, the numbers wrap as a group, and nothing is ever cut off.
+ */
 function peopleCard(data, outlet, range) {
-  const rows = data.peers.map((peer) => [
-    h('div', { style: 'display:flex;align-items:center;gap:9px;min-width:0' }, [
-      h('span.avatar', { text: peer.initials, title: peer.host ?? peer.deviceId }),
-      h('div', { style: 'display:grid;min-width:0' }, [
-        h('span', {
-          style: 'font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
-          text: peer.name,
-        }),
-        h('span.card__note', { text: peer.isMe ? 'this machine' : (peer.host ?? DASH) }),
-      ]),
-      peer.stale ? chip('stale', 'orange') : null,
+  const actions = h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap' }, [
+    h('button.btn.btn--lime.btn--sm', { text: 'Invite', onclick: () => invite() }),
+    h('button.btn.btn--ghost.btn--sm', { text: 'Rename', onclick: () => rename(data, outlet, range) }),
+    h('button.btn.btn--ghost.btn--sm', { text: 'Sync now', onclick: () => syncNow(outlet, range) }),
+  ]);
+
+  return card('People', [
+    h('div.people', {}, data.peers.map((peer) => personRow(peer, outlet, range))),
+
+    data.peers.length === 1
+      ? h('span.card__note', { text: 'Only this machine so far. Invite gives you a line to send someone.' })
+      : h('span.card__note', { text: 'A stale shelf has not synced in six hours — a machine that stopped reporting, not a quiet day.' }),
+
+    h('div', { style: 'margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;padding-top:var(--s2)' }, [
+      h('button.btn.btn--ghost.btn--sm', { text: `Sharing: ${data.config.scope}`, onclick: () => changeScope(data, outlet, range) }),
+      h('button.btn.btn--ghost.btn--sm', { text: 'Leave pool', onclick: () => leavePool(outlet, range) }),
     ]),
-    h('div', { style: 'display:grid;gap:5px;min-width:90px' }, [
-      h('span.tnum', { style: 'font-size:12px', text: percent(peer.share) }),
+  ], { actions });
+}
+
+function personRow(peer, outlet, range) {
+  return h('div.person', {}, [
+    h('span.avatar', { text: peer.initials, title: peer.host ?? peer.deviceId }),
+
+    h('div', { style: 'min-width:0;display:grid;gap:6px' }, [
+      h('div.person__head', {}, [
+        h('span.person__name', { text: peer.name, title: peer.name }),
+        peer.isMe ? h('span.person__tag', { text: 'this machine' }) : null,
+        peer.stale ? chip('stale', 'orange') : null,
+        h('span.person__share', { text: percent(peer.share) }),
+      ]),
+
       meter(peer.share, peer.isMe ? 'lime' : 'white'),
+
+      // Wraps as a group rather than being squeezed into columns, so a narrow
+      // card loses a line instead of losing a number.
+      h('div.person__stats', {}, [
+        stat(compact(peer.totals.tokens), 'tokens'),
+        stat(String(peer.totals.sessions), peer.totals.sessions === 1 ? 'session' : 'sessions'),
+        stat(duration(peer.totals.activeMs), 'active'),
+        stat(peer.score === null ? DASH : String(peer.score), 'score'),
+      ]),
     ]),
-    compact(peer.totals.tokens),
-    String(peer.totals.sessions),
-    duration(peer.totals.activeMs),
-    peer.score === null ? DASH : String(peer.score),
+
     peer.isMe
-      ? h('span', { style: 'color:var(--ink-3)', text: DASH })
+      ? null
       : h('button.btn.btn--ghost.btn--sm', {
           text: 'Remove',
           title: `Remove ${peer.name} from the pool`,
           onclick: () => remove(peer, outlet, range),
         }),
   ]);
+}
 
-  const actions = h('div', { style: 'display:flex;gap:8px' }, [
-    h('button.btn.btn--lime', { text: 'Invite', onclick: () => invite() }),
-    h('button.btn.btn--ghost', { text: 'Rename', onclick: () => rename(data, outlet, range) }),
-    h('button.btn.btn--ghost', { text: 'Sync now', onclick: () => syncNow(outlet, range) }),
-  ]);
-
-  return card('People', [
-    table(
-      ['Person', 'Share', 'Tokens', 'Sessions', 'Active', 'Score', ''],
-      rows,
-      { align: ['left', 'left', 'right', 'right', 'right', 'right', 'right'] },
-    ),
-    h('span.card__note', {
-      text: 'A stale shelf has not synced in six hours — that is a machine that stopped reporting, not a quiet day.',
-    }),
-    h('div', { style: 'margin-top:auto;display:flex;gap:8px;flex-wrap:wrap' }, [
-      h('button.btn.btn--ghost', { text: `Sharing: ${data.config.scope}`, onclick: () => changeScope(data, outlet, range) }),
-      h('button.btn.btn--ghost', { text: 'Leave pool', onclick: () => leavePool(outlet, range) }),
-    ]),
-  ], { actions });
+function stat(value, label) {
+  return h('span.person__stat', {}, [h('b', { text: value }), h('span', { text: ` ${label}` })]);
 }
 
 // ── Actions ─────────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "syndes",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "SynDes — a tamper-evident ledger of everything you do in Claude Code, an efficiency score built from it, and a local dashboard that shows you how you actually work. Splits one shared account between the people on it. macOS, Windows and Linux. Zero dependencies.",
   "keywords": [
     "syndes",
@@ -16,7 +16,6 @@
     "dashboard",
     "hooks",
     "tokens",
-    "cost",
     "macos",
     "windows",
     "linux",

package/practices/catalog.mjs

@@ -29,7 +29,7 @@ export const CATALOG = {
   },
   'prompt-specificity': {
     title: 'A lot of prompts are corrections',
-    why: 'A correction means the previous turn missed. The cost is not the correction — it is the whole turn that was thrown away, at full token price.',
+    why: 'A correction means the previous turn missed. What it costs you is not the correction — it is the whole turn that was thrown away, and every token that went into it.',
     fix: 'Name the file, the function and the expected outcome in the first prompt.',
   },
   'delegate-wide-search': {

package/runtime/config.mjs

@@ -22,7 +22,7 @@ export const DEFAULTS = {
     tools: true,       // PreToolUse + PostToolUse — the expensive pair, on by default
     prompts: true,
     permissions: true,
-    transcript: true,  // token, cost and cache numbers
+    transcript: true,  // token and cache numbers
     git: true,
   },
 

package/runtime/worker.mjs

@@ -162,7 +162,7 @@ function count(session, event, last) {
   if (last?.kind === KIND.TOOL_POST && last.data.failed) counts.errors += 1;
 }
 
-/** Token, cost and cache numbers, read incrementally from each transcript. */
+/** Token and cache numbers, read incrementally from each transcript. */
 function collectUsage(touched) {
   const drafts = [];
 

package/src/report.mjs

@@ -7,7 +7,7 @@
 
 import {
   bold, grey, cyan, green, red, yellow, write, rule, table, bar, sparkline,
-  compact, usd, duration, percent, width, DOT,
+  compact, perHour, times, duration, percent, width, DOT,
 } from './term.mjs';
 import { overview } from '../analytics/index.mjs';
 import { evaluate } from '../practices/engine.mjs';
@@ -15,7 +15,7 @@ import { nameFor } from '../collect/projects.mjs';
 
 export async function report(spec = '7d', { practices = true } = {}) {
   const data = await overview(spec);
-  const { headline, previousHeadline: before, score, metrics, cost } = data;
+  const { headline, previousHeadline: before, score, metrics } = data;
 
   write();
   write(`${bold('syndes')} ${grey(DOT)} ${data.range.label}`);
@@ -42,14 +42,16 @@ export async function report(spec = '7d', { practices = true } = {}) {
     [grey('prompts'), String(headline.prompts), delta(headline.prompts, before.prompts)],
     [grey('tool calls'), compact(headline.toolCalls), delta(headline.toolCalls, before.toolCalls)],
     [grey('active time'), duration(headline.activeMs), grey(`of ${duration(headline.wallMs)} open`)],
-    [grey('tokens'), compact(headline.tokens), grey(`${percent(headline.cacheHitRate)} from cache`)],
-    [grey('cost'), usd(headline.usd) + (cost.estimated ? grey('*') : ''), delta(headline.usd, before.usd, usd)],
+    [grey('tokens read'), compact(headline.tokens), grey(`${percent(headline.cacheHitRate)} from cache`)],
+    // No dollars. A Claude plan bills a month, so the scarce thing is the window
+    // and that is what these two measure. analytics/metrics/window.mjs says why.
+    [grey('new tokens'), compact(headline.fresh), grey(`${times(headline.cacheLeverage)} context reuse`)],
+    [grey('burn rate'), perHour(headline.freshPerHour), delta(headline.freshPerHour, before.freshPerHour, perHour)],
+    [grey('per prompt'), compact(headline.freshPerPrompt), grey(`${(headline.callsPerWindow ?? 0).toFixed(1)} calls per 100k`)],
     [grey('files changed'), String(headline.files), headline.commits ? grey(`${headline.commits} commits`) : ''],
     [grey('interruptions'), String(headline.blocks), headline.compacts ? grey(`${headline.compacts} compactions`) : ''],
   ], { align: ['left', 'right', 'left'] }).map((line) => `  ${line}`).join('\n'));
 
-  if (cost.estimated) write(grey(`  * priced from the ${cost.tableVersion} table by model family`));
-
   // ── Trend ─────────────────────────────────────────────────────────────────
   if (data.series.length > 1) {
     write();

package/src/term.mjs

@@ -291,9 +291,21 @@ export function compact(value) {
   return String(Math.round(value));
 }
 
-export function usd(value) {
+/**
+ * A per-hour rate, and a multiplier. Mirrors dashboard/web/ui.js so the terminal
+ * report and the dashboard never disagree about what "1.2M/h" means.
+ *
+ * An em dash for null, never 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) return '—';
+  return `${compact(value)}/h`;
+}
+
+export function times(value, digits = 0) {
   if (value === null || value === undefined) return '—';
-  return value >= 100 ? `$${Math.round(value)}` : `$${value.toFixed(2)}`;
+  return `${value.toFixed(digits)}×`;
 }
 
 export function duration(ms) {

package/analytics/metrics/cost.mjs

@@ -1,83 +0,0 @@
-/**
- * Cost from token counts and a dated price table.
- *
- * The table is versioned and the UI states which one produced a number. Prices
- * change; a cost history silently recomputed under new prices is worse than no
- * cost history, because it looks authoritative and is not.
- *
- * A model we do not recognise is priced by its family and marked `estimated`.
- * A guess labelled as a guess is useful; a guess presented as a fact is not.
- */
-
-export const name = 'cost';
-
-/** USD per million tokens. Override in syndes.json under `prices`. */
-export const TABLE_VERSION = '2026-09';
-
-const TABLE = [
-  [/opus/i, { input: 15, output: 75, cacheWrite: 18.75, cacheRead: 1.5 }],
-  [/sonnet/i, { input: 3, output: 15, cacheWrite: 3.75, cacheRead: 0.3 }],
-  [/haiku/i, { input: 0.8, output: 4, cacheWrite: 1, cacheRead: 0.08 }],
-];
-
-/** This metric folds nothing: it is a pure function of the token summary. */
-export function create() { return {}; }
-export function add() {}
-export function done() { return {}; }
-export function merge() { return {}; }
-
-export function priceFor(model, overrides = {}) {
-  for (const [key, price] of Object.entries(overrides)) {
-    if (model.includes(key)) return { price, exact: true };
-  }
-  for (const [pattern, price] of TABLE) {
-    if (pattern.test(model)) return { price, exact: false };
-  }
-  return { price: null, exact: false };
-}
-
-/**
- * @param {object} tokenSummary  from metrics/tokens.mjs merge()
- * @returns {{usd, byModel, estimated, unpriced, tableVersion}}
- */
-export function costOf(tokenSummary, overrides = {}) {
-  const byModel = {};
-  let usd = 0;
-  let estimated = false;
-  const unpriced = [];
-
-  for (const [model, bucket] of Object.entries(tokenSummary.byModel ?? {})) {
-    const { price, exact } = priceFor(model, overrides);
-    if (!price) {
-      unpriced.push(model);
-      byModel[model] = { usd: null, tokens: bucket };
-      continue;
-    }
-    if (!exact) estimated = true;
-
-    const amount =
-      (bucket.input * price.input +
-        bucket.output * price.output +
-        bucket.cacheWrite * price.cacheWrite +
-        bucket.cacheRead * price.cacheRead) / 1_000_000;
-
-    byModel[model] = { usd: amount, tokens: bucket, estimated: !exact };
-    usd += amount;
-  }
-
-  return { usd, byModel, estimated, unpriced, tableVersion: TABLE_VERSION };
-}
-
-/**
- * What the same tokens would have cost with no cache reads — the number that
- * turns "95% cache hit rate" from a statistic into a dollar figure.
- */
-export function savingsFromCache(tokenSummary, overrides = {}) {
-  let saved = 0;
-  for (const [model, bucket] of Object.entries(tokenSummary.byModel ?? {})) {
-    const { price } = priceFor(model, overrides);
-    if (!price) continue;
-    saved += (bucket.cacheRead * (price.input - price.cacheRead)) / 1_000_000;
-  }
-  return saved;
-}