claude-code-memory-explorer 0.1.0 → 0.2.0

package/package.json

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

package/public/app.js

@@ -59,11 +59,13 @@ function highlightSource(text, fileName) {
 
 function linkifyImports(text, sourceId) {
   if (!stackData.length) return { text, placeholders: [] };
-  const byName = Object.fromEntries(stackData.map(c => [c.name, c]));
+  const byName = Object.fromEntries(stackData.map((c) => [c.name, c]));
   const placeholders = [];
   const ph = (child, display) => {
     const token = `\x00LINK${placeholders.length}\x00`;
-    placeholders.push(`<a class="inline-import" href="#" onclick="selectFile('${escJs(child.id)}');return false" title="${esc(child.path)}">${esc(display)}</a>`);
+    placeholders.push(
+      `<a class="inline-import" href="#" onclick="selectFile('${escJs(child.id)}');return false" title="${esc(child.path)}">${esc(display)}</a>`,
+    );
     return token;
   };
   // Replace @path refs with placeholders
@@ -293,7 +295,9 @@ function getTreeIndex() {
   return treeIndex;
 }
 
-function invalidateTreeIndex() { treeIndex = null; }
+function invalidateTreeIndex() {
+  treeIndex = null;
+}
 
 function renderTree() {
   const container = document.getElementById('treeContent');
@@ -376,9 +380,7 @@ function navigateGroup(direction) {
   if (!activeScopes.length) return;
 
   const current = stackData.find((s) => s.id === selectedFileId);
-  const currentScope = current?.parentId
-    ? stackData.find((s) => s.id === current.parentId)?.scope
-    : current?.scope;
+  const currentScope = current?.parentId ? stackData.find((s) => s.id === current.parentId)?.scope : current?.scope;
   let scopeIdx = activeScopes.indexOf(currentScope);
   if (scopeIdx === -1) {
     scopeIdx = direction > 0 ? 0 : activeScopes.length - 1;
@@ -435,7 +437,7 @@ async function renderPreview() {
   html += '</div>';
 
   // Imports — only show children (files that have this source as parent)
-  const children = stackData.filter(s => s.parentId === source.id);
+  const children = stackData.filter((s) => s.parentId === source.id);
   const unresolved = source.unresolvedImports || [];
   if (children.length || unresolved.length) {
     html += '<div class="preview-imports">';
@@ -516,11 +518,15 @@ function renderBudget() {
   document.getElementById('statAlways').textContent = summaryData.alwaysLoaded;
 
   // Budget text
-  document.getElementById('budgetText').textContent = `${summaryData.totalLines.toLocaleString()} lines / ${formatBytes(summaryData.totalBytes)}`;
+  document.getElementById('budgetText').textContent =
+    `${summaryData.totalLines.toLocaleString()} lines / ${formatBytes(summaryData.totalBytes)}`;
 
   // Budget segments — proportional by lines per scope
   const segContainer = document.getElementById('budgetSegments');
-  if (!stackData.length) { segContainer.innerHTML = ''; return; }
+  if (!stackData.length) {
+    segContainer.innerHTML = '';
+    return;
+  }
 
   const scopeTotals = {};
   for (const s of stackData) {
@@ -543,10 +549,7 @@ function renderBudget() {
 
 async function loadData() {
   try {
-    [stackData, summaryData] = await Promise.all([
-      fetchJSON('/api/stack'),
-      fetchJSON('/api/summary'),
-    ]);
+    [stackData, summaryData] = await Promise.all([fetchJSON('/api/stack'), fetchJSON('/api/summary')]);
     invalidateTreeIndex();
     renderTree();
     renderBudget();
@@ -556,7 +559,10 @@ async function loadData() {
       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');
   }
@@ -609,10 +615,22 @@ document.addEventListener('keydown', (e) => {
     e.preventDefault();
     changeProject();
   }
-  if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); navigateTree(1); }
-  if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); navigateTree(-1); }
-  if (e.key === 'h' || e.key === 'ArrowLeft') { e.preventDefault(); navigateGroup(-1); }
-  if (e.key === 'l' || e.key === 'ArrowRight') { e.preventDefault(); navigateGroup(1); }
+  if (e.key === 'j' || e.key === 'ArrowDown') {
+    e.preventDefault();
+    navigateTree(1);
+  }
+  if (e.key === 'k' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    navigateTree(-1);
+  }
+  if (e.key === 'h' || e.key === 'ArrowLeft') {
+    e.preventDefault();
+    navigateGroup(-1);
+  }
+  if (e.key === 'l' || e.key === 'ArrowRight') {
+    e.preventDefault();
+    navigateGroup(1);
+  }
   if (e.key === 'Enter' && selectedFileId) renderPreview();
   if (e.key === 'e' && selectedFileId) {
     const s = stackData.find((x) => x.id === selectedFileId);
@@ -624,13 +642,27 @@ document.addEventListener('keydown', (e) => {
 
 // #region HUB_INTEGRATION
 
-async function detectHub() {
-  try {
-    const res = await fetch('/hub-config');
-    if (res.ok) window.__HUB__ = true;
-  } catch {
-    /* not in hub */
-  }
+(async function initHub() {
+  const cfg = await fetch('/hub-config')
+    .then((r) => r.json())
+    .catch(() => ({}));
+  if (!cfg.enabled) return;
+  window.__HUB__ = cfg;
+  document.addEventListener('keydown', (e) => {
+    if (e.ctrlKey && e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      e.preventDefault();
+      window.parent?.postMessage({ type: 'hub:keydown', key: e.key }, '*');
+    }
+    if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey && /^[1-9]$/.test(e.key)) {
+      e.preventDefault();
+      window.parent?.postMessage({ type: 'hub:keydown', key: e.key }, '*');
+    }
+  });
+})();
+
+function hubNavigate(app, url) {
+  if (!window.__HUB__?.enabled) return;
+  window.parent?.postMessage({ type: 'hub:navigate', app, url }, '*');
 }
 
 // #endregion HUB_INTEGRATION
@@ -688,7 +720,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   loadTheme();
   initResize();
   bindModalKeys('projectPathInput', 'projectPickerModal', submitProjectPicker);
-  await detectHub();
   // Handle ?project= query param
   const params = new URLSearchParams(location.search);
   if (params.has('project')) {
@@ -705,12 +736,21 @@ document.addEventListener('DOMContentLoaded', async () => {
     const qs = params.toString();
     history.replaceState(null, '', qs ? `?${qs}` : location.pathname + location.hash);
   }
-  await loadProject();
-  addRecentProject(projectData.path);
+  // Retry initial load — server may not be ready yet (e.g. Hub iframe race)
+  for (let attempt = 0; attempt < 5; attempt++) {
+    try {
+      await loadProject();
+      break;
+    } catch {
+      if (attempt < 4) await new Promise((r) => setTimeout(r, 500));
+      else showToast('Failed to connect to server', 'error');
+    }
+  }
+  if (projectData) addRecentProject(projectData.path);
   await loadData();
   // Restore file selection from hash
   const hash = decodeURIComponent(location.hash.slice(1));
-  if (hash && stackData.find(s => s.id === hash)) {
+  if (hash && stackData.find((s) => s.id === hash)) {
     selectedFileId = hash;
     renderTree();
     renderPreview();

package/public/index.html

@@ -40,6 +40,9 @@
     <button class="topbar-btn" id="themeBtn" title="Toggle theme (t)" onclick="toggleTheme()">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
     </button>
+    <a class="topbar-btn" href="https://github.com/NikiforovAll/claude-code-memory" target="_blank" rel="noopener" title="GitHub">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+    </a>
   </div>
 
   <!-- Size bar -->

package/public/style.css

@@ -130,25 +130,34 @@ body {
   flex: 1;
 }
 .topbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
   padding: 6px 10px;
   border-radius: 6px;
   font-size: 11px;
   font-weight: 500;
+  cursor: pointer;
   border: 1px solid var(--border);
   background: var(--bg-elevated);
   color: var(--text-tertiary);
   font-family: var(--font-mono);
+  transition: all 0.15s ease;
+  white-space: nowrap;
   text-transform: uppercase;
   letter-spacing: 0.03em;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
+  text-decoration: none;
 }
 .topbar-btn:hover {
   border-color: var(--accent);
   color: var(--text-secondary);
 }
+.topbar-btn svg {
+  color: var(--text-muted);
+}
+.topbar-btn.loading svg {
+  animation: spin 1s linear infinite;
+}
 /* #endregion TOPBAR */
 
 /* #region BUDGET_BAR */
@@ -288,9 +297,15 @@ body {
   font-family: var(--font-mono);
   flex-shrink: 0;
 }
-.tree-child .file-name { opacity: 0.75; }
-.tree-conditional .file-name { opacity: 0.55; }
-body.light .tree-conditional .file-name { opacity: 0.75; }
+.tree-child .file-name {
+  opacity: 0.75;
+}
+.tree-conditional .file-name {
+  opacity: 0.55;
+}
+body.light .tree-conditional .file-name {
+  opacity: 0.75;
+}
 /* #endregion TREE */
 
 /* #region PREVIEW */
@@ -752,13 +767,13 @@ kbd {
 body.light {
   --bg-deep: #e8e6e3;
   --bg-surface: #f4f3f1;
-  --bg-elevated: #ffffff;
-  --bg-hover: #e0ddd8;
-  --border: #c5c0b8;
+  --bg-elevated: #dddbd8;
+  --bg-hover: #d2d0cc;
+  --border: #a09b94;
   --text-primary: #0a0a0a;
-  --text-secondary: #333333;
+  --text-secondary: #444444;
   --text-tertiary: #666666;
-  --text-muted: #999999;
+  --text-muted: #888888;
   --accent-text: #b85a20;
 }
 /* #endregion LIGHT_THEME */

package/server.js

@@ -250,6 +250,38 @@ function discoverMemorySources(projectPath) {
     }
   }
 
+  // 4b. Scan subdirectories of projectPath for CLAUDE.md (tree-scoped)
+  const SKIP_DIRS = new Set(['node_modules', '.git', '.hg', '.svn', 'dist', 'build', 'out', '.next', '.nuxt', 'vendor', '__pycache__', '.venv', 'venv']);
+  function walkForClaudeMd(dir, depth) {
+    if (depth > 5) return;
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+    for (const entry of entries) {
+      if (!entry.isDirectory() || SKIP_DIRS.has(entry.name) || entry.name.startsWith('.')) continue;
+      const subdir = path.join(dir, entry.name);
+      for (const name of ['CLAUDE.md', '.claude/CLAUDE.md']) {
+        const filePath = path.join(subdir, name);
+        if (seenPaths.has(filePath)) continue;
+        const info = fileInfo(filePath);
+        if (!info) continue;
+        seenPaths.add(filePath);
+        const rel = path.relative(projectPath, subdir).replace(/\\/g, '/');
+        sources.push({
+          id: `project-claude-md-${subdir.replace(/[^a-zA-Z0-9]/g, '-')}`,
+          name: `${rel}/${name.includes('/') ? '.claude/CLAUDE.md' : 'CLAUDE.md'}`,
+          scope: 'project',
+          load: 'tree',
+          ...info,
+          dir: subdir,
+          isProjectRoot: false,
+          ...spreadImports(info.path, info.content),
+        });
+      }
+      walkForClaudeMd(subdir, depth + 1);
+    }
+  }
+  walkForClaudeMd(projectPath, 0);
+
   // 5. Project rules (.claude/rules/*.md)
   const projectRulesDir = path.join(projectPath, '.claude', 'rules');
   if (fs.existsSync(projectRulesDir)) {
@@ -439,6 +471,8 @@ app.get('/hub-config', (_req, res) => {
     name: 'Claude Code Memory',
     icon: 'brain',
     description: 'Explore Claude Code memory sources',
+    enabled: !!process.env.CLAUDE_HUB,
+    url: process.env.HUB_URL || null,
   });
 });