syndes 0.1.0

package/dashboard/web/ui.js

@@ -0,0 +1,434 @@
+/**
+ * Element construction and value formatting.
+ *
+ * Everything builds nodes, never HTML strings. Ledger content is prompts, file
+ * paths and shell commands — string templating would be one forgotten escape
+ * away from putting whatever a user typed into their editor into the DOM.
+ */
+
+export function h(spec, props = {}, children = []) {
+  const [tag, ...classes] = spec.split('.');
+  const node = document.createElement(tag || 'div');
+  if (classes.length) node.className = classes.join(' ');
+
+  for (const [key, value] of Object.entries(props)) {
+    if (value === null || value === undefined || value === false) continue;
+    if (key === 'class') node.className = `${node.className} ${value}`.trim();
+    else if (key === 'style') node.style.cssText = value;
+    else if (key === 'text') node.textContent = String(value);
+    else if (key.startsWith('on')) node.addEventListener(key.slice(2).toLowerCase(), value);
+    else node.setAttribute(key, value === true ? '' : String(value));
+  }
+  for (const child of [].concat(children)) {
+    if (child === null || child === undefined || child === false) continue;
+    node.appendChild(typeof child === 'object' ? child : document.createTextNode(String(child)));
+  }
+  return node;
+}
+
+/**
+ * Inline SVG icons.
+ *
+ * Drawn rather than typed. The first pass used text glyphs (⟳ ⇩ ✓ ⚙), which
+ * render at whatever weight and baseline the system font decides — so they sat
+ * off-centre in their circles and changed shape between machines.
+ *
+ * 24x24 grid, stroke-only, currentColor, so one icon works on a dark pill and
+ * on a lime one without needing a second asset.
+ */
+const ICONS = {
+  refresh: ['M20.5 12a8.5 8.5 0 1 1-2.6-6.1', 'M20.5 4.5v5h-5'],
+  download: ['M12 3.5v11', 'M7.5 10.5 12 15l4.5-4.5', 'M4.5 19.5h15'],
+  verify: ['M12 3 19 6v6c0 4.2-2.9 7.7-7 9-4.1-1.3-7-4.8-7-9V6l7-3Z', 'M9 12l2.2 2.2L15.5 10'],
+  settings: [
+    'M4 8h9', 'M17 8h3', 'M4 16h4', 'M12 16h8',
+    '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'],
+  tick: ['M5 12.5 9.5 17 19 7.5'],
+};
+
+export function icon(name, { size = 20 } = {}) {
+  const NS = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(NS, 'svg');
+  for (const [key, value] of Object.entries({
+    viewBox: '0 0 24 24', width: size, height: size, fill: 'none',
+    stroke: 'currentColor', 'stroke-width': '1.7',
+    'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true',
+  })) svg.setAttribute(key, String(value));
+
+  for (const d of ICONS[name] ?? []) {
+    const path = document.createElementNS(NS, 'path');
+    path.setAttribute('d', d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
+/**
+ * Replace children, dropping nulls.
+ *
+ * Element.replaceChildren() turns a non-Node argument into a TEXT NODE, so a
+ * conditional child written `cond ? card() : null` renders the literal word
+ * "null". Views use this and never replaceChildren directly.
+ */
+/**
+ * A dropdown.
+ *
+ * Not a native <select>. A native one on macOS opens the system menu — blue
+ * highlight, system font, system corners — which lands in the middle of a black
+ * capsule interface looking like a different application. It also gives no
+ * affordance that it can be opened at all, because a bare word in a pill reads
+ * as a label.
+ *
+ * The menu is appended to document.body and positioned fixed, so it is never
+ * clipped by the card's overflow or the shell's. That is the whole reason it is
+ * not simply absolutely positioned inside the trigger.
+ */
+export function dropdown({ value, options, onChange, label = null, onCard = false }) {
+  const current = () => options.find((option) => option.id === value) ?? options[0];
+
+  const valueNode = h('span.dropdown__value', { text: current()?.label ?? '' });
+  const trigger = h(`button.dropdown${onCard ? '.dropdown--on-card' : ''}`, {
+    type: 'button',
+    'aria-haspopup': 'listbox',
+    'aria-expanded': 'false',
+  }, [
+    label ? h('span.dropdown__label', { text: label }) : null,
+    valueNode,
+    icon('chevron', { size: 15 }),
+  ]);
+
+  let menu = null;
+
+  const close = () => {
+    if (!menu) return;
+    menu.remove();
+    menu = null;
+    trigger.setAttribute('aria-expanded', 'false');
+    document.removeEventListener('pointerdown', onOutside, true);
+    document.removeEventListener('keydown', onKey, true);
+    window.removeEventListener('resize', close);
+    // A fixed menu would visibly detach from its trigger once anything scrolls.
+    window.removeEventListener('scroll', close, true);
+  };
+
+  const onOutside = (event) => {
+    if (!menu?.contains(event.target) && !trigger.contains(event.target)) close();
+  };
+
+  const onKey = (event) => {
+    if (!menu) return;
+    const items = [...menu.querySelectorAll('[role="option"]')];
+    const index = items.indexOf(document.activeElement);
+
+    if (event.key === 'Escape') { event.preventDefault(); close(); trigger.focus(); }
+    else if (event.key === 'ArrowDown') { event.preventDefault(); items[Math.min(index + 1, items.length - 1)]?.focus(); }
+    else if (event.key === 'ArrowUp') { event.preventDefault(); (index <= 0 ? items[0] : items[index - 1])?.focus(); }
+    else if (event.key === 'Home') { event.preventDefault(); items[0]?.focus(); }
+    else if (event.key === 'End') { event.preventDefault(); items[items.length - 1]?.focus(); }
+  };
+
+  const open = () => {
+    if (menu) return close();
+
+    menu = h('div.dropdown__menu', { role: 'listbox', 'aria-label': label ?? 'Options' },
+      options.map((option) => h('button.dropdown__item', {
+        type: 'button',
+        role: 'option',
+        'aria-selected': String(option.id === value),
+        onclick: () => { close(); if (option.id !== value) onChange(option.id); },
+      }, [
+        h('span.dropdown__check', {}, [option.id === value ? icon('tick', { size: 13 }) : null]),
+        h('span', {}, [
+          h('span.dropdown__item-name', { text: option.label }),
+          option.hint ? h('span.dropdown__item-hint', { text: option.hint }) : null,
+        ]),
+      ])));
+
+    document.body.appendChild(menu);
+
+    const rect = trigger.getBoundingClientRect();
+    menu.style.minWidth = `${Math.max(rect.width, 210)}px`;
+
+    const { offsetWidth: width, offsetHeight: height } = menu;
+    const MARGIN = 12;
+
+    // Flip above when there is not room below, so the last option is never cut off.
+    const below = window.innerHeight - rect.bottom > height + MARGIN;
+    menu.style.top = below ? `${rect.bottom + 8}px` : `${Math.max(MARGIN, rect.top - height - 8)}px`;
+
+    // The menu is usually wider than its trigger, so one of its edges has to
+    // line up with the button and the other has to overhang. Anchor the edge
+    // the trigger is NEAREST: a control on the right side of the screen gets a
+    // menu that hangs left, and vice versa.
+    //
+    // The previous rule only right-anchored when left-anchoring would have
+    // overflowed, so a trigger on the right with room to spare still got a menu
+    // trailing off to its right — attached to nothing.
+    const nearRightEdge = rect.left + rect.width / 2 > window.innerWidth / 2;
+    let left = nearRightEdge ? rect.right - width : rect.left;
+
+    // If the preferred edge does not fit, use the other one.
+    if (left < MARGIN) left = rect.left;
+    if (left + width + MARGIN > window.innerWidth) left = rect.right - width;
+
+    menu.style.left = `${Math.max(MARGIN, Math.min(left, window.innerWidth - width - MARGIN))}px`;
+
+    trigger.setAttribute('aria-expanded', 'true');
+    menu.querySelector('[aria-selected="true"]')?.focus();
+
+    document.addEventListener('pointerdown', onOutside, true);
+    document.addEventListener('keydown', onKey, true);
+    window.addEventListener('resize', close);
+    window.addEventListener('scroll', close, true);
+  };
+
+  trigger.addEventListener('click', open);
+  return trigger;
+}
+
+export function replace(node, ...children) {
+  node.replaceChildren(...children.flat().filter(Boolean));
+  return node;
+}
+
+export function mount(node, children) {
+  return replace(node, children);
+}
+
+// ── Formatting ─────────────────────────────────────────────────────────────
+// Mirrors src/term.mjs, so the terminal report and this page never disagree.
+// An em dash means "not measured". It never means zero.
+
+export const DASH = '—';
+
+export function compact(value) {
+  if (value === null || value === undefined || Number.isNaN(value)) return DASH;
+  const abs = Math.abs(value);
+  if (abs >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (abs >= 10_000) return `${Math.round(value / 1000)}k`;
+  if (abs >= 1000) return `${(value / 1000).toFixed(1)}k`;
+  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);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest ? `${hours}h ${rest}m` : `${hours}h`;
+}
+
+export function percent(fraction, digits = 0) {
+  if (fraction === null || fraction === undefined || Number.isNaN(fraction)) return DASH;
+  return `${(fraction * 100).toFixed(digits)}%`;
+}
+
+export function bytes(value) {
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let size = value ?? 0;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) { size /= 1024; unit += 1; }
+  return `${size < 10 && unit > 0 ? size.toFixed(1) : Math.round(size)} ${units[unit]}`;
+}
+
+export const when = (ts) => (ts ? new Date(ts).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : DASH);
+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' });
+
+// ── Components ─────────────────────────────────────────────────────────────
+
+export function card(title, body, { note = null, actions = null, className = '' } = {}) {
+  return h(`section.card${className ? `.${className}` : ''}`, {}, [
+    title ? h('div.card__head', {}, [
+      h('h2.card__title', { text: title }),
+      note ? h('span.card__note', { text: note }) : null,
+      actions ? h('div.card__actions', {}, [actions]) : null,
+    ]) : null,
+    ...[].concat(body).filter(Boolean),
+  ]);
+}
+
+/** A big number with its label. The unit rides small beside the value. */
+export function figure(label, value, { unit = null, small = false, trend = null } = {}) {
+  return h('div.figure', {}, [
+    h(`div.figure__value${small ? '.figure__value--sm' : ''}`, {}, [
+      String(value),
+      unit ? h('span.figure__unit', { text: ` ${unit}` }) : null,
+    ]),
+    h('div.figure__label', { text: label }),
+    trend,
+  ]);
+}
+
+/**
+ * The reference's ▲/▼ mark.
+ *
+ * The triangle carries the direction and the colour reinforces the judgement,
+ * so this reads correctly in a screenshot, in greyscale, and for anyone who
+ * cannot separate lime from orange.
+ */
+export function trend(now, before, { format = compact, goodDirection = 'up', suffix = 'vs last period' } = {}) {
+  if (before === null || before === undefined || !Number.isFinite(before) || before === 0) {
+    return h('div.trend.trend--flat', {}, [h('span.trend__text', { text: 'no prior period' })]);
+  }
+  const change = now - before;
+  if (!change) return h('div.trend.trend--flat', {}, [h('span.trend__mark', { text: '■' }), h('span.trend__text', { text: `unchanged ${suffix}` })]);
+
+  const rising = change > 0;
+  const good = goodDirection === 'up' ? rising : !rising;
+  return h(`div.trend.trend--${good ? 'up' : 'down'}`, {}, [
+    h('span.trend__mark', { text: rising ? '▲' : '▼', 'aria-hidden': 'true' }),
+    h('span.trend__text', { text: `${format(Math.abs(change))} ${suffix}` }),
+  ]);
+}
+
+export function chip(text, tone = null) {
+  return h(`span.chip${tone ? `.chip--${tone}` : ''}`, { text });
+}
+
+export function dot(tone) {
+  return h(`span.dot.dot--${tone}`);
+}
+
+export function meter(fraction, tone = 'lime') {
+  return h('div.meter', {}, [
+    h(`div.meter__fill${tone === 'orange' ? '.meter__fill--orange' : tone === 'white' ? '.meter__fill--white' : ''}`, {
+      style: `width:${Math.max(0, Math.min(1, fraction ?? 0)) * 100}%`,
+    }),
+  ]);
+}
+
+export function legend(items, total = null) {
+  return h('div.legend', {}, [
+    ...items.map((item) => h('span.legend__item', {}, [dot(item.tone), h('span', { text: item.label })])),
+    total !== null ? h('span.legend__total', {}, ['Total: ', h('b', { text: total })]) : null,
+  ]);
+}
+
+export function table(headers, rows, { align = [], onRow = null } = {}) {
+  return h('div.scroll-x', {}, [
+    h('table.table', {}, [
+      h('thead', {}, [h('tr', {}, headers.map((label, i) =>
+        h(`th${align[i] === 'right' ? '.r' : ''}`, { text: label })))]),
+      h('tbody', {}, rows.map((cells, index) => h('tr', onRow ? { onclick: () => onRow(index) } : {},
+        cells.map((cell, i) => h(`td${align[i] === 'right' ? '.r' : ''}`, {},
+          [typeof cell === 'object' && cell !== null ? cell : String(cell ?? DASH)]))))),
+    ]),
+  ]);
+}
+
+export function empty(message) {
+  return h('div.empty', { text: message });
+}
+
+/**
+ * A modal dialog.
+ *
+ * Replaces window.prompt / alert / confirm. Those render browser chrome — the
+ * origin printed as a title, system buttons, system corners — which lands in
+ * the middle of this interface looking like the page has been hijacked. They
+ * also block the event loop, so they cannot be styled or animated at all.
+ *
+ * @returns {Promise<string|boolean|null>} the input value, true for a plain
+ *          confirm, or null when dismissed.
+ */
+export function modal({
+  title,
+  note = null,
+  input = null,       // { placeholder, type, inputmode, maxlength, validate }
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  danger = false,
+}) {
+  return new Promise((resolve) => {
+    const error = h('div.modal__error', { role: 'alert' });
+    const field = input
+      ? h('input.modal__input', {
+          type: input.type ?? 'text',
+          inputmode: input.inputmode ?? null,
+          maxlength: input.maxlength ?? null,
+          placeholder: input.placeholder ?? '',
+          autocomplete: 'off',
+        })
+      : null;
+
+    const finish = (value) => { cleanup(); resolve(value); };
+
+    const submit = () => {
+      if (!field) return finish(true);
+      const problem = input.validate?.(field.value);
+      if (problem) {
+        error.textContent = problem;
+        field.focus();
+        return undefined;
+      }
+      return finish(field.value);
+    };
+
+    const panel = h('div.modal', { role: 'dialog', 'aria-modal': 'true', 'aria-label': title }, [
+      h('div.modal__title', { text: title }),
+      note ? h('div.modal__note', { text: note }) : null,
+      field,
+      field ? error : null,
+      h('div.modal__actions', {}, [
+        h('button.btn.btn--ghost', { type: 'button', text: cancelLabel, onclick: () => finish(null) }),
+        h(`button.btn${danger ? '' : '.btn--lime'}`, { type: 'button', text: confirmLabel, onclick: submit }),
+      ]),
+    ]);
+
+    const scrim = h('div.scrim', { onclick: () => finish(null) });
+
+    const onKey = (event) => {
+      if (event.key === 'Escape') { event.preventDefault(); finish(null); }
+      else if (event.key === 'Enter' && panel.contains(document.activeElement)) { event.preventDefault(); submit(); }
+    };
+
+    function cleanup() {
+      document.removeEventListener('keydown', onKey, true);
+      scrim.remove();
+      panel.remove();
+    }
+
+    document.addEventListener('keydown', onKey, true);
+    document.body.append(scrim, panel);
+    (field ?? panel.querySelector('.btn--lime') ?? panel).focus();
+  });
+}
+
+/** A right-side drawer. Returns a close function so callers can chain onto it. */
+export function drawer(title, subtitle, body) {
+  const scrim = h('div.scrim', { onclick: close });
+  const panel = h('aside.drawer', { role: 'dialog', 'aria-label': title }, [
+    h('div.drawer__head', {}, [
+      h('div', {}, [
+        h('div.drawer__title', { text: title }),
+        subtitle ? h('div', { style: 'font-size:12px;color:var(--ink-3);margin-top:3px', text: subtitle }) : null,
+      ]),
+      h('button.btn.btn--ghost.btn--sm', { text: 'Close', style: 'margin-left:auto', onclick: close }),
+    ]),
+    h('div.drawer__body', {}, [].concat(body).filter(Boolean)),
+  ]);
+
+  function close() {
+    scrim.remove();
+    panel.remove();
+    document.removeEventListener('keydown', onKey);
+  }
+  function onKey(event) { if (event.key === 'Escape') close(); }
+
+  document.addEventListener('keydown', onKey);
+  document.body.append(scrim, panel);
+  return close;
+}
+
+export function kv(key, value) {
+  return h('div.kv__row', {}, [h('span.kv__k', { text: key }), h('span.kv__v', { text: value })]);
+}

package/dashboard/web/views/habits.js

@@ -0,0 +1,166 @@
+/**
+ * Habits — the four numbers you can actually move, and what is currently wrong.
+ *
+ * Every gauge prints its raw counts under the percentage. A rate with no
+ * denominator is unfalsifiable, and "86%" means nothing until you know it is
+ * 43 of 50.
+ *
+ * Colour is the verdict: lime once a habit is where it should be, orange while
+ * it is not. Nothing here is coloured for looks.
+ */
+
+import { api } from '../api.js';
+import { h, card, figure, chip, dot, meter, legend, empty, table, compact, percent, duration } from '../ui.js';
+import { capsules, ranked } from '../charts.js';
+
+/** The bar each habit has to clear before it stops being a problem. */
+const TARGETS = { readBeforeEdit: 0.7, searchDiscipline: 0.6, verify: 0.5, batching: 1.5 };
+
+export async function render({ range }) {
+  const [{ tools, tokens, rework, friction }, practices] = await Promise.all([
+    api.tools(range),
+    api.practices(),
+  ]);
+
+  return h('div.content--fit', {
+    style: 'display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:var(--s4);min-height:0',
+  }, [
+    gauges(tools, tokens, rework),
+    h('div.grid.g-2', {}, [toolMix(tools), frictionCard(friction, rework)]),
+    h('div.fill', {}, [findings(practices)]),
+  ]);
+}
+
+// ── The four movable numbers ───────────────────────────────────────────────
+
+function gauges(tools, tokens, rework) {
+  const items = [
+    {
+      label: 'Read before editing',
+      value: tools.readBeforeEditRate,
+      display: percent(tools.readBeforeEditRate),
+      fraction: tools.readBeforeEditRate,
+      target: TARGETS.readBeforeEdit,
+      detail: `${tools.readFirst} of ${tools.readFirst + tools.blindEdit} edits`,
+    },
+    {
+      label: 'Search tools over bash',
+      value: tools.searchDiscipline,
+      display: percent(tools.searchDiscipline),
+      fraction: tools.searchDiscipline,
+      target: TARGETS.searchDiscipline,
+      detail: `${tools.searchViaTool} of ${tools.searchViaBash + tools.searchViaTool} searches`,
+    },
+    {
+      label: 'Verified after changing',
+      value: rework.verifyRate,
+      display: percent(rework.verifyRate),
+      fraction: rework.verifyRate,
+      target: TARGETS.verify,
+      detail: `${rework.verifiedRuns} of ${rework.verifiedRuns + rework.unverifiedRuns} edit runs`,
+    },
+    {
+      label: 'Calls batched per turn',
+      value: tokens.callsPerTurn,
+      display: (tokens.callsPerTurn ?? 0).toFixed(2),
+      fraction: Math.min(1, (tokens.callsPerTurn ?? 0) / 3),
+      target: TARGETS.batching / 3,
+      detail: `${compact(tokens.toolUses)} calls in ${compact(tokens.turnsWithTools)} turns`,
+      rawTarget: TARGETS.batching,
+    },
+  ];
+
+  return h('div.grid.g-4', {}, items.map((item) => {
+    const measured = item.value !== null && item.value !== undefined;
+    const met = measured && item.value >= (item.rawTarget ?? item.target);
+    return card(null, [
+      h('div.figure', {}, [
+        h('div.figure__value', { text: measured ? item.display : '—' }),
+        h('div.figure__label', { text: item.label }),
+      ]),
+      meter(item.fraction ?? 0, !measured ? 'white' : met ? 'lime' : 'orange'),
+      h('div', { style: 'display:flex;align-items:center;gap:8px' }, [
+        measured ? chip(met ? 'on target' : 'below target', met ? 'lime' : 'orange') : chip('not measured'),
+        h('span', { style: 'font-size:12px;color:var(--ink-3)', text: item.detail }),
+      ]),
+    ], { className: 'card--tight' });
+  }));
+}
+
+// ── What was used ──────────────────────────────────────────────────────────
+
+function toolMix(tools) {
+  const byTool = Object.entries(tools.byTool ?? {})
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 8)
+    .map(([label, value]) => ({ label, value, tone: 'white' }));
+
+  return card('Tools used', [
+    byTool.length ? capsules(byTool, { height: 180 }) : empty('No tool calls in this range'),
+    legend([{ tone: 'white', label: 'calls' }], compact(tools.calls)),
+  ]);
+}
+
+function frictionCard(friction, rework) {
+  const offenders = Object.entries(friction.byTarget ?? {})
+    .sort((a, b) => b[1] - a[1]).slice(0, 5)
+    .map(([label, value]) => ({ label, value, tone: 'orange' }));
+
+  return card('Friction', [
+    h('div.pair', {}, [
+      figure('Permission stops', friction.blocks, { small: true }),
+      figure('Waiting', duration(friction.blockedMs), { small: true }),
+      figure('Failure rate', percent(rework.errorRate, 1), { small: true }),
+    ]),
+    offenders.length ? ranked(offenders, { formatValue: (value) => `${value}×` }) : empty('Nothing blocked you'),
+    friction.worstOffender
+      ? h('div', { style: 'display:flex;gap:10px;align-items:center;padding:14px;border-radius:16px;background:var(--surface-2)' }, [
+          h('span', { style: 'color:var(--lime)', text: '→' }),
+          h('span', { style: 'font-size:12px', text: `Allowlisting "${friction.worstOffender.target}" removes ${friction.worstOffender.count} interruptions.` }),
+        ])
+      : null,
+  ]);
+}
+
+// ── Everything the rules found ─────────────────────────────────────────────
+
+function findings({ findings: all }) {
+  const live = all.filter((finding) => !finding.muted);
+  const muted = all.filter((finding) => finding.muted);
+
+  const node = card('What to change', h('div.card__scroll', {}, [
+    ...(live.length ? live.map((finding) => row(finding, refresh)) : [empty('No rule found a pattern worth changing.')]),
+    ...(muted.length ? [
+      h('div.card__title', { style: 'margin:18px 0 4px;color:var(--ink-3)', text: `Muted · ${muted.length}` }),
+      ...muted.map((finding) => row(finding, refresh)),
+    ] : []),
+  ]), { note: muted.length ? 'muting hides the nudge, it does not fix the habit' : null });
+
+  async function refresh(action, rule) {
+    await api.practiceAction(action, rule);
+    const fresh = await api.practices();
+    node.replaceWith(findings(fresh));
+  }
+
+  return node;
+}
+
+function row(finding, act) {
+  return h(`div.finding${finding.muted ? '.finding--muted' : ''}`, {}, [
+    h('div.finding__head', {}, [
+      dot(finding.severity >= 3 ? 'orange' : finding.severity === 2 ? 'white' : 'lime'),
+      h('span.finding__title', { text: finding.title }),
+      chip(finding.pillar),
+      h('button.btn.btn--ghost.btn--sm', {
+        style: 'margin-left:auto',
+        text: finding.muted ? 'Unmute' : 'Mute',
+        onclick: () => act(finding.muted ? 'unmute' : 'mute', finding.id),
+      }),
+    ]),
+    h('div.finding__evidence', { text: finding.evidence }),
+    h('div.finding__fix', {}, [h('span', { text: finding.fix })]),
+    finding.action
+      ? h('div', { style: 'font-family:var(--mono);font-size:12px;color:var(--lime);padding-left:18px', text: finding.action })
+      : null,
+  ]);
+}