@viren/claude-code-dashboard 0.0.3 → 0.0.5

package/README.md

@@ -31,9 +31,9 @@ Scans your home directory for git repos, collects Claude Code configuration (com
 
 ![Repo Expanded](screenshots/05-repo-expanded.png)
 
-### Dark mode
+### Light mode
 
-![Dark Mode](screenshots/06-dark-mode.png)
+![Light Mode](screenshots/06-light-mode.png)
 
 > Screenshots generated with `claude-code-dashboard --demo`
 

package/generate-dashboard.mjs

@@ -60,7 +60,7 @@ import {
 import { aggregateSessionMeta } from "./src/usage.mjs";
 import { handleInit } from "./src/templates.mjs";
 import { generateCatalogHtml } from "./src/render.mjs";
-import { generateDashboardHtml } from "./src/html-template.mjs";
+import { generateDashboardHtml } from "./src/assembler.mjs";
 import { startWatch } from "./src/watch.mjs";
 
 // ── CLI ──────────────────────────────────────────────────────────────────────
@@ -260,6 +260,7 @@ function parseChains() {
 const chains = parseChains();
 
 // MCP Server Discovery
+const claudeJsonPath = join(HOME, ".claude.json");
 const allMcpServers = [];
 
 const userMcpPath = join(CLAUDE_DIR, "mcp_config.json");
@@ -272,6 +273,21 @@ if (existsSync(userMcpPath)) {
   }
 }
 
+// ~/.claude.json is the primary location where `claude mcp add` writes
+let claudeJsonParsed = null;
+if (existsSync(claudeJsonPath)) {
+  try {
+    const content = readFileSync(claudeJsonPath, "utf8");
+    claudeJsonParsed = JSON.parse(content);
+    const existing = new Set(allMcpServers.filter((s) => s.scope === "user").map((s) => s.name));
+    for (const s of parseUserMcpConfig(content)) {
+      if (!existing.has(s.name)) allMcpServers.push(s);
+    }
+  } catch {
+    // skip if unreadable
+  }
+}
+
 for (const repoDir of allRepoPaths) {
   const mcpPath = join(repoDir, ".mcp.json");
   if (existsSync(mcpPath)) {
@@ -290,11 +306,9 @@ for (const repoDir of allRepoPaths) {
 
 // Disabled MCP servers
 const disabledMcpByRepo = {};
-const claudeJsonPath = join(HOME, ".claude.json");
-if (existsSync(claudeJsonPath)) {
+if (claudeJsonParsed) {
   try {
-    const claudeJsonContent = readFileSync(claudeJsonPath, "utf8");
-    const claudeJson = JSON.parse(claudeJsonContent);
+    const claudeJson = claudeJsonParsed;
     for (const [path, entry] of Object.entries(claudeJson)) {
       if (
         typeof entry === "object" &&
@@ -397,35 +411,98 @@ let ccusageData = null;
 const ccusageCachePath = join(CLAUDE_DIR, "ccusage-cache.json");
 const CCUSAGE_TTL_MS = 60 * 60 * 1000;
 
-if (!cliArgs.quiet) {
+try {
+  const cached = JSON.parse(readFileSync(ccusageCachePath, "utf8"));
+  if (cached._ts && Date.now() - cached._ts < CCUSAGE_TTL_MS && cached.totals && cached.daily) {
+    ccusageData = cached;
+  }
+} catch {
+  /* no cache or stale */
+}
+
+if (!ccusageData) {
   try {
-    const cached = JSON.parse(readFileSync(ccusageCachePath, "utf8"));
-    if (cached._ts && Date.now() - cached._ts < CCUSAGE_TTL_MS && cached.totals && cached.daily) {
-      ccusageData = cached;
+    const raw = execFileSync("npx", ["ccusage", "--json"], {
+      encoding: "utf8",
+      timeout: 30_000,
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+    const parsed = JSON.parse(raw);
+    if (parsed.totals && parsed.daily) {
+      ccusageData = parsed;
+      try {
+        writeFileSync(ccusageCachePath, JSON.stringify({ ...parsed, _ts: Date.now() }));
+      } catch {
+        /* non-critical */
+      }
     }
   } catch {
-    /* no cache or stale */
+    // ccusage not installed or timed out
   }
+}
 
-  if (!ccusageData) {
-    try {
-      const raw = execFileSync("npx", ["ccusage", "--json"], {
-        encoding: "utf8",
-        timeout: 30_000,
-        stdio: ["pipe", "pipe", "pipe"],
+// Claude Code Insights report (generated by /insights)
+let insightsReport = null;
+const reportPath = join(CLAUDE_DIR, "usage-data", "report.html");
+if (existsSync(reportPath)) {
+  try {
+    const reportHtml = readFileSync(reportPath, "utf8");
+
+    // Extract subtitle — reformat ISO dates to readable format
+    const subtitleMatch = reportHtml.match(/<p class="subtitle">([^<]+)<\/p>/);
+    let subtitle = subtitleMatch ? subtitleMatch[1] : null;
+    if (subtitle) {
+      subtitle = subtitle.replace(/(\d{4})-(\d{2})-(\d{2})/g, (_, y, m2, d) => {
+        const dt = new Date(`${y}-${m2}-${d}T00:00:00Z`);
+        return dt.toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric",
+          timeZone: "UTC",
+        });
       });
-      const parsed = JSON.parse(raw);
-      if (parsed.totals && parsed.daily) {
-        ccusageData = parsed;
-        try {
-          writeFileSync(ccusageCachePath, JSON.stringify({ ...parsed, _ts: Date.now() }));
-        } catch {
-          /* non-critical */
-        }
-      }
-    } catch {
-      // ccusage not installed or timed out
     }
+
+    // Extract glance sections (content may contain <strong> tags)
+    const glanceSections = [];
+    const glanceRe =
+      /<div class="glance-section"><strong>([^<]+)<\/strong>\s*([\s\S]*?)<a[^>]*class="see-more"/g;
+    let m;
+    while ((m = glanceRe.exec(reportHtml)) !== null) {
+      const text = m[2].replace(/<[^>]+>/g, "").trim();
+      glanceSections.push({ label: m[1].replace(/:$/, ""), text });
+    }
+
+    // Extract stats
+    const statsRe = /<div class="stat-value">([^<]+)<\/div><div class="stat-label">([^<]+)<\/div>/g;
+    const reportStats = [];
+    while ((m = statsRe.exec(reportHtml)) !== null) {
+      const value = m[1];
+      const label = m[2];
+      // Mark lines stat for diff-style rendering
+      const isDiff = /^[+-]/.test(value) && value.includes("/");
+      reportStats.push({ value, label, isDiff });
+    }
+
+    // Extract friction categories
+    const frictionRe =
+      /<div class="friction-title">([^<]+)<\/div>\s*<div class="friction-desc">([^<]+)<\/div>/g;
+    const frictionPoints = [];
+    while ((m = frictionRe.exec(reportHtml)) !== null) {
+      frictionPoints.push({ title: m[1], desc: m[2] });
+    }
+
+    if (glanceSections.length > 0 || reportStats.length > 0) {
+      insightsReport = {
+        subtitle,
+        glance: glanceSections,
+        stats: reportStats,
+        friction: frictionPoints.slice(0, 3),
+        filePath: reportPath,
+      };
+    }
+  } catch {
+    // skip if unreadable
   }
 }
 
@@ -463,6 +540,19 @@ if (sessionMetaFiles.length > 0) {
   }
 }
 
+// Supplement dailyActivity with ccusage data (fills gaps like Feb 17-22)
+if (ccusageData && ccusageData.daily) {
+  const existingDates = new Set((statsCache.dailyActivity || []).map((d) => d.date));
+  const ccusageSupplemental = ccusageData.daily
+    .filter((d) => d.date && !existingDates.has(d.date) && d.totalTokens > 0)
+    .map((d) => ({ date: d.date, messageCount: Math.max(1, Math.round(d.totalTokens / 10000)) }));
+  if (ccusageSupplemental.length > 0) {
+    statsCache.dailyActivity = [...(statsCache.dailyActivity || []), ...ccusageSupplemental].sort(
+      (a, b) => a.date.localeCompare(b.date),
+    );
+  }
+}
+
 // ── Computed Stats ───────────────────────────────────────────────────────────
 
 const totalRepos = allRepoPaths.length;
@@ -478,6 +568,107 @@ const driftCount = configured.filter(
   (r) => r.drift && (r.drift.level === "medium" || r.drift.level === "high"),
 ).length;
 
+// ── Insights ──────────────────────────────────────────────────────────────────
+const insights = [];
+
+// Drift alerts
+const highDriftRepos = configured.filter((r) => r.drift?.level === "high");
+if (highDriftRepos.length > 0) {
+  insights.push({
+    type: "warning",
+    title: `${highDriftRepos.length} repo${highDriftRepos.length > 1 ? "s have" : " has"} high config drift`,
+    detail: highDriftRepos
+      .map((r) => `${r.name} (${r.drift.commitsSince} commits since config update)`)
+      .join(", "),
+    action: "Review and update CLAUDE.md in these repos",
+  });
+}
+
+// Coverage
+if (unconfigured.length > 0 && totalRepos > 0) {
+  const pct = Math.round((unconfigured.length / totalRepos) * 100);
+  if (pct >= 40) {
+    const withStack = unconfigured.filter((r) => r.techStack?.length > 0).slice(0, 3);
+    insights.push({
+      type: "info",
+      title: `${unconfigured.length} repos unconfigured (${pct}%)`,
+      detail: withStack.length
+        ? `Top candidates: ${withStack.map((r) => `${r.name} (${r.techStack.join(", ")})`).join(", ")}`
+        : "",
+      action: "Run claude-code-dashboard init --template <stack> in these repos",
+    });
+  }
+}
+
+// MCP promotions
+if (mcpPromotions.length > 0) {
+  insights.push({
+    type: "promote",
+    title: `${mcpPromotions.length} MCP server${mcpPromotions.length > 1 ? "s" : ""} could be promoted to global`,
+    detail: mcpPromotions.map((p) => `${p.name} (in ${p.projects.length} projects)`).join(", "),
+    action: "Add to ~/.claude/mcp_config.json for all projects",
+  });
+}
+
+// Redundant project-scope MCP configs (global server also in project .mcp.json)
+const redundantMcp = Object.values(mcpByName).filter((s) => s.userLevel && s.projects.length > 0);
+if (redundantMcp.length > 0) {
+  insights.push({
+    type: "tip",
+    title: `${redundantMcp.length} MCP server${redundantMcp.length > 1 ? "s are" : " is"} global but also in project .mcp.json`,
+    detail: redundantMcp.map((s) => `${s.name} (${s.projects.join(", ")})`).join("; "),
+    action: "Remove from project .mcp.json — global config already covers all projects",
+  });
+}
+
+// Skill sharing opportunities
+const skillMatchCounts = {};
+for (const r of configured) {
+  for (const sk of r.matchedSkills || []) {
+    const skName = typeof sk === "string" ? sk : sk.name;
+    if (!skillMatchCounts[skName]) skillMatchCounts[skName] = [];
+    skillMatchCounts[skName].push(r.name);
+  }
+}
+const widelyRelevant = Object.entries(skillMatchCounts)
+  .filter(([, repos]) => repos.length >= 3)
+  .sort((a, b) => b[1].length - a[1].length);
+if (widelyRelevant.length > 0) {
+  const top = widelyRelevant.slice(0, 3);
+  insights.push({
+    type: "info",
+    title: `${widelyRelevant.length} skill${widelyRelevant.length > 1 ? "s" : ""} relevant across 3+ repos`,
+    detail: top.map(([name, repos]) => `${name} (${repos.length} repos)`).join(", "),
+    action: "Consider adding these skills to your global config",
+  });
+}
+
+// Health quick wins — repos closest to next tier
+const quickWinRepos = configured
+  .filter((r) => r.healthScore > 0 && r.healthScore < 80 && r.healthReasons?.length > 0)
+  .sort((a, b) => b.healthScore - a.healthScore)
+  .slice(0, 3);
+if (quickWinRepos.length > 0) {
+  insights.push({
+    type: "tip",
+    title: "Quick wins to improve config health",
+    detail: quickWinRepos
+      .map((r) => `${r.name} (${r.healthScore}/100): ${r.healthReasons[0]}`)
+      .join("; "),
+    action: "Small changes for measurable improvement",
+  });
+}
+
+// Insights report nudge
+if (!insightsReport) {
+  insights.push({
+    type: "info",
+    title: "Generate your Claude Code Insights report",
+    detail: "Get personalized usage patterns, friction points, and feature suggestions",
+    action: "Run /insights in Claude Code",
+  });
+}
+
 const now = new Date();
 const timestamp =
   now
@@ -684,6 +875,8 @@ const html = generateDashboardHtml({
   driftCount,
   mcpCount,
   scanScope,
+  insights,
+  insightsReport,
 });
 
 // ── Write HTML Output ────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viren/claude-code-dashboard",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "A visual dashboard for your Claude Code configuration across all repos",
   "type": "module",
   "bin": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "generate": "node generate-dashboard.mjs",
-    "test": "node --test test/helpers.test.mjs",
+    "test": "node --test test/*.test.mjs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
@@ -33,7 +33,8 @@
   },
   "files": [
     "generate-dashboard.mjs",
-    "src/"
+    "src/",
+    "template/"
   ],
   "devDependencies": {
     "eslint": "^9.0.0",

package/src/assembler.mjs

@@ -0,0 +1,150 @@
+import { readFileSync } from "fs";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+
+import { esc } from "./helpers.mjs";
+import { VERSION, REPO_URL } from "./constants.mjs";
+import { renderCmd, renderRule, renderRepoCard } from "./render.mjs";
+import {
+  renderSkillsCard,
+  renderMcpCard,
+  renderToolsCard,
+  renderLangsCard,
+  renderErrorsCard,
+  renderActivityCard,
+  renderChainsCard,
+  renderConsolidationCard,
+  renderUnconfiguredCard,
+  renderReferenceCard,
+  renderInsightsCard,
+  renderInsightsReportCard,
+  renderStatsBar,
+} from "./sections.mjs";
+
+// Resolve template directory relative to this module (works when installed via npm too)
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = join(__dirname, "..", "template");
+
+// Cache template files (read once per process).
+// Assumes one-shot CLI usage; watch mode spawns fresh processes.
+let _css, _js, _html;
+function loadTemplates() {
+  if (!_css) _css = readFileSync(join(TEMPLATE_DIR, "dashboard.css"), "utf8");
+  if (!_js) _js = readFileSync(join(TEMPLATE_DIR, "dashboard.js"), "utf8");
+  if (!_html) _html = readFileSync(join(TEMPLATE_DIR, "dashboard.html"), "utf8");
+}
+
+export function generateDashboardHtml(data) {
+  loadTemplates();
+
+  const {
+    configured,
+    unconfigured,
+    globalCmds,
+    globalRules,
+    globalSkills,
+    chains,
+    mcpSummary,
+    mcpPromotions,
+    formerMcpServers,
+    consolidationGroups,
+    usageAnalytics,
+    ccusageData,
+    statsCache,
+    timestamp,
+    coveragePct,
+    totalRepos,
+    configuredCount,
+    unconfiguredCount,
+    scanScope,
+    insights,
+    insightsReport,
+  } = data;
+
+  // ── Build section HTML fragments ──────────────────────────────────────────
+
+  const header = `<h1>claude code dashboard</h1>
+<button id="theme-toggle" class="theme-toggle" title="Toggle light/dark mode" aria-label="Toggle theme"><span class="theme-icon"></span></button>
+<p class="sub">generated ${timestamp} · run <code>claude-code-dashboard</code> to refresh · <a href="${esc(REPO_URL)}" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none">v${esc(VERSION)}</a></p>`;
+
+  const statsBar = renderStatsBar(data);
+
+  // Overview tab
+  const overviewCommands = `<div class="top-grid">
+    <div class="card" id="section-commands" style="margin-bottom:0">
+      <h2>Global Commands <span class="n">${globalCmds.length}</span></h2>
+      ${globalCmds.map((c) => renderCmd(c)).join("\n  ")}
+    </div>
+    <div class="card" style="margin-bottom:0">
+      <h2>Global Rules <span class="n">${globalRules.length}</span></h2>
+      ${globalRules.map((r) => renderRule(r)).join("\n  ")}
+    </div>
+  </div>`;
+  const insightsHtml = renderInsightsCard(insights);
+  const chainsHtml = renderChainsCard(chains);
+  const consolidationHtml = renderConsolidationCard(consolidationGroups);
+  const tabOverview = `${overviewCommands}\n  ${insightsHtml}\n  ${chainsHtml}\n  ${consolidationHtml}`;
+
+  // Skills & MCP tab
+  const tabSkillsMcp = `${renderSkillsCard(globalSkills)}\n  ${renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers)}`;
+
+  // Analytics tab
+  const insightsReportHtml = renderInsightsReportCard(insightsReport);
+  const toolsHtml = renderToolsCard(usageAnalytics.topTools);
+  const langsHtml = renderLangsCard(usageAnalytics.topLanguages);
+  const errorsHtml = renderErrorsCard(usageAnalytics.errorCategories);
+  const activityHtml = renderActivityCard(statsCache, ccusageData);
+  const tabAnalytics = `${insightsReportHtml}
+  <div class="top-grid">
+    ${toolsHtml || ""}
+    ${langsHtml || ""}
+  </div>
+  ${errorsHtml}
+  ${activityHtml}`;
+
+  // Repos tab
+  const repoCards = configured.map((r) => renderRepoCard(r)).join("\n");
+  const unconfiguredHtml = renderUnconfiguredCard(unconfigured);
+  const tabRepos = `<div class="search-bar">
+    <input type="text" id="search" placeholder="search repos..." autocomplete="off">
+    <span class="search-hint"><kbd>/</kbd></span>
+  </div>
+  <div class="group-controls">
+    <label class="group-label">Group by:</label>
+    <select id="group-by" class="group-select">
+      <option value="none">None</option>
+      <option value="stack">Tech Stack</option>
+      <option value="parent">Parent Directory</option>
+    </select>
+  </div>
+  <div class="repo-grid" id="repo-grid">
+  ${repoCards}
+  </div>
+  ${unconfiguredHtml}`;
+
+  // Reference tab
+  const tabReference = renderReferenceCard();
+
+  // Footer
+  const footer = `<div class="ts">found ${totalRepos} repos · ${configuredCount} configured · ${unconfiguredCount} unconfigured · scanned ${scanScope} · ${timestamp}</div>`;
+
+  // ── Inject dynamic coverage color via CSS custom property ─────────────────
+  const coverageColor =
+    coveragePct >= 70 ? "var(--green)" : coveragePct >= 40 ? "var(--yellow)" : "var(--red)";
+  const css = `:root { --coverage-color: ${coverageColor}; }\n${_css}`;
+
+  // ── Assemble final HTML via placeholder replacement ───────────────────────
+  let html = _html;
+  html = html.replace("<!-- {{CSS}} -->", css);
+  html = html.replace("/* {{JS}} */", _js);
+  html = html.replace("<!-- {{HEADER}} -->", header);
+  html = html.replace("<!-- {{STATS_BAR}} -->", statsBar);
+  html = html.replace("<!-- {{TAB_OVERVIEW}} -->", tabOverview);
+  html = html.replace("<!-- {{TAB_SKILLS_MCP}} -->", tabSkillsMcp);
+  html = html.replace("<!-- {{TAB_ANALYTICS}} -->", tabAnalytics);
+  html = html.replace("<!-- {{TAB_REPOS}} -->", tabRepos);
+  html = html.replace("<!-- {{TAB_REFERENCE}} -->", tabReference);
+  html = html.replace("<!-- {{FOOTER}} -->", footer);
+
+  return html;
+}

package/src/constants.mjs

@@ -1,7 +1,7 @@
 import { join } from "path";
 import { homedir } from "os";
 
-export const VERSION = "0.0.3";
+export const VERSION = "0.0.5";
 export const REPO_URL = "https://github.com/VirenMohindra/claude-code-dashboard";
 
 export const HOME = homedir();

package/src/demo.mjs

@@ -484,7 +484,70 @@ export function generateDemoData() {
     ),
     driftCount: configured.filter((r) => r.drift.level === "medium" || r.drift.level === "high")
       .length,
-    mcpCount: 4,
+    mcpCount: 5,
     scanScope: "~/work (depth 5)",
+    insights: [
+      {
+        type: "warning",
+        title: "2 repos have high config drift",
+        detail:
+          "payments-api (23 commits since config update), acme-web (18 commits since config update)",
+        action: "Review and update CLAUDE.md in these repos",
+      },
+      {
+        type: "promote",
+        title: "1 MCP server could be promoted to global",
+        detail: "github (in 2 projects)",
+        action: "Add to ~/.claude/mcp_config.json for all projects",
+      },
+      {
+        type: "info",
+        title: "12 repos unconfigured (52%)",
+        detail: "Top candidates: mobile-app (expo), admin-portal (next), data-pipeline (python)",
+        action: "Run claude-code-dashboard init --template <stack> in these repos",
+      },
+      {
+        type: "tip",
+        title: "Quick wins to improve config health",
+        detail:
+          "design-system (65/100): add commands; shared-utils (60/100): add CLAUDE.md description",
+        action: "Small changes for measurable improvement",
+      },
+    ],
+    insightsReport: {
+      subtitle: "1,386 messages across 117 sessions (365 total) | 2026-02-23 to 2026-03-10",
+      stats: [
+        { value: "1,386", label: "Messages" },
+        { value: "+33,424/-2,563", label: "Lines" },
+        { value: "632", label: "Files" },
+        { value: "14", label: "Days" },
+        { value: "99", label: "Msgs/Day" },
+      ],
+      glance: [
+        {
+          label: "What's working",
+          text: "Full end-to-end shipping workflow — implementation through PR creation to production deployment in single sessions.",
+        },
+        {
+          label: "What's hindering you",
+          text: "Claude frequently jumps into fixes without checking actual state first, costing correction cycles.",
+        },
+        {
+          label: "Quick wins to try",
+          text: "Create custom slash commands for repeated workflows like PR reviews and Slack message drafting.",
+        },
+      ],
+      friction: [
+        {
+          title: "Wrong Target / Misidentification",
+          desc: "Claude acts on the wrong file or setting before you catch the mistake.",
+        },
+        {
+          title: "Premature Solutions",
+          desc: "Jumps into fixes without first checking actual state of the codebase.",
+        },
+      ],
+      filePath: "~/.claude/usage-data/report.html",
+    },
   };
 }

package/src/render.mjs

@@ -1,6 +1,5 @@
 import { esc } from "./helpers.mjs";
 import { extractSteps, extractSections } from "./markdown.mjs";
-import { groupSkillsByCategory } from "./skills.mjs";
 
 export function renderSections(sections) {
   return sections
@@ -58,9 +57,6 @@ export function renderSkill(skill) {
   return `<div class="cmd-row"><span class="cmd-name skill-name">${esc(skill.name)}</span>${badge}<span class="cmd-desc">${d}</span></div>`;
 }
 
-// Re-export from skills.mjs (single source of truth)
-export { groupSkillsByCategory };
-
 export function renderBadges(repo) {
   const b = [];
   if (repo.commands.length) b.push(`<span class="badge cmds">${repo.commands.length} cmd</span>`);