@aabadin/project-memory-context 0.2.6 → 0.2.8

package/bin/pmc-view-context.mjs

@@ -6,9 +6,11 @@ import { fileURLToPath } from 'node:url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PACKAGE_ROOT = resolve(__dirname, '..');
 
-const GRAPH_EXPLORER_PATH = resolve(PACKAGE_ROOT, '../pmc-graph-explorer/server.mjs');
+// graph-explorer lives INSIDE the package: tools/pmc-graph-explorer/
+const GRAPH_EXPLORER_PATH = resolve(PACKAGE_ROOT, 'tools/pmc-graph-explorer/server.mjs');
 
 const child = spawn(process.execPath, [GRAPH_EXPLORER_PATH], {
+  cwd: process.cwd(),
   stdio: 'inherit',
   detached: true,
   shell: true,

package/cli/bootstrap.mjs

@@ -2,15 +2,15 @@
 import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { access, constants, readFile, writeFile, mkdir } from 'node:fs/promises';
-import { existsSync, readdirSync, mkdirSync, copyFileSync } from 'node:fs';
+import { existsSync, readdirSync, copyFileSync } from 'node:fs';
 import { spawnSync } from 'node:child_process';
 
 import { bootstrapProjectInstall } from '../src/setup-bootstrap.mjs';
 import { resolveGraphify, spawnBackground, resolvePythonBin } from '../src/platform.mjs';
+import { installPmcTools } from './install-pmc.mjs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PMC_CLI_ROOT = resolve(__dirname);
-const PMC_ROOT = resolve(__dirname, '..', '..', '..');
 const PMC_PACKAGE_ROOT = resolve(__dirname, '..');
 
 const OLLAMA_URL = process.env.OLLAMA_URL || 'http://localhost:11434';
@@ -94,46 +94,8 @@ async function installGraphify() {
 }
 
 async function syncToolsToTarget(projectRoot) {
-  log('Copying PMC tools to target repo...');
-  const srcCli = resolve(PMC_ROOT, 'tools', 'project-memory-context', 'cli');
-  const dstCli = resolve(projectRoot, 'tools', 'project-memory-context', 'cli');
-
-  mkdirSync(resolve(projectRoot, 'tools', 'project-memory-context'), { recursive: true });
-  mkdirSync(dstCli, { recursive: true });
-
-  const files = ['new-project.mjs', 'bootstrap.mjs', 'enrich-queue.mjs', 'build-worklist.mjs', 'project-context.mjs', 'sanitize.mjs'];
-  for (const f of files) {
-    try {
-      copyFileSync(resolve(srcCli, f), resolve(dstCli, f));
-      log(`  copied ${f}`);
-    } catch {
-      log(`  skipped ${f} (not found in source)`);
-    }
-  }
-
-  const srcSrc = resolve(PMC_ROOT, 'tools', 'project-memory-context', 'src');
-  const dstSrc = resolve(projectRoot, 'tools', 'project-memory-context', 'src');
-  mkdirSync(dstSrc, { recursive: true });
-
-  function copyTree(srcDir, dstDir) {
-    mkdirSync(dstDir, { recursive: true });
-    const entries = readdirSync(srcDir, { withFileTypes: true });
-    for (const entry of entries) {
-      const srcPath = resolve(srcDir, entry.name);
-      const dstPath = resolve(dstDir, entry.name);
-      if (entry.isDirectory()) {
-        copyTree(srcPath, dstPath);
-      } else if (entry.isFile() && entry.name.endsWith('.mjs')) {
-        copyFileSync(srcPath, dstPath);
-        log(`  copied ${dstPath.replace(`${projectRoot}\\`, '').replace(/\\/g, '/')}`);
-      }
-    }
-  }
-
-  try {
-    copyTree(srcSrc, dstSrc);
-  } catch { log('  src/ copy skipped (may not exist)'); }
-
+  const result = installPmcTools({ sourceRoot: PMC_PACKAGE_ROOT, targetRoot: projectRoot });
+  log(`  copied ${result.cliFiles} CLI files, ${result.srcFiles} src files, ${result.templateFiles} templates`);
   log('  PMC tools synced to target repo.');
 }
 
@@ -199,7 +161,7 @@ function findFiles(dir, exts, ignore, projectRoot) {
 async function runStageB(projectRoot) {
   log('Running stage-b (build-worklist)...');
 
-  const ignore = ['node_modules', 'dist', '.git', 'bin', 'obj', '.opencode', '.planning'];
+  const ignore = ['node_modules', 'dist', '.git', 'bin', 'obj', '.opencode', '.planning', '.next'];
   const files = [
     ...findFiles(projectRoot, ['.ts', '.mjs', '.js'], ignore, projectRoot),
     ...findFiles(projectRoot, ['.cs'], ignore, projectRoot),
@@ -281,7 +243,7 @@ export async function main(args = process.argv.slice(2)) {
   const runEnrichFlag = args.includes('--enrich');
 
   log(`Target repo: ${targetDir}`);
-  log(`PMC package root: ${PMC_ROOT}`);
+  log(`PMC package root: ${PMC_PACKAGE_ROOT}`);
   log(`Ollama: ${OLLAMA_URL} | Model: ${OLLAMA_MODEL}`);
 
   if (!await ensureDir(targetDir)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aabadin/project-memory-context",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Portable project memory context CLI — bootstraps semantic enrichment workflows for any AI coding agent.",
   "license": "GPL-3.0-or-later",
   "type": "module",
@@ -58,6 +58,7 @@
     "@modelcontextprotocol/sdk": "^1.12.0",
     "acorn": "^8.16.0",
     "acorn-walk": "^8.3.0",
+    "express": "^5.2.1",
     "zod": "^3.24.0"
   }
 }

package/src/extractors/structure-extractor.mjs

@@ -1,11 +1,24 @@
 import { readdir, stat } from 'node:fs/promises';
 import { join, relative } from 'node:path';
 
+const IGNORED_DIRECTORIES = new Set([
+  'node_modules',
+  '.git',
+  '.planning',
+  '.next',
+  'graphify-out',
+  'dist',
+  'build',
+  'coverage',
+  '.turbo',
+  '.vercel',
+]);
+
 async function listDirectories(dir, root, depth = 0, maxDepth = 2, acc = []) {
   const entries = await readdir(dir, { withFileTypes: true });
   for (const entry of entries) {
     if (!entry.isDirectory()) continue;
-    if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === '.planning') continue;
+    if (IGNORED_DIRECTORIES.has(entry.name)) continue;
     const full = join(dir, entry.name);
     const rel = relative(root, full).replace(/\\/g, '/');
     acc.push({ rel, depth });

package/templates/opencode/commands/view-context.md

@@ -11,16 +11,10 @@ Open the PMC Graph Explorer to visualize the enrichment graph. The server runs o
 </objective>
 
 <execution>
-Start the graph explorer server:
+Start the graph explorer server using the globally installed PMC CLI:
 
 ```bash
-npx @aabadin/project-memory-context view-context
-```
-
-Or if PMC is installed globally:
-
-```bash
-pmc-view-context
+npx --yes --package @aabadin/project-memory-context pmc-view-context
 ```
 
 Then open http://localhost:3001 in your browser.

package/tools/pmc-graph-explorer/public/app.js

@@ -0,0 +1,94 @@
+import { createGraph } from "./graph.js";
+import { updateSidebar } from "./sidebar.js";
+import { initFilters, updateStats } from "./filters.js";
+import { loadContext } from "./context-tracker.js";
+
+const state = {
+  graphData: null,
+  worklistData: null,
+  contextData: null,
+  selectedNode: null,
+  activeOnly: false,
+  searchQuery: "",
+  enabledCommunities: new Set(),
+  enabledTypes: new Set(["file", "class", "method", "function", "interface"]),
+};
+
+async function loadData() {
+  const [graphRes, worklistRes, contextRes] = await Promise.all([
+    fetch("/api/graph"),
+    fetch("/api/worklist"),
+    fetch("/api/context"),
+  ]);
+  state.graphData = await graphRes.json();
+  state.worklistData = await worklistRes.json();
+  state.contextData = await contextRes.json();
+  return state;
+}
+
+function getActiveNodeIds() {
+  if (!state.contextData || !Array.isArray(state.contextData.activeNodeIds)) {
+    return new Set();
+  }
+  return new Set(state.contextData.activeNodeIds);
+}
+
+function getEnrichedNodeIds() {
+  if (!state.worklistData) return new Set();
+  return new Set(state.worklistData.map((e) => e.graphNodeId));
+}
+
+function getWorklistStatusMap() {
+  if (!state.worklistData) return new Map();
+  const m = new Map();
+  state.worklistData.forEach((e) => m.set(e.graphNodeId, e.status));
+  return m;
+}
+
+async function init() {
+  await loadData();
+
+  const communities = [
+    ...new Set(state.graphData.nodes.map((n) => n.community)),
+  ].sort((a, b) => a - b);
+  communities.forEach((c) => state.enabledCommunities.add(c));
+
+  state.getEnrichedNodeIds = getEnrichedNodeIds;
+  state.getWorklistStatusMap = getWorklistStatusMap;
+
+  initFilters(state, communities);
+  updateStats(state);
+  createGraph(state, {
+    onNodeClick: (node) => {
+      state.selectedNode = node;
+      updateSidebar(node, state);
+    },
+    getActiveNodeIds,
+    getEnrichedNodeIds,
+  });
+}
+
+document.getElementById("search").addEventListener("input", (e) => {
+  state.searchQuery = e.target.value.toLowerCase();
+  document.dispatchEvent(new CustomEvent("graph-update", { detail: state }));
+});
+
+document.getElementById("toggle-active").addEventListener("click", (e) => {
+  state.activeOnly = !state.activeOnly;
+  e.target.classList.toggle("active", state.activeOnly);
+  document.dispatchEvent(new CustomEvent("graph-update", { detail: state }));
+});
+
+document.getElementById("toggle-panel").addEventListener("click", () => {
+  document.getElementById("sidebar").classList.toggle("collapsed");
+  document.dispatchEvent(new CustomEvent("graph-resize"));
+});
+
+document.addEventListener("context-changed", async () => {
+  const res = await fetch("/api/context");
+  state.contextData = await res.json();
+  document.dispatchEvent(new CustomEvent("graph-update", { detail: state }));
+  updateStats(state);
+});
+
+init();

package/tools/pmc-graph-explorer/public/context-tracker.js

@@ -0,0 +1,18 @@
+export async function loadContext() {
+  try {
+    const res = await fetch("/api/context");
+    if (!res.ok) return { activeNodeIds: [] };
+    return await res.json();
+  } catch {
+    return { activeNodeIds: [] };
+  }
+}
+
+export async function markNodesActive(nodeIds) {
+  await fetch("/api/context", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ add: nodeIds }),
+  });
+  document.dispatchEvent(new CustomEvent("context-changed"));
+}

package/tools/pmc-graph-explorer/public/filters.js

@@ -0,0 +1,48 @@
+const COMMUNITY_COLORS_MAP = d3.scaleOrdinal(d3.schemeTableau10);
+
+export function initFilters(state, communities) {
+  const container = document.getElementById("filters");
+
+  const communitySection = document.createElement("div");
+  communitySection.innerHTML = `<h3>Communities (${communities.length})</h3>`;
+
+  communities.forEach((c) => {
+    const row = document.createElement("label");
+    row.className = "filter-row";
+    row.innerHTML = `<input type="checkbox" checked data-community="${c}"><span class="filter-dot" style="background:${COMMUNITY_COLORS_MAP(c)}"></span>Community ${c}`;
+    row.querySelector("input").addEventListener("change", (e) => {
+      if (e.target.checked) {
+        state.enabledCommunities.add(c);
+      } else {
+        state.enabledCommunities.delete(c);
+      }
+      document.dispatchEvent(new CustomEvent("graph-update", { detail: state }));
+      updateStats(state);
+    });
+    communitySection.appendChild(row);
+  });
+
+  container.appendChild(communitySection);
+}
+
+export function updateStats(state) {
+  const statsEl = document.getElementById("stats");
+  const nodes = state.graphData?.nodes || [];
+  const activeIds = new Set(state.contextData?.activeNodeIds || []);
+  const enrichedIds = state.getEnrichedNodeIds ? state.getEnrichedNodeIds() : new Set();
+  const activeCount = nodes.filter((n) => activeIds.has(n.id)).length;
+  const enrichedCount = nodes.filter((n) => enrichedIds.has(n.id)).length;
+  const visibleCount = nodes.filter((n) => {
+    const matchCommunity = state.enabledCommunities.has(n.community);
+    const matchActive = !state.activeOnly || activeIds.has(n.id);
+    const matchSearch = !state.searchQuery || n.label.toLowerCase().includes(state.searchQuery);
+    return matchCommunity && matchActive && matchSearch;
+  }).length;
+
+  statsEl.innerHTML = `
+    <span class="stat-badge">Nodes: ${nodes.length}</span>
+    <span class="stat-badge">Visible: ${visibleCount}</span>
+    <span class="stat-badge">Enriched: ${enrichedCount}</span>
+    ${activeCount > 0 ? `<span class="stat-badge active">Active: ${activeCount}</span>` : ""}
+  `;
+}

package/tools/pmc-graph-explorer/public/graph.js

@@ -0,0 +1,187 @@
+const COMMUNITY_COLORS = d3.scaleOrdinal(d3.schemeTableau10);
+const EDGE_RELATION_THICKNESS = {
+  imports_from: 2,
+  imports: 1.5,
+  contains: 1,
+  method: 1,
+  calls: 1.5,
+  inherits: 2,
+  case_of: 1,
+};
+
+function nodeRadius(node) {
+  const label = (node.label || "").toLowerCase();
+  if (/\.(ts|js|mjs|json)$/.test(label)) return 12;
+  if (label.includes("(")) return 5;
+  return 8;
+}
+
+export function createGraph(state, callbacks) {
+  const container = document.getElementById("canvas");
+  const svg = d3.select("#graph-svg");
+  const tooltip = document.getElementById("tooltip");
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+
+  svg.attr("viewBox", [0, 0, width, height]);
+
+  const g = svg.append("g");
+
+  const zoom = d3.zoom()
+    .scaleExtent([0.1, 8])
+    .on("zoom", (event) => {
+      g.attr("transform", event.transform);
+    });
+
+  svg.call(zoom);
+
+  const { nodes, links } = state.graphData;
+  const activeIds = callbacks.getActiveNodeIds();
+  const enrichedIds = callbacks.getEnrichedNodeIds();
+
+  const defs = svg.append("defs");
+  const filter = defs.append("filter").attr("id", "glow");
+  filter.append("feGaussianBlur").attr("stdDeviation", "6").attr("result", "blur");
+  filter.append("feMerge").selectAll("feMergeNode")
+    .data(["blur", "SourceGraphic"])
+    .join("feMergeNode")
+    .attr("in", (d) => d);
+
+  const linkElements = g.append("g")
+    .attr("class", "links")
+    .selectAll("line")
+    .data(links)
+    .join("line")
+    .attr("stroke", "#475569")
+    .attr("stroke-opacity", 0.15)
+    .attr("stroke-width", (d) => EDGE_RELATION_THICKNESS[d.relation] || 1);
+
+  const nodeGroups = g.append("g")
+    .attr("class", "nodes")
+    .selectAll("g")
+    .data(nodes)
+    .join("g")
+    .attr("class", "node-group")
+    .style("cursor", "pointer");
+
+  nodeGroups.filter((d) => activeIds.has(d.id))
+    .append("circle")
+    .attr("r", (d) => nodeRadius(d) + 6)
+    .attr("fill", "none")
+    .attr("stroke", "#06b6d4")
+    .attr("stroke-width", 2)
+    .attr("filter", "url(#glow)")
+    .attr("class", "active-halo");
+
+  nodeGroups.append("circle")
+    .attr("r", (d) => nodeRadius(d))
+    .attr("fill", (d) => COMMUNITY_COLORS(d.community))
+    .attr("fill-opacity", (d) => activeIds.has(d.id) ? 1 : 0.7)
+    .attr("stroke", (d) => activeIds.has(d.id) ? "#06b6d4" : "#1e293b")
+    .attr("stroke-width", (d) => activeIds.has(d.id) ? 2 : 1);
+
+  const simulation = d3.forceSimulation(nodes)
+    .force("link", d3.forceLink(links).id((d) => d.id).distance(40).strength(0.5))
+    .force("charge", d3.forceManyBody().strength(-80))
+    .force("center", d3.forceCenter(width / 2, height / 2))
+    .force("collide", d3.forceCollide().radius((d) => nodeRadius(d) + 4))
+    .alphaDecay(0.02)
+    .on("tick", ticked);
+
+  function ticked() {
+    linkElements
+      .attr("x1", (d) => d.source.x)
+      .attr("y1", (d) => d.source.y)
+      .attr("x2", (d) => d.target.x)
+      .attr("y2", (d) => d.target.y);
+
+    nodeGroups.attr("transform", (d) => `translate(${d.x},${d.y})`);
+  }
+
+  const drag = d3.drag()
+    .on("start", (event, d) => {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      d.fx = d.x;
+      d.fy = d.y;
+    })
+    .on("drag", (event, d) => {
+      d.fx = event.x;
+      d.fy = event.y;
+    })
+    .on("end", (event, d) => {
+      if (!event.active) simulation.alphaTarget(0);
+      d.fx = null;
+      d.fy = null;
+    });
+
+  nodeGroups.call(drag);
+
+  nodeGroups
+    .on("mouseover", (event, d) => {
+      const status = enrichedIds.has(d.id) ? "enriched" : "not enriched";
+      const active = activeIds.has(d.id) ? " | IN CONTEXT" : "";
+      tooltip.innerHTML = `<strong>${d.label}</strong><br><code>${d.source_file}:${d.source_location}</code><br>Community ${d.community} | ${status}${active}`;
+      tooltip.classList.add("visible");
+      tooltip.style.left = `${event.offsetX + 12}px`;
+      tooltip.style.top = `${event.offsetY - 8}px`;
+    })
+    .on("mouseout", () => {
+      tooltip.classList.remove("visible");
+    })
+    .on("click", (event, d) => {
+      event.stopPropagation();
+      callbacks.onNodeClick(d);
+    })
+    .on("dblclick", (event, d) => {
+      event.stopPropagation();
+      const scale = 2;
+      const transform = d3.zoomIdentity
+        .translate(width / 2 - d.x * scale, height / 2 - d.y * scale)
+        .scale(scale);
+      svg.transition().duration(400).call(zoom.transform, transform);
+    });
+
+  document.addEventListener("graph-update", (e) => {
+    applyFilters(e.detail, nodeGroups, linkElements, simulation);
+  });
+
+  document.addEventListener("graph-resize", () => {
+    const w = container.clientWidth;
+    const h = container.clientHeight;
+    svg.attr("viewBox", [0, 0, w, h]);
+    simulation.force("center", d3.forceCenter(w / 2, h / 2));
+    simulation.alpha(0.3).restart();
+  });
+}
+
+function applyFilters(state, nodeGroups, linkElements, simulation) {
+  const activeIds = new Set(
+    state.contextData?.activeNodeIds || []
+  );
+  const q = state.searchQuery;
+
+  nodeGroups.style("display", (d) => {
+    const matchSearch = !q || d.label.toLowerCase().includes(q) || d.source_file.toLowerCase().includes(q);
+    const matchCommunity = state.enabledCommunities.has(d.community);
+    const kind = inferKind(d.label);
+    const matchType = state.enabledTypes.has(kind);
+    const matchActive = !state.activeOnly || activeIds.has(d.id);
+    return matchSearch && matchCommunity && matchType && matchActive ? null : "none";
+  });
+
+  if (q) {
+    nodeGroups.select("circle:not(.active-halo)")
+      .attr("fill-opacity", (d) => d.label.toLowerCase().includes(q) ? 1 : 0.15);
+  } else {
+    nodeGroups.select("circle:not(.active-halo)")
+      .attr("fill-opacity", (d) => activeIds.has(d.id) ? 1 : 0.7);
+  }
+
+  simulation.alpha(0.1).restart();
+}
+
+function inferKind(label) {
+  if (/\.(ts|js|mjs|json)$/.test(label)) return "file";
+  if (label.includes("(")) return "method";
+  return "class";
+}

package/tools/pmc-graph-explorer/public/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>PMC Graph Explorer</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header class="header">
+    <div class="header-left">
+      <h1 class="header-title">PMC Graph Explorer</h1>
+      <div class="stats" id="stats"></div>
+    </div>
+    <div class="header-right">
+      <input type="text" id="search" class="search-input" placeholder="Search nodes..." autocomplete="off">
+      <button id="toggle-active" class="btn-toggle" title="Show only active context">Active only</button>
+      <button id="toggle-panel" class="btn-toggle" title="Toggle side panel">&#9776;</button>
+    </div>
+  </header>
+
+  <div class="main">
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-content" id="sidebar-content">
+        <p class="sidebar-empty">Click a node to see details</p>
+      </div>
+      <div class="sidebar-filters" id="filters"></div>
+    </aside>
+
+    <div class="canvas" id="canvas">
+      <svg id="graph-svg"></svg>
+      <div class="tooltip" id="tooltip"></div>
+    </div>
+  </div>
+
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <script type="module" src="app.js"></script>
+</body>
+</html>

package/tools/pmc-graph-explorer/public/sidebar.js

@@ -0,0 +1,85 @@
+const COMMUNITY_COLORS_MAP = d3.scaleOrdinal(d3.schemeTableau10);
+
+export function updateSidebar(node, state) {
+  const container = document.getElementById("sidebar-content");
+  if (!node) {
+    container.innerHTML = '<p class="sidebar-empty">Click a node to see details</p>';
+    return;
+  }
+
+  const activeIds = new Set(state.contextData?.activeNodeIds || []);
+  const isActive = activeIds.has(node.id);
+  const worklistMap = state.getWorklistStatusMap ? state.getWorklistStatusMap() : new Map();
+  const enrichStatus = worklistMap.get(node.id) || "unknown";
+
+  const inLinks = state.graphData.links.filter((l) => l.target === node.id || (l.target && l.target.id === node.id));
+  const outLinks = state.graphData.links.filter((l) => l.source === node.id || (l.source && l.source.id === node.id));
+
+  const kind = inferKind(node.label);
+
+  container.innerHTML = `
+    <div class="node-detail">
+      <div class="node-detail-label">Name</div>
+      <div class="node-detail-value">${escapeHtml(node.label)}</div>
+
+      <div class="node-detail-label">Kind</div>
+      <div class="node-detail-value"><span class="badge" style="background:var(--bg-elevated)">${kind}</span></div>
+
+      <div class="node-detail-label">Source</div>
+      <div class="node-detail-value"><code>${escapeHtml(node.source_file || "")}:${escapeHtml(node.source_location || "")}</code></div>
+
+      <div class="node-detail-label">Community</div>
+      <div class="node-detail-value">
+        <span class="badge badge-community" style="background:${COMMUNITY_COLORS_MAP(node.community)}">Community ${node.community}</span>
+      </div>
+
+      <div class="node-detail-label">Enrichment</div>
+      <div class="node-detail-value">
+        <span class="badge" style="background:var(--bg-elevated)">${enrichStatus}</span>
+      </div>
+
+      ${isActive ? '<div class="node-detail-value"><span class="badge badge-context">EN CONTEXTO</span></div>' : ""}
+
+      <div class="node-detail-label">Incoming (${inLinks.length})</div>
+      <ul class="relations-list">
+        ${inLinks.map((l) => {
+          const srcId = typeof l.source === "object" ? l.source.id : l.source;
+          const srcNode = state.graphData.nodes.find((n) => n.id === srcId);
+          return `<li data-node-id="${srcId}"><span class="rel-type">${escapeHtml(l.relation)}</span>${srcNode ? escapeHtml(srcNode.label) : srcId}</li>`;
+        }).join("")}
+      </ul>
+
+      <div class="node-detail-label">Outgoing (${outLinks.length})</div>
+      <ul class="relations-list">
+        ${outLinks.map((l) => {
+          const tgtId = typeof l.target === "object" ? l.target.id : l.target;
+          const tgtNode = state.graphData.nodes.find((n) => n.id === tgtId);
+          return `<li data-node-id="${tgtId}"><span class="rel-type">${escapeHtml(l.relation)}</span>${tgtNode ? escapeHtml(tgtNode.label) : tgtId}</li>`;
+        }).join("")}
+      </ul>
+    </div>
+  `;
+
+  container.querySelectorAll("[data-node-id]").forEach((el) => {
+    el.addEventListener("click", () => {
+      const targetId = el.getAttribute("data-node-id");
+      const targetNode = state.graphData.nodes.find((n) => n.id === targetId);
+      if (targetNode) {
+        state.selectedNode = targetNode;
+        updateSidebar(targetNode, state);
+      }
+    });
+  });
+}
+
+function inferKind(label) {
+  if (/\.(ts|js|mjs|json)$/.test(label)) return "file";
+  if (label.includes("(")) return "method";
+  return "class";
+}
+
+function escapeHtml(str) {
+  const d = document.createElement("div");
+  d.textContent = str;
+  return d.innerHTML;
+}

package/tools/pmc-graph-explorer/public/styles.css

@@ -0,0 +1,264 @@
+:root {
+  --bg-primary: #0f172a;
+  --bg-surface: #1e293b;
+  --bg-elevated: #334155;
+  --text-primary: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --accent: #06b6d4;
+  --accent-dim: #0891b2;
+  --border: #475569;
+  --radius: 6px;
+  --header-h: 56px;
+  --sidebar-w: 280px;
+  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.header {
+  height: var(--header-h);
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  z-index: 10;
+}
+
+.header-left { display: flex; align-items: center; gap: 16px; }
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.stats {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.stat-badge {
+  background: var(--bg-elevated);
+  padding: 2px 8px;
+  border-radius: var(--radius);
+}
+
+.stat-badge.active {
+  background: var(--accent);
+  color: var(--bg-primary);
+  font-weight: 600;
+}
+
+.header-right { display: flex; align-items: center; gap: 8px; }
+
+.search-input {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-primary);
+  padding: 6px 12px;
+  font-size: 13px;
+  width: 200px;
+  outline: none;
+  transition: border-color 150ms;
+}
+
+.search-input:focus { border-color: var(--accent); }
+
+.btn-toggle {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 6px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 150ms;
+}
+
+.btn-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
+.btn-toggle.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
+
+.main {
+  display: flex;
+  height: calc(100vh - var(--header-h));
+}
+
+.sidebar {
+  width: var(--sidebar-w);
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  transition: width 200ms ease, opacity 200ms ease;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.sidebar.collapsed { width: 0; opacity: 0; pointer-events: none; }
+
+.sidebar-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.sidebar-empty {
+  color: var(--text-secondary);
+  font-size: 13px;
+  text-align: center;
+  padding-top: 32px;
+}
+
+.sidebar-filters {
+  border-top: 1px solid var(--border);
+  padding: 12px 16px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.sidebar-filters h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 0;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.filter-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.node-detail-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.node-detail-value {
+  font-size: 14px;
+  margin-bottom: 12px;
+  word-break: break-all;
+}
+
+.node-detail-value code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  background: var(--bg-elevated);
+  padding: 2px 6px;
+  border-radius: var(--radius);
+}
+
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.badge-context {
+  background: var(--accent);
+  color: var(--bg-primary);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.badge-community {
+  color: var(--text-primary);
+}
+
+.relations-list {
+  list-style: none;
+  margin-top: 8px;
+}
+
+.relations-list li {
+  padding: 4px 0;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--accent-dim);
+  transition: color 100ms;
+}
+
+.relations-list li:hover { color: var(--accent); }
+
+.relations-list .rel-type {
+  color: var(--text-secondary);
+  margin-right: 4px;
+}
+
+.canvas {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+#graph-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.tooltip {
+  position: absolute;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+  font-size: 12px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 100ms;
+  z-index: 20;
+  max-width: 300px;
+}
+
+.tooltip.visible { opacity: 1; }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .badge-context { animation: none; }
+  .sidebar { transition: none; }
+}
+
+@media (max-width: 768px) {
+  .sidebar { width: 0; opacity: 0; pointer-events: none; }
+  .search-input { width: 120px; }
+  .stats { display: none; }
+}
+
+*:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}

package/tools/pmc-graph-explorer/server.mjs

@@ -0,0 +1,76 @@
+import express from "express";
+import { readFileSync, existsSync, writeFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Project root = where the user ran the command (their project directory)
+const projectRoot = process.env.PMC_PROJECT_ROOT
+  ? resolve(process.env.PMC_PROJECT_ROOT)
+  : resolve(process.cwd());
+
+const GRAPH_PATH = resolve(projectRoot, ".planning/project-memory-context/graph/graph.json");
+const WORKLIST_PATH = resolve(projectRoot, ".planning/project-memory-context/enrichment/worklist.json");
+const TRACKER_PATH = resolve(projectRoot, ".planning/project-memory-context/context-tracker.json");
+
+if (!existsSync(resolve(projectRoot, ".planning/project-memory-context"))) {
+  console.error(`Error: No PMC data found at ${projectRoot}`);
+  console.error(`Run this command from a project with .planning/project-memory-context/`);
+  process.exit(1);
+}
+
+const app = express();
+const PORT = 3001;
+
+app.use(express.static(resolve(__dirname, "public")));
+app.use(express.json());
+
+app.get("/api/graph", (req, res) => {
+  try {
+    const data = JSON.parse(readFileSync(GRAPH_PATH, "utf-8"));
+    res.json(data);
+  } catch {
+    res.status(404).json({ error: "graph.json not found" });
+  }
+});
+
+app.get("/api/worklist", (req, res) => {
+  try {
+    const data = JSON.parse(readFileSync(WORKLIST_PATH, "utf-8"));
+    res.json(data);
+  } catch {
+    res.status(404).json({ error: "worklist.json not found" });
+  }
+});
+
+app.get("/api/context", (req, res) => {
+  if (!existsSync(TRACKER_PATH)) {
+    return res.json({ activeNodeIds: [] });
+  }
+  try {
+    const data = JSON.parse(readFileSync(TRACKER_PATH, "utf-8"));
+    res.json(data);
+  } catch {
+    res.json({ activeNodeIds: [] });
+  }
+});
+
+app.post("/api/context", (req, res) => {
+  const { add } = req.body;
+  if (!Array.isArray(add)) return res.status(400).json({ error: "add must be array" });
+  let tracker = { activeNodeIds: [] };
+  if (existsSync(TRACKER_PATH)) {
+    try { tracker = JSON.parse(readFileSync(TRACKER_PATH, "utf-8")); } catch {}
+  }
+  const existing = new Set(tracker.activeNodeIds || []);
+  add.forEach((id) => existing.add(id));
+  tracker.activeNodeIds = [...existing];
+  writeFileSync(TRACKER_PATH, JSON.stringify(tracker, null, 2));
+  res.json(tracker);
+});
+
+app.listen(PORT, () => {
+  console.log(`PMC Graph Explorer running at http://localhost:${PORT}`);
+  console.log(`Project root: ${projectRoot}`);
+});