crg-dev-kit 2.0.7 → 2.2.1

package/assets/CLAUDE.md

@@ -1,48 +1,78 @@
-## MCP Tools: code-review-graph
-
-**Graph first, grep second.** Use CRG tools before Grep/Glob/Read — fewer tokens, structural context.
-
-### Tools that work (no extras)
-
-| Tool | When |
-|------|------|
-| `detect_changes` | Review changes — risk-scored, prioritized |
-| `get_review_context` | Token-efficient source snippets for review |
-| `get_impact_radius` | Blast radius of changed files (2-hop BFS) |
-| `query_graph` | 8 patterns: callers_of, callees_of, imports_of, importers_of, children_of, tests_for, inheritors_of, file_summary |
-| `semantic_search_nodes` | Find functions/classes by keyword |
-| `refactor_tool` | mode=rename (preview+apply), mode=dead_code, mode=suggest |
-| `apply_refactor` | Execute previewed rename (10min expiry) |
-| `find_large_functions` | Functions/classes over N lines |
-| `build_or_update_graph` | Build or refresh the graph |
-| `list_graph_stats` | Node/edge counts, health |
-| `cross_repo_search` | Search across registered repos |
-
-### Tools that need [communities] extra
-
-| Tool | Note |
-|------|------|
-| `get_architecture_overview` | **Returns empty without communities — no error** |
-| `list_communities` | Use min_size=20 to avoid token overflow |
-| `get_community` | include_members=true for deep dive |
-| `generate_wiki` | Also needs Ollama running |
-
-### Broken in v2.1.0 — skip these
-
-- `get_affected_flows` — depends on flows (broken)
-- `list_flows` / `get_flow` — trace_flows TypeError bug
-
-### Workflow
-
-1. Graph auto-updates via hooks on file save.
-2. `detect_changes` for code review.
-3. `query_graph pattern="tests_for"` for coverage check.
-4. `get_impact_radius` before merging.
-5. Fall back to Grep/Glob/Read only when graph doesn't cover it.
-
-### Gotchas
-
-- Communities return 0? Restart AI tool (MCP server caches old env).
-- Over-clustered? `list_communities(min_size=20)`.
-- Package name is `code-review-graph` NOT `crg`.
-- Linux: use pipx, not pip. Extras via `pipx inject`.
+# ${PROJECT_NAME}
+
+## MANDATORY: Use CRG Tools First
+
+**CRITICAL: You MUST use code-review-graph (CRG) tools for ALL code exploration. Never use Read/Glob/Grep directly.**
+
+### Required Workflow
+
+1. **Every file read** → Use `get_review_context` or `query_graph` first
+2. **Code review** → Use `detect_changes` 
+3. **Finding tests** → Use `query_graph pattern="tests_for"`
+4. **Understanding code** → Use `query_graph pattern="callees_of"` or `callers_of"`
+5. **Impact analysis** → Use `get_impact_radius`
+
+### Why This Matters
+
+- **CRG**: 6.8x fewer tokens on file reads
+- **token-optimizer**: 95% compression on tool outputs
+- **mem0**: Persistent memory across sessions
+- **Combined**: Up to 49x token reduction + memory that persists
+
+### When You MUST Use CRG
+
+| Task | CRG Tool |
+|------|----------|
+| Read any file | `get_review_context` |
+| Find function usages | `query_graph` with callers_of |
+| Find tests for code | `query_graph pattern="tests_for"` |
+| Understand imports | `query_graph pattern="imports_of"` |
+| Review changes | `detect_changes` |
+| See impact radius | `get_impact_radius` |
+| Search code | `semantic_search_nodes` |
+
+### Memory: Log Your Decisions
+
+After completing a significant task, log the decision:
+```
+mem0.add("Added auth middleware. Why: Need rate limiting. Files: auth.js, rate.js. Context: 3 endpoints.")
+```
+
+This builds persistent memory for future sessions.
+
+### Fallback Only If
+
+- CRG returns insufficient info
+- File not in graph yet
+- Need very recent changes not yet in graph
+
+### Available Tools
+
+```
+CRG (code-review-graph):
+  detect_changes        - Risk-scored change review
+  get_review_context   - Token-efficient snippets
+  get_impact_radius     - Blast radius analysis  
+  query_graph           - Callers, callees, tests, imports
+  semantic_search      - Find by meaning
+  build_or_update_graph - Refresh graph
+  list_graph_stats     - Check graph health
+
+Memory (mem0):
+  mem0.add              - Store decision/context
+  mem0.search           - Retrieve past context
+```
+
+### Quick Commands
+
+```bash
+# Build graph when new code is added
+code-review-graph build
+
+# Check graph stats
+code-review-graph list_graph_stats
+```
+
+---
+
+*This file auto-generated by crg-dev-kit.*

package/lib/actions.js

@@ -53,6 +53,9 @@ function install(targetDir, trackROI = true) {
     }
   }
 
+  // Don't update global CLAUDE.md - preserve user's custom rules
+  // The project CLAUDE.md already has all CRG instructions
+
   if (trackROI) {
     roi.setInstallDate(targetDir);
   }
@@ -99,11 +102,9 @@ function uninstall(targetDir) {
 function healthCheck(targetDir) {
   const results = [];
 
-  // Check graph DB
   const dbPath = path.join(targetDir, '.code-review-graph', 'graph.db');
   results.push({ check: 'Graph DB exists', pass: fs.existsSync(dbPath) });
 
-  // Check setup files
   results.push({ check: 'setup-crg.sh present', pass: fs.existsSync(path.join(targetDir, 'setup-crg.sh')) });
   results.push({ check: 'CLAUDE.md present', pass: fs.existsSync(path.join(targetDir, 'CLAUDE.md')) });
 
@@ -111,11 +112,8 @@ function healthCheck(targetDir) {
     execFile('code-review-graph', ['--version'], (err, stdout) => {
       results.push({ check: 'code-review-graph CLI', pass: !err, version: err ? null : (stdout || '').trim() });
 
-      // Try getting graph stats
       if (fs.existsSync(dbPath)) {
         try {
-          const sqlite3 = require('child_process');
-          // Use python to read SQLite since we can't require sqlite3
           const cmd = `python3 -c "import sqlite3,json;db=sqlite3.connect('${dbPath}');r=dict(nodes=db.execute('SELECT COUNT(*) FROM nodes').fetchone()[0],edges=db.execute('SELECT COUNT(*) FROM edges').fetchone()[0]);print(json.dumps(r))"`;
           execFile('bash', ['-c', cmd], (err2, stdout2) => {
             if (!err2 && stdout2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crg-dev-kit",
-  "version": "2.0.7",
+  "version": "2.2.1",
   "description": "One-click setup for code-review-graph — AI-powered codebase knowledge graph with token analytics",
   "main": "server.js",
   "bin": {

package/server.js

@@ -1,7 +1,7 @@
 const http = require('http');
 const fs = require('fs');
 const path = require('path');
-const { execFile } = require('child_process');
+const { execFile, exec } = require('child_process');
 const analytics = require('./lib/analytics');
 const roi = require('./lib/roi');
 const actions = require('./lib/actions');
@@ -171,6 +171,14 @@ section{max-width:clamp(320px,90vw,780px);margin:0 auto;padding:0 clamp(16px,4vw
 .dl-size{font-family:var(--m);font-size:11px;color:var(--t4);flex-shrink:0}
 .dl-btn{background:var(--a);color:#fff;padding:6px 14px;border-radius:5px;font-size:12px;font-weight:700;flex-shrink:0;transition:background .15s}
 .dl-card:hover .dl-btn{background:#c2410c}
+.install-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}
+.install-card{background:var(--s);border:1px solid var(--b);border-radius:8px;padding:20px;display:flex;flex-direction:column}
+.install-card:hover{border-color:var(--a)}
+.install-header{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
+.install-icon{font-size:24px;line-height:1}
+.install-title{font-weight:700;font-size:15px}
+.install-desc{font-size:12px;color:var(--t3);margin-top:2px}
+.install-card .btn{margin-top:auto}
 .rc{background:var(--s);border:1px solid var(--b);border-radius:8px;padding:clamp(16px,3vw,32px)}
 .rc h1{font-size:22px;font-weight:700;margin-bottom:16px;letter-spacing:-0.02em}
 .rc h2{font-size:17px;font-weight:700;margin:24px 0 8px}
@@ -236,6 +244,9 @@ footer a{color:var(--a);text-decoration:none;font-weight:600}
 .tool-name{font-family:var(--m);font-size:11px;color:var(--a);font-weight:600}
 .tool-label{font-size:14px;font-weight:600;color:var(--t)}
 .tool-desc{font-size:12px;color:var(--t3);line-height:1.4}
+.btn-tool{background:var(--a);color:#fff;border:none;border-radius:4px;padding:4px 12px;font-size:11px;font-weight:600;cursor:pointer;margin-top:8px;width:100%}
+.btn-tool:hover{background:#c2410c}
+.btn-tool:disabled{opacity:.5;cursor:not-allowed}
 .btn{background:var(--a);color:#fff;padding:10px 20px;border:none;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:background .15s}
 .btn:hover{background:#c2410c}
 .btn:focus-visible{outline:2px solid var(--a);outline-offset:2px}
@@ -245,7 +256,7 @@ footer a{color:var(--a);text-decoration:none;font-weight:600}
 .btn-secondary{background:var(--bg);color:var(--t2);border:1px solid var(--b)}
 .check-pass{color:#16a34a}
 .check-fail{color:#dc2626}
-.check-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--b)}
+.check-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--b);color:var(--t)}
 .check-item:last-child{border-bottom:none}
 .result-box{background:var(--s);border:1px solid var(--b);border-radius:8px;padding:20px;margin-top:16px}
 .result-success{border-color:#16a34a;background:#f0fdf4}
@@ -261,9 +272,18 @@ footer a{color:var(--a);text-decoration:none;font-weight:600}
 @media(prefers-color-scheme:dark){
 :root{--bg:#1c1917;--s:#292524;--b:#44403c;--t:#fafaf9;--t2:#d6d3d1;--t3:#a8a29e;--t4:#78716c;--al:#292524;--ab:#44403c}
 .dl-card:hover,.roi-card,.stat-card,.tool-card,.project-table table,.roi-compare{background:var(--s)}
+.result-box{background:var(--s)}
+.result-success{background:#16653420;border-color:#22c55e}
+.result-error{background:#991b1b20;border-color:#ef4444}
+.check-pass{color:#22c55e}
+.check-fail{color:#ef4444}
 }
 @media(prefers-color-scheme:light){
 :root{--bg:#fafaf9;--s:#fff;--b:#e7e5e4;--t:#1c1917;--t2:#57534e;--t3:#78716c;--t4:#a8a29e;--al:#fff7ed;--ab:#fed7aa}
+.result-success{background:#f0fdf4;border-color:#16a34a}
+.result-error{background:#fef2f2;border-color:#dc2626}
+.check-pass{color:#16a34a}
+.check-fail{color:#dc2626}
 }
 @media(max-width:768px){
 .analytics-grid,.roi-grid{grid-template-columns:repeat(2,1fr)}
@@ -348,31 +368,97 @@ function tabDashboard(cwd) {
 function tabInstall(cwd) {
   return `
 <section>
-  <div class="st">Install CRG Dev Kit</div>
-  <p style="color:var(--t2);font-size:14px;margin-bottom:16px">Copy setup scripts, CLAUDE.md, and health check to your project directory.</p>
-  <div style="margin-bottom:16px">
-    <label for="install-dir" style="font-size:12px;font-weight:600;color:var(--t3);display:block;margin-bottom:6px">Target Directory</label>
-    <input class="input" id="install-dir" name="targetDir" value="${esc(cwd)}" />
+  <div class="st">Quick Install — Maximum Token Savings</div>
+  <p style="color:var(--t2);font-size:14px;margin-bottom:20px">Install both CRG + token-optimizer-mcp for 95%+ token reduction.</p>
+  <div class="install-options">
+    <div class="install-card">
+      <div class="install-header">
+        <span class="install-icon">⚡</span>
+        <div>
+          <div class="install-title">Full Stack (Recommended)</div>
+          <div class="install-desc">CRG + token-optimizer + mem0 — 95%+ token savings + persistent memory</div>
+        </div>
+      </div>
+      <button class="btn" style="width:100%;margin-top:12px" 
+        hx-post="/api/install-fullstack"
+        hx-target="#install-result"
+        hx-swap="innerHTML">
+        Install Full Stack
+      </button>
+    </div>
+    
+    <div class="install-card">
+      <div class="install-header">
+        <span class="install-icon">📊</span>
+        <div>
+          <div class="install-title">CRG Only</div>
+          <div class="install-desc">Knowledge graph — reads less, understands more</div>
+        </div>
+      </div>
+      <button class="btn btn-secondary" style="width:100%;margin-top:12px"
+        hx-post="/api/install"
+        hx-target="#install-result"
+        hx-swap="innerHTML"
+        hx-include="#install-dir">
+        Install CRG Only
+      </button>
+    </div>
+    
+    <div class="install-card">
+      <div class="install-header">
+        <span class="install-icon">🎯</span>
+        <div>
+          <div class="install-title">token-optimizer Only</div>
+          <div class="install-desc">Smart caching + compression for tool outputs</div>
+        </div>
+      </div>
+      <button class="btn btn-secondary" style="width:100%;margin-top:12px"
+        hx-post="/api/install-optimizer"
+        hx-target="#install-result"
+        hx-swap="innerHTML">
+        Install token-optimizer
+      </button>
+    </div>
+
+    <div class="install-card">
+      <div class="install-header">
+        <span class="install-icon">🧠</span>
+        <div>
+          <div class="install-title">mem0 Only</div>
+          <div class="install-desc">Persistent memory layer for sessions</div>
+        </div>
+      </div>
+      <button class="btn btn-secondary" style="width:100%;margin-top:12px"
+        hx-post="/api/install-mem0"
+        hx-target="#install-result"
+        hx-swap="innerHTML">
+        Install mem0
+      </button>
+    </div>
   </div>
-  <div style="display:flex;gap:12px;flex-wrap:wrap">
-    <button class="btn"
-      hx-post="/api/install"
-      hx-target="#install-result"
-      hx-swap="innerHTML"
-      hx-include="#install-dir"
-      hx-indicator="#install-spinner">
-      Install Files <span id="install-spinner" class="htmx-indicator"><span class="spinner"></span></span>
-    </button>
-    <button class="btn btn-danger"
-      hx-post="/api/uninstall"
-      hx-target="#install-result"
-      hx-swap="innerHTML"
-      hx-include="#install-dir"
-      hx-indicator="#uninstall-spinner">
-      Uninstall <span id="uninstall-spinner" class="htmx-indicator"><span class="spinner"></span></span>
-    </button>
+  
+  <div style="margin-top:24px">
+    <label for="install-dir" style="font-size:12px;font-weight:600;color:var(--t3);display:block;margin-bottom:6px">Target Directory (for CRG files)</label>
+    <input class="input" id="install-dir" name="targetDir" value="${esc(cwd)}" />
   </div>
+  
   <div id="install-result"></div>
+  
+  <div class="st" style="margin-top:32px">Why Full Stack?</div>
+  <div class="roi-grid" style="grid-template-columns:repeat(3,1fr)">
+    <div class="roi-card">
+      <div class="roi-value" style="color:#16a34a">6.8x</div>
+      <div class="roi-label">CRG Reduction</div>
+    </div>
+    <div class="roi-card">
+      <div class="roi-value" style="color:#16a34a">95%</div>
+      <div class="roi-label">token-optimizer</div>
+    </div>
+    <div class="roi-card">
+      <div class="roi-value" style="color:#16a34a">🧠</div>
+      <div class="roi-label">mem0 Memory</div>
+    </div>
+  </div>
 </section>`;
 }
 
@@ -549,17 +635,31 @@ function tabAnalytics(cwd) {
   return `<section>${roiHtml}${tokenHtml}</section>`;
 }
 
-function tabTools() {
+function tabTools(cwd) {
   const toolCards = CRG_TOOLS.map(t => `
-    <div class="tool-card" tabindex="0">
+    <div class="tool-card">
       <span class="tool-name">${t.name}</span>
       <span class="tool-label">${t.label}</span>
       <span class="tool-desc">${t.desc}</span>
+      <button class="btn-tool" onclick="runTool('${t.name}')">Run</button>
     </div>`).join('');
   return `<section>
-<div class="st">Available Tools</div>
-<p style="font-size:14px;color:var(--t3);margin-bottom:16px">These MCP tools are available in your projects after setup. They provide token-efficient code review and analysis.</p>
+<div class="st">CRG Tools</div>
+<p style="font-size:14px;color:var(--t3);margin-bottom:16px">Run tools directly from here. Click Run to execute.</p>
 <div class="tools-grid">${toolCards}</div>
+<div id="tool-result" style="margin-top:16px"></div>
+
+<div class="st" style="margin-top:32px">Graph Actions</div>
+<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px">
+  <button class="btn" hx-post="/api/graph/update" hx-target="#graph-result" hx-swap="innerHTML">
+    ↻ Rebuild Graph
+  </button>
+  <button class="btn btn-secondary" hx-get="/api/graph/stats" hx-target="#graph-stats" hx-swap="innerHTML">
+    View Stats
+  </button>
+</div>
+<div id="graph-result"></div>
+<div id="graph-stats" class="result-box" style="display:none"></div>
 </section>`;
 }
 
@@ -685,7 +785,7 @@ function start(port, noOpen) {
 
       } else if (url.pathname === '/tab/tools') {
         res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-        res.end(tabTools());
+        res.end(tabTools(cwd));
 
       } else if (url.pathname === '/tab/downloads') {
         res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
@@ -709,6 +809,60 @@ function start(port, noOpen) {
           }
         });
 
+      } else if (url.pathname === '/api/install-optimizer' && req.method === 'POST') {
+        exec('npm install -g token-optimizer-mcp', (err, stdout, stderr) => {
+          if (err) {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(`<div class="result-box result-error"><p>Failed to install: ${esc(stderr || err.message)}</p></div>`);
+            return;
+          }
+          res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+          res.end(`<div class="result-box result-success"><p>✓ token-optimizer-mcp installed globally</p><p style="font-size:13px;color:var(--t3);margin-top:8px">Add to your Claude Code config to activate.</p></div>`);
+        });
+
+      } else if (url.pathname === '/api/install-mem0' && req.method === 'POST') {
+        exec('pip install mem0ai 2>&1', (err, stdout, stderr) => {
+          if (err) {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(`<div class="result-box result-error"><p>Failed to install mem0: ${esc(stderr || err.message)}</p></div>`);
+            return;
+          }
+          res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+          res.end(`<div class="result-box result-success"><p>✓ mem0 installed</p><p style="font-size:13px;color:var(--t3);margin-top:8px">Persistent memory layer ready.</p></div>`);
+        });
+
+      } else if (url.pathname === '/api/install-fullstack' && req.method === 'POST') {
+        readBody(req, res, (data) => {
+          const targetDir = data.targetDir || cwd;
+          let output = '';
+          
+          try {
+            const crgResult = actions.install(targetDir);
+            output += `<div class="check-item"><span class="check-pass">✓</span> CRG installed (${crgResult.copied} files)</div>`;
+          } catch (err) {
+            output += `<div class="check-item"><span class="check-fail">✗</span> CRG: ${esc(err.message)}</div>`;
+          }
+          
+          exec('npm install -g token-optimizer-mcp', (err, stdout, stderr) => {
+            if (err) {
+              output += `<div class="check-item"><span class="check-fail">✗</span> token-optimizer: ${esc(stderr || err.message)}</div>`;
+            } else {
+              output += `<div class="check-item"><span class="check-pass">✓</span> token-optimizer installed</div>`;
+            }
+            
+            exec('pip install mem0ai 2>&1', (err2, stdout2, stderr2) => {
+              if (err2) {
+                output += `<div class="check-item"><span class="check-fail">✗</span> mem0: ${esc(stderr2 || err2.message)}</div>`;
+              } else {
+                output += `<div class="check-item"><span class="check-pass">✓</span> mem0 (memory layer) installed</div>`;
+              }
+              
+              res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+              res.end(`<div class="result-box result-success">${output}<p style="margin-top:16px;font-size:13px;color:var(--t3)">⚡ All 3 tools installed! See docs for configuration.</p></div>`);
+            });
+          });
+        });
+
       } else if (url.pathname === '/api/uninstall' && req.method === 'POST') {
         readBody(req, res, (data) => {
           const targetDir = data.targetDir || cwd;
@@ -744,18 +898,43 @@ function start(port, noOpen) {
 
       } else if (url.pathname === '/api/report') {
         const report = analytics.generateReport();
-        res.writeHead(200, { 'Content-Type': 'text/markdown' });
-        res.end(report);
+        const html = mdToHtml(report);
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        res.end(`<div class="rc">${html}</div>`);
 
       } else if (url.pathname === '/api/roi-report') {
         const report = roi.generateROIReport(cwd);
-        res.writeHead(200, { 'Content-Type': 'text/markdown' });
-        res.end(report);
+        const html = mdToHtml(report);
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        res.end(`<div class="rc">${html}</div>`);
+
+      } else if (url.pathname === '/api/graph/update' && req.method === 'POST') {
+        exec('code-review-graph build', { cwd: cwd }, (err, stdout, stderr) => {
+          if (err) {
+            res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(`<div class="result-box result-error"><p>Build failed: ${esc(stderr || err.message)}</p></div>`);
+            return;
+          }
+          res.writeHead(200, { 'Content-Type': 'text/html' });
+          res.end(`<div class="result-box result-success"><p>✓ Graph updated successfully</p><p style="font-size:12px;color:var(--t3)">${esc(stdout)}</p></div>`);
+        });
+
+      } else if (url.pathname === '/api/graph/stats') {
+        exec('code-review-graph list_graph_stats', { cwd: cwd }, (err, stdout, stderr) => {
+          if (err) {
+            res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(`<p style="color:var(--t3)">Graph stats unavailable</p>`);
+            return;
+          }
+          res.writeHead(200, { 'Content-Type': 'text/html' });
+          res.end(`<pre style="font-family:var(--m);font-size:12px;background:var(--bg);padding:12px;border-radius:6px">${esc(stdout)}</pre>`);
+        });
 
       } else if (url.pathname === '/api/daily-breakdown') {
         const breakdown = roi.generateDailyBreakdown();
-        res.writeHead(200, { 'Content-Type': 'text/markdown' });
-        res.end(breakdown);
+        const html = mdToHtml(breakdown);
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        res.end(`<div class="rc">${html}</div>`);
 
       } else if (url.pathname === '/api/session' && req.method === 'POST') {
         readBody(req, res, (data) => {