@viren/claude-code-dashboard 0.0.6 → 0.0.8

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