@viren/claude-code-dashboard 0.0.7 → 0.0.10

package/generate-dashboard.mjs

@@ -43,7 +43,12 @@ import {
   computeDashboardDiff,
 } from "./src/analysis.mjs";
 import { getFreshness } from "./src/freshness.mjs";
-import { parseUserMcpConfig, parseProjectMcpConfig, scanHistoricalMcpServers } from "./src/mcp.mjs";
+import {
+  parseUserMcpConfig,
+  parseProjectMcpConfig,
+  scanHistoricalMcpServers,
+  fetchRegistryServers,
+} from "./src/mcp.mjs";
 import { handleInit } from "./src/templates.mjs";
 import { generateCatalogHtml } from "./src/render.mjs";
 import { generateDashboardHtml } from "./src/assembler.mjs";
@@ -87,7 +92,7 @@ if (cliArgs.demo) {
 
 // ── Collect Raw Inputs ────────────────────────────────────────────────────────
 
-function collectRawInputs() {
+async function collectRawInputs() {
   const scanRoots = getScanRoots();
   const allRepoPaths = findGitRepos(scanRoots, MAX_DEPTH);
 
@@ -217,6 +222,9 @@ function collectRawInputs() {
     entry.projects = new Set([...entry.projects].map((p) => shortPath(p)));
   }
 
+  // MCP Registry servers
+  const registryServers = cliArgs.offline ? [] : await fetchRegistryServers();
+
   // Usage data — session meta files
   const SESSION_META_LIMIT = 1000;
   const sessionMetaDir = join(CLAUDE_DIR, "usage-data", "session-meta");
@@ -309,6 +317,7 @@ function collectRawInputs() {
     projectMcpByRepo,
     disabledMcpByRepo,
     historicalMcpMap,
+    registryServers,
     sessionMetaFiles,
     ccusageData,
     statsCache,
@@ -321,7 +330,7 @@ function collectRawInputs() {
 
 // ── Build Dashboard Data ─────────────────────────────────────────────────────
 
-const rawInputs = collectRawInputs();
+const rawInputs = await collectRawInputs();
 const data = buildDashboardData(rawInputs);
 
 // ── Lint Subcommand ──────────────────────────────────────────────────────────

package/package.json

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

package/src/assembler.mjs

@@ -2,12 +2,13 @@ import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
 import { dirname, join } from "path";
 
-import { esc, insightsToMarkdown } from "./helpers.mjs";
+import { esc, insightsToPrompt } from "./helpers.mjs";
 import { VERSION, REPO_URL } from "./constants.mjs";
 import { renderCmd, renderRule, renderRepoCard } from "./render.mjs";
 import {
   renderSkillsCard,
   renderMcpCard,
+  renderMcpRecommendedCard,
   renderToolsCard,
   renderLangsCard,
   renderErrorsCard,
@@ -47,6 +48,9 @@ export function generateDashboardHtml(data) {
     mcpSummary,
     mcpPromotions,
     formerMcpServers,
+    recommendedMcpServers,
+    availableMcpServers,
+    registryTotal,
     consolidationGroups,
     usageAnalytics,
     ccusageData,
@@ -68,12 +72,20 @@ export function generateDashboardHtml(data) {
   <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>`;
+<p class="sub">generated ${timestamp} · <a href="${esc(REPO_URL)}" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:underline;text-underline-offset:2px">v${esc(VERSION)}</a></p>`;
 
   const statsBar = renderStatsBar(data);
 
-  // Overview tab
-  const overviewCommands = `<div class="top-grid">
+  // Home tab — actionable content first
+  const insightsPrompt = insightsToPrompt(insights);
+  const insightsHtml = renderInsightsCard(insights, insightsPrompt);
+  const mcpRecsHtml = renderMcpRecommendedCard(recommendedMcpServers);
+  const chainsHtml = renderChainsCard(chains);
+  const consolidationHtml = renderConsolidationCard(consolidationGroups);
+  const tabHome = `${insightsHtml}\n  ${mcpRecsHtml}\n  ${chainsHtml}\n  ${consolidationHtml}`;
+
+  // Config tab — stable reference: commands, rules, skills, MCP servers
+  const commandsRulesHtml = `<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  ")}
@@ -83,14 +95,7 @@ export function generateDashboardHtml(data) {
       ${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)}`;
+  const tabConfig = `${commandsRulesHtml}\n  ${renderSkillsCard(globalSkills)}\n  ${renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers, availableMcpServers, registryTotal)}`;
 
   // Analytics tab
   const insightsReportHtml = renderInsightsReportCard(insightsReport);
@@ -143,8 +148,8 @@ export function generateDashboardHtml(data) {
   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_HOME}} -->", tabHome);
+  html = html.replace("<!-- {{TAB_CONFIG}} -->", tabConfig);
   html = html.replace("<!-- {{TAB_ANALYTICS}} -->", tabAnalytics);
   html = html.replace("<!-- {{TAB_REPOS}} -->", tabRepos);
   html = html.replace("<!-- {{TAB_REFERENCE}} -->", tabReference);

package/src/cli.mjs

@@ -15,6 +15,7 @@ export function parseArgs(argv) {
     anonymize: false,
     demo: false,
     completions: false,
+    offline: false,
   };
   let i = 2; // skip node + script
   if (argv[2] === "init") {
@@ -46,6 +47,7 @@ Options:
   --watch              Regenerate on file changes
   --diff               Show changes since last generation
   --anonymize          Anonymize all data for shareable export
+  --offline            Skip network fetches (registry, etc.)
   --demo               Generate dashboard with sample data (no scanning)
   --completions        Output shell completion script for bash/zsh
   --version, -v        Show version
@@ -113,6 +115,9 @@ Config file: ~/.claude/dashboard.conf
       case "--anonymize":
         args.anonymize = true;
         break;
+      case "--offline":
+        args.offline = true;
+        break;
       case "--demo":
         args.demo = true;
         break;
@@ -133,11 +138,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 --no-open --json --catalog --quiet --watch --diff --anonymize --demo --completions --help --version)
+    local -a opts; opts=(init lint --output --open --no-open --json --catalog --quiet --watch --diff --anonymize --offline --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 --no-open --json --catalog --quiet --watch --diff --anonymize --demo --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 --offline --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,7 +1,7 @@
 import { join } from "path";
 import { homedir } from "os";
 
-export const VERSION = "0.0.7";
+export const VERSION = "0.0.10";
 export const REPO_URL = "https://github.com/VirenMohindra/claude-code-dashboard";
 
 export const HOME = homedir();
@@ -98,6 +98,44 @@ export const SKILL_CATEGORIES = {
   "project-specific": ["storybook", "react-native"],
 };
 
+export const MCP_REGISTRY_URL =
+  "https://api.anthropic.com/mcp-registry/v0/servers?visibility=commercial&limit=100";
+export const MCP_REGISTRY_TTL_MS = 24 * 60 * 60 * 1000; // 24h
+
+/**
+ * Maps detected tech stacks and description keywords to relevant MCP server slugs.
+ * Used by the pipeline to compute MCP recommendations.
+ *
+ * Keys: tech stack names (matching STACK_FILES values) or lowercase keywords
+ * found in repo descriptions.
+ * Values: array of MCP server slugs from the Anthropic registry.
+ */
+export const MCP_STACK_HINTS = {
+  // Stack-based (keys match STACK_FILES values)
+  next: ["vercel", "figma"],
+  react: ["figma"],
+  python: ["sentry"],
+  go: ["sentry"],
+  rust: ["sentry"],
+  java: ["sentry"],
+  expo: ["figma"],
+
+  // Keyword-based (matched against lowercased repo descriptions)
+  supabase: ["supabase"],
+  stripe: ["stripe"],
+  vercel: ["vercel"],
+  sentry: ["sentry"],
+  notion: ["notion"],
+  linear: ["linear"],
+  jira: ["atlassian"],
+  confluence: ["atlassian"],
+  slack: ["slack"],
+  figma: ["figma"],
+  github: ["github"],
+  huggingface: ["hugging-face"],
+  "hugging face": ["hugging-face"],
+};
+
 export const CATEGORY_ORDER = [
   "workflow",
   "code-quality",

package/src/demo.mjs

@@ -458,6 +458,83 @@ const DEMO_INSIGHTS_HTML = `<!DOCTYPE html>
 </body>
 </html>`;
 
+// ── MCP Registry servers ──────────────────────────────────────────────────────
+
+const DEMO_REGISTRY_SERVERS = [
+  {
+    name: "Vercel",
+    slug: "vercel",
+    description: "Analyze, debug, and manage projects and deployments",
+    url: "https://mcp.vercel.com/",
+    installCommand: "claude mcp add --transport http vercel https://mcp.vercel.com",
+    worksWith: ["claude", "claude-api", "claude-code"],
+    tools: ["list_projects", "get_deployment"],
+  },
+  {
+    name: "Supabase",
+    slug: "supabase",
+    description: "Manage databases, authentication, and storage",
+    url: "https://mcp.supabase.com/mcp",
+    installCommand: "claude mcp add --transport http supabase https://mcp.supabase.com/mcp",
+    worksWith: ["claude", "claude-api", "claude-code"],
+    tools: ["execute_sql", "generate_typescript_types"],
+  },
+  {
+    name: "Stripe",
+    slug: "stripe",
+    description: "Payment processing and financial infrastructure tools",
+    url: "https://mcp.stripe.com",
+    installCommand: "claude mcp add --transport http stripe https://mcp.stripe.com",
+    worksWith: ["claude", "claude-api", "claude-code"],
+    tools: ["create_customer", "create_payment_link"],
+  },
+  {
+    name: "Linear",
+    slug: "linear",
+    description: "Manage issues, projects & team workflows in Linear",
+    url: "https://mcp.linear.app/mcp",
+    installCommand: "claude mcp add --transport http linear https://mcp.linear.app/mcp",
+    worksWith: ["claude", "claude-api", "claude-code"],
+    tools: ["create_issue", "update_issue"],
+  },
+  {
+    name: "Notion",
+    slug: "notion",
+    description: "Create, edit, search and organize Notion content",
+    url: "https://mcp.notion.com/mcp",
+    installCommand: "claude mcp add --transport http notion https://mcp.notion.com/mcp",
+    worksWith: ["claude", "claude-api", "claude-code"],
+    tools: ["search", "create-pages"],
+  },
+  {
+    name: "Atlassian",
+    slug: "atlassian",
+    description: "Access Jira & Confluence from Claude",
+    url: "https://mcp.atlassian.com/v1/mcp",
+    installCommand: "claude mcp add --transport http atlassian https://mcp.atlassian.com/v1/mcp",
+    worksWith: ["claude", "claude-code"],
+    tools: ["getJiraIssue", "createJiraIssue"],
+  },
+  {
+    name: "Slack",
+    slug: "slack",
+    description: "Send messages, create canvases, and fetch Slack data",
+    url: "https://mcp.slack.com/mcp",
+    installCommand: "claude mcp add --transport http slack-remote https://mcp.slack.com/mcp",
+    worksWith: ["claude", "claude-api", "claude-code"],
+    tools: ["slack_send_message", "slack_search_public_and_private"],
+  },
+  {
+    name: "Context7",
+    slug: "context7",
+    description: "Up-to-date docs for LLMs and AI code editors",
+    url: "https://mcp.context7.com/mcp",
+    installCommand: "claude mcp add --transport http context7 https://mcp.context7.com/mcp",
+    worksWith: ["claude", "claude-api", "claude-code"],
+    tools: ["resolve-library-id", "query-docs"],
+  },
+];
+
 // ── Main export ──────────────────────────────────────────────────────────────
 
 export function generateDemoRawInputs() {
@@ -473,6 +550,7 @@ export function generateDemoRawInputs() {
     projectMcpByRepo,
     disabledMcpByRepo,
     historicalMcpMap,
+    registryServers: DEMO_REGISTRY_SERVERS,
     sessionMetaFiles: buildDemoSessionMeta(),
     ccusageData: {
       totals: { totalCost: 47.82, totalTokens: 28_450_000 },

package/src/helpers.mjs

@@ -33,25 +33,109 @@ export function gitCmd(repoDir, ...args) {
   }
 }
 
-const INSIGHT_ICONS = {
-  warning: "\u26A0\uFE0F",
-  tip: "\u2728",
-  promote: "\u2B06",
-  info: "\u2139\uFE0F",
+const PROMPT_GENERATORS = {
+  "config-drift"(meta) {
+    const list = meta.repos.map((r) => `- ${r.name} (${r.commitsSince} commits since last update)`);
+    return [
+      "These repos have stale CLAUDE.md files:",
+      ...list,
+      "",
+      "For each repo:",
+      "1. Read the current CLAUDE.md",
+      "2. Run `git log --oneline` to see what changed since the last config update",
+      "3. Check if new patterns, tools, or conventions were introduced that should be documented",
+      "4. Propose targeted additions — don't rewrite from scratch, just fill gaps",
+    ].join("\n");
+  },
+  "unconfigured-repos"(meta) {
+    if (!meta.repos.length) return "Several repos have no Claude Code configuration.";
+    const list = meta.repos.map((r) => `- ${r.name} (${r.techStack.join(", ")})`);
+    return [
+      "These repos have no CLAUDE.md yet:",
+      ...list,
+      "",
+      "Pick the one you want to configure. For that repo:",
+      "1. Read the project structure and config files (package.json, pyproject.toml, etc.)",
+      "2. Identify the build system, test framework, and linter",
+      "3. Generate a concise CLAUDE.md (50-100 lines) with build/test/lint commands and key conventions",
+    ].join("\n");
+  },
+  "mcp-promotion"(meta) {
+    const list = meta.servers.map((s) => `- ${s.name} (used in ${s.projectCount} projects)`);
+    return [
+      "These MCP servers are installed in multiple projects and should be promoted to global:",
+      ...list,
+      "",
+      "To promote a server, run:",
+      "  claude mcp add --scope user <server-name> <config>",
+      "Then remove the duplicate entries from each project's .mcp.json.",
+    ].join("\n");
+  },
+  "mcp-redundant"(meta) {
+    const list = meta.servers.map((s) => `- ${s.name}: remove from ${s.projects.join(", ")}`);
+    return [
+      "These MCP servers are configured globally AND redundantly in project .mcp.json:",
+      ...list,
+      "",
+      "The global config already covers all projects. Remove the listed project-level entries.",
+    ].join("\n");
+  },
+  "mcp-recommendations"(meta) {
+    const list = meta.servers.map(
+      (s) =>
+        `- ${s.name} — ${s.reasons.join(", ")}` +
+        (s.installCommand?.trim() ? `\n  ${s.installCommand.trim()}` : ""),
+    );
+    return [
+      "Based on your tech stacks, these MCP servers would be useful:",
+      ...list,
+      "",
+      "Run any install command above to add a server. Which ones interest you?",
+    ].join("\n");
+  },
+  "shared-skills"(meta) {
+    const list = meta.skills.map((s) => `- ${s.name} (relevant in ${s.repoCount} repos)`);
+    return [
+      "These skills are relevant across multiple repos and would benefit from being global:",
+      ...list,
+      "",
+      "To add a skill globally, copy its definition from any project's .claude/commands/ to ~/.claude/commands/.",
+    ].join("\n");
+  },
+  "health-quickwins"(meta) {
+    const list = meta.repos.map((r) => `- ${r.name} (${r.healthScore}/100): ${r.topReason}`);
+    return [
+      "These repos have easy config health improvements:",
+      ...list,
+      "",
+      "Pick a repo and I'll help you make the specific improvement.",
+    ].join("\n");
+  },
+  "insights-report"() {
+    return "Run `/insights` in Claude Code to generate a personalized usage report with patterns, friction points, and suggestions.";
+  },
 };
 
-/** Convert an insights array to a markdown string suitable for pasting into Claude Code. */
-export function insightsToMarkdown(insights) {
+/** Convert insights to an actionable prompt for pasting into Claude Code. */
+export function insightsToPrompt(insights) {
   if (!insights || !insights.length) return "";
-  const lines = ["# Dashboard Insights\n"];
+  const sections = [];
   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("");
+    const gen = i.meta?.kind && PROMPT_GENERATORS[i.meta.kind];
+    if (gen) {
+      sections.push(gen(i.meta));
+    } else {
+      const lines = [`${i.title}`];
+      if (i.detail) lines.push(i.detail);
+      if (i.action) lines.push(i.action);
+      sections.push(lines.join("\n"));
+    }
   }
-  return lines.join("\n");
+  return [
+    "I ran the Claude Code Dashboard and found these items to address:",
+    ...sections.map((s, idx) => `${idx + 1}. ${s}`),
+    "Which of these would you like to tackle first?",
+  ].join("\n\n");
 }
 
 export function anonymizePath(p) {

package/src/mcp.mjs

@@ -1,6 +1,11 @@
-import { existsSync, readdirSync, readFileSync, statSync } from "fs";
+import { existsSync, readdirSync, readFileSync, writeFileSync, statSync } from "fs";
 import { join } from "path";
-import { MAX_SESSION_SCAN } from "./constants.mjs";
+import {
+  MAX_SESSION_SCAN,
+  MCP_REGISTRY_URL,
+  MCP_REGISTRY_TTL_MS,
+  CLAUDE_DIR,
+} from "./constants.mjs";
 
 export function parseUserMcpConfig(content) {
   try {
@@ -175,3 +180,93 @@ export function classifyHistoricalServers(
   former.sort((a, b) => a.name.localeCompare(b.name));
   return { recent, former };
 }
+
+/**
+ * Pure normalizer: extract claude-code compatible servers from raw registry API response.
+ * Returns [] on any malformed input.
+ */
+export function normalizeRegistryResponse(raw) {
+  try {
+    if (!raw || !Array.isArray(raw.servers)) return [];
+    return raw.servers
+      .map((entry) => {
+        // The registry API nests data: entry.server has the MCP spec fields,
+        // entry._meta["com.anthropic.api/mcp-registry"] has Anthropic's curated metadata.
+        // Also support flat shape (used in tests and demo data).
+        const anth = entry?._meta?.["com.anthropic.api/mcp-registry"] || {};
+        const srv = entry?.server || entry || {};
+        const name = anth.displayName || entry.name || srv.title || "";
+        return {
+          name,
+          slug:
+            anth.slug ||
+            entry.slug ||
+            name
+              .toLowerCase()
+              .replace(/[^a-z0-9]+/g, "-")
+              .replace(/^-|-$/g, ""),
+          description: anth.oneLiner || entry.description || srv.description || "",
+          url: anth.url || entry.url || "",
+          installCommand: anth.claudeCodeCopyText || entry.installCommand || "",
+          worksWith: anth.worksWith || entry.worksWith || [],
+          tools: anth.toolNames || entry.tools || [],
+        };
+      })
+      .filter((s) => Array.isArray(s.worksWith) && s.worksWith.includes("claude-code"));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Fetch MCP registry servers with 24h file cache.
+ * Falls back to stale cache on network failure, returns [] on total failure.
+ */
+export async function fetchRegistryServers() {
+  const cachePath = join(CLAUDE_DIR, "mcp-registry-cache.json");
+
+  // Try fresh cache
+  try {
+    const cached = JSON.parse(readFileSync(cachePath, "utf8"));
+    if (cached._ts && Date.now() - cached._ts < MCP_REGISTRY_TTL_MS) {
+      return normalizeRegistryResponse(cached.data);
+    }
+  } catch {
+    /* no cache or unreadable */
+  }
+
+  // Fetch from registry
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 8000);
+    const res = await fetch(MCP_REGISTRY_URL, { signal: controller.signal });
+    clearTimeout(timeout);
+
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    const normalized = normalizeRegistryResponse(data);
+
+    // Only cache valid responses to avoid 24h blackout on malformed data
+    if (Array.isArray(data?.servers) && data.servers.length > 0) {
+      try {
+        writeFileSync(cachePath, JSON.stringify({ _ts: Date.now(), data }));
+      } catch {
+        /* non-critical */
+      }
+    }
+
+    return normalized;
+  } catch {
+    /* network failure — try stale cache */
+  }
+
+  // Stale cache fallback (ignore TTL)
+  try {
+    const cached = JSON.parse(readFileSync(cachePath, "utf8"));
+    return normalizeRegistryResponse(cached.data);
+  } catch {
+    /* total failure */
+  }
+
+  return [];
+}

package/src/pipeline.mjs

@@ -6,7 +6,7 @@
  * All data comes in via the `raw` parameter.
  */
 
-import { SIMILARITY_THRESHOLD } from "./constants.mjs";
+import { SIMILARITY_THRESHOLD, MCP_STACK_HINTS } from "./constants.mjs";
 import { relativeTime, freshnessClass } from "./freshness.mjs";
 import {
   computeHealthScore,
@@ -222,6 +222,86 @@ export function buildDashboardData(raw) {
   });
   const mcpCount = mcpSummary.length;
 
+  // ── 3b. MCP Registry — Available & Recommended ────────────────────────
+
+  const registryServers = raw.registryServers || [];
+  const registryTotal = registryServers.length;
+
+  // Build a set of installed server identifiers (lowercase names)
+  // Use mcpSummary which includes user, project, AND recently-active servers
+  const installedIds = new Set();
+  for (const s of mcpSummary) {
+    installedIds.add(s.name.toLowerCase());
+  }
+
+  // Filter out already-installed servers
+  const notInstalled = registryServers.filter(
+    (s) =>
+      !installedIds.has((s.slug || "").toLowerCase()) &&
+      !installedIds.has((s.name || "").toLowerCase()),
+  );
+
+  // Collect tech stacks and description text from all repos
+  const allRepos = [...configured, ...unconfigured];
+  const stackCounts = {}; // key -> count of repos with that stack
+  for (const repo of allRepos) {
+    for (const stack of repo.techStack || []) {
+      const k = stack.toLowerCase();
+      stackCounts[k] = (stackCounts[k] || 0) + 1;
+    }
+  }
+
+  // Join all descriptions into a single lowercased string for substring matching
+  // (supports multi-word keys like "hugging face")
+  const allDescText = allRepos
+    .flatMap((r) => r.desc || [])
+    .join(" ")
+    .toLowerCase();
+
+  // Match hints against stacks and descriptions
+  const recommendedSlugs = new Map(); // slug -> { reasons: [], matchCount: 0 }
+  for (const [key, slugs] of Object.entries(MCP_STACK_HINTS)) {
+    const stackCount = stackCounts[key] || 0;
+    const inDesc = allDescText.includes(key);
+
+    if (stackCount > 0 || inDesc) {
+      for (const slug of slugs) {
+        if (!recommendedSlugs.has(slug)) {
+          recommendedSlugs.set(slug, { reasons: [], matchCount: 0 });
+        }
+        const entry = recommendedSlugs.get(slug);
+        if (stackCount > 0) {
+          entry.reasons.push(`${stackCount} ${key} repo${stackCount > 1 ? "s" : ""} detected`);
+          entry.matchCount += stackCount;
+        }
+        if (inDesc) {
+          entry.reasons.push("mentioned in repo descriptions");
+          entry.matchCount += 1;
+        }
+      }
+    }
+  }
+
+  // Build recommended list from not-installed servers that match hints
+  const recommendedMcpServers = [];
+  const recommendedSlugSet = new Set();
+  for (const server of notInstalled) {
+    const slug = (server.slug || "").toLowerCase();
+    if (recommendedSlugs.has(slug)) {
+      const { reasons, matchCount } = recommendedSlugs.get(slug);
+      recommendedMcpServers.push({ ...server, reasons, matchCount });
+      recommendedSlugSet.add(slug);
+    }
+  }
+
+  // Sort by relevance (more match signals first)
+  recommendedMcpServers.sort((a, b) => b.matchCount - a.matchCount || a.name.localeCompare(b.name));
+
+  // Available = not-installed minus recommended
+  const availableMcpServers = notInstalled.filter(
+    (s) => !recommendedSlugSet.has((s.slug || "").toLowerCase()),
+  );
+
   // ── 4. Usage Analytics ────────────────────────────────────────────────
 
   const usageAnalytics = aggregateSessionMeta(raw.sessionMetaFiles || []);
@@ -366,6 +446,10 @@ export function buildDashboardData(raw) {
         .map((r) => `${r.name} (${r.drift.commitsSince} commits since config update)`)
         .join(", "),
       action: "Review and update CLAUDE.md in these repos",
+      meta: {
+        kind: "config-drift",
+        repos: highDriftRepos.map((r) => ({ name: r.name, commitsSince: r.drift.commitsSince })),
+      },
     });
   }
 
@@ -381,6 +465,10 @@ export function buildDashboardData(raw) {
           ? `Top candidates: ${withStack.map((r) => `${r.name} (${r.techStack.join(", ")})`).join(", ")}`
           : "",
         action: "Run claude-code-dashboard init --template <stack> in these repos",
+        meta: {
+          kind: "unconfigured-repos",
+          repos: withStack.map((r) => ({ name: r.name, techStack: r.techStack })),
+        },
       });
     }
   }
@@ -392,6 +480,10 @@ export function buildDashboardData(raw) {
       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",
+      meta: {
+        kind: "mcp-promotion",
+        servers: mcpPromotions.map((p) => ({ name: p.name, projectCount: p.projects.length })),
+      },
     });
   }
 
@@ -403,6 +495,31 @@ export function buildDashboardData(raw) {
       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",
+      meta: {
+        kind: "mcp-redundant",
+        servers: redundantMcp.map((s) => ({ name: s.name, projects: s.projects })),
+      },
+    });
+  }
+
+  // MCP recommendations
+  if (recommendedMcpServers.length > 0) {
+    insights.push({
+      type: "tip",
+      title: `${recommendedMcpServers.length} MCP server${recommendedMcpServers.length > 1 ? "s" : ""} recommended for your repos`,
+      detail: recommendedMcpServers
+        .slice(0, 3)
+        .map((s) => `${s.name} (${s.reasons.join(", ")})`)
+        .join(", "),
+      action: "Check the Config tab for install commands",
+      meta: {
+        kind: "mcp-recommendations",
+        servers: recommendedMcpServers.slice(0, 5).map((s) => ({
+          name: s.name,
+          installCommand: s.installCommand,
+          reasons: s.reasons,
+        })),
+      },
     });
   }
 
@@ -425,6 +542,10 @@ export function buildDashboardData(raw) {
       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",
+      meta: {
+        kind: "shared-skills",
+        skills: top.map(([name, repos]) => ({ name, repoCount: repos.length })),
+      },
     });
   }
 
@@ -441,6 +562,14 @@ export function buildDashboardData(raw) {
         .map((r) => `${r.name} (${r.healthScore}/100): ${r.healthReasons[0]}`)
         .join("; "),
       action: "Small changes for measurable improvement",
+      meta: {
+        kind: "health-quickwins",
+        repos: quickWinRepos.map((r) => ({
+          name: r.name,
+          healthScore: r.healthScore,
+          topReason: r.healthReasons[0],
+        })),
+      },
     });
   }
 
@@ -451,6 +580,7 @@ export function buildDashboardData(raw) {
       title: "Generate your Claude Code Insights report",
       detail: "Get personalized usage patterns, friction points, and feature suggestions",
       action: "Run /insights in Claude Code",
+      meta: { kind: "insights-report" },
     });
   }
 
@@ -493,6 +623,9 @@ export function buildDashboardData(raw) {
     avgHealth,
     driftCount,
     mcpCount,
+    recommendedMcpServers,
+    availableMcpServers,
+    registryTotal,
     scanScope: raw.scanScope,
     insights,
     insightsReport,

package/src/sections.mjs

@@ -21,8 +21,33 @@ export function renderSkillsCard(globalSkills) {
 </div>`;
 }
 
-export function renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers) {
-  if (!mcpSummary.length) return "";
+export function renderMcpRecommendedCard(recommendedMcpServers) {
+  if (!recommendedMcpServers.length) return "";
+  return `<div class="card">
+  <h2>Recommended MCP Servers <span class="n">${recommendedMcpServers.length}</span></h2>
+  ${recommendedMcpServers
+    .map(
+      (s) =>
+        `<div class="mcp-recommended"><span class="mcp-name">${esc(s.name)}</span> <span class="mcp-rec-badge">recommended</span>` +
+        (s.description ? `<div class="mcp-desc">${esc(s.description)}</div>` : "") +
+        (s.reasons && s.reasons.length
+          ? `<div class="mcp-reason">${s.reasons.map((r) => esc(r)).join(", ")}</div>`
+          : "") +
+        (s.installCommand ? `<code class="mcp-install">${esc(s.installCommand)}</code>` : "") +
+        `</div>`,
+    )
+    .join("\n    ")}
+</div>`;
+}
+
+export function renderMcpCard(
+  mcpSummary,
+  mcpPromotions,
+  formerMcpServers,
+  availableMcpServers,
+  registryTotal,
+) {
+  if (!mcpSummary.length && !availableMcpServers.length) return "";
   const rows = mcpSummary
     .map((s) => {
       const disabledClass = s.disabledIn > 0 ? " mcp-disabled" : "";
@@ -62,11 +87,33 @@ export function renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers) {
     })
     .join("\n    ")}`
     : "";
+  const availableHtml = availableMcpServers.length
+    ? `<details class="mcp-section">
+    <summary class="label" style="cursor:pointer;margin-top:.75rem">Available <span class="cat-n">${availableMcpServers.length}</span></summary>
+    ${availableMcpServers
+      .map(
+        (s) =>
+          `<div class="mcp-available"><span class="mcp-name">${esc(s.name)}</span>` +
+          (s.description ? `<div class="mcp-desc">${esc(s.description)}</div>` : "") +
+          (s.installCommand ? `<code class="mcp-install">${esc(s.installCommand)}</code>` : "") +
+          `</div>`,
+      )
+      .join("\n    ")}
+  </details>`
+    : "";
+
+  const registryNote =
+    registryTotal > 0
+      ? `<div class="mcp-registry-note">${registryTotal} servers in registry</div>`
+      : "";
+
   return `<div class="card" id="section-mcp">
   <h2>MCP Servers <span class="n">${mcpSummary.length}</span></h2>
   ${rows}
   ${promoteHtml}
   ${formerHtml}
+  ${availableHtml}
+  ${registryNote}
 </div>`;
 }
 
@@ -330,13 +377,13 @@ export function renderReferenceCard() {
 </div>`;
 }
 
-export function renderInsightsCard(insights, markdown) {
+export function renderInsightsCard(insights, prompt) {
   if (!insights || !insights.length) return "";
-  const mdAttr = markdown ? ` data-markdown="${esc(markdown)}"` : "";
-  return `<div class="card insight-card"${mdAttr}>
+  const promptAttr = prompt ? ` data-prompt="${esc(prompt)}"` : "";
+  return `<div class="card insight-card"${promptAttr}>
     <div class="card-header">
       <h2>Insights <span class="n">${insights.length}</span></h2>
-      ${markdown ? `<button class="copy-md-btn" title="Copy as Markdown">&#128203; copy markdown</button>` : ""}
+      ${prompt ? `<button class="copy-prompt-btn" title="Copy as a prompt for Claude Code">&#128203; copy as prompt</button>` : ""}
     </div>
     ${insights
       .map(
@@ -389,29 +436,19 @@ export function renderInsightsReportCard(insightsReport) {
 }
 
 export function renderStatsBar(data) {
-  const {
-    coveragePct,
-    configuredCount,
-    totalRepos,
-    avgHealth,
-    globalCmds,
-    globalSkills,
-    totalRepoCmds,
-    mcpCount,
-    driftCount,
-    ccusageData,
-    usageAnalytics,
-  } = data;
+  const { coveragePct, configuredCount, totalRepos, avgHealth, driftCount, ccusageData } = data;
+  const driftStat =
+    driftCount > 0
+      ? `<div class="stat" data-nav="repos" data-section="repo-grid" title="View drifting repos" style="border-color:#f8717133"><b style="color:var(--red)">${driftCount}</b><span>Drifting Repos</span></div>`
+      : "";
+  const spendStat = ccusageData
+    ? `<div class="stat" data-nav="analytics" data-section="section-activity" title="View analytics" style="border-color:#4ade8033"><b style="color:var(--green)">$${Math.round(Number(ccusageData.totals.totalCost) || 0).toLocaleString()}</b><span>Total Spent</span></div>`
+    : "";
   return `<div class="stats">
   <div class="stat coverage" data-nav="repos" data-section="repo-grid" title="View repos"><b>${coveragePct}%</b><span>Coverage (${configuredCount}/${totalRepos})</span></div>
   <div class="stat" data-nav="repos" data-section="repo-grid" title="View repos" style="${avgHealth >= 70 ? "border-color:#4ade8033" : avgHealth >= 40 ? "border-color:#fbbf2433" : "border-color:#f8717133"}"><b style="color:${healthScoreColor(avgHealth)}">${avgHealth}</b><span>Avg Health</span></div>
-  <div class="stat" data-nav="overview" data-section="section-commands" title="View commands"><b>${globalCmds.length}</b><span>Global Commands</span></div>
-  <div class="stat" data-nav="skills-mcp" data-section="section-skills" title="View skills"><b>${globalSkills.length}</b><span>Skills</span></div>
-  <div class="stat" data-nav="repos" data-section="repo-grid" title="View repos"><b>${totalRepoCmds}</b><span>Repo Commands</span></div>
-  ${mcpCount > 0 ? `<div class="stat" data-nav="skills-mcp" data-section="section-mcp" title="View MCP servers"><b>${mcpCount}</b><span>MCP Servers</span></div>` : ""}
-  ${driftCount > 0 ? `<div class="stat" data-nav="repos" data-section="repo-grid" title="View drifting repos" style="border-color:#f8717133"><b style="color:var(--red)">${driftCount}</b><span>Drifting Repos</span></div>` : ""}
-  ${ccusageData ? `<div class="stat" data-nav="analytics" data-section="section-activity" title="View analytics" style="border-color:#4ade8033"><b style="color:var(--green)">$${Math.round(Number(ccusageData.totals.totalCost) || 0).toLocaleString()}</b><span>Total Spent</span></div>` : ""}
-  ${ccusageData ? `<div class="stat" data-nav="analytics" data-section="section-activity" title="View analytics"><b>${formatTokens(ccusageData.totals.totalTokens).replace(" tokens", "")}</b><span>Total Tokens</span></div>` : ""}
-  ${usageAnalytics.heavySessions > 0 ? `<div class="stat" data-nav="analytics" data-section="section-activity" title="View analytics"><b>${usageAnalytics.heavySessions}</b><span>Heavy Sessions</span></div>` : ""}
+  <div class="stat" data-nav="repos" data-section="repo-grid" title="View repos"><b>${totalRepos}</b><span>Repos</span></div>
+  ${driftStat}
+  ${spendStat}
 </div>`;
 }

package/template/dashboard.css

@@ -4,9 +4,9 @@
   --surface2: #1a1a1a;
   --border: #262626;
   --text: #e5e5e5;
-  --text-dim: #777;
+  --text-dim: #999;
   --accent: #c4956a;
-  --accent-dim: #8b6a4a;
+  --accent-dim: #b08a60;
   --green: #4ade80;
   --blue: #60a5fa;
   --purple: #a78bfa;
@@ -19,7 +19,7 @@
   --surface2: #f0f0f0;
   --border: #e0e0e0;
   --text: #1a1a1a;
-  --text-dim: #666;
+  --text-dim: #555;
   --accent: #9b6b47;
   --accent-dim: #b8956e;
   --green: #16a34a;
@@ -643,7 +643,7 @@ details.cmd-detail > summary::-webkit-details-marker {
 .card-header h2 {
   margin-bottom: 0;
 }
-.copy-md-btn {
+.copy-prompt-btn {
   background: var(--surface2);
   border: 1px solid var(--border);
   border-radius: 5px;
@@ -656,7 +656,7 @@ details.cmd-detail > summary::-webkit-details-marker {
     color 0.15s;
   white-space: nowrap;
 }
-.copy-md-btn:hover {
+.copy-prompt-btn:hover {
   border-color: var(--accent-dim);
   color: var(--text);
 }
@@ -797,7 +797,8 @@ details.cmd-detail > summary::-webkit-details-marker {
   margin-top: 0.5rem;
   font-size: 0.72rem;
   color: var(--accent);
-  text-decoration: none;
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 .report-link:hover {
   text-decoration: underline;
@@ -805,6 +806,84 @@ details.cmd-detail > summary::-webkit-details-marker {
 .mcp-former {
   opacity: 0.4;
 }
+
+/* ── MCP Registry Sections ──────────────────────────────── */
+.mcp-section {
+  margin-top: 0.75rem;
+}
+.mcp-section > summary {
+  list-style: none;
+}
+.mcp-section > summary::-webkit-details-marker {
+  display: none;
+}
+.mcp-section > summary:hover {
+  color: var(--accent);
+}
+.mcp-recommended {
+  border-left: 2px solid var(--accent);
+  padding: 0.4rem 0.6rem;
+  margin-top: 0.35rem;
+  border-radius: 0 4px 4px 0;
+  background: var(--surface2);
+}
+.mcp-rec-badge {
+  font-size: 0.55rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+  background: rgba(196, 149, 106, 0.15);
+  color: var(--accent);
+  border: 1px solid rgba(196, 149, 106, 0.3);
+  vertical-align: middle;
+  margin-left: 0.3rem;
+}
+.mcp-desc {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  margin-top: 0.15rem;
+}
+.mcp-reason {
+  font-size: 0.65rem;
+  color: var(--accent);
+  margin-top: 0.1rem;
+  font-style: italic;
+}
+.mcp-install {
+  display: block;
+  font-family: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
+  font-size: 0.68rem;
+  color: var(--green);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.3rem 0.5rem;
+  margin-top: 0.25rem;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+  word-break: break-all;
+}
+.mcp-install:hover {
+  background: var(--surface2);
+  border-color: var(--accent-dim);
+}
+.mcp-available {
+  padding: 0.35rem 0.5rem;
+  margin-top: 0.3rem;
+  border-radius: 4px;
+  background: var(--surface2);
+  opacity: 0.85;
+}
+.mcp-registry-note {
+  font-size: 0.6rem;
+  color: var(--text-dim);
+  text-align: right;
+  margin-top: 0.75rem;
+}
 .badge.mcp-former-badge {
   color: var(--text-dim);
   border-color: var(--border);
@@ -1175,7 +1254,7 @@ details.cmd-detail > summary::-webkit-details-marker {
 }
 .unconfigured-item .upath {
   font-size: 0.6rem;
-  color: #555;
+  color: var(--text-dim);
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;

package/template/dashboard.html

@@ -13,20 +13,21 @@
 
 <!-- {{STATS_BAR}} -->
 
+<main>
 <nav class="tab-nav">
-  <button class="tab-btn active" data-tab="overview">Overview</button>
-  <button class="tab-btn" data-tab="skills-mcp">Skills & MCP</button>
+  <button class="tab-btn active" data-tab="home">Home</button>
+  <button class="tab-btn" data-tab="config">Config</button>
   <button class="tab-btn" data-tab="analytics">Analytics</button>
   <button class="tab-btn" data-tab="repos">Repos</button>
   <button class="tab-btn" data-tab="reference">Reference</button>
 </nav>
 
-<div class="tab-content active" id="tab-overview">
-<!-- {{TAB_OVERVIEW}} -->
+<div class="tab-content active" id="tab-home">
+<!-- {{TAB_HOME}} -->
 </div>
 
-<div class="tab-content" id="tab-skills-mcp">
-<!-- {{TAB_SKILLS_MCP}} -->
+<div class="tab-content" id="tab-config">
+<!-- {{TAB_CONFIG}} -->
 </div>
 
 <div class="tab-content" id="tab-analytics">
@@ -42,6 +43,7 @@
 </div>
 
 <!-- {{FOOTER}} -->
+</main>
 
 <div class="chart-tooltip" id="chart-tooltip"></div>
 <script>

package/template/dashboard.js

@@ -133,19 +133,19 @@ function showToast(msg) {
   }, 2000);
 }
 
-// ── Copy Markdown button ────────────────────────────────────
-document.querySelectorAll(".copy-md-btn").forEach(function (btn) {
+// ── Copy as Prompt button ────────────────────────────────────
+document.querySelectorAll(".copy-prompt-btn").forEach(function (btn) {
   btn.addEventListener("click", function () {
-    var card = btn.closest("[data-markdown]");
+    var card = btn.closest("[data-prompt]");
     if (!card) return;
-    var md = card.dataset.markdown;
+    var prompt = card.dataset.prompt;
     navigator.clipboard
-      .writeText(md)
+      .writeText(prompt)
       .then(function () {
-        showToast("Markdown copied to clipboard");
+        showToast("Prompt copied \u2014 paste into Claude Code");
       })
       .catch(function () {
-        showToast("Copy failed \u2014 use browser copy from the insights card");
+        showToast("Copy failed \u2014 try selecting the text manually");
       });
   });
 });
@@ -165,6 +165,24 @@ if (refreshBtn) {
   });
 }
 
+// ── Click-to-copy MCP install commands ───────────────────
+document.addEventListener("click", function (e) {
+  var install = e.target.closest(".mcp-install");
+  if (!install) return;
+  navigator.clipboard
+    .writeText(install.textContent)
+    .then(function () {
+      var orig = install.textContent;
+      install.textContent = "copied!";
+      setTimeout(function () {
+        install.textContent = orig;
+      }, 1500);
+    })
+    .catch(function () {
+      /* clipboard unavailable (file:// protocol, permissions) */
+    });
+});
+
 // Custom tooltip for heatmap cells and peak bars
 var tip = document.getElementById("chart-tooltip");
 document.addEventListener("mouseover", function (e) {