@lyric_dev/data-loom 0.7.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyric_dev/data-loom",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "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

@@ -29,9 +29,9 @@ let conflictedNames = new Set();
 let doneCollapsed = true;
 const liveOverride = new Map(); // server name -> transient liveness (e.g. "checking")
 
-// ── roadmap graph geometry (fixed design canvas, 1180×600) ──
+// ── roadmap graph geometry (fixed left/right margin + fixed per-phase pitch) ──
 const G_MX = 150,
-  G_W = 1180,
+  PHASE_SPAN = 260, // horizontal pitch between phase columns (234px frame + gutter)
   N_HALF = 105,
   N_TOP = 58,
   V_SPACE = 170;
@@ -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() {
@@ -200,8 +204,11 @@ function renderBoard() {
   }
 
   const phaseNums = [...new Set(open.map((c) => c.phase))].sort((a, b) => a - b);
-  const span = (G_W - 2 * G_MX) / Math.max(phaseNums.length - 1, 1);
-  const gx = (p) => G_MX + phaseNums.indexOf(p) * span;
+  // Fixed per-phase pitch → the canvas grows wider as phases are added instead of
+  // squeezing columns into a constant width. Wide plans then scroll horizontally
+  // (see .board-wrap) rather than overlapping.
+  const canvasW = 2 * G_MX + Math.max(phaseNums.length - 1, 0) * PHASE_SPAN;
+  const gx = (p) => G_MX + phaseNums.indexOf(p) * PHASE_SPAN;
 
   // Grow the canvas vertically so the tallest phase always fits (real projects
   // can stack many cards in one phase). CARD_BAND leaves headroom for the
@@ -210,8 +217,9 @@ function renderBoard() {
   const maxN = Math.max(1, ...phaseNums.map((p) => open.filter((c) => c.phase === p).length));
   const canvasH = Math.max(600, (maxN - 1) * V_SPACE + CARD_BAND);
   const cy = canvasH / 2;
+  board.style.width = canvasW + "px";
   board.style.height = canvasH + "px";
-  edgesSvg.setAttribute("viewBox", `0 0 ${G_W} ${canvasH}`);
+  edgesSvg.setAttribute("viewBox", `0 0 ${canvasW} ${canvasH}`);
 
   // Phase-band frames (behind everything), sized to the canvas.
   phaseNums.forEach((p, i) => {
@@ -272,6 +280,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 +542,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 +632,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

@@ -293,12 +293,12 @@ main {
 
 .board-wrap {
   position: relative;
+  overflow-x: auto; /* wide roadmaps (many phases) pan horizontally; banners above stay fixed */
 }
 .board {
   position: relative;
-  width: 1180px;
-  height: 600px;
-  margin: 0 auto;
+  height: 600px; /* width + height are set from JS per phase/card count */
+  margin: 0 auto; /* centers when it fits; collapses to 0 when it overflows and scrolls */
 }
 .edges {
   position: absolute;
@@ -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 {