@tenonhq/dovetail-dashboard 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "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);
@@ -1082,3 +1123,138 @@
   background: #14384a;
   color: #b6e8ff;
 }
+
+/* ─── Topics cloud ─────────────────────────────────────────────────────────── */
+
+.cp-topics {
+  margin: 0 24px 12px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md, 8px);
+  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04));
+}
+
+.cp-topics-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  font-size: 13px;
+  color: var(--fg);
+}
+.cp-topics-summary::-webkit-details-marker { display: none; }
+.cp-topics-summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
+
+.cp-topics-caret {
+  display: inline-block;
+  transition: transform 0.15s ease;
+  color: var(--fg-muted);
+  font-size: 12px;
+  width: 12px;
+}
+.cp-topics:not([open]) .cp-topics-caret { transform: rotate(-90deg); }
+
+.cp-topics-title {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.cp-topics-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 20px;
+  padding: 0 6px;
+  background: var(--bg-muted, var(--surface));
+  color: var(--fg-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.cp-topics-clear {
+  margin-left: auto;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 3px 10px;
+  font-size: 11px;
+  color: var(--fg-muted);
+  cursor: pointer;
+}
+.cp-topics-clear:hover {
+  background: var(--bg-muted, var(--surface));
+  color: var(--fg);
+}
+
+.cp-topics-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  padding: 10px 14px 14px;
+  border-top: 1px solid var(--border-subtle, var(--border));
+  line-height: 1.3;
+}
+
+.cp-topics-empty {
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-style: italic;
+  padding: 2px 0;
+}
+
+.cp-topic-chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 4px 10px;
+  background: var(--surface);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-family: inherit;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+.cp-topic-chip:hover {
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  border-color: var(--accent);
+}
+.cp-topic-chip:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+.cp-topic-chip--active {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+}
+.cp-topic-chip--active:hover {
+  background: var(--accent-hover, var(--accent));
+  color: var(--accent-fg);
+}
+
+.cp-topic-chip-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  padding: 0 5px;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.6;
+  letter-spacing: 0;
+}
+.cp-topic-chip--active .cp-topic-chip-count {
+  background: color-mix(in srgb, var(--accent-fg) 20%, transparent);
+}

package/public/claude-plans.html

@@ -36,6 +36,27 @@
     </div>
   </header>
 
+  <details class="cp-topics" id="cp-topics" open>
+    <summary class="cp-topics-summary">
+      <span class="cp-topics-caret" aria-hidden="true">▾</span>
+      <span class="cp-topics-title">Topics</span>
+      <span class="cp-topics-count" id="cp-topics-count">0</span>
+      <button
+        type="button"
+        class="cp-topics-clear"
+        id="cp-topics-clear"
+        hidden
+        title="Clear topic filter"
+        aria-label="Clear topic filter"
+      >Clear filter</button>
+    </summary>
+    <div class="cp-topics-cloud" id="cp-topics-cloud" role="group" aria-label="Plan topics">
+      <span class="cp-topics-empty" id="cp-topics-empty">
+        No topics yet. Push a plan and topics will appear here.
+      </span>
+    </div>
+  </details>
+
   <main class="cp-layout">
     <aside class="cp-rail" id="cp-rail">
       <div class="cp-rail-header">
@@ -83,11 +104,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,9 +33,11 @@
   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
+    query: "",              // lowercased search query; "" means show all
+    topicFilter: null       // active topic label, null = no topic filter
   };
 
   var els = {
@@ -53,11 +55,28 @@
     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"),
-    tabs: document.querySelectorAll(".cp-tab")
+    promptsPanel: document.getElementById("cp-tab-prompts"),
+    tabs: document.querySelectorAll(".cp-tab"),
+    topics: document.getElementById("cp-topics"),
+    topicsCloud: document.getElementById("cp-topics-cloud"),
+    topicsCount: document.getElementById("cp-topics-count"),
+    topicsEmpty: document.getElementById("cp-topics-empty"),
+    topicsClear: document.getElementById("cp-topics-clear")
   };
 
+  function planMatchesTopic(plan, topic) {
+    if (!topic) return true;
+    var cats = plan.categories;
+    if (!cats || !cats.length) return false;
+    for (var i = 0; i < cats.length; i++) {
+      if (cats[i] === topic) return true;
+    }
+    return false;
+  }
+
   // True when plan matches q across title, slug, status, plan markdown/html,
   // pr title, and every artifact title + content. Lets you find a plan by any
   // snippet that appears anywhere in or attached to it.
@@ -93,9 +112,121 @@
 
   function sortedPlans() {
     var q = state.query;
+    var topic = state.topicFilter;
     var all = allPlansSorted();
-    if (!q) return all;
-    return all.filter(function (p) { return planMatchesQuery(p, q); });
+    if (!q && !topic) return all;
+    return all.filter(function (p) {
+      return planMatchesQuery(p, q) && planMatchesTopic(p, topic);
+    });
+  }
+
+  /* ─── Topics aggregation + render ──────────────────────────────────────────
+   * Counts topic occurrences across all plans (not just filtered ones) so the
+   * cloud reflects the full corpus. Click a chip to filter the rail by that
+   * topic; click the active chip again to clear.
+   *
+   * Counts are computed client-side from plan.categories arrays — no new
+   * server endpoint or SSE event. The existing plan:upsert stream rerenders
+   * the cloud automatically because renderRail() now also calls renderTopics().
+   */
+  function aggregateTopics() {
+    var counts = new Map();
+    state.plans.forEach(function (plan) {
+      var cats = plan.categories;
+      if (!cats || !cats.length) return;
+      for (var i = 0; i < cats.length; i++) {
+        var label = cats[i];
+        counts.set(label, (counts.get(label) || 0) + 1);
+      }
+    });
+    var rows = [];
+    counts.forEach(function (count, label) {
+      rows.push({ label: label, count: count });
+    });
+    rows.sort(function (a, b) {
+      if (b.count !== a.count) return b.count - a.count;
+      return a.label.localeCompare(b.label);
+    });
+    return rows;
+  }
+
+  // sqrt compression keeps a 30-count topic from dwarfing a 2-count one.
+  function topicFontSize(count, max) {
+    if (max <= 1) return 14;
+    var ratio = Math.sqrt(count) / Math.sqrt(max);
+    return Math.round(12 + ratio * 12);
+  }
+
+  function renderTopics() {
+    if (!els.topicsCloud) return;
+    var rows = aggregateTopics();
+    if (els.topicsCount) els.topicsCount.textContent = String(rows.length);
+    if (els.topicsClear) els.topicsClear.hidden = !state.topicFilter;
+    if (rows.length === 0) {
+      els.topicsCloud.innerHTML = "";
+      if (els.topicsEmpty) {
+        els.topicsCloud.appendChild(els.topicsEmpty);
+        els.topicsEmpty.style.display = "inline";
+      }
+      return;
+    }
+    if (els.topicsEmpty) els.topicsEmpty.style.display = "none";
+    els.topicsCloud.innerHTML = "";
+    var max = rows[0].count;
+    rows.forEach(function (row) {
+      var chip = document.createElement("button");
+      chip.type = "button";
+      var isActive = state.topicFilter === row.label;
+      chip.className = "cp-topic-chip" + (isActive ? " cp-topic-chip--active" : "");
+      chip.style.fontSize = topicFontSize(row.count, max) + "px";
+      chip.setAttribute("aria-pressed", isActive ? "true" : "false");
+      chip.title = row.count + " plan" + (row.count === 1 ? "" : "s");
+      var labelEl = document.createElement("span");
+      labelEl.className = "cp-topic-chip-label";
+      labelEl.textContent = row.label;
+      var countEl = document.createElement("span");
+      countEl.className = "cp-topic-chip-count";
+      countEl.textContent = String(row.count);
+      chip.appendChild(labelEl);
+      chip.appendChild(countEl);
+      chip.addEventListener("click", function () {
+        applyTopicFilter(state.topicFilter === row.label ? null : row.label);
+      });
+      els.topicsCloud.appendChild(chip);
+    });
+  }
+
+  function applyTopicFilter(label) {
+    state.topicFilter = label;
+    renderTopics();
+    renderRail();
+    if (label) {
+      var visible = sortedPlans();
+      var stillVisible = state.selectedSlug &&
+        visible.some(function (p) { return p.slug === state.selectedSlug; });
+      if (!stillVisible && visible.length > 0) selectPlan(visible[0].slug);
+    }
+  }
+
+  function setupTopics() {
+    if (els.topicsClear) {
+      els.topicsClear.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        applyTopicFilter(null);
+      });
+    }
+    if (els.topics) {
+      try {
+        var stored = localStorage.getItem("cp-topics-collapsed");
+        if (stored === "1") els.topics.open = false;
+      } catch (_) {}
+      els.topics.addEventListener("toggle", function () {
+        try {
+          localStorage.setItem("cp-topics-collapsed", els.topics.open ? "0" : "1");
+        } catch (_) {}
+      });
+    }
   }
 
   function sortedArtifacts(slug) {
@@ -106,6 +237,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 +380,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 +390,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();
@@ -280,9 +424,10 @@
   /* ─────────────────────────────────────────────────────────────────────────── */
 
   function renderRail() {
+    renderTopics();
     var plans = sortedPlans();
     var totalPlans = state.plans.size;
-    var isFiltering = !!state.query;
+    var isFiltering = !!state.query || !!state.topicFilter;
     els.count.textContent = isFiltering
       ? plans.length + " / " + totalPlans
       : String(totalPlans);
@@ -291,7 +436,12 @@
       if (isFiltering && totalPlans > 0) {
         els.railEmpty.style.display = "none";
         els.railNoMatch.hidden = false;
-        if (els.railNoMatchQ) els.railNoMatchQ.textContent = '"' + state.query + '"';
+        if (els.railNoMatchQ) {
+          var pieces = [];
+          if (state.query) pieces.push('"' + state.query + '"');
+          if (state.topicFilter) pieces.push("topic “" + state.topicFilter + "”");
+          els.railNoMatchQ.textContent = pieces.join(" + ");
+        }
       } else {
         els.railEmpty.style.display = "block";
         els.railNoMatch.hidden = true;
@@ -363,6 +513,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 +522,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 +561,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 +592,7 @@
     }
 
     addPlanSectionCopyBtns();
-    addTabsCopyAll(plan, artifacts);
+    addTabsCopyAll(plan, artifacts, prompts);
 
     els.artifactsPanel.innerHTML = "";
     if (artifacts.length === 0) {
@@ -458,6 +632,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 +704,7 @@
     });
     els.planPanel.hidden = tab !== "plan";
     els.artifactsPanel.hidden = tab !== "artifacts";
+    if (els.promptsPanel) els.promptsPanel.hidden = tab !== "prompts";
   }
 
   function selectPlan(slug) {
@@ -551,6 +789,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 +814,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 +842,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 +853,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 +885,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);
@@ -664,6 +934,7 @@
   document.addEventListener("DOMContentLoaded", function () {
     setupTheme();
     setupSearch();
+    setupTopics();
     setActiveTab("plan");
     loadInitial().then(startStream);
   });

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