beads-ui 0.1.0

package/app/utils/issue-id.js

@@ -0,0 +1,10 @@
+/**
+ * Format a beads issue id as a user-facing display string `#${n}`.
+ * Extracts the trailing numeric portion of the id and prefixes with '#'.
+ * @param {string | null | undefined} id
+ * @returns {string}
+ */
+export function issueDisplayId(id) {
+  const m = String(id || '').match(/(\d+)$/);
+  return m ? `#${m[1]}` : '#';
+}

package/app/utils/issue-type.js

@@ -0,0 +1,27 @@
+/**
+ * Known issue types in canonical order for dropdowns.
+ * @type {Array<'bug'|'feature'|'task'|'epic'|'chore'>}
+ */
+export const ISSUE_TYPES = ['bug', 'feature', 'task', 'epic', 'chore'];
+
+/**
+ * Return a human-friendly label for an issue type.
+ * @param {string | null | undefined} type
+ * @returns {string}
+ */
+export function typeLabel(type) {
+  switch ((type || '').toString().toLowerCase()) {
+    case 'bug':
+      return 'Bug';
+    case 'feature':
+      return 'Feature';
+    case 'task':
+      return 'Task';
+    case 'epic':
+      return 'Epic';
+    case 'chore':
+      return 'Chore';
+    default:
+      return '';
+  }
+}

package/app/utils/markdown.js

@@ -0,0 +1,201 @@
+/**
+ * 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.
+ * @function renderMarkdown
+ * @param {string} src Markdown source text
+ * @returns {DocumentFragment}
+ */
+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)));
+    }
+  }
+}

package/app/utils/markdown.test.js

@@ -0,0 +1,103 @@
+import { describe, expect, test } from 'vitest';
+import { renderMarkdown } from './markdown.js';
+
+describe('utils/markdown', () => {
+  test('returns fragment for empty input', () => {
+    const frag = renderMarkdown('');
+
+    expect(frag).toBeInstanceOf(DocumentFragment);
+  });
+
+  test('renders headings', () => {
+    const frag = renderMarkdown('# Title\n\n### Sub');
+    const host = document.createElement('div');
+
+    host.appendChild(frag);
+
+    const h1 = /** @type {HTMLHeadingElement} */ (host.querySelector('h1'));
+    const h3 = /** @type {HTMLHeadingElement} */ (host.querySelector('h3'));
+    expect(h1.textContent).toBe('Title');
+    expect(h3.textContent).toBe('Sub');
+  });
+
+  test('renders paragraphs with and without blank lines', () => {
+    const frag = renderMarkdown('First line\ncontinues\n\nSecond para');
+    const host = document.createElement('div');
+
+    host.appendChild(frag);
+
+    const ps = host.querySelectorAll('p');
+    expect(ps.length).toBe(2);
+    expect(ps[0].textContent).toBe('First line continues');
+    expect(ps[1].textContent).toBe('Second para');
+  });
+
+  test('renders unordered list items', () => {
+    const frag = renderMarkdown('- a\n- b');
+    const host = document.createElement('div');
+
+    host.appendChild(frag);
+
+    const items = host.querySelectorAll('ul li');
+    expect(items.length).toBe(2);
+    expect(items[0].textContent).toBe('a');
+    expect(items[1].textContent).toBe('b');
+  });
+
+  test('renders ordered list items', () => {
+    const frag = renderMarkdown('1. a\n2. b');
+    const host = document.createElement('div');
+
+    host.appendChild(frag);
+
+    const items = host.querySelectorAll('ol li');
+    expect(items.length).toBe(2);
+    expect(items[0].textContent).toBe('a');
+    expect(items[1].textContent).toBe('b');
+  });
+
+  test('renders fenced code block', () => {
+    const frag = renderMarkdown('```\nline1\nline2\n```');
+    const host = document.createElement('div');
+
+    host.appendChild(frag);
+
+    const code = /** @type {HTMLElement} */ (host.querySelector('pre > code'));
+    expect(code.textContent).toBe('line1\nline2');
+  });
+
+  test('renders inline code', () => {
+    const frag = renderMarkdown('text `code` end');
+    const host = document.createElement('div');
+
+    host.appendChild(frag);
+
+    const code = /** @type {HTMLElement} */ (host.querySelector('p code'));
+    expect(code.textContent).toBe('code');
+  });
+
+  test('renders http and mailto links', () => {
+    const frag = renderMarkdown(
+      '[web](https://example.com) and [mail](mailto:test@example.com)'
+    );
+    const host = document.createElement('div');
+
+    host.appendChild(frag);
+
+    const hrefs = Array.from(host.querySelectorAll('a')).map((a) =>
+      a.getAttribute('href')
+    );
+    expect(hrefs).toEqual(['https://example.com', 'mailto:test@example.com']);
+  });
+
+  test('filters unsafe link schemes', () => {
+    const frag = renderMarkdown('x [danger](javascript:alert(1)) y');
+    const host = document.createElement('div');
+
+    host.appendChild(frag);
+
+    const anchors = host.querySelectorAll('a');
+    expect(anchors.length).toBe(0);
+    expect(host.textContent || '').toContain('danger (javascript:alert(1))');
+  });
+});

package/app/utils/priority-badge.js

@@ -0,0 +1,49 @@
+import { priority_levels } from './priority.js';
+
+/**
+ * Create a colored badge for a priority value (0..4).
+ * @param {number | null | undefined} priority
+ * @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))}`);
+  el.setAttribute('role', 'img');
+  const label = labelForPriority(p);
+  el.setAttribute('title', label);
+  el.setAttribute('aria-label', `Priority: ${label}`);
+  el.textContent = emojiForPriority(p) + ' ' + label;
+  return el;
+}
+
+/**
+ * @param {number} p
+ */
+function labelForPriority(p) {
+  const i = Math.max(0, Math.min(4, p));
+  return priority_levels[i] || 'Medium';
+}
+
+/**
+ * @param {number} p
+ */
+export function emojiForPriority(p) {
+  switch (p) {
+    case 0:
+      return '🔥';
+    case 1:
+      return '⚡️';
+    case 2:
+      return '🔧';
+    case 3:
+      return '🪶';
+    case 4:
+      return '💤';
+    default:
+      return '🔧';
+  }
+}

package/app/utils/priority.js

@@ -0,0 +1 @@
+export const priority_levels = ['Critical', 'High', 'Medium', 'Low', 'Backlog'];

package/app/utils/status-badge.js

@@ -0,0 +1,33 @@
+/**
+ * Create a colored badge for a status value.
+ * @param {string | null | undefined} status - 'open' | 'in_progress' | 'closed'
+ * @returns {HTMLSpanElement}
+ */
+export function createStatusBadge(status) {
+  /** @type {HTMLSpanElement} */
+  const el = document.createElement('span');
+  el.className = 'status-badge';
+  const s = String(status || 'open');
+  el.classList.add(`is-${s}`);
+  el.setAttribute('role', 'img');
+  el.setAttribute('title', labelForStatus(s));
+  el.setAttribute('aria-label', `Status: ${labelForStatus(s)}`);
+  el.textContent = labelForStatus(s);
+  return el;
+}
+
+/**
+ * @param {string} s
+ */
+function labelForStatus(s) {
+  switch (s) {
+    case 'open':
+      return 'Open';
+    case 'in_progress':
+      return 'In progress';
+    case 'closed':
+      return 'Closed';
+    default:
+      return 'Unknown';
+  }
+}

package/app/utils/status.js

@@ -0,0 +1,23 @@
+/**
+ * Known status values in canonical order.
+ * @type {Array<'open'|'in_progress'|'closed'>}
+ */
+export const STATUSES = ['open', 'in_progress', 'closed'];
+
+/**
+ * Map canonical status to display label.
+ * @param {string | null | undefined} status
+ * @returns {string}
+ */
+export function statusLabel(status) {
+  switch ((status || '').toString()) {
+    case 'open':
+      return 'Open';
+    case 'in_progress':
+      return 'In progress';
+    case 'closed':
+      return 'Closed';
+    default:
+      return (status || '').toString() || 'Open';
+  }
+}

package/app/utils/type-badge.js

@@ -0,0 +1,36 @@
+/**
+ * Create a compact, colored badge for an issue type.
+ * @param {string | undefined | null} issue_type - One of: bug, feature, task, epic, chore
+ * @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}`);
+  el.setAttribute('role', 'img');
+  const label = KNOWN.has(t)
+    ? t === 'bug'
+      ? 'Bug'
+      : t === 'feature'
+        ? 'Feature'
+        : t === 'task'
+          ? 'Task'
+          : t === 'epic'
+            ? 'Epic'
+            : 'Chore'
+    : '—';
+  el.setAttribute(
+    'aria-label',
+    KNOWN.has(t) ? `Issue type: ${label}` : 'Issue type: unknown'
+  );
+  el.setAttribute('title', KNOWN.has(t) ? `Type: ${label}` : 'Type: unknown');
+  el.textContent = label;
+  return el;
+}

package/app/utils/type-badge.test.js

@@ -0,0 +1,30 @@
+import { describe, expect, test } from 'vitest';
+import { createTypeBadge } from './type-badge.js';
+
+describe('utils/type-badge', () => {
+  test('renders known types with modifier class and accessible labels', () => {
+    const types = [
+      ['bug', 'Bug'],
+      ['feature', 'Feature'],
+      ['task', 'Task'],
+      ['epic', 'Epic'],
+      ['chore', 'Chore']
+    ];
+    for (const [t, label] of /** @type {any[]} */ (types)) {
+      const el = createTypeBadge(t);
+      expect(el.classList.contains('type-badge')).toBe(true);
+      expect(el.classList.contains(`type-badge--${t}`)).toBe(true);
+      expect(el.getAttribute('role')).toBe('img');
+      const aria = el.getAttribute('aria-label') || '';
+      expect(aria.toLowerCase()).toContain('issue type');
+      expect(aria).toContain(label);
+      expect(el.textContent).toBe(label);
+    }
+  });
+
+  test('falls back to neutral for unknown types', () => {
+    const el = createTypeBadge('unknown');
+    expect(el.classList.contains('type-badge--neutral')).toBe(true);
+    expect(el.textContent).toBe('—');
+  });
+});