@tenonhq/dovetail-dashboard 0.0.29 → 0.0.31

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 = {
@@ -60,14 +62,45 @@
     planPanel: document.getElementById("cp-tab-plan"),
     artifactsPanel: document.getElementById("cp-tab-artifacts"),
     promptsPanel: document.getElementById("cp-tab-prompts"),
+    questionsPanel: document.getElementById("cp-tab-questions"),
+    questionCount: document.getElementById("cp-question-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;
@@ -115,9 +148,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);
     });
   }
 
@@ -428,7 +461,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);
@@ -441,6 +474,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 {
@@ -461,6 +495,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">' +
@@ -592,6 +627,10 @@
       renderMarkdown(plan.content_md, els.planPanel);
     }
 
+    // v2 surfaces — Stage Map strip + Questions tab.
+    renderStageMap(plan);
+    renderQuestions(plan);
+
     addPlanSectionCopyBtns();
     addTabsCopyAll(plan, artifacts, prompts);
 
@@ -706,6 +745,275 @@
     els.planPanel.hidden = tab !== "plan";
     els.artifactsPanel.hidden = tab !== "artifacts";
     if (els.promptsPanel) els.promptsPanel.hidden = tab !== "prompts";
+    if (els.questionsPanel) els.questionsPanel.hidden = tab !== "questions";
+  }
+
+  /* ─── v2 bidirectional pipeline (Phase E) ──────────────────────────────────
+   * Stage Map, Questions tab, Dispatch dialog. Server enforces every safety
+   * rule (state machine, conflict resolution, dispatch token); the client
+   * just renders state and POSTs intents. The latest set_stage token is
+   * cached per-plan so the Dispatch button can hand it back to the live call
+   * without a round-trip.
+   * ─────────────────────────────────────────────────────────────────────── */
+
+  var PIPELINE_STAGES = [
+    "research",
+    "pre-stage-improve",
+    "planning",
+    "post-plan-improve",
+    "test-first",
+    "code",
+    "per-step-review",
+    "architectural-review",
+    "test-reality",
+    "documentation"
+  ];
+
+  // Stages whose driving agent isn't shipped yet (matches dispatch.ts).
+  // dispatch_stage will raise MissingAgentError for these; the UI greys
+  // them out and adds a ⚠ marker.
+  var STAGES_MISSING_AGENT = { "test-first": true, "test-reality": true };
+
+  // Per-plan cache of the most recent setStage response. The dispatch
+  // button reads token from here. Cleared on plan switch.
+  var stageTokenCache = {};
+
+  function v2ApiPath(slug, leaf) { return "/api/claude-plans/" + slug + "/" + leaf; }
+
+  function v2Post(slug, leaf, body) {
+    return fetch(v2ApiPath(slug, leaf), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body || {})
+    }).then(function (r) {
+      return r.json().then(function (json) {
+        if (!r.ok) {
+          var err = new Error(json.message || json.error || ("HTTP " + r.status));
+          err.code = json.error;
+          err.name = json.name || "ServerError";
+          err.status = r.status;
+          err.payload = json;
+          throw err;
+        }
+        return json;
+      });
+    });
+  }
+
+  function renderStageMap(plan) {
+    var map = els.stageMap;
+    if (!map) return;
+    map.hidden = false;
+    map.innerHTML = "";
+    var current = plan.stage || null;
+    PIPELINE_STAGES.forEach(function (stage) {
+      var pill = document.createElement("button");
+      pill.className = "cp-stage";
+      if (stage === current) pill.classList.add("cp-stage--current");
+      if (STAGES_MISSING_AGENT[stage]) pill.classList.add("cp-stage--missing-agent");
+      pill.textContent = stage;
+      pill.title = STAGES_MISSING_AGENT[stage]
+        ? stage + " — agent not shipped yet (PR #160); dispatch will raise MissingAgentError"
+        : stage + " — click to move plan here";
+      pill.addEventListener("click", function () {
+        v2Post(plan.slug, "stage", { to: stage }).then(function (res) {
+          stageTokenCache[plan.slug] = res.token;
+          showToast("Stage → " + res.stage + " (token issued)");
+        }).catch(function (err) {
+          showToast(err.code === "ILLEGAL_TRANSITION"
+            ? "Illegal move: " + err.message
+            : "Stage move failed: " + err.message);
+        });
+      });
+      // Per-stage Dispatch button (Phase E §3).
+      var dispatchBtn = document.createElement("button");
+      dispatchBtn.className = "cp-stage-dispatch";
+      dispatchBtn.textContent = "▶";
+      dispatchBtn.title = "Dispatch a Claude Code session at " + stage;
+      dispatchBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        openDispatchDialog(plan, stage);
+      });
+      pill.appendChild(dispatchBtn);
+      map.appendChild(pill);
+    });
+  }
+
+  function openDispatchDialog(plan, stage) {
+    // Step 1 — dry-run dispatch. Render the resolved command, then offer
+    // a "Confirm live" button that re-POSTs with confirm:true + the
+    // cached token for this plan.
+    v2Post(plan.slug, "dispatch", { target_stage: stage }).then(function (dryRun) {
+      var backdrop = document.createElement("div");
+      backdrop.className = "cp-dispatch-dialog";
+      var inner = document.createElement("div");
+      inner.className = "cp-dispatch-dialog-inner";
+      inner.innerHTML =
+        "<h3>Dispatch &rarr; " + stage + "</h3>" +
+        "<p>Dry-run resolved the following spawn. Confirm to launch a real Claude Code session.</p>" +
+        "<pre>" +
+          "<strong>command:</strong> " + escapeHtml(dryRun.command) + "\n" +
+          "<strong>cwd:</strong>     " + escapeHtml(dryRun.cwd) + "\n" +
+          "<strong>plan:</strong>    " + escapeHtml(dryRun.plan_slug) + "\n" +
+          "<strong>stage:</strong>   " + escapeHtml(dryRun.target_stage) +
+        "</pre>";
+      var errorEl = document.createElement("div");
+      errorEl.className = "cp-dispatch-error";
+      errorEl.hidden = true;
+      inner.appendChild(errorEl);
+
+      var actions = document.createElement("div");
+      actions.className = "cp-dispatch-dialog-actions";
+      var cancel = document.createElement("button");
+      cancel.textContent = "Cancel";
+      cancel.addEventListener("click", function () { document.body.removeChild(backdrop); });
+      var confirm = document.createElement("button");
+      confirm.className = "cp-dispatch-confirm";
+      confirm.textContent = "Confirm live dispatch";
+      confirm.addEventListener("click", function () {
+        var token = stageTokenCache[plan.slug];
+        if (!token || !token.token) {
+          errorEl.hidden = false;
+          errorEl.textContent =
+            "No fresh dispatch token cached for this plan. Click the stage on the Stage Map first " +
+            "to mint one (tokens are 5-min, single-use, stage-bound).";
+          return;
+        }
+        if (token.issued_for_stage !== stage) {
+          errorEl.hidden = false;
+          errorEl.textContent =
+            "Cached token was issued for " + token.issued_for_stage +
+            ", not " + stage + ". Click " + stage + " on the Stage Map to issue a matching token.";
+          return;
+        }
+        confirm.disabled = true;
+        v2Post(plan.slug, "dispatch", {
+          target_stage: stage,
+          confirm: true,
+          token: token.token
+        }).then(function (live) {
+          document.body.removeChild(backdrop);
+          showToast("Live dispatch launched (pid=" + live.pid + ")");
+          delete stageTokenCache[plan.slug];
+        }).catch(function (err) {
+          confirm.disabled = false;
+          errorEl.hidden = false;
+          errorEl.textContent = (err.code || "Error") + ": " + err.message;
+        });
+      });
+      actions.appendChild(cancel);
+      actions.appendChild(confirm);
+      inner.appendChild(actions);
+      backdrop.appendChild(inner);
+      document.body.appendChild(backdrop);
+    }).catch(function (err) {
+      if (err.code === "MISSING_AGENT") {
+        showToast(stage + ": " + err.message);
+      } else {
+        showToast("Dispatch dry-run failed: " + err.message);
+      }
+    });
+  }
+
+  function escapeHtml(s) {
+    return String(s == null ? "" : s)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+
+  function renderQuestions(plan) {
+    if (!els.questionsPanel) return;
+    var questions = plan.questions || [];
+    els.questionsPanel.innerHTML = "";
+    if (els.questionCount) els.questionCount.textContent = String(questions.length);
+    if (questions.length === 0) {
+      var empty = document.createElement("div");
+      empty.className = "cp-detail-empty";
+      empty.style.padding = "40px 0";
+      empty.textContent = "No questions yet. Call push_question from Claude (or /qa park).";
+      els.questionsPanel.appendChild(empty);
+      return;
+    }
+    questions.forEach(function (q) {
+      var card = document.createElement("div");
+      card.className = "cp-question" + (q.answer ? " cp-question--answered" : "");
+
+      var header = document.createElement("div");
+      header.className = "cp-question-header";
+      if (q.stage) {
+        var stageTag = document.createElement("span");
+        stageTag.className = "cp-question-stage";
+        stageTag.textContent = q.stage;
+        header.appendChild(stageTag);
+      }
+      if (q.asked_by) {
+        var by = document.createElement("span");
+        by.textContent = "asked by " + q.asked_by;
+        header.appendChild(by);
+      }
+      card.appendChild(header);
+
+      var qText = document.createElement("div");
+      qText.className = "cp-question-q";
+      qText.textContent = q.question;
+      card.appendChild(qText);
+
+      if (q.answer) {
+        var recorded = document.createElement("div");
+        recorded.className = "cp-question-recorded";
+        recorded.textContent = q.answer;
+        var meta = document.createElement("div");
+        meta.className = "cp-question-recorded-meta";
+        meta.textContent = "answered " +
+          (q.answered_by ? "by " + q.answered_by + " " : "") +
+          (q.answered_at ? "at " + fmtTime(q.answered_at) : "");
+        recorded.appendChild(meta);
+        card.appendChild(recorded);
+      } else {
+        if (q.options && q.options.length) {
+          var optsRow = document.createElement("div");
+          optsRow.className = "cp-question-options";
+          q.options.forEach(function (opt) {
+            var b = document.createElement("button");
+            b.className = "cp-question-option";
+            b.textContent = opt;
+            b.addEventListener("click", function () { submitAnswer(plan.slug, q.id, opt); });
+            optsRow.appendChild(b);
+          });
+          card.appendChild(optsRow);
+        }
+        var form = document.createElement("form");
+        form.className = "cp-question-answer-form";
+        var input = document.createElement("input");
+        input.className = "cp-question-answer-input";
+        input.placeholder = "Type an answer…";
+        input.required = true;
+        var submit = document.createElement("button");
+        submit.type = "submit";
+        submit.className = "cp-question-answer-submit";
+        submit.textContent = "Answer";
+        form.appendChild(input);
+        form.appendChild(submit);
+        form.addEventListener("submit", function (e) {
+          e.preventDefault();
+          if (!input.value.trim()) return;
+          submitAnswer(plan.slug, q.id, input.value.trim());
+        });
+        card.appendChild(form);
+      }
+
+      els.questionsPanel.appendChild(card);
+    });
+  }
+
+  function submitAnswer(slug, questionId, answer) {
+    v2Post(slug, "answers", { question_id: questionId, answer: answer }).then(function () {
+      showToast("Answer recorded.");
+      // SSE will fan out the plan upsert and re-render naturally.
+    }).catch(function (err) {
+      showToast("record_answer failed: " + err.message);
+    });
   }
 
   function selectPlan(slug) {
@@ -714,6 +1022,12 @@
       var url = window.location.pathname + "?plan=" + encodeURIComponent(slug);
       window.history.replaceState(null, "", url);
     }
+    // Tokens are stage+plan bound — switching plans should not retain
+    // tokens from elsewhere (they'd be rejected on the server anyway,
+    // but better not to surface a stale token to the operator).
+    Object.keys(stageTokenCache).forEach(function (k) {
+      if (k !== slug) delete stageTokenCache[k];
+    });
     renderRail();
     renderDetail();
   }
@@ -872,6 +1186,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");
@@ -903,6 +1252,7 @@
         .catch(function () { /* ignore */ });
     }));
     renderRail();
+    loadPrStatus();
     if (!state.selectedSlug) {
       var paramSlug = new URLSearchParams(window.location.search).get("plan");
       var sorted = sortedPlans();
@@ -916,7 +1266,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 (_) {}
@@ -980,6 +1333,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>