@viren/claude-code-dashboard 0.0.4 → 0.0.6

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`
 
@@ -212,6 +212,16 @@ If no directories are listed, the entire home directory is scanned (depth 5).
 - Node.js 18+
 - Git (for freshness timestamps and drift detection)
 
+## Roadmap
+
+Completed: v0.1 (foundation), v0.2 (intelligence layer), v0.3 (recommendations engine), v0.4 (config templates), v0.5 (control center).
+
+**Up next:**
+
+- [ ] Org-wide dashboard — scan multiple users' configs for team visibility
+
+See [issues](https://github.com/VirenMohindra/claude-code-dashboard/issues) for feature requests.
+
 ## Privacy
 
 The generated HTML file contains:

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 ──────────────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viren/claude-code-dashboard",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "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,154 @@
+import { readFileSync } from "fs";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+
+import { esc, insightsToMarkdown } 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>
+<div class="header-actions">
+  <button id="refresh-btn" class="header-btn" title="Copy refresh command to clipboard" aria-label="Copy refresh command">&#8635; refresh</button>
+  <button id="theme-toggle" class="theme-toggle" title="Toggle light/dark mode" aria-label="Toggle theme"><span class="theme-icon"></span></button>
+</div>
+<p class="sub">generated ${timestamp} · <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 insightsMarkdown = insightsToMarkdown(insights);
+  const insightsHtml = renderInsightsCard(insights, insightsMarkdown);
+  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.4";
+export const VERSION = "0.0.6";
 export const REPO_URL = "https://github.com/VirenMohindra/claude-code-dashboard";
 
 export const HOME = homedir();

package/src/helpers.mjs

@@ -33,6 +33,27 @@ export function gitCmd(repoDir, ...args) {
   }
 }
 
+const INSIGHT_ICONS = {
+  warning: "\u26A0\uFE0F",
+  tip: "\u2728",
+  promote: "\u2B06",
+  info: "\u2139\uFE0F",
+};
+
+/** Convert an insights array to a markdown string suitable for pasting into Claude Code. */
+export function insightsToMarkdown(insights) {
+  if (!insights || !insights.length) return "";
+  const lines = ["# Dashboard Insights\n"];
+  for (const i of insights) {
+    const icon = INSIGHT_ICONS[i.type] || INSIGHT_ICONS.info;
+    lines.push(`## ${icon} ${i.title}`);
+    if (i.detail) lines.push(i.detail);
+    if (i.action) lines.push(`**Action:** ${i.action}`);
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+
 export function anonymizePath(p) {
   return p
     .replace(/^\/Users\/[^/]+\//, "~/")

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>`);