@viren/claude-code-dashboard 0.0.1 → 0.0.3

package/README.md

@@ -1,9 +1,42 @@
 # claude-code-dashboard
 
+[![npm version](https://img.shields.io/npm/v/@viren/claude-code-dashboard)](https://www.npmjs.com/package/@viren/claude-code-dashboard)
+[![CI](https://github.com/VirenMohindra/claude-code-dashboard/actions/workflows/ci.yml/badge.svg)](https://github.com/VirenMohindra/claude-code-dashboard/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Node.js](https://img.shields.io/badge/node-%3E%3D18-brightgreen)](https://nodejs.org)
+
 A visual dashboard for your [Claude Code](https://docs.anthropic.com/en/docs/claude-code) configuration across all repos.
 
 Scans your home directory for git repos, collects Claude Code configuration (commands, rules, skills, MCP servers, usage data), and generates a self-contained HTML dashboard.
 
+## Screenshots
+
+### Dashboard overview — stats, global commands, and rules
+
+![Overview](screenshots/01-overview.png)
+
+### Skills with auto-categorization and MCP server discovery
+
+![Skills and MCP](screenshots/02-skills-mcp.png)
+
+### Usage analytics — tool usage, languages, activity heatmap
+
+![Usage Analytics](screenshots/03-usage-analytics.png)
+
+### Repo cards with search, grouping, and consolidation hints
+
+![Repo Cards](screenshots/04-repo-cards.png)
+
+### Expanded repo — commands, rules, health score, matched skills
+
+![Repo Expanded](screenshots/05-repo-expanded.png)
+
+### Dark mode
+
+![Dark Mode](screenshots/06-dark-mode.png)
+
+> Screenshots generated with `claude-code-dashboard --demo`
+
 ## Features
 
 ### Core

package/generate-dashboard.mjs

@@ -20,9 +20,20 @@ import { execFileSync, execFile } from "child_process";
 import { readFileSync, writeFileSync, existsSync, readdirSync, mkdirSync } from "fs";
 import { join, basename, dirname } from "path";
 
-import { VERSION, HOME, CLAUDE_DIR, DEFAULT_OUTPUT, CONF, MAX_DEPTH } from "./src/constants.mjs";
+import {
+  VERSION,
+  HOME,
+  CLAUDE_DIR,
+  DEFAULT_OUTPUT,
+  CONF,
+  MAX_DEPTH,
+  REPO_URL,
+  SIMILARITY_THRESHOLD,
+} from "./src/constants.mjs";
 import { parseArgs, generateCompletions } from "./src/cli.mjs";
-import { shortPath, anonymizePath } from "./src/helpers.mjs";
+import { shortPath } from "./src/helpers.mjs";
+import { anonymizeAll } from "./src/anonymize.mjs";
+import { generateDemoData } from "./src/demo.mjs";
 import { findGitRepos, getScanRoots } from "./src/discovery.mjs";
 import { extractProjectDesc, extractSections, scanMdDir } from "./src/markdown.mjs";
 import { scanSkillsDir, groupSkillsByCategory } from "./src/skills.mjs";
@@ -44,6 +55,7 @@ import {
   parseProjectMcpConfig,
   findPromotionCandidates,
   scanHistoricalMcpServers,
+  classifyHistoricalServers,
 } from "./src/mcp.mjs";
 import { aggregateSessionMeta } from "./src/usage.mjs";
 import { handleInit } from "./src/templates.mjs";
@@ -58,6 +70,33 @@ const cliArgs = parseArgs(process.argv);
 if (cliArgs.completions) generateCompletions();
 if (cliArgs.command === "init") handleInit(cliArgs);
 
+// ── Demo Mode ────────────────────────────────────────────────────────────────
+
+if (cliArgs.demo) {
+  const demoData = generateDemoData();
+  const html = generateDashboardHtml(demoData);
+
+  const outputPath = cliArgs.output;
+  mkdirSync(dirname(outputPath), { recursive: true });
+  writeFileSync(outputPath, html);
+
+  if (!cliArgs.quiet) {
+    const sp = shortPath(outputPath);
+    console.log(`\n  claude-code-dashboard v${VERSION} (demo mode)\n`);
+    console.log(`  ✓ ${sp}`);
+    if (cliArgs.open) console.log(`  ✓ opening in browser`);
+    console.log(`\n  ${REPO_URL}`);
+    console.log();
+  }
+
+  if (cliArgs.open) {
+    const cmd =
+      process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+    execFile(cmd, [outputPath]);
+  }
+  process.exit(0);
+}
+
 // ── Collect Everything ───────────────────────────────────────────────────────
 
 const scanRoots = getScanRoots();
@@ -164,7 +203,7 @@ for (const repo of configured) {
   const similar = configured
     .filter((r) => r !== repo)
     .map((r) => ({ name: r.name, similarity: computeConfigSimilarity(repo, r) }))
-    .filter((r) => r.similarity >= 40)
+    .filter((r) => r.similarity >= SIMILARITY_THRESHOLD)
     .sort((a, b) => b.similarity - a.similarity)
     .slice(0, 2);
   repo.similarRepos = similar;
@@ -296,19 +335,41 @@ for (const s of allMcpServers) {
 for (const entry of Object.values(mcpByName)) {
   entry.disabledIn = disabledByServer[entry.name] || 0;
 }
+
+const historicalMcpMap = scanHistoricalMcpServers(CLAUDE_DIR);
+const currentMcpNames = new Set(allMcpServers.map((s) => s.name));
+const { recent: recentMcpServers, former: formerMcpServers } = classifyHistoricalServers(
+  historicalMcpMap,
+  currentMcpNames,
+);
+
+// Normalize all historical project paths
+for (const server of [...recentMcpServers, ...formerMcpServers]) {
+  server.projects = server.projects.map((p) => shortPath(p));
+}
+
+// Merge recently-seen servers into allMcpServers so they show up as current
+for (const server of recentMcpServers) {
+  if (!mcpByName[server.name]) {
+    mcpByName[server.name] = {
+      name: server.name,
+      type: "unknown",
+      projects: server.projects,
+      userLevel: false,
+      disabledIn: disabledByServer[server.name] || 0,
+      recentlyActive: true,
+    };
+  }
+}
 const mcpSummary = Object.values(mcpByName).sort((a, b) => {
   if (a.userLevel !== b.userLevel) return a.userLevel ? -1 : 1;
   return a.name.localeCompare(b.name);
 });
 const mcpCount = mcpSummary.length;
 
-const historicalMcpNames = scanHistoricalMcpServers(CLAUDE_DIR);
-const currentMcpNames = new Set(allMcpServers.map((s) => s.name));
-const formerMcpServers = historicalMcpNames.filter((name) => !currentMcpNames.has(name)).sort();
-
 // ── Usage Analytics ──────────────────────────────────────────────────────────
 
-const SESSION_META_LIMIT = 500;
+const SESSION_META_LIMIT = 1000;
 const sessionMetaDir = join(CLAUDE_DIR, "usage-data", "session-meta");
 const sessionMetaFiles = [];
 if (existsSync(sessionMetaDir)) {
@@ -479,10 +540,18 @@ if (cliArgs.diff) {
 // ── Anonymize ────────────────────────────────────────────────────────────────
 
 if (cliArgs.anonymize) {
-  for (const repo of [...configured, ...unconfigured]) {
-    repo.shortPath = anonymizePath(repo.shortPath);
-    repo.path = anonymizePath(repo.path);
-  }
+  anonymizeAll({
+    configured,
+    unconfigured,
+    globalCmds,
+    globalRules,
+    globalSkills,
+    chains,
+    mcpSummary,
+    mcpPromotions,
+    formerMcpServers,
+    consolidationGroups,
+  });
 }
 
 // ── JSON Output ──────────────────────────────────────────────────────────────
@@ -622,7 +691,21 @@ const html = generateDashboardHtml({
 const outputPath = cliArgs.output;
 mkdirSync(dirname(outputPath), { recursive: true });
 writeFileSync(outputPath, html);
-if (!cliArgs.quiet) console.log(outputPath);
+
+if (!cliArgs.quiet) {
+  const sp = shortPath(outputPath);
+  console.log(`\n  claude-code-dashboard v${VERSION}\n`);
+  console.log(
+    `  ${configuredCount} configured · ${unconfiguredCount} unconfigured · ${totalRepos} repos`,
+  );
+  console.log(
+    `  ${globalCmds.length} global commands · ${globalSkills.length} skills · ${mcpCount} MCP servers`,
+  );
+  console.log(`\n  ✓ ${sp}`);
+  if (cliArgs.open) console.log(`  ✓ opening in browser`);
+  console.log(`\n  ${REPO_URL}`);
+  console.log();
+}
 
 if (cliArgs.open) {
   const cmd =

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viren/claude-code-dashboard",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A visual dashboard for your Claude Code configuration across all repos",
   "type": "module",
   "bin": {

package/src/anonymize.mjs

@@ -0,0 +1,222 @@
+/**
+ * Deep anonymization for --anonymize flag.
+ *
+ * Builds a stable name map (real name -> generic label) and applies it
+ * across every data structure that ends up in the HTML output.
+ */
+
+const REPO_LABELS = [
+  "web-app",
+  "api-service",
+  "mobile-app",
+  "data-pipeline",
+  "admin-panel",
+  "shared-lib",
+  "cli-tool",
+  "docs-site",
+  "auth-service",
+  "analytics-engine",
+  "worker-queue",
+  "config-store",
+  "gateway",
+  "scheduler",
+  "notification-svc",
+  "search-index",
+  "media-service",
+  "payment-gateway",
+  "user-service",
+  "reporting-tool",
+  "internal-dashboard",
+  "test-harness",
+  "deploy-scripts",
+  "design-system",
+  "content-api",
+  "ml-pipeline",
+  "event-bus",
+  "cache-layer",
+  "log-aggregator",
+  "infra-tools",
+];
+
+const PERSON_RE = /\b[A-Z][a-z]+\s[A-Z][a-z]+\b/g;
+const GITHUB_HANDLE_RE = /@[a-zA-Z0-9][-a-zA-Z0-9]{0,38}\b/g;
+
+function anonymizePath(p) {
+  return p
+    .replace(/^\/Users\/[^/]+\//, "~/")
+    .replace(/^\/home\/[^/]+\//, "~/")
+    .replace(/^C:\\Users\\[^\\]+\\/, "~\\")
+    .replace(/^C:\/Users\/[^/]+\//, "~/");
+}
+
+function buildNameMap(configured, unconfigured) {
+  const map = new Map();
+  let idx = 0;
+  for (const repo of [...configured, ...unconfigured]) {
+    if (!map.has(repo.name)) {
+      const label = idx < REPO_LABELS.length ? REPO_LABELS[idx] : `project-${idx + 1}`;
+      map.set(repo.name, label);
+      idx++;
+    }
+  }
+
+  // Extract username from home dir paths to anonymize it too
+  for (const repo of [...configured, ...unconfigured]) {
+    const m = repo.path.match(/^\/(?:Users|home)\/([^/]+)\//);
+    if (m && m[1] && !map.has(m[1])) {
+      map.set(m[1], "user");
+      break;
+    }
+  }
+
+  return map;
+}
+
+function mapName(nameMap, name) {
+  return nameMap.get(name) || name;
+}
+
+/**
+ * Replace person names, GitHub handles, and all known repo names in text.
+ * Uses case-insensitive replacement to catch "Salsa", "salsa", "SALSA" etc.
+ */
+function anonymizeText(text, nameMap) {
+  let result = text.replace(PERSON_RE, "[name]").replace(GITHUB_HANDLE_RE, "@[user]");
+  if (nameMap) {
+    const sorted = [...nameMap.entries()].sort((a, b) => b[0].length - a[0].length);
+    for (const [real, anon] of sorted) {
+      if (real.length < 3) continue;
+      const re = new RegExp(escapeRegex(real), "gi");
+      result = result.replace(re, anon);
+    }
+  }
+  return result;
+}
+
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function anonymizeMdItems(items) {
+  return items.map((item, i) => ({
+    ...item,
+    name: `item-${String(i + 1).padStart(2, "0")}`,
+    desc: "...",
+    filepath: "", // prevent render functions from re-reading file content
+  }));
+}
+
+/**
+ * Anonymize all data structures in-place before HTML generation.
+ */
+export function anonymizeAll({
+  configured,
+  unconfigured,
+  globalCmds,
+  globalRules,
+  globalSkills,
+  chains,
+  mcpSummary,
+  mcpPromotions,
+  formerMcpServers,
+  consolidationGroups,
+}) {
+  const nameMap = buildNameMap(configured, unconfigured);
+
+  // Repos
+  for (const repo of [...configured, ...unconfigured]) {
+    const anonName = mapName(nameMap, repo.name);
+    repo.name = anonName;
+    repo.key = anonName;
+    repo.path = anonymizePath(repo.path).replace(/[^/]+$/, anonName);
+    repo.shortPath = anonymizePath(repo.shortPath).replace(/[^/]+$/, anonName);
+
+    // Description — redact entirely (contains arbitrary project-specific text)
+    repo.desc = repo.desc?.length ? ["[project description redacted]"] : [];
+
+    // Sections — keep headings (anonymized), redact preview content
+    for (const section of repo.sections || []) {
+      section.name = anonymizeText(section.name, nameMap);
+      section.preview = ["..."];
+    }
+
+    // Commands & rules
+    repo.commands = anonymizeMdItems(repo.commands || []);
+    repo.rules = anonymizeMdItems(repo.rules || []);
+
+    // Similar repos
+    repo.similarRepos = (repo.similarRepos || []).map((r) => ({
+      ...r,
+      name: mapName(nameMap, r.name),
+    }));
+
+    // Exemplar name
+    if (repo.exemplarName) {
+      repo.exemplarName = mapName(nameMap, repo.exemplarName);
+    }
+
+    // Suggestions text — may reference exemplar name
+    if (repo.suggestions) {
+      repo.suggestions = repo.suggestions.map((s) => anonymizeText(s, nameMap));
+    }
+
+    // MCP servers per repo
+    for (const mcp of repo.mcpServers || []) {
+      if (mcp.source) {
+        const repoName = mcp.source.split("/").pop();
+        const anonPath = anonymizePath(mcp.source);
+        mcp.source = anonPath.replace(/[^/]+$/, mapName(nameMap, repoName));
+      }
+    }
+  }
+
+  // Global commands, rules
+  globalCmds.splice(0, globalCmds.length, ...anonymizeMdItems(globalCmds));
+  globalRules.splice(0, globalRules.length, ...anonymizeMdItems(globalRules));
+
+  // Global skills — anonymize name, redact description + filepath
+  for (let i = 0; i < globalSkills.length; i++) {
+    const skill = globalSkills[i];
+    skill.name = `skill-${String(i + 1).padStart(2, "0")}`;
+    skill.desc = "...";
+    skill.filepath = "";
+  }
+
+  // Chains — anonymize node names (may have extra text like "name (backend)")
+  for (const chain of chains) {
+    chain.nodes = chain.nodes.map((n) => anonymizeText(n.trim(), nameMap));
+  }
+
+  // MCP summary — anonymize project paths
+  for (const mcp of mcpSummary) {
+    mcp.projects = (mcp.projects || []).map((p) => {
+      const anonPath = anonymizePath(p);
+      const repoName = p.split("/").pop();
+      return anonPath.replace(/[^/]+$/, mapName(nameMap, repoName));
+    });
+  }
+
+  // MCP promotions — anonymize project paths
+  for (const promo of mcpPromotions) {
+    promo.projects = (promo.projects || []).map((p) => {
+      const anonPath = anonymizePath(p);
+      const repoName = p.split("/").pop();
+      return anonPath.replace(/[^/]+$/, mapName(nameMap, repoName));
+    });
+  }
+
+  // Former MCP servers — anonymize names and projects
+  for (let i = 0; i < formerMcpServers.length; i++) {
+    formerMcpServers[i] = {
+      name: `former-server-${i + 1}`,
+      projects: (formerMcpServers[i].projects || []).map(() => `~/project-${i + 1}`),
+      lastSeen: formerMcpServers[i].lastSeen,
+    };
+  }
+
+  // Consolidation groups
+  for (const group of consolidationGroups) {
+    group.repos = (group.repos || []).map((n) => mapName(nameMap, n));
+    group.suggestion = `${group.repos.length} ${group.stack} repos with ${group.avgSimilarity}% avg similarity — consider shared global rules`;
+  }
+}

package/src/cli.mjs

@@ -3,7 +3,7 @@ import { VERSION, DEFAULT_OUTPUT, HOME } from "./constants.mjs";
 export function parseArgs(argv) {
   const args = {
     output: DEFAULT_OUTPUT,
-    open: false,
+    open: process.stdout.isTTY !== false,
     json: false,
     catalog: false,
     command: null,
@@ -13,6 +13,7 @@ export function parseArgs(argv) {
     watch: false,
     diff: false,
     anonymize: false,
+    demo: false,
     completions: false,
   };
   let i = 2; // skip node + script
@@ -39,11 +40,13 @@ Options:
   --output, -o <path>  Output path (default: ~/.claude/dashboard.html)
   --json               Output full data model as JSON instead of HTML
   --catalog            Generate a shareable skill catalog HTML page
-  --open               Open the dashboard in your default browser after generating
+  --open               Open in browser after generating (default: true)
+  --no-open            Skip opening in browser
   --quiet              Suppress output, just write file
   --watch              Regenerate on file changes
   --diff               Show changes since last generation
-  --anonymize          Anonymize paths for shareable export
+  --anonymize          Anonymize all data for shareable export
+  --demo               Generate dashboard with sample data (no scanning)
   --completions        Output shell completion script for bash/zsh
   --version, -v        Show version
   --help, -h           Show this help
@@ -84,6 +87,9 @@ Config file: ~/.claude/dashboard.conf
       case "--open":
         args.open = true;
         break;
+      case "--no-open":
+        args.open = false;
+        break;
       case "--template":
       case "-t":
         args.template = argv[++i];
@@ -107,6 +113,9 @@ Config file: ~/.claude/dashboard.conf
       case "--anonymize":
         args.anonymize = true;
         break;
+      case "--demo":
+        args.demo = true;
+        break;
       case "--completions":
         args.completions = true;
         break;
@@ -124,11 +133,11 @@ export function generateCompletions() {
 # eval "$(claude-code-dashboard --completions)"
 if [ -n "$ZSH_VERSION" ]; then
   _claude_code_dashboard() {
-    local -a opts; opts=(init lint --output --open --json --catalog --quiet --watch --diff --anonymize --completions --help --version)
+    local -a opts; opts=(init lint --output --open --no-open --json --catalog --quiet --watch --diff --anonymize --demo --completions --help --version)
     if (( CURRENT == 2 )); then _describe 'option' opts; fi
   }; compdef _claude_code_dashboard claude-code-dashboard
 elif [ -n "$BASH_VERSION" ]; then
-  _claude_code_dashboard() { COMPREPLY=( $(compgen -W "init lint --output --open --json --catalog --quiet --watch --diff --anonymize --completions --help --version" -- "\${COMP_WORDS[COMP_CWORD]}") ); }
+  _claude_code_dashboard() { COMPREPLY=( $(compgen -W "init lint --output --open --no-open --json --catalog --quiet --watch --diff --anonymize --demo --completions --help --version" -- "\${COMP_WORDS[COMP_CWORD]}") ); }
   complete -F _claude_code_dashboard claude-code-dashboard
 fi`);
   process.exit(0);

package/src/constants.mjs

@@ -1,13 +1,16 @@
 import { join } from "path";
 import { homedir } from "os";
 
-export const VERSION = "0.0.1";
+export const VERSION = "0.0.3";
+export const REPO_URL = "https://github.com/VirenMohindra/claude-code-dashboard";
 
 export const HOME = homedir();
 export const CLAUDE_DIR = join(HOME, ".claude");
 export const DEFAULT_OUTPUT = join(CLAUDE_DIR, "dashboard.html");
 export const CONF = join(CLAUDE_DIR, "dashboard.conf");
 export const MAX_DEPTH = 5;
+export const MAX_SESSION_SCAN = 1000;
+export const SIMILARITY_THRESHOLD = 25;
 
 // Freshness thresholds (seconds)
 export const ONE_DAY = 86_400;