@tenonhq/dovetail-dashboard 0.0.29 → 0.0.31

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog — @tenonhq/dovetail-dashboard
+
+## Unreleased — Phase E (claude-plans v2 bidirectional surfaces)
+
+- **New dependency** `@tenonhq/dovetail-claude-plans` (workspace) — write routes call directly into the package's storage layer so the state machine, conflict rule, and dispatch-token lifecycle are enforced in exactly one place.
+- **Three new POST routes** under `/api/claude-plans/:slug/`:
+  - `answers` → `recordAnswer()`. Forces `answered_by: "dashboard"` by default.
+  - `stage` → `setStage()`. Forces `source: "dashboard"` so the conflict rule (design doc §4) treats operator moves as authoritative.
+  - `dispatch` → `dispatchStage()`. Pass-through; dashboard sends dry-run first, then confirm+token.
+- **Typed error envelope** — every error response carries `{ error: <code>, name: <ClassName>, message }`. HTTP status reflects the failure mode: 400 (validation / no-token), 404 (plan-not-found), 409 (illegal transition / conflict), 410 (stale token), 424 (missing agent), 500 (spawn / internal).
+- **Stage Map strip** on the plan detail page — 10 stage pills with current-stage highlight, click-to-set_stage, per-stage Dispatch (▶) button, and a ⚠ marker for stages whose agent hasn't shipped yet (test-first, test-reality).
+- **Dispatch dialog** — opens on Dispatch click, POSTs dry-run first, renders the resolved command + cwd, then the operator confirms to fire a live dispatch (which consumes the cached `set_stage` token).
+- **Questions & Answers tab** — lists `plan.questions`, lets the operator answer each one (free-form input + clickable suggested options); SSE plan upsert re-renders the tab automatically.
+- **Per-plan token cache** — the most recent `set_stage` response is held client-side per plan so the Dispatch button has a token to consume. Cache is cleared on plan switch.
+- **Rate limited** — all three new routes share `claudePlansLimiter` (60 req / 15 min / IP), same as the existing destructive delete route.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Update Set Dashboard for Dovetail",
   "main": "server.js",
   "scripts": {
@@ -9,6 +9,7 @@
     "postpublish": "npm run version:bump"
   },
   "dependencies": {
+    "@tenonhq/dovetail-claude-plans": "*",
     "axios": "^1.5.1",
     "axios-cookiejar-support": "^4.0.7",
     "chokidar": "^3.6.0",

package/public/claude-plans.css

@@ -1311,3 +1311,218 @@
 .cp-topic-chip--active .cp-topic-chip-count {
   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.
+ * ========================================================================= */
+
+.cp-stage-map {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 12px 0;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--border, #e5e7eb);
+}
+.cp-stage {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 999px;
+  background: var(--bg-elevated, #fff);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+.cp-stage:hover { background: var(--bg-hover, #f3f4f6); }
+.cp-stage--current {
+  background: var(--accent-bg, #2563eb);
+  color: var(--accent-fg, #fff);
+  border-color: var(--accent-bg, #2563eb);
+}
+.cp-stage--illegal {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.cp-stage--missing-agent::after {
+  content: "⚠";
+  font-size: 11px;
+  margin-left: 4px;
+}
+.cp-stage-dispatch {
+  margin-left: 4px;
+  padding: 0 6px;
+  font-size: 11px;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  cursor: pointer;
+  color: inherit;
+}
+.cp-stage-dispatch:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
+
+.cp-question {
+  padding: 12px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 8px;
+  margin-bottom: 12px;
+  background: var(--bg-elevated, #fff);
+}
+.cp-question--answered { opacity: 0.78; }
+.cp-question-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted, #6b7280);
+}
+.cp-question-stage {
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+.cp-question-q { font-size: 14px; margin-bottom: 10px; font-weight: 500; }
+.cp-question-options {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  margin-bottom: 10px;
+}
+.cp-question-option {
+  padding: 4px 8px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  background: var(--bg-elevated, #fff);
+  font-size: 12px;
+  cursor: pointer;
+}
+.cp-question-option:hover { background: var(--bg-hover, #f3f4f6); }
+.cp-question-answer-form { display: flex; gap: 6px; }
+.cp-question-answer-input {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  font: inherit;
+}
+.cp-question-answer-submit {
+  padding: 6px 12px;
+  border: 1px solid var(--accent-bg, #2563eb);
+  background: var(--accent-bg, #2563eb);
+  color: var(--accent-fg, #fff);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.cp-question-recorded {
+  font-size: 13px;
+  padding: 8px 10px;
+  background: color-mix(in srgb, var(--accent-bg, #2563eb) 10%, transparent);
+  border-radius: 4px;
+}
+.cp-question-recorded-meta {
+  font-size: 11px;
+  color: var(--text-muted, #6b7280);
+  margin-top: 4px;
+}
+
+.cp-dispatch-dialog {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.cp-dispatch-dialog-inner {
+  background: var(--bg-elevated, #fff);
+  border-radius: 8px;
+  padding: 20px;
+  max-width: 640px;
+  width: 90%;
+  font-size: 14px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+.cp-dispatch-dialog h3 { margin-top: 0; }
+.cp-dispatch-dialog pre {
+  background: var(--bg, #f9fafb);
+  border-radius: 4px;
+  padding: 10px;
+  overflow-x: auto;
+  font-size: 12px;
+}
+.cp-dispatch-dialog-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 14px;
+  justify-content: flex-end;
+}
+.cp-dispatch-dialog-actions button {
+  padding: 6px 14px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  background: var(--bg-elevated, #fff);
+  cursor: pointer;
+}
+.cp-dispatch-dialog-actions button.cp-dispatch-confirm {
+  background: var(--accent-bg, #2563eb);
+  color: var(--accent-fg, #fff);
+  border-color: var(--accent-bg, #2563eb);
+}
+.cp-dispatch-error {
+  color: #b91c1c;
+  background: #fee2e2;
+  padding: 8px 10px;
+  border-radius: 4px;
+  margin-top: 10px;
+  font-size: 13px;
+}

package/public/claude-plans.html

@@ -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.
@@ -104,6 +113,9 @@
           <span class="cp-status-pill" id="cp-detail-status"></span>
           <span class="cp-stamp" id="cp-detail-stamp"></span>
         </header>
+        <!-- v2 Stage Map: 10-stage pipeline strip; clicking a stage triggers
+             POST /stage (subject to state-machine + conflict rules). -->
+        <div class="cp-stage-map" id="cp-stage-map" hidden></div>
         <nav class="cp-tabs">
           <button class="cp-tab active" data-tab="plan">Plan</button>
           <button class="cp-tab" data-tab="prompts">
@@ -112,10 +124,14 @@
           <button class="cp-tab" data-tab="artifacts">
             Artifacts <span class="cp-tab-count" id="cp-artifact-count">0</span>
           </button>
+          <button class="cp-tab" data-tab="questions">
+            Q&amp;A <span class="cp-tab-count" id="cp-question-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>
       </article>
     </section>
   </main>