@viren/claude-code-dashboard 0.0.4 → 0.0.5

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`
 

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.5",
   "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,150 @@
+import { readFileSync } from "fs";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+
+import { esc } 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>
+<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>`;
+
+  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 insightsHtml = renderInsightsCard(insights);
+  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.5";
 export const REPO_URL = "https://github.com/VirenMohindra/claude-code-dashboard";
 
 export const HOME = homedir();

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

package/src/sections.mjs

@@ -0,0 +1,413 @@
+import { esc, formatTokens } from "./helpers.mjs";
+import { renderSkill, healthScoreColor } from "./render.mjs";
+import { groupSkillsByCategory } from "./skills.mjs";
+import { QUICK_REFERENCE } from "./constants.mjs";
+
+export function renderSkillsCard(globalSkills) {
+  if (!globalSkills.length) return "";
+  const groups = groupSkillsByCategory(globalSkills);
+  const categoryHtml = Object.entries(groups)
+    .map(
+      ([cat, skills], idx) =>
+        `<details class="skill-category"${idx === 0 ? " open" : ""}>` +
+        `<summary class="skill-category-label">${esc(cat)} <span class="cat-n">${skills.length}</span></summary>` +
+        skills.map((s) => renderSkill(s)).join("\n    ") +
+        `</details>`,
+    )
+    .join("\n  ");
+  return `<div class="card" id="section-skills">
+  <h2>Skills <span class="n">${globalSkills.length}</span></h2>
+  ${categoryHtml}
+</div>`;
+}
+
+export function renderMcpCard(mcpSummary, mcpPromotions, formerMcpServers) {
+  if (!mcpSummary.length) return "";
+  const rows = mcpSummary
+    .map((s) => {
+      const disabledClass = s.disabledIn > 0 ? " mcp-disabled" : "";
+      const disabledHint =
+        s.disabledIn > 0
+          ? `<span class="mcp-disabled-hint">disabled in ${s.disabledIn} project${s.disabledIn > 1 ? "s" : ""}</span>`
+          : "";
+      const scopeBadge = s.userLevel
+        ? `<span class="badge mcp-global">global</span>`
+        : s.recentlyActive
+          ? `<span class="badge mcp-recent">recent</span>`
+          : `<span class="badge mcp-project">project</span>`;
+      const typeBadge = `<span class="badge mcp-type">${esc(s.type)}</span>`;
+      const projects =
+        !s.userLevel && s.projects.length
+          ? `<span class="mcp-projects">${s.projects.map((p) => esc(p)).join(", ")}</span>`
+          : "";
+      return `<div class="mcp-row${disabledClass}"><span class="mcp-name">${esc(s.name)}</span>${scopeBadge}${typeBadge}${disabledHint}${projects}</div>`;
+    })
+    .join("\n    ");
+  const promoteHtml = mcpPromotions.length
+    ? mcpPromotions
+        .map(
+          (p) =>
+            `<div class="mcp-promote"><span class="mcp-name">${esc(p.name)}</span> installed in ${p.projects.length} projects &rarr; add to <code>~/.claude/mcp_config.json</code></div>`,
+        )
+        .join("\n    ")
+    : "";
+  const formerHtml = formerMcpServers.length
+    ? `<div class="label" style="margin-top:.75rem">Formerly Installed</div>
+  ${formerMcpServers
+    .map((s) => {
+      const hint = s.projects.length
+        ? `<span class="mcp-projects">${s.projects.map((p) => esc(p)).join(", ")}</span>`
+        : "";
+      return `<div class="mcp-row mcp-former"><span class="mcp-name">${esc(s.name)}</span><span class="badge mcp-former-badge">removed</span>${hint}</div>`;
+    })
+    .join("\n    ")}`
+    : "";
+  return `<div class="card" id="section-mcp">
+  <h2>MCP Servers <span class="n">${mcpSummary.length}</span></h2>
+  ${rows}
+  ${promoteHtml}
+  ${formerHtml}
+</div>`;
+}
+
+export function renderToolsCard(topTools) {
+  if (!topTools.length) return "";
+  const maxCount = topTools[0].count;
+  const rows = topTools
+    .map((t) => {
+      const pct = maxCount > 0 ? Math.round((t.count / maxCount) * 100) : 0;
+      return `<div class="usage-bar-row"><span class="usage-bar-label">${esc(t.name)}</span><div class="usage-bar-track"><div class="usage-bar-fill usage-bar-tool" style="width:${pct}%"></div></div><span class="usage-bar-count">${t.count.toLocaleString()}</span></div>`;
+    })
+    .join("\n    ");
+  return `<div class="card">
+  <h2>Top Tools Used <span class="n">${topTools.length}</span></h2>
+  ${rows}
+</div>`;
+}
+
+export function renderLangsCard(topLanguages) {
+  if (!topLanguages.length) return "";
+  const maxCount = topLanguages[0].count;
+  const rows = topLanguages
+    .map((l) => {
+      const pct = maxCount > 0 ? Math.round((l.count / maxCount) * 100) : 0;
+      return `<div class="usage-bar-row"><span class="usage-bar-label">${esc(l.name)}</span><div class="usage-bar-track"><div class="usage-bar-fill usage-bar-lang" style="width:${pct}%"></div></div><span class="usage-bar-count">${l.count.toLocaleString()}</span></div>`;
+    })
+    .join("\n    ");
+  return `<div class="card">
+  <h2>Languages <span class="n">${topLanguages.length}</span></h2>
+  ${rows}
+</div>`;
+}
+
+export function renderErrorsCard(errorCategories) {
+  if (!errorCategories.length) return "";
+  const maxCount = errorCategories[0].count;
+  const rows = errorCategories
+    .map((e) => {
+      const pct = maxCount > 0 ? Math.round((e.count / maxCount) * 100) : 0;
+      return `<div class="usage-bar-row"><span class="usage-bar-label">${esc(e.name)}</span><div class="usage-bar-track"><div class="usage-bar-fill usage-bar-error" style="width:${pct}%"></div></div><span class="usage-bar-count">${e.count.toLocaleString()}</span></div>`;
+    })
+    .join("\n    ");
+  return `<div class="card">
+  <h2>Top Errors <span class="n">${errorCategories.length}</span></h2>
+  ${rows}
+</div>`;
+}
+
+export function renderActivityCard(statsCache, ccusageData) {
+  const dailyActivity = statsCache.dailyActivity || [];
+  const hourCounts = statsCache.hourCounts || {};
+  const modelUsage = statsCache.modelUsage || {};
+  const hasActivity = dailyActivity.length > 0;
+  const hasHours = Object.keys(hourCounts).length > 0;
+  const hasModels = Object.keys(modelUsage).length > 0;
+
+  if (!hasActivity && !hasHours && !hasModels && !ccusageData) return "";
+
+  let content = "";
+
+  if (hasActivity) {
+    const dateMap = new Map(dailyActivity.map((d) => [d.date, d.messageCount || 0]));
+    const dates = dailyActivity.map((d) => d.date).sort();
+    const lastDate = new Date(dates[dates.length - 1]);
+    const firstDate = new Date(lastDate);
+    firstDate.setDate(firstDate.getDate() - 364);
+
+    const nonZero = dailyActivity
+      .map((d) => d.messageCount || 0)
+      .filter((n) => n > 0)
+      .sort((a, b) => a - b);
+    const q1 = nonZero[Math.floor(nonZero.length * 0.25)] || 1;
+    const q2 = nonZero[Math.floor(nonZero.length * 0.5)] || 2;
+    const q3 = nonZero[Math.floor(nonZero.length * 0.75)] || 3;
+
+    function level(count) {
+      if (count === 0) return "";
+      if (count <= q1) return " l1";
+      if (count <= q2) return " l2";
+      if (count <= q3) return " l3";
+      return " l4";
+    }
+
+    const start = new Date(firstDate);
+    start.setUTCDate(start.getUTCDate() - start.getUTCDay());
+
+    const months = [];
+    let lastMonth = -1;
+    const cursor1 = new Date(start);
+    let weekIdx = 0;
+    while (cursor1 <= lastDate) {
+      if (cursor1.getUTCDay() === 0) {
+        const m = cursor1.getUTCMonth();
+        if (m !== lastMonth) {
+          months.push({
+            name: cursor1.toLocaleString("en", { month: "short", timeZone: "UTC" }),
+            week: weekIdx,
+          });
+          lastMonth = m;
+        }
+        weekIdx++;
+      }
+      cursor1.setUTCDate(cursor1.getUTCDate() + 1);
+    }
+    const totalWeeks = weekIdx;
+    const monthLabels = months
+      .map((m) => {
+        const left = totalWeeks > 0 ? Math.round((m.week / totalWeeks) * 100) : 0;
+        return `<span class="heatmap-month" style="position:absolute;left:${left}%">${m.name}</span>`;
+      })
+      .join("");
+
+    let cells = "";
+    const cursor2 = new Date(start);
+    while (cursor2 <= lastDate) {
+      const key = cursor2.toISOString().slice(0, 10);
+      const count = dateMap.get(key) || 0;
+      const fmtDate = cursor2.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+      cells += `<div class="heatmap-cell${level(count)}" title="${esc(fmtDate)}: ${count} messages"></div>`;
+      cursor2.setUTCDate(cursor2.getUTCDate() + 1);
+    }
+
+    content += `<div class="label">Activity</div>
+      <div style="overflow-x:auto;margin-bottom:.5rem">
+        <div style="width:fit-content;position:relative">
+          <div class="heatmap-months" style="position:relative;height:.8rem">${monthLabels}</div>
+          <div class="heatmap">${cells}</div>
+        </div>
+      </div>`;
+  }
+
+  if (hasHours) {
+    const maxHour = Math.max(...Object.values(hourCounts), 1);
+    let bars = "";
+    let labels = "";
+    for (let h = 0; h < 24; h++) {
+      const count = hourCounts[String(h)] || 0;
+      const pct = Math.round((count / maxHour) * 100);
+      bars += `<div class="peak-bar" style="height:${Math.max(pct, 2)}%" title="${esc(String(h))}:00 — ${count} messages"></div>`;
+      labels += `<div class="peak-label">${h % 6 === 0 ? h : ""}</div>`;
+    }
+    content += `<div class="label" style="margin-top:.75rem">Peak Hours</div>
+      <div class="peak-hours">${bars}</div>
+      <div class="peak-labels">${labels}</div>`;
+  }
+
+  if (ccusageData) {
+    const modelCosts = {};
+    for (const day of ccusageData.daily) {
+      for (const mb of day.modelBreakdowns || []) {
+        if (!modelCosts[mb.modelName]) modelCosts[mb.modelName] = { cost: 0, tokens: 0 };
+        modelCosts[mb.modelName].cost += mb.cost || 0;
+        modelCosts[mb.modelName].tokens +=
+          (mb.inputTokens || 0) +
+          (mb.outputTokens || 0) +
+          (mb.cacheCreationTokens || 0) +
+          (mb.cacheReadTokens || 0);
+      }
+    }
+    const modelRows = Object.entries(modelCosts)
+      .sort((a, b) => b[1].cost - a[1].cost)
+      .map(
+        ([name, data]) =>
+          `<div class="model-row"><span class="model-name">${esc(name)}</span><span class="model-tokens">$${Math.round(data.cost).toLocaleString()} · ${formatTokens(data.tokens)}</span></div>`,
+      )
+      .join("\n      ");
+
+    const t = ccusageData.totals;
+    const breakdownHtml = `<div class="token-breakdown">
+      <div class="tb-row"><span class="tb-label">Cache Read</span><span class="tb-val">${formatTokens(t.cacheReadTokens)}</span></div>
+      <div class="tb-row"><span class="tb-label">Cache Creation</span><span class="tb-val">${formatTokens(t.cacheCreationTokens)}</span></div>
+      <div class="tb-row"><span class="tb-label">Output</span><span class="tb-val">${formatTokens(t.outputTokens)}</span></div>
+      <div class="tb-row"><span class="tb-label">Input</span><span class="tb-val">${formatTokens(t.inputTokens)}</span></div>
+    </div>`;
+
+    content += `<div class="label" style="margin-top:.75rem">Model Usage (via ccusage)</div>
+      ${modelRows}
+      <div class="label" style="margin-top:.75rem">Token Breakdown</div>
+      ${breakdownHtml}`;
+  } else if (hasModels) {
+    const modelRows = Object.entries(modelUsage)
+      .map(([name, usage]) => {
+        const total = (usage.inputTokens || 0) + (usage.outputTokens || 0);
+        return { name, total };
+      })
+      .sort((a, b) => b.total - a.total)
+      .map(
+        (m) =>
+          `<div class="model-row"><span class="model-name">${esc(m.name)}</span><span class="model-tokens">${formatTokens(m.total)}</span></div>`,
+      )
+      .join("\n      ");
+    content += `<div class="label" style="margin-top:.75rem">Model Usage (partial — install ccusage for full data)</div>
+      ${modelRows}`;
+  }
+
+  return `<div class="card" id="section-activity">
+  <h2>Activity</h2>
+  ${content}
+</div>`;
+}
+
+export function renderChainsCard(chains) {
+  if (!chains.length) return "";
+  return `<div class="card">
+  <h2>Dependency Chains</h2>
+  ${chains.map((c) => `<div class="chain">${c.nodes.map((n, i) => `<span class="chain-node">${esc(n.trim())}</span>${i < c.nodes.length - 1 ? `<span class="chain-arrow">${c.arrow}</span>` : ""}`).join("")}</div>`).join("\n  ")}
+</div>`;
+}
+
+export function renderConsolidationCard(consolidationGroups) {
+  if (!consolidationGroups.length) return "";
+  return `<div class="card">
+  <h2>Consolidation Opportunities <span class="n">${consolidationGroups.length}</span></h2>
+  ${consolidationGroups.map((g) => `<div class="consolidation-hint"><span class="consolidation-stack">${esc(g.stack)}</span> <span class="consolidation-text">${esc(g.suggestion)}</span></div>`).join("\n  ")}
+</div>`;
+}
+
+export function renderUnconfiguredCard(unconfigured) {
+  if (!unconfigured.length) return "";
+  return `<details class="card">
+  <summary style="cursor:pointer;list-style:none"><h2 style="margin:0">Unconfigured Repos <span class="n">${unconfigured.length}</span></h2></summary>
+  <div style="margin-top:.75rem">
+    <div class="unconfigured-grid">
+      ${unconfigured
+        .map((r) => {
+          const stackTag =
+            r.techStack && r.techStack.length
+              ? `<span class="stack-tag">${esc(r.techStack.join(", "))}</span>`
+              : "";
+          const suggestionsHtml =
+            r.suggestions && r.suggestions.length
+              ? `<div class="suggestion-hints">${r.suggestions.map((s) => `<span class="suggestion-hint">${esc(s)}</span>`).join("")}</div>`
+              : "";
+          return `<div class="unconfigured-item">${esc(r.name)}${stackTag}<span class="upath">${esc(r.shortPath)}</span>${suggestionsHtml}</div>`;
+        })
+        .join("\n      ")}
+    </div>
+  </div>
+</details>`;
+}
+
+export function renderReferenceCard() {
+  return `<div class="card">
+  <h2>Quick Reference</h2>
+  <div class="ref-grid">
+    <div class="ref-col">
+      <div class="label">Essential Commands</div>
+      ${QUICK_REFERENCE.essentialCommands.map((c) => `<div class="ref-row"><code class="ref-cmd">${esc(c.cmd)}</code><span class="ref-desc">${esc(c.desc)}</span></div>`).join("\n      ")}
+    </div>
+    <div class="ref-col">
+      <div class="label">Built-in Tools</div>
+      ${QUICK_REFERENCE.tools.map((t) => `<div class="ref-row"><code class="ref-cmd">${esc(t.name)}</code><span class="ref-desc">${esc(t.desc)}</span></div>`).join("\n      ")}
+      <div class="label" style="margin-top:.75rem">Keyboard Shortcuts</div>
+      ${QUICK_REFERENCE.shortcuts.map((s) => `<div class="ref-row"><kbd class="ref-key">${esc(s.keys)}</kbd><span class="ref-desc">${esc(s.desc)}</span></div>`).join("\n      ")}
+    </div>
+  </div>
+</div>`;
+}
+
+export function renderInsightsCard(insights) {
+  if (!insights || !insights.length) return "";
+  return `<div class="card insight-card">
+    <h2>Insights <span class="n">${insights.length}</span></h2>
+    ${insights
+      .map(
+        (i) =>
+          `<div class="insight-row ${esc(i.type)}">
+      <span class="insight-icon">${i.type === "warning" ? "&#9888;" : i.type === "tip" ? "&#10024;" : i.type === "promote" ? "&#8593;" : "&#9432;"}</span>
+      <div class="insight-body">
+        <div class="insight-title">${esc(i.title)}</div>
+        ${i.detail ? `<div class="insight-detail">${esc(i.detail)}</div>` : ""}
+        ${i.action ? `<div class="insight-action">${esc(i.action)}</div>` : ""}
+      </div>
+    </div>`,
+      )
+      .join("\n    ")}
+  </div>`;
+}
+
+export function renderInsightsReportCard(insightsReport) {
+  if (!insightsReport) {
+    return `<div class="card report-card">
+    <h2>Claude Code Insights</h2>
+    <div class="report-glance"><div class="report-glance-item">No insights report found. Run <code>/insights</code> in Claude Code to generate a personalized report with usage patterns, friction points, and feature suggestions.</div></div>
+  </div>`;
+  }
+  return `<div class="card report-card" id="section-insights-report">
+    <h2>Claude Code Insights</h2>
+    ${insightsReport.subtitle ? `<div class="report-subtitle">${esc(insightsReport.subtitle)}</div>` : ""}
+    ${
+      insightsReport.stats.length > 0
+        ? `<div class="report-stats">${insightsReport.stats
+            .map((s) => {
+              if (s.isDiff) {
+                const parts = s.value.match(/^([+-][^/]+)\/([-+].+)$/);
+                if (parts) {
+                  return `<div class="report-stat"><b><span style="color:var(--green)">${esc(parts[1])}</span><span style="color:var(--text-dim)">/</span><span style="color:var(--red)">${esc(parts[2])}</span></b><span>${esc(s.label)}</span></div>`;
+                }
+              }
+              return `<div class="report-stat"><b>${esc(s.value)}</b><span>${esc(s.label)}</span></div>`;
+            })
+            .join("")}</div>`
+        : ""
+    }
+    ${
+      insightsReport.glance.length > 0
+        ? `<div class="report-glance">${insightsReport.glance.map((g) => `<div class="report-glance-item"><strong>${esc(g.label)}:</strong> ${esc(g.text)}</div>`).join("")}</div>`
+        : ""
+    }
+    <a class="report-link" href="file://${encodeURI(insightsReport.filePath)}" target="_blank">View full insights report &rarr;</a>
+  </div>`;
+}
+
+export function renderStatsBar(data) {
+  const {
+    coveragePct,
+    configuredCount,
+    totalRepos,
+    avgHealth,
+    globalCmds,
+    globalSkills,
+    totalRepoCmds,
+    mcpCount,
+    driftCount,
+    ccusageData,
+    usageAnalytics,
+  } = data;
+  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>`;
+}