claude-memory-admin 1.5.2 → 1.6.0

package/public/ui.mjs

@@ -100,7 +100,7 @@ export const sectionLabel = 'mt-5 mb-2 font-mono text-2xs font-semibold uppercas
 export const note = 'text-xs text-fg-muted';
 export const noteTight = 'mt-0 mb-2.5 text-xs text-fg-muted';
 
-const memoryItemBase = 'mb-1.5 block w-full cursor-pointer rounded-md border bg-surface px-3 py-2.5 text-left transition-colors';
+const memoryItemBase = 'block min-w-0 flex-1 cursor-pointer rounded-md border bg-surface px-3 py-2.5 text-left transition-colors';
 const memoryItemState = {
   active: 'border-accent bg-accent-surface',
   idle: 'border-line hover:border-accent-line',
@@ -109,6 +109,9 @@ export const memoryItem = (active) => cx(memoryItemBase, active ? memoryItemStat
 export const memoryTop = 'mb-1 flex items-center gap-2';
 export const memoryName = 'flex-1 truncate text-sm font-medium text-fg';
 export const memoryDesc = 'line-clamp-2 text-xs text-fg-muted';
+export const memoryFacts = 'mt-1.5 flex flex-wrap gap-3 font-mono text-2xs text-fg-muted';
+export const memoryFact = (warn) => (warn ? 'text-warn' : 'text-fg-muted');
+export const listItemRow = 'mb-1.5 flex items-start gap-2';
 
 export const card = 'rounded-lg border border-line bg-surface p-5 shadow-card';
 export const detailHead = 'mb-1 flex items-start gap-3';
@@ -243,9 +246,6 @@ export const issueBody = 'min-w-0 flex-1';
 export const issueTitle = 'text-sm font-medium text-fg';
 export const issueDetail = 'font-mono text-2xs break-words text-fg-muted';
 
-export const cutSummary = 'mb-4 rounded-lg border border-danger-line bg-danger-surface px-4 py-3.5';
-export const cutSummaryHead = 'mb-1 text-sm font-semibold text-danger';
-
 export const meter = 'mb-5 rounded-lg border border-line bg-surface px-5 py-4';
 export const meterTop = 'mb-2.5 flex items-baseline gap-2.5';
 export const meterValue = 'font-mono text-2xl font-semibold tracking-tightest text-fg';
@@ -257,19 +257,11 @@ export const meterNote = 'mt-2.5 text-xs text-fg-muted';
 export const meterFacts = 'mt-3 flex flex-wrap gap-4 border-t border-line pt-3 font-mono text-2xs text-fg-muted';
 export const meterFactValue = 'font-semibold text-fg';
 
-export const pruneBar = 'mb-2.5 flex flex-wrap items-center gap-2.5';
-export const pruneSpacer = 'flex-1';
+export const listBar = 'mb-2.5 flex flex-wrap items-center gap-2.5';
+export const listSpacer = 'flex-1';
+export const segmentBar = 'mb-5 flex flex-wrap items-center gap-3';
 export const select = cx('cursor-pointer rounded-md border border-line bg-surface font-mono text-xs text-fg hover:border-line-strong focus:outline-none', controlPad.sm);
 
-const pruneRowBase = 'mb-1 flex cursor-pointer items-center gap-2.5 rounded-md border px-3 py-2 transition-colors';
-const pruneRowState = { on: 'border-danger-line bg-danger-surface', off: 'border-line bg-surface hover:border-accent-line' };
-export const pruneRow = (on) => cx(pruneRowBase, on ? pruneRowState.on : pruneRowState.off);
-export const pruneMain = 'min-w-0 flex-1';
-export const pruneName = 'block text-sm font-medium text-fg';
-export const pruneDesc = 'block truncate text-xs text-fg-muted';
-export const pruneFacts = 'flex flex-none gap-3 font-mono text-2xs text-fg-muted';
-export const pruneFact = (warn) => (warn ? 'text-warn' : 'text-fg-muted');
-
 export const dupe = 'mb-2 rounded-lg border border-line bg-surface px-3.5 py-3';
 export const dupeHead = 'mb-2 flex items-baseline gap-2 font-mono text-2xs text-fg-muted';
 export const dupeScore = 'font-semibold text-warn';
@@ -319,7 +311,7 @@ export const cascadeDetail = 'block font-mono text-2xs break-words text-fg-muted
 
 export const pathInput = cx('my-1 mb-3 w-full rounded-md border border-line bg-surface-sunken font-mono text-xs text-fg focus:border-accent focus:outline-none', controlPad.lg);
 export const textArea = cx('my-1 mb-1.5 block min-h-20 w-full resize-y rounded-md border border-line bg-surface-sunken font-mono text-xs leading-relaxed text-fg focus:border-accent focus:outline-none', controlPad.lg);
-export const hookEditor = 'mb-1.5 rounded-md border border-accent-line bg-surface-sunken px-3 py-2.5';
+export const hookEditor = 'mb-1.5 w-full rounded-md border border-accent-line bg-surface-sunken px-3 py-2.5';
 export const hookEditorFoot = 'flex justify-end gap-2';
 export const charCount = 'mb-3 flex items-baseline justify-between gap-3 font-mono text-2xs text-fg-subtle';
 export const charCountOver = 'mb-3 flex items-baseline justify-between gap-3 font-mono text-2xs text-warn';

package/public/views/cleanup.mjs

@@ -0,0 +1,63 @@
+import * as ui from '/ui.mjs';
+import { node } from '/dom.mjs';
+import { state } from '/state.mjs';
+import { buildWorklist } from '/views/worklist.mjs';
+import { renderCostIssue, COST_KINDS } from '/views/cost-issue.mjs';
+import { renderIssue } from '/views/issue.mjs';
+import { renderPathCheck } from '/views/path-check.mjs';
+
+const SHOWN = 40;
+
+function renderMeter(container) {
+  const { index } = state.store.stats;
+  const percent = Math.min(100, index.worstPercent);
+
+  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.';
+
+  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(index.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 renderCleanup(container) {
+  const { memories } = state.store;
+  renderMeter(container);
+
+  const items = buildWorklist(state.store);
+  if (!items.length) {
+    container.append(node('div', { class: ui.card }, [
+      node('p', { class: ui.okLine, text: '✓ Nothing to fix.' }),
+      node('p', { class: ui.noteTight, text: 'MEMORY.md is inside its load limit, every memory file is referenced by it, every pointer resolves, and every [[wikilink]] finds its target.' }),
+    ]));
+  } else {
+    container.append(node('div', { class: ui.sectionLabel, text: `Worst first · ${items.length}` }));
+    for (const item of items.slice(0, SHOWN)) {
+      const row = COST_KINDS.has(item.kind) ? renderCostIssue(item) : renderIssue(item, memories);
+      if (row) container.append(row);
+    }
+    if (items.length > SHOWN) {
+      container.append(node('p', { class: ui.note, text: `${items.length - SHOWN} more not listed. Fix some of the above and they move up.` }));
+    }
+  }
+
+  container.append(node('div', { class: ui.sectionLabel, text: 'Beyond the memory directory' }));
+  renderPathCheck(container);
+}

package/public/views/context.mjs

@@ -3,6 +3,7 @@ import { node } from '/dom.mjs';
 import { renderMarkdown } from '/markdown.mjs';
 import { api } from '/api.mjs';
 import { state } from '/state.mjs';
+import { isAt } from '/parts.mjs';
 
 const SCOPE_ORDER = ['managed', 'user', 'project', 'local'];
 
@@ -30,7 +31,7 @@ export async function renderContext(container) {
       container.textContent = '';
       return container.append(node('p', { class: ui.note, text: err.message }));
     }
-    if (state.tab !== 'context') return;
+    if (!isAt('environment', 'instructions')) return;
   }
   container.textContent = '';
 

package/public/views/cost-issue.mjs

@@ -0,0 +1,70 @@
+import * as ui from '/ui.mjs';
+import { node } from '/dom.mjs';
+import { issue } from '/parts.mjs';
+import { selectMemory } from '/store.mjs';
+import { openMergeDialog } from '/dialogs/merge.mjs';
+import { openMoveDialog } from '/dialogs/move.mjs';
+import { openHookEditor } from '/dialogs/hook-editor.mjs';
+
+export function renderCostIssue(item) {
+  if (item.kind === 'past-cutoff') {
+    const { entry } = item;
+    return issue(
+      `Past the cutoff, not loaded: ${entry.title || entry.file}`,
+      `MEMORY.md line ${entry.index + 1} · ${entry.file} - the file is on disk, but Claude never sees this entry.`,
+      {
+        bad: true,
+        secondary: { label: 'Open', run: () => selectMemory(entry.file) },
+        action: { label: 'Move up', run: () => openMoveDialog(entry) },
+      },
+    );
+  }
+
+  if (item.kind === 'long-hook') {
+    const { hook } = item;
+    const row = issue(
+      `${hook.hookLength}-character hook: ${hook.title}`,
+      `MEMORY.md line ${hook.index + 1} · ${hook.file} - the hook loads every session, so shortening it is the cheapest win available.`,
+      { secondary: { label: 'Open', run: () => selectMemory(hook.file) } },
+    );
+    row.append(node('button', {
+      class: ui.buttonPrimarySmall,
+      text: 'Edit hook',
+      onclick: () => openHookEditor(row, hook.index),
+    }));
+    return row;
+  }
+
+  if (item.kind === 'overlap') {
+    const { pair } = item;
+    return 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),
+        }),
+      ]),
+    ]);
+  }
+
+  return null;
+}
+
+export const COST_KINDS = new Set(['past-cutoff', 'long-hook', 'overlap']);

package/public/views/environment.mjs

@@ -0,0 +1,12 @@
+import { renderSegmented } from '/views/segments.mjs';
+import { renderContext } from '/views/context.mjs';
+import { renderSettings } from '/views/settings.mjs';
+import { renderSessions } from '/views/sessions.mjs';
+
+export function renderEnvironment(container) {
+  return renderSegmented(container, 'environment', {
+    instructions: renderContext,
+    settings: renderSettings,
+    sessions: renderSessions,
+  });
+}

package/public/views/header.mjs

@@ -2,62 +2,119 @@ import * as ui from '/ui.mjs';
 import { el, node } from '/dom.mjs';
 import { state, worstSeverity } from '/state.mjs';
 import { paint } from '/bus.mjs';
+import { buildWorklist } from '/views/worklist.mjs';
 import { openRememberPathDialog, forgetProjectPath } from '/dialogs/remember-path.mjs';
 
-const TABS = [
-  { id: 'memories', label: 'Memories' },
-  { id: 'index', label: 'MEMORY.md' },
-  { id: 'graph', label: 'Graph' },
-  { id: 'prune', label: 'Prune' },
-  { id: 'context', label: 'Context' },
-  { id: 'sessions', label: 'Sessions' },
-  { id: 'health', label: 'Health' },
-  { id: 'settings', label: 'Settings' },
-  { id: 'trash', label: 'Trash' },
+const NAVIGATION = [
+  {
+    id: 'memory',
+    label: 'Memory',
+    segments: [
+      { id: 'list', label: 'List' },
+      { id: 'index', label: 'MEMORY.md' },
+      { id: 'graph', label: 'Graph' },
+    ],
+  },
+  { id: 'cleanup', label: 'Cleanup', segments: [] },
+  {
+    id: 'environment',
+    label: 'Environment',
+    segments: [
+      { id: 'instructions', label: 'Instructions' },
+      { id: 'settings', label: 'Settings' },
+      { id: 'sessions', label: 'Sessions' },
+    ],
+  },
 ];
 
+const hasProjectDir = (store) => (store.kind === 'auto'
+  ? store.resolvedBy !== 'unresolved'
+  : Boolean(store.projectPath));
+
+function segmentVisible(tab, segment, store) {
+  const global = store.kind === 'global';
+  if (tab === 'memory') {
+    if (global) return false;
+    return segment === 'index' ? Boolean(store.hasIndex) : true;
+  }
+  if (segment === 'instructions') return global || hasProjectDir(store);
+  if (global) return false;
+  if (segment === 'sessions') return Boolean(store.sessions?.count);
+  return true;
+}
+
+function segmentBadge(id) {
+  if (id === 'instructions') {
+    const problems = state.aux.instructions?.problems || [];
+    return problems.length ? { badge: String(problems.length), tone: worstSeverity(problems) } : {};
+  }
+  if (id === 'settings') {
+    const problems = state.aux.settings?.problems || [];
+    return problems.length ? { badge: String(problems.length), tone: worstSeverity(problems) } : {};
+  }
+  if (id === 'sessions') {
+    const sessions = state.store.sessions;
+    return sessions ? { badge: String(sessions.count), tone: sessions.expiringCount ? 'warn' : 'neutral' } : {};
+  }
+  return {};
+}
+
+export function segmentsFor(tab) {
+  const entry = NAVIGATION.find((item) => item.id === tab);
+  if (!entry || !state.store) return [];
+  return entry.segments
+    .filter((segment) => segmentVisible(tab, segment.id, state.store))
+    .map((segment) => ({ ...segment, ...segmentBadge(segment.id) }));
+}
+
+function tabVisible(tab, store) {
+  if (tab === 'cleanup') return store.kind !== 'global';
+  return segmentsFor(tab).length > 0;
+}
+
+function tabBadge(tab, store) {
+  if (tab === 'memory') return { badge: String(store.memories.length), tone: 'neutral' };
+
+  if (tab === 'cleanup') {
+    const count = buildWorklist(store).length;
+    if (!count) return {};
+    const level = store.stats ? store.stats.index.level : 'ok';
+    const bad = level === 'over' || store.health.severity === 'bad';
+    return { badge: String(count), tone: bad ? 'bad' : 'warn' };
+  }
+
+  const problems = [
+    ...(state.aux.instructions?.problems || []),
+    ...(state.aux.settings?.problems || []),
+  ];
+  return problems.length ? { badge: String(problems.length), tone: worstSeverity(problems) } : {};
+}
+
+function undoControl() {
+  const count = state.store.trash?.length || 0;
+  const button = el('undo');
+  button.hidden = state.store.kind === 'global' || !count;
+  button.textContent = '';
+  button.append(
+    document.createTextNode('\u21ba Undo'),
+    node('span', { class: ui.tabBadge('neutral'), text: String(count) }),
+  );
+}
+
 export function renderTabs() {
   const container = el('tabs');
   container.textContent = '';
-  const global = state.store.kind === 'global';
-  const hasProjectDir = state.store.kind === 'auto'
-    ? state.store.resolvedBy !== 'unresolved'
-    : Boolean(state.store.projectPath);
-
-  for (const tab of TABS) {
-    if (global && tab.id !== 'context') continue;
-    if (!global && tab.id === 'context' && !hasProjectDir) continue;
-    if (tab.id === 'sessions' && !state.store.sessions?.count) continue;
-    let badge = null;
-    let tone = 'neutral';
-    if (tab.id === 'memories') badge = String(state.store.memories.length);
-    if (tab.id === 'trash' && state.store.trash.length) badge = String(state.store.trash.length);
-    if (tab.id === 'health' && state.store.health.issueCount) {
-      badge = String(state.store.health.issueCount);
-      tone = state.store.health.severity;
-    }
-    if (tab.id === 'prune' && state.store.stats.index.level !== 'ok') {
-      badge = '!';
-      tone = state.store.stats.index.level === 'over' ? 'bad' : 'warn';
-    }
-    if (tab.id === 'sessions' && state.store.sessions) {
-      badge = String(state.store.sessions.count);
-      if (state.store.sessions.expiringCount) tone = 'warn';
-    }
-    if (tab.id === 'context' && state.aux.instructions?.problems.length) {
-      badge = String(state.aux.instructions.problems.length);
-      tone = worstSeverity(state.aux.instructions.problems);
-    }
-    if (tab.id === 'settings' && state.aux.settings?.problems.length) {
-      badge = String(state.aux.settings.problems.length);
-      tone = worstSeverity(state.aux.settings.problems);
-    }
+  undoControl();
+
+  for (const entry of NAVIGATION) {
+    if (!tabVisible(entry.id, state.store)) continue;
+    const { badge, tone } = tabBadge(entry.id, state.store);
 
     container.append(node('button', {
-      class: ui.tab(state.tab === tab.id),
-      onclick: () => { state.tab = tab.id; paint('tabs', 'tab'); },
+      class: ui.tab(state.tab === entry.id),
+      onclick: () => { state.tab = entry.id; paint('tabs', 'tab'); },
     }, [
-      document.createTextNode(tab.label),
+      document.createTextNode(entry.label),
       badge ? node('span', { class: ui.tabBadge(tone), text: badge }) : null,
     ]));
   }

package/public/views/issue.mjs

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

package/public/views/memories.mjs

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

package/public/views/memory-list.mjs

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