claude-memory-admin 1.0.1 → 1.1.0

package/public/app.mjs

@@ -1,8 +1,6 @@
-import { marked } from '/vendor/marked.js';
-import DOMPurify from '/vendor/purify.js';
 import { renderGraph } from '/graph.mjs';
-
-marked.setOptions({ gfm: true, breaks: false });
+import { renderMarkdown } from '/markdown.mjs';
+import * as ui from '/ui.mjs';
 
 const state = {
   stores: [],
@@ -17,12 +15,11 @@ const state = {
   search: null,
   pruneSort: 'oldest',
   pruneSelection: new Set(),
+  indexView: localStorage.getItem('memoryIndexView') === 'source' ? 'source' : 'rendered',
 };
 
 const el = (id) => document.getElementById(id);
 
-/* ---------------------------------------------------------------- helpers */
-
 async function api(path, options) {
   const response = await fetch(path, {
     headers: { 'content-type': 'application/json' },
@@ -35,10 +32,11 @@ async function api(path, options) {
 
 function toast(message, { error = false, action } = {}) {
   const node = document.createElement('div');
-  node.className = `toast${error ? ' err' : ''}`;
+  node.className = ui.toast(error);
   node.append(document.createTextNode(message));
   if (action) {
     const button = document.createElement('button');
+    button.className = ui.toastAction;
     button.textContent = action.label;
     button.onclick = () => { node.remove(); action.run(); };
     node.append(button);
@@ -61,60 +59,26 @@ function node(tag, props = {}, children = []) {
   return element;
 }
 
-/**
- * Render a memory body. Wikilinks are swapped for placeholders before markdown
- * runs, then rehydrated as buttons afterwards, so they survive sanitising and
- * can carry click handlers.
- */
-function renderBody(container, memory, project) {
+function memoryLookup(project) {
   const byName = new Map();
-  for (const other of project.memories) {
-    byName.set(other.name, other.file);
-    byName.set(other.stem, other.file);
+  for (const memory of project.memories) {
+    byName.set(memory.name, memory.file);
+    byName.set(memory.stem, memory.file);
   }
+  return byName;
+}
 
-  const tokens = [];
-  const withPlaceholders = memory.body.replace(/\[\[([^\]|]+)(?:\|([^\]]*))?\]\]/g, (_, target, alias) => {
-    const key = `%%WIKI${tokens.length}%%`;
-    tokens.push({ target: target.trim(), alias: (alias || '').trim() });
-    return key;
-  });
-
-  const html = DOMPurify.sanitize(marked.parse(withPlaceholders));
-  container.innerHTML = html;
-
-  if (!tokens.length) return;
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
-  const texts = [];
-  while (walker.nextNode()) texts.push(walker.currentNode);
-
-  for (const textNode of texts) {
-    if (!/%%WIKI\d+%%/.test(textNode.nodeValue)) continue;
-    const fragment = document.createDocumentFragment();
-    const parts = textNode.nodeValue.split(/(%%WIKI\d+%%)/);
-    for (const part of parts) {
-      const match = part.match(/^%%WIKI(\d+)%%$/);
-      if (!match) {
-        if (part) fragment.append(document.createTextNode(part));
-        continue;
-      }
-      const token = tokens[Number(match[1])];
-      const targetFile = byName.get(token.target);
-      const button = node('button', {
-        class: `wikilink${targetFile ? '' : ' dangling'}`,
-        text: token.alias || token.target,
-        title: targetFile ? `Go to ${token.target}` : `No memory named "${token.target}"`,
-      });
-      if (targetFile) button.onclick = () => selectMemory(targetFile);
-      fragment.append(button);
-    }
-    textNode.replaceWith(fragment);
-  }
+function openTarget(file) {
+  return file ? { open: () => selectMemory(file) } : null;
 }
 
-/* --------------------------------------------------------------- sidebar */
+function renderBody(container, memory, project) {
+  const byName = memoryLookup(project);
+  renderMarkdown(container, memory.body, {
+    resolveWikilink: (target) => openTarget(byName.get(target)),
+  });
+}
 
-/** The second line under a store's name: where it lives, in its own terms. */
 function storeSubtitle(store) {
   if (store.kind === 'auto') return store.path;
   const scope = store.kind === 'agent-user' ? 'user'
@@ -126,19 +90,19 @@ function storeButton(store) {
   const health = store.memoryCount === 0 ? 'none' : 'ok';
   const off = store.autoMemory && store.autoMemory.known && !store.autoMemory.enabled;
   return node('button', {
-    class: `project${store.id === state.storeId ? ' active' : ''}${store.hasMemoryDir ? '' : ' dim'}`,
+    class: ui.storeItem({ active: store.id === state.storeId, empty: !store.hasMemoryDir }),
     onclick: () => openStore(store.id),
     title: store.kind === 'auto' && store.resolvedBy === 'unresolved'
       ? 'Real path could not be resolved - showing the raw folder name'
       : store.dir,
   }, [
-    node('span', { class: 'project-row' }, [
-      node('span', { class: `dot ${health}` }),
-      node('span', { class: 'project-name', text: store.label }),
-      off ? node('span', { class: 'off-marker', text: 'off', title: 'Auto memory is disabled for this project' }) : null,
-      node('span', { class: 'project-count', text: store.hasMemoryDir ? String(store.memoryCount) : '-' }),
+    node('span', { class: ui.storeRow }, [
+      node('span', { class: ui.dot(health) }),
+      node('span', { class: ui.storeName, text: store.label }),
+      off ? node('span', { class: ui.offMarker, text: 'off', title: 'Auto memory is disabled for this project' }) : null,
+      node('span', { class: ui.storeCount, text: store.hasMemoryDir ? String(store.memoryCount) : '-' }),
     ]),
-    node('span', { class: 'project-path', text: storeSubtitle(store) }),
+    node('span', { class: ui.storePath, text: storeSubtitle(store) }),
   ]);
 }
 
@@ -148,13 +112,10 @@ function renderStores() {
 
   const visible = state.stores.filter((s) => state.showAll || s.hasMemoryDir);
   if (!visible.length) {
-    list.append(node('p', { class: 'muted', text: 'No memory stores found.', style: 'padding:12px' }));
+    list.append(node('p', { class: ui.note, text: 'No memory stores found.' }));
     return;
   }
 
-  // Subagent memory is a different thing from a project's auto memory - a
-  // different scope, written by a different agent - so it gets its own group
-  // rather than being mixed into the project list.
   const groups = [
     ['Projects', visible.filter((s) => s.kind === 'auto')],
     ['Subagents', visible.filter((s) => s.kind !== 'auto')],
@@ -162,16 +123,13 @@ function renderStores() {
 
   for (const [title, stores] of groups) {
     if (!stores.length) continue;
-    // With nothing to tell apart, a single heading is just noise.
     if (groups.every(([, group]) => group.length) ) {
-      list.append(node('div', { class: 'sidebar-group', text: title }));
+      list.append(node('div', { class: ui.sidebarGroup, text: title }));
     }
     for (const store of stores) list.append(storeButton(store));
   }
 }
 
-/* ------------------------------------------------------------------ tabs */
-
 const TABS = [
   { id: 'memories', label: 'Memories' },
   { id: 'index', label: 'MEMORY.md' },
@@ -198,43 +156,42 @@ function renderTabs() {
     if (tab.id === 'prune' && state.store.stats.index.overTarget) badge = '!';
 
     container.append(node('button', {
-      class: `tab${state.tab === tab.id ? ' active' : ''}`,
+      class: ui.tab(state.tab === tab.id),
       onclick: () => { state.tab = tab.id; renderTabs(); renderTab(); },
     }, [
       document.createTextNode(tab.label),
-      badge ? node('span', { class: `badge${tab.id === 'health' || tab.id === 'prune' ? ' warn' : ''}`, text: badge }) : null,
+      badge ? node('span', { class: ui.tabBadge(tab.id === 'health' || tab.id === 'prune'), text: badge }) : null,
     ]));
   }
 }
 
-/* -------------------------------------------------------------- memories */
-
 function memoryButton(memory) {
+  const active = state.selected === memory.file;
   return node('button', {
-    class: `mem${state.selected === memory.file ? ' active' : ''}`,
+    class: ui.memoryItem(active),
+    'data-memory': memory.file,
+    'data-active': active ? '' : null,
     onclick: () => selectMemory(memory.file),
   }, [
-    node('span', { class: 'mem-top' }, [
-      node('span', { class: 'mem-name', text: memory.name }),
-      node('span', { class: `badge type-${memory.type}`, text: memory.type }),
+    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: `badge status-${memory.status}`, text: memory.status })
+        ? node('span', { class: ui.badge('warn'), text: memory.status })
         : null,
     ]),
-    memory.description ? node('span', { class: 'mem-desc', text: memory.description }) : null,
+    memory.description ? node('span', { class: ui.memoryDesc, text: memory.description }) : null,
   ]);
 }
 
 function renderMemories(container) {
   const project = state.store;
   if (!project.memories.length) {
-    container.append(node('p', { class: 'muted', text: 'This project has no memory files yet.' }));
+    container.append(node('p', { class: ui.note, text: 'This project has no memory files yet.' }));
     return;
   }
 
   const left = node('div');
-  // Group by the MEMORY.md heading each entry sits under, so the list mirrors
-  // how the index is actually organised.
   const groups = new Map();
   for (const memory of project.memories) {
     const key = memory.section || (memory.status === 'indexed' ? 'Index' : 'Not in the index');
@@ -242,12 +199,12 @@ function renderMemories(container) {
     groups.get(key).push(memory);
   }
   for (const [section, memories] of groups) {
-    left.append(node('div', { class: 'section-label', text: `${section} · ${memories.length}` }));
+    left.append(node('div', { class: ui.sectionLabel, text: `${section} · ${memories.length}` }));
     for (const memory of memories) left.append(memoryButton(memory));
   }
 
-  const right = node('div', { id: 'detail' });
-  container.append(node('div', { class: 'split' }, [left, right]));
+  const right = node('div', { id: 'detail', class: ui.detailPane });
+  container.append(node('div', { class: ui.split }, [left, right]));
   renderDetail();
 }
 
@@ -258,30 +215,28 @@ function renderDetail() {
 
   const memory = state.store.memories.find((m) => m.file === state.selected);
   if (!memory) {
-    host.append(node('p', { class: 'muted', text: 'Select a memory to read it.' }));
+    host.append(node('p', { class: ui.note, text: 'Select a memory to read it.' }));
     return;
   }
 
-  const card = node('div', { class: 'card' });
-  card.append(node('div', { class: 'detail-head' }, [
-    node('h3', { text: memory.name }),
-    node('span', { class: `badge type-${memory.type}`, text: memory.type }),
+  const card = node('div', { class: ui.card });
+  card.append(node('div', { class: ui.detailHead }, [
+    node('h3', { class: ui.detailTitle, text: memory.name }),
+    node('span', { class: ui.typeBadge(memory.type), text: memory.type }),
     node('button', {
-      class: 'btn danger small',
+      class: ui.buttonDangerSmall,
       text: 'Delete',
       onclick: () => openDeleteDialog(memory.file),
     }),
   ]));
 
-  if (memory.description) card.append(node('p', { class: 'detail-desc', text: memory.description }));
+  if (memory.description) card.append(node('p', { class: ui.detailDesc, text: memory.description }));
 
-  const meta = node('dl', { class: 'meta' });
+  const meta = node('dl', { class: ui.metaList });
   const rows = [
     ['file', memory.file],
     ['status', memory.status],
     ['modified', memory.modified
-      // mtime is reset by any copy or restore, so a date that is only a file
-      // timestamp is weaker evidence than one Claude Code actually stamped.
       ? `${memory.modified.replace('T', ' ').replace(/\..*$/, '')}${memory.modifiedFrom === 'mtime' ? '  (file mtime)' : ''}`
       : '-'],
     ['size', `${(memory.bytes / 1024).toFixed(1)} KB`],
@@ -291,23 +246,23 @@ function renderDetail() {
     if (key !== 'type' && key !== 'modified') rows.push([key, value]);
   }
   for (const [key, value] of rows) {
-    meta.append(node('dt', { text: key }), node('dd', { text: String(value) }));
+    meta.append(node('dt', { class: ui.metaKey, text: key }), node('dd', { class: ui.metaValue, text: String(value) }));
   }
   card.append(meta);
 
-  const body = node('div', { class: 'body' });
+  const body = node('div', { class: ui.prose });
   card.append(body);
   renderBody(body, memory, state.store);
 
   const outbound = memory.outboundResolved || [];
   if (outbound.length || memory.inbound.length) {
-    const links = node('div', { style: 'margin-top:20px;border-top:1px solid var(--border);padding-top:14px' });
+    const links = node('div', { class: ui.linkSection });
     if (outbound.length) {
-      links.append(node('div', { class: 'section-label', text: 'Links out' }));
-      const chips = node('div', { class: 'links' });
+      links.append(node('div', { class: ui.sectionLabel, text: 'Links out' }));
+      const chips = node('div', { class: ui.linkRow });
       for (const link of outbound) {
         chips.append(node('button', {
-          class: `chip${link.file ? '' : ' dead'}`,
+          class: ui.chip(Boolean(link.file)),
           text: link.file ? link.target : `${link.target} (missing)`,
           onclick: link.file ? () => selectMemory(link.file) : null,
         }));
@@ -315,12 +270,12 @@ function renderDetail() {
       links.append(chips);
     }
     if (memory.inbound.length) {
-      links.append(node('div', { class: 'section-label', text: 'Linked from' }));
-      const chips = node('div', { class: 'links' });
+      links.append(node('div', { class: ui.sectionLabel, text: 'Linked from' }));
+      const chips = node('div', { class: ui.linkRow });
       for (const link of memory.inbound) {
         const source = state.store.memories.find((m) => m.file === link.from);
         chips.append(node('button', {
-          class: 'chip',
+          class: ui.chip(true),
           text: source ? source.name : link.from,
           onclick: () => selectMemory(link.from),
         }));
@@ -333,45 +288,96 @@ function renderDetail() {
   host.append(card);
 }
 
-/* ----------------------------------------------------------- MEMORY.md */
+const INDEX_VIEWS = [
+  { id: 'rendered', label: 'Rendered' },
+  { id: 'source', label: 'Source' },
+];
+
+function setIndexView(view) {
+  state.indexView = view;
+  localStorage.setItem('memoryIndexView', view);
+  renderTab();
+}
+
+function indexViewPicker() {
+  return node('div', { class: ui.segmentGroup, role: 'tablist' }, INDEX_VIEWS.map((view) => node('button', {
+    class: ui.segment(state.indexView === view.id),
+    text: view.label,
+    role: 'tab',
+    'aria-selected': String(state.indexView === view.id),
+    onclick: () => setIndexView(view.id),
+  })));
+}
+
+function cutMarker(cutoff) {
+  return node('div', { class: ui.cutLine }, [
+    node('span', { class: ui.cutLabel, text: `not loaded past here — ${cutoff.droppedLines} lines dropped on ${cutoff.by}` }),
+  ]);
+}
 
 function renderIndex(container) {
   const project = state.store;
   if (!project.hasIndex) {
-    container.append(node('p', { class: 'muted', text: 'This project has no MEMORY.md.' }));
+    container.append(node('p', { class: ui.note, text: 'This project has no MEMORY.md.' }));
     return;
   }
 
+  const card = node('div', { class: ui.card });
+  card.append(node('div', { class: ui.cardHeadRow }, [
+    node('p', { class: ui.note, text: `${project.index.entries.length} index entries · ${project.index.lines.length} lines` }),
+    indexViewPicker(),
+  ]));
+
+  if (state.indexView === 'source') renderIndexSource(card, project);
+  else renderIndexRendered(card, project);
+
+  container.append(card);
+}
+
+function renderIndexRendered(card, project) {
+  const { cutoff } = project.stats.index;
+  const files = new Set(project.memories.map((memory) => memory.file));
+  const byName = memoryLookup(project);
+  const options = {
+    resolveWikilink: (target) => openTarget(byName.get(target)),
+    resolveHref: (href) => openTarget(files.has(href) ? href : null),
+  };
+
+  const lines = project.index.raw.split('\n');
+  const loaded = node('div', { class: ui.prose });
+  renderMarkdown(loaded, cutoff ? lines.slice(0, cutoff.rawLine).join('\n') : project.index.raw, options);
+  card.append(loaded);
+
+  if (!cutoff) return;
+  card.append(cutMarker(cutoff));
+  const dropped = node('div', { class: ui.proseDim });
+  renderMarkdown(dropped, lines.slice(cutoff.rawLine).join('\n'), options);
+  card.append(dropped);
+}
+
+function renderIndexSource(card, project) {
   const missing = new Set(project.health.danglingIndex.map((d) => d.index));
   const { cutoff } = project.stats.index;
-  const card = node('div', { class: 'card' });
-  card.append(node('p', { class: 'muted', style: 'margin-top:0', text: `${project.index.entries.length} index entries · ${project.index.lines.length} lines` }));
 
   for (const line of project.index.lines) {
-    // The cutoff is a raw line number, so it lands in the right place even
-    // though frontmatter and comments are stripped before the limit is measured.
-    if (cutoff && line.index === cutoff.rawLine) {
-      card.append(node('div', { class: 'cut-line' }, [
-        node('span', { class: 'cut-label', text: `not loaded past here — ${cutoff.droppedLines} lines dropped on ${cutoff.by}` }),
-      ]));
-    }
-    const row = node('div', {
-      class: `index-line kind-${line.kind}${missing.has(line.index) ? ' dangling' : ''}${cutoff && line.index >= cutoff.rawLine ? ' beyond-cut' : ''}`,
-    }, [
-      node('span', { class: 'ln', text: String(line.index + 1) }),
-      node('span', { class: 'content', text: line.text || ' ' }),
-    ]);
-    if (line.kind === 'index' && !missing.has(line.index)) {
-      row.querySelector('.content').onclick = () => selectMemory(line.file);
-    }
-    card.append(row);
+    if (cutoff && line.index === cutoff.rawLine) card.append(cutMarker(cutoff));
+
+    const dangling = missing.has(line.index);
+    const dropped = Boolean(cutoff) && line.index >= cutoff.rawLine;
+    const clickable = line.kind === 'index' && !dangling;
+    const content = node('span', {
+      class: ui.indexLineText({ kind: line.kind, clickable, dropped }),
+      text: line.text || ' ',
+    });
+    if (clickable) content.onclick = () => selectMemory(line.file);
+
+    card.append(node('div', { class: ui.indexLine({ dangling, dropped }) }, [
+      node('span', { class: ui.indexLineNumber, text: String(line.index + 1) }),
+      content,
+    ]));
   }
-  container.append(card);
 }
 
-
-/* ------------------------------------------------------------- context */
-
 const SCOPE_ORDER = ['managed', 'user', 'project', 'local'];
 
 const CONTEXT_PROBLEMS = {
@@ -386,107 +392,103 @@ const CONTEXT_PROBLEMS = {
 };
 
 async function renderContext(container) {
-  container.append(node('p', { class: 'muted', text: 'Reading instruction files…' }));
+  container.append(node('p', { class: ui.note, text: 'Reading instruction files…' }));
   let data;
   try {
     data = await api(`/api/stores/${encodeURIComponent(state.storeId)}/instructions`);
   } catch (err) {
     container.textContent = '';
-    return container.append(node('p', { class: 'muted', text: err.message }));
+    return container.append(node('p', { class: ui.note, text: err.message }));
   }
-  // The tab may have been switched while the request was in flight.
   if (state.tab !== 'context') return;
   container.textContent = '';
 
   if (!data.projectDir) {
-    return container.append(node('p', { class: 'muted', text: 'This store is not tied to a project directory, so there are no instruction files to resolve.' }));
+    return container.append(node('p', { class: ui.note, text: 'This store is not tied to a project directory, so there are no instruction files to resolve.' }));
   }
 
   const { totals } = data;
-  container.append(node('div', { class: 'meter' }, [
-    node('div', { class: 'meter-top' }, [
-      node('span', { class: 'meter-value', text: `~${totals.alwaysTokens.toLocaleString()}` }),
-      node('span', { class: 'meter-unit', text: 'estimated tokens of instructions, every session' }),
+  container.append(node('div', { class: ui.meter }, [
+    node('div', { class: ui.meterTop }, [
+      node('span', { class: ui.meterValue, text: `~${totals.alwaysTokens.toLocaleString()}` }),
+      node('span', { class: ui.meterUnit, text: 'estimated tokens of instructions, every session' }),
     ]),
-    node('div', { class: 'meter-facts' }, [
-      node('span', {}, [node('b', { text: String(totals.files) }), document.createTextNode(' files resolved')]),
-      node('span', {}, [node('b', { text: String(totals.alwaysLines) }), document.createTextNode(' lines always loaded')]),
-      node('span', {}, [node('b', { text: `${(totals.alwaysBytes / 1024).toFixed(1)} KB` }), document.createTextNode(' always loaded')]),
-      node('span', {}, [node('b', { text: String(totals.conditionalFiles) }), document.createTextNode(' path-scoped rules, loaded only on a match')]),
+    node('div', { class: ui.meterFacts }, [
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: String(totals.files) }), document.createTextNode(' files resolved')]),
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: String(totals.alwaysLines) }), document.createTextNode(' lines always loaded')]),
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: `${(totals.alwaysBytes / 1024).toFixed(1)} KB` }), document.createTextNode(' always loaded')]),
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: String(totals.conditionalFiles) }), document.createTextNode(' path-scoped rules, loaded only on a match')]),
     ]),
-    node('p', { class: 'meter-note', text: 'Unlike MEMORY.md, none of this is truncated: CLAUDE.md files load in full however long they are. The 200-line figure is Claude Code’s guidance, not a cutoff, because long files cost context every session and are followed less reliably.' }),
+    node('p', { class: ui.meterNote, text: 'Unlike MEMORY.md, none of this is truncated: CLAUDE.md files load in full however long they are. The 200-line figure is Claude Code’s guidance, not a cutoff, because long files cost context every session and are followed less reliably.' }),
   ]));
 
   if (data.problems.length) {
-    container.append(node('div', { class: 'section-label', text: `Problems · ${data.problems.length}` }));
+    container.append(node('div', { class: ui.sectionLabel, text: `Problems · ${data.problems.length}` }));
     for (const problem of data.problems) {
       const describe = CONTEXT_PROBLEMS[problem.kind];
       const [title, detail] = describe ? describe(problem) : [problem.kind, problem.file || ''];
       const bad = problem.kind === 'missing' || problem.kind === 'invalid-glob' || problem.kind === 'glob-budget';
-      container.append(node('div', { class: `issue${bad ? ' bad' : ''}` }, [
-        node('div', { class: 'issue-body' }, [
-          node('div', { class: 'issue-title', text: title }),
-          node('div', { class: 'issue-detail', text: detail }),
+      container.append(node('div', { class: ui.issue(bad) }, [
+        node('div', { class: ui.issueBody }, [
+          node('div', { class: ui.issueTitle, text: title }),
+          node('div', { class: ui.issueDetail, text: detail }),
         ]),
       ]));
     }
   }
 
-  container.append(node('div', { class: 'section-label', text: `Loaded in this order · ${data.files.length}` }));
-  const card = node('div', { class: 'card' });
+  container.append(node('div', { class: ui.sectionLabel, text: `Loaded in this order · ${data.files.length}` }));
+  const card = node('div', { class: ui.card });
   for (const file of data.files) {
-    const tags = [node('span', { class: `badge scope-${file.scope}`, text: file.scope })];
-    if (file.kind === 'import') tags.push(node('span', { class: 'badge', text: `import · depth ${file.depth}` }));
-    if (file.kind === 'rule') tags.push(node('span', { class: 'badge', text: 'rule' }));
-    if (file.kind === 'managed-settings') tags.push(node('span', { class: 'badge', text: 'claudeMd setting' }));
-    if (file.conditional) tags.push(node('span', { class: 'badge status-referenced', text: 'only on a path match' }));
-
-    card.append(node('div', { class: 'ctx-row' }, [
-      node('div', { class: 'ctx-main' }, [
-        node('div', { class: 'ctx-tags' }, tags),
-        node('div', { class: 'ctx-file', text: file.file }),
+    const tags = [node('span', { class: ui.scopeBadge(file.scope), text: file.scope })];
+    if (file.kind === 'import') tags.push(node('span', { class: ui.badge(), text: `import · depth ${file.depth}` }));
+    if (file.kind === 'rule') tags.push(node('span', { class: ui.badge(), text: 'rule' }));
+    if (file.kind === 'managed-settings') tags.push(node('span', { class: ui.badge(), text: 'claudeMd setting' }));
+    if (file.conditional) tags.push(node('span', { class: ui.badge('warn'), text: 'only on a path match' }));
+
+    card.append(node('div', { class: ui.contextRow }, [
+      node('div', { class: ui.contextMain }, [
+        node('div', { class: ui.contextTags }, tags),
+        node('div', { class: ui.contextFile, text: file.file }),
       ]),
-      node('div', { class: 'ctx-size', text: `${file.lines} L · ~${file.tokens.toLocaleString()} tok` }),
+      node('div', { class: ui.contextSize, text: `${file.lines} L · ~${file.tokens.toLocaleString()} tok` }),
     ]));
   }
   container.append(card);
 
   if (data.excluded.length) {
-    container.append(node('div', { class: 'section-label', text: `Excluded by claudeMdExcludes · ${data.excluded.length}` }));
+    container.append(node('div', { class: ui.sectionLabel, text: `Excluded by claudeMdExcludes · ${data.excluded.length}` }));
     for (const file of data.excluded) {
-      container.append(node('div', { class: 'issue' }, [
-        node('div', { class: 'issue-body' }, [node('div', { class: 'issue-detail', text: file })]),
+      container.append(node('div', { class: ui.issue(false) }, [
+        node('div', { class: ui.issueBody }, [node('div', { class: ui.issueDetail, text: file })]),
       ]));
     }
   }
 
-  container.append(node('p', { class: 'meter-note', text: 'This is re-derived from the documented resolution rules, not a report from Claude Code. Run /context in a session to see what it actually loaded.' }));
+  container.append(node('p', { class: ui.meterNote, text: 'This is re-derived from the documented resolution rules, not a report from Claude Code. Run /context in a session to see what it actually loaded.' }));
 }
 
-/* -------------------------------------------------------------- health */
-
 function issue(title, detail, { bad = false, action, secondary } = {}) {
-  return node('div', { class: `issue${bad ? ' bad' : ''}` }, [
-    node('div', { class: 'issue-body' }, [
-      node('div', { class: 'issue-title', text: title }),
-      node('div', { class: 'issue-detail', text: detail }),
+  return node('div', { class: ui.issue(bad) }, [
+    node('div', { class: ui.issueBody }, [
+      node('div', { class: ui.issueTitle, text: title }),
+      node('div', { class: ui.issueDetail, text: detail }),
     ]),
-    secondary ? node('button', { class: 'btn small', text: secondary.label, onclick: secondary.run }) : null,
-    action ? node('button', { class: 'btn small', text: action.label, onclick: action.run }) : null,
+    secondary ? node('button', { class: ui.buttonSmall, text: secondary.label, onclick: secondary.run }) : null,
+    action ? node('button', { class: ui.buttonSmall, text: action.label, onclick: action.run }) : null,
   ]);
 }
 
 function renderHealth(container) {
   const { health, memories } = state.store;
   if (!health.issues.length) {
-    container.append(node('div', { class: 'card' }, [
-      node('p', { style: 'margin:0', text: '\u2713 No consistency problems found.' }),
-      node('p', { class: 'muted', style: 'margin:6px 0 0;font-size:13px', text: 'Every memory file is referenced by MEMORY.md, every pointer resolves, and every [[wikilink]] finds its target.' }),
+    container.append(node('div', { class: ui.card }, [
+      node('p', { class: ui.okLine, text: '\u2713 No consistency problems found.' }),
+      node('p', { class: ui.noteTight, text: 'Every memory file is referenced by MEMORY.md, every pointer resolves, and every [[wikilink]] finds its target.' }),
     ]));
     return;
   }
 
-  // Rendered straight from health.issues so the tab and the badge always agree.
   for (const item of health.issues) {
     container.append(renderIssue(item, memories));
   }
@@ -618,12 +620,10 @@ async function restoreFromTrash(id) {
   }
 }
 
-/* --------------------------------------------------------------- trash */
-
 function renderTrash(container) {
   const trash = state.store.trash;
   if (!trash.length) {
-    container.append(node('p', { class: 'muted', text: 'Nothing in the trash. Deleted memories land here and can be restored.' }));
+    container.append(node('p', { class: ui.note, text: 'Nothing in the trash. Deleted memories land here and can be restored.' }));
     return;
   }
   for (const record of trash) {
@@ -631,20 +631,18 @@ function renderTrash(container) {
     const detail = record.kind === 'wikilink'
       ? `unlinked in ${record.sourceFile} · ${when}`
       : `${record.files.length} file(s)${record.indexTrashedFile ? ' + MEMORY.md' : ''} · ${when} · ${record.removedLines?.length || 0} index line(s) removed`;
-    container.append(node('div', { class: `issue${record.present ? '' : ' bad'}` }, [
-      node('div', { class: 'issue-body' }, [
-        node('div', { class: 'issue-title', text: record.label || record.id }),
-        node('div', { class: 'issue-detail', text: record.present ? detail : `${detail}, backup missing, cannot restore` }),
+    container.append(node('div', { class: ui.issue(!record.present) }, [
+      node('div', { class: ui.issueBody }, [
+        node('div', { class: ui.issueTitle, text: record.label || record.id }),
+        node('div', { class: ui.issueDetail, text: record.present ? detail : `${detail}, backup missing, cannot restore` }),
       ]),
       record.present
-        ? node('button', { class: 'btn small primary', text: 'Restore', onclick: () => restoreFromTrash(record.id) })
+        ? node('button', { class: ui.buttonPrimarySmall, text: 'Restore', onclick: () => restoreFromTrash(record.id) })
         : null,
     ]));
   }
 }
 
-/* -------------------------------------------------------- delete dialog */
-
 function closeModal() {
   el('modal-root').textContent = '';
 }
@@ -660,53 +658,50 @@ async function openDeleteDialog(file) {
     return toast(err.message, { error: true });
   }
 
-  const body = node('div', { class: 'modal-body' });
+  const body = node('div', { class: ui.modalBody });
 
-  const removals = node('div', { class: 'will' }, [node('div', { class: 'will-title', text: 'Will be removed' })]);
-  removals.append(node('div', { class: 'will-item remove', text: `memory/${preview.file}  →  memory/.trash/` }));
+  const removals = node('div', { class: ui.willBlock }, [node('div', { class: ui.willTitle, text: 'Will be removed' })]);
+  removals.append(node('div', { class: ui.willItem('remove'), text: `memory/${preview.file}  →  memory/.trash/` }));
   for (const line of [...preview.indexLines, ...preview.continuations]) {
-    removals.append(node('div', { class: 'will-item remove', text: `MEMORY.md line ${line.index + 1}:  ${line.text}` }));
+    removals.append(node('div', { class: ui.willItem('remove'), text: `MEMORY.md line ${line.index + 1}:  ${line.text}` }));
   }
   if (!preview.indexLines.length && preview.hasIndex) {
-    removals.append(node('div', { class: 'will-item', text: 'MEMORY.md has no index bullet for this file - nothing to unlink there.' }));
+    removals.append(node('div', { class: ui.willItem(), text: 'MEMORY.md has no index bullet for this file - nothing to unlink there.' }));
   }
   body.append(removals);
 
   if (preview.inlineRefs.length) {
-    const kept = node('div', { class: 'will' }, [node('div', { class: 'will-title', text: 'Left untouched - mentioned inside prose, so you may want to fix these by hand' })]);
+    const kept = node('div', { class: ui.willBlock }, [node('div', { class: ui.willTitle, text: 'Left untouched - mentioned inside prose, so you may want to fix these by hand' })]);
     for (const ref of preview.inlineRefs) {
-      kept.append(node('div', { class: 'will-item keep', text: `MEMORY.md line ${ref.index + 1}:  ${ref.text}` }));
+      kept.append(node('div', { class: ui.willItem('keep'), text: `MEMORY.md line ${ref.index + 1}:  ${ref.text}` }));
     }
     body.append(kept);
   }
 
-  // Memories that link here can be deleted in the same operation. Ticking one
-  // is the common follow-up, so it lives in the dialog rather than forcing a
-  // second pass through the list.
   const cascade = new Set();
   if (preview.inboundWikilinks.length) {
-    const block = node('div', { class: 'will' });
-    const head = node('div', { class: 'cascade-head' }, [
-      node('div', { class: 'will-title', style: 'margin:0', text: `${preview.inboundWikilinks.length} memory(s) link here and will break` }),
-      node('button', { class: 'link-btn', text: 'select all' }),
-    ]);
-    block.append(head);
+    const block = node('div', { class: ui.willBlock });
+    const selectAll = node('button', { class: ui.linkButton, text: 'select all' });
+    block.append(node('div', { class: ui.cascadeHead }, [
+      node('div', { class: ui.willTitle, text: `${preview.inboundWikilinks.length} memory(s) link here and will break` }),
+      selectAll,
+    ]));
 
-    const list = node('div', { class: 'cascade' });
+    const list = node('div', { class: ui.cascadeList });
     const rows = [];
     for (const link of preview.inboundWikilinks) {
-      const box = node('input', { type: 'checkbox' });
-      const row = node('label', { class: 'cascade-row' }, [
+      const box = node('input', { type: 'checkbox', class: ui.checkbox });
+      const row = node('label', { class: ui.cascadeRow(false) }, [
         box,
-        node('span', { class: 'cascade-text' }, [
-          node('span', { class: 'cascade-name', text: link.fromName || link.from }),
-          node('span', { class: 'cascade-detail', text: link.indexLine
+        node('span', { class: ui.cascadeText }, [
+          node('span', { class: ui.cascadeName, text: link.fromName || link.from }),
+          node('span', { class: ui.cascadeDetail, text: link.indexLine
             ? `${link.from} · MEMORY.md line ${link.indexLine.index + 1}`
             : `${link.from} · not in the index` }),
         ]),
       ]);
       box.addEventListener('change', () => {
-        row.classList.toggle('on', box.checked);
+        row.className = ui.cascadeRow(box.checked);
         if (box.checked) cascade.add(link.from);
         else cascade.delete(link.from);
         updateButton();
@@ -715,94 +710,87 @@ async function openDeleteDialog(file) {
       list.append(row);
     }
     block.append(list);
-    block.append(node('p', { class: 'muted', style: 'margin:6px 0 0;font-size:12px', text: 'Tick any you also want deleted - they go to the trash together and restore as one step.' }));
+    block.append(node('p', { class: ui.noteTight, text: 'Tick any you also want deleted - they go to the trash together and restore as one step.' }));
     body.append(block);
 
-    head.querySelector('.link-btn').onclick = (event) => {
+    selectAll.onclick = (event) => {
       event.preventDefault();
       const turnOn = rows.some((r) => !r.box.checked);
       for (const { box } of rows) {
         if (box.checked !== turnOn) { box.checked = turnOn; box.dispatchEvent(new Event('change')); }
       }
-      event.target.textContent = turnOn ? 'select none' : 'select all';
+      selectAll.textContent = turnOn ? 'select none' : 'select all';
     };
   }
 
-  body.append(node('p', { class: 'muted', style: 'margin:0;font-size:12.5px', text: 'The file moves to memory/.trash/ with a restore record, so this can be undone.' }));
+  body.append(node('p', { class: ui.noteTight, text: 'The file moves to memory/.trash/ with a restore record, so this can be undone.' }));
+
+  const confirmButton = node('button', {
+    class: ui.button({ tone: 'danger' }),
+    text: 'Delete',
+    onclick: async () => {
+      closeModal();
+      try {
+        const result = await api(`/api/stores/${encodeURIComponent(state.storeId)}/delete`, {
+          method: 'POST',
+          body: JSON.stringify({ file, alsoDelete: [...cascade] }),
+        });
+        if (state.selected === file || cascade.has(state.selected)) state.selected = null;
+        await openStore(state.storeId, { keepTab: true });
+        const count = result.record.files.length;
+        toast(count > 1 ? `Deleted ${count} memories` : `Deleted "${result.record.label || file}"`, {
+          action: { label: 'Undo', run: () => restoreFromTrash(result.record.id) },
+        });
+      } catch (err) {
+        toast(err.message, { error: true });
+      }
+    },
+  });
 
-  const modal = node('div', { class: 'modal' }, [
-    node('header', {}, [
-      node('h3', { text: `Delete "${preview.name || preview.file}"?` }),
-      node('p', { class: 'muted', style: 'margin:0;font-size:13px', text: preview.description || '' }),
+  const modal = node('div', { class: ui.modal }, [
+    node('header', { class: ui.modalHead }, [
+      node('h3', { class: ui.modalTitle, text: `Delete "${preview.name || preview.file}"?` }),
+      node('p', { class: ui.note, text: preview.description || '' }),
     ]),
     body,
-    node('footer', {}, [
-      node('button', { class: 'btn', text: 'Cancel', onclick: closeModal }),
-      node('button', {
-        class: 'btn danger',
-        text: 'Delete',
-        onclick: async () => {
-          closeModal();
-          try {
-            const result = await api(`/api/stores/${encodeURIComponent(state.storeId)}/delete`, {
-              method: 'POST',
-              body: JSON.stringify({ file, alsoDelete: [...cascade] }),
-            });
-            if (state.selected === file || cascade.has(state.selected)) state.selected = null;
-            await openStore(state.storeId, { keepTab: true });
-            const count = result.record.files.length;
-            toast(count > 1 ? `Deleted ${count} memories` : `Deleted "${result.record.label || file}"`, {
-              action: { label: 'Undo', run: () => restoreFromTrash(result.record.id) },
-            });
-          } catch (err) {
-            toast(err.message, { error: true });
-          }
-        },
-      }),
+    node('footer', { class: ui.modalFoot }, [
+      node('button', { class: ui.button(), text: 'Cancel', onclick: closeModal }),
+      confirmButton,
     ]),
   ]);
 
-  const backdrop = node('div', { class: 'modal-backdrop', onclick: (event) => { if (event.target === backdrop) closeModal(); } }, [modal]);
+  const backdrop = node('div', { class: ui.modalBackdrop, onclick: (event) => { if (event.target === backdrop) closeModal(); } }, [modal]);
   el('modal-root').append(backdrop);
   updateButton();
 
   function updateButton() {
-    const button = modal.querySelector('footer .btn.danger');
-    if (button) button.textContent = cascade.size ? `Delete ${cascade.size + 1} memories` : 'Delete';
+    confirmButton.textContent = cascade.size ? `Delete ${cascade.size + 1} memories` : 'Delete';
   }
 }
 
-/**
- * Name a store whose transcripts have aged out.
- *
- * Claude Code sweeps session transcripts on a retention period but keeps memory
- * forever, so the evidence that names a store expires while the store does not.
- * This is the only thing in the app that writes outside a memory directory, so
- * it happens only when asked for, and says so.
- */
 function openRememberPathDialog() {
   const store = state.store;
   const input = node('input', {
     type: 'text',
-    class: 'path-input',
+    class: ui.pathInput,
     value: store.guess || '',
     placeholder: '/Users/you/repos/the-project',
     spellcheck: 'false',
   });
 
-  const body = node('div', { class: 'modal-body' }, [
-    node('p', { class: 'muted', style: 'margin-top:0', text: `The folder on disk is "${store.slug}", and its name is a lossy encoding of a path. No session transcript remains to recover the real one from, so tell it once and it will be used from now on.` }),
+  const body = node('div', { class: ui.modalBody }, [
+    node('p', { class: ui.note, text: `The folder on disk is "${store.slug}", and its name is a lossy encoding of a path. No session transcript remains to recover the real one from, so tell it once and it will be used from now on.` }),
     input,
-    node('p', { class: 'muted', style: 'margin-bottom:0;font-size:12.5px', text: 'Saved to ~/.claude-memory-admin/paths.json. That file records slugs and folder paths only, never memory content, and is the one thing this app writes outside a memory/ directory.' }),
+    node('p', { class: ui.noteTight, text: 'Saved to ~/.claude-memory-admin/paths.json. That file records slugs and folder paths only, never memory content, and is the one thing this app writes outside a memory/ directory.' }),
   ]);
 
-  const modal = node('div', { class: 'modal' }, [
-    node('header', {}, [node('h3', { text: 'Remember this project\u2019s path' })]),
+  const modal = node('div', { class: ui.modal }, [
+    node('header', { class: ui.modalHead }, [node('h3', { class: ui.modalTitle, text: 'Remember this project\u2019s path' })]),
     body,
-    node('footer', {}, [
-      node('button', { class: 'btn', text: 'Cancel', onclick: closeModal }),
+    node('footer', { class: ui.modalFoot }, [
+      node('button', { class: ui.button(), text: 'Cancel', onclick: closeModal }),
       node('button', {
-        class: 'btn primary',
+        class: ui.button({ tone: 'primary' }),
         text: 'Remember',
         onclick: async () => {
           const value = input.value.trim();
@@ -824,7 +812,7 @@ function openRememberPathDialog() {
     ]),
   ]);
 
-  const backdrop = node('div', { class: 'modal-backdrop', onclick: (event) => { if (event.target === backdrop) closeModal(); } }, [modal]);
+  const backdrop = node('div', { class: ui.modalBackdrop, onclick: (event) => { if (event.target === backdrop) closeModal(); } }, [modal]);
   el('modal-root').append(backdrop);
   input.focus();
   input.select();
@@ -853,40 +841,39 @@ async function openStoreDeleteDialog() {
     return toast('This store has no memory to delete');
   }
 
-  const body = node('div', { class: 'modal-body' });
-  const removals = node('div', { class: 'will' }, [node('div', { class: 'will-title', text: 'Will be removed' })]);
+  const body = node('div', { class: ui.modalBody });
+  const removals = node('div', { class: ui.willBlock }, [node('div', { class: ui.willTitle, text: 'Will be removed' })]);
   if (preview.hasIndex) {
-    removals.append(node('div', { class: 'will-item remove', text: `MEMORY.md  (${preview.indexLines} lines)  →  memory/.trash/` }));
+    removals.append(node('div', { class: ui.willItem('remove'), text: `MEMORY.md  (${preview.indexLines} lines)  →  memory/.trash/` }));
   }
   for (const entry of preview.files) {
-    removals.append(node('div', { class: 'will-item remove', text: `${entry.file}  →  memory/.trash/` }));
+    removals.append(node('div', { class: ui.willItem('remove'), text: `${entry.file}  →  memory/.trash/` }));
   }
   body.append(removals);
 
-  body.append(node('div', { class: 'will' }, [
-    node('div', { class: 'will-title', text: 'Will be kept' }),
-    node('div', { class: 'will-item keep', text: state.store.kind === 'auto'
+  body.append(node('div', { class: ui.willBlock }, [
+    node('div', { class: ui.willTitle, text: 'Will be kept' }),
+    node('div', { class: ui.willItem('keep'), text: state.store.kind === 'auto'
       ? 'Session transcripts (*.jsonl) and the project folder itself'
       : 'The agent-memory folder itself, and every other agent\u2019s memory' }),
   ]));
 
-  body.append(node('p', { class: 'muted', style: 'margin:0;font-size:12.5px', text: 'Everything moves to .trash/ inside the store as one restore point, so it can be put back in a single step from the Trash tab.' }));
+  body.append(node('p', { class: ui.noteTight, text: 'Everything moves to .trash/ inside the store as one restore point, so it can be put back in a single step from the Trash tab.' }));
 
-  // A project-scoped agent store is committed, so this is a working-tree change.
   if (state.store.kind === 'agent-project') {
-    body.append(node('p', { class: 'sub-warn', style: 'margin:8px 0 0', text: 'This store is checked into the repository. Deleting from it changes tracked files, and will show up in git status.' }));
+    body.append(node('p', { class: ui.subWarn, text: 'This store is checked into the repository. Deleting from it changes tracked files, and will show up in git status.' }));
   }
 
-  const modal = node('div', { class: 'modal' }, [
-    node('header', {}, [
-      node('h3', { text: `Delete all memory for ${state.store.label}?` }),
-      node('p', { class: 'muted', style: 'margin:0;font-size:13px', text: `${preview.files.length} memories${preview.hasIndex ? ' + MEMORY.md' : ''}` }),
+  const modal = node('div', { class: ui.modal }, [
+    node('header', { class: ui.modalHead }, [
+      node('h3', { class: ui.modalTitle, text: `Delete all memory for ${state.store.label}?` }),
+      node('p', { class: ui.note, text: `${preview.files.length} memories${preview.hasIndex ? ' + MEMORY.md' : ''}` }),
     ]),
     body,
-    node('footer', {}, [
-      node('button', { class: 'btn', text: 'Cancel', onclick: closeModal }),
+    node('footer', { class: ui.modalFoot }, [
+      node('button', { class: ui.button(), text: 'Cancel', onclick: closeModal }),
       node('button', {
-        class: 'btn danger',
+        class: ui.button({ tone: 'danger' }),
         text: `Delete ${preview.files.length + (preview.hasIndex ? 1 : 0)} files`,
         onclick: async () => {
           closeModal();
@@ -905,13 +892,10 @@ async function openStoreDeleteDialog() {
     ]),
   ]);
 
-  const backdrop = node('div', { class: 'modal-backdrop', onclick: (event) => { if (event.target === backdrop) closeModal(); } }, [modal]);
+  const backdrop = node('div', { class: ui.modalBackdrop, onclick: (event) => { if (event.target === backdrop) closeModal(); } }, [modal]);
   el('modal-root').append(backdrop);
 }
 
-
-/* --------------------------------------------------------------- prune */
-
 function highlight(text, terms) {
   const wrapper = node('span');
   if (!terms.length) { wrapper.textContent = text; return wrapper; }
@@ -919,7 +903,7 @@ function highlight(text, terms) {
   let last = 0;
   for (const match of text.matchAll(pattern)) {
     if (match.index > last) wrapper.append(document.createTextNode(text.slice(last, match.index)));
-    wrapper.append(node('mark', { text: match[0] }));
+    wrapper.append(node('mark', { class: ui.resultMark, text: match[0] }));
     last = match.index + match[0].length;
   }
   if (last < text.length) wrapper.append(document.createTextNode(text.slice(last)));
@@ -944,7 +928,7 @@ const PRUNE_SORTS = {
 function renderBudget(container) {
   const { index } = state.store.stats;
   const percent = Math.min(100, index.worstPercent);
-  const level = index.level === 'over' ? 'way-over' : index.level === 'near' ? 'over' : '';
+  const level = index.level;
 
   const note = index.level === 'over'
     ? 'Over the limit. Everything past the cutoff is dropped when the session loads it, so those entries are effectively invisible to Claude right now.'
@@ -954,42 +938,42 @@ function renderBudget(container) {
 
   if (index.cutoff) {
     const dropped = index.cutoff.droppedEntries;
-    const box = node('div', { class: 'cut-summary' });
-    box.append(node('div', { class: 'cut-summary-head', text: dropped.length
+    const box = node('div', { class: ui.cutSummary });
+    box.append(node('div', { class: ui.cutSummaryHead, text: dropped.length
       ? `${dropped.length} ${dropped.length === 1 ? 'memory is' : 'memories are'} past the cutoff and not loaded`
       : `${index.cutoff.droppedLines} lines are past the cutoff and not loaded` }));
-    box.append(node('p', { class: 'muted', text: `MEMORY.md stops loading at line ${index.cutoff.rawLine + 1}, bounded by ${index.cutoff.by}. Claude cannot see anything below it.` }));
+    box.append(node('p', { class: ui.note, text: `MEMORY.md stops loading at line ${index.cutoff.rawLine + 1}, bounded by ${index.cutoff.by}. Claude cannot see anything below it.` }));
     for (const entry of dropped.slice(0, 20)) {
-      box.append(node('div', { class: 'issue' }, [
-        node('div', { class: 'issue-body' }, [
-          node('div', { class: 'issue-title', text: entry.title || entry.file }),
-          node('div', { class: 'issue-detail', text: `MEMORY.md line ${entry.index + 1} · ${entry.file}` }),
+      box.append(node('div', { class: ui.issue(true) }, [
+        node('div', { class: ui.issueBody }, [
+          node('div', { class: ui.issueTitle, text: entry.title || entry.file }),
+          node('div', { class: ui.issueDetail, text: `MEMORY.md line ${entry.index + 1} · ${entry.file}` }),
         ]),
-        node('button', { class: 'btn small', text: 'Open', onclick: () => selectMemory(entry.file) }),
+        node('button', { class: ui.buttonSmall, text: 'Open', onclick: () => selectMemory(entry.file) }),
       ]));
     }
     if (dropped.length > 20) {
-      box.append(node('p', { class: 'muted', text: `${dropped.length - 20} more not listed.` }));
+      box.append(node('p', { class: ui.note, text: `${dropped.length - 20} more not listed.` }));
     }
     container.append(box);
   }
 
-  container.append(node('div', { class: 'meter' }, [
-    node('div', { class: 'meter-top' }, [
-      node('span', { class: 'meter-value', text: `${Math.round(index.worstPercent)}%` }),
-      node('span', { class: 'meter-unit', text: `of the MEMORY.md load limit, currently bounded by ${index.limitedBy}` }),
+  container.append(node('div', { class: ui.meter }, [
+    node('div', { class: ui.meterTop }, [
+      node('span', { class: ui.meterValue, text: `${Math.round(index.worstPercent)}%` }),
+      node('span', { class: ui.meterUnit, text: `of the MEMORY.md load limit, currently bounded by ${index.limitedBy}` }),
     ]),
-    node('div', { class: 'meter-bar' }, [
-      node('div', { class: `meter-fill ${level}`, style: `width:${percent.toFixed(1)}%` }),
+    node('div', { class: ui.meterBar }, [
+      node('div', { class: ui.meterFill(level), style: `width:${percent.toFixed(1)}%` }),
     ]),
-    node('p', { class: 'meter-note', text: note }),
-    node('div', { class: 'meter-facts' }, [
-      node('span', {}, [node('b', { text: `${index.lines} / ${index.lineLimit}` }), document.createTextNode(' lines')]),
-      node('span', {}, [node('b', { text: `${(index.bytes / 1024).toFixed(1)} / ${index.byteLimit / 1024} KB` }), document.createTextNode(' loaded size')]),
-      node('span', {}, [node('b', { text: String(index.entryCount) }), document.createTextNode(' index entries')]),
-      node('span', {}, [node('b', { text: `~${index.tokens.toLocaleString()}` }), document.createTextNode(' tokens, every session')]),
+    node('p', { class: ui.meterNote, text: note }),
+    node('div', { class: ui.meterFacts }, [
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: `${index.lines} / ${index.lineLimit}` }), document.createTextNode(' lines')]),
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: `${(index.bytes / 1024).toFixed(1)} / ${index.byteLimit / 1024} KB` }), document.createTextNode(' loaded size')]),
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: String(index.entryCount) }), document.createTextNode(' index entries')]),
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: `~${index.tokens.toLocaleString()}` }), document.createTextNode(' tokens, every session')]),
     ]),
-    node('p', { class: 'meter-note', style: 'margin-top:10px', text: 'Claude Code loads the first 200 lines or 25KB of MEMORY.md, whichever comes first, and drops the rest. Topic files are only read when Claude follows a link, so detail belongs in them and MEMORY.md should stay one line per entry.' }),
+    node('p', { class: ui.meterNote, text: 'Claude Code loads the first 200 lines or 25KB of MEMORY.md, whichever comes first, and drops the rest. Topic files are only read when Claude follows a link, so detail belongs in them and MEMORY.md should stay one line per entry.' }),
   ]));
 }
 
@@ -998,49 +982,48 @@ function renderPrune(container) {
   renderBudget(container);
 
   if (!project.memories.length) {
-    container.append(node('p', { class: 'muted', text: 'Nothing to prune - this project has no memories.' }));
+    container.append(node('p', { class: ui.note, text: 'Nothing to prune - this project has no memories.' }));
     return;
   }
 
-  // --- bulk selection list ---
   const selected = state.pruneSelection;
-  const bar = node('div', { class: 'prune-bar' });
-  const sort = node('select');
+  const bar = node('div', { class: ui.pruneBar });
+  const sort = node('select', { class: ui.select });
   for (const [key, config] of Object.entries(PRUNE_SORTS)) {
     sort.append(node('option', { value: key, text: config.label, selected: key === state.pruneSort ? '' : null }));
   }
   sort.value = state.pruneSort;
   sort.onchange = () => { state.pruneSort = sort.value; renderTab(); };
 
-  const count = node('span', { class: 'muted', style: 'font-size:12.5px' });
-  const deleteButton = node('button', { class: 'btn danger small' });
-  const clearButton = node('button', { class: 'btn small', text: 'Clear selection' });
+  const count = node('span', { class: ui.note });
+  const deleteButton = node('button', { class: ui.buttonDangerSmall });
+  const clearButton = node('button', { class: ui.buttonSmall, text: 'Clear selection' });
 
-  bar.append(node('span', { class: 'section-label', style: 'margin:0', text: 'Prune' }), sort, node('span', { class: 'spacer' }), count, clearButton, deleteButton);
+  bar.append(node('span', { class: ui.sectionLabel, text: 'Prune' }), sort, node('span', { class: ui.pruneSpacer }), count, clearButton, deleteButton);
   container.append(bar);
 
   const list = node('div');
   const ordered = [...project.memories].sort(PRUNE_SORTS[state.pruneSort].compare);
   const rows = [];
   for (const memory of ordered) {
-    const box = node('input', { type: 'checkbox' });
+    const box = node('input', { type: 'checkbox', class: ui.checkbox });
     box.checked = selected.has(memory.file);
-    const row = node('label', { class: `prune-row${box.checked ? ' on' : ''}` }, [
+    const row = node('label', { class: ui.pruneRow(box.checked) }, [
       box,
-      node('span', { class: 'prune-main' }, [
-        node('span', { class: 'prune-name', text: memory.name }),
-        node('span', { class: 'prune-desc', text: memory.description || memory.file }),
+      node('span', { class: ui.pruneMain }, [
+        node('span', { class: ui.pruneName, text: memory.name }),
+        node('span', { class: ui.pruneDesc, text: memory.description || memory.file }),
       ]),
-      node('span', { class: 'prune-facts' }, [
-        node('span', { class: (memory.ageDays ?? 0) > 180 ? 'warn' : '', text: formatAge(memory.ageDays) }),
+      node('span', { class: ui.pruneFacts }, [
+        node('span', { class: ui.pruneFact((memory.ageDays ?? 0) > 180), text: formatAge(memory.ageDays) }),
         node('span', { text: `${(memory.bytes / 1024).toFixed(1)}K` }),
-        node('span', { class: memory.inbound.length ? '' : 'warn', text: `${memory.inbound.length} in` }),
-        node('span', { class: memory.status === 'indexed' ? '' : 'warn', text: memory.status }),
+        node('span', { class: ui.pruneFact(!memory.inbound.length), text: `${memory.inbound.length} in` }),
+        node('span', { class: ui.pruneFact(memory.status !== 'indexed'), text: memory.status }),
       ]),
     ]);
     box.addEventListener('change', () => {
       if (box.checked) selected.add(memory.file); else selected.delete(memory.file);
-      row.classList.toggle('on', box.checked);
+      row.className = ui.pruneRow(box.checked);
       updateBar();
     });
     rows.push({ box, memory });
@@ -1052,7 +1035,6 @@ function renderPrune(container) {
     count.textContent = selected.size ? `${selected.size} selected` : '';
     deleteButton.textContent = `Delete ${selected.size || ''}`.trim();
     deleteButton.disabled = selected.size === 0;
-    deleteButton.style.opacity = selected.size ? '1' : '.45';
   }
   clearButton.onclick = () => {
     selected.clear();
@@ -1061,39 +1043,37 @@ function renderPrune(container) {
   deleteButton.onclick = () => openBulkDeleteDialog([...selected]);
   updateBar();
 
-  // --- long hooks ---
   const { longHooks } = project.stats.index;
   if (longHooks.length) {
-    container.append(node('div', { class: 'section-label', text: `Long index hooks · ${longHooks.length}` }));
-    container.append(node('p', { class: 'muted', style: 'margin:0 0 10px;font-size:12.5px', text: 'The hook is the text after the dash in MEMORY.md. It is loaded every session, so a 400-character hook costs more than the memory it points at. Shortening these is the cheapest win.' }));
+    container.append(node('div', { class: ui.sectionLabel, text: `Long index hooks · ${longHooks.length}` }));
+    container.append(node('p', { class: ui.noteTight, text: 'The hook is the text after the dash in MEMORY.md. It is loaded every session, so a 400-character hook costs more than the memory it points at. Shortening these is the cheapest win.' }));
     for (const hook of longHooks.slice(0, 12)) {
-      container.append(node('div', { class: 'issue' }, [
-        node('div', { class: 'issue-body' }, [
-          node('div', { class: 'issue-title', text: `${hook.hookLength} chars: ${hook.title}` }),
-          node('div', { class: 'issue-detail', text: `MEMORY.md line ${hook.index + 1} · ${hook.file}` }),
+      container.append(node('div', { class: ui.issue(false) }, [
+        node('div', { class: ui.issueBody }, [
+          node('div', { class: ui.issueTitle, text: `${hook.hookLength} chars: ${hook.title}` }),
+          node('div', { class: ui.issueDetail, text: `MEMORY.md line ${hook.index + 1} · ${hook.file}` }),
         ]),
-        node('button', { class: 'btn small', text: 'Open', onclick: () => selectMemory(hook.file) }),
+        node('button', { class: ui.buttonSmall, text: 'Open', onclick: () => selectMemory(hook.file) }),
       ]));
     }
   }
 
-  // --- possible overlap ---
   if (project.duplicates.length) {
-    container.append(node('div', { class: 'section-label', text: `Possible overlap · ${project.duplicates.length}` }));
-    container.append(node('p', { class: 'muted', style: 'margin:0 0 10px;font-size:12.5px', text: 'Ranked by how much rare vocabulary these pairs share. This is a hint, not a verdict - open both and decide whether one covers the other.' }));
+    container.append(node('div', { class: ui.sectionLabel, text: `Possible overlap · ${project.duplicates.length}` }));
+    container.append(node('p', { class: ui.noteTight, text: 'Ranked by how much rare vocabulary these pairs share. This is a hint, not a verdict - open both and decide whether one covers the other.' }));
     for (const pair of project.duplicates) {
-      container.append(node('div', { class: 'dupe' }, [
-        node('div', { class: 'dupe-head' }, [
-          node('span', { class: 'dupe-score', text: `${pair.score}%` }),
+      container.append(node('div', { class: ui.dupe }, [
+        node('div', { class: ui.dupeHead }, [
+          node('span', { class: ui.dupeScore, text: `${pair.score}%` }),
           node('span', { text: `shared: ${pair.shared.join(', ')}` }),
         ]),
-        node('div', { class: 'dupe-pair' }, [
+        node('div', { class: ui.dupePair }, [
           ...[pair.a, pair.b].map((side) => node('div', {
-            class: 'dupe-side',
+            class: ui.dupeSide,
             onclick: () => selectMemory(side.file),
           }, [
-            node('div', { class: 'n', text: side.name }),
-            node('div', { class: 'd', text: side.description || side.file }),
+            node('div', { class: ui.dupeSideName, text: side.name }),
+            node('div', { class: ui.dupeSideDesc, text: side.description || side.file }),
           ])),
         ]),
       ]));
@@ -1105,14 +1085,13 @@ async function openBulkDeleteDialog(files) {
   if (!files.length) return;
   const memories = files.map((file) => state.store.memories.find((m) => m.file === file)).filter(Boolean);
 
-  const body = node('div', { class: 'modal-body' });
-  const removals = node('div', { class: 'will' }, [node('div', { class: 'will-title', text: `${memories.length} memories will be trashed` })]);
+  const body = node('div', { class: ui.modalBody });
+  const removals = node('div', { class: ui.willBlock }, [node('div', { class: ui.willTitle, text: `${memories.length} memories will be trashed` })]);
   for (const memory of memories) {
-    removals.append(node('div', { class: 'will-item remove', text: `${memory.file}${memory.entry ? `  ·  MEMORY.md line ${memory.entry.index + 1}` : '  ·  not in the index'}` }));
+    removals.append(node('div', { class: ui.willItem('remove'), text: `${memory.file}${memory.entry ? `  ·  MEMORY.md line ${memory.entry.index + 1}` : '  ·  not in the index'}` }));
   }
   body.append(removals);
 
-  // Links from memories that are NOT being deleted are the ones that break.
   const doomed = new Set(files);
   const breaking = [];
   for (const memory of memories) {
@@ -1121,20 +1100,20 @@ async function openBulkDeleteDialog(files) {
     }
   }
   if (breaking.length) {
-    const block = node('div', { class: 'will' }, [node('div', { class: 'will-title', text: `${breaking.length} link(s) from memories you are keeping will break` })]);
-    for (const link of breaking) block.append(node('div', { class: 'will-item keep', text: `${link.from}  →  [[${link.target}]]` }));
+    const block = node('div', { class: ui.willBlock }, [node('div', { class: ui.willTitle, text: `${breaking.length} link(s) from memories you are keeping will break` })]);
+    for (const link of breaking) block.append(node('div', { class: ui.willItem('keep'), text: `${link.from}  →  [[${link.target}]]` }));
     body.append(block);
   }
 
-  body.append(node('p', { class: 'muted', style: 'margin:0;font-size:12.5px', text: 'All of them go to memory/.trash/ as one restore point.' }));
+  body.append(node('p', { class: ui.noteTight, text: 'All of them go to memory/.trash/ as one restore point.' }));
 
-  const modal = node('div', { class: 'modal' }, [
-    node('header', {}, [node('h3', { text: `Delete ${memories.length} memories?` })]),
+  const modal = node('div', { class: ui.modal }, [
+    node('header', { class: ui.modalHead }, [node('h3', { class: ui.modalTitle, text: `Delete ${memories.length} memories?` })]),
     body,
-    node('footer', {}, [
-      node('button', { class: 'btn', text: 'Cancel', onclick: closeModal }),
+    node('footer', { class: ui.modalFoot }, [
+      node('button', { class: ui.button(), text: 'Cancel', onclick: closeModal }),
       node('button', {
-        class: 'btn danger',
+        class: ui.button({ tone: 'danger' }),
         text: `Delete ${memories.length}`,
         onclick: async () => {
           closeModal();
@@ -1156,12 +1135,10 @@ async function openBulkDeleteDialog(files) {
       }),
     ]),
   ]);
-  const backdrop = node('div', { class: 'modal-backdrop', onclick: (event) => { if (event.target === backdrop) closeModal(); } }, [modal]);
+  const backdrop = node('div', { class: ui.modalBackdrop, onclick: (event) => { if (event.target === backdrop) closeModal(); } }, [modal]);
   el('modal-root').append(backdrop);
 }
 
-/* -------------------------------------------------------------- search */
-
 let searchTimer = null;
 
 function scheduleSearch(value) {
@@ -1195,44 +1172,44 @@ function renderSearch() {
     : `No results for "${state.query.trim()}"`;
 
   if (!data.total && !data.stores.length) {
-    host.append(node('p', { class: 'muted', text: 'Nothing matched. Every word has to appear somewhere in a memory, so try fewer words.' }));
+    host.append(node('p', { class: ui.note, text: 'Nothing matched. Every word has to appear somewhere in a memory, so try fewer words.' }));
     return;
   }
 
   for (const group of data.stores) {
-    const block = node('div', { class: 'result-group' });
-    block.append(node('div', { class: 'section-label', text: group.sublabel
+    const block = node('div', { class: ui.resultGroup });
+    block.append(node('div', { class: ui.sectionLabel, text: group.sublabel
       ? `${group.label} · ${group.sublabel} · ${group.results.length}`
       : `${group.label} · ${group.results.length}` }));
 
     for (const result of group.results) {
       const button = node('button', {
-        class: 'result',
+        class: ui.result,
         onclick: () => openFromSearch(group.id, result.file),
       });
-      const top = node('div', { class: 'result-top' });
-      const name = node('span', { class: 'result-name' });
+      const top = node('div', { class: ui.resultTop });
+      const name = node('span', { class: ui.resultName });
       name.append(highlight(result.name, data.terms));
-      top.append(name, node('span', { class: `badge type-${result.type}`, text: result.type }));
-      if (result.status !== 'indexed') top.append(node('span', { class: `badge status-${result.status}`, text: result.status }));
+      top.append(name, node('span', { class: ui.typeBadge(result.type), text: result.type }));
+      if (result.status !== 'indexed') top.append(node('span', { class: ui.badge('warn'), text: result.status }));
       button.append(top);
 
       if (result.snippet) {
-        const snippet = node('div', { class: 'result-snippet' });
+        const snippet = node('div', { class: ui.resultSnippet });
         snippet.append(highlight(result.snippet.text, data.terms));
         button.append(snippet);
       }
-      button.append(node('div', { class: 'result-where', text: `${result.file} · matched in ${result.fields.join(', ')}` }));
+      button.append(node('div', { class: ui.resultWhere, text: `${result.file} · matched in ${result.fields.join(', ')}` }));
       block.append(button);
     }
 
     for (const hit of group.indexHits) {
       const button = node('button', {
-        class: 'result',
+        class: ui.result,
         onclick: () => openFromSearch(group.id, hit.file, 'index'),
       });
-      button.append(node('div', { class: 'result-where', text: `MEMORY.md line ${hit.index + 1}` }));
-      const line = node('div', { class: 'result-snippet' });
+      button.append(node('div', { class: ui.resultWhere, text: `MEMORY.md line ${hit.index + 1}` }));
+      const line = node('div', { class: ui.resultSnippet });
       line.append(highlight(hit.text.trim(), data.terms));
       button.append(line);
       block.append(button);
@@ -1265,8 +1242,6 @@ function renderView() {
   if (searching) renderSearch();
 }
 
-/* ------------------------------------------------------------ rendering */
-
 function renderTab() {
   const container = el('tab-content');
   container.textContent = '';
@@ -1277,7 +1252,7 @@ function renderTab() {
   else if (state.tab === 'health') renderHealth(container);
   else if (state.tab === 'trash') renderTrash(container);
   else if (state.tab === 'graph') {
-    const wrap = node('div', { id: 'graph-wrap' });
+    const wrap = node('div', { id: 'graph-wrap', class: ui.graphWrap });
     container.append(wrap);
     renderGraph(wrap, state.store.graph, {
       selected: state.selected,
@@ -1301,10 +1276,9 @@ function selectMemory(file) {
   } else {
     renderTab();
   }
-  document.querySelector('.mem.active')?.scrollIntoView({ block: 'nearest' });
+  document.querySelector('[data-memory][data-active]')?.scrollIntoView({ block: 'nearest' });
 }
 
-/** Re-read the store list, e.g. after a path is remembered or forgotten. */
 async function reloadStores() {
   const data = await api('/api/stores');
   state.stores = data.stores;
@@ -1312,7 +1286,6 @@ async function reloadStores() {
   return data;
 }
 
-/** The name and provenance line above the tabs, which differs by store kind. */
 function renderStoreHeader() {
   const store = state.store;
   el('project-title').textContent = store.label;
@@ -1324,11 +1297,9 @@ function renderStoreHeader() {
     const scope = store.kind === 'agent-user' ? 'user'
       : store.kind === 'agent-project' ? 'project' : 'local';
     sub.append(node('span', { text: store.dir }));
-    sub.append(node('span', { class: 'sub-note', text: `subagent memory, ${scope} scope` }));
-    // A project-scoped store is committed, so deleting from it edits the repo
-    // rather than a private cache. Worth saying before, not after.
+    sub.append(node('span', { class: ui.subNote, text: `subagent memory, ${scope} scope` }));
     if (store.kind === 'agent-project') {
-      sub.append(node('span', { class: 'sub-warn', text: 'checked into the repository - changes here show up in git status' }));
+      sub.append(node('span', { class: ui.subWarn, text: 'checked into the repository - changes here show up in git status' }));
     }
     return;
   }
@@ -1337,24 +1308,22 @@ function renderStoreHeader() {
     ? `${store.path}  (real path unresolved)`
     : store.path }));
 
-  // One store serves every worktree and subdirectory of a repository, which is
-  // not obvious from a single path and changes what a memory here applies to.
   const others = (store.workingDirs || []).filter((d) => d !== store.path);
   if (others.length) {
-    sub.append(node('span', { class: 'sub-note', text: `also used from ${others.join(', ')}` }));
+    sub.append(node('span', { class: ui.subNote, text: `also used from ${others.join(', ')}` }));
   }
   if (store.resolvedBy === 'unresolved') {
-    sub.append(node('button', { class: 'btn small link-btn', text: 'Remember path\u2026', onclick: openRememberPathDialog }));
+    sub.append(node('button', { class: ui.linkButton, text: 'Remember path\u2026', onclick: openRememberPathDialog }));
   } else if (store.resolvedBy === 'remembered') {
-    sub.append(node('span', { class: 'sub-note' }, [
+    sub.append(node('span', { class: ui.subNote }, [
       document.createTextNode('path remembered, not recovered from a transcript  '),
-      node('button', { class: 'btn small link-btn', text: 'Forget', onclick: forgetProjectPath }),
+      node('button', { class: ui.linkButton, text: 'Forget', onclick: forgetProjectPath }),
     ]));
   }
 
   const auto = store.autoMemory;
   if (auto && auto.known && !auto.enabled) {
-    sub.append(node('span', { class: 'sub-warn', text: auto.scope === 'env'
+    sub.append(node('span', { class: ui.subWarn, text: auto.scope === 'env'
       ? 'auto memory is off (CLAUDE_CODE_DISABLE_AUTO_MEMORY) - this store will not grow'
       : `auto memory is off (${auto.setBy}) - this store will not grow` }));
   }
@@ -1381,7 +1350,6 @@ async function openStore(id, { keepTab = false } = {}) {
 
   renderStoreHeader();
 
-  // Refresh the sidebar count in case a delete changed it.
   const listed = state.stores.find((store) => store.id === id);
   if (listed) listed.memoryCount = state.store.memories.length;
   renderStores();
@@ -1392,7 +1360,8 @@ async function openStore(id, { keepTab = false } = {}) {
 }
 
 function applyCollapsed() {
-  el('app').classList.toggle('collapsed', state.collapsed);
+  el('app').className = state.collapsed ? ui.shellCollapsed : ui.shell;
+  el('sidebar').className = state.collapsed ? ui.sidebarHidden : ui.sidebar;
   el('expand').hidden = !state.collapsed;
   localStorage.setItem('sidebarCollapsed', state.collapsed ? '1' : '0');
 }
@@ -1400,12 +1369,17 @@ function applyCollapsed() {
 function setCollapsed(value) {
   state.collapsed = value;
   applyCollapsed();
-  // The graph sizes itself to the container, so it has to be redrawn once the
-  // pane has actually changed width.
   if (state.tab === 'graph' && state.store) requestAnimationFrame(renderTab);
 }
 
+function applyStyles() {
+  for (const element of document.querySelectorAll('[data-ui]')) {
+    element.className = ui[element.dataset.ui] ?? '';
+  }
+}
+
 async function init() {
+  applyStyles();
   el('show-all').addEventListener('change', (event) => {
     state.showAll = event.target.checked;
     renderStores();
@@ -1440,7 +1414,7 @@ async function init() {
       el('root-path').title = data.rootFile
         ? `autoMemoryDirectory set in ${data.rootFile}`
         : 'store chosen with --root';
-      el('root-path').append(node('span', { class: 'root-source', text: data.rootSource }));
+      el('root-path').append(node('span', { class: ui.rootSource, text: data.rootSource }));
     }
     if (data.rootWarning) toast(data.rootWarning, { error: true });
     const first = state.stores.find((store) => store.memoryCount > 0);