@tenonhq/dovetail-dashboard 0.0.17 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.17",
+  "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/app.js

@@ -1046,3 +1046,31 @@ document.getElementById("task-search").addEventListener("input", function (e) {
 
 // Render task toggles (My Tasks)
 renderTaskToggles();
+
+// --- Theme toggle ---
+
+function currentTheme() {
+  return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+}
+
+function applyTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+  try {
+    localStorage.setItem("cp-theme", theme);
+  } catch (e) {}
+  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");
+    });
+  }
+})();

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
@@ -961,3 +1044,41 @@
   opacity: 1;
   transform: translateY(0);
 }
+
+/* ════════════════════════════════════════════════════════════════════════════
+   Dark theme overrides.
+   The page already flows through the semantic tokens, so only the semantic
+   color chips that hardcode light pastels need explicit dark variants here.
+   The .cp-theme-toggle button itself is styled in styles.css (shared).
+   ════════════════════════════════════════════════════════════════════════════ */
+[data-theme="dark"] .cp-status-DRAFT    { background: #322d0c; color: #e8d860; border-color: #f4dc0033; }
+[data-theme="dark"] .cp-status-APPROVED { background: #14301c; color: #8fe39d; border-color: #62dc4433; }
+
+[data-theme="dark"] .cp-c-badge-success { background: #14301c; color: #8fe39d; border-color: #62dc4433; }
+[data-theme="dark"] .cp-c-badge-warning { background: #322d0c; color: #e8d860; border-color: #f4dc0033; }
+[data-theme="dark"] .cp-c-badge-danger  { background: #371616; color: #f08f8f; border-color: #f4393933; }
+[data-theme="dark"] .cp-c-badge-info    { background: #0e2c3a; color: #8fd9f5; border-color: #76d6ff33; }
+
+[data-theme="dark"] .cp-c-callout-info    { background: #0e2c3a55; border-color: #76d6ff33; }
+[data-theme="dark"] .cp-c-callout-success { background: #14301c55; border-color: #62dc4433; }
+[data-theme="dark"] .cp-c-callout-warning { background: #322d0c55; border-color: #f4dc0033; }
+[data-theme="dark"] .cp-c-callout-danger  { background: #37161655; border-color: #f4393933; }
+[data-theme="dark"] .cp-c-callout-info    .cp-c-callout-icon { color: #8fd9f5; }
+[data-theme="dark"] .cp-c-callout-success .cp-c-callout-icon { color: #8fe39d; }
+[data-theme="dark"] .cp-c-callout-warning .cp-c-callout-icon { color: #e8d860; }
+[data-theme="dark"] .cp-c-callout-danger  .cp-c-callout-icon { color: #f08f8f; }
+
+[data-theme="dark"] .cp-mermaid-error {
+  background: #37161655;
+  border-color: #f4393933;
+}
+
+[data-theme="dark"] .cp-pr-badge {
+  background: #0e2c3a;
+  color: #8fd9f5;
+  border-color: #76d6ff33;
+}
+[data-theme="dark"] .cp-pr-badge:hover {
+  background: #14384a;
+  color: #b6e8ff;
+}

package/public/claude-plans.html

@@ -4,6 +4,17 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Dovetail — Claude Plans</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" />
@@ -19,6 +30,8 @@
     </div>
     <div class="header-right">
       <a class="cp-nav-link" href="/">&larr; Update Sets</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>
@@ -29,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>
 
@@ -60,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,15 +1,31 @@
 /* /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 () {
   "use strict";
 
-  if (window.mermaid && typeof window.mermaid.initialize === "function") {
-    window.mermaid.initialize({ startOnLoad: false, theme: "default", securityLevel: "strict" });
+  function currentTheme() {
+    return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
   }
+
+  function initMermaid() {
+    if (window.mermaid && typeof window.mermaid.initialize === "function") {
+      window.mermaid.initialize({
+        startOnLoad: false,
+        theme: currentTheme() === "dark" ? "dark" : "default",
+        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
+      });
+    }
+  }
+  initMermaid();
+
   if (window.marked && typeof window.marked.setOptions === "function") {
     window.marked.setOptions({ breaks: true, gfm: true });
   }
@@ -18,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 = {
@@ -26,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"),
@@ -37,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 [];
@@ -87,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);
     }
   }
 
@@ -191,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;
@@ -377,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();
@@ -472,7 +637,33 @@
     es.onerror = function () { /* EventSource auto-reconnects */ };
   }
 
+  /* ─── Theme toggle ─────────────────────────────────────────────────────────── */
+
+  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";
+    }
+    initMermaid();
+  }
+
+  function setupTheme() {
+    applyTheme(currentTheme());
+    var btn = document.getElementById("cp-theme-toggle");
+    if (btn) {
+      btn.addEventListener("click", function () {
+        applyTheme(currentTheme() === "dark" ? "light" : "dark");
+        if (state.selectedSlug) renderDetail();
+      });
+    }
+  }
+
   document.addEventListener("DOMContentLoaded", function () {
+    setupTheme();
+    setupSearch();
     setActiveTab("plan");
     loadInitial().then(startStream);
   });

package/public/index.html

@@ -4,6 +4,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dovetail — Update Sets</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">
 </head>
@@ -20,6 +31,8 @@
     <div class="header-right">
       <button class="btn-refresh" id="refresh-btn" title="Refresh scopes and update sets">Refresh</button>
       <a class="btn-refresh" href="/claude-plans" title="Claude plans and diagrams pushed via MCP">Claude Plans</a>
+      <button class="cp-theme-toggle" id="cp-theme-toggle" type="button"
+        aria-label="Toggle dark mode" title="Toggle dark mode"></button>
       <div class="active-task-chip" id="active-task-chip" style="display:none;"></div>
       <div class="instance-badge" id="instance-badge">Loading...</div>
     </div>

package/public/styles.css

@@ -887,3 +887,31 @@ header h1 span {
 .recent-edit-dismiss:hover {
   color: var(--danger);
 }
+
+/* ── Theme toggle button (header) — shared by dashboard + Claude Plans ──── */
+.cp-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1;
+  background: var(--surface-raised);
+  color: var(--fg-muted);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--dur-1) var(--ease-out),
+    color var(--dur-1) var(--ease-out);
+}
+.cp-theme-toggle:hover {
+  background: var(--bg-subtle);
+  color: var(--fg);
+}
+.cp-theme-toggle:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(50, 181, 127, 0.18);
+}

package/public/tokens.css

@@ -160,3 +160,64 @@
   --av-pink-bg: #fb61fe;         --av-pink-fg: #fbf8f3;
   --av-earthy-bg: #dcd4c0;       --av-earthy-fg: #987e59;
 }
+
+/* ============================================================================
+   Dark theme — activated by <html data-theme="dark">.
+   Used by the Claude Plans page; safe to adopt dashboard-wide later.
+   Overrides the semantic aliases only — the raw color scales above are shared.
+   Brand emerald and neon accent are preserved; grounds invert to dark woodgrain.
+   ============================================================================ */
+[data-theme="dark"] {
+  --bg: #0d1410;
+  --bg-subtle: #121c16;
+  --bg-muted: #18241c;
+  --bg-paper: #121c16;
+  --bg-oak: #20302554;
+  --bg-deep: #060b08;
+  --bg-overlay: rgba(0, 0, 0, 0.66);
+
+  --surface: #121c16;
+  --surface-raised: #18241c;
+
+  --fg: #e9efe9;
+  --fg-muted: #8da095;
+  --fg-subtle: #5f7167;
+  --fg-on-dark: #e9efe9;
+  --fg-on-neon: var(--emerald-700);
+
+  --accent: var(--neon-300);
+  --accent-hover: var(--neon-500);
+  --accent-press: var(--neon-700);
+  --accent-fg: #0d1410;
+
+  --brand: var(--emerald-50);
+  --brand-deep: #e9efe9;
+
+  --success: var(--success-300);
+  --warning: var(--warning-300);
+  --danger: var(--error-300);
+  --danger-hover: var(--error-500);
+  --info: var(--blue-300);
+
+  --border: #26342b;
+  --border-strong: #344538;
+  --border-subtle: #1d2922;
+  --border-focus: var(--neon-500);
+
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --shadow-3: 0 10px 34px rgba(0, 0, 0, 0.6);
+  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.7);
+
+  /* ===== Tag color pairs — dark grounds, light ink ===================== */
+  --tag-green-bg: #14301c;  --tag-green-fg: #8fe39d;
+  --tag-blue-bg: #182040;   --tag-blue-fg: #aab4ff;
+  --tag-cyan-bg: #0e2c3a;   --tag-cyan-fg: #8fd9f5;
+  --tag-sage-bg: #1d2922;   --tag-sage-fg: #b6c6bc;
+  --tag-warm-bg: #2c2417;   --tag-warm-fg: #d8c4a2;
+  --tag-yellow-bg: #322d0c; --tag-yellow-fg: #e8d860;
+  --tag-purple-bg: #2a1633; --tag-purple-fg: #e29bf0;
+  --tag-orange-bg: #331c0c; --tag-orange-fg: #f0a878;
+  --tag-red-bg: #371616;    --tag-red-fg: #f08f8f;
+  --tag-teal-bg: #103027;   --tag-teal-fg: #6fd1ad;
+}