@tenonhq/dovetail-dashboard 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Update Set Dashboard for Dovetail",
   "main": "server.js",
   "scripts": {

package/public/claude-plans.css

@@ -23,6 +23,21 @@
   border-color: var(--brand);
   color: var(--brand);
 }
+.cp-lints-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  margin: 0 2px;
+  padding: 0 5px;
+  background: var(--danger);
+  color: var(--fg-on-dark);
+  border-radius: var(--radius-pill);
+  font-size: 11px;
+  font-weight: var(--weight-bold);
+  line-height: 1;
+}
 .cp-storage {
   font-size: 11px;
   font-family: var(--font-mono);

package/public/claude-plans.html

@@ -30,7 +30,9 @@
     </div>
     <div class="header-right">
       <a class="cp-nav-link" href="/">&larr; Update Sets</a>
-      <a class="cp-nav-link" href="/prompt-lints">Prompt Lints &rarr;</a>
+      <a class="cp-nav-link" href="/prompt-lints">Prompt Lints
+        <span class="cp-lints-badge" id="cp-lints-badge" title="Prompts needing review" hidden>0</span>
+        &rarr;</a>
       <button class="cp-theme-toggle" id="cp-theme-toggle" type="button"
         aria-label="Toggle dark mode" title="Toggle dark mode"></button>
       <span class="cp-storage" id="cp-storage" title="storage root"></span>
@@ -43,7 +45,7 @@
         <span class="cp-rail-title">Plans</span>
         <span class="cp-count" id="cp-count">0</span>
       </div>
-      <details class="cp-topics" id="cp-topics" open>
+      <details class="cp-topics" id="cp-topics">
         <summary class="cp-topics-summary">
           <span class="cp-topics-caret" aria-hidden="true">▾</span>
           <span class="cp-topics-title">Topics</span>

package/public/claude-plans.js

@@ -42,6 +42,7 @@
 
   var els = {
     storage: document.getElementById("cp-storage"),
+    lintsBadge: document.getElementById("cp-lints-badge"),
     list: document.getElementById("cp-list"),
     count: document.getElementById("cp-count"),
     railEmpty: document.getElementById("cp-rail-empty"),
@@ -219,7 +220,7 @@
     if (els.topics) {
       try {
         var stored = localStorage.getItem("cp-topics-collapsed");
-        if (stored === "1") els.topics.open = false;
+        els.topics.open = stored === "0";
       } catch (_) {}
       els.topics.addEventListener("toggle", function () {
         try {
@@ -709,6 +710,10 @@
 
   function selectPlan(slug) {
     state.selectedSlug = slug;
+    if (window.history && window.history.replaceState) {
+      var url = window.location.pathname + "?plan=" + encodeURIComponent(slug);
+      window.history.replaceState(null, "", url);
+    }
     renderRail();
     renderDetail();
   }
@@ -831,6 +836,42 @@
     if (state.selectedSlug === planSlug) renderDetail();
   }
 
+  // A lint event "needs attention" if its score fell below the recording
+  // threshold (default 50 when no threshold is supplied) or it flagged any
+  // missing tags, antipatterns, or ceremony. The badge surfaces that count.
+  function lintNeedsAttention(e) {
+    if (!e) return false;
+    var threshold = typeof e.threshold === "number" ? e.threshold : 50;
+    if (typeof e.score === "number" && e.score < threshold) return true;
+    if (Array.isArray(e.missing) && e.missing.length) return true;
+    if (Array.isArray(e.antipatterns) && e.antipatterns.length) return true;
+    if (Array.isArray(e.ceremony) && e.ceremony.length) return true;
+    return false;
+  }
+
+  function setLintsBadge(count) {
+    if (!els.lintsBadge) return;
+    if (count > 0) {
+      els.lintsBadge.textContent = String(count);
+      els.lintsBadge.hidden = false;
+    } else {
+      els.lintsBadge.hidden = true;
+    }
+  }
+
+  function loadLintsBadge() {
+    return fetch("/api/prompt-lints")
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        var events = data && Array.isArray(data.events) ? data.events : [];
+        setLintsBadge(events.filter(lintNeedsAttention).length);
+      })
+      .catch(function (err) {
+        console.warn("[claude-plans] failed to load prompt lints:", err);
+        setLintsBadge(0);
+      });
+  }
+
   async function loadInitial() {
     try {
       var res = await fetch("/api/claude-plans");
@@ -863,11 +904,10 @@
     }));
     renderRail();
     if (!state.selectedSlug) {
-      var pathMatch = window.location.pathname.match(/^\/claude-plans\/([a-z0-9][a-z0-9-]{0,63})$/);
-      var pathSlug = pathMatch && pathMatch[1];
+      var paramSlug = new URLSearchParams(window.location.search).get("plan");
       var sorted = sortedPlans();
-      var target = pathSlug && state.plans.has(pathSlug)
-        ? pathSlug
+      var target = paramSlug && state.plans.has(paramSlug)
+        ? paramSlug
         : (sorted.length > 0 ? sorted[0].slug : null);
       if (target) selectPlan(target);
     }
@@ -941,6 +981,7 @@
     setupSearch();
     setupTopics();
     setActiveTab("plan");
+    loadLintsBadge();
     loadInitial().then(startStream);
   });
 })();

package/server.js

@@ -1038,10 +1038,16 @@ function startClaudePlanWatcher() {
   claudePlanWatcher.on("unlink", function (p) { handleWatcherChange("unlink", p); });
 }
 
-app.get(["/claude-plans", "/claude-plans/:slug"], function (req, res) {
+app.get("/claude-plans", function (req, res) {
   res.sendFile(path.join(__dirname, "public", "claude-plans.html"));
 });
 
+// Legacy path-segment deep links (/claude-plans/:slug) redirect to the
+// query-param form so relative assets resolve against /claude-plans.
+app.get("/claude-plans/:slug", function (req, res) {
+  res.redirect(301, "/claude-plans?plan=" + encodeURIComponent(req.params.slug));
+});
+
 app.get("/prompt-lints", function (req, res) {
   res.sendFile(path.join(__dirname, "public", "prompt-lints.html"));
 });