@tenonhq/dovetail-dashboard 0.0.17 → 0.0.18

package/package.json

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

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

@@ -961,3 +961,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>

package/public/claude-plans.js

@@ -7,9 +7,21 @@
 (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"
+      });
+    }
+  }
+  initMermaid();
+
   if (window.marked && typeof window.marked.setOptions === "function") {
     window.marked.setOptions({ breaks: true, gfm: true });
   }
@@ -472,7 +484,32 @@
     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();
     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;
+}