beads-ui 0.2.0 → 0.3.0

package/app/utils/markdown.js

@@ -1,201 +1,22 @@
+import DOMPurify from 'dompurify';
+import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { marked } from 'marked';
+
 /**
- * Minimal, safe Markdown renderer that builds a DOM fragment without innerHTML.
- * Supports headings, paragraphs, lists, code blocks, inline code, and links.
- * This is intentionally conservative to avoid XSS.
+ * Render Markdown safely as HTML using marked and DOMPurify.
+ * Returns a lit-html TemplateResult via the unsafeHTML directive so it can be
+ * embedded directly in templates.
  * @function renderMarkdown
  * @param {string} src Markdown source text
- * @returns {DocumentFragment}
+ * @returns {import('lit-html').TemplateResult}
  */
 export function renderMarkdown(src) {
-  /** @type {DocumentFragment} */
-  const frag = document.createDocumentFragment();
-
-  /** @type {string[]} */
-  const lines = (src || '').replace(/\r\n?/g, '\n').split('\n');
-
-  /** @type {boolean} */
-  let in_code = false;
-  /** @type {string[]} */
-  let code_acc = [];
-
-  /** @type {HTMLElement|null} */
-  let list_el = null;
   /** @type {string} */
-  let list_type = '';
-
-  /**
-   * Flush current paragraph buffer to <p> if any.
-   * @param {string[]} buf
-   */
-  function flushParagraph(buf) {
-    if (buf.length === 0) {
-      return;
-    }
-    const p = document.createElement('p');
-    appendInline(p, buf.join(' '));
-    frag.appendChild(p);
-    buf.length = 0;
-  }
-
-  /** @type {string[]} */
-  const para = [];
-
-  for (let i = 0; i < lines.length; i++) {
-    const raw = lines[i];
-    const line = raw;
-
-    // fenced code blocks
-    if (/^```/.test(line)) {
-      if (!in_code) {
-        in_code = true;
-        code_acc = [];
-      } else {
-        // flush code block
-        const pre = document.createElement('pre');
-        const code = document.createElement('code');
-        code.textContent = code_acc.join('\n');
-        pre.appendChild(code);
-        frag.appendChild(pre);
-        in_code = false;
-        code_acc = [];
-      }
-      continue;
-    }
-    if (in_code) {
-      code_acc.push(raw);
-      continue;
-    }
-
-    // blank line -> paragraph / list break
-    if (/^\s*$/.test(line)) {
-      flushParagraph(para);
-      if (list_el !== null) {
-        frag.appendChild(list_el);
-        list_el = null;
-        list_type = '';
-      }
-      continue;
-    }
-
-    // heading
-    const hx = /^(#{1,6})\s+(.*)$/.exec(line);
-    if (hx) {
-      flushParagraph(para);
-      if (list_el !== null) {
-        frag.appendChild(list_el);
-        list_el = null;
-        list_type = '';
-      }
-      const level = Math.min(6, hx[1].length);
-      const h = /** @type {HTMLHeadingElement} */ (
-        document.createElement('h' + String(level))
-      );
-      appendInline(h, hx[2]);
-      frag.appendChild(h);
-      continue;
-    }
-
-    // list item
-    let m = /^\s*[-*]\s+(.*)$/.exec(line);
-    if (m) {
-      if (list_el === null || list_type !== 'ul') {
-        flushParagraph(para);
-        if (list_el !== null) {
-          frag.appendChild(list_el);
-        }
-        list_el = document.createElement('ul');
-        list_type = 'ul';
-      }
-      const li = document.createElement('li');
-      appendInline(li, m[1]);
-      list_el.appendChild(li);
-      continue;
-    }
-    m = /^\s*(\d+)\.\s+(.*)$/.exec(line);
-    if (m) {
-      if (list_el === null || list_type !== 'ol') {
-        flushParagraph(para);
-        if (list_el !== null) {
-          frag.appendChild(list_el);
-        }
-        list_el = document.createElement('ol');
-        list_type = 'ol';
-      }
-      const li = document.createElement('li');
-      appendInline(li, m[2]);
-      list_el.appendChild(li);
-      continue;
-    }
-
-    // otherwise: paragraph text; accumulate to join with spaces
-    para.push(line.trim());
-  }
-
-  // flush leftovers
-  if (in_code) {
-    const pre = document.createElement('pre');
-    const code = document.createElement('code');
-    code.textContent = code_acc.join('\n');
-    pre.appendChild(code);
-    frag.appendChild(pre);
-  }
-  flushParagraph(para);
-  if (list_el !== null) {
-    frag.appendChild(list_el);
-  }
-
-  return frag;
-
-  /**
-   * Append inline content parsing backticks and links safely.
-   * - Inline code: `text`
-   * - Links: [text](url) where url starts with http, https, or mailto
-   * @param {HTMLElement} el
-   * @param {string} text
-   */
-  function appendInline(el, text) {
-    /** @type {RegExp} */
-    const re = /(`[^`]+`)|(\[[^\]]+\]\([^)]+\))/g;
-    /** @type {number} */
-    let last = 0;
-    /** @type {any} */
-    let match = re.exec(text);
-    while (match) {
-      const idx = match.index;
-      if (idx > last) {
-        el.appendChild(document.createTextNode(text.slice(last, idx)));
-      }
-      const token = match[0];
-      if (token[0] === '\u0060') {
-        const code = document.createElement('code');
-        code.textContent = token.slice(1, -1);
-        el.appendChild(code);
-      } else if (token[0] === '[') {
-        // parse [text](url)
-        const m2 = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(token);
-        if (m2) {
-          const a = document.createElement('a');
-          const href = m2[2].trim();
-          const allowed = /^(https?:|mailto:)/i.test(href);
-          if (allowed) {
-            a.setAttribute('href', href);
-          } else {
-            // if not allowed, render as text to avoid XSS vectors
-            a.remove();
-            el.appendChild(document.createTextNode(m2[1] + ' (' + href + ')'));
-            last = re.lastIndex;
-            match = re.exec(text);
-            continue;
-          }
-          a.appendChild(document.createTextNode(m2[1]));
-          el.appendChild(a);
-        }
-      }
-      last = re.lastIndex;
-      match = re.exec(text);
-    }
-    if (last < text.length) {
-      el.appendChild(document.createTextNode(text.slice(last)));
-    }
-  }
+  const markdown = String(src || '');
+  /** @type {string} */
+  const parsed = /** @type {string} */ (marked.parse(markdown));
+  /** @type {string} */
+  const html_string = DOMPurify.sanitize(parsed);
+  return html`${unsafeHTML(html_string)}`;
 }

package/app/utils/priority-badge.js

@@ -6,9 +6,7 @@ import { priority_levels } from './priority.js';
  * @returns {HTMLSpanElement}
  */
 export function createPriorityBadge(priority) {
-  /** @type {number} */
   const p = typeof priority === 'number' ? priority : 2;
-  /** @type {HTMLSpanElement} */
   const el = document.createElement('span');
   el.className = 'priority-badge';
   el.classList.add(`is-p${Math.max(0, Math.min(4, p))}`);

package/app/utils/status-badge.js

@@ -4,7 +4,6 @@
  * @returns {HTMLSpanElement}
  */
 export function createStatusBadge(status) {
-  /** @type {HTMLSpanElement} */
   const el = document.createElement('span');
   el.className = 'status-badge';
   const s = String(status || 'open');

package/app/utils/toast.js

@@ -5,7 +5,6 @@
  * @param {number} [duration_ms] - Auto-dismiss delay in milliseconds.
  */
 export function showToast(text, variant = 'info', duration_ms = 2800) {
-  /** @type {HTMLDivElement} */
   const el = document.createElement('div');
   el.className = 'toast';
   el.textContent = text;

package/app/utils/type-badge.js

@@ -4,13 +4,10 @@
  * @returns {HTMLSpanElement}
  */
 export function createTypeBadge(issue_type) {
-  /** @type {HTMLSpanElement} */
   const el = document.createElement('span');
   el.className = 'type-badge';
 
-  /** @type {string} */
   const t = (issue_type || '').toString().toLowerCase();
-  /** @type {Set<string>} */
   const KNOWN = new Set(['bug', 'feature', 'task', 'epic', 'chore']);
   const kind = KNOWN.has(t) ? t : 'neutral';
   el.classList.add(`type-badge--${kind}`);

package/app/views/board.js

@@ -1,4 +1,6 @@
 import { html, render } from 'lit-html';
+import { createListSelectors } from '../data/list-selectors.js';
+import { cmpClosedDesc, cmpPriorityThenCreated } from '../data/sort.js';
 import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
 import { createPriorityBadge } from '../utils/priority-badge.js';
 import { createTypeBadge } from '../utils/type-badge.js';
@@ -10,29 +12,35 @@ import { createTypeBadge } from '../utils/type-badge.js';
  *   status?: 'open'|'in_progress'|'closed',
  *   priority?: number,
  *   issue_type?: string,
- *   updated_at?: string,
- *   closed_at?: string
+ *   created_at?: number,
+ *   updated_at?: number,
+ *   closed_at?: number
  * }} IssueLite
  */
 
 /**
- * Create the Board view with Open + Blocked stacked, then Ready, In progress, Closed.
- * Data providers are expected to return raw arrays; this view applies sorting.
+ * Create the Board view with Blocked, Ready, In progress, Closed.
+ * Push-only: derives items from per-subscription stores.
  *
  * Sorting rules:
- * - Open: priority asc, then updated_at desc when present
- * - Ready: priority asc, then updated_at desc when present
- * - In progress: updated_at desc
- * - Closed: closed_at desc (fallback to updated_at)
+ * - Ready/Blocked/In progress: priority asc, then created_at asc
+ * - Closed: closed_at desc
  * @param {HTMLElement} mount_element
- * @param {{ getOpen: () => Promise<any[]>, getReady: () => Promise<any[]>, getBlocked?: () => Promise<any[]>, getInProgress: () => Promise<any[]>, getClosed: (limit?: number) => Promise<any[]> }} data
+ * @param {unknown} _data - Unused (legacy param retained for call-compat)
  * @param {(id: string) => void} gotoIssue - Navigate to issue detail.
  * @param {{ getState: () => any, setState: (patch: any) => void, subscribe?: (fn: (s:any)=>void)=>()=>void }} [store]
+ * @param {{ selectors: { getIds: (client_id: string) => string[], count?: (client_id: string) => number } }} [subscriptions]
+ * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issueStores]
  * @returns {{ load: () => Promise<void>, clear: () => void }}
  */
-export function createBoardView(mount_element, data, gotoIssue, store) {
-  /** @type {IssueLite[]} */
-  let list_open = [];
+export function createBoardView(
+  mount_element,
+  _data,
+  gotoIssue,
+  store,
+  subscriptions = undefined,
+  issueStores = undefined
+) {
   /** @type {IssueLite[]} */
   let list_ready = [];
   /** @type {IssueLite[]} */
@@ -43,6 +51,8 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
   let list_closed = [];
   /** @type {IssueLite[]} */
   let list_closed_raw = [];
+  // Centralized selection helpers
+  const selectors = issueStores ? createListSelectors(issueStores) : null;
 
   /**
    * Closed column filter mode.
@@ -67,10 +77,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
   function template() {
     return html`
       <div class="panel__body board-root">
-        <div class="board-stack-2">
-          ${columnTemplate('Open', 'open-col', list_open)}
-          ${columnTemplate('Blocked', 'blocked-col', list_blocked)}
-        </div>
+        ${columnTemplate('Blocked', 'blocked-col', list_blocked)}
         ${columnTemplate('Ready', 'ready-col', list_ready)}
         ${columnTemplate('In Progress', 'in-progress-col', list_in_progress)}
         ${columnTemplate('Closed', 'closed-col', list_closed)}
@@ -144,8 +151,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
           ${it.title || '(no title)'}
         </div>
         <div class="board-card__meta">
-          ${createTypeBadge(/** @type {any} */ (it).issue_type)}
-          ${createPriorityBadge(/** @type {any} */ (it).priority)}
+          ${createTypeBadge(it.issue_type)} ${createPriorityBadge(it.priority)}
           ${createIssueIdRenderer(it.id, { class_name: 'mono' })}
         </div>
       </article>
@@ -171,8 +177,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
         mount_element.querySelectorAll('.board-column')
       );
       for (const col of columns) {
-        /** @type {HTMLElement|null} */
-        const body = /** @type {any} */ (
+        const body = /** @type {HTMLElement|null} */ (
           col.querySelector('.board-column__body')
         );
         if (!body) {
@@ -208,8 +213,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
 
   // Delegate keyboard handling from mount_element
   mount_element.addEventListener('keydown', (ev) => {
-    /** @type {HTMLElement} */
-    const target = /** @type {any} */ (ev.target);
+    const target = ev.target;
     if (!target || !(target instanceof HTMLElement)) {
       return;
     }
@@ -219,7 +223,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
       tag === 'input' ||
       tag === 'textarea' ||
       tag === 'select' ||
-      /** @type {any} */ (target).isContentEditable === true
+      target.isContentEditable === true
     ) {
       return;
     }
@@ -230,9 +234,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     const key = String(ev.key || '');
     if (key === 'Enter' || key === ' ') {
       ev.preventDefault();
-      const id = /** @type {HTMLElement} */ (card).getAttribute(
-        'data-issue-id'
-      );
+      const id = card.getAttribute('data-issue-id');
       if (id) {
         gotoIssue(id);
       }
@@ -252,9 +254,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     if (!col) {
       return;
     }
-    const body = /** @type {HTMLElement|null} */ (
-      col.querySelector('.board-column__body')
-    );
+    const body = col.querySelector('.board-column__body');
     if (!body) {
       return;
     }
@@ -324,47 +324,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     }
   }
 
-  /**
-   * Sort helpers.
-   */
-  /**
-   * @param {IssueLite[]} arr
-   */
-  function sortReady(arr) {
-    arr.sort((a, b) => {
-      const pa = a.priority ?? 2;
-      const pb = b.priority ?? 2;
-      if (pa !== pb) {
-        return pa - pb;
-      }
-      const ua = a.updated_at || '';
-      const ub = b.updated_at || '';
-      return ua < ub ? 1 : ua > ub ? -1 : 0;
-    });
-  }
-
-  /**
-   * @param {IssueLite[]} arr
-   */
-  function sortByUpdatedDesc(arr) {
-    arr.sort((a, b) => {
-      const ua = a.updated_at || '';
-      const ub = b.updated_at || '';
-      return ua < ub ? 1 : ua > ub ? -1 : 0;
-    });
-  }
-
-  /**
-   * Sort by closed_at desc with updated_at fallback.
-   * @param {IssueLite[]} arr
-   */
-  function sortByClosedDesc(arr) {
-    arr.sort((a, b) => {
-      const ca = a.closed_at || a.updated_at || '';
-      const cb = b.closed_at || b.updated_at || '';
-      return ca < cb ? 1 : ca > cb ? -1 : 0;
-    });
-  }
+  // Sort helpers centralized in app/data/sort.js
 
   /**
    * Recompute closed list from raw using the current filter and sort.
@@ -373,7 +333,6 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     /** @type {IssueLite[]} */
     let items = Array.isArray(list_closed_raw) ? [...list_closed_raw] : [];
     const now = new Date();
-    /** @type {number} */
     let since_ts = 0;
     if (closed_filter_mode === 'today') {
       const start = new Date(
@@ -392,14 +351,15 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
       since_ts = now.getTime() - 7 * 24 * 60 * 60 * 1000;
     }
     items = items.filter((it) => {
-      const s = it.closed_at || '';
-      if (!s || isNaN(Date.parse(s))) {
+      const s = Number.isFinite(it.closed_at)
+        ? /** @type {number} */ (it.closed_at)
+        : NaN;
+      if (!Number.isFinite(s)) {
         return false;
       }
-      const t = Date.parse(s);
-      return t >= since_ts;
+      return s >= since_ts;
     });
-    sortByClosedDesc(items);
+    items.sort(cmpClosedDesc);
     list_closed = items;
   }
 
@@ -425,85 +385,147 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     }
   }
 
-  return {
-    async load() {
-      /** @type {IssueLite[]} */
-      let o = [];
-      /** @type {IssueLite[]} */
-      let r = [];
-      /** @type {IssueLite[]} */
-      let b = [];
-      /** @type {IssueLite[]} */
-      let p = [];
-      /** @type {IssueLite[]} */
-      let c = [];
-      try {
-        o = /** @type {any} */ (await data.getOpen());
-      } catch {
-        o = [];
-      }
-      try {
-        r = /** @type {any} */ (await data.getReady());
-      } catch {
-        r = [];
-      }
-      try {
-        // getBlocked is optional for backward compatibility in tests
-        const fn = /** @type {any} */ (data).getBlocked;
-        b = typeof fn === 'function' ? /** @type {any} */ (await fn()) : [];
-      } catch {
-        b = [];
-      }
-      try {
-        p = /** @type {any} */ (await data.getInProgress());
-      } catch {
-        p = [];
-      }
-      try {
-        c = /** @type {any} */ (await data.getClosed());
-      } catch {
-        c = [];
-      }
+  /**
+   * Compose lists from subscriptions + issues store and render.
+   */
+  function refreshFromStores() {
+    try {
+      if (selectors) {
+        const in_progress = selectors.selectBoardColumn(
+          'tab:board:in-progress',
+          'in_progress'
+        );
+        const blocked = selectors.selectBoardColumn(
+          'tab:board:blocked',
+          'blocked'
+        );
+        const ready_raw = selectors.selectBoardColumn(
+          'tab:board:ready',
+          'ready'
+        );
+        const closed = selectors.selectBoardColumn(
+          'tab:board:closed',
+          'closed'
+        );
 
-      // Remove items from Open that are already in Ready by id
-      if (o.length > 0 && r.length > 0) {
+        // Ready excludes items that are in progress
         /** @type {Set<string>} */
-        const ready_ids = new Set(r.map((it) => it.id));
-        o = o.filter((it) => !ready_ids.has(it.id));
-      }
+        const in_prog_ids = new Set(in_progress.map((i) => i.id));
+        const ready = ready_raw.filter((i) => !in_prog_ids.has(i.id));
 
-      // Remove items from Open that are blocked (UI-121)
-      if (o.length > 0 && b.length > 0) {
-        /** @type {Set<string>} */
-        const blocked_ids = new Set(b.map((it) => it.id));
-        o = o.filter((it) => !blocked_ids.has(it.id));
+        list_ready = ready;
+        list_blocked = blocked;
+        list_in_progress = in_progress;
+        list_closed_raw = closed;
       }
+      applyClosedFilter();
+      doRender();
+    } catch {
+      list_ready = [];
+      list_blocked = [];
+      list_in_progress = [];
+      list_closed = [];
+      doRender();
+    }
+  }
 
-      // Remove items from Ready that are already In Progress by id
-      if (r.length > 0 && p.length > 0) {
-        /** @type {Set<string>} */
-        const in_progress_ids = new Set(p.map((it) => it.id));
-        r = r.filter((it) => !in_progress_ids.has(it.id));
+  // Live updates: recompose on issue store envelopes
+  if (selectors) {
+    selectors.subscribe(() => {
+      try {
+        refreshFromStores();
+      } catch {
+        // ignore
       }
+    });
+  }
 
-      // UI-119: Open sorted like Ready (priority asc, then updated desc)
-      sortReady(o);
-      sortReady(r);
-      sortReady(b);
-      sortByUpdatedDesc(p);
-      // Closed handled separately to use closed_at and filtering
+  return {
+    async load() {
+      // Compose lists from subscriptions + issues store
+      refreshFromStores();
+      // If nothing is present yet (e.g., immediately after switching back
+      // to the Board and before list-delta arrives), fetch via data layer as
+      // a fallback so the board is not empty on initial display.
+      try {
+        const has_subs = Boolean(subscriptions && subscriptions.selectors);
+        /**
+         * @param {string} id
+         */
+        const cnt = (id) => {
+          if (!has_subs || !subscriptions) {
+            return 0;
+          }
+          const sel = subscriptions.selectors;
+          if (typeof sel.count === 'function') {
+            return Number(sel.count(id) || 0);
+          }
+          try {
+            const arr = sel.getIds(id);
+            return Array.isArray(arr) ? arr.length : 0;
+          } catch {
+            return 0;
+          }
+        };
+        const total_items =
+          cnt('tab:board:ready') +
+          cnt('tab:board:blocked') +
+          cnt('tab:board:in-progress') +
+          cnt('tab:board:closed');
+        const data = /** @type {any} */ (_data);
+        const can_fetch =
+          data &&
+          typeof data.getReady === 'function' &&
+          typeof data.getBlocked === 'function' &&
+          typeof data.getInProgress === 'function' &&
+          typeof data.getClosed === 'function';
+        if (total_items === 0 && can_fetch) {
+          /** @type {[IssueLite[], IssueLite[], IssueLite[], IssueLite[]]} */
+          const [ready_raw, blocked_raw, in_prog_raw, closed_raw] =
+            await Promise.all([
+              data.getReady().catch(() => []),
+              data.getBlocked().catch(() => []),
+              data.getInProgress().catch(() => []),
+              data.getClosed().catch(() => [])
+            ]);
+          // Normalize and map unknowns to IssueLite shape
+          /** @type {IssueLite[]} */
+          let ready = Array.isArray(ready_raw) ? ready_raw.map((it) => it) : [];
+          /** @type {IssueLite[]} */
+          const blocked = Array.isArray(blocked_raw)
+            ? blocked_raw.map((it) => it)
+            : [];
+          /** @type {IssueLite[]} */
+          const in_prog = Array.isArray(in_prog_raw)
+            ? in_prog_raw.map((it) => it)
+            : [];
+          /** @type {IssueLite[]} */
+          const closed = Array.isArray(closed_raw)
+            ? closed_raw.map((it) => it)
+            : [];
 
-      list_open = o;
-      list_ready = r;
-      list_blocked = b;
-      list_in_progress = p;
-      list_closed_raw = c;
-      applyClosedFilter();
-      doRender();
+          // Remove items from Ready that are already In Progress
+          /** @type {Set<string>} */
+          const in_progress_ids = new Set(in_prog.map((i) => i.id));
+          ready = ready.filter((i) => !in_progress_ids.has(i.id));
+
+          // Sort as per column rules
+          ready.sort(cmpPriorityThenCreated);
+          blocked.sort(cmpPriorityThenCreated);
+          in_prog.sort(cmpPriorityThenCreated);
+          list_ready = ready;
+          list_blocked = blocked;
+          list_in_progress = in_prog;
+          list_closed_raw = closed;
+          applyClosedFilter();
+          doRender();
+        }
+      } catch {
+        // ignore fallback errors
+      }
     },
     clear() {
       mount_element.replaceChildren();
-      list_open = [];
       list_ready = [];
       list_blocked = [];
       list_in_progress = [];