@tenonhq/dovetail-dashboard 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Update Set Dashboard for Dovetail",
   "main": "server.js",
   "scripts": {
@@ -18,10 +18,15 @@
     "tough-cookie": "^4.1.3"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "license": "ISC",
   "publishConfig": {
     "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TenonHQ/Dovetail.git",
+    "directory": "packages/dashboard"
   }
 }

package/public/claude-plans.css

@@ -82,6 +82,70 @@
   font-size: 12px;
   color: var(--brand);
 }
+.cp-rail-no-match {
+  padding: 20px 16px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.55;
+}
+.cp-rail-no-match-q {
+  font-family: var(--font-mono);
+  color: var(--fg);
+}
+
+/* ── Search box ─────────────────────────────────────────────────────────── */
+.cp-search {
+  position: relative;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-paper);
+}
+.cp-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 7px 28px 7px 10px;
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  outline: none;
+  transition: border-color var(--dur-1) var(--ease-out),
+              box-shadow var(--dur-1) var(--ease-out);
+}
+.cp-search-input::placeholder { color: var(--fg-muted); }
+.cp-search-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+/* Hide the native clear "x" on WebKit since we render our own button. */
+.cp-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+.cp-search-clear {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  color: var(--fg-muted);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  padding: 0;
+}
+.cp-search-clear:hover {
+  background: var(--bg-muted);
+  color: var(--fg);
+}
+
 .cp-list { list-style: none; }
 .cp-list-item {
   padding: 12px 16px;
@@ -266,6 +330,25 @@
   border-radius: var(--radius-md);
   white-space: pre-wrap;
 }
+.cp-mermaid-fallback {
+  background: var(--bg-paper);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+}
+.cp-mermaid-fallback-note {
+  color: var(--error-700);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+.cp-mermaid-fallback pre {
+  margin: 0;
+  overflow: auto;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+}
 
 /* ═══════════════════════════════════════════════════════════════════════════
    cp-c-* Structured Component Library

package/public/claude-plans.html

@@ -42,10 +42,32 @@
         <span class="cp-rail-title">Plans</span>
         <span class="cp-count" id="cp-count">0</span>
       </div>
+      <div class="cp-search">
+        <input
+          type="search"
+          class="cp-search-input"
+          id="cp-search-input"
+          placeholder="Search plans…  (press / to focus)"
+          aria-label="Search plans by title, slug, status, or content"
+          autocomplete="off"
+          spellcheck="false"
+        />
+        <button
+          type="button"
+          class="cp-search-clear"
+          id="cp-search-clear"
+          aria-label="Clear search"
+          title="Clear (Esc)"
+          hidden
+        >×</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.
       </div>
+      <div class="cp-rail-no-match" id="cp-rail-no-match" hidden>
+        No plans match <span class="cp-rail-no-match-q" id="cp-rail-no-match-q"></span>.
+      </div>
       <ul class="cp-list" id="cp-list"></ul>
     </aside>
 
@@ -73,7 +95,7 @@
 
   <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.1/dist/mermaid.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>
 </body>
 </html>

package/public/claude-plans.js

@@ -1,7 +1,8 @@
 /* /claude-plans page logic.
  * - Fetches initial state from REST.
  * - Subscribes to /api/claude-plans/stream (SSE) for live updates.
- * - Renders markdown via marked + DOMPurify, Mermaid via mermaid.run().
+ * - Renders markdown via marked + DOMPurify, Mermaid via mermaid.parse()/render()
+ *   with a graceful raw-source fallback when a diagram fails to parse.
  */
 
 (function () {
@@ -16,7 +17,10 @@
       window.mermaid.initialize({
         startOnLoad: false,
         theme: currentTheme() === "dark" ? "dark" : "default",
-        securityLevel: "strict"
+        securityLevel: "strict",
+        // Never inject mermaid's "Syntax error in text" bomb SVG into the page.
+        // Bad sources are handled by renderMermaid's graceful fallback instead.
+        suppressErrorRendering: true
       });
     }
   }
@@ -30,7 +34,8 @@
     plans: new Map(),       // slug -> plan
     artifacts: new Map(),   // slug -> Map<artifactSlug, artifact>
     selectedSlug: null,
-    activeTab: "plan"
+    activeTab: "plan",
+    query: ""               // lowercased search query; "" means show all
   };
 
   var els = {
@@ -38,6 +43,10 @@
     list: document.getElementById("cp-list"),
     count: document.getElementById("cp-count"),
     railEmpty: document.getElementById("cp-rail-empty"),
+    railNoMatch: document.getElementById("cp-rail-no-match"),
+    railNoMatchQ: document.getElementById("cp-rail-no-match-q"),
+    searchInput: document.getElementById("cp-search-input"),
+    searchClear: document.getElementById("cp-search-clear"),
     detailEmpty: document.getElementById("cp-detail-empty"),
     detailBody: document.getElementById("cp-detail-body"),
     detailTitle: document.getElementById("cp-detail-title"),
@@ -49,12 +58,46 @@
     tabs: document.querySelectorAll(".cp-tab")
   };
 
-  function sortedPlans() {
+  // 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.
+  function planMatchesQuery(plan, q) {
+    if (!q) return true;
+    var haystacks = [
+      plan.title,
+      plan.slug,
+      plan.status,
+      plan.pr_title,
+      plan.content_md,
+      plan.content_html
+    ];
+    var bucket = state.artifacts.get(plan.slug);
+    if (bucket) {
+      bucket.forEach(function (a) {
+        haystacks.push(a.title);
+        haystacks.push(a.content);
+      });
+    }
+    for (var i = 0; i < haystacks.length; i++) {
+      var h = haystacks[i];
+      if (h && String(h).toLowerCase().indexOf(q) !== -1) return true;
+    }
+    return false;
+  }
+
+  function allPlansSorted() {
     return Array.from(state.plans.values()).sort(function (a, b) {
       return (b.updated_at || "").localeCompare(a.updated_at || "");
     });
   }
 
+  function sortedPlans() {
+    var q = state.query;
+    var all = allPlansSorted();
+    if (!q) return all;
+    return all.filter(function (p) { return planMatchesQuery(p, q); });
+  }
+
   function sortedArtifacts(slug) {
     var map = state.artifacts.get(slug);
     if (!map) return [];
@@ -99,27 +142,62 @@
     target.innerHTML = window.DOMPurify.sanitize(html);
   }
 
+  // Strip a wrapping markdown code fence and normalize whitespace/line endings.
+  // LLM-authored sources often arrive fenced (```mermaid … ```) or with CRLF/BOM,
+  // which the parser rejects on line 1.
+  function preprocessMermaid(src) {
+    var s = src == null ? "" : String(src);
+    s = s.replace(/\r\n/g, "\n").replace(/^\uFEFF/, "");
+    s = s.replace(/^\s*```[^\n]*\n/, "").replace(/\n```\s*$/, "");
+    return s.trim();
+  }
+
+  // Graceful fallback: show the raw source instead of mermaid's "Syntax error"
+  // bomb so one bad diagram never poisons the page.
+  function renderMermaidFallback(source, target) {
+    target.classList.remove("cp-mermaid");
+    target.classList.add("cp-mermaid-fallback");
+    target.textContent = "";
+    var note = document.createElement("div");
+    note.className = "cp-mermaid-fallback-note";
+    note.textContent = "⚠ Diagram failed to render — showing source";
+    var pre = document.createElement("pre");
+    var code = document.createElement("code");
+    code.textContent = source;
+    pre.appendChild(code);
+    target.appendChild(note);
+    target.appendChild(pre);
+  }
+
   function renderMermaid(source, target) {
+    target.classList.remove("cp-mermaid-fallback", "cp-mermaid-error");
     target.classList.add("cp-mermaid");
     target.textContent = "";
     if (!window.mermaid || typeof window.mermaid.render !== "function") {
-      target.textContent = source;
+      renderMermaidFallback(source, target);
       return;
     }
+    var clean = preprocessMermaid(source);
     var id = "mmd-" + Math.random().toString(36).slice(2, 10);
-    try {
-      window.mermaid.render(id, source).then(
+    var doRender = function () {
+      window.mermaid.render(id, clean).then(
         function (out) { target.innerHTML = out.svg; },
-        function (err) {
-          target.classList.remove("cp-mermaid");
-          target.classList.add("cp-mermaid-error");
-          target.textContent = "mermaid error: " + (err && err.message ? err.message : String(err));
-        }
+        function () { renderMermaidFallback(source, target); }
       );
+    };
+    try {
+      // Validate before rendering. suppressErrors makes parse resolve false
+      // (instead of throwing) on bad source, so we can fall back cleanly.
+      if (typeof window.mermaid.parse === "function") {
+        window.mermaid.parse(clean, { suppressErrors: true }).then(
+          function (ok) { if (ok) { doRender(); } else { renderMermaidFallback(source, target); } },
+          function () { renderMermaidFallback(source, target); }
+        );
+      } else {
+        doRender();
+      }
     } catch (err) {
-      target.classList.remove("cp-mermaid");
-      target.classList.add("cp-mermaid-error");
-      target.textContent = "mermaid error: " + err.message;
+      renderMermaidFallback(source, target);
     }
   }
 
@@ -203,13 +281,25 @@
 
   function renderRail() {
     var plans = sortedPlans();
-    els.count.textContent = String(plans.length);
+    var totalPlans = state.plans.size;
+    var isFiltering = !!state.query;
+    els.count.textContent = isFiltering
+      ? plans.length + " / " + totalPlans
+      : String(totalPlans);
     if (plans.length === 0) {
-      els.railEmpty.style.display = "block";
       els.list.innerHTML = "";
+      if (isFiltering && totalPlans > 0) {
+        els.railEmpty.style.display = "none";
+        els.railNoMatch.hidden = false;
+        if (els.railNoMatchQ) els.railNoMatchQ.textContent = '"' + state.query + '"';
+      } else {
+        els.railEmpty.style.display = "block";
+        els.railNoMatch.hidden = true;
+      }
       return;
     }
     els.railEmpty.style.display = "none";
+    els.railNoMatch.hidden = true;
     els.list.innerHTML = "";
     plans.forEach(function (plan) {
       var artifactCount = (state.artifacts.get(plan.slug) || new Map()).size;
@@ -389,6 +479,69 @@
     btn.addEventListener("click", function () { setActiveTab(btn.dataset.tab); });
   });
 
+  /* ─── Search ───────────────────────────────────────────────────────────────
+   * Filter the rail by title/slug/status/content (plan + artifacts).
+   * 120ms debounce keeps typing snappy even with hundreds of plans.
+   *
+   * Selection rule: when filtering narrows the rail, only auto-select a new
+   * plan if the currently selected one is filtered out — picking the first
+   * visible match. Don't yank the user off a plan they're already reading.
+   */
+  var searchDebounce = null;
+  function applyQuery(raw) {
+    var q = (raw == null ? "" : String(raw)).trim().toLowerCase();
+    state.query = q;
+    if (els.searchClear) els.searchClear.hidden = q.length === 0;
+    renderRail();
+    if (q) {
+      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 setupSearch() {
+    if (els.searchInput) {
+      els.searchInput.addEventListener("input", function (e) {
+        var v = e.target.value;
+        if (searchDebounce) clearTimeout(searchDebounce);
+        searchDebounce = setTimeout(function () { applyQuery(v); }, 120);
+      });
+      els.searchInput.addEventListener("keydown", function (e) {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          els.searchInput.value = "";
+          applyQuery("");
+          els.searchInput.blur();
+        }
+      });
+    }
+    if (els.searchClear) {
+      els.searchClear.addEventListener("click", function () {
+        if (els.searchInput) els.searchInput.value = "";
+        applyQuery("");
+        if (els.searchInput) els.searchInput.focus();
+      });
+    }
+    // Press "/" anywhere (except in another input) to focus the search box.
+    document.addEventListener("keydown", function (e) {
+      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
+      var t = e.target;
+      var tag = t && t.tagName;
+      var isEditable = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" ||
+        (t && t.isContentEditable);
+      if (isEditable) return;
+      e.preventDefault();
+      if (els.searchInput) {
+        els.searchInput.focus();
+        els.searchInput.select();
+      }
+    });
+  }
+
   function upsertPlan(plan) {
     state.plans.set(plan.slug, plan);
     renderRail();
@@ -510,6 +663,7 @@
 
   document.addEventListener("DOMContentLoaded", function () {
     setupTheme();
+    setupSearch();
     setActiveTab("plan");
     loadInitial().then(startStream);
   });