claude-code-memory-explorer 0.12.0 → 0.14.0

package/README.md

@@ -35,7 +35,7 @@ PORT=8080                Custom port (default: 3544, falls back if busy)
 --open                   Open browser on start
 ```
 
-The config dir can also be set via the `CLAUDE_CONFIG_DIR` environment variable. Switch projects at runtime with the picker (Shift+P) or `?project=/path`.
+The config dir can also be set via the `CLAUDE_CONFIG_DIR` environment variable; the analyzer's headless `claude` run inherits it. Switch projects at runtime with the picker (Shift+P) or `?project=/path`.
 
 ## License
 

package/lib/open-editor.js

@@ -221,6 +221,7 @@ function execNoShell(cmd, args, opts = {}) {
     let argv = args;
     const spawnOpts = {
       cwd: opts.cwd || undefined,
+      env: opts.env,
       timeout: opts.timeout,
       windowsHide: true,
       stdio: ['ignore', 'pipe', 'pipe'],
@@ -258,7 +259,9 @@ function execNoShell(cmd, args, opts = {}) {
     child.on('error', reject);
     child.on('close', (code, signal) => {
       if (signal) return reject(new Error(`Command terminated by ${signal}: ${stderr.trim()}`));
-      if (code !== 0) return reject(new Error(stderr.trim() || `Command exited with code ${code}`));
+      // The claude CLI reports its own failures on stdout, so stderr alone is
+      // often empty and the caller would surface only the exit code.
+      if (code !== 0) return reject(new Error(stderr.trim() || stdout.trim() || `Command exited with code ${code}`));
       resolve({ stdout, stderr });
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-memory-explorer",
-  "version": "0.12.0",
+  "version": "0.14.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
@@ -1236,7 +1361,7 @@ function findingPrompt(f) {
   } 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';
+    const path = stackData.find((s) => s.id === 'user-claude-md')?.path || summaryData.userClaudeMd;
     header = `In the user-level Claude Code instructions at ${path}, apply this fix:`;
   } else {
     const dir = memoryDirPath();
@@ -1911,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();
     }
@@ -1973,8 +2098,9 @@ document.addEventListener('keydown', (e) => {
       e.preventDefault();
       fwd(e);
     }
-    // Its own branch: the Alt+digit case below requires !ctrlKey.
-    if (e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey && e.key.toLowerCase() === 'p') {
+    // Own branch: the Alt+digit case below requires !ctrlKey. The hub owns the Ctrl+Alt+letter
+    // keymap and ignores unbound letters.
+    if (e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey && /^[a-z]$/i.test(e.key)) {
       e.preventDefault();
       fwd(e);
     }
@@ -2116,7 +2242,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

@@ -25,7 +25,13 @@ const expandHome = (p) => (typeof p === 'string' ? p : '').replace(/^~/, os.home
 const PORT = getArg('port') || process.env.PORT || 3544;
 const AUTO_OPEN = process.argv.includes('--open');
 const claudeDirArg = getArg('dir') || process.env.CLAUDE_CONFIG_DIR || process.env.CLAUDE_DIR;
-const CLAUDE_DIR = claudeDirArg ? expandHome(claudeDirArg) : path.join(os.homedir(), '.claude');
+const DEFAULT_CLAUDE_DIR = path.join(os.homedir(), '.claude');
+const CLAUDE_DIR = claudeDirArg ? expandHome(claudeDirArg) : DEFAULT_CLAUDE_DIR;
+const USER_CLAUDE_MD = path.join(CLAUDE_DIR, 'CLAUDE.md');
+// Claude Code keeps .claude.json beside ~/.claude by default but inside CLAUDE_CONFIG_DIR
+// when that is set, so the default dir must stay unset for the CLI rather than be spelled out.
+const IS_DEFAULT_CLAUDE_DIR = path.resolve(CLAUDE_DIR) === path.resolve(DEFAULT_CLAUDE_DIR);
+const CLI_ENV = IS_DEFAULT_CLAUDE_DIR ? process.env : { ...process.env, CLAUDE_CONFIG_DIR: CLAUDE_DIR };
 const projectDirArg = getArg('project');
 
 // #endregion CLI_ARGS
@@ -233,8 +239,7 @@ function discoverMemorySources(projectPath) {
   }
 
   // 2. User CLAUDE.md
-  const userClaudeMd = path.join(CLAUDE_DIR, 'CLAUDE.md');
-  const userInfo = fileInfo(userClaudeMd);
+  const userInfo = fileInfo(USER_CLAUDE_MD);
   if (userInfo) {
     sources.push({
       id: 'user-claude-md',
@@ -843,7 +848,7 @@ const RUBRIC_CLAUDE_MD = [
 const RUBRIC_CLAUDE_MD_USER = [
   'User-level CLAUDE.md criteria (global instructions, loaded in every session of every project):',
   '- Universality: every rule must hold on any project. Flag rules referencing one specific repo, stack, tool chain, or project path — they belong in that project\'s CLAUDE.md (kind: demote).',
-  '- Machine verification only: check that tools the file names exist on PATH (command -v / which / where) and that files, skills, or agents it references exist under ~/.claude. NEVER verify against the working directory\'s repository — it is an arbitrary project and proves nothing about a global rule.',
+  `- Machine verification only: check that tools the file names exist on PATH (command -v / which / where) and that files, skills, or agents it references exist under ${CLAUDE_DIR}. NEVER verify against the working directory's repository — it is an arbitrary project and proves nothing about a global rule.`,
   '- Self-consistency: flag sections, tags, or mnemonics that contradict or duplicate each other within the file and its imports.',
   '- Executability: flag standards name-dropped without concrete behaviors ("follow style guide X") and rules the model cannot act on — require the 2-3 specific behaviors the user actually wants.',
   '- Flag emphasis inflation (all-caps, NEVER/ALWAYS without stakes) and vague or no-op rules the model cannot act on.',
@@ -970,7 +975,7 @@ const REVIEWER_COMMON = [
 // directory is an arbitrary project and must not influence a global-file audit.
 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.',
+  `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_DIR} 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.',
 ];
@@ -1019,7 +1024,7 @@ const ANALYSIS_AGENTS = {
     [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.',
+    `Reviews and verifies the user-level (global) CLAUDE.md against the user rubric, PATH, and ${CLAUDE_DIR} — never against the working repository.`,
     [RUBRIC_CLAUDE_MD_USER, RUBRIC_IMPORTS],
     REVIEWER_COMMON_USER,
   ),
@@ -1039,7 +1044,7 @@ function runClaudeAnalysis(prompt, model, cwd) {
     try {
       // cwd = the project root so the agent can verify claims against the actual
       // files with its read-only tools (Read/Glob/Grep need no permission grants).
-      child = spawn('claude', args, { cwd: cwd || os.tmpdir(), windowsHide: true });
+      child = spawn('claude', args, { cwd: cwd || os.tmpdir(), env: CLI_ENV, windowsHide: true });
     } catch (e) {
       return resolve({ ok: false, error: `Failed to spawn claude: ${e.message}` });
     }
@@ -1313,7 +1318,9 @@ app.get('/api/summary', (_req, res) => {
   for (const f of sources) scopeChars[f.scope] = (scopeChars[f.scope] || 0) + (f.chars || 0);
   const totalChars = sources.reduce((s, f) => s + (f.chars || 0), 0) + skillDesc.chars;
   // ids: which sources make up the footprint, so the client can highlight them
-  res.json({ totalFiles, totalLines, totalBytes, totalChars, scopeChars, skillDesc, alwaysLoaded, conditional, onDemand, ids: sources.map(s => s.id) });
+  // userClaudeMd: where the user-level file lives even when it does not exist yet, so the
+  // client can name it in fix prompts without assuming ~/.claude
+  res.json({ totalFiles, totalLines, totalBytes, totalChars, scopeChars, skillDesc, alwaysLoaded, conditional, onDemand, ids: sources.map(s => s.id), userClaudeMd: USER_CLAUDE_MD });
 });
 
 app.get('/api/stack', (_req, res) => {