specdrive-cli 0.1.10 → 0.1.12

package/dashboard/app.js

@@ -0,0 +1,394 @@
+async function fetchJson(url) {
+  const res = await fetch(url);
+  return res.json();
+}
+
+function gateClass(status) {
+  if (status === "approved") return "gate approved";
+  if (status === "in_progress") return "gate in_progress";
+  return "gate pending";
+}
+
+function getFilterValues() {
+  return {
+    search: document.getElementById("filter-search").value.trim().toLowerCase(),
+    phase: document.getElementById("filter-phase").value,
+    verification: document.getElementById("filter-verification").value,
+    tests: document.getElementById("filter-tests").value,
+    currentVersionOnly: document.getElementById("filter-current-version").checked
+  };
+}
+
+function featureMatchesFilters(feature, version, filters, verification, tests) {
+  if (filters.search && !feature.name.toLowerCase().includes(filters.search)) {
+    return false;
+  }
+
+  if (filters.phase && version.phase !== filters.phase) {
+    return false;
+  }
+
+  if (filters.verification) {
+    const status =
+      verification.status === "not_run" || !verification.status
+        ? "not_run"
+        : verification.status;
+
+    if (status !== filters.verification) {
+      return false;
+    }
+  }
+
+  if (filters.tests) {
+    const testStatus =
+      tests.status === "not_run" || !tests.status ? "not_run" : tests.status;
+
+    if (testStatus !== filters.tests) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function renderVerification(verification) {
+  const div = document.createElement("div");
+  div.className = "traceability";
+
+  if (verification.status === "pass") {
+    div.innerHTML = `🔍 Verification: <strong>PASS</strong> (${verification.summary?.matched ?? 0} matched)`;
+    div.style.color = "#2b6b25";
+  } else if (verification.status === "warn") {
+    div.innerHTML = `🔍 Verification: <strong>WARN</strong> (${verification.summary?.extra ?? 0} extra, ${verification.summary?.matched ?? 0} matched)`;
+    div.style.color = "#7a5b1a";
+  } else if (verification.status === "fail") {
+    div.innerHTML = `🔍 Verification: <strong>FAIL</strong> (${verification.summary?.missing ?? 0} missing, ${verification.summary?.renamed ?? 0} renamed)`;
+    div.style.color = "#8a1c1c";
+  } else {
+    div.innerHTML = `🔍 Verification: <strong>NOT RUN</strong>`;
+    div.style.color = "#666";
+  }
+
+  return div;
+}
+
+function renderTests(tests) {
+  const div = document.createElement("div");
+  div.className = "traceability";
+
+  if (!tests || tests.status === "not_run") {
+    div.innerHTML = `🧪 Tests: <strong>NOT RUN</strong>`;
+    div.style.color = "#666";
+  } else if (tests.status === "complete") {
+    div.innerHTML = `🧪 Tests: <strong>${tests.summary.coverage}%</strong> (${tests.summary.testedACs}/${tests.summary.totalACs} ACs, ${tests.summary.passed}/${tests.summary.total} passed)`;
+    div.style.color = "#2b6b25";
+  } else {
+    div.innerHTML = `🧪 Tests: <strong>${tests.summary.coverage}%</strong> (${tests.summary.testedACs}/${tests.summary.totalACs} ACs)`;
+    div.style.color = "#7a5b1a";
+  }
+
+  return div;
+}
+
+function renderVersion(feature, version, isCurrent) {
+  const div = document.createElement("div");
+  div.className = "feature-version";
+  div.style.marginTop = "12px";
+  div.style.paddingTop = "12px";
+  div.style.borderTop = "1px solid #eee";
+
+  div.innerHTML = `
+    <div style="font-weight: bold; margin-bottom: 4px;">
+      ${isCurrent ? "🟢" : "⚪"} Version: ${version.id}
+    </div>
+    <div>Phase: ${version.phase} | Step: ${version.currentStep}</div>
+    <div style="margin-top: 8px;">
+      <span class="${gateClass(version.gates?.specification)}">spec: ${version.gates?.specification}</span>
+      <span class="${gateClass(version.gates?.planning)}">plan: ${version.gates?.planning}</span>
+      <span class="${gateClass(version.gates?.implementation)}">impl: ${version.gates?.implementation}</span>
+      <span class="${gateClass(version.gates?.review)}">review: ${version.gates?.review}</span>
+    </div>
+  `;
+
+  return div;
+}
+
+async function renderFeatures() {
+  const state = await fetchJson("/api/workflow-state");
+  const container = document.getElementById("feature-list");
+
+  if (!state.features || state.features.length === 0) {
+    container.textContent = "No features yet.";
+    return;
+  }
+
+  const filters = getFilterValues();
+  container.innerHTML = "";
+
+  let rendered = 0;
+
+  for (const f of state.features) {
+    const featureDiv = document.createElement("div");
+    featureDiv.className = "feature";
+
+    featureDiv.innerHTML = `
+      <div class="feature-name">${f.name}</div>
+      ${f.branch ? `<div class="feature-branch">🌿 ${f.branch}</div>` : ""}
+      <div>Current Version: ${f.currentVersion}</div>
+    `;
+
+    const versions = f.versions || [];
+    let versionRendered = 0;
+
+    for (const version of versions) {
+      const isCurrent = version.id === f.currentVersion;
+
+      if (filters.currentVersionOnly && !isCurrent) {
+        continue;
+      }
+
+      const traceability = await fetchJson(`/api/traceability/${f.name}/${version.id}`);
+      const verification = await fetchJson(`/api/verification/${f.name}/${version.id}`);
+      const tests = await fetchJson(`/api/tests/${f.name}/${version.id}`);
+
+      if (!featureMatchesFilters(f, version, filters, verification, tests)) {
+        continue;
+      }
+
+      const rows = traceability.rows || [];
+      const completed = rows.filter((r) => r.status === "complete").length;
+      const coverage = rows.length === 0 ? 0 : Math.round((completed / rows.length) * 100);
+
+      const versionDiv = renderVersion(f, version, isCurrent);
+
+      const traceLine = document.createElement("div");
+      traceLine.className = "traceability";
+      traceLine.textContent = `📊 Traceability Coverage: ${coverage}% (${completed}/${rows.length})`;
+      versionDiv.appendChild(traceLine);
+
+      versionDiv.appendChild(renderVerification(verification));
+      versionDiv.appendChild(renderTests(tests));
+
+      if (version.history) {
+        version.history.forEach((h) => {
+          if (h.event.endsWith("_approved")) {
+            const line = document.createElement("div");
+            line.className = "traceability";
+            line.textContent = `✅ ${h.event.replace("_approved", "")} approved by ${h.by || "unknown"}`;
+            versionDiv.appendChild(line);
+          }
+        });
+      }
+
+      featureDiv.appendChild(versionDiv);
+      versionRendered++;
+    }
+
+    if (versionRendered > 0) {
+      container.appendChild(featureDiv);
+      rendered++;
+    }
+  }
+
+  if (rendered === 0) {
+    container.textContent = "No features match the current filters.";
+  }
+}
+
+async function renderTeam() {
+  const team = await fetchJson("/api/team");
+  const container = document.getElementById("team-list");
+
+  if (!team.members || team.members.length === 0) {
+    container.textContent = "No team members.";
+    return;
+  }
+
+  container.innerHTML = "";
+  team.members.forEach((m) => {
+    const div = document.createElement("div");
+    div.className = "member";
+    div.textContent = `${m.username} — ${m.role}`;
+    container.appendChild(div);
+  });
+}
+
+async function renderAudit() {
+  const log = await fetchJson("/api/audit-log");
+  const container = document.getElementById("audit-list");
+
+  if (!log.events || log.events.length === 0) {
+    container.textContent = "No activity yet.";
+    return;
+  }
+
+  container.innerHTML = "";
+  log.events.slice(-20).reverse().forEach((e) => {
+    const div = document.createElement("div");
+    div.className = "audit-event";
+    div.textContent = `${e.timestamp} — ${e.event}`;
+    container.appendChild(div);
+  });
+}
+
+function renderExternalSystems(detected) {
+  if (!detected) return "";
+
+  const parts = [];
+
+  if (detected.openspec?.detected) {
+    parts.push(`
+      <li>
+        <strong>OpenSpec</strong> — ${detected.openspec.specs || 0} specs,
+        ${detected.openspec.changes || 0} active changes,
+        ${detected.openspec.archived || 0} archived
+      </li>
+    `);
+  }
+
+  if (detected.speckit?.detected) {
+    parts.push(`
+      <li>
+        <strong>Spec-Kit</strong> — ${detected.speckit.specs || 0} specs,
+        constitution: ${detected.speckit.hasConstitution ? "found" : "missing"}
+      </li>
+    `);
+  }
+
+  if (parts.length === 0) return "";
+
+  return `
+    <div style="margin-top: 12px;">
+      <strong>🔎 Detected External Spec Systems</strong>
+      <ul>${parts.join("")}</ul>
+    </div>
+  `;
+}
+
+function renderMigrated(migrated) {
+  if (!migrated || migrated.length === 0) return "";
+
+  const items = migrated.map((m) => {
+    const source = m.from === "openspec" ? "OpenSpec" : m.from === "speckit" ? "Spec-Kit" : m.from;
+    return `<li><strong>${m.feature}</strong> — from ${source} (${m.source})</li>`;
+  });
+
+  return `
+    <div style="margin-top: 12px;">
+      <strong>📦 Migrated Features</strong>
+      <ul>${items.join("")}</ul>
+    </div>
+  `;
+}
+
+function renderSkipped(skipped) {
+  if (!skipped || skipped.length === 0) return "";
+
+  const items = skipped.map((s) => {
+    const system = s.system === "openspec" ? "OpenSpec" : s.system === "speckit" ? "Spec-Kit" : s.system;
+    const reason = s.reason ? ` — ${s.reason}` : "";
+    return `<li><strong>${system}</strong>${reason}</li>`;
+  });
+
+  return `
+    <div style="margin-top: 12px;">
+      <strong>⏭️ Skipped Migrations</strong>
+      <ul>${items.join("")}</ul>
+    </div>
+  `;
+}
+
+function renderOnboarding(onboarding) {
+  const div = document.createElement("div");
+  div.className = "onboarding";
+
+  if (!onboarding) {
+    div.innerHTML = `
+      <h2>🟢 Greenfield Project</h2>
+      <div>Fully SpecDrive-native. No onboarding needed.</div>
+    `;
+    return div;
+  }
+
+  const isPartial = onboarding.missing && onboarding.missing.length > 0;
+  const isDeferred = onboarding.deferred && onboarding.deferred.length > 0;
+
+  div.innerHTML = `
+    <h2>${isPartial ? "🟡 Brownfield Project — Partial Onboarding" : "🟢 Brownfield Project — Onboarded"}</h2>
+    <div>Onboarded: ${new Date(onboarding.date).toLocaleDateString()}</div>
+
+    ${renderExternalSystems(onboarding.detectedSystems)}
+
+    ${
+      onboarding.missing && onboarding.missing.length
+        ? `
+      <div style="margin-top: 12px;">
+        <strong>❌ Missing</strong>
+        <ul>${onboarding.missing.map((m) => `<li>${m}</li>`).join("")}</ul>
+      </div>
+    `
+        : ""
+    }
+
+    ${
+      isDeferred
+        ? `
+      <div style="margin-top: 12px;">
+        <strong>⚠️ Deferred</strong>
+        <ul>${onboarding.deferred.map((m) => `<li>${m}</li>`).join("")}</ul>
+      </div>
+    `
+        : ""
+    }
+
+    ${renderMigrated(onboarding.migrated)}
+    ${renderSkipped(onboarding.skipped)}
+
+    <div style="margin-top: 12px;">
+      <strong>📊 Coverage</strong>
+      <ul>
+        <li>Retroactive features: ${onboarding.retroactiveFeatures?.length || 0}</li>
+        <li>Verified features: ${onboarding.verifiedFeatures?.length || 0}</li>
+      </ul>
+    </div>
+
+    ${
+      onboarding.notes
+        ? `<div style="margin-top: 12px;"><em>${onboarding.notes}</em></div>`
+        : ""
+    }
+  `;
+
+  return div;
+}
+
+async function main() {
+  const onboarding = await fetchJson("/api/onboarding");
+  const onboardingContainer = document.getElementById("onboarding-panel");
+
+  if (onboardingContainer) {
+    onboardingContainer.innerHTML = "";
+    onboardingContainer.appendChild(renderOnboarding(onboarding));
+  }
+
+  // Attach filter listeners
+  [
+    "filter-search",
+    "filter-phase",
+    "filter-verification",
+    "filter-tests",
+    "filter-current-version"
+  ].forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) {
+      el.addEventListener("input", renderFeatures);
+      el.addEventListener("change", renderFeatures);
+    }
+  });
+
+  await renderFeatures();
+  await renderTeam();
+  await renderAudit();
+}
+
+main();

package/dashboard/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>SpecDrive Dashboard</title>
+  <link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+  <header>
+    <h1>SpecDrive Dashboard</h1>
+  </header>
+
+  <main>
+    <section id="onboarding">
+      <div id="onboarding-panel">Loading...</div>
+    </section>
+
+    <section id="features">
+      <h2>Features</h2>
+
+      <div id="feature-filters" style="margin-bottom: 16px;">
+        <input
+          id="filter-search"
+          type="text"
+          placeholder="Search features..."
+          style="padding: 6px 10px; font-size: 13px; margin-right: 8px; border: 1px solid #ddd; border-radius: 4px;"
+        />
+
+        <select id="filter-phase" style="padding: 6px 10px; font-size: 13px; margin-right: 8px; border: 1px solid #ddd; border-radius: 4px;">
+          <option value="">All phases</option>
+          <option value="backlog">backlog</option>
+          <option value="ongoing">ongoing</option>
+          <option value="completed">completed</option>
+          <option value="blocked">blocked</option>
+        </select>
+
+        <select id="filter-verification" style="padding: 6px 10px; font-size: 13px; margin-right: 8px; border: 1px solid #ddd; border-radius: 4px;">
+          <option value="">All verification</option>
+          <option value="pass">pass</option>
+          <option value="warn">warn</option>
+          <option value="fail">fail</option>
+          <option value="not_run">not run</option>
+        </select>
+
+        <select id="filter-tests" style="padding: 6px 10px; font-size: 13px; margin-right: 8px; border: 1px solid #ddd; border-radius: 4px;">
+          <option value="">All test coverage</option>
+          <option value="complete">complete (100%)</option>
+          <option value="partial">partial</option>
+          <option value="not_run">not run</option>
+        </select>
+
+        <label style="font-size: 13px; margin-right: 8px;">
+          <input id="filter-current-version" type="checkbox" />
+          Current version only
+        </label>
+      </div>
+
+      <div id="feature-list">Loading...</div>
+    </section>
+
+    <section id="team">
+      <h2>Team</h2>
+      <div id="team-list">Loading...</div>
+    </section>
+
+    <section id="audit">
+      <h2>Recent Activity</h2>
+      <div id="audit-list">Loading...</div>
+    </section>
+  </main>
+
+  <script src="/app.js"></script>
+</body>
+</html>

package/dashboard/server.js

@@ -0,0 +1,166 @@
+#!/usr/bin/env node
+
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
+
+const projectRoot = process.cwd();
+const sdriveRoot = path.join(projectRoot, ".sdrive");
+
+function loadJson(filePath, fallback = null) {
+  if (!fs.existsSync(filePath)) return fallback;
+  try {
+    return JSON.parse(fs.readFileSync(filePath, "utf8"));
+  } catch (error) {
+    return fallback;
+  }
+}
+
+function apiWorkflowState() {
+  return loadJson(path.join(sdriveRoot, "workflow-state.json"), { features: [] });
+}
+
+function apiAuditLog() {
+  return loadJson(path.join(sdriveRoot, "audit-log.json"), { events: [] });
+}
+
+function apiTeam() {
+  return loadJson(path.join(sdriveRoot, "team.json"), { members: [] });
+}
+
+function apiTraceability(feature, version) {
+  const tracePath = path.join(sdriveRoot, "governance", feature, version, "traceability.json");
+  return loadJson(tracePath, { rows: [] });
+}
+
+function apiVerification(feature, version) {
+  const verificationPath = path.join(sdriveRoot, "governance", feature, version, "verification.json");
+  return loadJson(verificationPath, { status: "not_run", summary: {}, items: {} });
+}
+
+function apiTestReport(feature, version) {
+  const reportDir = path.join(sdriveRoot, "reports", "tests");
+
+  if (!fs.existsSync(reportDir)) {
+    return { status: "not_run", summary: {}, tests: [] };
+  }
+
+  const files = fs.readdirSync(reportDir)
+    .filter((f) => f.startsWith(`test-report-${feature}-${version}-`))
+    .sort()
+    .reverse();
+
+  if (files.length === 0) {
+    return { status: "not_run", summary: {}, tests: [] };
+  }
+
+  const latest = path.join(reportDir, files[0]);
+  const content = fs.readFileSync(latest, "utf8");
+
+  const totalMatch = content.match(/Total ACs:\*\*\s*(\d+)/);
+  const testedMatch = content.match(/Tested ACs:\*\*\s*(\d+)/);
+  const coverageMatch = content.match(/Coverage:\*\*\s*(\d+)/);
+  const passedMatch = content.match(/Tests Passed:\*\*\s*(\d+)\/(\d+)/);
+
+  return {
+    status:
+      testedMatch && totalMatch && testedMatch[1] === totalMatch[1]
+        ? "complete"
+        : "partial",
+    file: files[0],
+    summary: {
+      totalACs: totalMatch ? parseInt(totalMatch[1]) : 0,
+      testedACs: testedMatch ? parseInt(testedMatch[1]) : 0,
+      coverage: coverageMatch ? parseInt(coverageMatch[1]) : 0,
+      passed: passedMatch ? parseInt(passedMatch[1]) : 0,
+      total: passedMatch ? parseInt(passedMatch[2]) : 0
+    }
+  };
+}
+
+function parseFeatureVersion(url) {
+  const parts = url.split("/").filter(Boolean);
+  return {
+    feature: parts[parts.length - 2],
+    version: parts[parts.length - 1]
+  };
+}
+
+function serveStatic(res, filePath, contentType) {
+  if (!fs.existsSync(filePath)) {
+    res.writeHead(404);
+    res.end("Not found");
+    return;
+  }
+
+  res.writeHead(200, { "Content-Type": contentType });
+  res.end(fs.readFileSync(filePath));
+}
+
+function apiOnboarding() {
+  const state = loadJson(path.join(sdriveRoot, "workflow-state.json"), { features: [] });
+  return state.onboarding || null;
+}
+
+const server = http.createServer((req, res) => {
+  const url = req.url;
+
+  if (url.startsWith("/api/")) {
+    res.writeHead(200, { "Content-Type": "application/json" });
+
+    if (url === "/api/workflow-state") {
+      return res.end(JSON.stringify(apiWorkflowState()));
+    }
+
+    if (url === "/api/audit-log") {
+      return res.end(JSON.stringify(apiAuditLog()));
+    }
+
+    if (url === "/api/team") {
+      return res.end(JSON.stringify(apiTeam()));
+    }
+
+    if (url.startsWith("/api/traceability/")) {
+      const { feature, version } = parseFeatureVersion(url);
+      return res.end(JSON.stringify(apiTraceability(feature, version)));
+    }
+
+    if (url.startsWith("/api/verification/")) {
+      const { feature, version } = parseFeatureVersion(url);
+      return res.end(JSON.stringify(apiVerification(feature, version)));
+    }
+
+    if (url.startsWith("/api/tests/")) {
+      const { feature, version } = parseFeatureVersion(url);
+      return res.end(JSON.stringify(apiTestReport(feature, version)));
+    }
+
+    if (url === "/api/onboarding") {
+      return res.end(JSON.stringify(apiOnboarding()));
+    }
+
+    res.writeHead(404);
+    return res.end(JSON.stringify({ error: "Not found" }));
+  }
+
+  if (url === "/" || url === "/index.html") {
+    return serveStatic(res, path.join(__dirname, "index.html"), "text/html");
+  }
+
+  if (url === "/style.css") {
+    return serveStatic(res, path.join(__dirname, "style.css"), "text/css");
+  }
+
+  if (url === "/app.js") {
+    return serveStatic(res, path.join(__dirname, "app.js"), "application/javascript");
+  }
+
+  res.writeHead(404);
+  res.end("Not found");
+});
+
+const PORT = 4747;
+
+server.listen(PORT, () => {
+  console.log(`\n🚀 SpecDrive Dashboard running at http://localhost:${PORT}\n`);
+});