wowbagger 0.1.0-alpha.2 → 0.1.0-alpha.4

package/src/ready.js

@@ -1,11 +1,46 @@
 import { isDependencySatisfied } from './dependencies.js';
 
-export function selectReady(items, asOf) {
+export function projectReadiness(items, asOf) {
   const byId = new Map(items.map((item) => [item.data.id, item]));
-  const ancestorsBacklogById = new Map();
+  const ancestorReasonsById = new Map();
+  const projection = new Map();
+
+  for (const item of items) {
+    const reasons = [];
+    if (item.data.kind !== 'task') {
+      reasons.push({ code: 'kind-not-task' });
+    }
+    if (item.data.status !== 'backlog') {
+      reasons.push({ code: 'status-not-backlog' });
+    }
+    if (item.data.snoozed_until && item.data.snoozed_until > asOf) {
+      reasons.push({ code: 'snoozed' });
+    }
+    const ineligible = reasons.length > 0;
+    if (Array.isArray(item.data.depends_on)) {
+      for (const dependencyId of item.data.depends_on) {
+        const dependencyIsSatisfied = item.data.schema_version !== 1
+          && isDependencySatisfied(byId.get(dependencyId)?.data.status);
+        if (!dependencyIsSatisfied) {
+          reasons.push({ code: 'dependency-unsatisfied', item_id: dependencyId });
+        }
+      }
+    }
+    reasons.push(...ancestorReasons(item.data.parent, byId, ancestorReasonsById));
+    projection.set(item.data.id, {
+      state: ineligible ? 'ineligible' : reasons.length > 0 ? 'blocked' : 'ready',
+      reasons,
+    });
+  }
+
+  return projection;
+}
+
+export function selectReady(items, asOf) {
+  const projection = projectReadiness(items, asOf);
 
   return items
-    .filter((item) => isReady(item, byId, ancestorsBacklogById, asOf))
+    .filter((item) => projection.get(item.data.id).state === 'ready')
     .sort((left, right) => comparePriority(left.data, right.data)
       || compareText(left.data.created, right.data.created)
       || compareText(left.data.id, right.data.id))
@@ -32,54 +67,45 @@ function comparePriority(left, right) {
   return left.priority - right.priority;
 }
 
-function isReady(item, byId, ancestorsBacklogById, asOf) {
-  const { data } = item;
-
-  return data.kind === 'task'
-    && data.status === 'backlog'
-    && (!data.snoozed_until || data.snoozed_until <= asOf)
-    && Array.isArray(data.depends_on)
-    && dependenciesAreSatisfied(data, byId)
-    && ancestorsAreBacklog(data, byId, ancestorsBacklogById);
-}
-
-function dependenciesAreSatisfied(data, byId) {
-  if (data.schema_version === 1) {
-    return data.depends_on.length === 0;
+function ancestorReasons(startId, byId, cache) {
+  if (!startId) {
+    return [];
+  }
+  if (cache.has(startId)) {
+    return cache.get(startId);
   }
-  return data.depends_on.every((id) => isDependencySatisfied(byId.get(id)?.data.status));
-}
 
-function ancestorsAreBacklog(data, byId, ancestorsBacklogById) {
-  let parentId = data.parent;
-  const visited = new Set();
   const path = [];
-  let result = true;
+  const visited = new Set();
+  let ancestorId = startId;
+  let suffix = [];
 
-  while (parentId) {
-    if (ancestorsBacklogById.has(parentId)) {
-      result = ancestorsBacklogById.get(parentId);
+  while (ancestorId) {
+    if (cache.has(ancestorId)) {
+      suffix = cache.get(ancestorId);
       break;
     }
-
-    if (visited.has(parentId)) {
-      result = false;
+    if (visited.has(ancestorId)) {
+      suffix = [{ code: 'ancestor-not-backlog', item_id: ancestorId }];
       break;
     }
-    visited.add(parentId);
-    path.push(parentId);
+    visited.add(ancestorId);
 
-    const parent = byId.get(parentId);
-    if (!parent || parent.data.status !== 'backlog') {
-      result = false;
+    const ancestor = byId.get(ancestorId);
+    path.push({ id: ancestorId, item: ancestor });
+    if (!ancestor) {
       break;
     }
-    parentId = parent.data.parent;
+    ancestorId = ancestor.data.parent;
   }
 
-  for (const id of path) {
-    ancestorsBacklogById.set(id, result);
+  for (let index = path.length - 1; index >= 0; index -= 1) {
+    const entry = path[index];
+    if (!entry.item || entry.item.data.status !== 'backlog') {
+      suffix = [{ code: 'ancestor-not-backlog', item_id: entry.id }, ...suffix];
+    }
+    cache.set(entry.id, suffix);
   }
 
-  return result;
+  return cache.get(startId) ?? suffix;
 }

package/src/report-html.js

@@ -0,0 +1,198 @@
+import { markdownBrowserSource } from './report-markdown.js';
+
+const READINESS_LABELS = {
+  ready: 'Ready',
+  blocked: 'Blocked',
+  ineligible: 'Ineligible',
+};
+
+const REASON_LABELS = {
+  'kind-not-task': 'Not a task',
+  'status-not-backlog': 'Not in backlog',
+  snoozed: 'Snoozed',
+  'dependency-unsatisfied': 'Dependency is not done',
+  'ancestor-not-backlog': 'Ancestor is not in backlog',
+};
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;');
+}
+
+function scriptJson(value) {
+  return JSON.stringify(value)
+    .replaceAll('<', '\\u003c')
+    .replaceAll('\u2028', '\\u2028')
+    .replaceAll('\u2029', '\\u2029');
+}
+
+function fieldLabel(name) {
+  return name.split('_').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
+}
+
+function renderBadges(item) {
+  const badges = [
+    `<span class="badge state-${escapeHtml(item.readiness.state)}">${READINESS_LABELS[item.readiness.state]}</span>`,
+    `<span class="badge">${escapeHtml(item.status)}</span>`,
+  ];
+  if (item.priority !== null) {
+    badges.push(`<span class="badge">Priority ${escapeHtml(item.priority)}</span>`);
+  }
+  for (const [name, value] of Object.entries(item.fields)) {
+    badges.push(`<span class="badge mapped">${escapeHtml(fieldLabel(name))}: ${escapeHtml(value)}</span>`);
+  }
+  return badges.join('');
+}
+
+function renderReasons(item) {
+  if (item.readiness.reasons.length === 0) {
+    return '<span class="muted">No blockers.</span>';
+  }
+  return `<ul class="reasons">${item.readiness.reasons.map((reason) => {
+    const label = REASON_LABELS[reason.code] ?? reason.code;
+    const relatedId = reason.item_id === undefined ? '' : `: ${escapeHtml(reason.item_id)}`;
+    return `<li>${escapeHtml(label)}${relatedId}</li>`;
+  }).join('')}</ul>`;
+}
+
+function renderRelations(item) {
+  const rows = [
+    ['Parent', item.parent === null ? [] : [item.parent]],
+    ['Depends on', item.dependsOn],
+    ['Related', item.related],
+  ].filter(([, values]) => values.length > 0);
+  if (rows.length === 0) {
+    return '<span class="muted">No relations.</span>';
+  }
+  return `<dl class="relations">${rows.map(([label, values]) => `<dt>${label}</dt><dd>${values.map(escapeHtml).join(', ')}</dd>`).join('')}</dl>`;
+}
+
+function renderDecisions(item) {
+  if (item.decisions.length === 0) {
+    return '<span class="muted">No decisions.</span>';
+  }
+  return `<ol class="decisions">${item.decisions.map((decision) => `<li><strong>${escapeHtml(decision.action)}</strong> · ${escapeHtml(decision.date)}<br>${escapeHtml(decision.summary)}<br><span class="muted">${escapeHtml(decision.rationale)}</span></li>`).join('')}</ol>`;
+}
+
+function bodyExcerpt(body) {
+  const compact = String(body).replace(/\s+/g, ' ').trim();
+  return compact.length <= 220 ? compact : `${compact.slice(0, 217)}...`;
+}
+
+function renderCard(item, index) {
+  const handle = item.number === null ? item.id : `#${item.number}`;
+  const searchText = [handle, item.id, item.title, item.kind, item.status, ...Object.values(item.fields)]
+    .join(' ')
+    .toLocaleLowerCase('en-US');
+  const latestDecision = item.decisions.at(-1);
+  return `<details class="card" data-item data-order="${index}" data-state="${escapeHtml(item.readiness.state)}" data-status="${escapeHtml(item.status)}" data-priority="${item.priority ?? ''}" data-created="${escapeHtml(item.created)}" data-title="${escapeHtml(item.title.toLocaleLowerCase('en-US'))}" data-fields="${escapeHtml(JSON.stringify(item.fields))}" data-search="${escapeHtml(searchText)}">
+<summary><span class="summary-main"><span class="handle">${escapeHtml(handle)}</span><span class="title">${escapeHtml(item.title)}</span></span><span class="badges">${renderBadges(item)}</span></summary>
+<div class="card-detail">
+<div class="basic-grid"><section><h3>Readiness</h3>${renderReasons(item)}</section><section><h3>Dates</h3><p>Created ${escapeHtml(item.created)}<br>Updated ${escapeHtml(item.updated)}</p></section></div>
+<section class="standard-only"><h3>Relations</h3>${renderRelations(item)}</section>
+<section class="standard-only"><h3>Latest decision</h3>${latestDecision === undefined ? '<span class="muted">No decisions.</span>' : renderDecisions({ decisions: [latestDecision] })}</section>
+<section class="body-excerpt standard-only"><h3>Body excerpt</h3><p>${escapeHtml(bodyExcerpt(item.body))}</p></section>
+<section class="detailed-only"><h3>Decision history</h3>${renderDecisions(item)}</section>
+<section class="body-section detailed-only"><h3>Item body</h3><script type="text/markdown">${scriptJson(item.body)}</script><div class="rendered-markdown" data-rendered="0"></div><noscript><pre>${escapeHtml(item.body)}</pre></noscript></section>
+</div>
+</details>`;
+}
+
+function renderTerminalTable(items) {
+  if (items.length === 0) {
+    return '<p class="muted">No completed, killed, deferred, or archived items.</p>';
+  }
+  return `<div class="table-scroll"><table><thead><tr><th>Item</th><th>Title</th><th>Status</th><th>Date</th><th>Decision</th></tr></thead><tbody>${items.map((item) => {
+    const handle = item.number === null ? item.id : `#${item.number}`;
+    const decision = item.decisions.at(-1)?.summary ?? '';
+    return `<tr><td>${escapeHtml(handle)}</td><td>${escapeHtml(item.title)}</td><td>${escapeHtml(item.status)}</td><td>${escapeHtml(item.terminalDate)}</td><td>${escapeHtml(decision)}</td></tr>`;
+  }).join('')}</tbody></table></div>`;
+}
+
+function renderSwarm(batches) {
+  if (batches.length === 0) {
+    return '';
+  }
+  return `<section class="panel swarm"><div class="section-heading"><div><p class="eyebrow">Parallel work</p><h2>Swarm candidates</h2></div><p class="muted">Ready items only. Each batch contains no repeated mapped area.</p></div><div class="batch-grid">${batches.map((batch, index) => `<section class="batch"><h3>Batch ${index + 1}</h3><ol>${batch.map((item) => `<li><span>${escapeHtml(item.number === null ? item.id : `#${item.number}`)}</span> ${escapeHtml(item.title)}</li>`).join('')}</ol></section>`).join('')}</div></section>`;
+}
+
+function styleSource() {
+  return `:root{color-scheme:light;--canvas:#f3f0e9;--surface:#fffdf8;--ink:#20231f;--muted:#687069;--line:#d9d7ce;--navy:#15324a;--ready:#1e6b4f;--ready-bg:#e6f3ec;--blocked:#9b4b21;--blocked-bg:#f9e9df;--ineligible:#60666a;--ineligible-bg:#eceeef;--focus:#0b67b2;--shadow:0 10px 28px rgba(32,35,31,.07)}*{box-sizing:border-box}html{background:var(--canvas);color:var(--ink);font:14px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0}button,input,select{font:inherit}button,select,input{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}button,select{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 35%,transparent);outline-offset:2px}.shell{width:min(1500px,100%);margin:auto;padding:28px 36px 56px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:4px 0 26px}.identity{display:flex;align-items:center;gap:16px}.logo{width:48px;height:48px;object-fit:contain}.eyebrow{margin:0 0 4px;color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.masthead h1,.section-heading h2{margin:0;font-family:ui-serif,Georgia,serif;color:var(--navy);line-height:1.1}.masthead h1{font-size:clamp(1.8rem,4vw,3rem)}.as-of{text-align:right;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}.stat,.panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}.stat{padding:14px}.stat strong{display:block;color:var(--navy);font-size:1.55rem}.stat span{color:var(--muted)}.controls{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;margin-bottom:18px;background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(10px)}.controls input{min-width:min(320px,100%);flex:1;padding:9px 11px}.controls select,.controls button{padding:8px 10px}.filter{font-weight:700}.filter.active{border-color:var(--navy);background:var(--navy);color:#fff}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.section-heading p{margin:0}.items{display:grid;gap:18px}.group h2{margin:0 0 8px;color:var(--navy);font:700 1.05rem/1.2 ui-sans-serif,-apple-system,sans-serif}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,370px),1fr));gap:12px}.card{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 3px 12px rgba(32,35,31,.04);overflow:hidden}.card[open]{grid-column:1/-1;box-shadow:var(--shadow)}summary{display:block;padding:14px;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.summary-main{display:flex;gap:8px;align-items:baseline}.handle{flex:none;color:var(--navy);font-variant-numeric:tabular-nums;font-weight:800}.title{font-weight:700;overflow-wrap:anywhere}.badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.badge{display:inline-flex;border-radius:999px;background:#efeee9;padding:2px 8px;color:#4d534e;font-size:.73rem;font-weight:700}.badge.state-ready{background:var(--ready-bg);color:var(--ready)}.badge.state-blocked{background:var(--blocked-bg);color:var(--blocked)}.badge.state-ineligible{background:var(--ineligible-bg);color:var(--ineligible)}.badge.mapped{background:#e8edf2;color:var(--navy)}.card-detail{border-top:1px solid var(--line);padding:16px}.card-detail h3,.batch h3{margin:0 0 7px;color:var(--navy);font-size:.83rem;letter-spacing:.04em;text-transform:uppercase}.card-detail p{margin:0}.basic-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.standard-only,.detailed-only,.body-section{margin-top:18px}.reasons,.decisions{margin:0;padding-left:20px}.relations{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0}.relations dt{font-weight:700}.relations dd{margin:0;overflow-wrap:anywhere}.rendered-markdown{overflow-wrap:anywhere}.rendered-markdown h1,.rendered-markdown h2,.rendered-markdown h3{font-family:ui-serif,Georgia,serif;text-transform:none;letter-spacing:0}.rendered-markdown pre,noscript pre{overflow:auto;border-radius:8px;background:#202622;color:#f5f7f3;padding:12px}.rendered-markdown code{border-radius:4px;background:#eeece6;padding:1px 4px}.rendered-markdown pre code{background:transparent;padding:0}.rendered-markdown a{color:#075fa7}.rendered-markdown table,table{width:100%;border-collapse:collapse}.rendered-markdown th,.rendered-markdown td,th,td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}.panel{margin-top:26px;padding:18px}.table-scroll{overflow-x:auto}.batch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}.batch{border:1px solid var(--line);border-radius:9px;padding:12px}.batch ol{margin:0;padding-left:22px}.muted{color:var(--muted)}.empty{padding:32px;text-align:center;color:var(--muted)}body[data-richness="basic"] .standard-only,body[data-richness="basic"] .detailed-only,body[data-richness="standard"] .detailed-only{display:none}[hidden]{display:none!important}@media(max-width:850px){.shell{padding:20px 16px 40px}.stats{grid-template-columns:repeat(3,1fr)}.masthead,.section-heading{align-items:flex-start;flex-direction:column}.as-of{text-align:left}.controls{position:static}.basic-grid{grid-template-columns:1fr}}@media(max-width:480px){.stats{grid-template-columns:repeat(2,1fr)}.controls>*{width:100%}.summary-main{align-items:flex-start;flex-direction:column}.card-detail{padding:13px}}@media(prefers-reduced-motion:no-preference){.card{transition:box-shadow .15s ease,border-color .15s ease}.filter{transition:background-color .15s ease,color .15s ease}}`;
+}
+
+function clientSource() {
+  return `'use strict';
+const itemRoot=document.getElementById('items');
+const cards=Array.from(itemRoot.querySelectorAll('[data-item]'));
+const search=document.getElementById('search');
+const groupBy=document.getElementById('group-by');
+const sortBy=document.getElementById('sort-by');
+const richness=document.getElementById('richness');
+const slotFilters=Array.from(document.querySelectorAll('.slot-filter'));
+const empty=document.getElementById('empty');
+const showHistory=document.getElementById('show-history');
+const history=document.getElementById('history');
+let state='all';
+function fields(card){return JSON.parse(card.dataset.fields);}
+function fieldValue(card,key){const value=fields(card)[key];return value===undefined?'':String(value);}
+function groupLabel(card){const key=groupBy.value;if(key==='none')return 'All items';if(key==='readiness')return card.dataset.state;if(key==='status')return card.dataset.status;if(key.startsWith('field:'))return fieldValue(card,key.slice(6))||'Unclassified';return 'Unclassified';}
+function compareText(left,right){return left<right?-1:left>right?1:0;}
+function compareCards(left,right){const key=sortBy.value;if(key==='default')return Number(left.dataset.order)-Number(right.dataset.order);if(key==='priority'){const a=left.dataset.priority===''?null:Number(left.dataset.priority);const b=right.dataset.priority===''?null:Number(right.dataset.priority);if(a===null||b===null)return a===b?Number(left.dataset.order)-Number(right.dataset.order):a===null?1:-1;return a-b||Number(left.dataset.order)-Number(right.dataset.order);}if(key==='created')return compareText(left.dataset.created,right.dataset.created)||Number(left.dataset.order)-Number(right.dataset.order);if(key==='title')return compareText(left.dataset.title,right.dataset.title)||Number(left.dataset.order)-Number(right.dataset.order);if(key.startsWith('field:'))return compareText(fieldValue(left,key.slice(6)),fieldValue(right,key.slice(6)))||Number(left.dataset.order)-Number(right.dataset.order);return 0;}
+function applyHistory(){history.hidden=!showHistory.checked;}
+function apply(){const term=search.value.trim().toLocaleLowerCase('en-US');const visible=cards.filter(card=>(state==='all'||card.dataset.state===state)&&(!term||card.dataset.search.includes(term))&&slotFilters.every(filter=>filter.value===''||fieldValue(card,filter.dataset.field)===filter.value)).sort(compareCards);const groups=new Map();for(const card of visible){const label=groupLabel(card);if(!groups.has(label))groups.set(label,[]);groups.get(label).push(card);}itemRoot.replaceChildren();for(const [label,members] of groups){const section=document.createElement('section');section.className='group';if(groupBy.value!=='none'){const heading=document.createElement('h2');heading.textContent=label+' ('+members.length+')';section.append(heading);}const grid=document.createElement('div');grid.className='card-grid';grid.append(...members);section.append(grid);itemRoot.append(section);}empty.hidden=visible.length!==0;}
+function renderBody(card){const target=card.querySelector('.rendered-markdown');if(target.dataset.rendered==='1')return;const source=card.querySelector('script[type="text/markdown"]');target.innerHTML=window.renderMarkdown(JSON.parse(source.textContent));target.dataset.rendered='1';}
+for(const card of cards){card.addEventListener('toggle',()=>{if(card.open)renderBody(card);});}
+for(const button of document.querySelectorAll('[data-filter]')){button.addEventListener('click',()=>{state=button.dataset.filter;document.querySelectorAll('[data-filter]').forEach(node=>node.classList.toggle('active',node===button));apply();});}
+search.addEventListener('input',apply);groupBy.addEventListener('change',apply);sortBy.addEventListener('change',apply);for(const filter of slotFilters)filter.addEventListener('change',apply);richness.addEventListener('change',()=>{document.body.dataset.richness=richness.value;});
+showHistory.addEventListener('change',applyHistory);
+document.getElementById('expand-all').addEventListener('click',()=>{for(const card of cards){if(card.isConnected){card.open=true;renderBody(card);}}});
+document.getElementById('collapse-all').addEventListener('click',()=>{for(const card of cards)card.open=false;});
+applyHistory();apply();`;
+}
+
+export function renderReportHtml(model, { logoDataUrl = null } = {}) {
+  const fieldNames = [...new Set(model.items.flatMap((item) => Object.keys(item.fields)))].sort();
+  const groupOptions = [
+    ['none', 'No grouping'],
+    ['readiness', 'Readiness'],
+    ['status', 'Status'],
+    ...fieldNames.map((name) => [`field:${name}`, fieldLabel(name)]),
+  ];
+  const sortOptions = [
+    ['default', 'Report order'],
+    ['priority', 'Priority'],
+    ['created', 'Created date'],
+    ['title', 'Title'],
+    ...fieldNames.map((name) => [`field:${name}`, fieldLabel(name)]),
+  ];
+  const slotFilters = fieldNames.map((name) => {
+    const values = [...new Set(model.items
+      .map((item) => item.fields[name])
+      .filter((value) => value !== undefined)
+      .map(String))].sort();
+    return `<select class="slot-filter" data-field="${escapeHtml(name)}" aria-label="Filter by ${escapeHtml(fieldLabel(name))}"><option value="">All ${escapeHtml(fieldLabel(name))}</option>${values.map((value) => `<option value="${escapeHtml(value)}">${escapeHtml(value)}</option>`).join('')}</select>`;
+  }).join('');
+  const logo = logoDataUrl === null ? '' : `<img class="logo" src="${escapeHtml(logoDataUrl)}" alt="">`;
+  const stats = [
+    ['Total', model.stats.total],
+    ['Open', model.stats.open],
+    ['Terminal', model.stats.terminal],
+    ['Ready', model.stats.ready],
+    ['Blocked', model.stats.blocked],
+    ['Ineligible', model.stats.ineligible],
+  ];
+  const markdownRuntime = markdownBrowserSource().replaceAll('</script', '<\\/script');
+  const interactionRuntime = clientSource().replaceAll('</script', '<\\/script');
+
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'; script-src 'unsafe-inline'"><title>${escapeHtml(model.title)}</title><style>${styleSource()}.history-toggle{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}.controls .history-toggle input{min-width:0;flex:none;margin:0;padding:0}</style></head><body data-richness="standard"><main class="shell">
+<header class="masthead"><div class="identity">${logo}<div><p class="eyebrow">${escapeHtml(model.repository.name)}</p><h1>${escapeHtml(model.title)}</h1></div></div><div class="as-of">Ledger state<br><strong>${escapeHtml(model.asOf)}</strong></div></header>
+<section class="stats" aria-label="Ledger summary">${stats.map(([label, value]) => `<div class="stat"><strong>${escapeHtml(value)}</strong><span>${label}</span></div>`).join('')}</section>
+<section class="controls panel" aria-label="Report controls"><label class="sr-only" for="search">Search items</label><input id="search" type="search" placeholder="Search ID, number, title, or mapped fields"><select id="group-by" aria-label="Group items">${groupOptions.map(([value, label]) => `<option value="${escapeHtml(value)}">${escapeHtml(label)}</option>`).join('')}</select><select id="sort-by" aria-label="Sort items">${sortOptions.map(([value, label]) => `<option value="${escapeHtml(value)}">${escapeHtml(label)}</option>`).join('')}</select>${slotFilters}<select id="richness" aria-label="Detail level"><option value="basic">Basic</option><option value="standard" selected>Standard</option><option value="detailed">Detailed</option></select><label class="history-toggle"><input id="show-history" type="checkbox" checked>Show history</label><button class="filter active" data-filter="all" type="button">All</button><button class="filter" data-filter="ready" type="button">Ready</button><button class="filter" data-filter="blocked" type="button">Blocked</button><button class="filter" data-filter="ineligible" type="button">Ineligible</button><button type="button" id="expand-all">Expand all</button><button type="button" id="collapse-all">Collapse all</button></section>
+<section><div class="section-heading"><div><p class="eyebrow">Current work</p><h2>Ledger items</h2></div><p class="muted">Priority, then created date, then immutable ID.</p></div><div id="items" class="items">${model.items.map(renderCard).join('')}</div><p id="empty" class="empty" hidden>No items match these filters.</p></section>
+${renderSwarm(model.swarmBatches)}
+<section id="history" class="panel"><div class="section-heading"><div><p class="eyebrow">History</p><h2>Terminal items</h2></div><p class="muted">Completed, killed, deferred, and archived.</p></div>${renderTerminalTable(model.terminalItems)}</section>
+</main><script>${markdownRuntime}</script><script>${interactionRuntime}</script></body></html>`;
+}

package/src/report-markdown.js

@@ -0,0 +1,171 @@
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;');
+}
+
+function safeHref(value) {
+  return /^https?:\/\//i.test(value) ? value : null;
+}
+
+function formatText(value) {
+  return escapeHtml(value)
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/__([^_]+)__/g, '<strong>$1</strong>')
+    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+    .replace(/(^|[^A-Za-z0-9])_([^_]+)_(?=[^A-Za-z0-9]|$)/g, '$1<em>$2</em>');
+}
+
+function renderInline(value) {
+  const replacements = [];
+  const protect = (html) => {
+    replacements.push(html);
+    return `\u0000${replacements.length - 1}\u0000`;
+  };
+  let text = String(value)
+    .replace(/`([^`]+)`/g, (_match, code) => protect(`<code>${escapeHtml(code)}</code>`))
+    .replace(/\[([^\]]+)]\(([^()\s]*(?:\([^()\s]*\)[^()\s]*)*)\)/g, (_match, label, url) => {
+      const href = safeHref(url);
+      return protect(href === null
+        ? `<span>${formatText(label)}</span>`
+        : `<a href="${escapeHtml(href)}" rel="noopener noreferrer">${formatText(label)}</a>`);
+    });
+  text = formatText(text);
+  return text.replace(/\u0000(\d+)\u0000/g, (_match, index) => replacements[Number(index)]);
+}
+
+function isTableSeparator(line) {
+  return line.includes('-') && /^\s*\|?[\s:|-]*-[\s:|-]*\|?\s*$/.test(line);
+}
+
+function tableCells(line) {
+  return line.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map((cell) => cell.trim());
+}
+
+function renderTable(lines) {
+  const headings = tableCells(lines[0]);
+  const rows = lines.slice(2).map(tableCells);
+  return `<table><thead><tr>${headings.map((cell) => `<th>${renderInline(cell)}</th>`).join('')}</tr></thead>`
+    + `<tbody>${rows.map((row) => `<tr>${row.map((cell) => `<td>${renderInline(cell)}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
+}
+
+export function renderMarkdown(markdown) {
+  const lines = String(markdown)
+    .replace(/\r\n?/g, '\n')
+    .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, '')
+    .split('\n');
+  const output = [];
+  const paragraph = [];
+  const listStack = [];
+  let index = 0;
+
+  const flushParagraph = () => {
+    if (paragraph.length > 0) {
+      output.push(`<p>${renderInline(paragraph.join(' '))}</p>`);
+      paragraph.length = 0;
+    }
+  };
+  const closeLists = (indent = -1) => {
+    while (listStack.length > 0 && listStack.at(-1).indent >= indent) {
+      output.push(listStack.pop().type === 'ol' ? '</ol>' : '</ul>');
+    }
+  };
+
+  while (index < lines.length) {
+    const line = lines[index];
+    const fence = line.match(/^\s*```(.*)$/);
+    if (fence !== null) {
+      flushParagraph();
+      closeLists();
+      const language = fence[1].trim().replace(/[^\w-]/g, '');
+      const body = [];
+      index += 1;
+      while (index < lines.length && !/^\s*```\s*$/.test(lines[index])) {
+        body.push(lines[index]);
+        index += 1;
+      }
+      if (index < lines.length) {
+        index += 1;
+      }
+      output.push(`<pre><code${language === '' ? '' : ` class="language-${language}"`}>${escapeHtml(body.join('\n'))}\n</code></pre>`);
+      continue;
+    }
+    if (line.includes('|') && index + 1 < lines.length && isTableSeparator(lines[index + 1])) {
+      flushParagraph();
+      closeLists();
+      const table = [line, lines[index + 1]];
+      index += 2;
+      while (index < lines.length && lines[index].includes('|') && lines[index].trim() !== '') {
+        table.push(lines[index]);
+        index += 1;
+      }
+      output.push(renderTable(table));
+      continue;
+    }
+    if (line.trim() === '') {
+      flushParagraph();
+      closeLists();
+      index += 1;
+      continue;
+    }
+    const heading = line.match(/^(#{1,6})\s+(.*)$/);
+    if (heading !== null) {
+      flushParagraph();
+      closeLists();
+      const level = heading[1].length;
+      output.push(`<h${level}>${renderInline(heading[2].trim())}</h${level}>`);
+      index += 1;
+      continue;
+    }
+    if (/^\s*([-*_])\1\1[-*_\s]*$/.test(line)) {
+      flushParagraph();
+      closeLists();
+      output.push('<hr>');
+      index += 1;
+      continue;
+    }
+    if (/^\s*>\s?/.test(line)) {
+      flushParagraph();
+      closeLists();
+      const quote = [];
+      while (index < lines.length && /^\s*>\s?/.test(lines[index])) {
+        quote.push(lines[index].replace(/^\s*>\s?/, ''));
+        index += 1;
+      }
+      output.push(`<blockquote><p>${renderInline(quote.join(' '))}</p></blockquote>`);
+      continue;
+    }
+    const listItem = line.match(/^(\s*)([-*+]|\d+\.)\s+(.*)$/);
+    if (listItem !== null) {
+      flushParagraph();
+      const indent = listItem[1].length;
+      const type = /\d/.test(listItem[2]) ? 'ol' : 'ul';
+      closeLists(indent + 1);
+      const top = listStack.at(-1);
+      if (top === undefined || top.indent < indent) {
+        output.push(`<${type}>`);
+        listStack.push({ type, indent });
+      } else if (top.indent === indent && top.type !== type) {
+        output.push(`</${top.type}>`);
+        listStack.pop();
+        output.push(`<${type}>`);
+        listStack.push({ type, indent });
+      }
+      output.push(`<li>${renderInline(listItem[3])}</li>`);
+      index += 1;
+      continue;
+    }
+    paragraph.push(line.trim());
+    index += 1;
+  }
+
+  flushParagraph();
+  closeLists();
+  return output.join('');
+}
+
+export function markdownBrowserSource() {
+  return `${escapeHtml.toString()}\n${safeHref.toString()}\n${formatText.toString()}\n${renderInline.toString()}\n${isTableSeparator.toString()}\n${tableCells.toString()}\n${renderTable.toString()}\n${renderMarkdown.toString()}\nwindow.renderMarkdown = renderMarkdown;`;
+}