claude-memory-admin 1.5.2 → 1.6.0

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/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/worklist.mjs

@@ -0,0 +1,33 @@
+const COST_KINDS = new Set(['long-hook', 'hook-repeats-description', 'empty-section', 'index-continuation']);
+
+function rankOf(kind, severity) {
+  if (kind === 'past-cutoff') return 0;
+  if (severity === 'bad') return 1;
+  if (COST_KINDS.has(kind)) return 2;
+  if (kind === 'overlap') return 4;
+  return 3;
+}
+
+export function buildWorklist(store) {
+  if (!store || !store.stats) return [];
+  const items = [];
+  const { index } = store.stats;
+
+  for (const entry of index.cutoff?.droppedEntries ?? []) {
+    items.push({ kind: 'past-cutoff', severity: 'bad', entry });
+  }
+  for (const hook of index.longHooks) {
+    items.push({ kind: 'long-hook', severity: 'warn', hook });
+  }
+  for (const item of store.health.issues) {
+    if (item.kind === 'long-hooks') continue;
+    items.push(item);
+  }
+  for (const pair of store.duplicates) {
+    items.push({ kind: 'overlap', severity: 'warn', pair });
+  }
+
+  return items
+    .map((item) => ({ ...item, rank: rankOf(item.kind, item.severity) }))
+    .sort((a, b) => a.rank - b.rank);
+}

package/public/views/health.mjs

@@ -1,21 +0,0 @@
-import * as ui from '/ui.mjs';
-import { node } from '/dom.mjs';
-import { state } from '/state.mjs';
-import { renderIssue } from '/views/issue.mjs';
-import { renderPathCheck } from '/views/path-check.mjs';
-
-export function renderHealth(container) {
-  const { health, memories } = state.store;
-
-  if (!health.issues.length) {
-    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.' }),
-    ]));
-  } else {
-    for (const item of health.issues) container.append(renderIssue(item, memories));
-  }
-
-  container.append(node('div', { class: ui.sectionLabel, text: 'Beyond the memory directory' }));
-  renderPathCheck(container);
-}

package/public/views/prune.mjs

@@ -1,191 +0,0 @@
-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';
-import { openMergeDialog } from '/dialogs/merge.mjs';
-import { openMoveDialog } from '/dialogs/move.mjs';
-import { openHookEditor } from '/dialogs/hook-editor.mjs';
-
-const PRUNE_SORTS = {
-  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 renderBudget(container) {
-  const { index } = state.store.stats;
-  const percent = Math.min(100, index.worstPercent);
-  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.'
-    : index.level === 'near'
-      ? 'Approaching the limit. Once MEMORY.md passes it, everything after the cutoff stops being loaded at all.'
-      : 'Comfortably inside the limit. MEMORY.md is loaded at the start of every session.';
-
-  if (index.cutoff) {
-    const dropped = index.cutoff.droppedEntries;
-    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: 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: 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: ui.buttonSmall, text: 'Open', onclick: () => selectMemory(entry.file) }),
-        node('button', { class: ui.buttonPrimarySmall, text: 'Move up', onclick: () => openMoveDialog(entry) }),
-      ]));
-    }
-    if (dropped.length > 20) {
-      box.append(node('p', { class: ui.note, text: `${dropped.length - 20} more not listed.` }));
-    }
-    container.append(box);
-  }
-
-  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: ui.meterBar }, [
-      node('div', { class: ui.meterFill(level), style: `width:${percent.toFixed(1)}%` }),
-    ]),
-    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: 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.' }),
-  ]));
-}
-
-export function renderPrune(container) {
-  const project = state.store;
-  renderBudget(container);
-
-  if (!project.memories.length) {
-    container.append(node('p', { class: ui.note, text: 'Nothing to prune - this project has no memories.' }));
-    return;
-  }
-
-  const selected = state.pruneSelection;
-  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; paint('tab'); };
-
-  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: 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', class: ui.checkbox });
-    box.checked = selected.has(memory.file);
-    const row = node('label', { class: ui.pruneRow(box.checked) }, [
-      box,
-      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: 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: 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.className = ui.pruneRow(box.checked);
-      updateBar();
-    });
-    rows.push({ box, memory });
-    list.append(row);
-  }
-  container.append(list);
-
-  function updateBar() {
-    count.textContent = selected.size ? `${selected.size} selected` : '';
-    deleteButton.textContent = `Delete ${selected.size || ''}`.trim();
-    deleteButton.disabled = selected.size === 0;
-  }
-  clearButton.onclick = () => {
-    selected.clear();
-    paint('tab');
-  };
-  deleteButton.onclick = () => openBulkDeleteDialog([...selected]);
-  updateBar();
-
-  const { longHooks } = project.stats.index;
-  if (longHooks.length) {
-    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)) {
-      const row = node('div', { class: ui.issue(false) });
-      const editButton = node('button', { class: ui.buttonPrimarySmall, text: 'Edit hook' });
-      row.append(
-        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: ui.buttonSmall, text: 'Open', onclick: () => selectMemory(hook.file) }),
-        editButton,
-      );
-      editButton.onclick = () => openHookEditor(row, hook.index);
-      container.append(row);
-    }
-  }
-
-  if (project.duplicates.length) {
-    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: 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: ui.dupePair }, [
-          ...[pair.a, pair.b].map((side) => node('div', {
-            class: ui.dupeSide,
-            onclick: () => selectMemory(side.file),
-          }, [
-            node('div', { class: ui.dupeSideName, text: side.name }),
-            node('div', { class: ui.dupeSideDesc, text: side.description || side.file }),
-          ])),
-        ]),
-        node('div', { class: ui.dupeActions }, [
-          node('button', {
-            class: ui.buttonSmall,
-            text: `Merge into ${pair.a.name}`,
-            onclick: () => openMergeDialog(pair.a.file, pair.b.file),
-          }),
-          node('button', {
-            class: ui.buttonSmall,
-            text: `Merge into ${pair.b.name}`,
-            onclick: () => openMergeDialog(pair.b.file, pair.a.file),
-          }),
-        ]),
-      ]));
-    }
-  }
-}

package/public/views/trash.mjs

@@ -1,37 +0,0 @@
-import * as ui from '/ui.mjs';
-import { node } from '/dom.mjs';
-import { state } from '/state.mjs';
-import { restoreFromTrash } from '/store.mjs';
-
-const INDEX_EDIT_LABELS = {
-  hook: 'MEMORY.md hook shortened',
-  move: 'MEMORY.md entry moved',
-  add: 'MEMORY.md entry added',
-};
-
-export function renderTrash(container) {
-  const trash = state.store.trash;
-  if (!trash.length) {
-    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) {
-    const when = String(record.deletedAt).replace('T', ' ').replace(/\..*$/, '');
-    const detail = record.kind === 'wikilink'
-      ? `unlinked in ${record.sourceFile} · ${when}`
-      : record.kind === 'index-edit'
-        ? `${INDEX_EDIT_LABELS[record.op] || 'MEMORY.md edited'} · ${when}`
-        : record.kind === 'merge'
-          ? `merged into ${record.into} · ${when} · ${record.backups?.length || 0} file(s) rewritten`
-          : `${record.files.length} file(s)${record.indexTrashedFile ? ' + MEMORY.md' : ''} · ${when} · ${record.removedLines?.length || 0} index line(s) removed`;
-    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: ui.buttonPrimarySmall, text: 'Restore', onclick: () => restoreFromTrash(record.id) })
-        : null,
-    ]));
-  }
-}