@tenonhq/dovetail-dashboard 0.0.30 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "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(--brand);
 }
 .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 {
@@ -1312,6 +1319,49 @@
   background: color-mix(in srgb, var(--accent-fg) 20%, transparent);
 }
 
+/* Merged-PR filter toggle + per-row PR state dots */
+.cp-rail-filters {
+  padding: 8px 0 4px;
+}
+.cp-pr-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  background: var(--surface);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+.cp-pr-toggle:hover {
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  border-color: var(--accent);
+}
+.cp-pr-toggle--active {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+}
+
+.cp-pr-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  margin: 0 4px;
+  background: var(--fg-muted);
+}
+.cp-pr-dot--merged { background: var(--success-700); }
+.cp-pr-dot--open { background: var(--warning-700); }
+.cp-pr-dot--closed { background: var(--danger); }
+.cp-pr-dot--unknown { background: var(--fg-muted); }
+
 /* ===========================================================================
  * v2 — Stage Map, Questions tab, Dispatch dialog (Phase E)
  * Lightweight additions on top of the existing token system.
@@ -1483,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>
@@ -84,6 +84,15 @@
           hidden
         >×</button>
       </div>
+      <div class="cp-rail-filters">
+        <button
+          type="button"
+          class="cp-pr-toggle"
+          id="cp-merged-toggle"
+          aria-pressed="false"
+          title="Show only plans whose linked PR is merged"
+        >Merged PRs only</button>
+      </div>
       <div class="cp-rail-empty" id="cp-rail-empty">
         Waiting for plans. Run <code>push_plan</code> from a Claude Code
         session to populate this list.
@@ -118,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>
@@ -130,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

@@ -37,7 +37,9 @@
     selectedSlug: null,
     activeTab: "plan",
     query: "",              // lowercased search query; "" means show all
-    topicFilter: null       // active topic label, null = no topic filter
+    topicFilter: null,      // active topic label, null = no topic filter
+    prStatus: new Map(),    // pr_url -> { state, merged } (live from gh, lazy)
+    mergedOnly: false       // when true, show only plans with a merged PR
   };
 
   var els = {
@@ -62,15 +64,45 @@
     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"),
     topicsCloud: document.getElementById("cp-topics-cloud"),
     topicsCount: document.getElementById("cp-topics-count"),
     topicsEmpty: document.getElementById("cp-topics-empty"),
-    topicsClear: document.getElementById("cp-topics-clear")
+    topicsClear: document.getElementById("cp-topics-clear"),
+    mergedToggle: document.getElementById("cp-merged-toggle")
   };
 
+  // Merged === true only when gh resolved the plan's PR as MERGED.
+  function planPrMerged(plan) {
+    if (!plan.pr_url) return false;
+    var st = state.prStatus.get(plan.pr_url);
+    return !!(st && st.merged);
+  }
+
+  function planMatchesPr(plan) {
+    if (!state.mergedOnly) return true;
+    return planPrMerged(plan);
+  }
+
+  // A small colored dot in the rail row reflecting the PR's merge state.
+  // Rendered only when the plan links a PR and gh has returned a status.
+  function prDotMarkup(plan) {
+    if (!plan.pr_url) return "";
+    var st = state.prStatus.get(plan.pr_url);
+    if (!st) return "";
+    var cls = "cp-pr-dot";
+    if (st.merged) cls += " cp-pr-dot--merged";
+    else if (st.state === "OPEN") cls += " cp-pr-dot--open";
+    else if (st.state === "CLOSED") cls += " cp-pr-dot--closed";
+    else cls += " cp-pr-dot--unknown";
+    var label = st.merged ? "merged" : (st.state || "unknown").toLowerCase();
+    return '<span class="' + cls + '" title="PR ' + label + '"></span>';
+  }
+
   function planMatchesTopic(plan, topic) {
     if (!topic) return true;
     var cats = plan.categories;
@@ -118,9 +150,9 @@
     var q = state.query;
     var topic = state.topicFilter;
     var all = allPlansSorted();
-    if (!q && !topic) return all;
+    if (!q && !topic && !state.mergedOnly) return all;
     return all.filter(function (p) {
-      return planMatchesQuery(p, q) && planMatchesTopic(p, topic);
+      return planMatchesQuery(p, q) && planMatchesTopic(p, topic) && planMatchesPr(p);
     });
   }
 
@@ -431,7 +463,7 @@
     renderTopics();
     var plans = sortedPlans();
     var totalPlans = state.plans.size;
-    var isFiltering = !!state.query || !!state.topicFilter;
+    var isFiltering = !!state.query || !!state.topicFilter || state.mergedOnly;
     els.count.textContent = isFiltering
       ? plans.length + " / " + totalPlans
       : String(totalPlans);
@@ -444,6 +476,7 @@
           var pieces = [];
           if (state.query) pieces.push('"' + state.query + '"');
           if (state.topicFilter) pieces.push("topic “" + state.topicFilter + "”");
+          if (state.mergedOnly) pieces.push("merged PRs only");
           els.railNoMatchQ.textContent = pieces.join(" + ");
         }
       } else {
@@ -464,6 +497,7 @@
       li.innerHTML =
         '<div class="cp-list-row">' +
         '  <span class="cp-list-title"></span>' +
+        prDotMarkup(plan) +
         '  <span class="cp-status-pill cp-status-' + plan.status + '">' + plan.status + '</span>' +
         '</div>' +
         '<div class="cp-list-meta">' +
@@ -598,6 +632,7 @@
     // v2 surfaces — Stage Map strip + Questions tab.
     renderStageMap(plan);
     renderQuestions(plan);
+    renderVersions(plan);
 
     addPlanSectionCopyBtns();
     addTabsCopyAll(plan, artifacts, prompts);
@@ -714,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) ──────────────────────────────────
@@ -975,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.");
@@ -1154,6 +1326,41 @@
       });
   }
 
+  var prStatusDebounce = null;
+
+  // Resolve live PR merge state from the server (which shells out to gh) and
+  // rerender so dots + the merged filter reflect reality. Best-effort: any
+  // failure leaves prStatus as-is and the toggle simply matches nothing.
+  function loadPrStatus() {
+    return fetch("/api/claude-plans/pr-status")
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        var statuses = data && data.statuses ? data.statuses : {};
+        Object.keys(statuses).forEach(function (url) {
+          state.prStatus.set(url, statuses[url]);
+        });
+        renderRail();
+      })
+      .catch(function (err) {
+        console.warn("[claude-plans] failed to load PR status:", err);
+      });
+  }
+
+  function schedulePrStatusRefresh() {
+    if (prStatusDebounce) clearTimeout(prStatusDebounce);
+    prStatusDebounce = setTimeout(loadPrStatus, 500);
+  }
+
+  function setupMergedToggle() {
+    if (!els.mergedToggle) return;
+    els.mergedToggle.addEventListener("click", function () {
+      state.mergedOnly = !state.mergedOnly;
+      els.mergedToggle.setAttribute("aria-pressed", state.mergedOnly ? "true" : "false");
+      els.mergedToggle.classList.toggle("cp-pr-toggle--active", state.mergedOnly);
+      renderRail();
+    });
+  }
+
   async function loadInitial() {
     try {
       var res = await fetch("/api/claude-plans");
@@ -1185,6 +1392,7 @@
         .catch(function () { /* ignore */ });
     }));
     renderRail();
+    loadPrStatus();
     if (!state.selectedSlug) {
       var paramSlug = new URLSearchParams(window.location.search).get("plan");
       var sorted = sortedPlans();
@@ -1198,7 +1406,10 @@
   function startStream() {
     var es = new EventSource("/api/claude-plans/stream");
     es.addEventListener("plan:upsert", function (e) {
-      try { upsertPlan(JSON.parse(e.data).plan); } catch (_) {}
+      try {
+        upsertPlan(JSON.parse(e.data).plan);
+        schedulePrStatusRefresh();
+      } catch (_) {}
     });
     es.addEventListener("plan:delete", function (e) {
       try { removePlan(JSON.parse(e.data).slug); } catch (_) {}
@@ -1262,6 +1473,7 @@
     setupTheme();
     setupSearch();
     setupTopics();
+    setupMergedToggle();
     setActiveTab("plan");
     loadLintsBadge();
     loadInitial().then(startStream);

package/public/prompt-lints.css

@@ -21,6 +21,148 @@
   font-size: 12px;
 }
 
+/* ─── Filter toolbar ──────────────────────────────────────────────────────── */
+
+.pl-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.pl-filter-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.pl-filter-group:empty {
+  display: none;
+}
+
+/* Segmented control (status) */
+.pl-seg {
+  padding: 4px 12px;
+  background: var(--surface);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+.pl-seg:first-child { border-radius: 999px 0 0 999px; }
+.pl-seg:last-child { border-radius: 0 999px 999px 0; }
+.pl-seg + .pl-seg { border-left: none; }
+.pl-seg:hover {
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+}
+.pl-seg--active {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+}
+
+/* Toggle chips (score buckets, sources) */
+.pl-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-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+.pl-chip:hover {
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  border-color: var(--accent);
+}
+.pl-chip--active {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+}
+.pl-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;
+}
+
+.pl-search {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+}
+.pl-search-input {
+  width: 220px;
+  padding: 5px 28px 5px 10px;
+  background: var(--surface);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 13px;
+}
+.pl-search-input::placeholder { color: var(--fg-muted); }
+.pl-search-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.pl-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
+.pl-search-clear {
+  position: absolute;
+  right: 8px;
+  background: none;
+  border: none;
+  color: var(--fg-muted);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+.pl-search-clear:hover { color: var(--fg); }
+
+/* Status badges */
+.pl-status {
+  display: inline-block;
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.pl-status--needs {
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  color: var(--danger);
+}
+.pl-status--good {
+  background: color-mix(in srgb, var(--success-700) 14%, transparent);
+  color: var(--success-700);
+}
+
+.pl-no-match {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--fg-muted);
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+}
+
 .pl-summary {
   color: var(--fg-subtle);
   font-size: 13px;

package/public/prompt-lints.html

@@ -42,15 +42,41 @@
       Turn-0 prompt-lint observations recorded by the <code>UserPromptSubmit</code> hook and
       <code>push_lint_event</code>. Newest first. Updates live.
     </div>
+    <div class="pl-filters" id="pl-filters">
+      <div class="pl-filter-group" role="group" aria-label="Status">
+        <button type="button" class="pl-seg pl-seg--active" data-status="all">All</button>
+        <button type="button" class="pl-seg" data-status="needs-improvement">Needs improvement</button>
+        <button type="button" class="pl-seg" data-status="good">Good</button>
+      </div>
+      <div class="pl-filter-group" role="group" aria-label="Score">
+        <button type="button" class="pl-chip" data-bucket="low">Low &lt;40</button>
+        <button type="button" class="pl-chip" data-bucket="mid">Mid 40&ndash;69</button>
+        <button type="button" class="pl-chip" data-bucket="high">High &ge;70</button>
+      </div>
+      <div class="pl-filter-group" id="pl-sources" role="group" aria-label="Source"></div>
+      <div class="pl-search">
+        <input
+          type="search"
+          class="pl-search-input"
+          id="pl-search-input"
+          placeholder="Search excerpt / tags&hellip;"
+          autocomplete="off"
+          spellcheck="false"
+        />
+        <button class="pl-search-clear" id="pl-search-clear" aria-label="Clear search" hidden>&times;</button>
+      </div>
+    </div>
     <div class="pl-summary" id="pl-summary"></div>
     <div class="pl-empty" id="pl-empty">
       No lint events yet. Low-scoring prompts will appear here as you work.
     </div>
+    <div class="pl-no-match" id="pl-no-match" hidden>No events match the current filters.</div>
     <table class="pl-table" id="pl-table" hidden>
       <thead>
         <tr>
           <th>When</th>
           <th>Score</th>
+          <th>Status</th>
           <th>Missing tags</th>
           <th>Source</th>
           <th>Prompt excerpt</th>

package/public/prompt-lints.js

@@ -6,12 +6,22 @@
 
   var events = new Map(); // id -> event
 
+  // Active filters. status: "all" | "needs-improvement" | "good".
+  // buckets: map of "low"/"mid"/"high" -> true (multi-select, empty = all).
+  // source: a single source string, or null = all. query: lowercased substring.
+  var filters = { status: "all", buckets: {}, source: null, query: "" };
+
   var els = {
     tbody: document.getElementById("pl-tbody"),
     table: document.getElementById("pl-table"),
     empty: document.getElementById("pl-empty"),
+    noMatch: document.getElementById("pl-no-match"),
     summary: document.getElementById("pl-summary"),
-    storage: document.getElementById("cp-storage")
+    storage: document.getElementById("cp-storage"),
+    filters: document.getElementById("pl-filters"),
+    sources: document.getElementById("pl-sources"),
+    searchInput: document.getElementById("pl-search-input"),
+    searchClear: document.getElementById("pl-search-clear")
   };
 
   // Bound the initial load — the global lint log is append-only and can grow
@@ -32,6 +42,38 @@
     return "pl-score-high";
   }
 
+  function scoreBucket(score) {
+    if (typeof score !== "number") return null;
+    if (score < 40) return "low";
+    if (score < 70) return "mid";
+    return "high";
+  }
+
+  // Classify an event as "needs-improvement" / "good" / "unknown". Prefer the
+  // hook's outcome ("nag" = under-specified, "format" = strong); fall back to
+  // score-vs-threshold for legacy events recorded before outcome existed.
+  function lintStatus(e) {
+    if (e.outcome === "nag") return "needs-improvement";
+    if (e.outcome === "format") return "good";
+    if (typeof e.score !== "number") return "unknown";
+    var threshold = typeof e.threshold === "number" ? e.threshold : 50;
+    if (e.score < threshold) return "needs-improvement";
+    if (e.score >= 70) return "good";
+    return "unknown";
+  }
+
+  function matchesFilters(e) {
+    if (filters.status !== "all" && lintStatus(e) !== filters.status) return false;
+    var activeBuckets = Object.keys(filters.buckets);
+    if (activeBuckets.length && filters.buckets[scoreBucket(e.score)] !== true) return false;
+    if (filters.source !== null && (e.source || "") !== filters.source) return false;
+    if (filters.query) {
+      var hay = ((e.prompt_excerpt || "") + " " + (e.missing || []).join(" ")).toLowerCase();
+      if (hay.indexOf(filters.query) === -1) return false;
+    }
+    return true;
+  }
+
   function sorted() {
     return Array.from(events.values()).sort(function (a, b) {
       var c = (b.timestamp || "").localeCompare(a.timestamp || "");
@@ -40,6 +82,10 @@
     });
   }
 
+  function filtered() {
+    return sorted().filter(matchesFilters);
+  }
+
   function renderTagCells(missing) {
     var td = document.createElement("td");
     td.className = "pl-missing";
@@ -71,6 +117,17 @@
     if (typeof e.threshold === "number") score.title = "threshold " + e.threshold + "%";
     tr.appendChild(score);
 
+    var statusCell = document.createElement("td");
+    var status = lintStatus(e);
+    if (status === "needs-improvement") {
+      statusCell.innerHTML = '<span class="pl-status pl-status--needs">Needs work</span>';
+    } else if (status === "good") {
+      statusCell.innerHTML = '<span class="pl-status pl-status--good">Good</span>';
+    } else {
+      statusCell.textContent = "—";
+    }
+    tr.appendChild(statusCell);
+
     tr.appendChild(renderTagCells(e.missing));
 
     var source = document.createElement("td");
@@ -87,23 +144,131 @@
     return tr;
   }
 
+  function isFiltering() {
+    return (
+      filters.status !== "all" ||
+      Object.keys(filters.buckets).length > 0 ||
+      filters.source !== null ||
+      !!filters.query
+    );
+  }
+
   function render(newId) {
-    var list = sorted();
+    var total = events.size;
+    var list = filtered();
     els.tbody.innerHTML = "";
-    if (!list.length) {
+
+    if (!total) {
       els.empty.hidden = false;
+      els.noMatch.hidden = true;
       els.table.hidden = true;
       els.summary.textContent = "";
       return;
     }
+
     els.empty.hidden = true;
+
+    if (!list.length) {
+      els.noMatch.hidden = false;
+      els.table.hidden = true;
+      els.summary.textContent = "0 of " + total + (total === 1 ? " event" : " events");
+      return;
+    }
+
+    els.noMatch.hidden = true;
     els.table.hidden = false;
     for (var i = 0; i < list.length; i++) {
       els.tbody.appendChild(rowFor(list[i], list[i].id === newId));
     }
-    els.summary.textContent =
-      list.length + (list.length === 1 ? " event" : " events") +
-      (list.length >= PAGE_LIMIT ? " (latest " + PAGE_LIMIT + ")" : "");
+
+    var noun = total === 1 ? " event" : " events";
+    if (isFiltering()) {
+      els.summary.textContent = list.length + " of " + total + noun;
+    } else {
+      els.summary.textContent =
+        total + noun + (total >= PAGE_LIMIT ? " (latest " + PAGE_LIMIT + ")" : "");
+    }
+  }
+
+  /* ─── Filter UI ─────────────────────────────────────────────────────────── */
+
+  function renderSources() {
+    if (!els.sources) return;
+    var counts = {};
+    events.forEach(function (e) {
+      var s = e.source || "—";
+      counts[s] = (counts[s] || 0) + 1;
+    });
+    var labels = Object.keys(counts).sort();
+    els.sources.innerHTML = "";
+    // A lone source carries no signal — hide the group until there's a choice.
+    if (labels.length < 2) return;
+    for (var i = 0; i < labels.length; i++) {
+      els.sources.appendChild(sourceChip(labels[i], counts[labels[i]]));
+    }
+  }
+
+  function sourceChip(label, count) {
+    var value = label === "—" ? "" : label;
+    var chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "pl-chip" + (filters.source === value ? " pl-chip--active" : "");
+    chip.appendChild(document.createTextNode(label + " "));
+    var c = document.createElement("span");
+    c.className = "pl-chip-count";
+    c.textContent = String(count);
+    chip.appendChild(c);
+    chip.addEventListener("click", function () {
+      filters.source = filters.source === value ? null : value;
+      renderSources();
+      render(null);
+    });
+    return chip;
+  }
+
+  function setupFilters() {
+    var segs = els.filters ? els.filters.querySelectorAll(".pl-seg") : [];
+    for (var i = 0; i < segs.length; i++) {
+      (function (btn) {
+        btn.addEventListener("click", function () {
+          filters.status = btn.getAttribute("data-status");
+          for (var j = 0; j < segs.length; j++) {
+            segs[j].classList.toggle("pl-seg--active", segs[j] === btn);
+          }
+          render(null);
+        });
+      })(segs[i]);
+    }
+
+    var buckets = els.filters ? els.filters.querySelectorAll(".pl-chip[data-bucket]") : [];
+    for (var k = 0; k < buckets.length; k++) {
+      (function (btn) {
+        btn.addEventListener("click", function () {
+          var key = btn.getAttribute("data-bucket");
+          if (filters.buckets[key]) delete filters.buckets[key];
+          else filters.buckets[key] = true;
+          btn.classList.toggle("pl-chip--active", !!filters.buckets[key]);
+          render(null);
+        });
+      })(buckets[k]);
+    }
+
+    if (els.searchInput) {
+      els.searchInput.addEventListener("input", function () {
+        filters.query = els.searchInput.value.trim().toLowerCase();
+        if (els.searchClear) els.searchClear.hidden = !els.searchInput.value;
+        render(null);
+      });
+    }
+    if (els.searchClear) {
+      els.searchClear.addEventListener("click", function () {
+        els.searchInput.value = "";
+        filters.query = "";
+        els.searchClear.hidden = true;
+        render(null);
+        els.searchInput.focus();
+      });
+    }
   }
 
   function loadInitial() {
@@ -114,6 +279,7 @@
           if (e && e.id) events.set(e.id, e);
         });
         if (els.storage && data.storage) els.storage.textContent = data.storage;
+        renderSources();
         render(null);
       })
       .catch(function () { render(null); });
@@ -126,6 +292,7 @@
         var data = JSON.parse(msg.data);
         if (data && data.lint && data.lint.id) {
           events.set(data.lint.id, data.lint);
+          renderSources();
           render(data.lint.id);
         }
       } catch (_) {}
@@ -177,6 +344,7 @@
 
   document.addEventListener("DOMContentLoaded", function () {
     setupTheme();
+    setupFilters();
     loadInitial().then(startStream);
   });
 })();

package/server.js

@@ -4,6 +4,7 @@ const axios = require("axios");
 const { wrapper } = require("axios-cookiejar-support");
 const { CookieJar } = require("tough-cookie");
 const fs = require("fs");
+const { execFile } = require("child_process");
 const RateLimit = require("express-rate-limit");
 
 // Everything resolves from CWD — run this from your Dovetail project directory
@@ -1075,6 +1076,100 @@ app.get("/api/claude-plans", function (req, res) {
   }
 });
 
+// Live GitHub merge state for plan-linked PRs. Plans store pr_url but no merge
+// status, so we resolve it on demand via the `gh` CLI (authenticated locally).
+// Results are cached: a MERGED state is terminal and cached forever; anything
+// else is cached briefly so an open PR that later merges is picked up.
+const PR_URL_RE = /^https:\/\/github\.com\/[\w.-]+\/[\w.-]+\/pull\/\d+$/;
+const PR_STATUS_TTL_MS = 60 * 1000;
+const prStatusCache = new Map(); // pr_url -> { state, merged, fetchedAt }
+
+function ghPrState(prUrl) {
+  return new Promise(function (resolve) {
+    execFile(
+      "gh",
+      ["pr", "view", prUrl, "--json", "state,mergedAt"],
+      { timeout: 5000 },
+      function (err, stdout) {
+        if (err) return resolve({ state: "unknown", merged: false });
+        try {
+          const data = JSON.parse(stdout);
+          const state = data.state || "unknown";
+          resolve({ state: state, merged: state === "MERGED" });
+        } catch (e) {
+          resolve({ state: "unknown", merged: false });
+        }
+      }
+    );
+  });
+}
+
+function resolvePrStatus(prUrl) {
+  const cached = prStatusCache.get(prUrl);
+  const now = Date.now();
+  if (cached && (cached.merged || now - cached.fetchedAt < PR_STATUS_TTL_MS)) {
+    return Promise.resolve({ state: cached.state, merged: cached.merged });
+  }
+  return ghPrState(prUrl).then(function (result) {
+    prStatusCache.set(prUrl, {
+      state: result.state,
+      merged: result.merged,
+      fetchedAt: Date.now()
+    });
+    return result;
+  });
+}
+
+// Run promise-returning tasks with bounded concurrency so a large plan set
+// doesn't spawn dozens of `gh` processes at once.
+function mapWithConcurrency(items, limit, worker) {
+  return new Promise(function (resolve) {
+    const results = new Array(items.length);
+    let index = 0;
+    let completed = 0;
+    if (!items.length) return resolve(results);
+    function runNext() {
+      if (index >= items.length) return;
+      const i = index++;
+      Promise.resolve(worker(items[i]))
+        .then(function (r) { results[i] = r; })
+        .catch(function () { results[i] = null; })
+        .then(function () {
+          completed++;
+          if (completed === items.length) resolve(results);
+          else runNext();
+        });
+    }
+    for (let k = 0; k < Math.min(limit, items.length); k++) runNext();
+  });
+}
+
+// Place before "/api/claude-plans/:slug" so Express doesn't treat "pr-status"
+// as a slug. Always resolves to a 200 with whatever statuses we could gather —
+// a missing/unauthenticated `gh` degrades to {} rather than failing the page.
+app.get("/api/claude-plans/pr-status", function (req, res) {
+  try {
+    const urls = [];
+    const seen = {};
+    listClaudePlans().forEach(function (plan) {
+      const url = plan && plan.pr_url;
+      if (typeof url === "string" && PR_URL_RE.test(url) && !seen[url]) {
+        seen[url] = true;
+        urls.push(url);
+      }
+    });
+    mapWithConcurrency(urls, 5, resolvePrStatus).then(function (resolved) {
+      const statuses = {};
+      for (let i = 0; i < urls.length; i++) {
+        if (resolved[i]) statuses[urls[i]] = resolved[i];
+      }
+      res.json({ statuses: statuses });
+    });
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
 app.get("/api/claude-plans/stream", function (req, res) {
   res.set({
     "Content-Type": "text/event-stream",
@@ -1213,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;