scrumrun 4.2.0 → 4.2.1

package/CHANGELOG.md

@@ -4,13 +4,21 @@ All notable changes follow Semantic Versioning.
 
 ## Unreleased
 
+## 4.2.1 - 2026-09-22
+
+### Changed
+
+- **`scrumrun view` drawer renders Markdown.** The right-side detail panel now parses artifact bodies (headings h1–h4, bullet + ordered lists, inline `code` and fenced code blocks, links, bold/italic, blockquotes, `hr`) and displays them formatted instead of dumping the raw file. A structured metadata card (`id`, `kind`, `status`, `type`, `created`, `updated`, `feature`, `sprint`, `branch`, `assignee`, `method` — plus any extra frontmatter fields) renders above the body. Artifact ids (`TASK-*`, `RUN-*`, `FEAT-*`, `SPRINT-*`, `DEC-*`, `K-*`, `INS-*`, `DOS-*`, `GR-*`, `REV-*`) appearing in prose are auto-linked as `<code>`. A "open raw file" link at the bottom keeps the plain view one click away.
+- **Canonical status columns always visible.** `backlog`, `running`, and `completed` render even when they contain no tasks, so the kanban layout is predictable across projects. Empty columns show a `—` placeholder.
+- **Guardrails / Recent Runs / Decisions list layout.** Id renders in monospace on the left (72 px reserved column) with the title next to it — no more `justify-between` stretch that pushed the title to the far right of a wide viewport. Optional status badge on the right side.
+
 ## 4.2.0 - 2026-09-22
 
 ### Added
 
 - **`scrumrun sync`.** Team-first git wrapper: fetches the remote, rebases the current branch, refreshes `state.md`, and optionally runs `repair --apply` (with `--repair --apply`). Refuses cleanly when the tree is dirty, when git isn't set up, when there's no remote, or when HEAD is detached — so no half-applied merges. Returns structured JSON so wrappers can automate.
 - **`scrumrun lock <acquire|release|status|reap> [ARTIFACT-ID]`.** Cooperative soft locks under `.scrumrun/.locks/<ID>.lock`. Auto-expire after 15 minutes (configurable via `--ttl <minutes>`). Non-owner release is refused unless `--force`. `status` (without id) lists every active lock; `reap` sweeps expired locks. Advisory only — never gates writes, but surfaces "who's touching what" for teams working on the same repo. Owner detected from `SCRUMRUN_AGENT`/`USER`/`USERNAME`.
-- **`scrumrun view` visual polish.** Kanban / Compact / List mode toggle in the toolbar (persisted in `localStorage`). Per-column scroll containers so a huge Completed column doesn't stretch the whole grid. Card hover elevation, larger titles, rounded corners, count pills next to status headers. Cards now render `@assignee` as a highlighted chip and expose `data-assignee` for `?assignee=<name>` filtering. `?readonly=1` disables interactive affordances for stakeholder viewing.
+- **`scrumrun view` visual polish.** Kanban / Compact / List mode toggle in the toolbar (persisted in `localStorage`). Per-column scroll containers so a huge Completed column doesn't stretch the whole grid. Card hover elevation, larger titles, rounded corners, count pills next to status headers. Cards now render `@assignee` as a highlighted chip and expose `data-assignee` for `?assignee=<name>` filtering. `?readonly=1` disables interactive affordances for stakeholder viewing. Canonical columns (`backlog`, `running`, `completed`) always render even when empty so the layout stays predictable. **Detail drawer now renders Markdown** — headings, lists, code (inline + fenced), links, bold/italic, blockquotes, horizontal rules — plus a structured metadata card and auto-linked artifact ids. Guardrails / Recent Runs / Decisions lists now show the id on the left and the title next to it (no more far-right stretch), with an optional status badge on the right.
 
 ## 4.1.4 - 2026-09-22
 

package/README.md

@@ -4,7 +4,7 @@
 
 ScrumRun gives an agent a small command surface and a precise project memory: what should be done, how each attempt happened, which decisions constrain the code, and why the architecture exists in its current form.
 
-**Package:** `4.2.0` · **Method target:** `2.0.0` · **Runtime:** Node.js `>=22.13.0` · **License:** MIT
+**Package:** `4.2.1` · **Method target:** `2.0.0` · **Runtime:** Node.js `>=22.13.0` · **License:** MIT
 
 **New here?** Read the [Quickstart](docs/QUICKSTART.md) — first Run in under 10 minutes, no `SPEC.md` reading required. Full docs map in [`docs/INDEX.md`](docs/INDEX.md).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scrumrun",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Markdown-first Agile memory and guardrails for AI coding agents.",
   "bin": {
     "scrumrun": "bin/scrumrun.js",

package/templates/shared/view.html

@@ -71,11 +71,37 @@
   #detail.open { transform: translateX(0); }
   #detail pre { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 10px; border-radius: 6px; border: 1px solid var(--border); }
   #detail .close { float: right; background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; }
-  .list-item { padding: 6px 0; border-bottom: 1px dotted var(--border); cursor: pointer; }
+  .md { line-height: 1.55; font-size: 13.5px; color: var(--fg); }
+  .md h1, .md h2, .md h3, .md h4 { margin: 18px 0 8px; font-weight: 600; }
+  .md h1 { font-size: 20px; }
+  .md h2 { font-size: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
+  .md h3 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
+  .md h4 { font-size: 13px; color: var(--muted); }
+  .md p { margin: 8px 0; }
+  .md ul, .md ol { margin: 8px 0; padding-left: 22px; }
+  .md li { margin: 4px 0; }
+  .md code { font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); }
+  .md pre.md-code { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); margin: 10px 0; }
+  .md pre.md-code code { background: none; border: 0; padding: 0; font-size: inherit; }
+  .md a { color: var(--accent); text-decoration: none; }
+  .md a:hover { text-decoration: underline; }
+  .md strong { color: var(--fg); font-weight: 600; }
+  .md em { font-style: italic; }
+  .md hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
+  .md blockquote { border-left: 3px solid var(--border); padding: 4px 12px; margin: 10px 0; color: var(--muted); }
+  .md table { border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
+  .md th, .md td { border: 1px solid var(--border); padding: 4px 8px; }
+  .md th { background: var(--bg); font-weight: 600; }
+  .md-meta { display: grid; grid-template-columns: 100px 1fr; gap: 4px 12px; font-size: 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; }
+  .md-meta .k { font-family: var(--mono); color: var(--muted); font-size: 11px; }
+  .md-meta .v { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
+  .list-item { padding: 8px 0; border-bottom: 1px dotted var(--border); cursor: pointer; display: flex; align-items: baseline; gap: 12px; }
   .list-item:last-child { border-bottom: 0; }
-  .list-item:hover { color: var(--accent); }
-  .row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
-  .row .muted { color: var(--muted); }
+  .list-item:hover .row-text { color: var(--fg); }
+  .list-item:hover .row-id { color: var(--accent); }
+  .row-id { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 72px; flex-shrink: 0; letter-spacing: .04em; }
+  .row-text { font-size: 13px; color: var(--fg); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .row-meta { font-size: 11px; color: var(--muted); flex-shrink: 0; }
   .header-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
 </style>
 </head>
@@ -121,6 +147,7 @@
 (() => {
   "use strict";
   const STATUS_ORDER = ["backlog", "running", "in_progress", "validating", "learning", "blocked", "failed", "completed"];
+  const ALWAYS_SHOW_STATUSES = ["backlog", "running", "completed"];
   const STATUS_LABELS = {
     backlog: "Backlog",
     running: "Running",
@@ -190,18 +217,26 @@
       if (!bucket[status]) bucket[status] = [];
       bucket[status].push(task);
     }
-    const ordered = STATUS_ORDER.filter((s) => bucket[s] && bucket[s].length);
+    const ordered = STATUS_ORDER.filter((s) => (bucket[s] && bucket[s].length) || ALWAYS_SHOW_STATUSES.includes(s));
     const container = document.getElementById("kanban");
     container.innerHTML = "";
-    if (!ordered.length) { container.innerHTML = '<div class="empty">no tasks found</div>'; return; }
+    if (!tasks.length) { container.innerHTML = '<div class="empty">no tasks found</div>'; return; }
     for (const status of ordered) {
+      const items = bucket[status] || [];
       const col = document.createElement("div");
       col.className = "col";
-      col.innerHTML = `<h3>${STATUS_LABELS[status] || status} <span class="count">${bucket[status].length}</span></h3>`;
+      col.innerHTML = `<h3>${STATUS_LABELS[status] || status} <span class="count">${items.length}</span></h3>`;
       const body = document.createElement("div");
       body.className = "col-body";
       col.appendChild(body);
-      for (const task of bucket[status]) {
+      if (!items.length) {
+        const empty = document.createElement("div");
+        empty.className = "empty";
+        empty.style.padding = "6px 0";
+        empty.textContent = "—";
+        body.appendChild(empty);
+      }
+      for (const task of items) {
         const title = extractHeading(task.body);
         const type = task.record.type || "task";
         const branch = task.record.branch;
@@ -235,7 +270,7 @@
       const row = document.createElement("div");
       row.className = "list-item";
       row.innerHTML = format(item);
-      row.addEventListener("click", () => openDetail(item));
+      if (item && item.record) row.addEventListener("click", () => openDetail(item));
       el.appendChild(row);
     }
   }
@@ -248,26 +283,125 @@
       rules.push({ id: match[1], title: match[2] });
     }
     el.innerHTML = rules.length
-      ? rules.map((r) => `<div class="row"><span>${r.id}</span><span class="muted">${r.title}</span></div>`).join("")
+      ? rules.map((r) => `<div class="list-item"><span class="row-id">${r.id}</span><span class="row-text">${escape(r.title)}</span></div>`).join("")
       : '<div class="empty">no guardrails declared</div>';
   }
 
+  function escape(s) { return String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c])); }
+
+  function renderInline(text) {
+    let s = escape(text);
+    // code inline first (so we don't process markdown inside)
+    s = s.replace(/`([^`]+)`/g, (_, code) => `<code>${code}</code>`);
+    // links [text](url)
+    s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, href) => `<a href="${href}" target="_blank" rel="noopener">${label}</a>`);
+    // bold and italic
+    s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+    s = s.replace(/(^|[^*])\*([^*]+)\*/g, "$1<em>$2</em>");
+    // auto-link bare TASK-NNN / RUN-NNN / etc — do it last, and skip if already inside a tag
+    s = s.replace(/(^|\s)(TASK-\d+|RUN-\d+|FEAT-\d+|SPRINT-\d+|DEC-\d+|K-\d+|INS-\d+|DOS-\d+|GR-\d+|REV-\d+)(?![^<]*>)/g, "$1<code>$2</code>");
+    return s;
+  }
+
+  function renderMarkdown(source) {
+    const lines = String(source || "").split(/\r?\n/);
+    const out = [];
+    let i = 0;
+    let inCode = false;
+    let codeBuf = [];
+    const flushCode = () => {
+      out.push(`<pre class="md-code"><code>${escape(codeBuf.join("\n"))}</code></pre>`);
+      codeBuf = [];
+    };
+    while (i < lines.length) {
+      const line = lines[i];
+      if (/^```/.test(line)) {
+        if (inCode) { flushCode(); inCode = false; }
+        else { inCode = true; }
+        i += 1; continue;
+      }
+      if (inCode) { codeBuf.push(line); i += 1; continue; }
+      if (/^#{1,4}\s/.test(line)) {
+        const level = line.match(/^(#{1,4})/)[1].length;
+        const text = line.replace(/^#{1,4}\s+/, "");
+        out.push(`<h${level}>${renderInline(text)}</h${level}>`);
+        i += 1; continue;
+      }
+      if (/^\s*(-{3,}|\*{3,})\s*$/.test(line)) {
+        out.push("<hr />");
+        i += 1; continue;
+      }
+      if (/^\s*>\s?/.test(line)) {
+        const chunk = [];
+        while (i < lines.length && /^\s*>\s?/.test(lines[i])) {
+          chunk.push(lines[i].replace(/^\s*>\s?/, ""));
+          i += 1;
+        }
+        out.push(`<blockquote>${renderInline(chunk.join(" "))}</blockquote>`);
+        continue;
+      }
+      if (/^\s*[-*]\s+/.test(line)) {
+        const items = [];
+        while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) {
+          items.push(`<li>${renderInline(lines[i].replace(/^\s*[-*]\s+/, ""))}</li>`);
+          i += 1;
+        }
+        out.push(`<ul>${items.join("")}</ul>`);
+        continue;
+      }
+      if (/^\s*\d+\.\s+/.test(line)) {
+        const items = [];
+        while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) {
+          items.push(`<li>${renderInline(lines[i].replace(/^\s*\d+\.\s+/, ""))}</li>`);
+          i += 1;
+        }
+        out.push(`<ol>${items.join("")}</ol>`);
+        continue;
+      }
+      if (!line.trim()) { i += 1; continue; }
+      // paragraph — accumulate until blank line
+      const para = [line];
+      i += 1;
+      while (i < lines.length && lines[i].trim() && !/^(#{1,4}\s|```|\s*[-*]\s|\s*\d+\.\s|\s*>|-{3,}\s*$)/.test(lines[i])) {
+        para.push(lines[i]);
+        i += 1;
+      }
+      out.push(`<p>${renderInline(para.join(" "))}</p>`);
+    }
+    if (inCode && codeBuf.length) flushCode();
+    return out.join("\n");
+  }
+
+  function renderMeta(record) {
+    const order = ["id", "kind", "status", "type", "created", "updated", "feature", "sprint", "branch", "assignee", "completed_via", "method"];
+    const seen = new Set();
+    const rows = [];
+    for (const key of order) {
+      if (record[key] === undefined || record[key] === null || record[key] === "") continue;
+      seen.add(key);
+      rows.push(`<span class="k">${escape(key)}</span><span class="v">${escape(String(record[key]))}</span>`);
+    }
+    for (const [key, value] of Object.entries(record)) {
+      if (seen.has(key) || value === undefined || value === null || value === "") continue;
+      rows.push(`<span class="k">${escape(key)}</span><span class="v">${escape(String(value))}</span>`);
+    }
+    return `<div class="md-meta">${rows.join("")}</div>`;
+  }
+
   function openDetail(artifact) {
     const body = document.getElementById("detail-body");
     const record = artifact.record || {};
-    const meta = Object.entries(record).map(([k, v]) => `${k}: ${v}`).join("\n");
+    const title = extractHeading(artifact.body || "");
     body.innerHTML = `
-      <h2 style="margin-top:0;font-size:14px">${record.id || "(unknown)"}</h2>
-      <div class="sub" style="margin-bottom:10px">${extractHeading(artifact.body || "")}</div>
-      <pre>${escape(meta)}</pre>
-      <pre>${escape(artifact.body || "")}</pre>
-      <div class="sub"><a href="${artifact.file || "#"}" target="_blank" rel="noopener">open raw file</a></div>`;
+      <h2 style="margin-top:0;font-size:15px">${escape(record.id || "(unknown)")}</h2>
+      <div class="sub" style="margin-bottom:12px">${escape(title)}</div>
+      ${renderMeta(record)}
+      <div class="md">${renderMarkdown(artifact.body || "")}</div>
+      <div class="sub" style="margin-top:14px"><a href="${artifact.file || "#"}" target="_blank" rel="noopener">open raw file</a></div>`;
     document.getElementById("detail").classList.add("open");
     document.getElementById("detail").setAttribute("aria-hidden", "false");
   }
 
-  function escape(s) { return String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c])); }
-
   document.getElementById("detail-close").addEventListener("click", () => {
     document.getElementById("detail").classList.remove("open");
     document.getElementById("detail").setAttribute("aria-hidden", "true");
@@ -333,8 +467,8 @@
     }
     renderKanban(tasks);
     applyFilters();
-    renderList("runs", runs.slice().reverse().slice(0, 20), (r) => `<div class="row"><span>${r.record.id}</span><span class="muted">${extractHeading(r.body)}</span></div>`);
-    renderList("decisions", decisions, (d) => `<div class="row"><span>${d.record.id}</span><span class="muted">${extractHeading(d.body)}</span></div>`);
+    renderList("runs", runs.slice().reverse().slice(0, 20), (r) => `<span class="row-id">${r.record.id}</span><span class="row-text">${escape(extractHeading(r.body))}</span>${r.record.status ? `<span class="row-meta">${r.record.status}</span>` : ""}`);
+    renderList("decisions", decisions, (d) => `<span class="row-id">${d.record.id}</span><span class="row-text">${escape(extractHeading(d.body))}</span>${d.record.status ? `<span class="row-meta">${d.record.status}</span>` : ""}`);
     renderGuardrailsFromText(guardrailsText);
   }