@viren/claude-code-dashboard 0.0.7 → 0.0.8

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.8",
   "description": "A visual dashboard for your Claude Code configuration across all repos",
   "type": "module",
   "bin": {

package/src/assembler.mjs

@@ -47,6 +47,9 @@ export function generateDashboardHtml(data) {
     mcpSummary,
     mcpPromotions,
     formerMcpServers,
+    recommendedMcpServers,
+    availableMcpServers,
+    registryTotal,
     consolidationGroups,
     usageAnalytics,
     ccusageData,
@@ -90,7 +93,7 @@ export function generateDashboardHtml(data) {
   const tabOverview = `${overviewCommands}\n  ${insightsHtml}\n  ${chainsHtml}\n  ${consolidationHtml}`;
 
   // Skills & MCP tab
-  const tabSkillsMcp = `${renderSkillsCard(globalSkills)}\n  ${renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers)}`;
+  const tabSkillsMcp = `${renderSkillsCard(globalSkills)}\n  ${renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers, recommendedMcpServers, availableMcpServers, registryTotal)}`;
 
   // Analytics tab
   const insightsReportHtml = renderInsightsReportCard(insightsReport);

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.8";
 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/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 || []);
@@ -406,6 +486,19 @@ export function buildDashboardData(raw) {
     });
   }
 
+  // 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 Skills & MCP tab for install commands",
+    });
+  }
+
   // Skill sharing opportunities
   const skillMatchCounts = {};
   for (const r of configured) {
@@ -493,6 +586,9 @@ export function buildDashboardData(raw) {
     avgHealth,
     driftCount,
     mcpCount,
+    recommendedMcpServers,
+    availableMcpServers,
+    registryTotal,
     scanScope: raw.scanScope,
     insights,
     insightsReport,

package/src/sections.mjs

@@ -21,8 +21,15 @@ export function renderSkillsCard(globalSkills) {
 </div>`;
 }
 
-export function renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers) {
-  if (!mcpSummary.length) return "";
+export function renderMcpCard(
+  mcpSummary,
+  mcpPromotions,
+  formerMcpServers,
+  recommendedMcpServers,
+  availableMcpServers,
+  registryTotal,
+) {
+  if (!mcpSummary.length && !recommendedMcpServers.length && !availableMcpServers.length) return "";
   const rows = mcpSummary
     .map((s) => {
       const disabledClass = s.disabledIn > 0 ? " mcp-disabled" : "";
@@ -62,11 +69,52 @@ export function renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers) {
     })
     .join("\n    ")}`
     : "";
+  const recommendedHtml = recommendedMcpServers.length
+    ? `<details class="mcp-section"${recommendedMcpServers.length <= 5 ? " open" : ""}>
+    <summary class="label" style="cursor:pointer;margin-top:.75rem">Recommended <span class="cat-n">${recommendedMcpServers.length}</span></summary>
+    ${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    ")}
+  </details>`
+    : "";
+
+  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}
+  ${recommendedHtml}
+  ${availableHtml}
+  ${registryNote}
 </div>`;
 }
 

package/template/dashboard.css

@@ -805,6 +805,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);

package/template/dashboard.js

@@ -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) {