@tenonhq/dovetail-dashboard 0.0.26 → 0.0.28

package/package.json

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

package/public/claude-plans.css

@@ -1165,18 +1165,18 @@
 /* ─── Topics cloud ─────────────────────────────────────────────────────────── */
 
 .cp-topics {
-  margin: 0 24px 12px;
-  background: var(--surface-raised);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md, 8px);
-  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04));
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  box-shadow: none;
+  border-radius: 0;
 }
 
 .cp-topics-summary {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 14px;
+  padding: 8px 12px;
   cursor: pointer;
   list-style: none;
   user-select: none;
@@ -1234,7 +1234,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 6px 8px;
-  padding: 10px 14px 14px;
+  padding: 8px 12px 10px;
   border-top: 1px solid var(--border-subtle, var(--border));
   line-height: 1.3;
 }

package/public/claude-plans.html

@@ -30,39 +30,39 @@
     </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>
       <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>
     </div>
   </header>
 
-  <details class="cp-topics" id="cp-topics" open>
-    <summary class="cp-topics-summary">
-      <span class="cp-topics-caret" aria-hidden="true">▾</span>
-      <span class="cp-topics-title">Topics</span>
-      <span class="cp-topics-count" id="cp-topics-count">0</span>
-      <button
-        type="button"
-        class="cp-topics-clear"
-        id="cp-topics-clear"
-        hidden
-        title="Clear topic filter"
-        aria-label="Clear topic filter"
-      >Clear filter</button>
-    </summary>
-    <div class="cp-topics-cloud" id="cp-topics-cloud" role="group" aria-label="Plan topics">
-      <span class="cp-topics-empty" id="cp-topics-empty">
-        No topics yet. Push a plan and topics will appear here.
-      </span>
-    </div>
-  </details>
-
   <main class="cp-layout">
     <aside class="cp-rail" id="cp-rail">
       <div class="cp-rail-header">
         <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>
+        <summary class="cp-topics-summary">
+          <span class="cp-topics-caret" aria-hidden="true">▾</span>
+          <span class="cp-topics-title">Topics</span>
+          <span class="cp-topics-count" id="cp-topics-count">0</span>
+          <button
+            type="button"
+            class="cp-topics-clear"
+            id="cp-topics-clear"
+            hidden
+            title="Clear topic filter"
+            aria-label="Clear topic filter"
+          >Clear filter</button>
+        </summary>
+        <div class="cp-topics-cloud" id="cp-topics-cloud" role="group" aria-label="Plan topics">
+          <span class="cp-topics-empty" id="cp-topics-empty">
+            No topics yet. Push a plan and topics will appear here.
+          </span>
+        </div>
+      </details>
       <div class="cp-search">
         <input
           type="search"

package/public/prompt-lints.css

@@ -0,0 +1,112 @@
+/* Standalone Prompt Lints page. Reuses tokens from tokens.css / claude-plans.css. */
+
+.pl-main {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+}
+
+.pl-intro {
+  color: var(--fg-muted);
+  font-size: 14px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.pl-intro code {
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-size: 12px;
+}
+
+.pl-summary {
+  color: var(--fg-subtle);
+  font-size: 13px;
+  margin-bottom: 12px;
+  min-height: 18px;
+}
+
+.pl-empty {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--fg-muted);
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+}
+
+.pl-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.pl-table thead th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--fg-muted);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-strong);
+  position: sticky;
+  top: 0;
+  background: var(--bg);
+}
+
+.pl-table tbody td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+
+.pl-row-new {
+  animation: pl-flash 1.2s ease-out;
+}
+
+@keyframes pl-flash {
+  from { background: var(--accent-bg); }
+  to { background: transparent; }
+}
+
+.pl-when {
+  white-space: nowrap;
+  color: var(--fg-muted);
+}
+
+.pl-score {
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.pl-score-low { color: var(--danger); }
+.pl-score-mid { color: var(--warning-700); }
+.pl-score-high { color: var(--success-700); }
+
+.pl-missing {
+  max-width: 320px;
+}
+
+.pl-tag {
+  display: inline-block;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  padding: 1px 6px;
+  margin: 0 4px 4px 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--fg);
+}
+
+.pl-source {
+  color: var(--fg-muted);
+  white-space: nowrap;
+}
+
+.pl-excerpt {
+  max-width: 420px;
+  color: var(--fg-subtle);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/public/prompt-lints.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Dovetail — Prompt Lints</title>
+  <script>
+    /* Apply the saved theme before first paint to avoid a flash of light. */
+    (function () {
+      try {
+        var t = localStorage.getItem("cp-theme");
+        if (t === "dark" || t === "light") {
+          document.documentElement.setAttribute("data-theme", t);
+        }
+      } 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="prompt-lints.css" />
+</head>
+<body class="cp-body">
+  <header>
+    <div class="header-left">
+      <svg class="brand-mark" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M34.3254 13.7847H48.0563H54.9235V0H48.0563H34.3254H20.5946H6.8637H0V13.7847H6.8637H20.5946V27.5693H34.3254V13.7847Z" fill="#00663C"></path>
+        <path d="M54.9235 41.354V27.5693H48.0563H34.3254V41.354H20.5946V27.5693H6.8637H0V41.354V55.1387H20.5946H34.3254H54.9235V41.354Z" fill="#00663C"></path>
+      </svg>
+      <h1><span>Dovetail</span> Prompt Lints</h1>
+    </div>
+    <div class="header-right">
+      <a class="cp-nav-link" href="/claude-plans">&larr; Claude Plans</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>
+    </div>
+  </header>
+
+  <main class="pl-main">
+    <div class="pl-intro">
+      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-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>
+    <table class="pl-table" id="pl-table" hidden>
+      <thead>
+        <tr>
+          <th>When</th>
+          <th>Score</th>
+          <th>Missing tags</th>
+          <th>Source</th>
+          <th>Prompt excerpt</th>
+        </tr>
+      </thead>
+      <tbody id="pl-tbody"></tbody>
+    </table>
+  </main>
+
+  <script src="prompt-lints.js"></script>
+</body>
+</html>

package/public/prompt-lints.js

@@ -0,0 +1,182 @@
+/* Standalone Prompt Lints page. Loads the global lint-event log and live-updates
+ * via the shared /api/claude-plans/stream SSE feed (lint:upsert / lint:delete).
+ * ES5-style to match the dashboard's other public scripts. */
+(function () {
+  "use strict";
+
+  var events = new Map(); // id -> event
+
+  var els = {
+    tbody: document.getElementById("pl-tbody"),
+    table: document.getElementById("pl-table"),
+    empty: document.getElementById("pl-empty"),
+    summary: document.getElementById("pl-summary"),
+    storage: document.getElementById("cp-storage")
+  };
+
+  // Bound the initial load — the global lint log is append-only and can grow
+  // large. Live SSE events keep the in-memory view current beyond this window.
+  var PAGE_LIMIT = 200;
+
+  function fmtTime(iso) {
+    if (!iso) return "—";
+    var d = new Date(iso);
+    if (isNaN(d.getTime())) return iso;
+    return d.toLocaleString();
+  }
+
+  function scoreClass(score) {
+    if (typeof score !== "number") return "";
+    if (score < 40) return "pl-score-low";
+    if (score < 70) return "pl-score-mid";
+    return "pl-score-high";
+  }
+
+  function sorted() {
+    return Array.from(events.values()).sort(function (a, b) {
+      var c = (b.timestamp || "").localeCompare(a.timestamp || "");
+      if (c !== 0) return c;
+      return (b.id || "").localeCompare(a.id || "");
+    });
+  }
+
+  function renderTagCells(missing) {
+    var td = document.createElement("td");
+    td.className = "pl-missing";
+    if (!missing || !missing.length) {
+      td.textContent = "—";
+      return td;
+    }
+    for (var i = 0; i < missing.length; i++) {
+      var span = document.createElement("span");
+      span.className = "pl-tag";
+      span.textContent = missing[i];
+      td.appendChild(span);
+    }
+    return td;
+  }
+
+  function rowFor(e, isNew) {
+    var tr = document.createElement("tr");
+    if (isNew) tr.className = "pl-row-new";
+
+    var when = document.createElement("td");
+    when.className = "pl-when";
+    when.textContent = fmtTime(e.timestamp);
+    tr.appendChild(when);
+
+    var score = document.createElement("td");
+    score.className = "pl-score " + scoreClass(e.score);
+    score.textContent = (typeof e.score === "number" ? e.score : "?") + "%";
+    if (typeof e.threshold === "number") score.title = "threshold " + e.threshold + "%";
+    tr.appendChild(score);
+
+    tr.appendChild(renderTagCells(e.missing));
+
+    var source = document.createElement("td");
+    source.className = "pl-source";
+    source.textContent = e.source || "—";
+    tr.appendChild(source);
+
+    var excerpt = document.createElement("td");
+    excerpt.className = "pl-excerpt";
+    excerpt.textContent = e.prompt_excerpt || "—";
+    if (e.prompt_excerpt) excerpt.title = e.prompt_excerpt;
+    tr.appendChild(excerpt);
+
+    return tr;
+  }
+
+  function render(newId) {
+    var list = sorted();
+    els.tbody.innerHTML = "";
+    if (!list.length) {
+      els.empty.hidden = false;
+      els.table.hidden = true;
+      els.summary.textContent = "";
+      return;
+    }
+    els.empty.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 + ")" : "");
+  }
+
+  function loadInitial() {
+    return fetch("/api/prompt-lints?limit=" + PAGE_LIMIT)
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        (data.events || []).forEach(function (e) {
+          if (e && e.id) events.set(e.id, e);
+        });
+        if (els.storage && data.storage) els.storage.textContent = data.storage;
+        render(null);
+      })
+      .catch(function () { render(null); });
+  }
+
+  function startStream() {
+    var es = new EventSource("/api/claude-plans/stream");
+    es.addEventListener("lint:upsert", function (msg) {
+      try {
+        var data = JSON.parse(msg.data);
+        if (data && data.lint && data.lint.id) {
+          events.set(data.lint.id, data.lint);
+          render(data.lint.id);
+        }
+      } catch (_) {}
+    });
+    es.addEventListener("lint:delete", function (msg) {
+      try {
+        var data = JSON.parse(msg.data);
+        if (data && data.id) {
+          events.delete(data.id);
+          render(null);
+        }
+      } catch (_) {}
+    });
+    es.onerror = function () { /* EventSource auto-reconnects */ };
+  }
+
+  /* Theme toggle — mirrors claude-plans.js */
+  function currentTheme() {
+    var attr = document.documentElement.getAttribute("data-theme");
+    if (attr === "dark" || attr === "light") return attr;
+    try {
+      var saved = localStorage.getItem("cp-theme");
+      if (saved === "dark" || saved === "light") return saved;
+    } catch (_) {}
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+
+  function applyTheme(theme) {
+    document.documentElement.setAttribute("data-theme", theme);
+    try { localStorage.setItem("cp-theme", theme); } catch (_) {}
+    var btn = document.getElementById("cp-theme-toggle");
+    if (btn) {
+      btn.textContent = theme === "dark" ? "☀︎" : "☾";
+      btn.title = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
+    }
+  }
+
+  function setupTheme() {
+    applyTheme(currentTheme());
+    var btn = document.getElementById("cp-theme-toggle");
+    if (btn) {
+      btn.addEventListener("click", function () {
+        applyTheme(currentTheme() === "dark" ? "light" : "dark");
+      });
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    setupTheme();
+    loadInitial().then(startStream);
+  });
+})();

package/server.js

@@ -834,6 +834,12 @@ function promptsDirFor(slug) {
   return path.join(CLAUDE_PLANS_DIR, slug, "prompts");
 }
 
+// Prompt lint events are global (not nested under a plan). Stored by
+// @tenonhq/dovetail-claude-plans at <root>/_lint-events/<id>.json.
+function lintEventsDir() {
+  return path.join(CLAUDE_PLANS_DIR, "_lint-events");
+}
+
 function safeReadJson(filePath) {
   try {
     if (!fs.existsSync(filePath)) return null;
@@ -895,8 +901,32 @@ function listClaudePrompts(slug) {
   return prompts;
 }
 
-// Parse a watcher path like "<root>/<slug>.json" or
-// "<root>/<slug>/artifacts/<artifact-slug>.json" into { kind, slug, artifactSlug }.
+function listClaudeLintEvents(filters) {
+  const dir = lintEventsDir();
+  if (!fs.existsSync(dir)) return [];
+  const f = filters || {};
+  const entries = fs.readdirSync(dir);
+  const events = [];
+  for (let i = 0; i < entries.length; i++) {
+    if (!entries[i].endsWith(".json")) continue;
+    const e = safeReadJson(path.join(dir, entries[i]));
+    if (!e) continue;
+    if (f.session_id !== undefined && e.session_id !== f.session_id) continue;
+    if (f.plan_slug !== undefined && e.plan_slug !== f.plan_slug) continue;
+    events.push(e);
+  }
+  events.sort(function (a, b) {
+    const c = (b.timestamp || "").localeCompare(a.timestamp || "");
+    if (c !== 0) return c;
+    return (b.id || "").localeCompare(a.id || "");
+  });
+  if (typeof f.limit === "number") return events.slice(0, f.limit);
+  return events;
+}
+
+// Parse a watcher path like "<root>/<slug>.json",
+// "<root>/<slug>/artifacts/<artifact-slug>.json", or
+// "<root>/_lint-events/<id>.json" into { kind, ... }.
 function classifyPath(filePath) {
   const rel = path.relative(CLAUDE_PLANS_DIR, filePath);
   if (!rel || rel.startsWith("..")) return null;
@@ -904,6 +934,9 @@ function classifyPath(filePath) {
   if (parts.length === 1 && parts[0] === ".focus") {
     return { kind: "focus" };
   }
+  if (parts.length === 2 && parts[0] === "_lint-events" && parts[1].endsWith(".json")) {
+    return { kind: "lint", id: parts[1].slice(0, -5) };
+  }
   if (parts.length === 1 && parts[0].endsWith(".json")) {
     return { kind: "plan", slug: parts[0].slice(0, -5) };
   }
@@ -972,6 +1005,15 @@ function handleWatcherChange(event, filePath) {
     }
     const prompt = safeReadJson(filePath);
     if (prompt) broadcastClaudePlanEvent("prompt:upsert", { prompt: prompt });
+    return;
+  }
+  if (info.kind === "lint") {
+    if (event === "unlink") {
+      broadcastClaudePlanEvent("lint:delete", { id: info.id });
+      return;
+    }
+    const lint = safeReadJson(filePath);
+    if (lint) broadcastClaudePlanEvent("lint:upsert", { lint: lint });
   }
 }
 
@@ -1000,6 +1042,25 @@ app.get(["/claude-plans", "/claude-plans/:slug"], function (req, res) {
   res.sendFile(path.join(__dirname, "public", "claude-plans.html"));
 });
 
+app.get("/prompt-lints", function (req, res) {
+  res.sendFile(path.join(__dirname, "public", "prompt-lints.html"));
+});
+
+app.get("/api/prompt-lints", function (req, res) {
+  try {
+    const filters = {};
+    if (typeof req.query.session_id === "string") filters.session_id = req.query.session_id;
+    if (typeof req.query.plan_slug === "string") filters.plan_slug = req.query.plan_slug;
+    if (typeof req.query.limit === "string") {
+      const n = parseInt(req.query.limit, 10);
+      if (!isNaN(n) && n > 0) filters.limit = Math.min(n, 1000); // mirror getLintEventsSchema cap
+    }
+    res.json({ events: listClaudeLintEvents(filters), storage: CLAUDE_PLANS_DIR });
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
 app.get("/api/claude-plans", function (req, res) {
   try {
     res.json({ plans: listClaudePlans(), storage: CLAUDE_PLANS_DIR });