claude-code-memory-explorer 0.11.1 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-memory-explorer",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "Memory explorer dashboard for Claude Code",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -221,11 +221,10 @@ async function putProject(dirPath) {
 }
 
 function changeProject() {
-  const current = document.getElementById('projectBtn').title;
-  document.getElementById('projectPathInput').value = current;
-  renderRecentProjects();
+  document.getElementById('projectPickerInput').value = '';
+  renderProjectPicker();
   document.getElementById('projectPickerModal').classList.add('open');
-  setTimeout(() => document.getElementById('projectPathInput').focus(), 100);
+  setPickerMode(false);
 }
 
 async function submitProjectPicker() {
@@ -248,6 +247,8 @@ async function submitProjectPicker() {
   }
 }
 
+const RECENT_PROJECTS_MAX = 20;
+
 function getRecentProjects() {
   try {
     return JSON.parse(localStorage.getItem('recentProjects') || '[]');
@@ -259,38 +260,102 @@ function getRecentProjects() {
 function addRecentProject(p) {
   const recent = getRecentProjects().filter((r) => r !== p);
   recent.unshift(p);
-  localStorage.setItem('recentProjects', JSON.stringify(recent.slice(0, 10)));
+  localStorage.setItem('recentProjects', JSON.stringify(recent.slice(0, RECENT_PROJECTS_MAX)));
 }
 
-function _removeRecentProject(p, e) {
-  e.stopPropagation();
-  const recent = getRecentProjects().filter((r) => r !== p);
-  localStorage.setItem('recentProjects', JSON.stringify(recent));
-  renderRecentProjects();
+// The recents list is the switcher; typing a path is the secondary act behind "+ Add path".
+let pickerRows = [];
+let pickerIdx = -1;
+
+function setPickerMode(add) {
+  document.getElementById('projectPickerFilter').hidden = add;
+  document.getElementById('projectPickerAddForm').hidden = !add;
+  const input = document.getElementById(add ? 'projectPathInput' : 'projectPickerInput');
+  if (add) input.value = document.getElementById('projectBtn').title;
+  // The overlay fades in, so a focus() on a field that is still hidden is dropped.
+  setTimeout(() => input.focus(), 100);
 }
 
-function _selectRecentProject(p) {
-  document.getElementById('projectPathInput').value = p;
+function splitProjectPath(p) {
+  const trimmed = p.replace(/[/\\]+$/, '');
+  const cut = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
+  return { name: trimmed.slice(cut + 1), parent: trimmed.slice(0, Math.max(cut, 0)) };
 }
 
-function renderRecentProjects() {
-  const container = document.getElementById('recentProjectsList');
+function renderProjectPicker() {
+  const list = document.getElementById('projectPickerList');
+  const q = document.getElementById('projectPickerInput').value.trim().toLowerCase();
+  const current = document.getElementById('projectBtn').title;
   const recent = getRecentProjects();
-  if (!recent.length) {
-    container.innerHTML = '';
+  pickerRows = q ? recent.filter((p) => p.toLowerCase().includes(q)) : recent;
+  if (!pickerRows.length) {
+    pickerIdx = -1;
+    const msg = recent.length ? 'No projects match' : 'No recent projects — add one below';
+    list.innerHTML = `<div class="picker-empty">${msg}</div>`;
     return;
   }
-  container.innerHTML =
-    '<div class="recent-projects-label">Recent</div>' +
-    recent
-      .map(
-        (p) =>
-          `<div class="recent-project-item" onclick="_selectRecentProject('${escAttrJs(p)}')">` +
-          `<span>${esc(p)}</span>` +
-          `<button class="recent-project-remove" onclick="_removeRecentProject('${escAttrJs(p)}', event)" title="Remove">&#10005;</button>` +
-          `</div>`,
-      )
-      .join('');
+  list.innerHTML = pickerRows
+    .map((p, i) => {
+      const { name, parent } = splitProjectPath(p);
+      const cur = p === current;
+      return `<div class="picker-row${cur ? ' current' : ''}" onclick="_pickProject(${i})" title="${esc(p)}">
+        <span class="picker-name">${esc(name)}</span>
+        <span class="picker-parent">${esc(parent)}</span>
+        ${cur ? '<span class="picker-tag">current</span>' : ''}
+        <button class="picker-remove" onclick="_removeRecentProject(${i}, event)" title="Remove">&#10005;</button>
+      </div>`;
+    })
+    .join('');
+  // Opens on the first row that would actually change something.
+  setPickerCursor(pickerRows.findIndex((p) => p !== current));
+}
+
+function setPickerCursor(idx) {
+  const list = document.getElementById('projectPickerList');
+  list.children[pickerIdx]?.classList.remove('selected');
+  pickerIdx = Math.min(Math.max(idx, 0), pickerRows.length - 1);
+  const row = list.children[pickerIdx];
+  row?.classList.add('selected');
+  row?.scrollIntoView({ block: 'nearest' });
+}
+
+function _pickProject(idx) {
+  const p = pickerRows[idx];
+  if (!p) return;
+  document.getElementById('projectPathInput').value = p;
+  submitProjectPicker();
+}
+
+function _removeRecentProject(idx, e) {
+  e.stopPropagation();
+  const target = pickerRows[idx];
+  if (!target) return;
+  localStorage.setItem('recentProjects', JSON.stringify(getRecentProjects().filter((p) => p !== target)));
+  renderProjectPicker();
+}
+
+function initProjectPicker() {
+  document.getElementById('projectPickerAdd').addEventListener('click', () => setPickerMode(true));
+  document.getElementById('projectPickerBack').addEventListener('click', () => setPickerMode(false));
+  const filter = document.getElementById('projectPickerInput');
+  filter.addEventListener('input', renderProjectPicker);
+  filter.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeModal('projectPickerModal');
+    else if (e.key === 'ArrowDown' || (e.key === 'n' && e.ctrlKey)) setPickerCursor(pickerIdx + 1);
+    else if (e.key === 'ArrowUp' || (e.key === 'p' && e.ctrlKey)) setPickerCursor(pickerIdx - 1);
+    else if (e.key === 'Enter') _pickProject(pickerIdx);
+    else return;
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  document.getElementById('projectPathInput').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') submitProjectPicker();
+    // Escape steps back to the list rather than closing — the list is where you came from.
+    else if (e.key === 'Escape') setPickerMode(false);
+    else return;
+    e.preventDefault();
+    e.stopPropagation();
+  });
 }
 
 // #endregion PROJECT
@@ -301,7 +366,80 @@ function closeModal(id) {
   document.getElementById(id).classList.remove('open');
 }
 
+// Each entry pairs a left and a right group onto the same grid rows, so their
+// headings sit level and the shorter group just leaves empty rows.
+// `combo` joins the keys with a plus (a chord) instead of listing them as
+// alternatives; `hub` marks rows that only work inside Claude Code Hub.
+const SHORTCUT_PAIRS = [
+  [
+    {
+      title: 'Navigate',
+      rows: [
+        { keys: ['j', '↓'], label: 'Next item' },
+        { keys: ['k', '↑'], label: 'Previous item' },
+        { keys: ['l', '→'], label: 'Expand / enter child' },
+        { keys: ['h', '←'], label: 'Collapse / parent' },
+        { keys: ['Enter'], label: 'Select item' },
+        { keys: ['Esc'], label: 'Close modal' },
+      ],
+    },
+    {
+      title: 'Actions',
+      rows: [
+        { keys: ['e'], label: 'Open in editor' },
+        { keys: ['r'], label: 'Refresh data' },
+        { keys: ['t'], label: 'Toggle theme' },
+        { keys: ['Shift', 'P'], combo: true, label: 'Switch project' },
+        { keys: ['?'], label: 'Show this help' },
+      ],
+    },
+  ],
+  [
+    {
+      title: 'Hub',
+      hub: true,
+      rows: [
+        { keys: ['Ctrl', 'Alt', '←/→'], combo: true, label: 'Previous / next hub app' },
+        { keys: ['Alt', '1…9'], combo: true, label: 'Jump to hub app by number' },
+        { keys: ['Ctrl', 'Alt', 'P'], combo: true, label: 'Project picker' },
+      ],
+    },
+  ],
+];
+
+const EMPTY_GROUP = { title: '', rows: [] };
+
+// Interleaves each pair's rows left-then-right so CSS grid auto-placement lands
+// them on shared row tracks (see .shortcuts in style.css).
+function buildHelpShortcuts() {
+  const cells = [];
+  SHORTCUT_PAIRS.forEach(([left, right = EMPTY_GROUP], pair) => {
+    const first = pair === 0 ? ' sc-first' : '';
+    const sides = [
+      [left, 'sc-l'],
+      [right, 'sc-r'],
+    ];
+    const head = (g, side) =>
+      g.title ? `<div class="${esc(`sc-group ${side}${first}${g.hub ? ' sc-hub' : ''}`)}">${g.title}</div>` : '';
+    cells.push(sides.map(([g, side]) => head(g, side)).join(''));
+    for (let i = 0; i < Math.max(left.rows.length, right.rows.length); i++) {
+      for (const [group, side] of sides) {
+        const row = group.rows[i];
+        if (!row) continue;
+        const sep = row.combo ? '<span class="sc-plus">+</span>' : '<span class="sc-or">/</span>';
+        const keys = row.keys.map((k) => `<kbd>${esc(k)}</kbd>`).join(sep);
+        const cls = side + (group.hub ? ' sc-hub' : '');
+        cells.push(`<dt class="${esc(cls)}">${keys}</dt><dd class="${esc(cls)}">${esc(row.label)}</dd>`);
+      }
+    }
+  });
+  return cells.join('');
+}
+
 function toggleHelpModal() {
+  const list = document.getElementById('helpShortcuts');
+  if (!list.childElementCount) list.innerHTML = buildHelpShortcuts();
+  list.classList.toggle('sc-standalone', !window.__HUB__?.enabled);
   document.getElementById('helpModal').classList.toggle('open');
 }
 
@@ -312,19 +450,6 @@ function openHealthView() {
   if (healthViewOpen) refreshAnalysis();
 }
 
-function bindModalKeys(inputId, modalId, submitFn) {
-  document.getElementById(inputId).addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      submitFn();
-    }
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeModal(modalId);
-    }
-  });
-}
-
 // #endregion MODAL
 
 // #region RENDER_TREE
@@ -1055,11 +1180,7 @@ async function refreshAnalysis() {
     computeTreeHealth(st);
     renderTree();
     if (isNew && !healthViewOpen && selectedFileId) renderPreview();
-    const el = document.getElementById('analysisSection');
-    if (el) {
-      el.innerHTML = renderAnalysis(st);
-      applyScopeIndeterminate(el);
-    }
+    rerenderAnalysis(st);
   }
   lastPollKey = pollKey;
   clearTimeout(analysisPollTimer);
@@ -1072,11 +1193,16 @@ async function refreshAnalysis() {
 
 // 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.
@@ -1216,9 +1342,25 @@ 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 sources = findingSources(f);
+  const paths = sources.map((s) => s.path);
   let header;
-  if (f.scope === 'user') {
+  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 {
@@ -1228,8 +1370,12 @@ function findingPrompt(f) {
       : "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.');
+  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');
 }
 
@@ -1890,7 +2036,7 @@ document.addEventListener('keydown', (e) => {
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
   const modal = document.querySelector('.modal-overlay.open');
   if (modal) {
-    if (e.key === 'Escape') {
+    if (e.key === 'Escape' || (e.key === '?' && modal.id === 'helpModal')) {
       modal.classList.remove('open');
       e.preventDefault();
     }
@@ -2095,7 +2241,7 @@ window.addEventListener('popstate', (e) => {
 document.addEventListener('DOMContentLoaded', async () => {
   loadTheme();
   initResize();
-  bindModalKeys('projectPathInput', 'projectPickerModal', submitProjectPicker);
+  initProjectPicker();
   // Handle ?project= query param, else restore last-used project from localStorage
   const params = new URLSearchParams(location.search);
   let desiredProject = params.get('project');

package/public/index.html

@@ -100,15 +100,21 @@
         <button class="modal-close" onclick="closeModal('projectPickerModal')">&#10005;</button>
       </div>
       <div class="modal-body">
-        <div class="modal-field">
-          <label>Project directory</label>
-          <input type="text" id="projectPathInput" placeholder="/path/to/project" autocomplete="off">
-          <span class="modal-hint">Full path to the project directory</span>
+        <div class="picker-filter" id="projectPickerFilter">
+          <input type="text" id="projectPickerInput" class="picker-input" placeholder="Filter projects..." autocomplete="off">
+          <div class="picker-list" id="projectPickerList"></div>
+          <button class="picker-add" id="projectPickerAdd">+ Add path...</button>
         </div>
-        <div id="recentProjectsList"></div>
-        <div class="modal-actions">
-          <button class="action-btn" onclick="closeModal('projectPickerModal')">Cancel</button>
-          <button class="action-btn primary" id="projectPickerSubmit" onclick="submitProjectPicker()">Switch</button>
+        <div class="picker-add-form" id="projectPickerAddForm" hidden>
+          <div class="modal-field">
+            <label>Project directory</label>
+            <input type="text" id="projectPathInput" placeholder="/path/to/project" autocomplete="off">
+            <span class="modal-hint">Full path to the project directory</span>
+          </div>
+          <div class="modal-actions">
+            <button class="action-btn" id="projectPickerBack">Back</button>
+            <button class="action-btn primary" id="projectPickerSubmit" onclick="submitProjectPicker()">Switch</button>
+          </div>
         </div>
       </div>
     </div>
@@ -152,7 +158,7 @@
 
   <!-- Help modal -->
   <div class="modal-overlay" id="helpModal" onclick="if(event.target===this)toggleHelpModal()">
-    <div class="modal">
+    <div class="modal modal-help">
       <div class="modal-header">
         <h3>Memory Diagnoser</h3>
         <button class="modal-close" onclick="toggleHelpModal()">&#10005;</button>
@@ -161,31 +167,8 @@
         <p class="modal-desc">Browse and understand all memory sources that influence Claude Code behavior for your project.</p>
         <hr class="modal-divider">
         <h4 class="shortcut-section">Keyboard Shortcuts</h4>
-        <div class="shortcut-grid">
-          <div>
-            <h4 class="shortcut-section">Navigation</h4>
-            <table class="shortcut-table">
-              <tr><td><kbd>j</kbd> / <kbd>&darr;</kbd></td><td>Next item</td></tr>
-              <tr><td><kbd>k</kbd> / <kbd>&uarr;</kbd></td><td>Previous item</td></tr>
-              <tr><td><kbd>l</kbd> / <kbd>&rarr;</kbd></td><td>Expand / enter child</td></tr>
-              <tr><td><kbd>h</kbd> / <kbd>&larr;</kbd></td><td>Collapse / parent</td></tr>
-              <tr><td><kbd>Enter</kbd></td><td>Select item</td></tr>
-              <tr><td><kbd>Esc</kbd></td><td>Close modal</td></tr>
-            </table>
-          </div>
-          <div>
-            <h4 class="shortcut-section">Actions</h4>
-            <table class="shortcut-table">
-              <tr><td><kbd>r</kbd></td><td>Refresh data</td></tr>
-              <tr><td><kbd>t</kbd></td><td>Toggle theme</td></tr>
-              <tr><td><kbd>e</kbd></td><td>Open in editor</td></tr>
-              <tr><td><kbd>Shift+P</kbd></td><td>Switch project</td></tr>
-              <tr><td><kbd>?</kbd></td><td>Show this help</td></tr>
-            </table>
-          </div>
-        </div>
+        <dl class="shortcuts" id="helpShortcuts"></dl>
       </div>
-      <button class="modal-close-btn" onclick="toggleHelpModal()">Close</button>
     </div>
   </div>
 

package/public/style.css

@@ -805,6 +805,24 @@ body.light .tree-conditional .file-name {
   max-height: 80vh;
   overflow-y: auto;
 }
+/* The paired shortcut columns need room the 440px default cannot give. */
+.modal.modal-help {
+  width: 960px;
+}
+/* Matches the roomier help modals in the other hub apps: larger title, 24px gutters. */
+.modal-help .modal-header {
+  padding: 20px 24px;
+}
+.modal-help .modal-header h3 {
+  font-family: var(--font-mono);
+  font-size: 18px;
+}
+.modal-help .modal-body {
+  padding: 24px;
+}
+.modal-help .modal-desc {
+  font-size: 13px;
+}
 .modal.modal-wide {
   width: 1140px;
 }
@@ -878,21 +896,6 @@ body.light .tree-conditional .file-name {
   border-top: 1px solid var(--border);
   margin: 12px 0;
 }
-.modal-close-btn {
-  display: block;
-  width: calc(100% - 32px);
-  margin: 0 16px 16px;
-  padding: 8px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 12px;
-}
-.modal-close-btn:hover {
-  background: var(--bg-hover);
-}
 /* matches the marketplace app's action-btn look */
 .action-btn {
   padding: 4px 10px;
@@ -961,19 +964,90 @@ body.light .tree-conditional .file-name {
   margin-bottom: 6px;
   text-transform: uppercase;
 }
-.shortcut-grid {
+/* One shared grid for both halves (key | label | spacer | key | label): each key
+   gutter is sized by its column's widest combo, and left/right rows share row
+   tracks, so paired groups line up — a shorter group just leaves empty rows.
+   Cells opt into a half via sc-l / sc-r; the markup is generated from
+   SHORTCUT_PAIRS in app.js. */
+.shortcuts {
+  margin: 0;
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  grid-template-columns: max-content 1fr 28px max-content 1fr;
+  column-gap: 14px;
 }
-.shortcut-table {
-  font-size: 12px;
+.shortcuts dt.sc-l {
+  grid-column: 1;
+}
+.shortcuts dd.sc-l {
+  grid-column: 2;
+}
+.shortcuts dt.sc-r {
+  grid-column: 4;
+}
+.shortcuts dd.sc-r {
+  grid-column: 5;
+}
+.shortcuts .sc-group.sc-l {
+  grid-column: 1 / 3;
+}
+.shortcuts .sc-group.sc-r {
+  grid-column: 4 / 6;
+}
+.shortcuts dt {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  align-self: center;
+  gap: 4px;
+  padding: 3px 0;
+}
+.shortcuts dd {
+  margin: 0;
+  /* The other hub apps set a mono body font; memory is sans, so the help rows
+     opt into mono to keep the shortcut tables reading the same across apps. */
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--text-secondary);
+  align-self: center;
+  padding: 3px 0;
+}
+/* Section headings carry the column: full-width rule + primary ink, so the eye
+   finds the group before it reads any single row. */
+.shortcuts .sc-group {
+  padding: 18px 0 6px;
+  margin-bottom: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border);
 }
-.shortcut-table td {
-  padding: 2px 0;
+.shortcuts .sc-group.sc-first {
+  padding-top: 2px;
 }
-.shortcut-table td:first-child {
-  padding-right: 12px;
+/* keycap chips: thicker bottom border reads as a key */
+.shortcuts kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  color: var(--text-primary);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+}
+.shortcuts .sc-plus,
+.shortcuts .sc-or {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+/* Hub keys do nothing outside Claude Code Hub, so the standalone app hides that
+   whole column rather than listing keys that no-op. */
+.shortcuts.sc-standalone .sc-hub {
+  display: none;
 }
 kbd {
   background: var(--bg-hover);
@@ -989,31 +1063,77 @@ kbd {
   font-size: 10px;
   line-height: 1;
 }
-.recent-projects-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin: 10px 0 4px;
+.picker-filter,
+.picker-add-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.picker-filter[hidden],
+.picker-add-form[hidden] {
+  display: none;
+}
+.picker-input {
+  width: 100%;
+  padding: 8px 10px;
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+.picker-input:focus {
+  outline: none;
+  border-color: var(--accent);
 }
-.recent-project-item {
+.picker-list {
+  max-height: 50vh;
+  overflow-y: auto;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 2px;
+}
+.picker-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
   padding: 5px 8px;
+  border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
   font-size: 12px;
   font-family: var(--font-mono);
   color: var(--text-secondary);
 }
-.recent-project-item:hover {
+.picker-row:hover {
   background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.picker-row.selected {
+  background: var(--bg-hover);
+  border-color: var(--accent);
+  color: var(--text-primary);
 }
-.recent-project-item span {
+.picker-name {
+  white-space: nowrap;
+}
+.picker-parent {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.picker-tag {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--accent-text);
 }
-.recent-project-remove {
+.picker-remove {
   background: none;
   border: none;
   color: var(--text-muted);
@@ -1022,9 +1142,33 @@ kbd {
   padding: 0 4px;
   opacity: 0;
 }
-.recent-project-item:hover .recent-project-remove {
+.picker-row:hover .picker-remove,
+.picker-row.selected .picker-remove {
   opacity: 1;
 }
+.picker-remove:hover {
+  color: var(--error);
+}
+.picker-empty {
+  padding: 12px 10px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.picker-add {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  border-top: 1px solid var(--border);
+  padding: 8px 2px 2px;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+}
+.picker-add:hover {
+  color: var(--accent-text);
+}
 /* #endregion MODAL */
 
 /* #region LOADING */
@@ -1131,8 +1275,12 @@ body.light {
   .summary-bar {
     flex-wrap: wrap;
   }
-  .shortcut-grid {
-    grid-template-columns: 1fr;
+  /* Rows are interleaved left-then-right, so a one-column stack would read out
+     of order. Keep both halves and just tighten the gutters. */
+  .shortcuts {
+    grid-template-columns: max-content 1fr 12px max-content 1fr;
+    column-gap: 8px;
+    font-size: 11px;
   }
 }
 /* #endregion RESPONSIVE */

package/server.js

@@ -850,6 +850,25 @@ const RUBRIC_CLAUDE_MD_USER = [
   '- Preferences should carry their why: a bare prohibition gets overridden when inconvenient; a one-clause reason makes it generalize.',
 ].join('\n');
 
+// The server already knows every `@import` a file makes: parseImports() carries the
+// grammar (npm scopes excluded, extension required) and resolveImport() the resolution
+// (~ = home, else relative to the importing file). Handing the reviewer that answer as
+// fact beats shipping it a prose reimplementation it would run differently each time.
+// Hard `@` imports only — markdown links are references, not inlined content.
+function importLines(src) {
+  const lines = [`PATH: ${src.path}`];
+  const resolved = [];
+  const missing = [];
+  for (const imp of parseImports(src.content).imports) {
+    const abs = resolveImport(imp, src.path);
+    if (fs.existsSync(abs)) resolved.push(abs);
+    else missing.push(`${imp} (tried ${abs})`);
+  }
+  if (resolved.length) lines.push(`IMPORTS: ${resolved.join(', ')}`);
+  if (missing.length) lines.push(`MISSING IMPORTS: ${missing.join(', ')}`);
+  return lines;
+}
+
 function buildAnalyzePrompt(memSources, skillSources, agentSources, claudeMdSources, userSrc, userAudited) {
   const fullSkills = skillSources || [];
   const fullAgent = agentSources || [];
@@ -885,8 +904,9 @@ function buildAnalyzePrompt(memSources, skillSources, agentSources, claudeMdSour
   parts.push(
     '',
     'Rules:',
-    `- You are the orchestrator; do not review files yourself. Your working directory is the project root. For every audited file, launch the type-matched reviewer subagent via your Agent tool — "memory-reviewer" for memory and agent-memory files, "skill-reviewer" for skills, "claude-md-reviewer" for project CLAUDE.md files${userAudited ? ', "claude-md-user-reviewer" for the user-level CLAUDE.md' : ''} — all in a single parallel batch of blocking calls (never background/async agents — you must hold your final report until every reviewer has returned). Pass each one only the file name and its full content; the reviewers carry their own criteria and verify claims against the repo${userAudited ? ' (the user-level reviewer verifies against the machine, never the repo)' : ''}.`,
+    `- You are the orchestrator; do not review files yourself. Your working directory is the project root. For every audited file, launch the type-matched reviewer subagent via your Agent tool — "memory-reviewer" for memory and agent-memory files, "skill-reviewer" for skills, "claude-md-reviewer" for project CLAUDE.md files${userAudited ? ', "claude-md-user-reviewer" for the user-level CLAUDE.md' : ''} — all in a single parallel batch of blocking calls (never background/async agents — you must hold your final report until every reviewer has returned). Pass each one only the file name, its full content, and — for skills and CLAUDE.md files — the PATH:, IMPORTS:, and MISSING IMPORTS: lines from its block below; the reviewers carry their own criteria and verify claims against the repo${userAudited ? ' (the user-level reviewer verifies against the machine, never the repo)' : ''}.`,
     `- Your own job: merge the reviewers' per-file findings and add the cross-file kinds (duplicate, contradiction, merge, promote${crossScope ? ', override, shadow' : ''}) by comparing the files side by side.`,
+    '- @imports are inlined content: the files on a block\'s IMPORTS: line load as part of that file. Reviewers read them, so treat what they report from an import as belonging to the importing file when you compare files side by side — a rule imported by one file and written out in another is still a duplicate. Imported files are never audited on their own; attribute every finding to the importer.',
     '- Verification is a filter: drop any finding a reviewer\'s claim checks disproved, and never report "likely outdated" for a claim a reviewer confirmed still HOLDS. Record what was checked in the finding\'s "evidence" field (one sentence, internal bookkeeping — it is not shown to the user). Omit "evidence" for judgment-only findings.',
     '- files: the exact file names involved as listed below (e.g. feedback_foo.md, MEMORY.md, or a skill name like my-skill). Bare names only — never append scope markers like "(user)"; scope is carried by the scope field.',
     '- scope: "user" if the finding only cites the user-level CLAUDE.md (demote findings are always "user"); "cross" if it cites both the user-level file and any project-side file (override, shadow, and promote findings are "cross"); "project" for everything else.',
@@ -900,9 +920,12 @@ function buildAnalyzePrompt(memSources, skillSources, agentSources, claudeMdSour
     '',
   );
   if (userAudited) {
-    parts.push('USER CLAUDE.MD (audit this with claude-md-user-reviewer):', `=== FILE (user): ${userSrc.name} ===`, userSrc.content, '');
+    parts.push('USER CLAUDE.MD (audit this with claude-md-user-reviewer):', `=== FILE (user): ${userSrc.name} ===`, ...importLines(userSrc), userSrc.content, '');
   } else {
-    parts.push('GLOBAL CLAUDE.md (reference only, do not audit it):', '<<<', userSrc?.content || '(none)', '>>>', '');
+    parts.push(
+      'GLOBAL CLAUDE.md (reference only, do not audit it):',
+      ...(userSrc ? importLines(userSrc).slice(1).map((l) => `${l} — inlined into the global file; read these before judging a rule missing from it`) : []),
+      '<<<', userSrc?.content || '(none)', '>>>', '');
   }
   if (memSources.length) {
     parts.push('MEMORY FILES:');
@@ -913,7 +936,7 @@ function buildAnalyzePrompt(memSources, skillSources, agentSources, claudeMdSour
   if (fullSkills.length) {
     parts.push('PROJECT SKILLS (audit these):');
     for (const s of fullSkills) {
-      parts.push(`=== SKILL: ${s.name} ===`, s.content, '');
+      parts.push(`=== SKILL: ${s.name} ===`, ...importLines(s), s.content, '');
     }
   }
   if (fullAgent.length) {
@@ -925,7 +948,7 @@ function buildAnalyzePrompt(memSources, skillSources, agentSources, claudeMdSour
   if (fullClaudeMd.length) {
     parts.push('CLAUDE.MD FILES (audit these):');
     for (const s of fullClaudeMd) {
-      parts.push(`=== FILE (${s.scope}): ${s.name} ===`, s.content, '');
+      parts.push(`=== FILE (${s.scope}): ${s.name} ===`, ...importLines(s), s.content, '');
     }
   }
   return parts.join('\n');
@@ -940,6 +963,7 @@ const REVIEWER_COMMON = [
   'You review exactly one file that shapes Claude Code behavior; the parent passes its name and full content.',
   'Verify before judging: for every claim that references the repository in your working directory — a file, directory, command, script, flag, or path — check whether it still holds with your read-only tools. For tools the file expects on the machine, check existence with `command -v` / `which` / `where` (the only Bash commands you may run). Never call something "likely stale" when you can check it.',
   'Also judge whether the content is still needed at all: if the thing it guards against is gone (the tool was removed, the convention is enforced elsewhere, the referenced file no longer exists), say so explicitly.',
+  'A check you could not run is not evidence of absence. If a probe is denied by permissions or errors out, report that claim as UNCHECKED and say why — never turn a failed check into a stale or invalidate finding.',
 ];
 
 // The user reviewer swaps repo verification for machine verification — the working
@@ -948,6 +972,7 @@ const REVIEWER_COMMON_USER = [
   'You review the user-level (global) CLAUDE.md that loads in every session of every project; the parent passes its name and full content.',
   'Verify before judging, against the machine only: check tools the file names with `command -v` / `which` / `where` (the only Bash commands you may run), and check files, skills, or agents it references under ~/.claude with your read tools. NEVER read or judge against the repository in your working directory — it is one arbitrary project and proves nothing about a global rule.',
   'Also judge whether the content is still needed at all: if the tool it references is gone from the machine or the file it points to no longer exists, say so explicitly.',
+  'A check you could not run is not evidence of absence. If a probe is denied by permissions or errors out, report that claim as UNCHECKED and say why — never turn a failed check into a stale or invalidate finding.',
 ];
 
 const REVIEWER_REPORT = [
@@ -956,10 +981,24 @@ const REVIEWER_REPORT = [
   '2. FINDINGS: candidate findings for this file only (kind: stale, invalidate, or quality; severity high/med/low; title; detail; one-sentence fix). An empty list is a valid answer — do not pad.',
 ];
 
+// `@path/to/file.md` in a CLAUDE.md or a skill is an import: Claude Code inlines the
+// target's content where the token sits. A reviewer that judges only the text in front
+// of it reads an import as a dangling reference and never sees the rules the file
+// actually loads. `importLines()` resolves the graph server-side and states it as fact,
+// so the rubric only has to say what an import means. Memory files are excluded: the
+// imports they make are audited as sources in their own right.
+const RUBRIC_IMPORTS = [
+  'Import notation (@path):',
+  '- The IMPORTS: line of your file block lists absolute paths Claude Code inlines into this file at load time. Read each one and judge its content against every criterion above as part of this file — including imports of imports. Duplication between the file and its own import, contradictions across its imports, and bloat pulled in through an import all count against the importing file.',
+  '- An @path token is an import, never a broken link or an unexplained reference: do not flag the pointer itself as vague or undefined. Anything on the MISSING IMPORTS: line resolves to nothing, and is the only missing-import finding to report (kind: stale).',
+].join('\n');
+
+// `rubric` takes one rubric constant or a list of them, so a reviewer can stack the
+// shared import rubric on top of its per-type one without a second parameter.
 function reviewerAgent(description, rubric, common = REVIEWER_COMMON) {
   return {
     description,
-    prompt: [common.join('\n'), RUBRIC_CORE, rubric, REVIEWER_REPORT.join('\n')].join('\n\n'),
+    prompt: [common.join('\n'), RUBRIC_CORE, ...[].concat(rubric), REVIEWER_REPORT.join('\n')].join('\n\n'),
     // Bash is permission-scoped to command -v / which / where by the spawn's
     // --allowedTools — anything else the reviewer tries is auto-denied in -p mode.
     tools: ['Read', 'Grep', 'Glob', 'Bash'],
@@ -973,15 +1012,15 @@ const ANALYSIS_AGENTS = {
   ),
   'skill-reviewer': reviewerAgent(
     'Reviews and verifies one SKILL.md file against the skill rubric and the repository. One per skill, in parallel.',
-    RUBRIC_SKILL,
+    [RUBRIC_SKILL, RUBRIC_IMPORTS],
   ),
   'claude-md-reviewer': reviewerAgent(
     'Reviews and verifies one CLAUDE.md instruction file against the CLAUDE.md rubric and the repository. One per file, in parallel.',
-    RUBRIC_CLAUDE_MD,
+    [RUBRIC_CLAUDE_MD, RUBRIC_IMPORTS],
   ),
   'claude-md-user-reviewer': reviewerAgent(
     'Reviews and verifies the user-level (global) CLAUDE.md against the user rubric, PATH, and ~/.claude — never against the working repository.',
-    RUBRIC_CLAUDE_MD_USER,
+    [RUBRIC_CLAUDE_MD_USER, RUBRIC_IMPORTS],
     REVIEWER_COMMON_USER,
   ),
 };
@@ -1017,7 +1056,15 @@ function runClaudeAnalysis(prompt, model, cwd) {
       try {
         const envelope = JSON.parse(out);
         if (envelope.is_error) return finish({ ok: false, error: String(envelope.result || 'Claude Code reported an error') });
-        finish({ ok: true, data: envelope.structured_output, costUsd: envelope.total_cost_usd, durationMs: envelope.duration_ms });
+        // A run can exit clean without structured_output (schema retries exhausted,
+        // truncated stdout). Spreading that absence downstream yields an empty
+        // findings list, which the UI cannot tell apart from a genuine all-clear —
+        // so treat a missing payload as a failure rather than as "no problems".
+        const data = envelope.structured_output;
+        if (!data || !Array.isArray(data.findings)) {
+          return finish({ ok: false, error: 'Claude Code returned no structured output — the audit did not complete, so no result is being shown.' });
+        }
+        finish({ ok: true, data, costUsd: envelope.total_cost_usd, durationMs: envelope.duration_ms });
       } catch {
         finish({ ok: false, error: `Claude Code returned an invalid JSON envelope${err ? `: ${err.slice(0, 300)}` : ''}` });
       }