claude-code-memory-explorer 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-memory-explorer",
-  "version": "0.12.0",
+  "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
@@ -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();
     }
@@ -2116,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 */