claude-code-memory-explorer 0.10.0 → 0.11.1

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
 
@@ -58,7 +59,7 @@ function highlightSource(text, fileName) {
       if (fm) {
         const fmHtml = hljs.highlight(fm[1], { language: 'yaml' }).value;
         const bodyHtml = hljs.highlight(fm[2], { language: 'markdown' }).value;
-        return `<span class="hl-frontmatter">---</span>\n${fmHtml}\n<span class="hl-frontmatter">---</span>\n${bodyHtml}`;
+        return `<span class="hl-fm-block"><span class="hl-frontmatter">---</span>\n${fmHtml}\n<span class="hl-frontmatter">---</span></span>\n${bodyHtml}`;
       }
     }
     return hljs.highlight(text, { language: lang }).value;
@@ -304,6 +305,13 @@ function toggleHelpModal() {
   document.getElementById('helpModal').classList.toggle('open');
 }
 
+function openHealthView() {
+  healthViewOpen = !healthViewOpen;
+  document.getElementById('analyzeBtn')?.classList.toggle('active', healthViewOpen);
+  renderPreview();
+  if (healthViewOpen) refreshAnalysis();
+}
+
 function bindModalKeys(inputId, modalId, submitFn) {
   document.getElementById(inputId).addEventListener('keydown', (e) => {
     if (e.key === 'Enter') {
@@ -321,12 +329,13 @@ function bindModalKeys(inputId, modalId, submitFn) {
 
 // #region RENDER_TREE
 
-const SCOPE_ORDER = ['policy', 'user', 'project', 'rule', 'memory', 'agent-memory'];
+const SCOPE_ORDER = ['policy', 'user', 'project', 'rule', 'memory', 'skill', 'agent-memory'];
 const SCOPE_LABELS = {
   policy: 'Managed Policy',
   user: 'User',
   project: 'Project',
   rule: 'Rules',
+  skill: 'Skills',
   memory: 'Auto Memory',
   'agent-memory': 'Agent Memory',
 };
@@ -335,6 +344,7 @@ const LOAD_ICONS = {
   startup: '\u25D2',
   conditional: '\u25CB',
   ondemand: '\u25CC',
+  tree: '\u25CE',
   import: '@',
   link: '\u2197',
 };
@@ -343,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)',
 };
@@ -390,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];
@@ -398,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) {
@@ -502,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);
@@ -637,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 =
@@ -667,14 +698,30 @@ async function renderPreview() {
   html += `<button class="action-btn small" onclick="_confirmDeleteFile('${escAttrJs(source.path)}','${escAttrJs(source.name)}')" title="Delete file"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg></button>`;
   html += '</div></div>';
 
+  // Description gets its own full-width line; the rest stay as key:value chips
+  const fmDesc =
+    fileData.frontmatter && typeof fileData.frontmatter.description === 'string'
+      ? fileData.frontmatter.description.replace(/\s+/g, ' ')
+      : '';
+  if (fmDesc)
+    html += `<div class="preview-desc" title="Click to expand" onclick="this.classList.toggle('expanded')">${esc(fmDesc)}</div>`;
+
   // Badges row
   html += '<div class="preview-badges">';
   html += `<span class="load-badge load-${source.load}">${esc(source.load)}</span>`;
   html += `<span class="tag-badge">${source.lines}L / ${formatBytes(source.bytes)}</span>`;
   if (fileData.frontmatter) {
     for (const [k, v] of Object.entries(fileData.frontmatter)) {
-      const val = Array.isArray(v) ? v.join(', ') : v;
-      html += `<span class="tag-badge">${esc(k)}: ${esc(String(val))}</span>`;
+      if (k === 'description' && fmDesc) continue;
+      let val;
+      if (Array.isArray(v)) val = v.join(', ');
+      else if (v && typeof v === 'object')
+        val = Object.entries(v)
+          .map(([ck, cv]) => `${ck}=${cv}`)
+          .join(', ');
+      else val = String(v).replace(/\s+/g, ' ');
+      const shown = val.length > 72 ? `${val.slice(0, 69)}…` : val;
+      html += `<span class="tag-badge" title="${esc(`${k}: ${val}`)}"><span class="tag-k">${esc(k)}</span>${esc(shown)}</span>`;
     }
   }
   html += '</div>';
@@ -696,14 +743,17 @@ async function renderPreview() {
     html += '</div>';
   }
 
+  // File path lives inside the header as a muted line instead of its own band
+  html += `<div class="preview-filepath" title="${esc(source.path)}">${esc(source.path)}</div>`;
   html += '</div>';
 
-  // File path
-  html += `<div class="preview-filepath">${esc(source.path)}</div>`;
+  html += renderFileFindings(source);
 
   const hl = (text) => {
     const { text: processed, placeholders } = linkifyImports(text, source.id);
-    return restorePlaceholders(highlightSource(processed, source.name), placeholders);
+    // Skill names aren't filenames (e.g. "aspire") — derive the language from the real file
+    const fileName = source.path ? source.path.split(/[\\/]/).pop() : source.name;
+    return restorePlaceholders(highlightSource(processed, fileName), placeholders);
   };
 
   if (showMemoryTable) {
@@ -848,41 +898,941 @@ async function openInEditor(filePath) {
 
 // #endregion RENDER_PREVIEW
 
+// #region ANALYZER
+
+let analysisPollTimer = null;
+let lastAnalysisSt = null;
+let analysisFindings = []; // findings of the rendered result, addressed by index from handlers
+let analysisFilter = 'all';
+// 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 = -1) {
+  analysisRunIdx = runIdx;
+  analysisFilter = 'all';
+  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
+const scopeCollapsed = new Set();
+const ANALYSIS_MODELS = ['sonnet', 'opus', 'fable'];
+let analysisModel = ANALYSIS_MODELS.includes(localStorage.getItem('analysisModel'))
+  ? localStorage.getItem('analysisModel')
+  : 'sonnet';
+
+function _setAnalysisModel(m) {
+  if (!ANALYSIS_MODELS.includes(m)) return;
+  analysisModel = m;
+  try {
+    localStorage.setItem('analysisModel', m);
+  } catch {}
+  rerenderAnalysis();
+}
+
+async function _runAnalysis(force, ids) {
+  try {
+    const body = { force: !!force, model: analysisModel };
+    if (Array.isArray(ids) && ids.length) body.ids = ids;
+    const res = await fetch('/api/memory/analyze', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      const msg = await res
+        .json()
+        .then((e) => e.error)
+        .catch(() => `Analyze failed (${res.status})`);
+      showToast(msg, 'error');
+      return;
+    }
+    const data = await res.json().catch(() => ({}));
+    if (data.cached) showToast('Memory unchanged — showing cached analysis. Use Re-run to force.', 'info');
+  } catch (err) {
+    showToast(err.message, 'error');
+    return;
+  }
+  refreshAnalysis();
+}
+
+async function refreshAnalysis() {
+  let st;
+  try {
+    st = await fetchJSON('/api/memory/analysis');
+  } catch {
+    return;
+  }
+  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;
+  // 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();
+    const el = document.getElementById('analysisSection');
+    if (el) {
+      el.innerHTML = renderAnalysis(st);
+      applyScopeIndeterminate(el);
+    }
+  }
+  lastPollKey = pollKey;
+  clearTimeout(analysisPollTimer);
+  // 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() {
+  const el = document.getElementById('analysisSection');
+  if (!el || !lastAnalysisSt) return;
+  el.innerHTML = renderAnalysis(lastAnalysisSt);
+  applyScopeIndeterminate(el);
+}
+
+// `indeterminate` is a DOM property, not an attribute — set it after every innerHTML render.
+function applyScopeIndeterminate(el) {
+  for (const box of el.querySelectorAll('input[data-ind]')) box.indeterminate = true;
+}
+
+// #region ANALYZER_SCOPE
+
+const CLAUDE_MD_SCOPES = new Set(['project', 'local']);
+
+function analysisScopeGroups() {
+  return [
+    {
+      key: 'memory',
+      label: 'Auto memory',
+      cls: 't-memory',
+      tag: 'memory',
+      items: stackData.filter((s) => s.scope === 'memory'),
+    },
+    {
+      key: 'skill',
+      label: 'Skills',
+      cls: 't-skill',
+      tag: 'skill',
+      items: stackData.filter((s) => s.scope === 'skill' && !s.parentId),
+    },
+    {
+      key: 'claudemd',
+      label: 'CLAUDE.md',
+      cls: 't-claudemd',
+      tag: 'md',
+      items: stackData.filter((s) => CLAUDE_MD_SCOPES.has(s.scope) && !s.parentId),
+    },
+    {
+      key: 'agent',
+      label: 'Agent memory',
+      cls: 't-agent',
+      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);
+}
+
+function _toggleScopePanel() {
+  scopePanelOpen = !scopePanelOpen;
+  if (scopePanelOpen && !scopeChecked) {
+    // default scope = auto memory only (skills, agent memory, CLAUDE.md are opt-in)
+    scopeChecked = new Set(stackData.filter((s) => s.scope === 'memory').map((s) => s.id));
+  }
+  rerenderAnalysis();
+}
+
+function _toggleScopeGroup(key) {
+  const g = analysisScopeGroups().find((x) => x.key === key);
+  if (!g) return;
+  const allOn = g.items.every((s) => scopeChecked.has(s.id));
+  for (const s of g.items) {
+    if (allOn) scopeChecked.delete(s.id);
+    else scopeChecked.add(s.id);
+  }
+  rerenderAnalysis();
+}
+
+function _toggleScopeLeaf(id) {
+  if (scopeChecked.has(id)) scopeChecked.delete(id);
+  else scopeChecked.add(id);
+  rerenderAnalysis();
+}
+
+function _toggleScopeCollapse(key, e) {
+  e.stopPropagation();
+  if (scopeCollapsed.has(key)) scopeCollapsed.delete(key);
+  else scopeCollapsed.add(key);
+  rerenderAnalysis();
+}
+
+function _runScopedAnalysis() {
+  if (!scopeChecked?.size) return;
+  scopePanelOpen = false;
+  _runAnalysis(true, [...scopeChecked]);
+}
+
+function renderScopePanel() {
+  if (!scopePanelOpen || !scopeChecked) return '';
+  let html = '<div class="scope-panel open">';
+  html += '<div class="scope-panel-title">Select what to analyze</div>';
+  html += '<div class="scope-tree">';
+  for (const g of analysisScopeGroups()) {
+    const on = g.items.filter((s) => scopeChecked.has(s.id)).length;
+    const collapsed = scopeCollapsed.has(g.key);
+    html += `<div class="scope-group${collapsed ? ' collapsed' : ''}">`;
+    html += `<div class="scope-row" onclick="_toggleScopeGroup('${escAttrJs(g.key)}')">`;
+    html += `<span class="scope-caret" onclick="_toggleScopeCollapse('${escAttrJs(g.key)}', event)">${collapsed ? '▸' : '▾'}</span>`;
+    html += `<input type="checkbox" ${on === g.items.length ? 'checked' : ''} ${on > 0 && on < g.items.length ? 'data-ind="1"' : ''} onclick="event.preventDefault()">`;
+    html += `<span class="scope-tag ${esc(g.cls)}">${g.tag}</span>`;
+    html += `<span>${esc(g.label)}</span>`;
+    html += `<span class="scope-meta">${on}/${g.items.length}</span>`;
+    html += '</div>';
+    html += '<div class="scope-children">';
+    for (const s of g.items) {
+      html += `<div class="scope-row" onclick="_toggleScopeLeaf('${escAttrJs(s.id)}')">`;
+      html += `<input type="checkbox" ${scopeChecked.has(s.id) ? 'checked' : ''} onclick="event.preventDefault()">`;
+      html += `<span>${esc(s.name)}</span>`;
+      html += `<span class="scope-meta">${s.lines}L</span>`;
+      html += '</div>';
+    }
+    html += '</div></div>';
+  }
+  html += '</div>';
+  const n = scopeChecked.size;
+  html += '<div class="scope-footer">';
+  html += `<span class="scope-hint">${n} file${n === 1 ? '' : 's'} selected</span>`;
+  html += '<div class="scope-model" title="Model for this analysis">';
+  for (const m of ANALYSIS_MODELS)
+    html += `<button class="scope-model-opt${m === analysisModel ? ' active' : ''}" onclick="_setAnalysisModel('${escAttrJs(m)}')">${m}</button>`;
+  html += '</div>';
+  html += '<button class="action-btn small" onclick="_toggleScopePanel()">Cancel</button>';
+  html += `<button class="action-btn small primary" ${n ? '' : 'disabled'} onclick="_runScopedAnalysis()">Run analysis (${n})</button>`;
+  html += '</div></div>';
+  return html;
+}
+
+// #endregion ANALYZER_SCOPE
+
+// #region ANALYZER_ACTIONS
+
+function memoryDirPath() {
+  const idx = stackData.find((s) => s.scope === 'memory' && s.name === 'MEMORY.md');
+  return idx ? idx.path.replace(/[\\/][^\\/]+$/, '') : null;
+}
+
+function findingPrompt(f) {
+  let header;
+  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:";
+  }
+  const lines = [header, '', `Finding (${f.kind}, ${f.severity}): ${f.title}`, f.detail, '', `Action: ${f.suggestion}`];
+  if ((f.files || []).length) lines.push(`Files: ${f.files.join(', ')}`);
+  if (f.scope !== 'user') 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)
+    .then(() => showToast(okMsg, 'info'))
+    .catch(() => showToast('Clipboard unavailable', 'error'));
+}
+
+function _copyFindingPrompt(idx) {
+  const f = analysisFindings[idx];
+  if (f) copyText(findingPrompt(f), 'Prompt copied — paste into any Claude Code session');
+}
+
+function _copyAllFindings() {
+  const live = analysisFindings.filter((f) => !isDismissed(f));
+  if (!live.length) return;
+  copyText(live.map(findingPrompt).join('\n\n---\n\n'), `${live.length} prompts copied`);
+}
+
+// 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(() => {
+    // 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() {
+  for (const scope of Object.keys(dismissedByScope)) {
+    if (dismissedByScope[scope].size) persistDismissed(scope, { all: true });
+    dismissedByScope[scope] = new Set();
+  }
+  syncTreeHealth();
+  rerenderAnalysis();
+}
+
+function _setAnalysisFilter(sev) {
+  analysisFilter = sev;
+  rerenderAnalysis();
+}
+
+// #endregion ANALYZER_ACTIONS
+
+function analysisTimeAgo(ts) {
+  const min = Math.round((Date.now() - ts) / 60000);
+  if (min < 1) return 'just now';
+  if (min < 60) return `${min}m ago`;
+  const h = Math.round(min / 60);
+  return h < 24 ? `${h}h ago` : `${Math.round(h / 24)}d ago`;
+}
+
+const COPY_ICON =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+const DISMISS_ICON =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>';
+const FILE_ICON =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>';
+
+function fileChipScope(source) {
+  if (!source) return '';
+  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));
+  if (r?.costUsd != null) meta.push(`$${r.costUsd.toFixed(2)}`);
+  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.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>`;
+  if (r && (r.findings || []).length)
+    html += '<button class="action-btn small" onclick="_copyAllFindings()">Copy all</button>';
+  html += `<button class="action-btn small primary" onclick="_toggleScopePanel()">New analysis…</button>`;
+  html += '</div>';
+  html += renderRunsStrip(st);
+  html += renderScopePanel();
+  return html;
+}
+
+function _setAnalysisRun(i) {
+  resetAnalysisView(i); // clears the file filter, so the tree badges must be restored too
+  syncTreeHealth();
+  rerenderAnalysis();
+}
+
+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, scope }),
+  });
+  resetAnalysisView();
+  analysisTs = null; // force refreshAnalysis to re-adopt the new latest run
+  refreshAnalysis();
+}
+
+// Past runs, newest first — project runs plus the shared user-scope runs.
+function renderRunsStrip(st) {
+  const runs = allAnalysisRuns(st);
+  if (!runs.length) return '';
+  let html = '<div class="runs-strip"><span class="runs-label">runs</span>';
+  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${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;
+}
+
+// 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>`;
+    }
+  }
+  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>`;
+    if (!shown) return `${html}</div>`;
+  }
+  if (!shown) {
+    html += '<div class="analysis-empty">No analysis yet — pick a scope and run one.</div></div>';
+    return html;
+  }
+  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) => !isDismissed(f));
+  const count = (sev) => live.filter((f) => f.severity === sev).length;
+  if (analysisFindings.length) {
+    html += '<div class="sev-strip">';
+    for (const sev of ['all', 'high', 'med', 'low']) {
+      const n = sev === 'all' ? live.length : count(sev);
+      html += `<button class="sev-pill${analysisFilter === sev ? ' active' : ''}" data-sev="${esc(sev)}" onclick="_setAnalysisFilter('${escAttrJs(sev)}')">`;
+      if (sev !== 'all') html += '<span class="dot"></span>';
+      html += `${sev} ${n}</button>`;
+    }
+    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) && 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>`;
+    html += `<button class="card-btn" onclick="_dismissFinding(this, ${idx})" title="Drop this finding from the list">${DISMISS_ICON}Dismiss</button>`;
+    html += '</span></div>';
+    const files = f.files || [];
+    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) {
+      // 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="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>`;
+      }
+    }
+    html += '</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;
+}
+
+// #endregion ANALYZER
+
 // #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;
-  document.getElementById('statLines').textContent = summaryData.totalLines.toLocaleString();
+  document.getElementById('statChars').textContent = summaryData.totalChars.toLocaleString();
   document.getElementById('statBytes').textContent = formatBytes(summaryData.totalBytes);
   document.getElementById('statAlways').textContent = summaryData.alwaysLoaded;
 
   // Budget text
   document.getElementById('budgetText').textContent =
-    `${summaryData.totalLines.toLocaleString()} lines / ${formatBytes(summaryData.totalBytes)}`;
+    `${summaryData.totalChars.toLocaleString()} chars / ${formatBytes(summaryData.totalBytes)}`;
 
-  // Budget segments — proportional by lines per scope
+  // Budget segments — proportional by chars per scope; the server's summary owns
+  // the footprint filter, the client only renders its per-scope totals.
   const segContainer = document.getElementById('budgetSegments');
-  if (!stackData.length) {
-    segContainer.innerHTML = '';
-    return;
-  }
-
-  const scopeTotals = {};
-  for (const s of stackData) {
-    scopeTotals[s.scope] = (scopeTotals[s.scope] || 0) + (s.lines || 0);
-  }
-  const totalLines = summaryData.totalLines || 1;
+  const scopeTotals = summaryData.scopeChars || {};
+  const skillDescChars = summaryData.skillDesc?.chars || 0;
+  const totalChars = summaryData.totalChars || 1;
   let html = '';
   for (const scope of SCOPE_ORDER) {
-    const lines = scopeTotals[scope];
-    if (!lines) continue;
-    const pct = (lines / totalLines) * 100;
-    html += `<div class="budget-segment" style="width:${pct}%;background:var(--scope-${scope})" title="${SCOPE_LABELS[scope] || scope}: ${lines} lines (${pct.toFixed(1)}%)"></div>`;
+    const chars = scopeTotals[scope];
+    if (!chars) continue;
+    const pct = (chars / totalChars) * 100;
+    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" 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
@@ -893,18 +1843,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');
   }
@@ -947,6 +1896,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 === '?') {