@viren/claude-code-dashboard 0.0.5 → 0.0.6

package/README.md

@@ -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/package.json

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

package/src/assembler.mjs

@@ -2,7 +2,7 @@ import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
 import { dirname, join } from "path";
 
-import { esc } from "./helpers.mjs";
+import { esc, insightsToMarkdown } from "./helpers.mjs";
 import { VERSION, REPO_URL } from "./constants.mjs";
 import { renderCmd, renderRule, renderRepoCard } from "./render.mjs";
 import {
@@ -64,8 +64,11 @@ export function generateDashboardHtml(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>`;
+<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);
 
@@ -80,7 +83,8 @@ export function generateDashboardHtml(data) {
       ${globalRules.map((r) => renderRule(r)).join("\n  ")}
     </div>
   </div>`;
-  const insightsHtml = renderInsightsCard(insights);
+  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}`;

package/src/constants.mjs

@@ -1,7 +1,7 @@
 import { join } from "path";
 import { homedir } from "os";
 
-export const VERSION = "0.0.5";
+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/sections.mjs

@@ -330,10 +330,14 @@ export function renderReferenceCard() {
 </div>`;
 }
 
-export function renderInsightsCard(insights) {
+export function renderInsightsCard(insights, markdown) {
   if (!insights || !insights.length) return "";
-  return `<div class="card insight-card">
-    <h2>Insights <span class="n">${insights.length}</span></h2>
+  const mdAttr = markdown ? ` data-markdown="${esc(markdown)}"` : "";
+  return `<div class="card insight-card"${mdAttr}>
+    <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>` : ""}
+    </div>
     ${insights
       .map(
         (i) =>

package/template/dashboard.css

@@ -52,6 +52,31 @@ h1 {
   color: var(--accent);
   margin-bottom: 0.2rem;
 }
+.header-actions {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 100;
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+}
+.header-btn {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.4rem 0.6rem;
+  cursor: pointer;
+  color: var(--text-dim);
+  font-size: 0.75rem;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+.header-btn:hover {
+  border-color: var(--accent-dim);
+  color: var(--text);
+}
 .sub {
   color: var(--text-dim);
   font-size: 0.78rem;
@@ -609,6 +634,54 @@ details.cmd-detail > summary::-webkit-details-marker {
   color: var(--accent);
 }
 
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.card-header h2 {
+  margin-bottom: 0;
+}
+.copy-md-btn {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.65rem;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    color 0.15s;
+  white-space: nowrap;
+}
+.copy-md-btn:hover {
+  border-color: var(--accent-dim);
+  color: var(--text);
+}
+.copy-toast {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: var(--surface);
+  border: 1px solid var(--accent-dim);
+  color: var(--text);
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-size: 0.75rem;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.2s,
+    transform 0.2s;
+  z-index: 200;
+}
+.copy-toast.visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
 .insight-card {
   margin-bottom: 1.25rem;
 }
@@ -1133,10 +1206,6 @@ details.cmd-detail > summary::-webkit-details-marker {
 }
 
 .theme-toggle {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  z-index: 100;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;

package/template/dashboard.js

@@ -119,6 +119,52 @@ groupSelect.addEventListener("change", function () {
     });
 });
 
+// ── Toast helper ────────────────────────────────────────────
+var toast = document.createElement("div");
+toast.className = "copy-toast";
+document.body.appendChild(toast);
+var toastTimer;
+function showToast(msg) {
+  toast.textContent = msg;
+  toast.classList.add("visible");
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(function () {
+    toast.classList.remove("visible");
+  }, 2000);
+}
+
+// ── Copy Markdown button ────────────────────────────────────
+document.querySelectorAll(".copy-md-btn").forEach(function (btn) {
+  btn.addEventListener("click", function () {
+    var card = btn.closest("[data-markdown]");
+    if (!card) return;
+    var md = card.dataset.markdown;
+    navigator.clipboard
+      .writeText(md)
+      .then(function () {
+        showToast("Markdown copied to clipboard");
+      })
+      .catch(function () {
+        showToast("Copy failed \u2014 use browser copy from the insights card");
+      });
+  });
+});
+
+// ── Refresh button ──────────────────────────────────────────
+var refreshBtn = document.getElementById("refresh-btn");
+if (refreshBtn) {
+  refreshBtn.addEventListener("click", function () {
+    navigator.clipboard
+      .writeText("claude-code-dashboard --open")
+      .then(function () {
+        showToast("Copied \u2014 paste in terminal to refresh");
+      })
+      .catch(function () {
+        showToast("Run: claude-code-dashboard --open");
+      });
+  });
+}
+
 // Custom tooltip for heatmap cells and peak bars
 var tip = document.getElementById("chart-tooltip");
 document.addEventListener("mouseover", function (e) {