crg-dev-kit 2.0.5 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crg-dev-kit",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "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');
@@ -124,9 +124,9 @@ function buildPage() {
 <meta name="description" content="One-click setup for AI-powered code review with knowledge graph">
 <script src="https://unpkg.com/htmx.org@2.0.4"></script>
 <style>
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 *{margin:0;padding:0;box-sizing:border-box}
-:root{--bg:#fafaf9;--s:#fff;--b:#e7e5e4;--t:#1c1917;--t2:#57534e;--t3:#78716c;--t4:#a8a29e;--a:#ea580c;--al:#fff7ed;--ab:#fed7aa;--m:'JetBrains Mono',monospace;--f:'DM Sans',sans-serif}
+:root{--bg:#fafaf9;--s:#fff;--b:#e7e5e4;--t:#1c1917;--t2:#57534e;--t3:#78716c;--t4:#a8a29e;--a:#ea580c;--al:#fff7ed;--ab:#fed7aa;--m:'JetBrains Mono',monospace;--f:'DM Sans',system-ui,-apple-system,sans-serif}
 body{font-family:var(--f);background:var(--bg);color:var(--t);line-height:1.5;-webkit-font-smoothing:antialiased}
 .skip-link{position:absolute;left:-9999px;top:0;background:var(--a);color:#fff;padding:8px 16px;z-index:999}
 .skip-link:focus{left:0}
@@ -171,6 +171,13 @@ 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}
+.install-card:hover{border-color:var(--a)}
+.install-header{display:flex;gap:12px;align-items:flex-start}
+.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}
 .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}
@@ -245,7 +252,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,6 +268,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)}
@@ -345,31 +364,82 @@ 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 — maximum savings</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</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>
-  <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:#ea580c">49x</div>
+      <div class="roi-label">Combined</div>
+    </div>
+  </div>
 </section>`;
 }
 
@@ -706,6 +776,41 @@ 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-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-mcp 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)">⚡ Both tools installed! Update your .mcp.json to activate token-optimizer.</p></div>`);
+          });
+        });
+
       } else if (url.pathname === '/api/uninstall' && req.method === 'POST') {
         readBody(req, res, (data) => {
           const targetDir = data.targetDir || cwd;
@@ -741,18 +846,21 @@ 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/daily-breakdown') {
-        const breakdown = analytics.generateDailyBreakdown(cwd);
-        res.writeHead(200, { 'Content-Type': 'text/markdown' });
-        res.end(breakdown);
+        const breakdown = roi.generateDailyBreakdown();
+        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) => {