syndes 0.3.0 → 0.3.3

package/bin/cli.mjs

@@ -528,7 +528,17 @@ async function cmdDashboard(args) {
 
   if (loadConfig().dashboard.openOnStart && !args.includes('--no-open')) openUrl(url);
 
-  const stop = async () => { await close(); process.exit(0); };
+  // A second ctrl-c means "I do not believe you, leave now" — so the first
+  // press shuts down politely and the second one does not wait for it.
+  let stopping = false;
+  const stop = async () => {
+    if (stopping) process.exit(0);
+    stopping = true;
+    write();
+    write(grey('  stopping…'));
+    await close();
+    process.exit(0);
+  };
   process.on('SIGINT', stop);
   process.on('SIGTERM', stop);
 }

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/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/app.css

@@ -540,6 +540,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/views/team.js

@@ -6,7 +6,7 @@
  *   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
  *      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 each day break down?  the daily split, and who is in the pool
  *
  * 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,7 +16,7 @@
 
 import { api } from '../api.js';
 import {
-  h, card, figure, trend, chip, dot, meter, legend, empty, table, modal,
+  h, card, figure, trend, chip, dot, meter, legend, empty, modal,
   compact, usd, duration, percent, when, DASH,
 } from '../ui.js';
 import { dotMatrix, laneSplit, splitBar } from '../charts.js';
@@ -24,13 +24,14 @@ import { dotMatrix, 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 +80,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 +107,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`,
         }),
       ]),
     ]),
@@ -169,7 +174,9 @@ function contentionCard(data) {
   return card('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'),
+      overlapping
+        ? chip(`${grid.overlapBands} band${grid.overlapBands === 1 ? '' : 's'}`, 'orange')
+        : chip('no overlap', 'lime'),
     ]),
     dotMatrix(grid),
     legend([
@@ -201,56 +208,74 @@ function splitCard(data) {
 }
 
 // 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.3.3",
   "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",