@tenonhq/dovetail-dashboard 0.0.14 → 0.0.16

package/package.json

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

package/public/claude-plans.css

@@ -105,7 +105,7 @@
 .cp-detail-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
 .cp-detail-header h2 { font-size: 20px; margin: 0; }
 .cp-stamp { font-size: 11px; color: var(--text-muted); margin-left: auto; }
-.cp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
+.cp-tabs { display: flex; gap: 0; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
 .cp-tab {
   background: transparent;
   border: none;
@@ -148,8 +148,8 @@
 }
 .cp-artifact-head {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 8px;
   margin-bottom: 12px;
 }
 .cp-artifact-title { font-weight: 600; font-size: 14px; }
@@ -641,3 +641,49 @@
   white-space: nowrap;
 }
 .cp-pr-badge:hover { background: rgba(100,140,190,0.25); color: var(--text); }
+
+/* ─── Resume button in plan detail header ──────────────────────────────────── */
+.cp-resume-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: rgba(74, 140, 92, 0.15);
+  color: #92d3a4;
+  border: 1px solid rgba(74, 140, 92, 0.4);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s, color 0.15s;
+}
+.cp-resume-btn:hover {
+  background: rgba(74, 140, 92, 0.28);
+  color: var(--text);
+}
+
+/* ─── Toast notification ────────────────────────────────────────────────────── */
+.cp-toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: var(--card-bg);
+  border: 1px solid rgba(74, 140, 92, 0.5);
+  border-left: 3px solid #4a8c5c;
+  color: #92d3a4;
+  padding: 9px 16px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+  z-index: 9999;
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 0.2s, transform 0.2s;
+  pointer-events: none;
+}
+.cp-toast--visible {
+  opacity: 1;
+  transform: translateY(0);
+}

package/public/claude-plans.js

@@ -66,6 +66,18 @@
     setTimeout(function () { el.remove(); }, 4000);
   }
 
+  function showToast(msg) {
+    var el = document.createElement("div");
+    el.className = "cp-toast";
+    el.textContent = msg;
+    document.body.appendChild(el);
+    setTimeout(function () { el.classList.add("cp-toast--visible"); }, 10);
+    setTimeout(function () {
+      el.classList.remove("cp-toast--visible");
+      setTimeout(function () { el.remove(); }, 300);
+    }, 2200);
+  }
+
   function renderMarkdown(md, target) {
     if (!window.marked || !window.DOMPurify) {
       target.textContent = md;
@@ -99,6 +111,84 @@
     }
   }
 
+  /* ─── Copy helpers ─────────────────────────────────────────────────────────── */
+
+  function fallbackCopy(text) {
+    var ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.cssText = "position:fixed;left:-9999px;top:-9999px;opacity:0";
+    document.body.appendChild(ta);
+    ta.select();
+    try { document.execCommand("copy"); } catch (_) {}
+    ta.remove();
+  }
+
+  function makeCopyBtn(label, getText) {
+    var btn = document.createElement("button");
+    btn.className = "cp-copy-btn";
+    btn.textContent = label;
+    btn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      var text = getText();
+      var flash = function () {
+        btn.textContent = "Copied!";
+        btn.classList.add("cp-copy-btn--copied");
+        setTimeout(function () {
+          btn.textContent = label;
+          btn.classList.remove("cp-copy-btn--copied");
+        }, 1500);
+      };
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(flash).catch(function () {
+          fallbackCopy(text);
+          flash();
+        });
+      } else {
+        fallbackCopy(text);
+        flash();
+      }
+    });
+    return btn;
+  }
+
+  function addTabsCopyAll(plan, artifacts) {
+    var existing = document.getElementById("cp-tabs-copy-all");
+    if (existing) existing.remove();
+
+    var btn = makeCopyBtn("Copy All", function () {
+      if (state.activeTab === "artifacts") {
+        return artifacts.map(function (a) {
+          return "# " + a.title + "\n\n" + a.content;
+        }).join("\n\n---\n\n");
+      }
+      return plan.content_md && plan.content_md.trim()
+        ? plan.content_md
+        : els.planPanel.innerText.trim();
+    });
+    btn.id = "cp-tabs-copy-all";
+    btn.style.marginLeft = "auto";
+    var tabsEl = document.querySelector(".cp-tabs");
+    if (tabsEl) tabsEl.appendChild(btn);
+  }
+
+  function addPlanSectionCopyBtns() {
+    var structured = els.planPanel.querySelector(".cp-structured");
+    if (!structured) return;
+    var children = Array.from(structured.children);
+    children.forEach(function (child) {
+      child.classList.add("cp-c-copy-wrap");
+      var group = document.createElement("div");
+      group.className = "cp-copy-btn-group";
+      var btn = makeCopyBtn("Copy", (function (el) {
+        return function () { return el.innerText.trim(); };
+      })(child));
+      group.appendChild(btn);
+      child.appendChild(group);
+    });
+  }
+
+  /* ─────────────────────────────────────────────────────────────────────────── */
+
   function renderRail() {
     var plans = sortedPlans();
     els.count.textContent = String(plans.length);
@@ -165,6 +255,8 @@
     if (!state.selectedSlug || !state.plans.has(state.selectedSlug)) {
       els.detailEmpty.style.display = "block";
       els.detailBody.hidden = true;
+      var orphan = document.getElementById("cp-tabs-copy-all");
+      if (orphan) orphan.remove();
       return;
     }
     var plan = state.plans.get(state.selectedSlug);
@@ -193,6 +285,28 @@
       els.detailStamp.insertAdjacentElement("afterend", prBadge);
     }
 
+    var existingResumeBtn = document.getElementById("cp-resume-btn");
+    if (existingResumeBtn) existingResumeBtn.remove();
+    var resumeBtn = document.createElement("button");
+    resumeBtn.id = "cp-resume-btn";
+    resumeBtn.className = "cp-resume-btn";
+    resumeBtn.textContent = "Resume";
+    resumeBtn.title = "Copy /resume command to clipboard";
+    resumeBtn.addEventListener("click", function () {
+      var cmd = "/resume " + plan.slug;
+      var finish = function () { showToast("Copied! Paste into Claude."); };
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(cmd).then(finish).catch(function () {
+          fallbackCopy(cmd);
+          finish();
+        });
+      } else {
+        fallbackCopy(cmd);
+        finish();
+      }
+    });
+    els.detailStatus.insertAdjacentElement("afterend", resumeBtn);
+
     if (plan.content_html) {
       els.planPanel.innerHTML = window.DOMPurify
         ? window.DOMPurify.sanitize(plan.content_html)
@@ -201,6 +315,9 @@
       renderMarkdown(plan.content_md, els.planPanel);
     }
 
+    addPlanSectionCopyBtns();
+    addTabsCopyAll(plan, artifacts);
+
     els.artifactsPanel.innerHTML = "";
     if (artifacts.length === 0) {
       var empty = document.createElement("div");
@@ -222,6 +339,14 @@
         kind.textContent = artifact.kind;
         head.appendChild(title);
         head.appendChild(kind);
+
+        var copyGroup = document.createElement("div");
+        copyGroup.className = "cp-copy-btn-group cp-copy-btn-group--artifact";
+        copyGroup.appendChild(makeCopyBtn("Copy", (function (content) {
+          return function () { return content; };
+        })(artifact.content)));
+        head.appendChild(copyGroup);
+
         card.appendChild(head);
 
         var body = document.createElement("div");