claude-memory-admin 1.5.1 → 1.5.2

package/public/views/prune.mjs

@@ -0,0 +1,191 @@
+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/search.mjs

@@ -0,0 +1,101 @@
+import * as ui from '/ui.mjs';
+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 { openStore } from '/store.mjs';
+
+let searchTimer = null;
+
+export function scheduleSearch(value) {
+  state.query = value;
+  clearTimeout(searchTimer);
+  if (!value.trim()) {
+    state.search = null;
+    paint('view');
+    return;
+  }
+  searchTimer = setTimeout(runSearch, 180);
+}
+
+async function runSearch() {
+  const query = state.query.trim();
+  if (!query) return;
+  try {
+    state.search = await api(`/api/search?q=${encodeURIComponent(query)}`);
+  } catch (err) {
+    return toast(err.message, { error: true });
+  }
+  paint('view');
+}
+
+export function renderSearch() {
+  const data = state.search;
+  const host = el('search-results');
+  host.textContent = '';
+  el('search-title').textContent = data.total
+    ? `${data.total} result${data.total === 1 ? '' : 's'} for "${state.query.trim()}"`
+    : `No results for "${state.query.trim()}"`;
+
+  if (!data.total && !data.stores.length) {
+    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: 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: ui.result,
+        onclick: () => openFromSearch(group.id, result.file),
+      });
+      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: 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: ui.resultSnippet });
+        snippet.append(highlight(result.snippet.text, data.terms));
+        button.append(snippet);
+      }
+      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: ui.result,
+        onclick: () => openFromSearch(group.id, hit.file, 'index'),
+      });
+      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);
+    }
+    host.append(block);
+  }
+}
+
+async function openFromSearch(id, file, tab = 'memories') {
+  clearSearch();
+  if (id !== state.storeId) await openStore(id);
+  state.tab = tab;
+  if (file) state.selected = file;
+  paint('tabs', 'tab');
+}
+
+export function clearSearch() {
+  state.query = '';
+  state.search = null;
+  el('search').value = '';
+  paint('view');
+}

package/public/views/sessions.mjs

@@ -0,0 +1,235 @@
+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 { selectMemory } from '/store.mjs';
+import { paint } from '/bus.mjs';
+
+const TITLE_SOURCE = {
+  'ai-title': 'title Claude Code generated for this session',
+  slug: 'session slug, no generated title found in the part read',
+  prompt: 'first prompt, no generated title found in the part read',
+};
+
+function sessionRow(session, memoriesFrom) {
+  const soon = session.expiresInDays !== null && session.expiresInDays <= 7;
+  const caret = node('span', { class: ui.contextCaret, text: '\u25b8' });
+
+  const tags = [];
+  if (session.gitBranch) tags.push(node('span', { class: ui.badge('neutral'), text: session.gitBranch }));
+  if (session.model) tags.push(node('span', { class: ui.badge('neutral'), text: session.model }));
+  if (session.expiresInDays !== null) {
+    tags.push(node('span', {
+      class: ui.badge(soon ? 'warn' : 'neutral'),
+      text: session.expiresInDays === 0 ? 'due to be swept' : `swept in ${session.expiresInDays}d`,
+    }));
+  }
+  for (const memory of memoriesFrom) {
+    tags.push(node('span', { class: ui.badge('project'), text: memory.name }));
+  }
+
+  const body = node('div', { class: ui.contextBody, hidden: true });
+  const facts = node('dl', { class: ui.metaList });
+  const rows = [
+    ['session', session.id],
+    ['last active', `${sessionDate(session.modified)}  (file mtime)`],
+    ['size', sizeLabel(session.bytes)],
+  ];
+  if (session.cwd) rows.push(['cwd', session.cwd]);
+  if (session.version) rows.push(['version', session.version]);
+  if (session.titleFrom) rows.push(['title from', TITLE_SOURCE[session.titleFrom] || session.titleFrom]);
+  for (const [key, value] of rows) {
+    facts.append(node('dt', { class: ui.metaKey, text: key }), node('dd', { class: ui.metaValue, text: value }));
+  }
+  body.append(facts);
+  if (session.prompt) {
+    body.append(node('div', { class: ui.sectionLabel, text: 'Opened with' }));
+    body.append(node('p', { class: ui.note, text: session.prompt }));
+  }
+  if (memoriesFrom.length) {
+    body.append(node('div', { class: ui.sectionLabel, text: 'Memories written here' }));
+    const chips = node('div', { class: ui.linkRow });
+    for (const memory of memoriesFrom) {
+      chips.append(node('button', {
+        class: ui.chip(true),
+        text: memory.name,
+        onclick: () => selectMemory(memory.file),
+      }));
+    }
+    body.append(chips);
+  }
+
+  const button = node('button', {
+    class: ui.contextRowButton,
+    'aria-expanded': 'false',
+    onclick: (event) => {
+      const open = body.hidden;
+      body.hidden = !open;
+      caret.textContent = open ? '\u25be' : '\u25b8';
+      event.currentTarget.setAttribute('aria-expanded', open ? 'true' : 'false');
+    },
+  }, [
+    node('div', { class: ui.contextMain }, [
+      node('div', { class: ui.contextTags }, tags),
+      node('div', { class: ui.contextFile }, [caret, document.createTextNode(session.title || session.id)]),
+    ]),
+    node('div', { class: ui.contextSize, text: sessionDate(session.modified).slice(0, 10) }),
+  ]);
+
+  return node('div', {}, [button, body]);
+}
+
+function retentionTrack(sessions, days) {
+  const track = node('div', { class: ui.retentionTrack }, [node('span', { class: ui.retentionSweep })]);
+  for (const session of sessions) {
+    if (session.expiresInDays === null) continue;
+    const share = days > 0 ? Math.min(1, session.expiresInDays / days) : 1;
+    track.append(node('span', {
+      class: ui.retentionTick(session.expiresInDays <= 7),
+      style: `left: ${(share * 100).toFixed(2)}%`,
+      title: `${session.title || session.id}\nswept in ${session.expiresInDays} days`,
+    }));
+  }
+  return node('div', {}, [
+    track,
+    node('div', { class: ui.retentionScale }, [
+      node('span', { text: 'swept' }),
+      node('span', { text: `today · kept ${days} days` }),
+    ]),
+  ]);
+}
+
+const WEEKDAYS = ['Mon', '', 'Wed', '', 'Fri', '', ''];
+const LEVELS = [0, 1, 2, 3, 4];
+
+function dayLabel(cell) {
+  if (cell.count === 0) return `no sessions on ${cell.date}`;
+  return cell.count === 1 ? `1 session on ${cell.date}` : `${cell.count} sessions on ${cell.date}`;
+}
+
+function heatCell(cell, selected, onPick) {
+  if (cell.future) return node('span', { class: ui.heatBlank });
+  const label = dayLabel(cell);
+  const on = cell.date === selected;
+  return node('button', {
+    class: ui.heatTile(cell.level, on),
+    title: label,
+    'aria-label': label,
+    'aria-pressed': on ? 'true' : 'false',
+    onclick: () => onPick(on ? null : cell.date),
+  });
+}
+
+function activityGrid(heat, selected, onPick) {
+  const months = node('div', { class: ui.heatMonthRow });
+  for (const label of heat.months) {
+    months.append(node('div', { class: ui.heatMonthCell }, [
+      label ? node('span', { class: ui.heatMonthLabel, text: label }) : null,
+    ]));
+  }
+
+  const grid = node('div', { class: ui.heatGrid });
+  for (const week of heat.weeks) {
+    for (const cell of week) grid.append(heatCell(cell, selected, onPick));
+  }
+
+  const weekdays = node('div', { class: ui.heatDayCol });
+  for (const label of WEEKDAYS) weekdays.append(node('span', { class: ui.heatDayLabel, text: label }));
+
+  const legend = node('div', { class: ui.heatLegend }, [node('span', { text: 'Less' })]);
+  for (const level of LEVELS) legend.append(node('span', { class: ui.heatLegendSwatch(level) }));
+  legend.append(node('span', { text: 'More' }));
+
+  return node('div', { class: ui.heatBody }, [
+    weekdays,
+    node('div', { class: ui.heatMain }, [
+      node('div', { class: ui.heatScroll }, [months, grid]),
+      legend,
+    ]),
+  ]);
+}
+
+function meterPanel(title, aside, body) {
+  return node('div', { class: ui.meterPanel }, [
+    node('div', { class: ui.meterPanelHead }, [
+      node('span', { class: ui.meterPanelTitle, text: title }),
+      aside,
+    ]),
+    body,
+  ]);
+}
+
+export async function renderSessions(container) {
+  let data = state.aux.sessions;
+  if (!data) {
+    container.append(node('p', { class: ui.note, text: 'Reading session transcripts\u2026' }));
+    try {
+      data = await api(`/api/stores/${encodeURIComponent(state.storeId)}/sessions`);
+    } catch (err) {
+      container.textContent = '';
+      return container.append(node('p', { class: ui.note, text: err.message }));
+    }
+    if (state.tab !== 'sessions') return;
+    state.aux.sessions = data;
+  }
+  container.textContent = '';
+
+  const byOrigin = new Map();
+  for (const memory of state.store.memories) {
+    if (!memory.origin?.present) continue;
+    if (!byOrigin.has(memory.origin.sessionId)) byOrigin.set(memory.origin.sessionId, []);
+    byOrigin.get(memory.origin.sessionId).push(memory);
+  }
+
+  const selected = state.aux.sessionDay;
+  const pickDay = (date) => {
+    state.aux.sessionDay = date;
+    paint('tab');
+  };
+
+  container.append(node('p', { class: ui.noteTight, text: 'The transcripts sitting beside this store\u2019s memory. Claude Code deletes them once they pass the retention period and never touches memory/, so this is the evidence that expires while the memories stay. This tab only reads, and only the head of each file - nothing here deletes a transcript.' }));
+
+  container.append(node('div', { class: ui.meter }, [
+    node('div', { class: ui.meterTop }, [
+      node('span', { class: ui.meterValue, text: String(data.count) }),
+      node('span', { class: ui.meterUnit, text: data.count === 1 ? 'session kept' : 'sessions kept' }),
+    ]),
+    node('div', { class: ui.meterPanels }, [
+      meterPanel('Retention', null, retentionTrack(data.sessions, data.days)),
+      data.heat ? meterPanel('Activity', null, activityGrid(data.heat, selected, pickDay)) : null,
+    ]),
+    node('div', { class: ui.meterFacts }, [
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: sizeLabel(data.bytes) }), document.createTextNode(' on disk')]),
+      node('span', {}, [node('b', { class: ui.meterFactValue, text: `${data.days} days` }), document.createTextNode(' retention (cleanupPeriodDays)')]),
+      node('span', {}, [
+        node('b', { class: ui.meterFactValue, text: data.evidenceExpiresInDays === null ? '-' : `${data.evidenceExpiresInDays} days` }),
+        document.createTextNode(' until the last proof of this path goes'),
+      ]),
+    ]),
+    node('p', { class: ui.meterNote, text: 'Sweep dates come from each file\u2019s mtime, which any copy or restore resets, so they are an estimate of when Claude Code will drop them rather than something the transcript recorded about itself.' }),
+  ]));
+
+  const visible = selected
+    ? data.sessions.filter((session) => session.modified.slice(0, 10) === selected)
+    : data.sessions;
+  const listHead = node('div', { class: ui.sectionLabelRow }, [
+    node('span', {
+      class: ui.sectionLabelInline,
+      text: selected ? `Sessions \u00b7 ${visible.length} on ${selected}` : `Sessions \u00b7 ${data.count}`,
+    }),
+  ]);
+  if (selected) {
+    listHead.append(node('button', {
+      class: ui.heatFilterClear,
+      text: 'show every day',
+      onclick: () => pickDay(null),
+    }));
+  }
+  container.append(listHead);
+  const card = node('div', { class: ui.card });
+  for (const session of visible) {
+    card.append(sessionRow(session, byOrigin.get(session.id) || []));
+  }
+  container.append(card);
+}

package/public/views/settings.mjs

@@ -0,0 +1,120 @@
+import * as ui from '/ui.mjs';
+import { node } from '/dom.mjs';
+import { api } from '/api.mjs';
+import { state } from '/state.mjs';
+
+const SETTINGS_PROBLEMS = {
+  unparseable: (p) => [
+    `Not valid JSON: ${p.scope} settings`,
+    `${p.file} — Claude Code cannot read this file either, so every value in it is being ignored. ${p.detail}`,
+  ],
+  unreadable: (p) => [
+    `Cannot be read: ${p.scope} settings`,
+    `${p.file} — ${p.detail}`,
+  ],
+  'not-object': (p) => [
+    `Not a settings object: ${p.scope} settings`,
+    `${p.file} — ${p.detail}`,
+  ],
+  'invalid-auto-memory-directory': (p) => [
+    'autoMemoryDirectory cannot be used',
+    `${p.file} — ${p.detail}. Claude Code accepts only an absolute or ~/-prefixed path.`,
+  ],
+};
+
+const show = (value) => (value === undefined ? 'unset' : JSON.stringify(value));
+
+export async function renderSettings(container) {
+  let data = state.aux.settings;
+  if (!data) {
+    container.append(node('p', { class: ui.note, text: 'Reading settings files…' }));
+    try {
+      data = await api(`/api/stores/${encodeURIComponent(state.storeId)}/settings`);
+    } catch (err) {
+      container.textContent = '';
+      return container.append(node('p', { class: ui.note, text: err.message }));
+    }
+    if (state.tab !== 'settings') return;
+  }
+  container.textContent = '';
+
+  container.append(node('p', { class: ui.noteTight, text: 'What Claude Code would read for this store, in precedence order: managed policy first, then project and local settings, then your user file. This tab is read-only — it reports what is configured, it never changes it.' }));
+
+  if (!data.projectDir) {
+    container.append(node('p', { class: ui.subWarn, text: 'This store has no resolved project directory, so its project and local settings layers could not be consulted. Values below come from managed policy and your user file only.' }));
+  }
+
+  if (data.problems.length) {
+    container.append(node('div', { class: ui.sectionLabel, text: `Problems · ${data.problems.length}` }));
+    for (const problem of data.problems) {
+      const describe = SETTINGS_PROBLEMS[problem.kind];
+      const [title, detail] = describe ? describe(problem) : [problem.kind, problem.file || ''];
+      container.append(node('div', { class: ui.issue(problem.severity === 'bad') }, [
+        node('div', { class: ui.issueBody }, [
+          node('div', { class: ui.issueTitle, text: title }),
+          node('div', { class: ui.issueDetail, text: detail }),
+        ]),
+      ]));
+    }
+  }
+
+  if (data.env.overrides) {
+    container.append(node('div', { class: ui.sectionLabel, text: 'Environment override' }));
+    container.append(node('div', { class: ui.issue(false) }, [
+      node('div', { class: ui.issueBody }, [
+        node('div', { class: ui.issueTitle, text: `${data.env.name}=${data.env.value}` }),
+        node('div', { class: ui.issueDetail, text: `Set in this shell, so it outranks every settings file and forces ${data.env.overrides} off. The store will not grow while it is set.` }),
+      ]),
+    ]));
+  }
+
+  for (const entry of data.keys) {
+    const card = node('div', { class: ui.card });
+    const head = node('div', { class: ui.settingsKeyHead }, [
+      node('span', { class: ui.settingsKeyName, text: entry.key }),
+      node('span', {
+        class: ui.settingsEffective,
+        text: entry.effective ? show(entry.effective.value) : `${show(entry.fallback)} (default)`,
+      }),
+    ]);
+    if (entry.effective) {
+      head.append(node('span', { class: ui.scopeBadge(entry.effective.scope), text: entry.effective.scope }));
+    }
+    card.append(head);
+    card.append(node('p', { class: ui.noteTight, text: entry.detail }));
+
+    if (entry.normalized !== undefined && entry.effective && entry.normalized !== entry.effective.value) {
+      card.append(node('div', { class: ui.issue(false) }, [
+        node('div', { class: ui.issueBody }, [
+          node('div', { class: ui.issueTitle, text: `Configured ${show(entry.effective.value)}, but ${show(entry.normalized)} applies` }),
+          node('div', { class: ui.issueDetail, text: 'Claude Code ignores a value it cannot use and falls back to the default.' }),
+        ]),
+      ]));
+    }
+
+    if (!entry.values.length) {
+      card.append(node('p', { class: ui.note, text: 'No settings file sets this, so the built-in default applies.' }));
+    } else {
+      for (const value of entry.values) {
+        card.append(node('div', { class: ui.settingsLayerRow }, [
+          node('span', { class: ui.scopeBadge(value.scope), text: value.scope }),
+          node('span', { class: ui.settingsLayerValue(value.wins), text: show(value.value) }),
+          node('span', { class: ui.settingsLayerFile, text: value.file }),
+          value.wins ? node('span', { class: ui.badge('ok'), text: 'wins' }) : null,
+        ]));
+      }
+    }
+    container.append(card);
+  }
+
+  container.append(node('div', { class: ui.sectionLabel, text: `Files consulted · ${data.layers.length}` }));
+  const files = node('div', { class: ui.card });
+  for (const layer of data.layers) {
+    files.append(node('div', { class: ui.settingsLayerRow }, [
+      node('span', { class: ui.scopeBadge(layer.scope), text: layer.scope }),
+      node('span', { class: ui.settingsLayerValue(layer.status === 'ok'), text: layer.status }),
+      node('span', { class: ui.settingsLayerFile, text: layer.file }),
+    ]));
+  }
+  container.append(files);
+}