@tenonhq/dovetail-dashboard 0.0.20 → 0.0.22

package/package.json

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

package/public/claude-plans.css

@@ -311,6 +311,47 @@
   border-radius: var(--radius-pill);
   letter-spacing: 0.07em;
 }
+
+/* ── Prompt cards (Prompt tab) ──────────────────────────────────────────── */
+.cp-prompt-card .cp-prompt-score {
+  background: var(--accent-bg, var(--bg-muted));
+  color: var(--accent);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 11px;
+}
+.cp-prompt-source {
+  margin: 0 0 12px 0;
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+.cp-prompt-source summary {
+  cursor: pointer;
+  user-select: none;
+  padding: 4px 0;
+}
+.cp-prompt-source pre,
+.cp-prompt-body {
+  background: var(--bg-paper);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 0;
+}
+.cp-prompt-body code,
+.cp-prompt-source pre code {
+  background: none;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--fg);
+}
 .cp-mermaid {
   background: var(--bg-paper);
   border: 1px solid var(--border);

package/public/claude-plans.html

@@ -83,11 +83,15 @@
         </header>
         <nav class="cp-tabs">
           <button class="cp-tab active" data-tab="plan">Plan</button>
+          <button class="cp-tab" data-tab="prompts">
+            Prompt <span class="cp-tab-count" id="cp-prompt-count">0</span>
+          </button>
           <button class="cp-tab" data-tab="artifacts">
             Artifacts <span class="cp-tab-count" id="cp-artifact-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>
       </article>
     </section>

package/public/claude-plans.js

@@ -33,6 +33,7 @@
   var state = {
     plans: new Map(),       // slug -> plan
     artifacts: new Map(),   // slug -> Map<artifactSlug, artifact>
+    prompts: new Map(),     // slug -> Map<promptSlug, prompt>
     selectedSlug: null,
     activeTab: "plan",
     query: ""               // lowercased search query; "" means show all
@@ -53,8 +54,10 @@
     detailStatus: document.getElementById("cp-detail-status"),
     detailStamp: document.getElementById("cp-detail-stamp"),
     artifactCount: document.getElementById("cp-artifact-count"),
+    promptCount: document.getElementById("cp-prompt-count"),
     planPanel: document.getElementById("cp-tab-plan"),
     artifactsPanel: document.getElementById("cp-tab-artifacts"),
+    promptsPanel: document.getElementById("cp-tab-prompts"),
     tabs: document.querySelectorAll(".cp-tab")
   };
 
@@ -106,6 +109,14 @@
     });
   }
 
+  function sortedPrompts(slug) {
+    var map = state.prompts.get(slug);
+    if (!map) return [];
+    return Array.from(map.values()).sort(function (a, b) {
+      return (a.created_at || "").localeCompare(b.created_at || "");
+    });
+  }
+
   function fmtTime(iso) {
     if (!iso) return "";
     var d = new Date(iso);
@@ -241,7 +252,7 @@
     return btn;
   }
 
-  function addTabsCopyAll(plan, artifacts) {
+  function addTabsCopyAll(plan, artifacts, prompts) {
     var existing = document.getElementById("cp-tabs-copy-all");
     if (existing) existing.remove();
 
@@ -251,6 +262,11 @@
           return "# " + a.title + "\n\n" + a.content;
         }).join("\n\n---\n\n");
       }
+      if (state.activeTab === "prompts") {
+        return prompts.map(function (p) {
+          return "# " + p.title + "\n\n" + p.content;
+        }).join("\n\n---\n\n");
+      }
       return plan.content_md && plan.content_md.trim()
         ? plan.content_md
         : els.planPanel.innerText.trim();
@@ -363,6 +379,7 @@
     }
     var plan = state.plans.get(state.selectedSlug);
     var artifacts = sortedArtifacts(state.selectedSlug);
+    var prompts = sortedPrompts(state.selectedSlug);
 
     els.detailEmpty.style.display = "none";
     els.detailBody.hidden = false;
@@ -371,6 +388,7 @@
     els.detailStatus.className = "cp-status-pill cp-status-" + plan.status;
     els.detailStamp.textContent = "updated " + fmtTime(plan.updated_at);
     els.artifactCount.textContent = String(artifacts.length);
+    if (els.promptCount) els.promptCount.textContent = String(prompts.length);
 
     var existingPrBadge = document.getElementById("cp-pr-badge");
     if (existingPrBadge) existingPrBadge.remove();
@@ -409,6 +427,28 @@
     });
     els.detailStatus.insertAdjacentElement("afterend", resumeBtn);
 
+    var existingPromptBtn = document.getElementById("cp-gen-prompt-btn");
+    if (existingPromptBtn) existingPromptBtn.remove();
+    var genPromptBtn = document.createElement("button");
+    genPromptBtn.id = "cp-gen-prompt-btn";
+    genPromptBtn.className = "cp-resume-btn";
+    genPromptBtn.textContent = "Generate Prompt";
+    genPromptBtn.title = "Copy /improve-prompt --from-plan <slug> to clipboard";
+    genPromptBtn.addEventListener("click", function () {
+      var cmd = "/improve-prompt --from-plan " + plan.slug;
+      var finish = function () { showToast("Copied — paste into Claude Code."); };
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(cmd).then(finish).catch(function () {
+          fallbackCopy(cmd);
+          finish();
+        });
+      } else {
+        fallbackCopy(cmd);
+        finish();
+      }
+    });
+    resumeBtn.insertAdjacentElement("afterend", genPromptBtn);
+
     if (plan.content_html) {
       els.planPanel.innerHTML = window.DOMPurify
         ? window.DOMPurify.sanitize(plan.content_html)
@@ -418,7 +458,7 @@
     }
 
     addPlanSectionCopyBtns();
-    addTabsCopyAll(plan, artifacts);
+    addTabsCopyAll(plan, artifacts, prompts);
 
     els.artifactsPanel.innerHTML = "";
     if (artifacts.length === 0) {
@@ -458,6 +498,69 @@
         els.artifactsPanel.appendChild(card);
       });
     }
+
+    els.promptsPanel.innerHTML = "";
+    if (prompts.length === 0) {
+      var emptyPrompts = document.createElement("div");
+      emptyPrompts.className = "cp-detail-empty";
+      emptyPrompts.style.padding = "40px 0";
+      emptyPrompts.textContent = 'No prompts yet. Click "Generate Prompt" above to seed one, or push from /improve-prompt --push.';
+      els.promptsPanel.appendChild(emptyPrompts);
+    } else {
+      prompts.forEach(function (prompt) {
+        var card = document.createElement("div");
+        card.className = "cp-artifact-card cp-prompt-card";
+        var head = document.createElement("div");
+        head.className = "cp-artifact-head";
+        var title = document.createElement("span");
+        title.className = "cp-artifact-title";
+        title.textContent = prompt.title;
+        head.appendChild(title);
+
+        if (typeof prompt.score_before === "number" && typeof prompt.score_after === "number") {
+          var scorePill = document.createElement("span");
+          scorePill.className = "cp-kind-pill cp-prompt-score";
+          scorePill.textContent = prompt.score_before + " → " + prompt.score_after + "%";
+          head.appendChild(scorePill);
+        } else if (typeof prompt.score_after === "number") {
+          var scorePillOnly = document.createElement("span");
+          scorePillOnly.className = "cp-kind-pill cp-prompt-score";
+          scorePillOnly.textContent = prompt.score_after + "%";
+          head.appendChild(scorePillOnly);
+        }
+
+        var copyGroup = document.createElement("div");
+        copyGroup.className = "cp-copy-btn-group cp-copy-btn-group--artifact";
+        copyGroup.appendChild(makeCopyBtn("Copy", (function (content) {
+          return function () { return content; };
+        })(prompt.content)));
+        head.appendChild(copyGroup);
+
+        card.appendChild(head);
+
+        if (prompt.source_draft) {
+          var details = document.createElement("details");
+          details.className = "cp-prompt-source";
+          var summary = document.createElement("summary");
+          summary.textContent = "Original draft";
+          details.appendChild(summary);
+          var pre = document.createElement("pre");
+          var code = document.createElement("code");
+          code.textContent = prompt.source_draft;
+          pre.appendChild(code);
+          details.appendChild(pre);
+          card.appendChild(details);
+        }
+
+        var body = document.createElement("pre");
+        body.className = "cp-prompt-body";
+        var bodyCode = document.createElement("code");
+        bodyCode.textContent = prompt.content;
+        body.appendChild(bodyCode);
+        card.appendChild(body);
+        els.promptsPanel.appendChild(card);
+      });
+    }
   }
 
   function setActiveTab(tab) {
@@ -467,6 +570,7 @@
     });
     els.planPanel.hidden = tab !== "plan";
     els.artifactsPanel.hidden = tab !== "artifacts";
+    if (els.promptsPanel) els.promptsPanel.hidden = tab !== "prompts";
   }
 
   function selectPlan(slug) {
@@ -551,6 +655,7 @@
   function removePlan(slug) {
     state.plans.delete(slug);
     state.artifacts.delete(slug);
+    state.prompts.delete(slug);
     if (state.selectedSlug === slug) state.selectedSlug = null;
     renderRail();
     renderDetail();
@@ -575,6 +680,23 @@
     if (state.selectedSlug === planSlug) renderDetail();
   }
 
+  function upsertPrompt(prompt) {
+    var bucket = state.prompts.get(prompt.plan_slug);
+    if (!bucket) {
+      bucket = new Map();
+      state.prompts.set(prompt.plan_slug, bucket);
+    }
+    bucket.set(prompt.slug, prompt);
+    if (state.selectedSlug === prompt.plan_slug) renderDetail();
+  }
+
+  function removePrompt(planSlug, slug) {
+    var bucket = state.prompts.get(planSlug);
+    if (!bucket) return;
+    bucket.delete(slug);
+    if (state.selectedSlug === planSlug) renderDetail();
+  }
+
   async function loadInitial() {
     try {
       var res = await fetch("/api/claude-plans");
@@ -586,7 +708,7 @@
     } catch (err) {
       console.warn("[claude-plans] failed to load initial state:", err);
     }
-    // Preload artifacts for visible plans
+    // Preload artifacts + prompts for visible plans
     var slugs = Array.from(state.plans.keys());
     await Promise.all(slugs.map(function (slug) {
       return fetch("/api/claude-plans/" + encodeURIComponent(slug))
@@ -597,6 +719,11 @@
             data.artifacts.forEach(function (a) { bucket.set(a.slug, a); });
             state.artifacts.set(slug, bucket);
           }
+          if (data && Array.isArray(data.prompts)) {
+            var pBucket = new Map();
+            data.prompts.forEach(function (p) { pBucket.set(p.slug, p); });
+            state.prompts.set(slug, pBucket);
+          }
         })
         .catch(function () { /* ignore */ });
     }));
@@ -624,6 +751,15 @@
         removeArtifact(payload.plan_slug, payload.slug);
       } catch (_) {}
     });
+    es.addEventListener("prompt:upsert", function (e) {
+      try { upsertPrompt(JSON.parse(e.data).prompt); } catch (_) {}
+    });
+    es.addEventListener("prompt:delete", function (e) {
+      try {
+        var payload = JSON.parse(e.data);
+        removePrompt(payload.plan_slug, payload.slug);
+      } catch (_) {}
+    });
     es.addEventListener("plan:focus", function (e) {
       try {
         var data = JSON.parse(e.data);

package/server.js

@@ -830,6 +830,10 @@ function artifactsDirFor(slug) {
   return path.join(CLAUDE_PLANS_DIR, slug, "artifacts");
 }
 
+function promptsDirFor(slug) {
+  return path.join(CLAUDE_PLANS_DIR, slug, "prompts");
+}
+
 function safeReadJson(filePath) {
   try {
     if (!fs.existsSync(filePath)) return null;
@@ -872,6 +876,25 @@ function listClaudeArtifacts(slug) {
   return artifacts;
 }
 
+function listClaudePrompts(slug) {
+  if (!isValidSlug(slug)) return [];
+  const baseDir = path.resolve(CLAUDE_PLANS_DIR);
+  const dir = path.resolve(promptsDirFor(slug));
+  if (!dir.startsWith(baseDir + path.sep)) return [];
+  if (!fs.existsSync(dir)) return [];
+  const entries = fs.readdirSync(dir);
+  const prompts = [];
+  for (let i = 0; i < entries.length; i++) {
+    if (!entries[i].endsWith(".json")) continue;
+    const p = safeReadJson(path.join(dir, entries[i]));
+    if (p) prompts.push(p);
+  }
+  prompts.sort(function (a, b) {
+    return (a.created_at || "").localeCompare(b.created_at || "");
+  });
+  return prompts;
+}
+
 // Parse a watcher path like "<root>/<slug>.json" or
 // "<root>/<slug>/artifacts/<artifact-slug>.json" into { kind, slug, artifactSlug }.
 function classifyPath(filePath) {
@@ -887,6 +910,9 @@ function classifyPath(filePath) {
   if (parts.length === 3 && parts[1] === "artifacts" && parts[2].endsWith(".json")) {
     return { kind: "artifact", slug: parts[0], artifactSlug: parts[2].slice(0, -5) };
   }
+  if (parts.length === 3 && parts[1] === "prompts" && parts[2].endsWith(".json")) {
+    return { kind: "prompt", slug: parts[0], promptSlug: parts[2].slice(0, -5) };
+  }
   return null;
 }
 
@@ -934,6 +960,18 @@ function handleWatcherChange(event, filePath) {
     }
     const artifact = safeReadJson(filePath);
     if (artifact) broadcastClaudePlanEvent("artifact:upsert", { artifact: artifact });
+    return;
+  }
+  if (info.kind === "prompt") {
+    if (event === "unlink") {
+      broadcastClaudePlanEvent("prompt:delete", {
+        plan_slug: info.slug,
+        slug: info.promptSlug
+      });
+      return;
+    }
+    const prompt = safeReadJson(filePath);
+    if (prompt) broadcastClaudePlanEvent("prompt:upsert", { prompt: prompt });
   }
 }
 
@@ -1003,7 +1041,11 @@ app.get("/api/claude-plans/:slug", function (req, res) {
     if (!isValidSlug(slug)) return res.status(400).json({ error: "invalid slug" });
     const plan = safeReadJson(planFilePath(slug));
     if (!plan) return res.status(404).json({ error: "plan not found" });
-    res.json({ plan: plan, artifacts: listClaudeArtifacts(slug) });
+    res.json({
+      plan: plan,
+      artifacts: listClaudeArtifacts(slug),
+      prompts: listClaudePrompts(slug)
+    });
   } catch (e) {
     res.status(500).json({ error: e.message });
   }