create-claude-code-visualizer 0.1.0

package/index.js

@@ -0,0 +1,393 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { execSync, spawnSync } = require("child_process");
+const prompts = require("prompts");
+
+const BLUE = "\x1b[34m";
+const GREEN = "\x1b[32m";
+const YELLOW = "\x1b[33m";
+const RED = "\x1b[31m";
+const NC = "\x1b[0m";
+
+const log = (msg) => console.log(`${GREEN}[✓]${NC} ${msg}`);
+const info = (msg) => console.log(`${BLUE}[→]${NC} ${msg}`);
+const warn = (msg) => console.log(`${YELLOW}[!]${NC} ${msg}`);
+const err = (msg) => console.log(`${RED}[✗]${NC} ${msg}`);
+
+const TEMPLATES_DIR = path.join(__dirname, "templates");
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function copyDir(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function copyIfNotExists(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.copyFileSync(src, dest);
+    return true;
+  }
+  return false;
+}
+
+function copyDirAdditive(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  let added = 0;
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      if (!fs.existsSync(destPath)) {
+        copyDir(srcPath, destPath);
+        added++;
+      }
+    } else {
+      if (copyIfNotExists(srcPath, destPath)) added++;
+    }
+  }
+  return added;
+}
+
+function mergeJsonFile(srcPath, destPath, mergeFn) {
+  if (!fs.existsSync(destPath)) {
+    fs.copyFileSync(srcPath, destPath);
+    return;
+  }
+  const existing = JSON.parse(fs.readFileSync(destPath, "utf8"));
+  const ours = JSON.parse(fs.readFileSync(srcPath, "utf8"));
+  const merged = mergeFn(existing, ours);
+  fs.writeFileSync(destPath, JSON.stringify(merged, null, 2) + "\n");
+}
+
+function run(cmd, opts = {}) {
+  try {
+    return execSync(cmd, { stdio: "inherit", ...opts });
+  } catch {
+    return null;
+  }
+}
+
+function runCapture(cmd) {
+  try {
+    return execSync(cmd, { encoding: "utf8" }).trim();
+  } catch {
+    return null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+async function main() {
+  console.log("");
+  console.log(`${BLUE}╔══════════════════════════════════════════════════╗${NC}`);
+  console.log(`${BLUE}║       Claude Code Visualizer — Setup        ║${NC}`);
+  console.log(`${BLUE}╚══════════════════════════════════════════════════╝${NC}`);
+  console.log("");
+
+  // Determine project directory from CLI arg or prompt
+  let projectDir = process.argv[2];
+
+  if (!projectDir) {
+    const res = await prompts({
+      type: "text",
+      name: "dir",
+      message: "Project directory",
+      initial: "my-claude-visualizer",
+    });
+    if (!res.dir) process.exit(0);
+    projectDir = res.dir;
+  }
+
+  const projectRoot = path.resolve(projectDir);
+  const isExisting = fs.existsSync(projectRoot) && fs.existsSync(path.join(projectRoot, ".claude"));
+  const appDir = path.join(projectRoot, "personal-assistant-app");
+
+  if (isExisting) {
+    info(`Detected existing .claude/ project at ${projectRoot}`);
+    info("Will merge additively — your existing files always win.");
+  } else {
+    info(`Creating new project at ${projectRoot}`);
+  }
+  console.log("");
+
+  // -----------------------------------------------------------------
+  // Credentials
+  // -----------------------------------------------------------------
+
+  const creds = await prompts([
+    {
+      type: "password",
+      name: "anthropicKey",
+      message: "Anthropic API key (sk-ant-...)",
+      validate: (v) => v.startsWith("sk-ant-") || "Key should start with sk-ant-",
+    },
+    {
+      type: "text",
+      name: "supabaseUrl",
+      message: "Supabase project URL (https://xyz.supabase.co)",
+    },
+    {
+      type: "password",
+      name: "supabaseAnonKey",
+      message: "Supabase anon key",
+    },
+  ]);
+
+  if (!creds.anthropicKey) process.exit(0);
+
+  // -----------------------------------------------------------------
+  // Copy the app
+  // -----------------------------------------------------------------
+
+  info("Setting up project files...");
+
+  fs.mkdirSync(projectRoot, { recursive: true });
+
+  // Copy personal-assistant-app (the Next.js UI)
+  const appTemplate = path.join(TEMPLATES_DIR, "app");
+  if (fs.existsSync(appDir)) {
+    warn("personal-assistant-app/ already exists — updating...");
+  }
+  copyDir(appTemplate, appDir);
+  log("personal-assistant-app/ installed");
+
+  // -----------------------------------------------------------------
+  // Set up .claude/ (agents, commands, skills, hooks, settings)
+  // -----------------------------------------------------------------
+
+  const srcClaude = path.join(TEMPLATES_DIR, "claude");
+  const dstClaude = path.join(projectRoot, ".claude");
+
+  // Agents
+  const addedAgents = copyDirAdditive(
+    path.join(srcClaude, "agents"),
+    path.join(dstClaude, "agents")
+  );
+  log(`Agents: added ${addedAgents} new`);
+
+  // Commands
+  const addedCommands = copyDirAdditive(
+    path.join(srcClaude, "commands"),
+    path.join(dstClaude, "commands")
+  );
+  log(`Commands: added ${addedCommands} new`);
+
+  // Skills
+  const addedSkills = copyDirAdditive(
+    path.join(srcClaude, "skills"),
+    path.join(dstClaude, "skills")
+  );
+  log(`Skills: added ${addedSkills} new`);
+
+  // Hooks
+  fs.mkdirSync(path.join(dstClaude, "hooks"), { recursive: true });
+  let addedHooks = 0;
+  for (const hook of fs.readdirSync(path.join(srcClaude, "hooks"))) {
+    const src = path.join(srcClaude, "hooks", hook);
+    const dest = path.join(dstClaude, "hooks", hook);
+    if (copyIfNotExists(src, dest)) {
+      try { fs.chmodSync(dest, 0o755); } catch {}
+      addedHooks++;
+    }
+  }
+  log(`Hooks: added ${addedHooks} new`);
+
+  // settings.local.json — merge hooks config
+  mergeJsonFile(
+    path.join(srcClaude, "settings.local.json"),
+    path.join(dstClaude, "settings.local.json"),
+    (existing, ours) => {
+      // Merge hooks: add our hook events if they don't already exist
+      const mergedHooks = { ...(ours.hooks || {}) };
+      for (const [event, hooks] of Object.entries(existing.hooks || {})) {
+        mergedHooks[event] = hooks; // existing wins
+      }
+      return {
+        ...existing,
+        enableAllProjectMcpServers:
+          existing.enableAllProjectMcpServers ?? ours.enableAllProjectMcpServers,
+        hooks: mergedHooks,
+      };
+    }
+  );
+  log("settings.local.json configured");
+
+  // .mcp.json — merge servers
+  mergeJsonFile(
+    path.join(TEMPLATES_DIR, "mcp.json"),
+    path.join(projectRoot, ".mcp.json"),
+    (existing, ours) => ({
+      mcpServers: { ...(ours.mcpServers || {}), ...(existing.mcpServers || {}) },
+    })
+  );
+  log(".mcp.json configured");
+
+  // CLAUDE.md
+  const claudeMdDest = path.join(projectRoot, "CLAUDE.md");
+  if (copyIfNotExists(path.join(TEMPLATES_DIR, "CLAUDE.md"), claudeMdDest)) {
+    log("CLAUDE.md created");
+  } else {
+    log("CLAUDE.md exists — keeping yours");
+  }
+
+  // -----------------------------------------------------------------
+  // Write .env.local
+  // -----------------------------------------------------------------
+
+  const envContent = `# Generated by create-personalai — ${new Date().toISOString()}
+ANTHROPIC_API_KEY=${creds.anthropicKey}
+NEXT_PUBLIC_SUPABASE_URL=${creds.supabaseUrl}
+NEXT_PUBLIC_SUPABASE_ANON_KEY=${creds.supabaseAnonKey}
+SUPABASE_URL=${creds.supabaseUrl}
+SUPABASE_ANON_KEY=${creds.supabaseAnonKey}
+REDIS_URL=redis://localhost:6379
+PROJECT_ROOT=${projectRoot}
+`;
+
+  fs.writeFileSync(path.join(appDir, ".env.local"), envContent, { mode: 0o600 });
+  log(".env.local created");
+
+  // Add Supabase MCP server if we have a URL
+  const supabaseMatch = (creds.supabaseUrl || "").match(
+    /https:\/\/([^.]+)\.supabase\.co/
+  );
+  if (supabaseMatch) {
+    const ref = supabaseMatch[1];
+    const mcpPath = path.join(projectRoot, ".mcp.json");
+    const mcp = JSON.parse(fs.readFileSync(mcpPath, "utf8"));
+    mcp.mcpServers.supabase = {
+      type: "http",
+      url: `https://mcp.supabase.com/mcp?project_ref=${ref}`,
+    };
+    fs.writeFileSync(mcpPath, JSON.stringify(mcp, null, 2) + "\n");
+    log("Supabase MCP server added");
+  }
+
+  // -----------------------------------------------------------------
+  // npm install
+  // -----------------------------------------------------------------
+
+  info("Installing dependencies...");
+  run("npm install", { cwd: appDir });
+  log("Dependencies installed");
+
+  // -----------------------------------------------------------------
+  // Google Workspace (optional)
+  // -----------------------------------------------------------------
+
+  console.log("");
+  const { setupGws } = await prompts({
+    type: "confirm",
+    name: "setupGws",
+    message: "Set up Google Workspace integration? (Gmail, Calendar, Drive, etc.)",
+    initial: false,
+  });
+
+  if (setupGws) {
+    console.log("");
+    info("Installing Google Workspace CLI...");
+    run("npm install @anthropic-ai/claude-code-google-workspace", { cwd: projectRoot });
+
+    // Check if gws auth is needed
+    const hasAuth = runCapture("npx gws auth status");
+    if (!hasAuth) {
+      console.log("");
+      const { gwsAuth } = await prompts({
+        type: "select",
+        name: "gwsAuth",
+        message: "Google Workspace authentication",
+        choices: [
+          { title: "Full setup (creates GCP project + OAuth)", value: "setup" },
+          { title: "Login only (you already have OAuth configured)", value: "login" },
+          { title: "Skip for now", value: "skip" },
+        ],
+      });
+
+      if (gwsAuth === "setup") {
+        run("npx gws auth setup --login", { cwd: projectRoot });
+      } else if (gwsAuth === "login") {
+        run("npx gws auth login", { cwd: projectRoot });
+      } else {
+        info("Skipping auth. Run later: npx gws auth setup --login");
+      }
+    } else {
+      log("Already authenticated with Google Workspace");
+    }
+
+    // Install GWS skills
+    console.log("");
+    const { installSkills } = await prompts({
+      type: "confirm",
+      name: "installSkills",
+      message: "Install Google Workspace skills? (lets agents use Gmail, Calendar, etc.)",
+      initial: true,
+    });
+
+    if (installSkills) {
+      run("npx skills add https://github.com/googleworkspace/cli", { cwd: projectRoot });
+    }
+
+    // Add gws permission to settings
+    const settingsPath = path.join(dstClaude, "settings.local.json");
+    const settings = JSON.parse(fs.readFileSync(settingsPath, "utf8"));
+    if (!JSON.stringify(settings).includes("npx gws")) {
+      settings.permissions = settings.permissions || {};
+      settings.permissions.allow = settings.permissions.allow || [];
+      settings.permissions.allow.push("Bash(npx gws:*)");
+      fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + "\n");
+      log("Added gws permission to settings");
+    }
+
+    log("Google Workspace setup complete");
+  }
+
+  // -----------------------------------------------------------------
+  // Done
+  // -----------------------------------------------------------------
+
+  console.log("");
+  console.log(`${GREEN}╔══════════════════════════════════════════════════╗${NC}`);
+  console.log(`${GREEN}║           Setup Complete!                        ║${NC}`);
+  console.log(`${GREEN}╚══════════════════════════════════════════════════╝${NC}`);
+  console.log("");
+
+  log(`Project created at: ${projectRoot}`);
+  console.log("");
+  info("To get started:");
+  console.log("");
+  console.log(`  cd ${projectDir}/personal-assistant-app`);
+  console.log("  redis-server &           # Start Redis (needed for job queue)");
+  console.log("  npm run dev:all          # Start the app + worker");
+  console.log("");
+  info("Then open http://localhost:3000");
+  console.log("");
+
+  if (!setupGws) {
+    info("To add Google Workspace later:");
+    console.log(`  cd ${projectDir}`);
+    console.log("  npm install @anthropic-ai/claude-code-google-workspace");
+    console.log("  npx gws auth setup --login");
+    console.log("  npx skills add https://github.com/googleworkspace/cli");
+    console.log("");
+  }
+}
+
+main().catch((e) => {
+  err(e.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "create-claude-code-visualizer",
+  "version": "0.1.0",
+  "description": "Run and manage Claude Code agents through a web UI",
+  "license": "MIT",
+  "bin": {
+    "create-claude-code-visualizer": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "templates/**"
+  ],
+  "scripts": {
+    "prepare-templates": "node prepare-templates.js",
+    "prepublishOnly": "node prepare-templates.js"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "claude",
+    "ai",
+    "assistant",
+    "agents",
+    "claude-code",
+    "create"
+  ]
+}

package/templates/CLAUDE.md

@@ -0,0 +1,108 @@
+# PersonalAIssistant
+
+## Identity
+
+You are the user's personal AI assistant. You have full access to every tool, MCP server, skill, and subagent in this workspace. Handle tasks directly when you can, delegate to specialized subagents when their expertise produces better results.
+
+## Architecture
+
+This project is a personal assistant platform built on Claude Code. It consists of:
+
+- **personal-assistant-app/** — A Next.js 15 frontend for managing and running AI agents
+- **.claude/** — Claude Code configuration (agents, skills, commands, hooks)
+- **assets/** — Static assets (fonts, images, documents)
+
+## MCP Servers (auto-loaded from .mcp.json)
+
+- **Chrome DevTools** (`mcp__chrome-devtools__*`) — Browser debugging, screenshots, DOM inspection
+
+Add more MCP servers by editing `.mcp.json` at the project root.
+
+## Creating Agents
+
+Agents live in `.claude/agents/*.md`. Each agent has YAML frontmatter + markdown instructions:
+
+```yaml
+---
+name: Agent Name
+description: What this agent does
+tools: 'WebSearch, WebFetch, Read'
+color: '#8B5CF6'
+emoji: "\U0001F52E"
+vibe: Short tagline
+---
+# Agent instructions here...
+```
+
+The frontend auto-discovers agents from this directory.
+
+## Creating Skills
+
+Skills live in `.claude/skills/*/SKILL.md`. Each skill directory contains a `SKILL.md` with frontmatter:
+
+```yaml
+---
+name: skill-name
+description: What this skill does
+---
+Skill instructions here...
+```
+
+## Creating Commands
+
+Commands live in `.claude/commands/*.md`. They become available as `/command-name` in Claude Code:
+
+```yaml
+---
+description: What this command does
+allowed-tools:
+  - Read
+  - Edit
+---
+Command instructions here...
+```
+
+## Hooks (automatic, no action needed)
+
+Hooks fire automatically — do not invoke them manually:
+- `block-destructive.sh` — Blocks dangerous bash commands (rm -rf, git reset --hard, etc.)
+- `auto-approve-safe.sh` — Auto-approves safe read-only commands (ls, git status, etc.)
+- `auto-format.sh` — Auto-formats code after edits (prettier for JS/TS, ruff for Python)
+- `compaction-preserver.sh` — Preserves critical context during session compaction
+- `notify.sh` — Desktop notifications when Claude needs attention
+
+## Frontend Development
+
+### Screenshot Feedback Loop
+
+After generating frontend code, close the loop:
+1. Take a screenshot with Chrome DevTools MCP (`take_screenshot`)
+2. Check console for errors (`list_console_messages`)
+3. If the design looks generic or has issues, fix and re-screenshot
+4. Only report done after visual verification
+
+## Running the App
+
+```bash
+# Prerequisites: Node.js 18+, Redis server
+
+# 1. Install dependencies
+cd personal-assistant-app && npm install
+
+# 2. Copy and fill in environment variables
+cp .env.local.example .env.local
+# Edit .env.local with your Supabase + Anthropic keys
+
+# 3. Start Redis (required for BullMQ job queue)
+redis-server
+
+# 4. Start the app + worker
+npm run dev:all
+```
+
+The app runs at http://localhost:3000.
+
+## Session Continuity
+
+- `/add-to-todos` — Capture tasks mid-work without breaking flow
+- `/check-todos` — Review and pick up saved todos

package/templates/app/.env.local.example

@@ -0,0 +1,14 @@
+# Supabase — create a project at https://supabase.com
+NEXT_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+SUPABASE_URL=https://YOUR_PROJECT.supabase.co
+SUPABASE_ANON_KEY=your-anon-key
+
+# Anthropic — get your key at https://console.anthropic.com
+ANTHROPIC_API_KEY=sk-ant-api03-...
+
+# Redis — used by BullMQ for agent job queues
+REDIS_URL=redis://localhost:6379
+
+# Project root — absolute path to this repo on your machine
+PROJECT_ROOT=/path/to/PersonalAIssistantBase

package/templates/app/ecosystem.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  apps: [
+    {
+      name: "personalai-web",
+      script: "npm",
+      args: "start",
+      cwd: __dirname,
+      env: {
+        NODE_ENV: "production",
+        PORT: 3000,
+      },
+      max_memory_restart: "512M",
+      restart_delay: 5000,
+      max_restarts: 10,
+    },
+    {
+      name: "personalai-worker",
+      script: "npm",
+      args: "run start:worker",
+      cwd: __dirname,
+      env: {
+        NODE_ENV: "production",
+      },
+      max_memory_restart: "1G",
+      restart_delay: 5000,
+      max_restarts: 10,
+    },
+  ],
+};

package/templates/app/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/app/next.config.ts

@@ -0,0 +1,16 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  devIndicators: false,
+  serverExternalPackages: ["@anthropic-ai/claude-agent-sdk", "ioredis", "bullmq"],
+  async rewrites() {
+    return [
+      {
+        source: "/",
+        destination: "/agents/main/chat",
+      },
+    ];
+  },
+};
+
+export default nextConfig;