claude-code-memory-explorer 0.1.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-memory-explorer",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Memory explorer dashboard for Claude Code",
   "main": "server.js",
   "bin": {
@@ -22,5 +22,30 @@
   "devDependencies": {
     "husky": "^9.0.0"
   },
-  "license": "MIT"
+  "keywords": [
+    "claude",
+    "claude-code",
+    "memory",
+    "dashboard",
+    "anthropic",
+    "ai",
+    "cli",
+    "explorer"
+  ],
+  "homepage": "https://github.com/NikiforovAll/claude-code-memory",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NikiforovAll/claude-code-memory.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NikiforovAll/claude-code-memory/issues"
+  },
+  "author": "NikiforovAll",
+  "license": "MIT",
+  "files": [
+    "server.js",
+    "public/",
+    "README.md",
+    "LICENSE"
+  ]
 }

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

@@ -120,7 +120,7 @@ body {
   cursor: pointer;
   font-size: 11px;
   font-family: var(--font-mono);
-  max-width: 300px;
+  white-space: nowrap;
 }
 .topbar-project:hover {
   border-color: var(--accent);
@@ -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,
   });
 });
 

package/.claude/commands/release.md

@@ -1,54 +0,0 @@
----
-description: Bump version, tag, push, and create a GitHub release with auto-generated notes
-argument-hint: "[version e.g. 1.13.0 or rc4]"
----
-
-# Release
-
-Create a new release for this project.
-
-## Inputs
-
-- `$ARGUMENTS` — target version or shorthand. Examples:
-  - `1.13.0` — full version
-  - `rc4` — shorthand for next RC (e.g. if current is `1.19.0-rc.3`, becomes `1.19.0-rc.4`)
-  - If not provided, ask the user.
-
-## Steps
-
-1. **Determine version**: Use `$ARGUMENTS` or ask user. Handle `rc<N>` shorthand by reading current version from `package.json` and replacing/appending the RC suffix. Validate it's different from the current version.
-
-2. **Detect prerelease**: If version contains `-rc.`, `-alpha.`, `-beta.`, treat as prerelease.
-
-3. **Check working tree**: Run `git status`. If there are uncommitted changes, warn the user and stop.
-
-4. **Bump version**:
-   ```
-   npm version <version> --no-git-tag-version
-   ```
-
-5. **Commit & push** (push to current branch, not hardcoded `main`):
-   ```
-   git add package.json package-lock.json
-   git commit -m "🔖 chore: Bump version to <version>"
-   git push origin HEAD
-   ```
-
-6. **Tag & push tag**:
-   ```
-   git tag v<version>
-   git push origin v<version>
-   ```
-
-7. **Generate release notes**: Collect commits since the previous tag using `git log --oneline <prev-tag>..HEAD`. Write a **user-facing summary** grouped by:
-   - Features (✨) — describe what was added, not raw commit messages
-   - Fixes (🐛)
-   - Other notable changes
-   Include a "Full Changelog" compare link at the bottom.
-
-8. **Create GitHub release** (add `--prerelease` flag for RC/alpha/beta):
-   ```
-   gh release create v<version> --title "v<version>" --notes "<notes>" [--prerelease]
-   ```
-
-9. **Report**: Show the release URL to the user.

package/.github/workflows/pages.yml

@@ -1,36 +0,0 @@
-name: Deploy static site to Pages
-
-on:
-  push:
-    branches: ["main", "master"]
-    paths:
-      - "docs/**"
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: "docs"
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

package/CLAUDE.md

@@ -1,49 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## What This Is
-
-Dashboard for visualizing all memory sources that influence Claude Code behavior. Shows the full memory stack: CLAUDE.md files (user/project/local), rules (`.claude/rules/*.md` with optional path-scoped frontmatter), auto memory (`~/.claude/projects/<encoded>/memory/`), and `@import` chains.
-
-## Commands
-
-- `npm start` — run server (port 3459)
-- `npm run dev` — run with auto-open browser
-- `npx @biomejs/biome check public/app.js public/style.css` — lint
-- `npx @biomejs/biome format --write public/app.js public/style.css` — format
-
-## Architecture
-
-Single-file Express backend + vanilla JS frontend. No build step, no framework.
-
-- **`server.js`** — Express server with two main responsibilities:
-  1. **Filesystem scanning** (`discoverMemorySources`) — walks `~/.claude/`, ancestor directories, project `.claude/rules/`, and auto memory dirs to build the full memory source stack
-  2. **API endpoints** — `/api/stack`, `/api/summary`, `/api/file`, `/api/rules/match`, `/api/imports` etc.
-- **`public/app.js`** — SPA with tree panel (left) + preview panel (right) split layout. Fetches from API, renders tree grouped by scope, shows syntax-highlighted preview with frontmatter badges and clickable `@import` links.
-- **`public/style.css`** — CSS variables on `:root` (dark default), `body.light` overrides. Scope colors: user=blue, project=green, local=yellow, rule=purple, memory=orange, policy=red.
-
-Both JS files use `// #region` / `// #endregion` markers for code organization.
-
-## Key Server Concepts
-
-- **Project path encoding**: Claude Code stores auto memory in `~/.claude/projects/<encoded-path>/memory/`. The encoding replaces `/` with `-` and strips `:` from drive letters. `findMemoryDir()` tries exact match first, falls back to substring matching.
-- **Import resolution**: `@path/to/file.md` references are parsed from content. `resolveExistingImports()` resolves paths and filters out non-existent files. Imported files are recursively added to the stack (max 5 levels).
-- **Frontmatter parsing**: YAML frontmatter in rules files (`paths`, `type`, `name`, `description`) determines conditional loading. `parseFrontmatter()` handles both inline values and YAML array syntax.
-- **Rules matching**: `micromatch` glob matching against rule `paths` frontmatter via `/api/rules/match?file=`.
-- **Cache**: 30-second TTL on `discoverMemorySources` results, cleared on project switch or manual refresh.
-
-## Conventions
-
-- Dark theme default, light theme via `body.light` class
-- Accent color: `#e86f33`
-- Fonts: IBM Plex Mono (data/code), Playfair Display (headings)
-- Keyboard-driven: j/k navigation, t=theme, r=refresh, e=open in editor, ?=help
-- Port 3459 (cost=3458, marketplace=3460)
-- `zoom: 1.25` on body for proportional scaling
-- No token/context budget estimation — only line/byte counts (deliberate decision)
-
-## Prior Art
-
-- `../claude-code-cost` — same stack, data visualization patterns
-- `../claude-code-marketplace` — file tree, markdown preview, project picker, Highlight.js usage

package/biome.json

@@ -1,33 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/2.4.10/schema.json",
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2,
-    "lineWidth": 120
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "style": {
-        "noDescendingSpecificity": "off"
-      },
-      "suspicious": {
-        "useIterableCallbackReturn": "off"
-      }
-    }
-  },
-  "javascript": {
-    "formatter": {
-      "quoteStyle": "single"
-    }
-  },
-  "css": {
-    "formatter": {
-      "quoteStyle": "single"
-    }
-  },
-  "files": {
-    "includes": ["public/app.js", "public/style.css"]
-  }
-}