claude-code-memory-explorer 0.11.0 → 0.12.0

package/public/app.js

@@ -4,6 +4,7 @@ let projectData = null;
 let stackData = [];
 let summaryData = null;
 let selectedFileId = null;
+let healthViewOpen = true; // health dashboard is the default view; selecting a file exits it
 
 // #endregion STATE
 
@@ -304,10 +305,11 @@ function toggleHelpModal() {
   document.getElementById('helpModal').classList.toggle('open');
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: called from topbar markup
-function openAnalysisModal() {
-  document.getElementById('analysisModal').classList.add('open');
-  refreshAnalysis();
+function openHealthView() {
+  healthViewOpen = !healthViewOpen;
+  document.getElementById('analyzeBtn')?.classList.toggle('active', healthViewOpen);
+  renderPreview();
+  if (healthViewOpen) refreshAnalysis();
 }
 
 function bindModalKeys(inputId, modalId, submitFn) {
@@ -342,6 +344,7 @@ const LOAD_ICONS = {
   startup: '\u25D2',
   conditional: '\u25CB',
   ondemand: '\u25CC',
+  tree: '\u25CE',
   import: '@',
   link: '\u2197',
 };
@@ -350,6 +353,7 @@ const LOAD_TITLES = {
   startup: 'Loaded at startup (partial)',
   conditional: 'Conditional (path-scoped)',
   ondemand: 'On-demand',
+  tree: 'Loaded progressively (when Claude works in its directory)',
   import: 'Imported by parent file',
   link: 'Referenced via markdown link (not auto-loaded)',
 };
@@ -397,7 +401,8 @@ function renderTree() {
     const loadIcon = LOAD_ICONS[item.load] || '';
     const loadTitle = LOAD_TITLES[item.load] || item.load;
     const meta = `${item.lines}L`;
-    const isConditional = item.load === 'conditional' || item.load === 'ondemand' || item.load === 'link';
+    const isConditional =
+      item.load === 'conditional' || item.load === 'ondemand' || item.load === 'link' || item.load === 'tree';
     const pad = indent ? ` style="padding-left:${12 + indent * 16}px"` : '';
     const muted = item.scope === 'agent-memory' ? ' tree-agent-item' : '';
     const children = childrenOf[item.id];
@@ -405,10 +410,19 @@ function renderTree() {
     const chevron = children
       ? `<span class="tree-chevron" onclick="_toggleItem(event,'${escAttrJs(item.id)}')" title="${children.length} referenced">${expanded ? '▾' : '▸'}</span>`
       : '<span class="tree-chevron-spacer"></span>';
-    let h = `<div class="tree-item${sel}${indent ? ' tree-child' : ''}${isConditional ? ' tree-conditional' : ''}${muted}" data-id="${esc(item.id)}" title="${esc(item.path)}" onclick="selectFile('${escAttrJs(item.id)}')"${pad}>`;
+    const fp = footprintHighlight && footprintHit(item) ? ' fp-hit' : '';
+    let h = `<div class="tree-item${sel}${indent ? ' tree-child' : ''}${isConditional ? ' tree-conditional' : ''}${muted}${fp}" data-id="${esc(item.id)}" title="${esc(item.path)}" onclick="selectFile('${escAttrJs(item.id)}')"${pad}>`;
     h += chevron;
     h += `<span class="load-icon" title="${loadTitle}" style="color:var(--scope-${item.scope})">${loadIcon}</span>`;
     h += `<span class="file-name">${esc(item.name)}</span>`;
+    const hs = treeHealth.get(item.id);
+    if (hs) {
+      const sev = hs.high ? 'high' : hs.med ? 'med' : 'low';
+      const n = hs.high || hs.med || hs.low;
+      h += `<span class="tree-health th-${esc(sev)}" title="${esc(hs.high)} high · ${esc(hs.med)} med · ${esc(hs.low)} low — open Health for details">${n}</span>`;
+    } else if (auditedIds.has(item.id)) {
+      h += '<span class="tree-health th-clean" title="Audited — no findings"></span>';
+    }
     h += `<span class="file-meta">${meta}</span>`;
     h += '</div>';
     if (expanded) {
@@ -509,6 +523,10 @@ function pushFileState(id) {
 }
 
 function selectFile(id, pushState = true) {
+  if (healthViewOpen) {
+    healthViewOpen = false;
+    document.getElementById('analyzeBtn')?.classList.remove('active');
+  }
   selectedFileId = selectedFileId === id ? null : id;
   if (selectedFileId) {
     const item = stackData.find((s) => s.id === selectedFileId);
@@ -644,6 +662,12 @@ function renderMemoryIndexTable(entries) {
 
 async function renderPreview() {
   const panel = document.getElementById('previewPanel');
+  if (healthViewOpen) {
+    document.getElementById('analyzeBtn')?.classList.add('active');
+    panel.innerHTML = '<div class="health-view"><div id="analysisSection"></div></div>';
+    if (lastAnalysisSt) rerenderAnalysis();
+    return;
+  }
   const source = stackData.find((s) => s.id === selectedFileId);
   if (!source) {
     panel.innerHTML =
@@ -723,6 +747,8 @@ async function renderPreview() {
   html += `<div class="preview-filepath" title="${esc(source.path)}">${esc(source.path)}</div>`;
   html += '</div>';
 
+  html += renderFileFindings(source);
+
   const hl = (text) => {
     const { text: processed, placeholders } = linkifyImports(text, source.id);
     // Skill names aren't filenames (e.g. "aspire") — derive the language from the real file
@@ -878,19 +904,78 @@ let analysisPollTimer = null;
 let lastAnalysisSt = null;
 let analysisFindings = []; // findings of the rendered result, addressed by index from handlers
 let analysisFilter = 'all';
-let analysisDismissed = new Set(); // session-only; keys are `${kind}|${title}`
-let analysisTs = null; // reset dismissals + filter when a new result lands
-let analysisRunIdx = 0; // which run from the per-project history is shown (0 = latest)
-
-// Session-only identity of a finding, used by dismiss/copy/render alike
+// Server persists dismissals per scope: project findings (cross included) in the
+// project entry, user-scope findings in the shared user entry (visible from every
+// project). Keys are `${kind}|${title}`.
+const dismissedByScope = { project: new Set(), user: new Set() };
+function dismissScope(f) {
+  return f.scope === 'user' ? 'user' : 'project';
+}
+function isDismissed(f) {
+  return dismissedByScope[dismissScope(f)].has(findingKey(f));
+}
+function dismissedCount() {
+  return dismissedByScope.project.size + dismissedByScope.user.size;
+}
+let dismissWrites = 0; // dismiss POSTs in flight — polls must not clobber the local set meanwhile
+let lastPollKey = null; // fingerprint of the last rendered analysis state
+let analysisTs = null; // reset filters when a new result lands
+let analysisRunIdx = -1; // shown run: -1 = merged current state (default), 0+ = single run
+let fixSelected = new Set(); // finding keys queued for the copyable fix plan
+let analysisFileFilter = null; // {id, name} from a memory-map cell click; narrows the findings list
+let treeHealth = new Map(); // source id -> {high, med, low} from the latest run
+let auditedIds = new Set(); // ids covered by the latest run (clean files get a hollow dot)
+
+// Identity of a finding, used by dismiss/copy/render alike
 function findingKey(f) {
   return `${f.kind}|${f.title}`;
 }
 
-function resetAnalysisView(runIdx = 0) {
+function resetAnalysisView(runIdx = -1) {
   analysisRunIdx = runIdx;
   analysisFilter = 'all';
-  analysisDismissed = new Set();
+  fixSelected = new Set();
+  analysisFileFilter = null;
+}
+
+// Findings name files by bare name while map cells carry display names (e.g.
+// skills), so matching goes through ids — the same resolution as findingFileIds.
+function _setFileFilter(id, name) {
+  analysisFileFilter = analysisFileFilter?.id === id ? null : { id, name };
+  rerenderAnalysis();
+}
+
+function findingMatchesFileFilter(f) {
+  if (!analysisFileFilter) return true;
+  return (f.files || []).some(
+    (n) => n === analysisFileFilter.name || findingFileIds(n, f.scope).includes(analysisFileFilter.id),
+  );
+}
+
+// Health annotations on the tree always reflect the merged current state,
+// regardless of which historical run the health view is showing.
+function computeTreeHealth(st) {
+  treeHealth = new Map();
+  auditedIds = new Set();
+  const run = mergedRunView(st);
+  if (!run) return;
+  for (const s of runAuditedSources(run)) auditedIds.add(s.id);
+  for (const f of run.result?.findings || []) {
+    if (isDismissed(f)) continue;
+    for (const name of f.files || []) {
+      for (const id of findingFileIds(name, f.scope)) {
+        const cur = treeHealth.get(id) || { high: 0, med: 0, low: 0 };
+        cur[f.severity] = (cur[f.severity] || 0) + 1;
+        treeHealth.set(id, cur);
+      }
+    }
+  }
+}
+
+// Dismissals change what the tree badges should show — recompute and repaint.
+function syncTreeHealth() {
+  computeTreeHealth(lastAnalysisSt);
+  renderTree();
 }
 let scopePanelOpen = false;
 let scopeChecked = null; // Set of source ids; seeded with the default scope on first open
@@ -918,7 +1003,7 @@ async function _runAnalysis(force, ids) {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body),
     });
-    if (!res.ok && res.status !== 409) {
+    if (!res.ok) {
       const msg = await res
         .json()
         .then((e) => e.error)
@@ -936,32 +1021,63 @@ async function _runAnalysis(force, ids) {
 }
 
 async function refreshAnalysis() {
-  const el = document.getElementById('analysisSection');
-  if (!el) return;
   let st;
   try {
     st = await fetchJSON('/api/memory/analysis');
   } catch {
     return;
   }
-  if (st.ts !== analysisTs) {
-    analysisTs = st.ts;
+  const tsKey = `${st.ts}|${st.user?.ts || ''}`;
+  const isNew = tsKey !== analysisTs;
+  if (isNew) {
+    analysisTs = tsKey;
     resetAnalysisView();
   }
+  // A dismiss POST in flight owns the set — adopting the server's (older) copy here
+  // would briefly resurrect the finding the user just dismissed.
+  if (!dismissWrites) {
+    dismissedByScope.project = new Set(st.dismissed || []);
+    dismissedByScope.user = new Set(st.user?.dismissed || []);
+  }
   lastAnalysisSt = st;
-  el.innerHTML = renderAnalysis(st);
-  applyScopeIndeterminate(el);
+  // Polls where only the banner clock changed must not rebuild the review DOM —
+  // that would tear down the cards mid-interaction every 2.5s while a run is in flight.
+  const pollKey = JSON.stringify([
+    tsKey,
+    st.error,
+    [...dismissedByScope.project, ...dismissedByScope.user],
+    (st.pending || []).map((p) => `${p.id}${p.stalled ? ':stalled' : ''}`),
+  ]);
+  const banner = document.getElementById('runningBanner');
+  if (pollKey === lastPollKey && banner) {
+    banner.innerHTML = renderRunningBanner(st);
+  } else {
+    computeTreeHealth(st);
+    renderTree();
+    if (isNew && !healthViewOpen && selectedFileId) renderPreview();
+    rerenderAnalysis(st);
+  }
+  lastPollKey = pollKey;
   clearTimeout(analysisPollTimer);
-  if (st.running) analysisPollTimer = setTimeout(refreshAnalysis, 2500);
+  // Stalled-only pendings keep a slow poll alive — the banner promises a late
+  // completion will surface, so it must actually be able to.
+  const pend = st.pending || [];
+  if (pend.some((p) => !p.stalled)) analysisPollTimer = setTimeout(refreshAnalysis, 2500);
+  else if (pend.length) analysisPollTimer = setTimeout(refreshAnalysis, 30000);
 }
 
 // Re-render from the cached state — used by scope/filter/dismiss handlers so a
 // checkbox click never triggers a server round-trip.
-function rerenderAnalysis() {
+function rerenderAnalysis(st = lastAnalysisSt) {
   const el = document.getElementById('analysisSection');
-  if (!el || !lastAnalysisSt) return;
-  el.innerHTML = renderAnalysis(lastAnalysisSt);
+  if (!el || !st) return;
+  // The scope tree is the scroll container; innerHTML replaces it, which would
+  // snap a group toggle deep in the list back to the top of the panel.
+  const scroll = el.querySelector('.scope-tree')?.scrollTop || 0;
+  el.innerHTML = renderAnalysis(st);
   applyScopeIndeterminate(el);
+  const tree = el.querySelector('.scope-tree');
+  if (tree) tree.scrollTop = scroll;
 }
 
 // `indeterminate` is a DOM property, not an attribute — set it after every innerHTML render.
@@ -1003,6 +1119,13 @@ function analysisScopeGroups() {
       tag: 'agent',
       items: stackData.filter((s) => s.scope === 'agent-memory'),
     },
+    {
+      key: 'user',
+      label: 'User CLAUDE.md',
+      cls: 't-user',
+      tag: 'user',
+      items: stackData.filter((s) => s.scope === 'user' && !s.parentId),
+    },
   ].filter((g) => g.items.length);
 }
 
@@ -1094,23 +1217,54 @@ function memoryDirPath() {
   return idx ? idx.path.replace(/[\\/][^\\/]+$/, '') : null;
 }
 
+// Resolve a finding's bare file names to the live stack sources they name, so a
+// prompt can cite real paths instead of guessing a location from `scope`.
+function findingSources(f) {
+  const ids = new Set();
+  for (const name of f.files || []) {
+    for (const id of findingFileIds(name, f.scope)) ids.add(id);
+  }
+  return [...ids].map((id) => stackData.find((s) => s.id === id)).filter((s) => s?.path);
+}
+
 function findingPrompt(f) {
-  const dir = memoryDirPath();
-  const lines = [
-    dir
+  const sources = findingSources(f);
+  const paths = sources.map((s) => s.path);
+  let header;
+  if (paths.length === 1) {
+    header = `In the Claude Code instruction file at ${paths[0]}, apply this fix:`;
+  } else if (paths.length > 1) {
+    header = 'In the Claude Code instruction files listed below, apply this fix:';
+  } else if (f.scope === 'user') {
+    const path = stackData.find((s) => s.id === 'user-claude-md')?.path || '~/.claude/CLAUDE.md';
+    header = `In the user-level Claude Code instructions at ${path}, apply this fix:`;
+  } else {
+    const dir = memoryDirPath();
+    header = dir
       ? `In the Claude Code auto-memory at ${dir}, apply this fix:`
-      : "In this project's Claude Code auto-memory, apply this fix:",
-    '',
-    `Finding (${f.kind}, ${f.severity}): ${f.title}`,
-    f.detail,
-    '',
-    `Action: ${f.suggestion}`,
-  ];
-  if ((f.files || []).length) lines.push(`Files: ${f.files.join(', ')}`);
-  lines.push('', 'Update MEMORY.md index lines if files are added, renamed, or removed.');
+      : "In this project's Claude Code auto-memory, apply this fix:";
+  }
+  const lines = [header, '', `Finding (${f.kind}, ${f.severity}): ${f.title}`, f.detail, '', `Action: ${f.suggestion}`];
+  const cited = paths.length ? paths : f.files || [];
+  if (cited.length) lines.push(`Files: ${cited.join(', ')}`);
+  // The index note only applies to auto-memory files; a CLAUDE.md or SKILL.md
+  // fix has no MEMORY.md to keep in sync.
+  const touchesMemory = paths.length ? sources.some((s) => s.scope === 'memory') : f.scope !== 'user';
+  if (touchesMemory) lines.push('', 'Update MEMORY.md index lines if files are added, renamed, or removed.');
   return lines.join('\n');
 }
 
+// Badge shown next to the kind for non-project findings; project scope is the
+// default and carries no badge. Reuses the scope-tag palette from the picker.
+function scopeBadge(f) {
+  if (!f.scope || f.scope === 'project') return '';
+  const title =
+    f.scope === 'user'
+      ? 'User-scope finding — shared across projects'
+      : 'Cross-scope finding — cites both user and project instructions';
+  return `<span class="scope-tag t-${esc(f.scope)}" title="${esc(title)}">${esc(f.scope)}</span>`;
+}
+
 function copyText(text, okMsg) {
   navigator.clipboard
     .writeText(text)
@@ -1124,25 +1278,55 @@ function _copyFindingPrompt(idx) {
 }
 
 function _copyAllFindings() {
-  const live = analysisFindings.filter((f) => !analysisDismissed.has(findingKey(f)));
+  const live = analysisFindings.filter((f) => !isDismissed(f));
   if (!live.length) return;
   copyText(live.map(findingPrompt).join('\n\n---\n\n'), `${live.length} prompts copied`);
 }
 
-function _dismissFinding(btn, idx) {
-  const f = analysisFindings[idx];
-  if (!f) return;
+// The local set already changed, so the UI never waits; the response's authoritative
+// list is adopted once no other write is racing it.
+function persistDismissed(scope, body) {
+  dismissWrites++;
+  fetch('/api/memory/analysis/dismiss', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ...body, scope }),
+  })
+    .then((r) => r.json())
+    .then((d) => {
+      if (dismissWrites === 1 && Array.isArray(d.dismissed)) dismissedByScope[scope] = new Set(d.dismissed);
+    })
+    .catch(() => {})
+    .finally(() => dismissWrites--);
+}
+
+// Shared by the health view and the file-preview cards — collapse the card,
+// persist the dismissal, then repaint whichever surface hosted it.
+function dismissFinding(btn, f, repaint) {
   const card = btn.closest('.analysis-card');
   card.style.maxHeight = `${card.offsetHeight}px`;
   requestAnimationFrame(() => card.classList.add('leaving'));
   setTimeout(() => {
-    analysisDismissed.add(findingKey(f));
-    rerenderAnalysis();
+    // User-scope dismissals go to the shared user entry so they hold across projects.
+    dismissedByScope[dismissScope(f)].add(findingKey(f));
+    persistDismissed(dismissScope(f), { key: findingKey(f) });
+    fixSelected.delete(findingKey(f)); // a dismissed finding can't stay queued in the fix plan
+    syncTreeHealth();
+    repaint();
   }, 280);
 }
 
+function _dismissFinding(btn, idx) {
+  const f = analysisFindings[idx];
+  if (f) dismissFinding(btn, f, rerenderAnalysis);
+}
+
 function _restoreDismissed() {
-  analysisDismissed = new Set();
+  for (const scope of Object.keys(dismissedByScope)) {
+    if (dismissedByScope[scope].size) persistDismissed(scope, { all: true });
+    dismissedByScope[scope] = new Set();
+  }
+  syncTreeHealth();
   rerenderAnalysis();
 }
 
@@ -1173,6 +1357,266 @@ function fileChipScope(source) {
   return source.scope === 'agent-memory' ? 'agent' : source.scope;
 }
 
+// Mirrors the server's analyzableSources: rules stay reference-only context for
+// the analyzer; the user CLAUDE.md is auditable (project-blind reviewer, results
+// shared across projects via the user-scope entry).
+function analyzableSource(s) {
+  return (
+    s.scope === 'memory' ||
+    s.scope === 'agent-memory' ||
+    ((s.scope === 'skill' || s.scope === 'user' || s.scope === 'project' || s.scope === 'local') && !s.parentId)
+  );
+}
+
+// Files covered by a run. Runs carry an `audited` snapshot taken at analysis
+// time — the authoritative list even after the stack changes. Older runs
+// predate the snapshot and fall back to re-deriving from the live stack.
+function runAuditedSources(run) {
+  if (!run) return [];
+  if (run.audited) return run.audited;
+  // Soft-linked (@import) children never go into the analysis, so keep them out
+  // of every health annotation even when their parent's id is in the run scope.
+  const own = stackData.filter((s) => !s.parentId && analyzableSource(s));
+  return run.ids ? own.filter((s) => run.ids.includes(s.id)) : own.filter((s) => s.scope === 'memory');
+}
+
+// Findings name files by bare name, which collides across scopes (user vs
+// project CLAUDE.md) — the finding's `scope` field breaks the tie: user-scope
+// findings map only to user sources, project-scope ones exclude them ("cross"
+// keeps both sides). Attribute to audit-eligible sources first; fall back to
+// any source with that name only when none are eligible — the agent may report
+// out-of-scope files it read recursively, and those still deserve a badge.
+function findingFileIds(name, scope) {
+  // The agent sometimes reports a relative path instead of the display name
+  // (e.g. "dev-tools/bonya/.claude/skills/bonya/SKILL.md" for skill
+  // "dev-tools/bonya:bonya") — match those by path suffix. Only slash-bearing
+  // names qualify: a bare "SKILL.md" would suffix-match every skill.
+  // The agent sometimes copies the prompt's scope marker into the name
+  // ("CLAUDE.md (user)") — strip it, the scope field already carries it.
+  const n = name.replace(/\s*\((user|project|local)\)$/, '').replace(/\\/g, '/');
+  const byPath = (s) => {
+    if (!n.includes('/')) return false;
+    const p = (s.path || '').replace(/\\/g, '/');
+    return p === n || p.endsWith(`/${n}`);
+  };
+  let matches = stackData.filter((s) => s.name === n || byPath(s));
+  if (scope === 'user') matches = matches.filter((s) => s.scope === 'user');
+  else if (scope === 'project') matches = matches.filter((s) => s.scope !== 'user');
+  const eligible = matches.filter((s) => !s.parentId && analyzableSource(s));
+  return (eligible.length ? eligible : matches).map((s) => s.id);
+}
+
+// Project runs and shared user-scope runs interleave into one timeline —
+// run chips, the trend, and the merged view all address runs through this.
+function allAnalysisRuns(st) {
+  const proj = (st?.runs || []).map((run) => ({ run, scope: 'project' }));
+  const user = (st?.user?.runs || []).map((run) => ({ run, scope: 'user' }));
+  return [...proj, ...user].sort((a, b) => b.run.ts - a.run.ts);
+}
+
+// The default health view merges runs: each file carries the verdict of the
+// newest run that audited it, so a narrow re-run (say, one skill) overlays the
+// wider picture instead of replacing it. Run chips still show single runs.
+function mergedRunView(st) {
+  const runs = allAnalysisRuns(st).map((e) => e.run);
+  if (runs.length <= 1) return runs[0] || null;
+  const owner = new Map(); // file id -> newest run that audited it
+  const audited = [];
+  for (const run of runs) {
+    for (const s of runAuditedSources(run)) {
+      if (owner.has(s.id)) continue;
+      owner.set(s.id, run);
+      audited.push(s);
+    }
+  }
+  const findings = [];
+  const seen = new Set();
+  for (const run of runs) {
+    for (const f of run.result?.findings || []) {
+      if (seen.has(findingKey(f))) continue;
+      const ids = (f.files || []).flatMap((n) => findingFileIds(n, f.scope));
+      // A finding survives while its run still owns a file it touches — a newer
+      // run that re-audited the file supersedes the old verdict. File-less
+      // findings (suggested new memories) belong to the latest run only.
+      const owns = ids.length ? ids.some((id) => owner.get(id) === run) : run === runs[0];
+      if (!owns) continue;
+      seen.add(findingKey(f));
+      findings.push(f);
+    }
+  }
+  const latest = runs[0];
+  return {
+    ...latest,
+    audited,
+    // The latest run's summary describes only its own scope — misleading when
+    // merged, so it is dropped here.
+    result: { ...latest.result, findings, summary: null, scopeDesc: `${runs.length} runs merged` },
+  };
+}
+
+const SEV_WEIGHT = { high: 10, med: 3, low: 1 };
+
+// Start at 100, subtract per finding by severity. Blunt but explainable.
+function healthScore(findings) {
+  const penalty = findings.reduce((s, f) => s + (SEV_WEIGHT[f.severity] || 1), 0);
+  return Math.max(2, 100 - penalty);
+}
+
+function sevCounts(findings) {
+  const c = { high: 0, med: 0, low: 0 };
+  for (const f of findings) c[f.severity] = (c[f.severity] || 0) + 1;
+  return c;
+}
+
+function renderHealthDash(st, shown) {
+  // Score, tiles, and clean count track the live (non-dismissed) list they sit above.
+  const findings = (shown.result?.findings || []).filter((f) => !isDismissed(f));
+  const c = sevCounts(findings);
+  const audited = runAuditedSources(shown);
+  const dirty = new Set(findings.flatMap((f) => (f.files || []).flatMap((n) => findingFileIds(n, f.scope))));
+  const clean = audited.filter((s) => !dirty.has(s.id)).length;
+  const score = healthScore(findings);
+  const scoreColor = score >= 80 ? 'var(--success)' : score >= 50 ? 'var(--warning)' : 'var(--error)';
+  const CIRC = 163.4; // 2πr for r=26
+  let html = '<div class="hv-tiles">';
+  html += '<div class="hv-tile hv-ring-tile">';
+  html += `<div class="hv-ring"><svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="26" fill="none" stroke="var(--bg-hover)" stroke-width="6"/><circle cx="32" cy="32" r="26" fill="none" stroke="${esc(scoreColor)}" stroke-width="6" stroke-linecap="round" transform="rotate(-90 32 32)" stroke-dasharray="${CIRC}" stroke-dashoffset="${esc((CIRC * (100 - score)) / 100)}"/></svg><span class="hv-ring-val" style="color:${scoreColor}">${score}</span></div>`;
+  html += `<div class="hv-tile-txt" title="Score = 100 − 10/high − 3/med − 1/low"><span class="hv-lbl">Health</span><span class="hv-sub">of 100</span></div></div>`;
+  for (const [sev, label] of [
+    ['high', 'High'],
+    ['med', 'Medium'],
+    ['low', 'Low'],
+  ]) {
+    html += `<div class="hv-tile"><span class="hv-lbl"><span class="dot sev-dot-${esc(sev)}"></span>${label}</span><span class="hv-num hv-num-${esc(sev)}">${c[sev]}</span></div>`;
+  }
+  html += `<div class="hv-tile"><span class="hv-lbl">Clean</span><span class="hv-num hv-num-clean">${clean}<i>/${audited.length}</i></span><span class="hv-sub">audited files</span></div>`;
+  html += renderTrend(st);
+  html += '</div>';
+  return html;
+}
+
+// Findings per run as stacked mini-columns, oldest to newest; click switches the shown run.
+function renderTrend(st) {
+  const runs = allAnalysisRuns(st);
+  if (runs.length < 2) return '';
+  let html = '<div class="hv-tile hv-trend-tile"><span class="hv-lbl">Trend</span><div class="hv-trend">';
+  for (let i = runs.length - 1; i >= 0; i--) {
+    const c = sevCounts(runs[i].run.result?.findings || []);
+    const px = (n) => (n ? Math.max(3, n * 4) : 0);
+    html += `<div class="hv-trun${i === analysisRunIdx ? ' cur' : ''}" onclick="_setAnalysisRun(${i})" title="${esc(analysisTimeAgo(runs[i].run.ts))}${runs[i].scope === 'user' ? ' · user' : ''} — ${c.high} high · ${c.med} med · ${c.low} low">`;
+    if (c.low) html += `<i class="tl" style="height:${px(c.low)}px"></i>`;
+    if (c.med) html += `<i class="tm" style="height:${px(c.med)}px"></i>`;
+    if (c.high) html += `<i class="th" style="height:${px(c.high)}px"></i>`;
+    if (!c.high && !c.med && !c.low) html += '<i class="tz"></i>';
+    html += '</div>';
+  }
+  html += '</div></div>';
+  return html;
+}
+
+// Every audited file sized by line count, colored by its worst finding.
+function renderMemoryMap(shown) {
+  const audited = runAuditedSources(shown);
+  if (!audited.length) return '';
+  const findings = (shown.result?.findings || []).filter((f) => !isDismissed(f));
+  const perFile = new Map();
+  for (const f of findings) {
+    for (const name of f.files || []) {
+      for (const id of findingFileIds(name, f.scope)) {
+        const cur = perFile.get(id) || { high: 0, med: 0, low: 0 };
+        cur[f.severity]++;
+        perFile.set(id, cur);
+      }
+    }
+  }
+  const sevRank = { high: 0, med: 1, low: 2, clean: 3 };
+  const cellSev = (s) => {
+    const c = perFile.get(s.id);
+    return c ? (c.high ? 'high' : c.med ? 'med' : 'low') : 'clean';
+  };
+  let html = '<div class="hv-map-label">Memory map — colored by worst finding</div><div class="hv-map">';
+  for (const s of [...audited].sort(
+    (a, b) => sevRank[cellSev(a)] - sevRank[cellSev(b)] || a.name.localeCompare(b.name),
+  )) {
+    const c = perFile.get(s.id);
+    const sev = cellSev(s);
+    const n = c ? c.high + c.med + c.low : 0;
+    const title = `${s.name} — ${s.lines}L${n ? ` · ${n} finding${n > 1 ? 's' : ''} (worst: ${sev})` : ' · clean'}`;
+    html += `<div class="hv-cell hv-${esc(sev)}${analysisFileFilter?.id === s.id ? ' active' : ''}" onclick="_setFileFilter('${escAttrJs(s.id)}','${escAttrJs(s.name)}')" title="${esc(title)} — click to filter findings">`;
+    if (n) html += `<span class="hv-cell-n hv-cn-${esc(sev)}">${n}</span>`;
+    html += `<span class="hv-cell-name">${esc(s.name)}</span><span class="hv-cell-meta">${s.lines}L</span></div>`;
+  }
+  html += '</div>';
+  return html;
+}
+
+// Findings for one file from the merged current state, shown inline in the file preview.
+function renderFileFindings(source) {
+  const run = mergedRunView(lastAnalysisSt);
+  if (!run) return '';
+  const hits = (run.result?.findings || [])
+    .map((f, i) => [f, i])
+    .filter(([f]) => (f.files || []).some((n) => findingFileIds(n, f.scope).includes(source.id)) && !isDismissed(f));
+  if (!hits.length) return '';
+  let html = `<div class="preview-findings"><div class="pf-label">Claude analysis — ${hits.length} finding${hits.length > 1 ? 's' : ''} for this file</div>`;
+  for (const [f, i] of hits) {
+    html += `<div class="analysis-card pf-card ${esc(`sev-${f.severity}`)}">`;
+    html += `<div class="analysis-card-head" onclick="this.parentElement.classList.toggle('expanded')">`;
+    html += `<span class="kind-badge ${esc(`kind-${f.kind}`)}">${esc(f.kind)}</span>`;
+    html += scopeBadge(f);
+    html += `<span class="analysis-card-title">${esc(f.title)}</span>`;
+    html += '<span class="card-actions">';
+    html += `<button class="card-btn" onclick="event.stopPropagation();_copyLatestFindingPrompt(${i})" title="Copy an agent-ready instruction for this finding">${COPY_ICON}Copy prompt</button>`;
+    html += `<button class="card-btn" onclick="event.stopPropagation();_dismissLatestFinding(this, ${i})" title="Drop this finding from the list">${DISMISS_ICON}Dismiss</button>`;
+    html += '</span></div>';
+    html += `<div class="analysis-card-detail">${esc(f.detail)}</div>`;
+    html += `<div class="analysis-card-suggestion">${esc(f.suggestion)}</div>`;
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
+
+// Indexes into the merged current state — the same list renderFileFindings
+// draws from, unlike the health view, which can show a historical run.
+function _copyLatestFindingPrompt(i) {
+  const f = mergedRunView(lastAnalysisSt)?.result?.findings?.[i];
+  if (f) copyText(findingPrompt(f), 'Prompt copied — paste into any Claude Code session');
+}
+
+// Dismissals share the health view's set, so a finding dropped here
+// disappears there too (and vice versa).
+function _dismissLatestFinding(btn, i) {
+  const f = mergedRunView(lastAnalysisSt)?.result?.findings?.[i];
+  if (f) dismissFinding(btn, f, renderPreview);
+}
+
+function _toggleFixSelect(idx) {
+  const f = analysisFindings[idx];
+  if (!f) return;
+  const key = findingKey(f);
+  if (fixSelected.has(key)) fixSelected.delete(key);
+  else fixSelected.add(key);
+  rerenderAnalysis();
+}
+
+function _copyFixPlan() {
+  const order = { high: 0, med: 1, low: 2 };
+  const picked = analysisFindings
+    .filter((f) => fixSelected.has(findingKey(f)))
+    .sort((a, b) => order[a.severity] - order[b.severity]);
+  if (!picked.length) return;
+  const plan = [
+    `Fix plan — ${picked.length} finding${picked.length > 1 ? 's' : ''} from a Claude Code memory audit, ordered by severity. Apply each in order.`,
+    '',
+    ...picked.map((f, i) => `## ${i + 1}. ${findingPrompt(f)}`),
+  ].join('\n\n');
+  copyText(
+    plan,
+    `Fix plan copied — ${picked.length} finding${picked.length > 1 ? 's' : ''}, paste into any Claude Code session`,
+  );
+}
+
 function renderAnalysisHead(st, r, ts) {
   const meta = [];
   if (ts) meta.push(analysisTimeAgo(ts));
@@ -1180,7 +1624,8 @@ function renderAnalysisHead(st, r, ts) {
   if (r?.durationMs != null) meta.push(`${Math.round(r.durationMs / 1000)}s`);
   if (r?.model) meta.push(r.model);
   if (r?.scopeDesc) meta.push(`scope: ${r.scopeDesc}`);
-  if (st.stale && analysisRunIdx === 0) meta.push('memory changed since');
+  if (st.stale && analysisRunIdx <= 0) meta.push('memory changed since');
+  if (st.user?.stale && analysisRunIdx < 0) meta.push('user CLAUDE.md changed since');
   let html = '<div class="analysis-head">';
   html += '<span class="analysis-title">Claude analysis</span>';
   html += `<span class="analysis-meta">${esc(meta.join(' · '))}</span>`;
@@ -1194,49 +1639,75 @@ function renderAnalysisHead(st, r, ts) {
 }
 
 function _setAnalysisRun(i) {
-  resetAnalysisView(i);
+  resetAnalysisView(i); // clears the file filter, so the tree badges must be restored too
+  syncTreeHealth();
   rerenderAnalysis();
 }
 
-async function _deleteAnalysisRun(ev, ts) {
+async function _deleteAnalysisRun(ev, ts, scope) {
   ev.stopPropagation();
   await fetch('/api/memory/analysis/delete-run', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ ts }),
+    body: JSON.stringify({ ts, scope }),
   });
   resetAnalysisView();
   analysisTs = null; // force refreshAnalysis to re-adopt the new latest run
   refreshAnalysis();
 }
 
-// Past runs for this project (newest first).
+// Past runs, newest first — project runs plus the shared user-scope runs.
 function renderRunsStrip(st) {
-  const runs = st.runs || [];
+  const runs = allAnalysisRuns(st);
   if (!runs.length) return '';
   let html = '<div class="runs-strip"><span class="runs-label">runs</span>';
-  runs.forEach((run, i) => {
+  if (runs.length > 1) {
+    html += `<span class="run-chip${analysisRunIdx < 0 ? ' active' : ''}" onclick="_setAnalysisRun(-1)" title="Each file shows the newest run that audited it">current · ${runs.length} runs merged</span>`;
+  }
+  runs.forEach(({ run, scope }, i) => {
     const r = run.result || {};
     const bits = [analysisTimeAgo(run.ts)];
+    if (scope === 'user') bits.push('user');
     if (r.model) bits.push(r.model);
     if (r.costUsd != null) bits.push(`$${r.costUsd.toFixed(2)}`);
-    html += `<span class="run-chip${i === analysisRunIdx ? ' active' : ''}" onclick="_setAnalysisRun(${i})" title="${esc(r.scopeDesc || '')}">${esc(bits.join(' · '))}<button class="run-chip-x" onclick="_deleteAnalysisRun(event, ${escAttrJs(run.ts)})" title="Delete this run">×</button></span>`;
+    html += `<span class="run-chip${scope === 'user' ? ' run-chip-user' : ''}${i === analysisRunIdx ? ' active' : ''}" onclick="_setAnalysisRun(${i})" title="${esc(r.scopeDesc || '')}">${esc(bits.join(' · '))}<button class="run-chip-x" onclick="_deleteAnalysisRun(event, ${escAttrJs(run.ts)}, '${escAttrJs(scope)}')" title="Delete this run">×</button></span>`;
   });
   html += '</div>';
   return html;
 }
 
-function renderAnalysis(st) {
-  if (st.running) {
-    return '<div class="analysis-box"><div class="analysis-status"><span class="analysis-spinner"></span>Analyzing memory with Claude Code — usually 30–90s…</div></div>';
+// The previous review stays on screen while runs are in flight — running state is a
+// banner above it, not a replacement view.
+function renderRunningBanner(st) {
+  const pending = st.pending || [];
+  if (!pending.length) return '';
+  let html = '';
+  for (const p of pending) {
+    const bits = [];
+    if (p.model) bits.push(p.model);
+    if (p.scopeDesc) bits.push(p.scopeDesc);
+    if (p.startedAt) bits.push(`started ${analysisTimeAgo(p.startedAt)}`);
+    const meta = bits.length ? ` <span class="analysis-meta">${esc(bits.join(' · '))}</span>` : '';
+    if (p.stalled) {
+      html += `<div class="analysis-status analysis-stalled">Run appears stalled (server restarted mid-run?) — its result will surface if it ever completes.${meta}</div>`;
+    } else {
+      html += `<div class="analysis-status"><span class="analysis-spinner"></span>Analyzing memory with Claude Code — usually 30–90s…${meta}</div>`;
+    }
   }
-  const runs = st.runs || [];
-  const shown = runs[analysisRunIdx];
+  return html;
+}
+
+function renderAnalysis(st) {
+  const shown = analysisRunIdx < 0 ? mergedRunView(st) : allAnalysisRuns(st)[analysisRunIdx]?.run;
+  // The wrapper stays in the DOM even when empty so quiet polls can update just
+  // the banner in place instead of rebuilding the whole review (see refreshAnalysis).
   let html = '<div class="analysis-box">';
+  html += `<div id="runningBanner">${renderRunningBanner(st)}</div>`;
   html += renderAnalysisHead(st, shown?.result, shown?.ts);
+  // A failed run no longer wipes history — show the error above the surviving review.
   if (st.error) {
-    html += `<div class="analysis-status analysis-status-error">${esc(st.error)} <button class="action-btn small" onclick="_runAnalysis(true)">Retry</button></div></div>`;
-    return html;
+    html += `<div class="analysis-status analysis-status-error">${esc(st.error)} <button class="action-btn small" onclick="_runAnalysis(true)">Retry</button></div>`;
+    if (!shown) return `${html}</div>`;
   }
   if (!shown) {
     html += '<div class="analysis-empty">No analysis yet — pick a scope and run one.</div></div>';
@@ -1245,9 +1716,11 @@ function renderAnalysis(st) {
   const r = shown.result;
   analysisFindings = r.findings || [];
   const byName = Object.fromEntries(stackData.map((s) => [s.name, s]));
+  html += renderHealthDash(st, shown);
   if (r.summary) html += `<div class="analysis-summary">${esc(r.summary)}</div>`;
+  html += renderMemoryMap(shown);
 
-  const live = analysisFindings.filter((f) => !analysisDismissed.has(findingKey(f)));
+  const live = analysisFindings.filter((f) => !isDismissed(f));
   const count = (sev) => live.filter((f) => f.severity === sev).length;
   if (analysisFindings.length) {
     html += '<div class="sev-strip">';
@@ -1257,20 +1730,31 @@ function renderAnalysis(st) {
       if (sev !== 'all') html += '<span class="dot"></span>';
       html += `${sev} ${n}</button>`;
     }
-    if (analysisDismissed.size) {
-      html += `<span class="dismissed-note">${analysisDismissed.size} dismissed · <a onclick="_restoreDismissed()">restore</a></span>`;
+    if (analysisFileFilter) {
+      html += `<button class="sev-pill active" onclick="_setFileFilter('${escAttrJs(analysisFileFilter.id)}','${escAttrJs(analysisFileFilter.name)}')" title="Clear the file filter">${esc(analysisFileFilter.name)} ×</button>`;
+    }
+    const nDismissed = dismissedCount();
+    if (nDismissed) {
+      html += `<span class="dismissed-note">${nDismissed} dismissed · <a onclick="_restoreDismissed()">restore</a></span>`;
+    }
+    if (fixSelected.size) {
+      html += `<button class="card-btn fix-plan-btn" onclick="_copyFixPlan()" title="Copy the selected findings as one ordered fix prompt">${COPY_ICON}Copy fix plan (${fixSelected.size})</button>`;
     }
     html += '</div>';
   }
 
-  const visible = live.filter((f) => analysisFilter === 'all' || f.severity === analysisFilter);
+  const visible = live.filter(
+    (f) => (analysisFilter === 'all' || f.severity === analysisFilter) && findingMatchesFileFilter(f),
+  );
   if (!analysisFindings.length) html += '<div class="analysis-empty">No issues found.</div>';
   else if (!visible.length) html += '<div class="analysis-empty">Nothing here — filtered out or dismissed.</div>';
   for (const f of visible) {
     const idx = analysisFindings.indexOf(f);
     html += `<div class="analysis-card ${esc(`sev-${f.severity}`)}">`;
     html += '<div class="analysis-card-head">';
+    html += `<input type="checkbox" class="fix-check" ${fixSelected.has(findingKey(f)) ? 'checked ' : ''}onclick="_toggleFixSelect(${idx})" title="Queue for the fix plan">`;
     html += `<span class="kind-badge ${esc(`kind-${f.kind}`)}">${esc(f.kind)}</span>`;
+    html += scopeBadge(f);
     html += `<span class="analysis-card-title">${esc(f.title)}</span>`;
     html += '<span class="card-actions">';
     html += `<button class="card-btn" onclick="_copyFindingPrompt(${idx})" title="Copy an agent-ready instruction for this finding">${COPY_ICON}Copy prompt</button>`;
@@ -1280,10 +1764,13 @@ function renderAnalysis(st) {
     html += '<div class="analysis-card-files">';
     if (!files.length) html += '<span class="no-files">no file — new memory suggested</span>';
     for (const fn of files) {
-      const child = byName[fn];
+      // Same name-or-path resolution as the map and tree badges — a chip must
+      // stay clickable when the agent reported a path instead of the name.
+      const ids = findingFileIds(fn, f.scope);
+      const child = stackData.find((s) => ids.includes(s.id)) || byName[fn];
       const scopeTag = fileChipScope(child);
       if (child) {
-        html += `<a class="file-chip" href="#" onclick="closeModal('analysisModal');selectFile('${escAttrJs(child.id)}');return false" title="${esc(child.path)}">${FILE_ICON}${esc(fn)}<span class="fscope fscope-${esc(scopeTag)}">${esc(scopeTag)}</span></a>`;
+        html += `<a class="file-chip" href="#" onclick="selectFile('${escAttrJs(child.id)}');return false" title="${esc(child.path)}">${FILE_ICON}${esc(fn)}<span class="fscope fscope-${esc(scopeTag)}">${esc(scopeTag)}</span></a>`;
       } else {
         html += `<span class="file-chip">${FILE_ICON}${esc(fn)}</span>`;
       }
@@ -1301,8 +1788,42 @@ function renderAnalysis(st) {
 
 // #region RENDER_BUDGET
 
+let footprintHighlight = false;
+let footprintScope = null; // null = whole footprint; a scope name = just that segment's files
+let footprintIds = new Set(); // source ids the server counted into the footprint
+
+// Clicking the top bar highlights all footprint files; clicking a segment narrows
+// the highlight to that segment's scope (the skill segment = skill descriptions).
+function _toggleFootprint(scope = null, ev) {
+  if (ev) ev.stopPropagation();
+  if (footprintHighlight && footprintScope === scope) {
+    footprintHighlight = false;
+    footprintScope = null;
+  } else {
+    footprintHighlight = true;
+    footprintScope = scope;
+  }
+  document.body.classList.toggle('fp-mode', footprintHighlight);
+  applySegmentState();
+  renderTree();
+}
+
+function footprintHit(item) {
+  if (footprintScope === 'skill') return item.scope === 'skill' && !item.parentId;
+  if (footprintScope) return footprintIds.has(item.id) && item.scope === footprintScope;
+  return footprintIds.has(item.id);
+}
+
+function applySegmentState() {
+  const scoped = footprintHighlight && footprintScope !== null;
+  for (const el of document.querySelectorAll('.budget-segment')) {
+    el.classList.toggle('seg-dim', scoped && el.dataset.scope !== footprintScope);
+  }
+}
+
 function renderBudget() {
   if (!summaryData) return;
+  footprintIds = new Set(summaryData.ids || []);
 
   // Summary stat cards
   document.getElementById('statFiles').textContent = summaryData.totalFiles;
@@ -1325,13 +1846,14 @@ function renderBudget() {
     const chars = scopeTotals[scope];
     if (!chars) continue;
     const pct = (chars / totalChars) * 100;
-    html += `<div class="budget-segment" style="width:${pct}%;background:var(--scope-${scope})" title="${SCOPE_LABELS[scope] || scope}: ${chars.toLocaleString()} chars (${pct.toFixed(1)}%)"></div>`;
+    html += `<div class="budget-segment" data-scope="${esc(scope)}" onclick="_toggleFootprint('${escAttrJs(scope)}', event)" style="width:${pct}%;background:var(--scope-${scope})" title="${SCOPE_LABELS[scope] || scope}: ${chars.toLocaleString()} chars (${pct.toFixed(1)}%) — click to highlight"></div>`;
   }
   if (skillDescChars) {
     const pct = (skillDescChars / totalChars) * 100;
-    html += `<div class="budget-segment" style="width:${pct}%;background:var(--scope-skill)" title="Skill descriptions (${esc(summaryData.skillDesc.count)} enabled): ${skillDescChars.toLocaleString()} chars (${pct.toFixed(1)}%)"></div>`;
+    html += `<div class="budget-segment" data-scope="skill" onclick="_toggleFootprint('skill', event)" style="width:${pct}%;background:var(--scope-skill)" title="Skill descriptions (${esc(summaryData.skillDesc.count)} enabled): ${skillDescChars.toLocaleString()} chars (${pct.toFixed(1)}%) — click to highlight"></div>`;
   }
   segContainer.innerHTML = html;
+  applySegmentState();
 }
 
 // #endregion RENDER_BUDGET
@@ -1342,18 +1864,17 @@ async function loadData() {
   try {
     [stackData, summaryData] = await Promise.all([fetchJSON('/api/stack'), fetchJSON('/api/summary')]);
     invalidateTreeIndex();
+    renderBudget(); // refreshes footprintIds, which renderTree's highlight reads
     renderTree();
-    renderBudget();
-    if (!selectedFileId) {
+    refreshAnalysis(); // health dots on the tree come from the latest run
+    if (!selectedFileId && !healthViewOpen) {
       const proj = stackData.find((s) => s.scope === 'project' && s.name === 'CLAUDE.md');
       const user = stackData.find((s) => s.scope === 'user' && s.name === 'CLAUDE.md');
       const auto = proj || user;
       if (auto) selectedFileId = auto.id;
     }
-    if (selectedFileId) {
-      renderTree();
-      renderPreview();
-    }
+    if (selectedFileId) renderTree();
+    renderPreview();
   } catch (err) {
     showToast(`Failed to load: ${err.message}`, 'error');
   }
@@ -1396,6 +1917,11 @@ document.addEventListener('keydown', (e) => {
     }
     return;
   }
+  if (e.key === 'Escape' && healthViewOpen) {
+    e.preventDefault();
+    openHealthView();
+    return;
+  }
   if (e.key === 't') toggleTheme();
   if (e.key === 'r') refreshData();
   if (e.key === '?') {