claude-memory-admin 1.5.2 → 1.7.0

package/public/views/issue.mjs

@@ -3,10 +3,11 @@ import { node } from '/dom.mjs';
 import { confirmDialog } from '/dialog.mjs';
 import { api, toast } from '/api.mjs';
 import { state } from '/state.mjs';
-import { issue, goToTab } from '/parts.mjs';
+import { issue, goTo } from '/parts.mjs';
 import { openStore, selectMemory, restoreFromTrash } from '/store.mjs';
 import { openDeleteDialog } from '/dialogs/delete.mjs';
 import { openAddEntryDialog } from '/dialogs/add-entry.mjs';
+import { openHookEditor } from '/dialogs/hook-editor.mjs';
 
 async function removeIndexLine(lineIndex, expectedText, done) {
   const go = await confirmDialog({
@@ -138,17 +139,6 @@ export function renderIssue(item, memories) {
     );
   }
 
-  if (item.kind === 'long-hooks') {
-    return issue(
-      `${item.count} index hook${item.count === 1 ? '' : 's'} over 200 characters`,
-      `longest is ${item.longest.hookLength} chars on "${item.longest.title}" - hooks load every session, so these are the cheapest thing to trim.`,
-      {
-        bad,
-        action: { label: 'Open Prune', run: () => goToTab('prune') },
-      },
-    );
-  }
-
   if (item.kind === 'duplicate-name') {
     return issue(
       `Two memories claim the name "${item.name}"`,
@@ -205,22 +195,24 @@ export function renderIssue(item, memories) {
   }
 
   if (item.kind === 'hook-repeats-description') {
-    return issue(
+    const row = issue(
       `Hook repeats the description: ${item.file}`,
       `MEMORY.md line ${item.index + 1} - ${item.hookLength} characters restating what the file's own description already says. Only the hook loads every session.`,
-      {
-        bad,
-        secondary: { label: 'Open', run: () => selectMemory(item.file) },
-        action: { label: 'Open Prune', run: () => goToTab('prune') },
-      },
+      { bad, secondary: { label: 'Open', run: () => selectMemory(item.file) } },
     );
+    row.append(node('button', {
+      class: ui.buttonPrimarySmall,
+      text: 'Edit hook',
+      onclick: () => openHookEditor(row, item.index),
+    }));
+    return row;
   }
 
   if (item.kind === 'empty-section') {
     return issue(
       `Empty section in MEMORY.md: "${item.section}"`,
       `line ${item.index + 1} - the heading has no entries under it, and headings count against the 200-line budget too.`,
-      { bad, action: { label: 'Open MEMORY.md', run: () => goToTab('index') } },
+      { bad, action: { label: 'Open MEMORY.md', run: () => goTo('memory', 'index') } },
     );
   }
 
@@ -236,7 +228,7 @@ export function renderIssue(item, memories) {
     return issue(
       `${item.count} index ${item.count === 1 ? 'entry spills' : 'entries spill'} onto extra lines`,
       `${item.extraLines} extra line${item.extraLines === 1 ? '' : 's'} of the 200-line budget - the guidance is one line per entry, with the detail in the topic file.`,
-      { bad, action: { label: 'Open MEMORY.md', run: () => goToTab('index') } },
+      { bad, action: { label: 'Open MEMORY.md', run: () => goTo('memory', 'index') } },
     );
   }
 

package/public/views/memories.mjs

@@ -3,8 +3,9 @@ import { el, node } from '/dom.mjs';
 import { renderMarkdown } from '/markdown.mjs';
 import { state } from '/state.mjs';
 import { selectMemory, loadSessionsForProvenance } from '/store.mjs';
-import { goToTab, sessionDate } from '/parts.mjs';
+import { goTo, sessionDate } from '/parts.mjs';
 import { openDeleteDialog } from '/dialogs/delete.mjs';
+import { renderMemoryList } from '/views/memory-list.mjs';
 
 export function memoryLookup(project) {
   const byName = new Map();
@@ -26,25 +27,6 @@ export function renderBody(container, memory, project) {
   });
 }
 
-function memoryButton(memory) {
-  const active = state.selected === memory.file;
-  return node('button', {
-    class: ui.memoryItem(active),
-    'data-memory': memory.file,
-    'data-active': active ? '' : null,
-    onclick: () => selectMemory(memory.file),
-  }, [
-    node('span', { class: ui.memoryTop }, [
-      node('span', { class: ui.memoryName, text: memory.name }),
-      node('span', { class: ui.typeBadge(memory.type), text: memory.type }),
-      memory.status !== 'indexed'
-        ? node('span', { class: ui.badge('warn'), text: memory.status })
-        : null,
-    ]),
-    memory.description ? node('span', { class: ui.memoryDesc, text: memory.description }) : null,
-  ]);
-}
-
 export function renderMemories(container) {
   const project = state.store;
   if (!project.memories.length) {
@@ -53,16 +35,7 @@ export function renderMemories(container) {
   }
 
   const left = node('div');
-  const groups = new Map();
-  for (const memory of project.memories) {
-    const key = memory.section || (memory.status === 'indexed' ? 'Index' : 'Not in the index');
-    if (!groups.has(key)) groups.set(key, []);
-    groups.get(key).push(memory);
-  }
-  for (const [section, memories] of groups) {
-    left.append(node('div', { class: ui.sectionLabel, text: `${section} · ${memories.length}` }));
-    for (const memory of memories) left.append(memoryButton(memory));
-  }
+  renderMemoryList(left);
 
   const right = node('div', { id: 'detail', class: ui.detailPane });
   container.append(node('div', { class: ui.split }, [left, right]));
@@ -165,8 +138,8 @@ function provenanceLine(memory) {
     row.append(node('button', {
       class: ui.provenanceLink(true),
       text: label,
-      title: 'Open the Sessions tab',
-      onclick: () => goToTab('sessions'),
+      title: 'Open Environment \u203a Sessions',
+      onclick: () => goTo('environment', 'sessions'),
     }));
     if (known?.gitBranch) row.append(node('span', { text: `on ${known.gitBranch}` }));
     if (origin.modified) row.append(node('span', { text: sessionDate(origin.modified).slice(0, 10) }));

package/public/views/memory-list.mjs

@@ -0,0 +1,121 @@
+import * as ui from '/ui.mjs';
+import { node } from '/dom.mjs';
+import { state } from '/state.mjs';
+import { paint } from '/bus.mjs';
+import { formatAge } from '/parts.mjs';
+import { selectMemory } from '/store.mjs';
+import { openBulkDeleteDialog } from '/dialogs/bulk-delete.mjs';
+
+const SORTS = {
+  section: { label: 'by section', compare: null },
+  oldest: { label: 'oldest first', compare: (a, b) => (b.ageDays ?? -1) - (a.ageDays ?? -1) },
+  largest: { label: 'largest first', compare: (a, b) => b.bytes - a.bytes },
+  unlinked: { label: 'least linked', compare: (a, b) => a.inbound.length - b.inbound.length || (b.ageDays ?? 0) - (a.ageDays ?? 0) },
+  name: { label: 'by name', compare: (a, b) => a.name.localeCompare(b.name) },
+};
+
+function memoryButton(memory) {
+  const active = state.selected === memory.file;
+  return node('button', {
+    class: ui.memoryItem(active),
+    'data-memory': memory.file,
+    'data-active': active ? '' : null,
+    onclick: () => selectMemory(memory.file),
+  }, [
+    node('span', { class: ui.memoryTop }, [
+      node('span', { class: ui.memoryName, text: memory.name }),
+      node('span', { class: ui.typeBadge(memory.type), text: memory.type }),
+      memory.status !== 'indexed'
+        ? node('span', { class: ui.badge('warn'), text: memory.status })
+        : null,
+    ]),
+    memory.description ? node('span', { class: ui.memoryDesc, text: memory.description }) : null,
+    node('span', { class: ui.memoryFacts }, [
+      node('span', { class: ui.memoryFact((memory.ageDays ?? 0) > 180), text: formatAge(memory.ageDays) }),
+      node('span', { text: `${(memory.bytes / 1024).toFixed(1)}K` }),
+      node('span', { class: ui.memoryFact(!memory.inbound.length), text: `${memory.inbound.length} in` }),
+    ]),
+  ]);
+}
+
+function memoryRow(memory, onToggle) {
+  const row = node('div', { class: ui.listItemRow });
+  if (state.selecting) {
+    const box = node('input', { type: 'checkbox', class: ui.checkbox, 'aria-label': `Select ${memory.name}` });
+    box.checked = state.listSelection.has(memory.file);
+    box.addEventListener('change', () => {
+      if (box.checked) state.listSelection.add(memory.file);
+      else state.listSelection.delete(memory.file);
+      onToggle();
+    });
+    row.append(box);
+  }
+  row.append(memoryButton(memory));
+  return row;
+}
+
+function setSort(value) {
+  state.listSort = value;
+  localStorage.setItem('memoryListSort', value);
+  paint('tab');
+}
+
+function toolbar() {
+  const bar = node('div', { class: ui.listBar });
+  const sort = node('select', { class: ui.select, 'aria-label': 'Sort memories' });
+  for (const [key, config] of Object.entries(SORTS)) {
+    sort.append(node('option', { value: key, text: config.label }));
+  }
+  sort.value = state.listSort;
+  sort.onchange = () => setSort(sort.value);
+
+  const count = node('span', { class: ui.note });
+  const deleteButton = node('button', { class: ui.buttonDangerSmall });
+  const selectButton = node('button', {
+    class: ui.buttonSmall,
+    text: state.selecting ? 'Done' : 'Select',
+    onclick: () => {
+      state.selecting = !state.selecting;
+      if (!state.selecting) state.listSelection.clear();
+      paint('tab');
+    },
+  });
+
+  bar.append(sort, node('span', { class: ui.listSpacer }), count, selectButton);
+  if (state.selecting) bar.append(deleteButton);
+  deleteButton.onclick = () => openBulkDeleteDialog([...state.listSelection]);
+
+  const update = () => {
+    const size = state.listSelection.size;
+    count.textContent = size ? `${size} selected` : '';
+    deleteButton.textContent = `Delete ${size || ''}`.trim();
+    deleteButton.disabled = size === 0;
+  };
+  update();
+  return { bar, update };
+}
+
+export function renderMemoryList(container) {
+  const project = state.store;
+  const { bar, update } = toolbar();
+  container.append(bar);
+
+  const compare = SORTS[state.listSort].compare;
+  if (!compare) {
+    const groups = new Map();
+    for (const memory of project.memories) {
+      const key = memory.section || (memory.status === 'indexed' ? 'Index' : 'Not in the index');
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key).push(memory);
+    }
+    for (const [section, memories] of groups) {
+      container.append(node('div', { class: ui.sectionLabel, text: `${section} · ${memories.length}` }));
+      for (const memory of memories) container.append(memoryRow(memory, update));
+    }
+    return;
+  }
+
+  for (const memory of [...project.memories].sort(compare)) {
+    container.append(memoryRow(memory, update));
+  }
+}

package/public/views/memory.mjs

@@ -0,0 +1,32 @@
+import * as ui from '/ui.mjs';
+import { node } from '/dom.mjs';
+import { state } from '/state.mjs';
+import { paint } from '/bus.mjs';
+import { renderSegmented } from '/views/segments.mjs';
+import { renderMemories } from '/views/memories.mjs';
+import { renderIndex } from '/views/index.mjs';
+import { renderGraph } from '/graph.mjs';
+import { selectMemory } from '/store.mjs';
+
+function renderMemoryGraph(container) {
+  const wrap = node('div', { id: 'graph-wrap', class: ui.graphWrap });
+  container.append(wrap);
+  renderGraph(wrap, state.store.graph, {
+    selected: state.selected,
+    spread: state.spread,
+    onSelect: (file) => selectMemory(file),
+    onSpreadChange: (value) => {
+      state.spread = value;
+      localStorage.setItem('graphSpread', String(value));
+      paint('tab');
+    },
+  });
+}
+
+export function renderMemory(container) {
+  return renderSegmented(container, 'memory', {
+    list: renderMemories,
+    index: renderIndex,
+    graph: renderMemoryGraph,
+  });
+}

package/public/views/path-check.mjs

@@ -2,6 +2,7 @@ import * as ui from '/ui.mjs';
 import { node } from '/dom.mjs';
 import { api } from '/api.mjs';
 import { state } from '/state.mjs';
+import { isAt } from '/parts.mjs';
 import { paint } from '/bus.mjs';
 import { renderIssue } from '/views/issue.mjs';
 
@@ -23,7 +24,7 @@ async function fetchPathCheck() {
   }
   if (state.storeId !== id) return;
   state.pathCheck = next;
-  if (state.tab === 'health') paint('tab');
+  if (isAt('cleanup')) paint('tab');
 }
 
 function startPathCheck({ remember = true } = {}) {

package/public/views/rtk.mjs

@@ -0,0 +1,148 @@
+import * as ui from '/ui.mjs';
+import { node } from '/dom.mjs';
+
+const compact = (value) => {
+  const rounded = Math.round(value);
+  if (Math.abs(rounded) >= 1000000) return `${(rounded / 1000000).toFixed(1)}M`;
+  if (Math.abs(rounded) >= 1000) return `${(rounded / 1000).toFixed(1)}K`;
+  return String(rounded);
+};
+
+const clamp = (percent) => Math.min(100, Math.max(0, percent));
+
+const fact = (value, label) => node('span', {}, [
+  node('b', { class: ui.meterFactValue, text: value }),
+  document.createTextNode(` ${label}`),
+]);
+
+function meter(percent, unit, note, facts) {
+  return node('div', { class: ui.meter }, [
+    node('div', { class: ui.meterTop }, [
+      node('span', { class: ui.meterValue, text: `${percent.toFixed(1)}%` }),
+      node('span', { class: ui.meterUnit, text: unit }),
+    ]),
+    node('div', { class: ui.meterBar }, [
+      node('div', { class: ui.meterFill('accent'), style: `width:${clamp(percent).toFixed(1)}%` }),
+    ]),
+    note ? node('p', { class: ui.meterNote, text: note }) : null,
+    facts.length ? node('div', { class: ui.meterFacts }, facts) : null,
+  ]);
+}
+
+function head(report, actions) {
+  return node('div', { class: ui.sectionLabelRow }, [
+    node('span', { class: ui.sectionLabelInline, text: report.version ? `rtk ${report.version}` : 'rtk' }),
+    node('span', { class: ui.note, text: report.path || '' }),
+    node('span', { class: ui.listSpacer }),
+    node('button', { class: ui.buttonSmall, text: 'Re-read', onclick: actions.reread }),
+    node('button', { class: ui.buttonSmall, text: 'Turn off', onclick: actions.turnOff }),
+  ]);
+}
+
+function projectSection(report) {
+  const project = report.project;
+  if (!project) return [];
+  if (!project.commands) {
+    return [
+      node('div', { class: ui.sectionLabel, text: 'This project' }),
+      node('p', { class: ui.noteTight, text: `rtk has filtered nothing in ${report.projectDir} yet.` }),
+    ];
+  }
+  return [node('div', { class: ui.sectionLabel, text: 'This project' }), meter(
+    project.savedPct,
+    'of what rtk read in this project never reached the model',
+    'rtk scopes its ledger by working directory, so this covers every command run from this project path.',
+    [
+      fact(compact(project.saved), 'tokens saved'),
+      fact(compact(project.commands), 'commands filtered'),
+      fact(`${compact(project.input)} → ${compact(project.output)}`, 'in / out'),
+      fact(`${compact(project.avgMs)}ms`, 'average'),
+    ],
+  )];
+}
+
+function machineMeter(report) {
+  const machine = report.machine;
+  if (!machine) return null;
+  const window = machine.window;
+  const facts = [
+    fact(compact(machine.saved), 'tokens saved'),
+    fact(compact(machine.commands), 'commands filtered'),
+    fact(`${compact(machine.avgMs)}ms`, 'average'),
+  ];
+  if (window && window.commands) {
+    facts.push(fact(`${compact(window.saved)} (${window.savedPct.toFixed(1)}%)`, `saved in the last ${window.days} days`));
+  }
+  return meter(
+    machine.savedPct,
+    'of everything rtk has ever filtered on this machine',
+    null,
+    facts,
+  );
+}
+
+function missedRow(item) {
+  const saving = `${compact(item.savedTokens)} tokens (${item.savedPct.toFixed(0)}%)`;
+  return node('div', { class: ui.issue(false) }, [
+    node('div', { class: ui.issueBody }, [
+      node('div', { class: ui.issueTitle, text: `${item.command} ran ${item.count.toLocaleString()} times unfiltered` }),
+      node('div', { class: ui.issueDetail, text: `${item.equivalent} would have saved about ${saving}` }),
+    ]),
+    node('span', { class: ui.badge('neutral'), text: item.category || 'Other' }),
+  ]);
+}
+
+function discoverSection(report) {
+  const discover = report.discover;
+  if (!discover || !discover.commands) return [];
+
+  const parts = [
+    node('div', { class: ui.sectionLabel, text: 'Left on the table' }),
+    meter(
+      discover.adoptionPct,
+      `of the commands in the last ${discover.sinceDays} days already went through rtk`,
+      `Counted across ${discover.sessionsScanned.toLocaleString()} session transcripts for this project.`,
+      [
+        fact(discover.alreadyRtk.toLocaleString(), 'already filtered'),
+        fact(discover.commands.toLocaleString(), 'commands seen'),
+        fact(discover.sessionsScanned.toLocaleString(), 'sessions scanned'),
+      ],
+    ),
+  ];
+
+  if (!discover.missed.length) {
+    parts.push(node('p', { class: ui.okLine, text: 'Nothing rtk knows how to filter was run raw.' }));
+    return parts;
+  }
+
+  for (const item of discover.missed) parts.push(missedRow(item));
+  const hidden = discover.missedTotal - discover.missed.length;
+  const left = hidden === 1 ? '1 smaller one is not shown' : `${hidden} smaller ones are not shown`;
+  parts.push(node('p', { class: ui.note, text: hidden > 0
+    ? `Estimates from rtk itself, worst first; ${left}. They count what the filter would have stripped, not what the model would have ignored.`
+    : 'Estimates from rtk itself, worst first. They count what the filter would have stripped, not what the model would have ignored.' }));
+  return parts;
+}
+
+function errorNotes(report) {
+  if (!report.errors.length) return [];
+  return [
+    node('div', { class: ui.sectionLabel, text: 'Not read' }),
+    ...report.errors.map((error) => node('p', { class: ui.noteTight, text: `${error.step}: ${error.message}` })),
+  ];
+}
+
+export function renderRtk(container, report, actions) {
+  container.append(head(report, actions));
+  for (const part of projectSection(report)) container.append(part);
+
+  container.append(node('div', { class: ui.sectionLabel, text: report.project ? 'Every project' : 'This machine' }));
+  const machine = machineMeter(report);
+  container.append(machine || node('p', { class: ui.noteTight, text: 'The machine-wide ledger could not be read.' }));
+  if (!report.project && !report.projectDir) {
+    container.append(node('p', { class: ui.note, text: 'This entry is the user scope rather than a project, so rtk has no working directory to slice its ledger by.' }));
+  }
+
+  for (const part of discoverSection(report)) container.append(part);
+  for (const part of errorNotes(report)) container.append(part);
+}

package/public/views/search.mjs

@@ -3,7 +3,7 @@ import { el, node } from '/dom.mjs';
 import { api, toast } from '/api.mjs';
 import { state } from '/state.mjs';
 import { paint } from '/bus.mjs';
-import { highlight } from '/parts.mjs';
+import { highlight, goTo } from '/parts.mjs';
 import { openStore } from '/store.mjs';
 
 let searchTimer = null;
@@ -52,7 +52,7 @@ export function renderSearch() {
     for (const result of group.results) {
       const button = node('button', {
         class: ui.result,
-        onclick: () => openFromSearch(group.id, result.file),
+        onclick: () => openFromSearch(group.id, result.file, 'list'),
       });
       const top = node('div', { class: ui.resultTop });
       const name = node('span', { class: ui.resultName });
@@ -85,12 +85,11 @@ export function renderSearch() {
   }
 }
 
-async function openFromSearch(id, file, tab = 'memories') {
+async function openFromSearch(id, file, segment = 'list') {
   clearSearch();
   if (id !== state.storeId) await openStore(id);
-  state.tab = tab;
   if (file) state.selected = file;
-  paint('tabs', 'tab');
+  goTo('memory', segment);
 }
 
 export function clearSearch() {

package/public/views/segments.mjs

@@ -0,0 +1,37 @@
+import * as ui from '/ui.mjs';
+import { node } from '/dom.mjs';
+import { state } from '/state.mjs';
+import { goTo } from '/parts.mjs';
+import { segmentsFor } from '/views/header.mjs';
+
+export function segmentBar(tab) {
+  const segments = segmentsFor(tab);
+  if (segments.length < 2) return null;
+  return node('div', { class: ui.segmentBar }, [
+    node('div', { class: ui.segmentGroup, role: 'tablist' }, segments.map((seg) => node('button', {
+      class: ui.segment(state.segment[tab] === seg.id),
+      role: 'tab',
+      'aria-selected': String(state.segment[tab] === seg.id),
+      onclick: () => goTo(tab, seg.id),
+    }, [
+      document.createTextNode(seg.label),
+      seg.badge ? node('span', { class: ui.tabBadge(seg.tone) }, [document.createTextNode(seg.badge)]) : null,
+    ]))),
+  ]);
+}
+
+export function activeSegment(tab) {
+  const segments = segmentsFor(tab);
+  if (!segments.length) return null;
+  const current = state.segment[tab];
+  return segments.some((seg) => seg.id === current) ? current : segments[0].id;
+}
+
+export function renderSegmented(container, tab, views) {
+  const bar = segmentBar(tab);
+  if (bar) container.append(bar);
+  const host = node('div');
+  container.append(host);
+  const segment = activeSegment(tab);
+  return views[segment] ? views[segment](host) : null;
+}

package/public/views/sessions.mjs

@@ -2,7 +2,7 @@ import * as ui from '/ui.mjs';
 import { node } from '/dom.mjs';
 import { api } from '/api.mjs';
 import { state } from '/state.mjs';
-import { sizeLabel, sessionDate } from '/parts.mjs';
+import { sizeLabel, sessionDate, isAt } from '/parts.mjs';
 import { selectMemory } from '/store.mjs';
 import { paint } from '/bus.mjs';
 
@@ -170,7 +170,7 @@ export async function renderSessions(container) {
       container.textContent = '';
       return container.append(node('p', { class: ui.note, text: err.message }));
     }
-    if (state.tab !== 'sessions') return;
+    if (!isAt('environment', 'sessions')) return;
     state.aux.sessions = data;
   }
   container.textContent = '';

package/public/views/settings.mjs

@@ -2,6 +2,7 @@ import * as ui from '/ui.mjs';
 import { node } from '/dom.mjs';
 import { api } from '/api.mjs';
 import { state } from '/state.mjs';
+import { isAt } from '/parts.mjs';
 
 const SETTINGS_PROBLEMS = {
   unparseable: (p) => [
@@ -34,7 +35,7 @@ export async function renderSettings(container) {
       container.textContent = '';
       return container.append(node('p', { class: ui.note, text: err.message }));
     }
-    if (state.tab !== 'settings') return;
+    if (!isAt('environment', 'settings')) return;
   }
   container.textContent = '';
 

package/public/views/stores.mjs

@@ -13,9 +13,9 @@ function storeSubtitle(store) {
 
 function issueTitle(store) {
   const parts = [];
-  if (store.issueCount) parts.push(`${store.issueCount} in Health`);
-  if (store.context) parts.push(`${store.context} in Context`);
-  if (store.settings) parts.push(`${store.settings} in Settings`);
+  if (store.issueCount) parts.push(`${store.issueCount} to fix in Cleanup`);
+  const environment = (store.context || 0) + (store.settings || 0);
+  if (environment) parts.push(`${environment} in Environment`);
   if (store.kind === 'auto' && store.resolvedBy === 'unresolved') {
     parts.push('Real path could not be resolved - showing the raw folder name');
   }

package/public/views/tools.mjs

@@ -0,0 +1,76 @@
+import * as ui from '/ui.mjs';
+import { node } from '/dom.mjs';
+import { api } from '/api.mjs';
+import { state } from '/state.mjs';
+import { isAt } from '/parts.mjs';
+import { paint } from '/bus.mjs';
+import { renderRtk } from '/views/rtk.mjs';
+
+const OPT_IN = 'toolsOptIn';
+
+const installedRtk = () => state.tools.find((tool) => tool.id === 'rtk' && tool.found) || null;
+
+async function fetchRtk() {
+  const id = state.storeId;
+  let next;
+  try {
+    next = { data: await api(`/api/stores/${encodeURIComponent(id)}/tools/rtk`) };
+  } catch (err) {
+    next = { error: err.message };
+  }
+  if (state.storeId !== id) return;
+  state.aux.rtk = next;
+  if (isAt('environment', 'tools')) paint('tab');
+}
+
+function startRtk({ remember = true } = {}) {
+  if (remember) localStorage.setItem(OPT_IN, '1');
+  state.aux.rtk = { running: true };
+  fetchRtk();
+}
+
+function readRtk() {
+  startRtk();
+  paint('tab');
+}
+
+function turnOff() {
+  localStorage.removeItem(OPT_IN);
+  state.aux.rtk = null;
+  paint('tab');
+}
+
+function gate(container, tool) {
+  container.append(node('div', { class: ui.issue(false) }, [
+    node('div', { class: ui.issueBody }, [
+      node('div', { class: ui.issueTitle, text: 'rtk is installed, and is not being read' }),
+      node('div', { class: ui.issueDetail, text: `${tool.path} keeps a ledger of what its filters stripped before it reached the model. Reading it runs rtk on this machine, so it stays off until you ask.` }),
+    ]),
+    node('button', { class: ui.buttonSmall, text: 'Read rtk stats', onclick: readRtk }),
+  ]));
+}
+
+function failure(container, message) {
+  container.append(node('div', { class: ui.issue(true) }, [
+    node('div', { class: ui.issueBody }, [
+      node('div', { class: ui.issueTitle, text: 'rtk could not be read' }),
+      node('div', { class: ui.issueDetail, text: message }),
+    ]),
+    node('button', { class: ui.buttonSmall, text: 'Turn off', onclick: turnOff }),
+    node('button', { class: ui.buttonSmall, text: 'Try again', onclick: readRtk }),
+  ]));
+}
+
+export function renderTools(container) {
+  const tool = installedRtk();
+  if (!tool) return;
+
+  if (!state.aux.rtk && localStorage.getItem(OPT_IN) === '1') startRtk({ remember: false });
+
+  const report = state.aux.rtk;
+  if (!report) return gate(container, tool);
+  if (report.running) return container.append(node('p', { class: ui.note, text: 'Reading the rtk ledger…' }));
+  if (report.error) return failure(container, report.error);
+
+  renderRtk(container, report.data, { reread: readRtk, turnOff });
+}