@lyric_dev/data-loom 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyric_dev/data-loom",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Local dashboard for spec-driven development: a phased OpenSpec roadmap (WHAT) and an MCP topology (HOW).",
   "type": "module",
   "license": "MIT",

package/public/app.js

@@ -180,8 +180,12 @@ function renderReview() {
   reviewEl.appendChild(el("span", "review-badge", String(n)));
   const txt = el("span", "review-text");
   const subject = n > 1 ? "proposals need" : "proposal needs";
-  txt.innerHTML = `${n} ${subject} dependency review — ask Claude to <b>weave</b> ${n > 1 ? "them" : "it"} via the data-loom MCP server.`;
+  txt.innerHTML = `${n} ${subject} dependency review — copy the <b>weave</b> command to run it in Claude Code.`;
   reviewEl.appendChild(txt);
+  const btn = el("button", "banner-action", "Weave");
+  btn.title = "Copy /loom:weave";
+  btn.addEventListener("click", () => copyCommand("/loom:weave"));
+  reviewEl.appendChild(btn);
 }
 
 function clearBoard() {
@@ -272,6 +276,16 @@ function renderCard(c) {
     const text = [capsParts.join("  "), tasks].filter(Boolean).join(" · ");
     body.appendChild(el("div", "gcard-caps", text));
   }
+  const action = changeAction(c);
+  if (action) {
+    const btn = el("button", "card-action " + action.kind, action.label);
+    btn.title = "Copy " + action.command;
+    btn.addEventListener("click", (ev) => {
+      ev.stopPropagation(); // copy only — don't also select the card / open detail
+      copyCommand(action.command);
+    });
+    body.appendChild(btn);
+  }
   card.appendChild(body);
 
   if (nextUpNames.has(c.name)) card.appendChild(el("div", "gcard-next", "NEXT UP"));
@@ -524,6 +538,13 @@ function renderChangeDetail(c) {
   pills.appendChild(rp);
   inner.appendChild(pills);
 
+  const action = changeAction(c);
+  if (action) {
+    const btn = el("button", "detail-action " + action.kind, "Copy " + action.command);
+    btn.addEventListener("click", () => copyCommand(action.command));
+    inner.appendChild(btn);
+  }
+
   if (c.totalTasks > 0) {
     const pct = Math.round((c.completedTasks / c.totalTasks) * 100);
     const tasks = el("div", "detail-tasks");
@@ -607,6 +628,57 @@ function itemList(items, cls, prefix) {
   return list;
 }
 
+// ═══════════════ command handoff (clipboard + toast) ═══════════════
+
+// A single reused toast node, auto-dismissed. DataLoom prepares a command; the
+// user runs it in their own Claude Code session — so a copy is confirmed here,
+// never executed.
+let toastEl = null;
+let toastTimer = null;
+function showToast(message, tone) {
+  if (!toastEl) {
+    toastEl = el("div", "toast");
+    document.body.appendChild(toastEl);
+  }
+  toastEl.textContent = message;
+  toastEl.className = "toast" + (tone ? " " + tone : "");
+  // force reflow so re-triggering the transition restarts it
+  void toastEl.offsetWidth;
+  toastEl.classList.add("show");
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => toastEl.classList.remove("show"), 3200);
+}
+
+// Copy a Claude Code command to the clipboard and confirm via a toast. Purely
+// client-side: no network call, no daemon/agent activity. On localhost the
+// Clipboard API is available (secure context); a rejection or its absence falls
+// back to showing the command for manual copy.
+async function copyCommand(command) {
+  try {
+    await navigator.clipboard.writeText(command);
+    showToast(`Copied ${command} — paste into Claude Code`);
+  } catch {
+    showToast(`Couldn't copy — run this in Claude Code: ${command}`, "warn");
+  }
+}
+
+// The command action a change offers, derived from state the model already
+// carries. Kept in one place so a card and the detail panel always agree:
+//   archived            → nothing
+//   tasks all complete  → archive
+//   ready (incomplete)  → apply
+//   otherwise           → nothing
+function changeAction(c) {
+  if (c.archived) return null;
+  if (c.totalTasks > 0 && c.completedTasks === c.totalTasks) {
+    return { kind: "archive", label: "Archive", command: "/opsx:archive " + c.name };
+  }
+  if (c.readiness === "ready") {
+    return { kind: "apply", label: "Apply", command: "/opsx:apply " + c.name };
+  }
+  return null;
+}
+
 // ═══════════════ helpers ═══════════════
 
 function statusColor(status) {

package/public/style.css

@@ -540,6 +540,108 @@ main {
   color: var(--text);
   font-family: var(--prose);
 }
+.banner-action {
+  flex: none;
+  margin-left: auto;
+  font-family: var(--prose);
+  font-weight: 600;
+  font-size: 12px;
+  padding: 6px 15px;
+  border-radius: 8px;
+  border: 1px solid var(--accent-bd);
+  background: var(--panel);
+  color: var(--accent);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.banner-action:hover {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+
+/* ===== Command handoff: card/detail actions + toast ===== */
+.card-action {
+  align-self: flex-start;
+  margin-top: 10px;
+  font-family: var(--prose);
+  font-weight: 600;
+  font-size: 11px;
+  padding: 4px 11px;
+  border-radius: 7px;
+  border: 1px solid var(--accent-bd);
+  background: var(--accent-soft);
+  color: var(--accent);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.card-action:hover {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.card-action.archive {
+  border-color: var(--c-done);
+  color: var(--c-done);
+  background: transparent;
+}
+.card-action.archive:hover {
+  background: var(--c-done);
+  color: var(--on-accent);
+}
+
+.detail-action {
+  margin-top: 16px;
+  width: 100%;
+  font-family: var(--prose);
+  font-weight: 600;
+  font-size: 12.5px;
+  padding: 9px;
+  border-radius: 9px;
+  border: 1px solid var(--accent-bd);
+  background: var(--accent-soft);
+  color: var(--accent);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.detail-action:hover {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.detail-action.archive {
+  border-color: var(--c-done);
+  color: var(--c-done);
+}
+.detail-action.archive:hover {
+  background: var(--c-done);
+  color: var(--on-accent);
+}
+
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 26px;
+  transform: translate(-50%, 12px);
+  max-width: min(70vw, 480px);
+  padding: 11px 16px;
+  border-radius: 10px;
+  background: var(--panel);
+  border: 1px solid var(--accent-bd);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  box-shadow: var(--shadow);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 40;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.toast.show {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+.toast.warn {
+  border-color: var(--c-warn);
+  color: var(--c-warn);
+}
 
 /* ===== MCP Topology: circuit board ===== */
 .topo-controls {