scrumrun 4.2.0 → 4.2.2

package/CHANGELOG.md

@@ -4,13 +4,29 @@ All notable changes follow Semantic Versioning.
 
 ## Unreleased
 
+## 4.2.2 - 2026-09-22
+
+### Changed
+
+- **`scrumrun view` picks a random free port by default.** Running `scrumrun view` without `--port` now asks the OS for any ephemeral port instead of always trying `8080` first (a common conflict with Vite, Django, and other dev servers). Pass `--port <n>` explicitly if you need a stable URL; sequential retry only fires when the port was explicitly requested. The bound URL is always printed on stdout and the browser is auto-launched at the correct port.
+- **Kanban card width capped.** Columns are constrained to `280–320 px` and align to the left of the grid, so a single populated column no longer stretches its cards to full viewport width. The `Compact` view mode was removed — `Kanban` and `List` cover the two real use-cases.
+- **Guardrail rows truncate the title at 150 characters.** Long rules no longer produce a linha extensa e ilegível; the row shows the id, a truncated title with `…`, and clicking the row opens the detail drawer with the **full rule body rendered as Markdown** (fields, prose, YAML enforcement block).
+
+## 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.2` · **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/bin/scrumrun.js

@@ -64,7 +64,7 @@ Usage:
   scrumrun update  [all|codex|opencode|claude] [--project] [--seal-policy] [--migrate] [--repair-legacy] [--verbose]
   scrumrun init [--local|--shared] [--lean] [--no-agent-hint] [--force]
   scrumrun status
-  scrumrun view [--port 8080] [--host 127.0.0.1] [--no-open]
+  scrumrun view [--port <n>] [--host 127.0.0.1] [--no-open]        # port defaults to random ephemeral
   scrumrun sync [--repair] [--apply]
   scrumrun lock <acquire|release|status|reap> [ARTIFACT-ID] [--note "..."] [--ttl <minutes>] [--force]
   scrumrun core [--path|--prompt]
@@ -2805,7 +2805,7 @@ if (!command || command === "--help" || command === "-h") {
       const { view } = require(path.join(root, "lib", "view", "server"));
       const portArg = args.indexOf("--port");
       const hostArg = args.indexOf("--host");
-      const port = portArg !== -1 && args[portArg + 1] ? Number(args[portArg + 1]) : 8080;
+      const port = portArg !== -1 && args[portArg + 1] ? Number(args[portArg + 1]) : 0;
       const host = hostArg !== -1 && args[hostArg + 1] ? args[hostArg + 1] : "127.0.0.1";
       const autoOpen = !args.includes("--no-open");
       const { server } = await view(process.cwd(), { port, host, autoOpen });

package/lib/view/server.js

@@ -59,13 +59,15 @@ function requestHandler(root) {
   };
 }
 
-function listen(root, { host = "127.0.0.1", port = 8080 } = {}) {
+function listen(root, { host = "127.0.0.1", port = 0 } = {}) {
   return new Promise((resolve, reject) => {
     const server = http.createServer(requestHandler(root));
     let attempts = 0;
     const tryPort = (p) => {
       server.once("error", (err) => {
-        if (err.code === "EADDRINUSE" && attempts < 20) {
+        // Only retry sequentially when the user asked for a specific port; port 0
+        // means "let the OS pick", so a collision there is genuinely fatal.
+        if (err.code === "EADDRINUSE" && p !== 0 && attempts < 20) {
           attempts += 1;
           setImmediate(() => tryPort(p + 1));
         } else {
@@ -88,7 +90,7 @@ function openInBrowser(url) {
   return spawn("xdg-open", [url], { stdio: "ignore", detached: true }).unref();
 }
 
-async function view(projectRoot, { port = 8080, host = "127.0.0.1", autoOpen = true, logger = console } = {}) {
+async function view(projectRoot, { port = 0, host = "127.0.0.1", autoOpen = true, logger = console } = {}) {
   const root = path.join(projectRoot, ".scrumrun");
   if (!fs.existsSync(root) || !fs.statSync(root).isDirectory()) {
     throw new Error(`ScrumRun project not found at ${root}. Run \`scrumrun init\` first.`);

package/package.json

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

package/templates/shared/view.html

@@ -34,8 +34,7 @@
   .toolbar button { background: transparent; border: 0; color: var(--muted); padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
   .toolbar button.active { background: var(--border); color: var(--fg); }
   .toolbar button:hover { color: var(--fg); }
-  .kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
-  .kanban.compact { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
+  .kanban { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 320px)); gap: 14px; align-items: start; justify-content: start; }
   .col { min-width: 0; }
   .col h3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
   .col h3 .count { background: var(--border); color: var(--fg); padding: 1px 6px; border-radius: 10px; font-family: var(--mono); font-size: 10px; }
@@ -47,9 +46,6 @@
   .card .id { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; }
   .card .title { font-size: 13.5px; font-weight: 500; margin-top: 3px; line-height: 1.35; color: var(--fg); }
   .card .meta { font-size: 11px; color: var(--muted); margin-top: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
-  .kanban.compact .card { padding: 7px 9px; }
-  .kanban.compact .card .title { font-size: 12.5px; }
-  .kanban.compact .card .meta { display: none; }
   body.list-mode .kanban { display: block; }
   body.list-mode .col { margin-bottom: 20px; }
   body.list-mode .col-body { max-height: none; }
@@ -71,11 +67,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>
@@ -94,7 +116,6 @@
     <div class="toolbar">
       <div class="group" role="tablist" aria-label="View mode">
         <button data-mode="kanban" class="active">Kanban</button>
-        <button data-mode="compact">Compact</button>
         <button data-mode="list">List</button>
       </div>
     </div>
@@ -121,6 +142,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 +212,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,39 +265,162 @@
       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);
     }
   }
 
+  function truncate(text, max = 150) {
+    const t = String(text || "").replace(/\s+/g, " ").trim();
+    return t.length > max ? t.slice(0, max - 1).trimEnd() + "…" : t;
+  }
+
   function renderGuardrailsFromText(text) {
     const el = document.getElementById("guardrails");
     if (!text) { el.innerHTML = '<div class="empty">guardrails.md not found</div>'; return; }
     const rules = [];
-    for (const match of text.matchAll(/^##\s+(GR-\d+)\s+-\s+(.+)$/gm)) {
-      rules.push({ id: match[1], title: match[2] });
+    // Parse each ## GR-XXX block: capture id, title, and body until next ## or EOF
+    const blockRe = /^##\s+(GR-\d+)\s+-\s+(.+?)\r?\n([\s\S]*?)(?=^##\s+GR-|\Z)/gm;
+    let match;
+    while ((match = blockRe.exec(text)) !== null) {
+      rules.push({ id: match[1], title: match[2].trim(), body: match[3].trim() });
+    }
+    el.innerHTML = "";
+    if (!rules.length) { el.innerHTML = '<div class="empty">no guardrails declared</div>'; return; }
+    for (const rule of rules) {
+      const row = document.createElement("div");
+      row.className = "list-item";
+      row.innerHTML = `<span class="row-id">${rule.id}</span><span class="row-text">${escape(truncate(rule.title, 150))}</span>`;
+      row.addEventListener("click", () => openGuardrailDetail(rule));
+      el.appendChild(row);
     }
-    el.innerHTML = rules.length
-      ? rules.map((r) => `<div class="row"><span>${r.id}</span><span class="muted">${r.title}</span></div>`).join("")
-      : '<div class="empty">no guardrails declared</div>';
   }
 
-  function openDetail(artifact) {
+  function openGuardrailDetail(rule) {
     const body = document.getElementById("detail-body");
-    const record = artifact.record || {};
-    const meta = Object.entries(record).map(([k, v]) => `${k}: ${v}`).join("\n");
     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(rule.id)}</h2>
+      <div class="sub" style="margin-bottom:12px">${escape(rule.title)}</div>
+      <div class="md">${renderMarkdown(rule.body)}</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])); }
 
+  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 title = extractHeading(artifact.body || "");
+    body.innerHTML = `
+      <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");
+  }
+
   document.getElementById("detail-close").addEventListener("click", () => {
     document.getElementById("detail").classList.remove("open");
     document.getElementById("detail").setAttribute("aria-hidden", "true");
@@ -291,9 +444,9 @@
   document.getElementById("search").addEventListener("input", applyFilters);
 
   const kanbanEl = document.getElementById("kanban");
-  const savedMode = localStorage.getItem("scrumrun.view.mode") || "kanban";
+  const savedMode = localStorage.getItem("scrumrun.view.mode") === "list" ? "list" : "kanban";
   function setMode(mode) {
-    kanbanEl.classList.toggle("compact", mode === "compact");
+    if (mode !== "list") mode = "kanban";
     document.body.classList.toggle("list-mode", mode === "list");
     for (const button of document.querySelectorAll(".toolbar button")) {
       button.classList.toggle("active", button.dataset.mode === mode);
@@ -333,8 +486,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);
   }