seeclaudecode 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seeclaudecode",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Real-time visualization of repository structure - watch Claude Code edit your codebase",
   "main": "server.js",
   "type": "module",
@@ -36,5 +36,6 @@
   },
   "engines": {
     "node": ">=18.0.0"
-  }
+  },
+  "claudeCodePlugin": ".claude-plugin/plugin.json"
 }

package/repo-visualizer/.claude-plugin/plugin.json

@@ -0,0 +1,12 @@
+{
+  "name": "seeclaudecode",
+  "description": "Real-time repository visualization for Claude Code",
+  "version": "1.0.1",
+  "author": {
+    "name": "Nina Lu"
+  },
+  "homepage": "https://github.com/ninajlu/seeclaudecode",
+  "repository": "https://github.com/ninajlu/seeclaudecode",
+  "license": "MIT",
+  "skills": "../skills/"
+}

package/repo-visualizer/.github/workflows/publish.yml

@@ -0,0 +1,27 @@
+name: Publish to npm
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: npm install
+
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/repo-visualizer/README.md

@@ -0,0 +1,155 @@
+# SeeClaudeCode
+
+Real-time visualization of your repository structure while Claude Code edits your codebase.
+
+![SeeClaudeCode Screenshot](https://seeclaudecode.fly.dev/screenshot.jpg)
+
+## Features
+
+- **Architecture Graph** - Interactive diagram showing your project's directory structure with pan/zoom
+- **Sunburst View** - Radial visualization of your codebase hierarchy
+- **File Explorer** - Traditional tree view with change tracking
+- **Real-time Git Diff** - See exactly what changed in any file or directory
+- **Live Highlighting**:
+  - **Yellow pulse** - Files with pending changes (git diff)
+  - **Green pulse** - Files currently being edited
+
+## Installation
+
+```bash
+npm install -g seeclaudecode
+npx seeclaudecode
+```
+
+## Claude Code Plugin
+
+Install the SeeClaudeCode skill directly in Claude Code:
+
+```bash
+/plugin marketplace add ninajlu/seeclaudecode
+/plugin install seeclaudecode@seeclaudecode
+```
+
+This adds a skill that helps Claude understand when and how to use SeeClaudeCode during your coding sessions.
+
+## Usage
+
+```bash
+# Quick start with npx (no install needed)
+npx seeclaudecode
+
+# Interactive mode - prompts for directory selection
+seeclaudecode
+
+# Monitor specific directory
+npx seeclaudecode ./my-project
+
+# Monitor with absolute path
+npx seeclaudecode /path/to/repo
+
+# Use custom port
+npx seeclaudecode . --port 4000
+
+# Don't auto-open browser
+npx seeclaudecode . --no-open
+```
+
+When started without a directory argument, you'll see an interactive menu:
+```
+Select a directory to monitor:
+
+  1) Current directory
+     /Users/you/projects
+  2) my-app
+     /Users/you/projects/my-app
+
+  Or enter a custom path
+
+📁 Directory:
+```
+
+## Switching Directories
+
+While running, you can switch to a different directory at any time:
+- Type a new path and press Enter to switch
+- Type `quit` or `exit` to stop
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `-p, --port <port>` | Port to run server on (default: 3847) |
+| `-n, --no-open` | Don't automatically open browser |
+| `-h, --help` | Show help message |
+| `-v, --version` | Show version number |
+
+## How It Works
+
+1. Start SeeClaudeCode (it will prompt for a directory or use the one you specify)
+2. Open the displayed URL in your browser
+3. Run Claude Code in the same directory
+4. Watch as files pulse and highlight when Claude makes changes
+5. Click on any file or directory to see the git diff
+6. Switch directories anytime by typing a new path
+
+## Views
+
+### Architecture Graph
+An interactive node-based diagram showing your project structure. Changed files appear below their parent directories with pulsing yellow highlights.
+
+### Sunburst View
+A radial visualization where each ring represents a directory level. Click on segments to see diffs for that directory.
+
+### File Explorer
+A traditional tree view showing all files with color-coded change indicators.
+
+## Visual Indicators
+
+| Indicator | Meaning |
+|-----------|---------|
+| Yellow pulsing | Pending changes (in git diff) |
+| Green pulsing | Currently being edited |
+| Purple nodes | Directories |
+| Green nodes | Code files (.js, .ts, .py, etc.) |
+| Pink nodes | Style files (.css, .scss) |
+| Orange nodes | Config files (.json, .yaml) |
+| Blue nodes | Documentation (.md, .txt) |
+
+## Requirements
+
+- Node.js 18.0.0 or higher
+- Git (for diff functionality)
+
+## Development
+
+```bash
+# Clone and install
+git clone <repo-url>
+cd seeclaudecode
+npm install
+
+# Run locally
+npm start /path/to/repo
+
+# Link for global testing
+npm link
+seeclaudecode /path/to/repo
+```
+
+## Architecture
+
+```
+seeclaudecode/
+├── bin/
+│   └── cli.js         # CLI entry point
+├── public/
+│   ├── index.html     # Main HTML structure
+│   ├── styles.css     # Styling and animations
+│   └── app.js         # Frontend visualization logic
+├── server.js          # Express server with WebSocket & file watching
+└── package.json
+```
+
+## License
+
+MIT

package/repo-visualizer/bin/cli.js

@@ -0,0 +1,336 @@
+#!/usr/bin/env node
+
+import { fileURLToPath } from 'url';
+import { dirname, join, resolve } from 'path';
+import { existsSync, statSync, readdirSync } from 'fs';
+import { spawn } from 'child_process';
+import { createInterface } from 'readline';
+import { createServer } from 'net';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Parse arguments
+const args = process.argv.slice(2);
+let targetDir = null; // Don't default to cwd - prompt instead
+let port = 3847;
+let openBrowser = true;
+
+// Help text
+const helpText = `
+  SeeClaudeCode - Watch Claude Code edit your codebase in real-time
+
+  Usage:
+    seeclaudecode [directory] [options]
+
+  Arguments:
+    directory          Directory to monitor (will prompt if not provided)
+
+  Options:
+    -p, --port <port>  Port to run server on (default: 3847)
+    -n, --no-open      Don't automatically open browser
+    -h, --help         Show this help message
+    -v, --version      Show version number
+
+  Examples:
+    seeclaudecode                    # Prompts for directory
+    seeclaudecode ./my-project       # Monitor specific directory
+    seeclaudecode /path/to/repo      # Monitor absolute path
+    seeclaudecode . --port 4000      # Use custom port
+
+  While running:
+    Type a new path and press Enter to switch directories
+    Type 'quit' or 'exit' to stop
+
+  Once running, open the displayed URL in your browser to see:
+    - Architecture graph of your codebase
+    - Sunburst visualization
+    - File explorer with change tracking
+    - Real-time git diff viewer
+    - Yellow pulsing highlights for pending changes
+    - Green pulsing for files being actively edited
+`;
+
+// Parse arguments
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i];
+
+  if (arg === '-h' || arg === '--help') {
+    console.log(helpText);
+    process.exit(0);
+  }
+
+  if (arg === '-v' || arg === '--version') {
+    const pkg = await import('../package.json', { with: { type: 'json' } });
+    console.log(`seeclaudecode v${pkg.default.version}`);
+    process.exit(0);
+  }
+
+  if (arg === '-p' || arg === '--port') {
+    port = parseInt(args[++i], 10);
+    if (isNaN(port)) {
+      console.error('Error: Invalid port number');
+      process.exit(1);
+    }
+    continue;
+  }
+
+  if (arg === '-n' || arg === '--no-open') {
+    openBrowser = false;
+    continue;
+  }
+
+  if (!arg.startsWith('-')) {
+    targetDir = resolve(arg);
+  }
+}
+
+// Create readline interface
+const rl = createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+// Promisified question
+function question(prompt) {
+  return new Promise((resolve) => {
+    rl.question(prompt, resolve);
+  });
+}
+
+// Check if port is available
+function isPortAvailable(port) {
+  return new Promise((resolve) => {
+    const server = createServer();
+    server.once('error', () => resolve(false));
+    server.once('listening', () => {
+      server.close();
+      resolve(true);
+    });
+    server.listen(port);
+  });
+}
+
+// Find an available port starting from the given port
+async function findAvailablePort(startPort) {
+  let currentPort = startPort;
+  const maxAttempts = 10;
+
+  for (let i = 0; i < maxAttempts; i++) {
+    if (await isPortAvailable(currentPort)) {
+      return currentPort;
+    }
+    currentPort++;
+  }
+
+  throw new Error(`Could not find an available port after ${maxAttempts} attempts`);
+}
+
+// Validate directory
+function validateDirectory(dir) {
+  const resolved = resolve(dir);
+  if (!existsSync(resolved)) {
+    return { valid: false, error: `Directory does not exist: ${resolved}` };
+  }
+  if (!statSync(resolved).isDirectory()) {
+    return { valid: false, error: `Path is not a directory: ${resolved}` };
+  }
+  return { valid: true, path: resolved };
+}
+
+// Get suggested directories (recent git repos, common project locations)
+function getSuggestedDirs() {
+  const suggestions = [];
+  const cwd = process.cwd();
+
+  // Add current directory
+  suggestions.push({ path: cwd, label: 'Current directory' });
+
+  // Check for subdirectories that look like projects
+  try {
+    const entries = readdirSync(cwd, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.isDirectory() && !entry.name.startsWith('.') && !entry.name.startsWith('node_modules')) {
+        const subPath = join(cwd, entry.name);
+        // Check if it's a git repo or has package.json
+        if (existsSync(join(subPath, '.git')) || existsSync(join(subPath, 'package.json'))) {
+          suggestions.push({ path: subPath, label: entry.name });
+        }
+      }
+    }
+  } catch (e) {
+    // Ignore errors
+  }
+
+  return suggestions.slice(0, 5); // Max 5 suggestions
+}
+
+// Print banner
+function printBanner() {
+  console.log(`
+\x1b[36m╔═══════════════════════════════════════════════════════════╗
+║                                                           ║
+║   \x1b[33m👁️  SeeClaudeCode\x1b[36m                                       ║
+║   \x1b[90mWatch Claude Code edit your codebase in real-time\x1b[36m       ║
+║                                                           ║
+╚═══════════════════════════════════════════════════════════╝\x1b[0m
+`);
+}
+
+// Prompt for directory
+async function promptForDirectory() {
+  const suggestions = getSuggestedDirs();
+
+  console.log('\x1b[36mSelect a directory to monitor:\x1b[0m\n');
+
+  suggestions.forEach((s, i) => {
+    console.log(`  \x1b[33m${i + 1})\x1b[0m ${s.label}`);
+    if (s.label !== s.path) {
+      console.log(`     \x1b[90m${s.path}\x1b[0m`);
+    }
+  });
+
+  console.log(`\n  \x1b[90mOr enter a custom path\x1b[0m\n`);
+
+  while (true) {
+    const answer = await question('\x1b[36m📁 Directory:\x1b[0m ');
+
+    // Check if it's a number selection
+    const num = parseInt(answer, 10);
+    if (!isNaN(num) && num >= 1 && num <= suggestions.length) {
+      return suggestions[num - 1].path;
+    }
+
+    // Treat as a path
+    if (answer.trim()) {
+      const result = validateDirectory(answer.trim());
+      if (result.valid) {
+        return result.path;
+      }
+      console.log(`\x1b[31m${result.error}\x1b[0m`);
+    }
+  }
+}
+
+// Server management
+let server = null;
+let currentDir = null;
+
+function startServer(dir) {
+  currentDir = dir;
+
+  console.log(`\n\x1b[90m📁 Monitoring:\x1b[0m ${dir}`);
+  console.log(`\x1b[90m🌐 Server:\x1b[0m     http://localhost:${port}`);
+  console.log(`\n\x1b[90m💡 Type a new path to switch directories, or 'quit' to exit\x1b[0m\n`);
+
+  const serverPath = join(__dirname, '..', 'server.js');
+  server = spawn('node', [serverPath, dir], {
+    stdio: ['pipe', 'inherit', 'inherit'],
+    env: { ...process.env, PORT: port.toString() }
+  });
+
+  server.on('close', (code) => {
+    if (code !== null && code !== 0) {
+      console.error(`\x1b[31mServer exited with code ${code}\x1b[0m`);
+    }
+  });
+
+  return server;
+}
+
+function stopServer() {
+  if (server) {
+    server.kill('SIGTERM');
+    server = null;
+  }
+}
+
+function restartServer(newDir) {
+  console.log(`\n\x1b[33m🔄 Switching to: ${newDir}\x1b[0m`);
+  stopServer();
+
+  // Brief delay before restarting
+  setTimeout(() => {
+    startServer(newDir);
+  }, 500);
+}
+
+// Main
+async function main() {
+  printBanner();
+
+  // If directory wasn't provided as argument, prompt for it
+  if (!targetDir) {
+    targetDir = await promptForDirectory();
+  } else {
+    // Validate provided directory
+    const result = validateDirectory(targetDir);
+    if (!result.valid) {
+      console.error(`\x1b[31mError: ${result.error}\x1b[0m`);
+      process.exit(1);
+    }
+    targetDir = result.path;
+  }
+
+  // Find available port
+  const requestedPort = port;
+  port = await findAvailablePort(port);
+  if (port !== requestedPort) {
+    console.log(`\x1b[33mPort ${requestedPort} is in use, using port ${port} instead\x1b[0m`);
+  }
+
+  // Start the server
+  startServer(targetDir);
+
+  // Open browser after a short delay
+  if (openBrowser) {
+    setTimeout(async () => {
+      try {
+        const open = (await import('open')).default;
+        await open(`http://localhost:${port}`);
+      } catch (e) {
+        // Silently fail if can't open browser
+      }
+    }, 1500);
+  }
+
+  // Listen for directory changes
+  rl.on('line', (input) => {
+    const trimmed = input.trim();
+
+    if (trimmed === 'quit' || trimmed === 'exit') {
+      console.log('\n\x1b[90mShutting down...\x1b[0m');
+      stopServer();
+      rl.close();
+      process.exit(0);
+    }
+
+    if (trimmed) {
+      const result = validateDirectory(trimmed);
+      if (result.valid) {
+        restartServer(result.path);
+      } else {
+        console.log(`\x1b[31m${result.error}\x1b[0m`);
+      }
+    }
+  });
+
+  // Handle exit
+  process.on('SIGINT', () => {
+    console.log('\n\x1b[90mShutting down...\x1b[0m');
+    stopServer();
+    rl.close();
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', () => {
+    stopServer();
+    rl.close();
+    process.exit(0);
+  });
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});