cc-plan-viewer 0.1.0

package/hooks/plan-viewer-hook.cjs

@@ -0,0 +1,201 @@
+#!/usr/bin/env node
+// cc-plan-viewer PostToolUse hook
+// Detects plan file writes and opens the browser-based plan viewer.
+// Also injects review feedback back into Claude Code via additionalContext.
+
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const http = require('http');
+const { execSync, spawn } = require('child_process');
+
+const SERVER_PORT = 3847;
+const PORT_FILE = path.join(os.tmpdir(), 'cc-plan-viewer-port');
+const DEBOUNCE_FILE = path.join(os.tmpdir(), 'cc-plan-viewer-opened.json');
+const DEBOUNCE_MS = 30000; // 30 seconds
+
+// Plans directory candidates
+const PLANS_DIRS = [
+  path.join(os.homedir(), '.claude-personal', 'plans'),
+  path.join(os.homedir(), '.claude', 'plans'),
+];
+
+function getPlansDir() {
+  for (const dir of PLANS_DIRS) {
+    if (fs.existsSync(dir)) return dir;
+  }
+  return null;
+}
+
+function getServerPort() {
+  try {
+    return parseInt(fs.readFileSync(PORT_FILE, 'utf8').trim(), 10) || SERVER_PORT;
+  } catch {
+    return SERVER_PORT;
+  }
+}
+
+function isPlanFile(filePath) {
+  if (!filePath || !filePath.endsWith('.md')) return false;
+  const plansDir = getPlansDir();
+  if (!plansDir) return false;
+  return path.dirname(filePath) === plansDir;
+}
+
+function shouldOpenBrowser(filename) {
+  try {
+    const data = JSON.parse(fs.readFileSync(DEBOUNCE_FILE, 'utf8'));
+    const lastOpened = data[filename];
+    if (lastOpened && Date.now() - lastOpened < DEBOUNCE_MS) return false;
+  } catch {}
+  return true;
+}
+
+function markBrowserOpened(filename) {
+  let data = {};
+  try { data = JSON.parse(fs.readFileSync(DEBOUNCE_FILE, 'utf8')); } catch {}
+  data[filename] = Date.now();
+  fs.writeFileSync(DEBOUNCE_FILE, JSON.stringify(data), 'utf8');
+}
+
+function postToServer(port, filePath) {
+  return new Promise((resolve) => {
+    const payload = JSON.stringify({ filePath });
+    const req = http.request(
+      {
+        hostname: '127.0.0.1',
+        port,
+        path: '/api/plan-updated',
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(payload) },
+        timeout: 2000,
+      },
+      (res) => { res.resume(); resolve(true); }
+    );
+    req.on('error', () => resolve(false));
+    req.on('timeout', () => { req.destroy(); resolve(false); });
+    req.write(payload);
+    req.end();
+  });
+}
+
+function startServer() {
+  // Server entry point: <pkg>/dist/server/server/index.js
+  const serverPath = path.join(__dirname, '..', 'dist', 'server', 'server', 'index.js');
+  if (!fs.existsSync(serverPath)) return;
+  const child = spawn(process.execPath, [serverPath], {
+    detached: true,
+    stdio: 'ignore',
+    env: { ...process.env, PORT: String(SERVER_PORT) },
+  });
+  child.unref();
+}
+
+async function waitForServer(port, maxWaitMs = 3000) {
+  const start = Date.now();
+  while (Date.now() - start < maxWaitMs) {
+    const ok = await new Promise((resolve) => {
+      const req = http.request(
+        { hostname: '127.0.0.1', port, path: '/health', method: 'GET', timeout: 500 },
+        (res) => { res.resume(); resolve(res.statusCode === 200); }
+      );
+      req.on('error', () => resolve(false));
+      req.on('timeout', () => { req.destroy(); resolve(false); });
+      req.end();
+    });
+    if (ok) return true;
+    await new Promise(r => setTimeout(r, 200));
+  }
+  return false;
+}
+
+function checkUnconsumedReviews() {
+  const plansDir = getPlansDir();
+  if (!plansDir) return null;
+
+  const files = fs.readdirSync(plansDir).filter(f => f.endsWith('.review.json'));
+  for (const file of files) {
+    try {
+      const reviewPath = path.join(plansDir, file);
+      const review = JSON.parse(fs.readFileSync(reviewPath, 'utf8'));
+      if (review.consumedAt) continue;
+
+      // Mark as consumed
+      review.consumedAt = new Date().toISOString();
+      fs.writeFileSync(reviewPath, JSON.stringify(review, null, 2), 'utf8');
+
+      // Format feedback
+      if (review.action === 'feedback') {
+        let msg = `PLAN REVIEW FEEDBACK for "${review.planFile}":\n`;
+        if (review.inlineComments && review.inlineComments.length > 0) {
+          msg += `\n${review.inlineComments.length} inline comment(s):\n\n`;
+          for (let i = 0; i < review.inlineComments.length; i++) {
+            const c = review.inlineComments[i];
+            msg += `--- Comment ${i + 1} ---\n`;
+            msg += `Selected text: "${c.sectionId}"\n`;
+            msg += `Feedback: ${c.body}\n\n`;
+          }
+        }
+        if (review.overallComment) {
+          msg += `--- General comment ---\n`;
+          msg += `${review.overallComment}\n`;
+        }
+        return msg;
+      } else {
+        return `PLAN REVIEW for "${review.planFile}": User selected "${review.action}"`;
+      }
+    } catch {}
+  }
+  return null;
+}
+
+// Main
+let input = '';
+process.stdin.setEncoding('utf8');
+process.stdin.on('data', (chunk) => (input += chunk));
+process.stdin.on('end', async () => {
+  try {
+    const data = JSON.parse(input);
+    const toolName = data.tool_name;
+    const filePath = data.tool_input?.file_path;
+
+    // Check for unconsumed reviews on every invocation
+    const reviewFeedback = checkUnconsumedReviews();
+
+    // Check if this is a plan file write
+    const isPlan = (toolName === 'Write' || toolName === 'Edit') && isPlanFile(filePath);
+
+    if (isPlan) {
+      const port = getServerPort();
+      const serverReachable = await postToServer(port, filePath);
+
+      if (!serverReachable) {
+        startServer();
+        await waitForServer(port);
+        await postToServer(port, filePath);
+      }
+
+      const filename = path.basename(filePath);
+      if (shouldOpenBrowser(filename)) {
+        markBrowserOpened(filename);
+        try {
+          execSync(`open "http://localhost:${port}/?plan=${encodeURIComponent(filename)}"`, { stdio: 'ignore' });
+        } catch {}
+      }
+    }
+
+    // Output hook response
+    if (reviewFeedback) {
+      const output = {
+        hookSpecificOutput: {
+          hookEventName: 'PostToolUse',
+          additionalContext: reviewFeedback,
+        },
+      };
+      process.stdout.write(JSON.stringify(output));
+    }
+  } catch {
+    // Silent fail — never block tool execution
+    process.exit(0);
+  }
+});

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "cc-plan-viewer",
+  "version": "0.1.0",
+  "description": "Browser-based PR-style review UI for Claude Code plans",
+  "type": "module",
+  "bin": {
+    "cc-plan-viewer": "./dist/server/bin/cc-plan-viewer.js"
+  },
+  "files": [
+    "dist/",
+    "hooks/",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "concurrently \"tsx watch server/index.ts\" \"vite\"",
+    "build": "vite build && tsc -p tsconfig.server.json",
+    "start": "node dist/server/server/index.js",
+    "install-hook": "node dist/server/bin/cc-plan-viewer.js install",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": ["claude", "claude-code", "plan", "review", "viewer"],
+  "license": "MIT",
+  "author": "Damià Fuentes Escoté",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/damiafuentes/cc-plan-viewer"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "express": "^5.1.0",
+    "ws": "^8.18.0"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.0.0",
+    "@types/ws": "^8.5.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.0",
+    "concurrently": "^9.0.0",
+    "postcss": "^8.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.0",
+    "rehype-highlight": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "tailwindcss": "^3.4.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}