beads-ui 0.1.0

package/app/views/board.js

@@ -0,0 +1,183 @@
+import { html, render } from 'lit-html';
+import { issueDisplayId } from '../utils/issue-id.js';
+import { createPriorityBadge } from '../utils/priority-badge.js';
+import { createTypeBadge } from '../utils/type-badge.js';
+
+/**
+ * @typedef {{ id: string, title?: string, status?: 'open'|'in_progress'|'closed', priority?: number, issue_type?: string, updated_at?: string }} IssueLite
+ */
+
+/**
+ * Create the Board view with four columns: Open, Ready, In progress, Closed.
+ * Data providers are expected to return raw arrays; this view applies sorting.
+ *
+ * Sorting rules:
+ * - Open: updated_at desc
+ * - Ready: priority asc, then updated_at desc when present
+ * - In progress: updated_at desc
+ * - Closed: updated_at desc
+ * @param {HTMLElement} mount_element
+ * @param {{ getOpen: () => Promise<any[]>, getReady: () => Promise<any[]>, getInProgress: () => Promise<any[]>, getClosed: (limit?: number) => Promise<any[]> }} data
+ * @param {(id: string) => void} goto_issue - Navigate to issue detail.
+ * @returns {{ load: () => Promise<void>, clear: () => void }}
+ */
+export function createBoardView(mount_element, data, goto_issue) {
+  /** @type {IssueLite[]} */
+  let list_open = [];
+  /** @type {IssueLite[]} */
+  let list_ready = [];
+  /** @type {IssueLite[]} */
+  let list_in_progress = [];
+  /** @type {IssueLite[]} */
+  let list_closed = [];
+
+  function template() {
+    return html`
+      <div class="panel__body board-root">
+        ${columnTemplate('Open', 'open-col', list_open)}
+        ${columnTemplate('Ready', 'ready-col', list_ready)}
+        ${columnTemplate('In Progress', 'in-progress-col', list_in_progress)}
+        ${columnTemplate('Closed', 'closed-col', list_closed)}
+      </div>
+    `;
+  }
+
+  /**
+   * @param {string} title
+   * @param {string} id
+   * @param {IssueLite[]} items
+   */
+  function columnTemplate(title, id, items) {
+    return html`
+      <section class="board-column" id=${id}>
+        <header class="board-column__header" role="heading" aria-level="2">
+          ${title}
+        </header>
+        <div class="board-column__body">
+          ${items.map((it) => cardTemplate(it))}
+        </div>
+      </section>
+    `;
+  }
+
+  /**
+   * @param {IssueLite} it
+   */
+  function cardTemplate(it) {
+    return html`
+      <article
+        class="board-card"
+        data-issue-id=${it.id}
+        @click=${() => goto_issue(it.id)}
+      >
+        <div class="board-card__title text-truncate">
+          ${it.title || '(no title)'}
+        </div>
+        <div class="board-card__meta">
+          ${createTypeBadge(/** @type {any} */ (it).issue_type)}
+          ${createPriorityBadge(/** @type {any} */ (it).priority)}
+          <span class="mono">${issueDisplayId(it.id)}</span>
+        </div>
+      </article>
+    `;
+  }
+
+  function doRender() {
+    render(template(), mount_element);
+  }
+
+  /**
+   * 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;
+    });
+  }
+
+  return {
+    async load() {
+      /** @type {IssueLite[]} */
+      let o = [];
+      /** @type {IssueLite[]} */
+      let r = [];
+      /** @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 {
+        p = /** @type {any} */ (await data.getInProgress());
+      } catch {
+        p = [];
+      }
+      try {
+        c = /** @type {any} */ (await data.getClosed());
+      } catch {
+        c = [];
+      }
+
+      // Remove items from Open that are already in Ready by id
+      if (o.length > 0 && r.length > 0) {
+        /** @type {Set<string>} */
+        const ready_ids = new Set(r.map((it) => it.id));
+        o = o.filter((it) => !ready_ids.has(it.id));
+      }
+
+      // 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));
+      }
+
+      sortByUpdatedDesc(o);
+      sortReady(r);
+      sortByUpdatedDesc(p);
+      sortByUpdatedDesc(c);
+
+      list_open = o;
+      list_ready = r;
+      list_in_progress = p;
+      list_closed = c;
+      doRender();
+    },
+    clear() {
+      mount_element.replaceChildren();
+      list_open = [];
+      list_ready = [];
+      list_in_progress = [];
+      list_closed = [];
+    }
+  };
+}

package/app/views/board.test.js

@@ -0,0 +1,184 @@
+import { describe, expect, test } from 'vitest';
+import { createBoardView } from './board.js';
+
+describe('views/board', () => {
+  test('renders four columns with sorted cards and navigates on click', async () => {
+    document.body.innerHTML = '<div id="m"></div>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
+
+    /** @type {{ getOpen: () => Promise<any[]>, getReady: () => Promise<any[]>, getInProgress: () => Promise<any[]>, getClosed: () => Promise<any[]> }} */
+    const data = {
+      async getOpen() {
+        return [
+          {
+            id: 'O-1',
+            title: 'o1',
+            updated_at: '2025-10-23T07:00:00.000Z',
+            issue_type: 'task'
+          },
+          {
+            id: 'R-2', // also present in Ready, should be filtered from Open
+            title: 'dup-ready',
+            updated_at: '2025-10-22T07:00:00.000Z',
+            issue_type: 'task'
+          }
+        ];
+      },
+      async getReady() {
+        return [
+          {
+            id: 'R-2',
+            title: 'r2',
+            priority: 1,
+            updated_at: '2025-10-20T08:00:00.000Z',
+            issue_type: 'task'
+          },
+          {
+            id: 'R-1',
+            title: 'r1',
+            priority: 0,
+            updated_at: '2025-10-21T08:00:00.000Z',
+            issue_type: 'bug'
+          },
+          {
+            id: 'R-3',
+            title: 'r3',
+            priority: 1,
+            updated_at: '2025-10-22T08:00:00.000Z',
+            issue_type: 'feature'
+          }
+        ];
+      },
+      async getInProgress() {
+        return [
+          {
+            id: 'P-1',
+            title: 'p1',
+            updated_at: '2025-10-23T09:00:00.000Z',
+            issue_type: 'task'
+          },
+          {
+            id: 'P-2',
+            title: 'p2',
+            updated_at: '2025-10-22T09:00:00.000Z',
+            issue_type: 'feature'
+          }
+        ];
+      },
+      async getClosed() {
+        return [
+          {
+            id: 'C-2',
+            title: 'c2',
+            updated_at: '2025-10-20T09:00:00.000Z',
+            issue_type: 'task'
+          },
+          {
+            id: 'C-1',
+            title: 'c1',
+            updated_at: '2025-10-21T09:00:00.000Z',
+            issue_type: 'bug'
+          }
+        ];
+      }
+    };
+
+    /** @type {string[]} */
+    const navigations = [];
+    const view = createBoardView(mount, /** @type {any} */ (data), (id) => {
+      navigations.push(id);
+    });
+
+    await view.load();
+
+    // Open: updated_at desc; excludes items present in Ready
+    const open_ids = Array.from(
+      mount.querySelectorAll('#open-col .board-card .mono')
+    ).map((el) => el.textContent?.trim());
+    expect(open_ids).toEqual(['#1']);
+
+    // Ready: priority asc, then updated_at desc for equal priority
+    const ready_ids = Array.from(
+      mount.querySelectorAll('#ready-col .board-card .mono')
+    ).map((el) => el.textContent?.trim());
+    expect(ready_ids).toEqual(['#1', '#3', '#2']);
+
+    // In progress: updated_at desc
+    const prog_ids = Array.from(
+      mount.querySelectorAll('#in-progress-col .board-card .mono')
+    ).map((el) => el.textContent?.trim());
+    expect(prog_ids).toEqual(['#1', '#2']);
+
+    // Closed: updated_at desc
+    const closed_ids = Array.from(
+      mount.querySelectorAll('#closed-col .board-card .mono')
+    ).map((el) => el.textContent?.trim());
+    expect(closed_ids).toEqual(['#1', '#2']);
+
+    // Click navigates
+    const first_ready = /** @type {HTMLElement|null} */ (
+      mount.querySelector('#ready-col .board-card')
+    );
+    first_ready?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    expect(navigations[0]).toBe('R-1');
+  });
+
+  test('filters Ready to exclude items that are In Progress', async () => {
+    document.body.innerHTML = '<div id="m"></div>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('m'));
+
+    /** @type {{ getOpen: () => Promise<any[]>, getReady: () => Promise<any[]>, getInProgress: () => Promise<any[]>, getClosed: () => Promise<any[]> }} */
+    const data = {
+      async getOpen() {
+        return [];
+      },
+      async getReady() {
+        return [
+          {
+            id: 'X-1',
+            title: 'x1',
+            priority: 1,
+            updated_at: '2025-10-23T10:00:00.000Z',
+            issue_type: 'task'
+          },
+          {
+            id: 'X-2',
+            title: 'x2',
+            priority: 1,
+            updated_at: '2025-10-23T09:00:00.000Z',
+            issue_type: 'task'
+          }
+        ];
+      },
+      async getInProgress() {
+        return [
+          {
+            id: 'X-2',
+            title: 'x2',
+            updated_at: '2025-10-23T11:00:00.000Z',
+            issue_type: 'task'
+          }
+        ];
+      },
+      async getClosed() {
+        return [];
+      }
+    };
+
+    const view = createBoardView(mount, /** @type {any} */ (data), () => {});
+
+    await view.load();
+
+    const ready_ids = Array.from(
+      mount.querySelectorAll('#ready-col .board-card .mono')
+    ).map((el) => el.textContent?.trim());
+
+    // X-2 is in progress, so Ready should only show X-1
+    expect(ready_ids).toEqual(['#1']);
+
+    const prog_ids = Array.from(
+      mount.querySelectorAll('#in-progress-col .board-card .mono')
+    ).map((el) => el.textContent?.trim());
+    expect(prog_ids).toEqual(['#2']);
+  });
+});

package/app/views/detail.acceptance-notes.test.js

@@ -0,0 +1,67 @@
+import { describe, expect, test } from 'vitest';
+import { createDetailView } from './detail.js';
+
+/** @type {(map: Record<string, any>) => (type: string, payload?: unknown) => Promise<any>} */
+const stubSend = (map) => async (type, payload) => {
+  if (type !== 'show-issue') {
+    throw new Error('Unexpected type');
+  }
+  const id = /** @type {any} */ (payload).id;
+  return map[id] || null;
+};
+
+describe('views/detail acceptance + notes', () => {
+  test('renders acceptance from acceptance_criteria and notes markdown', async () => {
+    document.body.innerHTML =
+      '<section class="panel"><div id="mount"></div></section>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
+
+    /** @type {any} */
+    const issue = {
+      id: 'UI-71',
+      title: 'Has acceptance + notes',
+      acceptance_criteria: '- step A\n- step B',
+      notes: 'Plain note text',
+      status: 'open',
+      priority: 2
+    };
+
+    const view = createDetailView(mount, stubSend({ 'UI-71': issue }));
+    await view.load('UI-71');
+
+    const accTitle = mount.querySelector('.acceptance .props-card__title');
+    expect(accTitle && accTitle.textContent).toBe('Acceptance');
+    const accMd = mount.querySelector('.acceptance .md');
+    expect(accMd && (accMd.textContent || '').toLowerCase()).toContain(
+      'step a'
+    );
+
+    const notesTitle = mount.querySelector('.notes .props-card__title');
+    expect(notesTitle && notesTitle.textContent).toBe('Notes');
+    const notesMd = mount.querySelector('.notes .md');
+    expect(notesMd && (notesMd.textContent || '')).toContain('Plain note text');
+  });
+
+  test('gates headings when acceptance and notes are empty', async () => {
+    document.body.innerHTML =
+      '<section class="panel"><div id="mount"></div></section>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
+
+    /** @type {any} */
+    const issue = {
+      id: 'UI-72',
+      title: 'No acceptance/notes',
+      acceptance_criteria: '',
+      notes: '',
+      status: 'open',
+      priority: 2
+    };
+
+    const view = createDetailView(mount, stubSend({ 'UI-72': issue }));
+    await view.load('UI-72');
+
+    // Headings should not be present
+    expect(mount.querySelector('.acceptance .props-card__title')).toBeNull();
+    expect(mount.querySelector('.notes .props-card__title')).toBeNull();
+  });
+});

package/app/views/detail.assignee.test.js

@@ -0,0 +1,161 @@
+import { describe, expect, test, vi } from 'vitest';
+import { createDetailView } from './detail.js';
+
+/** @type {(impl: (type: string, payload?: unknown) => Promise<any>) => (type: string, payload?: unknown) => Promise<any>} */
+const mockSend = (impl) => vi.fn(impl);
+
+describe('views/detail assignee edit', () => {
+  test('edits assignee via Properties control', async () => {
+    document.body.innerHTML =
+      '<section class="panel"><div id="mount"></div></section>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
+
+    const issue = {
+      id: 'UI-57',
+      title: 'Detail screen',
+      description: '',
+      status: 'open',
+      priority: 2,
+      assignee: 'alice',
+      dependencies: [],
+      dependents: []
+    };
+
+    const send = mockSend(async (type, payload) => {
+      if (type === 'show-issue') {
+        return issue;
+      }
+      if (type === 'update-assignee') {
+        expect(payload).toEqual({ id: 'UI-57', assignee: 'max' });
+        const next = { ...issue, assignee: 'max' };
+        return next;
+      }
+      throw new Error('Unexpected');
+    });
+
+    const view = createDetailView(mount, send);
+    await view.load('UI-57');
+
+    const assigneeSpan = /** @type {HTMLSpanElement} */ (
+      mount.querySelector('#detail-root .prop.assignee .value .editable')
+    );
+    expect(assigneeSpan).toBeTruthy();
+    expect(assigneeSpan.textContent).toBe('alice');
+
+    assigneeSpan.click();
+    const input = /** @type {HTMLInputElement} */ (
+      mount.querySelector('#detail-root .prop.assignee input')
+    );
+    const saveBtn = /** @type {HTMLButtonElement} */ (
+      mount.querySelector('#detail-root .prop.assignee button')
+    );
+    input.value = 'max';
+    saveBtn.click();
+
+    await Promise.resolve();
+
+    const assigneeSpan2 = /** @type {HTMLSpanElement} */ (
+      mount.querySelector('#detail-root .prop.assignee .value .editable')
+    );
+    expect(assigneeSpan2.textContent).toBe('max');
+  });
+
+  test('shows editable placeholder when unassigned', async () => {
+    document.body.innerHTML =
+      '<section class="panel"><div id="mount"></div></section>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
+
+    const issue = {
+      id: 'UI-88',
+      title: 'No assignee yet',
+      description: '',
+      status: 'open',
+      priority: 2,
+      // no assignee field
+      dependencies: [],
+      dependents: []
+    };
+
+    const send = mockSend(async (type, payload) => {
+      if (type === 'show-issue') {
+        return issue;
+      }
+      if (type === 'update-assignee') {
+        const next = {
+          ...issue,
+          assignee: /** @type {any} */ (payload).assignee
+        };
+        return next;
+      }
+      throw new Error('Unexpected');
+    });
+
+    const view = createDetailView(mount, send);
+    await view.load('UI-88');
+
+    const ph = /** @type {HTMLSpanElement} */ (
+      mount.querySelector('#detail-root .prop.assignee .value .editable')
+    );
+    expect(ph).toBeTruthy();
+    expect(ph.className).toContain('muted');
+    expect(ph.textContent).toBe('Unassigned');
+
+    ph.click();
+    const input = /** @type {HTMLInputElement} */ (
+      mount.querySelector('#detail-root .prop.assignee input')
+    );
+    expect(input).toBeTruthy();
+  });
+
+  test('clears assignee to empty string and shows placeholder', async () => {
+    document.body.innerHTML =
+      '<section class="panel"><div id="mount"></div></section>';
+    const mount = /** @type {HTMLElement} */ (document.getElementById('mount'));
+
+    const issue = {
+      id: 'UI-31',
+      title: 'Clearable',
+      status: 'open',
+      priority: 2,
+      assignee: 'bob',
+      dependencies: [],
+      dependents: []
+    };
+
+    const send = mockSend(async (type, payload) => {
+      if (type === 'show-issue') {
+        return issue;
+      }
+      if (type === 'update-assignee') {
+        const next = {
+          ...issue,
+          assignee: /** @type {any} */ (payload).assignee
+        };
+        return next;
+      }
+      throw new Error('Unexpected');
+    });
+
+    const view = createDetailView(mount, send);
+    await view.load('UI-31');
+
+    const span = /** @type {HTMLSpanElement} */ (
+      mount.querySelector('#detail-root .prop.assignee .value .editable')
+    );
+    span.click();
+    const input = /** @type {HTMLInputElement} */ (
+      mount.querySelector('#detail-root .prop.assignee input')
+    );
+    const save = /** @type {HTMLButtonElement} */ (
+      mount.querySelector('#detail-root .prop.assignee button')
+    );
+    input.value = '';
+    save.click();
+    await Promise.resolve();
+    const span2 = /** @type {HTMLSpanElement} */ (
+      mount.querySelector('#detail-root .prop.assignee .value .editable')
+    );
+    expect(span2.textContent).toBe('Unassigned');
+    expect(span2.className).toContain('muted');
+  });
+});

package/app/views/detail.deps.test.js

@@ -0,0 +1,97 @@
+import { describe, expect, test, vi } from 'vitest';
+import { createDetailView } from './detail.js';
+
+function setupDom() {
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+  return root;
+}
+
+describe('views/detail dependencies', () => {
+  test('adds Dependencies link and re-renders', async () => {
+    const mount = setupDom();
+    const send = vi
+      .fn()
+      // initial show
+      .mockResolvedValueOnce({
+        id: 'UI-10',
+        title: 'X',
+        dependencies: [],
+        dependents: []
+      })
+      // dep-add returns updated issue
+      .mockResolvedValueOnce({
+        id: 'UI-10',
+        dependencies: [{ id: 'UI-2' }],
+        dependents: []
+      });
+    const view = createDetailView(mount, /** @type {any} */ (send));
+    await view.load('UI-10');
+
+    const input = mount.querySelector('[data-testid="add-dependency"]');
+    expect(input).toBeTruthy();
+    /** @type {HTMLInputElement} */
+    const el = /** @type {any} */ (input);
+    el.value = 'UI-2';
+    const addBtn = el.nextElementSibling;
+    addBtn?.dispatchEvent(new window.Event('click'));
+
+    // Next tick
+    await Promise.resolve();
+
+    // Should have called dep-add
+    const calls = send.mock.calls.map((c) => c[0]);
+    expect(calls.includes('dep-add')).toBe(true);
+  });
+
+  test('removes Blocks link', async () => {
+    const mount = setupDom();
+    const send = vi
+      .fn()
+      // initial show
+      .mockResolvedValueOnce({
+        id: 'UI-20',
+        title: 'Y',
+        dependencies: [],
+        dependents: [{ id: 'UI-5' }]
+      })
+      // dep-remove returns updated issue
+      .mockResolvedValueOnce({ id: 'UI-20', dependencies: [], dependents: [] });
+    const view = createDetailView(mount, /** @type {any} */ (send));
+    await view.load('UI-20');
+
+    // Find the remove button next to link #5
+    const btns = mount.querySelectorAll('button');
+    const rm = Array.from(btns).find((b) =>
+      b.getAttribute('aria-label')?.includes('#5')
+    );
+    expect(rm).toBeTruthy();
+    rm?.dispatchEvent(new window.Event('click'));
+
+    await Promise.resolve();
+    const calls = send.mock.calls.map((c) => c[0]);
+    expect(calls.includes('dep-remove')).toBe(true);
+  });
+
+  test('prevents duplicate link add', async () => {
+    const mount = setupDom();
+    const send = vi.fn().mockResolvedValueOnce({
+      id: 'UI-30',
+      dependencies: [{ id: 'UI-9' }],
+      dependents: []
+    });
+    const view = createDetailView(mount, /** @type {any} */ (send));
+    await view.load('UI-30');
+
+    const input = mount.querySelector('[data-testid="add-dependency"]');
+    const el = /** @type {HTMLInputElement} */ (/** @type {any} */ (input));
+    el.value = 'UI-9';
+    const addBtn = el.nextElementSibling;
+    addBtn?.dispatchEvent(new window.Event('click'));
+
+    await Promise.resolve();
+    // send should not be called with dep-add
+    const calls = send.mock.calls.map((c) => c[0]);
+    expect(calls.includes('dep-add')).toBe(false);
+  });
+});