syndes 0.1.0

package/dashboard/web/app.js

@@ -0,0 +1,261 @@
+/**
+ * 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.
+ *
+ * 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';
+
+const ROUTES = [
+  { id: 'overview', label: 'Overview', title: 'Overview', load: () => import('./views/overview.js') },
+  { id: 'sessions', label: 'Sessions', title: 'Sessions', load: () => import('./views/sessions.js') },
+  { id: 'habits', label: 'Habits', title: 'Habits', load: () => import('./views/habits.js') },
+  { id: 'ledger', label: 'Ledger', title: 'Ledger', load: () => import('./views/ledger.js') },
+  // Reached from the rail, not the top nav: settings is somewhere you go once,
+  // and a fifth pill would dilute the four you use every day.
+  { id: 'settings', label: 'Settings', title: 'Settings', rail: true, noRange: true, load: () => import('./views/settings.js') },
+];
+
+const RANGES = [
+  { id: 'today', label: 'Today' },
+  { id: '7d', label: '7 days' },
+  { id: '30d', label: '30 days' },
+  { id: '90d', label: '90 days' },
+  { id: 'all', label: 'All time' },
+];
+
+const state = {
+  range: localStorage.getItem('syndes.range') ?? '7d',
+  route: 'overview',
+  status: null,
+};
+
+const root = document.getElementById('root');
+let outlet;
+let titleNode;
+let subNode;
+let statusNode;
+
+boot();
+
+async function boot() {
+  try {
+    state.status = await api.status();
+  } catch {
+    return mount(root, notice('Cannot reach the dashboard server', 'Start it with: syndes dashboard'));
+  }
+
+  // The cheapest way to ask "am I already in" is to try something that needs it.
+  try {
+    await api.config();
+    renderApp();
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 401) renderUnlock();
+    else mount(root, notice('Something went wrong', error.message));
+  }
+}
+
+// ── Unlock ─────────────────────────────────────────────────────────────────
+
+async function renderUnlock(message = '') {
+  const auth = await api.unlockOptions().catch(() => ({ mode: 'open' }));
+  const error = h('div.unlock__error', { text: message, role: 'alert' });
+
+  const body = [];
+
+  if (auth.mode === 'system') {
+    const button = h('button.btn.btn--lime', { text: `Unlock with ${auth.system.method ?? 'your system'}` });
+    button.addEventListener('click', async () => {
+      button.disabled = true;
+      button.textContent = 'Waiting for you…';
+      try {
+        await api.unlock();
+        renderApp();
+      } catch (caught) {
+        error.textContent = caught.body?.error ?? 'Not authenticated.';
+        button.disabled = false;
+        button.textContent = `Unlock with ${auth.system.method ?? 'your system'}`;
+      }
+    });
+    body.push(button, h('p.unlock__note', { text: 'Your Mac will ask for your fingerprint or login password. syndes never sees either.' }));
+  } else if (auth.mode === 'pin') {
+    const input = h('input.pin', { type: 'password', inputmode: 'numeric', autocomplete: 'off', maxlength: '12', autofocus: true });
+    const form = h('form', { style: 'display:grid;gap:16px;justify-items:center' }, [
+      input,
+      h('button.btn.btn--lime', { type: 'submit', text: 'Unlock' }),
+    ]);
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      try {
+        await api.unlock(input.value);
+        renderApp();
+      } catch (caught) {
+        const wait = caught.body?.retryAfterMs;
+        error.textContent = wait ? `Too many attempts — wait ${Math.ceil(wait / 1000)}s.` : 'Wrong PIN.';
+        input.value = '';
+        input.focus();
+      }
+    });
+    body.push(form);
+  } else {
+    // Open mode reached without a launch token: the link carried the key.
+    body.push(
+      h('p.unlock__note', { text: 'SynDes opens from the command line, which puts a one-time key in the link.' }),
+      h('code', { style: 'font-family:var(--mono);font-size:13px;color:var(--lime)', text: 'syndes dashboard' }),
+    );
+  }
+
+  mount(root, h('main.unlock', {}, [
+    h('div.unlock__box', {}, [
+      h('div.logo', { style: 'width:64px;height:64px' }, [h('img', { src: '/logo.png', alt: 'SynDes', width: 64, height: 64 })]),
+      h('h1.unlock__title', { text: 'SynDes' }),
+      h('p.unlock__note', { text: 'Your prompts, paths and commands. Local only.' }),
+      ...body,
+      error,
+    ]),
+  ]));
+}
+
+// ── App ────────────────────────────────────────────────────────────────────
+
+function renderApp() {
+  titleNode = h('h1.title');
+  subNode = h('div.title__sub');
+  statusNode = h('div.status');
+  outlet = h('div.content');
+
+  const nav = h('nav.nav', { 'aria-label': 'Sections' }, ROUTES.filter((route) => !route.rail).map((route) =>
+    h('button.navpill', { id: `nav-${route.id}`, onclick: () => go(route.id) }, [
+      h('span', { text: route.label }),
+      route.id === 'habits' ? h('span.navpill__dot', { id: 'nav-habits-count', hidden: true }) : null,
+    ])));
+
+  mount(root, h('div.shell', {}, [
+    h('header.topbar', {}, [
+      h('div.logo', { title: 'SynDes' }, [h('img', { src: '/logo.png', alt: 'SynDes', width: 46, height: 46 })]),
+      nav,
+      h('div.topbar__right', {}, [statusNode]),
+    ]),
+
+    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()]),
+    ]),
+
+    h('div.body', {}, [
+      h('aside.rail', {}, [
+        railButton('refresh', 'Reload this view', () => render()),
+        railButton('verify', 'Check the chain', () => go('ledger')),
+        railButton('download', 'Export everything as CSV', () => { window.location.href = api.exportUrl('csv', state.range); }),
+        railButton('settings', 'Settings', () => go('settings'), 'settings'),
+      ]),
+      outlet,
+    ]),
+  ]));
+
+  onBusy((busy) => { statusNode.style.opacity = busy ? '0.5' : '1'; });
+  window.addEventListener('hashchange', () => go(routeFromHash(), { push: false }));
+  go(routeFromHash(), { push: false });
+  refreshStatus();
+}
+
+function railButton(name, label, onClick, routeId = null) {
+  return h('button.railbtn', {
+    id: routeId ? `nav-${routeId}` : null,
+    title: label, 'aria-label': label, onclick: onClick,
+  }, [icon(name)]);
+}
+
+function rangeFilter() {
+  return dropdown({
+    label: 'Range',
+    value: state.range,
+    options: RANGES.map((range) => ({ id: range.id, label: range.label })),
+    onChange: setRange,
+  });
+}
+
+function setRange(id) {
+  state.range = id;
+  localStorage.setItem('syndes.range', id);
+  render();
+}
+
+function routeFromHash() {
+  const id = location.hash.replace(/^#\/?/, '').split('/')[0];
+  return ROUTES.some((route) => route.id === id) ? id : 'overview';
+}
+
+function go(id, { push = true } = {}) {
+  state.route = id;
+  if (push && location.hash !== `#/${id}`) location.hash = `#/${id}`;
+  for (const route of ROUTES) {
+    const node = document.getElementById(`nav-${route.id}`);
+    if (!node) continue;
+    if (route.id === id) node.setAttribute('aria-current', 'page');
+    else node.removeAttribute('aria-current');
+  }
+  render();
+}
+
+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);
+
+  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);
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 401) return renderUnlock();
+    mount(outlet, notice(`Could not load ${route.label}`, error.message));
+  }
+}
+
+async function refreshStatus() {
+  try {
+    const [verified, practices] = await Promise.all([api.verify(false), api.practices()]);
+    replace(statusNode,
+      h(`span.status__led${verified.ok ? '' : '.status__led--bad'}`),
+      h('span', { text: verified.ok ? `Chain verified · ${verified.records.toLocaleString()} records` : `${verified.problems.length} chain problems` }));
+
+    const live = practices.findings.filter((finding) => !finding.muted).length;
+    const badge = document.getElementById('nav-habits-count');
+    if (badge) {
+      badge.textContent = String(live);
+      badge.hidden = live === 0;
+    }
+  } catch {
+    // The status pill is a status pill. The app works without it.
+  }
+}
+
+function skeleton() {
+  return h('div.grid', {}, [
+    h('div.grid.g-3', {}, [0, 1, 2].map(() => h('div.skel', { style: 'height:300px' }))),
+    h('div.skel', { style: 'height:260px' }),
+  ]);
+}
+
+function notice(title, detail) {
+  return h('main.unlock', {}, [
+    h('div.unlock__box', {}, [
+      h('h1.unlock__title', { text: title }),
+      h('p.unlock__note', { text: detail }),
+    ]),
+  ]);
+}
+
+export { state };

package/dashboard/web/charts.js

@@ -0,0 +1,273 @@
+/**
+ * Charts, in the reference's visual language: everything is a capsule.
+ *
+ * Colour is never decoration here. Lime says healthy, orange says look at this,
+ * white says neutral volume — and each chart's legend states which is which, so
+ * the mapping is never something the reader has to infer.
+ *
+ * Hand-rolled SVG because the server's CSP blocks every CDN and a chart library
+ * would end the zero-dependency promise for five chart types.
+ */
+
+const NS = 'http://www.w3.org/2000/svg';
+
+function el(name, attrs = {}, children = []) {
+  const node = document.createElementNS(NS, name);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value !== null && value !== undefined) node.setAttribute(key, String(value));
+  }
+  for (const child of [].concat(children)) if (child) node.appendChild(child);
+  return node;
+}
+const txt = (value) => document.createTextNode(String(value));
+
+function frame(width, height, label, children) {
+  const node = el('svg', {
+    class: 'chart', viewBox: `0 0 ${width} ${height}`,
+    role: 'img', 'aria-label': label,
+  }, children);
+  node.style.aspectRatio = `${width} / ${height}`;
+  node.style.maxWidth = `${width}px`;
+  return node;
+}
+
+const TONE = { lime: 'cap-lime', orange: 'cap-orange', white: 'cap-white' };
+
+/**
+ * Vertical capsules with the value written inside — the reference's signature
+ * chart. Used where each item is a discrete thing worth naming, not a
+ * continuous series: tool families, top files, hours of the day.
+ *
+ * @param {{label: string, value: number, tone: 'lime'|'orange'|'white'}[]} items
+ */
+export function capsules(items, { height = 210, label = 'distribution', slotWidth = 82 } = {}) {
+  // Width follows the item count. Stretching eight capsules across a wide card
+  // is fine; stretching three turns them into blobs, which reads as a design
+  // choice rather than as the data being sparse.
+  const width = Math.max(200, Math.min(640, items.length * slotWidth));
+  const max = Math.max(...items.map((item) => item.value), 1);
+  const slot = width / Math.max(items.length, 1);
+  const capWidth = Math.min(46, slot * 0.58);
+  const top = 14;
+  const floor = height - 34;
+  const usable = floor - top;
+
+  const nodes = [];
+  items.forEach((item, index) => {
+    const cx = index * slot + slot / 2;
+    // A stem behind every capsule keeps the baseline readable when a value is
+    // small; without it a short capsule floats with nothing to measure against.
+    nodes.push(el('line', { class: 'cap-stem', x1: cx, y1: top, x2: cx, y2: floor }));
+
+    const h = Math.max(capWidth, (item.value / max) * usable);
+    const y = floor - h;
+    nodes.push(el('rect', {
+      class: TONE[item.tone] ?? TONE.white,
+      x: cx - capWidth / 2, y, width: capWidth, height: h, rx: capWidth / 2,
+    }));
+    nodes.push(el('text', {
+      class: 'cap-label', x: cx, y: y + capWidth / 2 + 4, 'text-anchor': 'middle',
+    }, [txt(item.value)]));
+    nodes.push(el('text', {
+      x: cx, y: height - 10, 'text-anchor': 'middle',
+    }, [txt(item.label.length > 9 ? `${item.label.slice(0, 8)}…` : item.label)]));
+  });
+
+  return frame(width, height, label, nodes);
+}
+
+/**
+ * Horizontal capsules on a shared axis — the reference's timeline.
+ *
+ * Used for sessions: where each one sat in the day and how long it ran, which is
+ * the one view that makes a four-hour session with eleven minutes of work
+ * obvious at a glance.
+ *
+ * @param {{row: string, start: number, end: number, value: string, tone: string}[]} bars
+ */
+export function timeline(bars, { min, max, ticks = [], height = null, label = 'timeline' } = {}) {
+  const width = 640;
+  const left = 46;
+  const rowH = 38;
+  const total = height ?? bars.length * rowH + 34;
+  const span = Math.max(max - min, 1);
+  const x = (value) => left + ((value - min) / span) * (width - left - 10);
+
+  const nodes = [];
+
+  for (const tick of ticks) {
+    nodes.push(el('line', { class: 'grid-line', x1: x(tick.at), y1: 4, x2: x(tick.at), y2: total - 22 }));
+    nodes.push(el('text', { x: x(tick.at), y: total - 6, 'text-anchor': 'middle' }, [txt(tick.label)]));
+  }
+
+  bars.forEach((bar, index) => {
+    const y = index * rowH + 6;
+    nodes.push(el('text', { x: 0, y: y + 14, 'dominant-baseline': 'middle' }, [txt(bar.row)]));
+
+    // An empty day is a short neutral stub with the value beside it. Drawing a
+    // capsule big enough to hold "0m" would make nothing look like something.
+    if (!bar.end || bar.end <= bar.start) {
+      nodes.push(el('rect', { x: x(bar.start), y: y + 5, width: 18, height: 18, rx: 9, fill: 'var(--track)' }));
+      nodes.push(el('text', { x: x(bar.start) + 26, y: y + 14, 'dominant-baseline': 'middle' }, [txt(bar.empty ?? '—')]));
+      return;
+    }
+
+    const x0 = x(bar.start);
+    const x1 = Math.max(x0 + 34, x(bar.end));
+    nodes.push(el('rect', {
+      class: TONE[bar.tone] ?? TONE.white,
+      x: x0, y, width: x1 - x0, height: 28, rx: 14,
+    }));
+    nodes.push(el('text', {
+      class: 'cap-label', x: x1 - 12, y: y + 15, 'text-anchor': 'end', 'dominant-baseline': 'middle',
+    }, [txt(bar.value)]));
+  });
+
+  return frame(width, total, label, nodes);
+}
+
+/**
+ * Two smooth series, no axes — the reference's small line card.
+ *
+ * Deliberately unlabelled on the y axis: this shows shape, not magnitude. The
+ * numbers that matter are printed above it as figures.
+ */
+export function dualLine(seriesA, seriesB, { height = 96, label = 'trend' } = {}) {
+  const width = 320;
+  const pad = 8;
+  const all = [...seriesA, ...seriesB];
+  const max = Math.max(...all, 1);
+  const min = Math.min(...all, 0);
+  const span = Math.max(max - min, 1);
+
+  const path = (values) => {
+    if (values.length < 2) return '';
+    const step = (width - pad * 2) / (values.length - 1);
+    const points = values.map((value, index) => [
+      pad + index * step,
+      height - pad - ((value - min) / span) * (height - pad * 2),
+    ]);
+    // Catmull-Rom to cubic: the reference's lines are smooth, and a polyline
+    // through daily counts reads as noise where a curve reads as a trend.
+    let d = `M ${points[0][0]} ${points[0][1]}`;
+    for (let i = 0; i < points.length - 1; i += 1) {
+      const p0 = points[i - 1] ?? points[i];
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      const p3 = points[i + 2] ?? p2;
+      d += ` C ${p1[0] + (p2[0] - p0[0]) / 6} ${p1[1] + (p2[1] - p0[1]) / 6},` +
+           ` ${p2[0] - (p3[0] - p1[0]) / 6} ${p2[1] - (p3[1] - p1[1]) / 6},` +
+           ` ${p2[0]} ${p2[1]}`;
+    }
+    return d;
+  };
+
+  return frame(width, height, label, [
+    seriesB.length > 1 ? el('path', { class: 'series-orange', d: path(seriesB) }) : null,
+    seriesA.length > 1 ? el('path', { class: 'series-lime', d: path(seriesA) }) : null,
+  ]);
+}
+
+/**
+ * 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.
+ */
+export function dayStrip(days, { height = 74, label = 'activity by day' } = {}) {
+  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 floor = height - 20;
+
+  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)]));
+    }
+  });
+  return frame(width, height, label, nodes);
+}
+
+/**
+ * A ranked list of horizontal capsule meters. For anything where the label
+ * matters as much as the value: top files, commands, permission offenders.
+ */
+export function ranked(items, { formatValue = String, max = null } = {}) {
+  const ceiling = max ?? Math.max(...items.map((item) => item.value), 1);
+  const wrap = document.createElement('div');
+  wrap.style.cssText = 'display:grid;gap:10px';
+
+  for (const item of items) {
+    const row = document.createElement('div');
+    row.style.cssText = 'display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr) auto;gap:14px;align-items:center';
+
+    const name = document.createElement('span');
+    name.style.cssText = 'font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    name.title = item.label;
+    name.textContent = item.label;
+
+    const meter = document.createElement('div');
+    meter.className = 'meter';
+    const fill = document.createElement('div');
+    fill.className = `meter__fill${item.tone === 'orange' ? ' meter__fill--orange' : item.tone === 'white' ? ' meter__fill--white' : ''}`;
+    fill.style.width = `${Math.max(3, (item.value / ceiling) * 100)}%`;
+    meter.appendChild(fill);
+
+    const value = document.createElement('span');
+    value.className = 'tnum';
+    value.style.cssText = 'font-size:12px;font-weight:600';
+    value.textContent = formatValue(item.value);
+
+    row.append(name, meter, value);
+    wrap.appendChild(row);
+  }
+  return wrap;
+}
+
+/**
+ * The score dial: a 270° capsule arc.
+ *
+ * Its colour is the judgement — lime above 70, orange below 45, white between —
+ * so the ring answers "is this good" before the number is even read.
+ */
+export function dial(score, { size = 168, label = 'efficiency score' } = {}) {
+  const stroke = 14;
+  const radius = (size - stroke) / 2;
+  const c = size / 2;
+  const START = 135;
+  const SWEEP = 270;
+
+  const arc = (from, extent) => {
+    const a0 = (from * Math.PI) / 180;
+    const a1 = ((from + extent) * Math.PI) / 180;
+    return `M ${c + radius * Math.cos(a0)} ${c + radius * Math.sin(a0)} ` +
+      `A ${radius} ${radius} 0 ${extent > 180 ? 1 : 0} 1 ` +
+      `${c + radius * Math.cos(a1)} ${c + radius * Math.sin(a1)}`;
+  };
+
+  const tone = score === null ? 'var(--ink-3)' : score >= 70 ? 'var(--lime)' : score < 45 ? 'var(--orange)' : 'var(--neutral)';
+
+  const node = el('svg', {
+    class: 'chart', viewBox: `0 0 ${size} ${size}`, role: 'img',
+    'aria-label': `${label}: ${score === null ? 'not enough data' : `${score} out of 100`}`,
+  }, [
+    el('path', { d: arc(START, SWEEP), fill: 'none', stroke: 'var(--track)', 'stroke-width': stroke, 'stroke-linecap': 'round' }),
+    score === null ? null : el('path', {
+      d: arc(START, Math.max(2, (score / 100) * SWEEP)),
+      fill: 'none', stroke: tone, 'stroke-width': stroke, 'stroke-linecap': 'round',
+    }),
+  ]);
+  node.style.width = `${size}px`;
+  node.style.height = `${size}px`;
+  node.style.flex = 'none';
+  return node;
+}
+
+export { TONE };

package/dashboard/web/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="referrer" content="no-referrer">
+<title>SynDes</title>
+<link rel="icon" type="image/png" href="/logo.png">
+<link rel="stylesheet" href="/app.css">
+</head>
+<body>
+<!--
+  One entry point. app.js renders either the login screen or the app shell into
+  #root, so there is no redirect between two documents and no second copy of the
+  header markup to keep in sync.
+
+  No inline script: the server's CSP is script-src 'self', which is what stops a
+  bug in any view from becoming a way to run injected markup.
+-->
+<div id="root"></div>
+<script type="module" src="/app.js"></script>
+</body>
+</html>