@tenonhq/dovetail-dashboard 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "Update Set Dashboard for Dovetail",
   "main": "server.js",
   "scripts": {

package/public/claude-plans.css

@@ -173,9 +173,16 @@
 }
 .cp-list-item:hover { background: var(--bg-subtle); }
 .cp-list-item.active {
+  /* Selected plan: filled raised surface + brand-emerald bar + bold.
+     --brand flips to a bright emerald (#32b57f) in dark mode, so the bar
+     stays legible without using the unreadable deep green on dark grounds. */
   background: var(--surface-raised);
-  border-left: 3px solid var(--accent);
+  border-left: 4px solid var(--brand);
+  padding-left: 12px;
+  font-weight: var(--weight-semibold);
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
 }
+.cp-list-item.active:hover { background: var(--surface-raised); }
 .cp-list-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
 .cp-list-title { font-weight: var(--weight-semibold); font-size: 13px; color: var(--fg); }
 .cp-list-meta { font-size: 11px; color: var(--fg-muted); display: flex; gap: 8px; }
@@ -278,7 +285,7 @@
   padding: 1px 6px;
   border-radius: var(--radius-xs);
   font-size: 13px;
-  color: var(--emerald-700);
+  color: var(--code-inline-fg);
 }
 .cp-tab-panel pre {
   background: var(--neutral-900);
@@ -292,7 +299,7 @@
 .cp-tab-panel th, .cp-tab-panel td { border: 1px solid var(--border); padding: 7px 11px; }
 .cp-tab-panel th { background: var(--bg-subtle); }
 .cp-tab-panel a { color: var(--brand); }
-.cp-tab-panel a:hover { color: var(--emerald-700); }
+.cp-tab-panel a:hover { color: var(--brand); }
 .cp-tab-panel blockquote {
   border-left: 3px solid var(--accent);
   padding-left: 12px;
@@ -635,7 +642,7 @@
   color: var(--fg-muted);
   text-align: center;
 }
-.cp-c-step-done .cp-c-step-label  { color: var(--emerald-700); }
+.cp-c-step-done .cp-c-step-label  { color: var(--brand); }
 .cp-c-step-active .cp-c-step-label { color: var(--fg); font-weight: var(--weight-bold); }
 .cp-c-step-error .cp-c-step-label  { color: var(--error-700); }
 .cp-c-step-note {
@@ -1526,3 +1533,48 @@
   margin-top: 10px;
   font-size: 13px;
 }
+
+/* ─── Version history (History tab) ─────────────────────────────────────────
+ * Snapshot rows with View (inline expand) + Restore. Uses semantic tokens so
+ * it tracks light/dark; --brand flips to bright emerald in dark mode. */
+.cp-versions { display: flex; flex-direction: column; gap: 8px; }
+.cp-version {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+}
+.cp-version--current {
+  border-left: 4px solid var(--brand);
+  background: var(--surface-raised);
+}
+.cp-version-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+}
+.cp-version-label { font-weight: var(--weight-semibold); }
+.cp-version-status { text-transform: none; }
+.cp-version-stamp { color: var(--fg-muted); font-size: 12px; }
+.cp-version-actions { margin-left: auto; display: flex; gap: 8px; }
+.cp-version-btn {
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--fg);
+  border-radius: var(--radius-sm);
+  padding: 4px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background var(--dur-1) var(--ease-out);
+}
+.cp-version-btn:hover { background: var(--bg-subtle); }
+.cp-version-btn:disabled { opacity: 0.6; cursor: default; }
+.cp-version-btn--primary {
+  border-color: var(--brand);
+  color: var(--brand);
+  font-weight: var(--weight-semibold);
+}
+.cp-version-body {
+  border-top: 1px solid var(--border);
+  padding: 14px;
+}

package/public/claude-plans.html

@@ -15,9 +15,9 @@
       } catch (e) {}
     })();
   </script>
-  <link rel="stylesheet" href="tokens.css" />
-  <link rel="stylesheet" href="styles.css" />
-  <link rel="stylesheet" href="claude-plans.css" />
+  <link rel="stylesheet" href="/tokens.css" />
+  <link rel="stylesheet" href="/styles.css" />
+  <link rel="stylesheet" href="/claude-plans.css" />
 </head>
 <body class="cp-body">
   <header>
@@ -127,11 +127,15 @@
           <button class="cp-tab" data-tab="questions">
             Q&amp;A <span class="cp-tab-count" id="cp-question-count">0</span>
           </button>
+          <button class="cp-tab" data-tab="versions">
+            History <span class="cp-tab-count" id="cp-version-count">0</span>
+          </button>
         </nav>
         <div class="cp-tab-panel" id="cp-tab-plan"></div>
         <div class="cp-tab-panel" id="cp-tab-prompts" hidden></div>
         <div class="cp-tab-panel" id="cp-tab-artifacts" hidden></div>
         <div class="cp-tab-panel" id="cp-tab-questions" hidden></div>
+        <div class="cp-tab-panel" id="cp-tab-versions" hidden></div>
       </article>
     </section>
   </main>
@@ -139,6 +143,6 @@
   <script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.5/dist/purify.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.6/dist/mermaid.min.js"></script>
-  <script src="claude-plans.js"></script>
+  <script src="/claude-plans.js"></script>
 </body>
 </html>

package/public/claude-plans.js

@@ -64,6 +64,8 @@
     promptsPanel: document.getElementById("cp-tab-prompts"),
     questionsPanel: document.getElementById("cp-tab-questions"),
     questionCount: document.getElementById("cp-question-count"),
+    versionsPanel: document.getElementById("cp-tab-versions"),
+    versionCount: document.getElementById("cp-version-count"),
     stageMap: document.getElementById("cp-stage-map"),
     tabs: document.querySelectorAll(".cp-tab"),
     topics: document.getElementById("cp-topics"),
@@ -630,6 +632,7 @@
     // v2 surfaces — Stage Map strip + Questions tab.
     renderStageMap(plan);
     renderQuestions(plan);
+    renderVersions(plan);
 
     addPlanSectionCopyBtns();
     addTabsCopyAll(plan, artifacts, prompts);
@@ -746,6 +749,7 @@
     els.artifactsPanel.hidden = tab !== "artifacts";
     if (els.promptsPanel) els.promptsPanel.hidden = tab !== "prompts";
     if (els.questionsPanel) els.questionsPanel.hidden = tab !== "questions";
+    if (els.versionsPanel) els.versionsPanel.hidden = tab !== "versions";
   }
 
   /* ─── v2 bidirectional pipeline (Phase E) ──────────────────────────────────
@@ -1007,6 +1011,142 @@
     });
   }
 
+  function renderVersions(plan) {
+    if (!els.versionsPanel) return;
+    var panel = els.versionsPanel;
+    panel.innerHTML = "";
+    fetch("/api/claude-plans/" + encodeURIComponent(plan.slug) + "/versions")
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        // Bail if the user switched plans while this fetch was in flight —
+        // otherwise a stale response would paint the wrong plan's history.
+        if (state.selectedSlug !== plan.slug) return;
+        var versions = (data && data.versions) || [];
+        if (els.versionCount) els.versionCount.textContent = String(versions.length);
+        if (versions.length === 0) {
+          var empty = document.createElement("div");
+          empty.className = "cp-detail-empty";
+          empty.style.padding = "40px 0";
+          empty.textContent =
+            "No prior versions yet. A snapshot is saved automatically whenever a " +
+            "push changes this plan's content.";
+          panel.appendChild(empty);
+          return;
+        }
+        var list = document.createElement("div");
+        list.className = "cp-versions";
+        // Synthetic "current" row at the top for orientation (not restorable).
+        list.appendChild(versionRow({
+          version: null,
+          saved_at: plan.updated_at,
+          title: plan.title,
+          status: plan.status
+        }, plan, true));
+        versions.forEach(function (v) {
+          list.appendChild(versionRow(v, plan, false));
+        });
+        panel.appendChild(list);
+      })
+      .catch(function () {
+        panel.innerHTML = "";
+        var err = document.createElement("div");
+        err.className = "cp-detail-empty";
+        err.style.padding = "40px 0";
+        err.textContent = "Could not load version history.";
+        panel.appendChild(err);
+      });
+  }
+
+  function versionRow(v, plan, isCurrent) {
+    var row = document.createElement("div");
+    row.className = "cp-version" + (isCurrent ? " cp-version--current" : "");
+
+    var head = document.createElement("div");
+    head.className = "cp-version-head";
+
+    var label = document.createElement("span");
+    label.className = "cp-version-label";
+    label.textContent = isCurrent ? "Current" : "v" + v.version;
+    head.appendChild(label);
+
+    if (v.status) {
+      var status = document.createElement("span");
+      status.className = "cp-status-pill cp-version-status";
+      status.textContent = v.status;
+      head.appendChild(status);
+    }
+
+    var stamp = document.createElement("span");
+    stamp.className = "cp-stamp cp-version-stamp";
+    stamp.textContent = v.saved_at ? fmtTime(v.saved_at) : "";
+    head.appendChild(stamp);
+
+    var actions = document.createElement("span");
+    actions.className = "cp-version-actions";
+    if (!isCurrent) {
+      var viewBtn = document.createElement("button");
+      viewBtn.type = "button";
+      viewBtn.className = "cp-version-btn";
+      viewBtn.textContent = "View";
+      var body = null;
+      viewBtn.addEventListener("click", function () {
+        if (body && body.parentNode) {
+          body.parentNode.removeChild(body);
+          body = null;
+          viewBtn.textContent = "View";
+          return;
+        }
+        viewBtn.textContent = "Hide";
+        body = document.createElement("div");
+        body.className = "cp-version-body cp-tab-panel";
+        row.appendChild(body);
+        fetch("/api/claude-plans/" + encodeURIComponent(plan.slug) + "/versions/" + v.version)
+          .then(function (r) { return r.json(); })
+          .then(function (snap) {
+            var p = snap && snap.plan;
+            if (!p) { body.textContent = "Snapshot unavailable."; return; }
+            if (p.content_html && window.DOMPurify) {
+              body.innerHTML = window.DOMPurify.sanitize(p.content_html);
+            } else {
+              renderMarkdown(p.content_md || "", body);
+            }
+          })
+          .catch(function () { body.textContent = "Could not load snapshot."; });
+      });
+      actions.appendChild(viewBtn);
+
+      var restoreBtn = document.createElement("button");
+      restoreBtn.type = "button";
+      restoreBtn.className = "cp-version-btn cp-version-btn--primary";
+      restoreBtn.textContent = "Restore";
+      restoreBtn.addEventListener("click", function () {
+        restoreVersion(plan.slug, v.version, restoreBtn);
+      });
+      actions.appendChild(restoreBtn);
+    }
+    head.appendChild(actions);
+    row.appendChild(head);
+    return row;
+  }
+
+  function restoreVersion(slug, version, btn) {
+    if (btn) { btn.disabled = true; btn.textContent = "Restoring…"; }
+    fetch("/api/claude-plans/" + encodeURIComponent(slug) + "/versions/" + version + "/restore", {
+      method: "POST"
+    })
+      .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, json: j }; }); })
+      .then(function (res) {
+        if (!res.ok) throw new Error((res.json && res.json.error) || "restore failed");
+        // The plan-file write fires an SSE plan:upsert → renderDetail →
+        // renderVersions refreshes the list automatically.
+        showToast("Restored v" + version + " as the current plan.");
+      })
+      .catch(function (e) {
+        if (btn) { btn.disabled = false; btn.textContent = "Restore"; }
+        showToast("Restore failed: " + e.message);
+      });
+  }
+
   function submitAnswer(slug, questionId, answer) {
     v2Post(slug, "answers", { question_id: questionId, answer: answer }).then(function () {
       showToast("Answer recorded.");

package/public/tokens.css

@@ -79,6 +79,7 @@
   --fg-subtle: var(--neutral-300);
   --fg-on-dark: var(--neutral-25);
   --fg-on-neon: var(--emerald-500);
+  --code-inline-fg: var(--brand);
 
   --accent: var(--neon-300);
   --accent-hover: var(--neon-500);
@@ -187,6 +188,7 @@
   --fg-subtle: #6f8378;
   --fg-on-dark: #ecf3ef;
   --fg-on-neon: var(--emerald-900);
+  --code-inline-fg: var(--neon-300);
 
   --accent: var(--neon-300);
   --accent-hover: var(--neon-500);

package/server.js

@@ -1308,6 +1308,53 @@ app.post("/api/claude-plans/:slug/dispatch", claudePlansLimiter, express.json(),
   }
 });
 
+// GET /api/claude-plans/:slug/versions — list saved version snapshots (newest-first).
+app.get("/api/claude-plans/:slug/versions", function (req, res) {
+  try {
+    var slug = req.params.slug;
+    if (!isValidSlug(slug)) return res.status(400).json({ error: "invalid slug" });
+    res.json({ slug: slug, versions: claudePlansLib.listVersions(slug) });
+  } catch (e) {
+    sendTypedError(res, e);
+  }
+});
+
+// GET /api/claude-plans/:slug/versions/:n — read one full version snapshot.
+app.get("/api/claude-plans/:slug/versions/:n", function (req, res) {
+  try {
+    var slug = req.params.slug;
+    if (!isValidSlug(slug)) return res.status(400).json({ error: "invalid slug" });
+    var n = parseInt(req.params.n, 10);
+    if (!(n > 0)) return res.status(400).json({ error: "invalid version" });
+    var version = claudePlansLib.getVersion(slug, n);
+    if (!version) return res.status(404).json({ error: "version not found" });
+    res.json(version);
+  } catch (e) {
+    sendTypedError(res, e);
+  }
+});
+
+// POST /api/claude-plans/:slug/versions/:n/restore — re-push a prior version as
+// the new current record. Non-destructive (pre-restore current is snapshotted).
+// The plan-file write triggers the chokidar watcher → plan:upsert SSE, so
+// connected dashboards refresh without a manual broadcast.
+app.post(
+  "/api/claude-plans/:slug/versions/:n/restore",
+  claudePlansLimiter,
+  function (req, res) {
+    try {
+      var slug = req.params.slug;
+      if (!isValidSlug(slug)) return res.status(400).json({ error: "invalid slug" });
+      var n = parseInt(req.params.n, 10);
+      if (!(n > 0)) return res.status(400).json({ error: "invalid version" });
+      var plan = claudePlansLib.restoreVersion(slug, n);
+      res.json({ plan: plan });
+    } catch (e) {
+      sendTypedError(res, e);
+    }
+  }
+);
+
 app.delete("/api/claude-plans/:slug", claudePlansLimiter, function (req, res) {
   try {
     var slug = req.params.slug;